/* Polices auto hébergées (licence SIL OFL) */
@font-face{font-family:"Bricolage Grotesque";src:url(polices/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist";src:url(polices/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(polices/geist-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(polices/geist-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
/* Aurea Media : maquette refonte 2026, v2 */
:root{
  color-scheme:dark;
  --ink:#0A0A0A;--ink-2:#121211;--ink-3:#1A1A18;--ink-4:#242421;--cream:#F5F5F0;--mute:#AEAEA8;--dim:#7A7A74;
  --gold:#C9A961;--gold-hi:#E6CB8C;--gold-deep:#B8934E;--paper:#F5F5F0;--paper-2:#ECEAE2;--paper-mute:#44443F;
  --line:rgba(245,245,240,.09);--line-2:rgba(245,245,240,.16);--ok:#2F9E6E;
  --grad-gold:linear-gradient(100deg,#B8934E 0%,#E6CB8C 45%,#C9A961 100%);
  --display:"Bricolage Grotesque",system-ui,sans-serif;--sans:"Geist",system-ui,-apple-system,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--wrap:1240px;--g:24px;--r-s:10px;--r-m:22px;--r-l:32px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--ink)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
.skip{position:absolute;left:16px;top:-60px;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:var(--r-s);z-index:100}
.skip:focus{top:16px}

/* Grain et grille de fond */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.gridbg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%)}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1;opacity:.55;animation:orb 18s ease-in-out infinite alternate}
.orb--a{width:560px;height:560px;background:#8a6a2c;top:-120px;right:-80px}
.orb--b{width:420px;height:420px;background:#3b2c12;bottom:-80px;left:-120px;animation-duration:22s}
@keyframes orb{to{transform:translate(-60px,40px) scale(1.12)}}

/* Typo */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1;letter-spacing:-.035em;margin:0;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(2.9rem,6.6vw,6.2rem);font-weight:650}
h2{font-size:clamp(2.3rem,4.6vw,4.4rem)}
h3{font-size:1.45rem;line-height:1.12;letter-spacing:-.02em}
.gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.paper .gold{background:linear-gradient(100deg,#9b7838,#C9A961);-webkit-background-clip:text;background-clip:text}
p{margin:0}
.lead{font-size:clamp(1.0625rem,1.35vw,1.2rem);color:var(--mute);max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.mono{font-family:var(--mono)}

/* Boutons */
.btn{--bg:var(--gold);--fg:var(--ink);position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:500;font-size:.98rem;border:1px solid transparent;transition:background .45s var(--ease),color .45s,border-color .45s,box-shadow .6s var(--ease),transform .5s var(--ease)}
.btn:hover{--bg:#D4B672;box-shadow:0 8px 24px -14px rgba(201,169,97,.55)}
.btn svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--ghost{--bg:rgba(245,245,240,.03);--fg:var(--cream);border-color:var(--line-2)}
.btn--ghost:hover{--bg:rgba(245,245,240,.08);border-color:var(--cream);box-shadow:none}
.btn--dark{--bg:var(--ink);--fg:var(--cream)}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease)}
.link:hover{background-size:100% 1px}
.link svg{width:16px;height:16px}

/* Header */
.hd{position:fixed;inset:16px 0 auto;z-index:50;pointer-events:none}
.hd .wrap{pointer-events:auto}
.hd-bar{display:flex;align-items:center;gap:24px;height:68px;padding:0 10px 0 22px;border-radius:999px;background:rgba(18,18,17,.55);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:height .4s var(--ease),background .4s}
.hd.is-scrolled .hd-bar{height:60px;background:rgba(10,10,10,.85)}
.hd-logo img{height:40px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a,.nav button{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;font-size:.94rem;color:var(--mute);background:none;border:0;transition:color .25s,background .25s}
.nav a:hover,.nav button:hover{color:var(--cream);background:rgba(245,245,240,.06)}
.nav svg{width:14px;height:14px}
.hd .btn{min-height:46px;padding:0 20px}
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;width:660px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;border-radius:var(--r-m);background:rgba(18,18,17,.97);border:1px solid var(--line);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.3s var(--ease)}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:block;height:auto;padding:14px 16px;border-radius:14px;color:var(--cream)}
.mega a:hover{background:rgba(245,245,240,.05)}
.mega strong{display:block;font-weight:500}
.mega span{display:block;font-size:.84rem;color:var(--mute);margin-top:2px}
.mega .main{grid-row:span 2;background:linear-gradient(160deg,rgba(201,169,97,.18),rgba(201,169,97,.02));border:1px solid rgba(201,169,97,.25)}
.mega .main small{display:inline-block;margin-top:14px;color:var(--gold);font:500 .78rem var(--mono)}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:none;margin-left:auto}
.burger span{display:block;width:18px;height:1.5px;background:var(--cream);margin:5px auto;transition:.3s}
.mnav{position:fixed;inset:0;z-index:49;background:var(--ink);padding:110px var(--g) 40px;display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transition:.35s var(--ease)}
.mnav a{font:600 2rem/1.2 var(--display);letter-spacing:-.03em;padding:8px 0;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:24px;align-self:flex-start;font:500 1rem var(--sans);letter-spacing:0;border:0}
body.menu-open .mnav{opacity:1;visibility:visible}
body.menu-open .burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* Appareils */
.laptop{position:relative;width:100%}
.laptop-screen{position:relative;border-radius:16px 16px 4px 4px;background:#1b1b1a;padding:10px 10px 14px;border:1px solid #2c2c29;box-shadow:0 50px 100px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.04)}
.laptop-screen::before{content:"";position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#333}
.laptop-view{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#000}
.laptop-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 1s ease,transform 6s linear;transform:scale(1.04)}
.laptop-view img.is-on{opacity:1;transform:scale(1)}
.laptop-base{height:14px;margin:0 -7%;border-radius:2px 2px 14px 14px;background:linear-gradient(180deg,#e4cb8f,#b8934e 60%,#8d6f37);box-shadow:0 20px 40px -10px rgba(0,0,0,.8)}
.laptop-base::before{content:"";display:block;width:16%;height:5px;margin:0 auto;border-radius:0 0 8px 8px;background:#9c7b3f}
.phone{position:relative;width:170px}
.phone-view{position:relative;height:100%;border-radius:23px;overflow:hidden;background:#0d0d0c}
.phone-view>img{width:100%;height:100%;object-fit:cover;object-position:top}
.browser{border-radius:14px;overflow:hidden;background:var(--ink-3);border:1px solid var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.85)}
.browser-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#20201e;border-bottom:1px solid var(--line)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#3a3a36}
.browser-bar i:first-child{background:#c9a961}
.browser-bar span{margin-left:10px;flex:1;height:18px;border-radius:6px;background:#151514;font:400 .66rem/18px var(--mono);color:var(--dim);padding-left:10px;overflow:hidden;white-space:nowrap}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* Puces flottantes */
.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:rgba(22,22,20,.78);border:1px solid var(--line-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -15px rgba(0,0,0,.8);font-size:.84rem;line-height:1.3;white-space:nowrap;animation:float 6s ease-in-out infinite;z-index:3}
.chip b{display:block;font-weight:500;color:var(--cream)}
.chip span{color:var(--mute);font-size:.76rem}
.chip .ci{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(201,169,97,.14);color:var(--gold)}
.chip .ci svg{width:18px;height:18px}
.chip .ci.ok{background:rgba(47,158,110,.16);color:#5fd19f}
@keyframes float{50%{transform:translateY(-10px)}}
.gauge{width:40px;height:40px;border-radius:50%;background:conic-gradient(#5fd19f calc(var(--v)*1%),rgba(245,245,240,.1) 0);display:grid;place-items:center;flex:none}
.gauge::after{content:attr(data-v);width:32px;height:32px;border-radius:50%;background:#161614;display:grid;place-items:center;font:500 .72rem var(--mono);color:#5fd19f}

/* Écran téléphone : demandes reçues */
.inbox{color:var(--cream);height:100%;padding:38px 8px 10px;background:linear-gradient(180deg,#1a1712,#0d0d0c 40%);font-size:.62rem}
.inbox h4{margin:0 4px 10px;font:600 .9rem var(--display);letter-spacing:-.02em}
.inbox .msg{display:flex;gap:7px;padding:8px;border-radius:12px;background:rgba(245,245,240,.05);border:1px solid var(--line);margin-bottom:6px;opacity:0;transform:translateY(8px);animation:msg .6s var(--ease) forwards}
.inbox .msg:nth-child(3){animation-delay:.6s}.inbox .msg:nth-child(4){animation-delay:1.2s}.inbox .msg:nth-child(5){animation-delay:1.8s}.inbox .msg:nth-child(6){animation-delay:2.4s}
.inbox .msg i{flex:none;width:22px;height:22px;border-radius:7px;background:var(--grad-gold);display:grid;place-items:center;font-style:normal;color:var(--ink);font-weight:600}
.inbox .msg b{display:block;font-weight:500;font-size:.62rem;white-space:nowrap}
.inbox .msg span{display:block;color:var(--mute);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
@keyframes msg{to{opacity:1;transform:none}}

/* Hero */
.hero{position:relative;padding:160px 0 100px;overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:40px;align-items:center}
.hero h1{margin:24px 0 26px;font-size:clamp(2.8rem,5.5vw,5.4rem)}
.hero .lead{margin-bottom:36px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:44px}
.avatars{display:flex}
.avatars i{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);margin-left:-10px;display:grid;place-items:center;font:600 .8rem var(--display);font-style:normal;color:var(--ink);background:var(--grad-gold)}
.avatars i:first-child{margin-left:0}
.avatars i:nth-child(2){background:#e8e5de}.avatars i:nth-child(3){background:#7a7a74;color:var(--cream)}
.proof-txt{font-size:.88rem;color:var(--mute);line-height:1.4}
.proof-txt b{color:var(--cream);font-weight:500}
.stars{color:var(--gold);letter-spacing:1px}
.badge{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 12px;border:1px solid var(--line-2);border-radius:999px;font-size:.84rem;color:var(--mute);background:rgba(245,245,240,.03)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(47,158,110,.18);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(47,158,110,0)}}
.scene{position:relative;padding:40px 0 40px 30px;perspective:1600px}
.scene .laptop{transform:rotateY(-8deg) rotateX(4deg);transform-style:preserve-3d;transition:transform 1.2s var(--ease)}
.scene:hover .laptop{transform:rotateY(-3deg) rotateX(2deg)}
.scene .phone{position:absolute;right:-24px;bottom:-6px;width:150px;transform:rotate(4deg)}
.scene .c1{top:10px;left:-20px}
.scene .c2{bottom:70px;left:-40px;animation-delay:-2s}
.scene .c3{top:-6px;right:40px;animation-delay:-4s}

/* Bandeau logos */
.logos{position:relative;padding:34px 0;border-block:1px solid var(--line);overflow:hidden}
.logos p{text-align:center;font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:26px}
.logos-row{display:flex;width:max-content;animation:marq 55s linear infinite}
.logos:hover .logos-row{animation-play-state:paused}
.logos::before,.logos::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.logos::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.logos::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)}
.logo-it{flex:none;height:38px;width:150px;margin:0 30px;background:rgba(245,245,240,.55);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;transition:background .3s}
.logo-it:hover{background:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Sections */
.sec{padding:clamp(72px,8.5vw,120px) 0;position:relative;isolation:isolate}
.sec-hd{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:48px}
.sec-hd h2{margin-top:20px}
.sec-hd--c{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec-hd--c .lead{margin-inline:auto}
.paper{background:var(--paper);color:var(--ink)}
.paper .lead,.paper .mute{color:var(--paper-mute)}
.paper .eyebrow{color:var(--gold-deep)}
.paper .gridbg{background-image:linear-gradient(rgba(10,10,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.06) 1px,transparent 1px)}

/* Bandeau de mots */
.words{padding:46px 0;overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,#16130c,#0a0a0a 50%,#16130c)}
.words .row{display:flex;width:max-content;animation:marq 34s linear infinite}
.words span{font:650 clamp(2.6rem,6vw,5rem)/1 var(--display);letter-spacing:-.04em;padding:0 28px;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(245,245,240,.35)}
.words span:nth-child(even){color:var(--gold);-webkit-text-stroke:0}

/* Services : bento visuel */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{position:relative;padding:32px;border-radius:var(--r-m);background:var(--ink-2);border:1px solid var(--line);overflow:hidden;transition:border-color .4s,transform .5s var(--ease);isolation:isolate;display:flex;flex-direction:column}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,169,97,.16),transparent 45%);opacity:0;transition:opacity .4s}
.card:hover{border-color:rgba(201,169,97,.4)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:10px}
.card p{color:var(--mute);font-size:.97rem}
.card .price{font:500 .8rem var(--mono);color:var(--mute);margin:18px 0 0}
.card .price b{font:650 1.6rem/1 var(--display);letter-spacing:-.03em;color:var(--gold);margin-left:4px}
.card .link{margin-top:20px}
.card ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.card li{display:flex;gap:12px;font-size:.95rem;color:var(--cream)}
.card li svg{flex:none;width:18px;height:18px;color:var(--gold);margin-top:3px}
.viz{position:relative;height:210px;margin:-8px -8px 26px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#1f1b12,#121211 65%);border:1px solid var(--line)}
.b-main{grid-column:span 4;grid-row:span 2;padding:40px;background:linear-gradient(150deg,#1d1910 0%,var(--ink-2) 60%);border-color:rgba(201,169,97,.3);display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:stretch}
.b-main>div:first-child{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.b-main>div:first-child>.tag{align-self:flex-start}
.b-main h3{font-size:clamp(2rem,3.2vw,2.9rem)}
.b-main .tag{display:inline-block;margin-bottom:22px;font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,169,97,.4);padding:7px 12px;border-radius:999px}
.b-main .devs{position:relative;align-self:center;padding:70px 0 120px 46px;margin-right:-40px}
.b-main .browser{position:relative;width:118%;transform:perspective(1200px) rotateY(-10deg) rotateX(3deg);transform-origin:left center;transition:transform 1s var(--ease)}
.b-main .phone{position:absolute;left:0;bottom:10px;width:150px;transition:transform 1s var(--ease)}
.b-main .chip.d1{top:14px;right:40px;animation-delay:-1s}
.b-main .chip.d2{bottom:40px;right:12%;animation-delay:-3.5s}
.b-main:hover .browser{transform:perspective(1200px) rotateY(-5deg) rotateX(1deg)}
.b-main:hover .phone{transform:translateY(-8px)}
.b-2{grid-column:span 2}.b-3{grid-column:span 2}
.viz-shop .phone{position:absolute;left:18%;top:20px;width:124px;transform:rotate(-5deg);transition:transform .8s var(--ease)}
.shop{background:#f7f3ec;color:#1a1714;display:flex;flex-direction:column}
.shop-top{display:flex;justify-content:space-between;align-items:center;padding:30px 12px 8px;font:700 .62rem var(--display);letter-spacing:.24em}
.shop-top svg{width:13px;height:13px}
.shop-img{height:44%;margin:0 8px;border-radius:10px;overflow:hidden}
.shop-img img{width:100%;height:100%;object-fit:cover;object-position:58% 30%;transform:scale(1.6)}
.shop-info{padding:9px 10px;display:grid;gap:3px}
.shop-info span{font-size:.48rem;color:#8a7f72;text-transform:uppercase;letter-spacing:.08em}
.shop-info b{font:600 .66rem/1.15 var(--display)}
.shop-info em{font-style:normal;font:600 .7rem var(--sans);color:#9b7838}
.shop-info i{margin-top:4px;font-style:normal;text-align:center;font-size:.54rem;font-weight:600;padding:6px;border-radius:999px;background:#1a1714;color:#f7f3ec}
.card:hover .viz-shop .phone{transform:rotate(0) translateY(-6px)}
.viz-shop .chip{top:56px;right:12px;padding:8px 12px 8px 8px;font-size:.74rem}
.viz-shop .chip .ci{width:26px;height:26px;border-radius:8px}
.viz-ba{display:grid;grid-template-columns:1fr 1fr}
.viz-ba img{width:100%;height:100%;object-fit:cover;object-position:top}
.viz-ba .old{filter:grayscale(1) contrast(.8) brightness(.6)}
.viz-ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--gold);box-shadow:0 0 20px var(--gold);transition:left 1.2s var(--ease)}
.card:hover .viz-ba{--split:22%}
.viz-ba .lbl{position:absolute;bottom:10px;font:500 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:rgba(10,10,10,.75);z-index:2}
.viz-ba .lbl.l{left:10px}.viz-ba .lbl.r{right:10px;color:var(--gold)}
.viz-id{display:grid;place-items:center}
.viz-id .mark{width:76px;transition:transform .8s var(--ease)}
.card:hover .viz-id .mark{transform:scale(1.08) rotate(-4deg)}
.viz-id .sw{position:absolute;bottom:16px;left:50%;translate:-50% 0;display:flex;gap:6px}
.viz-id .sw i{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);transition:transform .4s var(--ease)}
.card:hover .viz-id .sw i:nth-child(2){transform:translateY(-6px)}.card:hover .viz-id .sw i:nth-child(3){transform:translateY(-10px)}.card:hover .viz-id .sw i:nth-child(4){transform:translateY(-6px)}
.viz-id .ty{position:absolute;top:14px;left:16px;font:650 1.6rem/1 var(--display);letter-spacing:-.04em;color:rgba(245,245,240,.2)}
.viz-id .ty2{position:absolute;top:18px;right:16px;font:400 .64rem var(--mono);color:var(--dim);text-align:right;line-height:1.5}
.viz-motion{display:grid;place-items:center}
.viz-motion .ring{position:absolute;width:150px;height:150px;border-radius:50%;border:1px dashed rgba(201,169,97,.35);animation:spin 16s linear infinite}
.viz-motion .ring::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold)}
.viz-motion .ring.r2{width:100px;height:100px;animation-duration:9s;animation-direction:reverse;border-style:solid;border-color:rgba(245,245,240,.12)}
.viz-motion .ring.r2::before{width:8px;height:8px;margin-left:-4px;top:-4px;background:var(--cream);box-shadow:none}
.viz-motion .play{width:56px;height:56px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;color:var(--ink);box-shadow:0 0 0 10px rgba(201,169,97,.12);transition:transform .4s var(--ease)}
.card:hover .viz-motion .play{transform:scale(1.1)}
.viz-motion .play svg{width:22px;height:22px;margin-left:3px}
.viz-motion .tl{position:absolute;left:16px;right:16px;bottom:14px;height:4px;border-radius:4px;background:rgba(245,245,240,.08);overflow:hidden}
.viz-motion .tl::after{content:"";position:absolute;inset:0;width:40%;background:var(--grad-gold);animation:tl 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tl{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.viz-slides .sl{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line-2);background:#1d1d1b;transform:translate(-50%,-50%) rotate(var(--r)) translate(var(--x),var(--y));transition:transform .7s var(--ease);overflow:hidden;box-shadow:0 20px 40px -12px rgba(0,0,0,.8)}
.viz-slides .sl:nth-child(1){--r:-8deg;--x:-14%;--y:6%}
.viz-slides .sl:nth-child(2){--r:4deg;--x:12%;--y:2%}
.viz-slides .sl:nth-child(3){--r:0deg;--x:0%;--y:-4%;background:linear-gradient(135deg,#1f1b12,#121211)}
.card:hover .viz-slides .sl:nth-child(1){--r:-14deg;--x:-30%;--y:8%}
.card:hover .viz-slides .sl:nth-child(2){--r:10deg;--x:28%;--y:4%}
.viz-slides .sl b{position:absolute;left:12%;top:24%;font:650 .9rem/1.05 var(--display);letter-spacing:-.03em;width:60%}
.viz-slides .sl em{position:absolute;left:12%;bottom:18%;width:40%;height:4px;border-radius:4px;background:var(--grad-gold)}
.viz-slides .sl i{position:absolute;right:10%;top:22%;width:26%;height:56%;border-radius:6px;background:rgba(201,169,97,.2)}

/* Réalisations */
.work{position:relative}
.work-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.work-track{display:flex;gap:28px;padding-left:max(var(--g),calc((100vw - var(--wrap))/2 + var(--g)));will-change:transform}
.proj{flex:none;width:min(600px,82vw)}
.proj .browser{transition:transform .6s var(--ease),border-color .4s}
.proj:hover .browser{transform:translateY(-6px);border-color:rgba(201,169,97,.5)}
.proj-img{display:block;position:relative;overflow:hidden}
.proj-img img{transition:object-position 4s ease}
.proj:hover .proj-img img{object-position:bottom}
.proj-img .visit{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.86rem;font-weight:500;opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.proj:hover .visit,.proj:focus-within .visit{opacity:1;transform:none}
.proj-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:20px}
.proj-meta h3{font-size:1.6rem}
.proj-meta span{font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.proj p{color:var(--mute);font-size:.95rem;margin-top:6px;max-width:50ch}
.work-end{flex:none;width:min(440px,80vw);display:flex;flex-direction:column;justify-content:center;gap:24px;padding:0 40px}
.work-end h3{font-size:2.5rem}
.work-progress{height:2px;background:var(--line);margin:44px auto 0;width:min(var(--wrap),calc(100% - 2*var(--g)));border-radius:2px;overflow:hidden}
.work-progress i{display:block;height:100%;width:0;background:var(--grad-gold)}

/* Méthode */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding:22px;border-radius:var(--r-m);background:#fff;border:1px solid rgba(10,10,10,.08);transition:transform .5s var(--ease),box-shadow .5s}
.step:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(10,10,10,.35)}
.step-viz{height:150px;border-radius:14px;background:var(--paper-2);margin-bottom:22px;position:relative;overflow:hidden}
.step small{display:block;font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.step h3{margin-bottom:10px}
.step p{color:var(--paper-mute);font-size:.94rem}
.sv-audit{padding:18px;display:flex;flex-direction:column;gap:8px}
.sv-audit .q{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:#fff;font-size:.72rem;box-shadow:0 4px 12px -6px rgba(0,0,0,.2)}
.sv-audit .q svg{width:14px;height:14px;color:var(--gold-deep)}
.sv-audit .q:nth-child(2){margin-left:18px;opacity:.75}.sv-audit .q:nth-child(3){margin-left:36px;opacity:.5}
.sv-wire{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sv-wire i{border-radius:7px;background:#fff;border:1px dashed rgba(10,10,10,.2)}
.sv-wire i:first-child{grid-column:span 2;height:46px;background:linear-gradient(110deg,#0a0a0a 55%,#C9A961 55%);border:0}
.sv-code{background:#141413;padding:16px;font:400 .66rem/1.7 var(--mono);color:#8b8b85}
.sv-code b{color:var(--gold);font-weight:400}.sv-code em{color:#5fd19f;font-style:normal}
.sv-code .cur{display:inline-block;width:6px;height:11px;background:var(--gold);vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sv-launch{display:flex;align-items:flex-end;gap:7px;padding:18px 20px}
.sv-launch i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#C9A961,#E6CB8C);height:calc(var(--h)*1%);transform-origin:bottom;transform:scaleY(.15);transition:transform 1s var(--ease)}
.step.is-on .sv-launch i{transform:none}
.sv-launch i:nth-child(2){transition-delay:.1s}.sv-launch i:nth-child(3){transition-delay:.2s}.sv-launch i:nth-child(4){transition-delay:.3s}.sv-launch i:nth-child(5){transition-delay:.4s}.sv-launch i:nth-child(6){transition-delay:.5s}

/* Fondateur */
.founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.founder-vis{position:relative}
.founder-img{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line-2);margin:0}
.founder-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.founder-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.85));pointer-events:none}
.founder-img figcaption{position:absolute;left:24px;bottom:22px;z-index:2}
.founder-img figcaption b{display:block;font:600 1.5rem/1.1 var(--display);letter-spacing:-.03em}
.founder-img figcaption span{font-size:.88rem;color:var(--mute)}
.founder-vis .chip.f1{top:30px;right:-40px}
.founder-vis .chip.f2{bottom:110px;left:-44px;animation-delay:-3s}
.founder blockquote{margin:34px 0;padding-left:22px;border-left:2px solid var(--gold);font:500 clamp(1.4rem,2.1vw,1.9rem)/1.25 var(--display);letter-spacing:-.025em}
.founder p+p{margin-top:16px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:100px}
.nums div{padding:28px;border-radius:var(--r-m);border:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),transparent)}
.nums b{display:block;font:650 clamp(2.8rem,5vw,4.4rem)/1 var(--display);letter-spacing:-.05em}
.nums b sup{font-size:.45em;vertical-align:super;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.nums div>span{display:block;margin-top:12px;color:var(--mute);font-size:.94rem;max-width:22ch}

/* Avis */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{padding:32px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column;gap:20px;margin:0;transition:border-color .4s,transform .5s var(--ease)}
.review:hover{border-color:rgba(201,169,97,.35);transform:translateY(-4px)}
.review .top{display:flex;justify-content:space-between;align-items:center}
.review .g{width:22px;height:22px}
.review p{font-size:1.02rem;color:var(--cream)}
.review footer{margin-top:auto;display:flex;align-items:center;gap:14px;font-size:.9rem}
.review footer i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--grad-gold);font:600 1rem var(--display);font-style:normal;color:var(--ink)}
.review footer span{display:block;color:var(--mute);font-size:.8rem}
.g-score{display:flex;align-items:center;gap:18px;padding:18px 24px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--ink-2);justify-self:end}
.g-score b{font:650 3rem/1 var(--display);letter-spacing:-.04em}

/* Tarifs */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.price-card{position:relative;padding:36px 32px;border-radius:var(--r-m);border:1px solid rgba(10,10,10,.1);background:#fff;display:flex;flex-direction:column}
.price-card h3{font-size:1.7rem}
.price-card .from{margin:20px 0 6px;font:500 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-mute)}
.price-card .amount{font:650 3.2rem/1 var(--display);letter-spacing:-.05em}
.price-card .amount small{font:400 1rem var(--sans);letter-spacing:0;color:var(--paper-mute)}
.price-card ul{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px;font-size:.96rem}
.price-card li{display:flex;gap:12px}
.price-card li svg{flex:none;width:18px;height:18px;color:var(--gold-deep);margin-top:3px}
.price-card .btn{margin-top:auto;justify-content:center}
.price-card.is-hl{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:translateY(-14px);box-shadow:0 40px 80px -30px rgba(10,10,10,.6);overflow:hidden;isolation:isolate}
.price-card.is-hl::before{content:"";position:absolute;inset:auto -30% -50% auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,169,97,.35),transparent);z-index:-1}
.price-card.is-hl .from,.price-card.is-hl .amount small{color:var(--mute)}
.price-card.is-hl li svg{color:var(--gold)}
.price-card .pill{position:absolute;top:20px;right:20px;background:var(--grad-gold);color:var(--ink);font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px}

/* FAQ */
.faq{max-width:880px;margin:0 auto;display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:18px;background:var(--ink-2);transition:border-color .3s}
.faq details[open]{border-color:rgba(201,169,97,.35)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 24px;font:600 clamp(1.05rem,1.6vw,1.25rem)/1.3 var(--display);letter-spacing:-.02em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:.4s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;inset:50% auto auto 50%;width:12px;height:1.5px;background:var(--gold);translate:-50% -50%;transition:.4s var(--ease)}
.faq summary i::after{rotate:90deg}
.faq details[open] summary i{background:var(--gold);border-color:var(--gold)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:var(--ink)}
.faq details[open] summary i::after{rotate:0deg}
.faq .ans{padding:0 70px 24px 24px;color:var(--mute)}

/* CTA final */
.final{position:relative;overflow:hidden;isolation:isolate}
.final-box{position:relative;isolation:isolate;border-radius:var(--r-l);padding:clamp(40px,6vw,80px);background:linear-gradient(140deg,#1f1a0f 0%,#0f0f0e 55%);border:1px solid rgba(201,169,97,.28);overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.final-box::before{content:"";position:absolute;right:-10%;top:-40%;width:700px;height:700px;background:radial-gradient(closest-side,rgba(201,169,97,.25),transparent 70%);z-index:-1}
.final h2{font-size:clamp(2.6rem,5.2vw,4.8rem);margin:20px 0 22px}
.final .lead{margin:0 0 34px}
.final .reassure{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;font-size:.88rem;color:var(--mute)}
.final .reassure span{display:inline-flex;align-items:center;gap:8px}
.final .reassure svg{width:16px;height:16px;color:var(--gold)}
.final-devs{position:relative;height:380px}
.final-devs .browser{position:absolute;top:10%;left:0;width:78%;transform:rotate(var(--r)) translate(var(--x),var(--y));transition:transform .9s var(--ease)}
.final-devs .browser:nth-child(1){--r:-10deg;--x:-6%;--y:6%;opacity:.55}
.final-devs .browser:nth-child(2){--r:6deg;--x:30%;--y:-4%;opacity:.75}
.final-devs .browser:nth-child(3){--r:-2deg;--x:12%;--y:22%}
.final-box:hover .final-devs .browser:nth-child(1){--r:-14deg;--x:-12%}
.final-box:hover .final-devs .browser:nth-child(2){--r:10deg;--x:36%}

/* Footer */
.ft{border-top:1px solid var(--line);padding:80px 0 36px;font-size:.94rem;position:relative;overflow:hidden}
.ft-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:36px}
.ft-grid h4{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:6px 0 20px}
.ft-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ft-grid a{color:var(--mute);transition:color .25s}
.ft-grid a:hover{color:var(--cream)}
.ft-grid .about p{color:var(--mute);max-width:34ch;margin-top:20px}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line);color:var(--dim);font-size:.84rem}
.ft-bottom nav{display:flex;gap:20px}
.ft-word{font:700 clamp(4rem,16vw,15rem)/.8 var(--display);letter-spacing:-.06em;text-align:center;margin-top:60px;user-select:none;background:linear-gradient(180deg,rgba(201,169,97,.35),rgba(201,169,97,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Page service */
.phero{padding:160px 0 90px;position:relative;overflow:hidden;isolation:isolate}
.crumbs{display:flex;gap:10px;font:400 .8rem var(--mono);color:var(--dim);margin-bottom:30px}
.crumbs a:hover{color:var(--cream)}
.phero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.phero h1{font-size:clamp(2.7rem,5.4vw,5rem);margin:20px 0 24px}
.phero-vis{position:relative;padding:20px 20px 80px}
.phero-card{position:absolute;right:0;bottom:0;width:290px;padding:24px;border-radius:var(--r-m);border:1px solid rgba(201,169,97,.35);background:rgba(22,20,14,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 70px -20px rgba(0,0,0,.9);z-index:3}
.phero-card .amount{font:650 2.8rem/1 var(--display);letter-spacing:-.05em;margin:10px 0 4px}
.phero-card .amount small{font:400 .9rem var(--sans);letter-spacing:0;color:var(--mute)}
.phero-card ul{list-style:none;padding:0;margin:16px 0 20px;display:grid;gap:8px;font-size:.88rem}
.phero-card li{display:flex;gap:10px}
.phero-card li svg{flex:none;width:16px;height:16px;color:var(--gold);margin-top:3px}
.phero-card .btn{width:100%;justify-content:center;min-height:46px}
.phero-vis .laptop{width:92%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.sticky{position:sticky;top:120px}
.feat article{padding:28px 0;border-top:1px solid rgba(10,10,10,.12);display:grid;grid-template-columns:56px 1fr;gap:20px}
.feat article:last-child{border-bottom:1px solid rgba(10,10,10,.12)}
.feat .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:var(--gold)}
.feat .ico svg{width:22px;height:22px}
.feat h3{margin-bottom:8px}
.feat p{color:var(--paper-mute);font-size:.97rem}
.sticky .laptop{margin-top:44px;max-width:460px}
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sector{position:relative;display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;transition:.4s var(--ease)}
.sector:hover{border-color:rgba(201,169,97,.45);transform:translateY(-4px)}
.sector-img{height:130px;overflow:hidden;position:relative}
.sector-img img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.6) brightness(.7);transition:transform 1s var(--ease),filter .5s}
.sector:hover .sector-img img{transform:scale(1.05);filter:none}
.sector-txt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px}
.sector b{font:600 1.2rem/1.1 var(--display);letter-spacing:-.02em}
.sector span{display:block;font-size:.84rem;color:var(--mute);margin-top:4px}
.sector svg{flex:none;width:20px;height:20px;color:var(--gold);transition:transform .35s var(--ease)}
.sector:hover svg{transform:translate(3px,-3px)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gal .proj{width:auto}
.gal .proj-meta h3{font-size:1.3rem}
.compare{width:100%;border-collapse:collapse;font-size:.96rem}
.compare th,.compare td{padding:18px 16px;border-bottom:1px solid rgba(10,10,10,.1);text-align:left}
.compare thead th{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-mute)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}
.compare .hl{background:rgba(201,169,97,.14)}
.compare thead .hl{background:var(--ink);color:var(--gold);border-radius:12px 12px 0 0}
.compare svg{width:18px;height:18px;color:var(--gold-deep);display:inline-block}
.compare .no{color:#8a8a84}

/* Curseur et apparitions */
.glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(closest-side,rgba(201,169,97,.1),transparent 70%);transform:translate3d(var(--x,-999px),var(--y,-999px),0);mix-blend-mode:screen}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.is-in{opacity:1;transform:none}
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split-words .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:calc(var(--i)*55ms)}
.split-words.is-in .w>span{transform:none}

/* Responsive */
@media (max-width:1080px){
  .nav,.hd .btn{display:none}.burger{display:block}
  .hero-grid,.founder,.split,.phero-grid,.sec-hd,.final-box{grid-template-columns:1fr}
  .scene{max-width:640px;margin:20px auto 0;padding-left:0}
  .bento{grid-template-columns:1fr 1fr}.b-main{grid-column:span 2;grid-row:auto}.b-2,.b-3{grid-column:span 1}
  .steps,.nums{grid-template-columns:1fr 1fr}
  .reviews,.prices,.gal,.sectors{grid-template-columns:1fr 1fr}
  .price-card.is-hl{transform:none}
  .ft-grid{grid-template-columns:1fr 1fr}
  .sticky{position:static}
  .g-score{justify-self:start}
  .founder-vis{max-width:480px}
}
@media (max-width:680px){
  :root{--g:16px}
  .hd{inset:10px 0 auto}.hd-bar{height:60px;padding-left:16px}
  .hero{padding-top:120px}
  .scene .phone{width:110px;right:-4px}
  .scene .c1,.scene .c3{display:none}.scene .c2{left:0;bottom:30px}
  .bento,.reviews,.prices,.gal,.sectors,.nums,.steps,.ft-grid{grid-template-columns:1fr}
  .b-main,.b-2,.b-3{grid-column:auto}
  .b-main{padding:28px;grid-template-columns:1fr}.b-main .devs{min-height:240px}
  .work-pin{position:relative;height:auto;padding:0}
  .work-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--g);transform:none!important}
  .proj{scroll-snap-align:start}
  .work-progress{display:none}
  .faq .ans{padding-right:24px}
  .compare{font-size:.86rem}.compare th,.compare td{padding:14px 8px}
  .glow{display:none}
  .founder-vis .chip{display:none}
  .final-devs{height:240px}
  .phero-vis{padding:0 0 150px}.phero-card{width:calc(100% - 20px);right:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.split-words .w>span,.inbox .msg{opacity:1;transform:none}
  .glow{display:none}
}

.nw{white-space:nowrap}

/* Arrière plan : aurores dorées fixes, très lentes */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:
  radial-gradient(1200px 600px at 85% -10%,rgba(201,169,97,.13),transparent 60%),
  radial-gradient(900px 700px at -10% 40%,rgba(120,90,40,.10),transparent 60%),
  radial-gradient(1000px 600px at 60% 110%,rgba(201,169,97,.08),transparent 60%),var(--ink)}
.aurora i{position:absolute;width:44vw;height:44vw;border-radius:50%;filter:blur(110px);opacity:.22;animation:drift 40s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:#b8934e;top:-12vw;right:-8vw}
.aurora i:nth-child(2){background:#5a4320;top:38%;left:-14vw;animation-duration:52s;opacity:.3}
.aurora i:nth-child(3){background:#c9a961;bottom:-20vw;right:20%;animation-duration:60s;opacity:.12}
.aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(245,245,240,.07) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 70%)}
@keyframes drift{to{transform:translate(-6vw,8vh) scale(1.15)}}
body{background:transparent}
html{background:var(--ink)}
.paper{background:radial-gradient(900px 400px at 100% 0%,#efe6d2,transparent 70%),linear-gradient(180deg,#F5F3EC,#F1EEE5)}

/* Hero : mur de toutes les réalisations */
.wall-wrap{position:relative;height:620px;perspective:1800px}
.wall{position:absolute;inset:-40px -30% -40px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;transform:rotateX(18deg) rotateY(-16deg) rotateZ(6deg);transform-style:preserve-3d;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(90deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.wall-col{display:flex;flex-direction:column;gap:16px;animation:wallUp 46s linear infinite}
.wall-col:nth-child(2){animation-name:wallDown;animation-duration:54s}
.wall-col:nth-child(3){animation-duration:60s}
.wall-col:nth-child(4){animation-name:wallDown;animation-duration:50s}
.wall:hover .wall-col{animation-play-state:paused}
.tile{border-radius:12px;overflow:hidden;background:#1b1b19;border:1px solid var(--line-2);box-shadow:0 24px 50px -20px rgba(0,0,0,.9);transition:transform .6s var(--ease),border-color .4s}
.tile:hover{transform:translateZ(30px) scale(1.03);border-color:rgba(201,169,97,.6)}
.tile-bar{display:flex;align-items:center;gap:4px;height:20px;padding:0 8px;background:#20201e}
.tile-bar i{width:6px;height:6px;border-radius:50%;background:#3a3a36}
.tile-bar i:first-child{background:var(--gold)}
.tile-bar b{margin-left:6px;font:400 .52rem var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden}
.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
@keyframes wallUp{to{transform:translateY(-50%)}}
@keyframes wallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall-wrap .c1{top:40px;left:-30px}
.wall-wrap .c2{bottom:70px;left:4%;animation-delay:-2s}
.wall-wrap .c3{top:46%;right:-10px;animation-delay:-4s}
.chip .stars{font-size:.7rem}

/* Méthode : visuels réalistes */
.step-viz{background:#EFEBE2;border:1px solid rgba(10,10,10,.06)}
.sv-serp{padding:14px;display:flex;flex-direction:column;gap:8px}
.serp-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:#fff;font-size:.72rem;box-shadow:0 2px 8px -4px rgba(0,0,0,.25)}
.serp-bar svg{width:13px;height:13px;color:#7a7a74}
.serp-res{display:flex;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;font-size:.64rem;line-height:1.3;border:1px solid rgba(201,169,97,.5)}
.serp-res i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--grad-gold)}
.serp-res b{display:block;color:#1a0dab;font-weight:500;font-size:.7rem}
.serp-res span{color:#5f6368}
.serp-res.is-dim{opacity:.55;border-color:transparent}
.serp-res.is-dim i{background:#d6d3ca}
.sv-figma{background:#2a2a28;padding:10px}
.fg-tools{position:absolute;left:50%;bottom:8px;translate:-50% 0;display:flex;gap:4px;padding:4px;border-radius:8px;background:#1b1b1a}
.fg-tools i{width:14px;height:14px;border-radius:4px;background:#3a3a36}.fg-tools i.on{background:var(--gold)}
.fg-frame{position:absolute;top:18px}
.fg-frame span{display:block;font:400 .5rem var(--mono);color:#9a9a94;margin-bottom:3px}
.fg-frame div{background:#fff;border-radius:4px;padding:5px;display:grid;gap:4px}
.fg-frame i{height:8px;border-radius:2px;background:#ecebe6}
.fg-frame i.fgh{height:30px;background:linear-gradient(110deg,#0a0a0a 60%,#c9a961 60%)}
.fg-desk{left:12px;width:62%}.fg-desk div{grid-template-columns:1fr 1fr}.fg-desk i.fgh{grid-column:span 2}
.fg-mob{right:12px;width:22%}.fg-mob i.fgh{height:38px}
.fg-desk div{outline:1.5px solid #3b82f6;outline-offset:2px}
.fg-cursor{position:absolute;left:58%;top:58%;display:flex;align-items:flex-start;gap:2px;animation:cur 5s ease-in-out infinite}
.fg-cursor svg{width:14px;height:14px;color:var(--gold)}
.fg-cursor b{font:500 .5rem var(--sans);padding:2px 5px;border-radius:4px;background:var(--gold);color:var(--ink);margin-top:10px}
@keyframes cur{50%{transform:translate(-40px,-22px)}}
.sv-code{background:#151514;padding:0;font:400 .64rem/1.75 var(--mono);color:#8b8b85}
.ed-tabs{display:flex;background:#1d1d1b;border-bottom:1px solid #2a2a27}
.ed-tabs span{padding:6px 12px;font-size:.58rem;color:#6e6e68}
.ed-tabs span.on{color:var(--cream);background:#151514;box-shadow:inset 0 1px 0 var(--gold)}
.sv-code ol{margin:8px 0 0;padding-left:30px;color:#4d4d48}
.sv-code li{padding-left:6px}
.sv-code u{text-decoration:none;color:#9cdcfe}
.sv-lh{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;align-content:center;padding:14px 8px;gap:4px;background:#fff}
.lh{display:grid;justify-items:center;gap:6px;text-align:center}
.lh small{font-size:.54rem;line-height:1.2;color:#5f6368}
.lh .ring{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 .78rem var(--sans);color:#0c7a43;background:radial-gradient(closest-side,#e6f4ea 78%,transparent 80% 100%),conic-gradient(#0cce6b calc(var(--p,0)*var(--v)*1%),#e6f4ea 0)}
.step.is-in .lh .ring{--p:1;transition:--p 1.4s}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.step.is-in .lh .ring{animation:fillp 1.6s var(--ease) forwards}
@keyframes fillp{from{--p:0}to{--p:1}}

@media (max-width:1080px){.wall-wrap{height:460px;margin-top:20px}.wall{inset:-40px -10% -40px -10%}}
@media (max-width:680px){.wall-wrap{height:340px}.wall-wrap .c1,.wall-wrap .c3{display:none}.b-main .devs{padding:20px 0 50px 20px}.b-main .chip.d1{right:0}}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}.lh .ring{--p:1}}

/* ===== v4 : carte site vitrine compacte, maquette dessinée ===== */
.b-main{grid-row:auto;grid-template-columns:1fr 1.05fr;gap:28px;align-items:center;padding:36px}
.b-main-txt{display:flex;flex-direction:column;gap:0}
.b-main-txt .tag{align-self:flex-start;margin-bottom:18px}
.b-main-txt ul{margin:18px 0 24px}
.b-main-pied{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.b-main-pied .price{margin:0}
.b-main .devs{position:relative;align-self:center;padding:26px 30px 34px 0;margin:0}
.b-4{grid-column:span 3}
.b-cta{justify-content:center;background:radial-gradient(400px 220px at 100% 0%,rgba(201,169,97,.18),transparent 70%),var(--ink-2)}
.b-cta .tag{align-self:flex-start;margin-bottom:18px;font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,169,97,.4);padding:7px 12px;border-radius:999px}
.b-cta h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.b-cta-pied{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.b-cta-tel{display:inline-flex;align-items:center;gap:8px;color:var(--mute);font-size:.94rem}
.b-cta-tel svg{width:18px;height:18px;color:var(--gold)}
/* mini site dans le navigateur */
.b-main .browser.ms{position:relative;width:100%;transform:none;border-radius:12px;box-shadow:0 30px 60px -25px rgba(0,0,0,.9)}
.b-main:hover .browser.ms,.b-main:hover .browser.nx{transform:translateY(-4px)}
.ms{background:#fff;color:#1d1d1b}
.ms-nav{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#fff;font-size:.5rem;color:#555}
.ms-nav b{font:800 .66rem/1 var(--display);color:#111;letter-spacing:.02em;margin-right:auto;display:grid}
.ms-nav b small{font:700 .32rem var(--sans);letter-spacing:.2em;color:#e8661d}
.ms-nav i{font-style:normal;padding:4px 8px;border-radius:4px;background:#e8661d;color:#fff;font-weight:600}
.ms-hero{position:relative;height:150px;overflow:hidden;background:#222}
.ms-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:85% 45%;transform:scale(1.9);transform-origin:80% 50%;filter:brightness(.55)}
.ms-hero>div{position:relative;padding:20px 16px;color:#fff;max-width:70%}
.ms-hero small{display:block;font:700 .45rem var(--sans);letter-spacing:.06em;color:#ff8a3d;text-transform:uppercase;margin-bottom:6px}
.ms-hero strong{display:block;font:800 1.05rem/1.02 var(--display);letter-spacing:-.02em}
.ms-hero em{font-style:normal;color:#ff8a3d}
.ms-hero p{display:flex;gap:6px;margin-top:10px}
.ms-hero p i,.ms-m-hero i{font-style:normal;font-size:.44rem;font-weight:600;padding:4px 8px;border-radius:4px;background:#25a244;color:#fff}
.ms-hero p i.o,.ms-m-hero i.o{background:#fff;color:#e8661d}
.ms-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#141414;color:#fff;padding:8px 6px}
.ms-stats span{text-align:center;font-size:.4rem;color:#bbb;display:grid}
.ms-stats b{font:800 .72rem var(--display);color:#ff8a3d}
.ms-phone{position:absolute;right:-6px;bottom:-4px;width:112px}
.ms-m-nav{display:flex;justify-content:space-between;align-items:center;padding:24px 9px 6px;font:800 .48rem var(--display);color:#111}
.ms-m-nav span{width:12px;height:2px;background:#111;box-shadow:0 3px 0 #111,0 -3px 0 #111}
.ms-m-hero{position:relative;height:118px;overflow:hidden;background:#222}
.ms-m-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 50%;transform:scale(2.4);transform-origin:85% 50%;filter:brightness(.5)}
.ms-m-hero>div{position:relative;padding:14px 9px;display:grid;gap:4px;color:#fff}
.ms-m-hero strong{font:800 .7rem/1.05 var(--display);margin-bottom:4px}
.ms-m-hero em{font-style:normal;color:#ff8a3d}
.ms-m-hero i{text-align:center}
.ms-m-cards{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px}
.ms-m-cards span{display:grid;padding:6px;border-radius:6px;background:#f3f1ec;font-size:.36rem;color:#777;text-align:center}
.ms-m-cards b{font:800 .58rem var(--display);color:#e8661d}
.b-main .chip{padding:9px 13px 9px 9px;font-size:.78rem}
.b-main .chip .ci{width:30px;height:30px;border-radius:9px}
.b-main .chip.d1{top:0;right:6px;left:auto;bottom:auto}
.b-main .chip.d2{bottom:6px;left:-18px;right:auto;top:auto}

/* Mots en or dans les titres animés : le dégradé est posé sur chaque mot (sinon invisible dans certains navigateurs) */
.split-words .gold{background:none;color:inherit}
.split-words .gold .w>span{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.paper .split-words .gold .w>span{background:linear-gradient(100deg,#9b7838,#C9A961);-webkit-background-clip:text;background-clip:text}

@media (max-width:1080px){.b-4{grid-column:span 1}.b-cta{grid-column:span 2}}
@media (max-width:680px){.b-main{grid-template-columns:1fr;padding:26px}.b-main .devs{padding:20px 20px 30px 0}.b-cta,.b-4{grid-column:auto}}
.b-main .phone.ms-phone{left:auto;right:-8px;bottom:-2px;width:112px;transform:none}
.b-main:hover .phone.ms-phone{transform:translateY(-6px)}
.viz-shop .phone{width:104px;top:12px;left:22%}
.viz-shop .shop-img{height:40%}
.viz-shop .shop-top{padding-top:24px}
.shop-img{flex:none}
.shop-info{gap:2px;padding:7px 9px}
.shop-info i{margin-top:2px;padding:5px}
.ms-hero img,.ms-m-hero img{filter:brightness(.32) saturate(.8) blur(1.5px)}
.ms-hero::after,.ms-m-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),transparent 70%)}
.ms-hero>div,.ms-m-hero>div{z-index:1}

/* Vraies créations : film de marque et présentation */
.viz-video{background:#0A0A0A}
.viz-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viz-badge{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(10,10,10,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 .68rem var(--mono);color:var(--cream);border:1px solid var(--line-2)}
.viz-badge svg{width:10px;height:10px;color:var(--gold)}
.viz-deck img{position:absolute;left:50%;top:50%;width:68%;border-radius:8px;border:1px solid var(--line-2);box-shadow:0 20px 40px -12px rgba(0,0,0,.85);transform:translate(-50%,-50%) rotate(var(--r)) translate(var(--x),var(--y));transition:transform .8s var(--ease)}
.viz-deck img:nth-child(1){--r:-9deg;--x:-16%;--y:6%}
.viz-deck img:nth-child(2){--r:7deg;--x:15%;--y:3%}
.viz-deck img:nth-child(3){--r:0deg;--x:0%;--y:-3%}
.card:hover .viz-deck img:nth-child(1){--r:-14deg;--x:-30%;--y:8%}
.card:hover .viz-deck img:nth-child(2){--r:12deg;--x:29%;--y:4%}
.card:hover .viz-deck img:nth-child(3){--y:-6%}

/* Méga menu à 3 colonnes */
.mega{width:820px;grid-template-columns:1.1fr 1fr 1fr}
.mega .main{grid-row:span 3}
@media (max-width:1180px){.mega{width:700px}}

/* ===================== Pages intérieures ===================== */
.phero--court{padding:150px 0 70px}
.phero--court h1{max-width:18ch}
.phero-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:26px}
.kpis{display:flex;gap:12px}
.kpis div{padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(18,18,17,.6);min-width:120px}
.kpis b{display:block;font:650 2rem/1 var(--display);letter-spacing:-.04em}
.kpis span{font-size:.82rem;color:var(--mute)}
.vis-note{position:absolute;left:0;bottom:-28px;font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.steps--txt .step{padding-top:28px}

/* Boutique (page e-commerce) */
.vis-shop{position:relative;padding:20px 0 120px}
.vis-shop .vs-desk{width:88%}
.vis-shop .vs-phone{position:absolute;right:4%;top:60px;width:150px;transform:rotate(3deg)}
.vis-shop .phero-card{position:absolute;left:0;right:auto;bottom:0;width:280px}

/* Avant / après (refonte) */
.ba{position:relative;--pos:50%;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px #000}
.ba .browser{box-shadow:none}
.ba-avant{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-avant .browser{height:100%}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}
.ba-poignee{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--gold);box-shadow:0 0 18px var(--gold);z-index:3;pointer-events:none}
.ba-poignee i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.ba-poignee i::before,.ba-poignee i::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.ba-poignee i::before{left:6px;border-right-color:var(--ink)}.ba-poignee i::after{right:6px;border-left-color:var(--ink)}
.ba-range:focus-visible~.ba-poignee i{outline:2px solid var(--cream);outline-offset:3px}
.ba-lbl{position:absolute;bottom:14px;z-index:3;font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:6px;background:rgba(10,10,10,.8)}
.ba-lbl.l{left:14px}.ba-lbl.r{right:14px;color:var(--gold)}
.old-site{background:#dfe7ef;height:calc(100% - 30px);font-family:"Times New Roman",serif;color:#1a237e;display:flex;flex-direction:column}
.os-bar{background:linear-gradient(#3f6fb5,#1f4a8a);color:#fff;font:bold 13px Arial,sans-serif;padding:8px 12px;text-align:center}
.os-body{display:grid;grid-template-columns:120px 1fr;flex:1}
.os-menu{background:#9fb6d6;padding:10px 8px;display:grid;align-content:start;gap:6px;font:12px Verdana,sans-serif}
.os-menu span{color:#0000ee;text-decoration:underline}
.os-main{padding:14px;background:#fff8dc}
.os-main h4{margin:0 0 6px;font:bold 22px "Comic Sans MS",cursive;color:#b22222}
.os-main p{font-size:12px;margin:0 0 8px;color:#333}
.os-img{height:90px;background:repeating-linear-gradient(45deg,#cfd8e3 0 10px,#e3e9f0 10px 20px);border:2px ridge #999;margin-bottom:8px}
.os-maj{font-size:10px!important;color:#777!important}

/* Charte (identité) */
.brand{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brand>div{border-radius:16px;border:1px solid var(--line-2);background:var(--ink-2);padding:18px}
.br-logo{grid-column:span 2;display:flex;align-items:center;gap:18px;background:radial-gradient(300px 160px at 20% 50%,rgba(201,169,97,.2),transparent),var(--ink-2)!important;min-height:150px}
.br-logo img{width:70px}
.br-logo span{font:700 1.7rem/1 var(--display);letter-spacing:.06em}
.br-logo small{display:block;margin-top:6px;font:500 .62rem var(--mono);letter-spacing:.4em;color:var(--gold)}
.br-pal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px!important}
.br-pal i{display:flex;flex-direction:column;justify-content:flex-end;height:110px;border-radius:10px;background:var(--c);color:var(--t,#F5F5F0);font:500 .56rem var(--mono);font-style:normal;padding:7px;border:1px solid var(--line-2)}
.br-pal b{font:600 .7rem var(--sans);margin-bottom:2px}
.br-type{display:flex;align-items:center;gap:14px}
.br-type .aa{font:700 3.6rem/1 var(--display);letter-spacing:-.04em}
.br-type b{display:block;font-size:.84rem}.br-type span{display:block;font-size:.72rem;color:var(--mute);margin-bottom:6px}
.br-carte{grid-column:span 2;display:flex;align-items:center;gap:16px;background:var(--cream)!important;color:var(--ink);transform:rotate(-1.5deg)}
.br-carte img{width:40px;filter:invert(1)}
.br-carte b{display:block;font:650 1.05rem var(--display)}.br-carte span{display:block;font-size:.76rem;color:#55554f}

/* Lecteur vidéo (motion) */
.player{border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#000;box-shadow:0 40px 80px -30px #000}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.player-strip{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#141413;font:500 .66rem var(--mono);color:var(--dim)}
.player-strip i{flex:1;height:24px;border-radius:4px;background:linear-gradient(90deg,#1f1b12,#2b2414);border:1px solid var(--line)}
.player-strip i:nth-child(3){background:linear-gradient(90deg,#3a2f17,#5a4a24)}

/* Présentation (maquettes) */
.deck{display:grid;gap:10px}
.deck-main{border-radius:12px;border:1px solid var(--line-2);box-shadow:0 40px 80px -30px #000}
.deck-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.deck-strip img{border-radius:6px;border:1px solid var(--line-2);opacity:.75;transition:opacity .3s,transform .4s var(--ease)}
.deck-strip img:hover{opacity:1;transform:translateY(-3px)}
.deck-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.deck-grid figure{grid-column:span 2;margin:0}
.deck-grid figure:nth-child(4),.deck-grid figure:nth-child(5){grid-column:span 3}
.deck-grid img{border-radius:12px;border:1px solid var(--line-2)}
.deck-grid figcaption{margin-top:10px;font-size:.9rem;color:var(--mute)}
.deck-grid figcaption b{font:500 .74rem var(--mono);color:var(--gold);margin-right:8px}

/* Cabinet d'avocats (exemple de design) */
.law{background:#f6f3ee;color:#1b1f2a}
.law-nav{display:flex;align-items:center;gap:14px;padding:12px 16px;font-size:.56rem;color:#5a5f6b;border-bottom:1px solid #e4ded3}
.law-nav b{margin-right:auto;font:700 .9rem/1 Georgia,serif;letter-spacing:.08em;color:#1b1f2a}
.law-nav b small{font:400 .5rem var(--sans);letter-spacing:.2em;color:#9b7838}
.law-nav i{font-style:normal;padding:5px 10px;background:#1b1f2a;color:#fff;border-radius:3px}
.law-hero{display:flex;justify-content:space-between;align-items:center;padding:26px 18px;background:linear-gradient(120deg,#1b1f2a,#2c3242);color:#fff}
.law-hero small{display:block;font:500 .48rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c9a961;margin-bottom:8px}
.law-hero strong{display:block;font:400 1.35rem/1.08 Georgia,serif}
.law-hero p{font-size:.56rem;color:#c8ccd6;margin:8px 0 12px}
.law-hero i{font-style:normal;font-size:.52rem;padding:6px 10px;border:1px solid #c9a961;color:#c9a961}
.law-seal{width:66px;height:66px;border-radius:50%;border:1px solid rgba(201,169,97,.6);display:grid;place-items:center;font:italic 1rem Georgia,serif;color:#c9a961}
.law-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.law-cards span{padding:10px;background:#fff;border:1px solid #e4ded3;font-size:.48rem;color:#6b707c;display:grid;gap:2px}
.law-cards b{font:600 .62rem Georgia,serif;color:#1b1f2a}
.law-phone{position:absolute;right:-14px;bottom:-40px;width:140px}

/* Carte Île de France */
.carte-idf{border-radius:20px;border:1px solid var(--line-2);background:radial-gradient(400px 260px at 50% 50%,#1b170e,#0f0f0e);padding:10px}
.carte-idf svg{display:block;width:100%;height:auto}

/* Filtres (réalisations, conseils) */
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:34px}
.filtre{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(245,245,240,.03);color:var(--mute);font-size:.92rem;transition:.25s}
.filtre:hover{color:var(--cream);border-color:var(--cream)}
.filtre.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.filtres-n{margin-left:auto;font:500 .78rem var(--mono);color:var(--dim)}
.gal--filtre .proj[hidden]{display:none}

/* Étude de cas */
.cas-infos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 34px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.cas-infos small{display:block;font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cas-infos b{font-weight:500}
.cas-infos .btn{margin-left:auto}
.cas-hero{max-width:980px;margin:0 auto}
.cas-texte{display:grid;grid-template-columns:220px 1fr;gap:60px}
.cas-sommaire{position:sticky;top:110px;align-self:start;display:grid;gap:10px}
.cas-sommaire a{color:var(--paper-mute);padding-left:12px;border-left:2px solid rgba(10,10,10,.12)}
.cas-sommaire a:hover{color:var(--ink);border-color:var(--gold-deep)}
.cas-corps{max-width:68ch}
.cas-corps h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:44px 0 16px}
.cas-corps h2:first-child{margin-top:0}
.cas-corps p{color:#33332f;font-size:1.06rem;line-height:1.75}
.cas-liste{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.cas-liste li{display:flex;gap:10px}.cas-liste svg{width:18px;height:18px;color:var(--gold-deep);flex:none;margin-top:4px}
.cas-note{margin-top:30px;padding:12px 16px;border-radius:12px;background:rgba(201,169,97,.14);font-size:.88rem!important}
.cas-ecrans{position:relative;max-width:900px;margin:0 auto;padding-right:120px}
.cas-ecrans .phone{position:absolute;right:0;bottom:-30px;width:180px}

/* Tarifs */
.inclus{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.inclus span{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--ink-2)}
.inclus svg{width:18px;height:18px;color:var(--gold);flex:none}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;border-radius:16px;background:#fff;border:1px solid rgba(10,10,10,.08)}
.option b{display:block;font:600 1.1rem var(--display);letter-spacing:-.02em}
.option span{font-size:.9rem;color:var(--paper-mute)}
.option em{font:500 .76rem var(--mono);font-style:normal;color:var(--gold-deep);white-space:nowrap}

/* Agence */
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.valeurs article{padding:28px;border-radius:20px;background:#fff;border:1px solid rgba(10,10,10,.08)}
.valeurs .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:var(--gold);margin-bottom:20px}
.valeurs .ico svg{width:22px;height:22px}
.valeurs h3{margin-bottom:8px}
.valeurs p{color:var(--paper-mute);font-size:.96rem}
.outils{display:flex;flex-wrap:wrap;gap:10px}
.outils span{padding:14px 22px;border-radius:999px;border:1px solid var(--line-2);font:600 1.05rem var(--display);letter-spacing:-.01em;background:var(--ink-2)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-infos{display:grid;gap:10px}
.ci-carte{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(18,18,17,.6)}
.ci-carte .ci,.f-ok .ci{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(201,169,97,.14);color:var(--gold)}
.ci-carte .ci svg,.f-ok .ci svg{width:20px;height:20px}
.ci-carte small{display:block;font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ci-carte b{display:block;font-weight:500;word-break:break-word}
.ci-carte span{font-size:.84rem;color:var(--mute)}
.contact-moi{display:flex;gap:16px;align-items:center;margin-top:26px}
.contact-moi img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:1px solid var(--line-2)}
.contact-moi p{font-size:.94rem;color:var(--mute);font-style:italic}
.contact-moi b{display:block;margin-top:6px;font-style:normal;color:var(--cream);font-weight:500;font-size:.88rem}
.formulaire{display:grid;gap:18px;padding:32px;border-radius:24px;border:1px solid rgba(201,169,97,.3);background:linear-gradient(160deg,#1a160e,var(--ink-2) 50%);box-shadow:0 40px 80px -40px #000}
.f-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-champ{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.f-champ label,.f-champ legend{font-size:.9rem;font-weight:500;padding:0}
.f-champ legend{margin-bottom:8px}
.f-champ em{color:var(--gold);font-style:normal}
.f-champ label span,.f-champ legend span{color:var(--dim);font-weight:400;font-size:.8rem;margin-left:6px}
.f-champ input,.f-champ textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(10,10,10,.5);color:var(--cream);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.f-champ textarea{resize:vertical;min-height:130px}
.f-champ input:focus,.f-champ textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,97,.2)}
.f-champ input[aria-invalid=true]{border-color:#e07a6a}
.f-err{color:#f0a090;font-size:.84rem}
.choix-liste{display:flex;flex-wrap:wrap;gap:8px}
.choix{position:relative;cursor:pointer}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font-size:.9rem;color:var(--mute);transition:.2s}
.choix input:checked+span{background:rgba(201,169,97,.16);border-color:var(--gold);color:var(--cream)}
.choix input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.formulaire .btn{justify-content:center;width:100%}
.f-note{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--dim)}
.f-note svg{width:16px;height:16px;color:var(--gold);flex:none}
.f-ok{display:flex;gap:14px;align-items:center;padding:16px;border-radius:14px;background:rgba(47,158,110,.12);border:1px solid rgba(47,158,110,.4)}
.f-ok b{display:block}.f-ok span{font-size:.86rem;color:var(--mute)}

/* Conseils et article */
.art-une{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:20px;border-radius:24px;border:1px solid var(--line);background:var(--ink-2);transition:border-color .3s}
.art-une:hover{border-color:rgba(201,169,97,.4)}
.art-img{border-radius:16px;overflow:hidden;aspect-ratio:16/9}
.art-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s var(--ease)}
.art-une:hover .art-img img,.art:hover .art-img img{transform:scale(1.04)}
.art-une h2{font-size:clamp(1.9rem,3.2vw,2.8rem);margin:14px 0}
.art-une p{color:var(--mute)}
.art-cat{font:500 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.auteur{display:flex;gap:12px;align-items:center;margin-top:26px;font-size:.84rem;color:var(--mute)}
.auteur img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.auteur b{display:block;color:var(--cream);font-weight:500}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art{display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.art:hover{border-color:rgba(201,169,97,.4);transform:translateY(-4px)}
.art .art-img{border-radius:0}
.art-txt{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.art h3{font-size:1.3rem}
.art p{color:var(--mute);font-size:.94rem}
.art .link{margin-top:auto}
.wrap--etroit{max-width:900px}
.article-tete h1{max-width:20ch}
.article-zone{padding-top:70px}
.article-grille{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px}
.art-toc{position:sticky;top:110px;align-self:start;display:grid;gap:10px}
.art-toc a{color:var(--paper-mute);font-size:.94rem;padding-left:12px;border-left:2px solid rgba(10,10,10,.12)}
.art-toc a:hover{color:var(--ink);border-color:var(--gold-deep)}
.art-toc-cta{margin-top:20px;padding:20px;border-radius:16px;background:var(--ink);color:var(--cream);display:grid;gap:6px}
.art-toc-cta span{font-size:.86rem;color:var(--mute);margin-bottom:8px}
.art-toc-cta .btn{min-height:44px;justify-content:center;font-size:.9rem}
.prose{max-width:70ch;color:#2b2b28;font-size:1.08rem;line-height:1.8}
.prose .intro{font-size:1.22rem;color:var(--ink);line-height:1.65}
.prose h2{font-size:clamp(1.7rem,2.8vw,2.2rem);margin:52px 0 16px;color:var(--ink);scroll-margin-top:110px}
.prose p{margin:0 0 18px}
.tableau{overflow-x:auto;margin:22px 0;border-radius:14px;border:1px solid rgba(10,10,10,.1);background:#fff}
.tableau table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.tableau th,.tableau td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(10,10,10,.08)}
.tableau th{font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-mute);background:#faf8f3}
.encart{display:flex;gap:14px;padding:20px;border-radius:16px;background:var(--ink);color:var(--cream);margin:26px 0}
.encart .ci{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(201,169,97,.16);color:var(--gold)}
.encart .ci svg{width:20px;height:20px}
.encart b{display:block;margin-bottom:4px}.encart p{margin:0;color:var(--mute);font-size:.98rem;line-height:1.6}
.liste-or{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.liste-or li{display:flex;gap:12px}.liste-or svg{width:18px;height:18px;color:var(--gold-deep);flex:none;margin-top:6px}
.art-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:40px;padding:26px;border-radius:20px;background:linear-gradient(140deg,#1f1a0f,#0f0f0e 60%);color:var(--cream)}
.art-cta b{display:block;font:600 1.2rem var(--display)}.art-cta span{color:var(--mute);font-size:.94rem}

/* Responsive des pages intérieures */
@media (max-width:1080px){
  .phero-vis{margin-top:24px}
  .deck-grid{grid-template-columns:1fr 1fr}.deck-grid figure,.deck-grid figure:nth-child(4),.deck-grid figure:nth-child(5){grid-column:span 1}
  .valeurs,.arts{grid-template-columns:1fr 1fr}
  .contact-grid,.art-une,.cas-texte,.article-grille{grid-template-columns:1fr}
  .cas-sommaire,.art-toc{position:static}
  .art-toc{display:none}
  .cas-sommaire{display:none}
}
@media (max-width:680px){
  .phero--court{padding:120px 0 50px}
  .kpis{width:100%}.kpis div{flex:1;min-width:0;padding:12px}
  .vis-shop{padding-bottom:200px}.vis-shop .vs-desk{width:100%}.vis-shop .vs-phone{width:110px;top:40px;right:0}.vis-shop .phero-card{width:100%}
  .brand{grid-template-columns:1fr}.br-logo,.br-carte{grid-column:auto}.br-pal i{height:80px}
  .law-phone{width:110px;right:-6px;bottom:-30px}.law-hero strong{font-size:1.05rem}.law-seal{display:none}
  .deck-grid,.valeurs,.arts,.options,.f-duo{grid-template-columns:1fr}
  .cas-infos .btn{margin-left:0}
  .cas-ecrans{padding-right:60px}.cas-ecrans .phone{width:120px}
  .formulaire{padding:22px}
  .filtres-n{width:100%;margin-left:0}
}
.cas-hero{padding:0 7%}
.law-phone{right:0}
@media (max-width:680px){.law-phone{right:4px}}
@media (max-width:820px){.law-nav span{display:none}.law-cards span:nth-child(3){display:none}.law-cards{grid-template-columns:1fr 1fr}}
.vis-shop{padding:20px 0 0}
.vis-shop .phero-card{position:relative;left:auto;right:auto;bottom:auto;width:300px;margin:-70px 0 0 auto;z-index:4}
.vis-shop .chip:nth-of-type(2){bottom:auto;top:52%;left:-24px}
@media (max-width:680px){.vis-shop{padding-bottom:0}.vis-shop .phero-card{width:100%;margin-top:20px}}
[hidden]{display:none!important}
.inbox .msg>div{min-width:0;flex:1}.inbox .msg b{overflow:hidden;text-overflow:ellipsis}.inbox .msg span{max-width:none}

/* ===== Passe responsive mobile ===== */
@media (max-width:680px){
  .sec{padding:64px 0}
  .sec-hd{margin-bottom:32px;gap:18px}
  h2{font-size:clamp(2rem,9vw,2.6rem)}
  .lead{font-size:1.02rem}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{justify-content:center}
  .proof{gap:16px;margin-top:30px}
  .hero{padding:110px 0 50px}
  .wall-wrap{height:300px;margin-top:10px}
  .wall-wrap .c2{left:0;bottom:16px}
  .nums{grid-template-columns:1fr 1fr;gap:10px;margin-top:56px}
  .nums div{padding:18px}
  .nums b{font-size:2.6rem}
  /* carrousels horizontaux */
  .steps,.reviews,.arts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--g));padding:4px var(--g) 18px;scrollbar-width:none}
  .steps::-webkit-scrollbar,.reviews::-webkit-scrollbar,.arts::-webkit-scrollbar{display:none}
  .steps>.step,.reviews>.review,.arts>.art{flex:0 0 84%;scroll-snap-align:start}
  .founder{gap:36px}
  .founder blockquote{margin:24px 0}
  .final-box{padding:32px 22px}
  .final .reassure{gap:8px 16px}
  .ft{padding:56px 0 28px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:28px}
  .ft-grid .about{grid-column:span 2}
  .ft-bottom{flex-direction:column}
  .g-score{padding:12px 16px}.g-score b{font-size:2.2rem}
  .mega{display:none}
  .faq summary{padding:18px}
  .faq .ans{padding:0 18px 18px}
  .bento{gap:12px}
  .card{padding:24px}
  .viz{margin:-6px -6px 20px}
}
@media (max-width:380px){.nums b{font-size:2.2rem}.ft-grid{grid-template-columns:1fr}.ft-grid .about{grid-column:auto}}
@media (min-width:681px) and (max-width:1080px){
  .b-cta,.b-4{grid-column:span 1}
  .prices{grid-template-columns:repeat(3,1fr);gap:10px}
  .price-card{padding:26px 20px}.price-card .amount{font-size:2.4rem}
  .reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--g));padding:4px var(--g) 18px;scrollbar-width:none}
  .reviews>.review{flex:0 0 46%;scroll-snap-align:start}
  .gal{grid-template-columns:1fr 1fr}
}

/* ===================== Visuels v5 : téléphones premium ===================== */
.m-phone{width:190px}
.m-phone .phone-view{overflow:hidden;position:relative}
.m-statut,.lock-statut{display:flex;justify-content:space-between;align-items:center;padding:13px 18px 0;font:600 .58rem var(--sans);height:30px;position:relative;z-index:3}
.lock-ico{display:flex;gap:3px;align-items:flex-end}
.lock-ico i{width:3px;background:currentColor;border-radius:1px}
.lock-ico i:nth-child(1){height:4px}.lock-ico i:nth-child(2){height:6px}.lock-ico i:nth-child(3){width:12px;height:6px;border-radius:2px}
/* Écran de verrouillage */
.lock{position:relative;height:100%;color:#fff;background:radial-gradient(120% 60% at 30% 0%,#6b5426 0%,transparent 60%),radial-gradient(90% 60% at 100% 100%,#3a2c12,transparent 70%),linear-gradient(180deg,#1d1a14,#0b0b0a);display:flex;flex-direction:column}
.lock-heure{text-align:center;margin-top:10px}
.lock-heure small{display:block;font:500 .58rem var(--sans);opacity:.8;text-transform:capitalize}
.lock-heure b{display:block;font:300 3.1rem/1 var(--sans);letter-spacing:-.04em;margin-top:2px}
.lock-notifs{display:grid;gap:6px;padding:0 8px;margin-top:auto;margin-bottom:28px}
.notif{display:flex;gap:8px;padding:9px 10px;border-radius:16px;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(10px) scale(.97);animation:notif .7s var(--ease) forwards;animation-delay:calc(.4s + var(--i)*.55s)}
.notif-app{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--grad-gold);color:var(--ink);font:700 .62rem var(--display)}
.notif-app.is-cal{background:#fff;color:#e5483d}
.notif-app svg{width:14px;height:14px}
.notif>div{min-width:0;flex:1}
.notif p{display:flex;justify-content:space-between;gap:6px;font-size:.46rem;opacity:.7;margin-bottom:1px;text-transform:uppercase;letter-spacing:.04em}
.notif p em{font-style:normal;text-transform:none;letter-spacing:0;white-space:nowrap}
.notif strong{display:block;font:600 .6rem/1.25 var(--sans)}
.notif>div>span{display:block;font-size:.54rem;opacity:.75;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lock-bas{position:absolute;bottom:7px;left:0;right:0;display:grid;place-items:center}
.lock-bas i{width:70px;height:3px;border-radius:3px;background:rgba(255,255,255,.7)}
@keyframes notif{to{opacity:1;transform:none}}
/* Mobile Novexia */
.m-novexia{background:#fff;color:#111}
.m-novexia .m-statut{color:#111}
.mn-nav{display:flex;justify-content:space-between;align-items:center;padding:8px 13px}
.mn-nav b{display:grid;font:800 .72rem/1 var(--display);letter-spacing:.02em}
.mn-nav b small{font:700 .32rem var(--sans);letter-spacing:.22em;color:#e8661d;margin-top:2px}
.mn-burger{display:grid;gap:4px}.mn-burger i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
.mn-hero{position:relative;margin:0 8px;height:46%;border-radius:16px;overflow:hidden;background:#222}
.mn-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:88% 55%;transform:scale(2.6);transform-origin:90% 55%;filter:brightness(.5) saturate(.85)}
.mn-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.75))}
.mn-hero>div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px;display:grid;gap:5px;color:#fff}
.mn-hero small{font:700 .42rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#ff9a52}
.mn-hero strong{font:800 .95rem/1.02 var(--display);letter-spacing:-.02em;margin-bottom:4px}
.mn-hero strong em{font-style:normal;color:#ff9a52}
.mn-btn{display:block;text-align:center;font:600 .5rem var(--sans);padding:7px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35)}
.mn-btn.o{background:#e8661d;border-color:#e8661d}
.mn-note{display:flex;align-items:center;gap:5px;padding:9px 13px 6px;font-size:.5rem}
.mn-note span{color:#f5a623;letter-spacing:1px}.mn-note b{font-size:.6rem}.mn-note em{font-style:normal;color:#888}
.mn-services{display:grid;gap:5px;padding:0 8px}
.mn-services span{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:10px;background:#f4f2ee;font:600 .52rem var(--sans)}
.mn-services i{width:14px;height:14px;border-radius:5px;background:#e8661d;opacity:.85}
/* Mobile Perle */
.m-shop{background:#f8f4ee;color:#1d1915}
.m-shop .m-statut{color:#1d1915}
.sh-nav{display:flex;justify-content:space-between;align-items:center;padding:6px 13px 8px}
.sh-nav b{font:600 1rem/1 Georgia,serif;letter-spacing:-.02em}
.mn-burger.is-noir i{background:#1d1915}
.sh-bag{width:18px;height:18px;border-radius:50%;background:#1d1915;color:#f8f4ee;display:grid;place-items:center;font:700 .48rem var(--sans)}
.sh-img{position:relative;margin:0 8px;height:44%;border-radius:16px;overflow:hidden}
.sh-img img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform:scale(1.7);transform-origin:62% 40%}
.sh-dots{position:absolute;bottom:8px;left:50%;translate:-50% 0;display:flex;gap:3px}
.sh-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}.sh-dots i.on{width:12px;border-radius:3px;background:#fff}
.sh-tag{position:absolute;top:8px;left:8px;font:600 .42rem var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:#fff}
.sh-info{padding:10px 13px;display:grid;gap:5px}
.sh-cat{font:500 .44rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9b7838}
.sh-info b{font:600 .8rem/1.1 var(--display);letter-spacing:-.02em}
.sh-ligne{display:flex;justify-content:space-between;align-items:center}
.sh-ligne em{font-style:normal;font:700 .78rem var(--sans)}
.sh-ligne span{font-size:.46rem;color:#d39b2a}.sh-ligne small{color:#8a7f72}
.sh-tailles{display:flex;gap:4px}
.sh-tailles span{flex:1;text-align:center;font-size:.46rem;padding:5px 0;border-radius:8px;border:1px solid #e3dccf}
.sh-tailles span.on{border-color:#1d1915;background:#1d1915;color:#fff}
.sh-cta{display:block;text-align:center;margin-top:3px;padding:9px;border-radius:999px;background:#1d1915;color:#f8f4ee;font:600 .54rem var(--sans)}
/* Mobile Laurence Paoli */
.m-paoli{background:#151310;color:#f3efe7}
.m-paoli .m-statut{color:#f3efe7}
.pa-nav{display:flex;justify-content:space-between;align-items:center;padding:6px 13px 8px}
.pa-logo{width:26px;height:26px;display:grid;place-items:center;border:1px solid #b8934e;color:#c9a961;font:italic 600 .6rem Georgia,serif}
.pa-hero{position:relative;height:56%;overflow:hidden}
.pa-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 70%;transform:scale(2.1);transform-origin:68% 75%;filter:brightness(.42)}
.pa-hero>div{position:absolute;inset:auto 0 0;padding:14px;display:grid;gap:7px;text-align:center;justify-items:center;background:linear-gradient(180deg,transparent,rgba(21,19,16,.9))}
.pa-hero small{font:500 .44rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#d8c8a4}
.pa-hero strong{font:400 1rem/1.1 Georgia,serif}
.pa-btn{font:600 .48rem var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;background:#b8934e;color:#151310}
.pa-cartes{display:grid;gap:5px;padding:10px 9px}
.pa-cartes span{display:grid;padding:8px 10px;border:1px solid rgba(201,169,97,.25);font-size:.46rem;color:#b9b2a3}
.pa-cartes b{font:400 .66rem Georgia,serif;color:#f3efe7}

/* Étape Maquettes : vrai design ouvert dans l'outil */
.sv-design{background:#1e1e1c;display:flex;flex-direction:column}
.dz-bar{display:flex;align-items:center;gap:8px;height:24px;padding:0 9px;background:#2a2a27;font:500 .52rem var(--sans);color:#bdbdb6}
.dz-dots{display:flex;gap:3px}.dz-dots i{width:6px;height:6px;border-radius:50%;background:#4a4a45}.dz-dots i:first-child{background:#c9a961}
.dz-bar b{font-weight:500;flex:1;text-align:center}
.dz-av{display:flex}.dz-av i{width:14px;height:14px;border-radius:50%;display:grid;place-items:center;font:700 .4rem var(--sans);font-style:normal;color:#0a0a0a;background:#c9a961;margin-left:-4px;border:1.5px solid #2a2a27}
.dz-av i:last-child{background:#7ab8f5}
.dz-canvas{position:relative;flex:1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:10px 10px}
.dz-frame{position:absolute;top:12px}
.dz-frame small{display:block;font:500 .42rem var(--mono);color:#8f8f88;margin-bottom:3px}
.dz-desk{left:10px;width:64%}.dz-mob{right:10px;width:22%}
.dz-site{background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 8px 20px -8px rgba(0,0,0,.7)}
.dz-desk .dz-site{outline:1.5px solid #3b82f6;outline-offset:2px}
.dz-nav{display:flex;justify-content:space-between;align-items:center;padding:3px 5px;font:800 .34rem var(--display);color:#111}
.dz-nav i{width:16px;height:5px;border-radius:2px;background:#e8661d}
.dz-hero{position:relative;height:46px;overflow:hidden;background:#222}
.dz-mob .dz-hero{height:58px}
.dz-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:88% 55%;transform:scale(2.2);transform-origin:90% 55%;filter:brightness(.5)}
.dz-hero span{position:absolute;left:5px;bottom:5px;display:grid;gap:1px;color:#fff}
.dz-hero b{font:800 .42rem/1 var(--display)}.dz-hero em{font:800 .42rem/1 var(--display);font-style:normal;color:#ff9a52}
.dz-hero u{display:block;width:20px;height:5px;border-radius:2px;background:#e8661d;margin-top:2px}
.dz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:4px;background:#141414}
.dz-stats.is-2{grid-template-columns:1fr 1fr}
.dz-stats i{height:7px;border-radius:2px;background:#2b2b2b}
.dz-cursor{position:absolute;left:46%;top:56%;display:flex;align-items:flex-start;gap:2px;color:#7ab8f5;animation:cur 6s ease-in-out infinite}
.dz-cursor svg{width:12px;height:12px}
.dz-cursor b{font:600 .42rem var(--sans);padding:2px 5px;border-radius:4px;background:#7ab8f5;color:#0a0a0a;margin-top:9px}
.dz-comment{position:absolute;left:10px;bottom:8px;display:flex;align-items:center;gap:5px;padding:4px 8px 4px 4px;border-radius:999px;background:#fff;font:500 .44rem var(--sans);color:#111;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.dz-comment i{width:13px;height:13px;border-radius:50%;background:#7ab8f5;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.38rem}

/* Ancien site Maryes (avant) */
.old2{height:calc(100% - 30px);display:flex;flex-direction:column;background:#fdfbf6;font-family:Georgia,"Times New Roman",serif;color:#444}
.o2-top{background:#6d5a7a;color:#efe6f5;font:11px Arial,sans-serif;padding:4px 10px;text-align:right}
.o2-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:3px double #c8b8d6;background:linear-gradient(#fff,#f1ebf5)}
.o2-logo{font:italic bold 20px "Brush Script MT","Segoe Script",cursive;color:#7b4f8e}
.o2-logo small{display:block;font:10px Arial,sans-serif;color:#999;font-style:normal}
.o2-menu{display:flex;gap:2px}
.o2-menu i{font:bold 9px Verdana,sans-serif;font-style:normal;color:#fff;background:linear-gradient(#9a7bb0,#6d5a7a);padding:5px 7px;border-radius:4px 4px 0 0}
.o2-slider{position:relative;height:42%;overflow:hidden;border:4px solid #fff;outline:1px solid #ddd;margin:8px 12px 6px}
.o2-slider img{width:100%;height:100%;object-fit:cover;object-position:40% 40%;filter:saturate(.55) contrast(.85) sepia(.25) blur(.4px)}
.o2-cap{position:absolute;left:10px;bottom:10px;max-width:70%;background:rgba(0,0,0,.55);color:#fff;font:bold 13px Arial,sans-serif;padding:6px 9px;text-shadow:1px 1px 2px #000}
.o2-cap small{display:block;font:11px Arial,sans-serif}
.o2-fl{position:absolute;top:50%;margin-top:-14px;width:24px;height:28px;display:grid;place-items:center;background:rgba(255,255,255,.7);color:#555;font:bold 18px Arial,sans-serif}
.o2-fl.l{left:0}.o2-fl.r{right:0}
.o2-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px}
.o2-cols div{border:1px solid #e3d9ea;background:#fff;padding:6px;font:10px/1.4 Verdana,sans-serif}
.o2-cols b{display:block;color:#7b4f8e;font:bold 11px Georgia,serif;border-bottom:1px dotted #c8b8d6;margin-bottom:3px}
.o2-cols p{margin:0 0 3px}.o2-cols u{color:#0645ad}
.o2-foot{margin-top:auto;background:#eee;font:9px Arial,sans-serif;color:#888;text-align:center;padding:5px}
.ba-lbl{font-size:.74rem;padding:6px 11px}
/* Carte e-commerce : le visuel occupe toute la hauteur libre */
.card-shop .viz{flex:1;min-height:250px;height:auto;margin-bottom:24px}
.card-shop .viz-shop .m-phone{position:absolute;left:50%;top:18px;bottom:auto;width:150px;transform:rotate(-4deg);transition:transform .8s var(--ease)}
.card-shop:hover .viz-shop .m-phone{transform:rotate(0) translateY(-6px)}
.card-shop .viz-shop .chip{top:30px;right:10px;left:auto}
.card-shop .viz-shop .chip.c-bas{top:auto;bottom:22px;right:auto;left:10px;animation-delay:-3s}
.b-main .m-phone.ms-phone{width:128px}
.b-main .m-phone .m-statut{font-size:.44rem}
.b-main .m-phone .mn-nav{padding:5px 10px}
.b-main .m-phone .mn-hero strong{font-size:.72rem}
.b-main .m-phone .mn-services span{padding:6px 7px;font-size:.42rem}
.b-main .m-phone .mn-note{padding:6px 10px 4px}
.sv-design{height:150px}
@media (max-width:680px){.card-shop .viz{min-height:300px}}
.card-shop .viz-shop .m-phone{top:16px;width:auto;max-width:180px;left:50%;translate:-62% 0}
.b-main .m-phone .mn-hero small{display:none}
.b-main .m-phone .mn-hero{height:48%}
.card-shop .viz-shop .chip.c-bas{left:auto;right:10px;bottom:30px}
/* Tarifs : ce que comprend le site */
.inclus{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.incl{position:relative;padding:24px 22px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),rgba(18,18,17,.4));overflow:hidden;transition:border-color .4s,transform .5s var(--ease)}
.incl::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,169,97,.18),transparent);transition:transform .6s var(--ease)}
.incl:hover{border-color:rgba(201,169,97,.4);transform:translateY(-4px)}
.incl:hover::after{transform:scale(1.5)}
.incl-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(201,169,97,.12);color:var(--gold);border:1px solid rgba(201,169,97,.25);margin-bottom:18px}
.incl-ico svg{width:22px;height:22px}
.incl b{display:block;font:600 1.12rem/1.2 var(--display);letter-spacing:-.02em;margin-bottom:6px}
.incl>span:last-child{font-size:.9rem;color:var(--mute);line-height:1.5}
@media (max-width:1080px){.inclus{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.inclus{grid-template-columns:1fr}}
/* Avocat : site réel de Laurence Paoli */
.vis-avocat{position:relative;padding:10px 70px 40px 0}
.vis-avocat .m-phone{position:absolute;right:0;bottom:0;width:160px}
.gal--2{grid-template-columns:1fr 1fr}
.vis-shop .vs-phone{width:160px}
@media (max-width:680px){.vis-avocat{padding-right:50px}.vis-avocat .m-phone{width:120px}.gal--2{grid-template-columns:1fr}}
.duo-phones{display:flex;gap:18px;align-items:flex-end;margin-top:44px}
.duo-phones .m-phone{width:180px}
.duo-phones .m-phone:last-child{transform:translateY(24px) rotate(3deg)}
.gal--plus .proj.is-plus{display:none}
.gal--plus.is-ouvert .proj.is-plus{display:block}
.plus-wrap{display:flex;justify-content:center;margin-top:40px}
.plus-wrap[hidden]{display:none}
@media (max-width:680px){.duo-phones .m-phone{width:46%}}

/* ===== Défilement fluide et sans glissement latéral ===== */
html,body{overflow-x:clip}
@media (max-width:1080px){
  .aurora i{animation:none;filter:blur(70px)}
  .aurora::after{display:none}
  body::after{display:none}
  .orb{animation:none}
  .chip,.notif,.hd-bar,.founder-img figcaption,.phero-card,.viz-badge{backdrop-filter:none;-webkit-backdrop-filter:none}
  .chip{background:rgba(26,26,24,.94)}
  .hd-bar{background:rgba(14,14,13,.92)}
  .notif{background:rgba(255,255,255,.16)}
  .wall-col{animation-duration:70s}
  .tile,.proj .browser,.card{transition:none}
}
@media (max-width:680px){.wall-col:nth-child(4){display:none}.wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1080px){
  .work-pin{position:relative;height:auto;padding:20px 0 0}
  .work-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--g);transform:none!important;scrollbar-width:none}
  .work-track::-webkit-scrollbar{display:none}
  .proj{scroll-snap-align:start}
  .work-progress{display:none}
}
.work .proj p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1081px) and (max-height:820px){.work .proj{width:min(500px,70vw)}.work .sec-hd{margin-bottom:28px!important}}
.inclus .incl>span{display:block;padding:0;border:0;background:none;border-radius:0}
.inclus .incl>.incl-ico{display:grid;width:44px;height:44px;border-radius:13px;background:rgba(201,169,97,.12);border:1px solid rgba(201,169,97,.25)}
.pa-hero img{object-position:12% 92%;transform:scale(2.8);transform-origin:10% 95%;filter:brightness(.38) blur(1.5px) saturate(.8)}
.split>*,.phero-grid>*,.hero-grid>*,.contact-grid>*,.founder>*,.final-box>*,.cas-texte>*,.article-grille>*{min-width:0}
@media (max-width:1080px){
  .phero-vis{padding:10px 0 0;margin-top:36px}
  .phero-vis .phero-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:20px}
  .vis-shop .phero-card,.vis-avocat .phero-card{margin-top:24px}
  .duo-phones{justify-content:center}
}
@media (max-width:680px){
  .phero{padding:120px 0 56px}
  .split{gap:40px}
  .feat article{grid-template-columns:44px 1fr;gap:14px;padding:22px 0}
  .feat .ico{width:40px;height:40px}
  .sec.final{padding-top:24px!important}
}
@media (max-width:680px){.sec[style*="padding-top"]{padding-top:40px!important}.work{padding-top:24px}}

/* Bloc « En bref » : réponse citable en haut des pages stratégiques */
.enbref{padding:clamp(48px,6vw,80px) 0}
.eb{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start;padding:clamp(26px,4vw,44px);border-radius:var(--r-l);border:1px solid var(--line-2);background:linear-gradient(150deg,rgba(201,169,97,.08),rgba(18,18,17,.6) 45%)}
.eb h2{font-size:clamp(1.7rem,2.8vw,2.4rem);margin:16px 0 18px}
.eb-txt>p:not(.eb-maj){font-size:1.04rem;line-height:1.75;color:#d9d9d2;max-width:72ch}
.eb-maj{margin-top:18px;font-size:.84rem;color:var(--dim)}
.eb-maj a{color:var(--gold)}
.eb-faits{margin:0;display:grid;gap:10px}
.eb-faits div{padding:14px 16px;border-radius:14px;background:rgba(10,10,10,.5);border:1px solid var(--line)}
.eb-faits dt{font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.eb-faits dd{margin:4px 0 0;font:600 1.02rem var(--display);letter-spacing:-.01em}
@media (max-width:1080px){.eb{grid-template-columns:1fr;gap:24px}.eb-faits{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.eb-faits{grid-template-columns:1fr}}

/* ===== v6 : titres plus mesurés ===== */
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.04}
h1{font-size:clamp(2.4rem,5vw,4.6rem);font-weight:600}
.hero h1{font-size:clamp(2.4rem,4.5vw,4.3rem)}
.phero h1{font-size:clamp(2.3rem,4.3vw,4rem)}
h2{font-size:clamp(1.95rem,3.5vw,3.3rem)}
.final h2{font-size:clamp(2.1rem,4vw,3.7rem)}
.b-main h3{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.work-end h3{font-size:2.1rem}
.words span{font-size:clamp(2rem,4.4vw,3.8rem)}
.nums b{font-size:clamp(2.4rem,4.2vw,3.7rem)}
.price-card .amount{font-size:2.8rem}
.eb h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
@media (max-width:680px){h1,.hero h1,.phero h1{font-size:clamp(2.1rem,9vw,2.6rem)}h2{font-size:clamp(1.75rem,7.6vw,2.2rem)}}
/* Accents des majuscules (É, À) jamais coupés par le masque des titres animés */
.split-words .w{padding-top:.16em;margin-top:-.16em;padding-bottom:.12em;margin-bottom:-.12em}
/* Section Réalisations épinglée : le titre n'est plus rogné en haut */
@media (min-width:1081px){
  .work-pin{justify-content:flex-start;padding:clamp(96px,13vh,130px) 0 30px}
  .work .proj{width:min(520px,38vw)}
  .work .sec-hd{margin-bottom:30px!important}
  .work-progress{margin-top:28px}
}

/* ===== v6 : fenêtre Novexia redessinée ===== */
.b-main .browser.nx{position:relative;width:100%;border-radius:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.nx{background:#fbfaf7;color:#16130f}
.nx-nav{display:flex;align-items:center;gap:13px;padding:10px 14px;font:500 .5rem var(--sans);color:#6b665e;border-bottom:1px solid #eee9e0}
.nx-nav b{display:grid;margin-right:auto;font:800 .74rem/1 var(--display);letter-spacing:.02em;color:#16130f}
.nx-nav b small{font:700 .3rem var(--sans);letter-spacing:.24em;color:#e8661d;margin-top:2px}
.nx-nav i{font-style:normal;padding:5px 9px;border-radius:6px;background:#e8661d;color:#fff;font-weight:600}
.nx-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;padding:16px 14px 12px;align-items:center}
.nx-badge{display:inline-flex;align-items:center;gap:5px;font:600 .42rem var(--sans);padding:3px 7px;border-radius:999px;background:#fff1e6;color:#c4520f}
.nx-badge i{width:5px;height:5px;border-radius:50%;background:#e8661d}
.nx-txt strong{display:block;margin:8px 0 6px;font:800 1.02rem/1.02 var(--display);letter-spacing:-.025em}
.nx-txt strong em{font-style:normal;color:#e8661d}
.nx-txt p{font-size:.48rem;line-height:1.45;color:#6b665e}
.nx-btns{display:flex;gap:5px;margin-top:9px}
.nx-btns i{font-style:normal;font:600 .44rem var(--sans);padding:6px 9px;border-radius:7px;border:1px solid #ddd5c8;color:#16130f}
.nx-btns i.o{background:#16130f;border-color:#16130f;color:#fff}
.nx-confiance{display:flex;align-items:baseline;gap:4px;margin-top:10px;font-size:.42rem;color:#8a847a}
.nx-confiance b{font:800 .62rem var(--display);color:#e8661d}
.nx-confiance small+b{margin-left:6px}
.nx-photo{position:relative;height:118px;border-radius:12px;overflow:hidden;background:#222}
.nx-photo img{width:100%;height:100%;object-fit:cover;object-position:88% 55%;transform:scale(2.2);transform-origin:90% 55%;filter:saturate(.9) brightness(.85)}
.nx-garantie{position:absolute;left:8px;bottom:8px;display:grid;padding:5px 8px;border-radius:8px;background:#fff;font-size:.38rem;color:#6b665e;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.nx-garantie b{font:800 .66rem var(--display);color:#16130f}
.nx-services{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 14px 14px}
.nx-services span{display:flex;align-items:center;gap:5px;padding:7px;border-radius:8px;background:#fff;border:1px solid #eee9e0;font:600 .42rem var(--sans)}
.nx-services i{width:10px;height:10px;border-radius:3px;background:#e8661d;opacity:.85}
.mn-note{gap:4px}.mn-note b{color:#e8661d}.mn-note em+b{margin-left:6px}

/* ===== Carte Refonte : avant / après au survol ===== */
.viz-ba2{--pos:50%;cursor:ew-resize;background:#fff}
.ba2-apres,.ba2-avant{position:absolute;inset:0}
.ba2-apres img{width:100%;height:100%;object-fit:cover;object-position:top}
.ba2-avant{clip-path:inset(0 calc(100% - var(--pos)) 0 0);transition:clip-path .08s linear;background:#fdfbf6}
.ba2-echelle{width:540px;height:350px;transform-origin:0 0;transform:scale(var(--k,.62))}
.ba2-echelle .old2{height:100%}
.ba2-ligne{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--gold);box-shadow:0 0 16px rgba(201,169,97,.9);transition:left .08s linear;z-index:2}
.ba2-ligne i{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ba2-ligne i::before,.ba2-ligne i::after{content:"";position:absolute;top:50%;margin-top:-4px;border:4px solid transparent}
.ba2-ligne i::before{left:4px;border-right-color:var(--ink)}.ba2-ligne i::after{right:4px;border-left-color:var(--ink)}
.viz-ba2 .lbl{position:absolute;bottom:10px;z-index:3;font:500 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:rgba(10,10,10,.8);color:var(--cream)}
.viz-ba2 .lbl.l{left:10px}.viz-ba2 .lbl.r{right:10px;color:var(--gold)}
.ba2-aide{position:absolute;top:10px;left:50%;translate:-50% 0;z-index:3;font:500 .6rem var(--mono);padding:4px 9px;border-radius:999px;background:rgba(10,10,10,.75);color:var(--cream);transition:opacity .4s}
.viz-ba2.is-actif .ba2-aide{opacity:0}

/* ===== Carte Identité : charte de marque premium ===== */
.viz-brand{background:radial-gradient(260px 160px at 70% 30%,rgba(201,169,97,.22),transparent 70%),radial-gradient(120% 120% at 0% 100%,#15130d,#0d0d0c 70%);perspective:900px}
.vb-spec{position:absolute;left:16px;top:14px;display:grid;gap:2px}
.vb-spec b{font:700 1.9rem/1 var(--display);letter-spacing:-.04em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.vb-spec small{font:500 .52rem/1.45 var(--mono);color:var(--dim)}
.vb-cartes{position:absolute;left:50%;top:50%;width:150px;height:90px;transform-style:preserve-3d}
.vb-carte{position:absolute;inset:0;border-radius:8px;box-shadow:0 24px 40px -14px rgba(0,0,0,.9);transition:transform 1s var(--ease);overflow:hidden}
.vb-noire{background:linear-gradient(145deg,#1c1c1a,#0b0b0a);border:1px solid rgba(201,169,97,.25);transform:translate(-30%,-62%) rotateX(18deg) rotateZ(-9deg);display:grid;place-items:center}
.vb-dorure{width:34px;height:36px;background:var(--grad-gold);-webkit-mask:url(logo-mark-clair.png) center/contain no-repeat;mask:url(logo-mark-clair.png) center/contain no-repeat;filter:drop-shadow(0 1px 0 rgba(255,255,255,.3))}
.vb-noire small{position:absolute;bottom:9px;font:600 .4rem var(--sans);letter-spacing:.3em;color:#b8934e}
.vb-noire::after,.vb-creme::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:eclat 5s ease-in-out infinite}
.vb-creme::after{animation-delay:2.5s;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%)}
@keyframes eclat{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.vb-creme{background:#f3eee3;color:#16130f;transform:translate(-62%,-28%) rotateX(18deg) rotateZ(6deg);padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.vb-creme img{width:78px;height:auto}
.vb-creme span{font-size:.4rem;line-height:1.45;color:#6b665e}
.vb-creme b{display:block;font:600 .54rem var(--display);color:#16130f}
.card:hover .vb-noire{transform:translate(-18%,-78%) rotateX(10deg) rotateZ(-4deg)}
.card:hover .vb-creme{transform:translate(-74%,-18%) rotateX(10deg) rotateZ(2deg)}
.vb-palette{position:absolute;right:14px;bottom:14px;display:flex}
.vb-palette i{width:22px;height:22px;border-radius:50%;background:var(--c);border:2px solid #121211;margin-left:-6px;box-shadow:0 4px 10px -4px rgba(0,0,0,.8)}

/* ===== Méthode : Google réaliste ===== */
.sv-google{background:#fff;padding:12px 14px;font-family:Arial,Helvetica,sans-serif}
.gg-tete{display:flex;align-items:center;gap:10px}
.gg-logo{font:700 15px/1 "Product Sans",Arial,sans-serif;letter-spacing:-.5px}
.gg-logo i{font-style:normal}
.gg-logo i:nth-child(1),.gg-logo i:nth-child(4){color:#4285f4}.gg-logo i:nth-child(2),.gg-logo i:nth-child(6){color:#ea4335}.gg-logo i:nth-child(3){color:#fbbc05}.gg-logo i:nth-child(5){color:#34a853}
.gg-barre{flex:1;display:flex;justify-content:space-between;align-items:center;height:24px;padding:0 10px;border-radius:999px;box-shadow:0 1px 5px rgba(32,33,36,.28);font-size:.6rem;color:#202124}
.gg-barre svg{width:11px;height:11px;color:#4285f4}
.gg-onglets{display:flex;gap:12px;margin:8px 0 8px 2px;font-size:.52rem;color:#5f6368;border-bottom:1px solid #ebebeb}
.gg-onglets span{padding-bottom:5px}.gg-onglets .on{color:#1a73e8;box-shadow:inset 0 -2px #1a73e8}
.gg-res{display:grid;gap:3px}
.gg-site{display:flex;align-items:center;gap:6px}
.gg-site i{width:16px;height:16px;border-radius:50%;background:#f1f3f4;display:grid;place-items:center;font:italic 700 .4rem Georgia,serif;color:#9b7838;border:1px solid #e3e3e3}
.gg-site span{display:grid;font-size:.46rem;color:#4d5156;line-height:1.25}.gg-site b{font-weight:400;color:#202124;font-size:.52rem}
.gg-res a{font-size:.72rem;color:#1a0dab;line-height:1.25}
.gg-res p{font-size:.5rem;line-height:1.4;color:#4d5156}.gg-res p b{color:#202124}
.gg-liens{display:flex;gap:5px}.gg-liens span{font-size:.46rem;padding:3px 7px;border-radius:999px;border:1px solid #dadce0;color:#1a0dab}

/* ===== Méthode : outil de design ===== */
.sv-tool{background:#1e1e1c;display:flex;flex-direction:column;font-family:var(--sans)}
.dt-bar{display:flex;align-items:center;gap:8px;height:22px;padding:0 8px;background:#2c2c29;font-size:.5rem;color:#c8c8c1}
.dt-bar b{flex:1;text-align:center;font-weight:500}
.dt-bar em{font-style:normal;font-size:.44rem;padding:2px 6px;border-radius:4px;background:#3b82f6;color:#fff}
.dt-corps{flex:1;display:grid;grid-template-columns:62px 1fr 64px;min-height:0}
.dt-calques,.dt-props{background:#252523;padding:6px;display:grid;align-content:start;gap:3px;font-size:.42rem;color:#a9a9a2}
.dt-calques small,.dt-props small{font:600 .38rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6f6f69;margin-bottom:2px}
.dt-calques .on{color:#fff;background:#3b82f633;border-radius:3px;padding:1px 3px}
.dt-props span{padding:3px 4px;border-radius:3px;background:#1c1c1a}
.dt-sw{display:flex;align-items:center;gap:3px}.dt-sw i{width:7px;height:7px;border-radius:2px;background:#e8661d}
.dt-com{display:flex;align-items:center;gap:3px;margin-top:4px;padding:3px 4px;border-radius:6px;background:#fff;color:#111;font-size:.4rem}
.dt-com i{width:10px;height:10px;border-radius:50%;background:#7ab8f5;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.32rem}
.dt-canevas{position:relative;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:9px 9px;display:grid;place-items:center;padding:8px}
.dt-frame{position:relative;width:100%}
.dt-site{background:#fbfaf7;border-radius:3px;overflow:hidden;box-shadow:0 8px 18px -8px rgba(0,0,0,.8)}
.dt-hero{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;align-items:center}
.dt-hero span{display:grid;gap:1px}
.dt-hero b{font:800 .42rem/1 var(--display);color:#16130f}.dt-hero em{font:800 .42rem/1 var(--display);font-style:normal;color:#e8661d}
.dt-hero u{display:block;width:22px;height:6px;border-radius:2px;background:#16130f;margin-top:3px}
.dt-hero img{width:100%;height:34px;object-fit:cover;object-position:88% 55%;border-radius:3px}
.dt-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 5px 5px}
.dt-cartes i{height:9px;border-radius:2px;background:#eee9e0}
.dt-sel{position:absolute;left:6px;top:31px;width:26px;height:9px;outline:1.5px solid #3b82f6;border-radius:2px}
.dt-sel::before,.dt-sel::after{content:"";position:absolute;width:4px;height:4px;background:#fff;border:1px solid #3b82f6;top:-3px;left:-3px}
.dt-sel::after{left:auto;right:-3px;top:auto;bottom:-3px}
.sv-tool .dz-cursor{left:44%;top:58%}

/* Méga menu : bloc site vitrine illustré */
.mega .main{display:flex;flex-direction:column;gap:6px;overflow:hidden;position:relative}
.mega .main .mm-ecran{margin-top:10px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 18px 30px -18px #000}
.mega .main .mm-ecran i{display:block;height:14px;background:#22221f;background-image:radial-gradient(circle at 9px 7px,#c9a961 2.5px,transparent 3px),radial-gradient(circle at 18px 7px,#444 2.5px,transparent 3px)}
.mega .main .mm-ecran img{display:block;width:100%;height:92px;object-fit:cover;object-position:top}
.mega .main ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px;font-size:.8rem;color:var(--mute)}
.mega .main li::before{content:"✓";color:var(--gold);margin-right:7px}
.mega .main .mm-pied{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px}
.mega .main .mm-pied small{margin:0}
.mega .main .mm-pied b{font:500 .8rem var(--sans);color:var(--gold)}
.b-main .browser.nx{transition:transform .6s var(--ease)}
/* v6 ajustements */
.b-main .browser.nx{width:88%}
.nx-photo img{object-position:85% 70%;transform:scale(1.7);transform-origin:85% 70%;filter:saturate(.95) brightness(.95)}
.nx-txt strong{font-size:.92rem}
.nx-hero{grid-template-columns:1.1fr .9fr}
.b-main .chip.d2{bottom:0}
.gg-barre{white-space:nowrap;overflow:hidden}
/* cartes de visite : moins de recouvrement */
.vb-cartes{width:140px;height:84px;left:54%;top:56%}
.vb-noire{transform:translate(-2%,-74%) rotateX(16deg) rotateZ(-7deg);z-index:1}
.vb-creme{transform:translate(-88%,-20%) rotateX(16deg) rotateZ(5deg);z-index:2}
.card:hover .vb-noire{transform:translate(8%,-84%) rotateX(8deg) rotateZ(-3deg)}
.card:hover .vb-creme{transform:translate(-98%,-12%) rotateX(8deg) rotateZ(2deg)}
.vb-palette{bottom:12px;right:12px}
/* outil de design : canevas plus large */
.dt-corps{grid-template-columns:52px 1fr 58px}
.dt-calques span:nth-child(n+5){display:none}
.dt-canevas{padding:6px 8px}
.dt-hero b,.dt-hero em{font-size:.38rem;white-space:nowrap}
.dt-sel{left:5px;top:auto;bottom:24px;width:24px;height:8px}
.sv-tool .dz-cursor{left:auto;right:16%;top:auto;bottom:12%}
.dt-sel{display:none}
.sv-tool .dt-hero u{background:#e8661d;outline:1.5px solid #3b82f6;outline-offset:2px}
.nx-photo img{object-position:60% 60%;transform:scale(1.25);transform-origin:60% 60%;filter:none}
.nx-nav i{white-space:nowrap}
.mega .main{align-items:stretch;text-align:left}.mega .main .mm-pied{width:100%;gap:10px}
/* v6 : notifications contenues dans l'écran */
.lock-notifs{grid-template-columns:minmax(0,1fr)}
.notif{min-width:0}
.notif strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v6 : mobile Laurence Paoli redessiné */
.m-paoli{background:linear-gradient(180deg,#14120e,#0e0d0b);display:flex;flex-direction:column}
.m-paoli .pa-nav{gap:7px;padding:4px 11px 9px;border-bottom:1px solid rgba(201,169,97,.18)}
.m-paoli .pa-logo{flex:none;width:22px;height:22px;font-size:.52rem}
.pa-nom{flex:1;display:grid;font:400 .58rem/1.1 Georgia,serif;color:#f3efe7;white-space:nowrap}
.pa-nom small{font:500 .36rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#b8934e;margin-top:2px}
.m-paoli .pa-hero{height:auto;flex:1;min-height:0;display:flex;align-items:flex-end;margin:9px 9px 0;border-radius:10px;border:1px solid rgba(201,169,97,.22)}
.m-paoli .pa-hero img{object-position:30% 60%;transform:scale(1.9);transform-origin:30% 60%;filter:brightness(.36) saturate(.7)}
.m-paoli .pa-hero>div{position:relative;inset:auto;width:100%;padding:12px 11px 13px;gap:8px;text-align:left;justify-items:start;background:linear-gradient(180deg,transparent,rgba(14,13,11,.92) 40%)}
.m-paoli .pa-hero small{display:flex;align-items:center;gap:5px;font-size:.38rem;letter-spacing:.16em;color:#c9a961}
.m-paoli .pa-hero small::before{content:"";width:12px;height:1px;background:#c9a961}
.m-paoli .pa-hero strong{font:400 .82rem/1.15 Georgia,serif}
.m-paoli .pa-hero strong em{color:#d9bf86}
.m-paoli .pa-btn{font-size:.4rem;padding:6px 10px;border-radius:2px;letter-spacing:.12em}
.m-paoli .pa-cartes{gap:0;padding:6px 11px 12px}
.m-paoli .pa-cartes span{display:flex;align-items:baseline;gap:8px;padding:6px 0;border:0;border-bottom:1px solid rgba(201,169,97,.16)}
.m-paoli .pa-cartes i{font:500 .36rem var(--mono);font-style:normal;color:#b8934e}
.m-paoli .pa-cartes b{font-size:.6rem}
/* le téléphone reste entier dans la colonne */
.vis-avocat{padding:22px 90px 30px 0}
.vis-avocat .m-phone{right:6px;bottom:-6px;width:168px}
@media (max-width:680px){.vis-avocat{padding-right:64px}.vis-avocat .m-phone{width:128px;right:0}}
.pa-motif{position:absolute;inset:0;background:radial-gradient(90% 60% at 80% 10%,rgba(201,169,97,.28),transparent 65%),repeating-linear-gradient(135deg,rgba(201,169,97,.06) 0 1px,transparent 1px 9px),#16130e}
.pa-motif::after{content:"§";position:absolute;right:10px;top:4px;font:400 3.2rem/1 Georgia,serif;color:rgba(201,169,97,.2)}
.m-paoli .pa-btn{white-space:nowrap}
/* v6 : passe responsive */
@media (max-width:680px){
  .proj-meta{flex-direction:column-reverse;align-items:flex-start;gap:6px}
  .proj-meta h3{font-size:1.4rem}
  .vis-avocat{padding:22px 70px 40px 0}
  .vis-avocat .m-phone{width:168px;right:-6px;bottom:-10px;transform:scale(.78);transform-origin:100% 100%}
  .vis-avocat .chip{left:0!important}
  .b-main .browser.nx{width:100%}
  .b-main .phone.ms-phone{width:100px;right:-10px}
  .phero-vis .chip{left:0!important}
}
@media (max-width:680px){
  .gal{grid-template-columns:minmax(0,1fr)}
  .proj{min-width:0}
  .proj-meta span{white-space:normal}
  .vis-shop{padding-bottom:30px}
  .vis-shop .vs-phone{width:128px;top:auto;bottom:-10px;right:-4px}
  .vis-shop .phero-card{margin-top:60px}
  .vis-shop .chip:nth-of-type(2){display:none}
}
@media (max-width:680px){.vis-shop .vs-phone{width:112px;top:70px;bottom:auto;right:-4px}.vis-shop .phero-card{margin-top:70px}}
@media (max-width:680px){.vis-shop .chip:nth-of-type(1){width:auto;max-width:230px;top:-14px;left:auto!important;right:0}}
@media (min-width:681px) and (max-width:1080px){
  .prices{grid-template-columns:1fr 1fr}
  .prices>:last-child{grid-column:1/-1}
  .price-card .pill{position:static;align-self:flex-start;margin-bottom:12px;order:-1}
}
@media (max-width:1080px){.price-card .btn{white-space:nowrap}}

/* ===== Pages secteur : capture et puces ===== */
.vis-secteur{position:relative;padding:22px 24px 40px 0}
.vis-secteur .browser{box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.vis-92{min-height:340px;display:grid;place-items:center;padding:30px 0 50px}
.villes-92{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:460px}
.villes-92 span{padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(245,245,240,.03);font-size:.86rem;color:var(--mute);opacity:0;animation:villeIn .6s var(--ease) forwards;animation-delay:calc(var(--i)*.07s + .3s)}
.villes-92 span:nth-child(1),.villes-92 span:nth-child(5){border-color:rgba(201,169,97,.5);color:var(--cream);background:rgba(201,169,97,.1)}
@keyframes villeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:680px){.vis-secteur{padding:22px 0 40px}.vis-secteur .chip{left:0!important}}
@media (prefers-reduced-motion:reduce){.villes-92 span{animation:none;opacity:1}}

/* Cartes de l'accueil : vraies captures dans les cadres */
.devs .browser.nx{overflow:hidden}
.devs .browser.nx>img{border-radius:0}
.devs .ms-phone{width:118px}
.viz-shop .phone{width:150px}
@media (prefers-reduced-motion:reduce){.wall-col{animation:none}}
.o2-vide{position:absolute;inset:0;background:linear-gradient(180deg,#9cc3dd 0%,#cfe3ee 45%,#7fa36b 46%,#5f8650 100%);filter:saturate(.6) sepia(.2)}
.o2-vide::after{content:"";position:absolute;left:12%;bottom:30%;width:40%;height:34%;background:#c9b48f;clip-path:polygon(0 100%,0 40%,50% 0,100% 40%,100% 100%);opacity:.8}

/* Hero : scène ordinateur + téléphone, vrais sites clients en fondu synchronisé */
.hscene{position:relative;height:560px}
.hs-halo{position:absolute;left:8%;right:-10%;top:12%;bottom:8%;background:radial-gradient(60% 55% at 55% 45%,rgba(201,169,97,.28),transparent 70%);filter:blur(30px);pointer-events:none}
.hs-laptop{position:absolute;top:56px;right:-6%;width:112%;max-width:760px}
.hs-phone{position:absolute;left:-2%;bottom:18px;width:150px;z-index:2}
.hscene .laptop-view img,.hscene .phone-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:none;transition:opacity 1.1s ease}
.hscene .laptop-view img.is-on,.hscene .phone-view img.is-on{opacity:1}
.hs-legende{position:absolute;left:calc(150px + 4%);bottom:30px;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;border-radius:999px;background:rgba(18,18,17,.82);border:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:3;min-width:270px}
.hs-legende>i{flex:none;width:8px;height:8px;border-radius:50%;background:#5fd19f;box-shadow:0 0 0 4px rgba(95,209,159,.16)}
.hs-legende span{display:none;line-height:1.25}
.hs-legende span.is-on{display:grid}
.hs-legende b{font:500 .8rem var(--mono);color:var(--cream)}
.hs-legende em{font-style:normal;font-size:.74rem;color:var(--mute)}
.hscene .c1{top:0;left:2%}
.hscene .c2{top:44%;right:-4%;animation-delay:-2s}
.hscene .c3{top:6px;right:0;animation-delay:-4s}
@media (max-width:1100px){.hs-laptop{right:-2%;width:104%}.hscene .c2{right:0}}
@media (max-width:900px){.hscene{height:auto;aspect-ratio:1/.82;margin-top:10px}.hs-laptop{top:8%;right:0;width:94%}.hs-phone{width:28%;max-width:130px;bottom:4%}.hs-legende{left:auto;right:2%;bottom:0;min-width:0}.hscene .c1{top:-2%}.hscene .c2,.hscene .c3{display:none}}
@media (max-width:900px){.hscene{padding-top:0}.hscene .c1{display:none}}
/* Bloc final : « votre site » en construction, plutôt que le site d'un autre client */
.final-squelette{position:relative;aspect-ratio:16/10;display:flex;flex-direction:column;gap:9%;padding:7% 8%;background:linear-gradient(160deg,#16160f,#0e0e0d);overflow:hidden}
.final-squelette::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(201,169,97,.10) 50%,transparent 70%);transform:translateX(-100%);animation:fsBalayage 2.8s ease-in-out infinite}
@keyframes fsBalayage{to{transform:translateX(100%)}}
.final-squelette .fs-nav{display:flex;gap:6%;align-items:center}
.final-squelette .fs-nav i{width:9%;height:6px;border-radius:4px;background:#2b2b28}
.final-squelette .fs-nav b{margin-left:auto;width:16%;height:12px;border-radius:999px;background:rgba(201,169,97,.55)}
.final-squelette .fs-titre{font:600 clamp(1rem,2.4vw,1.6rem)/1.05 var(--display);letter-spacing:-.02em;color:var(--cream)}
.final-squelette .fs-titre em{font-style:normal;color:var(--gold)}
.final-squelette .fs-ligne{height:7px;width:70%;border-radius:4px;background:#2b2b28}
.final-squelette .fs-ligne.court{width:46%;margin-top:-6%}
.final-squelette .fs-btn{width:24%;height:16px;border-radius:999px;background:var(--gold)}
.final-squelette .fs-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;margin-top:auto}
.final-squelette .fs-cartes i{aspect-ratio:4/3;border-radius:8px;background:#1f1f1c;border:1px solid #2b2b28}
@media (prefers-reduced-motion:reduce){.final-squelette::after{animation:none}}
/* Étude de cas : la page complète du site client défile au survol */
.browser--defile{position:relative}
.browser--defile .defile{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
.browser--defile .defile img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 0;transition:object-position 9s cubic-bezier(.45,0,.25,1)}
.browser--defile:hover .defile img,.browser--defile:focus-within .defile img{object-position:50% 100%;transition-duration:9s}
.defile-aide{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:rgba(10,10,10,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 .72rem var(--mono);letter-spacing:.04em;color:var(--cream);white-space:nowrap;pointer-events:none;transition:opacity .4s}
.browser--defile:hover .defile-aide{opacity:0}
@media (hover:none){.defile-aide{display:none}.browser--defile .defile img{animation:defileAuto 14s ease-in-out 1s infinite alternate}}
@keyframes defileAuto{0%,12%{object-position:50% 0}88%,100%{object-position:50% 100%}}
@media (prefers-reduced-motion:reduce){.browser--defile .defile img{transition:none;animation:none}}
/* FAQ animée */
.faq-corps{overflow:hidden}
.faq summary,details.faq-bloc summary{transition:color .3s}
.faq details:hover summary{color:var(--gold-hi)}
.faq details{transition:border-color .35s,background-color .35s,box-shadow .45s}
.faq details[open]{background:linear-gradient(180deg,rgba(201,169,97,.06),var(--ink-2) 60%);box-shadow:0 18px 40px -28px rgba(201,169,97,.35)}
.faq details.is-fermeture{border-color:var(--line);background:var(--ink-2);box-shadow:none}
.faq details.is-fermeture summary i{background:transparent;border-color:var(--line-2)}
.faq details.is-fermeture summary i::before,.faq details.is-fermeture summary i::after{background:var(--gold)}
.faq details.is-fermeture summary i::after{rotate:90deg}

/* Icônes : tuiles sculptées (liseré or en dégradé, reflet, icône deux tons), plus une signature qu'une pastille générique */
.feat .ico,.valeurs .ico,.ico{position:relative;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:var(--gold-hi);
  background:radial-gradient(120% 120% at 30% 15%,#2a2618 0%,#141310 45%,#0b0b0a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -10px 18px -10px rgba(201,169,97,.35),0 14px 28px -16px rgba(10,10,10,.65);
  isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.feat .ico::before,.valeurs .ico::before,.ico::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,rgba(230,203,140,.95),rgba(184,147,78,.25) 45%,rgba(230,203,140,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.feat .ico::after,.valeurs .ico::after,.ico::after{content:"";position:absolute;left:18%;right:18%;top:6%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent);pointer-events:none}
.feat .ico svg,.valeurs .ico svg,.ico svg{position:relative;z-index:1;width:26px;height:26px;filter:drop-shadow(0 2px 6px rgba(201,169,97,.35))}
.feat article:hover .ico,.valeurs>*:hover .ico,.ico:hover{transform:translateY(-3px) rotate(-3deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -12px 20px -10px rgba(201,169,97,.5),0 20px 34px -16px rgba(201,169,97,.45)}
.feat article{grid-template-columns:64px 1fr}
@media (max-width:680px){.feat .ico,.ico{width:46px;height:46px;border-radius:13px}.feat .ico svg,.ico svg{width:22px;height:22px}.feat article{grid-template-columns:52px 1fr}}
@media (prefers-reduced-motion:reduce){.feat .ico,.valeurs .ico,.ico{transition:none}}
/* Avis : cartes plus éditoriales, et renvoi vers Google tant qu'aucun avis n'est affiché */
.review{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(201,169,97,.05),var(--ink-2) 40%)}
.review-guillemet{position:absolute;right:22px;top:6px;font:700 7rem/1 var(--display);color:rgba(201,169,97,.14);pointer-events:none}
.review p{position:relative;font-size:1.02rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.review .stars{letter-spacing:2px}
.reviews-vide{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:28px 32px;border-radius:var(--r-m);border:1px solid var(--line-2);background:linear-gradient(120deg,rgba(201,169,97,.08),var(--ink-2) 55%)}
.reviews-vide .g{flex:none;width:44px;height:44px}
.reviews-vide div{flex:1;min-width:220px}
.reviews-vide b{font:600 1.6rem var(--display);letter-spacing:-.02em;margin-right:10px}
.reviews-vide p{margin-top:6px;color:var(--mute)}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}

/* ===================== Appareils v4 : téléphone fin, cadre titane ===================== */
.phone{position:relative;width:170px;height:auto;aspect-ratio:auto;padding:3.1%;border:2px solid transparent;border-radius:15.5%/7.45%;
  background:linear-gradient(#070707,#070707) padding-box,linear-gradient(140deg,#e9e4d6 0%,#8c877c 22%,#3b3934 48%,#77736a 70%,#d6d0c1 100%) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.08),0 34px 60px -26px rgba(0,0,0,.75),0 14px 26px -16px rgba(0,0,0,.55)}
.phone::before{content:"";position:absolute;z-index:3;top:2.5%;left:50%;width:27%;height:auto;aspect-ratio:3.3;margin:0;transform:translateX(-50%);border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone::after{content:"";position:absolute;z-index:-1;right:-4px;top:22%;width:2px;height:10%;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#55524b,#b9b3a5)}
.phone-view{position:relative;height:auto;aspect-ratio:390/844;border-radius:13%/6%;overflow:hidden;background:#000;isolation:isolate}
.phone-view>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.phone-view::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 28%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}

/* Accueil, carte « Création de site vitrine » : ordinateur et téléphone posés côte à côte */
.vscene{position:relative;align-self:center;padding:62px 0 34px;isolation:isolate}
.vs-halo{position:absolute;z-index:-1;inset:8% -6% -4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,169,97,.22),rgba(201,169,97,0));filter:blur(8px)}
.vscene .vs-bureau{position:relative;width:84%;margin:0;border-radius:12px;overflow:hidden;transform:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 70px -32px rgba(0,0,0,.9);transition:transform .8s var(--ease)}
.vscene .vs-bureau>img{display:block;width:100%;height:auto;border-radius:0}
.vscene .vs-mobile{position:absolute;right:0;bottom:6px;left:auto;top:auto;width:29%;max-width:160px;transform:none;transition:transform .8s var(--ease)}
.vscene .chip{padding:9px 14px 9px 9px;font-size:.78rem;animation:none}
.vscene .chip .ci{width:30px;height:30px;border-radius:9px}
.vscene .vs-c1{top:0;left:0;right:auto;bottom:auto}
.vscene .vs-c2{bottom:0;left:9%;right:auto;top:auto}
.b-main:hover .vs-bureau{transform:translateY(-4px)}
.b-main:hover .vs-mobile{transform:translateY(-10px)}
@media (max-width:680px){
  .vscene{padding:58px 0 40px}
  .vscene .vs-bureau{width:88%}
  .vscene .vs-mobile{width:30%}
  .vscene .vs-c2{left:0}
}

/* Tailles des autres téléphones avec le nouveau cadre */
.card-shop .viz-shop .m-phone{width:150px;max-width:none;left:50%;translate:-50% 0}
.viz-shop .chip{z-index:4}
/* bordure fine proportionnelle au téléphone : la marge en % se calcule sur la largeur du téléphone */
.phone{padding:0}
.phone .phone-view{margin:3.4%;border-radius:12.5%/5.8%}