/* ============================================================================
   REFONTE APP — Guide du voyageur fidèle maquette 16. Scopé html.apprefonte
   + ≤768px + body.page-guide. Additif/réversible. Titre = Cormorant Garamond.
   ============================================================================ */
html.apprefonte .ar-guide { display: none; }

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  html.apprefonte:has(.ar-guide) .pub-content > *:not(.ar-guide):not(.ann-banner-wrap):not(.flash) { display: none !important; }
  html.apprefonte body.page-guide .pub-topbar { display: none !important; }
  html.apprefonte .ar-guide { display: block; padding: 8px 14px calc(var(--ar-navh,64px) + var(--ar-safe-b,0px) + 84px); color: var(--ar-ink); }

  /* Ré-affichage du guide d'origine (clic carte/recherche) */
  html.apprefonte.ar-gd-editing .ar-guide { display: none !important; }
  html.apprefonte.ar-gd-editing:has(.ar-guide) .pub-content > *:not(.ar-guide) { display: revert !important; }
  html.apprefonte.ar-gd-editing body.page-guide .pub-topbar { display: flex !important; }

  /* En-tête (titre serif Cormorant) */
  html.apprefonte .ar-gd-head { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; }
  html.apprefonte .ar-gd-lantern { font-size: 34px; }
  html.apprefonte .ar-gd-head h1 { margin: 0; font: 700 30px/1.05 'Cormorant Garamond',Georgia,serif; color: var(--ar-ink); }

  /* Recherche */
  html.apprefonte .ar-gd-search { display: flex; align-items: center; gap: 10px; background: var(--ar-surface); border: 1px solid var(--ar-hairline); border-radius: 14px; padding: 13px 15px; margin-bottom: 16px; }
  html.apprefonte .ar-gd-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--ar-ink); font-size: 15px; }
  html.apprefonte .ar-gd-search input::placeholder { color: var(--ar-ink-soft); }

  /* 4 cartes thèmes */
  html.apprefonte .ar-gd-topics { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 16px; }
  html.apprefonte .ar-gd-topic { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 10px; border-radius: 14px; background: var(--ar-surface); border: 1px solid var(--ar-hairline); text-decoration: none; color: var(--ar-ink); text-align: center; }
  html.apprefonte .ar-gd-topic-ic { font-size: 26px; }
  html.apprefonte .ar-gd-topic-t { font-size: 11.5px; font-weight: 600; line-height: 1.15; }
  html.apprefonte .ar-gd-topic .ar-gd-chev { color: var(--ar-cyan); font-size: 16px; }

  /* Cartes sections */
  html.apprefonte .ar-gd-card { background: var(--ar-surface); border: 1px solid var(--ar-hairline); border-radius: 18px; padding: 16px; margin-bottom: 16px; }
  html.apprefonte .ar-gd-card h2 { margin: 0 0 14px; font: 800 16px/1.1 'Inter',system-ui,sans-serif; color: var(--ar-ink); }

  /* 3 modes du Phare */
  html.apprefonte .ar-gd-phare { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  html.apprefonte .ar-gd-mode { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; border-right: 1px solid var(--ar-hairline); }
  html.apprefonte .ar-gd-mode:last-child { border-right: 0; }
  html.apprefonte .ar-gd-mode-ic { font-size: 30px; height: 56px; display: flex; align-items: center; justify-content: center; }
  html.apprefonte .ar-gd-mode-ic img { width: 56px; height: 56px; object-fit: contain; display: block; }
  /* (audit 24/08 · FDCN-045) « Compagnons » se cassait EN PLEIN MOT.
     La colonne ne fait que 95 px (trois modes côte à côte sur 390 px) et le mot,
     en 13 px, en demande un peu plus. Un `overflow-wrap: anywhere` hérité d'un
     garde-fou global le coupait alors entre deux lettres : « Compagnon / s ».
     On interdit la coupure à l'intérieur du mot pour ce libellé, et on laisse la
     taille s'adapter juste ce qu'il faut pour qu'il tienne. Mesuré au navigateur
     le 24/08 : boîte de 86 px, mot de 88 px. */
  html.apprefonte .ar-gd-mode-l {
    font-size: clamp(11px, 3.1vw, 13px); font-weight: 600; color: var(--ar-ink-soft);
    overflow-wrap: normal; word-break: keep-all; hyphens: none; text-align: center;
  }
  html.apprefonte .ar-gd-mode.is-on .ar-gd-mode-l { color: var(--ar-amber); }
  html.apprefonte .ar-gd-dash { width: 18px; height: 3px; border-radius: 3px; background: var(--ar-cyan); }
  html.apprefonte .ar-gd-mode.is-on .ar-gd-dash { background: var(--ar-amber); }

  /* Les plus consultés */
  html.apprefonte .ar-gd-poplist { display: flex; flex-direction: column; }
  html.apprefonte .ar-gd-poprow { display: flex; align-items: center; gap: 14px; padding: 13px 2px; text-decoration: none; color: var(--ar-ink); border-bottom: 1px solid var(--ar-hairline); }
  html.apprefonte .ar-gd-poprow:last-child { border-bottom: 0; }
  html.apprefonte .ar-gd-poprow-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(53,215,209,.10); border: 1px solid var(--ar-hairline); font-size: 17px; }
  html.apprefonte .ar-gd-poprow-t { flex: 1; font-size: 15px; font-weight: 600; }
  html.apprefonte .ar-gd-poprow .ar-gd-chev { color: var(--ar-ink-soft); font-size: 20px; }

  /* Bouton Gardien (ambre) */
  html.apprefonte .ar-gd-gardien { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(255,182,90,.08); border: 1px solid rgba(255,182,90,.55); color: var(--ar-amber); font-weight: 800; font-size: 15.5px; text-decoration: none; }
  html.apprefonte .ar-gd-gardien .ar-gd-chev { margin-left: auto; }
}