/* Questions : seule feuille des FAQ du site. Le dépliant natif reste lisible sans JavaScript ; la question ouverte devient un aplat bleu canard.
   Échelle : titre (--t-h2, 500) > question (--fq-t, 500) > réponse (17 à 19 px, 400, encre) > détail (16 px, 400, gris) > lien (15 px, 500) > numéro (13 px, gris).
   La réponse s'aligne sur le texte de la question à toutes les largeurs : retrait = marge + numéro + écart. */
.fa{
  --fq-x:24px;--fq-y:26px;--fq-n:28px;--fq-g:20px;--fq-sg:20px;
  --fq-t:clamp(21px,1.75vw,26px);
  --fq-ind:calc(var(--fq-x) + var(--fq-n) + var(--fq-g));
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--m) calc(var(--m) * 1.5);
  padding:calc(var(--m) * 1.5) var(--cote);color:var(--encre);font-feature-settings:normal
}

/* Tête : titre de section et phrase d'introduction */
.fa-tete{align-self:start;display:flex;flex-direction:column;gap:22px}
@media (min-width:1101px){.fa-tete{position:sticky;top:calc(var(--nav) + 32px)}}
.fa h2{max-width:9em;font-size:var(--t-h2);font-weight:500;line-height:1;letter-spacing:-.05em}
.fa-intro{max-width:24em;font-size:19px;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--gris)}

/* Liste */
.fa .fa-liste{margin:0;padding:0;border-top:1px solid var(--encre)}
.fa .fq{border-bottom:1px solid var(--filet);transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),margin .25s var(--ease)}
.fa .fq[open]:not(.ferme){margin-block:12px}
.fa .fq:first-child{margin-top:0}
.fa .fq:last-child{margin-bottom:0}

/* Question : numéro, libellé et signe sur la même ligne de base */
.fa .fq summary{display:flex;align-items:baseline;gap:var(--fq-g);min-height:44px;padding:var(--fq-y) var(--fq-x);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:padding-bottom .25s var(--ease)}
.fa .fq[open]:not(.ferme) summary{padding-bottom:calc(var(--fq-y) * .5)}
.fa .fq summary::-webkit-details-marker{display:none}
.fa .fq summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.fa .fq-n{flex:none;width:var(--fq-n);font-size:13px;font-weight:500;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--gris);transition:color .25s var(--ease)}
.fa .fq-q{flex:1;min-width:0;font-size:var(--fq-t);font-weight:500;line-height:1.2;letter-spacing:-.03em;text-wrap:balance;transition:color .15s var(--ease),opacity .15s linear}

/* Plus et moins : deux traits de 1,5 px centrés sur la hauteur des capitales ; le trait vertical se couche à l'ouverture */
.fa .fq-sg{position:relative;flex:none;width:var(--fq-sg);height:.73em;font-size:var(--fq-t);transition:color .15s var(--ease)}
.fa .fq-sg::before,.fa .fq-sg::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .25s var(--ease)}
.fa .fq-sg::before{width:calc(var(--fq-sg) - 2px);height:1.5px;margin:-.75px 0 0 calc(var(--fq-sg) / -2 + 1px)}
.fa .fq-sg::after{width:1.5px;height:calc(var(--fq-sg) - 2px);margin:calc(var(--fq-sg) / -2 + 1px) 0 0 -.75px}
.fa .fq[open]:not(.ferme) .fq-sg::after{transform:scaleY(0)}

@media (hover:hover){
  .fa .fq:not([open]) summary:hover :is(.fq-q,.fq-sg),.fa .fq.ferme summary:hover :is(.fq-q,.fq-sg){color:var(--teal-f)}
}
.fa .fq summary:active .fq-q{opacity:.72}

/* Réponse : une phrase, le détail, un lien ; tout part de l'aplomb de la question */
.fa .fq-r{overflow:hidden}
.fa .fq .r{padding:0 calc(var(--fq-x) + var(--fq-sg) + var(--fq-g)) var(--fq-y) var(--fq-ind)}
.fa .r-lead{max-width:30em;font-size:clamp(17px,1.32vw,19px);font-weight:400;line-height:1.36;letter-spacing:-.015em;color:var(--encre);text-wrap:pretty}
.fa .r-det{max-width:34em;margin-top:8px;font-size:16px;font-weight:400;line-height:1.55;letter-spacing:0;color:var(--gris);text-wrap:pretty}
.fa .r-suite{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:18px}
.fa .r-lien{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500;line-height:1.2;color:var(--encre);text-decoration:none}
.fa .r-lien .r-lt{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .25s var(--ease)}
@media (hover:hover){
  .fa .r-lien:hover .r-lt{background-size:0 1px;background-position:100% 100%}
  .fa .r-lien:hover .chev{transform:translateX(3px)}
}
.fa .r-lien:active{opacity:.7}
.fa .r-lien:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Ouverte : aplat bleu canard, texte papier */
.fa .fq[open]:not(.ferme){background:var(--teal-f);color:var(--papier);border-bottom-color:var(--teal-f)}
.fa .fq[open]:not(.ferme) .fq-n{color:var(--teal-c)}
.fa .fq[open]:not(.ferme) summary:focus-visible{outline-color:var(--papier);outline-offset:-6px}
.fa .fq[open] .r-lead{color:var(--papier)}
.fa .fq[open] .r-det{color:rgba(248,244,236,.82)}
.fa .fq[open] .r-lien{color:var(--papier)}
.fa .fq[open] .r-lien:focus-visible{outline-color:var(--papier)}

/* Brouillage des questions au survol (questions.js) */
.fa .bw{white-space:nowrap}
.fa .bw.encours{display:inline-block;overflow:visible}

@media (max-width:1100px){
  .fa{grid-template-columns:1fr;gap:var(--m)}
  .fa-tete{display:contents}
  .fa h2,.fa-intro{grid-column:1}
  .fa-intro{margin-top:calc(var(--m) * -1 + 16px)}
}
@media (max-width:760px){
  .fa{--fq-x:16px;--fq-y:20px;--fq-n:22px;--fq-g:14px;--fq-sg:18px;--fq-t:19px;padding:calc(var(--m) * 1.25) var(--cote)}
  .fa-intro{font-size:17px}
  .fa .r-lead{font-size:17px;line-height:1.4}
  .fa .r-det{font-size:15px}
  .fa .r-suite{margin-top:14px}
  .fa .r-lien{font-size:16px}
}
@media (max-width:420px){
  .fa .fq .r{padding-right:var(--fq-x)}
}
@media (prefers-reduced-motion:reduce){.fa .fq,.fa .fq summary,.fa .fq-n,.fa .fq-q,.fa .fq-sg,.fa .fq-sg::before,.fa .fq-sg::after,.fa .r-lien .r-lt{transition:none}}