/* Barbe-Noire-Seo : thème nocturne unique. Tokens repris de Direction Artistique/palette/moodboard.html */
:root {
  --carbone:#0B0B0E; --cyan:#00F0FF; --magenta:#FF007F; --acide:#CCFF00; --violet:#7B00FF; --blanc:#F0F0F3;
  --gris:#8A8A99; --texte:#C7C7D1; --trait:#23232B; --panneau:#121217;
  --display:"Archivo",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--carbone);color:var(--texte);font:17px/1.7 var(--display);-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--blanc)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
img,svg{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--acide);color:var(--carbone);padding:8px 12px;z-index:9}

/* En-tête */
.top{border-bottom:1px solid var(--trait);background:var(--carbone);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;color:var(--blanc);text-decoration:none;font:900 18px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.brand img{width:34px;height:34px;display:block}
.brand:hover{color:var(--cyan)}
.nav{display:flex;gap:20px;font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.nav a{color:var(--texte);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--blanc);border-color:var(--cyan)}

/* Index du blog */
.blog-hero{padding:72px 0 40px;background:radial-gradient(60% 120% at 85% 0%,color-mix(in srgb,var(--violet) 30%,transparent),transparent 70%)}
.blog-hero h1{margin:14px 0 0;font:900 clamp(38px,6vw,68px)/1 var(--display);letter-spacing:-.02em;color:var(--blanc);text-wrap:balance}
.blog-hero h1 span{color:var(--cyan)}
.blog-hero p{max-width:56ch;margin:18px 0 0;color:var(--texte)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:24px 0 80px}
.card{background:var(--panneau);border:1px solid var(--trait);border-radius:4px;display:grid;align-content:start;gap:12px;padding:24px 22px;text-decoration:none;color:var(--texte);transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--cyan);box-shadow:0 0 28px -10px var(--cyan);transform:translateY(-2px);color:var(--texte)}
.card h2{margin:0;font:800 22px/1.2 var(--display);color:var(--blanc);text-wrap:balance}
.card p{margin:0;font-size:15px;line-height:1.55}
.card .more{font:600 13px var(--mono);color:var(--cyan)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--trait);color:var(--gris);padding:5px 8px;border-radius:2px}
.empty{padding:40px 0 80px;color:var(--gris)}

/* Article */
.crumbs{padding:28px 0 0;font:12px var(--mono);color:var(--gris)}
.crumbs a{color:var(--gris)}.crumbs a:hover{color:var(--cyan)}
.art-head{padding:24px 0 32px;max-width:780px}
.art-head h1{margin:16px 0 0;font:900 clamp(32px,5vw,54px)/1.05 var(--display);letter-spacing:-.02em;color:var(--blanc);text-wrap:balance}
.meta{margin-top:18px;font:13px var(--mono);color:var(--gris);display:flex;flex-wrap:wrap;gap:6px 16px}
.chapo{font-size:21px;line-height:1.55;color:var(--blanc);border-left:4px solid var(--magenta);padding-left:18px;margin:28px 0 0;max-width:68ch}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start;padding-bottom:72px}
.toc{position:sticky;top:88px;border:1px solid var(--trait);background:var(--panneau);border-radius:4px;padding:18px 18px 14px;order:2;font-size:14px;line-height:1.4}
.toc b{display:block;margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.toc a{color:var(--texte);text-decoration:none}.toc a:hover{color:var(--cyan)}
.prose{max-width:70ch;order:1;min-width:0}
.prose h2{margin:2.2em 0 .5em;font:800 clamp(24px,3vw,32px)/1.15 var(--display);color:var(--blanc);scroll-margin-top:88px;text-wrap:balance}
.prose h3{margin:1.8em 0 .4em;font:800 20px/1.25 var(--display);color:var(--blanc);scroll-margin-top:88px}
.prose h2::before{content:"";display:block;width:36px;height:4px;background:var(--cyan);margin-bottom:14px;box-shadow:0 0 14px var(--cyan)}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.3em}.prose li{margin:.35em 0}
.prose strong{color:var(--blanc)}
.prose code{font:.88em var(--mono);background:var(--panneau);border:1px solid var(--trait);padding:2px 6px;border-radius:2px;color:var(--acide)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:4px solid var(--acide);color:var(--blanc)}
.prose hr{border:0;border-top:1px solid var(--trait);margin:2.4em 0}
.prose .tw{overflow-x:auto;margin:0 0 1.5em;border:1px solid var(--trait);border-radius:4px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--trait);vertical-align:top}
.prose th{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);background:var(--panneau)}
.prose tr:last-child td{border-bottom:0}
.prose pre{background:var(--panneau);border:1px solid var(--trait);border-radius:4px;padding:16px 18px;overflow-x:auto;font:14px/1.6 var(--mono);color:var(--blanc);margin:0 0 1.5em}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.synthese{border:1px solid var(--trait);border-top:4px solid var(--magenta);background:var(--panneau);border-radius:4px;padding:22px 24px;margin:2.4em 0}
.synthese h2{margin-top:0!important}.synthese h2::before{display:none}.synthese>:last-child{margin-bottom:0}

/* Appel à l'action */
.cta{margin:56px 0 0;padding:32px 28px;border:1px solid var(--trait);border-radius:4px;background:radial-gradient(90% 160% at 100% 0%,color-mix(in srgb,var(--violet) 35%,transparent),transparent 65%),var(--panneau);display:grid;gap:14px;justify-items:start}
.cta h2{margin:0;font:900 clamp(24px,3.4vw,34px)/1.1 var(--display);color:var(--blanc)}
.cta p{margin:0;max-width:52ch}
.btn{font:800 15px/1 var(--display);padding:15px 22px;border-radius:2px;background:var(--magenta);color:var(--carbone);text-decoration:none;box-shadow:5px 5px 0 var(--blanc);transition:transform .15s,box-shadow .15s;display:inline-block}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--blanc);color:var(--carbone)}

/* Pied */
.foot{border-top:1px solid var(--trait);padding:32px 0 48px;color:var(--gris);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.foot a{color:var(--gris)}.foot a:hover{color:var(--cyan)}
.bar{display:flex;height:6px}.bar i{flex:1}

@media (max-width:860px){
  .art-grid{grid-template-columns:1fr;gap:28px}
  .toc{position:static;order:0}
  .blog-hero{padding-top:48px}
}
@media (max-width:520px){body{font-size:16px}.nav{gap:14px}.chapo{font-size:18px}}

/* ===== Site complet : en-tête, sections, pages ===== */
.nav{align-items:center}
.nav a.btn{border:0;color:var(--carbone);padding:11px 16px;font:800 13px/1 var(--display);letter-spacing:0;text-transform:none}
.btn-sm{box-shadow:3px 3px 0 var(--blanc)!important}
.btn-ghost{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan)}
.btn-ghost:hover{background:var(--cyan);color:var(--carbone);box-shadow:inset 0 0 0 2px var(--cyan);transform:none}
.nav-toggle{display:none;background:none;border:1px solid var(--trait);border-radius:3px;width:44px;height:44px;cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--blanc);transition:transform .2s}
.nav-toggle span:first-child{top:17px}.nav-toggle span:last-child{top:25px}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--carbone);border-bottom:1px solid var(--trait);padding:8px 16px 20px}
  .nav.open{display:flex}
  .nav a{padding:14px 0;font-size:14px}
  .nav a.btn{margin-top:10px;text-align:center;padding:15px}
}

.lead{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--blanc);max-width:56ch;margin:20px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hint{font:13px var(--mono);color:var(--gris);margin:18px 0 0}
.more-link{margin:28px 0 0;font-weight:600}

/* Héros */
.hero{padding:72px 0 56px;overflow:hidden;background:radial-gradient(70% 90% at 90% 20%,color-mix(in srgb,var(--violet) 28%,transparent),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.hero h1{margin:18px 0 0;font:900 clamp(40px,6vw,76px)/1.02 var(--display);letter-spacing:-.025em;color:var(--blanc);text-wrap:balance}
.hero h1 .ln{display:inline-block}
.hero h1 em{font-style:normal;color:var(--cyan);text-shadow:0 0 28px color-mix(in srgb,var(--cyan) 55%,transparent)}
.hero h1 .ln:nth-child(2) em{color:var(--magenta);text-shadow:0 0 28px color-mix(in srgb,var(--magenta) 55%,transparent)}
.hero-art{position:relative;display:grid;place-items:center}
.hero-art img{position:relative;width:min(100%,380px);height:auto;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--cyan) 35%,transparent))}
.halo{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--magenta) 45%,transparent),transparent 65%);filter:blur(30px)}
@media (max-width:860px){.hero{padding-top:44px}.hero-grid{grid-template-columns:1fr;gap:24px}.hero-art{order:-1}.hero-art img{width:200px}}

.page-hero{padding:72px 0 24px;background:radial-gradient(60% 120% at 85% 0%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 70%)}
.page-hero h1{margin:16px 0 0;font:900 clamp(34px,5vw,60px)/1.05 var(--display);letter-spacing:-.02em;color:var(--blanc);max-width:20ch;text-wrap:balance}

/* Chiffres */
.facts{border-block:1px solid var(--trait);background:var(--panneau)}
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:28px 20px;border-left:1px solid var(--trait);display:grid;gap:6px;align-content:start}
.fact:first-child{border-left:0}
.fact b{font:900 clamp(34px,4vw,48px)/1 var(--display);color:var(--cyan);font-variant-numeric:tabular-nums}
.fact:nth-child(2) b{color:var(--magenta)}.fact:nth-child(3) b{color:var(--acide)}.fact:nth-child(4) b{color:#A866FF}
.fact span{font-size:14px;line-height:1.45}
@media (max-width:760px){.facts-grid{grid-template-columns:1fr 1fr}.fact:nth-child(3){border-left:0}.fact:nth-child(n+3){border-top:1px solid var(--trait)}}

/* Sections */
.sec{padding:88px 0}
.sec+.sec{padding-top:0}
.sec-head{max-width:720px;margin-bottom:40px}
.sec-head h2,.pilote-grid h2{margin:14px 0 0;font:900 clamp(28px,4vw,44px)/1.08 var(--display);letter-spacing:-.015em;color:var(--blanc);text-wrap:balance}
.sec-head p{margin:16px 0 0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.two,.trio{grid-template-columns:1fr}}
.panel{background:var(--panneau);border:1px solid var(--trait);border-radius:4px;padding:28px 26px;display:grid;gap:12px;align-content:start}
.panel h3{margin:0;font:800 22px/1.2 var(--display);color:var(--blanc)}
.panel p{margin:0}
.panel-link a{font-weight:700;margin-top:4px}
.panel-link{transition:border-color .15s,box-shadow .15s}
.panel-link:hover{border-color:var(--magenta);box-shadow:0 0 28px -10px var(--magenta)}
.tag{justify-self:start}

/* Boucle */
.loop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.loop{margin:0}
.loop svg{width:100%;height:auto;display:block;overflow:visible}
.loop-track{stroke:var(--trait);stroke-width:2}
.loop-draw{stroke:var(--cyan);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px var(--cyan))}
.node circle{fill:var(--carbone);stroke:var(--c);stroke-width:3;transition:fill .3s}
.node .n{fill:var(--blanc);font:900 24px var(--display);text-anchor:middle}
.node .l{fill:var(--blanc);font:700 17px var(--display);text-anchor:middle}
.node.on circle{fill:var(--c);filter:drop-shadow(0 0 12px var(--c))}
.node.on .n{fill:var(--carbone)}
.center{fill:var(--gris);font:13px var(--mono);text-anchor:middle}
.loop-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.loop-steps li{border-left:4px solid var(--c);padding:4px 0 4px 18px}
.loop-steps h3{margin:0 0 4px;font:800 20px var(--display);color:var(--blanc)}
.loop-steps p{margin:0;font-size:16px}
@media (max-width:860px){.loop-grid{grid-template-columns:1fr;gap:32px}}

/* Tableau comparatif */
.tw{overflow-x:auto;border:1px solid var(--trait);border-radius:4px}
.compare{border-collapse:collapse;width:100%;font-size:16px;line-height:1.45;min-width:560px}
.compare th,.compare td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--trait);vertical-align:top}
.compare thead th{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);background:var(--panneau)}
.compare tbody th{font-weight:600;color:var(--blanc)}
.compare tr:last-child>*{border-bottom:0}
.compare .us{color:var(--blanc);background:color-mix(in srgb,var(--cyan) 7%,transparent)}
.compare thead .us{color:var(--cyan)}
.compare td.us{font-weight:600}

/* Étapes */
.steps{position:relative;padding-left:56px;display:grid;gap:24px;max-width:860px;margin-left:max(0px,calc((100% - 1080px)/2))}
.rail{position:absolute;left:18px;top:8px;bottom:8px;width:3px;background:var(--trait);border-radius:3px}
.rail-fill{position:absolute;inset:0;background:linear-gradient(var(--cyan),var(--magenta),var(--acide),var(--violet));transform-origin:top;border-radius:3px;box-shadow:0 0 12px var(--cyan)}
.step{position:relative;background:var(--panneau);border:1px solid var(--trait);border-radius:4px;padding:30px 28px;transition:border-color .3s,box-shadow .3s}
.step::before{content:"";position:absolute;left:-46px;top:34px;width:15px;height:15px;border-radius:50%;background:var(--carbone);border:3px solid var(--c);transition:background .3s,box-shadow .3s}
.step.is-active{border-color:var(--c);box-shadow:0 0 36px -14px var(--c)}
.step.is-active::before{background:var(--c);box-shadow:0 0 14px var(--c)}
.step .num{font:600 13px var(--mono);color:var(--c);letter-spacing:.1em}
.step h2{margin:8px 0 6px;font:900 clamp(26px,3.4vw,36px)/1.1 var(--display);color:var(--blanc)}
.step .sum{margin:0 0 14px;color:var(--blanc);font-size:18px}
.step ul{margin:0;padding-left:1.2em}.step li{margin:.5em 0}
.step strong{color:var(--blanc)}
.step code{font:.88em var(--mono);background:var(--carbone);border:1px solid var(--trait);padding:2px 6px;border-radius:2px;color:var(--acide)}
@media (max-width:600px){.steps{padding-left:32px}.rail{left:8px}.step::before{left:-31px}.step{padding:24px 20px}}

.limits{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:720px}
.limits li{padding:16px 20px 16px 52px;position:relative;background:var(--panneau);border:1px solid var(--trait);border-radius:4px}
.limits li::before{content:"";position:absolute;left:20px;top:24px;width:14px;height:14px;border-radius:50%;border:3px solid var(--magenta)}
.note{max-width:760px;border:1px solid var(--trait);border-left:4px solid var(--acide);background:var(--panneau);border-radius:4px;padding:24px 26px;display:grid;gap:12px}
.note p{margin:0}

/* Formulaire */
.pilote-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start;scroll-margin-top:90px}
@media (max-width:860px){.pilote-grid{grid-template-columns:1fr;gap:32px}}
.form{background:var(--panneau);border:1px solid var(--trait);border-radius:4px;padding:28px 26px;display:grid;gap:18px}
.form label{display:grid;gap:7px;font-weight:600;color:var(--blanc);font-size:15px}
.form .opt{font-weight:400;color:var(--gris)}
.form input:not([type=checkbox]),.form select,.form textarea{font:400 16px var(--display);background:var(--carbone);color:var(--blanc);border:1px solid #3a3a46;border-radius:3px;padding:12px 14px;width:100%}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
.form .check{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--texte)}
.form .check input{width:20px;height:20px;margin-top:3px;accent-color:var(--cyan);flex:none}
.form button{border:0;cursor:pointer;justify-self:start}
.form-status{margin:0;min-height:1.4em;font-size:15px}
.form-status.ok{color:var(--acide)}.form-status.err{color:var(--magenta)}
.form input[aria-invalid=true]{border-color:var(--magenta)}

/* Feuille de route */
.road{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:760px}
.road li{background:var(--panneau);border:1px solid var(--trait);border-radius:4px;padding:20px 22px;display:grid;gap:4px}
.road h3{margin:0;font:800 20px var(--display);color:var(--blanc)}.road p{margin:0;font-size:16px}
.road .st{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.road .done{border-left:4px solid var(--acide)}.road .done .st{color:var(--acide)}
.road .now{border-left:4px solid var(--cyan)}.road .now .st{color:var(--cyan)}

.posts-home{padding:0}
.cta h2{max-width:20ch}
.sec-cta{padding-bottom:104px}.sec-cta .cta{margin:0}

/* Pied de page */
.foot{padding:0}
.foot .bar{height:4px}
.foot .foot-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px;padding-top:40px;padding-bottom:32px}
.foot-grid b{display:block;margin-bottom:12px;color:var(--blanc);font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.foot-grid nav a{display:block;padding:5px 0}
.foot-grid p{margin:12px 0 0;max-width:36ch}
.foot .brand{font-size:16px}
.foot .copy{border-top:1px solid var(--trait);padding-top:20px;padding-bottom:36px;font-size:13px}
@media (max-width:760px){.foot .foot-grid{grid-template-columns:1fr;gap:28px}}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ===== Identité Barbe-Noire : néon, grain, ruban, sticker ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Bandeau d'annonce + menu pilule (inspiré Surfer) */
.ann{background:#07070A;border-bottom:1px solid var(--trait);text-align:center;font:600 13px/1 var(--mono);padding:11px 16px;color:var(--texte)}
.ann a{margin-left:10px;color:var(--acide);text-decoration:none;white-space:nowrap}.ann a:hover{color:var(--blanc)}
.ann .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px var(--magenta);margin-right:10px;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.top{position:sticky;top:10px;z-index:20;background:transparent;border:0;padding:12px 0 0}
.top .wrap{display:block;min-height:0}
.pill{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:0 12px 0 18px;border:1px solid #2c2c37;border-radius:16px;background:color-mix(in srgb,var(--carbone) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 40px -12px #000}
@media (max-width:900px){.pill .nav{top:calc(100% + 8px);border:1px solid #2c2c37;border-radius:14px;padding:8px 18px 18px}}

/* Hero : grand panneau arrondi (inspiré Grassfeld) */
.hero2{padding:14px 16px 0}
.hero-panel{position:relative;max-width:1400px;margin:0 auto;border:1px solid #2a2a35;border-radius:32px;overflow:hidden;padding:56px 0 48px;background:#09090C}
.fx-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(240,240,243,.16) 1px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:radial-gradient(90% 90% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(90% 90% at 50% 40%,#000 30%,transparent 100%)}
.fx-glow{position:absolute;inset:0;background:radial-gradient(45% 60% at 82% 38%,color-mix(in srgb,var(--violet) 55%,transparent),transparent 70%),radial-gradient(40% 50% at 62% 90%,color-mix(in srgb,var(--magenta) 34%,transparent),transparent 70%),radial-gradient(30% 40% at 8% 0%,color-mix(in srgb,var(--cyan) 18%,transparent),transparent 70%)}
.hero2-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:center;max-width:1320px}
.hero2 h1{margin:16px 0 0;font:900 clamp(40px,5.4vw,84px)/.98 var(--display);font-stretch:72%;letter-spacing:-.02em;color:var(--blanc);text-wrap:balance}
.hero2 h1 .ln{display:block}
.type{color:var(--cyan);text-shadow:0 0 26px color-mix(in srgb,var(--cyan) 60%,transparent);white-space:nowrap}
.type::after{content:"";display:inline-block;width:.09em;height:.82em;margin-left:.06em;background:currentColor;vertical-align:-.04em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero2 .lead{max-width:46ch}
.tiles-wrap{margin-top:36px}
.tiles-cap{margin:0 0 12px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.tiles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tiles li{--c:var(--cyan);display:grid;gap:6px;min-width:84px;padding:12px 14px;background:color-mix(in srgb,var(--c) 8%,#101015);border:1px solid color-mix(in srgb,var(--c) 40%,#23232B);border-radius:10px;font:800 14px var(--display);color:var(--blanc);transition:transform .2s,box-shadow .2s}
.tiles li b{font:600 11px var(--mono);color:var(--c)}
.tiles li:hover{transform:translateY(-3px);box-shadow:0 0 22px -6px var(--c)}

/* Scène produit */
.stage{position:relative;min-height:600px;perspective:1600px}
.neon-beard{position:absolute;left:50%;top:50%;width:min(86%,560px);transform:translate(-50%,-52%);opacity:.5;pointer-events:none}
.win-px{position:absolute;left:9%;right:3%;top:9%;transform:perspective(1600px) rotateY(-13deg) rotateX(5deg) rotate(1deg);transform-style:preserve-3d}
.win{background:#0E0E13;border:1px solid #34344a;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -20px #000,0 0 60px -18px var(--cyan)}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#14141b;border-bottom:1px solid var(--trait);font:600 12px var(--mono);color:var(--gris)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#3b3b4a}.win-bar i:first-child{background:var(--magenta)}.win-bar i:nth-child(2){background:var(--acide)}.win-bar i:nth-child(3){background:var(--cyan)}
.win-bar span{margin-left:10px;color:var(--texte)}.win-bar em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--trait);padding:3px 7px;border-radius:2px}
.win-body{display:grid;grid-template-columns:1fr 1.25fr;grid-template-areas:"s c" "f f";gap:12px;padding:14px}
.win-body section{background:#121219;border:1px solid var(--trait);border-radius:10px;padding:12px 14px}
.win h4,.card3 h4{margin:0 0 10px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);display:flex;justify-content:space-between;gap:8px;align-items:center}
.m-score{grid-area:s}.m-chart{grid-area:c}.m-flow{grid-area:f}
.ring{width:110px;height:110px;display:block;margin:0 auto 8px}
.ring .rt{fill:none;stroke:var(--trait);stroke-width:8}
.ring .rd{fill:none;stroke:var(--cyan);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.18;filter:drop-shadow(0 0 5px var(--cyan))}
.ring text{fill:var(--blanc);font:900 30px var(--display);text-anchor:middle}
.crit{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12px;color:var(--texte)}
.crit li::before{content:"✓";color:var(--acide);margin-right:7px;font-weight:800}
.m-chart svg{width:100%;height:112px;display:block}
.m-chart .area{fill:color-mix(in srgb,var(--magenta) 18%,transparent)}
.m-chart .line{fill:none;stroke:var(--magenta);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 5px var(--magenta))}
.m-flow ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.m-flow li{font:700 12px var(--display);padding:7px 11px;border-radius:999px;border:1px solid var(--trait);color:var(--gris)}
.m-flow .ok{color:var(--carbone);background:var(--acide);border-color:var(--acide)}
.m-flow .now{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px -4px var(--cyan)}

.float{position:absolute}
.card3{background:#101016;border:1px solid #34344a;border-radius:12px;padding:13px 15px;box-shadow:0 24px 50px -14px #000;color:var(--texte);font-size:12px}
.card3 h4 em{font:600 9px var(--mono);font-style:normal;letter-spacing:.1em;color:var(--carbone);background:var(--acide);padding:3px 6px;border-radius:2px}
.f-maps{left:-1%;top:3%;width:150px;transform:rotate(-6deg)}
.f-ia{right:-1%;bottom:12%;width:210px;transform:rotate(4deg)}
.f-art{left:1%;bottom:2%;width:215px;transform:rotate(-3deg)}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.grid7 i{aspect-ratio:1;border-radius:2px;background:var(--c,#3b3b4a);box-shadow:0 0 6px -1px var(--c,transparent)}
.ia{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ia li{display:grid;grid-template-columns:68px 1fr;gap:8px;align-items:center;font-weight:600}
.ia i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--magenta));width:var(--w);box-shadow:0 0 10px -2px var(--cyan)}
.card3 .t{margin:0 0 8px;font:800 15px/1.25 var(--display);color:var(--blanc)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.chips span{font:600 10px var(--mono);border:1px solid var(--trait);padding:3px 7px;border-radius:2px;color:var(--cyan)}
.fake-btn{display:inline-block;background:var(--magenta);color:var(--carbone);font:800 12px var(--display);padding:8px 12px;border-radius:2px;box-shadow:3px 3px 0 var(--blanc)}
.sticker{position:absolute;right:2%;top:2%;background:var(--acide);color:var(--carbone);font:900 20px/1 var(--display);text-transform:uppercase;padding:12px 16px;transform:rotate(7deg);box-shadow:6px 6px 0 var(--magenta)}

@media (max-width:1100px){.f-art{display:none}}
@media (max-width:900px){
  .hero-panel{padding:36px 0 32px;border-radius:24px}
  .hero2-grid{grid-template-columns:1fr;gap:36px}
  .stage{min-height:480px}
  .f-maps,.f-ia{display:none}
  .f-art{display:block;left:auto;right:0;bottom:-4%;width:190px}
  .win-px{left:0;right:0;transform:perspective(1600px) rotateY(-8deg) rotateX(3deg)}
  .sticker{font-size:15px;right:0}
}
@media (max-width:520px){.win-body{grid-template-columns:1fr;grid-template-areas:"s" "c" "f"}.stage{min-height:560px}}

/* Rubans (inspiré rubalise de la DA) */
.tapes{position:relative;height:150px;margin-top:10px;overflow:hidden}
.tape{position:absolute;left:-5%;right:-5%;overflow:hidden;white-space:nowrap;font:900 clamp(18px,2.4vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--carbone);padding:14px 0}
.tape .track{display:inline-flex;will-change:transform}.tape .track span{padding-right:0}
.t1{background:var(--acide);transform:rotate(-1.6deg);top:34px;z-index:2;box-shadow:0 0 40px -8px color-mix(in srgb,var(--acide) 60%,transparent)}
.t2{background:var(--magenta);transform:rotate(1.6deg);top:56px;z-index:1;box-shadow:0 0 40px -8px color-mix(in srgb,var(--magenta) 60%,transparent)}

/* Panneau de texte cinétique (inspiré Surfer) */
.kin-wrap{padding:24px 16px 0}
.kin{position:relative;max-width:1400px;margin:0 auto;border:1px solid #2a2a35;border-radius:32px;overflow:hidden;background:radial-gradient(60% 80% at 50% 50%,color-mix(in srgb,var(--violet) 22%,transparent),transparent 70%),#09090C;min-height:78vh;display:grid;place-items:center;padding:64px 24px}
.kin-beard{position:absolute;left:50%;top:50%;width:min(64%,520px);transform:translate(-50%,-50%);opacity:.28;pointer-events:none}
.kin-lines{position:relative;display:grid;gap:28px;text-align:center;max-width:980px}
.kin .k{margin:0;font:900 clamp(30px,5.4vw,76px)/1.02 var(--display);font-stretch:78%;letter-spacing:-.015em;color:var(--blanc);text-wrap:balance}
.kin .k em{font-style:normal;color:var(--magenta);text-shadow:0 0 30px color-mix(in srgb,var(--magenta) 60%,transparent)}
.kin .k:nth-child(2) em{color:var(--cyan);text-shadow:0 0 30px color-mix(in srgb,var(--cyan) 60%,transparent)}
.kin .k:nth-child(3) em{color:var(--acide);text-shadow:0 0 30px color-mix(in srgb,var(--acide) 55%,transparent)}
.kin.is-pinned{min-height:100vh}
.kin.is-pinned .kin-lines>*{grid-area:1/1;align-self:center}

/* Néon partout : titres, panneaux, CTA */
.sec-head h2 em,.pilote-grid h2 em{font-style:normal;color:var(--cyan);text-shadow:0 0 28px color-mix(in srgb,var(--cyan) 55%,transparent)}
.panel{position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 16px var(--cyan)}
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--trait)}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(240,240,243,.13) 1px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:radial-gradient(80% 100% at 70% 0%,#000,transparent);mask-image:radial-gradient(80% 100% at 70% 0%,#000,transparent)}
.page-hero::after{content:"";position:absolute;right:3%;top:50%;width:min(34vw,380px);aspect-ratio:1;transform:translateY(-50%);background:url(/img/barbe-neon.svg) center/contain no-repeat;opacity:.35;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
@media (max-width:760px){.page-hero::after{opacity:.14}}
.cta-neon{position:relative;overflow:hidden;justify-items:center;text-align:center;padding:48px 28px;border-radius:28px}
.cta-neon .cta-logo{width:min(100%,560px);height:auto}
.cta-neon h2{max-width:none}
.btn{position:relative}
.btn:focus-visible{outline:2px solid var(--blanc);outline-offset:3px}

/* Corrections hero */
.neon-beard{width:min(108%,640px);top:49%;opacity:.95;z-index:0}
.win-px{top:15%;z-index:1}
.float{z-index:2}
.sticker{right:auto;left:41%;top:0;z-index:3}
.fact b span{font:inherit;color:inherit;line-height:inherit}
@media (max-width:900px){.sticker{left:auto;right:2%}.neon-beard{width:min(100%,460px)}}
.neon-beard{width:min(128%,780px);left:46%;top:35%}
.win-px{top:27%}
.f-maps{top:12%}
.sticker{top:2%;left:auto;right:4%}
@media (max-width:900px){.neon-beard{width:min(120%,520px);top:30%}.win-px{top:24%}}
.kin-beard{opacity:.5;width:min(70%,600px)}

/* ===== v3 : grille plus large, hero épuré, ruban unique ===== */
.hero2{padding:14px 20px 0}
.hero-panel{max-width:1680px;padding:88px 0 80px}
.hero2-grid{max-width:1560px;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:88px;padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}
.hero2 h1{font-size:clamp(44px,5vw,92px);line-height:1.02;margin-top:22px}
.hero2 h1 .ln+.ln{margin-top:.06em}
.hero2 .lead{max-width:50ch;font-size:clamp(19px,1.5vw,23px);line-height:1.65;margin-top:32px}
.hero2 .actions{margin-top:44px;gap:18px}
.tiles-wrap{margin-top:56px}
.tiles{gap:14px}
.tiles li{min-width:96px;padding:14px 16px}
.stage{min-height:620px}
.win-px{left:0;right:0;top:6%}
.neon-beard,.float,.sticker,.kin-beard,.page-hero::after{display:none!important}
@media (max-width:1100px){.hero2-grid{gap:56px;padding-left:28px;padding-right:28px}}
@media (max-width:900px){.hero-panel{padding:44px 0 40px}.hero2-grid{grid-template-columns:1fr;gap:48px;padding-left:20px;padding-right:20px}.stage{min-height:440px}.win-px{top:0}}

/* Ruban unique : bande sombre, mots colorés, barbe en séparateur */
.tapes{display:none}
.strip{margin:36px 0 0;overflow:hidden;white-space:nowrap;border-block:1px solid #2a2a35;background:#08080B;padding:22px 0;position:relative}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--carbone),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--carbone),transparent)}
.strip .track{display:inline-flex;will-change:transform}
.strip .track span{display:inline-flex;align-items:center;gap:34px;padding-right:34px}
.strip b{font:900 clamp(26px,3.4vw,46px)/1 var(--display);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em;color:var(--c);text-shadow:0 0 22px color-mix(in srgb,var(--c) 50%,transparent)}
.strip img{width:30px;height:30px;opacity:.85}

/* v3b : ruban sans chevauchement, fenêtre plus grande et centrée */
.strip .track{width:max-content}
.strip .track span{flex:none}
.stage{display:grid;place-items:center;min-height:0}
.win-px{position:relative;left:auto;right:auto;top:auto;width:100%}
.win-bar{padding:14px 18px;font-size:13px}
.win-body{gap:18px;padding:22px}
.win-body section{padding:18px 20px}
.win h4{font-size:12.5px;margin-bottom:14px}
.ring{width:150px;height:150px;margin-bottom:14px}
.ring text{font-size:30px}
.crit{font-size:14px;gap:7px}
.m-chart svg{height:190px}
.m-flow li{font-size:14px;padding:9px 14px}
@media (max-width:900px){.win-body{padding:14px;gap:12px}.ring{width:110px;height:110px}.m-chart svg{height:120px}}

/* ===== v4 : plus d'halo, titre sur 4 lignes, offres, fonctions au scroll ===== */
/* Effets plats uniquement : décalage dur, séparation de couleurs, grain. */
.ann .dot{box-shadow:none}
.fx-glow{display:none}
.type,.sec-head h2 em,.pilote-grid h2 em,.strip b,.kin .k em,.hero2 h1 em{text-shadow:none!important}
.tiles li:hover{box-shadow:4px 4px 0 var(--c)}
.win{box-shadow:12px 12px 0 var(--magenta)}
.ring .rd,.m-chart .line,.loop-draw,.node.on circle{filter:none}
.m-flow .now{box-shadow:none}
.panel::before{box-shadow:none}
.panel-link:hover{box-shadow:5px 5px 0 var(--magenta)}
.card:hover{box-shadow:5px 5px 0 var(--cyan)}
.step.is-active,.step.is-active::before,.rail-fill{box-shadow:none}
.prose h2::before{box-shadow:none}
.cta{background:var(--panneau)}
.blog-hero,.page-hero{background:none}
.grid7 i{box-shadow:none}
.ia i{box-shadow:none}

/* Titre du hero sur 4 lignes, jamais coupé */
.hero2 h1{font-size:clamp(40px,4.5vw,86px)}
.hero2 h1 .ln{display:block;white-space:nowrap}

/* Offres */
.wrap-wide{max-width:1360px}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.offer{position:relative;background:var(--panneau);border:1px solid #2a2a35;border-radius:14px;padding:36px 30px;display:grid;gap:14px;align-content:start}
.offer h3{margin:0;font:900 30px/1.1 var(--display);color:var(--blanc)}
.offer .acc{margin:0;color:var(--texte)}
.offer .vol{margin:6px 0 0;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.offer .prix{margin:0;font:900 clamp(30px,3vw,42px)/1 var(--display);color:var(--blanc)}
.offer .btn{justify-self:stretch;text-align:center;margin:6px 0 10px}
.offer ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--trait);display:grid;gap:10px;font-size:15px}
.offer li::before{content:"✓";color:var(--acide);font-weight:800;margin-right:10px}
.offer-hot{border-color:var(--magenta);box-shadow:10px 10px 0 var(--magenta)}
.badge{position:absolute;top:-14px;right:24px;background:var(--acide);color:var(--carbone);font:800 12px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;transform:rotate(3deg)}
.btn-off{background:#23232B;color:var(--gris);box-shadow:none!important;cursor:not-allowed;transform:none!important}
@media (max-width:960px){.offers{grid-template-columns:1fr}.offer-hot{box-shadow:6px 6px 0 var(--magenta)}}

/* Fonctions du produit qui défilent au scroll */
.feat-wrap{padding:24px 20px 0}
.feat{position:relative;max-width:1560px;margin:0 auto;border:1px solid #2a2a35;border-radius:32px;background:#09090C;padding:72px 48px 56px;overflow:hidden}
.feat-head{max-width:760px;margin-bottom:48px}
.feat-head h2{margin:14px 0 0;font:900 clamp(32px,4.2vw,60px)/1.04 var(--display);font-stretch:80%;letter-spacing:-.015em;color:var(--blanc);text-wrap:balance}
.feat-head h2 em{font-style:normal;color:var(--cyan)}
.feat-list{list-style:none;margin:0;padding:0;display:grid;gap:64px}
.fi{display:grid;gap:12px}
.fi .fn{font:600 12px var(--mono);letter-spacing:.14em;color:var(--c)}
.fi h3{margin:0;font:900 clamp(24px,2.6vw,38px)/1.1 var(--display);font-stretch:85%;color:var(--blanc)}
.fi>p{margin:0;max-width:48ch;font-size:18px}
.fi code{font:.88em var(--mono);background:var(--carbone);border:1px solid var(--trait);padding:2px 6px;border-radius:2px;color:var(--acide)}
.fs{margin-top:20px;background:#0E0E13;border:1px solid #34344a;border-radius:14px;box-shadow:10px 10px 0 var(--c);overflow:hidden}
.fs-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#14141b;border-bottom:1px solid var(--trait);font:600 12px var(--mono);color:var(--gris)}
.fs-bar i{width:10px;height:10px;border-radius:50%;background:#3b3b4a}.fs-bar i:first-child{background:var(--magenta)}.fs-bar i:nth-child(2){background:var(--acide)}.fs-bar i:nth-child(3){background:var(--cyan)}
.fs-bar span{margin-left:10px;color:var(--texte)}.fs-bar em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--trait);padding:3px 7px;border-radius:2px}
.fs-body{padding:26px;display:grid;gap:24px}
.fs h4{margin:0 0 12px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--texte)}
.rules li::before{content:"✓";color:var(--acide);font-weight:800;margin-right:10px}
.rules li.ko::before{content:"✕";color:var(--magenta)}
.fs-audit{grid-template-columns:150px 1fr;align-items:center}
.fs-audit .ring{width:150px;height:150px;margin:0}
.fs-pos{grid-template-columns:auto 1fr;gap:36px;align-items:center}
.fs-pos .grid7{width:240px}
.kw{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kw li{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 14px;background:#121219;border:1px solid var(--trait);border-radius:8px;font-size:15px}
.kw b{font:900 22px var(--display);color:var(--c)}
.fs-plan{grid-template-columns:1fr 1.5fr;gap:32px;align-items:center}
.pillar{border:2px solid var(--c);border-radius:10px;padding:26px 18px;text-align:center;font:900 22px var(--display);color:var(--blanc);background:color-mix(in srgb,var(--c) 10%,#0E0E13)}
.sats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sats li{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--trait);border-left:4px solid var(--c);border-radius:6px;background:#121219;color:var(--blanc);font-weight:600}
.sats li span{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.sats .late{border-left-color:var(--magenta)}
.fs-art{grid-template-columns:1.5fr 1fr;gap:24px}
.doc{background:#121219;border:1px solid var(--trait);border-radius:8px;padding:20px}
.doc .dt{margin:0 0 14px;font:900 20px/1.2 var(--display);color:var(--blanc)}
.doc .dh{margin:18px 0 4px;font:600 11px var(--mono);letter-spacing:.12em;color:var(--c)}
.doc .ln{display:block;height:9px;border-radius:5px;background:#2b2b36;margin:11px 0}.doc .ln.s{width:68%}
.side .big{margin:0 0 12px;font:900 64px/1 var(--display);color:var(--acide)}
.side .fake-btn{margin-top:16px}

/* Mode épinglé (bureau) : le texte à gauche, l'écran du produit à droite */
.feat.is-pinned{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:36px}
.feat.is-pinned .feat-head{margin-bottom:28px}
.feat.is-pinned .feat-grid{position:relative;min-height:440px}
.feat.is-pinned .feat-list{gap:22px;width:42%}
.feat.is-pinned .fi{border-left:4px solid var(--trait);padding-left:22px;opacity:.38;transition:opacity .4s,border-color .4s}
.feat.is-pinned .fi.is-active{opacity:1;border-left-color:var(--c)}
.feat.is-pinned .fi>p{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .4s}
.feat.is-pinned .fi.is-active>p{max-height:160px;opacity:1}
.feat.is-pinned .fs{position:absolute;right:0;top:0;bottom:0;margin:auto 0;height:max-content;width:53%}
.feat-bar{display:none;height:4px;background:var(--trait);border-radius:2px;margin-top:28px;overflow:hidden}
.feat-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--acide),#A866FF);transform-origin:left;transform:scaleX(0)}
.feat.is-pinned .feat-bar{display:block}
@media (max-width:900px){
  .feat{padding:44px 20px 40px;border-radius:24px}
  .fs-audit,.fs-pos,.fs-plan,.fs-art{grid-template-columns:1fr}
  .fs-audit .ring{margin:0 auto}.fs-pos .grid7{width:100%;max-width:260px}
  .fs-body{padding:18px}
}

/* v5 : fenêtre du hero sans fond rose, ombre neutre */
.win{box-shadow:0 30px 60px -24px #000}

/* ===== v6 : deux couleurs, sections alternées sombre / claire ===== */
/* Primaire = cyan (action, solution). Secondaire = magenta (problème, accent rare). Le reste est neutre. */
:root{--acide:var(--cyan);--violet:var(--magenta)}
.btn{background:var(--cyan);color:var(--carbone);box-shadow:5px 5px 0 var(--blanc)}
.btn:hover{color:var(--carbone)}
.nav a.btn{color:var(--carbone)}
.ann a{color:var(--cyan)}
.fact b{color:var(--cyan)!important}
.tiles li{border-color:#33333f;background:transparent}
.tiles li b{color:var(--cyan)}
.tiles li:hover{box-shadow:4px 4px 0 var(--cyan)}
.strip b{color:#D9D9E2;text-shadow:none}
.m-flow .ok{background:var(--cyan);border-color:var(--cyan)}
.badge{background:var(--magenta);color:#fff}
.rail-fill{background:var(--cyan)}
.feat-bar span{background:var(--cyan)}
.road .done{border-left-color:var(--cyan)}.road .done .st{color:var(--cyan)}
.fake-btn{background:var(--magenta);color:#fff}

/* Sections claires (test d'alternance clair / sombre) : on remappe les variables, le CSS existant suit */
.sec{padding:96px 0}
.sec+.sec{padding-top:96px}
.sec-cta{padding-bottom:104px}
.sec-light{--blanc:#0B0B0E;--texte:#33333D;--gris:#5C5C6A;--trait:#D4D4DD;--panneau:#FFFFFF;--cyan:#007F94;--magenta:#C8005F;background:#F0F0F3;color:var(--texte)}
.sec-light .btn{color:#fff}
.sec-light .btn-ghost{color:var(--cyan);background:transparent}
.sec-light code,.sec-light .step code,.sec-light .fi code{background:var(--panneau);border:1px solid var(--trait);color:var(--blanc)}
.sec-light .compare thead th{background:#fff}
.sec-light .step.is-active{border-color:var(--cyan)}
.sec-light .step::before{background:#F0F0F3}
.sec-light .step.is-active::before{background:var(--cyan)}
.sec-light .tag{border-color:var(--trait)}
.sec-dark{background:var(--carbone)}
.sec-head h2 em{font-style:normal;color:var(--cyan);text-shadow:none}
.sec-light .sec-head h2 em{color:var(--magenta)}

/* Problème : trois constats, en couleur secondaire */
.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.pains li{border-top:4px solid var(--magenta);padding-top:20px;display:grid;gap:10px;align-content:start}
.pains .pn{font:900 56px/1 var(--display);color:var(--magenta)}
.pains h3{margin:0;font:800 24px/1.2 var(--display);color:var(--blanc);text-wrap:balance}
.pains p{margin:0;font-size:18px}
@media (max-width:860px){.pains{grid-template-columns:1fr;gap:28px}}

/* Solution : qui fait quoi */
.who{display:grid;grid-template-columns:3fr 2fr;gap:20px;margin-top:56px}
.who-card{border:1px solid #2f2f3b;border-radius:12px;padding:28px 28px 24px;display:grid;gap:14px;align-content:start}
.who-agent{border-color:var(--cyan)}
.who-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:18px;color:var(--blanc)}
.who-card li::before{content:"✓";color:var(--cyan);font-weight:800;margin-right:12px}
@media (max-width:860px){.who{grid-template-columns:1fr}}
.sec-dark .loop-steps li{border-left-color:var(--cyan)}

/* Pour qui */
.persona{border:1px solid #2f2f3b;border-radius:12px;padding:36px 32px;display:grid;gap:18px;align-content:start}
.persona h3{margin:0;font:900 clamp(24px,2.4vw,34px)/1.12 var(--display);font-stretch:88%;color:var(--blanc);text-wrap:balance}
.persona ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:18px}
.persona li::before{content:"✓";color:var(--cyan);font-weight:800;margin-right:12px}
.persona .btn{justify-self:start;margin-top:8px}

/* Fonctions : écrans sans fonds superposés, blanc sur section claire */
.feat.sec-light{border-color:#D4D4DD}
.fs{background:var(--panneau);border:1px solid var(--trait);box-shadow:10px 10px 0 var(--cyan)}
.fs-bar{background:none;border-bottom:1px solid var(--trait)}
.fs-bar i{background:var(--trait)}.fs-bar i:first-child,.fs-bar i:nth-child(2),.fs-bar i:nth-child(3){background:var(--trait)}
.fs-bar span{color:var(--blanc)}
.kw li{background:none;border:0;border-bottom:1px solid var(--trait);border-radius:0;padding:12px 0}
.kw b{color:var(--cyan)}
.doc{background:none}
.fs .ring .rt{stroke:var(--trait)}.fs .ring text{fill:var(--blanc)}
.fs .rules{color:var(--texte)}
.side .big{color:var(--cyan)}
.fs .fake-btn{box-shadow:3px 3px 0 var(--blanc)}
.fs .doc .ln{background:var(--trait)}
.fs .grid7 i{background:var(--c)}
.fs-plan{grid-template-columns:1fr;gap:16px}
.cocon{display:grid;grid-template-columns:minmax(150px,.7fr) 1.6fr;gap:0 28px;align-items:center}
.pillar{background:none;border:2px solid var(--blanc);border-radius:8px;padding:18px 16px;text-align:left;font:900 20px/1.2 var(--display);color:var(--blanc);display:grid;gap:6px}
.pillar span{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.sats{position:relative;list-style:none;margin:0;padding:0 0 0 26px;display:grid;gap:0}
.sats::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;background:var(--blanc)}
.sats li{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:13px 0;background:none;border:0;border-bottom:1px solid var(--trait);border-radius:0;color:var(--blanc);font-weight:400}
.sats li:last-child{border-bottom:0}
.sats li::before{content:"";position:absolute;left:-26px;top:50%;width:22px;height:2px;background:var(--blanc)}
.sats .wk{grid-column:1;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.sats b{grid-column:1;font:700 16px/1.25 var(--display)}
.sats .st{grid-column:2;grid-row:1/3;font:700 12px var(--display);font-style:normal;padding:6px 10px;border:1px solid var(--blanc);border-radius:999px;color:var(--blanc);white-space:nowrap}
.sats .st.done{background:var(--cyan);border-color:var(--cyan);color:#fff}
.sats .st.warn{border-color:var(--magenta);color:var(--magenta)}
.sats .late{border-left:0}
.cap{margin:0;font-size:14px;color:var(--gris)}
.fs-audit .ring .rd,.fs .rd{stroke:var(--cyan)}
@media (max-width:900px){.cocon{grid-template-columns:1fr;gap:18px}}

/* Feuille de route / étapes en clair */
.sec-light .step{box-shadow:none}
.sec-light .compare .us{background:color-mix(in srgb,var(--cyan) 9%,#fff)}
.sec-light .limits li{background:var(--panneau)}
.sec-light .offer{background:#fff}
.sec-light .offer-hot{box-shadow:10px 10px 0 var(--magenta)}
.sec-light .offer li::before,.sec-light .rules li::before{color:var(--cyan)}
.sec-light .fi,.sec-light .fs,.sec-light .step{--c:var(--cyan)!important}
.sec-light .pains li{--c:var(--magenta)}

/* ===== Offres : bascule Mensuel / Annuel ===== */
.bill{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--trait);border-radius:999px;margin:0 0 36px;background:var(--panneau)}
.bill-btn{font:800 15px/1 var(--display);padding:12px 22px;border:0;border-radius:999px;background:transparent;color:var(--texte);cursor:pointer;display:inline-flex;gap:10px;align-items:center;transition:background .2s,color .2s}
.bill-btn:hover{color:var(--blanc)}
.bill-btn.is-on{background:var(--cyan);color:var(--carbone)}
.sec-light .bill-btn.is-on{color:#fff}
.bill-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.remise{font:700 11px/1 var(--mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;background:var(--magenta);color:#fff;padding:4px 7px;border-radius:999px}
.offers-wrap .pa,.offers-wrap .ba{display:none}
.offers-wrap[data-billing="annual"] .pm,.offers-wrap[data-billing="annual"] .bm{display:none}
.offers-wrap[data-billing="annual"] .pa{display:inline}
.offers-wrap[data-billing="annual"] .ba{display:block}
.offer .prix small{font:600 16px var(--display);color:var(--gris)}
.btn.btn-off{background:#23232B;color:var(--gris);box-shadow:none;cursor:not-allowed}
.sec-light .btn.btn-off{background:#E3E3EA;color:var(--gris)}

/* ===== v7 : principes « Apple design » appliqués au web ===== */
/* Ressort amorti (amortissement 1,0, réponse ≈ 0,4 s) : courbe sans rebond pour les survols et appuis */
:root{--spring:cubic-bezier(.22,1,.36,1)}
html{-webkit-text-size-adjust:100%}
body{font-size:1.0625rem;text-rendering:optimizeLegibility}
.lead{font-size:clamp(1.125rem,2vw,1.3rem)}

/* 1. Réponse : le retour se voit à l'appui (pointer-down), pas au relâchement */
.btn,.card,.tiles li,.panel-link,.bill-btn,.nav a,.persona,.offer{transition:transform .4s var(--spring),box-shadow .4s var(--spring),background-color .25s,color .25s,border-color .25s}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--blanc);transition-duration:.08s}
.btn-off:active{transform:none}
.card:active,.panel-link:active,.tiles li:active{transform:scale(.985);transition-duration:.08s}
.bill-btn:active{transform:scale(.96);transition-duration:.08s}

/* Zones tactiles ≥ 44 px */
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn-sm{min-height:44px;padding-top:0!important;padding-bottom:0!important}
.bill-btn{min-height:44px}
.foot-grid nav a{padding:12px 0}
.nav a:not(.btn){min-height:44px;display:inline-flex;align-items:center}

/* 2. Pastille Mensuel / Annuel : elle glisse au lieu de sauter */
.bill{position:relative}
.bill-btn{position:relative;z-index:1}
.bill-thumb{display:none;position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--cyan);z-index:0}
.bill.js-thumb .bill-thumb{display:block}
.bill.js-thumb .bill-btn.is-on{background:transparent}

/* 3. Cohérence spatiale : le menu mobile s'ouvre depuis son bouton */
@media (max-width:900px){
  .pill .nav{transform-origin:top right}
  .nav.open{animation:menu-in .4s var(--spring)}
}
@keyframes menu-in{from{opacity:0;transform:scale(.96) translateY(-6px)}to{opacity:1;transform:none}}

/* 4. Matériaux : le menu est une couche translucide, plus de profondeur, repli opaque si demandé */
.pill{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -16px #000}
@media (prefers-reduced-transparency:reduce){.pill{background:var(--carbone);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){
  .pill,.panel,.card,.offer,.persona,.who-card,.fs,.step{border-color:var(--gris)}
  .eyebrow,.hint,.fn,.tiles-cap{color:var(--texte)}
}

/* 5. Mouvement réduit : pas de défilement ni de glissement, changements instantanés */
@media (prefers-reduced-motion:reduce){
  .strip .track{transform:none!important}
  .nav.open{animation:none}
  .type::after{animation:none}
}

/* ===== v8 : nouveau design (principes Apple) =====
   Simplicité plutôt que minimalisme : titres larges au tracking serré, beaucoup d'air, rayons généreux,
   profondeur douce (plus d'ombres dures), matériaux translucides, une seule couleur d'action. */
:root{--r:20px;--r-lg:28px;--r-xl:40px;
  --hair:rgba(255,255,255,.10);--glass:rgba(255,255,255,.045);
  --soft-dark:0 1px 2px rgba(0,0,0,.5),0 24px 48px -24px rgba(0,0,0,.7);
  --soft-light:0 1px 2px rgba(0,0,0,.04),0 16px 36px -18px rgba(0,0,0,.22)}
body::after{display:none}                      /* plus de grain */
:focus-visible{outline:3px solid color-mix(in srgb,var(--cyan) 70%,transparent);outline-offset:3px;border-radius:8px}

/* Typographie : tracking selon la taille, interlignage inverse, graisse mesurée */
body{letter-spacing:-.003em;line-height:1.6}
h1,h2,h3,.hero2 h1,.sec-head h2,.feat-head h2,.persona h3,.pains h3,.fi h3,.offer h3,.step h2,.page-hero h1,.cta h2,.prose h2{font-stretch:100%;font-weight:700}
.hero2 h1{font-size:clamp(2.75rem,5vw,5.5rem);line-height:1.04;letter-spacing:-.035em}
.page-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.06;letter-spacing:-.032em;max-width:22ch}
.sec-head h2,.feat-head h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.08;letter-spacing:-.03em}
.persona h3,.cta h2{letter-spacing:-.025em;line-height:1.12}
.pains h3,.fi h3,.offer h3,.step h2{letter-spacing:-.02em;font-weight:650}
.eyebrow{font:600 .9rem/1.2 var(--display);letter-spacing:0;text-transform:none;color:var(--cyan)}
.tiles-cap,.hint{font:500 .8125rem var(--display);letter-spacing:.01em;text-transform:none}
.lead{font-weight:400;letter-spacing:-.011em;line-height:1.5}
.brand{font-weight:700;letter-spacing:.04em}
.kw,.fn,.fs-bar,.sats .wk,.pillar span{letter-spacing:.04em}

/* Rythme : sections aérées, titres de section centrés */
.sec,.sec+.sec{padding:clamp(88px,11vw,152px) 0}
.sec-cta{padding-bottom:clamp(96px,12vw,160px)}
.sec-head{text-align:center;margin:0 auto clamp(48px,6vw,80px);max-width:780px}
.sec-head p{margin-left:auto;margin-right:auto;max-width:58ch;font-size:1.125rem}
.feat-head{margin-left:auto;margin-right:auto;text-align:center;max-width:780px}
.offers-wrap .bill{display:flex;width:max-content;margin:0 auto 44px}
.pains,.who,.two,.offers{margin-left:auto;margin-right:auto}
.sec-light{background:#F5F5F7}

/* Boutons : capsules, plus d'ombre dure ; l'appui réduit l'échelle (≈100 ms) */
.btn{border-radius:999px;box-shadow:none;padding:0 28px;font-weight:600;letter-spacing:-.005em;font-size:1rem}
.btn:hover{transform:none;filter:brightness(1.08);box-shadow:none}
.btn:active{transform:scale(.97);box-shadow:none;filter:brightness(.96);transition-duration:.1s}
.btn-sm{box-shadow:none!important;padding:0 18px!important;font-size:.875rem!important}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cyan)}
.btn-ghost:hover{background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan);box-shadow:inset 0 0 0 1.5px var(--cyan);filter:none}
.sec-light .btn-ghost:hover{color:var(--cyan)}
.btn-off{box-shadow:none!important}
.fake-btn{border-radius:999px;box-shadow:none}
.badge{border-radius:999px;transform:none;top:-12px;right:22px;padding:7px 12px;font-weight:700;letter-spacing:.02em;text-transform:none;font-size:.75rem}

/* Matériaux : cartes translucides en sombre, blanches à ombre douce en clair */
.panel,.card,.offer,.persona,.who-card,.step,.fs,.limits li,.road li,.note,.form,.cta{border-radius:var(--r);border:1px solid var(--hair);background:var(--glass);box-shadow:none}
@supports (backdrop-filter:blur(1px)){.panel,.card,.offer,.persona,.who-card,.step,.fs,.cta{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}}
.sec-light .panel,.sec-light .card,.sec-light .offer,.sec-light .step,.sec-light .limits li,.sec-light .pains li,.sec-light .fs{background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:var(--soft-light);-webkit-backdrop-filter:none;backdrop-filter:none}
.panel::before{display:none}
.card:hover,.panel-link:hover,.tiles li:hover{box-shadow:var(--soft-dark);transform:translateY(-2px)}
.offer{padding:40px 32px}
.offer-hot,.sec-light .offer-hot{border:1.5px solid var(--cyan);box-shadow:var(--soft-dark)}
.sec-light .offer-hot{box-shadow:0 1px 2px rgba(0,0,0,.05),0 28px 56px -24px rgba(0,127,148,.45)}
.fs,.win{box-shadow:var(--soft-dark)}
.sec-light .fs{box-shadow:var(--soft-light)}
.win{border-radius:var(--r);border:1px solid var(--hair);background:#101015}
.pains li{border-top:0;border-radius:var(--r);padding:32px 28px;background:var(--glass)}
.pains .pn{font-weight:700;font-size:3rem;letter-spacing:-.03em}
.who-card{padding:32px}
.who-agent{border-color:var(--cyan)}
.persona{padding:44px 38px}
.cta{border-radius:var(--r-xl);padding:clamp(44px,6vw,72px) 28px}
.hero-panel,.feat{border-radius:var(--r-xl);border:1px solid var(--hair)}
.hero-panel{background:linear-gradient(180deg,#15151B 0%,#09090C 60%)}
.fx-dots{opacity:.35}
.feat.sec-light{border-color:rgba(0,0,0,.06);box-shadow:var(--soft-light)}
.tiles li{border-radius:14px;border:1px solid var(--hair);background:var(--glass)}
.tiles li b{font-family:var(--display);font-weight:600;letter-spacing:.02em}

/* Navigation : barre translucide arrondie, discrète */
.pill{border-radius:999px;border:1px solid var(--hair);background:color-mix(in srgb,var(--carbone) 70%,transparent);padding:0 8px 0 22px;min-height:56px;-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
.nav a:not(.btn){font:500 .875rem var(--display);letter-spacing:0;text-transform:none;border-bottom:0;opacity:.8}
.nav a:not(.btn):hover,.nav a[aria-current]{opacity:1;color:var(--blanc)}
.ann{font:500 .8125rem var(--display);letter-spacing:0;background:transparent;border-bottom:1px solid var(--hair)}

/* Ruban : plus calme */
.strip{border-block:1px solid var(--hair);background:transparent;padding:18px 0}
.strip b{font:600 clamp(1.25rem,2.6vw,2rem)/1 var(--display);font-stretch:100%;letter-spacing:-.02em;text-transform:none;color:var(--texte)}
.strip img{opacity:.6}

/* Étapes, tableaux, offres : détails */
.compare thead th{font:500 .8125rem var(--display);letter-spacing:.02em;text-transform:none}
.tw{border-radius:var(--r);border:1px solid var(--hair)}
.sec-light .tw{border-color:rgba(0,0,0,.08);background:#fff;box-shadow:var(--soft-light)}
.bill{border-color:var(--hair);background:var(--glass)}
.sec-light .bill{background:#fff;border-color:rgba(0,0,0,.08)}
.offer .prix{font-weight:700;letter-spacing:-.03em}
.offer .vol,.fs h4,.win h4,.sats .wk{text-transform:none;letter-spacing:.01em;font-family:var(--display);font-weight:500}
@media (max-width:900px){.hero-panel,.feat{border-radius:var(--r-lg)}.persona{padding:32px 24px}}

/* ===== v9 : bouton fantôme lisible, section « fonctions » pleine largeur, film de la solution ===== */
/* Bouton fantôme : texte en couleur primaire dès l'état par défaut (la règle .btn écrasait la couleur) */
.btn.btn-ghost{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 1.5px var(--cyan)}
.btn.btn-ghost:hover{background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan)}
.sec-light .btn.btn-ghost{color:var(--cyan);background:transparent}

/* Fonctions : plus de panneau arrondi, une vraie section claire comme les autres */
.feat-wrap{padding:0;background:#F5F5F7}
.feat{max-width:1280px;margin:0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;padding:clamp(88px,11vw,152px) 40px}
.feat.is-pinned{padding-top:56px;padding-bottom:40px}
.feat.is-pinned .feat-head{margin-bottom:40px}
.feat-bar{background:rgba(0,0,0,.08)}
@media (max-width:900px){.feat{padding:72px 20px}}

/* Film */
.film{max-width:1120px;margin:0 auto}
.film-win{border:1px solid var(--hair);border-radius:var(--r-lg);background:#0E0E13;box-shadow:var(--soft-dark);overflow:hidden}
.film-win .fs-bar{background:none;border-bottom:1px solid var(--hair)}
.film-stage{position:relative;height:clamp(400px,40vw,480px)}
.scene{position:absolute;inset:0;padding:32px;opacity:0;visibility:hidden}
.scene[data-s="0"]{opacity:1;visibility:visible}
.sc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;height:100%;align-items:center}
.sc-side{display:grid;gap:18px;align-content:center;min-width:0}
.sc-side h4{margin:0;font:500 .875rem var(--display);letter-spacing:.01em;color:var(--gris)}
.sc-page{position:relative;border:1px solid var(--hair);border-radius:14px;padding:22px;display:grid;gap:12px;align-content:start;overflow:hidden;height:min(100%,330px)}
.sc-page i{display:block;height:10px;border-radius:5px;background:#272731}
.sc-page .pg-bar{height:14px;width:100%;background:#32323d}.sc-page .pg-h{height:20px;width:62%;background:#3a3a47}
.sc-page .s{width:70%}.sc-page .pg-img{height:76px;border-radius:10px}
.scan{position:absolute;left:0;right:0;top:0;height:56px;background:linear-gradient(transparent,rgba(0,240,255,.16));border-bottom:2px solid var(--cyan)}
.pin{position:absolute;display:inline-flex;align-items:center;gap:8px;font:600 .8125rem var(--display);background:#fff;color:#0B0B0E;padding:8px 13px;border-radius:999px;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.pin b{width:8px;height:8px;border-radius:50%;background:var(--magenta)}
.pin-a{top:34%;left:12%}.pin-b{bottom:12%;right:8%}
.sc-score{display:flex;align-items:center;gap:22px}
.sc-score .ring{width:132px;height:132px;margin:0}
.sc-score .count{margin:0;font-size:1.0625rem;color:var(--texte)}.sc-score .count b{display:block;font:700 2.4rem/1 var(--display);color:var(--blanc);letter-spacing:-.03em}
.kwi{list-style:none;margin:0;padding:0;display:grid}
.kwi li{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--hair);color:var(--blanc);font-weight:500}
.kwi li:last-child{border-bottom:0}
.kwi em{font:600 .75rem var(--display);font-style:normal;color:var(--cyan);border:1px solid var(--cyan);padding:5px 10px;border-radius:999px;white-space:nowrap}
.cocon-svg{width:100%;height:auto;max-height:300px}
.cocon-svg path{fill:none;stroke:var(--gris);stroke-width:1.5;stroke-dasharray:1}
.cocon-svg rect{fill:none;stroke:var(--blanc);stroke-width:1.5}
.cocon-svg .pl-g rect{stroke:var(--cyan);stroke-width:2}
.cocon-svg text{text-anchor:middle;fill:var(--blanc);font:600 16px var(--display)}
.cocon-svg .t2{fill:var(--gris);font:500 13px var(--display)}
.doc2{border:1px solid var(--hair);border-radius:14px;padding:24px;display:grid;gap:12px;align-content:start;height:min(100%,340px);overflow:hidden}
.doc2 .d-title{margin:0 0 6px;font:700 1.35rem/1.2 var(--display);letter-spacing:-.02em;color:var(--blanc);min-height:1.6em}
.doc2 .d-h{margin:8px 0 0;font:700 1rem var(--display);color:var(--blanc)}
.doc2 .d-l{display:block;height:9px;border-radius:5px;background:#2b2b36}.doc2 .d-l.s{width:68%}
.d-table{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.d-table i{height:24px;border:1px solid var(--hair);border-radius:5px}
.d-chips{display:flex;gap:8px;flex-wrap:wrap}.d-chips span{font:600 .75rem var(--display);color:var(--cyan);border:1px solid var(--cyan);padding:5px 10px;border-radius:999px}
.doc2.mini{height:auto}.d-status{margin:10px 0 0;font-weight:600;color:var(--cyan);font-size:.9375rem}
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pills li{font:600 .8125rem var(--display);padding:9px 14px;border:1px solid var(--hair);border-radius:999px;color:var(--gris)}
.pills .ok{background:var(--cyan);border-color:var(--cyan);color:#0B0B0E}.pills .now{border-color:var(--cyan);color:var(--cyan)}
.vbtn,.wp-btn{display:inline-flex;align-self:start;justify-self:start;background:var(--cyan);color:#0B0B0E;font:600 .9375rem var(--display);padding:13px 24px;border-radius:999px}
.vbtn.done{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cyan);color:var(--cyan)}
.cursor{display:none;position:absolute;left:0;top:0;z-index:3;pointer-events:none}
.wp{display:grid;gap:16px;border:1px solid var(--hair);border-radius:14px;padding:24px}
.wp-t{margin:0;font:700 1.15rem var(--display);color:var(--blanc);letter-spacing:-.015em}
.wp-prog{height:6px;border-radius:3px;background:#272731;overflow:hidden}.wp-prog span{display:block;height:100%;background:var(--cyan);transform-origin:left}
.wp-ok{margin:0;color:var(--blanc);font-weight:600}.wp-ok b{color:var(--cyan);margin-right:8px}
.chart2{width:100%;height:170px}.c-line{fill:none;stroke:var(--magenta);stroke-width:3;stroke-linejoin:round;stroke-dasharray:1}.c-area{fill:rgba(255,0,127,.16)}
.c-cap{margin:0;font-size:.9375rem;color:var(--gris)}

.film-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.fstep{position:relative;width:100%;min-height:44px;text-align:left;background:none;border:0;border-top:2px solid var(--hair);padding:14px 4px 0;color:var(--gris);font:600 1rem var(--display);cursor:pointer;transition:color .3s}
.fstep:hover{color:var(--blanc)}
.fstep .fnum{display:block;font:500 .75rem var(--display);margin-bottom:2px}
.fstep .fill{position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left}
.fstep.is-on{color:var(--blanc)}
.film-cap{max-width:64ch;margin:30px auto 0;text-align:center}
.film-cap h3{margin:0 0 8px;font:700 1.6rem var(--display);letter-spacing:-.02em;color:var(--blanc)}
.film-cap p{margin:0;font-size:1.0625rem}
.sec-dark .who{margin-top:64px}
@media (max-width:760px){
  .sc-grid{grid-template-columns:1fr;gap:14px;align-content:center}
  .film-stage{height:600px}.scene{padding:18px}
  .sc-page{height:150px}.sc-page .pg-img{height:34px}
  .film-steps{gap:6px}.fstep{font-size:.78rem}.fstep .fnum{display:none}
  .sc-score .ring{width:96px;height:96px}
}

/* Lien « Connexion » de l'en-tête : un lien discret à côté du bouton principal */
.nav a.nav-login{opacity:.9}
.nav a.nav-login::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:8px;vertical-align:middle}

/* Encadré « Pourquoi 8 ou 12 articles » sous les offres */
.why{max-width:960px;margin:64px auto 0;padding:36px 36px 32px;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--glass)}
.sec-light .why{background:#fff;border-color:rgba(0,0,0,.06);box-shadow:var(--soft-light)}
.why h3{margin:0 0 8px;font:700 1.5rem/1.2 var(--display);letter-spacing:-.02em;color:var(--blanc)}
.why>p{margin:0 0 22px;max-width:60ch}
.why ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:w}
.why li{counter-increment:w;display:grid;gap:6px;align-content:start;padding-top:14px;border-top:2px solid var(--cyan)}
.why li::before{content:counter(w);font:700 .8125rem var(--display);color:var(--cyan)}
.why li b{font:700 1.0625rem/1.3 var(--display);color:var(--blanc)}
.why li span{font-size:.9375rem;line-height:1.55}
@media (max-width:860px){.why{padding:26px 22px}.why ol{grid-template-columns:1fr}}

/* ===== v10 : carte Google Maps, marque blanche, bouton des offres ===== */
/* Bouton « Choisir cette offre » : toujours centré, mensuel comme annuel (display:block cassait le centrage) */
.offer .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.offers-wrap[data-billing="annual"] .ba{display:inline-flex}

/* Carte du quartier : fond de carte neutre, rangs en deux couleurs */
.mapwrap{display:grid;gap:12px;justify-items:start}
.mapwrap h4{margin:0}
.gmap{width:min(100%,340px);height:auto;display:block;border-radius:12px;border:1px solid var(--trait)}
.gmap .land{fill:#EEF0F2}.gmap .water{fill:#CFE2EE}.gmap .park{fill:#D4E7D7}
.gmap .rm{stroke:#fff;stroke-width:3.5;fill:none}
.gmap .re{stroke:#D3D8DD;stroke-width:12;fill:none;stroke-linecap:round}
.gmap .rw{stroke:#fff;stroke-width:9;fill:none;stroke-linecap:round}
.gmap .lbl{font:500 8px var(--display);fill:#8C939A}
.gmap .map-ring{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:0}
.mappin circle{stroke:#fff;stroke-width:1.5}
.mappin text{font:700 9px var(--display);text-anchor:middle;fill:#0B0B0E}
.mappin.a circle{fill:var(--cyan)}.mappin.a text{fill:#fff}
.mappin.b circle{fill:#fff;stroke:var(--cyan);stroke-width:2}
.mappin.c circle{fill:var(--magenta)}.mappin.c text{fill:#fff}
.here path{fill:var(--magenta);stroke:#fff;stroke-width:2}.here circle{fill:#fff}
.you{font:700 9px var(--display);text-anchor:middle;fill:#0B0B0E;paint-order:stroke;stroke:#fff;stroke-width:3}
.legend{margin:0;font-size:.8125rem;color:var(--gris);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.legend .lg{width:11px;height:11px;border-radius:50%;display:inline-block;margin-left:6px}
.lg.a{background:var(--cyan)}.lg.b{background:#fff;border:2px solid var(--cyan)}.lg.c{background:var(--magenta)}
.fs-pos{grid-template-columns:auto 1fr;gap:32px;align-items:center}
@media (max-width:900px){.fs-pos{grid-template-columns:1fr}}

/* Page Agences : démonstration de marque blanche */
.wl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;max-width:1120px;margin:0 auto}
.wl{--wl:#00F0FF;border:1px solid var(--hair);border-radius:var(--r-lg);background:#0E0E13;overflow:hidden;box-shadow:var(--soft-dark)}
.wl-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--hair);font:500 .8125rem var(--display);color:var(--gris)}
.wl-bar i{width:10px;height:10px;border-radius:50%;background:#2c2c37}
.wl-url{margin-left:12px;padding:5px 12px;border-radius:999px;background:var(--glass);color:var(--texte);white-space:nowrap}
.wl-url b{color:var(--blanc);font-weight:600}
.wl-bar em{margin-left:auto;font-style:normal;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--hair);padding:3px 7px;border-radius:2px}
.wl-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--hair)}
.wl-logo{width:40px;height:40px;border-radius:10px;background:var(--wl);color:#0B0B0E;display:grid;place-items:center;font:800 .95rem var(--display);transition:background .4s}
.wl-head>b{font:700 1.1rem var(--display);color:var(--blanc)}
.wl-pill{margin-left:auto;font:600 .75rem var(--display);padding:6px 12px;border-radius:999px;background:var(--wl);color:#0B0B0E;transition:background .4s}
.wl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.wl-kpis div{background:#0E0E13;padding:18px 22px;display:grid;gap:4px}
.wl-kpis small{font-size:.75rem;color:var(--gris)}
.wl-kpis b{font:700 1.6rem var(--display);color:var(--blanc);letter-spacing:-.03em}
.wl-list{list-style:none;margin:0;padding:8px 22px 18px}
.wl-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair);color:var(--blanc)}
.wl-list li:last-child{border:0}
.wl-list i{font:600 .75rem var(--display);font-style:normal;padding:4px 10px;border-radius:999px;border:1px solid var(--hair);color:var(--gris);white-space:nowrap}
.wl-list i.ok{border-color:var(--wl);color:var(--wl);transition:color .4s,border-color .4s}
.wl-points{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.wl-points li{display:grid;gap:4px;border-left:3px solid var(--cyan);padding-left:18px;justify-items:start}
.wl-points b{font:700 1.15rem var(--display);color:var(--blanc);letter-spacing:-.01em}
.wl-points span{color:var(--texte)}
.soon{font:600 .6875rem/1 var(--display);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);border:1px solid var(--hair);padding:4px 8px;border-radius:999px;margin-top:4px}
.adv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.adv article{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--r);padding:30px 26px;box-shadow:var(--soft-light);display:grid;gap:10px;align-content:start}
.adv-n{font:700 .9rem var(--display);width:34px;height:34px;border-radius:50%;background:var(--cyan);color:#fff;display:grid;place-items:center}
.adv h3{margin:0;font:700 1.2rem/1.25 var(--display);color:var(--blanc);letter-spacing:-.015em}
.adv p{margin:0;font-size:1rem}
@media (max-width:900px){.wl-grid{grid-template-columns:1fr;gap:36px}.adv{grid-template-columns:1fr}.wl-bar em{display:none}}

/* Pied de page sans bandeau de couleurs */
.foot .bar{display:none}
.lg.here{background:var(--magenta);border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin-left:10px}

/* ===== v11 : bouton unique par offre, moteurs qui défilent, pas-à-pas en sections alternées ===== */
/* Un seul bouton et un seul prix visibles à la fois (la règle .offer .btn écrasait le masquage) */
.offers-wrap .offer .pa,.offers-wrap .offer .ba{display:none}
.offers-wrap[data-billing="annual"] .offer .pm,.offers-wrap[data-billing="annual"] .offer .bm{display:none}
.offers-wrap[data-billing="annual"] .offer .pa{display:inline}
.offers-wrap[data-billing="annual"] .offer .ba{display:inline-flex}

/* Titre du hero : les moteurs défilent vers le haut, un par un */
.roll{display:inline-block;height:1.14em;overflow:hidden;vertical-align:top;color:var(--cyan)}
.roll-track{display:block;will-change:transform}
.roll-track>span{display:block;height:1.14em;line-height:1.14;white-space:nowrap}

/* Page « Comment ça marche » : une section par étape, carte d'un côté, animation de l'autre, côtés alternés */
.step-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:center}
.step-sec.rev .step-card{order:2}
.step-card{display:grid;gap:14px;align-content:center}
.step-card .num{justify-self:start;font:700 .9rem var(--display);width:38px;height:38px;border-radius:50%;background:var(--cyan);color:#fff;display:grid;place-items:center}
.sec-dark .step-card .num{color:#0B0B0E}
.step-card h2{margin:0;font:700 clamp(2rem,3.4vw,3rem)/1.05 var(--display);letter-spacing:-.03em;color:var(--blanc)}
.step-card .sum{margin:0;font-size:1.25rem;line-height:1.45;color:var(--blanc)}
.step-card ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.step-card li{position:relative;padding-left:26px;font-size:1.0625rem;line-height:1.55}
.step-card li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:800}
.step-card strong{color:var(--blanc)}
.step-card code{font:.88em var(--display);background:transparent;border:1px solid var(--trait);padding:1px 6px;border-radius:4px;color:var(--blanc)}
.viz{container-type:inline-size;min-width:0}
/* La scène est dessinée pour un écran sombre : on rétablit les couleurs sombres dans toute section, même claire */
.film-win{--blanc:#F0F0F3;--texte:#C7C7D1;--gris:#8A8A99;--trait:#23232B;--panneau:#121217;--cyan:#00F0FF;--magenta:#FF007F;color:var(--texte)}
.viz .scene{opacity:1;visibility:visible}
.viz .film-stage{height:clamp(430px,34vw,500px)}
@container (max-width:640px){
  .sc-grid{grid-template-columns:1fr;gap:12px;align-content:center}
  .sc-page{height:104px}.sc-page .pg-img{height:28px}
  .sc-score .ring{width:92px;height:92px}.sc-score .count b{font-size:1.8rem}
  .doc2{height:auto}.doc2 .d-title{font-size:1.1rem}
  .sc-side h4{margin-bottom:0}.rules{gap:6px;font-size:.875rem}
  .kwi li{padding:9px 0}.cocon-svg{max-height:210px}.chart2{height:120px}
  .scene{padding:20px}
}
@media (max-width:900px){.step-row{grid-template-columns:1fr;gap:32px}.step-sec.rev .step-card{order:0}}

/* Bloc d'appel final de la page Agences : texte et bouton à gauche, logo néon à droite */
.cta-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;justify-items:stretch;text-align:left;padding:clamp(36px,5vw,64px)}
.cta-split .cta-copy{display:grid;gap:14px;justify-items:start}
.cta-split .cta-logo{width:100%;max-width:520px;height:auto;justify-self:center}
@media (max-width:860px){.cta-split{grid-template-columns:1fr;gap:28px}.cta-split .cta-logo{max-width:360px;order:-1}}
.mappin text{font:700 12px var(--display)}

/* Barre de navigation : même marge à droite qu'à gauche (l'espace réduit servait à l'ancien bouton) */
.pill{padding:0 30px 0 22px}
@media (max-width:900px){.pill{padding:0 8px 0 22px}}