/* Pages guides (/stationnement, /quoi-faire, /personnages) : pages de texte légères, sans 3D, faites pour les
   moteurs de recherche et les visiteurs qui arrivent par une recherche. S'appuient sur base.css et site.css
   (en-tête, pied de page, questions fréquentes). */

/* ———————— en-tête : logo, liens des guides, bouton de l'application (sans script) ———————— */
.guide-nav { display: flex; flex-wrap: wrap; gap: 2px 18px; flex: 1 1 360px; justify-content: center; font-weight: 700; font-size: 15.5px; font-stretch: 94%; }
.guide-nav a { color: var(--sable); text-decoration: none; padding: 10px 0; border-bottom: 3px solid transparent; }
.guide-nav a:hover { color: #fff; }
.guide-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--moutarde); }
@media (max-width: 900px) {
  .guide-nav { order: 9; flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .guide-nav::-webkit-scrollbar { display: none; }
  .guide-nav a { white-space: nowrap; flex: 0 0 auto; }
  /* logo et bouton sur la même ligne, les liens dessous */
  .entete .guide-appli { flex-basis: auto; margin-left: auto; }
  .entete .guide-appli .btn { flex: 0 0 auto; min-height: 44px; padding: 0 16px; }
}
@media (max-width: 380px) { .logo { font-size: 22px; } .logo-chapeau { width: 40px; } }

/* ———————— tête de page ———————— */
.guide-tete { background: var(--denim); color: var(--sable); border-bottom: var(--bord); }
.guide-tete .section { max-width: 1040px; padding-block: 28px 44px; }
.fil-ariane ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; font-weight: 700; }
.fil-ariane li + li::before { content: '›'; margin-right: 8px; color: var(--moutarde); }
.fil-ariane a { color: #D5E1EC; }
.fil-ariane [aria-current] { color: var(--sable); }
.guide-tete .surtitre { color: var(--moutarde); }
.guide-tete h1 { color: #fff; max-width: 22ch; }
.guide-tete .chapeau { color: #D5E1EC; max-width: 62ch; }
.guide-tete .rangee { margin-top: 6px; }
.guide-tete .btn-contour { color: var(--sable); border-color: var(--sable); }
.guide-tete .btn-contour:hover { color: #fff; border-color: #fff; }

/* ———————— corps ———————— */
.guide { max-width: 1040px; }
.guide-bloc { margin-top: 44px; }
.guide-bloc:first-child { margin-top: 0; }
.guide-bloc > h2 { font-weight: 900; font-stretch: 115%; font-size: clamp(25px, 3.2vw, 34px); line-height: 1.1; margin: 0 0 12px; }
.guide-bloc > h2 + .chapeau { margin-top: 0; }
.guide-texte p, .guide-texte li { max-width: 68ch; }
.guide-texte ul, .guide-texte ol { padding-left: 1.3em; margin: 8px 0 14px; }
.guide-texte li { margin: 6px 0; }
.guide-texte h3 { font-size: 20px; font-weight: 900; margin: 22px 0 6px; }
.guide-cartes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.guide-cartes-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* six cartes : 3 + 3 sur ordinateur */
.guide-cartes > li { display: flex; flex-direction: column; gap: 6px; }
.guide-cartes h3 { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.2; }
.guide-cartes p { margin: 0; color: var(--gris); }
.guide-ico { width: 46px; height: 46px; border-radius: 14px; border: var(--bord); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.guide-ico svg { width: 24px; height: 24px; }
.guide-encadre { margin-top: 18px; padding: 16px 18px; border-radius: 18px; border: 3px dashed var(--brique); background: var(--creme-ocre); max-width: 76ch; }
.guide-encadre p { margin: 0; }
.guide-encadre p + p { margin-top: 8px; }
.guide-source { font-size: 14px; color: var(--gris-2); }
.guide-cta { margin-top: 44px; padding: 26px; border-radius: var(--r-carte); border: var(--bord); background: var(--papier); box-shadow: var(--ombre-dure); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.guide-cta h2 { margin: 0 0 4px; font-size: clamp(22px, 2.8vw, 28px); font-weight: 900; line-height: 1.15; }
.guide-cta p { margin: 0; color: var(--gris); max-width: 56ch; }

/* ———————— fiches des personnages ———————— */
.fiches { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.fiche { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.fiche-ident { align-self: center; display: flex; flex-direction: column; gap: 4px; }
.fiche-image { width: 104px; height: 168px; border-radius: 16px; border: var(--bord); background: radial-gradient(circle at 50% 30%, #fff 0, var(--c, var(--sable-2)) 70%); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.fiche-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.fiche h3 { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.15; }
.fiche-role { margin: 0; font-weight: 800; color: var(--brique); font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }
.fiche-replique { margin: 2px 0 0; font-style: italic; color: var(--gris); }
.fiche-details { grid-column: 1 / -1; margin: 8px 0 0; display: grid; gap: 6px; }
.fiche-details div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: 15.5px; }
.fiche-details dt { font-weight: 900; }
.fiche-details dd { margin: 0; color: var(--gris); }
.fiche-histoire { grid-column: 1 / -1; margin: 6px 0 0; }

/* ———————— autres guides ———————— */
.guide-autres { margin-top: 44px; }
.guide-autres h2 { font-size: 22px; font-weight: 900; margin: 0 0 12px; }
.guide-autres ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.guide-autres a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: var(--bord); border-radius: 16px; background: var(--papier); color: var(--encre); text-decoration: none; box-shadow: 3px 3px 0 var(--encre); }
.guide-autres a:hover { color: var(--encre); background: #fff; }
.guide-autres strong { font-size: 17px; }
.guide-autres span { color: var(--gris); font-size: 15px; }

@media (max-width: 720px) {
  .guide-tete .section { padding-block: 20px 34px; }
  .faq-liste { grid-template-columns: minmax(0, 1fr); }
  .guide-cta { padding: 20px; }
}
@media (max-width: 380px) {
  .fiche { grid-template-columns: 84px minmax(0, 1fr); }
  .fiche-image { width: 84px; height: 140px; }
}