/* ============================================================================
   carte-terrain.css — LOT « Terrain » (refonte app 2026-08-14)
   Écrans : Carte · Radar · Guide du voyageur · Checklist « Rien oublier »
   ----------------------------------------------------------------------------
   • 100 % ADDITIF et RÉVERSIBLE. N'agit QUE sous html.apprefonte ET ≤ 768px.
     Le BUREAU (> 768px) et les pages hors mode refonte ne changent JAMAIS.
   • RÉUTILISE les tokens de app-refonte.css (--ar-*). Aucun token redéfini ici.
   • Thème sombre unique. Bleu / vert / violet / dégradés bannis :
       - Cyan  (--ar-cyan)  = exploration / navigation / communication.
       - Ambre (--ar-amber) = engagement / création (1 seule action pleine/écran).
       - Rouge (--ar-danger) = 112 / destructif uniquement.
   • Ces pages portent DÉJÀ des reskins internes (.page-carte-v2, .guide-v2, .ro-*)
     qui utilisent une palette « bleu » hors-charte. Ce lot les RE-PALETTE pour
     l'app en surchargeant leurs règles (spécificité html.apprefonte + !important),
     sans toucher au DOM, au JS, aux requêtes, au CSRF ni aux permissions.
   • GARDIEN (.ai-*, .gw-*, .gardien-*, .carte-gardien*) : NON touché.
     ÉTINCELLES (etincelles*) : NON touché.
   ============================================================================ */

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

  /* ══════════════════════════════════════════════════════════════════════
     ÉCRAN 1 — CARTE  (carte.php · maquette 06-carte.png)
     Ré-palettage app du reskin .page-carte-v2 : on remplace le bleu #168BFF
     et le cyan-bleuté par les tokens officiels ; cibles ≥ 44px ; anti-zoom iOS.
     ══════════════════════════════════════════════════════════════════════ */

  /* Recherche « une aire, une ville… » — pilule cyan, police ≥16px (pas de zoom iOS). */
  html.apprefonte .page-carte-v2 .carte-searchbar-input {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-border) !important;
    border-radius: var(--ar-r-pill) !important;
    color: var(--ar-ink) !important;
    font-size: 16px !important;
    min-height: var(--ar-tap) !important;
    padding-left: 40px !important;
  }
  html.apprefonte .page-carte-v2 .carte-searchbar-input::placeholder { color: var(--ar-ink-soft) !important; }
  html.apprefonte .page-carte-v2 .carte-searchbar-input:focus {
    border-color: var(--ar-cyan) !important;
    outline: 2px solid var(--ar-cyan) !important; outline-offset: 1px;
  }
  html.apprefonte .page-carte-v2 .carte-searchbar-wrap svg { color: var(--ar-cyan) !important; }

  /* « Ma position / Autour de moi » = exploration → cyan plein (plus de dégradé bleu). */
  html.apprefonte .page-carte-v2 .carte-loc-btn {
    background: var(--ar-cyan) !important; border: 0 !important;
    color: var(--ar-on-accent) !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-tap) !important; font-weight: 700 !important;
  }
  html.apprefonte .page-carte-v2 .carte-loc-btn:hover { background: var(--ar-cyan-hover) !important; filter: none !important; }

  /* Puces de filtres (Aires / Eau / Services / Voyageurs…) — chip DS, ≥44px.
     Les pastilles de couleur (.chip-dot) restent des ENCODAGES de catégorie (pins). */
  html.apprefonte .page-carte-v2 .carte-chip {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-pill) !important; color: var(--ar-ink-soft) !important;
    min-height: var(--ar-tap); padding: 8px 14px !important;
  }
  html.apprefonte .page-carte-v2 .carte-chip.is-on {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important;
  }

  /* Distance / rayon — pastille active cyan (exploration), repos = surface. ≥44px. */
  html.apprefonte .page-carte-v2 .carte-radbtn {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap);
  }
  html.apprefonte .page-carte-v2 .carte-radbtn.is-on {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important; font-weight: 700;
  }
  html.apprefonte .page-carte-v2 .carte-radval,
  html.apprefonte .page-carte-v2 .carte-radhint { color: var(--ar-ink-soft) !important; }
  html.apprefonte .page-carte-v2 .carte-radslider input[type=range] { accent-color: var(--ar-cyan); }

  /* Accordéons filtres/distance — titres + résumé cyan, boutons Réinitialiser/Appliquer.
     « Appliquer » reste secondaire (contour cyan) : l'action pleine de l'écran est « Ajouter un lieu ». */
  html.apprefonte .page-carte-v2 .carte-acc-title { color: var(--ar-ink) !important; }
  html.apprefonte .page-carte-v2 .carte-acc-sum { color: var(--ar-cyan) !important; }
  html.apprefonte .page-carte-v2 .carte-acc-btn.is-reset {
    background: transparent !important; border: 1px solid var(--ar-border) !important; color: var(--ar-ink) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap);
  }
  html.apprefonte .page-carte-v2 .carte-acc-btn.is-apply {
    background: transparent !important; border: 1px solid var(--ar-cyan-40) !important; color: var(--ar-cyan) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap); font-weight: 700;
  }

  /* Sélecteur de zone / recherche pays — champs DS. */
  html.apprefonte .page-carte-v2 .carte-zone-select,
  html.apprefonte .page-carte-v2 .carte-zone-search {
    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; font-size: 16px !important;
  }
  html.apprefonte .page-carte-v2 .carte-zone-list { background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-sm) !important; }
  html.apprefonte .page-carte-v2 .carte-zone-opt:hover,
  html.apprefonte .page-carte-v2 .carte-zone-opt.is-hl { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }

  /* « Ajouter un lieu » / « Proposer un lieu » = CRÉATION → ambre (action pleine unique).
     #cartePropose porte des styles inline bleutés : on les bat en app. */
  html.apprefonte .page-carte-v2 #cartePropose {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    border: 0 !important; border-radius: var(--ar-r-pill) !important;
    font-weight: 700 !important; min-height: var(--ar-tap); box-sizing: border-box;
  }
  /* Toolbar de pastilles (Filtres / Distance / Zone / Ajouter / Proposer) — ronds DS ≥44px. */
  html.apprefonte .page-carte-v2 .carte-past-b {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important; color: var(--ar-ink) !important;
    min-width: var(--ar-tap); min-height: var(--ar-tap); border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .page-carte-v2 .carte-past-b[data-act="add"] { border-color: var(--ar-amber-40) !important; color: var(--ar-amber) !important; }

  /* Barre des tiroirs (ouvrir Filtres à gauche / Fiche à droite) — pilules tactiles. */
  html.apprefonte .page-carte-v2 .carte-drawer-bar { background: transparent !important; }
  html.apprefonte .page-carte-v2 .carte-drawer-btn {
    background: rgba(9,20,32,.92) !important; border: 1px solid var(--ar-hairline) !important; color: var(--ar-ink) !important;
    border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  html.apprefonte .page-carte-v2 .carte-drawer-close {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important; color: var(--ar-ink) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap);
  }

  /* Contrôles Leaflet (+/- zoom, recentrage) — surface sombre, ronds, tactiles. */
  html.apprefonte .page-carte-v2 .leaflet-control-zoom a,
  html.apprefonte .page-carte-v2 .leaflet-bar a {
    background: rgba(9,20,32,.92) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-hairline) !important; width: var(--ar-tap) !important; height: var(--ar-tap) !important;
    line-height: var(--ar-tap) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  html.apprefonte .page-carte-v2 .leaflet-bar { border-radius: var(--ar-r-md) !important; overflow: hidden; box-shadow: var(--ar-sh-card) !important; }

  /* Bandeau « N lieux trouvés » sur la carte — pilule surface. */
  html.apprefonte .page-carte-v2 .carte-map-results {
    background: rgba(9,20,32,.92) !important; border: 1px solid var(--ar-hairline) !important; color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-pill) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }

  /* Feuille « Fiche du lieu » (panneau droit en tiroir) — poignée cyan token. */
  html.apprefonte .page-carte-v2 .carte-right-grabber .crg-bar { background: var(--ar-cyan) !important; box-shadow: none !important; }
  html.apprefonte .page-carte-v2 .carte-right-grabber .crg-lbl { background: var(--ar-cyan-10) !important; border: 1px solid var(--ar-cyan-40) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .page-carte-v2 .carte-detail-badge { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border-radius: var(--ar-r-pill) !important; }

  /* Coche « service disponible » : vert #0e9e6e banni → cyan (succès = cyan en charte). */
  html.apprefonte .page-carte-v2 .carte-svc-item .svc-check { background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important; }

  /* Boutons de la fiche : « Itinéraire » = navigation → cyan plein ; secondaires = contour. */
  html.apprefonte .page-carte-v2 .carte-btn-itinerary {
    background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap); font-weight: 700;
  }
  html.apprefonte .page-carte-v2 .carte-btn-secondary {
    background: transparent !important; border: 1px solid var(--ar-border) !important; color: var(--ar-ink) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap);
  }

  /* Fenêtre « Ajouter un lieu » — champs DS anti-zoom + bouton d'envoi ambre (création). */
  html.apprefonte .page-carte-v2 #addPlaceForm input,
  html.apprefonte .page-carte-v2 #addPlaceForm select,
  html.apprefonte .page-carte-v2 #addPlaceForm textarea {
    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; font-size: 16px !important;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ÉCRAN 2 — RADAR  (mode « Carte.Radar » · maquette 07-radar.png)
     Aucun DOM Radar n'existe encore dans carte.php (mode planifié). On ne
     STYLISE PAS de sélecteurs inventés : ce bloc reste volontairement vide et
     documenté. Quand le mode Radar recevra un vrai markup, l'ajouter ici
     (cercles concentriques 1/3/5/8 km, « Vous êtes ici », résultats + « Voir »,
     CTA « Ouvrir la grande carte » en cyan). Voir la spec / les risques.
     ══════════════════════════════════════════════════════════════════════ */


  /* ══════════════════════════════════════════════════════════════════════
     ÉCRAN 3 — GUIDE DU VOYAGEUR  (guide.php · maquette 16-guide.png)
     Le bloc .guide-v2 définit SES PROPRES variables (bleu #079BFF, cyan-bleuté,
     gold/fire). On les REPOINTE vers les tokens officiels pour l'app → tout le
     dégradé bleu disparaît sans réécrire chaque règle. Puis quelques ajustements
     (serif → Inter, héro compact, grille 2 colonnes, cibles ≥44px).
     ══════════════════════════════════════════════════════════════════════ */

  html.apprefonte .guide-v2 {
    --g-bg:   var(--ar-bg);
    --g-bg2:  var(--ar-surface);
    --g-card: var(--ar-surface);
    --g-blue: var(--ar-cyan);      /* bleu banni → cyan */
    --g-cyan: var(--ar-cyan);
    --g-fire: var(--ar-amber);     /* chaleur = ambre */
    --g-gold: var(--ar-ink);       /* titres = encre crème (plus de gold serif criard) */
    --g-ink:  var(--ar-ink);
    --g-ink2: var(--ar-ink-soft);
    --g-line:  var(--ar-hairline);
    --g-line2: var(--ar-cyan-40);
  }
  /* Serif (Cormorant) bannie sur les titres d'écran → famille système unique. */
  html.apprefonte .guide-v2 .gv-hero__title,
  html.apprefonte .guide-v2 .gv-panel__h,
  html.apprefonte .guide-v2 .gv-sec__h { font-family: 'Inter', system-ui, sans-serif !important; }

  /* Héro compact (la maquette montre juste titre + lanterne + recherche). */
  html.apprefonte .guide-v2 .gv-hero { min-height: 200px !important; border-radius: var(--ar-r-xl) !important; }
  html.apprefonte .guide-v2 .gv-hero__title { font-size: clamp(28px, 8vw, 34px) !important; }
  html.apprefonte .guide-v2 .gv-hero__inner { padding: 18px 16px !important; }

  /* Recherche « Que voulez-vous comprendre ? » — champ DS. */
  html.apprefonte .guide-v2 .gv-search {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .guide-v2 .gv-search input { color: var(--ar-ink) !important; font-size: 16px !important; }
  html.apprefonte .guide-v2 .gv-search input::placeholder { color: var(--ar-ink-soft) !important; }

  /* 4 cartes catégories : grille 2 colonnes (proche maquette) même sur petit écran. */
  html.apprefonte .guide-v2 .gv-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  html.apprefonte .guide-v2 .gv-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-md) !important; box-shadow: none !important;
  }
  html.apprefonte .guide-v2 .gv-card__ic { border-radius: var(--ar-r-sm) !important; }

  /* Panneaux vedettes (3 modes du Phare / Checklist) — surfaces DS, coins doux. */
  html.apprefonte .guide-v2 .gv-panel { background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-lg) !important; box-shadow: none !important; }
  html.apprefonte .guide-v2 .gv-welcome,
  html.apprefonte .guide-v2 .gv-acc { background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-md) !important; }
  html.apprefonte .guide-v2 .gv-acc > summary { min-height: var(--ar-tap); }

  /* Onglets checklist — actif = cyan, repos = ink-soft, ≥44px. */
  html.apprefonte .guide-v2 .gv-tab { min-height: var(--ar-tap); border-radius: var(--ar-r-sm) !important; }
  html.apprefonte .guide-v2 .gv-tab[aria-selected="true"] { background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important; }

  /* « Les plus consultés » / listes : liens cyan token (au lieu du cyan-bleuté). */
  html.apprefonte .guide-v2 a { color: var(--ar-cyan); }

  /* CTA « Me faire visiter » = exploration → cyan plein (plus de dégradé cyan→bleu). */
  html.apprefonte .guide-v2 .gv-btn--tour {
    background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important; box-shadow: none !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-btn-h);
  }
  html.apprefonte .guide-v2 .gv-btn--ghost {
    background: transparent !important; border: 1px solid var(--ar-border) !important; color: var(--ar-ink) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-btn-h);
  }
  /* Encart signalement / phare : ambre = attention (charte). */
  html.apprefonte .guide-v2 .gv-signal { background: var(--ar-amber-10) !important; border: 1px solid var(--ar-amber-40) !important; border-radius: var(--ar-r-md) !important; }


  /* ══════════════════════════════════════════════════════════════════════
     ÉCRAN 4 — CHECKLIST « RIEN OUBLIER »  (rien-oublier.php · maquette 17-checklist.png)
     La page est en thème CLAIR (cartes blanches, pastilles bleues, orbe ambre
     avec halo blanc). On la re-palette en sombre pour l'app :
       - liste mobile .ro-card → surface DS + encre ;
       - états « fait » : vert banni → cyan ; alerte compteur → ambre ;
       - orbe central : garde l'AMBRE (progression = engagement) mais on retire le
         halo blanc « thème clair » ;
       - boutons + panneaux modaux alignés aux tokens.
     Le contenu est injecté par JS (#roCoreBody / #roList) : on ne touche qu'au style.
     ══════════════════════════════════════════════════════════════════════ */

  /* Liste des familles (vue mobile) — cartes surface, encre lisible. */
  html.apprefonte .ro-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important; border-radius: var(--ar-r-md) !important; box-shadow: none !important;
  }
  html.apprefonte .ro-card-tx b { color: var(--ar-ink) !important; }
  html.apprefonte .ro-card-tx span { color: var(--ar-ink-soft) !important; }
  /* Icône de famille : dégradé bleu → pastille cyan mate. */
  html.apprefonte .ro-card-ic {
    background: var(--ar-surface-2) !important; color: var(--ar-cyan) !important; box-shadow: inset 0 0 0 1px var(--ar-cyan-40) !important;
  }
  /* « Fait » : vert banni → cyan (succès = cyan). */
  html.apprefonte .ro-card.is-done .ro-card-ic { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .ro-card-st { color: var(--ar-cyan) !important; }
  html.apprefonte .ro-card-st.is-full { color: var(--ar-cyan) !important; }
  html.apprefonte .ro-card-st .al { color: var(--ar-amber) !important; }   /* compteur « à vérifier » = attention */

  /* Barre d'actions secondaires — pilules contour DS, ≥44px. */
  html.apprefonte .ro-btn-lite {
    background: transparent !important; border: 1px solid var(--ar-border) !important; color: var(--ar-ink) !important;
    border-radius: var(--ar-r-pill) !important; min-height: var(--ar-tap); box-shadow: none !important;
  }

  /* Orbe central (progression) : garde l'ambre = engagement, mais halo blanc
     « thème clair » retiré → rendu plat sombre cohérent. */
  html.apprefonte .ro-core {
    box-shadow: 0 0 0 1px var(--ar-amber-40), var(--ar-sh-card) !important;
    border-radius: var(--ar-r-xl) !important;
  }
  html.apprefonte .ro-title { font-family: 'Inter', system-ui, sans-serif !important; }
  /* Bouton principal de l'orbe (Continuer / Départ type) = ambre plat ; ghost = contour clair. */
  html.apprefonte .ro-cbtn-primary { background: var(--ar-amber) !important; color: var(--ar-on-accent) !important; box-shadow: none !important; min-height: var(--ar-tap); }
  html.apprefonte .ro-cbtn-ghost { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.55) !important; color: #fff !important; min-height: var(--ar-tap); }

  /* Panneaux modaux (familles / assistant) — déjà sombres : on aligne aux tokens. */
  html.apprefonte .ro-panel {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-xl) var(--ar-r-xl) 0 0 !important; box-shadow: var(--ar-sh-sheet) !important;
  }
  html.apprefonte .ro-panel-head,
  html.apprefonte .ro-panel-foot { border-color: var(--ar-hairline) !important; }
  html.apprefonte .ro-panel-close { border: 1px solid var(--ar-border) !important; color: var(--ar-ink) !important; min-width: var(--ar-tap); min-height: var(--ar-tap); }
  html.apprefonte .ro-item { background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-md) !important; }
  html.apprefonte .ro-item.is-verifie { border-color: var(--ar-cyan-40) !important; background: var(--ar-cyan-10) !important; }
  html.apprefonte .ro-item.is-verifie .ro-dot { background: var(--ar-cyan) !important; box-shadow: none !important; }
  html.apprefonte .ro-dot.conseille { background: var(--ar-cyan) !important; }   /* bleu → cyan */
  html.apprefonte .ro-dot.important { background: var(--ar-amber) !important; }
  /* .ro-dot.indispensable garde le rouge = criticité (toléré : alerte). */

  /* Segmenté État (Vérifié / À vérifier / Non concerné) — vert banni → cyan. */
  html.apprefonte .ro-seg { border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-pill) !important; }
  html.apprefonte .ro-seg button { min-height: var(--ar-tap); }
  html.apprefonte .ro-seg button.is-on[data-etat="verifie"] { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .ro-seg button.is-on[data-etat="a_verifier"] { background: var(--ar-amber-10) !important; color: var(--ar-amber) !important; }

  /* Chips « critères » / champs de la fenêtre — tokens DS, sélection ambre. */
  html.apprefonte .ro-panel .ro-crit { background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-pill) !important; color: var(--ar-ink) !important; }
  html.apprefonte .ro-panel .ro-crit.sel { border-color: var(--ar-amber-40) !important; background: var(--ar-amber-10) !important; color: var(--ar-ink) !important; }
  html.apprefonte .ro-field input,
  html.apprefonte .ro-field select { 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; font-size: 16px !important; }
  html.apprefonte .ro-checks input { accent-color: var(--ar-amber); }

  /* Boutons/liens secondaires bleutés → cyan. */
  html.apprefonte .ro-btn.ro-btn-soft { border-color: var(--ar-cyan-40) !important; background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .ro-mini { color: var(--ar-cyan) !important; }
  html.apprefonte .ro-alert.info { background: var(--ar-cyan-10) !important; border: 1px solid var(--ar-cyan-40) !important; }
  html.apprefonte .ro-alert.warn { background: var(--ar-amber-10) !important; border: 1px solid var(--ar-amber-40) !important; }

} /* fin @media (max-width:768px) */