/* ============================================================================
   refonte-lots/voyageurs-profil.css
   LOT « Voyageurs · Profil · Passeport · Réglages · Sécurité »
   ----------------------------------------------------------------------------
   • 100 % ADDITIF & RÉVERSIBLE. Habillage sombre (charte maquettes) des pages :
       - moments.php        (Voyageurs)        → maquette 05
       - compagnons.php     (Compagnons v2/v1) → maquette 12
       - passeport.php      (Passeport)        → maquette 13
       - reglages.php       (Réglages)         → maquette 15
       - ma-securite.php    (Ma sécurité)      → maquette 25
       - confiance.php      (Confiance & séc.) → maquette 24
       - autour-de-moi.php  (Radar/Autour)
   • S'active UNIQUEMENT en mode app : html.apprefonte + ≤768px. Le BUREAU
     (>768px) et les pages hors refonte ne changent JAMAIS (tout est enfermé
     dans un seul @media (max-width:768px) scopé html.apprefonte).
   • Réutilise SANS les redéfinir les tokens de app-refonte.css (--ar-*).
   • NE TOUCHE PAS au Gardien (.ai-*, .gw-*, .mom-orb*, .pg-orb, gardien-*)
     ni à Étincelles. On ne stylise que l'ESPACE autour du Gardien.
   • Palette : cyan = exploration/communication, ambre = engagement (1 pleine
     par écran), rouge = 112/destructif seulement. Aucun bleu/vert/violet/teal
     décoratif ; les points de présence (vert « en ligne » / ambre « absent »)
     restent car ils portent une info d'état présente dans la maquette.
   ============================================================================ */

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

  /* ==========================================================================
     0) SOCLE COMMUN DU LOT
     ====================================================================== */
  /* Titres d'écran (serif « Cormorant » bannis en app → sans-serif unique). */
  html.apprefonte .page-head h1,
  html.apprefonte .cp2-head h1,
  html.apprefonte .cp2-sec-h,
  html.apprefonte .msec-sec {
    font-family: 'Inter', system-ui, sans-serif !important;
  }

  /* ==========================================================================
     1) VOYAGEURS — moments.php  (maquette 05)
        DOM : .voyageurs-layout / .adm-kpi-row / .adm-kpi / .mo-appfold /
              .adm-filter-link / .adm-card (cartes voyageur)
     ====================================================================== */
  /* Passage en une colonne : filtres (repliés) puis grille. La colonne Gardien
     de droite est déjà masquée en app (mobile-fixes.css) — on n'y touche pas. */
  html.apprefonte .voyageurs-layout {
    display: block !important;
    grid-template-columns: none !important;
  }
  html.apprefonte .voyageurs-layout > aside:first-of-type { margin-bottom: 12px; }

  /* Rangée KPI : tuiles compactes défilables horizontalement (pas d'écrasement). */
  html.apprefonte .adm-kpi-row {
    display: flex !important; gap: 10px; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; margin-bottom: 16px !important;
  }
  html.apprefonte .adm-kpi-row::-webkit-scrollbar { display: none; }
  html.apprefonte .adm-kpi {
    flex: 0 0 auto; min-width: 132px;
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; box-shadow: none !important; padding: 12px !important;
  }
  /* Pastilles d'icône KPI : hors-palette (green/orange/purple) → neutralisées cyan. */
  html.apprefonte .adm-kpi-ic,
  html.apprefonte .adm-kpi-ic.green,
  html.apprefonte .adm-kpi-ic.orange,
  html.apprefonte .adm-kpi-ic.purple {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-cyan-40) !important;
  }
  html.apprefonte .adm-kpi-value,
  html.apprefonte .adm-kpi-value.cyan { color: var(--ar-ink) !important; }
  html.apprefonte .adm-kpi-label { color: var(--ar-ink-soft) !important; }

  /* Carte « Filtres » repliable : surface + en-tête tap-friendly. */
  html.apprefonte .mo-appfold {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .mo-appfold > summary.mo-fold-h {
    min-height: var(--ar-tap); color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .mo-appfold .mo-fold-chev { color: var(--ar-cyan) !important; }

  /* Liens de filtre (humeur / navigation) → lignes tactiles ≥44px. */
  html.apprefonte .voyageurs-layout aside a[href],
  html.apprefonte .adm-filter-link {
    min-height: var(--ar-tap); box-sizing: border-box;
  }
  html.apprefonte .adm-filter-link.is-active { color: var(--ar-cyan) !important; }
  html.apprefonte .adm-pill.gray {
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
  }

  /* Champs des filtres. */
  html.apprefonte .adm-field .adm-input {
    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;
    min-height: var(--ar-tap); font-size: 16px !important;
  }
  html.apprefonte .adm-label { color: var(--ar-ink-soft) !important; }

  /* Barre de résultats « N voyageurs trouvés ». */
  html.apprefonte .voyageurs-layout section > div:first-child strong { color: var(--ar-ink) !important; }

  /* Grille de cartes voyageur : 2 colonnes comme la maquette (une par ligne sur
     très petit écran via minmax). Les cartes .adm-card sont déjà habillées par
     app-refonte.css ; on ajuste seulement l'espacement et les actions. */
  html.apprefonte .voyageurs-layout section > div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important;
  }
  html.apprefonte .voyageurs-layout .adm-card { max-width: 100% !important; margin: 0 !important; }
  /* « Contacter » = communication → cyan ; « Voir profil » reste en contour. */
  html.apprefonte .voyageurs-layout .adm-card .adm-btn-primary {
    background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important;
  }

  /* Barre « Actions rapides » de bas de page : surface sombre cohérente. */
  html.apprefonte div[style*="background:var(--card-bg)"] {
    background: var(--ar-surface) !important; border-color: var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }

  /* État vide (aucun phare) : titre en ambre neutralisé vers l'encre douce. */
  html.apprefonte .voyageurs-layout section .adm-card h3 { color: var(--ar-ink) !important; }

  @media (max-width: 380px) {
    html.apprefonte .voyageurs-layout section > div[style*="grid-template-columns:repeat(auto-fill"] {
      grid-template-columns: 1fr !important;
    }
  }

  /* ==========================================================================
     2) COMPAGNONS — compagnons.php  (maquette 12)
        DOM v2 : .cp2-wrap / .cp2-tabs / .cp2-tab / .cp2-card / .cp2-btn-ghost /
                 .cp2-search / .cp2-dot / .cp2-sec-h / .cp2-side-card
        DOM v1 : .comp-tabs / .comp-card / .comp-empty
     ====================================================================== */
  /* En-tête. */
  html.apprefonte .cp2-head h1 { color: var(--ar-ink) !important; text-shadow: none !important; }
  html.apprefonte .cp2-sub { color: var(--ar-ink-soft) !important; text-shadow: none !important; }
  html.apprefonte .cp2-back {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important; border-radius: var(--ar-r-sm) !important;
  }

  /* Onglets soulignés (maquette : actif = cyan + soulignement). */
  html.apprefonte .cp2-tab {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte .cp2-tab.on {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border-color: var(--ar-cyan-40) !important;
  }
  html.apprefonte .cp2-tab .n { color: var(--ar-cyan) !important; }
  html.apprefonte .cp2-tab .n.alert { color: var(--ar-on-accent) !important; background: var(--ar-amber) !important; }

  /* Recherche + toggle « en ligne ». */
  html.apprefonte .cp2-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;
    min-height: var(--ar-tap); font-size: 16px !important;
  }
  html.apprefonte .cp2-toggle {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; min-height: var(--ar-tap);
  }

  /* Cartes compagnon. */
  html.apprefonte .cp2-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte .cp2-name { color: var(--ar-ink) !important; }
  html.apprefonte .cp2-name .v { color: var(--ar-cyan) !important; }
  html.apprefonte .cp2-status { color: var(--ar-ink-soft) !important; }
  /* Points de présence : conservés (info d'état de la maquette). */
  /* « Voir le profil » = exploration → contour cyan. */
  html.apprefonte .cp2-btn-ghost {
    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); box-sizing: border-box;
  }
  html.apprefonte .cp2-fold-btn {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
  }

  /* Titres de section (« Suggestions ») : cyan sans-serif au lieu du gold serif. */
  html.apprefonte .cp2-sec-h { color: var(--ar-cyan) !important; text-shadow: none !important; }
  html.apprefonte .cp2-sugg-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .cp2-empty {
    background: var(--ar-surface) !important; border: 1px dashed var(--ar-border) !important;
    color: var(--ar-ink-soft) !important; border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .cp2-empty a, html.apprefonte .cp2-side-card a { color: var(--ar-cyan) !important; }
  html.apprefonte .cp2-more {
    background: transparent !important; border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important; min-height: var(--ar-tap);
  }

  /* Colonnes latérales (activité / respect & sécurité). */
  html.apprefonte .cp2-side-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte .cp2-side-h { color: var(--ar-cyan) !important; }
  html.apprefonte .cp2-safe p, html.apprefonte .cp2-act-tx span { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cp2-act-tx b { color: var(--ar-ink) !important; }

  /* Ancien design (v1) — reskin de repli si le flag v2 est OFF. */
  html.apprefonte .comp-tab.is-active { color: var(--ar-cyan) !important; }
  html.apprefonte .comp-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .comp-empty {
    background: var(--ar-surface) !important; border: 1px dashed var(--ar-border) !important;
    color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .comp-accept-flash { border-radius: var(--ar-r-md) !important; }

  /* ==========================================================================
     3) PASSEPORT — passeport.php  (maquette 13)
        DOM : .ppx-shell / .ppx-card / .ppx-hero / .ppx-stats / .ppx-stat /
              .ppx-input / .ppx-chip / .ppx-btn-save / .ppx-photo…
        NB : on ne touche PAS le panneau Gardien (.ppx-gardien-panel .pg-orb).
     ====================================================================== */
  /* 2 colonnes (Gardien | contenu) → une seule colonne, contenu d'abord. */
  html.apprefonte .ppx-shell {
    display: block !important; grid-template-columns: none !important; gap: 0 !important;
  }
  html.apprefonte .ppx-col-main { order: 1; }
  /* Le panneau Gardien perso : désancré (plus de sticky pleine hauteur) — c'est
     de l'espace, on ne redessine ni ne recolore l'orbe (.pg-orb). */
  html.apprefonte .ppx-gardien-panel {
    position: static !important; height: auto !important; min-height: 0 !important;
    margin-top: 14px;
  }

  /* Cartes du Passeport : surface plate (on retire le flou/liseré néon). */
  html.apprefonte .ppx-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important; box-shadow: var(--ar-sh-card) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte .ppx-card::before { display: none !important; }
  html.apprefonte .ppx-eyebrow { color: var(--ar-cyan) !important; }
  html.apprefonte .ppx-divider { background: var(--ar-hairline) !important; }
  html.apprefonte .ppx-name { color: var(--ar-ink) !important; }

  /* Tuiles de stats (Points de Route / Grand Brasier / Souvenirs). */
  html.apprefonte .ppx-stat {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .ppx-stat b, html.apprefonte .ppx-stat--link { color: var(--ar-cyan) !important; }
  html.apprefonte .ppx-stat--alert { border-color: var(--ar-amber-40) !important; background: var(--ar-amber-10) !important; }
  html.apprefonte .ppx-stat--alert, html.apprefonte .ppx-stat--alert b { color: var(--ar-amber) !important; }

  /* Pastilles d'identité. */
  html.apprefonte .ppx-pill { background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important; color: var(--ar-ink-soft) !important; }
  html.apprefonte .ppx-pill.cyan { background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .ppx-badge-verif, html.apprefonte .ppx-ava-pct, html.apprefonte .ppx-ava-edit { background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important; }

  /* Champs du formulaire Passeport. */
  html.apprefonte .ppx-input, html.apprefonte .ppx-select, html.apprefonte .ppx-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; min-height: var(--ar-field-h);
  }
  html.apprefonte .ppx-input:focus, html.apprefonte .ppx-select:focus, html.apprefonte .ppx-textarea:focus {
    border-color: var(--ar-cyan) !important; box-shadow: 0 0 0 3px var(--ar-cyan-10) !important;
  }
  html.apprefonte .ppx-field label { color: var(--ar-ink-soft) !important; }
  html.apprefonte .ppx-select option { background: var(--ar-surface) !important; color: var(--ar-ink) !important; }

  /* Chips d'intérêt : actif = cyan. */
  html.apprefonte .ppx-chip {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; min-height: var(--ar-tap); box-sizing: border-box;
  }
  html.apprefonte .ppx-chip.is-on { background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important; }

  /* Bouton « Enregistrer » = engagement → ambre plein (une action pleine). */
  html.apprefonte .ppx-btn-save {
    background: var(--ar-amber) !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 .ppx-btn-save:hover { box-shadow: none !important; transform: none !important; }
  html.apprefonte .ppx-link-ghost:hover { color: var(--ar-cyan) !important; }

  /* Photos : bordures & liseré cyan doux. */
  html.apprefonte .ppx-photo { background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important; }
  html.apprefonte .ppx-tag.cyan { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .ppx-trust svg { color: var(--ar-cyan) !important; }
  html.apprefonte .ppx-trust .t-main { color: var(--ar-ink) !important; }

  /* ==========================================================================
     4) RÉGLAGES — reglages.php  (maquette 15)
        DOM : .mrg-search / .mrg-menu / .mrg-cols.mrg-tabs / .mrg-sec (details) /
              summary > .mrg-sec-t/.mrg-sec-d/.mrg-sec-etat/.mrg-sec-chev /
              .mrg-row / .mrg-btn / .mrg-sw / .mrg-seg / .mrg-tag
     ====================================================================== */
  html.apprefonte .page-title { color: var(--ar-ink) !important; }
  html.apprefonte .page-subtitle { color: var(--ar-ink-soft) !important; }

  /* Barre de recherche de réglage (pleine largeur, tap-friendly). */
  html.apprefonte .mrg-search {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .mrg-search input {
    background: transparent !important; border: 0 !important; color: var(--ar-ink) !important;
    min-height: var(--ar-tap); font-size: 16px !important;
  }
  /* Le menu latéral d'ancres : masqué en app (les sections sont des lignes). */
  html.apprefonte .mrg-menu { display: none !important; }
  html.apprefonte .mrg-wrap, html.apprefonte .mrg-cols { display: block !important; }

  /* Chaque section = ligne/carte de liste (icône + titre + sous-texte + état + chevron). */
  html.apprefonte .mrg-sec {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; margin-bottom: 10px !important; overflow: hidden;
  }
  html.apprefonte .mrg-sec > summary {
    min-height: 56px; align-items: center; gap: 12px; padding: 12px 14px !important;
    list-style: none;
  }
  html.apprefonte .mrg-sec > summary::-webkit-details-marker { display: none; }
  html.apprefonte .mrg-sec-t { color: var(--ar-ink) !important; font-weight: 600; }
  html.apprefonte .mrg-sec-d { color: var(--ar-ink-soft) !important; }
  html.apprefonte .mrg-sec-etat { color: var(--ar-cyan) !important; font-size: 12.5px; }
  html.apprefonte .mrg-sec-chev { color: var(--ar-ink-soft) !important; }
  html.apprefonte .mrg-sec-body { border-top: 1px solid var(--ar-hairline) !important; }

  /* Lignes internes. */
  html.apprefonte .mrg-row { border-color: var(--ar-hairline) !important; }
  html.apprefonte .mrg-row-l { color: var(--ar-ink) !important; }
  html.apprefonte .mrg-row-d { color: var(--ar-ink-soft) !important; }
  html.apprefonte .mrg-btn {
    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); box-sizing: border-box; display: inline-flex; align-items: center;
  }

  /* Interrupteurs : rail cyan quand ON. */
  html.apprefonte .mrg-sw input:checked + i { background: var(--ar-cyan) !important; }
  html.apprefonte .mrg-sw i { min-width: 44px; }

  /* Segments (mode Phare / partage position) : segment actif cyan. */
  html.apprefonte .mrg-seg { background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-pill) !important; }
  html.apprefonte .mrg-seg label { min-height: var(--ar-tap); }
  html.apprefonte .mrg-seg input:checked + span { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }

  /* Étiquettes d'état. */
  html.apprefonte .mrg-tag-on { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .mrg-tag-off, html.apprefonte .mrg-tag-prep, html.apprefonte .mrg-tag-lock { background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important; }

  /* Zone sensible (pause + suppression) = destructif → rouge réservé. */
  html.apprefonte #sensible {
    border-color: var(--ar-danger) !important; background: var(--ar-danger-10) !important;
  }
  html.apprefonte #sensible .mrg-sec-t,
  html.apprefonte #sensible .mrg-sec-etat { color: var(--ar-danger) !important; }
  html.apprefonte #sensible .mrg-sec-chev { color: var(--ar-danger) !important; }

  /* Bandeaux flash. */
  html.apprefonte .flash { border-radius: var(--ar-r-md) !important; }

  /* ==========================================================================
     5) MA SÉCURITÉ — ma-securite.php  (maquette 25 → version sombre unifiée)
        DOM : .msec-wrap / .msec-alert / .msec-sec / .msec-block (details) /
              .msec-ic / .msec-badge / .msec-live-txt / .msec-cell / .msec-btn
        Le fichier a déjà un thème bleu nuit : on aligne accents (or→ambre,
        vert live→cyan) et surfaces sur les tokens --ar-*.
     ====================================================================== */
  html.apprefonte body.page-ma-securite .page-head h1,
  html.apprefonte .msec-sec { color: var(--ar-ink) !important; }
  html.apprefonte .msec-sec .si { color: var(--ar-amber) !important; }
  html.apprefonte .msec-sec .n { background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important; border-color: var(--ar-hairline) !important; }

  /* Bandeau « protection active ». */
  html.apprefonte .msec-alert {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    box-shadow: none !important; border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .msec-alert .ai { background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important; }
  html.apprefonte .msec-alert .ai svg { color: var(--ar-amber) !important; }
  html.apprefonte .msec-alert .at { color: var(--ar-ink) !important; }
  html.apprefonte .msec-alert .at b { color: var(--ar-amber) !important; }
  html.apprefonte .msec-alert .adot { background: var(--ar-cyan) !important; box-shadow: 0 0 10px var(--ar-cyan) !important; }

  /* Bandeau APERÇU visiteur. */
  html.apprefonte .msec-demo { background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-ink-soft) !important; }
  html.apprefonte .msec-demo svg { color: var(--ar-cyan) !important; }

  /* Blocs dépliables. */
  html.apprefonte .msec-block {
    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 .msec-block > summary { min-height: 56px; }
  html.apprefonte .msec-ic { background: var(--ar-surface-2) !important; border-color: var(--ar-amber-40) !important; }
  html.apprefonte .msec-ic svg { color: var(--ar-amber) !important; }
  html.apprefonte .msec-tline { color: var(--ar-ink) !important; }
  html.apprefonte .msec-sub { color: var(--ar-ink-soft) !important; }
  html.apprefonte .msec-chev { background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important; color: var(--ar-ink-soft) !important; }

  /* Carte active (contour cyan) + libellé « Protection active » cyan. */
  html.apprefonte .msec-block.is-live { border-color: var(--ar-cyan-40) !important; box-shadow: 0 0 0 1px var(--ar-cyan-40) !important; }
  html.apprefonte .msec-live-txt { color: var(--ar-cyan) !important; }
  html.apprefonte .msec-live-txt .d { background: var(--ar-cyan) !important; box-shadow: 0 0 9px var(--ar-cyan) !important; }

  /* Badges. */
  html.apprefonte .msec-badge.gold, html.apprefonte .msec-badge.live { background: var(--ar-amber-10) !important; color: var(--ar-amber) !important; border-color: var(--ar-amber-40) !important; }
  html.apprefonte .msec-badge.done, html.apprefonte .msec-badge.off { background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important; border-color: var(--ar-hairline) !important; }
  html.apprefonte .msec-badge.soon { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border-color: var(--ar-cyan-40) !important; }
  html.apprefonte .msec-badge.warn { background: var(--ar-danger-10) !important; color: var(--ar-danger) !important; border-color: var(--ar-danger) !important; }

  /* Détail déplié (cellules + note + bouton). */
  html.apprefonte .msec-grid8 { background: var(--ar-hairline) !important; border-color: var(--ar-hairline) !important; }
  html.apprefonte .msec-cell { background: var(--ar-surface) !important; }
  html.apprefonte .msec-cell .ci { background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important; }
  html.apprefonte .msec-cell .ci svg { color: var(--ar-amber) !important; }
  html.apprefonte .msec-cell .cv { color: var(--ar-ink) !important; }
  html.apprefonte .msec-btn {
    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);
  }
  html.apprefonte .msec-empty { background: var(--ar-surface) !important; border: 1px dashed var(--ar-border) !important; color: var(--ar-ink-soft) !important; }
  html.apprefonte .msec-foot a, html.apprefonte .msec-note strong { color: var(--ar-cyan) !important; }

  /* ==========================================================================
     6) CONFIANCE & SÉCURITÉ — confiance.php  (maquette 24 → hub sombre)
        DOM : .page-head/.icon-shield/.subtitle/.diamond /
              .premium-card/.premium-row/.pr-icon/.pr-title/.num/.pr-content/
              .pr-steps/.pr-step/.pr-step-num/.pr-step-text
     ====================================================================== */
  html.apprefonte body.page-confiance .page-head h1 { color: var(--ar-ink) !important; }
  html.apprefonte body.page-confiance .subtitle { color: var(--ar-ink-soft) !important; }
  html.apprefonte body.page-confiance .icon-shield { color: var(--ar-cyan) !important; }

  html.apprefonte body.page-confiance .premium-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important; box-shadow: var(--ar-sh-card) !important;
  }
  html.apprefonte body.page-confiance .pr-icon {
    background: var(--ar-cyan-10) !important; border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important; border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte body.page-confiance .pr-title { color: var(--ar-ink) !important; }
  html.apprefonte body.page-confiance .pr-title .num { color: var(--ar-cyan) !important; }
  html.apprefonte body.page-confiance .pr-content a { color: var(--ar-cyan) !important; }
  html.apprefonte body.page-confiance .pr-step-num {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-cyan-40) !important;
  }

  /* ==========================================================================
     7) AUTOUR / RADAR — autour-de-moi.php
        DOM : .am-head/.am-loc/.am-filters/.am-paliers/.am-status/.am-grid/
              .am-block/.am-act…  (le radar .am-radar* n'est PAS touché)
        Le fichier a déjà un thème scopé am-* (cyan #1fb0d4, gold #E7C24B) :
        on aligne uniquement les accents sur --ar-cyan / --ar-amber.
     ====================================================================== */
  html.apprefonte .am-head .ico { background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; }
  html.apprefonte .am-head .gold { color: var(--ar-amber) !important; }
  html.apprefonte .am-head .sub { color: var(--ar-ink-soft) !important; }

  html.apprefonte .am-loc button,
  html.apprefonte .am-loc .phare a,
  html.apprefonte .am-status .acts a,
  html.apprefonte .am-status .acts button {
    color: var(--ar-cyan) !important; background: var(--ar-cyan-10) !important;
    border-color: var(--ar-cyan-40) !important; min-height: var(--ar-tap); box-sizing: border-box;
  }

  /* Filtres & paliers (chips) : actif = cyan plein. */
  html.apprefonte .am-filters button, html.apprefonte .am-paliers button {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; min-height: var(--ar-tap); box-sizing: border-box;
  }
  html.apprefonte .am-filters button.on, html.apprefonte .am-paliers button.on {
    background: var(--ar-cyan) !important; border-color: var(--ar-cyan) !important; color: var(--ar-on-accent) !important;
  }

  /* Blocs d'actions (Proximité / Communauté). */
  html.apprefonte .am-block { background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-md) !important; }
  html.apprefonte .am-act { min-height: var(--ar-tap); }
  html.apprefonte .am-act .ic { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .am-act.hl { background: var(--ar-cyan-10) !important; border: 1px solid var(--ar-cyan-40) !important; }
  html.apprefonte .am-status { background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; }
  html.apprefonte .am-cityrow input { background: var(--ar-surface-2) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-ink) !important; font-size: 16px !important; }
  html.apprefonte .am-tip { background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; }
  html.apprefonte .am-details > summary.card { background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-md) !important; min-height: var(--ar-tap); }

} /* fin @media (max-width:768px) — le BUREAU reste 100 % intact */