/* =========================================================================
   Isabelle Beaugrand — Blocs de section partagés
   Source unique des composants de mise en page, consommés par les pages du
   site (site/) ET par la bibliothèque (sections/). S'appuie sur system.css
   (primitives + tokens) et themes.css (4 thèmes). Tout en tokens sémantiques.
   ========================================================================= */

/* ----------------------------------------------------- coquilles de section */
.sec { padding:80px 0; }
.sec--lg { padding:96px 0; }
.sec__head { display:flex; flex-direction:column; gap:16px; margin-bottom:48px; max-width:640px; }
.sec__head--center { text-align:center; max-width:720px; margin-inline:auto; align-items:center; }

/* chrome de la bibliothèque (pages sections/) */
.pagehead { border-bottom:1px solid var(--line-green-soft); background:var(--cream); }
.pagehead__in { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.pagehead__title { font-size:18px; }
.pagehead__tag { font-size:var(--fs-small); color:var(--ink-50); }

/* =============================================================== HEADER */
.util { background:var(--terracotta-deep); color:var(--cream); font-size:14px; }
.util__in { display:flex; align-items:center; justify-content:space-between; height:40px; }
.util__list { display:flex; gap:24px; align-items:center; }
.util__list span { display:inline-flex; align-items:center; gap:6px; opacity:.92; }

.nav { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.nav__left { display:flex; align-items:center; gap:32px; }
.brand { font-size:18px; letter-spacing:.01em; color:inherit; }
.brand__accent { color:var(--terracotta); }
.nav__links { display:flex; align-items:center; gap:24px; font-size:16px; }
.nav__links a { position:relative; padding:4px 0; color:inherit; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition:width .25s var(--ease); }
.nav__links a:hover::after { width:100%; }
.nav__toggle { display:none; width:44px; height:44px; border:0; background:transparent; flex-direction:column; gap:5px; align-items:center; justify-content:center; color:inherit; }
.nav__toggle span { width:24px; height:2px; background:currentColor; transition:transform .3s var(--ease), opacity .3s var(--ease); }

/* header fixe du site : transparent (clair) sur le hero, opaque crème au scroll */
.site-header { position:fixed; inset:0 0 auto 0; z-index:100; color:var(--cream); transition:background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease); }
.site-header .util { background:var(--terracotta-deep); }   /* surheader : aplat net lisible (corrigé) */
.site-header .nav__cta { background:var(--taupe); color:var(--ink); }
.site-header.is-stuck { background:rgba(253,249,242,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(62,58,54,.08); color:var(--ink); }
.site-header.is-stuck .util { display:none; }
.site-header.is-stuck .nav__cta { background:var(--terracotta); color:var(--cream); }
/* header plein (pages internes) : crème opaque, texte encre, bandeau util conservé */
.site-header--solid { position:sticky; background:rgba(253,249,242,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--ink); box-shadow:0 1px 0 var(--line-green-soft); }
.site-header--solid .nav__cta { background:var(--terracotta); color:var(--cream); }
.site-header--solid .nav__links a::after { background:var(--terracotta); }
/* en-tête de page interne (hero court) */
.page-hero { padding:120px 0 72px; text-align:center; }
.page-hero__in { max-width:820px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:22px; }
.page-hero__crumb { font-size:var(--fs-small); color:var(--text-muted); }
.page-hero__crumb a { color:var(--accent); }
.nav__cta { display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; font-size:16px; white-space:nowrap; transition:transform .2s var(--ease), background .2s var(--ease); }
.nav__cta:hover { transform:translateY(-2px); }
/* Deux actions dans le header, hiérarchisées : l'accès au compte est un lien
   discret, le bouton reste seul à porter l'action principale. Deux boutons
   côte à côte se disputeraient l'attention et n'en obtiendraient aucune. */
.nav__actions { display:flex; align-items:center; gap:20px; }
.nav__account { font-size:16px; white-space:nowrap; color:var(--text-muted); transition:color .2s var(--ease); }
.nav__account:hover { color:var(--accent); }

/* ================================================================== HERO */
.hero { min-height:600px; display:flex; align-items:center; }
.hero--full { min-height:88vh; }
.hero--full .hero__inner { padding-top:calc(var(--header-h) + 48px); padding-bottom:64px; }
.hero-photo.theme-image > .theme-bg::after {
  background:linear-gradient(100deg, rgba(28,20,20,.82) 0%, rgba(28,20,20,.5) 42%, rgba(28,20,20,.08) 70%);
}
.hero__inner { max-width:640px; display:flex; flex-direction:column; gap:48px; padding-block:56px; }
.hero__head { display:flex; flex-direction:column; gap:40px; }
.hero__tg { display:flex; flex-direction:column; gap:16px; }
.hero .pullquote { max-width:430px; }
.hero__buttons { display:flex; gap:16px; flex-wrap:wrap; }
.trust { display:grid; grid-template-columns:repeat(2,max-content); gap:16px 32px; max-width:480px; }
.trust__item { display:flex; align-items:center; gap:8px; }
.trust__item img { width:20px; height:20px; }
.trust__item span { font-size:16px; letter-spacing:-.03em; color:var(--text); }

.hero-c { text-align:center; padding:84px 0 92px; }
.hero-c .rings { width:1100px; height:1100px; left:50%; top:-20%; transform:translateX(-50%); }
.hero-c__in { max-width:820px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:28px; }
.hero-c__buttons { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.hero-c__strip { display:flex; gap:32px; flex-wrap:wrap; justify-content:center; margin-top:24px; padding-top:28px; border-top:1px solid var(--border); }
.hero-c__strip .trust__item span { color:var(--text-muted); }

/* ============================================================= EDITORIAL */
.split { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split__media { position:relative; min-height:600px; overflow:hidden; }
.split__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split__content { display:flex; align-items:center; padding:112px 96px; }
.prose { width:100%; max-width:582px; display:flex; flex-direction:column; gap:56px; }
.prose__head { display:flex; flex-direction:column; gap:40px; }
.prose__body { display:flex; flex-direction:column; gap:24px; font-size:20px; color:var(--text); }
.prose__body p { line-height:1.5; }
/* Doodles décoratifs (fleurs / vase / bol dessinés) posés sur les bords, discrets,
   derrière le contenu. .theme{overflow:hidden} clippe le débord → effet « peek » de coin. */
.doodle--tr { top:-16px; right:-14px; width:128px; transform:rotate(3deg); }
.doodle--tl { top:-16px; left:-14px; width:128px; transform:rotate(-3deg); }
.doodle--br { bottom:-16px; right:-14px; width:128px; transform:rotate(-2deg); }
.doodle--bl { bottom:-16px; left:-14px; width:148px; transform:rotate(2deg); }
/* Carte entièrement cliquable : overlay lien couvrant la carte (.card/.mcard sont position:relative). */
.card-stretch { position:absolute; inset:0; z-index:2; }

.manifesto { text-align:center; padding:92px 0; }
.manifesto__in { max-width:840px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:40px; }
.manifesto__statement { font-size:clamp(28px,3.6vw,40px); line-height:1.2; letter-spacing:-.03em; color:var(--heading); }
.manifesto__sign { display:flex; flex-direction:column; align-items:center; gap:6px; }
.manifesto__sign span.role { font-size:16px; color:var(--text-muted); }
.manifesto .doodle--tr { width:150px; right:3%; top:24px; }
.manifesto .doodle--bl { width:170px; left:2%; bottom:24px; }

.editorial { padding:84px 0; }
.editorial__grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start; }
.editorial__body { display:flex; flex-direction:column; gap:24px; font-size:20px; color:var(--text); }
.stat-rail { display:grid; grid-template-columns:repeat(3,1fr); margin-top:72px; border-top:1px solid var(--border); }
.stat-rail__item { padding:40px 24px 0; }
.stat-rail__item + .stat-rail__item { border-left:1px solid var(--border); }
.ed-num { font-size:clamp(40px,5vw,56px); line-height:1; letter-spacing:-.04em; color:var(--accent); }
.ed-num-label { font-size:16px; color:var(--text-muted); margin-top:8px; }

.asso { min-height:560px; display:flex; align-items:center; }
.asso.theme-image > .theme-bg::after {
  background:linear-gradient(90deg, rgba(40,38,30,.84) 0%, rgba(40,38,30,.55) 45%, rgba(40,38,30,.12) 100%);
}
.asso__in { max-width:560px; display:flex; flex-direction:column; gap:28px; padding:96px 0; }
.asso__title { font-size:clamp(30px,3.6vw,44px); line-height:1.1; letter-spacing:-.035em; color:var(--heading); }
.asso__text { font-size:20px; line-height:1.6; color:var(--text); }

.axis { padding:92px 0; }
.axis .rings { width:1100px; height:1100px; right:-360px; top:-360px; opacity:.9; }
.axis__grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.axis__title { font-size:clamp(32px,4vw,50px); line-height:1.08; letter-spacing:-.04em; color:var(--heading); }
.axis__copy { display:flex; flex-direction:column; gap:24px; font-size:20px; line-height:1.6; color:var(--text); }
.axis__copy em { font-style:italic; font-weight:700; color:var(--accent); }
.axis__copy .btn { align-self:flex-start; margin-top:8px; }

/* ============================================================== SERVICES */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { position:relative; overflow:hidden; background:var(--surface); padding:36px 24px; display:flex; flex-direction:column; gap:48px; }
.card__circles { position:absolute; width:470px; height:470px; top:-210px; right:-150px; pointer-events:none; opacity:.9; }
.card__body { position:relative; display:flex; flex-direction:column; gap:32px; }
.card__icon { width:32px; height:32px; }
.card__text { display:flex; flex-direction:column; gap:20px; }
.card__lead { font-size:28px; line-height:1.05; letter-spacing:-.02em; color:var(--heading); }
.card__desc { font-style:italic; font-size:18px; line-height:1.15; color:var(--text-muted); }
.card .arrow-link { font-size:16px; margin-top:auto; }

.bento { display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-auto-rows:1fr; gap:16px; }
.tile { position:relative; overflow:hidden; background:var(--surface); padding:32px; display:flex; flex-direction:column; gap:20px; min-height:240px; }
.tile__icon { width:32px; height:32px; margin-bottom:8px; }
.tile__title { font-size:24px; line-height:1.1; letter-spacing:-.02em; color:var(--heading); }
.tile__desc { font-style:italic; font-size:16px; line-height:1.4; color:var(--text-muted); }
.tile--feature { grid-row:span 2; background:var(--accent); border-color:transparent; color:var(--primary-fg); justify-content:space-between; }
/* tuile vedette : icône + titre + desc enveloppés dans un <div> → on le passe en
   colonne flex pour espacer l'icône du titre (sinon collés). */
.tile--feature > div { display:flex; flex-direction:column; gap:16px; }
.tile--feature .tile__title { color:var(--primary-fg); font-size:30px; }
.tile--feature .tile__desc { color:var(--primary-fg); opacity:.82; }
.tile--feature .tile__icon { filter:brightness(0) invert(1); }
.theme-dark .tile--feature .tile__icon { filter:brightness(0); opacity:.9; }
.theme-image .tile--feature { background:var(--green-deep); color:var(--cream); }
.theme-image .tile--feature .tile__title, .theme-image .tile--feature .tile__desc { color:var(--cream); }
.theme-image .tile--feature .tile-cta { background:var(--cream); color:var(--green-deep); }
.tile--wide { grid-column:span 2; }
.tile-cta { display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; background:var(--bg); color:var(--text); font-size:16px; transition:transform .2s var(--ease); }
.tile-cta:hover { transform:translateY(-2px); }

.approaches { position:relative; overflow:hidden; }
.approaches .rings { width:1074px; height:1074px; left:-540px; bottom:-420px; }
.triptych { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }  /* colonnes flexibles : s'adapte à 2–5 étapes */
.tri { padding:0 40px; display:flex; flex-direction:column; gap:20px; }
.tri + .tri { border-left:1px solid var(--border); }
.tri:first-child { padding-left:0; }
.tri:last-child { padding-right:0; }
.tri__top { display:flex; align-items:baseline; gap:16px; }
.tri__idx { font-size:22px; color:var(--accent); font-weight:700; }
.tri__icon { width:32px; height:32px; }
.tri__name { font-size:26px; line-height:1.1; letter-spacing:-.02em; color:var(--heading); }
.tri__desc { font-style:italic; font-size:17px; line-height:1.5; color:var(--text-muted); }
.tri .arrow-link { margin-top:auto; padding-top:8px; font-size:15px; }

/* ---- Disposition « parcours vertical » (.triptych--steps) : repères reliés 1→2→3,
   lit comme des étapes séquentielles plutôt que des colonnes/piliers. Coins droits (charte). */
.triptych--steps { display:flex; flex-direction:column; grid-auto-flow:unset; grid-auto-columns:unset; max-width:720px; margin-inline:auto; }
.triptych--steps .tri { display:grid; grid-template-columns:52px 1fr; column-gap:24px; row-gap:4px; align-items:start; padding:0 0 44px; border:0 !important; position:relative; }
.triptych--steps .tri:last-child { padding-bottom:0; }
/* filet vertical continu derrière la colonne des repères */
.triptych--steps .tri::before { content:""; position:absolute; left:26px; top:6px; bottom:0; width:1px; background:var(--border); }
.triptych--steps .tri:last-child::before { display:none; }
.triptych--steps .tri__top { grid-column:1; grid-row:1 / -1; align-self:start; display:flex; align-items:flex-start; justify-content:center; gap:0; }
/* repère = pastille carrée opaque qui masque le filet */
.triptych--steps .tri__idx { width:52px; height:52px; box-sizing:border-box; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; border:1px solid var(--accent); color:var(--accent); background:var(--surface); font-size:20px; }
.triptych--steps .tri__icon { width:52px; height:52px; box-sizing:border-box; position:relative; z-index:1; padding:12px; border:1px solid var(--border); background:var(--surface); margin:0; }
.triptych--steps .tri__name { grid-column:2; align-self:center; }
.triptych--steps .tri__desc { grid-column:2; }
.triptych--steps .tri .arrow-link { grid-column:2; margin-top:6px; padding-top:0; }

/* =============================================================== PRICING */
.checks { display:flex; flex-direction:column; gap:14px; }
.checks li { display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.45; color:var(--text); }
.checks li::before { content:""; flex:none; width:20px; height:20px; margin-top:2px; background:var(--accent); -webkit-mask:url(../../assets/icons/check-white.svg) center/contain no-repeat; mask:url(../../assets/icons/check-white.svg) center/contain no-repeat; }
.price { display:flex; align-items:baseline; gap:8px; }
.price__amt { font-size:44px; line-height:1; letter-spacing:-.03em; color:var(--heading); }
.price__per { font-size:16px; color:var(--text-muted); }
.rule2 { height:1px; background:var(--border); border:0; margin:4px 0; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
/* `position:relative` sur toutes les cartes : le bandeau est en absolu et
   doit se caler sur SA carte, qu'elle soit mise en avant ou non. */
.plan { position:relative; background:var(--surface); padding:40px 32px; display:flex; flex-direction:column; gap:28px; }
.plan--featured { background:var(--surface-2); box-shadow:0 30px 70px -40px rgba(0,0,0,.45); }
.plan__flag { position:absolute; top:0; right:0; background:var(--accent); color:var(--primary-fg); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:6px 14px; }
.plan__name { font-size:24px; letter-spacing:-.02em; color:var(--heading); }
.plan__intro { font-style:italic; font-size:16px; color:var(--text-muted); min-height:46px; }
/* Grille tarifaire comparable : cartes de hauteur égale, CTA alignés en bas. */
.plans--even { align-items:stretch; }
.plans--even .plan { height:100%; }
.plans--even .plan > .btn { margin-top:auto; }
/* Les actions sont désormais groupées : c'est le groupe qui est poussé en
   bas de carte, pour que les boutons de trois cartes voisines s'alignent
   même quand leurs contenus n'ont pas la même hauteur. */
.plans--even .plan > .plan__actions { margin-top:auto; }
.plan__actions { display:flex; flex-direction:column; gap:10px; }

/* ===== Carte de programme cliquable en entier =====
   Le seul chemin vers le détail d'un programme était un bouton en bas de
   carte, après une liste de points qui pouvait être longue. On étire le lien
   du bouton sur toute la carte : cliquer le titre, le prix ou n'importe quel
   point mène à la page du programme, sans ajouter un second lien que les
   lecteurs d'écran annonceraient en double. */
.plan--link { transition:transform .25s ease, box-shadow .25s ease; }
.plan--link .plan__cta::after { content:""; position:absolute; inset:0; }
.plan--link:hover { transform:translateY(-4px); box-shadow:0 24px 50px -34px rgba(0,0,0,.45); }
.plan--featured.plan--link:hover { box-shadow:0 36px 80px -40px rgba(0,0,0,.5); }
.plan--link:hover .plan__name { color:var(--accent-2); }
/* `focus-within` et non `focus` : c'est le lien à l'intérieur qui reçoit le
   focus clavier, la carte doit néanmoins se signaler. */
.plan--link:focus-within { outline:2px solid var(--accent); outline-offset:4px; }
.plan__name { transition:color .2s ease; }
@media (prefers-reduced-motion:reduce) {
  .plan--link, .plan__name { transition:none; }
  .plan--link:hover { transform:none; }
}

/* Bandeau accompagnement (.pband) — offre transversale sous la grille de formules.
   Couleurs figées en --_bg/--_fg puis héritées par les enfants : le CTA s'inverse
   par rapport AU BANDEAU et non au thème parent (sinon bouton crème sur bandeau
   crème en thème sombre), et les titres n'héritent pas de --heading. */
.pband { --_bg:var(--primary-bg); --_fg:var(--primary-fg); margin-top:16px;
        background:var(--_bg); color:var(--_fg); display:grid; grid-template-columns:1.35fr .85fr; }
.pband h3, .pband p, .pband li, .pband strong { color:inherit; }
.pband__main { padding:48px; display:flex; flex-direction:column; gap:18px; }
.pband__side { padding:48px; display:flex; flex-direction:column; justify-content:center; gap:14px;
              background:rgba(0,0,0,.06); border-left:1px solid color-mix(in srgb, currentColor 22%, transparent); }
.pband__eyebrow { font-size:13px; text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.pband__name { font-size:clamp(30px,3.4vw,40px); line-height:1.1; letter-spacing:-.03em; }
.pband__claim { font-size:20px; font-style:italic; opacity:.92; }
.pband__meta { font-size:14px; opacity:.78; }
.pband__desc { font-size:16px; line-height:1.5; max-width:52ch; opacity:.92; }
.pband__phases { list-style:none; padding:0; margin:2px 0; display:flex; flex-wrap:wrap; gap:10px 22px; counter-reset:ph; }
.pband__phases li { counter-increment:ph; display:flex; align-items:center; gap:9px; font-size:14px; letter-spacing:-.01em; }
.pband__phases li::before { content:counter(ph); flex:none; width:22px; height:22px; display:grid; place-items:center;
                           border:1px solid color-mix(in srgb, currentColor 45%, transparent); font-size:12px; }
.pband__incl { font-size:14px; line-height:1.5; opacity:.86; padding-top:16px;
              border-top:1px solid color-mix(in srgb, currentColor 20%, transparent); }
.pband__cta { display:inline-flex; align-items:center; justify-content:center; padding:14px 22px;
             background:var(--_fg); color:var(--_bg); font-size:16px; transition:transform .2s var(--ease); }
.pband__cta:hover { transform:translateY(-2px); }
.pband__link { color:currentColor; text-decoration:underline; text-underline-offset:4px; font-size:16px; text-align:center; opacity:.9; }
.pband__link:hover { opacity:1; }
.pband__note { font-size:13px; font-style:italic; line-height:1.3; opacity:.75; }
.offer { display:grid; grid-template-columns:1.3fr .9fr; background:var(--surface); overflow:hidden; }
.offer__main { padding:64px; display:flex; flex-direction:column; gap:28px; }
.invert { background:var(--primary-bg); color:var(--primary-fg); padding:64px 48px; display:flex; flex-direction:column; justify-content:center; gap:24px; }
.invert .price__amt, .invert .price__per, .invert .eyebrow { color:var(--primary-fg); }
.invert .eyebrow { opacity:.85; }
.invert .checks li { color:var(--primary-fg); }
.invert .checks li::before { background:var(--primary-fg); }
.invert__note { font-style:italic; font-size:16px; color:var(--primary-fg); opacity:.82; }
.invert__cta { display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; background:var(--primary-fg); color:var(--primary-bg); font-size:16px; transition:transform .2s var(--ease); }
.invert__cta:hover { transform:translateY(-2px); }

/* =========================================================== TESTIMONIALS */
.stars { display:flex; gap:2px; color:var(--accent); }
.stars svg { width:22px; height:22px; }
.avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--taupe)); flex:none; }
/* Repli quand l'avis n'a pas de photo de profil : initiales centrées (jamais de pastille vide). */
.avatar--initial { display:flex; align-items:center; justify-content:center; color:var(--primary-fg); font-size:15px; font-weight:600; line-height:1; letter-spacing:0; }
/* Photo par-dessus les initiales : si l'<img> échoue (onerror), les initiales restent. */
.avatar--photo { position:relative; overflow:hidden; }
.avatar__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.person { display:flex; align-items:center; gap:12px; }
.qmark { font-size:64px; line-height:.5; color:var(--accent); font-style:italic; height:34px; }
/* Guillemet décoratif via CSS (glyphe courbe « " » identique aux maquettes,
   immunisé contre wptexturize qui le transformait en « ‹‹ » sur le front). */
.qmark::before { content:"\201C"; }
.qname { font-size:18px; color:var(--heading); }
.qrole { font-size:14px; color:var(--accent); }
.track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 4px 24px; margin:0 calc(var(--gutter)*-1); padding-inline:var(--gutter); scrollbar-width:none; }
.track::-webkit-scrollbar { display:none; }
.testi { scroll-snap-align:start; flex:0 0 430px; max-width:430px; background:var(--surface); padding:36px 24px; display:flex; flex-direction:column; justify-content:space-between; gap:32px; }
.testi__quote { font-size:16px; line-height:1.5; color:var(--text); }
.testi__foot { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.feature-t { text-align:center; max-width:900px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:32px; }
.feature-t .qmark { font-size:96px; height:54px; }
.feature-t__quote { font-size:clamp(24px,2.8vw,32px); line-height:1.35; letter-spacing:-.02em; color:var(--heading); }
.feature-t__dots { display:flex; gap:8px; margin-top:8px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--border); }
.dot.is-active { background:var(--accent); }
.tgrid { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; }
.quote { background:var(--surface); padding:48px; display:flex; flex-direction:column; gap:28px; }
.quote__text { font-size:24px; line-height:1.45; font-style:italic; color:var(--text); }
.quote--feature .quote__text { font-size:26px; }
.quote__foot { margin-top:auto; display:flex; align-items:center; gap:14px; }
.tstack { display:grid; grid-template-rows:1fr 1fr; gap:24px; }
.tstack .quote { padding:32px; gap:18px; }
.tstack .quote__text { font-size:18px; }
.tstack .qmark { font-size:54px; height:26px; }
.rating { display:flex; align-items:center; gap:14px; padding:14px 20px; background:var(--surface-2); }
.rating strong { font-size:30px; line-height:1; color:var(--heading); }
.rating small { display:block; font-size:13px; color:var(--accent); }
.thead { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:48px; flex-wrap:wrap; }
.thead__title { font-size:clamp(28px,3.4vw,44px); line-height:1.08; letter-spacing:-.04em; max-width:680px; color:var(--heading); }

/* =================================================================== CTA */
.band { text-align:center; padding:84px 0; }
.band .rings { width:980px; height:980px; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.7; }
.band__in { max-width:760px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:24px; }
.band__title { font-size:clamp(30px,3.8vw,46px); line-height:1.12; letter-spacing:-.03em; color:var(--heading); }
.band__buttons { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
/* Bandeau aligné à gauche (ex-interlude) : contenu et boutons calés à gauche. */
.band--left { text-align:left; }
.band--left .band__in { align-items:flex-start; margin-inline:0; }
.band--left .band__buttons, .band--left .blk-actions .wp-block-buttons { justify-content:flex-start; }

/* ---- Boutons WordPress natifs (core/buttons) mappés à la charte ----
   Stylés par "style de bloc" (is-style-*), valable éditeur ET front.
   Sélecteur .wp-block-button .wp-block-button__link (spécificité 0,2,0) pour
   primer sur le CSS de base de core/button. Réutilise les tokens sémantiques de
   themes.css → theme-aware comme .btn--primary/.btn--secondary. Défaut = primaire. */
.wp-block-buttons { display:flex; flex-wrap:wrap; gap:16px; margin:0; }
.wp-block-button { margin:0; }
.wp-block-button .wp-block-button__link {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:16px 28px; font-size:18px; line-height:1.1;
  border:1px solid transparent; border-radius:0;
  background:var(--primary-bg); color:var(--primary-fg);
  text-decoration:none; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wp-block-button .wp-block-button__link:hover { transform:translateY(-2px); background:var(--primary-bg-h); }
.wp-block-button.is-style-secondary .wp-block-button__link { background:var(--secondary-bg); color:var(--secondary-fg); border-color:var(--secondary-bd); }
.wp-block-button.is-style-secondary .wp-block-button__link:hover { background:var(--secondary-bg-h); }
.wp-block-button.is-style-terracotta .wp-block-button__link { background:var(--terracotta); color:var(--cream); border-color:transparent; }
.wp-block-button.is-style-terracotta .wp-block-button__link:hover { background:var(--terracotta-deep); }
.wp-block-button.is-style-cream .wp-block-button__link { background:var(--cream); color:var(--green-deep); border-color:transparent; }
.wp-block-button.is-style-cream .wp-block-button__link:hover { box-shadow:0 12px 30px -14px rgba(0,0,0,.45); }
.wp-block-button.is-style-outline .wp-block-button__link { background:transparent; border-color:var(--line-terra); color:var(--terracotta-deep); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background:var(--terracotta-tint); border-color:var(--terracotta); }
/* Zone de contenu/boutons des sections (hero, cta) : flux bloc, centrée en contexte centré. */
.blk-actions { margin-top:var(--s-3); }
.blk-actions > :first-child { margin-top:0; }
.page-hero .blk-actions .wp-block-buttons, .band .blk-actions .wp-block-buttons { justify-content:center; }

/* ---- Citations WordPress natives (core/quote, core/pullquote) à la charte ----
   Pour les citations insérées dans les zones de contenu riche (éditeur + front). */
.wp-block-quote {
  border:0; border-left:3px solid var(--terracotta);
  margin:1.6em 0; padding:4px 0 4px 26px;
  font-style:italic; color:var(--heading);
  font-size:clamp(20px,2.2vw,26px); line-height:1.42;
}
.wp-block-quote > p { margin:0 0 .35em; }
.wp-block-quote cite, .wp-block-quote .wp-block-quote__citation {
  display:block; font-style:normal; font-size:15px; color:var(--text-muted); margin-top:10px;
}
.wp-block-pullquote {
  border:0; border-top:2px solid var(--line-terra); border-bottom:2px solid var(--line-terra);
  padding:30px 0; margin:2em 0; text-align:center; background:transparent;
}
.wp-block-pullquote blockquote, .wp-block-pullquote p {
  font-style:italic; color:var(--heading);
  font-size:clamp(24px,3vw,34px); line-height:1.3; letter-spacing:-.01em;
}
.wp-block-pullquote cite { display:block; font-style:normal; font-size:15px; color:var(--text-muted); margin-top:12px; }
.theme-dark .wp-block-quote, .theme-image .wp-block-quote, .theme-terracotta .wp-block-quote { border-left-color:var(--accent); }

/* ---- Avis OcoBoard Reviews dans le carrousel témoignages ---- */
.testi__stars { color:var(--accent); font-size:15px; letter-spacing:3px; margin-bottom:12px; }
.testi .avatar { background-size:cover; background-position:center; background-repeat:no-repeat; }
.reviews-summary { margin-top:14px; font-size:18px; color:var(--text); }
.reviews-summary span { color:var(--accent); }
.feature-t .avatar { background-size:cover; background-position:center; background-repeat:no-repeat; }
.feature-t__stars { color:var(--accent); font-size:18px; letter-spacing:4px; margin:18px 0 4px; }

.csplit { padding:96px 0; }
.csplit.theme-image > .theme-bg::after { background:linear-gradient(90deg, rgba(40,38,30,.8) 0%, rgba(40,38,30,.5) 55%, rgba(40,38,30,.35) 100%); }
.csplit__grid { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:flex-end; }
.csplit__title { font-size:clamp(30px,3.8vw,48px); line-height:1.05; letter-spacing:-.03em; color:var(--heading); }
.cform { display:flex; flex-direction:column; gap:20px; }
.cform__row { display:flex; gap:16px; }
.cform__notes { display:flex; flex-wrap:wrap; gap:16px; }
.news { padding:84px 0; }
.news__panel { position:relative; overflow:hidden; max-width:920px; margin:0 auto; background:var(--surface); padding:64px 72px; text-align:center; }
.news__wave { display:flex; align-items:flex-end; justify-content:center; gap:5px; height:40px; margin-bottom:28px; }
.news__wave span { width:4px; background:var(--accent); opacity:.8; animation:nwave 1.6s ease-in-out infinite; }
@keyframes nwave { 0%,100%{ height:8px } 50%{ height:34px } }
.news__title { font-size:clamp(28px,3.4vw,40px); line-height:1.08; letter-spacing:-.035em; margin-bottom:16px; color:var(--heading); }
.news__lead { font-size:19px; line-height:1.55; max-width:560px; margin:0 auto 32px; color:var(--text-muted); }
.news__form { display:flex; gap:12px; max-width:540px; margin:0 auto; }
.news__notes { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.news__note { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--accent); }
.news__note svg { width:18px; height:18px; }

/* ============================================ Navigation : sous-menus ===
   « Approche » porte trois enfants (Hypnose, EMDR, Breathwork). Ils étaient
   définis en base et supprimés au rendu par `depth => 1` — l'arborescence
   existait et ne s'affichait nulle part.

   Pas de mega menu : il se justifie quand une rubrique a beaucoup d'enfants
   qu'on parcourt. Trois liens n'en demandent pas un — et il ajouterait une
   couche d'interaction, une surface d'accessibilité et de la complexité
   mobile pour rien. */
.nav__links > li { position:relative; }
/* Le panneau descend de 22px sous l'entrée : collé, il se lisait comme la
   suite du libellé et non comme un volet distinct.

   Ces 22px sont un PONT TRANSPARENT, pas une marge : la règle d'ouverture
   est `li:hover > .sub-menu`, et un écart vide entre l'entrée et le panneau
   ferait sortir la souris de la zone de survol en chemin — le volet se
   refermerait avant d'être atteint. Le pont fait partie du `padding` du
   panneau, donc du survol ; l'habillage visible est porté par `::before`,
   qui commence là où le pont finit. */
.nav__links .sub-menu {
  position:absolute; top:100%; left:-16px; z-index:60;
  list-style:none; margin:0; padding:22px 0 10px;
  min-width:200px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__links .sub-menu::before {
  content:""; position:absolute; z-index:-1; inset:22px 0 0;
  background:var(--surface, #FDF9F2);
  border:1px solid var(--border-soft, rgba(62,58,54,.12));
  box-shadow:0 24px 48px -30px rgba(0,0,0,.4);
}
.nav__links .sub-menu > li:first-child { padding-top:8px; }
.nav__links .sub-menu > li:last-child { padding-bottom:2px; }
/* `focus-within` autant que `hover` : sans lui le sous-menu est inatteignable
   au clavier, ce qui revient à ne pas avoir de sous-menu du tout. */
.nav__links > li:hover > .sub-menu,
.nav__links > li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav__links .sub-menu a { display:block; padding:9px 20px; font-size:15px; white-space:nowrap; color:var(--ink, #3e3a36); }
.nav__links .sub-menu a::after { display:none; }
.nav__links .sub-menu a:hover { background:var(--surface-2, rgba(62,58,54,.05)); color:var(--terracotta, #a8582e); }
/* Chevron discret sur le parent, pour que rien ne se cache.
   DANS la réserve du lien (`right:2px` + `padding-right:16px`), pas au-delà :
   posé en dehors, il tombait dans l'écart qui suit et se lisait comme le
   chevron de l'entrée SUIVANTE. */
.nav__links > li.menu-item-has-children > a { padding-right:16px; }
.nav__links > li.menu-item-has-children > a::before {
  content:""; position:absolute; right:2px; top:50%; width:5px; height:5px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); opacity:.55;
  transition:transform .2s var(--ease);
}
.nav__links > li.menu-item-has-children:hover > a::before,
.nav__links > li.menu-item-has-children:focus-within > a::before { transform:translateY(-30%) rotate(225deg); }
/* Le soulignement au survol s'arrête avant le chevron. */
.nav__links > li.menu-item-has-children > a:hover::after { width:calc(100% - 16px); }

/* Dernière ligne du sous-menu : « Toutes les approches », « Tous les
   programmes ». Dans un menu déroulant, la page du PARENT devient difficile
   à atteindre — survoler ouvre la liste, et rien ne dit qu'« Approche » est
   aussi une page. Ce lien le dit, en terracotta et avec une flèche, pour se
   distinguer des enfants sans devenir un enfant de plus. */
.nav__links .sub-menu .sub-menu__all { margin-top:6px; border-top:1px solid var(--border-soft, rgba(62,58,54,.12)); padding-top:6px; }
.nav__links .sub-menu .sub-menu__all > a {
  /* La flèche est posée en absolu DANS la réserve de droite, elle ne
     participe pas à la largeur. En élément de flex, elle poussait le contenu
     à 198px pour un panneau qui se calait à 190 (sa `min-width`) : la flèche
     débordait du cadre. Une largeur qui dépend d'un pseudo-élément est une
     largeur qu'on ne contrôle pas. */
  position:relative; display:block; padding-right:38px;
  color:var(--terracotta, #a8582e); font-weight:600;
}
/* Flèche : le caractère plutôt qu'un tracé CSS. Les flèches en `border` ou
   en `box-shadow` demandent d'aligner au demi-pixel une hampe et une pointe
   dessinées séparément — elles se décalent dès que la taille de police
   change. Le caractère suit le texte, à toutes les tailles. Le décalage au
   survol reprend celui de `.arrow-link` du thème. */
.nav__links .sub-menu .sub-menu__all > a::after {
  /* `display` explicite : la règle qui neutralise le soulignement des liens
     du sous-menu (`.nav__links .sub-menu a::after { display:none }`) reste
     en vigueur ici — elle ne porte pas sur le même `content`, mais elle
     masquait la flèche. Un `content` posé sur un pseudo-élément caché ne
     s'affiche pas et ne prend aucune largeur : mesuré à 0px. */
  /* `left:auto` explicite : la règle de soulignement des liens de la barre
     (`.nav__links a::after`) pose `left:0`. Avec `left:0` ET `right:18px`,
     la boîte s'étire d'un bord à l'autre et le caractère se rend au DÉBUT —
     la flèche apparaissait à gauche du libellé. */
  content:"→"; display:block; position:absolute; left:auto; right:18px; top:50%;
  width:auto; height:auto; background:none;
  font-size:15px; line-height:1; transform:translateY(-50%);
  transition:transform .25s var(--ease);
}
.nav__links .sub-menu .sub-menu__all > a:hover { background:transparent; }
.nav__links .sub-menu .sub-menu__all > a:hover::after { transform:translateY(-50%) translateX(4px); }

/* La barre porte six entrées depuis l'ajout d'Événements. Elles n'entrent
   pas partout : largeurs MESURÉES en place, pas estimées.

     styles par défaut ....... 1069px de contenu
     resserrage moyen ........  983px
     resserrage serré ........  908px

   Le budget disponible, c'est la fenêtre moins deux gouttières — et la
   gouttière passe de 96 à 56px sous 1180px (voir system.css), ce qui fait
   des paliers non linéaires. D'où trois seuils plutôt qu'un :

     >= 1341px ....... styles par défaut  (besoin 1077, budget 1149+, marge 72)
     1241 - 1340 ..... resserrage moyen   (besoin  991, budget 1049-1148, marge 58)
     1081 - 1240 ..... resserrage serré   (besoin  917, budget  969-1048, marge 52)
     <= 1080px ....... menu plein écran

   Les bornes suivent les marges, pas les chiffres ronds : le palier moyen
   commençait d'abord à 1181px, où il ne restait que 6px de marge — de quoi
   déborder au premier rendu de police un peu différent. Les chiffres
   ci-dessus intègrent les DEUX chevrons (Approche et Programmes), qui
   coûtent 8px chacun : ajouter un sous-menu déplace les seuils, il faut
   remesurer.

   Le point de bascule vers le menu burger est donc remonté de 900 à 1080px :
   en dessous, six entrées ne tiennent qu'en réduisant le texte à une taille
   qui ne se lit plus. */
@media (max-width:1080px){
  .nav__links { display:none; }
  .nav__toggle { display:flex; }
}
@media (min-width:1081px) and (max-width:1240px){
  .nav__left { gap:16px; }
  .nav__links { gap:11px; font-size:14px; }
  .nav__actions { gap:10px; }
  .nav__account { font-size:14px; }
}
@media (min-width:1241px) and (max-width:1340px){
  .nav__left { gap:22px; }
  .nav__links { gap:16px; font-size:15px; }
  .nav__actions { gap:14px; }
}

/* =================================================================== FAQ */
.faq-list { max-width:820px; }
.faq-item { border-top:1px solid var(--border); }
.faq-item:last-child { border-bottom:1px solid var(--border); }
.faq-q { width:100%; background:none; border:0; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 4px; text-align:left; font-family:inherit; font-size:22px; color:var(--text); letter-spacing:-.01em; line-height:1.3; }
.faq-icon { flex:none; width:28px; height:28px; position:relative; }
.faq-icon::before, .faq-icon::after { content:""; position:absolute; background:var(--accent); left:50%; top:50%; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.faq-icon::before { width:16px; height:2px; transform:translate(-50%,-50%); }
.faq-icon::after { width:2px; height:16px; transform:translate(-50%,-50%); }
.faq-item.is-open .faq-icon::after { transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.faq-a { overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a__inner { padding:0 60px 28px 4px; font-size:18px; line-height:1.65; color:var(--text); }
.faq-a__inner strong { color:var(--accent); }
.faq2 { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.faq2 .faq-list { max-width:none; }
.faq2__aside { position:sticky; top:24px; display:flex; flex-direction:column; gap:20px; }

/* ================================================================ FOOTER */
.ft { padding:72px 0 40px; }
.ft__top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:48px; padding-bottom:40px; }
.ft__brand p { color:var(--text-muted); max-width:300px; line-height:1.6; margin-top:14px; }
.ft h4 { font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:16px; }
.ft li { margin-bottom:10px; }
.ft a { color:var(--text); }
.ft a:hover { color:var(--accent); }
.ft__news p { color:var(--text-muted); }
.ft-mini { display:flex; gap:8px; margin-top:12px; }
.ft-mini .field { flex:1; min-width:0; }
.ft__bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--border); font-size:14px; color:var(--text-muted); }
.ft-social { display:flex; gap:10px; margin-top:18px; }
.ft-social a { width:36px; height:36px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.ft-social a:hover { background:var(--accent); color:var(--bg); }
.ft-social svg { width:18px; height:18px; }

/* =========================================================================
   PATTERNS ENRICHIS (v2) — média, galeries, zigzag, comparatif, interludes
   Ajoutés pour diversifier la mise en page et densifier le visuel.
   ========================================================================= */

/* harmonisation chromatique des photos (unifie la banque vers la DA chaude) */
.ph,
.split__media img, .mcard__media img, .gallery img,
.lsplit__media img, .interlude > .theme-bg img {
  filter:saturate(.86) contrast(1.02) brightness(1.02) sepia(.05);
}

/* zigzag éditorial : empiler des .split, alterner avec .split--rev */
.split--rev .split__media { order:2; }

/* split à média sticky (pages service longues) */
.lsplit { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.lsplit__media { position:sticky; top:104px; overflow:hidden; }
.lsplit__media img { width:100%; height:auto; display:block; }
.lsplit__body { display:flex; flex-direction:column; gap:28px; }
.lsplit__body .prose__body { font-size:19px; }

/* cartes à image (photo en tête) */
.mcards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mcards--2 { grid-template-columns:repeat(2,1fr); }
.mcard { position:relative; overflow:hidden; background:var(--surface); display:flex; flex-direction:column; }
.mcard__media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.mcard__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mcard:hover .mcard__media img { transform:scale(1.04); }
.mcard__tag { position:absolute; left:14px; top:14px; z-index:1; background:var(--bg); color:var(--accent); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; }
.mcard__body { padding:28px 26px; display:flex; flex-direction:column; gap:14px; flex:1; }
.mcard__title { font-size:24px; line-height:1.1; letter-spacing:-.02em; color:var(--heading); }
.mcard__desc { font-size:16px; line-height:1.55; color:var(--text-muted); }
.mcard .arrow-link { margin-top:auto; padding-top:6px; font-size:15px; }

/* galerie / mosaïque d'images */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:12px; }
.gallery figure { margin:0; position:relative; overflow:hidden; }
.gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.gallery figure:hover img { transform:scale(1.06); }
.g-tall { grid-row:span 2; }
.g-wide { grid-column:span 2; }

/* bandeau image intercalé (respiration visuelle) */
.interlude { position:relative; min-height:360px; display:flex; align-items:center; overflow:hidden; }
.interlude > .theme-bg::after { background:linear-gradient(90deg, rgba(40,38,30,.62) 0%, rgba(40,38,30,.3) 60%, rgba(40,38,30,.12) 100%); }
.interlude__in { max-width:600px; display:flex; flex-direction:column; gap:18px; }

/* citation immersive pleine largeur sur photo */
.band.theme-image > .theme-bg::after { background:linear-gradient(180deg, rgba(40,38,30,.74), rgba(40,38,30,.58)); }
.qfull { max-width:920px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:26px; }
.qfull__text { font-size:clamp(26px,3.4vw,42px); line-height:1.28; letter-spacing:-.02em; font-style:italic; color:var(--heading); }
.qfull__by { font-size:16px; color:var(--text-muted); }

/* tableau comparatif (approches) */
.ctable { width:100%; border-collapse:collapse; background:var(--surface); }
.ctable th, .ctable td { padding:18px 22px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.ctable thead th { background:var(--surface-2); font-size:20px; letter-spacing:-.02em; color:var(--heading); font-weight:400; }
.ctable thead th:first-child { background:transparent; }
.ctable tbody th { font-size:15px; color:var(--text-muted); font-weight:400; white-space:nowrap; }
.ctable td { font-size:16px; line-height:1.5; color:var(--text); }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom:0; }

/* responsive des patterns v2 */
@media (max-width:980px){
  .split--rev .split__media { order:0; }
  .lsplit { grid-template-columns:1fr; gap:36px; }
  .lsplit__media { position:static; }
  .mcards { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .ctable { display:block; overflow-x:auto; white-space:nowrap; }
}
@media (max-width:620px){
  .mcards, .mcards--2 { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr 1fr; grid-auto-rows:140px; }
  .g-wide, .g-tall { grid-column:auto; grid-row:auto; }
  .interlude__in { max-width:none; }
}

/* =========================================================================
   INTERACTIONS — survol des cartes + transitions de page
   ========================================================================= */

/* survol des cartes : léger soulèvement + ombre douce (le transform se compose
   avec le translate/scale individuels que pose GSAP, donc pas de conflit) */
.mcard, .card, .tile, .plan, .testi, .quote {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mcard:hover, .card:hover, .plan:hover, .testi:hover, .quote:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 55px -34px rgba(62,58,54,.45);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(62,58,54,.4); }

/* quand GSAP est actif : le bloc reveal est rendu visible par CSS (GSAP n'anime
   que les enfants, sans transform inline sur le bloc → le :hover reste libre) */
.is-motion .reveal { opacity: 1; translate: 0 0; transition: none; }
.is-motion .mcard, .is-motion .card, .is-motion .tile,
.is-motion .plan, .is-motion .testi, .is-motion .quote {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.is-motion .mcard:hover, .is-motion .card:hover, .is-motion .plan:hover,
.is-motion .testi:hover, .is-motion .quote:hover {
  transform: translateY(-6px); box-shadow: 0 28px 55px -34px rgba(62,58,54,.45);
}
.is-motion .tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(62,58,54,.4); }

/* overlay de transition de page (positionné/animé par motion.js) */
.page-transition {
  position:fixed; inset:0; z-index:9999;
  background:var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.page-transition__mark {
  color:var(--cream); font-size:clamp(20px,3vw,30px); letter-spacing:.02em;
}
@media (prefers-reduced-motion: reduce) {
  .page-transition { display:none; }
  .mcard, .card, .tile, .plan, .testi, .quote { transition: none; }
}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .csplit__grid { gap:56px; }
}
@media (max-width:980px){
  .split { grid-template-columns:1fr; }
  .split__media { min-height:360px; }
  .split__content { padding:64px var(--gutter); }
  .prose { max-width:none; gap:40px; }
  .editorial__grid { grid-template-columns:1fr; gap:40px; }
  .stat-rail { grid-template-columns:1fr; }
  .stat-rail__item + .stat-rail__item { border-left:0; border-top:1px solid var(--border); }
  .doodle { display:none; }
  .axis__grid { grid-template-columns:1fr; gap:40px; }
  .cards { grid-template-columns:1fr; }
  .bento { grid-template-columns:1fr 1fr; }
  .tile--feature { grid-row:auto; grid-column:span 2; }
  .tile--wide { grid-column:span 2; }
  .triptych { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; }
  .tri { padding:32px 0; }
  .tri + .tri { border-left:0; border-top:1px solid var(--border); }
  .triptych--steps .tri + .tri { border-top:0; }
  .plans { grid-template-columns:1fr; }
  .offer { grid-template-columns:1fr; }
  .offer__main { padding:48px var(--gutter); }
  .pband { grid-template-columns:1fr; }
  .pband__main, .pband__side { padding:36px var(--gutter); }
  .pband__side { border-left:0; border-top:1px solid color-mix(in srgb, currentColor 22%, transparent); }
  .tgrid { grid-template-columns:1fr; }
  .quote { padding:36px; }
}
@media (max-width:900px){
  .nav__links { display:none; }
  .nav__toggle { display:flex; }
  .util__list .hide-m { display:none; }
  .faq2 { grid-template-columns:1fr; gap:40px; }
  .faq2__aside { position:static; }
  .csplit__grid { grid-template-columns:1fr; gap:40px; align-items:stretch; }
  .cform__row { flex-direction:column; }
  .news__form { flex-direction:column; }
  .news__panel { padding:48px 28px; }
  .ft__top { grid-template-columns:1fr 1fr; }
  .ft__brand, .ft__news { grid-column:1 / -1; }
}
@media (max-width:620px){
  .hero { min-height:0; }
  .hero--full { min-height:0; }
  .hero__inner { padding-block:96px 64px; gap:40px; }
  .hero--full .hero__inner { padding-top:calc(var(--header-h) + 56px); }
  .trust { grid-template-columns:1fr; }
  .hero-c { padding:96px 0 72px; }
  .bento { grid-template-columns:1fr; }
  .tile--feature, .tile--wide { grid-column:auto; }
  .ft__top { grid-template-columns:1fr; }
}

/* ===== Ajouts thème WP : formulaire contact + prose légale ===== */
.cfield { width:100%; min-width:0; font-family:inherit; font-size:16px; color:var(--ink); padding:14px 16px; background:#fff; border:1px solid var(--taupe); }
.cfield:focus-visible { outline:2px solid var(--green); outline-offset:0; border-color:var(--green); }
textarea.cfield { min-height:130px; resize:vertical; line-height:1.5; }

/* ===== Formulaires : consentement et messages de retour =====
   Tout est exprimé en jetons de thème (--text, --text-muted, --surface,
   --accent, --border) : les mêmes règles tiennent sur crème, blanc, olive
   sombre et terracotta sans une seule surcharge par variante. */
/* `--text` et non `--text-muted` : une mention de consentement n'a pas à être
   la ligne la moins lisible de la page. Sur le panneau terracotta, cela fait
   passer ce texte de 3,3:1 à 3,9:1 — le maximum qu'offre ce fond. */
/* Repli sur `--ink` : hors des sections `.theme-*` (la page de création de
   compte, qui vit dans l'app-shell), `--text` n'est pas défini. */
.form-check { display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-small); line-height:1.45; color:var(--text, var(--ink)); cursor:pointer; text-align:left; }
.form-check input { flex:none; width:17px; height:17px; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
/* Le panneau newsletter aligne champ + bouton sur une ligne : la case et le
   message passent à la ligne suivante en pleine largeur, sans sortir du
   formulaire — une case posée à côté ne serait jamais soumise. */
.news__form { flex-wrap:wrap; }
/* Le champ garde sa base de 240px : sans elle, `wrap` le laisse prendre toute
   la ligne et renvoie le bouton en dessous. */
.news__form > .field { flex:1 1 240px; min-width:0; }
.news__form > .form-check, .news__form > .form-msg { flex-basis:100%; margin-top:2px; }

.form-msg { --form-line:var(--accent); margin-top:14px; padding:12px 14px; border-left:2px solid var(--form-line); background:var(--surface); color:var(--text); font-size:var(--fs-small); line-height:1.45; text-align:left; }
/* Rouge sourd sur fonds clairs ; sur olive et terracotta il tomberait sous le
   seuil de lisibilité, d'où la version pâle. */
.form-msg--ko { --form-line:#b3261e; }
.theme-dark .form-msg--ko, .theme-image .form-msg--ko, .theme-terracotta .form-msg--ko { --form-line:#ffb4a8; }
.legal { max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.legal h2 { font-size:24px; letter-spacing:-.02em; color:var(--heading); margin-top:24px; }
.legal h2:first-child { margin-top:0; }
.legal p, .legal li { font-size:16px; line-height:1.7; color:var(--text); }
.legal ul { padding-left:20px; list-style:disc; }
.legal a { color:var(--accent); }
/* Mention légale restant à compléter. Signalée visuellement pour qu'elle ne se
   fonde pas dans le texte : ces pages sont mises en ligne AVANT d'avoir toutes
   les informations obligatoires (statut, SIRET, médiateur…). */
.legal mark.a-completer {
  background:rgba(168,88,46,.10); color:var(--terracotta-deep);
  padding:1px 5px; font-style:italic; box-decoration-break:clone;
}
/* Tableaux des pages légales (barème d'annulation, sous-traitants…) : le style
   par défaut de WordPress cerne chaque cellule d'un trait plein, trop lourd
   pour ces pages. On garde de simples filets horizontaux. */
.legal table { width:100%; border-collapse:collapse; margin:6px 0 10px; }
.legal thead th {
  text-align:left; font-weight:600; font-size:14px; letter-spacing:.02em;
  color:var(--heading); padding:10px 12px 10px 0;
  border-bottom:1px solid var(--taupe); border-top:0; border-left:0; border-right:0;
}
.legal tbody td {
  font-size:15px; line-height:1.6; color:var(--text); padding:10px 12px 10px 0;
  vertical-align:top; border:0; border-bottom:1px solid var(--line-soft, rgba(0,0,0,.08));
}
.legal tbody tr:last-child td { border-bottom:0; }
.legal td:last-child, .legal th:last-child { padding-right:0; }
@media (max-width:620px){
  .legal table, .legal thead, .legal tbody, .legal tr, .legal td, .legal th { display:block; }
  .legal thead { display:none; }
  .legal tbody tr { padding:10px 0; border-bottom:1px solid var(--line-soft, rgba(0,0,0,.08)); }
  .legal tbody td { padding:2px 0; border:0; }
  .legal tbody td:first-child { font-weight:600; color:var(--heading); }
}

/* ===== Hero plein écran « image claire » — image de fond SANS voile sombre ===== */
.hero-photo--light > .theme-bg { display:block; }
.hero-photo--light > .theme-bg::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(253,249,242,.94) 0%, rgba(253,249,242,.66) 38%, rgba(253,249,242,.18) 62%, rgba(253,249,242,0) 82%);
}
@media (max-width:780px){
  .hero-photo--light > .theme-bg::after {
    background:linear-gradient(180deg, rgba(253,249,242,.5) 0%, rgba(253,249,242,.85) 55%, rgba(253,249,242,.96) 100%);
  }
}

/* ===== Accessibilité ===== */
/* focus clavier visible et homogène */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 2px;
  border-radius: 0;
}
/* contraste AA des petits libellés olive sur fonds clairs (eyebrow/tag/role/index) */
/* Accents PRINCIPAUX en terracotta (contraste AA sur fond clair) */
.theme-white .eyebrow, .theme-cream .eyebrow,
.theme-white .mcard__tag, .theme-cream .mcard__tag,
.theme-white .tag, .theme-cream .tag,
.theme-white .qrole, .theme-cream .qrole,
.theme-white .news__note, .theme-cream .news__note { color: var(--terracotta-deep); }
/* Olive = accent SECONDAIRE : numéros de triptyque */
.theme-white .tri__idx, .theme-cream .tri__idx { color: #5b6242; }

/* ===== Correctifs (retours client) ===== */
/* Listes à puces dans les contenus longs (le reset global retire les puces) */
.prose__body ul, .lsplit__body ul, .axis__copy ul, .editorial__body ul,
.band__in ul, .interlude__in ul, .manifesto__in ul {
  list-style: disc; padding-left: 1.25em; margin: 10px 0; font-size: inherit;
}
.prose__body ul li, .lsplit__body ul li, .axis__copy ul li, .editorial__body ul li,
.band__in ul li, .interlude__in ul li, .manifesto__in ul li {
  margin-bottom: 8px; line-height: 1.5; padding-left: 4px;
}
.prose__body ul li::marker, .lsplit__body ul li::marker, .axis__copy ul li::marker,
.editorial__body ul li::marker, .band__in ul li::marker { color: var(--accent); }

/* Panneau vert « invert » : ses libellés restent clairs (priorité sur le correctif a11y) */
.theme-white .invert .eyebrow, .theme-cream .invert .eyebrow,
.theme-white .invert .price__amt, .theme-cream .invert .price__amt,
.theme-white .invert .price__per, .theme-cream .invert .price__per { color: var(--primary-fg); }

/* Champ newsletter lisible sur fonds sombres / image (pied de page, CTA) */
.theme-dark .field, .theme-image .field {
  background: rgba(253,249,242,.16); border-color: rgba(253,249,242,.45); color: var(--cream);
}
.theme-dark .field::placeholder, .theme-image .field::placeholder { color: rgba(253,249,242,.6); }

/* ===== Palier vedette — aplat terracotta plein ===== */
/* Tous les accents étant déjà terracotta, le palier central se distingue par un
   APLAT terracotta plein (texte crème) ; les paliers latéraux restent clairs. */
.theme-white .plan--featured, .theme-cream .plan--featured, .theme-cream-warm .plan--featured {
  background: var(--terracotta); color: var(--cream); border-color: transparent;
  box-shadow: 0 38px 70px -42px rgba(168,88,46,.7);
  --primary-bg: var(--cream); --primary-fg: var(--terracotta); --primary-bg-h: #ffffff;
  /* La carte est un îlot terracotta dans une section claire : les jetons de
     bouton doivent s'inverser AVEC elle. Seuls ceux du bouton primaire
     l'étaient — tant qu'une carte vedette n'avait qu'une action, le trou ne
     se voyait pas. Une seconde action l'a révélé : olive #646B51 sur
     terracotta #A8582E, soit un contraste de 1,5:1 quand la norme AA en
     demande 4,5. Mêmes valeurs que `.theme-terracotta`. */
  --secondary-bg: rgba(255,255,255,.14); --secondary-fg: var(--cream);
  --secondary-bd: rgba(255,255,255,.5); --secondary-bg-h: rgba(255,255,255,.26);
}
.theme-white .plan--featured .plan__name, .theme-cream .plan--featured .plan__name,
.theme-white .plan--featured .price__amt, .theme-cream .plan--featured .price__amt { color: var(--cream); }
.theme-white .plan--featured .plan__intro, .theme-cream .plan--featured .plan__intro,
.theme-white .plan--featured .price__per, .theme-cream .plan--featured .price__per { color: rgba(253,249,242,.82); }
.theme-white .plan--featured .checks li, .theme-cream .plan--featured .checks li { color: rgba(253,249,242,.92); }
.theme-white .plan--featured .checks li::before, .theme-cream .plan--featured .checks li::before { background: var(--cream); }
.theme-white .plan--featured .plan__flag, .theme-cream .plan--featured .plan__flag { background: var(--cream); color: var(--terracotta-deep); }
/* prix : le montant ne se coupe jamais ; le format passe à la ligne si trop long */
.price { flex-wrap: wrap; }
.price__amt { white-space: nowrap; }
/* Filet supérieur chaud sur le panneau newsletter en accent warm */
.theme-cream-warm .news__wave span, .theme-white-warm .news__wave span { background: var(--terracotta); }

/* ===== Sections pleine largeur : flush (pas de gap inter-blocs WP) ===== */
/* WordPress ajoute --wp--style--block-gap (24px) entre les blocs de premier
   niveau ; nos sections .theme gèrent déjà leur propre padding-block → on
   neutralise le gap au seul niveau PAGE (header/main/footer + sections),
   sans toucher au flow interne des contenus (ex. paragraphes de ib/prose). */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
/* les sections sont des enfants directs de .wp-block-post-content (is-layout-flow) :
   double classe pour primer sur la règle WP :root :where(.is-layout-flow) > * */
.wp-block-post-content.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }

/* ==========================================================================
   Ajustements mobile — relecture sur téléphone.
   Placé en fin de fichier : à spécificité égale, ces règles priment sur les
   media queries plus haut (notamment .split--rev et .split__content).
   ========================================================================== */

/* [2] Sections « image + texte » : en colonne, l'image se plaçait AU-DESSUS du
   titre. On la remonte entre le titre et le corps de texte.
   display:contents fait des enfants de .prose__head des items directs de .split,
   ce qui permet de les ordonner autour de l'image. Le padding, porté jusqu'ici
   par .split__content (dont la boîte disparaît), est reporté sur .split.
   [4] Rail de stats empilé : padding-bottom nul → le texte touchait la bordure
   de l'item suivant. */
@media (max-width:980px){
  .split { display:flex; flex-direction:column; gap:28px; padding:64px var(--gutter); }
  .split__content, .split .prose, .split .prose__head { display:contents; }
  /* Ordre complet : sur-titre → titre → image → texte → citation → gages → boutons.
     Tout enfant doit recevoir un ordre explicite, sinon il retombe à 0 (donc AVANT
     le sur-titre) — c'est ce qui remontait la citation en tête du hero. */
  .split .prose__head > .page-hero__crumb { order:1; }
  .split .prose__head > .eyebrow { order:2; }
  .split .prose__head > h1,
  .split .prose__head > h2,
  .split .prose__head > .h2,
  .split .prose__head > .h2-lg,
  .split .prose__head > .display { order:3; }
  .split .split__media,
  .split--rev .split__media { order:4; min-height:300px; }
  .split .prose__head > .prose__body { order:5; }
  .split .prose__head > .pullquote { order:6; }
  .split .prose > .trust { order:7; }
  .split .prose > .blk-actions,
  .split .prose > .hero__buttons,
  .split .prose > .band__buttons { order:8; }
  .split .prose > .arrow-link { order:9; }

  .stat-rail__item { padding:32px 0; }
  .stat-rail__item:first-child { padding-top:40px; }
}

/* Boutons pleine largeur dès le format mobile — 780px et non 620 : entre les
   deux, deux boutons côte à côte se partageaient une largeur où le libellé
   passait sur deux lignes, et l'un finissait plus haut que l'autre. Un
   bouton pleine largeur se vise sans réfléchir, et c'est le geste le plus
   fréquent sur ces pages.

   Exceptions : les micro-formulaires où le bouton jouxte un champ sur la même
   ligne — l'étirer y casserait la ligne au lieu de la simplifier. */
@media (max-width:780px){
  .btn { width:100%; }
  .ft-mini .btn, .news__form .btn { width:auto; }
  .wp-block-buttons { flex-direction:column; align-items:stretch; gap:12px; }
  .wp-block-button { width:100%; }
  .wp-block-button .wp-block-button__link { width:100%; }
  .band__buttons, .hero__buttons, .hero-c__buttons { flex-direction:column; align-items:stretch; }
  .band__in .blk-actions, .band__in .band__buttons { align-self:stretch; width:100%; }
  /* Le lien fléché n'est pas un bouton : l'étirer lui donnerait un poids
     qu'il n'a pas. */
  .arrow-link { width:auto; }
}

@media (max-width:620px){

  /* [3] Cartes « Les approches » : en une colonne, grid-auto-rows:1fr donnait à
     TOUTES les cartes la hauteur de la plus haute (la carte vedette), d'où un
     grand vide sous le bouton des suivantes. */
  .tile { min-height:0; }
  .bento { grid-auto-rows:auto; }

  /* [5] Témoignages : la première carte doit partir de la marge du site, mais le
     rail doit continuer à déborder vers le bord droit (effet de continuité).
     Le collage au bord venait du scroll-snap, qui alignait la carte sur le
     conteneur de scroll en ignorant son padding : scroll-padding le lui impose. */
  .track { scroll-padding-inline-start:var(--gutter); }
  .testi { flex:0 0 calc(100vw - 6rem); max-width:calc(100vw - 6rem); }

  /* [6] Cartes tarifaires : un peu plus d'air, et un montant moins massif pour
     qu'il tienne sur une ligne avec son unité. */
  .plan { padding:32px 24px; }
  .price__amt { font-size:36px; }

  /* [7] FAQ : le retrait droit de 60px, pensé pour le desktop, écrasait la
     réponse sur un écran étroit. */
  .faq-q { font-size:19px; padding:20px 2px; gap:12px; }
  .faq-a__inner { padding:0 4px 22px 2px; font-size:16px; }
}

/* ==========================================================================
   Menu plein écran (mobile) — panneau .navpanel + bouton .nav__toggle.
   Animations en CSS pur (pas de dépendance JS) : le fond descend, puis les
   liens se révèlent derrière un masque, en cascade.
   ========================================================================== */
.navpanel[hidden] { display:none; }

@media (min-width:1081px){
  .navpanel { display:none !important; }
}

@media (max-width:1080px){
  .navpanel { position:fixed; inset:0; z-index:90; display:flex; overflow:hidden; }

  /* Fond : volet qui descend depuis le haut. */
  .navpanel__bg { position:absolute; inset:0; background:var(--cream);
                  transform:translateY(-100%); transition:transform .55s cubic-bezier(.76,0,.24,1); }
  .navpanel.is-open .navpanel__bg { transform:translateY(0); }

  /* Le retrait haut suit la hauteur RÉELLE du header (bandeau util compris),
     mesurée en JS → le panneau ne passe jamais sous la barre. */
  .navpanel__in { position:relative; z-index:1; width:100%; display:flex; flex-direction:column;
                  justify-content:space-between; gap:40px;
                  padding:calc(var(--header-total, 96px) + 28px) var(--gutter) 40px; }

  /* Liens : masque par ligne (overflow sur le li) + montée du <a>. */
  .navpanel__links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .navpanel__links li { overflow:hidden; border-bottom:1px solid var(--border-soft); }
  .navpanel__links li:first-child { border-top:1px solid var(--border-soft); }
  .navpanel__links a { display:block; padding:16px 0; color:var(--heading);
                       font-size:clamp(26px,7.5vw,38px); line-height:1.15; letter-spacing:-.03em;
                       transform:translateY(110%); opacity:0;
                       transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .45s ease, color .2s ease; }
  .navpanel.is-open .navpanel__links a { transform:translateY(0); opacity:1; }
  .navpanel__links a:active, .navpanel__links a:focus-visible { color:var(--accent); }
  /* Cascade : chaque lien part un cran après le précédent. */
  .navpanel.is-open .navpanel__links li:nth-child(1) a { transition-delay:.20s; }
  .navpanel.is-open .navpanel__links li:nth-child(2) a { transition-delay:.26s; }
  .navpanel.is-open .navpanel__links li:nth-child(3) a { transition-delay:.32s; }
  .navpanel.is-open .navpanel__links li:nth-child(4) a { transition-delay:.38s; }
  .navpanel.is-open .navpanel__links li:nth-child(5) a { transition-delay:.44s; }
  .navpanel.is-open .navpanel__links li:nth-child(6) a { transition-delay:.50s; }
  .navpanel.is-open .navpanel__links li:nth-child(7) a { transition-delay:.56s; }

  /* Pied : CTA + infos pratiques, arrivent en dernier. */
  .navpanel__foot { display:flex; flex-direction:column; gap:14px;
                    opacity:0; transform:translateY(14px);
                    transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
  .navpanel.is-open .navpanel__foot { opacity:1; transform:none; transition-delay:.52s; }
  /* Deux actions dans le pied du menu, et une seule pleine.
     « Prendre rendez-vous » est l'action principale du site — c'est le
     métier, et c'est ce que cherche quelqu'un qui arrive par une recherche
     locale — donc c'est elle qui porte le plein terracotta ; le compte
     gratuit passe en contour. Deux boutons pleins côte à côte se
     disputeraient la hiérarchie et n'en donneraient aucune. */
  .navpanel__cta, .navpanel__second {
    display:flex; align-items:center; justify-content:center; padding:16px 24px;
    font-size:18px; transition:background .2s var(--ease), color .2s var(--ease);
  }
  .navpanel__cta { background:var(--terracotta); color:var(--cream); }
  .navpanel__cta:active { background:var(--terracotta-deep); }
  .navpanel__second { border:1px solid var(--terracotta); color:var(--terracotta); }
  .navpanel__second:active { background:var(--terracotta); color:var(--cream); }
  .navpanel__account { display:block; margin-top:14px; text-align:center; font-size:16px; color:var(--text-muted); }
  .navpanel__meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:14px; color:var(--text-muted); }

  /* Doodle décoratif : discret, jamais cliquable. */
  .navpanel .doodle { z-index:0; opacity:.10; pointer-events:none; }

  /* Bouton : deux traits qui se croisent. */
  .nav__toggle { position:relative; z-index:101; }
  .nav__toggle .nav__burger { position:relative; display:block; width:24px; height:16px; background:transparent; }
  .nav__toggle .nav__burger span { position:absolute; left:0; width:100%; height:2px; background:currentColor;
                                   transition:transform .45s cubic-bezier(.76,0,.24,1); }
  .nav__toggle .nav__burger span:nth-child(1) { top:0; }
  .nav__toggle .nav__burger span:nth-child(2) { bottom:0; }
  .nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { transform:translateY(-7px) rotate(-45deg); }

  /* Menu ouvert : le header s'efface derrière le panneau, mais le bouton reste
     lisible (le panneau est crème, donc texte encre). */
  body.nav-open { overflow:hidden; }
  /* Le panneau est un enfant du header : sans z-index sur la barre, il passerait
     par-dessus le logo. On la fait remonter au-dessus du volet (qui est à 90). */
  body.nav-open .nav { position:relative; z-index:95; }
  /* Fond PLEIN, et non transparent : depuis que le panneau défile, les
     entrées passaient derrière le logo, « Connexion » et la croix, qui se
     retrouvaient posés sur du texte en mouvement. La barre était transparente
     pour laisser voir le volet crème — ce qui n'avait aucun coût tant que
     rien ne bougeait dessous. Même crème que le volet, donc raccord invisible,
     mais opaque : le contenu passe DERRIÈRE. */
  body.nav-open .site-header { background:var(--cream); color:var(--ink);
                               box-shadow:0 1px 0 var(--border-soft);
                               -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* Le bandeau util reste en place à l'ouverture : le masquer retirait 40px de
     hauteur au header et faisait sauter la mise en page. On le rend seulement
     discret, sans le sortir du flux. */
  body.nav-open .site-header .util { background:transparent; color:var(--text-muted); }

  /* Le CTA du header fait doublon avec celui du menu plein écran : sur mobile,
     la barre persistante ne garde que le logo et le bouton menu. L'accès au
     compte, lui, reste visible — c'est le seul chemin vers son espace, et
     l'enfouir sous le menu le rendrait introuvable pour qui vient s'y
     connecter. */
  .nav__cta { display:none; }
  .nav__actions { gap:12px; }
  .nav__account { font-size:15px; }
}

@media (prefers-reduced-motion: reduce){
  .navpanel__bg, .navpanel__links a, .navpanel__foot, .nav__toggle .nav__burger span { transition:none !important; }
}

/* ==========================================================================
   Barre persistante : collée en haut, escamotée quand on descend, ramenée dès
   qu'on remonte. Le décalage porte sur le header entier (bandeau util inclus)
   pour qu'aucun élément ne reste orphelin à l'écran.
   ========================================================================== */
/* WordPress enveloppe le template part dans un <header class="wp-block-template-part">
   dont la hauteur est exactement celle de la barre : un position:sticky posé sur
   .site-header n'a aucune marge pour coller (il ne peut pas dépasser son parent).
   C'est donc ce wrapper qui colle — mais on ne l'anime JAMAIS : sur iOS un élément
   collant est pris en charge par le compositeur du défilement, qui ignore
   l'animation et applique l'état final d'un coup. C'est .site-header, enfant non
   collant, qui glisse. */
header.wp-block-template-part { position:sticky; top:0; z-index:100;
  pointer-events:none; }                        /* la bande laissée par la barre
                                                   escamotée n'intercepte rien */
header.wp-block-template-part > .site-header { pointer-events:auto; }
.site-header--solid { position:relative; }      /* le collage est porté par le wrapper */
/* Sur mobile on retire le flou d'arrière-plan de la barre : WebKit compose ce
   type d'élément dans une couche à part, ce qui fait sauter l'animation de son
   transform. Le fond est déjà opaque à 96 %, la perte visuelle est nulle. */
@media (max-width:900px){
  .site-header--solid, .site-header.is-stuck {
    -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--cream); }
}

/* Glissement joué par la Web Animations API (cf. lib.js) ; cette transition sert
   de repli si l'API manque. Les ancres ne doivent pas atterrir sous la barre. */
.site-header { transition:background .35s var(--ease), box-shadow .35s var(--ease),
               color .35s var(--ease), transform .5s cubic-bezier(.22,1,.36,1);
               will-change:transform; }
.site-header.is-hidden { transform:translateY(-100%); }
/* Menu ouvert : la barre reste en place, sinon on perdrait le bouton de fermeture. */
body.nav-open .site-header { transform:none !important; }
html { scroll-padding-top:calc(var(--header-total, 112px) + 12px); }

@media (prefers-reduced-motion: reduce){
  .site-header { transition:background .35s var(--ease), color .35s var(--ease); }
}

/* ---------------------------------------------------------------- Événements
   Bloc `ib/events` (agenda), en grille de deux colonnes.

   Hiérarchie voulue, du plus lu au moins lu : la DATE (pastille), le TYPE
   (étiquette), le TITRE, le texte, le TARIF, les informations pratiques, le
   bouton. Sans cette gradation toutes les lignes se valent et l'œil n'a nulle
   part où se poser. */
.ib-events .ib-events__list {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px;
  align-items:stretch;
}
/* Un événement seul en demi-largeur aurait l'air d'une grille ratée. */
.ib-events .ib-events__list > .ib-event:only-child { grid-column:1 / -1; max-width:820px; }
@media (max-width:860px) { .ib-events .ib-events__list { grid-template-columns:1fr; } }

.ib-events .ib-event {
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
/* Survol : la carte se soulève à peine. Elle n'est pas cliquable dans son
   ensemble (le bouton l'est), mais elle doit répondre — une carte inerte se
   lit comme une image. */
.ib-events .ib-event:hover {
  border-color:var(--line-terra); box-shadow:0 18px 44px -28px rgba(62,58,54,.5); transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .ib-events .ib-event:hover { transform:none; } }

.ib-events .ib-event__media { position:relative; aspect-ratio:16/9; overflow:hidden; }
.ib-events .ib-event__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.ib-events .ib-event:hover .ib-event__media img { transform:scale(1.03); }

.ib-events .ib-event__body { padding:26px 28px 28px; display:flex; flex-direction:column; align-items:stretch; gap:14px; flex:1; }

/* ---- En-tête : pastille de date + étiquette de type ---- */
.ib-events .ib-event__head { display:flex; align-items:flex-start; gap:16px; }
/* Pastille sur fond blanc. La carte étant déjà sur du crème, il faut un
   filet pour que le blanc se lise comme un cartouche et non comme un trou. */
.ib-events .ib-event__date {
  flex:0 0 auto; margin:0; width:60px; padding:8px 0 10px;
  text-align:center; line-height:1;
  background:#fff; border:1px solid var(--line-terra);
}
.ib-events .ib-event__day { display:block; font-family:var(--font-display); font-size:28px; letter-spacing:-.03em; color:var(--terracotta-deep); }
.ib-events .ib-event__month { display:block; margin-top:3px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.ib-events .ib-event__headings { display:flex; flex-direction:column; gap:6px; padding-top:2px; min-width:0; }
.ib-events .ib-event__badge {
  align-self:flex-start; padding:4px 10px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--terracotta-deep); background:var(--terracotta-tint, rgba(168,88,46,.10));
}
/* En cours : l'olive du thème plutôt que la terracotta des types, pour que
   l'état se distingue d'une étiquette de catégorie au premier coup d'œil. */
.ib-events .ib-event__badge--live { color:var(--green-deep); background:rgba(129,139,105,.14); }
.ib-events .ib-event__when { margin:0; font-size:14px; color:var(--text-muted); }
.ib-events .ib-event__when::first-letter { text-transform:uppercase; }

/* ---- Corps ---- */
.ib-events .ib-event__title { margin:0; font-size:clamp(20px,1.9vw,24px); line-height:1.22; letter-spacing:-.022em; }
.ib-events .ib-event__text { margin:0; color:var(--text-muted); line-height:1.6; }

/* ---- Pied : tarif mis en avant, puis pratique, puis bouton ---- */
.ib-events .ib-event__foot { margin-top:auto; display:flex; flex-direction:column; gap:16px; padding-top:18px; border-top:1px solid var(--border); }
.ib-events .ib-event__meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.ib-events .ib-event__price { margin:0; font-family:var(--font-display); font-size:20px; letter-spacing:-.02em; color:var(--terracotta-deep); }
.ib-events .ib-event__facts { list-style:none; display:flex; flex-wrap:wrap; gap:4px 0; margin:0; padding:0; font-size:14px; color:var(--text-muted); }
.ib-events .ib-event__facts li + li::before { content:"·"; margin:0 8px; color:var(--border); }
.ib-events .ib-event__cta { align-self:flex-start; }

.ib-events__empty { text-align:center; max-width:56ch; margin-inline:auto; padding:48px 24px; }
.ib-events__empty-title { font-family:var(--font-display); font-size:clamp(20px,2.4vw,26px); line-height:1.25; letter-spacing:-.02em; margin:0 0 12px; }
.ib-events__empty-text { color:var(--text-muted); line-height:1.6; margin:0 0 24px; }


/* ============================================== Rendez-vous (Calendly) ===
   Le calendrier est le widget officiel : il annonce sa hauteur et le script
   l'applique au conteneur (`data-resize`). On ne lui impose donc AUCUNE
   hauteur en CSS — ce serait rétablir l'ascenseur interne qu'on vient de
   supprimer. La hauteur inline du HTML n'est qu'un point de départ, avant
   la première réponse de Calendly. */
.cal { padding:96px 0; }
.cal__grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.cal__title { font-size:clamp(30px,3.8vw,48px); line-height:1.05; letter-spacing:-.03em; margin:0 0 20px; color:var(--heading); }
.cal__text .lead { margin:0 0 24px; }
.cal__head { max-width:62ch; margin:0 auto 40px; text-align:center; }
.cal__head .cal__title { margin-inline:auto; }
.cal__head--popup { margin-bottom:0; }

/* Repères : mêmes coches que la page de vente des formations, pour que le
   même type d'information se lise pareil d'un bout à l'autre du site. */
.cal__points { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:10px; }
.cal__points li { position:relative; padding-left:28px; line-height:1.5; color:var(--text); }
.cal__points li::before {
  content:""; position:absolute; left:0; top:.45em; width:14px; height:9px;
  border-left:2px solid var(--terracotta); border-bottom:2px solid var(--terracotta);
  transform:rotate(-45deg);
}
.cal__head .cal__points { align-items:center; }
.cal__head .cal__points li { text-align:left; }

.cal__cta { margin:0 0 8px; }
.cal__head .cal__cta { display:flex; justify-content:center; }
.cal__note { margin:16px 0 0; font-size:14px; color:var(--text-muted); }
.cal__head + .cal__widget { margin-inline:auto; }
.cal--full .cal__note { text-align:center; }

/* Le widget pose son propre fond blanc ; le cadre discret l'ancre dans la
   page sans l'enfermer. Pas d'`overflow:hidden` : Calendly ouvre ses menus
   de fuseau horaire à l'intérieur, ils seraient rognés. */
.cal__widget { min-width:320px; border:1px solid var(--border); background:var(--surface); }
.cal--split .cal__side { position:relative; }

/* Aperçu dans l'éditeur : Calendly n'y est pas chargé (plusieurs secondes à
   chaque frappe pour un agenda que personne n'y consulte). */
.cal__widget--placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--text-muted); font-size:15px; text-align:center; padding:24px;
}
.cal__placeholder-url { font-size:13px; opacity:.7; word-break:break-all; }

/* Recours quand le calendrier ne démarre pas (révélé par calendly.js). */
.cal__fallback { margin:14px 0 0; font-size:14px; color:var(--text-muted); }
.cal__fallback a { color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; }
.cal--full .cal__fallback, .cal__head + .cal__fallback { text-align:center; }

@media (max-width:1100px){
  .cal__grid { gap:48px; }
}
@media (max-width:900px){
  .cal { padding:72px 0; }
  /* En une colonne, le calendrier passe SOUS le texte : on lit d'abord ce
     qu'on réserve, on réserve ensuite. */
  .cal__grid { grid-template-columns:1fr; gap:36px; }
}


/* ================================ Sous-menu du menu plein écran (mobile) ===
   Déclaré EN FIN DE FICHIER à dessein : les règles de `.navpanel__links`
   vivent plus haut, et à spécificité égale c'est la dernière déclarée qui
   gagne. Placé avant elles, `overflow:visible` était repris par le
   `overflow:hidden` du masque de ligne, et le sous-menu restait invisible. */
@media (max-width:1080px){
  /* Une ligne par enfant. En ligne côte à côte, trois libellés de longueurs
     différentes formaient un pavé qu'on relit deux fois avant d'y repérer le
     sien ; en colonne, l'œil descend une seule liste. */
  .navpanel__links .sub-menu {
    list-style:none; margin:0 0 18px; padding:0 0 0 2px;
    display:flex; flex-direction:column; gap:2px;
  }
  .navpanel__links .sub-menu li { border:0; overflow:visible; }
  .navpanel__links .sub-menu li:first-child { border-top:0; }
  .navpanel__links .sub-menu a {
    display:block; padding:7px 0; font-size:19px; line-height:1.3; letter-spacing:-.01em;
    color:var(--text-muted); transform:none; opacity:1;
  }
  /* Accordéon : le sous-menu est replié par `hidden` (posé en JS). Il faut
     le dire en CSS — `.sub-menu { display:flex }` bat l'affichage par défaut
     de l'attribut `hidden`, et le sous-menu resterait visible. */
  .navpanel__links .sub-menu[hidden] { display:none; }

  /* Rubrique à sous-menu : toute la ligne déplie. Le bouton reprend la
     typographie des autres entrées — c'est la même liste, seul le geste
     change — et occupe toute la largeur, donc toute la ligne est une cible. */
  .navpanel__links .navpanel__parent {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    width:100%; padding:16px 0; background:none; border:0; text-align:left;
    font-family:inherit; font-size:clamp(26px,7.5vw,38px); line-height:1.15;
    letter-spacing:-.03em; color:var(--heading); cursor:pointer;
    transform:translateY(110%); opacity:0;
    transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .45s ease, color .2s ease;
  }
  .navpanel.is-open .navpanel__links .navpanel__parent { transform:translateY(0); opacity:1; }
  .navpanel__links .navpanel__parent[aria-expanded="true"] { color:var(--terracotta); }
  .navpanel__links .navpanel__parent-chevron {
    flex:none; width:11px; height:11px; margin-right:6px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:translateY(-25%) rotate(45deg);
    transition:transform .28s var(--ease);
  }
  .navpanel__links .navpanel__parent[aria-expanded="true"] .navpanel__parent-chevron {
    transform:translateY(15%) rotate(225deg);
  }
  /* Le masque de ligne doit englober le bouton comme il englobait le lien. */
  .navpanel__links li.menu-item-has-children { overflow:hidden; }
  .navpanel__links li.menu-item-has-children:has(.sub-menu:not([hidden])) { overflow:visible; }

  /* « Toutes les approches → » : c'est LA ligne qui mène à la page de la
     rubrique, puisque le libellé du dessus ne fait plus que déplier. Elle est
     donc en terracotta et détachée du groupe, pas noyée dans les enfants. */
  .navpanel__links .sub-menu .sub-menu__all { margin-top:6px; }
  .navpanel__links .sub-menu .sub-menu__all > a {
    display:inline-flex; align-items:center; gap:9px;
    color:var(--terracotta); font-weight:600;
  }
  .navpanel__links .sub-menu .sub-menu__all > a::after { content:"→"; font-size:16px; line-height:1; }
  .navpanel.is-open .navpanel__links .sub-menu a { transform:none; opacity:1; }

  /* Le masque de ligne est un `overflow:hidden` sur le <li> ; il rognerait le
     sous-menu. Sur la seule rubrique qui en a un, on l'ouvre et on remplace
     la montée du libellé par un fondu — le mouvement change, pas le rythme. */
  .navpanel__links li.menu-item-has-children { overflow:visible; }
  .navpanel__links li.menu-item-has-children > a {
    transform:none; opacity:0; transition:opacity .5s ease, color .2s ease;
  }
  .navpanel.is-open .navpanel__links li.menu-item-has-children > a { opacity:1; }

  /* Six rubriques, trois sous-liens et trois actions ne tiennent pas sur
     tous les écrans : le panneau défile plutôt que de tronquer. Mesuré sur
     375x812 : 903px de contenu, donc les boutons restent visibles et seule
     la ligne d'infos passe sous la ligne de flottaison. */
  .navpanel__in { overflow-y:auto; -webkit-overflow-scrolling:touch; }
}

/* Le contenu du panneau a grandi avec le second sous-menu : mesuré à 1009px
   sur un 375x812, contre 903px avant. « Commencer gratuitement » passait
   sous la ligne de flottaison. On resserre l'échelle sur les écrans qui en
   ont besoin — un menu dont les actions demandent à défiler ne les propose
   pas vraiment. Seuil sur la HAUTEUR : un grand écran garde la typographie
   d'origine. */
@media (max-width:1080px) and (max-height:900px){
  /* `.navpanel__parent` AUTANT que `.navpanel__links a` : la rubrique et les
     autres entrées sont la même liste, seul le geste diffère. Ne resserrer
     que les `a` laissait « Approche » et « Programmes » à 28px quand les
     quatre autres passaient à 21px — deux tailles dans une même colonne,
     lues comme deux niveaux de hiérarchie qui n'existent pas. */
  .navpanel__links a,
  .navpanel__links .navpanel__parent { font-size:clamp(24px,6.4vw,32px); padding:13px 0; }
  .navpanel__links .sub-menu { margin:0 0 13px; }
  .navpanel__links .sub-menu a { font-size:18px; padding:6px 0; line-height:1.35; }
  .navpanel__in { gap:22px; padding-top:calc(var(--header-total, 96px) + 14px); padding-bottom:24px; }

  /* La cascade d'apparition ne couvrait que sept lignes. */
  .navpanel.is-open .navpanel__links li:nth-child(6) a { transition-delay:.50s; }
  .navpanel.is-open .navpanel__links li:nth-child(7) a { transition-delay:.56s; }
  .navpanel.is-open .navpanel__links li:nth-child(8) a { transition-delay:.62s; }
}

/* Crédit de conception, dans la barre basse du pied de page. En retrait :
   c'est une mention d'usage, pas une troisième colonne d'égale importance. */
.ft__credit { color: var(--text-muted); }
.ft__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ft__credit a:hover { color: var(--accent); }

/* Panneau de consentement de l'agenda Calendly : ce qui s'affiche tant que
   personne n'a demandé à charger le tiers. Même carte que le reste, coins
   droits, sans bruit — ce n'est pas une alerte, c'est une information. */
.cal__widget--consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 32px 24px; text-align: center;
  background: var(--surface, #fff); border: 1px solid var(--border, #d9d3c3);
}
.cal__consent-text { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.cal__consent-alt { margin: 0; font-size: 14px; }
.cal__consent-alt a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.cal__consent-alt a:hover { color: var(--accent); }

/* Voile d'attente de l'agenda Calendly. Il couvre l'écran entre le clic et
   l'apparition de leur fenêtre : sans lui, le clic paraissait sans effet
   pendant une seconde ou deux, et se re-cliquait. */
.cal-attente {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(62, 58, 54, 0.55);
  animation: cal-attente-apparait .18s var(--ease, ease) both;
}
@keyframes cal-attente-apparait { from { opacity: 0; } to { opacity: 1; } }
.cal-attente__boite {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 26px; background: var(--cream, #fdf9f2); color: var(--ink, #3e3a36);
  font-size: 15px;
}
.cal-attente__rond {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--line-terra, rgba(168,88,46,.35));
  border-top-color: var(--terracotta, #a8582e);
  border-radius: 50%;
  animation: cal-attente-tourne .7s linear infinite;
}
@keyframes cal-attente-tourne { to { transform: rotate(360deg); } }
/* Le fond ne défile pas derrière le voile. */
body.cal-attente-active { overflow: hidden; }
/* Mouvement réduit : on garde le voile, on retire la rotation. */
@media (prefers-reduced-motion: reduce) {
  .cal-attente { animation: none; }
  .cal-attente__rond { animation: none; border-top-color: var(--terracotta, #a8582e); }
}