/* ==========================================================================
   Œ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-shead, .c-badge-page, .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 + ↔ −, instantanée (aucune animation de hauteur). */
.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; }

/* Composition et responsive */
.faq-hero { padding-bottom: var(--cta-bottom); }
.faq-main { display: flex; flex-direction: column; gap: 40px; }
.faq-head { max-width: 760px; }
.faq-block { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 767px) {
.faq-main { gap: 32px; }
.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 : fond --bg-beige, filet --border-strong, 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. */
}