/* ============================================================================
   sorties-voyages.css — LOT « Sorties · Voyages · Étapes · Demandes »
   Refonte app/PWA (2026-08). Habillage additif du DESIGN SYSTEM sombre.
   ----------------------------------------------------------------------------
   • CIBLE : version APP mobile UNIQUEMENT. Chaque règle est préfixée
     html.apprefonte ET enfermée dans @media (max-width:768px) → le BUREAU
     (> 768 px) et les pages hors mode refonte ne changent JAMAIS.
   • 100 % ADDITIF & RÉVERSIBLE : aucune logique, requête, CSRF ni permission
     touchée. On ne fait que RE-HABILLER des classes DOM existantes.
   • RÉUTILISE les tokens de app-refonte.css (--ar-*). On n'en redéfinit aucun.
   • PALETTE unique sombre : cyan = exploration, ambre = engagement (1 action
     pleine/écran), rouge = 112/destructif. Bleu / vert / violet / teal / brun /
     dégradés bannis → convertis vers cyan/ambre/tokens.
   • GARDIEN (.ai-*, .gw-*, gardien-*) et ÉTINCELLES : jamais touchés ici.
   • Beaucoup de cartes existantes portent des styles INLINE clairs (fonds
     blancs, texte brun, dégradés or) → override via !important ciblé.
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ==========================================================================
     0) COMMUN — en-têtes de page « verre dépoli » (Sorties v2 + Voyages)
        Les .vy-glasshead / .so-glasshead ont un fond BLANC translucide en
        inline → illisibles sur le thème app. On les repose à plat sur surface.
     ========================================================================== */
  html.apprefonte .vy-glasshead,
  html.apprefonte .so-glasshead {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
  }
  html.apprefonte .vy-glasshead .page-title,
  html.apprefonte .so-glasshead .page-title,
  html.apprefonte .page-title {
    font: 700 24px/1.18 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink) !important;
    letter-spacing: .2px;
  }
  html.apprefonte .vy-glasshead .page-subtitle,
  html.apprefonte .so-glasshead .page-subtitle,
  html.apprefonte .page-subtitle {
    font-size: 13.5px !important;
    color: var(--ar-ink-soft) !important;
    line-height: 1.5;
  }
  /* Liens « Sorties » / « Voyages » dans le sous-titre : brun inline → cyan. */
  html.apprefonte .vy-glasshead .page-subtitle a,
  html.apprefonte .so-glasshead .page-subtitle a,
  html.apprefonte .page-subtitle a { color: var(--ar-cyan) !important; }

  /* ==========================================================================
     1) ONGLETS / FILTRES (Sorties v1 .adm-tabs, v2 .sortie-filters,
        Voyages .voyage-filters) — pilules défilables, actif = cyan.
        Les états actifs inline en OR (#C9A45C) sont neutralisés.
     ========================================================================== */
  /* Rangée défilable sans passer à la ligne (gain de hauteur mobile). */
  html.apprefonte .adm-tabs,
  html.apprefonte .sortie-filters,
  html.apprefonte .voyage-filters {
    display: flex !important; gap: 8px !important;
    flex-wrap: nowrap !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 8px 0 18px !important; padding-bottom: 2px;
  }
  html.apprefonte .adm-tabs::-webkit-scrollbar,
  html.apprefonte .sortie-filters::-webkit-scrollbar,
  html.apprefonte .voyage-filters::-webkit-scrollbar { display: none; }

  /* Onglet / chip au repos. */
  html.apprefonte .adm-tab,
  html.apprefonte .sortie-filters .btn.btn-mini,
  html.apprefonte .voyage-filters .btn.btn-mini {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--ar-tap); padding: 0 15px !important;
    border-radius: var(--ar-r-pill) !important;
    background: var(--ar-surface-2) !important;
    color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-hairline) !important;
    font: 600 14px/1 'Inter', system-ui, sans-serif !important;
    text-decoration: none;
  }
  /* Onglet / chip ACTIF = cyan (exploration/navigation). */
  html.apprefonte .adm-tab.is-active,
  html.apprefonte .sortie-filters .btn.btn-mini.is-active,
  html.apprefonte .voyage-filters .btn.btn-mini.is-active,
  html.apprefonte .sortie-filters .btn.btn-mini[style*="C9A45C"],
  html.apprefonte .voyage-filters .btn.btn-mini[style*="C9A45C"] {
    background: var(--ar-cyan) !important;
    color: var(--ar-on-accent) !important;
    border-color: var(--ar-cyan) !important;
  }

  /* ==========================================================================
     2) SORTIES — vue LISTE (sortir.php)
     ========================================================================== */

  /* 2a) Layout principal v1 : featured + panneau créer → une seule colonne. */
  html.apprefonte .sortir-main-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important; margin-bottom: 22px !important;
  }

  /* 2b) Carte VEDETTE (hero photo + texte). Fond surface, coins app. */
  html.apprefonte .sortir-featured {
    border-radius: var(--ar-r-lg) !important;
    border: 1px solid var(--ar-hairline) !important;
    min-height: 220px !important;
  }

  /* 2c) Panneau « Créer une sortie » (.adm-card) : accent numéro/titre cyan. */
  html.apprefonte .adm-card-num {
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .adm-card-title { color: var(--ar-ink) !important; }

  /* 2d) Grille de cartes v1 : une colonne, cartes surface. */
  html.apprefonte .adm-grid.adm-grid-3 { grid-template-columns: 1fr !important; }
  html.apprefonte .sortir-card {
    border-radius: var(--ar-r-md) !important;
    border: 1px solid var(--ar-hairline) !important;
  }
  /* Le faux-bouton bas de carte « Rejoindre » : cyan (rejoindre = exploration). */
  html.apprefonte .sortir-card [style*="Rejoindre"],
  html.apprefonte .sortir-card span[style*="rgba(0,229,255"] {
    border-radius: var(--ar-r-sm) !important;
  }

  /* 2e) Titre de section « Prochaines sorties ». */
  html.apprefonte #liste h2 { color: var(--ar-ink-soft) !important; }

  /* ==========================================================================
     3) SORTIES v2 + cartes horizontales partagées (.so2-*, .voyage-grid.voyages-v2)
        Thème d'origine clair/brun → repassé en sombre. Toujours en 1 colonne.
     ========================================================================== */
  html.apprefonte .so2-page { grid-template-columns: 1fr !important; gap: 16px !important; }
  html.apprefonte .so2-side { position: static !important; }

  html.apprefonte .so2-lead { color: var(--ar-ink-soft) !important; }
  html.apprefonte .so2-lead span { color: var(--ar-amber) !important; }

  /* Hero « à la une » v2. */
  html.apprefonte .so2-featured {
    border-radius: var(--ar-r-lg) !important;
    box-shadow: var(--ar-sh-card) !important;
  }
  html.apprefonte .so2-featured-badge {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .so2-featured-cat {
    background: var(--ar-scrim) !important; color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .so2-featured-body h2 { font-family: 'Inter', system-ui, sans-serif !important; }
  html.apprefonte .so2-featured-meta strong { color: var(--ar-amber) !important; }

  /* États vides v2. */
  html.apprefonte .so2-empty,
  html.apprefonte .so2-featempty {
    background: var(--ar-surface) !important;
    border: 1px dashed var(--ar-border) !important;
    border-radius: var(--ar-r-lg) !important;
    color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .so2-empty h3,
  html.apprefonte .so2-featempty-t {
    font-family: 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .so2-empty p { color: var(--ar-ink-soft) !important; }
  html.apprefonte .so2-empty p a { color: var(--ar-cyan) !important; }

  /* ==========================================================================
     4) VOYAGES — vue LISTE (voyages.php). Thème d'origine CLAIR/BRUN → SOMBRE.
        Les .voyage-card v1 portent un fond blanc en inline → !important requis.
     ========================================================================== */

  /* 4a) Grille : cartes pleine largeur. */
  html.apprefonte .voyage-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 4b) Carte voyage (v1 lien + v2 wrap) : surface sombre, hairline, coins app. */
  html.apprefonte .voyage-card,
  html.apprefonte .voyage-grid.voyages-v2 .vy2-card {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    box-shadow: none !important;
    color: var(--ar-ink) !important;
    overflow: hidden;
  }
  html.apprefonte .voyage-card:hover,
  html.apprefonte .voyage-grid.voyages-v2 .vy2-card:hover {
    box-shadow: var(--ar-sh-card) !important;
  }

  /* 4c) Titres de carte : serif brun → système ink. */
  html.apprefonte .voyage-card h3,
  html.apprefonte .voyage-grid.voyages-v2 .vy2-head h3,
  html.apprefonte .voyage-featured h2,
  html.apprefonte .vy2-main .vy2-featured-body h2 {
    font-family: 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink) !important;
  }

  /* 4d) Textes secondaires (lieu, dates, méta, participants) : brun → ink-soft. */
  html.apprefonte .voyage-card .voyage-body div,
  html.apprefonte .voyage-card .voyage-body span,
  html.apprefonte .vy2-loc,
  html.apprefonte .vy2-metarow,
  html.apprefonte .vy2-foot,
  html.apprefonte .voyage-grid.voyages-v2 .vy2-people-txt {
    color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .voyage-card .voyage-body strong,
  html.apprefonte .vy2-foot strong { color: var(--ar-ink) !important; }

  /* 4e) Puces (durée « x jours », « à moi », région/étapes) alignées tokens. */
  html.apprefonte .voyage-grid.voyages-v2 .vy2-days {
    background: var(--ar-scrim) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .voyage-grid.voyages-v2 .vy2-mine {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
  }
  html.apprefonte .voyage-grid.voyages-v2 .vy2-cat {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-cyan-40) !important;
  }

  /* 4f) Bouton favori (cœur) : or → cyan ; actif = ambre (engagement personnel). */
  html.apprefonte .voyage-grid.voyages-v2 .vy2-fav { color: var(--ar-ink-soft) !important; }
  html.apprefonte .voyage-grid.voyages-v2 .vy2-fav.is-on { color: var(--ar-amber) !important; }
  html.apprefonte .voyage-grid.voyages-v2 .vy2-fav.is-on svg { fill: var(--ar-amber) !important; }

  /* 4g) Faux-bouton « Voir le voyage › » = exploration → cyan contour. */
  html.apprefonte .voyage-grid.voyages-v2 .vy2-see {
    min-height: 0; padding: 6px 12px;
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-cyan-40) !important; border-radius: var(--ar-r-pill) !important;
  }

  /* 4h) Avatars participants décoratifs : dégradé or → surface-2 neutre. */
  html.apprefonte .voyage-grid.voyages-v2 .vy2-av {
    background: var(--ar-surface-2) !important;
    border-color: var(--ar-hairline) !important;
  }
  html.apprefonte .voyage-grid.voyages-v2 .vy2-avmore {
    background: var(--ar-surface-2) !important; color: var(--ar-ink) !important;
    border-color: var(--ar-hairline) !important;
  }

  /* 4i) Carte VEDETTE v2 hero + puces. */
  html.apprefonte .vy2-main .vy2-featured {
    border-radius: var(--ar-r-lg) !important; box-shadow: var(--ar-sh-card) !important;
  }
  html.apprefonte .vy2-main .vy2-featured-badge {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
  }
  html.apprefonte .vy2-main .vy2-featured-days {
    background: var(--ar-scrim) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .vy2-main .vy2-featured-meta strong { color: var(--ar-amber) !important; }

  /* 4j) Indicateur d'avis camping-car (pastille flottante) : or → cyan-40. */
  html.apprefonte .vy2-cc {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    box-shadow: var(--ar-sh-card) !important;
  }
  html.apprefonte .vy2-cc b { color: var(--ar-cyan) !important; }

  /* 4k) Layout 2 colonnes v2 → 1 colonne ; colonne latérale non collante. */
  html.apprefonte .vy2-page { grid-template-columns: 1fr !important; gap: 16px !important; }
  html.apprefonte .vy2-side { position: static !important; }

  /* 4l) Cartes latérales (Mes voyages / Organiser) + états vides : sombre. */
  html.apprefonte .vy2-side .vy2-scard,
  html.apprefonte .so2-side .vy2-scard {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .vy2-side .vy2-scard-h,
  html.apprefonte .so2-side .vy2-scard-h {
    font-family: 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .vy2-side .vy2-scard-p,
  html.apprefonte .vy2-side .vy2-steps,
  html.apprefonte .so2-side .vy2-scard-p,
  html.apprefonte .so2-side .vy2-steps { color: var(--ar-ink-soft) !important; }
  /* Chevron de repli (or) → cyan. */
  html.apprefonte .vy2-side summary.vy2-scard-h::after,
  html.apprefonte .so2-side summary.vy2-scard-h::after {
    border-right-color: var(--ar-cyan) !important;
    border-bottom-color: var(--ar-cyan) !important;
  }
  /* Pastille « + » (or) → cyan-10. */
  html.apprefonte .vy2-side .vy2-scard-ic,
  html.apprefonte .so2-side .vy2-scard-ic {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
  }
  html.apprefonte .vy2-side .vy2-pub-lbl,
  html.apprefonte .so2-side .vy2-pub-lbl { color: var(--ar-ink-soft) !important; }

  /* 4m) Onglet « Mon parcours privé » : note + cartes privé/brouillon. */
  html.apprefonte .vy-privnote,
  html.apprefonte body.pub-body .vy-privnote,
  html.apprefonte body.pub-body .vy-privnote strong {
    color: var(--ar-ink) !important; text-shadow: none !important;
  }

  /* ==========================================================================
     5) BOUTONS D'ENGAGEMENT « premium » (or/dégradé) → AMBRE plein unique.
        « Proposer une sortie », « Organiser un voyage », CTA vedette, etc.
        Une seule action pleine ambre par écran ; le reste reste en contour.
     ========================================================================== */
  html.apprefonte .btn-premium,
  html.apprefonte .vy2-scard-btn,
  html.apprefonte .so2-side .vy2-scard-btn,
  html.apprefonte .vy2-scard-btn:link,
  html.apprefonte a.btn-premium {
    background: var(--ar-amber) !important;
    color: var(--ar-on-accent) !important;
    border: 0 !important;
    border-radius: var(--ar-r-pill) !important;
    box-shadow: none !important;
    min-height: var(--ar-btn-h);
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 16px/1 'Inter', system-ui, sans-serif !important;
  }
  /* Variante « ghost » premium (ex. Annuler dans create-voyage) → contour neutre. */
  html.apprefonte .btn-premium.btn-premium-ghost {
    background: transparent !important;
    color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important;
  }
  /* Bouton latéral secondaire « Voir mes voyages » = exploration → contour cyan. */
  html.apprefonte .vy2-scard-btn2 {
    background: transparent !important;
    color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-tap);
  }

  /* ==========================================================================
     6) ÉLÉMENTS PASSÉS partagés (past-section.php : « Mes sorties/voyages
        passées »). Déjà sombre — on aligne juste sur les tokens app.
     ========================================================================== */
  html.apprefonte .pastsec { border-top-color: var(--ar-hairline) !important; }
  html.apprefonte .pastsec-h,
  html.apprefonte .pastsec-title { color: var(--ar-ink) !important; }
  html.apprefonte .pastsec-sub,
  html.apprefonte .pastsec-loc,
  html.apprefonte .pastsec-dates { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pastsec-card {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .pastsec-more {
    min-height: var(--ar-tap);
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .pastsec-modal-box,
  html.apprefonte .pastsec-modal-hd {
    background: var(--ar-surface) !important;
  }
  html.apprefonte .pastsec-modal-box {
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-xl) !important;
  }
  html.apprefonte .pastsec-modal-hd h3 { color: var(--ar-ink) !important; }
  html.apprefonte .pastsec-modal-x {
    width: var(--ar-tap); height: var(--ar-tap);
    background: var(--ar-surface-2) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-sm) !important;
  }

  /* ==========================================================================
     7) DEMANDES (my-requests.php — messagerie « pigeon voyageur »).
        Déjà sombre mais en cyan brut #00e5ff + accents VIOLET (cercles) :
        on aligne sur les tokens et on retire le violet. Mobile = liste pleine.
     ========================================================================== */

  /* 7a) Ossature split → empilée, sans hauteur figée sur mobile. */
  html.apprefonte .pv-layout {
    grid-template-columns: 1fr !important;
    height: auto !important; min-height: 0 !important;
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important; overflow: visible !important;
    gap: 12px !important;
  }
  html.apprefonte .pv-sidebar {
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    background: var(--ar-surface) !important;
    max-height: none !important;
  }
  html.apprefonte .pv-main {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }

  /* 7b) En-têtes / titres : serif → système, cyan brut → token. */
  html.apprefonte .pv-sidebar-head { border-bottom-color: var(--ar-hairline) !important; }
  html.apprefonte .pv-sidebar-title,
  html.apprefonte .pv-main-title,
  html.apprefonte .pv-empty-title {
    color: var(--ar-ink) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
  }
  html.apprefonte .pv-main-sub,
  html.apprefonte .pv-empty-sub,
  html.apprefonte .pv-conv-preview,
  html.apprefonte .pv-conv-time { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pv-conv-name { color: var(--ar-ink) !important; }
  html.apprefonte .pv-section-label { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pv-main-head { border-bottom-color: var(--ar-hairline) !important; }

  /* 7c) Bouton « Nouveau message » = exploration → contour cyan, cible 44. */
  html.apprefonte .pv-new-btn {
    min-height: var(--ar-tap);
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-pill) !important;
  }

  /* 7d) Recherche : champ token. */
  html.apprefonte .pv-search {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-sm) !important;
    min-height: var(--ar-tap);
  }
  html.apprefonte .pv-search input { color: var(--ar-ink) !important; font-size: 16px !important; }

  /* 7e) Lignes de conversation : cible 56, actif = liseré cyan. */
  html.apprefonte .pv-conv-item { min-height: var(--ar-row-h); }
  html.apprefonte .pv-conv-item.is-active {
    background: var(--ar-cyan-10) !important;
    border-left-color: var(--ar-cyan) !important;
  }
  /* Avatars : cyan brut / VIOLET (cercles) → surface-2 + texte cyan neutre. */
  html.apprefonte .pv-conv-avatar {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-cyan) !important;
  }
  /* Compteur de cercle (violet inline) → cyan discret. */
  html.apprefonte .pv-conv-meta [style*="168,85,247"] {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
  }

  /* 7f) Fil de messages : bulles alignées tokens, plus de bleu franc. */
  html.apprefonte .pv-bubble-system {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .pv-bubble-row:not(.mine) .pv-bubble {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .pv-bubble-row.mine .pv-bubble {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .pv-bubble-meta { color: var(--ar-ink-soft) !important; }

  /* 7g) Carte « demande » dans le fil. */
  html.apprefonte .pv-req-card {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .pv-req-card-title { color: var(--ar-ink) !important; }
  html.apprefonte .pv-req-card-meta { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pv-req-card-msg {
    color: var(--ar-ink-soft) !important;
    border-left-color: var(--ar-cyan-40) !important;
  }

  /* 7h) Composer (cercles) : champ + bouton envoi (cible 44). */
  html.apprefonte .pv-composer { border-top-color: var(--ar-hairline) !important; }
  html.apprefonte .pv-composer textarea {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-sm) !important;
    min-height: var(--ar-tap); font-size: 16px !important;
  }
  html.apprefonte .pv-send-btn {
    width: var(--ar-tap) !important; height: var(--ar-tap) !important;
    background: var(--ar-cyan) !important;
    border: 0 !important; color: var(--ar-on-accent) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .pv-send-btn svg { stroke: var(--ar-on-accent) !important; }

  /* 7i) Icône pigeon (halo bleu) → cyan token. */
  html.apprefonte .pv-pigeon-icon svg {
    filter: drop-shadow(0 0 8px var(--ar-cyan-40)) !important;
  }

  /* ==========================================================================
     8) CRÉER UNE SORTIE (create-sortie.php · .cs2-*). Formulaire déjà sombre
        mais accent TEAL (#2fd8c8 / rgba(47,216,200,…)) + titres/CTA OR.
        → numéros & focus = cyan ; sélection = ambre ; CTA plein = ambre.
     ========================================================================== */
  html.apprefonte .cs2-title {
    font-family: 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .cs2-sub,
  html.apprefonte .cs2-secsub,
  html.apprefonte .cs2-lbl,
  html.apprefonte .cs2-note,
  html.apprefonte .cs2-modo,
  html.apprefonte .cs2-drop-t,
  html.apprefonte .cs2-drop-s,
  html.apprefonte .cs2-hint { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cs2-h { color: var(--ar-ink) !important; }
  /* Numéros de section : teal → cyan. */
  html.apprefonte .cs2-n { color: var(--ar-cyan) !important; }
  /* Bouton « Annuler » : or → contour neutre, cible 44. */
  html.apprefonte .cs2-cancel {
    color: var(--ar-ink) !important;
    background: transparent !important;
    border: 1px solid var(--ar-border) !important;
    min-height: var(--ar-tap); display: inline-flex; align-items: center;
  }
  html.apprefonte .cs2-form {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important;
  }
  html.apprefonte .cs2-grid { grid-template-columns: 1fr !important; }
  html.apprefonte .cs2-aside { position: static !important; }
  /* Champs : token surface-2 + focus cyan (anti-zoom 16px déjà en base). */
  html.apprefonte .cs2-field {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .cs2-field:focus {
    border-color: var(--ar-cyan) !important;
    box-shadow: 0 0 0 3px var(--ar-cyan-10) !important;
  }
  /* Cartes catégorie / visibilité : sélection TEAL → AMBRE (engagement). */
  html.apprefonte .cs2-cat,
  html.apprefonte .cs2-visc {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .cs2-cat-l,
  html.apprefonte .cs2-visc-t { color: var(--ar-ink) !important; }
  html.apprefonte .cs2-visc-d { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cs2-cat.is-active,
  html.apprefonte .cs2-visc.is-active {
    background: var(--ar-amber-10) !important;
    border-color: var(--ar-amber-40) !important;
    box-shadow: inset 0 0 0 1px var(--ar-amber-40) !important;
  }
  html.apprefonte .cs2-cat.is-active .cs2-cat-l,
  html.apprefonte .cs2-visc.is-active .cs2-visc-t { color: var(--ar-amber) !important; }
  html.apprefonte .cs2-cat.is-active .cs2-visc-d,
  html.apprefonte .cs2-visc.is-active .cs2-visc-d { color: var(--ar-ink) !important; }
  html.apprefonte .cs2-cat:focus-visible,
  html.apprefonte .cs2-visc:focus-visible {
    outline: 2px solid var(--ar-cyan) !important; outline-offset: 2px;
  }
  /* Stepper +/- : cibles 44, tokens. */
  html.apprefonte .cs2-step-b {
    flex-basis: var(--ar-tap); min-height: var(--ar-tap);
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important; border-radius: var(--ar-r-sm) !important;
  }
  /* Dropzone photos : accent teal → cyan. */
  html.apprefonte .cs2-drop {
    background: var(--ar-surface-2) !important;
    border: 2px dashed var(--ar-border) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .cs2-drop:hover,
  html.apprefonte .cs2-drop.is-drag {
    border-color: var(--ar-cyan-40) !important;
    background: var(--ar-cyan-10) !important;
  }
  /* Conseil du Gardien (encart) — l'ESPACE seulement, jamais le Gardien lui-même. */
  html.apprefonte .cs2-tip {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .cs2-tip-h { color: var(--ar-cyan) !important; }
  html.apprefonte .cs2-tip p { color: var(--ar-ink-soft) !important; }
  /* CTA « Publier ma sortie » : dégradé or → AMBRE plein (action unique). */
  html.apprefonte .cs2-submit {
    background: var(--ar-amber) !important;
    color: var(--ar-on-accent) !important;
    box-shadow: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
  }

  /* ==========================================================================
     9) CRÉER UN VOYAGE (create-voyage.php). .card.voyage-form + champs génériques
        + CTA à dégradé OR inline → AMBRE. .card déjà couvert par app-refonte.
     ========================================================================== */
  html.apprefonte .voyage-form .form-field label { color: var(--ar-ink-soft) !important; }
  html.apprefonte .moderation-notice {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    color: var(--ar-ink-soft) !important;
  }
  /* Bouton submit voyage (inline gradient or) → ambre plein. */
  html.apprefonte .voyage-form .btn.btn-primary.btn-block,
  html.apprefonte .voyage-form button[style*="C9A45C"] {
    background: var(--ar-amber) !important;
    color: var(--ar-on-accent) !important;
    border: 0 !important; text-shadow: none !important;
    border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h);
  }

  /* ==========================================================================
     10) ÉTAPES d'un voyage (voyage.php · .vstep-*). Déjà sur tokens « night »
         mais accent OR (#C9A45C) partout + badges à fonds CLAIRS inline.
         → structure = cyan ; badges = pilules token ; « + Ajouter » = ambre.
     ========================================================================== */
  /* Carte étape : liseré gauche or → cyan. */
  html.apprefonte .vstep { border-left-color: var(--ar-cyan) !important; }
  /* Chip type d'étape : or → cyan discret. */
  html.apprefonte .vstep-type {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  /* Note de l'organisateur : encart or → cyan. */
  html.apprefonte .vstep-note {
    background: var(--ar-cyan-10) !important;
    border-left-color: var(--ar-cyan) !important;
    color: var(--ar-ink) !important;
  }
  /* Lien « Signale-la » (infos terrain) : or → cyan. */
  html.apprefonte .vstep-terrain-link { color: var(--ar-cyan) !important; }
  /* Basculeurs de repli (or) → cyan. */
  html.apprefonte .vstep-fold-toggle,
  html.apprefonte .vstep-foldall {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  /* Badges de statut d'étape (fonds clairs inline) → pilules token :
     validée = cyan (succès sans vert), majorité = ambre, refusée = rouge,
     en attente / masquée = neutre. Sélecteurs [style*=] battent l'inline. */
  html.apprefonte .vstep-badge {
    border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .vstep-badge[style*="DAF3E2"] {       /* 🟢 Validée */
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border-color: var(--ar-cyan-40) !important;
  }
  html.apprefonte .vstep-badge[style*="FBE6C8"] {       /* 🟠 Majorité atteinte */
    background: var(--ar-amber-10) !important; color: var(--ar-amber) !important;
    border-color: var(--ar-amber-40) !important;
  }
  html.apprefonte .vstep-badge[style*="f3d9d9"] {       /* ✗ Refusée */
    background: var(--ar-danger-10) !important; color: var(--ar-danger) !important;
    border-color: var(--ar-danger) !important;
  }
  html.apprefonte .vstep-badge[style*="ece7db"] {       /* ⏳ En attente des votes */
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border-color: var(--ar-hairline) !important;
  }
  /* Titre de la modale « Ajouter une étape » : serif or → système ink. */
  html.apprefonte #stepModalTitle {
    color: var(--ar-ink) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
  }
  /* Bouton « + Ajouter / Proposer une étape » = engagement → ambre plein. */
  html.apprefonte #btnAddStep {
    background: var(--ar-amber) !important;
    color: var(--ar-on-accent) !important;
    border: 0 !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-tap);
  }
  /* Actions d'étape : cibles tactiles ≥ 44. */
  html.apprefonte .vstep-actions .btn { min-height: var(--ar-tap); }
}