/* ══════════════════════════════════════════════════════════════════
   GROOMLY — questions fréquentes + « ce sur quoi vous pouvez compter »

   L'accordeon est en <details>/<summary> natifs. Pas de JavaScript,
   pas d'aria-expanded a tenir a jour, pas de gestion du clavier a
   ecrire : le navigateur ouvre a Entree et a Espace, annonce l'etat au
   lecteur d'ecran, et la recherche dans la page (Ctrl+F) trouve le
   texte replie. Un accordeon fait a la main en <div> + onclick perd
   tout cela et personne ne s'en apercoit avant longtemps.

   Le pave de droite ne contient QUE des faits verifiables — documents
   controles, delais, remboursements — repris mot pour mot de la page
   /faq. Pas d'avis, pas de note sur cinq, pas de temoignage : ecrire
   de faux avis est une pratique commerciale trompeuse (code de la
   consommation, art. L.121-2 et L.121-4 11°). L'emplacement pour de
   VRAIS avis est prepare dans le gabarit, en commentaire.
   ══════════════════════════════════════════════════════════════════ */

.fq {
  --fq-encre:      var(--encre, #18181b);
  --fq-gris:       var(--gris, #71717a);
  --fq-gris-clair: var(--gris-clair, #a1a1aa);
  --fq-trait:      var(--trait, #e7e7ec);
  --fq-fond:       var(--fond, #fbfbfd);
  --fq-blanc:      var(--blanc, #ffffff);
  --fq-rose:       var(--rose, #f43f5e);
  --fq-rose-fonce: var(--rose-fonce, #e11d48);
  --fq-max:        var(--max, 1180px);
  /* .bl-env, partage avec les blocs du dessus, lit --bl-max. Sans cette
     ligne la variable est introuvable dans cette section : la declaration
     « max-width: var(--bl-max) » devient invalide et la section s'etale
     sur toute la largeur de l'ecran, sans erreur nulle part. */
  --bl-max:        var(--max, 1180px);

  position: relative; isolation: isolate;
  background: var(--fq-blanc);
  border-top: 1px solid var(--fq-trait);
  padding: 76px 20px 88px;
}
@media (min-width: 900px) { .fq { padding: 104px 24px 116px; } }

.fq-fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fq-fond span {
  position: absolute; border-radius: 50%;
  top: -18%; right: -10%; width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(244,63,94,.13) 0%, rgba(244,63,94,0) 70%);
}

.fq-grille { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
.fq-grille > * { min-width: 0; }
@media (min-width: 900px) {
  .fq-grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 46px; align-items: start; margin-top: 52px; }
}

/* ══ L'ACCORDEON ═════════════════════════════════════════════════ */
.fq-liste { display: flex; flex-direction: column; gap: 10px; }

.fq-q {
  border: 1px solid var(--fq-trait); border-radius: 14px;
  background: var(--fq-blanc);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.fq-q:hover { border-color: var(--fq-gris-clair); }
.fq-q[open] {
  border-color: rgba(244,63,94,.3);
  box-shadow: 0 20px 44px -32px rgba(20, 20, 45, .34);
}

.fq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; cursor: pointer;
  font-size: 1rem; font-weight: 650; letter-spacing: -.015em;
  color: var(--fq-encre); list-style: none;
}
.fq-q summary::-webkit-details-marker { display: none; }
.fq-q summary::marker { content: ""; }
.fq-q summary:focus-visible { outline: 2px solid var(--fq-rose-fonce); outline-offset: 2px; border-radius: 13px; }

.fq-chevron {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f4f4f7; color: var(--fq-gris);
  transition: transform .3s cubic-bezier(.25,.4,.25,1), background .25s ease, color .25s ease;
}
.fq-chevron svg { width: 13px; height: 13px; }
.fq-q[open] .fq-chevron {
  transform: rotate(180deg);
  background: rgba(244,63,94,.1); color: var(--fq-rose-fonce);
}

/* L'ouverture se deplie : grid-template-rows de 0fr a 1fr. La
   fermeture, elle, est instantanee — le navigateur retire le contenu
   du flux des que « open » disparait, et aucune transition CSS ne peut
   le retenir. C'est le prix des <details> natifs, et il est moins cher
   que de reecrire un accordeon accessible. */
.fq-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.25,.4,.25,1); }
.fq-q[open] .fq-corps { grid-template-rows: 1fr; }
.fq-corps > div { overflow: hidden; }
.fq-corps p {
  margin: 0; padding: 0 20px 20px; max-width: 62ch;
  font-size: .95rem; line-height: 1.65; color: var(--fq-gris);
}

.fq-plus { margin: 22px 0 0; }
.fq-lien {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 600; color: var(--fq-rose-fonce);
}
.fq-lien svg { width: 16px; height: 16px; }
.fq-lien:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ══ CE SUR QUOI VOUS POUVEZ COMPTER ═════════════════════════════ */
.fq-pave {
  border: 1px solid var(--fq-trait); border-radius: 18px;
  background: linear-gradient(170deg, #fbfbfd, #ffffff 45%);
  padding: 26px 24px;
  box-shadow: 0 26px 56px -40px rgba(20, 20, 45, .32);
}
@media (min-width: 900px) { .fq-pave { position: sticky; top: calc(var(--nv-hauteur, 68px) + 32px); } }

.fq-pave h3 {
  margin: 0 0 4px; font-size: 1.12rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--fq-encre);
}
.fq-pave > p {
  margin: 0 0 18px; font-size: .88rem; line-height: 1.55; color: var(--fq-gris);
}

.fq-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.fq-point { display: flex; gap: 11px; }
.fq-pastille {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fq-teinte, rgba(244,63,94,.11)); color: var(--fq-sur, var(--fq-rose-fonce));
}
.fq-pastille svg { width: 15px; height: 15px; }
.fq-point:nth-child(2) .fq-pastille { --fq-teinte: rgba(139,92,246,.12); --fq-sur: #6d28d9; }
.fq-point:nth-child(3) .fq-pastille { --fq-teinte: rgba(251,191,36,.18); --fq-sur: #b45309; }
.fq-point:nth-child(4) .fq-pastille { --fq-teinte: rgba(16,185,129,.14); --fq-sur: #047857; }
.fq-point b { display: block; font-size: .92rem; font-weight: 700; letter-spacing: -.02em; color: var(--fq-encre); }

/* Le texte descriptif porte une CLASSE, il n'est pas vise par
   « .fq-point span ». Ce selecteur-la vaut (0,2,0) et ecrasait le
   « display: flex » de .fq-pastille, qui ne vaut que (0,1,0) : la
   pastille repassait en bloc et son icone se collait en haut a
   gauche, decalee de 7,5 px dans les deux sens. Mesure, pas
   impression. C'est le meme piege que sur les chiffres du hero et
   sur les icones de la barre de navigation : des qu'une pastille est
   un <span>, une regle « conteneur span » la casse a distance. */
.fq-desc { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.55; color: var(--fq-gris); }

.fq-pied-pave { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--fq-trait); }
.fq-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: 12px;
  background: var(--fq-encre); color: #fff;
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  transition: background .2s ease, transform .2s ease;
}
.fq-btn:hover { background: #000; transform: translateY(-1px); }
.fq-btn svg { width: 17px; height: 17px; }
.fq-mention { margin: 12px 0 0; font-size: .8rem; line-height: 1.5; color: var(--fq-gris-clair); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .fq-q, .fq-chevron, .fq-corps, .fq-btn { transition: none; }
  .fq-btn:hover { transform: none; }
}