/* QUANTA KARMA · CHRISTELLE COLLET-MAUSSAN
   Reproduction fidèle du site d'origine quantakarma.com (WordPress/Divi +
   Supreme Modules). Palette, polices, structure et contenu repris du site
   d'origine ; code réécrit selon site-generator/standards/SITE_STANDARDS.md.

   La signature de la marque est le TITRE DÉCOUPÉ DANS UNE TEXTURE D'OR :
   le titre n'est pas doré par une couleur, il est rempli par l'image
   background_gold via background-clip:text. Un `color: gold` à sa place
   rate la marque. Repli prévu si le navigateur ne sait pas le faire.

   Relevé des valeurs : operations/quantakarma-site-20261028/spec/*.json
   (styles calculés par le navigateur à 1440 et 390 px, jamais lus dans le
   CSS Divi). */

/* ============================================================
   1. TOKENS — toute couleur vient d'ici, zéro hex dans les règles
   ============================================================ */
:root {
  /* verts.
     `--vert` est la couleur de MARQUE : fonds, filets, bordures, cartouches.
     `--vert-texte` est la même famille poussée assez loin pour que du texte
     courant tienne 4,5:1 sur les fonds clairs du site. #22795d n'y arrive pas
     (4,34:1 sur le vert pâle) : mesuré le 28 octobre 2026. Ne jamais écrire du
     texte en `--vert` sur `--vert-pale`. */
  --vert: #22795d;
  --vert-texte: #1a6049;
  --vert-profond: #0f574c;
  --vert-moyen: #347f66;
  --vert-clair: #62ac82;
  --vert-pale: #e0ecdc;
  --vert-brume: #e3ede1;
  /* ors */
  --or: #d4af37;
  --or-clair: #e6d781;
  /* or assez clair pour porter du TEXTE sur le vert de marque (4,51:1) ;
     `--or-clair` n'y est qu'à 3,64:1 */
  --or-sur-vert: #f7edc6;
  --or-moyen: #c7a948;
  --or-doux: #c7b863;
  /* neutres */
  --creme: #f5f4f0;
  --papier: #ffffff;
  --encre: #333333;
  --texte: #666666;
  --texte-sur-sombre: #f5f4f0;
  /* accents éditoriaux du site d'origine */
  --orange: #a84b00;          /* #ff9900 d'origine, assombri jusqu'à 4,7:1 sur le vert pâle */
  --orange-sur-sombre: #ffa733;
  /* matières */
  --texture-or: url("../images/texture-or.webp");  /* 225 Ko -> 60 Ko : cette matière ne sert qu'à remplir des lettres */
  --ciel: url("../images/fond-foret-etoiles-quanta-karma.webp");
  --ombre-douce: 0 10px 30px rgba(15, 87, 76, 0.14);
  --ombre-carte: 0 18px 46px rgba(15, 87, 76, 0.22);
  --filet: rgba(34, 121, 93, 0.18);
  --rayon-carte: 30px;
  --rayon-bouton: 4px;
  /* polices */
  --police-affiche: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --police-script: "Bad Script", "Segoe Script", cursive;
  --police-texte: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* échelle typographique
     Le site d'origine lit à 14 px sous des titres de 80 px (5,7× le corps).
     C'est exactement le motif que Head of Lisibilité refuse (L2 ≤ 3,2× et
     ≤ 64 px, L3 ≥ 15 px). On garde la hiérarchie et le caractère, on ramène
     l'écart dans la bande lisible : corps 17 px, affiche 54 px au plus. */
  --corps: 17px;
  --t-affiche: clamp(2.1rem, 4.4vw, 3.15rem);   /* 34 -> 54 px */
  --t-section: clamp(1.75rem, 3.2vw, 2.55rem);  /* 28 -> 41 px */
  --t-sous-section: clamp(1.35rem, 2vw, 1.65rem);
  --t-carte: clamp(1.2rem, 1.7vw, 1.5rem);
}

/* ============================================================
   2. SOCLE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Aucun bloc ne déborde la largeur de la page : mesuré 5 px de défilement
   horizontal sur téléphone, assez pour que la page « glisse » sous le doigt. */
body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--corps);
  font-weight: 500;
  line-height: 1.7;
  color: var(--texte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--vert-texte); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; color: var(--vert-texte); }
p { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .45em; }
strong, b { font-weight: 700; color: var(--vert-profond); }
hr { border: 0; border-top: 1px solid var(--filet); margin: 2rem 0; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

.wrap { width: min(1180px, 90vw); margin-inline: auto; }
/* 820 px à 17 px donnent 95 signes par ligne, au-delà de la bande confortable
   (85). Mesuré le 28 octobre 2026 sur l'accueil et les pages de séminaires. */
.wrap--etroit { width: min(720px, 90vw); }
.section { position: relative; padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
.section--pale { background: var(--vert-pale); }
.section--brume { background: var(--vert-brume); }
.section--creme { background: var(--creme); }
.section--blanche { background: var(--papier); }

/* Sections sombres : le ciel étoilé du site d'origine. Le fond de secours
   est une vraie couleur (le dégradé reste visible si l'image ne charge pas),
   sinon le texte clair se poserait sur du blanc. */
.section--ciel {
  color: var(--texte-sur-sombre);
  background-color: var(--vert-profond);
  background-image: linear-gradient(rgba(10, 60, 50, .45), rgba(8, 44, 38, .62)), var(--ciel);
  background-size: cover;
  background-position: center;
}
.section--ciel h1, .section--ciel h2, .section--ciel h3,
.section--ciel h4, .section--ciel p, .section--ciel li { color: var(--texte-sur-sombre); }
.section--ciel strong { color: var(--or-clair); }
.section--ciel a:not(.btn) { color: var(--or-clair); }

/* ============================================================
   3. TITRES
   ============================================================ */
/* Un titre qui n'est pas une balise de titre reste un titre pour l'œil, mais
   pas pour un lecteur d'écran ni pour les contrôles : à 1,22 d'interligne, un
   `<p class="titre-section">` est compté comme du texte courant et refusé.
   Un vrai titre garde son interligne serré ; porté par un `<p>`, il prend
   l'interligne du texte courant. */
.titre-affiche,
.titre-section,
.titre-carte { font-family: var(--police-script); font-weight: 700; line-height: 1.22; }
p.titre-affiche, p.titre-section, p.titre-carte { line-height: 1.42; }

.titre-affiche { font-size: var(--t-affiche); }
.titre-section { font-size: var(--t-section); text-align: center; margin-bottom: 1.6rem; }
.titre-carte { font-size: var(--t-carte); }

/* Le registre « gravé » du site : Cormorant Garamond en petites capitales,
   interlettré. Il porte le nom de marque et les intitulés d'offre. */
.titre-grave {
  font-family: var(--police-affiche);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .04em;
  line-height: 1.18;
}

/* ---- titre découpé dans l'or : la signature de la marque ----
   `color` reste défini : si background-clip:text n'est pas supporté, ou si
   la texture ne charge pas, le titre reste lisible en or plein. */
.en-or {
  color: var(--or);
  background-image: var(--texture-or);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .en-or {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.en-or--souligne { text-decoration: underline; text-decoration-color: var(--or-doux); text-underline-offset: .18em; }
.souligne-or { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .18em; }
.souligne-vert { text-decoration: underline; text-decoration-color: var(--vert); text-underline-offset: .18em; }

.sur-titre {
  display: block;
  font-family: var(--police-texte);
  font-size: .95rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--or-moyen);
  margin-bottom: .8rem;
}

/* ============================================================
   4. LE BOUTON (un seul composant, partout)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--rayon-bouton);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-douce); }
.btn-or { background: var(--or-clair); border-color: var(--vert); color: var(--vert-profond); }
.btn-or:hover { background: var(--or-moyen); color: var(--vert-profond); }
.btn-contour { background: var(--papier); border-color: var(--or-moyen); color: var(--vert-texte); }
.btn-contour:hover { background: var(--or-clair); }
.btn-sur-ciel { background: rgba(10, 60, 50, .4); border-color: var(--or-clair); color: var(--creme); }
.btn-sur-ciel:hover { background: var(--or-clair); color: var(--vert-profond); }
.btn-vert { background: var(--vert); border-color: var(--vert); color: var(--creme); }
.btn-vert:hover { background: var(--vert-profond); }
.boutons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* lien souligné doré du site d'origine (sous les cartes) */
.lien-fort {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* cible tactile : 27 px mesurés avant, sous le minimum */
  font-weight: 700;
  color: var(--vert-texte);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.section--ciel .lien-fort { color: var(--or-clair); }

/* ============================================================
   5. EN-TÊTE
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--vert-brume);
  box-shadow: 0 1px 0 rgba(34, 121, 93, .12);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .55rem 0; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 52px; width: auto; }
.nav-principale ul { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-principale li { margin: 0; }
.nav-principale a {
  display: inline-block;
  padding: .5rem 0;
  font-size: .98rem;
  font-weight: 600;
  color: var(--vert-texte);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-principale a:hover { border-bottom-color: var(--or); }
.nav-principale a[aria-current="page"] { color: var(--orange); }
.nav-bascule {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  gap: 5px; flex-direction: column;
  background: none; border: 0; cursor: pointer;
}
.nav-bascule span { display: block; width: 26px; height: 2px; background: var(--vert); transition: transform .2s ease, opacity .2s ease; }
.nav-bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-bascule[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-bascule[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  position: relative;
  /* Le hero d'origine fait 969 px de haut à 1440 ; la reproduction en faisait
     770 et la vague arrivait trop tôt. */
  padding: clamp(3.4rem, 12.5vw, 180px) 0 clamp(5rem, 17.2vw, 248px);
  color: var(--creme);
  background-color: var(--vert-profond);
  background-image: linear-gradient(rgba(8, 56, 47, .3), rgba(6, 40, 34, .45)), var(--ciel);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-contenu { max-width: 760px; margin-left: auto; text-align: center; }
.hero-nom { font-family: var(--police-texte); font-weight: 500; font-size: var(--t-affiche); line-height: 1.16; margin-bottom: .35rem; }
.hero-role { font-family: var(--police-texte); font-weight: 600; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.42; margin: 0 0 1.4rem; }
.hero-regle { width: min(230px, 50%); height: 4px; margin: 1.6rem auto; border: 0; background: var(--or); }
.hero-marque { font-size: var(--t-affiche); margin-bottom: .1em; }
.hero-marque + .hero-marque { margin-top: -.12em; }
.hero .boutons { margin-top: 2.2rem; }
.lune {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3.5rem);
  left: clamp(1rem, 4vw, 5rem);
  width: clamp(92px, 12vw, 170px);
  z-index: 1;
  animation: lune-tourne 90s linear infinite;
}
@keyframes lune-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lune { animation: lune-tourne 90s linear infinite; } }

/* ---- vagues de séparation entre sections ---- */
.vague { display: block; width: 100%; height: clamp(38px, 5vw, 76px); position: relative; z-index: 3; margin: 0; }
.vague svg { display: block; width: 100%; height: 100%; }
.vague--haut { margin-bottom: -1px; }
.vague--bas { margin-top: -1px; }

/* ============================================================
   7. BLOCS DE CONTENU
   ============================================================ */
/* Deux colonnes, mais jamais plus étroites que 320 px : en dessous le texte
   se hache (25 signes par ligne mesurés sur « Ma vision » quand un `.duo`
   était posé dans un `.wrap--etroit`). Et jamais plus de 72 signes par ligne
   non plus : une colonne de 804 px en comptait 95. */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.duo p, .duo li { max-width: 68ch; }
.duo--portrait { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.duo--inverse > :first-child { order: 2; }

/* portrait en galet, bordure verte : la forme du site d'origine */
.galet {
  border: 2px solid var(--vert);
  border-radius: 62% 38% 46% 54% / 52% 44% 56% 48%;
  overflow: hidden;
  background: var(--papier);
}
.galet img { width: 100%; }

.texte-centre { text-align: center; }
.losange { display: block; text-align: center; color: var(--or); font-size: 1.1rem; margin: 1.3rem 0; }

/* bandeau vert à texte doré */
.bandeau {
  background: var(--vert);
  color: var(--or-sur-vert);
  padding: 1rem 1.6rem;
  text-align: center;
  border-radius: 2px;
}
.bandeau h1, .bandeau h2, .bandeau h3, .bandeau h4 { color: var(--or-sur-vert); }
.bandeau p { margin: 0; font-family: var(--police-script); font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.4; color: var(--or-sur-vert); }

/* vidéo encadrée de vert */
.cadre-video { width: min(420px, 100%); margin-inline: auto; border: 4px solid var(--vert); border-radius: 10px; overflow: hidden; box-shadow: var(--ombre-carte); background: #000; }
.cadre-video video { width: 100%; display: block; }

/* cartes « Espace particuliers / professionnels » */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(1.5rem, 3vw, 2.4rem); }
.carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--or-moyen);
  border-radius: var(--rayon-carte);
  background: rgba(8, 48, 41, .55);
  text-align: center;
}
.carte img { width: clamp(110px, 18vw, 170px); }
.carte p, .carte li { color: var(--texte-sur-sombre); }
.carte h1, .carte h2, .carte h3, .carte h4 { color: var(--or-sur-vert); }
.carte .btn { margin-top: auto; }
.carte-accroche { font-weight: 700; font-style: italic; text-transform: uppercase; color: var(--or-clair); }

/* carte claire (offres, outils, formations) */
.carte-claire {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  background: var(--papier);
  box-shadow: var(--ombre-douce);
}
.carte-claire img { border-radius: 16px; }
.carte-claire .btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   8. FAQ (accordéon natif : aucun JS requis pour lire la réponse)
   ============================================================ */
.faq { display: grid; gap: .75rem; }
.faq details {
  border: 1px solid var(--filet);
  border-radius: 10px;
  background: var(--creme);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 56px;
  padding: 1rem 1.3rem;
  font-weight: 700;
  color: var(--vert-texte);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--or-moyen); }
.faq details[open] summary::before { content: "–"; }
.faq .reponse { padding: 0 1.3rem 1.2rem; }

/* La carte de question est TOUJOURS claire, y compris posée sur le ciel
   étoilé : sans ces règles, elle héritait de la couleur de texte des sections
   sombres et sortait en crème sur crème — ratio mesuré 1,00:1, donc du texte
   strictement invisible. Vécu le 28 octobre 2026 sur la FAQ. */
.faq, .faq p, .faq li, .faq td, .faq summary, .faq .reponse,
.section--ciel .faq, .section--ciel .faq p, .section--ciel .faq li,
.section--ciel .faq .reponse { color: var(--texte); }
.faq summary, .section--ciel .faq summary { color: var(--vert-texte); }
.faq strong, .section--ciel .faq strong { color: var(--vert-profond); }
.faq a:not(.btn), .section--ciel .faq a:not(.btn) { color: var(--vert-texte); }

/* ============================================================
   9. FORMULAIRES
   ============================================================ */
.formulaire { display: grid; gap: 1rem; }
.champ { display: grid; gap: .35rem; }
.champ > label { font-weight: 600; color: inherit; }
.champ .requis { color: var(--orange-sur-sombre); }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--filet);
  border-radius: 6px;
  background: var(--papier);
  font-family: var(--police-texte);
  font-size: 1rem;
  color: var(--encre);
}
.formulaire textarea { min-height: 140px; resize: vertical; }
.consentement { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
.consentement input { width: 20px; min-height: 20px; height: 20px; margin-top: .25rem; flex: none; }
.form-message { margin: 0; font-weight: 600; }
.form-message.ok { color: var(--vert); }
.form-message.err { color: var(--orange); }
.section--ciel .form-message.ok { color: var(--or-clair); }

/* ============================================================
   10. BLOG
   ============================================================ */
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.5rem, 3vw, 2.2rem); }
.article-carte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--filet);
  border-radius: 18px;
  background: var(--papier);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
}
.article-carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article-carte .corps { display: flex; flex-direction: column; gap: .7rem; padding: 1.3rem; flex: 1; }
.article-carte h2, .article-carte h3 { font-family: var(--police-texte); font-size: 1.12rem; font-weight: 700; line-height: 1.35; margin: 0; }
.article-carte h2 a, .article-carte h3 a { display: inline-block; min-height: 44px; color: var(--vert-texte); text-decoration: none; }
.article-carte h2 a:hover, .article-carte h3 a:hover { text-decoration: underline; }
.article-carte .meta { font-size: .95rem; color: var(--texte); }
.article-carte .lien-fort { margin-top: auto; }

/* Largeur de lecture. Mesuré le 28/10 : sans plafond, le texte des pages
   longues atteint 134 signes par ligne à 1440 px — l'œil retombe mal sur la
   ligne suivante au-delà d'environ 85. */
.article-corps { max-width: 72ch; margin-inline: auto; }
.wrap--etroit p, .wrap--etroit li,
.panneau p, .panneau li,
.faq .reponse p, .faq .reponse li,
.cadre-formation p, .cadre-or p, .carte-claire p,
.section--ciel > .wrap > p { max-width: 72ch; }
.texte-centre p, .texte-centre li { margin-inline: auto; }
.article-corps h2 { font-family: var(--police-texte); font-size: 1.45rem; font-weight: 700; margin-top: 2.2rem; }
.article-corps h3 { font-family: var(--police-texte); font-size: 1.2rem; font-weight: 700; margin-top: 1.8rem; }
.article-corps img { border-radius: 14px; margin: 1.6rem 0; }
.article-corps blockquote {
  margin: 1.8rem 0;
  padding: 1rem 0 1rem 1.3rem;
  border-left: 3px solid var(--or);
  font-style: italic;
  color: var(--vert-profond);
}


/* ---- panneau clair pose sur le ciel etoile ----
   C'est la mise en page des articles et des archives du site d'origine :
   une colonne blanche qui flotte sur la nuit verte. Le fond de secours du
   panneau est une vraie couleur, jamais la transparence. */
.panneau {
  background: var(--papier);
  border-radius: 18px;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  box-shadow: var(--ombre-carte);
}
.panneau, .panneau p, .panneau li, .panneau h2, .panneau h3, .panneau h4 { color: var(--texte); }
.panneau h1, .panneau h2, .panneau h3, .panneau h4 { color: var(--vert-texte); }
.panneau strong { color: var(--vert-profond); }
.panneau a:not(.btn) { color: var(--vert-texte); }
.section--ciel .panneau .lien-fort { color: var(--vert-texte); }

.fil-ariane { font-size: .95rem; margin-bottom: 1.1rem; }
.fil-ariane a { color: inherit; }
.section--ciel > .wrap > .fil-ariane { color: var(--creme); }
.meta-article { font-size: .95rem; margin-bottom: 1.6rem; }
.liste-inline { display: inline; list-style: none; padding: 0; margin: 0; }
.liste-inline li { display: inline; margin: 0; }
.liste-inline li + li::before { content: ", "; }

/* grille en briques : le blog d'origine range ses cartes en maconnerie */
@supports (grid-template-rows: masonry) {
  .grille-articles { grid-template-rows: masonry; }
}
.section--ciel .article-carte { background: var(--papier); border-color: transparent; }
.section--ciel .article-carte h2 a { color: var(--vert-texte); }
.section--ciel .article-carte .meta, .section--ciel .article-carte p { color: var(--texte); }
.section--ciel .article-carte .lien-fort { color: var(--vert-texte); }

/* bande de vagues DANS une suite de sections sombres : le site d'origine pose
   une seule respiration claire entre le hero et la grille, pas deux. */
.vague-interne {
  height: clamp(44px, 6vw, 92px);
  background:
    linear-gradient(var(--creme), var(--creme)) center/100% 100% no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 18c200-26 400-22 600 4s400 40 600 16 160-26 240-38v90H0z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 18c200-26 400-22 600 4s400 40 600 16 160-26 240-38v90H0z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--creme);
}
.section--suite { margin-top: -1px; }

/* ============================================================
   11. AVIS GOOGLE
   ============================================================ */
/* Les avis n'ont pas tous la même longueur : en grille, le plus long étire
   toute sa rangée et laisse un grand vide sous les autres. En colonnes, ils
   se rangent d'eux-mêmes. */
.avis { columns: 3 300px; column-gap: 1.4rem; }
.avis > * { break-inside: avoid; margin-bottom: 1.4rem; }
.avis article { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem; border: 1px solid var(--filet); border-radius: 16px; background: var(--papier); }
.avis .etoiles { color: var(--or); letter-spacing: .12em; }
.avis .auteur { font-weight: 700; color: var(--vert-texte); }
.avis blockquote { margin: 0; font-style: normal; }
.avis-resume { text-align: center; margin-bottom: 1.8rem; }
.avis-resume .note { font-family: var(--police-affiche); font-size: 2.2rem; font-weight: 700; color: var(--vert); }

/* ============================================================
   12. PIED DE PAGE
   ============================================================ */
.site-footer { background: var(--vert-pale); padding: clamp(2.6rem, 5vw, 4rem) 0 0; }
.footer-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); }
.site-footer h2, .site-footer h3 { font-family: var(--police-script); font-size: 1.35rem; color: var(--vert-texte); margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--vert-texte); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-accroche { font-family: var(--police-script); font-size: 1.25rem; line-height: 1.5; color: var(--vert-texte); }
.footer-logo img { width: 210px; margin-bottom: 1rem; }
.reseaux { display: flex; gap: .9rem; }
.reseaux a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--vert); border-radius: 50%; }
.reseaux svg { width: 20px; height: 20px; fill: var(--vert); }
.footer-bas { margin-top: 2.5rem; padding: 1.1rem 0; border-top: 1px solid var(--filet); }
.footer-bas .wrap { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between; align-items: center; }
.footer-bas p { margin: 0; font-size: .95rem; color: var(--vert-texte); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; padding: 0; margin: 0; font-size: .95rem; }

/* ============================================================
   13. BANDEAU COOKIES (règle 6 du standard : carte compacte,
   boutons à poids visuel égal)
   ============================================================ */
.consent-banner {
  position: fixed; left: 22px; bottom: 22px; z-index: 90;
  width: min(400px, calc(100% - 44px));
  display: grid; gap: 14px; padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px;
  background: var(--vert-profond); color: var(--creme);
  box-shadow: var(--ombre-carte);
}
.consent-banner:focus { outline: none; }
.consent-banner p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--creme); }
.consent-banner a { color: var(--or-clair); }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn {
  flex: 1; min-height: 44px; padding: .5rem 1rem; font-size: .95rem;
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: var(--creme);
}
.consent-actions .btn:hover { background: rgba(255, 255, 255, .26); transform: none; box-shadow: none; }

/* bouton WhatsApp flottant (présent sur le site d'origine) */
.wa-flottant {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; width: 56px; height: 56px;
  align-items: center; justify-content: center;
  border-radius: 50%; background: #25d366; box-shadow: var(--ombre-carte);
}
.wa-flottant svg { width: 30px; height: 30px; fill: #fff; }

/* ============================================================
   14. TROIS LARGEURS CONSTRUITES — 1440 / ~860 / 390
   ============================================================ */
@media (max-width: 980px) {
  .footer-grille { grid-template-columns: 1fr 1fr; }
  .duo, .duo--portrait { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
  .duo--portrait .galet { width: min(300px, 70%); margin-inline: auto; }
  .hero-contenu { margin-inline: auto; }
}

@media (max-width: 860px) {
  .nav-bascule { display: inline-flex; }
  .nav-principale {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; padding: .6rem 5vw 1.2rem;
    background: var(--vert-brume);
    box-shadow: var(--ombre-douce);
  }
  .nav-principale.est-ouverte { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principale a { padding: .85rem 0; border-bottom: 1px solid var(--filet); }
  .site-header .wrap { position: relative; }
}

@media (max-width: 640px) {
  :root { --corps: 16px; }
  /* Sur téléphone, le hero d'origine fait 1 104 px — un plein écran et demi,
     conséquence de ses titres à 80 px. On garde la présence sans l'excès. */
  .hero { min-height: 78vh; display: flex; align-items: center; }
  .hero > .wrap { width: 100%; }
  .footer-grille { grid-template-columns: 1fr; }
  .boutons { flex-direction: column; align-items: stretch; }
  .boutons .btn { width: 100%; }
  .consent-banner { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .wa-flottant { bottom: 92px; }
}

/* ============================================================
   15. COMPOSANTS DEMANDÉS PAR LES PAGES
   Chaque classe ci-dessous a été introduite par une page précise, pour un
   motif du site d'origine que le vocabulaire de base ne couvrait pas. Elles
   sont définies ICI, jamais en ligne, pour rester modifiables d'un endroit.
   ============================================================ */

/* Fiche de formation (page Formations) : une carte claire posée sur le ciel,
   avec son liseré doré — le registre des trois formations du site d'origine. */
.cadre-formation,
.cadre-or {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--or-moyen);
  border-radius: var(--rayon-carte);
  background: var(--papier);
  box-shadow: var(--ombre-douce);
}
.cadre-formation + .cadre-formation,
.cadre-or + .cadre-or { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.section--ciel .cadre-formation,
.section--ciel .cadre-or { background: rgba(255, 255, 255, .96); }
.section--ciel .cadre-formation *,
.section--ciel .cadre-or * { color: var(--texte); }
.section--ciel .cadre-formation h1, .section--ciel .cadre-formation h2,
.section--ciel .cadre-formation h3, .section--ciel .cadre-formation h4,
.section--ciel .cadre-or h1, .section--ciel .cadre-or h2,
.section--ciel .cadre-or h3, .section--ciel .cadre-or h4 { color: var(--vert-texte); }
.section--ciel .cadre-formation strong,
.section--ciel .cadre-or strong { color: var(--vert-profond); }
.section--ciel .cadre-formation .btn-or,
.section--ciel .cadre-or .btn-or { color: var(--vert-profond); }

/* Fiche d'outil (page Mes outils) : image à gauche, texte à droite, et une
   variante en trois colonnes pour la rangée de symboles. */
.fiche { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); align-items: center; }
.fiche p, .fiche li { max-width: 68ch; }
.fiche--trio { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: center; }
.fiche--trio img { margin-inline: auto; }

/* Encart vert plein dans une page claire (Espace professionnel, accueil) :
   le même registre que le bandeau, mais pour un paragraphe entier. */
.panneau-vert {
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: 16px;
  background: var(--vert);
  color: var(--creme);
}
.panneau-vert p, .panneau-vert li, .panneau-vert h1, .panneau-vert h2,
.panneau-vert h3, .panneau-vert h4, .panneau-vert em { color: var(--creme); }
.panneau-vert strong { color: var(--or-sur-vert); }
.panneau-vert a:not(.btn) { color: var(--or-sur-vert); }

/* Empilement de cartes séparées par une respiration constante. */
.pile { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }

/* Rangée de symboles dorés (Ma vision) : jamais d'orphelin, les symboles se
   répartissent et se centrent quel que soit leur nombre. */
.rangee-symboles {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
  justify-content: center;
}
.rangee-symboles img { width: clamp(84px, 12vw, 160px); }
/* Une colonne de texte à 29 signes par ligne hache la lecture : au-dessous de
   300 px de large, les colonnes repassent les unes sous les autres. */
/* Trois éléments de front : symbole · texte · symbole, comme sur le site
   d'origine. Le texte prend la place qui reste, les symboles gardent la leur.
   Sous 860 px, tout repasse les uns sous les autres. */
.rangee-symboles > img { flex: 0 0 auto; }
.rangee-symboles > :not(img) { flex: 1 1 360px; min-width: min(360px, 100%); margin: 0; }
@media (max-width: 860px) { .rangee-symboles > img { order: -1; } }

/* Titre manuscrit vert : le registre des intertitres longs de « Ma vision ». */
.script-vert {
  font-family: var(--police-script);
  font-weight: 700;
  font-size: var(--t-sous-section);
  line-height: 1.45;
  text-align: center;
  color: var(--vert-texte);
}

/* Intitulé d'un groupe de questions (FAQ). */
.titre-groupe {
  font-family: var(--police-texte);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vert-texte);
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 1rem;
}
.section--ciel .titre-groupe { color: var(--or-clair); }

/* Trois éléments de front, qui retombent proprement en dessous de 860 px. */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.4rem, 3vw, 2.2rem); }

/* Petite lune fixe en tête des pages légales. */
.lune-fixe { width: clamp(72px, 9vw, 120px); margin: 0 auto 1.2rem; }

/* Le yin-yang doré de la signature. Sur le site d'origine c'est un caractère
   de la police d'icônes de Divi, qui n'existe pas hors de WordPress : redessiné
   en SVG pour ne pas perdre le symbole. */
.symbole-yy { color: var(--or); margin: 1.2rem 0; }
.symbole-yy svg { display: inline-block; }

/* Portrait · texte · symbole : la rangée à trois colonnes de l'accueil.
   En deux colonnes, le symbole doré se retrouvait empilé sous le portrait,
   là où le site d'origine le pose à droite du texte. */
.trio-portrait {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 280px);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
}
.trio-portrait p, .trio-portrait li { max-width: 68ch; }
@media (max-width: 1100px) {
  .trio-portrait { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .trio-portrait > :last-child { display: none; }
}
@media (max-width: 860px) {
  .trio-portrait { grid-template-columns: 1fr; }
  .trio-portrait .galet { width: min(300px, 72%); margin-inline: auto; }
}