/* ============================================================================
   medias-carnet.css — LOT « Carnet · Souvenirs · Grand Brasier · Médias »
   ----------------------------------------------------------------------------
   • Habillage (reskin) additif et RÉVERSIBLE vers le thème sombre officiel.
   • S'active UNIQUEMENT en mode app : html.apprefonte ET ≤ 768px.
     Le bureau (> 768px) n'est JAMAIS touché (tout est sous @media max-width:768px).
   • Réutilise les tokens EXISTANTS de app-refonte.css (--ar-*). Aucun token
     n'est redéfini ici.
   • Palette : sombre unique. On neutralise les couleurs hors-charte des pages
     (or/brun, bleu, vert, violet, teal, dégradés) vers cyan (exploration),
     ambre (engagement) et rouge (destructif seul).
   • 100 % CSS : aucune logique/requête/CSRF/permission changée. Le GARDIEN
     (.ai-*, .gw-*, gardien-*) et ÉTINCELLES ne sont jamais ciblés ici.
   • Pages sources réelles : carnet-route.php (+ includes/carnet-frise-ui.php),
     souvenirs.php, classement.php (+ includes/gb/render-classement.php).
   ============================================================================ */

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

  /* ══════════════════════════════════════════════════════════════════════
     1) CARNET DE ROUTE — maquette 18
     En-tête, bouton « Nouvelle entrée », cartes de journal, blocs parcours,
     galerie « Mes photos », blocs voyages/favoris/visibilité.
     (.pub-pagehead / .adm-card / .adm-btn-primary sont déjà traités par
      app-refonte.css ; ici on affine ce qui est propre au Carnet.)
     ══════════════════════════════════════════════════════════════════════ */

  /* Bandeaux d'état haut de page (module OFF / carnet vide) → surfaces DS. */
  html.apprefonte #btnNouvelleEntree { white-space: nowrap; }

  /* ---- Cartes « Mon journal » (.cr-card) : photo + titre + extrait ---- */
  html.apprefonte .cr-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;
    overflow: hidden;
  }
  html.apprefonte .cr-card-photo,
  html.apprefonte .cr-card-noph { background: var(--ar-surface-2) !important; }
  html.apprefonte .cr-card-noph { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cr-card-cnt {
    background: var(--ar-scrim) !important; border-color: var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .cr-card-title { color: var(--ar-ink) !important; }
  html.apprefonte .cr-card-excerpt { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cr-card-date,
  html.apprefonte .cr-card-meta,
  html.apprefonte .cr-card-it { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cr-card-chip {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
  }
  /* « Voir la note complète » = exploration → contour cyan, cible ≥44px. */
  html.apprefonte .cr-card-voir {
    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;
    min-height: var(--ar-tap); padding: 0 18px !important;
  }
  html.apprefonte .cr-card-del {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .cr-card-del:hover { color: var(--ar-danger) !important; }
  /* Mini-frise (départ→arrivée) : dép = cyan, arr = ambre (charte). */
  html.apprefonte .cr-mini {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important;
  }
  html.apprefonte .cr-mini-node,
  html.apprefonte .cr-mini-hint { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cr-mini-dot.dep { border-color: var(--ar-cyan-40) !important; }
  html.apprefonte .cr-mini-dot.arr { border-color: var(--ar-amber-40) !important; }

  /* ---- Blocs « parcours » (.pc) : cartes de carnets titrés ---- */
  html.apprefonte .pc {
    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 .pc-body h3 { color: var(--ar-ink) !important; }
  html.apprefonte .pc-note,
  html.apprefonte .pc-meta,
  html.apprefonte .pc-meta .it { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pc-route { color: var(--ar-ink) !important; }
  html.apprefonte .pc-sel { border-color: var(--ar-cyan-40) !important; }
  /* Statuts : « en cours » (vert d'origine) → cyan ; « terminé » → ambre. */
  html.apprefonte .pc-st {
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border-radius: var(--ar-r-pill);
  }
  html.apprefonte .pc-st.legacy,
  html.apprefonte .pc-st.done { background: var(--ar-amber-10) !important; color: var(--ar-amber) !important; }
  html.apprefonte .pc-visch { color: var(--ar-ink-soft) !important; }
  /* « Voir ma frise » = exploration → cyan. */
  html.apprefonte .pc-voir { color: var(--ar-cyan) !important; }
  html.apprefonte .pc-del { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pc-del:hover { color: var(--ar-danger) !important; }
  /* « Créer un nouveau carnet » = engagement → contour ambre, cible pleine. */
  html.apprefonte .pc-new {
    background: var(--ar-amber-10) !important; border: 1px solid var(--ar-amber-40) !important;
    color: var(--ar-amber) !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h); font-weight: 700;
  }

  /* ---- Bloc pliable « Mes voyages » (details.cr-voyfold) ---- */
  html.apprefonte .cr-voyfold summary { list-style: none; }
  html.apprefonte .cr-voyfold summary::-webkit-details-marker { display: none; }
  html.apprefonte .cr-voyfold-chev { color: var(--ar-ink-soft); transition: transform var(--ar-std) var(--ar-ease); }
  html.apprefonte .cr-voyfold[open] .cr-voyfold-chev { transform: rotate(180deg); }

  /* ══════════════════════════════════════════════════════════════════════
     2) FRISE « Mon carnet de route » — hero + pellicule (maquette 18)
     includes/carnet-frise-ui.php (.cf-*). La frise emploie déjà le cyan
     (exploration = charte OK) ; on la pose sur surface DS et on remet les
     boutons de création en AMBRE (engagement), le bleu étant hors-palette.
     ══════════════════════════════════════════════════════════════════════ */
  html.apprefonte .cf-window {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-xl) !important; box-shadow: var(--ar-sh-card);
  }
  html.apprefonte .cf-title { color: var(--ar-ink) !important; }
  html.apprefonte .cf-sub,
  html.apprefonte .cf-tagline,
  html.apprefonte .cf-back { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cf-badge {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .cf-apercu {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important;
    color: var(--ar-amber) !important;
  }
  /* Onglets de carnets (chips) */
  html.apprefonte .cf-swchip {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; min-height: var(--ar-tap);
  }
  html.apprefonte .cf-swchip.on {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  /* Cartes-étapes (pellicule) */
  html.apprefonte .cf-step {
    background: var(--ar-surface-2) !important; border-color: var(--ar-cyan-40) !important;
  }
  html.apprefonte .cf-step.final,
  html.apprefonte .cf-step.cf-t-r { border-color: var(--ar-amber-40) !important; }
  html.apprefonte .cf-step .cf-dot { background: var(--ar-bg) !important; border-color: var(--ar-cyan) !important; }
  html.apprefonte .cf-step.final .cf-dot { border-color: var(--ar-amber) !important; }
  html.apprefonte .cf-lbl { color: var(--ar-cyan) !important; }
  html.apprefonte .cf-step.final .cf-lbl,
  html.apprefonte .cf-step.cf-t-r .cf-lbl { color: var(--ar-amber) !important; }
  html.apprefonte .cf-step.cf-t-n .cf-lbl { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cf-place { color: var(--ar-ink) !important; }
  html.apprefonte .cf-place svg { color: var(--ar-cyan) !important; }
  html.apprefonte .cf-step.final .cf-place svg { color: var(--ar-amber) !important; }
  html.apprefonte .cf-excerpt { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cf-date2 { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cf-ph-empty { background: var(--ar-surface) !important; color: var(--ar-ink-soft) !important; }
  html.apprefonte .cf-cnt { background: var(--ar-scrim) !important; border-color: var(--ar-hairline) !important; color: var(--ar-ink) !important; }
  /* « Voir » d'une étape = exploration → cyan */
  html.apprefonte .cf-voir {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .cf-step.final .cf-voir {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important;
    color: var(--ar-amber) !important;
  }
  /* Connecteurs (points + flèche) */
  html.apprefonte .cf-dots i { background: var(--ar-cyan) !important; box-shadow: none !important; }
  html.apprefonte .cf-arrow { border-left-color: var(--ar-cyan) !important; }
  html.apprefonte .cf-addmini {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  /* Liste des carnets (.cf-cn / .cf-new) */
  html.apprefonte .cf-cn { background: var(--ar-surface) !important; border-color: var(--ar-hairline) !important; }
  html.apprefonte .cf-cn h3 { color: var(--ar-ink) !important; }
  html.apprefonte .cf-cn .cf-cn-sub { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cf-st.on { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .cf-st.done { background: var(--ar-amber-10) !important; color: var(--ar-amber) !important; }
  html.apprefonte .cf-new {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important;
    color: var(--ar-amber) !important;
  }
  /* Aide + barre d'actions */
  html.apprefonte .cf-help { color: var(--ar-ink-soft) !important; border-top-color: var(--ar-hairline) !important; }
  html.apprefonte .cf-btn { min-height: var(--ar-btn-h); border-radius: var(--ar-r-pill) !important; }
  /* Action principale de la frise (créer/ajouter/publier) = AMBRE plein. */
  html.apprefonte .cf-btn.primary,
  html.apprefonte .cf-btn.gold {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    box-shadow: none !important; border: 0 !important;
  }
  html.apprefonte .cf-btn.ghost {
    background: transparent !important; border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .cf-empty { color: var(--ar-ink-soft) !important; }
  /* Modales frise → surface + feuille DS */
  html.apprefonte .cf-modal { background: var(--ar-scrim) !important; }
  html.apprefonte .cf-sheet {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-xl) !important; box-shadow: var(--ar-sh-sheet) !important;
  }
  html.apprefonte .cf-sheet h2 { color: var(--ar-ink) !important; }
  html.apprefonte .cf-sheet .cf-s,
  html.apprefonte .cf-fld label { color: var(--ar-ink-soft) !important; }
  html.apprefonte .cf-sub2 { color: var(--ar-cyan) !important; border-top-color: var(--ar-hairline) !important; }
  html.apprefonte .cf-req { color: var(--ar-danger) !important; }
  html.apprefonte .cf-fld input,
  html.apprefonte .cf-fld textarea,
  html.apprefonte .cf-fld select {
    background: var(--ar-surface-2) !important; border-color: var(--ar-border) !important;
    color: var(--ar-ink) !important; border-radius: var(--ar-r-sm) !important; font-size: 16px !important;
  }
  html.apprefonte .cf-mrow { border-top-color: var(--ar-hairline) !important; }
  html.apprefonte .cf-x {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; width: var(--ar-tap); height: var(--ar-tap);
  }

  /* ══════════════════════════════════════════════════════════════════════
     3) SOUVENIRS — onglets + « Souvenirs du carnet » (frises)  (maquette 19)
     souvenirs.php (.svc-*). L'or/brun d'origine → ambre DS ; états verts → cyan.
     ══════════════════════════════════════════════════════════════════════ */
  html.apprefonte .svc-tab {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; min-height: var(--ar-tap); border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .svc-tab.on {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .svc-empty { color: var(--ar-ink-soft) !important; }
  html.apprefonte .svc-empty a { color: var(--ar-amber) !important; }
  html.apprefonte .svc-frise {
    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);
  }
  html.apprefonte .svc-ftitle { color: var(--ar-ink) !important; }
  html.apprefonte .svc-fcount { color: var(--ar-ink-soft) !important; }
  /* États du carnet : actif → cyan, terminé → ambre, passé → neutre. */
  html.apprefonte .svc-state.actif { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .svc-state.termine { background: var(--ar-amber-10) !important; color: var(--ar-amber) !important; }
  html.apprefonte .svc-state.passe { background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important; }
  /* « Rouvrir le carnet » = engagement → contour ambre (vert d'origine banni). */
  html.apprefonte .svc-reopenbtn {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important;
    color: var(--ar-amber) !important; min-height: var(--ar-tap);
  }
  html.apprefonte .svc-emptyblocks { color: var(--ar-ink-soft) !important; }
  html.apprefonte .svc-block {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .svc-photo { background-color: var(--ar-surface) !important; color: var(--ar-ink-soft) !important; }
  html.apprefonte .svc-type { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .svc-btitle { color: var(--ar-ink) !important; }
  html.apprefonte .svc-lieu { color: var(--ar-cyan) !important; }
  html.apprefonte .svc-date { color: var(--ar-ink-soft) !important; }
  html.apprefonte .svc-note { color: var(--ar-ink-soft) !important; }

  /* ══════════════════════════════════════════════════════════════════════
     4) SOUVENIRS v2 — stats, ajout, filtres, grille de cartes (maquette 19)
     souvenirs.php (.sv2-*). Brun/or → ambre ; picker néon cyan → plat DS.
     ══════════════════════════════════════════════════════════════════════ */
  html.apprefonte .sv2-stat {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.apprefonte .sv2-stat-ic {
    background: var(--ar-amber-10) !important; border: 1px solid var(--ar-amber-40) !important;
    color: var(--ar-amber) !important; border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .sv2-stat b { color: var(--ar-ink) !important; }
  html.apprefonte .sv2-stat span:last-child { color: var(--ar-ink-soft) !important; }

  /* Panneau d'ajout (= MediaPicker « Ajouter un média », maquette 01) */
  html.apprefonte .sv2-up {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.apprefonte .sv2-up-title { color: var(--ar-ink) !important; font-family: 'Inter', system-ui, sans-serif !important; }
  html.apprefonte .sv2-up label { color: var(--ar-ink-soft) !important; }
  html.apprefonte .sv2-up input[type=text],
  html.apprefonte .sv2-up 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;
  }
  /* Tuiles source (Photo / Vidéo) : rendu PLAT (pas de néon/glow), pointillé cyan. */
  html.apprefonte .sv2-pickbtn {
    background: var(--ar-surface-2) !important; border: 1px dashed var(--ar-cyan-40) !important;
    color: var(--ar-ink) !important; border-radius: var(--ar-r-md) !important; min-height: 96px;
  }
  html.apprefonte .sv2-pickbtn small { color: var(--ar-ink-soft) !important; }
  html.apprefonte .sv2-pickbtn:hover,
  html.apprefonte .sv2-pickbtn:active { border-color: var(--ar-cyan) !important; filter: none !important; }
  html.apprefonte .sv2-picked { color: var(--ar-ink-soft) !important; }
  html.apprefonte .sv2-picked.has { color: var(--ar-cyan) !important; }
  /* Ligne de visibilité (= segmented Public/Compagnons/Privé, maquette 05) */
  html.apprefonte .sv2-visrow label {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important; min-height: var(--ar-tap); border-radius: var(--ar-r-pill);
  }
  /* « Publier ce souvenir » = SEULE action pleine (engagement) → ambre, pas de dégradé. */
  html.apprefonte .sv2-btn {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    border-radius: var(--ar-r-pill) !important; min-height: var(--ar-btn-h); font-weight: 700;
  }

  /* Filtres (exploration → cyan) + tri */
  html.apprefonte .sv2-ftab {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; min-height: var(--ar-tap); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.apprefonte .sv2-ftab b { background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .sv2-ftab.on {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important;
  }
  html.apprefonte .sv2-sort {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important; min-height: var(--ar-tap); font-size: 16px !important;
  }

  /* Grille de cartes riches (photo/vidéo + favori + durée) */
  html.apprefonte .sv2-card2 {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; box-shadow: var(--ar-sh-card);
  }
  html.apprefonte .sv2-card2-media { background: var(--ar-surface-2) !important; }
  html.apprefonte .sv2-playbadge,
  html.apprefonte .sv2-dur { background: var(--ar-scrim) !important; color: var(--ar-ink) !important; }
  html.apprefonte .sv2-fav {
    width: var(--ar-tap); height: var(--ar-tap); background: var(--ar-scrim) !important;
    color: var(--ar-ink-soft) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.apprefonte .sv2-fav.on { color: var(--ar-amber) !important; text-shadow: none !important; }
  html.apprefonte .sv2-card2-t { color: var(--ar-ink) !important; }
  html.apprefonte .sv2-card2-m { color: var(--ar-ink-soft) !important; }
  html.apprefonte .sv2-chip2 {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important; color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .sv2-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;
  }
  /* Sidebar (Partenaire / Publicité / Astuce) */
  html.apprefonte .sv2-pcard,
  html.apprefonte .sv2-pubcard {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.apprefonte .sv2-pcard-tag,
  html.apprefonte .sv2-publbl { color: var(--ar-amber) !important; font-family: 'Inter', system-ui, sans-serif !important; }
  html.apprefonte .sv2-pcard-h { color: var(--ar-ink) !important; font-family: 'Inter', system-ui, sans-serif !important; }
  html.apprefonte .sv2-pcard-p { color: var(--ar-ink-soft) !important; }
  html.apprefonte .sv2-pcard-btn {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important; border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .sv2-partner { border-color: var(--ar-amber-40) !important; }

  /* ══════════════════════════════════════════════════════════════════════
     5) SOUVENIRS « ancien » médias (.mv-*) — Photos/Vidéos + panneau d'ajout
     Même reskin sombre (au cas où le drapeau v2 est OFF).
     ══════════════════════════════════════════════════════════════════════ */
  html.apprefonte .mv-title { color: var(--ar-ink) !important; font-family: 'Inter', system-ui, sans-serif !important; }
  html.apprefonte .mv-sub,
  html.apprefonte .mv-crumb { color: var(--ar-ink-soft) !important; }
  html.apprefonte .mv-add {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    border-radius: var(--ar-r-pill) !important; box-shadow: none !important;
    min-height: var(--ar-btn-h); font-family: 'Inter', system-ui, sans-serif !important;
  }
  html.apprefonte .mv-tab,
  html.apprefonte .mv-fbtn {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; min-height: var(--ar-tap);
  }
  html.apprefonte .mv-tab.on,
  html.apprefonte .mv-fbtn.on {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important; box-shadow: none !important;
  }
  html.apprefonte .mv-search input {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important; font-size: 16px !important; min-height: var(--ar-tap);
  }
  html.apprefonte .mv-feature,
  html.apprefonte .mv-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; box-shadow: var(--ar-sh-card) !important;
  }
  html.apprefonte .mv-feature-media,
  html.apprefonte .mv-card-media { background: var(--ar-surface-2) !important; }
  html.apprefonte .mv-ftitle,
  html.apprefonte .mv-card-t { color: var(--ar-ink) !important; font-family: 'Inter', system-ui, sans-serif !important; }
  html.apprefonte .mv-date,
  html.apprefonte .mv-card-d { color: var(--ar-ink-soft) !important; }
  html.apprefonte .mv-badge,
  html.apprefonte .mv-card-vis {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important; color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .mv-dur,
  html.apprefonte .mv-play,
  html.apprefonte .mv-card-play { background: var(--ar-scrim) !important; color: var(--ar-ink) !important; }
  html.apprefonte .mv-modif {
    background: transparent !important; border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important; min-height: var(--ar-tap); border-radius: var(--ar-r-pill);
  }
  html.apprefonte .mv-dots {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .mv-menu {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; box-shadow: var(--ar-sh-sheet) !important;
  }
  html.apprefonte .mv-menu button,
  html.apprefonte .mv-menu a { color: var(--ar-ink) !important; min-height: var(--ar-tap); }
  html.apprefonte .mv-menu .danger { color: var(--ar-danger) !important; }
  html.apprefonte .mv-empty,
  html.apprefonte .mv-noresult {
    background: var(--ar-surface) !important; border: 1px dashed var(--ar-border) !important; color: var(--ar-ink-soft) !important;
  }

  /* ══════════════════════════════════════════════════════════════════════
     6) GRAND BRASIER — page publique (maquette 20)
     includes/gb/render-classement.php, scope #gb-public. Les accents sont
     posés EN LIGNE (couleurs hors-charte : bleu #4aa8ff, violet #a684ff,
     teal #2fd6c3, rose #ff6ca8) → neutralisés vers AMBRE/CYAN avec !important.
     Spécificité portée par html.apprefonte #gb-public (> #gb-public seul).
     ══════════════════════════════════════════════════════════════════════ */
  html.apprefonte #gb-public { color: var(--ar-ink) !important; }

  /* En-tête */
  html.apprefonte #gb-public .gbp-head {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important;
  }
  html.apprefonte #gb-public .gbp-title h1 { color: var(--ar-ink) !important; }
  html.apprefonte #gb-public .gbp-sub { color: var(--ar-ink-soft) !important; }
  html.apprefonte #gb-public .gbp-upd {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important;
  }
  html.apprefonte #gb-public .gbp-preview {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important; color: var(--ar-amber) !important;
  }
  html.apprefonte #gb-public .gbp-testband {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte #gb-public .gbp-testband b { color: var(--ar-amber) !important; }
  html.apprefonte #gb-public .gbp-testband .tag,
  html.apprefonte #gb-public .gbp-howto-test {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
  }

  /* Coffres : cartes DS ; accent/soft/barres forcés hors palette → ambre & cyan.
     (Les 3 pastilles gardent un accent lisible : Membres=ambre, Événements=cyan,
     Application=cyan-soft, au lieu de orange/teal/bleu.) */
  html.apprefonte #gb-public .gbp-cof {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte #gb-public .gbp-cof .ic {
    background: var(--ar-amber-10) !important; color: var(--ar-amber) !important; border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte #gb-public .gbp-cof .lab { color: var(--ar-ink) !important; }
  html.apprefonte #gb-public .gbp-cof .amt { color: var(--ar-ink) !important; }
  html.apprefonte #gb-public .gbp-cof .amt small,
  html.apprefonte #gb-public .gbp-cof .pct { color: var(--ar-ink-soft) !important; }
  html.apprefonte #gb-public .gbp-unavail {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important; color: var(--ar-amber) !important;
  }
  html.apprefonte #gb-public .gbp-bar { background: var(--ar-surface-2) !important; }
  html.apprefonte #gb-public .gbp-bar > i { background: var(--ar-amber) !important; }
  /* 2e et 3e coffres : barre en cyan pour distinguer sans sortir de la charte. */
  html.apprefonte #gb-public .gbp-coffres .gbp-cof:nth-child(2) .ic,
  html.apprefonte #gb-public .gbp-coffres .gbp-cof:nth-child(3) .ic {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
  }
  html.apprefonte #gb-public .gbp-coffres .gbp-cof:nth-child(2) .gbp-bar > i,
  html.apprefonte #gb-public .gbp-coffres .gbp-cof:nth-child(3) .gbp-bar > i {
    background: var(--ar-cyan) !important;
  }
  /* Neutralise la lueur qui balaie les barres (rendu plat DS). */
  html.apprefonte #gb-public .gbp-bar > i::after { display: none !important; }

  /* Panneaux (classement, actions) */
  html.apprefonte #gb-public .gbp-panel {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important;
  }
  html.apprefonte #gb-public .gbp-panel h2 { color: var(--ar-ink) !important; }
  /* Tableau du classement */
  html.apprefonte #gb-public thead th { color: var(--ar-ink-soft) !important; border-bottom-color: var(--ar-hairline) !important; }
  html.apprefonte #gb-public tbody td { border-bottom-color: var(--ar-hairline) !important; }
  html.apprefonte #gb-public td.rank { color: var(--ar-amber) !important; }
  html.apprefonte #gb-public td.rew { color: var(--ar-cyan) !important; }
  html.apprefonte #gb-public .gbp-empty .fire { filter: none !important; }
  html.apprefonte #gb-public .gbp-empty p { color: var(--ar-ink-soft) !important; }
  /* Cartes d'actions récompensées : bordure/accent en ligne → ambre. */
  html.apprefonte #gb-public .gbp-act {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte #gb-public .gbp-act .ic,
  html.apprefonte #gb-public .gbp-act .b { color: var(--ar-amber) !important; }
  html.apprefonte #gb-public .gbp-act .t { color: var(--ar-ink) !important; }
  html.apprefonte #gb-public .gbp-act:hover { transform: none !important; }
  html.apprefonte #gb-public .gbp-note {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; border-radius: var(--ar-r-md) !important;
  }
  /* Tableau/cartes « Comment gagner des braises » */
  html.apprefonte #gb-public .gbp-howto-sub,
  html.apprefonte #gb-public .gbp-hw-how,
  html.apprefonte #gb-public .gbp-hw-val { color: var(--ar-ink-soft) !important; }
  html.apprefonte #gb-public .gbp-howto-tbl thead th { color: var(--ar-ink-soft) !important; border-bottom-color: var(--ar-hairline) !important; }
  html.apprefonte #gb-public .gbp-howto-tbl tbody td { border-bottom-color: var(--ar-hairline) !important; }
  html.apprefonte #gb-public .gbp-hw-name { color: var(--ar-ink) !important; }
  html.apprefonte #gb-public .gbp-hw-ic,
  html.apprefonte #gb-public .gbp-hw-br { color: var(--ar-amber) !important; }
  html.apprefonte #gb-public .gbp-howto-more {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important; min-height: var(--ar-tap);
  }
  /* En mode app, le tableau howto se transforme en cartes : accent en ligne → ambre. */
  html.apprefonte #gb-public .gbp-hw-card,
  html.apprefonte #gb-public .gbp-howto-tbl tr {
    background: var(--ar-surface-2) !important; border-color: var(--ar-hairline) !important;
  }
}