/* Famille « FAQ et définitions » : /faq/, /faq/<slug>/, /definition/, /definition/<slug>/.
   Valeurs relevées sur le site actuel : archive 5872 et boucle 5874 (FAQ), archive 7659 et boucle 7662 (définitions),
   modèle 7675 (fiche définition), thème Hello (fiche question), accordéon imbriqué et blocs WordPress. */

/* ---------- Bandeau des listes (45vh, vague grise en bas) ---------- */
.faq-hero { position: relative; display: flex; padding-block: clamp(48px, 7vw, 88px); }
.faq-hero__textes { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 0 6%; }
.faq-hero__titre { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(40px, 5vw, 56px); font-weight: 500; line-height: 1.08; text-align: center; color: var(--encre); }
.faq-hero__sous { max-width: 60ch; margin-inline: auto; font-family: var(--sans); font-size: 18px; font-weight: 400; line-height: 1.55; text-align: center; color: var(--texte); }

/* ---------- Sections (conteneur « boxed » d'Elementor : 4 % sur les côtés, 1280 px au plus) ---------- */
.faq-section { position: relative; padding: 0 4%; }
.faq-section--gris { margin-top: 1px; background: var(--papier); }
.faq-section__inner { display: flex; flex-direction: column; gap: 20px; max-width: var(--conteneur); margin: 0 auto; padding: 4% 0 7%; }
.faq-section--comptabilite .faq-section__inner { padding-bottom: 5%; }
.faq-section--definitions { margin-bottom: 40px; }
.faq-section--definitions .faq-section__inner { padding-bottom: clamp(48px, 6vw, 80px); }
.faq-section ::marker { color: var(--violet); }
.faq-section__titre { margin: 0 20px 20px 0; font-family: var(--serif); font-size: 38px; font-weight: 400; line-height: 64px; letter-spacing: -.01em; text-align: center; color: var(--marine); }

/* ---------- Questions en accordéon (2 colonnes) ---------- */
.faq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
/* couleur des questions : orange (passe au marine au survol), bleu ou violet (fixes) ; flèche marine au survol, orange ouverte */
.faq-acc { --faq-question: inherit; --faq-fleche: var(--orange); display: flex; flex-direction: column; }
.faq-grille--bleu .faq-acc { --faq-question: var(--bleu); --faq-fleche: var(--bleu); }
.faq-grille--violet .faq-acc { --faq-question: var(--violet); --faq-fleche: var(--violet); }
.faq-acc__titre { display: flex; align-items: center; gap: 0 10px; padding: 20px; border-radius: 12px; background: #fff; color: var(--orange); list-style: none; cursor: pointer; }
.faq-acc__titre::-webkit-details-marker { display: none; }
.faq-acc__question { margin: 0; font-family: var(--open); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--faq-question); }
.faq-acc__icone { display: flex; align-items: center; width: fit-content; }
.faq-acc__icone > span { display: flex; height: 26px; }
.faq-acc__icone svg { width: auto; height: 26px; fill: var(--faq-fleche); }
.faq-acc__ouvert { display: none !important; }
.faq-acc:not([open]):hover > .faq-acc__titre { color: var(--marine); }
.faq-acc:not([open]):hover > .faq-acc__titre svg { fill: var(--marine); }
.faq-acc[open] > .faq-acc__titre { border-radius: 12px 12px 0 0; }
.faq-acc[open] > .faq-acc__titre svg { fill: var(--orange); }
.faq-acc[open] .faq-acc__ouvert { display: flex !important; }
.faq-acc[open] .faq-acc__ferme { display: none; }
.faq-acc__reponse { display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: 0 0 12px 12px; background: #fff; overflow: hidden; }

/* ---------- Corps de texte WordPress (réponses, définitions) ---------- */
.faq-contenu { font-family: var(--open); font-size: 16px; font-weight: 400; line-height: 24px; color: var(--marine); }
.faq-contenu a { color: var(--action); text-decoration: underline; }
.faq-contenu a:hover, .faq-contenu a:active { color: var(--action-survol); }
.faq-contenu ul, .faq-contenu ol { margin: 0; padding-left: 40px; }
.faq-contenu ul { list-style: disc; }
.faq-contenu ol { list-style: decimal; }
.faq-contenu h2 { margin: .5rem 0 1rem; font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1.2; color: var(--encre); }
.faq-contenu p, .faq-contenu li { max-width: 72ch; }
.faq-contenu .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.faq-contenu .wp-block-button { display: inline-block; margin: 0; }
.faq-contenu .wp-block-button__link { display: inline-block; box-sizing: border-box; height: 100%; padding: calc(.667em + 2px) calc(1.333em + 2px); border-radius: 6px;
  background-color: var(--encre); color: #fff; text-align: center; text-decoration: none; word-break: break-word; align-content: center; cursor: pointer; }
.faq-contenu .wp-block-button__link[style] { border-radius: var(--rayon-btn) !important; background: var(--action) !important; color: #fff !important; font-weight: 600; }
.faq-contenu .wp-block-button__link[style]:hover { background: var(--action-survol) !important; }

/* ---------- Liste des définitions ---------- */
/* une carte par terme (titre et première phrase), toute la carte cliquable */
.faq-definitions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.faq-definitions__item { position: relative; display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond); transition: border-color .2s; }
.faq-definitions__item:hover { border-color: var(--encre); }
.faq-definitions__titre { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--encre); }
.faq-definitions__titre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.faq-definitions__phrase { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texte); }

/* ---------- Fiche d'une définition (modèle 7675) ---------- */
.def-hero { position: relative; display: flex; flex-direction: column; padding-block: clamp(40px, 6vw, 72px) 0; }
.def-hero__inner { display: flex; flex: 1; width: 100%; max-width: var(--conteneur); margin: 0 auto; }
.def-hero__textes, .def-hero__image { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.def-ariane { display: flex; flex-wrap: wrap; margin: 0 -2.5px 10px; font-family: var(--open); font-size: 12px; line-height: 14px; color: var(--gris); }
.def-ariane li { display: flex; align-items: center; margin: 0 2.5px; }
.def-ariane a { display: flex; align-items: center; color: var(--violet); }
.def-ariane svg { width: 12px; height: 12px; margin: 0 1.5px; fill: var(--gris); }
.def-ariane svg + span { padding-left: 5px; }
.def-hero__titre { margin: 0 0 20px; font-family: var(--serif); font-size: 50px; font-weight: 400; line-height: 64px; color: var(--marine); }
.def-corps { position: relative; margin: 2px 0 60px; }
.def-corps__inner { display: flex; flex-direction: column; gap: 20px; max-width: var(--conteneur); margin: 0 auto; padding-top: 24px; }

/* ---------- Fiche d'une question (page simple du thème Hello) ---------- */
.faq-fiche { width: 100%; max-width: 1140px; margin-inline: auto; font-family: var(--open); font-size: 16px; line-height: 24px; color: var(--gris); }
.faq-fiche__titre { margin: 48px 0 1rem; font-family: var(--serif); font-size: clamp(32px, 4vw, 44px); font-weight: 500; line-height: 1.15; color: var(--encre); }
.faq-fiche p, .faq-fiche li { max-width: 72ch; }
.faq-fiche__contenu a { color: var(--action); text-decoration: underline; }
.faq-fiche__contenu a:hover, .faq-fiche__contenu a:active { color: var(--action-survol); }
.faq-fiche__contenu ul, .faq-fiche__contenu ol { margin: 0; padding-left: 40px; }
.faq-fiche__contenu ul { list-style: disc; }
.faq-fiche__contenu ol { list-style: decimal; }

/* fiche : réponse détaillée, liens et autres questions (ajoutés pour le GEO, d'après la documentation de l'ERP) */
.faq-fiche { padding-bottom: 60px; }
.faq-fiche__detail, .faq-fiche__liens, .faq-fiche__voisines { margin-top: 32px; color: var(--marine); }
.faq-fiche__soustitre { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--marine); }
.faq-fiche__detail p { margin: 0 0 12px; }
.faq-fiche__detail ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
.faq-fiche__detail li { margin-bottom: 8px; }
.faq-fiche__detail li::marker { color: var(--violet); }
.faq-fiche__liens ul, .faq-fiche__voisines ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
.faq-fiche__liens li, .faq-fiche__voisines li { margin-bottom: 6px; }
.faq-fiche__liens a, .faq-fiche__voisines a { color: var(--action); text-decoration: underline; }
.faq-fiche__liens a:hover, .faq-fiche__voisines a:hover { color: var(--action-survol); }
.faq-acc__suite { margin: 0; font-family: var(--open); font-size: 15px; }
.faq-acc__suite a { color: var(--action); font-weight: 600; }
.faq-acc__suite a:hover { color: var(--action-survol); }

/* ---------- Écrans intermédiaires (largeurs du thème Hello et d'Elementor) ---------- */
@media (max-width: 1366px) {
  .def-hero { padding: 0 20px; }
  .def-hero__inner { padding: 20px 0; }
}
@media (max-width: 1199px) {
  .faq-fiche { max-width: 800px; }
}
@media (max-width: 1024px) {
  .faq-grille { grid-template-columns: minmax(0, 1fr); }
  .faq-section--comptabilite .faq-section__inner { padding-bottom: 9%; }
  .faq-section--gestion-de-projets .faq-section__inner { padding-bottom: 10%; }
}
@media (max-width: 991px) {
  .faq-fiche { max-width: 600px; }
}

/* ---------- Téléphone (≤ 767 px) ---------- */
@media (max-width: 767px) {
  .faq-hero { flex-wrap: wrap; }
  .faq-hero__textes { padding: 5%; }
  .faq-hero__titre { font-size: 40px; line-height: 1.2em; }
  .faq-section__inner { max-width: 767px; }
  .def-hero__inner { flex-wrap: wrap; max-width: 767px; }
  .def-hero__textes, .def-hero__image { padding: 5%; }
  .def-hero__titre { font-size: 40px; line-height: 1.2em; }
  .def-corps__inner { max-width: 767px; padding-inline: var(--gouttiere); }
  .faq-fiche { max-width: 500px; }
}
@media (max-width: 575px) {
  .faq-fiche { max-width: none; padding-inline: 10px; }
  .faq-fiche__titre { padding-inline: 10px; }
}

/* ========== Liste de la FAQ à la charte d'octobre 2026 (29/10/2026) ==========
   en-tête à gauche et thèmes en ancres, puis un thème par section : titre collé à gauche, accordéon (.accordeon) à droite */
.faq-tete { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 5vw, 64px); }
.faq-tete__titre { margin: 12px 0 14px; font-size: clamp(40px, 5vw, 56px); line-height: 1.05; color: var(--encre); }
.faq-tete__texte { max-width: 60ch; margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: var(--texte); }
.faq-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-themes a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--trait); border-radius: var(--rayon-btn); background: var(--fond);
  font-size: 15px; font-weight: 600; line-height: 20px; color: var(--encre); transition: border-color .2s; }
.faq-themes a:hover { border-color: var(--encre); }
.faq-themes i, .faq-theme__repere i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.faq-themes__nombre { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--brume); font-size: 13px; color: var(--texte); }
.faq-theme { scroll-margin-top: var(--entete); }
.faq-theme__tete { gap: 14px; }
.faq-theme__tete p { margin: 0; }
.faq-theme__repere { display: inline-flex; align-items: center; gap: 10px; }
.faq-theme .accordeon__corps { font-size: 16px; line-height: 1.65; color: var(--texte); }
.faq-theme .accordeon__corps > :last-child { margin-bottom: 0; }
.faq-theme .accordeon__corps ul, .faq-theme .accordeon__corps ol { margin: 0 0 .8em; padding-left: 22px; }
.faq-theme .accordeon__corps li { margin-bottom: 4px; }
.faq-theme .accordeon__corps li::marker { color: var(--texte); }
.faq-theme .accordeon__corps a:not(.lien-fleche) { color: var(--action); text-decoration: underline; }
.faq-theme__suite { margin: 14px 0 0; }
.faq-theme__suite .lien-fleche { text-decoration: none; }
.faq-autre__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.faq-autre .titre-section { margin-bottom: 10px; font-size: clamp(28px, 3vw, 38px); }
.faq-autre p { margin: 0; }
.faq-autre__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1024px) {
  .faq-theme .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-theme .colle { position: static; }
}

/* fiche : alignée sur le conteneur (fil d'Ariane, en-tête) sur ordinateur */
@media (min-width: 1200px) { .faq-fiche { max-width: var(--conteneur); } }