/* ==========================================================================
   Les Savons de Jadis — front v2 — pages/faq.css
   FAQ et mentions légales : une colonne de lecture centrée, les documents en accordéon (socle 16.2).
   ========================================================================== */
.documents > .conteneur { max-width: calc(980px + 2 * var(--gouttiere)); }
.documents__vide { padding: var(--e-6) 0; text-align: center; color: var(--texte-moyen); }

/* Texte saisi au back-office : titres ramenés à l'échelle d'un document, tableaux lisibles sur mobile */
.documents .prose h1, .documents .prose h2 { font-size: var(--fs-lg); margin-top: 1.6em; }
.documents .prose h3, .documents .prose h4 { font-family: var(--font-texte); font-size: var(--fs-md); font-weight: 600; }
.documents .prose > :first-child { margin-top: 0; }
/* Les couleurs posées en ligne dans le texte (anciens titres orange) reviennent à la couleur du texte */
.documents .prose h1, .documents .prose h2, .documents .prose h3, .documents .prose h4 { color: var(--texte) !important; }
.documents .prose { overflow-wrap: anywhere; }
.documents .prose img { max-width: 100%; height: auto; }
.documents .prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-sm); }
.documents .prose th, .documents .prose td { padding: var(--e-2) var(--e-3); border: 1px solid var(--trait); text-align: left; vertical-align: top; overflow-wrap: normal; }
.documents .prose th { background: var(--vert-brume); font-weight: 600; }

/* Sortie de la FAQ : un panneau sauge contenu, une seule action */
.documents__suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-5); margin-top: var(--e-6); padding: var(--e-5) clamp(1.25rem, .6rem + 2.6vw, 2.25rem); border-radius: var(--r-lg); background: var(--sauge-pale); }
.documents__suite p { font-weight: 600; }
@media (max-width: 479px) { .documents__suite .btn { width: 100%; } }

/* ==========================================================================
   FAQ : recherche, raccourcis par thème, questions en accordéon (js/faq.js).
   Fond blanc ; le sauge ne sert qu'aux panneaux contenus (question ouverte, aucun résultat).
   ========================================================================== */
.faq-outils { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); margin-bottom: var(--e-6); }

/* Recherche */
.faq-recherche { position: relative; max-width: 620px; }
.faq-recherche[hidden] { display: none; }
.faq-recherche__loupe { position: absolute; left: 1.1rem; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--vert-profond); pointer-events: none; }
.faq-recherche__champ { display: block; width: 100%; height: 56px; padding: 0 3.5rem 0 3.1rem; border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-size: 1.0625rem; line-height: 1.2; color: var(--texte); transition: border-color var(--d-2) ease; -webkit-appearance: none; appearance: none; }
.faq-recherche__champ::placeholder { color: var(--texte-2); opacity: 1; }
.faq-recherche__champ:hover { border-color: var(--vert-fonce); }
.faq-recherche__champ:focus { border-color: var(--vert-profond); }
.faq-recherche__champ:focus-visible { outline-offset: 2px; border-radius: var(--r-pilule); }
.faq-recherche__champ::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-recherche__effacer { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: var(--cible); height: var(--cible); transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: var(--texte-moyen); cursor: pointer; }
.faq-recherche__effacer[hidden] { display: none; }
.faq-recherche__effacer:hover { background: var(--vert-brume); color: var(--texte); }
.faq-recherche__effacer .ico { width: 18px; height: 18px; }

/* Raccourcis par thème : une rangée qui passe à la ligne ; sur mobile, elle défile au pouce */
.faq-themes__liste { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.faq-theme { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-4); border: 1px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-size: .9375rem; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--texte); transition: border-color var(--d-2) ease, background-color var(--d-2) ease; }
.faq-theme:hover { border-color: var(--texte); }
.faq-theme:focus-visible { border-radius: var(--r-pilule); }
.faq-theme[aria-current="true"] { background: var(--vert-rosee); border-color: var(--vert-fonce); color: var(--vert-profond); font-weight: 600; }
.faq-theme__nb { font-size: var(--fs-xs); font-weight: 500; color: var(--texte-moyen); font-variant-numeric: tabular-nums; }
.faq-theme[aria-current="true"] .faq-theme__nb { color: inherit; }
.faq-theme--vide { color: var(--texte-moyen); border-style: dashed; }
@media (max-width: 719px) {
  .faq-themes { margin-inline: calc(-1 * var(--gouttiere)); }
  .faq-themes__liste { flex-wrap: nowrap; padding: 2px var(--gouttiere); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; overscroll-behavior-x: contain; }
  .faq-themes__liste::-webkit-scrollbar { display: none; }
  .faq-themes__liste > li { flex: none; scroll-snap-align: start; }
}

.faq-etat { min-height: 1.5em; font-size: var(--fs-sm); color: var(--texte-moyen); }
.faq-etat:empty { display: none; }

/* Groupes et questions */
.faq-groupes { display: grid; gap: var(--e-7, 3rem); }
.faq-groupes[hidden], .faq-groupe[hidden], .faq-q[hidden], .faq-q__reponse[hidden] { display: none; }
.faq-groupe__titre { margin-bottom: var(--e-4); font-size: var(--fs-lg); }
.faq-liste { display: grid; gap: var(--e-3); }
.faq-q { border: 1px solid var(--trait); border-radius: var(--r-md); background: var(--blanc); transition: border-color var(--d-2) ease; }
.faq-q--ouverte { border-color: var(--vert); }
.faq-q__titre { margin: 0; font-family: var(--font-texte); font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.faq-q__bouton { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); width: 100%; min-height: 64px; padding: var(--e-3) var(--e-5); border: 0; border-radius: var(--r-md); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.faq-q__bouton:focus-visible { border-radius: var(--r-md); outline-offset: -3px; }
.faq-q__bouton .ico { flex: none; width: 22px; height: 22px; color: var(--vert-profond); transition: transform var(--d-2) var(--ease-sortie); }
.faq-q__bouton[aria-expanded="true"] .ico { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .faq-q__bouton:hover { background: var(--vert-brume); } }
.faq-q__reponse { padding: var(--e-2) var(--e-5) var(--e-4); }
.faq-q__reponse .prose { max-width: none; }
.faq-q__lien { margin-top: var(--e-3); font-size: var(--fs-xs); }
.faq-q__lien a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--texte-moyen); text-decoration: underline; text-decoration-color: var(--trait-champ); text-underline-offset: 4px; }
.faq-q__lien a:hover { color: var(--texte); }
/* Sans JavaScript : pas de chevron ni de curseur de bouton, les réponses restent affichées */
.faq-groupes:not(.faq-groupes--actif) .faq-q__bouton { cursor: default; min-height: 0; padding-bottom: 0; }
.faq-groupes:not(.faq-groupes--actif) .faq-q__bouton .ico, .faq-groupes:not(.faq-groupes--actif) .faq-q__lien { display: none; }
@media (max-width: 599px) {
  .faq-q__bouton { padding-inline: var(--e-4); }
  .faq-q__reponse { padding-inline: var(--e-4); }
}
@media (prefers-reduced-motion: reduce) { .faq-q__bouton .ico { transition: none; } }

/* Mot trouvé par la recherche */
mark.faq-trouve { padding: 0 .12em; border-radius: 3px; background: var(--vert-rosee); color: inherit; box-shadow: 0 0 0 1px var(--vert-fonce) inset; }

/* Aucun résultat : panneau sauge contenu */
.faq-vide { padding: var(--e-6) clamp(1.25rem, .6rem + 2.6vw, 2.25rem); border-radius: var(--r-lg); background: var(--sauge-pale); text-align: center; }
.faq-vide[hidden] { display: none; }
.faq-vide__titre { margin-bottom: var(--e-2); font-size: var(--fs-md); font-weight: 600; }
.faq-vide__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin-top: var(--e-4); }
@media (max-width: 479px) { .faq-vide__actions .btn { width: 100%; } }