/*
Theme Name: ALCHIMIA
Theme URI: https://methode-alchimia.com
Author: Izri.Online
Author URI: https://izri.online
Description: Thème sur mesure pour la Méthode Alchimia — hypnothérapie, mentoring et accompagnement des entreprises. Conçu par Izri.Online.
Version: 1.5.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alchimia
Tags: one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* © Izri.Online – Tous droits réservés */

:root{
  --sky:#7FCCE8;--ocean:#3F86B5;--navy:#1B1552;--deep:#100C3A;--ice:#CFEFFA;--white:#fff;
  --glass:rgba(255,255,255,.07);--line:rgba(207,239,250,.18);
  /* Tokens sémantiques — surchargés par [data-theme="light"] plus bas.
     Les blocs à fond sombre (hero, .cta) gardent leurs couleurs en dur. */
  --page:var(--deep);--alt-bg:var(--navy);--footer-bg:#0a0828;
  --text:var(--ice);--heading:var(--white);--accent:var(--sky);
  --hd-bg:rgba(16,12,58,.82);--nav-bg:rgba(16,12,58,.985);--safe-bg:rgba(27,21,82,.85);
  --field:rgba(255,255,255,.08);--soft:rgba(255,255,255,.08);
  --chip-line:rgba(207,239,250,.4);--shade:rgba(0,0,0,.25);
  --f:'Nunito','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* ── Thème clair (bascule utilisateur, mémorisée en localStorage) ── */
[data-theme="light"]{
  --glass:rgba(255,255,255,.78);--line:rgba(16,12,58,.12);
  --page:#F4FAFD;--alt-bg:#E8F5FB;--footer-bg:#E9F5FB;
  --text:#20344D;--heading:#0F1B3D;--accent:#2A6A93;
  --hd-bg:rgba(244,250,253,.88);--nav-bg:rgba(244,250,253,.985);--safe-bg:rgba(233,245,251,.92);
  --field:#fff;--soft:rgba(16,12,58,.05);
  --chip-line:rgba(16,12,58,.16);--shade:rgba(16,12,58,.12);
  color-scheme:light;
}
/* ── Mode sombre : le fond de page prend la teinte de marque #7FCCE8
   (demande client du 26/10/2026 : plus de bleu marine en fond).
   Les îlots sombres (.hero, .cta, bandeaux) gardent leur dégradé : les textes
   blancs qui s'y trouvent restent sur fond sombre, contraste inchangé.
   Ancien fond bleu marine, conservé pour comparaison : ajouter ?bg=night. ── */
[data-theme="dark"]{
  /* Dégradé de page : ciel clair en haut → teinte de marque → eau plus dense.
     Il ne descend jamais sous ~#5AA9CA : au-delà, le texte encre passerait sous
     4,5:1 (mesuré). Le pied de page porte l'extrémité sombre. */
  --page:linear-gradient(180deg,#A6E2F6 0%,#8AD3EC 14%,#7FCCE8 40%,#6CBBDC 70%,#5FB0D2 100%);
  --page-flat:#7FCCE8;
  --glass:rgba(255,255,255,.5);--line:rgba(8,32,46,.16);
  --alt-bg:rgba(255,255,255,.16);--footer-bg:linear-gradient(180deg,#3E7F9F 0%,#16485A 34%,#091D25 100%);
  --text:#0E2A3C;--heading:#08202E;--accent:#154A63;
  --hd-bg:rgba(10,34,44,.86);--nav-bg:rgba(9,29,37,.985);--safe-bg:rgba(10,34,44,.92);
  --field:#fff;--soft:rgba(8,32,46,.06);
  --chip-line:rgba(8,32,46,.3);--shade:rgba(8,32,46,.14);
  color-scheme:light;
}
/* Îlots à fond sombre (héros, « 18 ans d'expérience », bloc RDV) et pied de page :
   les variables de texte y repassent en clair — sinon les titres/paragraphes
   héritent de l'encre foncée de la page et deviennent illisibles sur le dégradé. */
[data-theme="dark"] .hero,[data-theme="dark"] .hero-slider,
[data-theme="dark"] footer,
[data-theme="dark"] #hd{
  color:#E9F7FD;   /* color:var(--text) est héritée depuis body : re-résoudre ici */
  --text:#E9F7FD;--heading:#FFFFFF;--accent:var(--sky);
  --glass:rgba(255,255,255,.1);--line:rgba(207,239,250,.24);
  --chip-line:rgba(207,239,250,.42);--shade:rgba(0,0,0,.3);--soft:rgba(255,255,255,.1);
  --field:rgba(255,255,255,.12);
}
/* ── CTA + Founder « verre » : la carte n'est plus bleu nuit, elle reprend la
   teinte de la page (verre dépoli), avec une encre foncée pour rester ≥ 4,5:1. ── */
[data-theme="dark"] .cta{
  background:linear-gradient(160deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.3) 48%,rgba(255,255,255,.14) 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 40px 90px -50px rgba(6,26,36,.55),inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  backdrop-filter:blur(20px) saturate(1.25);
  color:#0E2A3C;--text:#0E2A3C;--heading:#08202E;--accent:#154A63;
}
/* Thème clair : la page est #F4FAFD, un verre blanc y serait invisible.
   On teinte donc le verre (halo --sky) en gardant l'encre foncée. */
[data-theme="light"] .cta{
  background:linear-gradient(160deg,rgba(127,204,232,.34) 0%,rgba(255,255,255,.84) 46%,rgba(207,239,250,.68) 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 34px 80px -48px rgba(8,32,46,.38),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  color:#0E2A3C;--text:#123243;--heading:#08202E;--accent:#154A63;
}
[data-theme="dark"] .cta::after{background:linear-gradient(270deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,.1) 70%,transparent 100%)}
[data-theme="light"] .cta::after{background:linear-gradient(270deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 42%,rgba(255,255,255,.12) 70%,transparent 100%)}
/* ── Founder : le CTA et le founder partagent désormais LE MÊME verre ─────
   Demande client : « le founder doit être identique au cadre du CTA, ne plus
   être bleu marine ». Une seule recette de couleur, deux orientations de voile
   (CTA : texte à droite → voile blanc à droite ; founder : texte à gauche →
   voile blanc à gauche). Encre foncée dans les deux thèmes, contraste remesuré
   sur les pixels réels (scripts/qa/qa-text-contrast.js). */
[data-theme="dark"] .founder{
  background:linear-gradient(160deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.3) 48%,rgba(255,255,255,.14) 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 40px 90px -50px rgba(6,26,36,.55),inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  backdrop-filter:blur(20px) saturate(1.25);
  color:#0E2A3C;--text:#0E2A3C;--heading:#08202E;--accent:#154A63;
  --line:rgba(8,32,46,.18);--glass:rgba(255,255,255,.5);--shade:rgba(8,32,46,.12);
}
[data-theme="light"] .founder{
  background:linear-gradient(200deg,rgba(127,204,232,.34) 0%,rgba(255,255,255,.84) 46%,rgba(207,239,250,.68) 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 34px 80px -48px rgba(8,32,46,.38),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  color:#0E2A3C;--text:#123243;--heading:#08202E;--accent:#154A63;
  --line:rgba(8,32,46,.16);--glass:rgba(255,255,255,.55);--shade:rgba(8,32,46,.1);
}
[data-theme="dark"] .founder::after{background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,.1) 70%,transparent 100%)}
[data-theme="light"] .founder::after{background:linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 42%,rgba(255,255,255,.12) 70%,transparent 100%)}
/* Encre des enfants : les anciennes surcharges claires (#FFFFFF, #DCEEF9,
   --sky) tombaient à 1,5–2,4:1 sur le verre. Elles suivent maintenant les
   variables de la carte. */
.founder h2{color:var(--heading)}
.founder p{color:var(--text)}
.founder .fig b{color:var(--accent)}
.founder .fig span{color:var(--text)}
/* Animations (le client trouvait la section statique) : entrée en cascade des
   trois chiffres + flottement lent du portrait. Les .rv gèrent l'apparition,
   on ne fait qu'ajouter le décalage et un mouvement continu discret. */
.founder .fig{transition:opacity .8s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1)}
.founder .fig:nth-child(1){transition-delay:.05s}
.founder .fig:nth-child(2){transition-delay:.16s}
.founder .fig:nth-child(3){transition-delay:.27s}
.founder.in .card-photo{animation:founderFloat 9s ease-in-out infinite alternate}
@keyframes founderFloat{from{transform:translateY(0) scale(1)}to{transform:translateY(-1.2%) scale(1.015)}}
[data-theme="dark"] .cta h2{color:#08202E}
[data-theme="dark"] .cta p{color:#1B3A47}
[data-theme="dark"] .cta .btn{background:#08202E;color:#EAF7FD;box-shadow:0 18px 36px -22px rgba(6,26,36,.8)}
[data-theme="dark"] .cta .btn.o{background:transparent;color:#08202E;box-shadow:inset 0 0 0 2px rgba(8,32,46,.45)}
[data-theme="light"] .cta .btn{background:#08202E;color:#EAF7FD;box-shadow:0 18px 36px -22px rgba(6,26,36,.55)}
[data-theme="light"] .cta .btn.o{background:transparent;color:#08202E;box-shadow:inset 0 0 0 2px rgba(8,32,46,.45)}
[data-theme="dark"] .cta-photo{background:radial-gradient(circle at 50% 26%,rgba(255,255,255,.96),rgba(174,226,245,.92));border-color:rgba(255,255,255,.85)}
[data-theme="light"] .cta-photo{background:radial-gradient(circle at 50% 26%,rgba(255,255,255,.98),rgba(207,239,250,.95));border-color:rgba(255,255,255,.92)}
/* variante de secours ?bg=night : le verre doit rester opaque sur le navy */
[data-theme="dark"][data-bg="night"] .cta{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.84))}
[data-theme="dark"] header#hd::before{background:rgba(10,34,44,.55)}
[data-theme="dark"] header#hd.s::before{background:var(--hd-bg)}
[data-theme="dark"][data-bg="night"]{
  --glass:rgba(255,255,255,.07);--line:rgba(207,239,250,.18);
  --page:var(--deep);--alt-bg:var(--navy);--footer-bg:#0a0828;
  --text:var(--ice);--heading:var(--white);--accent:var(--sky);
  --hd-bg:rgba(16,12,58,.82);--nav-bg:rgba(16,12,58,.985);--safe-bg:rgba(27,21,82,.85);
  --field:rgba(255,255,255,.08);--soft:rgba(255,255,255,.08);
  --chip-line:rgba(207,239,250,.4);--shade:rgba(0,0,0,.25);
  color-scheme:dark;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--page);color:var(--text);transition:background-color .5s ease-out,color .5s ease-out;font:400 1.05rem/1.7 var(--f);overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--safe-bg);backdrop-filter:blur(14px)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-weight:800;line-height:1.12;margin:0 0 .5em;color:var(--heading);letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}h3{font-size:1.25rem}
p{margin:0 0 1em;max-width:62ch}
img{max-width:100%;height:auto}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.lead{font-size:1.2rem;font-weight:300;color:var(--white)}

/* ── Header ── */
/* top:0 et non top:env(safe-area-inset-top) : l'en-tête doit êtreplaqué
   contre le bord haut de l'écran. C'est le CONTENU qui descend sous l'encoche
   (padding-top + safe-area), sinon le menu flottait 47px plus bas sur iPhone. */
header#hd{position:fixed;top:0;left:0;right:0;z-index:50;transition:padding .4s;padding:calc(.62rem + env(safe-area-inset-top,0px)) 0 .62rem}
/* Le flou est porté par ::before : un backdrop-filter sur le header créerait
   un bloc conteneur et casserait le position:fixed du menu mobile au scroll. */
header#hd::before{content:"";position:absolute;inset:0;z-index:-1;background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .4s;pointer-events:none}
header#hd.s{padding:calc(.42rem + env(safe-area-inset-top,0px)) 0 .42rem;box-shadow:0 1px 0 var(--line)}
header#hd.s::before{background:var(--hd-bg)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(.8rem,2vw,1.6rem)}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--heading);flex:none}   /* v1.5.3 : sans flex:none le logo était écrasé à 0 px dès 861 px (mesuré) */
.logo img,.lk{display:block;height:36px;width:auto}
footer .lk{height:42px}

/* ── Lockup blanc / navy (option A validée client) ──────────────────────────
   Le lockup livré est 100 % blanc : mesuré à 1,34:1 sur --hd-bg (header clair
   scrollé) et INVISIBLE sur le footer #E9F5FB (fond L 0,896, aucune encre plus
   claire). On garde donc deux fichiers et on n'affiche que celui qui contraste :
   blanc sur les fonds sombres (hero, thème sombre), navy sur les surfaces
   claires. `display:none` retire l'image inutilisée de l'arbre d'accessibilité. */
.logo .lk--navy{display:none}
[data-theme="light"] header#hd:not(.s) .lk--white{display:block}          /* hero : blanc */
[data-theme="light"] header#hd.s .lk--white{display:none}                 /* scroll : navy */
[data-theme="light"] header#hd.s .lk--navy{display:block}
[data-theme="light"] footer .lk--white{display:none}
[data-theme="light"] footer .lk--navy{display:block}

/* ── Scrim haut de page (thème clair) ───────────────────────────────────────
   Sans lui, la nav en encre claire passait au-dessus de photos très lumineuses
   (luminance mesurée 0,78 à 0,96 au tiers supérieur des 5 photos de hero) :
   encre claire sur fond clair = illisible. Le scrim garantit le contraste
   indépendamment de la photo, et couvre les 190 px du haut (barre + marge). */
[data-theme="light"] header#hd::before{
  inset:0 0 auto;height:190px;
  background:linear-gradient(180deg,rgba(9,29,37,.90) 0%,rgba(9,29,37,.86) 54%,
             rgba(9,29,37,.46) 86%,rgba(9,29,37,0) 100%);
}
[data-theme="light"] header#hd.s::before{inset:0;height:auto;background:var(--hd-bg)}
/* Encre claire sur le scrim (opacité pleine : à .85 le contraste tombait à 4,7:1) */
[data-theme="light"] header#hd:not(.s) nav a:not(.btn){color:#EAF7FD;opacity:1}
[data-theme="light"] header#hd:not(.s) .logo{color:#EAF7FD}
[data-theme="light"] header#hd:not(.s) .tgl{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#EAF7FD}
[data-theme="light"] header#hd:not(.s) .burger i{background:#EAF7FD}
[data-theme="light"] header#hd:not(.s) nav a:not(.btn)::after{background:#EAF7FD}
nav{display:flex;align-items:center;gap:1.25rem;font-weight:700;font-size:.9rem}
nav ul{display:flex;align-items:center;gap:1.25rem;list-style:none;margin:0;padding:0}
nav ul li{margin:0}
/* Un libellé ne doit JAMAIS se couper sur deux lignes : la bbox d'un <a> inline
   qui wrappe est plus étroite que la place occupée, d'où des écarts mesurés de
   96 / 31,7 / 31,6 / 93,2 px entre les items (desktop 1440, 26/10/2026).
   Largeur nécessaire une ligne = 941 px pour 896 px alloués → ça wrappait. */
nav ul li a{white-space:nowrap}
/* Le CTA est un bloc plein : on le détache du dernier lien
   pour éviter qu'il « colle » visuellement au menu. */
/* v1.5.3 — le bouton se cassait sur 3 lignes entre 861 et 1030 px (hauteur 97px,
   en-tête 114px) : il poussait le hero vers le bas. nowrap + flex:none = 1 ligne. */
nav > .btn{margin-left:.35rem;padding:.66rem 1.15rem;font:800 .93rem var(--f);white-space:nowrap;flex:none}
nav a:not(.btn){position:relative;padding:.3rem 0;color:var(--heading);opacity:.85}
nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .35s}
nav a:not(.btn):hover::after,nav a.current-menu-item::after{transform:scaleX(1)}
nav a.current-menu-item{opacity:1}
.btn{display:inline-block;background:var(--white);color:var(--navy);font-weight:800;padding:.85rem 1.6rem;border-radius:999px;border:0;cursor:pointer;font:800 1rem var(--f);transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(127,204,232,.35)}
.btn.o{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger i{display:block;height:2px;background:var(--heading);margin:7px 10px;transition:.3s}
.bar-end{display:flex;align-items:center;gap:.5rem;position:relative;z-index:70}
.tgl{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--heading);cursor:pointer;transition:transform .25s,background .35s,border-color .35s}
.tgl:hover{border-color:var(--accent)}
.tgl:active{transform:scale(.94)}
.tgl svg{width:19px;height:19px;display:block}
.tgl .i-moon{display:none}
[data-theme="light"] .tgl .i-sun{display:none}
[data-theme="light"] .tgl .i-moon{display:block}

/* ── Hero ── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:7rem 0 4rem;text-align:center;overflow:hidden;
background:linear-gradient(180deg,var(--sky) 0%,#64AFD3 22%,var(--ocean) 45%,#27407F 68%,var(--navy) 88%,var(--deep) 100%);background-size:100% 160%;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{background-position:0 100%}}
.hero.sm{min-height:62svh;padding-bottom:3.5rem}
/* Voile fixe sur la rampe animée : stabilise le contraste du texte en haut du hero
   (le "drift" fait osciller le fond clair → le blanc passait de 4,6 à 4,4:1). */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(16,12,58,.22) 0%,rgba(16,12,58,.12) 45%,
            rgba(16,12,58,.12) 78%,rgba(16,12,58,0) 100%)}
/* ── Photo de fond des heros de pages intérieures ──────────────────────────
   Trois pages (hypnothérapie, mentoring, entreprises) n'avaient qu'un titre sur
   un dégradé. La photo est posée en couche absolue sous le texte (z-index 0),
   avec un voile dense : les 4 photos mesurent 0,78 à 0,96 de luminance, donc
   le blanc du h1 et du lead ne tient que par ce voile. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-media picture{position:absolute;inset:0;display:block}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;transform:scale(1.04);
  animation:heroKen 26s ease-in-out infinite alternate}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,12,58,.56) 0%,rgba(16,12,58,.30) 30%,
             rgba(16,12,58,.56) 62%,rgba(16,12,58,.90) 100%)}
@keyframes heroKen{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}

/* Boucle de deux photos (hypnothérapie) : fondu enchaîné d'environ 1,1 s
   toutes les 7 s — la seconde photo porte le fondu inverse. */
.hero-media--loop img{opacity:0;animation:heroLoopA 14s cubic-bezier(.4,0,.2,1) infinite,heroKen 26s ease-in-out infinite alternate}
.hero-media--loop picture:nth-of-type(2) img{animation-name:heroLoopB,heroKen}
@keyframes heroLoopA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes heroLoopB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}

.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.hero p{margin-inline:auto}
.orb{position:relative;width:clamp(130px,22vw,210px);aspect-ratio:1;margin:0 auto 2rem;animation:fl 7s ease-in-out infinite}
.orb::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(207,239,250,.14) 0%,rgba(207,239,250,.08) 38%,rgba(207,239,250,0) 72%);filter:blur(10px);opacity:.9;animation:orbHalo 7.2s ease-in-out infinite;pointer-events:none;z-index:0}
.orb .mk{position:relative;display:block;width:100%;height:100%;background:var(--mono) center/contain no-repeat;filter:drop-shadow(0 12px 30px rgba(27,21,82,.35));z-index:1}
.orb span{position:absolute;inset:0;border:1.5px solid rgba(255,255,255,.6);border-radius:50%;opacity:0;animation:rg 8s ease-out infinite;z-index:2}
.orb span:nth-child(2){animation-delay:2s}.orb span:nth-child(3){animation-delay:4s}.orb span:nth-child(4){animation-delay:6s}
@keyframes rg{0%{transform:scale(.7);opacity:.7}100%{transform:scale(4.2);opacity:0}}
@keyframes fl{50%{transform:translateY(-12px)}}
@keyframes orbHalo{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.016);opacity:1}}
.hero h1,.hero .lead{text-shadow:0 2px 24px rgba(16,12,58,.35)}
.acts{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.6rem}

/* ── Blocks ── */
.alt{background:var(--alt-bg)}
.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--glass);border:1px solid var(--line);border-radius:24px;padding:1.8rem;backdrop-filter:blur(8px)}
.card p{margin:0;font-size:.98rem}
.ico{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky),var(--ocean));color:var(--navy);font-size:1.4rem;font-weight:800;margin-bottom:1rem}
.link{font-weight:800;color:var(--accent);display:inline-block;margin-top:1rem;border-bottom:2px solid transparent;transition:border-color .3s}
.link:hover{border-color:var(--accent)}
a.card{transition:transform .3s,border-color .3s}a.card:hover{transform:translateY(-6px);border-color:var(--sky)}
.head{max-width:880px;margin:0 auto 2.6rem;text-align:center}
.head.c{margin-inline:auto;text-align:center}.head.c p{margin-inline:auto}
.head .prose{display:flex;flex-direction:column;gap:1rem;max-width:820px;margin:1rem auto 0;text-align:center}
.head .prose p{margin:0;color:var(--sub);font-size:clamp(1rem,2vw,1.08rem);line-height:1.8}

/* ── Timeline ── */
.tl{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:1.6rem}
.tl::before{content:"";position:absolute;left:24px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--sky),transparent)}
.tl li{position:relative;padding-left:4.2rem}
.tl .n{position:absolute;left:0;top:0;width:50px;height:50px;border-radius:50%;background:var(--navy);border:2px solid var(--sky);display:grid;place-items:center;font-weight:800;color:var(--white)}
.tl h3{margin-bottom:.2em}.tl p{margin:0}
.steps{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s}
.steps .card{position:relative;overflow:hidden}
.steps .card::after{counter-increment:s;content:counter(s);position:absolute;right:1rem;top:-.2rem;font-size:5.5rem;font-weight:800;color:rgba(127,204,232,.1)}

/* ── Pricing ── */
.pr{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:stretch}
.pr .card ul{padding-left:1.1rem;margin:1rem 0 1.4rem}
.pr .hl{background:linear-gradient(160deg,rgba(127,204,232,.22),rgba(63,134,181,.2));border-color:var(--sky);transform:scale(1.03)}
.price{font-size:2rem;font-weight:800;color:var(--heading)}

/* ── FAQ ── */
details{border-bottom:1px solid var(--line);padding:1.1rem 0}
summary{cursor:pointer;font-weight:800;color:var(--heading);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--sky);transition:transform .35s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.8rem 0 0;animation:pg .4s both}

/* ── Figures ── */
.fig{text-align:center}.fig b{display:block;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--heading);font-weight:800}
.fig b::before{content:"+"}.fig.wide b{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.fig span{display:block;font-size:.9rem;line-height:1.45;opacity:.72;max-width:18ch;margin:.35rem auto 0}
.fig.wide span{max-width:32ch}
.note{font-size:.85rem;opacity:.65;text-align:center;margin-top:1.4rem}
q{quotes:"« " " »";font-size:1.05rem;color:var(--heading);display:block;margin-bottom:1rem}
.cta{text-align:center;background:linear-gradient(135deg,var(--ocean),var(--navy));border-radius:32px;padding:clamp(2.5rem,6vw,4.5rem) 1.5rem}
.cta p{margin-inline:auto;text-align:center}
.cta-with-photo{display:flex;align-items:center;justify-content:center;gap:clamp(1.6rem,4vw,3rem);flex-wrap:wrap;text-align:center;margin-inline:auto;max-width:980px}
.cta-photo{width:clamp(160px,22vw,240px);height:clamp(160px,22vw,240px);border-radius:50%;overflow:hidden;border:2px solid rgba(207,239,250,.4);box-shadow:0 40px 80px -60px rgba(127,204,232,.9);flex:none;position:relative;background:radial-gradient(circle at 50% 26%,var(--ocean) 0%,var(--navy) 74%)}
.cta-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1.02)}
.cta-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:620px;margin-inline:auto}
.cta-content p{margin-inline:auto;max-width:620px;text-align:center}
.cta .btn{align-self:center;margin-inline:auto}
@media (max-width:720px){.cta-with-photo{text-align:center}.cta-content{align-items:center;text-align:center}.cta-content p{margin-inline:auto;text-align:center}}

/* ── Contact ── */
.two{display:grid;gap:2rem;grid-template-columns:1.2fr .8fr}
label{display:block;font-weight:700;font-size:.92rem;margin:1rem 0 .35rem;color:var(--heading)}
input,select,textarea{width:100%;font:inherit;color:var(--heading);background:var(--field);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem}
select option{color:#100C3A}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky);border-color:transparent}
.ok{display:none;margin-top:1rem;padding:1rem;border-radius:14px;background:rgba(0,255,150,.12);color:var(--heading)}
.err{margin-top:1rem;padding:1rem;border-radius:14px;background:rgba(255,80,80,.15);color:var(--heading)}
/* Honeypot anti-spam: invisible pour l'humain, rempli par les robots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.info p{margin:0 0 1rem}.info b{color:var(--heading);display:block}
.wa{background:#25D366;color:#073b1d}

/* ── Footer ── */
footer{background:var(--footer-bg);padding:3rem 0 2rem;font-size:.95rem}
.fg{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.fg ul{list-style:none;padding:0;margin:0}.fg li{margin:.35rem 0}
.copy{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.2rem;opacity:.7;font-size:.85rem}

/* ── Reveal ── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.23,1,.32,1),transform .9s cubic-bezier(.23,1,.32,1)}.rv.in{opacity:1;transform:none}

/* ── ALCHIMIA additions ── */
.tight{padding-top:0}

/* ── Hero slider ── */
.hero-slider{display:block;padding:0;min-height:100svh;background:none;animation:none}
.hero-slider .slides{position:relative;min-height:100svh}
.hero-slider .slide{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:7rem 0 9.2rem;text-align:center;
  background:linear-gradient(180deg,var(--sky) 0%,#64AFD3 22%,var(--ocean) 45%,#27407F 68%,var(--navy) 88%,var(--deep) 100%);
  background-size:100% 160%;
  opacity:0;pointer-events:none;
  transition:opacity .95s cubic-bezier(.23,1,.32,1);
  will-change:opacity;
}
.hero-slider .slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero-slider .slide--methode.is-active{animation:drift 18s ease-in-out infinite alternate}
.hero-slider .slide .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.hero-slider .slide p{margin-inline:auto}

/* Slide 1 — photo de scène plein cadre (hero-home-1) ----------------------
   Remplace le portrait détouré : la photo est une scène lumineuse (luminance
   mesurée 0,66–0,97, visage à 69 % de la largeur, 27 % de la hauteur). Elle
   passe donc plein cadre avec un voile dense en bas, là où vivent le h1 et les
   CTA, et plus léger en haut (le scrim du header prend le relais). */
.slide-media{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  transform:none;z-index:0;pointer-events:none;overflow:hidden;
}
.slide-media picture{display:block;width:100%;height:100%}
.slide-media img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:64% 30%;          /* garde le visage (cx 69 %, cy 27 %) */
  opacity:0;transition:opacity 1s cubic-bezier(.23,1,.32,1);
}
.slide.is-active .slide-media img{
  opacity:1;animation:heroDrift 28s ease-in-out infinite alternate;
}
.slide-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,12,58,.62) 0%,rgba(16,12,58,.34) 26%,
             rgba(16,12,58,.58) 50%,rgba(16,12,58,.86) 74%,rgba(16,12,58,.95) 100%);
}
/* Sur écran étroit le recadrage ne montre que ~26 % de la largeur :
   on recentre sur le visage. */
@media(max-width:860px){
  .slide-media img{object-position:68% 28%}
}

/* Slide 1 — cascade d'entrée du contenu (la slide 2 l'a déjà) */
.hero-slider .slide--methode .wrap > h1,
.hero-slider .slide--methode .wrap > p.lead,
.hero-slider .slide--methode .wrap > .acts{opacity:0;transform:translateY(24px)}
.hero-slider .slide--methode.is-active .wrap > h1{animation:slideUp .8s .15s cubic-bezier(.23,1,.32,1) forwards}
.hero-slider .slide--methode.is-active .wrap > p.lead{animation:slideUp .8s .26s cubic-bezier(.23,1,.32,1) forwards}
.hero-slider .slide--methode.is-active .wrap > .acts{animation:slideUp .8s .37s cubic-bezier(.23,1,.32,1) forwards}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes heroDrift{
  from{transform:scale(1.14) translateY(3%)}
  to{transform:scale(1.21) translateY(0%)}
}
.orb{overflow:visible}
.orb span{z-index:2}
.orb .mk{z-index:3}

/* Slide 2 — consultation room (ALCHIMIA Entreprises) */
.slide--entreprise{background:var(--deep);text-align:left}
.slide-bg{
  position:absolute;inset:0;z-index:0;
  background:url('assets/img/cabinet-hero.webp') center/cover no-repeat;
  transform:scale(1.06);
  transition:transform 9s ease-out;
}
.slide--entreprise.is-active .slide-bg{transform:scale(1)}
.slide-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(16,12,58,.94) 0%,rgba(16,12,58,.86) 38%,rgba(16,12,58,.55) 70%,rgba(16,12,58,.38) 100%),
    linear-gradient(180deg,rgba(16,12,58,.55) 0%,transparent 30%,transparent 70%,rgba(16,12,58,.75) 100%);
}
.hero-slider .slide--entreprise .wrap{align-items:flex-start;max-width:none}
.hero-slider .slide--entreprise .wrap > *{max-width:720px}
.hero-slider .slide--entreprise p{margin-inline:0}
.hero-slider .slide--entreprise h2{font-size:clamp(2.1rem,5vw,4.1rem);max-width:15ch}
.hero-slider .slide--entreprise .lead{max-width:46ch}
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sky);margin-bottom:1rem;
}
.kicker::before{content:"";width:34px;height:2px;background:var(--sky);display:block}
.slide-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.4rem 0 0}
/* Les tags sont sur une PHOTO sombre : l'encre ne doit pas être héritée de la
   page (en thème clair elle arrivait en #20344D → 1,4:1 illisible, signalé par
   le client). Encre claire + verre assez dense pour tenir sur l'image. */
.slide-tags li{
  font-size:.8rem;font-weight:700;padding:.42rem .85rem;border-radius:999px;
  color:#EAF7FD;
  background:rgba(8,22,34,.5);border:1px solid rgba(234,247,253,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-shadow:0 1px 2px rgba(4,14,22,.45);
}
.slide--entreprise .acts{justify-content:flex-start}
.slide--entreprise .wrap > *{opacity:0;transform:translateY(22px)}
.slide--entreprise.is-active .wrap > *{animation:slideUp .8s cubic-bezier(.23,1,.32,1) forwards}
.slide--entreprise.is-active .wrap > *:nth-child(1){animation-delay:.15s}
.slide--entreprise.is-active .wrap > *:nth-child(2){animation-delay:.24s}
.slide--entreprise.is-active .wrap > *:nth-child(3){animation-delay:.33s}
.slide--entreprise.is-active .wrap > *:nth-child(4){animation-delay:.42s}
.slide--entreprise.is-active .wrap > *:nth-child(5){animation-delay:.51s}
@keyframes slideUp{to{opacity:1;transform:none}}

/* Slide 2 — centrage sur desktop (alignement à gauche conservé en mobile) */
@media(min-width:861px){
  .hero-slider .slide--entreprise .wrap{align-items:center;text-align:center}
  .hero-slider .slide--entreprise .wrap > *{max-width:820px}
  .hero-slider .slide--entreprise p{margin-inline:auto}
  .hero-slider .slide--entreprise h2{max-width:16ch}
  .slide--entreprise .acts{justify-content:center}
  .slide--entreprise .slide-tags{justify-content:center}
}

/* Carousel controls */
.hero-ui{
  position:absolute;left:0;right:0;bottom:3.4rem;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:1.1rem;
  pointer-events:none;
}
.hero-ui > *{pointer-events:auto}
.hero-arrow{
  width:42px;height:42px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  color:#fff;font-size:1.45rem;line-height:1;
  background:rgba(16,12,58,.32);border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s,transform .2s;
}
.hero-arrow:hover{background:rgba(16,12,58,.6);border-color:var(--sky);transform:scale(1.06)}
.hero-arrow:active{transform:scale(.97)}
.hero-dots{display:flex;align-items:center;gap:.45rem}
.hero-dot{
  width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.42);
  transition:width .35s cubic-bezier(.23,1,.32,1),background .35s;
}
.hero-dot:hover{background:rgba(255,255,255,.72)}
.hero-dot.is-active{width:30px;background:var(--white)}
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:6;background:rgba(255,255,255,.12)}
.hero-progress span{display:block;height:100%;width:0;background:var(--sky);transition:width .2s linear}
.hero-progress.run span{animation:heroProg var(--dur,7s) linear forwards}
@keyframes heroProg{from{width:0}to{width:100%}}

/* Founder + CTA: portrait rising from the card background.
   Founder → photo à droite / texte à gauche · CTA → photo à gauche / texte à droite.
   Le portrait est ancré sur un bord et le texte n'occupe que la moitié opposée :
   plus aucun chevauchement texte/photo. */
.founder,.cta{position:relative;overflow:hidden;isolation:isolate}
.card-photo{
  position:absolute;bottom:0;
  height:96%;width:auto;max-width:none;
  transform:translateY(14%) scale(.94);opacity:0;
  object-fit:contain;object-position:center bottom;pointer-events:none;
  z-index:-1;
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.45));
  transition:opacity 1.2s cubic-bezier(.23,1,.32,1),transform 1.2s cubic-bezier(.23,1,.32,1);
}
.founder.in .card-photo,.cta.in .card-photo{
  opacity:.5;transform:translateY(4%) scale(1);
}
.founder > div,.nums,.cta h2,.cta p,.cta .btn{position:relative;z-index:1}
/* soft veil so text stays readable above the photo */
.founder::after,.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}

/* ── Founder : photo à droite, texte aligné à gauche ── */
.founder .card-photo{right:0;left:auto;height:100%;object-position:right bottom;
  filter:drop-shadow(0 24px 48px rgba(6,26,36,.3));
  /* le détourage est coupé net en bas : un fondu le fait « entrer » dans la carte */
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
/* Portrait net sur le verre (l'ancien .5 le fondait dans le bleu nuit). */
.founder.in .card-photo{opacity:1;transform:translateY(0) scale(1)}
.founder::after{
  background:linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 42%,rgba(255,255,255,.12) 70%,transparent 100%);
}
.founder{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1.5rem;align-items:start;padding:clamp(1.3rem,2.8vw,2rem)}
.founder > div{grid-column:1;text-align:left}
.founder > div p{margin:0}
.founder .nums{grid-column:1;text-align:left}
.founder h2{max-width:22ch}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}
.founder .nums{grid-template-columns:1fr;gap:.15rem}
/* chiffre + libellé sur UNE seule ligne (le libellé ne se coupe plus) */
.founder .fig{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;text-align:left}
.founder .fig b{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1}
.founder .fig.wide b{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.founder .fig span{margin:0;max-width:none;white-space:nowrap;font-size:.95rem}
.founder .fig.wide span{white-space:normal;max-width:42ch}
@media (max-width:700px){
  .founder .fig{display:block}
  .founder .fig span{white-space:nowrap;margin-top:.1rem}
}

/* ── CTA : photo à gauche, texte aligné à droite ── */
.cta .card-photo{left:0;right:auto}
.cta::after{
  background:linear-gradient(270deg,rgba(16,12,58,.92) 0%,rgba(16,12,58,.86) 42%,rgba(16,12,58,.42) 68%,rgba(16,12,58,.12) 100%);
}
.cta{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:2rem;align-items:center;text-align:right}
.cta h2,.cta p,.cta .btn{grid-column:2}
.cta p{margin-inline:0 0 0 auto}
.cta .btn{justify-self:end}
/* CTA d'accueil : photo de profil en cadre carré (au lieu du médaillon rond) */
/* Écart photo ↔ texte mesuré à 169 px : la colonne 1 (.95fr = 427 px) était bien
   plus large que la photo (290 px), et le vide de colonne s'ajoutait au gap 32 px.
   Une colonne `auto` fait épouser la photo → il ne reste que le gap. */
.cta.cta--home{grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,1.8vw,1.4rem)}
.cta.cta--home .cta-photo{
  width:clamp(190px,24vw,290px);height:auto;aspect-ratio:1/1;border-radius:26px;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 34px 70px -44px rgba(6,26,36,.6),inset 0 0 0 1px rgba(255,255,255,.25);
}
.cta.cta--home .cta-photo img{transform:none;object-position:50% 32%}
/* CTA d'accueil (desktop) — demandes client : resserrer titre↔texte et centrer
   le bouton sur les textes. Mesure d'origine : 38,4 px entre le titre et le
   texte, bouton décalé de −135,7 px (colonne de 520 px, bouton à gauche).
   `width:fit-content` fait suivre la largeur de la colonne à celle du titre,
   et `p{width:0;min-width:100%}` neutralise sa contribution au calcul (sans
   ça le paragraphe, non coupé, élargirait la colonne). Le bouton centré dans
   cette colonne tombe alors pile sur l'axe du titre à TOUTES les largeurs. */
@media(min-width:721px){
  .cta.cta--home .cta-content{gap:0;width:fit-content}
  .cta.cta--home h2{margin:0}
  .cta.cta--home p{width:0;min-width:100%;max-width:none;margin:.55rem 0 0}
  .cta.cta--home .btn{margin-top:1.15rem;align-self:center}
}

/* Même CTA, sous 721 px — le `grid-template-columns:auto minmax(0,1fr)` de la
   règle `.cta--home` reste actif sur mobile et la colonne de texte tombait à
   94 px de large (photo 190 px + gap 16 px dans 302 px utiles) : titre cassé en
   3 lignes de 153 px, paragraphe en 6 lignes, bouton décalé de −29,6 px. Le
   `style="text-align:left"` en ligne l'emporte sur le `text-align:center` de la
   media query ≤720, d'où le doublon explicite ci-dessous. On empile : photo
   centrée au-dessus, textes et bouton centrés sur toute la largeur. */
@media (max-width:720px){
  .cta.cta--home{grid-template-columns:minmax(0,1fr);gap:1.15rem;justify-items:center}
  .cta.cta--home .cta-photo{width:min(44vw,168px)}
  .cta.cta--home .cta-content{gap:0;width:100%;align-items:center;text-align:center}
  .cta.cta--home h2{margin:0}
  .cta.cta--home .cta-content p{width:auto;min-width:0;max-width:34ch;margin:.55rem auto 0}
  .cta.cta--home .btn{margin-top:1.15rem;align-self:center}
}
.cta h2{max-width:22ch;margin-left:auto}
.chip{display:inline-block;font:800 .72rem var(--f);padding:.25rem .7rem;border-radius:999px;margin-bottom:1rem;background:rgba(127,204,232,.18);color:var(--accent)}
.chip.w{background:rgba(37,211,102,.18);color:#6ff0a0}.chip.f{background:rgba(66,133,244,.2);color:#9cc0ff}
.b{background:var(--soft);border-radius:16px 16px 16px 4px;padding:.6rem .9rem;margin:.45rem 0;max-width:92%;font-size:.95rem;color:var(--heading)}
.who{font-size:.85rem;margin-top:1rem!important;opacity:.75}
.stars{color:#ffd24a;letter-spacing:3px;margin-bottom:.5rem}
.aud{display:flex;align-items:center;gap:.9rem;background:var(--soft);border-radius:999px;padding:.6rem 1rem .6rem .6rem}
.pl{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--sky);color:var(--navy);font-size:1rem;cursor:pointer}
.wf{display:flex;align-items:center;gap:3px;height:40px;flex:1}.wf i{display:block;width:3px;border-radius:3px;background:var(--sky);height:var(--h);transform-origin:center bottom}
.aud.play .wf i{animation:wv .8s ease-in-out infinite alternate;animation-delay:calc(var(--i)*55ms)}
@keyframes wv{to{transform:scaleY(.3)}}
.refs{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ref{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:1.3rem;text-align:center;transition:transform .3s,border-color .3s}
.ref:hover{transform:translateY(-4px);border-color:var(--sky)}
.lp{height:64px;border-radius:12px;background:rgba(255,255,255,.92);color:#8a96b0;display:grid;place-items:center;font:800 .78rem var(--f);letter-spacing:.14em;margin-bottom:.9rem;overflow:hidden}
.lp img{max-height:56px;max-width:80%;object-fit:contain}
.ref b{color:var(--heading);font-size:.95rem}.rl{display:flex;gap:.9rem;justify-content:center;font-size:.85rem;margin-top:.4rem}.rl a{color:var(--accent);font-weight:700}
@keyframes pg{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── WhatsApp widget ── */
/* pointer-events:none sur le conteneur : sa boîte (340×455) recouvrait les
   boutons du hero sur mobile et bloquait les clics. Seuls le FAB et le panel
   ouvert réactivent les événements. */
.wa-widget{position:fixed;right:18px;bottom:18px;z-index:90;font-family:var(--f);display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-bottom:env(safe-area-inset-bottom,0px);pointer-events:none}
.wa-fab{width:58px;height:58px;border-radius:50%;border:0;background:#25D366;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s;pointer-events:auto}
.wa-fab:hover{transform:scale(1.06);box-shadow:0 10px 30px rgba(37,211,102,.6)}
.wa-fab:active{transform:scale(.96)}
.wa-fab svg{width:30px;height:30px;fill:currentColor}
.wa-fab .x{display:none}
.wa-widget.open .wa-fab .wa-ico{display:none}
.wa-widget.open .wa-fab .x{display:block}
.wa-panel{width:min(340px,calc(100vw - 36px));background:#fff;color:#111b21;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35);transform-origin:bottom right;transform:scale(.92) translateY(10px);opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.23,1,.32,1),opacity .22s}
.wa-widget.open .wa-panel{transform:none;opacity:1;pointer-events:auto}
/* CTA « Prendre RDV » — sous le bouton WhatsApp (widget en colonne) */
.wa-rdv{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--white);color:var(--navy);
  font:800 .88rem var(--f);letter-spacing:.01em;
  padding:.72rem 1.05rem;border-radius:12px;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  pointer-events:auto;
  transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s;
}
.wa-rdv:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.34)}
.wa-rdv:active{transform:translateY(0) scale(.97)}
.wa-rdv svg{width:19px;height:19px;fill:var(--ocean);flex:none}
.wa-rdv:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.wa-head{background:#075E54;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.wa-avatar{width:38px;height:38px;border-radius:50%;background:#25D366;display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:none}
.wa-head b{display:block;font-size:.95rem;line-height:1.2}
.wa-head small{font-size:.75rem;opacity:.85}
.wa-body{padding:14px 16px;background:#ECE5DD;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);background-size:18px 18px}
.wa-bubble{background:#DCF8C6;border-radius:10px 10px 10px 2px;padding:10px 12px;font-size:.9rem;line-height:1.45;color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.1);margin-bottom:12px}
.wa-body label{display:block;font-size:.75rem;font-weight:700;color:#54656f;margin:0 0 4px}
.wa-body textarea{width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;color:#111b21;background:#fff;border:1px solid #d1d7db;border-radius:10px;padding:10px 12px;resize:none;min-height:86px}
.wa-body textarea:focus{outline:2px solid #25D366;border-color:transparent}
.wa-send{width:100%;margin-top:10px;border:0;border-radius:10px;background:#25D366;color:#fff;font:800 .95rem var(--f);padding:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}
.wa-send:hover{background:#1ebe5a}
.wa-send svg{width:18px;height:18px;fill:currentColor}
.wa-hint{font-size:.68rem;color:#667781;text-align:center;margin-top:8px}
@media(max-width:520px){.wa-widget{right:12px;bottom:12px}.wa-fab{width:54px;height:54px}}

/* ── WordPress ── */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100%;left:0;z-index:100;background:var(--navy);color:var(--white);padding:.8rem 1.2rem;font-weight:700}
.skip-link:focus{top:0}
.wp-block-columns{margin-bottom:0}
.admin-bar header#hd{top:32px}
@media(max-width:782px){.admin-bar header#hd{top:46px}}

/* ── Responsive ── */
body.menu-open{overflow:hidden}   /* verrou du scroll pendant le menu mobile */
body.menu-open header#hd{z-index:200}   /* l'overlay passe au-dessus du widget + barre safe-area */
/* ── v1.5.3 · barre horizontale jusqu'à 1080 px seulement ──────────────────
   Mesuré en v1.5.2 : à 861 px le logo tombait à 0px de large et l'en-tête
   mesurait 114 px (CTA cassé sur 3 lignes). Sous 1080, burger + overlay. */
@media(max-width:1080px){
  .burger{display:block}
  nav{
    position:fixed;inset:0;z-index:60;
    background:var(--nav-bg);
    flex-direction:column;align-items:center;justify-content:center;
    font-size:1.35rem;font-weight:800;gap:0;
    transform:translateY(-100%);transition:transform .5s;
    padding:calc(6.5rem + env(safe-area-inset-top,0px)) 1.25rem calc(2.5rem + env(safe-area-inset-bottom,0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  nav.open{transform:none}
  nav ul{flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%}
  nav ul li{width:100%;text-align:center}
  nav ul li a{display:block;padding:1.05rem .5rem;letter-spacing:.01em}
  nav ul li:not(:last-child) a{border-bottom:1px solid var(--line)}
  nav ul li.current-menu-item a{color:var(--accent)}
  .burger{position:relative;z-index:70}
  /* Le CTA reste accessible dans le menu : entre 861 et 1080 px la barre
     horizontale n'a plus la place de l'afficher (logo écrasé à 0 px en v1.5.2). */
  #nv > .btn{display:inline-block;margin:1.5rem 0 0;padding:.8rem 1.5rem;font-size:1rem}
}

@media(max-width:860px){
  .hero-slider .slide{padding:6.5rem 0 11rem}
  /* ── Slide 1 mobile : la photo de Yassine devient le FOND du slide ──
     plein écran, semi-transparente, avec une dérive lente (animation visible). */
  .hero-slider .slide--methode .slide-media{
    position:absolute;left:0;right:0;top:0;bottom:0;
    width:100%;height:100%;max-width:none;transform:none;
    overflow:hidden;opacity:0;z-index:0;
  }
  .hero-slider .slide--methode.is-active .slide-media{
    animation:heroFade 1.1s .1s cubic-bezier(.23,1,.32,1) forwards;
  }
  .hero-slider .slide--methode .slide-media picture{display:block;width:100%;height:100%}
  .hero-slider .slide--methode .slide-media img{
    width:100%;height:100%;object-fit:cover;
    object-position:68% 28%;        /* recadrage étroit : on garde le visage */
    opacity:1;transform:scale(1.06);
    animation:heroDrift 26s ease-in-out infinite alternate;
  }
  .hero-slider .slide--methode .slide-media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(16,12,58,.62) 0%,rgba(16,12,58,.34) 26%,
               rgba(16,12,58,.58) 50%,rgba(16,12,58,.86) 74%,rgba(16,12,58,.95) 100%);
  }
  /* Le monogramme est masqué sur mobile : il recouvrirait le visage
     (76→356px) au lieu de flotter au-dessus d'un portrait centré.
     Le texte garde sa position (bloc aligné en bas de la diapositive). */
  .hero-slider .slide--methode .orb{display:none}
  .hero-ui{bottom:2.2rem}
  #nv > .btn{display:none;margin-left:0}   /* CTA "Prendre rendez-vous" retiré de l'en-tête mobile */
  .two{grid-template-columns:1fr}
  .pr .hl{transform:none}
  /* Founder/CTA : une seule colonne → la photo repasse en fond centré,
     le texte reprend toute la largeur et reste centré pour la lisibilité. */
  .founder,.cta{grid-template-columns:1fr;text-align:center}
  .founder > div,.founder .nums,.cta h2,.cta p,.cta .btn{grid-column:1}
  .founder > div,.founder .nums{text-align:center}
  .founder h2,.cta h2{max-width:none;margin-inline:auto}
  .cta p{margin-inline:auto}
  .cta .btn{justify-self:center}
  /* Le flottement du portrait remplace le transform de centrage : on le coupe
     en mobile, sinon la photo se recale sur l'origine (translate(-50%) perdu). */
  .founder.in .card-photo{animation:none}
  .founder .card-photo,.cta .card-photo{left:50%;right:auto;transform:translate(-50%,10%) scale(.94)}
  .founder.in .card-photo,.cta.in .card-photo{transform:translate(-50%,4%) scale(1)}
  /* Mobile : le texte passe sur la photo → voile blanc radial (le verre du CTA
     et du founder est clair dans les deux thèmes, un voile navy l'aurait cassé). */
  .founder::after,.cta::after{
    background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.62) 58%,rgba(255,255,255,.86) 100%);
  }
  .hero-slider .slide{padding:6.5rem 0 8.6rem}
  .slide--entreprise .wrap{max-width:100%}
  .slide--entreprise .lead{max-width:100%}
  .hero-ui{bottom:3rem;gap:.7rem}
  .hero-arrow{width:38px;height:38px;font-size:1.2rem}
  .hero-dot{width:8px;height:8px}
  .hero-dot.is-active{width:24px}
}
@media(max-width:520px){
  .slide--entreprise h2{font-size:clamp(1.9rem,9vw,2.6rem)}
  .slide-tags li{font-size:.74rem;padding:.36rem .7rem}
  .slide--entreprise .acts{gap:.6rem}
  .slide--entreprise .acts .btn{padding:.75rem 1.15rem;font-size:.92rem}
}

/* ── Short viewports (≤900px high): tighten the slide-1 stack so the
   portrait keeps its face clear of the monogram — layoutHeroPhoto()
   in main.js sizes the photo from these live metrics ── */
@media(max-height:900px){
  .hero-slider .orb{margin-bottom:1.4rem}
  .hero-slider .acts{margin-top:1.1rem}
  .hero-slider .slide{padding-bottom:8rem}
  .hero-ui{bottom:2.9rem}
}
@media(max-height:900px) and (min-width:861px){
  .hero-slider .orb{width:clamp(150px,17vw,166px)}
}
/* Very short viewports (≤700px high — small phones, short laptop windows):
   the stack barely fits, so shrink the monogram and tighten it further — the
   freed space goes to the portrait, which stays fully clear of the orb. */
@media(max-height:700px){
  .hero-slider .orb{width:104px;margin-bottom:1rem}
  .hero-slider .acts{margin-top:.9rem}
  .hero-slider .slide{padding-bottom:7rem}
  .hero-ui{bottom:2.5rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.slide--entreprise .wrap > *{opacity:1;transform:none}.slide-media img{opacity:.96;transform:none}
  .orb::before{animation:none!important;opacity:.9;transform:none!important}

  /* ⚠️ Le `animation:none!important` ci-dessus tue TOUTES les keyframes qui
     amènent un élément de opacity:0 à 1 (heroFade, orbPhoto, slideUp).
     Sans ceci, sur un téléphone en reduced-motion (Redmi 9C / Android Go —
     testé et reproduit : is-active=1 mais opacité 0), la photo de Yassine
     ET le titre/lead/boutons du slide 1 restaient INVISIBLES.
     On force l'état FINAL des keyframes. */
  .hero-slider .slide--methode .slide-media{opacity:1 !important;transform:none !important}
  /* La boucle démarre à opacity:0 : sans animation, on force la 1re photo. */
  .hero-media--loop picture:first-of-type img{opacity:1 !important}
  .slide.is-active .slide-media img,.slide--methode .slide-media img{opacity:.96 !important;transform:none !important}
  .hero-slider .slide--methode .wrap > h1,
  .hero-slider .slide--methode .wrap > p.lead,
  .hero-slider .slide--methode .wrap > .acts{opacity:1 !important;transform:none !important}

  /* ⚠️ On conserve le CROSSFADE entre les diapositives : c'est une transition
     d'ÉTAT (opacité), pas un mouvement. Le `transition:none!important` global
     la coupait → plus aucune transition entre les slides sous reduced-motion.
     On la restaure pour le hero-slider (durée réduite, sans mouvement). */
  .hero-slider .slide{transition:opacity .35s linear !important}
}

/* ── Témoignages mixte ── */
.tgrid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tsec{margin-top:2.4rem}
.tsec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.tsec-head h3{font-size:clamp(1.2rem,2.4vw,1.8rem)}
.tcarousel{position:relative;overflow:visible}
.tcar-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 .2rem 1rem;scrollbar-width:none}
.tcar-track::-webkit-scrollbar{display:none}
.tcarousel .tcard{flex:0 0 min(420px,85vw);scroll-snap-align:start}
.tvideo{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.tvideo video{width:100%;height:auto;display:block;max-height:520px}
.tcar-prev,.tcar-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(207,239,250,.4);background:rgba(16,12,58,.7);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;pointer-events:auto}
.tcar-prev{left:-12px}
.tcar-next{right:-12px}
.tcard{background:var(--glass);border:1px solid var(--line);border-radius:24px;padding:1.6rem;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:1rem}
.tcard q{quotes:"« " " »";font-size:.98rem;color:var(--heading);display:block;margin:0;line-height:1.7}
.tcard .who{margin:auto 0 0;font-size:.88rem;opacity:.7}
.tcard .chip{align-self:flex-start;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--chip-line);font-size:.85rem}
.taudio{display:flex;align-items:center;gap:.8rem;background:var(--soft);border-radius:999px;padding:.5rem .9rem .5rem .5rem;overflow:hidden}
.taudio .pl{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--sky);color:var(--navy);font-size:.9rem;cursor:pointer}
.taudio .wf{display:flex;align-items:center;justify-content:space-between;gap:1px;height:36px;flex:1 1 auto;min-width:0;overflow:hidden}.taudio .wf i{display:block;flex:1 1 0;width:auto;min-width:1px;max-width:3px;border-radius:2px;background:var(--sky);height:var(--h);transform-origin:center bottom}
.taudio.play .wf i{animation:wv .8s ease-in-out infinite alternate;animation-delay:calc(var(--i)*55ms)}
.taudio audio{display:none}
.tsnap{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.tsnap img{width:100%;height:auto;display:block;object-fit:contain}
/* ── Cartes d'avis : le visuel EST la carte ────────────────────────────────
   Demande client du 26/10/2026 : retirer le fond en dégradé, « ne garder que
   la box ». Les WebP sont détourés (alpha + ombre + arrondis déjà dans l'image)
   → aucun cadre propre, sinon double bordure. Les cartes gardent la hauteur
   uniforme du carrousel (alignement par le haut, le vide est transparent). */
.tcard.tcard--snap{background:none;border:0;padding:0;border-radius:0;backdrop-filter:none;box-shadow:none;gap:0}
.tcard--snap .tsnap{border:0;background:none;border-radius:0;overflow:visible}
/* Dernier slide : renvoi vers les avis publiés sur Facebook (aucune page
   « témoignages » sur le site — on n'invente pas de contenu). */
.tcard--more{justify-content:center;align-items:flex-start;gap:.7rem;padding:2rem 1.7rem}
.tmore-k{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tmore-q{margin:0;font-size:.98rem;line-height:1.6;color:var(--text)}
.tmore-a{align-self:flex-start;margin-top:.4rem;display:inline-flex;align-items:center;gap:.45rem;padding:.72rem 1.25rem;border-radius:999px;background:var(--heading);color:#fff;font-weight:800;font-size:.92rem;text-decoration:none;transition:transform .25s ease-out,box-shadow .25s ease-out}
.tmore-a:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,32,46,.28)}
@media(prefers-reduced-motion:reduce){.tmore-a{transition:none}}

/* ── Références B2B ── */
.refs{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.refs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}.nums .fig:last-child{grid-column:1/-1}}
@media (max-width:640px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ref{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:1.2rem;text-align:center;transition:transform .3s,border-color .3s;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.ref:hover{transform:translateY(-4px);border-color:var(--sky)}
.ref .lp{height:70px;width:100%;border-radius:12px;background:rgba(255,255,255,.95);color:var(--navy);display:grid;place-items:center;padding:.4rem .8rem;overflow:hidden}
.ref .lp img{max-height:58px;max-width:90%;object-fit:contain}
.ref .ref-name{font:800 .8rem var(--f);letter-spacing:.02em;text-align:center;line-height:1.3}
.ref .ref-link{color:var(--accent);font-weight:700;font-size:.9rem;text-decoration:none}
.ref .ref-link:hover{text-decoration:underline}

/* Hero backgrounds for inner pages */
.page-entreprises .hero.sm{background:url(assets/img/hero_sections-entreprises.jpg) center/cover no-repeat;position:relative;animation:none}
.page-mentoring .hero.sm{background:url(assets/img/hero_sections-mentoring.jpg) center/cover no-repeat;position:relative;animation:none}
.page-hypnotherapie .hero.sm{background:url(assets/img/hero_sections-hypnotherapie.jpg) center/cover no-repeat;position:relative;animation:none}
.page-entreprises .hero.sm::before,
.page-mentoring .hero.sm::before,
.page-hypnotherapie .hero.sm::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,12,58,.72) 0%,rgba(16,12,58,.88) 100%);z-index:0}
.page-entreprises .hero.sm .wrap,
.page-mentoring .hero.sm .wrap,
.page-hypnotherapie .hero.sm .wrap{position:relative;z-index:1}

/* ── Protection des médias (visuel + tactile) ── */
img, picture, video, audio, .taudio, .aud {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ── Carte Google Maps ── */
.map{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--soft);line-height:0;box-shadow:0 30px 60px -50px var(--shade)}
.map iframe{display:block;width:100%;height:100%;min-height:340px;border:0;filter:saturate(.95)}
.map-cap{line-height:1.6;font-size:.9rem;opacity:.72;margin:.9rem 0 0;text-align:center}
footer .map{flex:1 1 300px;max-width:380px;border-radius:18px;box-shadow:none}
footer .map iframe{min-height:220px}
@media(max-width:860px){
  footer .map{max-width:none}
  .map iframe{min-height:280px}
}

/* ── Thème clair : finitions ──
   Le héros garde son fond sombre volontaire : son texte est forcé en blanc ici.
   Le CTA et le founder sont du verre teinté → encre foncée dans les deux. */
[data-theme="light"] .hero h1,[data-theme="light"] .hero h2,[data-theme="light"] .hero p,
[data-theme="light"] .hero-slider h1,[data-theme="light"] .hero-slider h2,[data-theme="light"] .hero-slider p{color:#fff}
[data-theme="light"] .cta h2{color:#08202E}
[data-theme="light"] .cta p{color:#1B3A47}
/* founder : même verre que le CTA → encre foncée (cf. bloc .founder) */
[data-theme="light"] .btn:not(.o){box-shadow:0 14px 30px -18px rgba(16,12,58,.55),inset 0 0 0 1px rgba(16,12,58,.12)}
[data-theme="light"] .chip.w{color:#0B6B37}
[data-theme="light"] .chip.f{color:#17419B}
[data-theme="light"] .lp{background:#fff;border:1px dashed rgba(16,12,58,.2)}
[data-theme="light"] .ref .lp{border:1px dashed rgba(16,12,58,.2)}
[data-theme="light"] nav a:not(.btn){opacity:.92}

/* ── v1.5.2 · Founder : chaque bloc de texte dans son encadré « verre dur » ──
   Demande client : « placer chaque élément de texte dans un encadré
   rectangulaire avec coins ronds avec fond blur hard, pour mettre en avant
   les textes et améliorer leur lisibilité ».
   La carte founder est déjà du verre clair (encre foncée dans les DEUX
   thèmes) : un panneau sombre casserait la recette. Les panneaux sont donc
   blancs et plus opaques que la carte (0,72 / 0,82), avec un `blur(22px)` qui
   détache le texte du portrait — le flou « dur » demandé — et un filet
   intérieur qui donne l'arête du verre.
   `max-width:none` sur le h2 : à 22ch le panneau du titre était plus étroit
   que celui du paragraphe (bords en escalier). Ici les cinq panneaux
   partagent exactement la largeur de la colonne de texte. */
.founder h2,
.founder > div p,
.founder .fig{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(27,21,82,.12);
  border-radius:16px;
  padding:.62rem .95rem;
  -webkit-backdrop-filter:blur(24px) saturate(1.25);
  backdrop-filter:blur(24px) saturate(1.25);
  box-shadow:0 18px 38px -28px rgba(6,26,36,.62),inset 0 1px 0 rgba(255,255,255,.92);
}
[data-theme="light"] .founder h2,
[data-theme="light"] .founder > div p,
[data-theme="light"] .founder .fig{
  background:rgba(255,255,255,.94);
  border-color:rgba(27,21,82,.09);
  box-shadow:0 18px 38px -30px rgba(8,32,46,.5),inset 0 1px 0 #fff;
}
.founder h2{max-width:none;margin:0 0 .55rem}
.founder > div p{margin:0}
/* les écarts deviennent des gouttières ENTRE panneaux (0,15rem collait les
   boîtes l'une à l'autre) */
.founder .nums{gap:.5rem}
.founder .fig{padding:.5rem .95rem;margin:0}
.founder .fig + .fig{margin-top:0}
/* le libellé est à 72 % d'opacité (hiérarchie sur fond de carte) : sur un
   panneau blanc il tombait à 3,1–3,9:1. Mesuré, corrigé. */
.founder .fig span{opacity:.95}
@media (max-width:700px){
  /* panneaux empilés : le libellé passe sous le chiffre, tout est centré */
  .founder .fig{padding:.5rem .8rem}
  .founder h2{padding:.7rem .85rem}
  .founder > div p{padding:.7rem .85rem}
}

/* ── v1.5.2 · CTA des pages Hypnothérapie / Mentoring / ALCHIMIA Entreprises ──
   Demande client : « centrer tous les éléments au milieu, et faire moins
   d'espacements entre textes ».
   Ces trois pages portent `.cta .cta-with-photo` (sans `.cta--home`, qui a
   déjà son traitement) : la grille héritée `.cta` plaçait la photo en .95fr
   et le texte en 1.05fr, aligné à GAUCHE (`align-items:flex-start`), avec le
   `style="text-align:left"` en ligne et 32 px de gap de colonne + 16 px de
   gap de pile + 38,4 px sous le titre.
   Ici : une seule colonne centrée (photo, titre, texte, bouton sur le même
   axe), les trois écarts resserrés, et le voile passé à la verticale — un
   dégradé horizontal n'a plus de sens quand le texte est au centre. */
.cta.cta-with-photo:not(.cta--home){
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-content:center;
  gap:clamp(.85rem,1.5vw,1.15rem);
  text-align:center;
  max-width:740px;
  margin-inline:auto;
  padding-inline:clamp(1.1rem,3vw,2rem);
}
.cta.cta-with-photo:not(.cta--home)::after{
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.36) 55%,rgba(255,255,255,.24) 100%);
}
[data-theme="light"] .cta.cta-with-photo:not(.cta--home)::after{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.46) 55%,rgba(255,255,255,.3) 100%);
}
.cta.cta-with-photo:not(.cta--home) .cta-photo{justify-self:center}
.cta.cta-with-photo:not(.cta--home) .cta-content{
  align-items:center;
  text-align:center;
  gap:0;
  margin-inline:auto;
}
.cta.cta-with-photo:not(.cta--home) h2{margin:0;max-width:26ch}
.cta.cta-with-photo:not(.cta--home) .cta-content p{margin:.5rem auto 0;max-width:46ch}
.cta.cta-with-photo:not(.cta--home) .btn{margin-top:1.05rem;align-self:center;justify-self:center}
@media (max-width:720px){
  .cta.cta-with-photo:not(.cta--home){gap:.9rem;padding-inline:1.1rem}
  .cta.cta-with-photo:not(.cta--home) .cta-photo{width:clamp(132px,38vw,180px);height:clamp(132px,38vw,180px)}
  .cta.cta-with-photo:not(.cta--home) h2{max-width:22ch}
}

/* ── v1.5.3 · en-tête plus bas, hero dégagé ─────────────────────────────────
   Demande client : réduire un peu la hauteur de l'en-tête pour qu'il ne masque
   pas les hero. Mesuré avant : 73,7 px à 1440 (correct), mais 113,7 px de 861 à
   1030 px (le CTA se cassait sur 3 lignes) et 93,7 px jusqu'à 1100.
   Après : 59–63 px partout. Rien ne change dans la composition. */
@media(max-width:1240px){
  nav{gap:1rem}
  nav ul{gap:1rem}
  nav > .btn{font-size:.87rem;padding:.58rem .95rem;margin-left:.2rem}
}
@media(min-width:861px){
  .tgl{width:40px;height:40px}          /* 42 → 40 : le contenu de la barre suit */
  .logo img,.lk{height:34px}            /* 34 px reste lisible, le lockup garde son ratio */
}
@media(max-width:860px){
  .logo img,.lk{height:32px}            /* barre mobile : logo 32, burger 44 intact */
}

/* Split layout : texte à gauche / image à droite */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,4rem);align-items:center;margin-bottom:clamp(3rem,8vw,5rem)}
.split-content{text-align:left}
.split-content h2{margin:0;text-align:left;font-size:clamp(2rem,4vw,3.2rem)}
.split-content .prose{display:flex;flex-direction:column;gap:1rem;max-width:680px;margin:1.2rem 0 0;text-align:left;align-items:flex-start}
.split-content .prose p{margin:0;color:var(--sub);font-size:clamp(1rem,2vw,1.08rem);line-height:1.8;text-align:left}
.split-media{position:relative}
.split-media img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh);object-fit:cover;aspect-ratio:4/5}
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:clamp(1.6rem,6vw,2.4rem);text-align:left}
  .split-content{text-align:left}
  .split-content h2{text-align:left}
  .split-content .prose{margin:1rem 0 0;text-align:left;align-items:flex-start}
  .split-content .prose p{text-align:left}
}