/* ════════════════════════════════════════════════════════════════
   informations-pratiques.css – gabarit « Informations pratiques »
   d'une étape (première page : Paris).

   Tiré du bloc <style> de la maquette Claude Design
   « Informations pratiques (Paris).html », SANS les tokens ni les
   règles de base qu'elle recopiait et que le thème porte déjà
   (style-v3, components, hero, pages-v3, inscriptions).

   Tout est préfixé par .pf-infos-pratiques, la classe du conteneur
   racine du pattern. Trois composants de la maquette portent le nom
   d'un composant existant, mais avec une autre structure :
     .pf-infobox       style-v3 attend __head / __body, pas d'icône
     .pf-quicklinks    style-v3 attend __in > .pf-quicklink numérotés
     .pf-tabnav--chips components attend __in, pas de liste
   Non préfixées, ces règles casseraient les autres pages ; préfixées,
   la feuille peut être chargée partout sans effet ailleurs.

   Place dans PF_CSS : APRÈS style-v3, pages-v3 et components (elle
   surcharge .pf-infobox, .pf-faq, .pf-quicklinks, .pf-tabnav) et
   AVANT charte-v4-dark. Proposition : juste après
   evenement-aside-float.

   Aucune couleur en dur, sauf le repli de --green-AA (voir 4.) :
   ce token n'existe pas encore dans style-v3.css.
   ════════════════════════════════════════════════════════════════ */


/* ═══ 1. Sections ════════════════════════════════════════════════
   .pf-section a son rythme dans inscriptions.css ; la variante crème
   n'était déclarée qu'en thème sombre. */

.pf-infos-pratiques .pf-section--cream { background: var(--cream); }


/* ═══ 2. Onglets de l'étape ══════════════════════════════════════
   nav.pf-tabnav--chips > ul.pf-tabnav__list > li > a
   L'onglet courant est désigné par aria-current, pas par .is-active :
   la règle .is-active de components.css pose un texte marine sur fond
   marine. Le texte actif passe par --paper, qui s'inverse la nuit. */

.pf-infos-pratiques .pf-tabnav--chips {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.pf-infos-pratiques .pf-tabnav__list {
  flex-wrap: wrap; gap: 8px; overflow: visible;
  max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad);
  list-style: none;
}
.pf-infos-pratiques .pf-tabnav__list li { margin: 0; }
.pf-infos-pratiques .pf-tabnav__link {
  display: block; padding: 9px 18px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
}
.pf-infos-pratiques .pf-tabnav__link:hover { border-color: var(--primary); color: var(--primary); }
.pf-infos-pratiques .pf-tabnav__link[aria-current="page"] {
  background: var(--primary); border-color: var(--primary); color: var(--paper);
}


/* ═══ 3. Infobox à icône ═════════════════════════════════════════
   Icône à gauche, texte à droite. Le cadre, le liseré et l'ombre
   restent ceux de .pf-infobox (style-v3). L'icône passe par la
   variante AA de l'accent : le jaune plein d'un pictogramme sur
   blanc n'atteint pas 3:1. */

.pf-infos-pratiques .pf-infobox {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  margin: 0; padding: 22px 26px; border-radius: 8px;
}
.pf-infos-pratiques .pf-infobox svg { width: 26px; height: 26px; color: var(--cyan-AA); }
.pf-infos-pratiques .pf-infobox--warn svg { color: var(--yellow-AA); }
.pf-infos-pratiques .pf-infobox h3 {
  margin: 0 0 6px; font-size: 17px; font-weight: 600; text-transform: none;
}
.pf-infos-pratiques .pf-infobox p { margin: 0; font-size: 16px; max-width: 74ch; }
.pf-infos-pratiques .pf-infobox p + p { margin-top: 10px; }


/* ═══ 4. Consignes, variante de page ═════════════════════════════
   Mêmes classes que le composant de fiche (components.css), mêmes
   modificateurs --requis / --permis / --interdits, en colonnes
   blanches sur la section crème.

   La pastille du titre est le <span class="gb-shape"> que GB pose
   autour de l'icône d'un bloc texte : la maquette l'appelait
   .pf-consignes__pin, classe qu'aucun bloc GB ne sait porter. */

.pf-consignes--page {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin: 0;
}
.pf-consignes--page .pf-consignes__col {
  background: var(--paper);
  border: 1px solid var(--rule); border-top: 3px solid var(--rule); border-radius: 10px;
  padding: 26px 28px 24px;
}
.pf-consignes--page .pf-consignes__col--requis { border-top-color: var(--primary); }
.pf-consignes--page .pf-consignes__col--permis { border-top-color: var(--green); }
.pf-consignes--page .pf-consignes__col--interdits { border-top-color: var(--red); }

.pf-consignes--page .pf-consignes__col h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute-AAA);
}
.pf-consignes--page .pf-consignes__col h3 > .gb-shape {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-tint); color: var(--primary);
}
/* --green-AA n'existe pas encore : le déclarer dans style-v3.css
   (#008581 en clair) et dans charte-v4-dark.css, puis retirer le
   repli. Le vert plein n'atteint pas 3:1 sur sa propre teinte. */
.pf-consignes--page .pf-consignes__col--permis h3 > .gb-shape {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green-AA, #008581);
}
.pf-consignes--page .pf-consignes__col--interdits h3 > .gb-shape {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red-AA);
}
.pf-consignes--page .pf-consignes__col h3 svg { width: 13px; height: 13px; }

.pf-consignes__note {
  margin: 0 0 16px; font-size: 14px; color: var(--ink-mute-AAA);
}
.pf-consignes--page .pf-consignes__col ul {
  list-style: none; margin: 0; padding: 0; display: grid;
}
.pf-consignes--page .pf-consignes__col li {
  margin: 0; padding: 11px 0; border-top: 1px solid var(--rule);
  font-size: 16px; line-height: 1.45; color: var(--ink);
}
.pf-consignes--page .pf-consignes__col li em {
  display: block; margin-top: 3px;
  font-style: normal; font-size: 14px; color: var(--ink-mute-AAA);
}
.pf-consignes__specifiques { margin: 28px 0 0; max-width: 74ch; }


/* ═══ 5. FAQ de page ═════════════════════════════════════════════
   Réemploi de .pf-faq (pages-v3) sans son habillage de page entière :
   ni fond crème, ni marges de section, ni sommaire Rank Math. Seuls
   les retraits changent, la liste étant alignée sur le titre. */

.pf-infos-pratiques .pf-faq--page { padding: 0; background: none; }
.pf-infos-pratiques .pf-faq--page .gb-accordion {
  margin-top: 0; max-width: 840px; border-top: 1px solid var(--rule);
}
.pf-infos-pratiques .pf-faq--page .gb-accordion__toggle.pf-qa__summary { padding: 20px 4px; }
.pf-infos-pratiques .pf-faq--page .gb-accordion__content .pf-qa__body {
  padding: 0 60px 24px 4px; max-width: 70ch;
}
.pf-infos-pratiques .pf-faq__more, .pf-faq .pf-faq__more { margin: 32px 0 0; }


/* ═══ 6. Liens de fin de page ════════════════════════════════════
   Grille jointive : le filet de 1 px entre les cases est le fond de
   la grille, vu à travers le gap. */

.pf-infos-pratiques .pf-quicklinks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  padding: 0; counter-reset: none;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
}
/* charte-v4-dark pose un fond crème sur .pf-quicklinks : il
   colorerait les filets. */
html.pf-dark .pf-infos-pratiques .pf-quicklinks { background: var(--rule); }

.pf-infos-pratiques .pf-quicklinks a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 24px 26px; background: var(--paper);
  text-decoration: none; color: var(--primary); font-weight: 500;
  transition: background .2s;
}
.pf-infos-pratiques .pf-quicklinks a:hover { background: var(--primary-tint); }
.pf-infos-pratiques .pf-quicklinks__txt { display: block; min-width: 0; }
.pf-infos-pratiques .pf-quicklinks small {
  display: block; margin-top: 4px;
  font-size: 14px; font-weight: 400; color: var(--ink-mute-AAA);
}
.pf-infos-pratiques .pf-quicklinks .arrow { color: var(--cyan-AA); transition: transform .2s; }
.pf-infos-pratiques .pf-quicklinks a:hover .arrow { transform: translateX(3px); }


/* ═══ 7. Palier composants, 900 px ═══════════════════════════════ */

@media (max-width: 900px) {
  .pf-infos-pratiques .pf-consignes--page { grid-template-columns: 1fr; }
  .pf-infos-pratiques .pf-faq--page .gb-accordion__content .pf-qa__body { padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-infos-pratiques .pf-quicklinks a,
  .pf-infos-pratiques .pf-quicklinks .arrow { transition: none; }
}