/* ==========================================================================
   Œuvra — FAQ · feuille du gabarit templates/page-faq.php (chargée après main.css).
   1. Base = handoff/design/css/pages/faq.css, copiée telle quelle (elle ne contient aucun !important).
   2. Styles inline du prototype (prototype/faq.html) convertis en classes.
   3. Complément d'accessibilité documenté (Mobile), sans effet sur le rendu.
   Composants partagés utilisés (main.css) : .c-hero--center, .c-crumb, .c-shead, .c-seg-nav (+ is-on,
   is-end posée par page-faq.js), .c-faq, .c-cta (variante FAQ : template-parts/layout/cta.php).
   ========================================================================== */

/* ---------- 1. faq.css du handoff ---------- */

/* Animations et états propres à la page (hérités des maquettes validées) — M17 : ouverture native,
   icône + ↔ −. Animation de hauteur (validée par Victor le 26/09/2026) : page-faq.js ; pendant la fermeture animée
   (is-closing, attribut open encore présent), l'icône affiche déjà +. */
.hp-faq details > summary { list-style: none; }
.hp-faq details > summary::-webkit-details-marker { display: none; }
.hp-faq details .hp-plus { display: block; } .hp-faq details .hp-minus { display: none; }
.hp-faq details[open] .hp-plus { display: none; } .hp-faq details[open] .hp-minus { display: block; }
.hp-faq details.is-closing .hp-plus { display: block; } .hp-faq details.is-closing .hp-minus { display: none; }

/* Composition et responsive */
.faq-hero { padding-bottom: var(--cta-bottom); }
.faq-main { display: flex; flex-direction: column; gap: 40px; }
/* Fil d'Ariane dans la colonne flex : l'écart vient du gap (40 / 28 en Mobile, comme .c-crumb-wrap), pas de sa marge. */
.faq-main > .c-crumb-wrap { margin-bottom: 0; }
/* Fil d'Ariane centré à toutes les largeurs (demande de Victor du 28/09/2026 ; auparavant au bord gauche hors Mobile). */
.faq-main > .c-crumb-wrap { text-align: center; }
.faq-head { max-width: 760px; }
.faq-block { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 767px) {
.faq-main { gap: 32px; }
.faq-main > .c-crumb-wrap { margin-bottom: -4px; }
.c-cta .oe-btn-group { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---------- 2. Styles inline du prototype convertis ---------- */

/* Chapô du hero : style="margin: 8px 0 0; max-width: 640px" (0,1,0 après .t-lead-hero de main.css). */
.faq-lead { margin: 8px 0 0; max-width: 640px; }

/* Lien interne d'une réponse : style="font-weight: 500" (composants.md : « lien interne en 500 »). */
.c-faq__a a { font-weight: 500; }

/* « Nous contacter » (CTA variante) : style="background: var(--bg-surface); border-color: var(--border-100);
   color: var(--ink-900)" = bouton secondaire blanc à filet (.c-btn-soft, design-system.md §8) = état de repos du
   .oe-btn--tertiary du DS : aucune règle. Le style inline figeait aussi le survol (effet de bord) ; survol du DS
   rétabli (motion-spec M09 : filet --border-strong seul, fond blanc, 150 ms), comme les boutons secondaires de
   l'Accueil (fichiers partagés, clôture Phase D). Écart voulu vs prototype : survol seulement. */

/* ---------- 3. Accessibilité de la navigation segmentée en Mobile (aucun effet sur le rendu) ---------- */

@media (max-width: 767px) {
/* Zone de clic portée à 44 px de haut (design-system.md « Cibles tactiles », segments de la FAQ [Recommandé]) :
   segment dessiné 36 px + filet = 38 rendus ; pseudo-élément transparent qui déborde de 4 px en haut et en bas,
   dans le padding de 4 px de la liste (aucun débordement ni défilement vertical ajouté). Taille visible inchangée. */
.c-seg-nav__item { position: relative; }
.c-seg-nav__item::before { content: ""; position: absolute; top: -4px; right: -1px; bottom: -4px; left: -1px; }
/* Focus clavier dans la liste défilante (segment ramené hors du fondu) : page-faq.js. */
}

/* ---------- 4. Navigation segmentée collante (demande de Victor du 26/09/2026, comme la barre d'ancres de Fonctionnalités) ---------- */

/* Fixée en bas de l'écran dès l'arrivée sur la page, une seule position (demande de Victor du 28/09/2026 ; auparavant
   collée en haut, sous la barre de navigation fixe) : centrée entre les gouttières, --oeu-dock-gap au-dessus du bord
   (main.css §7 bis), ombre de la barre de navigation défilée ; elle sort par le bas quand le bas de la carte remonte à
   son niveau (.is-dock-off, main.js §6 bis). Onglet actif suivi au défilement : page-faq.js.
   Sans JavaScript : posée à sa place, au-dessus de la carte. */
html.has-js .faq-block .c-seg-nav { position: fixed; z-index: 40; left: var(--gutter); right: var(--gutter); bottom: var(--oeu-dock-bottom); width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto; box-shadow: var(--oeu-dock-shadow); }
.c-seg-nav__item { transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
/* Couleurs forcées : l'onglet actif, signalé par son seul fond, passe aux couleurs système de sélection. */
@media (forced-colors: active) {
.c-seg-nav__item.is-on { forced-color-adjust: none; background-color: Highlight; color: HighlightText; }
}
/* Groupe ciblé par un onglet : sous la barre de navigation fixe (72 px, comme les sections de Fonctionnalités). */
.c-faq__group { scroll-margin-top: 72px; }
@media (max-width: 767px) {
.c-faq__group { scroll-margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.c-seg-nav__item { transition: none; }
}