/* ==========================================================================
   COUCHE 2 — Composants
   Un composant = un bloc ACF. Tout ce qui vaut pour plus d'une page vit ici.
   L'ordre suit celui du panneau « Sections » dans l'administration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LABEL — surtitre monospace, signature de la marque
   -------------------------------------------------------------------------- */

.label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
  display: block;
  margin-bottom: 1.25rem;
}

.section--encre .label,
.section--foret .label { color: var(--vert-signal); }

/* --------------------------------------------------------------------------
   2. ACCENT — un seul mot-clé par bloc
   -------------------------------------------------------------------------- */

.accent { color: var(--vert-fonce); }                    /* sur fond papier */
.section--encre .accent { color: var(--vert-signal); }   /* sur fond encre  */
.section--foret .accent {                                /* sur fond forêt : */
  color: var(--papier);                                  /* le crème porte l'accent, */
  border-bottom: 3px solid var(--vert-signal);           /* le vert souligne */
  padding-bottom: 1px;
}

/* --------------------------------------------------------------------------
   3. BOUTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-corps);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--primaire { background: var(--vert-signal); color: var(--encre); }
.btn--primaire:hover { background: var(--vert-fonce); color: var(--papier); }

.btn--secondaire {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}
.btn--secondaire:hover { background: var(--encre); color: var(--papier); }

.section--encre .btn--secondaire,
.section--foret .btn--secondaire { color: var(--papier); border-color: var(--papier); }
.section--encre .btn--secondaire:hover,
.section--foret .btn--secondaire:hover { background: var(--papier); color: var(--encre); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.btn-groupe { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* --------------------------------------------------------------------------
   4. IMAGE ET EMPLACEMENT PHOTO
   Le pointillé n'apparaît que tant qu'aucune image n'a été choisie dans ACF.
   -------------------------------------------------------------------------- */

.photo { border-radius: var(--radius); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
  margin-top: 0.75rem;
}

.photo-slot {
  background: var(--papier-fonce);
  border: 1px dashed var(--ardoise);
  border-radius: var(--radius);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.photo-slot span {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
  max-width: 26ch;
  line-height: 1.7;
}

.section--encre .photo-slot,
.section--foret .photo-slot { background: transparent; border-color: rgba(245, 242, 234, 0.35); }
.section--encre .photo-slot span,
.section--foret .photo-slot span { color: rgba(245, 242, 234, 0.6); }

/* --------------------------------------------------------------------------
   5. HERO D'ACCUEIL
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 9vw, 7rem) var(--section-y); }

.hero__titre { max-width: 16ch; margin-bottom: 1.75rem; }

.hero__chapo {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ardoise);
  max-width: 52ch;
  margin-bottom: 2.5rem;
}

.hero__meta {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait-encre);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.hero__meta div { max-width: 30ch; }

.hero__meta dt {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
  margin-bottom: 0.375rem;
}

.hero__meta dd { font-size: 0.9375rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   6. HERO DE PAGE — pages intérieures
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--trait-encre);
}

.page-hero h1 { max-width: 18ch; margin-bottom: 1.5rem; }

.page-hero__chapo {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ardoise);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   7. REFRAME — « le symptôme n'est pas la cause »
   Élément mémorable du site : la thèse de la pratique, rendue visible.
   -------------------------------------------------------------------------- */

.reframe__entete { margin-bottom: 3.5rem; max-width: 60ch; }
.reframe__intro  { color: rgba(245, 242, 234, 0.75); margin-top: 1.25rem; }
.reframe__liste  { border-top: 1px solid var(--trait-papier); }

.reframe__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--trait-papier);
}

.reframe__vu {
  font-family: var(--font-titre);
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  font-style: italic;
  color: var(--texte-papier-attenue);
  text-decoration: line-through;
  text-decoration-color: rgba(245, 242, 234, 0.3);
  text-decoration-thickness: 1px;
  max-width: none;
}

.reframe__fleche {
  font-family: var(--font-label);
  color: var(--vert-signal);
  font-size: 1.125rem;
}

.reframe__reel {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 500;
  max-width: none;
}

.reframe__source {
  display: block;
  font-family: var(--font-label);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-papier-attenue);
  margin-top: 0.375rem;
}

.reframe__chute {
  margin-top: 3.5rem;
  font-family: var(--font-titre);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.35;
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   8. À PROPOS — portrait
   -------------------------------------------------------------------------- */

.apropos__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.apropos__texte > p + p { margin-top: 1.25rem; }
.apropos__nom { margin-bottom: 1.5rem; }

.apropos__points {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait-encre);
  display: grid;
  gap: 1.25rem;
}

.apropos__points li { display: flex; gap: 0.875rem; align-items: baseline; }

.apropos__points b {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--vert-fonce);
  flex-shrink: 0;
  min-width: 2.25rem;
}

.section--encre .apropos__points,
.section--foret .apropos__points { border-color: var(--trait-papier); }
.section--encre .apropos__points b,
.section--foret .apropos__points b { color: var(--vert-signal); }

/* --------------------------------------------------------------------------
   9. MÉTHODE ET PARCOURS — étapes numérotées
   La numérotation est justifiée : l'ordre porte l'information.
   On ne désensibilise pas un chien avant de lui avoir appris ses stratégies.
   -------------------------------------------------------------------------- */

.methode__entete { margin-bottom: 3.5rem; max-width: 56ch; }
.methode__etapes { display: grid; gap: 0; }

.etape {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 2rem;
  border-top: 1px solid var(--trait-encre);
}
.etape:last-child { border-bottom: 1px solid var(--trait-encre); }

.etape__num {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--vert-fonce);
  padding-top: 0.375rem;
}

.etape h3 { margin-bottom: 0.625rem; }
.etape p  { color: var(--ardoise); }

.section--encre .etape,
.section--foret .etape { border-color: var(--trait-papier); }
.section--encre .etape:last-child,
.section--foret .etape:last-child { border-bottom-color: var(--trait-papier); }
.section--encre .etape__num,
.section--foret .etape__num { color: var(--vert-signal); }
.section--encre .etape p,
.section--foret .etape p { color: var(--texte-papier); }

/* --------------------------------------------------------------------------
   10. SPÉCIALITÉS — cartes
   -------------------------------------------------------------------------- */

.specialites__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.carte {
  background: var(--papier);
  border: 1px solid var(--trait-encre-f);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.carte:hover { border-color: var(--vert-signal); transform: translateY(-2px); }

.carte h3 { margin-bottom: 0.875rem; }
.carte p  { color: var(--ardoise); font-size: 0.9375rem; flex-grow: 1; }
.carte p + p { margin-top: 0.875rem; }

.carte__lien {
  margin-top: 1.5rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vert-fonce);
  text-decoration: none;
  font-weight: 500;
}
.carte__lien:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Carte posée sur la bande « Pour les professionnels ». */
.section--foret .carte {
  background: rgba(245, 242, 234, 0.06);
  border-color: var(--trait-papier);
}
.section--foret .carte h3      { color: var(--papier); }
.section--foret .carte p       { color: var(--texte-papier); }
.section--foret .carte__lien   { color: var(--vert-signal); }

/* --------------------------------------------------------------------------
   11. TARIFS
   -------------------------------------------------------------------------- */

.tarifs__entete { margin-bottom: 3.5rem; max-width: 56ch; }
.tarifs__liste  { border-top: 1px solid var(--trait-encre); }

.tarif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: baseline;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--trait-encre);
}

.tarif__nom    { margin-bottom: 0.375rem; }
.tarif__detail { color: var(--ardoise); font-size: 0.9375rem; }

.tarif__prix {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.tarifs__note { margin-top: 2rem; font-size: 0.9375rem; color: var(--ardoise); }
/* Sans ligne chiffrée, la note prend la suite directe de l'en-tête : ni l'un
   ni l'autre n'a à conserver l'espace qu'occupait la liste. */
.tarifs__entete:has(+ .tarifs__note) { margin-bottom: 1.5rem; }
.tarifs__entete + .tarifs__note { margin-top: 0; }
.tarifs__note + .tarifs__note { margin-top: 0.75rem; }
.tarifs__note a { color: inherit; text-decoration: underline; }

.section--encre .tarifs__liste, .section--encre .tarif,
.section--foret .tarifs__liste, .section--foret .tarif { border-color: var(--trait-papier); }
.section--encre .tarif__detail, .section--encre .tarifs__note,
.section--foret .tarif__detail, .section--foret .tarifs__note { color: var(--texte-papier); }

/* --------------------------------------------------------------------------
   12. MENTORAT — bande professionnelle
   -------------------------------------------------------------------------- */

.mentorat__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.mentorat__texte > p { color: var(--texte-papier); }
.mentorat__texte > p + p { margin-top: 1.25rem; }
.mentorat__titre { margin-bottom: 1.5rem; }

.mentorat__specs {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--trait-papier);
}

.mentorat__specs div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--trait-papier);
  align-items: baseline;
}

.mentorat__specs dt {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vert-signal);
}

.mentorat__specs dd { font-size: 0.9375rem; font-weight: 500; }

.mentorat .btn,
.mentorat__texte .btn { margin-top: 2rem; }

/* Le même bloc de spécifications posé sur fond papier. */
.section:not(.section--encre):not(.section--foret) .mentorat__specs,
.section:not(.section--encre):not(.section--foret) .mentorat__specs div {
  border-color: var(--trait-encre);
}
.section:not(.section--encre):not(.section--foret) .mentorat__specs dt { color: var(--vert-fonce); }

/* --------------------------------------------------------------------------
   13. DOSSIERS — cas clients
   -------------------------------------------------------------------------- */

.dossiers__entete { margin-bottom: 3.5rem; max-width: 56ch; }

.dossiers__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.dossier {
  border: 1px solid var(--trait-encre-f);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: var(--papier);
}

.dossier__ref {
  font-family: var(--font-label);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
  display: block;
  margin-bottom: 1rem;
}

.dossier h3 { margin-bottom: 0.75rem; }

.dossier__depart {
  font-size: 0.9375rem;
  color: var(--ardoise);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--trait-encre);
}

.dossier__resultat { font-size: 0.9375rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   14. CITATION — verbatim client
   -------------------------------------------------------------------------- */

.citation {
  margin-top: 3.5rem;
  border-left: 3px solid var(--vert-signal);
  border-radius: 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  max-width: 46ch;
}

.citation p {
  font-family: var(--font-titre);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 500;
}

.citation cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
}

.section--encre .citation cite,
.section--foret .citation cite { color: var(--texte-papier-attenue); }

/* --------------------------------------------------------------------------
   15. AVIS — bandeau de note et verbatims
   Les étoiles sont des masques CSS : pas d'image à charger, pas de glyphe dont
   le dessin change d'une plateforme à l'autre, et la couleur suit la palette.
   -------------------------------------------------------------------------- */

.avis { margin-top: 3rem; }

.avis__bandeau {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--trait-encre-f);
  border-radius: var(--radius);
  background: var(--papier);
}

.avis__chiffre {
  font-family: var(--font-titre);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.avis__etoiles {
  display: inline-flex;
  gap: 0.1em;
  font-size: 1.125rem;
  line-height: 1;
}

.avis__etoiles > span {
  width: 1em;
  height: 1em;
  background: var(--vert-signal);
  -webkit-mask: var(--etoile) center / contain no-repeat;
          mask: var(--etoile) center / contain no-repeat;
}

.avis__etoiles .est-vide  { background: var(--trait-encre); }
.avis__etoiles .est-demie {
  background: linear-gradient(90deg, var(--vert-signal) 50%, var(--trait-encre) 50%);
}

.avis__source {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
}

.avis__lien {
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vert-fonce);
  text-decoration: none;
  font-weight: 500;
}
.avis__lien:hover { text-decoration: underline; text-underline-offset: 3px; }

.avis__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.avis__carte {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  background: var(--papier);
  border: 1px solid var(--trait-encre-f);
  border-radius: var(--radius);
}

.avis__carte blockquote p {
  font-size: 0.9375rem;
  color: var(--ardoise);
}

.avis__carte cite {
  margin-top: auto;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
}

/* Sur fond sombre, c'est l'étoile creuse et le filet qui changent, pas la
   pleine : la note reste le point le plus lumineux du bandeau. */
.section--encre .avis__bandeau, .section--foret .avis__bandeau,
.section--encre .avis__carte,   .section--foret .avis__carte {
  background: rgba(245, 242, 234, 0.06);
  border-color: var(--trait-papier);
}
.section--encre .avis__etoiles .est-vide,
.section--foret .avis__etoiles .est-vide { background: var(--trait-papier); }
.section--encre .avis__etoiles .est-demie,
.section--foret .avis__etoiles .est-demie {
  background: linear-gradient(90deg, var(--vert-signal) 50%, var(--trait-papier) 50%);
}
.section--encre .avis__source, .section--foret .avis__source,
.section--encre .avis__carte cite, .section--foret .avis__carte cite,
.section--encre .avis__carte blockquote p, .section--foret .avis__carte blockquote p {
  color: var(--texte-papier);
}
.section--encre .avis__lien, .section--foret .avis__lien { color: var(--vert-signal); }

/* --------------------------------------------------------------------------
   16. APPEL À L'ACTION FINAL
   -------------------------------------------------------------------------- */

.cta-final { text-align: center; }
.cta-final .label { margin-inline: auto; }
.cta-final h2 { max-width: 20ch; margin-inline: auto; margin-bottom: 1.5rem; }
.cta-final p  { margin-inline: auto; color: rgba(245, 242, 234, 0.75); margin-bottom: 2.5rem; }
.cta-final .btn-groupe { justify-content: center; }

/* --------------------------------------------------------------------------
   17. PROSE — contenu long
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > h2 { margin-top: 3.5rem; margin-bottom: 1.25rem; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 2.25rem; margin-bottom: 0.75rem; }
.prose > p  { color: var(--ardoise); }
.prose > p + p { margin-top: 1.25rem; }
.prose > p + h2, .prose > ul + h2 { margin-top: 3.5rem; }

.prose__exergue {
  font-family: var(--font-titre);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.4;
  color: var(--encre) !important;
  margin-block: 2.5rem;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--vert-signal);
  max-width: 42ch;
}

.section--encre .prose > p,
.section--foret .prose > p { color: var(--texte-papier); }
.section--encre .prose__exergue,
.section--foret .prose__exergue { color: var(--papier) !important; }

/* Listes de reconnaissance dans les pages spécialité. */
.prose > ul {
  list-style: none;
  margin-top: 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.prose > ul > li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ardoise);
  line-height: 1.6;
}
.prose > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vert-signal);
}
.prose > ul + p { margin-top: 1.75rem; }
.section--encre .prose > ul > li,
.section--foret .prose > ul > li { color: var(--texte-papier); }

.prose > ol { list-style: decimal; padding-left: 1.5rem; margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.prose > ol > li { color: var(--ardoise); }
.prose a { color: var(--vert-fonce); text-decoration: underline; text-underline-offset: 3px; }
.section--encre .prose a, .section--foret .prose a { color: var(--vert-signal); }

/* --------------------------------------------------------------------------
   18. LISTE NUMÉROTÉE — signaux, erreurs, « au bon endroit si »
   -------------------------------------------------------------------------- */

.liste-num { border-top: 1px solid var(--trait-encre); margin-top: 2.5rem; }

.liste-num li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--trait-encre);
}

.liste-num b {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--vert-fonce);
  padding-top: 0.3125rem;
}

.liste-num h3 { margin-bottom: 0.5rem; }
.liste-num p  { color: var(--ardoise); font-size: 0.9375rem; }

.section--encre .liste-num,
.section--encre .liste-num li { border-color: var(--trait-papier); }
.section--encre .liste-num b  { color: var(--vert-signal); }
.section--encre .liste-num p  { color: rgba(245, 242, 234, 0.75); }

/* --------------------------------------------------------------------------
   19. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--trait-encre); margin-top: 3rem; }

.faq details { border-bottom: 1px solid var(--trait-encre); }

.faq summary {
  font-family: var(--font-titre);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  padding-block: 1.5rem;
  padding-right: 2.5rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 1.375rem;
  font-family: var(--font-label);
  font-size: 1.375rem;
  color: var(--vert-fonce);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--vert-fonce); }

.faq__reponse { padding-bottom: 1.75rem; max-width: 62ch; }
.faq__reponse p { color: var(--ardoise); font-size: 0.9375rem; }
.faq__reponse p + p { margin-top: 1rem; }
.faq__reponse a { color: var(--vert-fonce); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   20. FORMULAIRE
   -------------------------------------------------------------------------- */

.form { max-width: 640px; }

.form__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Le gap de la grille gère l'espacement interne : sinon il s'ajoute au
   margin-bottom des .champ dès que la grille passe sur deux lignes. */
.form__grille > .champ { margin-bottom: 0; }

.champ { display: grid; gap: 0.4375rem; margin-bottom: 1.25rem; }

.champ label {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
}

.champ__requis { color: var(--vert-fonce); }

.champ input,
.champ select,
.champ textarea {
  font-family: var(--font-corps);
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  background: var(--papier);
  border: 1px solid rgba(16, 28, 22, 0.25);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color 0.18s ease;
}

.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: rgba(16, 28, 22, 0.45); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--vert-fonce); }

.champ textarea { min-height: 150px; resize: vertical; }
.champ__aide { font-size: 0.8125rem; color: var(--ardoise); }

.champ--case {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block: 1.75rem;
}

.champ--case input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
  accent-color: var(--vert-fonce);
}

.champ--case label {
  font-family: var(--font-corps);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ardoise);
  line-height: 1.6;
}

/* Champ en erreur après renvoi du formulaire. */
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: #B3261E; }
.champ__erreur { font-size: 0.8125rem; color: #B3261E; }

/* Piège à robots : invisible pour l'humain, hors du flux et hors du champ des
   lecteurs d'écran, mais toujours rempli par les automates. */
.form__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messages de retour. */
.form__message {
  border-left: 3px solid var(--vert-signal);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  background: var(--papier-fonce);
  border-radius: var(--radius);
}
.form__message--erreur { border-left-color: #B3261E; }
.form__message p { max-width: none; font-size: 0.9375rem; }
.form__message p + p { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   21. CANAUX DE CONTACT
   -------------------------------------------------------------------------- */

.canaux { display: grid; gap: 0; border-top: 1px solid var(--trait-encre); }

.canaux div { padding-block: 1.375rem; border-bottom: 1px solid var(--trait-encre); }

.canaux dt {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ardoise);
  margin-bottom: 0.375rem;
}

.canaux dd { font-size: 0.9375rem; font-weight: 500; }
.canaux dd a { color: var(--vert-fonce); text-decoration: none; }
.canaux dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   22. DUO — deux colonnes générique
   Les deux sélecteurs portent le display : le modificateur --asym est utilisé
   seul dans le balisage, sans la classe de base. Ne pas les dissocier.
   -------------------------------------------------------------------------- */

.duo,
.duo--asym {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.duo--asym { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

/* --------------------------------------------------------------------------
   23. AGENDA DE RÉSERVATION
   -------------------------------------------------------------------------- */

.agenda {
  border: 1px solid var(--trait-encre-f);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--papier);
  min-height: 640px;
}
.agenda iframe { width: 100%; min-height: 640px; border: 0; display: block; }

/* En mode bouton, le bloc n'a plus de cadre à remplir : il redevient une
   simple invitation à cliquer, et la page n'appelle aucun tiers avant ça. */
.agenda--bouton {
  min-height: 0;
  border: 0;
  background: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.agenda__repli { font-size: 0.9375rem; color: var(--ardoise); }
.section--encre .agenda__repli,
.section--foret .agenda__repli { color: var(--texte-papier); }

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .apropos__grille,
  .mentorat__grille,
  .duo, .duo--asym { grid-template-columns: minmax(0, 1fr); }

  .apropos__media { order: -1; }
}

@media (max-width: 720px) {
  .reframe__ligne { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
  .reframe__fleche { transform: rotate(90deg); width: max-content; }

  .etape { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .etape__num { padding-top: 0; }

  .tarif { grid-template-columns: minmax(0, 1fr); }

  .mentorat__specs div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }

  .liste-num li { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .liste-num b { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   25. EN-TÊTE DE SECTION
   La maquette écrivait ces valeurs en style en ligne. Elles vivent ici, une
   fois, plutôt que d'être répétées sur chaque page.
   -------------------------------------------------------------------------- */

/* Le titre occupe toute la largeur du conteneur ; seul le chapô est bridé à
   une mesure de lecture. Les blocs qui veulent brider aussi le titre passent
   par une enveloppe .methode__entete, .tarifs__entete ou .dossiers__entete. */
.section__chapo {
  color: var(--ardoise);
  margin-top: 1.25rem;
  margin-bottom: 3rem;
  max-width: 56ch;
}

/* Dans une enveloppe, c'est elle qui porte l'espace sous l'en-tête. */
.methode__entete .section__chapo,
.tarifs__entete .section__chapo,
.dossiers__entete .section__chapo,
.reframe__entete .section__chapo { margin-bottom: 0; }

.section--encre .section__chapo,
.section--foret .section__chapo { color: var(--texte-papier); }

/* Un bloc soudé prolonge le précédent : c'est au précédent de refermer son
   espace, sans quoi il reste un cran de rythme vertical entre les deux. */
.section:has(+ .section--soudee) { padding-bottom: 0; }

/* Le hero d'une page intérieure peut porter des boutons : la maquette les
   détache du chapô, qui n'a pas de marge basse contrairement à celui de
   l'accueil. */
.page-hero__chapo + .btn-groupe { margin-top: 2rem; }

/* Les notes de tarifs viennent d'un seul champ de texte enrichi : la règle
   d'origine visait deux paragraphes frères portant la classe. */
.tarifs__note p + p { margin-top: 0.75rem; }

/* La colonne de droite d'un formulaire empile deux blocs : les canaux, puis la
   suite de la démarche. La maquette les détachait de 2,5 rem. */
.form__suite { margin-top: 2.5rem; }
.form__suite .liste-num { margin-top: 1.5rem; }