/* ==========================================================================
   ATELIER DU FUTUR PAPA — Design System
   Maquette V2 · Lapetitecreche
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand */
  --ink:#160B3C;
  --ink-2:#2A1758;
  --ink-soft:#605A83;
  --violet:#6D3FD1;
  --violet-600:#5A2CBC;
  --violet-700:#46209A;
  --violet-400:#8B63E4;
  --lilac:#B79BF0;
  --lilac-200:#DCCDF8;
  --lilac-100:#EBE2FC;
  --lilac-50:#F5F0FE;
  --cream:#FBF9FF;
  --white:#FFFFFF;
  --gold:#E3A93C;
  --mint:#3FBF9A;
  --line:#E7DDF9;
  --line-soft:#F0E9FB;

  /* Gradients */
  /* Prune — couleur relevée sur le panneau photographié par le client.
     C'est désormais le point le plus foncé de TOUS les dégradés du site. */
  --plum:#57397A;
  --plum-2:#6E5194;
  --grad-violet:linear-gradient(135deg,#7B4BDD 0%,#57397A 100%);
  --grad-deep:linear-gradient(160deg,#6E5194 0%,#57397A 100%);
  /* Fond lavande — couleur validée par le client (repère vert sur la capture) */
  --lav:#ADA6E9;
  --lav-1:#A69EE7;
  --lav-2:#BCB6EF;
  --grad-lav:linear-gradient(150deg,#A69EE7 0%,#ADA6E9 45%,#BCB6EF 100%);
  --lav-line:#8F86DC;
  --lav-ink:#1B0C46;
  --lav-soft:#3B2B71;
  --grad-soft:linear-gradient(140deg,#F5F0FE 0%,#EBE2FC 100%);
  --grad-text:linear-gradient(100deg,#6D3FD1 0%,#B79BF0 100%);

  /* Type */
  --font-display:'Outfit','Poppins',system-ui,-apple-system,sans-serif;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-script:'Caveat',cursive;

  /* Space & shape */
  --r-xs:8px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-full:999px;
  --max:1200px;
  --gutter:24px;

  /* Elevation */
  --sh-1:0 2px 8px rgba(22,11,60,.05);
  --sh-2:0 10px 30px rgba(22,11,60,.08);
  --sh-3:0 20px 50px rgba(22,11,60,.12);
  --sh-4:0 32px 80px rgba(22,11,60,.18);
  --sh-violet:0 14px 34px rgba(109,63,209,.28);

  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden retiré : le mettre à la fois sur html ET body transforme
     body en conteneur de défilement à part entière (règle CSS de calcul de
     l'overflow), ce qui casse le position:sticky de tous ses enfants directs
     (le header). html{overflow-x:hidden} suffit déjà à empêcher le débordement
     horizontal des formes décoratives. */
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--lilac-200);color:var(--ink)}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.025em;
  font-weight:700;
}
h1{font-size:clamp(2.5rem,5.4vw,4.35rem);letter-spacing:-.035em}
h2{font-size:clamp(2rem,3.6vw,3.05rem);letter-spacing:-.03em}
h3{font-size:clamp(1.25rem,1.7vw,1.55rem)}
h4{font-size:1.08rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:700}
.lead{font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.62;color:var(--ink-soft)}
.tx-violet{color:var(--violet)}
.tx-light{color:var(--lilac)}
.script{font-family:var(--font-script);font-weight:600;font-size:1.5em;line-height:.9;color:var(--violet)}

.grad-text{
  /* inline-block (et non inline) : si le texte passe sur deux lignes
     (titre centré, desktop large), un élément inline "fragmenté" positionne
     son ::after par rapport à l'union des deux lignes — souvent décalée,
     d'où le trait invisible/mal placé en desktop. En inline-block, l'élément
     reste une seule boîte même s'il enveloppe sur deux lignes en interne. */
  position:relative;display:inline-block;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Trait indépendant sous le texte, dessiné en léger arc (pas une barre
   droite) via un petit SVG, révélé par un clip-path qui balaie de gauche
   à droite pour apparaître puis se résorbe dans le même sens — jamais
   écrasé/déformé par l'animation, contrairement à un scaleX. */
.grad-text::after{
  content:"";position:absolute;left:0;right:0;bottom:-.22em;height:.5em;min-height:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M3,5 Q50,17 97,5' stroke='%23B79BF0' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
  clip-path:inset(0 100% 0 0);
  animation:gradUnderlineSlide 3.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes gradUnderlineSlide{
  0%   {clip-path:inset(0 100% 0 0)}
  40%  {clip-path:inset(0 0 0 0)}
  60%  {clip-path:inset(0 0 0 0)}
  100% {clip-path:inset(0 0 0 100%)}
}

/* Marker highlight under a word */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.32em;
  background:var(--lilac-200);border-radius:.2em;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .25s;
}
.in .mark::after,.mark.in::after{transform:scaleX(1)}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:820px}
.container-wide{max-width:1340px}
section{position:relative;padding:clamp(64px,8vw,120px) 0}
.sec-tight{padding-block:clamp(48px,5vw,80px)}
.grid{display:grid;gap:28px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.split-l{grid-template-columns:1.05fr .95fr}
.split-r{grid-template-columns:.95fr 1.05fr}
/* Par défaut, une cellule de grille refuse de rétrécir sous la largeur de son
   contenu le plus large (ex. le badge "eyebrow" tout en majuscules). Sur
   mobile, ça pousse toute la colonne — et donc la page — à déborder à
   droite. min-width:0 autorise la cellule à rétrécir et le texte à passer
   à la ligne normalement. */
.split > *,.hero-grid > *{min-width:0}
.center{text-align:center}
.bg-soft{background:var(--grad-soft)}
.bg-white{background:var(--white)}
.bg-lilac{background:var(--lilac-50)}
.bg-deep{background:var(--grad-lav);color:var(--lav-soft)}
.bg-deep h1,.bg-deep h2,.bg-deep h3,.bg-deep h4,.bg-deep strong{color:var(--lav-ink)}
.bg-deep p,.bg-deep li,.bg-deep .lead{color:var(--lav-soft)}
.bg-deep .tx-light,.leadband .tx-light{color:var(--violet-700)}
.bg-deep small,.leadband small{color:var(--lav-soft)}

/* Section heading block */
.sec-head{max-width:720px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.sec-head.left{margin-inline:0;text-align:left}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;max-width:100%;
  font-family:var(--font-body);font-size:.74rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--violet);
  background:var(--lilac-100);border:1px solid var(--line);
  padding:8px 16px;border-radius:var(--r-full);margin-bottom:20px;align-self:flex-start;
}
.sec-head .eyebrow{align-self:center}
.sec-head.left .eyebrow{align-self:flex-start}
.bg-deep .eyebrow{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);color:var(--violet-700)}
.eyebrow .ico{width:15px;height:15px}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:pulseDot 2s infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ---------- 5. ICONS ---------- */
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:18px;height:18px}
.ico-lg{width:32px;height:32px;stroke-width:1.5}
.icon-badge{
  width:56px;height:56px;border-radius:18px;flex:none;
  display:grid;place-items:center;color:var(--violet);
  background:var(--lilac-100);border:1px solid var(--line);
  transition:transform .4s var(--ease-out),background .3s,color .3s;
}
.icon-badge.solid{background:var(--grad-violet);color:#fff;border-color:transparent;box-shadow:var(--sh-violet)}
.icon-badge.sm{width:44px;height:44px;border-radius:14px}
.bg-deep .icon-badge{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92);color:var(--violet-700)}

/* ---------- 6. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:var(--r-full);
  font-family:var(--font-body);font-weight:700;font-size:.97rem;letter-spacing:-.01em;
  border:2px solid transparent;white-space:nowrap;overflow:hidden;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s,color .3s,border-color .3s;
}
.btn .ico{width:19px;height:19px;stroke-width:2;transition:transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn:hover .ico{transform:translateX(3px)}

.btn-primary{background:var(--grad-violet);color:#fff;box-shadow:var(--sh-violet)}
.btn-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);
}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:hover{box-shadow:0 20px 44px rgba(109,63,209,.4)}

.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet);background:var(--lilac-50)}
.bg-deep .btn-ghost{border-color:var(--lav-ink);color:var(--lav-ink)}
.bg-deep .btn-ghost:hover{background:var(--violet);border-color:var(--violet);color:#fff}

.btn-light{background:#fff;color:var(--violet-700);box-shadow:var(--sh-2)}
.btn-light:hover{box-shadow:var(--sh-3)}

.btn-sm{padding:11px 20px;font-size:.87rem}
.btn-lg{padding:18px 32px;font-size:1rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Text link with animated arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--violet);
  position:relative;padding-bottom:2px;
}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.link-arrow:hover::after{transform:scaleX(1);transform-origin:left}
.link-arrow .ico{width:17px;height:17px;stroke-width:2.2;transition:transform .35s var(--ease-out)}
.link-arrow:hover .ico{transform:translateX(4px)}

/* ---------- 7. DECOR ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:0}
.blob-a{width:520px;height:520px;background:radial-gradient(circle,#C8AEF7 0%,transparent 70%)}
.blob-b{width:420px;height:420px;background:radial-gradient(circle,#9C77EC 0%,transparent 70%);opacity:.35}
.blob-c{width:340px;height:340px;background:radial-gradient(circle,#E7D6FF 0%,transparent 70%)}
.float-slow{animation:floaty 14s ease-in-out infinite}
.float-slower{animation:floaty 20s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(24px,-26px) scale(1.06)}66%{transform:translate(-18px,18px) scale(.96)}}

.dots{position:absolute;width:120px;height:120px;opacity:.5;pointer-events:none;
  background-image:radial-gradient(var(--lilac) 1.6px,transparent 1.6px);
  background-size:14px 14px;z-index:0}

.wave-top,.wave-bottom{position:absolute;left:0;width:100%;line-height:0;z-index:1;pointer-events:none}
.wave-top{top:-1px}
.wave-bottom{bottom:-1px}
.wave-top svg,.wave-bottom svg{width:100%;height:clamp(40px,5vw,80px);display:block}

.container,.sec-head,section > .container{position:relative;z-index:2}

/* ---------- 8. HEADER ---------- */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-violet);z-index:200;transition:width .1s linear}

/* Le thème parent Hello Elementor définit aussi une classe .site-header
   (pour son propre Theme Builder), chargée après ce fichier : elle impose
   position:relative, max-width, margin auto et display:flex, ce qui casse
   le sticky et rétrécit le bandeau. On regagne la priorité avec un
   sélecteur plus spécifique, sans rien changer visuellement. */
body .site-header.site-header{
  display:block;width:100%;max-width:none;margin-inline:0;padding-inline:0;padding-block:0;
  position:sticky;top:0;z-index:120;
  background:rgba(251,249,255,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,box-shadow .35s;
}
body .site-header.site-header.scrolled{background:rgba(255,255,255,.9);border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(22,11,60,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px;transition:height .35s var(--ease)}
body .site-header.site-header.scrolled .nav{height:68px}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{width:44px;height:44px;flex:none;transition:transform .5s var(--ease-out)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.02em}
.brand-txt span{font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links > li > a{
  position:relative;display:block;padding:10px 14px;border-radius:var(--r-full);
  font-size:.93rem;font-weight:600;color:var(--ink);transition:color .25s,background .25s;
}
.nav-links > li > a:hover{background:var(--lilac-100);color:var(--violet)}
.nav-links > li > a.active{color:var(--violet)}
.nav-links > li > a.active::after{
  content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;border-radius:50%;
  background:var(--violet);transform:translateX(-50%);
}

/* dropdown */
.has-drop{position:relative}
.drop-toggle,.nav-links > li > a.drop-toggle{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.drop-toggle .ico{width:15px;height:15px;stroke-width:2.4;transition:transform .3s}
.has-drop:hover .drop-toggle .ico{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:290px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:10px;opacity:0;visibility:hidden;transition:.3s var(--ease-out);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--r-sm);transition:background .25s}
.drop a:hover{background:var(--lilac-50)}
.drop a .icon-badge{width:38px;height:38px;border-radius:11px}
.drop a .ico{width:19px;height:19px}
.drop b{display:block;font-size:.9rem;font-family:var(--font-display);color:var(--ink)}
.drop small{font-size:.78rem;color:var(--ink-soft);line-height:1.4;display:block}

.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-cta-mobile{display:none}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;place-items:center}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease-out);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease-out)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}

/* ---------- 9. HERO ---------- */
.hero{position:relative;padding:clamp(48px,6vw,86px) 0 clamp(72px,8vw,120px);overflow:hidden;
  background:
    radial-gradient(900px 620px at 88% -8%,#E3D3FB 0%,transparent 62%),
    radial-gradient(700px 520px at 4% 26%,#F0E8FE 0%,transparent 60%),
    var(--cream);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,70px);align-items:center}
.hero h1{margin-bottom:22px;font-size:clamp(2.25rem,4.3vw,3.7rem)}
.page-hero h1{font-size:clamp(2.05rem,3.7vw,3.15rem)}
.hero .lead{max-width:540px}
.hero-ctas{margin:32px 0 30px}

.hero-proof{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:26px;border-top:1px solid var(--line)}
.proof-item{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:var(--ink)}
.proof-item .ico{width:19px;height:19px;color:var(--violet);stroke-width:2.2}

/* Hero visual */
.hero-visual{position:relative}
.hero-frame{
  position:relative;border-radius:clamp(28px,4vw,46px);overflow:hidden;
  box-shadow:var(--sh-4);aspect-ratio:4/4.7;background:var(--lilac-100);
}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  transform:scale(1.06);transition:transform 1.2s var(--ease-out)}
.hero-visual:hover .hero-frame img{transform:scale(1.12)}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(22,11,60,.42) 100%)}

.hero-chip{
  position:absolute;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 17px;box-shadow:var(--sh-3);z-index:3;
}
.hero-chip .num{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--violet);line-height:1}
.hero-chip .lbl{font-size:.76rem;font-weight:600;color:var(--ink);line-height:1.32}
/* Les cartes flottantes restent TOUJOURS à l'intérieur du cadre de l'image :
   marges internes + amplitude d'animation réduite (validation client). */
.hero-chip{max-width:min(60%,268px)}
.hero-chip.c1{left:18px;top:6%;animation:chipFloat 9s ease-in-out infinite}
.hero-chip.c2{right:18px;top:44%;animation:chipFloat 11s ease-in-out infinite reverse}
.hero-chip.c3{left:18px;bottom:22px;animation:chipFloat 13s ease-in-out infinite}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hero-ring{position:absolute;inset:-6% -6% -6% -6%;border:1.5px dashed var(--lilac-200);border-radius:50%;opacity:.7;animation:spin 42s linear infinite;z-index:0}
@keyframes spin{to{transform:rotate(360deg)}}

.scroll-hint{display:inline-flex;align-items:center;gap:10px;margin-top:38px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.scroll-hint .mouse{width:22px;height:34px;border:2px solid var(--lilac);border-radius:12px;position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:3px;background:var(--violet);transform:translateX(-50%);animation:scrollDot 1.8s infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- 9 bis. BLOC MANIFESTE « MÉTHODE PAPA EXPERT » ---------- */
.statement{text-align:center;max-width:1200px;margin-inline:auto}
.st-kicker{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(3rem,8vw,5.6rem);color:var(--lav-ink);margin:0 0 .18em}
.st-body{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;line-height:1.32;
  font-size:clamp(1.25rem,2.7vw,2.05rem);color:var(--lav-ink);margin:0 auto;max-width:1200px}
.st-body em{font-style:normal;color:var(--violet-700)}
.st-rule{display:block;width:76px;height:7px;border-radius:6px;background:var(--violet-600);
  margin:clamp(26px,3.4vw,42px) auto;transform-origin:center;
  transform:scaleX(0);transition:transform .8s var(--ease-out) .2s}
.in .st-rule,.st-rule.in{transform:scaleX(1)}
.st-title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.45rem,3vw,2.15rem);color:var(--violet-700);margin:0 0 18px}
.st-tags{
  display:inline-block;padding-top:16px;border-top:1.5px solid var(--violet-600);
  font-size:clamp(.98rem,1.5vw,1.15rem);font-weight:600;letter-spacing:.04em;
  color:var(--violet-700);margin:0}
.st-tags span{padding:0 .35em}
.statement .btn-row{justify-content:center;margin-top:clamp(28px,3.5vw,40px)}
@media (max-width:600px){
  .st-body br{display:none}
}

/* ---------- 8 bis. TEXTE QUI CHANGE TOUT SEUL ---------- */
.rotator{position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap}
.rotator .rot-sizer{visibility:hidden;pointer-events:none}
.rotator .rot-word{
  position:absolute;left:0;top:0;white-space:nowrap;
  background:linear-gradient(100deg,var(--plum) 0%,#6D3FD1 48%,#8B63E4 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:0;transform:translateY(.42em) rotate(1.2deg);
  transition:opacity .42s var(--ease-out),transform .55s var(--ease-out);
}
.rotator .rot-word.is-in{opacity:1;transform:none}
.rotator .rot-word.is-out{opacity:0;transform:translateY(-.42em) rotate(-1.2deg)}
.rotator .rot-caret{
  display:inline-block;width:.06em;min-width:3px;height:.82em;margin-left:.1em;
  vertical-align:-.06em;border-radius:2px;background:var(--violet);
  animation:caretBlink 1.15s steps(1) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- 9 ter. BLOC VIDÉO ---------- */
.video-wrap{position:relative;max-width:960px;margin-inline:auto}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:clamp(20px,2.6vw,32px);
  overflow:hidden;background:var(--ink-2);box-shadow:var(--sh-4);cursor:pointer;
  border:1px solid var(--line);
}
.video-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  transition:transform 1s var(--ease-out),filter .5s}
.video-frame:hover img{transform:scale(1.05)}
.video-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,11,60,.18) 0%,rgba(22,11,60,.55) 100%);
  transition:opacity .4s}
.video-frame:hover::after{opacity:.85}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.video-frame.is-playing::after,.video-frame.is-playing .play-btn,
.video-frame.is-playing .video-cap{display:none}

.play-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(72px,7vw,92px);height:clamp(72px,7vw,92px);border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--violet-700);
  box-shadow:0 18px 44px rgba(22,11,60,.36);
  transition:transform .35s var(--ease-out),background .3s,color .3s;
}
.play-btn svg{width:30px;height:30px;fill:currentColor;stroke:none;margin-left:4px}
.video-frame:hover .play-btn{transform:translate(-50%,-50%) scale(1.09);
  background:var(--grad-violet);color:#fff}
.play-btn::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);animation:playPulse 2.6s ease-out infinite}
@keyframes playPulse{0%{transform:scale(.86);opacity:.9}100%{transform:scale(1.22);opacity:0}}

.video-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:clamp(18px,2.4vw,30px)}
.video-cap b{display:block;font-family:var(--font-display);font-size:clamp(1rem,1.5vw,1.28rem);
  color:#fff;line-height:1.25}
.video-cap small{font-size:.84rem;color:rgba(255,255,255,.78)}
.video-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);
  border-radius:var(--r-full);padding:8px 15px;font-size:.78rem;font-weight:700;color:var(--ink)}
.video-chip .ico{width:15px;height:15px;color:var(--violet)}
.video-note{text-align:center;font-size:.84rem;margin-top:20px}

@media(max-width:640px){
  .video-cap{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- 10. MARQUEE ---------- */
.marquee{overflow:hidden;background:var(--grad-lav);padding:26px 0;position:relative;
  border-top:1px solid var(--lav-line);border-bottom:1px solid var(--lav-line)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#A69EE7,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#BCB6EF,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:14px;padding:0 34px;
  font-family:var(--font-display);font-size:1.24rem;font-weight:700;color:var(--lav-ink);white-space:nowrap}
.marquee-item .ico{width:22px;height:22px;color:var(--violet-700)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 11. CARDS ---------- */
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);box-shadow:var(--sh-1);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s;
  display:flex;flex-direction:column;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(139,99,228,.11),transparent 62%);
  transition:opacity .4s;pointer-events:none;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--lilac-200)}
.card:hover::before{opacity:1}
.card:hover .icon-badge{transform:rotate(-7deg) scale(1.08);background:var(--grad-violet);color:#fff;border-color:transparent}
.card h3{margin:18px 0 10px}
.card p{font-size:.96rem}
.card .ico-arrow{margin-top:auto;padding-top:20px}

.card-flat{background:transparent;border:0;box-shadow:none;padding:0}
.card-flat:hover{transform:none;box-shadow:none}

/* Offer cards */
.offer{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.offer:hover{transform:translateY(-10px);box-shadow:var(--sh-3)}
.offer-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--lilac-100)}
.offer-media img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;transition:transform 1s var(--ease-out)}
.offer:hover .offer-media img{transform:scale(1.08)}
.offer-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,11,60,.05),rgba(22,11,60,.35))}
.offer-tag{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.94);border-radius:var(--r-full);padding:7px 14px;
  font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-700)}
.offer-tag .ico{width:14px;height:14px;stroke-width:2.2}
.offer-body{padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;flex:1}
.offer-body h3{margin-bottom:10px}
.offer-list{margin:18px 0 22px;display:flex;flex-direction:column;gap:11px}
.offer-list li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;line-height:1.5}
.offer-list .ico{width:18px;height:18px;color:var(--mint);stroke-width:2.6;margin-top:3px}
.offer-foot{margin-top:auto;padding-top:20px;border-top:1px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.price{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:var(--ink);line-height:1}
.price small{font-family:var(--font-body);font-size:.76rem;font-weight:600;color:var(--ink-soft);display:block;margin-top:4px}
.offer.featured{border-color:var(--violet);box-shadow:var(--sh-violet)}
.offer.featured .offer-tag{background:var(--grad-violet);color:#fff}
.ribbon{position:absolute;top:16px;right:16px;z-index:2;background:var(--gold);color:#3B2A05;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:var(--r-full)}

/* Pillars (4 fundamentals) */
.pillar{position:relative;text-align:center;padding:34px 22px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);transition:.45s var(--ease-out)}
.pillar:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--lilac-200)}
.pillar .icon-badge{margin:0 auto 18px;width:64px;height:64px;border-radius:20px}
.pillar:hover .icon-badge{background:var(--grad-violet);color:#fff;border-color:transparent;transform:rotate(-6deg) scale(1.06)}
.pillar h4{margin-bottom:6px;font-size:1.08rem}
.pillar p{font-size:.88rem;margin:0}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.stat{background:#fff;padding:34px 24px;text-align:center}
.stat .n{font-family:var(--font-display);font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:800;
  color:var(--violet);line-height:1;letter-spacing:-.03em;display:block}
.stat .l{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-top:8px;display:block}
/* Carte posée sur l'aplat lavande */
.card.on-lav{background:var(--grad-lav);border-color:var(--lav-line);color:var(--lav-soft)}
.card.on-lav h2,.card.on-lav h3,.card.on-lav h4,.card.on-lav strong{color:var(--lav-ink)}
.card.on-lav p,.card.on-lav li{color:var(--lav-soft)}
.card.on-lav .icon-badge{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92);color:var(--violet-700)}
.bg-deep .stats{background:var(--lav-line);border-color:var(--lav-line)}
.bg-deep .stat{background:rgba(255,255,255,.92)}
.bg-deep .stat .n{color:var(--violet-700)}
.bg-deep .stat .l{color:var(--ink-soft)}

/* ---------- 12. MEDIA BLOCKS ---------- */
.media{position:relative;border-radius:clamp(24px,3vw,38px);overflow:hidden;box-shadow:var(--sh-3);background:var(--lilac-100)}
.media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.media-tall{aspect-ratio:4/5}
.media-wide{aspect-ratio:16/10}
.media-square{aspect-ratio:1/1}
.media-parallax img{transform:scale(1.14);will-change:transform}
.media-badge{position:absolute;left:20px;bottom:20px;z-index:2;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-2);max-width:75%}
.media-badge b{display:block;font-family:var(--font-display);font-size:.98rem;color:var(--ink)}
.media-badge small{font-size:.8rem;color:var(--ink-soft)}

.media-stack{position:relative;padding-bottom:56px;padding-right:46px}
.media-stack .media:first-child{border-radius:clamp(24px,3vw,38px)}
.media-stack .media-sub{position:absolute;right:0;bottom:0;width:52%;border-radius:var(--r-lg);
  border:6px solid var(--cream);box-shadow:var(--sh-3);aspect-ratio:4/3.2}

/* Checklist */
.checklist{display:flex;flex-direction:column;gap:16px;margin:26px 0}
.checklist li{display:flex;gap:14px;align-items:flex-start}
.checklist .icon-badge{width:34px;height:34px;border-radius:11px}
.checklist .icon-badge .ico{width:17px;height:17px;stroke-width:2.4}
.checklist b{display:block;color:var(--ink);font-family:var(--font-display);font-size:1rem;margin-bottom:2px}
.checklist p{font-size:.92rem;margin:0}

/* ---------- 13. STEPS / TIMELINE ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps::before{content:"";position:absolute;top:34px;left:8%;right:8%;height:2px;
  background:repeating-linear-gradient(90deg,var(--lilac-200) 0 10px,transparent 10px 20px);z-index:0}
.step{position:relative;z-index:1;text-align:center}
.step-num{width:68px;height:68px;margin:0 auto 20px;border-radius:22px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);
  font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--violet);
  transition:.45s var(--ease-out)}
.step:hover .step-num{background:var(--grad-violet);color:#fff;transform:translateY(-6px) rotate(-6deg);box-shadow:var(--sh-violet)}
.step h4{margin-bottom:6px}
.step p{font-size:.9rem;margin:0}

.timeline{position:relative;padding-left:44px}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-36px;top:5px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--violet);box-shadow:0 0 0 5px var(--lilac-50)}
.tl-time{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);background:var(--lilac-100);padding:5px 12px;border-radius:var(--r-full);margin-bottom:10px}
.tl-item h4{margin-bottom:6px}
.tl-item p{font-size:.94rem;margin:0}

/* ---------- 14. TESTIMONIALS ---------- */
.testi-viewport{overflow:hidden;margin:0 -12px;padding:12px}
.testi-track{display:flex;gap:24px;transition:transform .7s var(--ease-out)}
.testi{flex:0 0 calc(33.333% - 16px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh-1);position:relative}
.testi .quote-ico{position:absolute;top:24px;right:26px;width:38px;height:38px;color:var(--lilac-200);stroke-width:1.4}
.stars{display:flex;gap:3px;color:var(--gold);margin-bottom:16px}
.stars .ico{width:17px;height:17px;fill:currentColor;stroke:none}
.testi p{font-size:.97rem;color:var(--ink);line-height:1.62}
.testi-who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.avatar{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--lilac-100);color:var(--violet-700);font-family:var(--font-display);font-weight:800;font-size:.95rem}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.testi-who b{display:block;font-size:.92rem;color:var(--ink)}
.testi-who small{font-size:.8rem;color:var(--ink-soft)}
.slider-nav{display:flex;gap:10px;justify-content:center;margin-top:36px;align-items:center}
.slider-btn{width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);transition:.3s var(--ease-out)}
.slider-btn:hover{background:var(--grad-violet);color:#fff;border-color:transparent;transform:scale(1.06);box-shadow:var(--sh-violet)}
.slider-dots{display:flex;gap:7px;margin:0 12px}
.slider-dots button{width:8px;height:8px;border-radius:50%;background:var(--lilac-200);transition:.3s}
.slider-dots button.on{width:26px;border-radius:var(--r-full);background:var(--violet)}

/* ---------- 15. FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:.35s var(--ease-out)}
.faq-item.open{border-color:var(--lilac-200);box-shadow:var(--sh-2)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 26px;text-align:left;font-family:var(--font-display);font-weight:600;
  font-size:1.04rem;color:var(--ink)}
.faq-icon{width:34px;height:34px;flex:none;border-radius:11px;background:var(--lilac-100);
  display:grid;place-items:center;color:var(--violet);transition:.35s var(--ease-out)}
.faq-item.open .faq-icon{background:var(--grad-violet);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
.faq-a > div{padding:0 26px 24px;font-size:.96rem}

/* ---------- 16. FORMS ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px);box-shadow:var(--sh-2)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;min-width:0;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--cream);transition:.25s;font-size:.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(109,63,209,.1)}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:.8rem;color:var(--ink-soft);margin-top:14px}
.radio-cards{display:grid;gap:12px}
.radio-card{position:relative;display:flex;gap:14px;align-items:center;padding:16px 18px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:.25s;background:var(--cream)}
.field .radio-card{display:flex;align-items:center;margin-bottom:0;font-weight:400}
.radio-card:hover{border-color:var(--lilac)}
.radio-card input{position:absolute;opacity:0}
.radio-card input:checked ~ .rc-body{color:var(--violet)}
.radio-card:has(input:checked){border-color:var(--violet);background:var(--lilac-50);box-shadow:0 0 0 4px rgba(109,63,209,.08)}
.rc-body b{display:block;font-family:var(--font-display);font-size:.98rem;color:var(--ink)}
.rc-body small{font-size:.82rem;color:var(--ink-soft)}

/* Lead magnet band */
.leadband{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-lav);border:1px solid var(--lav-line);
  padding:clamp(36px,4.5vw,64px);color:var(--lav-soft)}
.leadband h2,.leadband h3{color:var(--lav-ink)}
.leadband .lead,.leadband p{color:var(--lav-soft)}
.leadband strong{color:var(--lav-ink)}
.leadband .blob{opacity:.2}
.leadband .icon-badge{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92);color:var(--violet-700)}
.leadband .eyebrow{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);color:var(--violet-700)}
.lead-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.lead-form input{flex:1;min-width:230px;padding:16px 20px;border-radius:var(--r-full);
  border:1.5px solid var(--lav-line);background:#fff;color:var(--ink)}
.lead-form input::placeholder{color:var(--ink-soft);opacity:.7}
.lead-form input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,63,209,.12)}

/* ---------- 17. CTA ---------- */
.cta-final{position:relative;border-radius:var(--r-xl);overflow:hidden;text-align:center;
  background:var(--grad-violet);color:rgba(255,255,255,.88);padding:clamp(48px,6vw,84px) clamp(24px,4vw,60px)}
.cta-final h2{color:#fff}
.cta-final p,.cta-final .lead{max-width:640px;margin-inline:auto;color:rgba(255,255,255,.9)}
.cta-final .btn-row{justify-content:center;margin-top:30px}
.cta-final::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);background-size:22px 22px;opacity:.5}

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:110;display:none;gap:10px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:var(--r-full);padding:9px 9px 9px 18px;box-shadow:var(--sh-3);align-items:center;
  transform:translateY(130%);transition:transform .45s var(--ease-out);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .sc-txt{flex:1;min-width:0}
.sticky-cta b{display:block;font-family:var(--font-display);font-size:.88rem;color:var(--ink);line-height:1.2}
.sticky-cta small{font-size:.74rem;color:var(--ink-soft)}

/* Retour en haut de page */
.scroll-top{
  position:fixed;right:20px;bottom:20px;z-index:110;
  width:48px;height:48px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--sh-3);color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility .3s,background .3s,color .3s,border-color .3s;
}
.scroll-top.show{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{background:var(--grad-violet);color:#fff;border-color:transparent}
.scroll-top .ico{width:20px;height:20px;stroke-width:2.4}
@media(max-width:980px){
  .scroll-top{right:14px;bottom:84px}
}

/* ---------- 18. MODAL ---------- */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;
  background:rgba(22,11,60,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.35s}
.modal.open{opacity:1;visibility:visible}
.modal-box{width:100%;max-width:520px;background:#fff;border-radius:var(--r-lg);padding:clamp(26px,4vw,40px);
  box-shadow:var(--sh-4);transform:translateY(24px) scale(.97);transition:.45s var(--ease-out);position:relative}
.modal.open .modal-box{transform:none}
.modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--lilac-50);color:var(--ink);transition:.25s}
.modal-close:hover{background:var(--lilac-100);transform:rotate(90deg)}

/* ---------- 19. BLOG ---------- */
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:.45s var(--ease-out)}
.post:hover{transform:translateY(-8px);box-shadow:var(--sh-3)}
.post-media{aspect-ratio:16/10;overflow:hidden;background:var(--lilac-100)}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.post:hover .post-media img{transform:scale(1.07)}
.post-body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;gap:14px;font-size:.78rem;font-weight:700;color:var(--violet);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.post h3{font-size:1.18rem;margin-bottom:10px}
.post p{font-size:.92rem}
.post .link-arrow{margin-top:auto;padding-top:18px}

/* ---------- 20. PAGE HERO (inner pages) ---------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(48px,6vw,84px) 0 clamp(48px,6vw,80px);
  background:radial-gradient(800px 520px at 78% -10%,#E3D3FB 0%,transparent 60%),var(--cream)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--ink-soft);margin-bottom:22px;flex-wrap:wrap}
.crumbs a:hover{color:var(--violet)}
.crumbs .ico{width:14px;height:14px;opacity:.5}

/* Table of key facts */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:30px}
.fact{background:#fff;padding:20px 22px}
.fact .ico{width:20px;height:20px;color:var(--violet);margin-bottom:8px}
.fact b{display:block;font-family:var(--font-display);color:var(--ink);font-size:1rem}
.fact small{font-size:.8rem;color:var(--ink-soft)}

/* Partner strip */
.partners{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:center}
.partner{display:flex;align-items:center;gap:11px;font-size:.88rem;font-weight:700;color:var(--ink);opacity:.7;transition:.3s}
.partner:hover{opacity:1}
.partner .icon-badge{width:40px;height:40px;border-radius:12px}

/* App / Paterniti block */
.app-block{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:#fff;box-shadow:var(--sh-2);padding:clamp(30px,4vw,58px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
/* Vitrine de l'application — maquette d'interface claire (remplaçable par une
   capture réelle de paterniti.fr : même encombrement, même arrondi). */
.app-showcase{display:flex;flex-direction:column;align-items:center;gap:22px}
.phone{position:relative;width:min(256px,100%);aspect-ratio:9/16.2;
  border-radius:36px;background:#fff;border:9px solid #EFEAFB;box-shadow:var(--sh-4);
  overflow:hidden;display:flex;flex-direction:column;padding:20px 14px 16px;
  animation:chipFloat 12s ease-in-out infinite}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:58px;height:5px;border-radius:3px;background:#DED6F6;z-index:2}
.ph-screen{display:flex;flex-direction:column;gap:9px;height:100%;padding-top:12px}
.ph-top{display:flex;align-items:center;gap:11px}
.ph-ring{position:relative;width:46px;height:46px;flex:none}
.ph-ring svg{width:46px;height:46px;transform:rotate(-90deg)}
.ph-ring circle{fill:none;stroke-width:4;r:20;cx:23;cy:23}
.ph-ring .bg{stroke:var(--lilac-100)}
.ph-ring .pr{stroke:var(--violet);stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:40}
.ph-ring i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-family:var(--font-display);font-weight:800;font-size:.78rem;color:var(--violet-700)}
.ph-id b{display:block;font-family:var(--font-display);font-size:.86rem;color:var(--ink);line-height:1.2}
.ph-id small{font-size:.66rem;color:var(--ink-soft)}
.ph-xp{height:6px;border-radius:4px;background:var(--lilac-100);overflow:hidden}
.ph-xp span{display:block;height:100%;border-radius:4px;background:var(--grad-violet)}
.ph-card{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:9px 10px}
.ph-card b{display:block;font-family:var(--font-display);font-size:.72rem;color:var(--ink);line-height:1.25}
.ph-card small{font-size:.63rem;color:var(--ink-soft);line-height:1.3;display:block}
.ph-card .ico{width:16px;height:16px;color:var(--violet)}
.ph-ic{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--lilac-100);color:var(--violet)}
.ph-card.accent{background:var(--grad-violet);border-color:transparent;box-shadow:var(--sh-violet)}
.ph-card.accent b{color:#fff}
.ph-card.accent small{color:rgba(255,255,255,.78)}
.ph-card.accent .ph-ic{background:rgba(255,255,255,.2);color:#fff}
.ph-card.accent .ico{color:#fff}
.ph-card .ph-check{margin-left:auto;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.24)}
.ph-card .ph-check .ico{width:12px;height:12px;stroke-width:2.6;color:#fff}
.ph-badges{display:flex;gap:7px;margin-top:auto;padding-top:8px}
.ph-badges span{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;
  background:var(--lilac-50);border:1px solid var(--line);color:var(--violet)}
.ph-badges span .ico{width:15px;height:15px}
.ph-badges em{margin-left:auto;align-self:center;font-style:normal;font-size:.62rem;
  font-weight:700;color:var(--ink-soft)}
.app-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(320px,100%)}
.app-pill{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--lilac-50);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 8px}
.app-pill b{font-family:var(--font-display);font-size:.95rem;color:var(--violet-700);line-height:1.1}
.app-pill span{font-size:.64rem;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.25}

/* ---------- 21. FOOTER ---------- */
/* Même collision de nom que .site-header avec le thème parent Hello
   Elementor (max-width, margin auto, padding réduit) : on regagne la
   priorité avec un sélecteur plus spécifique, sans rien changer visuellement. */
body .site-footer.site-footer{
  display:block;width:100%;max-width:none;margin-inline:0;padding-inline:0;
  background:var(--grad-deep);color:rgba(255,255,255,.8);padding:clamp(56px,6vw,88px) 0 30px;position:relative;overflow:hidden;
}
body .site-footer.site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-body);font-weight:800}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:52px}
.f-grid a{font-size:.92rem;transition:color .25s,padding-left .25s;display:inline-block;padding:4px 0}
.f-grid a:hover{color:var(--lilac-200);padding-left:5px}
.f-brand{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.f-brand b{font-family:var(--font-display);color:#fff;font-size:1.1rem}
.f-social{display:flex;gap:10px;margin-top:20px}
.f-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:.3s var(--ease-out)}
.f-social a:hover{background:var(--violet);border-color:transparent;transform:translateY(-3px)}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.83rem}
.f-note{font-size:.78rem;color:rgba(255,255,255,.62);margin-top:8px}

/* ---------- 22. REVEAL ANIMATIONS ---------- */
[data-reveal]{opacity:0;transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);will-change:transform,opacity}
[data-reveal="up"]{transform:translateY(34px)}
[data-reveal="down"]{transform:translateY(-28px)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="zoom"]{transform:scale(.93)}
[data-reveal="mask"]{clip-path:inset(0 0 100% 0);transform:none;opacity:1;transition:clip-path 1.1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

.split-word{display:inline-block;overflow:hidden;vertical-align:top}
.split-word > span{display:inline-block;transform:translateY(105%);
  transition:transform .85s var(--ease-out);transition-delay:var(--wd,0ms)}
.in .split-word > span,.split-word.in > span{transform:translateY(0)}

/* ---------- 23. RESPONSIVE ---------- */
@media(max-width:1080px){
  .f-grid{grid-template-columns:1fr 1fr}
  .testi{flex:0 0 calc(50% - 12px)}
}
@media(max-width:980px){
  :root{--gutter:20px}
  /* Le header porte un backdrop-filter : il devient bloc conteneur.
     Le panneau est donc positionné en absolute par rapport au header. */
  /* position:fixed (et non absolute) : un ancêtre position:sticky (le header)
     ne suit pas toujours sa position "collée" à l'écran comme référentiel
     pour ses enfants en absolute selon les navigateurs — le menu ne
     s'affichait alors qu'en haut de la page. En fixed, le menu se cale
     toujours juste sous le header, quelle que soit la position du scroll. */
  .nav-links{
    position:fixed;top:78px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:14px var(--gutter) 30px;
    max-height:calc(100vh - 78px);overflow-y:auto;
    border-top:1px solid var(--line);box-shadow:0 24px 40px rgba(22,11,60,.14);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s var(--ease-out),transform .35s var(--ease-out),visibility .35s,top .35s var(--ease);
  }
  .site-header.scrolled .nav-links{top:68px;max-height:calc(100vh - 68px)}
  /* Le verrou de défilement se pose sur html, pas sur body : mettre
     overflow:hidden sur body en ferait de nouveau un conteneur de
     défilement (même bug que celui déjà corrigé sur .site-header), ce qui
     cassait le sticky du header — et donc la position du menu — tant que
     le menu mobile restait ouvert. */
  html.menu-open{overflow:hidden}
  body.menu-open .nav-links{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-links > li > a{padding:16px 4px;font-size:1.06rem;border-bottom:1px solid var(--line-soft);border-radius:0}
  .nav-links > li > a.drop-toggle{display:flex;justify-content:space-between;width:100%}
  .nav-cta-mobile{display:block;margin-top:20px}
  .nav-cta-mobile .btn{width:100%}
  .nav-links > li > a.active::after{display:none}
  .drop{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;
    padding:0 0 10px;min-width:0;background:transparent}
  .drop a{padding:12px 4px 12px 12px;background:var(--lilac-50);margin-bottom:6px}
  .has-drop:hover .drop{transform:none}
  .burger{display:grid}
  .nav-actions .btn{display:none}
  .hero-grid,.split,.split-l,.split-r{grid-template-columns:1fr}
  .hero-visual{order:-1;max-width:520px;margin-inline:auto;width:100%}
  .hero-frame{aspect-ratio:4/4.3}
  .hero-frame img{object-position:50% 22%}
  .hero-chip.c1{left:14px}
  .hero-chip.c2{right:14px}
  .g-3,.g-4,.steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .app-block{grid-template-columns:1fr}
  .media-stack{padding-right:0;padding-bottom:0}
  .media-stack .media-sub{display:none}
  .sticky-cta{display:flex}
}
@media(max-width:980px){
  /* colonnes empilées : les révélations latérales deviennent verticales
     pour ne pas créer de débordement horizontal */
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(30px)}
}
@media(max-width:640px){
  body{font-size:16px}
  .g-2,.g-3,.g-4,.steps,.field-row{grid-template-columns:1fr}
  .testi{flex:0 0 calc(100% - 0px)}
  .stats{grid-template-columns:1fr 1fr}
  .btn{width:100%;justify-content:center}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  .sticky-cta .btn{width:auto}
  .hero-chip.c2{display:none}
  .hero-chip{max-width:min(74%,240px);padding:11px 14px}
  .hero-chip.c1{left:12px;top:12px}
  .hero-chip.c3{left:12px;bottom:14px}
  .hero-frame{aspect-ratio:4/4.5}
  .f-grid{grid-template-columns:1fr;gap:32px}
  .offer-foot{flex-direction:column;align-items:flex-start}
  .offer-foot .btn{width:100%}
  .timeline{padding-left:34px}
  .timeline::before{left:11px}
  .tl-item::before{left:-30px}
}

/* ---------- 24. A11Y / MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .rotator .rot-caret{animation:none;opacity:0}
  .play-btn::before{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .split-word > span{transform:none!important}
}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--violet);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}