:root{
  --bg:#141414;--bg-2:#0b0b0b;--surface:#1f1f1f;--surface-2:#2a2a2a;--line:#2f2f2f;
  --ink:#fff;--muted:#b3b3b3;--dim:#808080;--ok:#46d369;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--m500-display:var(--font);
  --r:12px;--rb:8px;--ease:cubic-bezier(.2,.8,.2,1);
  /* noms attendus par le brief */
  --card:var(--surface);--paper:var(--bg);--paper-2:var(--surface-2);--blush:#444;--blush-bg:var(--surface-2);
  --pink:var(--acc);--pink-ink:var(--acc-2);--brand:var(--acc);--aub:#000;--cyan:var(--acc-2);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--m500-fs,16px)/1.5 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pad{padding-inline:max(var(--m500-gutter,max(20px,4vw)),calc((100% - var(--m500-max,1600px)) / 2))}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:var(--rb);font:700 17px var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,transform .15s}
.btn:active{transform:scale(.98)}
.btn-play{background:#fff;color:#000}
.btn-play:hover{background:rgba(255,255,255,.78)}
.btn-play .tri{width:0;height:0;border-left:15px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent}
.btn-info{background:rgba(109,109,110,.7);color:#fff}
.btn-info:hover{background:rgba(109,109,110,.45)}
.btn-acc,.btn-primary{background:var(--acc);color:#fff}
.btn-acc:hover,.btn-primary:hover{background:var(--acc-h)}
.btn-ghost{background:var(--surface-2);color:#fff;border:1px solid #444}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.link{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* En-tête */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;height:68px;background:linear-gradient(180deg,rgba(0,0,0,.8),transparent);transition:background-color .3s}
.top.solid{background-color:var(--bg)}
.logo{font:900 var(--m500-logo,26px) var(--m500-display);letter-spacing:-.03em;color:var(--acc);text-decoration:none}
.top nav{display:flex;gap:20px;font-size:14px}
.top nav a{color:#e5e5e5;text-decoration:none}
.top nav a:hover{color:var(--muted)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.top-r .cb{font-size:14px;color:#e5e5e5;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.top .btn{min-height:34px;padding:0 14px;font-size:14px}
@media (max-width:860px){.top nav,.top-r .cb{display:none}.top{gap:12px}}

/* Billboard */
.bill{position:relative;min-height:min(92vh,900px);display:flex;align-items:flex-end;padding-top:120px;padding-bottom:40px;overflow:hidden;background:#000}
.bill-art{position:absolute;inset:0;z-index:0}
.bill-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.1) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(20,20,20,0) 26%)}
.scene{position:absolute;right:-2%;top:12%;width:min(62vw,980px);transform:perspective(1600px) rotateY(-14deg) rotateX(4deg);transform-origin:right center;transition:opacity .5s}
.bill-in{position:relative;z-index:1;max-width:640px}
.kick{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.3em;color:#ddd;text-transform:uppercase}
.kick b{font-family:var(--m500-display);font-size:26px;letter-spacing:0;color:var(--acc);line-height:1}
.bill h1{margin-top:16px;font:800 clamp(38px,5vw,68px)/1.02 var(--m500-display);letter-spacing:-.03em;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.bill h1 .who{color:var(--acc-2)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:16px;font-size:15px;color:#ddd}
.meta .ok{color:var(--ok);font-weight:700}
.meta .hd{border:1px solid #aaa;border-radius:3px;padding:0 6px;font-size:12px;font-weight:700;color:#ddd}
.meta i{width:4px;height:4px;border-radius:50%;background:#777}
.bill .lead{margin-top:16px;font-size:clamp(16px,1.4vw,19px);color:#e5e5e5;max-width:52ch;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.bill .lead strong{color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (max-width:860px){.bill{min-height:0;padding-top:84px;flex-direction:column;align-items:stretch}.bill-art{position:relative;inset:auto;margin-bottom:-24px;max-height:300px;overflow:hidden}.scene{position:relative;right:auto;top:auto;width:100%;transform:perspective(1200px) rotateX(8deg);transform-origin:center top}.bill-art::after{background:linear-gradient(0deg,#000 6%,rgba(0,0,0,.6) 30%,rgba(0,0,0,0) 70%)}.site{font-size:11px}.s-grid{grid-template-columns:1fr 1fr}.s-grid>div:last-child{display:none}.s-hero strong{font-size:22px}}

/* Profils « Vous êtes… ? » */
.profiles{padding-block:8px 32px}
.profiles h2{font:500 clamp(22px,2.4vw,30px) var(--font);color:#e5e5e5}
.profiles p{margin-top:4px;color:var(--muted);font-size:14px}
.pf-row{display:flex;gap:16px;margin-top:16px;overflow-x:auto;scrollbar-width:none;padding-block:6px 10px}
.pf-row::-webkit-scrollbar{display:none}
.pf{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;width:104px;background:none;border:0;cursor:pointer;color:var(--muted)}
.pf .av{width:96px;height:96px;border-radius:12px;display:grid;place-items:center;transition:outline-color .2s,transform .2s;outline:3px solid transparent;outline-offset:2px}
.pf .av svg{width:44px;height:44px;stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pf span{font-size:14px;text-align:center;line-height:1.2}
.pf:hover .av{transform:scale(1.04)}
.pf:hover span,.pf[aria-pressed="true"] span{color:#fff}
.pf[aria-pressed="true"] .av{outline-color:#fff}
.c1{background:linear-gradient(135deg,#2d6cdf,#1b3f8f)}.c2{background:linear-gradient(135deg,#e5a00d,#a86c00)}.c3{background:linear-gradient(135deg,#d43f8d,#8d1d58)}.c4{background:linear-gradient(135deg,#3aa76d,#1f6b43)}
.c5{background:linear-gradient(135deg,#9b59f0,#5b2bb0)}.c6{background:linear-gradient(135deg,#e2533a,#9c2a17)}.c7{background:linear-gradient(135deg,#444,#1d1d1d)}.c8{background:linear-gradient(135deg,#1fa3b8,#0f6474)}

/* Rangées */
.rowsec{padding-block:20px 36px;position:relative}
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.rowhead h2{font:700 clamp(20px,1.8vw,26px) var(--font)}
.rowhead a{font-size:14px;color:var(--acc-2);text-decoration:none;font-weight:600}
.rail{position:relative;margin-top:12px}
.track{display:grid;grid-auto-flow:column;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:16px;margin-block:-16px;scroll-padding-inline:max(20px,4vw);padding-inline:max(20px,4vw);margin-inline:calc(-1 * max(20px,4vw))}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start}
.navbtn{position:absolute;top:0;bottom:0;z-index:5;width:max(20px,4vw);border:0;border-radius:var(--r);background:rgba(20,20,20,.55);color:#fff;font-size:34px;cursor:pointer;opacity:0;transition:opacity .2s}
.rail:hover .navbtn{opacity:1}
.navbtn.l{left:calc(-1 * max(20px,4vw))}.navbtn.r{right:calc(-1 * max(20px,4vw))}
@media (hover:none){.navbtn{display:none}}

/* Tuiles « inclus » */
.inc-track{grid-auto-columns:clamp(220px,22vw,300px)}
.tile{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--surface);transition:transform .3s var(--ease),box-shadow .3s;cursor:default}
.tile .art{position:absolute;inset:0;display:grid;place-items:center}
.tile .art svg{width:54px;height:54px;stroke:rgba(255,255,255,.9);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.tile h3{font-size:16px;font-weight:700}
.tile p{font-size:13px;color:#ddd;max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.tile:hover,.tile:focus-within{transform:scale(1.08);z-index:3;box-shadow:0 16px 40px rgba(0,0,0,.8)}
.tile:hover p,.tile:focus-within p{max-height:80px;margin-top:4px}
@media (hover:none){.tile p{max-height:none;margin-top:4px}}

/* Sites livrés */
.work-track{grid-auto-columns:clamp(260px,30vw,420px)}
.wcard{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left;color:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.wcard:hover,.wcard:focus-visible{transform:scale(1.05);z-index:3;box-shadow:0 16px 40px rgba(0,0,0,.8)}
.wcard .bg{position:absolute;inset:0}
.wcard .bg i{position:absolute;inset:auto 0 0 0;height:4px;background:var(--acc)}
.wcard .t{position:absolute;left:16px;right:16px;bottom:16px}
.wcard small{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.wcard b{display:block;margin-top:4px;font:800 clamp(22px,2.2vw,30px)/1 var(--m500-display);letter-spacing:-.02em}
.wcard .lbl{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--acc);color:#fff;padding:3px 8px;border-radius:6px}
.w-dj{background:radial-gradient(120% 90% at 80% 10%,#6a3cff,transparent 60%),linear-gradient(135deg,#1a0d3a,#0d0620)}
.w-bat{background:radial-gradient(120% 90% at 80% 10%,#ffb347,transparent 55%),linear-gradient(135deg,#3b2a14,#16100a)}
.w-th{background:radial-gradient(120% 90% at 80% 10%,#c9b08d,transparent 55%),linear-gradient(135deg,#3b3026,#120e0b)}
.w-you{background:repeating-linear-gradient(135deg,#1f1f1f 0 14px,#242424 14px 28px);outline:2px dashed #555;outline-offset:-8px}
.w-you .t b{color:#fff}

/* Interlocuteur */
.owner{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:56px}
.owner .ph{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.owner .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.05);font-size:0}
.owner .ph span{position:absolute;left:12px;top:12px;background:var(--acc);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.owner h2{font:800 clamp(28px,3.4vw,48px)/1.05 var(--m500-display);letter-spacing:-.03em}
.owner h2 em{font-style:normal;color:var(--muted)}
.owner blockquote{margin-top:20px;font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:#e5e5e5}
.owner .sign{margin-top:14px;color:var(--dim);font-size:14px}
.owner .sign b{color:#fff}
.cbk{margin-top:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cb-form{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:560px}
.cb-form input{flex:1 1 160px;min-width:0;min-height:48px;padding:0 14px;border-radius:var(--rb);border:1px solid #555;background:rgba(22,22,22,.8);color:#fff;font:16px var(--font)}
.cb-form input:focus{outline:none;border-color:#fff}
.cb-err{width:100%;color:#ff6b6b;font-size:14px}.cb-err:empty{display:none}
.cb-note{width:100%;font-size:12px;color:var(--dim)}
.cb-ok{padding:12px 16px;border-radius:4px;background:rgba(70,211,105,.12);color:var(--ok);font-weight:600}
@media (max-width:760px){.owner{grid-template-columns:1fr}.owner .ph{max-width:240px}}

/* Formules */
.plans{padding-block:56px}
.plans .ttl{font:800 clamp(28px,3.4vw,48px)/1.05 var(--m500-display);letter-spacing:-.03em;text-align:center}
.plans .sub{text-align:center;color:var(--muted);margin-top:10px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;max-width:1100px;margin-inline:auto}
.plan{position:relative;display:flex;flex-direction:column;border-radius:16px;border:1px solid #3a3a3a;background:var(--surface);overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s;text-align:left;padding:0;color:#fff}
.plan[aria-pressed="true"]{border:2px solid var(--acc);box-shadow:0 20px 60px -24px var(--acc-glow)}
.plan .hd{padding:16px 16px 18px;border-radius:12px;margin:8px;background:#2f2f2f}
.plan[aria-pressed="true"] .hd{background:linear-gradient(135deg,var(--acc),var(--acc-d))}
.plan .hd b{display:block;font-size:20px;font-weight:800}
.plan .hd small{font-size:13px;color:rgba(255,255,255,.75)}
.plan .chk{position:absolute;right:20px;top:20px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--acc);display:none;place-items:center;font-weight:900;font-size:14px}
.plan[aria-pressed="true"] .chk{display:grid}
.plan .reco{position:absolute;left:50%;top:0;transform:translateX(-50%);background:#fff;color:#000;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:0 0 6px 6px}
.plan dl{padding:4px 18px 18px;display:flex;flex-direction:column}
.plan dl div{padding:10px 0;border-bottom:1px solid #333}
.plan dl div:last-child{border-bottom:0}
.plan dt{font-size:12px;color:var(--dim);font-weight:600}
.plan dd{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.plan dd::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.plan dd.y::before{background:var(--ok)}.plan dd.n::before{background:#e5484d}.plan dd.m::before{background:#d2a03a}
.plan.dim{opacity:.72}
.buy{max-width:1100px;margin:16px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.buy>div{border-radius:16px;background:var(--surface);padding:24px}
.amt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.amt b{font:800 clamp(56px,6vw,84px)/1 var(--m500-display);letter-spacing:-.04em}
.amt span{color:var(--muted)}
.anchor{color:var(--dim);font-size:14px;margin-top:6px}
.anchor s{text-decoration-color:var(--acc)}
.seg{display:inline-flex;margin-top:16px;padding:3px;border-radius:10px;background:#2a2a2a;border:1px solid #3a3a3a}
.seg button{min-height:38px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--muted);font-weight:600;cursor:pointer;font-size:14px}
.seg button[aria-pressed="true"]{background:#fff;color:#000}
.buy .btn{width:100%;margin-top:20px}
.fine{margin-top:10px;font-size:12px;color:var(--dim);text-align:center}
.incl li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #2f2f2f;font-size:15px;color:#e5e5e5}
.incl li:last-child{border-bottom:0}
.incl li::before{content:"✓";color:var(--ok);font-weight:800}
.opt{margin-top:14px;padding:12px 14px;border-radius:var(--r);border:1px dashed #555;font-size:14px;color:var(--muted)}
.opt b{color:#fff}
.note{margin:12px auto 0;max-width:1100px;font-size:12px;color:var(--dim);text-align:center}
@media (max-width:860px){.pgrid{grid-template-columns:1fr}.plan:not([aria-pressed="true"]) dl{display:none}.plan:not([aria-pressed="true"]){flex-direction:row}.buy{grid-template-columns:1fr}.pgrid .plan[aria-pressed="true"]{order:-1}}

/* FAQ : rangée de slides */
.faq{padding-block:48px}
.faq .rowhead{margin-bottom:0}
.faq-track{grid-auto-columns:clamp(220px,19vw,280px)}
.fqs{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left;color:#fff;background:#1f1f1f;transition:transform .3s var(--ease),box-shadow .3s}
.fqs:hover,.fqs:focus-visible{transform:scale(1.05);z-index:3;box-shadow:0 16px 40px rgba(0,0,0,.8)}
.fqs .n{position:absolute;left:-6px;bottom:-26px;font:900 190px/1 var(--m500-display);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.18)}
.fqs .bg{position:absolute;inset:0}
.fqs .q{position:absolute;left:18px;right:18px;top:18px;font:700 clamp(18px,1.5vw,21px)/1.2 var(--font)}
.fqs .more{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.f1{background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--acc) 55%,transparent),transparent 60%),#1c1c1c}
.f2{background:radial-gradient(120% 80% at 0% 0%,rgba(45,108,223,.55),transparent 60%),#1c1c1c}
.f3{background:radial-gradient(120% 80% at 100% 100%,rgba(58,167,109,.55),transparent 60%),#1c1c1c}
.f4{background:radial-gradient(120% 80% at 0% 100%,rgba(229,160,13,.5),transparent 60%),#1c1c1c}
.f5{background:radial-gradient(120% 80% at 100% 0%,rgba(155,89,240,.55),transparent 60%),#1c1c1c}
.f6{background:radial-gradient(120% 80% at 0% 0%,rgba(31,163,184,.55),transparent 60%),#1c1c1c}
.f7{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--acc) 60%,transparent),transparent 60%),#1c1c1c}
.dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
.dots i{width:16px;height:3px;border-radius:2px;background:#4d4d4d;transition:background-color .2s,width .2s}
.dots i.on{background:#fff;width:24px}
.fq-dlg .dlg-hero{aspect-ratio:auto;min-height:180px}
.fq-dlg .qa-a{padding:4px 32px 8px;display:flex;flex-direction:column;gap:12px;font-size:clamp(16px,1.4vw,19px);color:#e5e5e5}
.fq-dlg .qa-a strong{color:#fff}
.fq-dlg .qa-a li{padding-left:20px;position:relative}
.fq-dlg .qa-a li::before{content:"";position:absolute;left:2px;top:.7em;width:8px;height:2px;background:var(--acc)}
.fq-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:16px 32px 28px}
@media (max-width:640px){.fq-dlg .qa-a{padding:4px 20px 8px}.fq-nav{padding:16px 20px 24px}}
.restart{margin-top:44px;text-align:center}
.restart p{font-size:clamp(17px,1.5vw,20px)}
.restart .pf-row{justify-content:center;flex-wrap:wrap;overflow:visible}
.restart .pf{width:84px}.restart .pf .av{width:72px;height:72px}.restart .pf .av svg{width:34px;height:34px}

/* Brief */
.brief{padding-block:64px;border-top:8px solid #222}
.brief .step{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.brief .ttl{margin-top:8px;font:800 clamp(28px,3.4vw,48px)/1.05 var(--m500-display);letter-spacing:-.03em;text-align:center}
.brief .sub{text-align:center;color:var(--muted);margin-top:10px}
.mini-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:760px;margin:32px auto 20px}
.mini-steps li{padding:12px;border-radius:var(--r);background:var(--surface);text-align:center}
.mini-steps small{display:block;font-size:12px;font-weight:700;color:var(--acc-2)}
.mini-steps b{display:block;margin-top:2px;font-size:14px}
.mini-steps p{font-size:12px;color:var(--dim);margin-top:2px}
@media (max-width:600px){.mini-steps{grid-template-columns:1fr 1fr}}
.studio{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.level{padding:16px 18px;border-radius:var(--r);background:var(--surface)}
.level-row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.level-row span{color:var(--muted);font-size:14px}
.level-row span b{color:#fff;font-size:18px}
.level-bar{height:6px;border-radius:3px;background:#333;margin:10px 0 12px;overflow:hidden}
.level-bar span{display:block;height:100%;width:0;background:var(--acc);transition:width .6s var(--ease)}
.milestones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.milestones li{font-size:12px;font-weight:600;padding:6px;border-radius:4px;background:#2a2a2a;color:var(--dim);text-align:center}
.milestones li.done{background:rgba(70,211,105,.14);color:var(--ok)}
.milestones li.done::before{content:"✓ "}
@media (max-width:600px){.milestones{grid-template-columns:1fr 1fr}}
.chat{position:relative;border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#000;border-bottom:1px solid #2a2a2a}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--surface-2)}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1);font-size:0}
.who p{font-weight:700;line-height:1.3}
.who small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.count{font-size:13px;font-weight:700;background:var(--acc);color:#fff;padding:4px 10px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.progress{height:3px;background:#2a2a2a}
.progress span{display:block;height:100%;width:0;background:var(--acc);transition:width .5s var(--ease)}
.chat-log{padding:20px 16px;display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:460px;overflow-y:auto;background:#181818}
.rgpd{padding:12px 18px 16px;font-size:12px;color:var(--dim);background:var(--surface);border-top:1px solid #2a2a2a}
.rgpd a{color:var(--muted)}
.row{display:flex;align-items:flex-end;gap:8px}
.row.me{justify-content:flex-end}
.mini{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900}
.msg{max-width:80%;padding:12px 16px;border-radius:20px;font-size:16px;line-height:1.45;overflow-wrap:anywhere}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;box-shadow:0 6px 18px -8px rgba(64,28,114,.25)}
.msg.me{background:var(--brand);color:#fff;border-bottom-right-radius:6px;box-shadow:0 10px 24px -12px rgba(123,47,255,.7)}
.new{animation:pop .35s cubic-bezier(.16,1,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:5px;padding:15px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--blush);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.4;transform:none}40%{opacity:1;transform:translateY(-3px);background:var(--pink)}}
.send{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -10px rgba(123,47,255,.8);transition:transform .2s}
.send:hover{transform:scale(1.06)}
.send svg{width:20px;height:20px}
.reassure{font-size:13px;color:var(--muted);text-align:center}
.chat{position:relative}
.confetti{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:5;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translateY(520px) rotate(600deg);opacity:0}}
.recap{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px}
.recap li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.recap li span{color:var(--muted)}
.recap li b{text-align:right}
.chat-input{border-top:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:#fff}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices button{font:600 15px var(--font);min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--blush);background:var(--blush-bg);color:var(--pink-ink);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.choices button:hover{background:var(--brand);color:#fff;border-color:transparent;transform:translateY(-1px)}
.field{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 18px;border-radius:999px;background:var(--paper-2);border:2px solid var(--blush);transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:var(--pink);box-shadow:0 0 0 4px rgba(123,47,255,.15)}
.field input{flex:1;min-width:0;font:16px var(--font);border:0;background:transparent;color:var(--ink);min-height:44px}
.field input:focus,.field input:focus-visible{outline:none}
.err{color:#b3003c;font-size:14px;font-weight:600}
.chat-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.back{background:none;border:0;font:600 14px var(--font);color:var(--muted);cursor:pointer;padding:8px 0;min-height:44px}
.back:hover{color:var(--ink)}
.back:disabled{opacity:.4;cursor:default}
.final{display:flex;flex-wrap:wrap;gap:10px}
/* Étapes de personnalisation */
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.hint{font-size:13px;font-weight:600;color:var(--muted)}
.choices button[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:transparent}
.svc-list,.links{display:flex;flex-direction:column;gap:8px}
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 44px;gap:8px}
.svc-row input,.addr input,.links input,.ta-field textarea{width:100%;min-width:0;min-height:44px;font:16px var(--font);padding:10px 14px;border-radius:14px;border:2px solid var(--blush);background:var(--paper-2);color:var(--ink)}
.svc-row input:focus,.addr input:focus,.links input:focus,.ta-field textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(123,47,255,.15)}
.del{border:0;border-radius:12px;background:var(--blush-bg);color:var(--pink-ink);font-size:22px;cursor:pointer;min-height:44px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--pink)}
.colors{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.colors label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.colors input[type="color"]{width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;border:2px dashed var(--blush);border-radius:16px;background:var(--paper-2);cursor:pointer;text-align:center;font-size:14px;color:var(--muted)}
.drop b{color:var(--ink)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop:focus-within{border-color:var(--pink)}
.file-list{display:flex;flex-wrap:wrap;gap:6px}
.chip-x{border:0;background:none;color:inherit;font-weight:800;cursor:pointer;padding:0 2px}
.addr{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px}
.addr input:first-child{grid-column:1/-1}
.ta-field textarea{min-height:90px;resize:vertical}
/* Brief en sombre */
.msg.bot{background:#2a2a2a;border:0;box-shadow:none;color:#fff}
.msg.me{background:var(--acc);box-shadow:none}
.mini{background:var(--acc);border-radius:4px}
.typing i{background:#777}
.chat-input{background:var(--surface);border-top:1px solid #2a2a2a;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices button{font:600 15px var(--font);min-height:44px;padding:8px 16px;border-radius:4px;border:1px solid #444;background:#2a2a2a;color:#fff;cursor:pointer;transition:background-color .2s,color .2s}
.choices button:hover,.choices button[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.field{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;border-radius:4px;background:#2a2a2a;border:1px solid #555}
.field:focus-within{border-color:#fff}
.field input{flex:1;min-width:0;font:16px var(--font);border:0;background:transparent;color:#fff;min-height:44px}
.field input:focus{outline:none}
.send{border-radius:4px;background:var(--acc);box-shadow:none}
.err{color:#ff6b6b;font-size:14px;font-weight:600}
.chat-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--dim)}
.foot-left{display:flex;align-items:center;gap:16px}
.back{background:none;border:0;font:600 14px var(--font);color:var(--muted);cursor:pointer;min-height:44px}
.back:hover{color:#fff}.back:disabled{opacity:.4}
.qbtn{background:none;border:0;font:700 14px var(--font);color:#fff;cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.hint{font-size:13px;color:var(--muted)}
.acts,.final{display:flex;flex-wrap:wrap;gap:8px}
.svc-row input,.addr input,.links input,.ta-field textarea{background:#2a2a2a;border-color:#555;color:#fff;border-radius:4px}
.del{background:#333;color:#fff;border-radius:4px}
.drop{background:#2a2a2a;border-color:#555;color:var(--muted);border-radius:6px}.drop b{color:#fff}
.chip{font-size:12px;font-weight:700;padding:6px 10px;border-radius:4px;background:#333;color:#fff}
.recap li{border-bottom-color:#333}.recap li span{color:var(--muted)}
.swatches button{border-color:#141414;box-shadow:0 0 0 1px #444}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px #fff}
.colors label{color:#ddd}


/* Pied de page, barre de reprise */
.foot{padding-block:48px 120px;color:#808080;font-size:13px;border-top:1px solid #222}
.foot .fl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:28px}
.foot .fl div{background:var(--surface);border-radius:var(--r);padding:14px}
.foot .fl b{display:block;color:#e5e5e5;font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0}
.foot a{color:#808080}
@media (max-width:760px){.foot .fl{grid-template-columns:1fr 1fr}}
.resume{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;border-radius:16px;background:rgba(24,24,24,.96);border:1px solid #333;box-shadow:0 20px 50px rgba(0,0,0,.7);transform:translateY(140%);transition:transform .4s var(--ease)}
.resume.show{transform:none}
.resume .rt{flex:1;min-width:0}
.resume b{display:block;font-size:15px}
.resume small{color:var(--muted);font-size:12px}
.resume .rbar{height:3px;background:#444;border-radius:2px;margin-top:6px;overflow:hidden}
.resume .rbar span{display:block;height:100%;background:var(--acc);width:0}
.resume .btn{min-height:42px;padding:0 16px;font-size:15px}

/* Fenêtre de détail */
dialog.dlg{width:min(860px,94vw);max-height:90vh;padding:0;border:0;border-radius:16px;background:#181818;color:#fff;overflow:auto;box-shadow:0 40px 120px rgba(0,0,0,.9)}
dialog.dlg::backdrop{background:rgba(0,0,0,.72)}
.dlg-hero{position:relative;aspect-ratio:16/7;display:flex;align-items:flex-end;padding:24px 32px}
.dlg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#181818,transparent 60%)}
.dlg-hero>*{position:relative;z-index:1}
.dlg-hero h3{font:800 clamp(28px,4vw,46px)/1 var(--m500-display);letter-spacing:-.03em}
.dlg-x{position:absolute;right:14px;top:14px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:#181818;color:#fff;font-size:22px;cursor:pointer}
.dlg-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;padding:8px 32px 32px}
.dlg-body .meta{margin-top:0}
.dlg-body p{color:#ddd;margin-top:12px}
.dlg-body blockquote{margin-top:16px;padding-left:14px;border-left:3px solid var(--acc);font-size:18px}
.dlg-body blockquote footer{margin-top:6px;font-size:13px;color:var(--dim)}
.dlg-side{font-size:14px;color:var(--dim);display:flex;flex-direction:column;gap:10px}
.dlg-side b{color:#ddd;font-weight:500}
.dlg-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:640px){.dlg-body{grid-template-columns:1fr;padding:8px 20px 24px}.dlg-hero{padding:20px}}

/* Maquette du billboard */
.site{border-radius:10px;overflow:hidden;background:#fff;color:#1b1b1b;box-shadow:0 60px 120px -40px rgba(0,0,0,.9);font-size:13px}
.s-bar{display:flex;gap:6px;align-items:center;padding:10px 12px;background:#efefef}
.s-bar i{width:10px;height:10px;border-radius:50%;background:#d0d0d0}
.s-bar span{margin-left:10px;font-size:12px;color:#777}
.s-nav{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid #eee}
.s-nav b{font-weight:800;font-size:15px}
.s-nav span{color:#888}
.s-nav em{margin-left:auto;font-style:normal;background:var(--s-c);color:#fff;font-weight:700;padding:5px 12px;border-radius:999px}
.s-hero{padding:26px 18px;background:linear-gradient(135deg,var(--s-c),var(--s-c2));color:#fff}
.s-hero small{opacity:.85}
.s-hero strong{display:block;margin-top:4px;font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em;max-width:16ch}
.s-btns{display:flex;gap:8px;margin-top:14px}
.s-btns span{padding:7px 14px;border-radius:999px;background:#fff;color:#111;font-weight:700}
.s-btns span+span{background:transparent;border:1px solid rgba(255,255,255,.8);color:#fff}
.s-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;padding:14px 18px 18px}
.s-grid>div{border:1px solid #eee;border-radius:8px;padding:10px}
.s-grid b{display:block;margin-bottom:6px}
.s-li{display:flex;justify-content:space-between;color:#555;border-top:1px solid #f2f2f2;padding:3px 0}
.s-li:first-of-type{border-top:0}
.s-stars{color:#e7a500}
.s-gal{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.s-gal i{aspect-ratio:1;border-radius:4px;background:linear-gradient(135deg,var(--s-c2),#ddd)}

/* Mobile : version épurée */
@media (max-width:640px){
  .top{height:60px}.logo{font-size:21px}.top .btn{min-height:32px;padding:0 12px;font-size:13px}
  .bill .lead{font-size:15px}
  .meta{font-size:13px}.meta .hd{display:none}
  .cta .btn{flex:1 1 100%}
  .profiles{padding-block:4px 20px}.profiles p{display:none}
  .pf{width:72px}.pf .av{width:64px;height:64px;border-radius:12px}.pf .av svg{width:30px;height:30px}.pf span{font-size:12px}
  .rowhead a{display:none}.rowhead h2{font-size:19px}
  .rowsec{padding-block:12px 24px}
  .inc-track{grid-auto-columns:46%}.tile{aspect-ratio:1}.tile .art svg{width:40px;height:40px}.tile h3{font-size:14px}.tile p{display:none}
  .work-track{grid-auto-columns:78%}
  .faq-track{grid-auto-columns:62%}.fqs .n{font-size:150px}
  .owner{padding-block:32px;gap:20px}.owner .ph{max-width:none;aspect-ratio:16/10}.owner blockquote{font-size:17px}
  .plans,.faq{padding-block:32px}
  .buy>div{padding:20px}
  .mini-steps{margin:24px auto 16px}.mini-steps p{display:none}
  .milestones{display:none}
  .chat-log{max-height:380px}
  .foot{padding-block:32px 112px}.foot .fl{display:none}
  .restart .pf{width:64px}.restart .pf .av{width:56px;height:56px}
  .fq-nav .btn,.dlg-act .btn{flex:1 1 100%}
  .owner .ph{aspect-ratio:1;max-width:200px}
}
/* Apparition */
.rv .fade{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.rv .fade.in{opacity:1;transform:none}
/* ===== Plus épuré, plus aéré ===== */
.pad{padding-inline:max(24px,5vw)}
.track{gap:14px;scroll-padding-inline:max(24px,5vw);padding-inline:max(24px,5vw);margin-inline:calc(-1 * max(24px,5vw))}
.navbtn{width:max(24px,5vw)}.navbtn.l{left:calc(-1 * max(24px,5vw))}.navbtn.r{right:calc(-1 * max(24px,5vw))}
.bill{padding-bottom:72px}
.bill-in{max-width:560px}
.kick{font-size:12px;letter-spacing:.34em}
.kick b{font-size:22px}
.bill h1{margin-top:20px}
.meta{margin-top:20px;color:#bbb}
.bill .lead{margin-top:20px;color:#cfcfcf;max-width:46ch}
.cta{margin-top:32px}
.profiles{padding-block:24px 64px}
.profiles h2{font-size:clamp(20px,1.8vw,24px);font-weight:500}
.profiles p{color:var(--dim)}
.pf-row{gap:20px;margin-top:20px}
.rowsec{padding-block:24px 72px}
.rowhead h2{font-size:clamp(19px,1.5vw,22px);font-weight:600;color:#e5e5e5}
.rowhead a{color:var(--muted);font-weight:500}
.rowhead a:hover{color:#fff}
.rail{margin-top:18px}
/* Vignettes plus sobres : fond sombre, une seule lueur de couleur */
.tile{background:#1a1a1a}
.tile.c1,.tile.c2,.tile.c3,.tile.c4,.tile.c5,.tile.c6,.tile.c7,.tile.c8{background:#1a1a1a}
.tile .art{background:radial-gradient(70% 60% at 50% 38%,var(--tg),transparent 70%)}
.tile.c1{--tg:rgba(45,108,223,.35)}.tile.c2{--tg:rgba(229,160,13,.3)}.tile.c3{--tg:rgba(212,63,141,.3)}.tile.c4{--tg:rgba(58,167,109,.3)}
.tile.c5{--tg:rgba(155,89,240,.35)}.tile.c6{--tg:rgba(226,83,58,.3)}.tile.c7{--tg:rgba(255,255,255,.12)}.tile.c8{--tg:rgba(31,163,184,.3)}
.tile .art svg{width:44px;height:44px;stroke-width:1.3}
.tile .cap{padding:16px 18px;background:none}
.tile h3{font-weight:600}
.wcard .lbl{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);letter-spacing:.1em}
.wcard .bg i{height:3px}
.wcard small{letter-spacing:.14em}
.owner{padding-block:56px 96px;gap:clamp(32px,6vw,96px)}
.owner .ph{max-width:300px}
.owner h2{font-weight:700}
.owner blockquote{color:#d6d6d6;max-width:40ch}
.plans{padding-block:96px}
.plans .ttl,.faq .ttl,.brief .ttl{font-weight:700}
.plans .sub{color:var(--dim)}
.pgrid{gap:16px;margin-top:48px}
.plan{border-color:#2a2a2a;background:#181818}
.plan dl div{border-bottom-color:#262626;padding:12px 0}
.plan dt{color:#6f6f6f;font-weight:500}
.plan dd{font-weight:500}
.plan.dim{opacity:.6}
.note{margin-top:20px}
.buy{margin-top:24px;gap:16px}
.buy>div{background:#181818;padding:32px}
.incl li{border-bottom-color:#262626;padding:10px 0}
.opt{border-style:solid;border-color:#2a2a2a}
.faq{padding-block:24px 96px}
.fqs{background:#1a1a1a}
.f1,.f2,.f3,.f4,.f5,.f6,.f7{background-color:#1a1a1a}
.fqs .n{-webkit-text-stroke:1.5px rgba(255,255,255,.14)}
.fqs .q{font-weight:600;left:22px;right:22px;top:22px}
.fqs .more{background:rgba(255,255,255,.1)}
.dots{margin-top:24px}
.restart{margin-top:72px}
.restart p{color:#cfcfcf}
.brief{padding-block:96px;border-top:1px solid #222}
.brief .sub{color:var(--dim)}
.mini-steps{gap:12px;margin:48px auto 28px}
.mini-steps li{background:#181818;padding:16px}
.studio{gap:16px}
.level{background:#181818}
.foot{padding-block:64px 128px;border-top:1px solid #1f1f1f}
.foot .fl{gap:16px;margin-bottom:40px}
.foot .fl div{background:none;padding:0}
@media (max-width:640px){
  .pad{padding-inline:20px}
  .track{scroll-padding-inline:20px;padding-inline:20px;margin-inline:-20px;gap:12px}
  .navbtn{display:none}
  .bill{padding-bottom:48px}
  .profiles{padding-block:16px 40px}.pf-row{gap:14px}
  .rowsec{padding-block:16px 48px}
  .owner{padding-block:32px 64px}
  .plans,.brief{padding-block:64px}
  .pgrid{margin-top:32px}
  .faq{padding-block:16px 64px}
  .restart{margin-top:48px}
  .buy>div{padding:24px}
}
/* Comparatif mobile : moi contre l'agence ou l'IA, ligne par ligne */
.cmpm{display:none}
@media (max-width:860px){
  .pgrid{display:none}
  .cmpm{display:block;margin-top:32px}
  .cm-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
  .cm-switch .seg{margin-top:0}
  .cm-table{margin-top:16px;border-radius:16px;background:#181818;overflow:hidden}
  .cm-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr) minmax(0,1.05fr);align-items:stretch;border-top:1px solid #262626}
  .cm-row:first-child{border-top:0}
  .cm-k{display:flex;align-items:center;padding:12px 8px 12px 14px;font-size:12px;color:#8c8c8c;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
  .cm-v{align-items:center!important;padding:12px 10px;font-size:14px;font-weight:600;line-height:1.3;display:flex;align-items:flex-start;gap:7px}
  .cm-v::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;align-self:flex-start;margin-top:5px}
  .cm-v.y::before{background:var(--ok)}.cm-v.n::before{background:#e5484d}.cm-v.m::before{background:#d2a03a}
  .cm-v.me{background:rgba(255,255,255,.04);box-shadow:inset 2px 0 0 var(--acc)}
  .cm-v.ot{color:#bdbdbd;transition:opacity .25s}
  .cm-v.ot.swap{opacity:0}
  .cm-head .cm-v{flex-direction:column;gap:0;padding-block:14px}
  .cm-head .cm-v::before{display:none}
  .cm-head b{font-size:15px;color:#fff}
  .cm-head .me b{color:var(--acc-2)}
  .cm-head small{font-size:12px;font-weight:500;color:var(--dim)}
  .cm-sum{margin-top:14px;font-size:14px;color:#cfcfcf;text-align:center}
  #plan-note{display:block}
}
/* ===== Grille 1200 px ===== */
.pad,.top{padding-inline:max(24px,calc((100% - 1200px) / 2))}
.track{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
.rail{position:relative}
.navbtn{width:44px;border-radius:12px;background:linear-gradient(90deg,rgba(20,20,20,.9),rgba(20,20,20,.4))}
.navbtn.l{left:0}.navbtn.r{right:0;background:linear-gradient(270deg,rgba(20,20,20,.9),rgba(20,20,20,.4))}
.tile:hover,.tile:focus-within{transform:scale(1.04)}
.track>:first-child{transform-origin:left center}.track>:last-child{transform-origin:right center}
.bill-in{max-width:560px}
/* ===== Réalisations : fiches en slider ===== */
.rs-ctrl{display:flex;gap:8px}
.rs-arr{width:40px;height:40px;border-radius:50%;border:1px solid #3a3a3a;background:#1a1a1a;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s,background-color .2s}
.rs-arr:hover{border-color:#fff}
.rs-arr:disabled{opacity:.35;cursor:default}
.ws-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 2.25);gap:16px;margin-top:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.ws-track::-webkit-scrollbar{display:none}
.wslide{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#181818;color:#fff;text-decoration:none;min-width:0}
.ws-art{position:relative;height:150px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 22px}
.ws-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#181818 0%,rgba(24,24,24,0) 70%)}
.ws-art>*{position:relative;z-index:1}
.ws-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ws-art b{margin-top:4px;font:800 clamp(24px,2.4vw,32px)/1 var(--m500-display);letter-spacing:-.02em}
.ws-lbl{position:absolute;top:14px;left:16px;z-index:1;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.5)}
.ws-body{display:flex;flex-direction:column;gap:12px;padding:4px 22px 22px;flex:1}
.ws-body .meta{margin:0;font-size:13px}
.ws-p{font-size:15px;color:#cfcfcf;line-height:1.5}
.ws-q{padding-left:12px;border-left:3px solid var(--acc);font-size:15px;color:#fff;line-height:1.45}
.ws-q footer{margin-top:4px;font-size:12px;color:var(--dim)}
.ws-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.ws-act .btn{min-height:40px;padding:0 16px;font-size:15px}
.ws-you{outline:1px dashed #444;outline-offset:-1px;background:#141414}
.ws-you .ws-art{background:repeating-linear-gradient(135deg,#1c1c1c 0 12px,#202020 12px 24px)}
.ws-you .btn{align-self:flex-start;margin-top:auto}
.wslide:hover .ws-art b{text-decoration:none}
@media (max-width:900px){.ws-track{grid-auto-columns:calc((100% - 16px) / 1.6)}}
@media (max-width:640px){.ws-track{grid-auto-columns:86%;gap:12px}.rs-ctrl{display:none}.ws-art{height:120px}}
/* ===== Interlocuteur : encadré arrondi ===== */
.owner{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:clamp(24px,3vw,40px);align-items:stretch;padding:clamp(20px,2.4vw,28px);border-radius:20px;background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 55%),#181818;border:1px solid #262626;max-width:none}
.owner .ph{margin:0;max-width:none;aspect-ratio:auto;min-height:260px;border-radius:14px}
.owner .ph img{height:100%}
.ow-main{display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:8px}
.ow-k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-2)}
.owner h2{font:800 clamp(26px,2.8vw,38px)/1.05 var(--m500-display);letter-spacing:-.03em}
.owner h2 em{font-style:normal;color:var(--muted)}
.owner blockquote{margin:0;font-size:clamp(16px,1.4vw,19px);color:#d6d6d6;max-width:none}
.owner .sign{margin:0;color:var(--dim);font-size:13px}
.ow-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:6px;padding-top:14px;border-top:1px solid #2a2a2a;font-size:13px;color:var(--dim)}
.ow-facts b{display:block;color:#e5e5e5;font-size:14px}
.ow-side{display:flex;flex-direction:column;justify-content:center;gap:10px;margin:0;padding:22px;border-radius:14px;background:#0f0f0f;border:1px solid #262626}
.ow-side-t{font-size:18px;font-weight:700;line-height:1.25}
.ow-side-s{font-size:14px;color:var(--muted)}
.ow-side .btn{width:100%;margin-top:6px;font-size:15px}
.ow-side .cb-form{flex-direction:column}
.ow-side .cb-form input,.ow-side .cb-form .btn{flex:none;width:100%}
@media (max-width:980px){.owner{grid-template-columns:180px minmax(0,1fr)}.ow-side{grid-column:1 / -1}}
@media (max-width:640px){.owner{grid-template-columns:1fr;padding:16px}.owner .ph{min-height:0;aspect-ratio:16/10}.ow-facts{gap:8px 16px}}
/* ===== Brief : agencement du site en ligne ===== */
.brief{padding-block:96px;border-top:1px solid #222}
.brief-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.brief-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.brief .ttl,.brief .sub{text-align:left}
.brief .ttl{font-size:clamp(28px,3vw,42px)}
.vsteps{display:flex;flex-direction:column;gap:0;margin-top:14px}
.vsteps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding-bottom:20px}
.vsteps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:#2a2a2a}
.vsteps .ms-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2a2a2a;font-weight:800;font-size:15px}
.vsteps li:first-child .ms-n{background:var(--acc)}
.vsteps b{display:block;font-size:16px}
.vsteps small{display:inline-block;margin-top:2px;font-size:12px;font-weight:700;color:var(--acc-2)}
.vsteps p{font-size:14px;color:var(--dim)}
.chat{border-radius:20px}
.chat-head{background:#0f0f0f}
.chat-level{padding:14px 18px 16px;background:#141414;border-bottom:1px solid #262626}
.level-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.level-row b{font-weight:700}
.level-row span{color:var(--muted);font-size:13px}
.level-row span b{color:#fff;font-size:16px}
.step-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.step-track li{height:4px;border-radius:2px;background:#2f2f2f;overflow:hidden}
.step-track i{display:block;height:100%;width:0;background:var(--acc);transition:width .5s var(--ease)}
.step-track li.done i{width:100%!important;background:var(--ok)}
.row{gap:10px}
.mini{width:30px;height:30px;border-radius:50%;overflow:hidden;background:#2a2a2a;padding:0}
.mini img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1);font-size:0}
.msg-col{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:86%}
.row.me .msg-col{align-items:flex-end}
.msg-name{font-size:12px;font-weight:700;color:var(--dim)}
.msg-col .msg{max-width:100%}
@media (max-width:900px){.brief-grid{grid-template-columns:1fr}.brief-side{position:static}}
@media (max-width:640px){.chat-foot{font-size:13px}.chat-foot button{white-space:nowrap}.chat-foot>span{display:none}.brief{padding-block:56px}.vsteps p{display:none}.vsteps li{padding-bottom:14px}.chat{border-radius:16px}}
/* ===== V6 : 1600 px, hero animé, couleur ===== */
:root{--bg:#171717;--surface:#222;--surface-2:#2c2c2c;--line:#333;--muted:#c2c2c2;--dim:#8f8f8f;--vio:#7b2fff;--cy:#00b4d8;--gold:#ffb020}
body{background:var(--bg)}
.pad,.top{padding-inline:max(24px,calc((100% - 1600px) / 2))}
/* Hero en grille droite, motion design du site */
.bill{display:block;min-height:0;padding-top:120px;padding-bottom:80px;background:radial-gradient(60% 70% at 85% 30%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%),radial-gradient(45% 60% at 10% 90%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%),linear-gradient(180deg,#0b0b0b,var(--bg))}
.bill-art,.scene{display:none}
.bill-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,96px);align-items:center}
.bill-in{max-width:640px}
.bill h1{font-size:clamp(40px,4.6vw,76px)}
.lm-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1c1c1c}
.lm-bar i{width:10px;height:10px;border-radius:50%;background:#3a3a3a}
.lm-bar i:nth-child(1){background:#ff5f57}.lm-bar i:nth-child(2){background:#febc2e}.lm-bar i:nth-child(3){background:#28c840}
.lm-bar span{margin-left:12px;padding:3px 14px;border-radius:999px;background:#2a2a2a;color:#9a9a9a;font-size:12px}
.typing-t{animation:typing 24s steps(1) infinite}
@media (max-width:980px){.bill-grid{grid-template-columns:1fr}.bill{padding-top:96px}}
/* Réalisations : fiches rectangulaires, capture à droite */
.ws-track{grid-auto-columns:calc((100% - 32px) / 2.2);gap:16px}
.wslide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;align-items:stretch;border-radius:16px;background:#1f1f1f;border:1px solid #2c2c2c;min-height:300px}
.ws-art{display:none}
.ws-txt{display:flex;flex-direction:column;gap:10px;padding:22px 20px 22px 24px;min-width:0}
.ws-title{font:800 clamp(22px,1.8vw,28px)/1.05 var(--m500-display);letter-spacing:-.02em}
.ws-txt .meta{margin:0;font-size:13px}
.ws-p{font-size:14px;color:#cfcfcf}
.ws-q{font-size:14px}
.ws-act{margin-top:auto;padding-top:4px}
.ws-act .btn{min-height:38px;padding:0 14px;font-size:14px}
.ws-shot{display:flex;flex-direction:column;margin:14px 14px 14px 0;border-radius:12px;overflow:hidden;background:#0f0f0f;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.ws-shot .lm-bar{padding:8px 10px}.ws-shot .lm-bar span{font-size:11px;padding:2px 10px}
.ws-img{flex:1;min-height:200px;background-size:cover;background-position:top center;background-color:#2a2a2a;transition:background-position 4s ease}
.wslide:hover .ws-img{background-position:bottom center}
.ws-k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-2)}
.ws-you{outline:none;border-style:dashed;border-color:#444;background:#1a1a1a}
.ws-empty .ws-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:radial-gradient(70% 70% at 50% 40%,rgba(123,47,255,.35),transparent 70%),#151515}
.ws-empty b{font:800 40px var(--m500-display);color:#fff}.ws-empty small{color:var(--ok);font-weight:800;letter-spacing:.1em}
@media (max-width:1200px){.ws-track{grid-auto-columns:calc((100% - 16px) / 1.4)}}
@media (max-width:760px){.ws-track{grid-auto-columns:88%}.wslide{grid-template-columns:1fr}.ws-shot{order:-1;margin:12px 12px 0}.ws-img{min-height:150px}.ws-txt{padding:16px}}
.pgrid,.buy,.note,.faq{max-width:none}
/* Touches de couleur */
.profiles{background:radial-gradient(40% 80% at 0% 50%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 70%)}
#inclus{background:radial-gradient(35% 90% at 100% 40%,rgba(0,180,216,.08),transparent 70%)}
#realisations{background:radial-gradient(40% 90% at 0% 60%,rgba(123,47,255,.12),transparent 70%)}
.rowhead h2{display:flex;align-items:center;gap:10px}
.rowhead h2::before{content:"";width:4px;height:1.1em;border-radius:2px;background:linear-gradient(180deg,var(--acc),var(--vio))}
.tile{background:#202020}
.tile.c1{--tg:rgba(45,108,223,.55)}.tile.c2{--tg:rgba(229,160,13,.5)}.tile.c3{--tg:rgba(212,63,141,.5)}.tile.c4{--tg:rgba(58,167,109,.5)}
.tile.c5{--tg:rgba(155,89,240,.55)}.tile.c6{--tg:rgba(226,83,58,.5)}.tile.c7{--tg:rgba(255,255,255,.18)}.tile.c8{--tg:rgba(31,163,184,.5)}
.owner{background:radial-gradient(70% 120% at 100% 0%,rgba(123,47,255,.22),transparent 60%),radial-gradient(60% 120% at 0% 100%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 60%),#1d1d1d}
.ow-k{color:#c4a6ff}
.plans{background:radial-gradient(50% 50% at 50% 30%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 70%)}
.plan[aria-pressed="true"] .hd{background:linear-gradient(135deg,var(--acc),#8a1a7a 70%,var(--vio))}
.plan[aria-pressed="true"]{box-shadow:0 30px 70px -30px color-mix(in srgb,var(--acc) 60%,transparent),0 0 60px -20px rgba(123,47,255,.45)}
.buy>div{background:#1f1f1f}
.buy>div:first-child{background:radial-gradient(80% 100% at 0% 0%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 60%),#1f1f1f}
.fqs .n{-webkit-text-stroke:1.5px rgba(255,255,255,.22)}
.f1,.f2,.f3,.f4,.f5,.f6,.f7{background-color:#202020}
.f2{background-image:radial-gradient(120% 80% at 0% 0%,rgba(45,108,223,.5),transparent 60%)}
.brief{background:radial-gradient(45% 60% at 100% 30%,rgba(123,47,255,.16),transparent 70%),radial-gradient(35% 50% at 0% 80%,rgba(0,180,216,.08),transparent 70%)}
.vsteps li:nth-child(2) .ms-n{background:color-mix(in srgb,var(--vio) 60%,#2a2a2a)}
.vsteps li:nth-child(3) .ms-n{background:color-mix(in srgb,var(--cy) 45%,#2a2a2a)}
.vsteps li:nth-child(4) .ms-n{background:color-mix(in srgb,var(--ok) 45%,#2a2a2a)}
.chat{box-shadow:0 40px 90px -40px rgba(123,47,255,.55),0 0 0 1px #2c2c2c}
.step-track li:nth-child(2) i{background:var(--vio)}.step-track li:nth-child(3) i{background:var(--cy)}.step-track li:nth-child(4) i{background:var(--gold)}
.foot{background:linear-gradient(180deg,transparent,rgba(123,47,255,.06))}
/* ===== V7 ===== */
/* Profils pleine largeur */
.pf-row.big{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;overflow:visible}
.pf-row.big .pf{width:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:16px;overflow:hidden;background:#1f1f1f;text-align:left;transition:transform .25s var(--ease),box-shadow .25s}
.pf-row.big .pf .av{width:100%;height:auto;aspect-ratio:16/11;border-radius:0;outline:0;position:relative;display:grid;place-items:center}
.pf-row.big .pf .av::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 30% 20%,rgba(255,255,255,.28),transparent 60%)}
.pf-row.big .pf .av svg{width:46%;height:46%;max-width:64px;max-height:64px;stroke-width:1.4;position:relative;z-index:1}
.pf-row.big .pf .pt{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}
.pf-row.big .pf .pt b{font-size:15px;color:#fff;font-weight:700}
.pf-row.big .pf .pt small{font-size:12px;color:#9a9a9a;line-height:1.35}
.pf-row.big .pf:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(0,0,0,.9)}
.pf-row.big .pf[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 18px 40px -16px rgba(0,0,0,.9)}
.pf-row.big .pf[aria-pressed="true"] .pt small{color:var(--ok)}
.pf-row.big .pf .pt .go{margin-top:6px;font-size:12px;font-weight:700;color:var(--acc-2);opacity:0;transition:opacity .2s}
.pf-row.big .pf:hover .go,.pf-row.big .pf[aria-pressed="true"] .go{opacity:1}
@media (max-width:1200px){.pf-row.big{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.pf-row.big{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory}.pf-row.big .pf{scroll-snap-align:start}.pf-row.big .pf .pt small{display:none}.pf-row.big .pf .pt .go{display:none}}
/* Offre : icône, titre et texte sur la carte */
.inc-track{grid-auto-columns:clamp(240px,calc((100% - 56px) / 4.6),340px)}
.tile{aspect-ratio:auto;min-height:230px;display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid #2c2c2c;background:radial-gradient(90% 70% at 100% 0%,var(--tg),transparent 65%),linear-gradient(160deg,#242424,#1a1a1a)}
.tile .art,.tile .cap{display:none}
.t-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--tg) 100%,#000);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.t-ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.t-n{position:absolute;right:18px;top:12px;font:900 64px/1 var(--m500-display);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12)}
.tile h3{margin-top:auto;font-size:18px;font-weight:700}
.tile p{max-height:none;margin:0;font-size:14px;color:#c6c6c6;line-height:1.45}
.tile:hover,.tile:focus-within{transform:translateY(-4px)}
@media (max-width:640px){.inc-track{grid-auto-columns:70%}.tile{min-height:200px;aspect-ratio:auto}.tile p{display:block}}
/* Dégradés subtils sur tous les encadrés */
.wslide{background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 60%),radial-gradient(60% 90% at 100% 100%,rgba(123,47,255,.12),transparent 60%),#1f1f1f}
.plan{background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.05),transparent 70%),#1d1d1d}
.fqs{background-color:#202020!important}
.f1{background-image:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 60%)}.f3{background-image:radial-gradient(120% 80% at 100% 100%,rgba(58,167,109,.4),transparent 60%)}
.f4{background-image:radial-gradient(120% 80% at 0% 100%,rgba(229,160,13,.38),transparent 60%)}.f5{background-image:radial-gradient(120% 80% at 100% 0%,rgba(155,89,240,.42),transparent 60%)}
.f6{background-image:radial-gradient(120% 80% at 0% 0%,rgba(31,163,184,.4),transparent 60%)}.f7{background-image:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--acc) 42%,transparent),transparent 60%)}
.chat{background:radial-gradient(60% 40% at 100% 0%,rgba(123,47,255,.14),transparent 70%),#1f1f1f}
.chat-head,.chat-level,.chat-log,.chat-input,.rgpd{background:transparent}
.chat-log{background:rgba(0,0,0,.18)}
.mini-steps li,.level,.ow-side{background:radial-gradient(80% 80% at 100% 0%,rgba(123,47,255,.12),transparent 70%),#1d1d1d}
dialog.dlg{background:radial-gradient(70% 50% at 100% 0%,rgba(123,47,255,.16),transparent 70%),#1b1b1b}
.cm-table{background:radial-gradient(70% 50% at 50% 0%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 70%),#1c1c1c}
/* Prix + inclus fusionnés */
.buy1{margin-top:24px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);border-radius:20px;overflow:hidden;border:1px solid #2e2e2e;background:radial-gradient(60% 120% at 0% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%),radial-gradient(60% 120% at 100% 100%,rgba(123,47,255,.18),transparent 60%),#1d1d1d}
.b1-k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-2)}
.b1-price{display:flex;flex-direction:column;gap:12px;padding:32px;border-right:1px solid #2e2e2e;background:rgba(0,0,0,.18)}
.b1-price .amt b{font-size:clamp(64px,6vw,96px)}
.b1-price .anchor{margin:0}
.b1-price .seg{margin:4px 0 0;align-self:flex-start}
.b1-cta{width:100%;margin-top:8px;min-height:54px;font-size:18px}
.b1-price .fine{margin:0}
.b1-inc{display:flex;flex-direction:column;gap:16px;padding:32px}
.b1-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.b1-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center}
.b1-list svg{width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(255,255,255,.06);fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.b1-list li:nth-child(1) svg{color:#fff;background:rgba(45,108,223,.35)}.b1-list li:nth-child(2) svg{background:rgba(58,167,109,.35)}.b1-list li:nth-child(3) svg{background:rgba(155,89,240,.35)}
.b1-list li:nth-child(4) svg{background:color-mix(in srgb,var(--acc) 35%,transparent)}.b1-list li:nth-child(5) svg{background:rgba(229,160,13,.35)}.b1-list li:nth-child(6) svg{background:rgba(31,163,184,.35)}
.b1-list b{display:block;font-size:15px;font-weight:700}
.b1-list span{font-size:13px;color:#a8a8a8}
.b1-list span b{color:#fff}
.b1-opt{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid #2e2e2e;font-size:14px;color:#bdbdbd}
.b1-opt b{color:#fff}
.b1-tag{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--gold);color:#1a1a1a}
@media (max-width:980px){.buy1{grid-template-columns:1fr}.b1-price{border-right:0;border-bottom:1px solid #2e2e2e}}
@media (max-width:640px){.b1-price,.b1-inc{padding:22px}.b1-list{grid-template-columns:1fr;gap:12px}}
/* Barre « lecteur » */
.resume{left:0;right:0;bottom:0;max-width:none;margin:0;padding:0 max(16px,calc((100% - 1600px) / 2)) env(safe-area-inset-bottom,0px);border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(0deg,rgba(10,10,10,.97),rgba(24,24,24,.94));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -20px 50px rgba(0,0,0,.6);display:block;transform:translateY(110%)}
.resume.show{transform:none}
.pl-track{position:relative;height:4px;background:rgba(255,255,255,.18);margin-inline:calc(-1 * max(16px,calc((100% - 1600px) / 2)));transition:height .2s}
.resume:hover .pl-track{height:6px}
.pl-track span{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);transition:width .5s var(--ease)}
.pl-track i{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent);transition:left .5s var(--ease)}
.pl-in{display:flex;align-items:center;gap:18px;min-height:84px}
.pl-play{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#000;text-decoration:none;transition:transform .15s}
.pl-play:hover{transform:scale(1.06)}
.pl-play .tri{border-left:16px solid #000;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.resume .rt{flex:1;min-width:0}
.resume .rt b{font-size:clamp(16px,1.3vw,19px);font-weight:800}
.resume .rt small{display:block;margin-top:2px;font-size:13px;color:#bdbdbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-time{font-size:14px;color:#bdbdbd;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-cta{min-height:50px;padding:0 26px;font-size:17px}
.pl-cta .tri{border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
@media (max-width:640px){.pl-in{gap:12px;min-height:72px}.pl-play,.pl-time{display:none}.pl-cta{min-height:46px;padding:0 18px;font-size:16px}.resume .rt small{font-size:12px}}
/* ===== V8 : motion design du site, aux couleurs Netflix ===== */
.bill{--brand:linear-gradient(140deg,var(--acc) 0%,#b20710 55%,#5c0409 100%);--pink:var(--acc);--pink-ink:#ff4a53;--aub:#141414;--ink:#f5f5f5;--muted:#a3a3a3;--paper-2:#1c1c1c;--cyan:var(--acc)}
.bill .mock{--line:#2e2e2e}
.bill .mock-tag{left:auto;right:-8px;top:-16px;z-index:3;background:var(--cyan);color:#06222c;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--cyan) 70%,transparent);animation:softblink 2.6s ease-in-out infinite}
.bill .browser{box-shadow:0 50px 100px -40px color-mix(in srgb,var(--acc) 55%,transparent),0 0 0 1px rgba(255,255,255,.08)}
.mock{position:relative;max-width:100%;margin:0 18px 30px 0}
.browser{background:#141414;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(18,6,35,.35),0 0 0 1px var(--line)}
.browser .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1f1f1f}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#3a3a3a}
.browser .bar span{margin-left:10px;font-size:11px;color:#8c8c8c}
.sim{aspect-ratio:16/10;max-width:100%;display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--brand);color:#fff}
.sim-nav{display:flex;align-items:center;gap:10px}
.sim-nav b{font-weight:900;font-size:14px;white-space:nowrap}
.sim-links{display:flex;gap:6px;margin-left:auto}
.sim-links i{width:24px;height:5px;border-radius:3px;background:rgba(255,255,255,.45)}
.sim-call{font-size:10px;font-weight:800;padding:4px 10px;border-radius:999px;background:#fff;color:var(--aub)}
.sim-hero{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.sim-hero small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.sim-hero strong{font-size:clamp(18px,2.3vw,26px);font-weight:900;line-height:1.05;letter-spacing:-.03em;max-width:14ch}
.sim-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.sim-btn{font-size:10px;font-weight:800;padding:6px 11px;border-radius:999px;background:#fff;color:var(--aub);white-space:nowrap;text-align:center}
.sim-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.75);color:#fff}
.sim-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sim-cards span{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:8px;background:rgba(255,255,255,.16);font-size:10px;min-width:0}
.sim-cards b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-cards i{height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
.sim-cards i.img{height:14px;background:rgba(255,255,255,.3)}
.sim-m{height:100%;border-radius:19px;display:flex;flex-direction:column;gap:6px;padding:22px 9px 12px;background:var(--brand);color:#fff;overflow:hidden}
.mock-tag{position:absolute;left:-10px;top:24px;background:var(--pink);color:#fff;font-weight:800;font-size:13px;padding:8px 14px;border-radius:999px;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--pink) 80%,transparent)}
@keyframes blink{0%,80%,100%{opacity:.4;transform:none}40%{opacity:1;transform:translateY(-3px);background:var(--pink)}}
@keyframes fillbar{from{width:0}}
.bill .mock-tag{background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 95%,transparent),rgba(110,226,255,.8));box-shadow:0 12px 30px -10px color-mix(in srgb,var(--cyan) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.6)}
.bill .browser .bar{background:#1f1f1f}
.work .mock{grid-area:mock;align-self:center}
@media (max-width:960px){.bill .mock{margin-top:14px}}
@media (max-width:600px){.bill .sim-cards{display:none}.bill .sim{aspect-ratio:16/9}}
.bill-x .mock{width:100%;max-width:780px;margin-inline:auto}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:#fff;--bgi-op:.14;--bgi-dur:22s}
.hero-bg span{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:var(--bgi-op);transform:rotate(var(--r));animation:m500-drift calc(var(--bgi-dur) * var(--k)) ease-in-out var(--d) infinite alternate;will-change:transform}
.hero-bg svg{display:block;width:100%;height:100%}
@keyframes m500-drift{
  0%{transform:translate3d(0,0,0) rotate(var(--r));opacity:var(--bgi-op)}
  50%{transform:translate3d(16px,-24px,0) rotate(calc(var(--r) + 10deg));opacity:calc(var(--bgi-op) * .55)}
  100%{transform:translate3d(-10px,-46px,0) rotate(calc(var(--r) - 6deg));opacity:var(--bgi-op)}
}
@media (max-width:600px){.hero-bg span{width:calc(var(--s) * .75);height:calc(var(--s) * .75)}}
.mock.is-animated .browser{animation:m500-float 7s ease-in-out infinite}
.mock.is-animated .phone{animation:m500-float 6s ease-in-out -2.5s infinite}
@keyframes m500-float{50%{transform:translateY(-10px)}}
.mock.is-animated .sim{position:relative;overflow:hidden}
.mock.is-animated .sim-hero>*,.mock.is-animated .sim-cards>span{animation:m500-build 9s cubic-bezier(.16,1,.3,1) infinite both;animation-delay:calc(var(--i,0) * .22s)}
.mock.is-animated .sim-hero>:nth-child(2){--i:1}
.mock.is-animated .sim-hero>:nth-child(3){--i:2}
.mock.is-animated .sim-cards>span:nth-child(1){--i:3}
.mock.is-animated .sim-cards>span:nth-child(2){--i:4}
.mock.is-animated .sim-cards>span:nth-child(3){--i:5}
@keyframes m500-build{0%{opacity:0;transform:translateY(12px) scale(.98)}7%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-6px)}}
.mock.is-animated .sim-links i,.mock.is-animated .sim-cards i{background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.75),rgba(255,255,255,.3));background-size:200% 100%;animation:m500-shim 2.4s linear infinite}
@keyframes m500-shim{to{background-position:-200% 0}}
.mock.is-animated .sim-btn:first-child{animation:m500-press 9s ease infinite}
@keyframes m500-press{0%,38%,47%,100%{transform:none;box-shadow:none}41%{transform:scale(.9);box-shadow:0 0 0 6px rgba(255,255,255,.35)}}
.sim-cursor{position:absolute;z-index:3;left:80%;top:30%;width:20px;height:20px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(10,0,30,.45));animation:m500-cursor 9s ease-in-out infinite}
.sim-cursor svg{display:block;width:100%;height:100%;fill:#fff;stroke:var(--aub);stroke-width:1.6}
.sim-cursor::after{content:"";position:absolute;left:-8px;top:-8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.7);transform:scale(0);opacity:0;animation:m500-ripple 9s ease-out infinite}
@keyframes m500-cursor{0%{left:82%;top:28%;opacity:0}8%{opacity:1}34%,42%{left:11%;top:63%}38%{transform:scale(.82)}44%{transform:none}64%{left:48%;top:86%}78%{left:80%;top:86%;opacity:1}92%,100%{left:82%;top:28%;opacity:0}}
@keyframes m500-ripple{0%,37%{transform:scale(0);opacity:0}39%{transform:scale(.4);opacity:.9}50%,100%{transform:scale(1.8);opacity:0}}
@media (max-width:600px){.sim-cursor{animation-name:m500-cursor-sm}}
.sim-toast{position:absolute;z-index:4;right:-6px;top:30%;display:flex;align-items:center;gap:10px;max-width:250px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 22px 44px -16px rgba(10,0,30,.6);font-size:12px;line-height:1.25;animation:m500-toast 9s cubic-bezier(.16,1,.3,1) infinite both}
.sim-toast b{display:block;font-size:13px;font-weight:800}
.sim-toast small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
@keyframes m500-toast{0%,44%{opacity:0;transform:translateY(-10px) scale(.92)}50%,82%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-6px) scale(.96)}}
@media (max-width:600px){.sim-toast{right:4px;top:auto;bottom:-14px;max-width:210px;padding:8px 12px 8px 8px}}
.mock.is-animated .m-scroll{animation:m500-mscroll 9s ease-in-out infinite}
@keyframes m500-mscroll{0%,22%{transform:none}46%,70%{transform:translateY(-34%)}92%,100%{transform:none}}
.mock.is-animated .m-stars{animation:m500-stars 9s ease infinite}
@keyframes m500-stars{0%,52%{color:rgba(255,255,255,.4)}60%,100%{color:#ffd76a}}
@media (max-width:960px) and (min-width:601px){.bill .mock{max-width:620px;width:100%;margin-inline:auto}}
.mock.no-phone{margin-right:0}
.sim-land{position:relative;display:flex;flex-direction:column;gap:0;padding:0;aspect-ratio:16/10;overflow:hidden;background:#141414;color:var(--ink);container-type:inline-size}
.sim-land .sim-nav{flex:none;gap:1.6cqw;padding:2cqw 3cqw;background:var(--brand);color:#fff;position:relative;z-index:2}
.sim-land .sim-nav b{font-size:2.5cqw}
.sim-land .sim-links{gap:1.2cqw}
.sim-land .sim-links i{width:4.4cqw;height:.8cqw}
.sim-land .sim-call{font-size:1.7cqw;padding:.6cqw 1.8cqw}
.sl-view{position:relative;flex:1;min-height:0;overflow:hidden}
.sl-track{height:100%;will-change:transform}
.sl{box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center;gap:2cqw;padding:3cqw 5cqw}
.sl-t{display:block;font-size:3.4cqw;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.sl-hero{justify-content:flex-end;padding-bottom:5cqw;background:var(--brand);color:#fff}
.sl-hero small{font-size:1.7cqw;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.sl-hero strong{max-width:15ch;font-size:5.4cqw;font-weight:900;line-height:1.02;letter-spacing:-.03em}
.sl-hero .sim-btns{gap:1.2cqw;margin-top:.6cqw}
.sim-land .sim-btn{font-size:1.7cqw;padding:1.1cqw 2.2cqw}
.sl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw}
.sl-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sl-grid>span{display:flex;flex-direction:column;gap:1cqw;min-width:0;padding:2.2cqw;border-radius:1.8cqw;background:var(--paper-2);border:1px solid var(--line);font-size:1.8cqw}
.sl-grid b{font-size:2.1cqw;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-grid em{height:.8cqw;border-radius:1cqw;background:var(--line)}
.sl-grid em.short{width:60%}
.sl-ico{display:grid;place-items:center;width:5cqw;height:5cqw;border-radius:1.4cqw;background:var(--brand);color:#fff}
.sl-ico svg{width:55%;height:55%}
.sl-prices .sl-grid>span small{font-size:1.6cqw;color:var(--muted);font-weight:700}
.sl-prices .sl-grid>span b{font-size:3.6cqw;color:var(--pink-ink)}
.sl-prices .sl-grid>span.hl{background:var(--brand);border-color:transparent;transform:translateY(-1cqw);box-shadow:0 2cqw 4cqw -2cqw color-mix(in srgb,var(--pink) 70%,transparent)}
.sl-prices .hl b,.sl-prices .hl small{color:#fff}
.sl-prices .hl em{background:rgba(255,255,255,.45)}
.sl-g{margin-left:1cqw;font-size:1.9cqw;font-weight:700;color:var(--muted);letter-spacing:0}
.sl-g i{font-style:normal;color:#f5a623}
.sl-reviews q{font-size:1.9cqw;font-weight:600;line-height:1.35;quotes:"« " " »"}
.sl-stars{font-style:normal;font-size:1.8cqw;letter-spacing:.2cqw;color:#f5a623}
.sl-reviews small{font-size:1.5cqw;color:var(--muted)}
.sl-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:10cqw;gap:1.4cqw}
.sl-gal i{border-radius:1.4cqw;background:linear-gradient(135deg,var(--acc),#5c0409);background-size:200% 200%}
.sl-gal i:nth-child(2){background-image:linear-gradient(135deg,#3a3a3a,#111)}
.sl-gal i:nth-child(3){background-image:linear-gradient(135deg,#ff5a62,#b20710)}
.sl-gal i:nth-child(4){background-image:linear-gradient(135deg,#b20710,#2a0003)}
.sl-gal i:nth-child(5){background-image:linear-gradient(135deg,#6d6d6d,#232323)}
.sl-gal i:nth-child(6){background-image:linear-gradient(135deg,#ff6b3d,#c11119)}
.sl-contact{align-items:center;background:linear-gradient(180deg,#1c1c1c,#141414)}
.sl-form{display:flex;flex-direction:column;gap:1.4cqw;width:60%}
.sl-form i{height:4cqw;border-radius:1cqw;background:#222;border:1px solid var(--line)}
.sl-form i.tall{height:8cqw}
.sim-land .sl-send{align-self:center;background:var(--brand);color:#fff;border:0}
.sl-bar{position:absolute;right:.8cqw;top:1.5cqw;bottom:1.5cqw;width:.7cqw;border-radius:1cqw;background:rgba(255,255,255,.1);z-index:2}
.sl-bar i{display:block;height:16.666%;border-radius:inherit;background:color-mix(in srgb,var(--pink) 65%,transparent)}
.mock.is-animated .sl-track{animation:m500-land 16s cubic-bezier(.65,0,.35,1) infinite}
.mock.is-animated .sl-bar i{animation:m500-landbar 16s cubic-bezier(.65,0,.35,1) infinite}
@keyframes m500-land{0%,9%{transform:translateY(0)}14%,24%{transform:translateY(-100%)}29%,39%{transform:translateY(-200%)}44%,54%{transform:translateY(-300%)}59%,69%{transform:translateY(-400%)}74%,90%{transform:translateY(-500%)}96%,100%{transform:translateY(0)}}
@keyframes m500-landbar{0%,9%{transform:translateY(0)}14%,24%{transform:translateY(100%)}29%,39%{transform:translateY(200%)}44%,54%{transform:translateY(300%)}59%,69%{transform:translateY(400%)}74%,90%{transform:translateY(500%)}96%,100%{transform:translateY(0)}}
.mock.is-animated .sl-gal i{animation:m500-galshift 5s ease-in-out infinite alternate}
@keyframes m500-galshift{to{background-position:100% 100%}}
.mock.is-animated .sl-reviews .sl-stars{animation:m500-stars-land 16s ease infinite}
@keyframes m500-stars-land{0%,44%{color:rgba(255,255,255,.15)}49%,100%{color:#f5a623}}
.mock.is-landing .sim-cursor{animation:m500-cursor-land 16s ease-in-out infinite}
.mock.is-landing .sim-cursor::after{animation:m500-ripple-land 16s ease-out infinite}
.mock.is-animated .sl-send{animation:m500-press-land 16s ease infinite}
.mock.is-landing .sim-toast{animation:m500-toast-land 16s cubic-bezier(.16,1,.3,1) infinite both}
@keyframes m500-cursor-land{0%{left:84%;top:30%;opacity:0}5%{opacity:1}18%{left:50%;top:58%}33%{left:52%;top:54%}48%{left:28%;top:62%}64%{left:66%;top:60%}78%,86%{left:50%;top:77%}81%{transform:scale(.82)}83%{transform:none}94%,100%{left:84%;top:30%;opacity:0}}
@keyframes m500-ripple-land{0%,79%{transform:scale(0);opacity:0}81%{transform:scale(.4);opacity:.9}90%,100%{transform:scale(1.8);opacity:0}}
@keyframes m500-press-land{0%,79%,86%,100%{transform:none;box-shadow:none}81%{transform:scale(.92);box-shadow:0 0 0 1cqw color-mix(in srgb,var(--pink) 30%,transparent)}}
@keyframes m500-toast-land{0%,82%{opacity:0;transform:translateY(-10px) scale(.92)}86%,96%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.mock.is-landing .sim-toast{top:auto;bottom:14%;right:-10px}
@media (max-width:600px){.bill .sim.sim-land{aspect-ratio:16/11}.mock.is-landing .sim-toast{right:6px;bottom:-12px}}
@media (max-width:960px){.bill .mock{max-width:none!important;width:100%;margin:8px 0 0}.bill .mock.no-phone{margin-bottom:0}}
@keyframes m500-pop-in{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
.sl-hero{justify-content:center;align-items:center;text-align:center;padding-bottom:3cqw}
.sl-hero strong{max-width:18ch}
.sl-hero .sim-btns{justify-content:center}
.sl-services .sl-grid{gap:1.4cqw}
.sl-services .sl-grid>span{flex-direction:row;align-items:center;gap:1.2cqw;padding:1.6cqw}
.sl-services .sl-ico{width:4.2cqw;height:4.2cqw}
.sl-services .sl-grid b{font-size:1.9cqw}
.sl-services em{display:none}
.sl-cta{align-self:stretch;margin-top:.6cqw;padding:.8cqw;border-radius:1cqw;background:var(--brand);color:#fff;font-size:1.6cqw;font-style:normal;font-weight:800;text-align:center}
.sl-prices .hl .sl-cta{background:#fff;color:var(--acc)}
.sim-land .sl-gcta{align-self:center;display:inline-flex;align-items:center;gap:.8cqw;background:#fff;color:#141414;border:0;box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.6)}
.sl-gcta i{font-style:normal;font-weight:900;color:#4285f4}
.sl-gal i{display:grid;place-items:center;color:rgba(255,255,255,.8)}
.sl-gal i svg{width:30%;height:30%}
.mock.is-animated .sl-gal i{animation:m500-galpop 16s cubic-bezier(.34,1.56,.64,1) infinite both,m500-galshift 5s ease-in-out infinite alternate}
.mock.is-animated .sl-gal i.g2{animation-delay:.12s,0s}
.mock.is-animated .sl-gal i.g3{animation-delay:.24s,0s}
.mock.is-animated .sl-gal i.g4{animation-delay:.36s,0s}
.mock.is-animated .sl-gal i.g5{animation-delay:.48s,0s}
.mock.is-animated .sl-gal i.g6{animation-delay:.6s,0s}
@keyframes m500-galpop{0%,57%{transform:scale(.6) rotate(-4deg);opacity:0}61%{transform:scale(1.05);opacity:1}64%{transform:none}66%{transform:scale(1.04)}68%,100%{transform:none;opacity:1}}
.sl-contact{gap:1.6cqw}
.sl-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2cqw 1.6cqw;width:72%}
.sl-f{display:flex;flex-direction:column;gap:.5cqw;min-width:0}
.sl-f.sf3,.sl-f.wide{grid-column:1 / -1}
.sl-f small{font-size:1.4cqw;font-weight:700;color:var(--muted)}
.sl-f>i{display:flex;align-items:center;height:4.2cqw;padding:0 1.2cqw;border-radius:1cqw;background:#222;border:1px solid var(--line);font-style:normal;overflow:hidden}
.sl-f.wide>i{height:7cqw;align-items:flex-start;padding-top:1cqw}
.sl-f em{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;font-size:1.6cqw;font-style:normal;color:var(--ink)}
.sim-land .sl-form .sl-send{grid-column:1 / -1;justify-self:center}
.mock.is-animated .sl-f em{animation:m500-type 16s steps(18,end) infinite}
.mock.is-animated .sl-f.sf2 em{animation-delay:.3s}
.mock.is-animated .sl-f.sf3 em{animation-delay:.6s}
.mock.is-animated .sl-f.sf4 em{animation-delay:.9s}
@keyframes m500-type{0%,72%{max-width:0}77%,97%{max-width:100%}100%{max-width:0}}
.mock.is-animated .sl-track{animation-name:m500-land2}
.mock.is-animated .sl-bar i{animation-name:m500-landbar2}
@keyframes m500-land2{0%,9%{transform:translateY(0)}14%,24%{transform:translateY(-100%)}29%,39%{transform:translateY(-200%)}44%,54%{transform:translateY(-300%)}59%,69%{transform:translateY(-400%)}74%,93%{transform:translateY(-500%)}97%,100%{transform:translateY(0)}}
@keyframes m500-landbar2{0%,9%{transform:translateY(0)}14%,24%{transform:translateY(100%)}29%,39%{transform:translateY(200%)}44%,54%{transform:translateY(300%)}59%,69%{transform:translateY(400%)}74%,93%{transform:translateY(500%)}97%,100%{transform:translateY(0)}}
.mock.is-landing .sim-cursor{animation-name:m500-cursor-land2}
.mock.is-landing .sim-cursor::after{animation-name:m500-ripple-land2}
.mock.is-animated .sl-send{animation-name:m500-press-land2}
.mock.is-landing .sim-toast{animation-name:m500-toast-land2}
@keyframes m500-cursor-land2{0%{left:84%;top:30%;opacity:0}5%{opacity:1}18%{left:30%;top:52%}34%{left:52%;top:74%}49%{left:50%;top:84%}64%{left:64%;top:60%}78%{left:56%;top:56%}84%,89%{left:var(--send-x,50%);top:var(--send-y,82%)}86%{transform:scale(.82)}87.5%{transform:none}96%,100%{left:84%;top:30%;opacity:0}}
@keyframes m500-ripple-land2{0%,85%{transform:scale(0);opacity:0}86%{transform:scale(.4);opacity:.9}93%,100%{transform:scale(1.8);opacity:0}}
@keyframes m500-press-land2{0%,85%,89%,100%{transform:none;box-shadow:none}86%{transform:scale(.92);box-shadow:0 0 0 1cqw color-mix(in srgb,var(--pink) 30%,transparent)}}
@keyframes m500-toast-land2{0%,87%{opacity:0;transform:translateY(-10px) scale(.92)}90%,98%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.sl-prices .sl-grid>span.hl b,.sl-prices .sl-grid>span.hl small{color:#fff}
.sl-choice{grid-column:1 / -1}
.sl-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8cqw}
.sl-chips i{display:inline-flex;align-items:center;gap:.6cqw;padding:.7cqw 1.3cqw .7cqw .8cqw;border-radius:999px;background:#222;border:1px solid var(--line);font-size:1.4cqw;font-style:normal;font-weight:700;color:var(--muted);white-space:nowrap;min-width:0;overflow:hidden}
.sl-chips u{display:grid;place-items:center;width:1.7cqw;height:1.7cqw;border-radius:.5cqw;border:1px solid var(--line);background:#2a2a2a;text-decoration:none}
.sl-chips i.on{border-color:transparent;background:var(--brand);color:#fff}
.sl-chips i.on u{border-color:transparent;background:#fff}
.sl-chips i.on u::after{content:"";width:40%;height:65%;margin-top:-12%;border:solid var(--pink-ink);border-width:0 .3cqw .3cqw 0;transform:rotate(45deg)}
.mock.is-animated .sl-chips i.on{animation:m500-chip-on 16s ease infinite}
.mock.is-animated .sl-chips i.on u::after{animation:m500-chip-tick 16s ease infinite}
@keyframes m500-chip-on{0%,79%{background:#222;color:var(--muted);border-color:var(--line);transform:none}80%{transform:scale(.9)}81.5%{transform:scale(1.06)}83%,97%{background:var(--brand);color:#fff;border-color:transparent;transform:none}100%{background:#222;color:var(--muted)}}
@keyframes m500-chip-tick{0%,80%{opacity:0}82%,97%{opacity:1}100%{opacity:0}}
@keyframes m500-cursor-land2{0%{left:84%;top:30%;opacity:0}5%,91%{opacity:1}18%{left:30%;top:52%}34%{left:52%;top:74%}49%{left:50%;top:84%}64%{left:64%;top:60%}75%,80%{left:var(--chip-x,44%);top:var(--chip-y,58%)}80.5%{transform:scale(.82)}81.5%{transform:none}86%,90%{left:var(--send-x,50%);top:var(--send-y,86%)}87%{transform:scale(.82)}88.5%{transform:none}96%,100%{left:84%;top:30%;opacity:0}}
@keyframes m500-press-land2{0%,86%,90%,100%{transform:none;box-shadow:none}87%{transform:scale(.92);box-shadow:0 0 0 1cqw color-mix(in srgb,var(--pink) 30%,transparent)}}
@keyframes m500-ripple-land2{0%,79%{transform:scale(0);opacity:0}80.5%{transform:scale(.4);opacity:.9}84%{transform:scale(1.6);opacity:0}86.5%{transform:scale(0);opacity:0}87%{transform:scale(.4);opacity:.9}94%,100%{transform:scale(1.8);opacity:0}}
.sl-contact{gap:1.2cqw}
.sl-form{gap:1cqw 1.6cqw}
.sl-f>i{height:3.8cqw}
.sl-f.wide>i{height:5.2cqw}
.mock.is-animated .sl-hero>*{animation:m500-sl-hero 16s cubic-bezier(.2,.8,.2,1) infinite both}
.mock.is-animated .sl-hero strong{animation-delay:.12s}
.mock.is-animated .sl-hero .sim-btns{animation-delay:.24s}
@keyframes m500-sl-hero{0%{opacity:0;transform:translateY(2.5cqw)}5%,95%{opacity:1;transform:none}100%{opacity:0}}
.mock.is-animated .sl-services .sl-grid>span{animation:m500-sl-pop 16s cubic-bezier(.34,1.56,.64,1) infinite both}
.mock.is-animated .sl-services .sl-grid>span:nth-child(2){animation-delay:.08s}
.mock.is-animated .sl-services .sl-grid>span:nth-child(3){animation-delay:.16s}
.mock.is-animated .sl-services .sl-grid>span:nth-child(4){animation-delay:.24s}
.mock.is-animated .sl-services .sl-grid>span:nth-child(5){animation-delay:.32s}
.mock.is-animated .sl-services .sl-grid>span:nth-child(6){animation-delay:.4s}
@keyframes m500-sl-pop{0%,10%{opacity:0;transform:scale(.7) translateY(2cqw)}14.5%{opacity:1;transform:scale(1.04)}16%,100%{opacity:1;transform:none}}
.mock.is-animated .sl-services .sl-ico{animation:m500-sl-spin 16s ease infinite}
@keyframes m500-sl-spin{0%,15%{transform:rotate(-90deg) scale(.5)}18.5%,100%{transform:none}}
.mock.is-animated .sl-prices .sl-grid>span{animation:m500-sl-rise 16s cubic-bezier(.2,.8,.2,1) infinite both}
.mock.is-animated .sl-prices .sl-grid>span:nth-child(2){animation-name:m500-sl-rise-hl;animation-delay:.12s}
.mock.is-animated .sl-prices .sl-grid>span:nth-child(3){animation-delay:.24s}
@keyframes m500-sl-rise{0%,25%{opacity:0;transform:translateY(5cqw)}30%,100%{opacity:1;transform:none}}
@keyframes m500-sl-rise-hl{0%,25%{opacity:0;transform:translateY(5cqw)}30%{opacity:1;transform:translateY(-1cqw)}33%{transform:translateY(-1cqw) scale(1.05)}36%,100%{opacity:1;transform:translateY(-1cqw)}}
.mock.is-animated .sl-reviews .sl-grid>span:first-child{animation:m500-sl-left 16s cubic-bezier(.2,.8,.2,1) infinite both}
.mock.is-animated .sl-reviews .sl-grid>span:last-child{animation:m500-sl-right 16s cubic-bezier(.2,.8,.2,1) infinite both}
@keyframes m500-sl-left{0%,40%{opacity:0;transform:translateX(-6cqw) rotate(-2deg)}45.5%,100%{opacity:1;transform:none}}
@keyframes m500-sl-right{0%,41%{opacity:0;transform:translateX(6cqw) rotate(2deg)}46.5%,100%{opacity:1;transform:none}}
.mock.is-animated .sim-land .sl-gcta{animation:m500-sl-gcta 16s ease infinite}
@keyframes m500-sl-gcta{0%,46%{opacity:0;transform:scale(.8)}49%{opacity:1;transform:scale(1.06)}51%,100%{opacity:1;transform:none}}
.mock.is-animated .sl-contact .sl-f{animation:m500-sl-field 16s cubic-bezier(.2,.8,.2,1) infinite both}
.mock.is-animated .sl-contact .sl-f.sf2{animation-delay:.08s}
.mock.is-animated .sl-contact .sl-f.sf3{animation-delay:.16s}
.mock.is-animated .sl-contact .sl-f.sf4{animation-delay:.24s}
@keyframes m500-sl-field{0%,70%{opacity:0;transform:translateY(2cqw)}74%,100%{opacity:1;transform:none}}

.bill .hero-bg span:nth-child(3n+1){color:var(--acc);--bgi-op:.32}
.bill .sim-land .sim-nav{background:#0b0b0b;border-bottom:1px solid #262626}
.bill .sim-land .sim-nav b{color:var(--acc);letter-spacing:-.02em}
.bill .sim-call{background:var(--acc);color:#fff}
.bill .sl-hero{background:radial-gradient(90% 120% at 50% 110%,color-mix(in srgb,var(--acc) 55%,transparent),transparent 60%),linear-gradient(180deg,#141414,#0b0b0b)}
.bill .sl-hero small{color:var(--acc);opacity:1;font-weight:800}
.bill .sim-btn.ghost{background:rgba(109,109,110,.7);border:0}
.bill .sl-prices .sl-grid>span.hl{box-shadow:0 2cqw 5cqw -2cqw color-mix(in srgb,var(--acc) 80%,transparent)}
.bill .sl-grid>span{background:linear-gradient(160deg,#232323,#1a1a1a)}
.bill .sl-bar i{background:var(--acc)}
.bill .sim-cursor svg{fill:#fff;stroke:#141414}
.bill .mock{margin:0}

/* ===== V8 ===== */
/* Hero : texte sur la moitié au moins */
.bill-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,4vw,72px)}
.bill-in{max-width:none}
.bill h1 .who{display:inline}
@media (max-width:980px){.bill-grid{grid-template-columns:1fr}.bill .mock{max-width:640px}}
@media (max-width:640px){.bill h1{font-size:clamp(34px,9vw,44px)}}
.bill h1{font-size:clamp(38px,3.7vw,62px);line-height:1.04}
/* Métiers : tuiles photo façon Netflix */
.pf-row.big .pf{background:#141414;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.pf-row.big .pf .av{aspect-ratio:4/5;background:#222;overflow:hidden;place-items:stretch}
.pf-row.big .pf .av::after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 65%,#0b0b0b 100%);z-index:1}
.pf-row.big .pf .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s}
.pf-row.big .pf:hover .av img{transform:scale(1.07)}
.pf-row.big .pf .pt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;text-align:left;align-items:flex-start}
.pf-row.big .pf{position:relative}
.pf-row.big .pf .pt b{font-size:17px;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.pf-row.big .pf .pt small{color:#d0d0d0}
.pf-row.big .pf .pt .go{opacity:1;color:#fff;display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:8px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--acc) 90%,transparent);font-size:11px;transform:translateY(4px);opacity:0;transition:opacity .2s,transform .2s}
.pf-row.big .pf:hover .go,.pf-row.big .pf[aria-pressed="true"] .go{opacity:1;transform:none}
.pf-row.big .pf:hover{transform:scale(1.04);z-index:3;box-shadow:0 24px 50px -18px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.12)}
.pf-row.big .pf[aria-pressed="true"]{box-shadow:0 0 0 2px var(--acc),0 24px 50px -18px color-mix(in srgb,var(--acc) 55%,transparent)}
.pf-row.big .pf[aria-pressed="true"] .pt small{color:#fff}
.pf-ck{position:absolute;right:10px;top:10px;z-index:2;width:24px;height:24px;border-radius:50%;display:none;place-items:center;background:var(--acc);color:#fff;font-size:13px;font-weight:900}
.pf[aria-pressed="true"] .pf-ck{display:grid}
@media (max-width:640px){.pf-row.big .pf .av{aspect-ratio:3/4}.pf-row.big .pf .pt small{display:none}.pf-row.big .pf .pt b{font-size:15px}}
/* Rappel : encadré plus vivant */
.ow-side{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);background:radial-gradient(90% 90% at 100% 0%,color-mix(in srgb,var(--acc) 45%,transparent),transparent 62%),radial-gradient(70% 80% at 0% 100%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%),linear-gradient(160deg,#2a1012,#141414 70%)!important;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--acc) 55%,transparent)}
.ow-side::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;border:16px solid rgba(255,255,255,.05)}
.ow-side-t{font-size:clamp(20px,1.5vw,24px);font-weight:800;letter-spacing:-.01em}
.ow-side-t::before{content:"";display:block;width:44px;height:44px;margin-bottom:12px;border-radius:12px;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--acc) 80%,transparent)}
.ow-side-s{color:#e0e0e0}
.ow-side .cb-open{background:#fff;color:#000}
.ow-side .cb-open:hover{background:rgba(255,255,255,.85)}
/* Comparatif : colonne « Avec moi » en gris plus clair */
.plan[data-plan="me"]{background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.09),transparent 70%),#333!important;border-color:#4a4a4a}
.plan[data-plan="me"] dl div{border-bottom-color:#454545}
.plan[data-plan="me"] dt{color:#a8a8a8}
@media (max-width:860px){.cm-v.me{background:#333!important}}
/* Bloc prix : liste centrée entre le titre et l'option */
.b1-inc{gap:0}
.b1-inc>.b1-k{margin-bottom:24px}
.b1-list{margin-block:auto}
.b1-opt{margin-top:24px!important}
/* Brief : plus lumineux, touches de rouge */
.brief{position:relative;background:radial-gradient(50% 60% at 80% 20%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),radial-gradient(40% 50% at 5% 90%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%),linear-gradient(180deg,#1a1a1a,#121212)}
.brief .ow-k{color:#ff4a53}
.brief .ttl span{color:var(--acc)}
.vsteps .ms-n{background:#2c2c2c;box-shadow:inset 0 0 0 1px #3a3a3a}
.vsteps li:first-child .ms-n,.vsteps li:nth-child(2) .ms-n,.vsteps li:nth-child(3) .ms-n,.vsteps li:nth-child(4) .ms-n{background:linear-gradient(140deg,var(--acc),#7a0610);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--acc) 80%,transparent)}
.vsteps li:nth-child(2) .ms-n{opacity:.85}.vsteps li:nth-child(3) .ms-n{opacity:.7}.vsteps li:nth-child(4) .ms-n{opacity:.55}
.vsteps li:not(:last-child)::after{background:linear-gradient(180deg,var(--acc),#2a2a2a)}
.vsteps small{color:#ff5a62}
.brief .chat{border:1px solid transparent;background:linear-gradient(#1c1c1c,#161616) padding-box,linear-gradient(150deg,var(--acc),color-mix(in srgb,var(--acc) 15%,transparent) 40%,#333 75%,color-mix(in srgb,var(--acc) 50%,transparent)) border-box;box-shadow:0 40px 90px -40px color-mix(in srgb,var(--acc) 55%,transparent),0 30px 80px -30px rgba(0,0,0,.9)}
.brief .chat-head{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 35%,transparent),color-mix(in srgb,var(--acc) 5%,transparent) 60%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--acc) 25%,transparent)}
.brief .chat-head .avatar{box-shadow:0 0 0 2px var(--acc)}
.brief .chat-log{background:radial-gradient(70% 50% at 100% 0%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 70%)!important}
.brief .msg.bot{background:#2b2b2b;box-shadow:inset 3px 0 0 var(--acc)}
.brief .msg.me{background:linear-gradient(140deg,var(--acc),#a1070f);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
.brief .choices button{background:#262626;border-color:#3d3d3d}
.brief .choices button:hover,.brief .choices button[aria-pressed="true"]{background:var(--acc);color:#fff;border-color:var(--acc)}
.brief .field{background:#232323;border-color:#4a4a4a}
.brief .field:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.brief .send{background:linear-gradient(140deg,#ff2a35,#b20710)}
.brief .chat-input{border-top-color:color-mix(in srgb,var(--acc) 20%,transparent)}
/* Brief : style lecteur à la place des étapes */
.lv-player{padding:0!important;background:linear-gradient(0deg,#121212,#1b1b1b)!important;border-bottom:1px solid #262626}
.lv-track{position:relative;height:5px;margin:0}
.lv-player .step-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:0;height:100%}
.lv-player .step-track li{height:100%;border-radius:0;background:rgba(255,255,255,.18)}
.lv-player .step-track i,.lv-player .step-track li:nth-child(n) i{background:var(--acc)}
.lv-player .step-track li.done i{background:var(--acc)}
.lv-dot{position:absolute;top:50%;left:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent),0 2px 6px rgba(0,0,0,.6);transition:left .5s var(--ease)}
.lv-in{display:flex;align-items:center;gap:14px;padding:14px 18px 6px}
.lv-play{width:42px;height:42px;cursor:default}
.lv-play .tri{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}
.lv-rt{flex:1;min-width:0}
.lv-rt b{display:block;font-size:16px;font-weight:800}
.lv-rt small{display:block;margin-top:2px;font-size:13px;color:#bdbdbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-rt small b{display:inline;font-size:13px;color:#fff}
.lv-ch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:8px 0 0;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6f6f6f}
.lv-ch li{padding-inline:14px}.lv-ch li:first-child{padding-left:18px}.lv-ch li.on{color:#ff5a62}
.lv-in{padding-bottom:14px!important}
@media (max-width:640px){.lv-in{padding:12px 14px 10px;gap:10px}.lv-play{width:36px;height:36px}.lv-ch{display:none}.lv-rt b{font-size:15px}}

/* ===== V9 ===== */
/* Carrousels : barres de progression façon Netflix */
.car{position:relative}
.car-btn{position:absolute;top:14px;bottom:14px;z-index:6;width:48px;border:0;border-radius:14px;color:#fff;font-size:34px;cursor:pointer;opacity:0;transition:opacity .2s}
.car-btn.l{left:0;background:linear-gradient(90deg,rgba(15,15,15,.92),rgba(15,15,15,.3))}.car-btn.r{right:0;background:linear-gradient(270deg,rgba(15,15,15,.92),rgba(15,15,15,.3))}
.car:hover .car-btn{opacity:1}
@media (hover:none){.car-btn{display:none}}
.car-bars{display:flex;justify-content:flex-end;gap:4px;margin-top:16px}
.car-bars span{position:relative;width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;cursor:pointer}
.car-bars span.done{background:rgba(255,255,255,.45)}
.car-bars span b{position:absolute;inset:0;width:0;background:var(--acc);border-radius:inherit}
.car-bars span.on{width:44px}
.car-bars span.on b{animation:carfill var(--car-ms,4000ms) linear forwards}
.car-bars.paused span.on b{animation-play-state:paused}
@keyframes carfill{to{width:100%}}
.dots{display:none!important}
/* Métiers : slides plus larges, en rotation */
.pf-row.big{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 3 * 16px) / 3.35);gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:14px;margin-block:-14px 0}
.pf-row.big::-webkit-scrollbar{display:none}
.pf-row.big .pf{scroll-snap-align:start}
.pf-row.big .pf .av{aspect-ratio:16/10}
.pf-row.big .pf .av img{animation:kb 16s ease-in-out infinite alternate}
.pf-row.big .pf:nth-child(2n) .av img{animation-delay:-6s}
.pf-row.big .pf .pt{padding:20px 22px}
.pf-row.big .pf .pt b{font-size:clamp(20px,1.6vw,26px)}
.pf-row.big .pf .pt small{font-size:14px}
.pf-row.big .pf:hover{transform:scale(1.025)}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-2%)}}
@media (max-width:1100px){.pf-row.big{grid-auto-columns:calc((100% - 16px) / 2.2)}}
@media (max-width:640px){.pf-row.big{grid-auto-columns:84%;gap:12px}.pf-row.big .pf .av{aspect-ratio:16/11}.pf-row.big .pf .pt small{display:block;font-size:13px}.car-bars{justify-content:center}}
/* Inclus : dégradés plus lumineux */
.tile.c1{--tc:#2d6cdf}.tile.c2{--tc:#e5a00d}.tile.c3{--tc:#d43f8d}.tile.c4{--tc:#3aa76d}.tile.c5{--tc:#9b59f0}.tile.c6{--tc:#e2533a}.tile.c7{--tc:var(--acc)}.tile.c8{--tc:#1fa3b8}
.tile{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--tc) 55%,transparent),transparent 62%),linear-gradient(155deg,color-mix(in srgb,var(--tc) 38%,#232323) 0%,#252525 55%,#1f1f1f 100%)!important;border-color:color-mix(in srgb,var(--tc) 35%,#333)!important;transition:transform .35s var(--ease),box-shadow .35s}
.tile:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px color-mix(in srgb,var(--tc) 80%,transparent)}
.t-ic{background:linear-gradient(140deg,color-mix(in srgb,var(--tc) 100%,#fff 10%),color-mix(in srgb,var(--tc) 70%,#000))!important;box-shadow:0 10px 24px -10px var(--tc),inset 0 1px 0 rgba(255,255,255,.3)!important}
.tile .t-n{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22)}
.tile p{color:#e2e2e2!important}
/* FAQ : photos */
.fqs .ph{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;animation:kb 18s ease-in-out infinite alternate}
.fqs:nth-child(2n) .ph{animation-delay:-7s}
.fqs::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.88) 100%),linear-gradient(0deg,color-mix(in srgb,var(--acc) 28%,transparent),transparent 45%)}
.fqs .n,.fqs .q,.fqs .more{z-index:2}
.fqs .n{-webkit-text-stroke:2px rgba(255,255,255,.55)!important}
.fqs .q{text-shadow:0 2px 12px rgba(0,0,0,.6)}
.fqs .more{background:var(--acc)!important}
/* Apparitions */
.rv8{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s var(--ease) var(--rd,0s),transform .8s var(--ease) var(--rd,0s)!important}
.rv8.in{opacity:1;transform:none}
/* Hero : entrée animée */
.bill-in>*{animation:rise .9s var(--ease) both}
.bill-in>:nth-child(2){animation-delay:.08s}.bill-in>:nth-child(3){animation-delay:.18s}.bill-in>:nth-child(4){animation-delay:.28s}.bill-in>:nth-child(5){animation-delay:.38s}
.bill .mock{animation:rise 1.1s var(--ease) .25s both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.bill h1 .who{position:relative}
.bill h1 .who::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.08em;border-radius:1em;background:var(--acc);transform-origin:left;animation:uline 1s var(--ease) .9s both}
@keyframes uline{from{transform:scaleX(0)}}
.bill::after{content:"";position:absolute;inset:-20% -10% auto auto;width:60%;height:120%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 22%,transparent),transparent);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-18%,12%) scale(1.15)}}
/* Boutons : reflet */
.btn-play,.btn-acc{position:relative;overflow:hidden}
.btn-play::after,.btn-acc::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sheen 5s ease-in-out infinite;pointer-events:none}
.btn-play::after{background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--acc) 18%,transparent),transparent)}
@keyframes sheen{0%,70%{left:-60%}100%{left:130%}}
.pl-play{animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.lv-play{animation:none}
.plan[data-plan="me"]{animation:glowp 3.2s ease-in-out infinite}
@keyframes glowp{50%{box-shadow:0 30px 80px -26px color-mix(in srgb,var(--acc) 75%,transparent),0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent)}}
.ow-photo img,.owner img{animation:kb 20s ease-in-out infinite alternate}
.ow-side::before{animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Formulaire : fond plus clair, contrastes */
.brief .chat{background:linear-gradient(#2c2c2c,#262626) padding-box,linear-gradient(150deg,var(--acc),color-mix(in srgb,var(--acc) 20%,transparent) 40%,#444 75%,color-mix(in srgb,var(--acc) 55%,transparent)) border-box!important}
.brief .chat-head{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 45%,transparent),color-mix(in srgb,var(--acc) 8%,transparent) 60%,transparent)!important}
.lv-player{background:linear-gradient(0deg,#262626,#303030)!important;border-bottom-color:#3a3a3a!important}
.brief .msg.bot{background:#3d3d3d;color:#fff}
.brief .msg-name{color:#c4c4c4}
.brief .choices button{background:#3a3a3a;border-color:#5a5a5a;color:#fff}
.brief .field{background:#353535;border-color:#666}
.brief .field input::placeholder{color:#a8a8a8}
.brief .field input{color:#fff}
.brief .chat-foot{color:#c4c4c4}
.brief .chat-foot button{color:#e6e6e6}
.brief .chat-foot button:disabled{color:#8a8a8a}
.brief .rgpd{color:#b8b8b8}
.brief .rgpd a{color:#fff}
.lv-ch{color:#9a9a9a}
.lv-rt small{color:#d0d0d0}
.pl-time{color:#d0d0d0}
.brief .chat-input{border-top-color:#3d3d3d}
.brief .sub{color:#c2c2c2}
.vsteps p{color:#b5b5b5}
/* Footer */
.foot8{position:relative;margin-top:40px;padding-bottom:120px;background:linear-gradient(180deg,#141414,#0b0b0b);overflow:hidden}
.f8-cta-w{position:relative}
.f8-cta{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:32px;min-height:340px;padding:48px clamp(24px,4vw,64px);border-radius:24px;overflow:hidden;background:radial-gradient(80% 120% at 100% 0%,rgba(255,90,98,.55),transparent 55%),linear-gradient(130deg,var(--acc) 0%,#9c0710 45%,#3a0306 100%);box-shadow:0 50px 100px -40px color-mix(in srgb,var(--acc) 70%,transparent)}
.f8-cta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.f8-txt{position:relative;z-index:1}
.f8-k{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.f8-dot,.f8-live i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:ping 1.8s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.f8-txt h2{margin-top:12px;font:800 clamp(34px,4vw,60px)/1 var(--m500-display);letter-spacing:-.03em;color:#fff}
.f8-txt h2 span{color:#141414;background:#fff;padding:0 .18em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.f8-txt>p:not(.f8-k){margin-top:14px;max-width:46ch;font-size:17px;color:rgba(255,255,255,.9)}
.f8-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.f8-act .btn-info{background:rgba(0,0,0,.35);color:#fff}
.f8-posters{position:relative;z-index:1;height:280px}
.f8-p{position:absolute;top:50%;width:52%;aspect-ratio:16/10;border-radius:12px;background:#222 center top/cover no-repeat;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12)}
.f8-p.p1{left:0;transform:translateY(-50%) rotate(-7deg);animation:fl1 7s ease-in-out infinite}
.f8-p.p2{left:24%;z-index:2;transform:translateY(-58%) rotate(2deg);animation:fl2 6s ease-in-out infinite}
.f8-p.p3{right:0;transform:translateY(-42%) rotate(8deg);animation:fl3 8s ease-in-out infinite}
@keyframes fl1{50%{transform:translateY(-56%) rotate(-5deg)}}
@keyframes fl2{50%{transform:translateY(-64%) rotate(0deg)}}
@keyframes fl3{50%{transform:translateY(-36%) rotate(10deg)}}
.f8-mq{margin-top:48px;padding-block:18px;border-block:1px solid #222;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.f8-mq-in{display:flex;align-items:center;gap:28px;width:max-content;animation:mq 34s linear infinite}
.f8-mq-in span{font:800 clamp(26px,3vw,44px)/1 var(--m500-display);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.2px #5a5a5a;white-space:nowrap;transition:color .2s}
.f8-mq-in span:nth-child(4n+1){color:var(--acc);-webkit-text-stroke:0}
.f8-mq-in i{width:10px;height:10px;border-radius:50%;background:var(--acc);flex:none}
.f8-mq:hover .f8-mq-in{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.f8-main{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-top:48px}
.f8-brand p{margin-top:12px;max-width:38ch;color:#b3b3b3;font-size:15px}
.f8-live{display:inline-flex;align-items:center;gap:10px;font-size:13px!important;color:#d0d0d0!important}
.f8-live i{background:#46d369;animation-name:pingg}
@keyframes pingg{0%{box-shadow:0 0 0 0 rgba(70,211,105,.7)}70%,100%{box-shadow:0 0 0 10px rgba(70,211,105,0)}}
.f8-col{display:flex;flex-direction:column;gap:10px}
.f8-col b{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.f8-col a{position:relative;width:max-content;color:#b3b3b3;font-size:15px;text-decoration:none;transition:color .2s,transform .2s}
.f8-col a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.f8-col a:hover{color:#fff;transform:translateX(4px)}.f8-col a:hover::after{transform:none}
.f8-args{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.f8-args li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center;padding:16px;border-radius:14px;background:linear-gradient(160deg,#222,#181818);border:1px solid #2a2a2a;transition:transform .3s var(--ease),border-color .3s}
.f8-args li:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.f8-args svg{grid-row:span 2;width:40px;height:40px;padding:9px;border-radius:12px;background:color-mix(in srgb,var(--acc) 18%,transparent);fill:none;stroke:#ff4a53;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.f8-args b{color:#fff;font-size:15px}.f8-args span{color:#a8a8a8;font-size:13px}
.f8-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:24px;border-top:1px solid #222;color:#8c8c8c;font-size:13px}
.f8-top{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #333;color:#fff;text-decoration:none;font-weight:600;transition:background .2s,border-color .2s}
.f8-top:hover{background:var(--acc);border-color:var(--acc)}
@media (max-width:980px){.f8-cta{grid-template-columns:1fr}.f8-posters{height:200px}.f8-main{grid-template-columns:1fr 1fr}.f8-brand{grid-column:1 / -1}.f8-args{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.foot8{padding-bottom:110px}.f8-cta{padding:32px 22px;border-radius:18px}.f8-posters{display:none}.f8-main{grid-template-columns:1fr 1fr;gap:24px}.f8-args{grid-template-columns:1fr}.f8-bot{flex-direction:column;align-items:flex-start}}

/* ===== V10 ===== */
/* Tarif : section et comparatif plus compacts (même largeur) */
.plans{padding-block:64px 40px!important}
.plans .ttl{font-size:clamp(24px,2.2vw,34px)!important;line-height:1.1}
.plans .sub{margin-top:6px;font-size:15px}
.pgrid{margin-top:24px!important;gap:14px}
.plan .hd{padding:10px 14px 12px;margin:6px}
.plan .hd b{font-size:17px}
.plan .hd small{font-size:12px}
.plan .chk{top:14px;right:16px;width:20px;height:20px;font-size:12px}
.plan .reco{font-size:10px;padding:2px 8px}
.plan dl{padding:2px 16px 10px}
.plan dl div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:12px;padding:7px 0}
.plan dt{font-size:12px}
.plan dd{font-size:14px;justify-content:flex-start;line-height:1.3}
.plan dd::before{width:7px;height:7px}
/* Métiers : « Voir mon exemple » fixe, animé au survol */
.pf-row.big .pf .pt .go{opacity:1!important;transform:none!important;position:relative;overflow:hidden;gap:8px;margin-top:12px;padding:8px 14px 8px 12px;font-size:13px;background:var(--acc);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--acc) 90%,transparent);transition:background .25s,color .25s,padding .25s,box-shadow .25s}
.pf-row.big .pf .pt .go::before{content:"";width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:border-color .25s}
.pf-row.big .pf .pt .go::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.pf-row.big .pf:hover .go,.pf-row.big .pf:focus-visible .go{background:#fff;color:#000;padding-right:22px;box-shadow:0 10px 26px -8px rgba(255,255,255,.6)}
.pf-row.big .pf:hover .go::before{border-left-color:var(--acc);animation:nudge .7s ease-in-out infinite alternate}
.pf-row.big .pf:hover .go::after{animation:gosheen .8s ease-out}
@keyframes nudge{to{transform:translateX(3px)}}
@keyframes gosheen{to{left:130%}}
/* Démo par métier */
dialog.demo{width:min(1280px,96vw);max-height:94vh;background:#141414;border:1px solid #2a2a2a}
.demo-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:32px;align-items:center;padding:36px}
.demo-k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ff4a53}
.demo-side h3{margin-top:10px;font:800 clamp(26px,2.4vw,38px)/1.05 var(--m500-display);letter-spacing:-.02em}
.demo-side>p{margin-top:12px;color:#cfcfcf;font-size:15px}
.demo-feat{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.demo-feat li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#e8e8e8}
.demo-feat li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;font-size:12px;font-weight:900}
.demo-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:24px}
.demo-act small{color:#a8a8a8;font-size:13px}
.demo-mode{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--acc) 15%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);color:#fff;font-size:13px;font-weight:700}
.demo-stage{position:relative}
.demo-stage::before{content:"";position:absolute;inset:8% -4% -6% 6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--dc) 45%,transparent),transparent);filter:blur(10px);z-index:0}
.demo .mock{position:relative;z-index:1;margin:0}
.demo .browser{background:#141414;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1)}
.demo .browser .bar{background:#1f1f1f}.demo .browser .bar i{background:#3a3a3a}.demo .browser .bar i:nth-child(1){background:#ff5f57}.demo .browser .bar i:nth-child(2){background:#febc2e}.demo .browser .bar i:nth-child(3){background:#28c840}.demo .browser .bar span{color:#9a9a9a}
.demo .sim-land{--ink:#f5f5f5;--muted:#a3a3a3;--line:#2e2e2e;--paper-2:#1c1c1c;--pink:var(--dc);--pink-ink:var(--dc);--aub:#141414;--brand:linear-gradient(140deg,var(--dc),var(--dc2));background:#141414;color:#f5f5f5}
.demo .sim-land .sim-nav{background:rgba(10,10,10,.92);border-bottom:1px solid #262626}
.demo .sim-land .sim-nav b{color:#fff}
.demo .sim-call{background:var(--dc);color:#fff}
.demo .sl-hero{background-size:cover;background-position:center;text-align:left;align-items:flex-start;justify-content:flex-end;padding:5cqw 6cqw}
.demo .sl-hero small{color:color-mix(in srgb,var(--dc) 65%,#fff);opacity:1;font-weight:800}
.demo .sl-hero strong{font-size:6cqw;max-width:16ch;text-shadow:0 .5cqw 2cqw rgba(0,0,0,.6)}
.demo .sl-hero .sim-btns{justify-content:flex-start}
.demo .sim-btn{background:#fff;color:#141414}
.demo .sim-btn.ghost{background:rgba(109,109,110,.7);color:#fff;border:0}
.demo .sl-grid>span{background:linear-gradient(160deg,#232323,#1a1a1a);border-color:#2e2e2e}
.demo .sl-ico{background:linear-gradient(140deg,var(--dc),var(--dc2))}
.demo .sl-prices .sl-grid>span.hl{background:linear-gradient(140deg,var(--dc),var(--dc2))}
.demo .sl-prices .sl-grid>span b{color:var(--dc)}
.demo .sl-prices .sl-grid>span.hl b,.demo .sl-prices .sl-grid>span.hl small{color:#fff}
.demo .sl-prices .hl .sl-cta{background:#fff;color:var(--dc)}
.demo .sl-gal{grid-auto-rows:12cqw}
.demo .sl-gal i{background-size:cover!important;background-position:center!important}
.demo .sl-contact{background:linear-gradient(180deg,#1c1c1c,#141414)}
.demo .sl-f>i,.demo .sl-chips i{background:#222;border-color:#333}
.demo .sl-chips i{color:#bdbdbd}
.demo .sl-chips u{background:#2a2a2a;border-color:#444}
.demo .sl-chips i.on{background:var(--dc);color:#fff}
.demo .sl-f em{color:#f5f5f5}
.demo .sl-bar{background:rgba(255,255,255,.1)}.demo .sl-bar i{background:var(--dc)}
.demo .sl-send{background:linear-gradient(140deg,var(--dc),var(--dc2))!important;color:#fff!important}
.demo .sl-reviews q{color:#eee}
.demo .sim-toast{background:#fff;color:#141414}
.demo .sim-toast b{color:#141414}
.demo .sim-toast .tk{flex:none;width:3cqw;min-width:22px;height:3cqw;min-height:22px;border-radius:50%;display:grid;place-items:center;background:#46d369;color:#fff;font-weight:900}
.demo .sl-chips.slots{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo .sl-chips.slots i{justify-content:center;padding-left:1cqw}
.demo .sl-chips.slots u{display:none}
.demo-mock .sim-cursor{display:block}
.demo .mock.is-landing .sim-toast{right:3%;bottom:10%}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr;padding:22px;gap:20px}.demo-stage{order:-1}.demo-side h3{font-size:24px}.demo-feat{display:none}}

/* ===== V11 ===== */
.car-bars{display:none!important}
.profiles .car-btn,#inclus .navbtn{display:none!important}
.rowhead .rs-ctrl{align-self:flex-end}
.rh-r{display:flex;align-items:center;gap:16px}
.rs-arr:hover{border-color:var(--acc);background:var(--acc)}
.pf-head{align-items:flex-end;margin-bottom:28px}
.pf-head h2{font:600 clamp(19px,1.5vw,22px) var(--font);color:#e5e5e5}
.pf-head p{margin-top:6px;font-size:14px;color:#b5b5b5}
@media (max-width:640px){.rh-r .rs-ctrl,.pf-head .rs-ctrl{display:none}.pf-head{margin-bottom:18px}.profiles .pf-head p{display:block}}
/* Hero + métiers : un seul fond continu */
.bill{background:radial-gradient(55% 60% at 85% 22%,color-mix(in srgb,var(--acc) 24%,transparent),transparent 70%),linear-gradient(180deg,#0b0b0b 0%,var(--bg) 85%)!important}
.bill::after{inset:-25% -12% auto auto;height:80%;width:55%}
.profiles{background:none!important;padding-top:40px!important}
/* Comparatif en tableau */
.cx{margin-top:28px;display:flex;flex-direction:column}
.cx-row{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));align-items:stretch}
.cx-l{display:flex;align-items:center;padding:14px 18px;font-size:15px;font-weight:600;color:#d6d6d6;border-bottom:1px solid #262626}
.cx-c{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:15px;border-bottom:1px solid #262626;color:#bdbdbd}
.cx-c b{font-weight:600;color:#e8e8e8}
.cx-c small{font-size:12px;color:#9a9a9a}
.cx-c.cx-me{background:#2e2e2e;border-bottom-color:#3a3a3a;border-inline:1px solid #3d3d3d}
.cx-c.cx-me b{color:#fff;font-weight:700}
.cx-c.cx-me small{color:#c9c9c9}
.cx-head .cx-c{flex-direction:column;align-items:flex-start;gap:2px;padding-block:18px 16px;border-bottom:2px solid #333}
.cx-head .cx-c b{font-size:18px;font-weight:800}
.cx-head .cx-c.cx-me{position:relative;border-radius:16px 16px 0 0;border-top:1px solid #3d3d3d;background:linear-gradient(140deg,var(--acc),#8a0610);border-color:transparent;box-shadow:0 -20px 50px -30px color-mix(in srgb,var(--acc) 80%,transparent)}
.cx-head .cx-c.cx-me small{color:rgba(255,255,255,.85)}
.cx-head em{position:absolute;top:-11px;left:18px;padding:2px 9px;border-radius:999px;background:#fff;color:#000;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cx-foot .cx-l,.cx-foot .cx-c{border-bottom:0}
.cx-foot .cx-c.cx-me{border-radius:0 0 16px 16px;border-bottom:1px solid #3d3d3d;padding-block:16px 18px}
.cx-foot .btn{width:100%;min-height:44px;font-size:15px}
.cx-i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#3a3a3a}
.cx-i::before{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.cx-i.y{background:#2b9a54}
.cx-i.n{background:#a8242b}
.cx-i.n::before{content:"×";width:auto;height:auto;border:0;transform:none;font-size:15px;font-weight:800;line-height:1;color:#fff}
.cx-i.m{background:#a0741c}
.cx-i.m::before{content:"";width:9px;height:2px;border:0;background:#fff;transform:none}
.cx-row:not(.cx-head):not(.cx-foot):hover .cx-l,.cx-row:not(.cx-head):not(.cx-foot):hover .cx-c:not(.cx-me){background:rgba(255,255,255,.03)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pgrid,.cmpm{display:none!important}
@media (max-width:760px){
 .cx-row{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cx-l{grid-column:1 / -1;padding:12px 4px 6px;border-bottom:0;font-size:13px;color:#9a9a9a;text-transform:uppercase;letter-spacing:.06em}
 .cx-head .cx-l,.cx-foot .cx-l{display:none}
 .cx-c{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:10px 6px;font-size:13px;line-height:1.25}
 .cx-c b{font-size:13px}
 .cx-c small{font-size:11px}
 .cx-head{position:sticky;top:62px;z-index:4;background:var(--bg)}
 .cx-head .cx-c{align-items:center;padding:16px 6px 12px}
 .cx-head .cx-c b{font-size:15px}
 .cx-head .cx-c small{font-size:11px}
 .cx-head em{left:50%;transform:translateX(-50%);white-space:nowrap}
 .cx-foot .cx-c.cx-me{grid-column:1 / -1;border-radius:0 0 14px 14px}
 .cx-foot .cx-c:not(.cx-me){display:none}
}

/* ===== Encadrés : un cran au-dessus du fond ===== */
.owner,.wslide,.buy1,.f8-args li{background-color:#262626!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 26px 50px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.f8-args li{background-image:linear-gradient(160deg,#2c2c2c,#232323)!important}
.tile{border-color:color-mix(in srgb,var(--tc) 45%,#4a4a4a)!important;box-shadow:0 26px 50px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.pf-row.big .pf,.fqs{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 46px -26px rgba(0,0,0,.95)}
.cx{padding:22px 22px 6px;border-radius:20px;background:#212121;border:1px solid rgba(255,255,255,.09);box-shadow:0 26px 50px -30px rgba(0,0,0,.95)}
.cx-c.cx-me{background:#333}
.brief .chat{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 90px -40px color-mix(in srgb,var(--acc) 55%,transparent),0 30px 80px -30px rgba(0,0,0,.9)!important}
.rs-arr{background:#262626;border-color:#4a4a4a}
@media (max-width:760px){.cx{padding:14px 10px 4px;border-radius:16px}.cx-head{background:#212121}}
/* FAQ : photos plus cinéma */
.fqs .ph{filter:saturate(1.15) contrast(1.12) brightness(.92)}
/* Patte Impeccable : fidélité d'interface, détails de chantier */
.kick b{font-weight:900}
.wcard .bg i{background:var(--acc)}
.tile::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--acc);opacity:0;transition:opacity .3s}
.tile:hover::after{opacity:1}
.mini-steps li:first-child{box-shadow:inset 0 3px 0 var(--acc)}

/* =====================================================================
   Couche WordPress / Elementor (thème Monsitea500 Netflix)
   ===================================================================== */
.logo.logo-img{display:inline-flex;align-items:center;line-height:0}
.logo.logo-img img{height:var(--m500-logo-h,36px);width:auto;max-width:none}
.top.is-static{position:relative;background:var(--bg)}
.admin-bar .top:not(.is-static){top:32px}
@media (max-width:782px){.admin-bar .top:not(.is-static){top:46px}}
body.m500-no-overlay .top{background:var(--bg)}
body.m500-no-hero:has(.top:not(.is-static)) .m500-main,
body.m500-no-overlay:has(.top:not(.is-static)) .m500-main{padding-top:68px}
.btn-lg{min-height:56px;padding:0 32px;font-size:19px}
.btn-ghost:hover{background:var(--surface)}
.bill-img{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.bill-img img{width:100%;height:auto}
.owner.no-side{grid-template-columns:220px minmax(0,1fr)}
@media (max-width:900px){.owner.no-side{grid-template-columns:1fr}}
.tile-link{display:block;color:inherit;text-decoration:none;height:100%}
.m500-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.skip-link:focus{position:fixed;z-index:1000;top:8px;left:8px;width:auto;height:auto;clip:auto;padding:10px 16px;background:#fff;color:#000;border-radius:var(--rb);white-space:normal}
body.m500-no-floating .hero-bg{display:none}
body.m500-no-marquee .f8-mq-in{animation:none}
.m500-btn-wrap{display:flex}

/* Elementor : les blocs du thème occupent toute la largeur, sans marges */
.elementor-widget[class*="elementor-widget-m500n-"]{margin-bottom:0!important}
.m500-full,
.e-con:has(>.elementor-widget[class*="elementor-widget-m500n-"]),
.e-con:has(>.e-con-inner>.elementor-widget[class*="elementor-widget-m500n-"]){--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--content-width:100%;padding:0}
.m500-full>.e-con-inner,
.e-con:has(>.e-con-inner>.elementor-widget[class*="elementor-widget-m500n-"])>.e-con-inner{max-width:none;padding:0;gap:0}
.m500-full .elementor-container{max-width:none!important}
.m500-full .elementor-column>.elementor-widget-wrap{padding:0!important}
.m500-hf .elementor-section,.m500-hf .e-con{margin:0}
.elementor-editor-active .fade,.elementor-editor-active .rv8{opacity:1!important;transform:none!important}
.elementor-editor-active .resume{display:none}
.elementor-editor-active .top:not(.is-static){position:sticky}

/* Animations réduites (accessibilité) */
@media (prefers-reduced-motion:reduce){
  body.m500-respect-reduce *,body.m500-respect-reduce *::before,body.m500-respect-reduce *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html:has(body.m500-respect-reduce){scroll-behavior:auto}
}

/* Pages et articles classiques */
.m500-content{padding-top:120px;padding-bottom:80px;min-height:60vh}
.m500-page-head{max-width:900px;margin:0 auto 32px}
.m500-page-head h1{font:800 clamp(32px,5vw,56px)/1.05 var(--m500-display);letter-spacing:-.02em}
.m500-meta{color:var(--muted);font-size:14px;margin-bottom:8px}
.m500-prose .m500-entry,.m500-prose .m500-hero-img{max-width:760px;margin-inline:auto}
.m500-hero-img{margin:0 auto 32px;border-radius:var(--r);overflow:hidden}
.m500-hero-img img{width:100%;height:auto}
.m500-entry{font-size:18px;line-height:1.7;color:#e6e6e6}
.m500-entry>*+*{margin-top:1.1em}
.m500-entry h2,.m500-entry h3,.m500-entry h4{font-family:var(--m500-display);line-height:1.2;color:var(--ink);margin-top:1.8em}
.m500-entry h2{font-size:30px}.m500-entry h3{font-size:24px}.m500-entry h4{font-size:20px}
.m500-entry ul,.m500-entry ol{padding-left:1.4em}
.m500-entry ul{list-style:disc}.m500-entry ol{list-style:decimal}
.m500-entry li+li{margin-top:.4em}
.m500-entry a{color:var(--acc-2);text-underline-offset:3px}
.m500-entry blockquote{border-left:3px solid var(--acc);padding:4px 0 4px 20px;color:var(--ink);font-size:20px}
.m500-entry img{height:auto;border-radius:var(--rb)}
.m500-entry table{width:100%;border-collapse:collapse;font-size:16px}
.m500-entry th,.m500-entry td{border-bottom:1px solid var(--line);padding:10px;text-align:left}
.m500-entry code,.m500-entry pre{background:var(--surface);border-radius:6px;padding:2px 6px;font-size:.9em}
.m500-entry pre{padding:16px;overflow:auto}
.m500-entry .alignwide{max-width:1100px;margin-inline:auto}
.m500-entry .aligncenter{margin-inline:auto}
.m500-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;max-width:1300px;margin:0 auto}
.m500-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease)}
.m500-card:hover{transform:translateY(-3px)}
.m500-card-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.m500-card-body{padding:20px}
.m500-card h2{font:700 21px/1.25 var(--m500-display);margin-bottom:8px}
.m500-card h2 a{text-decoration:none}
.m500-card p{color:var(--muted)}
.nav-links{display:flex;gap:8px;justify-content:center;margin-top:40px}
.nav-links .page-numbers{min-width:40px;height:40px;display:grid;place-items:center;border-radius:var(--rb);background:var(--surface);text-decoration:none}
.nav-links .current{background:var(--acc)}
.m500-404{text-align:center;display:grid;justify-items:center;gap:18px}
.m500-404 h1{font:800 clamp(32px,5vw,56px)/1.05 var(--m500-display)}
.search-form{display:flex;gap:8px;max-width:480px;width:100%}
.search-form label{flex:1}
.search-form input[type=search]{width:100%;min-height:48px;padding:0 16px;border-radius:var(--rb);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.search-form .search-submit{min-height:48px;padding:0 18px;border:0;border-radius:var(--rb);background:var(--acc);color:#fff;font-weight:700;cursor:pointer}
.comments-area{max-width:760px;margin:48px auto 0}
.comments-area input,.comments-area textarea{width:100%;padding:12px;border-radius:var(--rb);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.comments-area .submit{width:auto;background:var(--acc);border:0;color:#fff;font-weight:700;cursor:pointer}
.comment-list{list-style:none}.comment-list .children{padding-left:24px}
.wp-caption-text,.wp-element-caption{color:var(--muted);font-size:14px;margin-top:6px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Fond du site : priorité sur les « Réglages du site » d'Elementor ---------- */
html body.m500{background:var(--bg);color:var(--ink)}

/* ---------- Rangées défilantes : contenues dans la largeur du site, place pour les ombres, fondu à gauche / à droite ---------- */
.m500 .car-track,.m500 .inc-track,.m500 .ws-track,.m500 .faq-track{
  scroll-behavior:auto!important;overscroll-behavior-x:contain;
  --fw:48px;--fl:0px;--fr:var(--fw);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
  transition:--fl .35s,--fr .35s
}
.m500 .pf-row.car-track{padding-block:14px 54px;margin-block:-14px -40px}
.m500 .inc-track,.m500 .faq-track{padding-block:16px 56px;margin-block:-16px -56px}
.m500 .ws-track{padding-block:24px 48px;margin-block:-4px -48px}
.m500 .is-scrolled{--fl:0px} /* pas de fondu à gauche */
.m500 .is-end{--fr:0px}
@property --fl{syntax:'<length>';inherits:false;initial-value:0px}
@property --fr{syntax:'<length>';inherits:false;initial-value:0px}

/* ---------- Bouton mode clair / sombre ---------- */
.m500-mode{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;cursor:pointer;flex:none;transition:background-color .2s,transform .2s}
.m500-mode:hover{background:rgba(255,255,255,.14)}
.m500-mode svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m500-mode .sun{display:none}
html[data-mode=light] .m500-mode .sun{display:block}
html[data-mode=light] .m500-mode .moon{display:none}

/* =====================================================================
   MODE CLAIR : page claire, cartes « cinéma » sombres conservées
   ===================================================================== */
html[data-mode=light]{color-scheme:light;--acc-2:color-mix(in srgb,var(--acc) 86%,#000);--ok:#15803d;--bg:var(--l-bg,#f5f4f1);--bg-2:var(--l-bg2,#ebeae6);--ink:var(--l-ink,#141414);--muted:var(--l-muted,#5b5b5b);--dim:var(--l-dim,#7a7a7a);--line:var(--l-line,#dedcd7);--surface:var(--l-surface,#ffffff);--surface-2:var(--l-surface2,#f0efeb)}
/* Îlots sombres : cartes, fenêtres, aperçus, pied de page */
html[data-mode=light] :is(.tile,.wslide,.owner,.cx,.buy1,.chat,.pf,.fqs,.dlg,.mock,.browser,.ws-shot,.resume,.foot8,.f8-cta,.demo-stage,.sim){color-scheme:dark;color:#fff;--acc-2:var(--m500-acc2,#ff5a62);--ok:var(--m500-ok,#46d369);--bg:#141414;--bg-2:#0b0b0b;--ink:#fff;--muted:#b3b3b3;--dim:#808080;--line:#2f2f2f;--surface:#1f1f1f;--surface-2:#2a2a2a}
html[data-mode=light] .foot8{background:linear-gradient(180deg,#141414,#0b0b0b)}
html[data-mode=light] .brief{background:radial-gradient(50% 60% at 80% 20%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%),radial-gradient(40% 50% at 5% 90%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 70%),linear-gradient(180deg,var(--bg),var(--bg-2))!important}
html[data-mode=light] .brief .ow-k{color:var(--acc)}
html[data-mode=light] .vsteps small{color:var(--acc)}
/* En-tête */
html[data-mode=light] .top{background:linear-gradient(180deg,rgba(245,244,241,.92),rgba(245,244,241,0))}
html[data-mode=light] .top.solid,html[data-mode=light] body.m500-no-overlay .top,html[data-mode=light] .top.is-static{background:rgba(245,244,241,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
html[data-mode=light] .top nav a,html[data-mode=light] .top-r .cb{color:#2a2a2a}
html[data-mode=light] .top nav a:hover{color:var(--acc)}
html[data-mode=light] .m500-mode{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.04)}
/* Billboard */
html[data-mode=light] .bill{background:radial-gradient(55% 60% at 85% 22%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%),linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 85%)!important;--ink:#141414;--muted:#5b5b5b;--aub:var(--bg)}
html[data-mode=light] .bill::after{background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 12%,transparent),transparent)}
html[data-mode=light] .bill .hero-bg{color:#141414}
html[data-mode=light] .bill h1,html[data-mode=light] .bill .lead,html[data-mode=light] .bill .kick{text-shadow:none}
html[data-mode=light] .bill h1{color:#141414}
html[data-mode=light] .bill .lead{color:#3d3d3d}
html[data-mode=light] .bill .lead strong{color:#141414}
html[data-mode=light] .bill .kick{color:#3d3d3d}
html[data-mode=light] .bill .meta span:not(.ok){color:#4a4a4a}
html[data-mode=light] .bill .meta i{background:#bbb}
html[data-mode=light] .btn-play{background:#141414;color:#fff}
html[data-mode=light] .btn-play:hover{background:#333}
html[data-mode=light] :is(.tile,.wslide,.owner,.cx,.buy1,.chat,.pf,.fqs,.dlg,.foot8,.resume) .btn-play{background:#fff;color:#000}
html[data-mode=light] .btn-info{background:rgba(0,0,0,.08);color:#141414}
html[data-mode=light] .btn-info:hover{background:rgba(0,0,0,.14)}
html[data-mode=light] :is(.wslide,.owner,.dlg,.foot8,.fqs) .btn-info{background:rgba(109,109,110,.7);color:#fff}
/* Titres de rangée et textes de section */
html[data-mode=light] .rowhead h2,html[data-mode=light] .plans .ttl,html[data-mode=light] .brief .ttl,html[data-mode=light] .m500-heading .m500-h{color:#141414}
html[data-mode=light] .rowhead p,html[data-mode=light] .plans .sub,html[data-mode=light] .brief .sub,html[data-mode=light] .note,html[data-mode=light] .m500-heading .sub{color:#5b5b5b}
html[data-mode=light] .rs-arr{background:#fff!important;border-color:#dedcd7!important;color:#141414;box-shadow:0 6px 16px -8px rgba(0,0,0,.25)}
html[data-mode=light] .rs-arr:disabled{opacity:.4}
html[data-mode=light] .dots i{background:rgba(0,0,0,.18)}
html[data-mode=light] .dots i.on{background:var(--acc)}
/* Ombres plus douces sur fond clair */
html[data-mode=light] :is(.tile,.wslide,.owner,.buy1,.cx,.f8-args li){box-shadow:0 24px 44px -26px rgba(0,0,0,.45)!important}
html[data-mode=light] :is(.pf-row.big .pf,.fqs){box-shadow:0 20px 40px -24px rgba(0,0,0,.5)!important}
/* Brief */
html[data-mode=light] .brief{border-top-color:var(--line)}
html[data-mode=light] .vsteps b{color:#141414}
html[data-mode=light] .vsteps p{color:#5b5b5b}
html[data-mode=light] .vsteps li::before,html[data-mode=light] .vsteps li::after{background:#dedcd7}
html[data-mode=light] .brief .chat{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 90px -40px color-mix(in srgb,var(--acc) 40%,transparent),0 30px 60px -30px rgba(0,0,0,.45)!important}
/* Pages classiques */
html[data-mode=light] .m500-entry{color:#2a2a2a}
html[data-mode=light] .m500-card{background:#fff}

/* Brief : messages d'un même tour réunis, interlocuteur affiché une seule fois */
.msg-group p+p,.msg-group p+div,.msg-group div+p{margin-top:.55em}
.msg-group .recap{margin-top:.6em}
.chat-log .row.bot.grp{margin-top:-10px}
.chat-log .row.bot.grp .msg-name{display:none}
.chat-log .row.bot.has-next .mini{visibility:hidden}

/* Aperçu animé : 2 lignes « schéma » sous chaque service */
.sl-services .sl-grid>span{display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:1.2cqw;row-gap:.8cqw;align-items:center;align-content:center}
.sl-services .sl-ico{grid-row:1 / 4;align-self:start}
.sl-services em{display:block!important;height:.8cqw;border-radius:1cqw;background:var(--line);width:92%}
.sl-services em.short{width:58%}

/* Tableau comparatif : mention intégrée */
.cx-note{margin:4px -22px 0;padding:14px 22px 10px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;line-height:1.5;color:var(--dim);text-align:center}
@media (max-width:760px){.cx-note{margin-inline:-10px;padding-inline:10px}}

/* Tuiles « inclus » : nuances de rouge dérivées de la couleur d'accent */
.m500 .tile.c1{--tc:var(--acc)!important}
.m500 .tile.c2{--tc:color-mix(in srgb,var(--acc) 72%,#000)!important}
.m500 .tile.c3{--tc:color-mix(in srgb,var(--acc) 78%,#ff8a3d)!important}
.m500 .tile.c4{--tc:color-mix(in srgb,var(--acc) 55%,#3a0006)!important}
.m500 .tile.c5{--tc:color-mix(in srgb,var(--acc) 80%,#ff4d8d)!important}
.m500 .tile.c6{--tc:color-mix(in srgb,var(--acc) 62%,#fff)!important}
.m500 .tile.c7{--tc:color-mix(in srgb,var(--acc) 85%,#7a0010)!important}
.m500 .tile.c8{--tc:color-mix(in srgb,var(--acc) 70%,#b3122e)!important}
.m500 .tile[class*=" c"]{--tg:color-mix(in srgb,var(--tc) 45%,transparent)!important}

/* Tuiles « inclus » : icônes en nuances de gris (plus ou moins foncées) */
.m500 .tile .t-ic{background:linear-gradient(140deg,var(--gi1,#6a6a6a),var(--gi2,#2c2c2c))!important;box-shadow:0 10px 22px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.22)!important}
.m500 .tile.c1{--gi1:#7a7a7a;--gi2:#353535}
.m500 .tile.c2{--gi1:#5c5c5c;--gi2:#262626}
.m500 .tile.c3{--gi1:#8c8c8c;--gi2:#404040}
.m500 .tile.c4{--gi1:#4d4d4d;--gi2:#1f1f1f}
.m500 .tile.c5{--gi1:#6e6e6e;--gi2:#2e2e2e}
.m500 .tile.c6{--gi1:#9a9a9a;--gi2:#474747}
.m500 .tile.c7{--gi1:#575757;--gi2:#232323}
.m500 .tile.c8{--gi1:#808080;--gi2:#383838}
.m500 .tile .t-ic svg{stroke:#fff}

/* Carrousels : glisser à la souris */
@media (hover:hover) and (pointer:fine){
  .m500 .car-track,.m500 .inc-track,.m500 .ws-track,.m500 .faq-track{cursor:grab}
}
.m500 .is-dragging{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.m500 .is-dragging *{pointer-events:none}
.m500 .is-dragging img{-webkit-user-drag:none}

/* ---------- Pied de page : version mobile équilibrée ---------- */
@media (max-width:640px){
  .foot8{margin-top:24px;padding-bottom:104px}
  .f8-cta{min-height:0;padding:30px 22px 26px;border-radius:20px;text-align:center;gap:0}
  .f8-k{justify-content:center;font-size:12px}
  .f8-txt h2{font-size:clamp(30px,9vw,38px);line-height:1.05}
  .f8-txt>p:not(.f8-k){margin:12px auto 0;font-size:15px}
  .f8-act{flex-direction:column;gap:10px;margin-top:20px}
  .f8-act .btn{width:100%;min-height:50px}
  .f8-mq{margin-top:28px;padding-block:12px}
  .f8-mq-in{gap:18px}
  .f8-mq-in span{font-size:24px}
  .f8-main{grid-template-columns:1fr 1fr;gap:28px 20px;padding-top:32px}
  .f8-brand{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:24px;border-bottom:1px solid #222}
  .f8-brand p{margin-inline:auto;font-size:14px}
  .f8-col{gap:2px}
  .f8-col b{margin-bottom:8px;font-size:12px}
  .f8-col a{width:auto;padding:7px 0;font-size:15px}
  .f8-col a::after{bottom:3px}
  .f8-col:last-child{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;column-gap:18px;padding-top:20px;border-top:1px solid #222}
  .f8-col:last-child b{flex-basis:100%}
  .f8-col:last-child a{padding:4px 0;font-size:14px}
  .f8-args{grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
  .f8-args li{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:4px;padding:16px 10px}
  .f8-args svg{grid-row:auto;width:36px;height:36px;padding:8px;margin-bottom:4px}
  .f8-args b{font-size:14px}
  .f8-args span{font-size:12px;line-height:1.35}
  .f8-bot{flex-direction:column-reverse;align-items:center;text-align:center;gap:14px;margin-top:28px;font-size:12px}
  .f8-top{width:100%;justify-content:center;min-height:44px}
}

/* ---------- Billboard : métiers qui défilent ---------- */
.bill h1 .who{display:inline-grid;justify-items:start;white-space:nowrap;transition:width .5s var(--ease)}
.bill h1 .who-w{grid-area:1 / 1;opacity:0;transform:translateY(.42em);transition:opacity .35s ease,transform .5s var(--ease)}
.bill h1 .who-w.is-on{opacity:1;transform:none}
.bill h1 .who-w.is-out{opacity:0;transform:translateY(-.42em)}

/* ---------- Cartes métiers : cadre rouge au survol / au toucher, aucune sélection ---------- */
.pf-row.big .pf:hover,.pf-row.big .pf:focus-visible,.pf-row.big .pf.is-touch{box-shadow:0 0 0 2px var(--acc),0 24px 50px -18px color-mix(in srgb,var(--acc) 55%,transparent)!important}
.pf-row.big .pf.is-touch .go{opacity:1;transform:none}
.pf-ck{display:none!important}

/* ---------- Fenêtres : halo rouge partout ---------- */
dialog.dlg{background:radial-gradient(85% 55% at 50% 0%,color-mix(in srgb,var(--acc) 32%,transparent),transparent 72%),#1b1b1b}
/* FAQ : présentation centrée et aérée */
dialog.fq-dlg{width:min(640px,94vw)}
.fq-dlg .dlg-hero{aspect-ratio:auto!important;min-height:0!important;justify-content:center;text-align:center;padding:64px 48px 6px;background:radial-gradient(90% 130% at 50% 0%,color-mix(in srgb,var(--acc) 55%,transparent),transparent 68%)!important}
.fq-dlg .dlg-hero::after{display:none}
.fq-dlg .dlg-hero h3{font-size:clamp(26px,3.4vw,36px);line-height:1.1;max-width:18ch;margin-inline:auto}
.fq-dlg .qa-a{padding:22px 48px 4px;align-items:center;text-align:center;gap:18px}
.fq-dlg .qa-a>p{max-width:42ch}
.fq-dlg .qa-a ul{display:flex;flex-direction:column;gap:10px;text-align:left;margin-inline:auto}
.fq-nav{justify-content:center;gap:12px;padding:30px 48px 44px}
@media (max-width:640px){.fq-dlg .dlg-hero{padding:56px 22px 4px}.fq-dlg .qa-a{padding:18px 22px 4px}.fq-nav{padding:24px 22px 28px}}

/* ---------- Lien DT Studio ---------- */
.foot8 .f8-studio{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.foot8 .f8-studio:hover,.foot8 .f8-studio:focus-visible{color:#fff;text-decoration-color:var(--acc)}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  /* pas de fondu à gauche, fondu à droite conservé */
  .m500 .car-track,.m500 .inc-track,.m500 .ws-track,.m500 .faq-track{--fl:0px!important}
  /* tableau comparatif : critères dans un bandeau gris centré */
  .cx-row:not(.cx-head):not(.cx-foot) .cx-l{justify-content:center;text-align:center;margin:12px 0 6px;padding:8px 12px;border-radius:10px;background:#2c2c2c;color:#ececec;font-size:12px;letter-spacing:.08em}
  /* encadré prix : liste d'abord, prix et bouton en bas */
  .buy1{display:flex;flex-direction:column}
  .b1-price{order:2;border-bottom:0!important;border-top:1px solid #2e2e2e}
  .b1-inc{order:1}
}

/* ---------- Fenêtre d'exemple : tout reste dans le cadre sur mobile ---------- */
.demo-side,.demo-stage{min-width:0}
@media (max-width:900px){
  .demo-grid{grid-template-columns:minmax(0,1fr)}
  .demo-act .btn{width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:12px}
  .demo-stage .mock{max-width:100%}
}

/* ---------- Titre du hero sur mobile : métier sur sa propre ligne, hauteur fixe (la page ne bouge plus) ---------- */
@media (max-width:760px){
  .bill-grid,.bill-in,.bill h1{min-width:0;max-width:100%}
  .bill h1 .who{display:grid;grid-template-columns:minmax(0,1fr);width:auto!important;max-width:100%;justify-items:start;margin-block:.04em}
  .bill h1 .who::after{display:none}
  .bill h1 .who-w{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:.08em;text-underline-offset:.14em}
}