:root{
  /* Base */
  --bg:#0f1221;          /* Hero profond */
  --bg-2:#171a2b;        /* Sections foncées */
  --surface:#ffffff;     /* Cartes blanches */
  --surface-2:#f3f5fb;   /* Sections claires */

  /* Palette accents (pastels sobres, non flashy) */
  --violet:#8a9bff;
  --menthe:#88d1c2;
  --sable:#f0c27b;
  --bleu:#7db7d6;
  --orange:#ffb56b;

  /* Modules (nouvelle teinte, non bleue) */
  --olive:#8BA58A; /* vert olive désaturé, masculin */
  --olive-rgb:139,165,138;

  /* Brand primary (plus masculin) */
  --brand:#7A6AD6;/* violet mauve */
  --brand-light:#B9A9F2;
  --brand-rgb:122,106,214;

  /* Logo accent */
  --logo:#FAD02C;
  --logo-rgb:250,208,44;

  --text:#0f1221;
  --muted:#6b7280;
  --radius:18px;
  --shadow:0 10px 30px rgba(15,18,33,.10), 0 2px 8px rgba(15,18,33,.06);
  --grad-hero:
    radial-gradient(780px 420px at 12% -10%, rgba(var(--brand-rgb),0.55) 0%, rgba(var(--brand-rgb),0.00) 62%),
    radial-gradient(820px 440px at 88% 0%, rgba(62,99,244,0.30) 0%, rgba(62,99,244,0.00) 62%),
    radial-gradient(900px 520px at 50% -6%, rgba(var(--logo-rgb),0.18) 0%, rgba(var(--logo-rgb),0.00) 72%),
    radial-gradient(720px 360px at 85% 85%, rgba(var(--logo-rgb),0.22) 0%, rgba(var(--logo-rgb),0.00) 60%),
    linear-gradient(180deg,#1a2040 0%, #20284a 48%, #242e52 100%);
  --ring: rgba(138,155,255,.25);
  /* Hero text gradient (bleu → mauve) */
  --hero-text-grad: linear-gradient(90deg,#2334D1 0%, #4522B0 55%, #7E2ED2 100%);
  --brand-grad: var(--hero-text-grad);
  /* Pastel accents for Module 1 testing */
  --m1-yellow: 250,208,44;   /* #FAD02C */   /* jaune doux */
  --m1-beige: 222,200,160;   /* beige sable */
  --m1-gray: 186,190,198;    /* gris clair */
  --m1-blue: 146,186,220;    /* bleu pastel */
  /* Modern gradient tokens */
  --m1-amber1: 240,211,122; /* #F0D37A */
  --m1-amber2: 199,158,60;  /* #C79E3C */
  --m2-slate1: 143,185,183; /* #8FB9B7 */
  --m2-slate2: 95,125,138;  /* #5F7D8A */

  --blue-accent: #2F5AE8; /* bleu des ✓ et du séparateur bénéfices */

}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Poppins","Inter",system-ui,-apple-system,Segoe UI,Roboto; color:var(--text); background:var(--surface-2);}
a{color:inherit; text-decoration:none}
.container{width:min(1120px,92vw); margin-inline:auto}

/* HERO */

/* logo en haut à gauche */
.hero { position: relative; } /* déjà présent chez toi, ok si dupliqué */
.hero::after { z-index: 0; }
.hero .container { position: relative; z-index: 1; }
/* HERO — sceau centré (logo en haut, espacement réduit) */
.hero-seal{
  display:flex;
  justify-content:center;
  margin:4px 0 6px;
}
.hero-seal picture,
.hero-seal img{
  display:block;
  width: clamp(260px, 36vw, 620px); /* nettement plus grand, responsive */
  height:auto;
}

@media (max-width:440px){
  .hero-seal{ margin:2px 0 6px; }
  .hero-seal img{ width:min(240px,64vw); }
}

.hero{position:relative; color:#fff; background:var(--grad-hero); padding:110px 0 80px; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(1200px 600px at 50% 8%, #000 0%, rgba(0,0,0,0) 75%);
}
.hero .container{position:relative; z-index:2}
.hero h1{font-weight:800; letter-spacing:-.02em; font-size:clamp(2rem,3.6vw,3.4rem); margin:0 0 14px}
.hero p.lead{max-width:860px; font-size:clamp(1.05rem,1.7vw,1.3rem); color:#dfe3ff; margin:0 0 26px}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#e9ecff; backdrop-filter:saturate(140%) blur(6px)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:12px; font-weight:700; box-shadow:var(--shadow); transition:.2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand-grad); color:#fff}
.btn.ghost{border:1px solid rgba(255,255,255,.3); color:#fff}

/* SECTIONS */
section{padding:84px 0}
.dark{background:#121528; color:#e9ecff}
.mid{background:#f6f3ee} /* ivoire doux (évite le bleu) */ /* bandeau pastel doux */
.light{background:var(--surface-2)}
h2.section-title{font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.01em; margin:0 0 12px; text-align:center}
p.sub{text-align:center; color:var(--muted); max-width:760px; margin:0 auto 36px}
.dark p.sub{color:#c9ceff}

/* GRIDS */
.cards{display:grid; gap:20px; grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12; background:var(--surface); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
@media(min-width:900px){.card{grid-column:span 4}}

/* USP STRIP */
.usp{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.usp .item{grid-column:span 12; border-radius:16px; padding:16px 18px; display:flex; align-items:center; gap:12px; background:#141935; color:#e9ecff; border:1px solid rgba(255,255,255,.08)}
.usp .icon{width:36px;height:36px;border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--brand)}

/* PLUS (no cards) */
.plus-grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.plus-item{grid-column:span 12; display:flex; gap:12px; align-items:flex-start; padding:10px 2px; border-bottom:1px dashed #e2e6f3}
.dark .plus-item{border-bottom:1px dashed rgba(255,255,255,.18)}
.plus-item:last-child{border-bottom:none}
.plus-bullet{width:28px; height:28px; border-radius:999px; background:var(--brand-grad); color:#fff; font-weight:700; display:grid; place-items:center; flex:0 0 28px; box-shadow:0 2px 10px rgba(0,0,0,.25)}
.dark .plus-bullet{border:1px solid rgba(255,255,255,.12)}
@media(min-width:900px){.plus-item{grid-column:span 6}}

/* PROGRAM (accordéons) */
.accordion{display:grid; gap:14px}
details{border-radius:16px; box-shadow:var(--shadow); overflow:hidden; border:3px solid transparent; padding:0}
summary{cursor:pointer; list-style:none; padding:22px 26px; font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:space-between; color:var(--text)}
summary::marker{display:none}
.open-icon{transition:transform .25s ease; font-size:1.3rem}
details[open] .open-icon{transform:rotate(180deg)}
.panel{padding:0 26px 24px; color:#2f3345; font-size:1.05rem; line-height:1.75; font-weight:500}
.panel ul{margin:14px 0 0; padding-left:24px; font-size:1.05rem; line-height:1.7; font-weight:500}

/* Bullets encadrés + carré-chevron (toutes sections) */
.panel ul.m1-enhanced{padding-left:0; margin:14px 0 0}
.m1-enhanced{list-style:none; display:grid; gap:10px}
.m1-enhanced li{display:grid; grid-template-columns:48px 1fr; column-gap:12px; align-items:start; background:rgba(var(--brand-rgb),0.08); border-radius:12px; padding:12px 14px; margin:0; text-align:left; max-width:880px}
.m1-ico-panel{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--brand-grad); color:#fff; font-weight:800; font-size:1.1rem; align-self:start}
.m1-txt{margin:0; line-height:1.65; align-self:center}

/* Variant initiale pour Module 1 (beige doux) */
.mod1.m1-beige{border-color: rgba(var(--m1-beige),1); background-color: rgba(var(--m1-beige),0.12)}
.mod1.m1-beige .m1-enhanced li{background-color: rgba(var(--m1-gray),0.12)}
.mod1.m1-beige .m1-ico-panel{background: linear-gradient(180deg, rgba(var(--m1-beige),0.95), rgba(var(--m1-beige),0.7)); color:#2b2621; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.08)}

/* Module 1 — yellow gradient (FAD02C) */
.mod1.m1-yellow{border-color: rgba(var(--m1-yellow),1); background-color: rgba(var(--m1-yellow),0.10)}
.mod1.m1-yellow .m1-enhanced li{background-color: rgba(var(--m1-yellow),0.12)}
.m1-yellow.g1 .m1-ico-panel{background:linear-gradient(135deg,#FAD02C 0%, #F5B318 100%); color:#1e1600}
.m1-yellow.g2 .m1-ico-panel{background:linear-gradient(135deg,#FFE066 0%, #FAD02C 60%, #D79C0A 100%); color:#1e1600}
.m1-yellow.g3 .m1-ico-panel{background:linear-gradient(180deg,#FAD02C 0%, #E4B217 100%); color:#1e1600}
.m1-yellow.g4 .m1-ico-panel{background:linear-gradient(135deg,#FCE57A 0%, #FAD02C 40%, #C79A06 100%); color:#141205}
.m1-yellow.g5 .m1-ico-panel{background:linear-gradient(135deg,#FFE38F 0%, #F4C21A 50%, #A47E1B 100%); color:#141205}
.m1-yellow.g1 .m1-ico-panel, .m1-yellow.g2 .m1-ico-panel, .m1-yellow.g3 .m1-ico-panel, .m1-yellow.g4 .m1-ico-panel, .m1-yellow.g5 .m1-ico-panel{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 16px rgba(250,208,44,.22)}

/* Module color cues (sobres) */
/* Base color for modules except M1 (M1 uses its own variant classes) */
.mod2,.mod3,.mod4,.mod5{border-color:var(--brand); background-color:rgba(var(--brand-rgb),0.10)}

/* PRICING */
.pricing{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.plan{grid-column:span 12; background:#ffffff; border:1px solid #e7e9f4; border-radius:20px; box-shadow:var(--shadow); padding:26px; position:relative}
@media(min-width:900px){.plan{grid-column:span 6}}
.plan.hot{background:linear-gradient(180deg,#ffffff 0%, #f9fbff 100%); border:2px solid transparent}
.plan.hot::before{content:"Offre de lancement"; position:absolute; top:16px; right:16px; background:var(--brand); color:#fff; font-weight:700; font-size:.8rem; padding:6px 10px; border-radius:999px}
.price-wrap{display:flex; align-items:baseline; gap:12px; margin:8px 0 6px}
.old-price{color:#6b7280; text-decoration:line-through; font-size:2.2rem;font-weight:800}
.new-price{font-size:2.2rem; font-weight:800; letter-spacing:-.02em}
.ttc-price{color:#6b7280;  font-weight:800}

.note{font-size:.95rem; color:#6b7280}
.features-check{margin:12px 0 18px; padding-left:0; list-style:none}
.features-check li{display:flex; gap:10px; margin:8px 0}
.features-check li::before{content:"✔"; display:inline-block}
.chip {
  display: inline-block;
  padding: 0 21px;
  height: 25px;
  font-size: 15px;
  font-weight: bold;
  line-height: 25px;
  border-radius: 15px;
  color: white;
  background-color: #7a6ad6;
}
/* FAQ */
.faq details{background:#f4f6ff; border:1px solid #e5e9ff}
.faq summary{font-weight:600}

/* CTA BLOCK */
.cta-block{background:linear-gradient(180deg,#ffffff 0%, #f3f7ff 100%); border:1px solid #e7e9f4; border-radius:22px; padding:28px; text-align:center; box-shadow:var(--shadow)}

/* Sticky CTA */
.sticky{position:sticky; bottom:18px; z-index:30}
.sticky-inner{width:min(1120px,92vw); margin:auto; background:#0f1221; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px 14px; box-shadow:0 10px 30px rgba(15,18,33,.25); display:flex; gap:12px; align-items:center; justify-content:space-between}
.sticky .btn{background:var(--brand-grad); color:#fff}

/* Footer */
.footer{background:#0b0e18;color:#cdd3e0; padding:38px 0}
.footer .footer-top{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer .brand{font-weight:700; letter-spacing:.02em}
.footer .social{display:flex; gap:10px}
.social-btn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.15); color:#fff}
.footer-links{display:flex; flex-wrap:wrap; gap:16px; margin-top:16px}
.footer a{color:#e8ecff}
.footer a:hover{text-decoration:underline}
.footer-legal{opacity:.75; margin-top:12px; font-size:.9rem}

/* COPY */
.copy{max-width:820px;margin:0 auto;color:#2f3345;font-size:1.05rem;line-height:1.9;font-weight:500}
.copy p{margin:0 0 12px}
.dark .copy{color:#c9ceff}

/* LEGAL / CGV */
.legal{max-width:860px;margin:0 auto;color:#2f3345;font-size:1rem;line-height:1.8}
.legal h3{margin:18px 0 8px}
.legal p{margin:0 0 8px}
.legal ul{padding-left:18px;margin:6px 0 12px}
.legal li{margin:4px 0}
.legal small{color:var(--muted)}

.muted{color:var(--muted)}
.dark .muted{color:#c9ceff; opacity:.9}

.hero-kicker{margin:0 0 14px; font-weight:800; color:#fff; letter-spacing:.02em}
/* Mini separator */
.mini-sep{width:160px;height:2px;background:var(--brand-grad);margin:18px auto 16px;border-radius:2px;opacity:.9}
/* Module 1 — bloc enrichi */
.mod1 .panel .m1-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.mod1 .panel .m1-grid{grid-template-columns:1.4fr .9fr}}
.m1-overline{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#5b6070;margin:2px 0 8px}
.m1-lead{font-size:1.05rem;line-height:1.75;margin:0 0 12px}
.m1-box{background:transparent;border-left:4px solid var(--brand);border-radius:0;box-shadow:none;padding:4px 0 4px 14px}
.mod1 .m1-box{background:transparent}
.check{list-style:none;padding-left:0;margin:10px 0}
.check li{display:flex;gap:10px;margin:8px 0}
.check li::before{content:"✓"; color: var(--brand); font-weight:800}
.dash{padding-left:18px}
.m1-side{background:transparent;border:0;border-left:4px solid var(--brand);border-radius:0;box-shadow:none;padding:6px 0 6px 14px;position:relative}
.m1-side:before{display:none}
.m1-quote{font-style:italic;color:#2f3345;margin:8px 0 12px}
.m1-stats{display:flex;gap:14px;margin:8px 0 6px}
.stat{background:transparent;border:0;border-left:3px solid rgba(var(--brand-rgb),.45);border-radius:0;padding:6px 10px;display:flex;flex-direction:column;align-items:flex-start}
.stat strong{font-size:1.1rem}
.grad-text{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.steps{counter-reset:step;list-style:none;padding-left:0;margin:10px 0 0}
.steps li{position:relative;padding-left:28px;margin:8px 0}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:999px;background:var(--brand-grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
/* Module X (dark, mystérieux) */
.mod5{border-color:#0a0c12; background:linear-gradient(180deg,#080a0f 0%, #07090f 48%, #04060a 100%); position:relative; transition:border-color .25s ease, box-shadow .25s ease}
.mod5::before{content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .25s ease; background:radial-gradient(700px 260px at 12% -10%, rgba(var(--brand-rgb),.18) 0%, transparent 60%), radial-gradient(700px 260px at 88% 0%, rgba(62,99,244,.14) 0%, transparent 58%)}
.mod5:hover{border-color:rgba(var(--brand-rgb),.55); box-shadow:0 0 0 2px rgba(var(--brand-rgb),.35), 0 0 24px rgba(var(--brand-rgb),.25), var(--shadow)}
.mod5:hover::before{opacity:.25}
.mod5 summary{color:#eef2ff}
.mod5 .open-icon{color:#eef2ff}
.mod5 .panel{color:#cfd6ee}

/* Hover glow for other modules (style aligné sur Module X) */
.mod1,.mod2,.mod3,.mod4{position:relative; transition:border-color .25s ease, box-shadow .25s ease}
.mod1::before,.mod2::before,.mod3::before,.mod4::before{content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .25s ease; background:radial-gradient(700px 260px at 12% -10%, rgba(var(--brand-rgb),.14) 0%, transparent 60%), radial-gradient(700px 260px at 88% 0%, rgba(62,99,244,.10) 0%, transparent 58%)}
.mod1:hover,.mod2:hover,.mod3:hover,.mod4:hover{box-shadow:0 0 0 2px rgba(var(--brand-rgb),.28), 0 0 24px rgba(var(--brand-rgb),.22), var(--shadow)}
.mod1:hover::before,.mod2:hover::before,.mod3:hover::before,.mod4:hover::before{opacity:.18}


/* BEFORE / AFTER — deux colonnes simples (style de la capture) */
.ba-wrap{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:900px){.ba-wrap{grid-template-columns:1fr 1fr}}
.ba-col{border-radius:18px;padding:22px;border:1px solid;background:#fff}
.ba-left{background:#fff6f6;border-color:#f4c0c0}
.ba-right{background:#f3fff6;border-color:#bfe9cc}
.ba-title{margin:0 0 14px;text-align:center;font-weight:800;font-size:1.25rem}
.ba-left .ba-title{color:#e03131}
.ba-right .ba-title{color:#22c55e}
.ba-list{list-style:none;padding:0;margin:0}
.ba-item{display:flex;gap:12px;align-items:flex-start;padding:14px 8px}
.ba-item + .ba-item{border-top:1px solid rgba(0,0,0,.08)}
.ba-left .ba-item + .ba-item{border-color:rgba(224,49,49,.22)}
.ba-right .ba-item + .ba-item{border-color:rgba(21,128,61,.20)}
.ba-ico{line-height:1}
.ba-ico svg{width:18px;height:18px;display:block}
.ba-left .ba-ico{color:#e03131}
.ba-right .ba-ico{color:#16a34a}
.ba-txt{margin:0}
/* Emphase rouge/verte sur mots clés */
.ba-left strong{color:#e03131; font-weight:700}
.ba-right strong{color:#22c55e; font-weight:700}

/* BENEFITS — encadré unique (consolidé) */
.benefits-box{
  background:#fff;
  max-width:860px;
  margin:0 auto;
  border:none;
  border-radius:18px;
  padding:22px;
}
.benefits-title{margin:0 0 8px; font-weight:800; font-size:1.15rem}
.benefits-list{list-style:none; padding:0; margin:0 0 14px}
.benefits-list li{display:flex; gap:10px; align-items:flex-start; margin:10px 0}
.benefits-list li::before{content:"✓"; color:var(--blue-accent, #2F5AE8); font-weight:800; line-height:1.2}
benefits-box{
  background:#fff;
  max-width:860px;
  margin:0 auto;
  border:1px solid #e7e9f4;   /* même bordure que Pricing */
  border-radius:20px;          /* même rayon que Pricing */
  box-shadow:var(--shadow);    /* même ombre que Pricing */
  padding:22px;
}

/* Séparateur milieu */
.benefits-sep{
  width:50%;
  margin:12px auto;
  height:0;
  border-top:1px dashed var(--blue-accent, #2F5AE8);
  background:none;
}
/* Footer logo centré */

.footer .brand-logo{width:96px; height:auto; display:block}

/* Final override — aligner l’encadré bénéfices sur le style Pricing */
.benefits-box{border:1px solid #e7e9f4; border-radius:20px; box-shadow:var(--shadow);}
/* Sticky – affichage conditionnel (cache quand le CTA final est visible) */
.sticky{transition:opacity .25s ease, transform .25s ease}
.sticky.is-hidden{opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden}

/* ===== HERO AMBER VARIANT (full repaint with logo color) ===== */
:root{
  --grad-hero-amber:
    radial-gradient(900px 520px at 15% -10%, rgba(var(--logo-rgb),0.55) 0%, rgba(var(--logo-rgb),0) 60%),
    radial-gradient(680px 340px at 88% 0%, rgba(164,126,27,0.28) 0%, rgba(164,126,27,0) 60%),
    linear-gradient(180deg, #FAD02C 0%, #F5B318 55%, #D79C0A 100%);
}
.hero.is-amber{background:#FAD02C; color:#0f1221}
.hero.is-amber h1{color:#0f1221}
.hero.is-amber .hero-kicker{color:#3d2b00}
.hero.is-amber p.lead{color:#312a11}
.hero.is-amber::after{display:none}
.hero.is-amber .btn.ghost{border:1px solid rgba(0,0,0,.22); color:#0f1221; background:rgba(255,255,255,.6)}
.hero.is-amber .btn.primary{background:var(--brand-grad); color:#fff}