/* ============================================================================
   refonte-lots/zzzz-guide.css  —  ÉCRAN « Guide du voyageur » (guide.php, .ar-guide)
   ----------------------------------------------------------------------------
   RÔLE : couche additive chargée EN DERNIER (prime sur zz-guide-app.css).
   Rapproche l'écran de la maquette 16 : en-tête serif + lanterne plus grands,
   4 GRANDES cartes catégories (illustration large, titre+chevron en bas, accent
   ambre/cyan alterné), titres de blocs, pastilles rondes creuses des « plus
   consultés ». Charte sombre. N'ajoute AUCUNE classe : utilise uniquement les
   classes réelles de guide.php / zz-guide-app.css (.ar-gd-*).
   ROLLBACK : supprimer ce fichier (ou retirer son inclusion). 100% réversible.
   NE TOUCHE PAS au Gardien ni à Étincelles (aucune règle les ciblant).
   ============================================================================ */

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

  /* --- En-tête : lanterne + titre serif plus imposants (maquette) ------------ */
  html.apprefonte .ar-gd-head { gap: 14px !important; padding: 8px 0 18px !important; align-items: center !important; }
  html.apprefonte .ar-gd-head h1 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.02 !important;
    letter-spacing: .2px !important;
    color: #F6F0DF !important;
  }
  html.apprefonte .ar-gd-lantern { font-size: 42px !important; line-height: 1 !important; flex: 0 0 auto; }
  html.apprefonte .ar-gd-head .ar-illustration { width: 46px !important; height: 46px !important; }

  /* --- Recherche : champ haut, arrondi, anti-zoom iOS (16px) ----------------- */
  html.apprefonte .ar-gd-search {
    background: #0D2233 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
  }
  html.apprefonte .ar-gd-search input { color: #F6F0DF !important; font-size: 16px !important; }

  /* ==========================================================================
     4 GRANDES CARTES CATÉGORIES (cœur de l'écart maquette)
     Cartes hautes : illustration large en haut, titre + chevron poussés en bas.
     Accent ambre pour Rencontrer / Carte & services (2e, 4e), cyan pour les autres.
     ====================================================================== */
  html.apprefonte .ar-gd-topics { gap: 8px !important; margin-bottom: 18px !important; }

  html.apprefonte .ar-gd-topic {
    min-height: 150px;
    padding: 16px 3px 12px !important;
    border-radius: 16px !important;
    background: #0D2233 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    gap: 0 !important;
    justify-content: flex-start !important;
  }
  /* illustration collée en haut (margin-bottom auto pousse titre+chevron en bas) */
  html.apprefonte .ar-gd-topic .ar-gd-topic-ic { margin: 0 auto auto !important; font-size: 0 !important; }
  html.apprefonte .ar-gd-topic .ar-gd-topic-ic img,
  html.apprefonte .ar-gd-topic .ar-guide-card-icon {
    width: 56px !important; height: 56px !important; object-fit: contain !important; display: block !important;
  }
  html.apprefonte .ar-gd-topic .ar-gd-topic-t {
    font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important;
    color: #F6F0DF !important; margin-top: 9px !important;
    overflow-wrap: normal !important; word-break: keep-all !important; hyphens: none !important;
    padding: 0 2px !important;
  }
  html.apprefonte .ar-gd-topic .ar-gd-chev { font-size: 19px !important; line-height: 1 !important; margin-top: 5px !important; }

  /* Accent alterné (fidèle maquette) : 2e & 4e = ambre, 1re & 3e = cyan doux */
  html.apprefonte .ar-gd-topics .ar-gd-topic:nth-child(2n)   { border-color: rgba(255,182,90,.35) !important; }
  html.apprefonte .ar-gd-topics .ar-gd-topic:nth-child(2n) .ar-gd-chev { color: #FFB65A !important; }
  html.apprefonte .ar-gd-topics .ar-gd-topic:nth-child(2n+1) { border-color: rgba(53,215,209,.22) !important; }
  html.apprefonte .ar-gd-topics .ar-gd-topic:nth-child(2n+1) .ar-gd-chev { color: #35D7D1 !important; }

  /* --- Cartes-blocs : titres de section un peu plus lisibles ----------------- */
  html.apprefonte .ar-gd-card {
    background: #0D2233 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    padding: 18px 16px !important;
    margin-bottom: 16px !important;
  }
  html.apprefonte .ar-gd-card h2 { font-size: 17px !important; font-weight: 700 !important; color: #F6F0DF !important; margin-bottom: 16px !important; }

  /* --- Les 3 modes du Phare : icônes un poil plus grandes -------------------- */
  html.apprefonte .ar-gd-mode-ic img { width: 60px !important; height: 60px !important; }
  html.apprefonte .ar-gd-mode-l { font-size: 13px !important; }

  /* --- Les plus consultés : pastilles rondes CREUSES cyan (maquette) --------- */
  html.apprefonte .ar-gd-poprow { padding: 14px 2px !important; }
  html.apprefonte .ar-gd-poprow-ic {
    background: transparent !important;
    border: 1px solid rgba(53,215,209,.40) !important;
    color: #35D7D1 !important;
  }
  html.apprefonte .ar-gd-poprow-t { font-size: 15px !important; color: #F6F0DF !important; }

}
/* fin @media — le bureau (>768px) reste 100% intact */