/* FAQ des pages de la landing (accueil, apprenti, entreprise, établissement,
   institution, tarif). Une seule feuille pour ce composant : elle était
   dans le <style> local d'index.html quand seule l'accueil avait une FAQ
   visible. Le contenu visible DOIT être identique au JSON-LD FAQPage de la
   page, mot pour mot : test/tools/faq_visible_egale_json_ld_test.dart. */
/* FAQ d'accueil : contenu visible qui reflète le FAQPage schema (exigé) et
   nourrit l'extraction par les moteurs génératifs.
   Mise en page = même vocabulaire éditorial que les en-têtes de section
   des pages persona : titre à gauche, contenu à droite, questions réglées
   par un filet. Plus de pastilles blanches empilées au centre. */
.home-faq{max-width:none;margin:0;padding:clamp(46px,6vw,78px) 0 8px;
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  column-gap:clamp(24px,4vw,64px)}
.home-faq h2{font-family:var(--font-display);
  font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:var(--track-display);
  line-height:1.15;margin:0;max-width:11ch;box-shadow:none;padding:0}
.home-faq .faq-list{grid-column:2;display:block}
.home-faq details{background:none;border-radius:0;margin:0;padding:0;
  box-shadow:0 -1px 0 var(--rule)}
.home-faq details:last-of-type{box-shadow:0 -1px 0 var(--rule),0 1px 0 var(--rule)}
.home-faq summary{cursor:pointer;font-weight:700;font-size:16px;padding:18px 0;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::after{content:"+";color:var(--blue-text);font-weight:700;
  font-size:20px;flex:none;transition:transform var(--dur-medium) var(--ease-out)}
.home-faq details[open] summary::after{transform:rotate(45deg)}
.home-faq p{margin:-4px 0 20px;color:var(--muted);font-size:15px;line-height:1.62;max-width:68ch}
/* Accordéon animé (réf. unlumen « Motion FAQs Accordion ») : la réponse
   se déplie en hauteur au lieu d'apparaître d'un bloc. `::details-content`
   + interpolate-size = Chrome/Edge récents ; ailleurs l'ouverture reste
   instantanée, jamais cassée. Le « + » pivote en « × » au lieu de
   permuter en « – » (permutation = saut sec, rotation = geste). */
.home-faq{interpolate-size:allow-keywords}
.home-faq details::details-content{block-size:0;overflow:clip;opacity:0;
  transition:block-size var(--dur-long) var(--ease-out),opacity var(--dur-medium) var(--ease-out),
    content-visibility var(--dur-long) allow-discrete}
.home-faq details[open]::details-content{block-size:auto;opacity:1}
@media(prefers-reduced-motion:reduce){
  .home-faq details::details-content{transition:none}
  .home-faq summary::after{transition:none}
}
@media(max-width:860px){
  .home-faq{display:block}
  .home-faq h2{max-width:none;margin-bottom:22px}
}