/* Charte TogetHeR (extraite de la présentation produit) : marine #445171, rouge #CD1417, bleu ciel et jaune BeeWisy.
   Layout : colonne 1180px, alternance papier clair / bandeaux marine, le rouge réservé aux actions et au nom du produit. */
:root{
  --navy:#445171;        /* bleu marine YESS / TogetHeR */
  --navy-deep:#2F3A55;
  --red:#CD1417;         /* rouge TogetHeR */
  --red-ink:#FFFFFF;
  --sky:#3996D3;         /* bleu ciel BeeWisy */
  --bee:#FFFA5E;         /* jaune BeeWisy */
  --bg:#F5F6F9;
  --surface:#FFFFFF;
  --ink:#232B3F;
  --muted:#5F6A85;
  --line:#D8DCE6;
  --soft:#E9EDF5;
  --band:#445171;
  --band-fg:#FFFFFF;
  --band-muted:#C9D0E0;
  --ok:#1F8A5B;
  --f-display:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Jost","Century Gothic","Segoe UI",system-ui,sans-serif;
  --radius:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121828;--surface:#1A2238;--ink:#ECEFF6;--muted:#A3ACC4;--line:#2E3852;--soft:#232C45;
  --band:#0D1322;--band-fg:#FFFFFF;--band-muted:#A3ACC4;--navy-deep:#B8C4E6;--ok:#4CC38A;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121828;--surface:#1A2238;--ink:#ECEFF6;--muted:#A3ACC4;--line:#2E3852;--soft:#232C45;
  --band:#0D1322;--band-fg:#FFFFFF;--band-muted:#A3ACC4;--navy-deep:#B8C4E6;--ok:#4CC38A;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-weight:400}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.8vw,3.4rem);font-weight:800;text-transform:uppercase}
h3{font-size:1.5rem;font-weight:700}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:600}
.lead{font-size:1.12rem;color:var(--muted);max-width:64ch;font-weight:300}
.lead b{font-weight:500;color:var(--ink)}
.red{color:var(--red)}
.sky{color:var(--sky)}
section{padding-block:clamp(64px,9vw,112px)}
.sec-head{display:grid;gap:16px;margin-bottom:44px}
.rule{width:64px;height:4px;background:var(--red)}

.btn{display:inline-flex;align-items:center;gap:10px;font:600 .98rem var(--f-body);padding:13px 24px;border-radius:var(--radius);border:2px solid var(--red);background:var(--red);color:var(--red-ink);text-decoration:none;cursor:pointer;transition:transform .15s,filter .15s;letter-spacing:.02em}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.white{background:#fff;border-color:#fff;color:var(--navy)}

/* Navigation */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.nav .logo img{height:44px;width:auto;min-width:150px}
.nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;font-weight:500;font-size:.84rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.nav ul a{text-decoration:none;color:var(--muted)}
.nav ul a:hover{color:var(--red)}
.nav-cta{padding:10px 16px;font-size:.86rem;white-space:nowrap}
@media (max-width:1240px){.nav ul{display:none}}

.event{background:var(--navy);color:#fff;font-size:.9rem}
.event .wrap{display:flex;gap:14px;align-items:center;justify-content:center;padding-block:9px;flex-wrap:wrap;text-align:center}
.event strong{background:var(--red);padding:3px 10px;border-radius:3px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* Hero */
.hero{padding-block:clamp(44px,6vw,88px) clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 30%,color-mix(in srgb,var(--sky) 14%,transparent),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative}
.hero .tag{display:inline-block;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:var(--red);font-weight:600;padding:7px 14px;border-radius:3px}
.hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;text-transform:uppercase;margin-top:14px;line-height:.98}
.hero h1 span{color:var(--red)}
.hero .lead{margin-top:24px;font-size:1.18rem}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-meta{margin-top:30px;font-size:.86rem;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.hero-meta span::before{content:"▸ ";color:var(--red)}
.hero-visual{position:relative;display:grid;justify-items:center;overflow:visible}
.hero{overflow:hidden;clip-path:inset(0)}
.hero-visual .stack{position:relative;width:100%;max-width:680px;margin-block:70px 90px}
.hero-visual .shot{border-radius:8px;box-shadow:0 30px 60px -30px rgba(35,43,63,.55);border:1px solid var(--line);background:var(--surface)}
.hero-visual .shot.b{position:absolute;right:-5%;bottom:-26%;width:64%;border-radius:8px}
.hero-visual .shot.c{position:absolute;left:-6%;top:-24%;width:54%;border-radius:8px}
.hero-visual .bee{position:absolute;left:-2%;bottom:-30%;width:180px;filter:drop-shadow(0 18px 28px rgba(35,43,63,.35));animation:orbit 7s ease-in-out infinite;transform-origin:center}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes orbit{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(52px,-38px) rotate(4deg)}50%{transform:translate(105px,0) rotate(8deg)}75%{transform:translate(52px,38px) rotate(0deg)}100%{transform:translate(0,0) rotate(-6deg)}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-visual{margin-top:60px;padding-bottom:70px}.hero-visual .bee{width:120px}}

/* Faits */
.facts{background:var(--bg);padding-block:8px 28px}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fact{padding:24px 22px;border-radius:10px;display:grid;gap:6px;color:#fff;position:relative;overflow:hidden;box-shadow:0 18px 40px -24px rgba(35,43,63,.5)}
.fact::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.12)}
.fact:nth-child(1){background:var(--navy)}.fact:nth-child(2){background:var(--red)}.fact:nth-child(3){background:var(--sky)}.fact:nth-child(4){background:#FFC63A;color:#232B3F}
.fact b{font-family:var(--f-display);font-size:2.6rem;font-weight:800;line-height:1}
.fact span{font-size:.92rem;opacity:.92}
@media (max-width:820px){.facts .wrap{grid-template-columns:1fr 1fr}}

/* Why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-card{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--red);padding:28px;display:grid;gap:10px;align-content:start}
.why-card:nth-child(2){border-top-color:var(--navy)}
.why-card:nth-child(3){border-top-color:var(--sky)}
.why-card h3{text-transform:uppercase;font-size:1.3rem}
.why-card p{color:var(--muted);font-size:.98rem}
.why-list{margin:36px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why-list li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.why-list li::before{content:"";flex:none;width:0;height:0;border-left:9px solid var(--red);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-top:8px}
@media (max-width:860px){.why,.why-list{grid-template-columns:1fr}}

/* Pyramide */
.pyr{background:var(--band);color:var(--band-fg)}
.pyr .lead{color:var(--band-muted)}
.pyr .eyebrow{color:var(--bee)}
.pyr .rule{background:var(--bee)}
.pyr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.pyr svg{width:100%;height:auto;max-width:520px;display:block;margin-inline:auto}
.pyr .lvl{cursor:pointer}
.pyr .lvl path{transition:filter .2s,opacity .2s;opacity:.85}
.pyr .lvl:hover path,.pyr .lvl.on path{opacity:1;filter:brightness(1.12)}
.pyr .lvl text{font-family:var(--f-display);font-weight:700;font-size:22px;fill:#fff;pointer-events:none;text-transform:uppercase;letter-spacing:.02em}
.pyr .lbl{font-family:var(--f-body);font-size:12px;fill:var(--band-muted);letter-spacing:.12em;text-transform:uppercase}
.pyr svg{color:var(--band-muted);max-width:600px}
.pyr-panel{border-left:3px solid var(--bee);padding-left:24px;display:grid;gap:12px}
.pyr-panel h3{font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase}
.pyr-panel p{color:var(--band-muted)}
.pyr-panel .mods{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pyr-panel .mods button{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:4px;padding:7px 14px;font:500 .9rem var(--f-body);cursor:pointer}
.pyr-panel .mods button:hover{border-color:var(--bee);color:var(--bee)}
@media (max-width:860px){.pyr-grid{grid-template-columns:1fr}}

/* Explorateur */
.explorer{display:grid;grid-template-columns:280px 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.mod-list{display:grid;gap:4px;position:sticky;top:94px}
.mod-group{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px 12px;font-weight:600}
.mod-group:first-child{margin-top:0}
.mod-btn{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;border-radius:var(--radius);padding:10px 12px;font:500 1rem var(--f-body);color:var(--ink);cursor:pointer}
.mod-btn i{width:34px;height:34px;flex:none;background:var(--navy);border-radius:4px;display:grid;place-items:center;color:#fff}
.mod-btn i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mod-btn:hover{background:var(--soft)}
.mod-btn.on{background:var(--red);color:#fff}
.mod-btn.on i{background:#fff;color:var(--red)}
.mod-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
.mod-head{background:var(--navy);color:#fff;padding:22px clamp(22px,3vw,36px);display:flex;align-items:center;gap:16px}
.mod-head i{width:44px;height:44px;background:#fff;color:var(--navy);border-radius:4px;display:grid;place-items:center;flex:none}
.mod-head i svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mod-head h3{font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase;font-weight:800}
.mod-head small{display:block;font:500 .74rem var(--f-body);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.mod-body{padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
.mod-body .pitch{font-size:1.08rem;color:var(--muted);font-weight:300;margin-bottom:22px}
.mod-body h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px;font-weight:600}
.feat{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feat li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.feat li::before{content:"";flex:none;width:0;height:0;border-left:9px solid var(--red);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-top:8px}
.shot-frame{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -28px rgba(35,43,63,.5)}
.shot-frame img{width:100%}
.shot-cap{font-size:.82rem;color:var(--muted);margin-top:8px}
.gains{margin-top:22px;background:var(--soft);padding:18px 20px;border-radius:var(--radius);display:grid;gap:8px}
.gains p{font-size:.95rem}
.gains p::before{content:"✓ ";color:var(--ok);font-weight:600}
@media (max-width:900px){.explorer{grid-template-columns:1fr}.mod-list{position:static;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.mod-group{grid-column:1/-1}.mod-body{grid-template-columns:1fr}}

/* Parcours */
.journey{background:var(--surface);border-block:1px solid var(--line)}
.track{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;overflow-x:auto;padding-bottom:6px;max-width:100%}
.journey .wrap{min-width:0;overflow:hidden}
.track::before{content:"";position:absolute;left:4%;right:4%;top:23px;height:3px;background:var(--line)}
.track .fill{position:absolute;left:4%;top:23px;height:3px;background:var(--red);transition:width .45s ease}
.stage{position:relative;background:none;border:0;color:var(--muted);cursor:pointer;display:grid;justify-items:center;gap:10px;padding:0 2px;font:500 .86rem var(--f-body);min-width:84px}
.stage .dot{width:48px;height:48px;border-radius:50%;border:3px solid var(--line);background:var(--surface);display:grid;place-items:center;font:700 1rem var(--f-display);color:var(--muted);transition:all .25s;z-index:1}
.stage.done .dot{border-color:var(--red);color:var(--red)}
.stage.on .dot{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.12)}
.stage.on{color:var(--ink);font-weight:600}
.stage-panel{margin-top:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:start;border-top:3px solid var(--navy);padding-top:34px}
.stage-panel h3{font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase;font-weight:800;color:var(--navy-deep)}
.stage-panel .who{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px;font-weight:600}
.stage-panel p{color:var(--muted);margin-top:14px;max-width:58ch}
.stage-panel ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.stage-panel li{padding-left:22px;position:relative}
.stage-panel li::before{content:"▸";position:absolute;left:0;color:var(--red)}
.mods-used h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}
.tag{display:inline-block;background:var(--navy);color:#fff;border-radius:4px;padding:6px 14px;font-size:.88rem;margin:0 6px 8px 0;font-weight:500}
.journey-nav{display:flex;gap:10px;margin-top:22px}
.journey-nav button{background:transparent;border:2px solid var(--navy);color:var(--ink);border-radius:var(--radius);padding:9px 18px;cursor:pointer;font:600 .9rem var(--f-body)}
.journey-nav button:hover{background:var(--navy);color:#fff}
@media (max-width:820px){.stage-panel{grid-template-columns:1fr}.track{grid-template-columns:repeat(8,84px)}}

/* Personas */
.personas{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:24px}
.persona{border:1.5px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:16px;cursor:pointer;text-align:left;font-family:var(--f-body);color:var(--ink);display:grid;gap:2px}
.persona b{font-family:var(--f-display);font-size:1.25rem;text-transform:uppercase}
.persona span{font-size:.82rem;color:var(--muted)}
.persona.on{border-color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.persona-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);border-top:3px solid var(--navy);padding-top:30px}
.persona-body blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;line-height:1.15;color:var(--navy-deep)}
.persona-body ol{margin:0;padding:0;list-style:none;counter-reset:a;display:grid;gap:16px}
.persona-body li{counter-increment:a;display:grid;grid-template-columns:40px 1fr;gap:12px}
.persona-body li::before{content:counter(a,decimal-leading-zero);font:800 1.1rem var(--f-display);color:var(--red)}
@media (max-width:900px){.personas{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.persona-body{grid-template-columns:1fr}}

/* BeeWisy */
.bee-sec{background:var(--band);color:var(--band-fg);position:relative;overflow:hidden}
.bee-sec::after{content:"";position:absolute;right:-10%;top:-20%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sky) 30%,transparent),transparent 65%);pointer-events:none}
.bee-sec .wrap{position:relative}
.bee-sec .eyebrow{color:var(--bee)}
.bee-sec .rule{background:var(--bee)}
.bee-sec .lead{color:var(--band-muted)}
.bee-top{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;margin-bottom:40px}
.bee-top img{width:260px;margin-inline:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.bee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bee-card{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);border-radius:var(--radius);padding:24px;display:grid;gap:10px;align-content:start}
.bee-card .n{font:800 2rem var(--f-display);color:var(--bee);line-height:1}
.bee-card h3{font-size:1.2rem;text-transform:uppercase}
.bee-card p{color:var(--band-muted);font-size:.94rem}
.bee-card .ex{font-size:.86rem;background:rgba(255,255,255,.08);border-left:3px solid var(--sky);padding:8px 12px;font-style:italic}
.pill{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--bee);color:var(--bee);border-radius:3px;padding:4px 9px;justify-self:start;font-weight:600}
@media (max-width:980px){.bee-grid{grid-template-columns:1fr 1fr}.bee-top{grid-template-columns:1fr}.bee-top img{width:200px}}
@media (max-width:560px){.bee-grid{grid-template-columns:1fr}}

/* Diagnostic */
.diag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.q{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer}
.q input{appearance:none;width:24px;height:24px;flex:none;border:2px solid var(--navy);border-radius:4px;margin-top:2px;cursor:pointer;display:grid;place-items:center;background:var(--surface)}
.q input:checked{background:var(--red);border-color:var(--red)}
.q input:checked::after{content:"✓";color:#fff;font-weight:700;font-size:.9rem}
.result{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--red);border-radius:var(--radius);padding:30px;position:sticky;top:94px}
.meter{height:10px;border-radius:2px;background:var(--soft);overflow:hidden;margin:14px 0 6px}
.meter i{display:block;height:100%;background:var(--red);width:0;transition:width .4s}
.result h3{font-size:1.6rem;text-transform:uppercase;color:var(--navy-deep)}
.reco{margin-top:18px;display:grid;gap:10px}
.reco div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:10px;font-size:.95rem}
.reco div b{font-weight:600}
.reco div span{color:var(--muted);text-align:right;font-size:.86rem}
@media (max-width:860px){.diag{grid-template-columns:1fr}.result{position:static}}

/* Plateforme */
.plat{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--navy)}
.plat > div{padding:28px 26px 28px 0;display:grid;gap:10px;align-content:start}
.plat > div + div{padding-left:26px;border-left:1px solid var(--line)}
.plat h3{font-size:1.25rem;text-transform:uppercase}
.plat p{color:var(--muted);font-size:.97rem}
@media (max-width:820px){.plat{grid-template-columns:1fr}.plat > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* Références */
.refs{background:var(--surface);border-block:1px solid var(--line);padding-block:40px}
.refs .wrap{display:grid;gap:18px}
.refs p.eyebrow{text-align:center;color:var(--muted)}
.refs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-family:var(--f-display);font-weight:700;font-size:1.15rem;text-transform:uppercase;color:var(--muted);letter-spacing:.02em}

/* FAQ */
.faq{max-width:860px}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-family:var(--f-display);font-size:1.25rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:20px;color:var(--navy-deep)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--red);font-size:1.5rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--muted);max-width:70ch}

/* Démo */
.demo{background:var(--red);color:#fff}
.demo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.demo h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.demo .lead{color:#fff;opacity:.9;margin-top:18px}
.demo ul{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.demo li::before{content:"✓  ";font-weight:700}
.contact-block{margin-top:30px;background:rgba(0,0,0,.14);border-radius:var(--radius);padding:20px 22px;display:grid;gap:8px;font-size:.98rem}
.contact-block b{font-family:var(--f-display);text-transform:uppercase;font-size:1.1rem;letter-spacing:.04em}
.contact-block .row2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copy{background:#fff;color:var(--red);border:0;border-radius:3px;padding:4px 10px;font:600 .78rem var(--f-body);cursor:pointer}
form{background:var(--surface);color:var(--ink);border-radius:var(--radius);padding:clamp(22px,3vw,34px);display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font-size:.86rem;font-weight:600}
input,select,textarea{font:400 1rem var(--f-body);padding:12px 14px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sky)}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:flex;align-items:center;gap:6px;font-weight:500;border:1.5px solid var(--line);border-radius:4px;padding:6px 12px;cursor:pointer}
.checks input{width:auto;accent-color:var(--red)}
.form-msg{font-size:.95rem;color:var(--ok);font-weight:600}
@media (max-width:860px){.demo .wrap{grid-template-columns:1fr}.row{grid-template-columns:1fr}}

footer{background:var(--navy);color:#fff;padding-block:40px;font-size:.9rem}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:start}
footer img{height:40px;width:auto}
footer h4{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bee);margin-bottom:10px;font-family:var(--f-body);font-weight:600}
footer p{opacity:.85}
footer .bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;opacity:.8;font-size:.82rem}
.theme-btn{background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:5px 12px;color:#fff;font:500 .78rem var(--f-body);cursor:pointer}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* BeeWisy flottant */
.bee-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;gap:10px;justify-items:end}
.bee-fab > button{width:64px;height:64px;border-radius:50%;border:3px solid var(--sky);background:#fff;padding:0;cursor:pointer;box-shadow:0 12px 30px -10px rgba(35,43,63,.5);overflow:hidden}
.bee-fab > button img{width:100%;height:100%;object-fit:cover}
.bee-panel{width:min(340px,calc(100vw - 36px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 50px -20px rgba(35,43,63,.5);overflow:hidden}
.bee-panel header{background:var(--navy);color:#fff;padding:12px 16px;display:flex;gap:10px;align-items:center;font-weight:600}
.bee-panel header small{display:block;font-weight:400;font-size:.76rem;opacity:.8}
.bee-panel .msg{padding:14px 16px;font-size:.92rem;background:var(--soft);margin:14px 16px 8px;border-radius:10px 10px 10px 2px}
.bee-panel .sugg{display:grid;gap:6px;padding:6px 16px 16px}
.bee-panel .sugg a{display:block;text-decoration:none;font-size:.88rem;border:1.5px solid var(--line);border-radius:6px;padding:8px 12px}
.bee-panel .sugg a:hover{border-color:var(--sky);color:var(--sky)}

[hidden]{display:none!important}
body{margin:0}

/* Section SEO */
.seo{background:var(--surface);border-block:1px solid var(--line)}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.seo-grid article{display:grid;gap:8px;align-content:start;border-top:3px solid var(--navy);padding-top:14px}
.seo-grid h3{font-size:1.2rem;text-transform:uppercase}
.seo-grid p{color:var(--muted);font-size:.95rem}
.seo-grid strong{color:var(--ink);font-weight:600}
@media (max-width:900px){.seo-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.seo-grid{grid-template-columns:1fr}}
.btn.sm{padding:6px 12px;font-size:.82rem}

.mod-cta{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.journey-nav button:disabled{opacity:.35;cursor:not-allowed}
.journey-nav button:disabled:hover{background:transparent;color:var(--ink)}
/* Scène animée Sarah + BeeWisy */
.story{background:var(--band);color:var(--band-fg);overflow:hidden}
.story .eyebrow{color:var(--bee)}.story .rule{background:var(--bee)}.story .lead{color:var(--band-muted)}
.scene{position:relative;height:300px;margin:10px 0 24px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.12);overflow:hidden}
.scene .road{position:absolute;left:4%;right:4%;top:190px;height:4px;background:rgba(255,255,255,.18);border-radius:2px}
.scene .road i{position:absolute;left:0;top:0;height:100%;background:var(--bee);border-radius:2px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.scene .stop{position:absolute;top:178px;width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.35);background:var(--band);transform:translateX(-50%);transition:all .4s;cursor:pointer}
.scene .stop.done{border-color:var(--bee)}.scene .stop.on{background:var(--bee);border-color:var(--bee);transform:translateX(-50%) scale(1.25)}
.scene .stop span{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--band-muted)}
.scene .stop.on span{color:#fff;font-weight:600}
.sarah{position:absolute;top:84px;width:70px;height:100px;transform:translateX(-50%);margin-left:0;transition:left 1.2s cubic-bezier(.4,0,.2,1)}
.sarah svg{width:100%;height:100%;overflow:visible}
.sarah .arm,.sarah .leg{transform-origin:top center;animation:walk .6s ease-in-out infinite alternate}
.sarah .leg.r,.sarah .arm.l{animation-delay:.3s}
.sarah.idle .arm,.sarah.idle .leg{animation:none}
@keyframes walk{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.beewisy{position:absolute;top:18px;width:110px;transform:translateX(-50%);transition:left 1.2s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 12px 18px rgba(0,0,0,.4))}
.beewisy img{animation:orbit 5s ease-in-out infinite;width:100%}
.bubble{position:absolute;top:14px;max-width:300px;background:#fff;color:#232B3F;border-radius:14px 14px 14px 2px;padding:10px 14px;font-size:.9rem;line-height:1.35;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);transition:opacity .4s .5s,transform .4s .5s}
.bubble.show{opacity:1;transform:translateY(0)}
.bubble b{color:var(--red)}
.story-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.story-card{border-radius:10px;padding:22px 24px;min-height:150px}
.story-card.good{background:rgba(255,255,255,.06);border:1px solid var(--bee)}
.story-card.bad{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);color:var(--band-muted)}
.story-card h4{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;font-family:var(--f-body);font-weight:600}
.story-card.good h4{color:var(--bee)}
.story-card h3{font-size:1.35rem;margin-bottom:8px;text-transform:uppercase}
.story-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.95rem}
.story-card.good li::before{content:"✓  ";color:var(--bee);font-weight:700}
.story-card.bad li::before{content:"✗  ";color:#F08A86;font-weight:700}
.story-ctl{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.story-ctl button{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:8px 16px;cursor:pointer;font:600 .88rem var(--f-body)}
.story-ctl button:hover{border-color:var(--bee);color:var(--bee)}
.story-ctl .step{color:var(--band-muted);font-size:.86rem;margin-left:auto}
@media (max-width:760px){.story-cards{grid-template-columns:1fr}.scene{height:260px}.bubble{max-width:200px;font-size:.8rem}.sarah{width:54px;height:78px;top:110px}.beewisy{width:90px}.scene .stop span{display:none}}
@media (prefers-reduced-motion:reduce){.sarah .arm,.sarah .leg,.beewisy img{animation:none}}

/* Mobile : en-tête compact, grille BeeWisy en une colonne */
@media (max-width:720px){.nav .wrap{height:auto;padding-block:10px;flex-wrap:wrap;justify-content:center;gap:10px}.nav .wrap>div{flex-wrap:wrap;justify-content:center}.nav-cta{padding:8px 12px;font-size:.8rem}.event .wrap{font-size:.8rem}}
@media (max-width:980px){.bee-top{grid-template-columns:1fr!important}.bee-top img{width:180px}}
.bee-sec .wrap,.story .wrap{min-width:0}
.bee-top>*,.sec-head,.sec-head>*{min-width:0;max-width:100%}
h1,h2,h3{overflow-wrap:anywhere}

/* ===== Blog / actualités (V2 : rendu depuis l'API) ===== */

.blog-head{padding-block:clamp(40px,6vw,72px) 24px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:clamp(48px,7vw,96px)}
.post{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;transition:transform .15s}
.post:hover{transform:translateY(-3px)}
.post .cover{aspect-ratio:16/9;background:var(--navy);display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-size:2rem;font-weight:800;letter-spacing:.04em}
.post .cover.red{background:var(--red)}.post .cover.sky{background:var(--sky)}
.post .body{padding:18px 20px 22px;display:grid;gap:8px;align-content:start}
.post .cat{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600}
.post h3{font-size:1.25rem;text-transform:none;line-height:1.2}
.post p{color:var(--muted);font-size:.93rem}
.post .meta{font-size:.8rem;color:var(--muted);margin-top:auto;padding-top:6px}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 28px}
.cats a{text-decoration:none;font-size:.84rem;font-weight:500;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--muted)}
.cats a.on,.cats a:hover{border-color:var(--red);color:var(--red)}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}@media (max-width:560px){.posts{grid-template-columns:1fr}}
.article{max-width:760px;margin-inline:auto;padding-block:clamp(40px,6vw,72px)}
.article .cat{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600}
.article h1{font-size:clamp(2rem,4.6vw,3.2rem);text-transform:none;margin:12px 0 14px;line-height:1.08}
.article .meta{color:var(--muted);font-size:.9rem;margin-bottom:28px}
.article .chapo{font-size:1.18rem;color:var(--muted);font-weight:300;margin-bottom:28px}
.article h2{font-size:1.6rem;text-transform:none;margin:36px 0 12px}
.article p{margin-bottom:16px;line-height:1.7}
.article ul{margin:0 0 16px;padding-left:22px}.article li{margin-bottom:6px}
.cta-box{background:var(--navy);color:#fff;border-radius:8px;padding:26px 28px;margin:36px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.cta-box b{font-family:var(--f-display);font-size:1.4rem;text-transform:uppercase}
.cta-box p{margin:4px 0 0;opacity:.85}
.share{border-top:1px solid var(--line);padding-top:18px;font-size:.88rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.events-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px}.events-list li{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:8px;padding:12px 16px}
#actualites .posts{padding-bottom:0}#actualites{padding-block:clamp(48px,7vw,96px)}
.article blockquote{border-left:3px solid var(--red);margin:0 0 16px;padding:4px 16px;color:var(--muted)}