/* ══════════════════════════════════════════════════════════════════
   GROOMLY — questions fréquentes
   Refaite le 16 septembre 2026, dans le registre du reste du site :
   LE TABLEAU DE SERVICE. Le haut de page est celui de l'accueil ;
   en dessous, un index de questions et rien d'autre.

   ══ CE QUI A CHANGE ══════════════════════════════════════════════

   1. LE HERO SOMBRE EST PARTI — bandeau nuit, nappes derivantes,
      trame, projecteur qui suit le pointeur. Sur une page ou l'on
      vient chercher une reponse precise, l'atmosphere est du bruit.

   2. LE FILTRE PASSE AVANT LE TITRE DE SECTION. Douze questions en
      huit rubriques, c'est une page ou l'on cherche, pas une page ou
      l'on lit : le champ et les rubriques sont la premiere chose
      sous l'en-tete.

   3. LES QUESTIONS SONT DES LIGNES. Elles etaient des cartes a
      bordure et a ombre ; une liste de filets se parcourt du regard
      en une fois, une pile de cartes demande un saut par carte.

   Le script faq.js attend : #fa-saisie, #fa-vider, #fa-compte,
   #fa-vide, .fa-chercher, .fa-rub[data-rubrique],
   .fa-groupe[data-rubrique], .fq-q, .fq-corps, et un <mark> pose dans
   le <summary>. Ne rien renommer sans le relire.
   ══════════════════════════════════════════════════════════════════ */

.fa {
  --fa-encre:    #0d0d10;
  --fa-encre-2:  #3f3f46;
  --fa-gris:     #65656e;
  --fa-gris-2:   #9a9aa3;
  --fa-filet:    #e4e4e7;
  --fa-filet-f:  #d4d4d8;
  --fa-papier:   #ffffff;
  --fa-bande:    #f6f6f4;
  --fa-nuit:     #12141c;
  --fa-rose:     #e11d48;
  --fa-rose-2:   #be123c;
  --fa-rose-pale:#fff1f3;
  --fa-vert:     #0b6b5b;
  --fa-max:      1160px;
}

body.fa-page { background: var(--fa-papier); color: var(--fa-encre); }
.fa ::selection { background: var(--fa-rose-pale); color: var(--fa-encre); }

.fa-env { width: 100%; max-width: var(--fa-max); margin: 0 auto; padding: 0 24px; }
.fa-sect { padding: 64px 0; border-top: 1px solid var(--fa-filet); }
.fa-sect-bande { background: var(--fa-bande); }
@media (min-width: 900px) { .fa-sect { padding: 84px 0; } }

.fa-micro {
  margin: 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--fa-gris-2);
}
.fa-h2 {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.3rem);
  line-height: 1.14; font-weight: 800; letter-spacing: -.035em;
  color: var(--fa-encre); max-width: 22ch;
}
.fa-intro { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.62; color: var(--fa-gris); max-width: 62ch; }

/* ── Les boutons ───────────────────────────────────────────────── */
.fa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.fa-btn svg { width: 18px; height: 18px; flex: none; }
.fa-btn-plein { background: var(--fa-rose); color: #fff; }
.fa-btn-plein:hover { background: var(--fa-rose-2); }
.fa-btn-ligne { background: var(--fa-papier); color: var(--fa-encre); border-color: var(--fa-filet-f); }
.fa-btn-ligne:hover { border-color: var(--fa-encre); }
.fa-btn-blanc { background: #fff; color: var(--fa-nuit); }
.fa-btn-blanc:hover { background: #ededf0; }
.fa-btn:focus-visible { outline: 2px solid var(--fa-rose); outline-offset: 3px; }

/* ══ LE HAUT DE PAGE — celui de l'accueil ══════════════════════════ */
.fa-haut { padding: 44px 0 44px; }
@media (min-width: 900px) { .fa-haut { padding: 60px 0 56px; } }
.fa-fil { margin: 0 0 20px; font-size: .82rem; color: var(--fa-gris-2); }
.fa-fil a { color: var(--fa-gris); text-decoration: none; }
.fa-fil a:hover { color: var(--fa-encre); text-decoration: underline; text-underline-offset: 3px; }
.fa-h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.3rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -.045em;
  color: var(--fa-encre); max-width: 16ch;
}
.fa-h1 em { font-style: normal; color: var(--fa-gris); }
.fa-sous { margin: 22px 0 0; font-size: 1.08rem; line-height: 1.6; color: var(--fa-encre-2); max-width: 56ch; }

/* ══ LE FILTRE ═════════════════════════════════════════════════════
   Marque « hidden » dans le gabarit : c'est faq.js qui le devoile.
   Sans JavaScript, personne ne se retrouve devant un champ qui ne
   cherche rien — les douze questions sont toutes la.
   ═════════════════════════════════════════════════════════════════ */
.fa-chercher { margin-top: 34px; }
.fa-chercher[hidden] { display: none; }

.fa-champ {
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; min-height: 56px; padding: 0 16px;
  border: 1px solid var(--fa-filet-f); border-radius: 10px;
  background: var(--fa-papier);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.fa-champ:focus-within { border-color: var(--fa-rose); box-shadow: 0 0 0 3px rgba(225,29,72,.12); }
.fa-champ > svg { width: 18px; height: 18px; flex: none; color: var(--fa-gris-2); }
/* 16 px de corps : sous 16 px, Safari sur iPhone zoome a la mise au
   point et la page part de travers. */
.fa-saisie {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 1rem; color: var(--fa-encre);
}
.fa-saisie::placeholder { color: var(--fa-gris-2); }
.fa-saisie::-webkit-search-cancel-button { display: none; }
.fa-vider {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none;
  color: var(--fa-gris); cursor: pointer;
}
.fa-vider[hidden] { display: none; }
.fa-vider svg { width: 15px; height: 15px; }
.fa-vider:hover { background: var(--fa-bande); color: var(--fa-encre); }

.fa-rubriques { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.fa-rub {
  min-height: 38px; padding: 0 13px;
  border: 1px solid var(--fa-filet); border-radius: 8px;
  background: var(--fa-papier);
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--fa-encre-2);
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.fa-rub:hover { border-color: var(--fa-filet-f); }
.fa-rub[aria-pressed="true"] { background: var(--fa-encre); border-color: var(--fa-encre); color: #fff; }
.fa-rub:focus-visible { outline: 2px solid var(--fa-rose); outline-offset: 2px; }

.fa-compte { margin: 14px 0 0; font-size: .85rem; color: var(--fa-gris); }
.fa-compte[hidden] { display: none; }

/* ══ LES GROUPES ═══════════════════════════════════════════════════ */
/* Pas de marge ici : la section porte deja son rembourrage, et les
   deux cumules laissaient 128 px de vide entre le filtre et la
   premiere question. */
.fa-groupes { margin-top: 0; }
.fa-groupe { margin-top: 44px; }
.fa-groupe:first-child { margin-top: 0; }
.fa-groupe[hidden] { display: none; }
.fa-titre-groupe {
  margin: 0 0 4px;
  font-size: .7rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--fa-gris-2);
}

.fq-liste { border-top: 1px solid var(--fa-encre); max-width: 900px; }
.fq-q { border-bottom: 1px solid var(--fa-filet); }
.fq-q[hidden] { display: none; }
.fq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; color: var(--fa-encre);
}
.fq-q summary::-webkit-details-marker { display: none; }
.fq-q summary:focus-visible { outline: 2px solid var(--fa-rose); outline-offset: 3px; }
.fq-chevron { flex: none; width: 20px; height: 20px; color: var(--fa-gris); }
.fq-chevron svg { width: 20px; height: 20px; transition: transform .18s ease; }
.fq-q[open] .fq-chevron svg { transform: rotate(180deg); }
.fq-corps { padding: 0 0 22px; max-width: 72ch; }
.fq-corps p { margin: 0; font-size: .96rem; line-height: 1.65; color: var(--fa-gris); }
.fq-corps a { color: var(--fa-encre); text-decoration: underline; text-underline-offset: 3px; }

/* Le surlignage du fragment trouve. Pose par faq.js avec un <mark>
   cree dans le DOM, jamais par innerHTML : le champ de recherche ne
   doit pas pouvoir devenir une porte d'entree. */
.fq-q mark { background: var(--fa-rose-pale); color: var(--fa-encre); border-radius: 3px; padding: 0 2px; }

/* ── Aucun resultat ───────────────────────────────────────────────
   Un message qui ne dit que « rien trouve » laisse la personne sans
   rien a faire. Celui-ci propose la suite. */
.fa-vide {
  margin-top: 40px; padding: 26px 24px;
  border: 1px solid var(--fa-filet-f); border-radius: 12px;
  background: var(--fa-bande); max-width: 620px;
}
.fa-vide[hidden] { display: none; }
.fa-vide b { display: block; font-size: 1.05rem; font-weight: 700; color: var(--fa-encre); }
.fa-vide p { margin: 8px 0 0; font-size: .95rem; line-height: 1.6; color: var(--fa-gris); }
.fa-vide a { color: var(--fa-encre); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ══ VOTRE QUESTION N'EST PAS LA ═══════════════════════════════════ */
.fa-aide h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; color: var(--fa-encre); }
.fa-aide p { margin: 14px 0 0; font-size: .98rem; line-height: 1.6; color: var(--fa-gris); max-width: 62ch; }
.fa-aide-liens { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ══ L'APPEL FINAL ═════════════════════════════════════════════════ */
.fa-fin { background: var(--fa-nuit); color: #fff; padding: 80px 0; }
.fa-fin h2 { margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.7rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -.04em; max-width: 20ch; }
.fa-fin p { margin: 18px 0 0; font-size: 1.02rem; line-height: 1.6; color: #a8a8b2; max-width: 52ch; }
.fa-fin-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.fa-fin .fa-btn-ligne { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.fa-fin .fa-btn-ligne:hover { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fa *, .fa *::before, .fa *::after { transition-duration: .01ms !important; }
}