/* Direction « Luxe Gen Z » : campagne de maison de mode appliquée à un logiciel.
   Fond clair, noir profond, une seule couleur forte : le bleu K.D.S (boutons et 2-3 accents). Archivo condensé + Archivo large fin. */
:root{
  --os:#F4F3EF;        /* fond, os froid (pas crème chaude) */
  --os-2:#E3E1DB;      /* filets, aplats secondaires */
  --papier:#FFFFFF;    /* cartes claires */
  --noir:#0B0B0D;
  --encre:#26262B;
  --gris:#5F5E65;
  --klein:#0146FD;     /* signature */
  --klein-2:#8EA6FF;
  --chrome:linear-gradient(100deg,#6E7078 0%,#F4F5F7 18%,#9A9CA4 32%,#FFFFFF 47%,#5E6068 63%,#E9EAEE 80%,#8C8E96 100%);
  --f-cond:"KDS Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-sans:"KDS Archivo","Helvetica Neue",Arial,sans-serif;
  --f-serif:"KDS Bodoni","Bodoni 72","Didot",Georgia,serif;
  --f-mono:"KDS Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,3.2vw,44px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--os);color:var(--noir);font:16px/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--klein);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
.it{font-family:var(--f-sans);font-style:normal;font-weight:300;font-stretch:125%;text-transform:none;letter-spacing:-.035em}
.cond{font-family:var(--f-cond);font-stretch:62%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.86}
.mono{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.wrap{padding-inline:var(--gut)}

@keyframes sheen{to{background-position:-200% 0}}

/* Bandeau défilant */
.ticker{background:var(--noir);color:var(--os);overflow:hidden;white-space:nowrap;height:34px;display:flex;align-items:center}
.ticker-track{display:inline-flex;gap:42px;padding-left:42px;animation:tick 38s linear infinite}
.ticker span{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.ticker b{color:#fff;font-weight:500}
@keyframes tick{to{transform:translateX(-50%)}}

/* Navigation */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;border-bottom:1px solid var(--noir);position:sticky;top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--os) 90%,transparent);backdrop-filter:blur(14px);z-index:40}
.nav-l,.nav-r{display:flex;gap:26px;align-items:center}
.nav-r{justify-content:flex-end}
.nav a{text-decoration:none;font:500 13px var(--f-sans);letter-spacing:.01em}
.nav-l a:hover{text-decoration:underline;text-underline-offset:5px}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1}
.brand b{font:800 30px/1 var(--f-cond);font-stretch:62%;letter-spacing:.02em}
.brand small{font:500 9px var(--f-mono);letter-spacing:.32em;margin-top:5px}
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 24px;border-radius:999px;font:600 14px var(--f-sans);text-decoration:none;border:1.5px solid var(--noir);transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-noir{background:var(--klein);border-color:var(--klein);color:#fff}
.btn-noir:hover{background:var(--noir);border-color:var(--noir)}
.btn-line{background:transparent;color:var(--noir)}
.btn-line:hover{background:var(--noir);color:var(--os)}
.btn-sm{height:40px;padding:0 18px;font-size:13px}
.arr{font-family:var(--f-mono)}
@media (max-width:860px){.nav{grid-template-columns:auto 1fr}.nav-l{display:none}.brand{align-items:flex-start}.nav-r .login{display:none}}

/* Hero */
section.hero{padding-block:clamp(28px,4vw,56px) 0;position:relative}

.h-title{font-size:clamp(4.2rem,15.2vw,15.5rem);display:grid;gap:.04em}
.h-line{display:flex;align-items:center;gap:.12em;flex-wrap:nowrap;white-space:nowrap}
.h-line .it{color:var(--klein);font-size:.66em;line-height:.9;padding-right:.04em}
.capsule{display:inline-block;width:1.9em;height:.74em;border-radius:999px;background:var(--noir);position:relative;overflow:hidden;flex:none;transform:translateY(-.02em)}
.capsule i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7FA0FF,var(--klein) 45%,#0030B8 75%);filter:blur(.5px)}
.capsule i:nth-child(1){width:.5em;height:.5em;top:.12em;left:.18em;animation:cap1 6s ease-in-out infinite}
.capsule i:nth-child(2){width:.36em;height:.36em;top:.19em;left:.74em;animation:cap2 7.5s ease-in-out infinite}
.capsule i:nth-child(3){width:.44em;height:.44em;top:.15em;left:1.22em;animation:cap3 6.8s ease-in-out infinite}
.capsule::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 .03em .06em rgba(255,255,255,.18)}
@keyframes cap1{50%{transform:translate(.42em,.02em) scale(.82)}}
@keyframes cap2{50%{transform:translate(-.3em,-.04em) scale(1.25)}}
@keyframes cap3{50%{transform:translate(-.36em,.03em) scale(.9)}}
.capsule-k{display:inline-block;width:.74em;height:.74em;border-radius:50%;background:var(--klein);flex:none;position:relative}
.capsule-k::after{content:"";position:absolute;inset:22%;border-radius:50%;border:.035em solid var(--os)}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);gap:22px;justify-content:start}
.hero-facts div{display:grid;gap:4px}
.hero-facts b{font:800 34px/1 var(--f-cond);font-stretch:62%}
.hero-facts span{font:500 11px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);max-width:16ch}
.seal{width:clamp(112px,11vw,150px);height:auto;color:var(--noir);flex:none}
.seal .ring{transform-origin:100px 100px;animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1000px){.seal{position:absolute;right:var(--gut);top:clamp(70px,14vw,130px)}}
@media (max-width:600px){.h-title{font-size:clamp(3rem,17vw,6rem)}.hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hero-facts b{font-size:28px}.seal{width:92px;top:auto;bottom:auto;position:static;justify-self:end;margin-top:-8px}}

/* Section commune */
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-top h2{font-size:clamp(3rem,8vw,7.4rem)}
.sec-top p{max-width:46ch;color:var(--encre);justify-self:end}
@media (max-width:800px){.sec-top{grid-template-columns:1fr}.sec-top p{justify-self:start}}

/* Lookbook */

/* Look 01 : Maison El Finâq */

.gift{aspect-ratio:1;position:relative;background:var(--c,#111);border-radius:2px;box-shadow:inset 0 -14px 20px rgba(0,0,0,.12)}
.gift::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:9%;transform:translateX(-50%);background:var(--r,#EFE9DF)}
.gift::after{content:"";position:absolute;left:0;right:0;top:50%;height:9%;transform:translateY(-50%);background:var(--r,#EFE9DF)}
.gift.lid{box-shadow:inset 0 10px 0 rgba(255,255,255,.12),inset 0 -14px 20px rgba(0,0,0,.12)}
/* Look 02 : streetwear */

/* Look 03 : beauté */

/* Sommaire des modules */

.tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1px solid var(--noir);border-radius:999px;font:500 11px var(--f-mono);letter-spacing:.04em;white-space:nowrap;background:var(--papier)}
.tag.k{background:var(--klein);color:#fff;border-color:var(--klein)}
.tag.n{background:var(--noir);color:var(--os)}

/* L'atelier : fiche technique annotée */

.mock{background:#F2F1EC;color:#0B0B0D;border-radius:10px;overflow:hidden;box-shadow:0 40px 120px rgba(36,51,255,.25);min-width:0}

/* Miniature du tableau de bord (reprend l'écran réel) */
.m-mast{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #CFCCC4}
.m-mast .ms{font:600 15px var(--f-sans);text-align:center}
.m-nav{display:flex;gap:16px;padding:0 16px;border-bottom:1px solid #CFCCC4;overflow:hidden;white-space:nowrap}
.m-nav span{font:800 12px/1 var(--f-cond);font-stretch:62%;letter-spacing:.06em;padding:10px 0;color:#62616A}
.m-nav span.on{color:#0B0B0D;box-shadow:inset 0 -2px 0 var(--klein)}
.m-body{padding:16px;display:grid;gap:14px}
.m-hero{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));border-top:1px solid #0B0B0D;border-bottom:1px solid #CFCCC4}
.m-hero>div{padding:12px 12px 12px 0;display:grid;gap:3px;min-width:0}
.m-hero>div+div{padding-left:12px;border-left:1px solid #CFCCC4}
.m-hero small{font:500 8.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#68676E}
.m-hero b{font:800 clamp(18px,2.4vw,30px)/1 var(--f-cond);font-stretch:62%}
.m-hero b.big{font-size:clamp(28px,4.2vw,54px)}
.m-hero em{font:500 9px var(--f-mono);color:#16794A;font-style:normal}
.m-chart svg{width:100%;height:auto;display:block}
.m-tix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.m-tix div{background:#fff;border-radius:6px;padding:10px;display:grid;gap:4px;font-size:10px;position:relative;border:1px solid #DCD9D1}
.m-tix div::before{content:"";position:absolute;left:-1px;right:-1px;top:30px;border-top:1.5px dashed #CFCCC4}
.m-tix b{font:500 10px var(--f-mono)}
.m-tix span:last-child{margin-top:10px;color:#68676E}
@media (max-width:640px){.m-hero{grid-template-columns:1fr 1fr}.m-hero>div:nth-child(3){border-left:0;padding-left:0}.m-tix{grid-template-columns:1fr 1fr}}

/* Calendrier des 14 jours */

.cal-note{margin-top:14px;font-size:13px;color:var(--gris)}

/* Manifeste */
.manif{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;border-top:1px solid var(--noir);border-bottom:1px solid var(--noir);padding-block:clamp(40px,6vw,80px)}
.manif .zero{color:var(--klein);font:800 clamp(9rem,26vw,24rem)/.78 var(--f-cond);font-stretch:62%;letter-spacing:-.04em}
.manif h2{font:300 expanded clamp(2rem,4.4vw,4rem)/1.02 var(--f-sans);letter-spacing:-.04em;max-width:15ch;text-wrap:balance}
.manif p{margin-top:20px;max-width:48ch;color:var(--encre)}
@media (max-width:760px){.manif{grid-template-columns:1fr}}

/* Tarifs : étiquettes tissées */
.labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:start}
.label{background:var(--papier);border-radius:3px;padding:10px;box-shadow:0 1px 0 var(--noir),0 18px 40px rgba(11,11,13,.08);position:relative}
.label-in{border:1.5px dashed #9F9DA4;border-radius:2px;padding:24px 22px 22px;display:grid;gap:18px}
.label.feat{background:var(--noir);color:var(--os)}
.label.feat .label-in{border-color:#55545B}
.label.feat .muted{color:#A9A8AE}
.label-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.label h3{font:800 40px/.9 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font:800 clamp(64px,7vw,92px)/.8 var(--f-cond);font-stretch:62%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price span{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--gris)}
.label ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.label li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.label li::before{content:"✳";color:var(--klein);font-size:12px;line-height:1.7}
.label.feat li::before{color:var(--klein-2)}
.label .setup{font:500 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;border-top:1px solid currentColor;padding-top:12px;opacity:.85}
.label .btn{justify-content:center}
.label.feat .btn{background:var(--klein);color:#fff;border-color:var(--klein)}
.label.feat .btn:hover{background:var(--os);color:var(--noir);border-color:var(--os)}
.licence{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--noir);padding-top:16px;font-size:14px}
@media (max-width:900px){.labels{grid-template-columns:1fr}}

/* Questions */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px)}
.faq h2{font-size:clamp(3rem,7vw,6rem)}
.qa{border-top:1px solid var(--noir)}
.qa details{border-bottom:1px solid var(--noir)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:16px;padding:22px 0;font:500 clamp(1.15rem,1.8vw,1.45rem)/1.25 var(--f-sans);letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:400 26px/1 var(--f-mono);transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 0 24px;max-width:60ch;color:var(--encre)}
@media (max-width:800px){.faq{grid-template-columns:1fr}}

/* Final */
.final{background:var(--klein);color:#fff;overflow:hidden;position:relative}
.final h2{font-size:clamp(4.5rem,17vw,17rem);line-height:.82}
.final h2 .it{font-size:.5em;color:#fff}
.final-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-top:clamp(24px,4vw,48px)}
.final-row p{max-width:44ch;color:#DADDFF}
.final .btn{background:#fff;color:var(--noir);border-color:#fff}
.final .btn:hover{background:var(--noir);color:#fff;border-color:var(--noir)}
.final .seal{color:#fff;width:clamp(110px,12vw,160px)}

/* Pied */
footer{background:var(--noir);color:#A9A8AE;padding-top:64px;overflow:hidden}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px;font-size:14px}
.foot h4{margin:0 0 12px;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--os)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none}.foot a:hover{color:#fff}
.foot-word{font:800 clamp(8rem,47vw,46rem)/.72 var(--f-cond);font-stretch:62%;color:var(--os);margin-top:56px;letter-spacing:-.02em;white-space:nowrap;transform:translateY(12%)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:20px;border-top:1px solid #2A2A30;margin-top:40px}
@media (max-width:800px){.foot{grid-template-columns:1fr 1fr}}

/* Liens entre maquettes */

/* ───── Pages intérieures ───── */
.nav-l a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.phero{padding-block:clamp(36px,5vw,72px) clamp(36px,5vw,64px);display:grid;gap:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--noir)}
.phero-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.phero h1{font-size:clamp(3.8rem,11.5vw,11.5rem)}
.phero h1 .it{font-size:.66em}
.phero .lede{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:52ch;color:var(--encre)}
.phero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.list-star{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.list-star li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.list-star li::before{content:"✳";color:var(--klein);font-size:12px;line-height:1.75}
.toggle{display:inline-flex;border:1.5px solid var(--noir);border-radius:999px;padding:3px;gap:2px;background:var(--papier)}
.toggle button{border:0;background:transparent;height:38px;padding:0 18px;border-radius:999px;font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--noir);cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--noir);color:var(--os)}
.toggle em{font-style:normal;color:var(--klein)}
.toggle button[aria-pressed="true"] em{color:var(--klein-2)}
.sample{display:inline-block;font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:1px dashed var(--gris);color:var(--gris);border-radius:3px;padding:3px 7px}

.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--noir)}
.trust div{padding:22px 20px 22px 0;display:grid;gap:10px;align-content:start}
.trust div+div{padding-left:20px;border-left:1px solid var(--os-2)}
.trust b{font:800 30px/.92 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.trust p{color:var(--encre);font-size:15px}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr}.trust div:nth-child(3){padding-left:0;border-left:0}.trust div:nth-child(n/**/+3){border-top:1px solid var(--os-2)}}
@media (max-width:520px){.trust{grid-template-columns:1fr}.trust div{padding-left:0!important;border-left:0!important}.trust div+div{border-top:1px solid var(--os-2)}}
.legal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-block:clamp(40px,6vw,80px) clamp(72px,10vw,140px)}
.legal nav{position:sticky;top:110px;align-self:start;display:grid;border-top:2px solid var(--noir)}
.legal nav a{padding:11px 0;border-bottom:1px solid var(--os-2);text-decoration:none;font:800 19px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.legal article{display:grid;gap:18px;max-width:70ch;color:var(--encre)}
.legal h2{font:800 clamp(34px,4vw,52px)/.9 var(--f-cond);font-stretch:62%;text-transform:uppercase;color:var(--noir);margin-top:28px;scroll-margin-top:110px}
.legal h3{font:600 17px var(--f-sans);color:var(--noir)}
.legal dl{display:grid;grid-template-columns:200px 1fr;gap:8px 20px;margin:0}
.legal dt{font:500 11px/1.8 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.legal dd{margin:0}
.todo-fill{background:#FFE9A8;padding:0 4px}
@media (max-width:860px){.legal{grid-template-columns:1fr}.legal nav{position:static}.legal dl{grid-template-columns:1fr}}

/* Logo officiel K.D.S */
.brand{flex-direction:row;align-items:center;gap:12px}
.brand-sym{width:25px;height:auto;display:block}
.brand-txt{display:grid;gap:5px;justify-items:start}
.brand-sig{width:72px;height:auto;display:block}
.brand small{margin-top:0;font:500 7.5px/1 var(--f-mono);letter-spacing:.26em}
.foot-word{transform:none;margin-top:56px;line-height:0}
.foot-word{padding-inline:var(--gut)}
.foot-word img{display:block;width:100%;height:auto;transform:translateY(16%)}
@media (max-width:860px){.brand small{display:none}}

/* ───── Marketing : problèmes, profils, calculateur, appel à l'action mobile ───── */
.micro{margin-top:12px;font-size:13px;color:var(--gris)}
.pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pain{background:var(--papier);border:1px solid var(--os-2);border-radius:6px;padding:22px 20px;display:grid;gap:12px;align-content:start;position:relative}
.pain .mono{color:var(--gris)}
.pain b{font:600 clamp(1.15rem,1.6vw,1.4rem)/1.2 var(--f-sans);letter-spacing:-.02em}
.pain p{color:var(--encre);font-size:15px}

.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--noir)}
.who div{padding:22px 20px 22px 0;display:grid;gap:10px;align-content:start}
.who div+div{padding-left:20px;border-left:1px solid var(--os-2)}
.who b{font:800 clamp(26px,2.4vw,32px)/.95 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.who p{color:var(--encre);font-size:15px}
@media (max-width:1000px){.pains,.who{grid-template-columns:repeat(2,minmax(0,1fr))}.who div:nth-child(3){padding-left:0;border-left:0}.who div:nth-child(n/**/+3){border-top:1px solid var(--os-2)}}
@media (max-width:560px){.pains,.who{grid-template-columns:minmax(0,1fr)}.who div{padding-left:0!important;border-left:0!important}.who div+div{border-top:1px solid var(--os-2)}}
.perday{display:block;margin-top:-8px;font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.calc{margin-top:26px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px 28px;background:var(--papier);border:1px solid var(--os-2);border-radius:6px;padding:clamp(18px,2.4vw,28px);align-items:center}
.calc-in{display:grid;gap:10px}
.calc label{display:flex;justify-content:space-between;gap:12px;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.calc output{color:var(--noir);font:800 20px/1 var(--f-cond);font-stretch:62%;letter-spacing:0}
.calc input[type=range]{width:100%;accent-color:var(--klein);margin:0 0 10px}
.calc-out{display:grid;gap:6px;border-left:2px solid var(--noir);padding-left:22px}
.calc-out b#c-res{font:800 clamp(54px,6vw,78px)/.85 var(--f-cond);font-stretch:62%;color:#B42318;font-variant-numeric:tabular-nums}
.calc-out span:last-child b{color:var(--klein)}
.calc-note{grid-column:1/-1;font-size:12.5px;color:var(--gris)}
@media (max-width:760px){.calc{grid-template-columns:minmax(0,1fr)}.calc-out{border-left:0;border-top:2px solid var(--noir);padding:16px 0 0}}
.sticky-cta{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;display:none;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;background:var(--klein);color:#fff;text-decoration:none;font:600 15px var(--f-sans);box-shadow:0 14px 34px rgba(1,70,253,.35)}
@media (max-width:760px){.sticky-cta:not([hidden]){display:inline-flex;right:74px}}
@media (max-width:600px){.h-title{font-size:clamp(2.6rem,15vw,5rem)}.h-line{white-space:normal;flex-wrap:wrap}}
.nav-l{gap:22px}.nav-l a{white-space:nowrap}

.h-title{padding-bottom:.12em}

/* ===== V11 · Visuel : téléphone, récit au défilement, icônes, photos ===== */
.sec{padding-block:clamp(88px,12vw,176px)}
section.hero{padding-block:clamp(36px,5vw,72px);border-bottom:1px solid var(--noir);overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,96px);align-items:center}
.hero-main{display:grid;gap:18px;justify-items:start;min-width:0}
.hero .h-title{font-size:clamp(3rem,7.6vw,8.6rem);margin-bottom:clamp(8px,1.5vw,20px)}
.hero .lede{font-size:clamp(1.05rem,1.35vw,1.25rem);max-width:46ch;color:var(--encre)}
.hero .lede b{color:var(--noir)}
.hero .micro{margin-top:-6px}
.hero-facts{margin-top:clamp(10px,2vw,26px);padding-top:20px;border-top:1px solid var(--os-2);gap:clamp(22px,3.4vw,48px)}
.hero-facts span{font:500 13px/1.35 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--gris)}
.hero-phone{position:relative;padding:12px 46px;justify-self:center}
.hero-phone::before{content:"";position:absolute;inset:8% -6% 4%;background:radial-gradient(closest-side,rgba(1,70,253,.22),rgba(1,70,253,0));filter:blur(10px);z-index:-1}

/* Téléphone */
.phone{--w:clamp(250px,23vw,330px);width:var(--w);aspect-ratio:9/19.3;border-radius:calc(var(--w)*.165);background:#0B0B0D;padding:calc(var(--w)*.032);position:relative;
  box-shadow:inset 0 0 0 1.5px #34343A,inset 0 0 0 4px #0B0B0D,0 50px 90px -30px rgba(11,11,13,.45),0 22px 40px -22px rgba(1,70,253,.35)}
.phone::before{content:"";position:absolute;right:-3px;top:24%;width:3px;height:11%;border-radius:0 2px 2px 0;background:#24242A}
.phone-scr{position:relative;height:100%;border-radius:calc(var(--w)*.135);overflow:hidden;background:#F6F3EE;color:#111;font-size:calc(var(--w)/30)}
.phone-isl{position:absolute;top:.9em;left:50%;transform:translateX(-50%);width:7.6em;height:2.2em;background:#000;border-radius:2em;z-index:8}
.sbar{position:relative;z-index:7;display:flex;justify-content:space-between;align-items:center;padding:1.15em 2.2em .5em 2.6em;font:600 1.05em/1 var(--f-sans)}
.sb-i{display:flex;align-items:end;gap:.16em}
.sb-i i{width:.26em;background:currentColor;border-radius:.06em}
.sb-i i:nth-child(1){height:.35em}.sb-i i:nth-child(2){height:.5em}.sb-i i:nth-child(3){height:.65em}.sb-i i:nth-child(4){height:.8em}
.sb-i em{width:1.9em;height:.9em;border:.1em solid currentColor;border-radius:.28em;margin-left:.4em;position:relative;background:linear-gradient(90deg,currentColor 72%,transparent 72%) content-box;padding:.1em}

/* Notification */
.notif{position:absolute;z-index:9;top:3.7em;left:.7em;right:.7em;display:grid;grid-template-columns:3.1em minmax(0,1fr);gap:.85em;align-items:center;padding:.95em 1.05em;border-radius:1.7em;
  background:rgba(250,250,252,.86);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 .8em 2.2em rgba(11,11,13,.22);
  transform:translateY(-140%);opacity:0;transition:transform .7s cubic-bezier(.2,.9,.25,1.15),opacity .45s}
.notif.show{transform:none;opacity:1}
.notif-ic{width:3.1em;height:3.1em;border-radius:.75em;background:var(--klein);display:grid;place-items:center}
.notif-ic img{width:46%;height:auto}
.notif-t{display:grid;gap:.12em;min-width:0;font:400 1em/1.25 var(--f-sans)}
.notif-t>span:first-child{display:flex;justify-content:space-between;font-size:.86em;color:#55545A}
.notif-t>span:first-child b{font-weight:600;letter-spacing:.04em;color:#111}
.notif-t em{font-style:normal}
.notif-t>b{font-weight:650;font-size:1.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-t>span:last-child{color:#3A3A40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Boutique dans le téléphone (identité de la cliente) */
.ps-shop{position:absolute;inset:0;padding-top:3.2em;display:grid;grid-template-rows:auto auto auto 1fr}
.ps-head{display:flex;justify-content:space-between;align-items:center;padding:.9em 1.5em;border-bottom:1px solid #DDD5C8}
.ps-head b{font:400 1.05em var(--f-serif);letter-spacing:.3em}
.ps-burger{display:grid;gap:.3em;width:1.3em}.ps-burger i{height:.12em;background:#111}
.ps-bag{width:1.6em;height:1.6em;border:.12em solid #111;border-radius:.2em .2em .35em .35em;display:grid;place-items:center;font:600 .75em var(--f-sans)}
.ps-hero{position:relative;height:13.5em;background:#111;color:#EFE9DF;display:grid;align-content:end;justify-items:start;gap:.7em;padding:1.4em 1.5em;overflow:hidden}
.ps-hero::before{content:"";position:absolute;top:0;bottom:0;left:66%;width:.9em;background:#EFE9DF}
.ps-hero::after{content:"";position:absolute;left:0;right:0;top:34%;height:.9em;background:#EFE9DF}
.ps-hero i{position:absolute;left:calc(66% + .45em);top:calc(34% + .45em);width:2.6em;height:1.5em;transform:translate(-50%,-50%);z-index:1}
.ps-hero i::before,.ps-hero i::after{content:"";position:absolute;top:0;width:1.4em;height:1.5em;border:.22em solid #EFE9DF;border-radius:50%;background:#111}
.ps-hero i::before{left:-.1em;transform:rotate(-18deg)}.ps-hero i::after{right:-.1em;transform:rotate(18deg)}
.ps-hero span{position:relative;z-index:2;font:italic 400 1.8em/1.02 var(--f-serif);max-width:8ch;background:#111;padding-right:.2em}
.ps-hero em{position:relative;z-index:2;font:500 .8em var(--f-mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;background:#EFE9DF;color:#111;padding:.6em 1em}
.ps-title{display:flex;justify-content:space-between;align-items:baseline;padding:1.2em 1.5em .7em}
.ps-title b{font:italic 400 1.35em var(--f-serif)}.ps-title span{font-size:.8em;text-decoration:underline;color:#6B655C}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9em;padding:0 1.5em;align-content:start}
.ps-grid>div{display:grid;gap:.25em;font-size:.9em}
.ps-grid .gift{aspect-ratio:1/.82;border-radius:.3em}
.ps-grid b{font-weight:500;margin-top:.3em}.ps-grid span{font:400 .85em var(--f-mono);color:#6B655C}

/* Cartes flottantes */
.fc{position:absolute;background:#fff;border-radius:16px;box-shadow:0 24px 50px -18px rgba(11,11,13,.28),0 0 0 1px rgba(11,11,13,.05);padding:14px 16px;display:grid;gap:2px;animation:float 7s ease-in-out infinite}
.fc-a{left:-4px;bottom:9%}
.fc-a span{font-size:12px;color:var(--gris)}.fc-a b{font:800 28px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}.fc-a em{font-style:normal;font-size:12.5px;color:var(--encre)}
.fc-b{right:-6px;top:22%;grid-template-columns:auto 1fr;gap:10px;align-items:center;animation-delay:-3.5s}
.fc-b .ico{width:28px;height:28px}
.fc-b b{display:block;font-size:13.5px}.fc-b em{font:500 11px var(--f-mono);font-style:normal;color:var(--gris)}
@keyframes float{50%{transform:translateY(-8px)}}

@media (max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-phone{justify-self:center;padding:10px 40px 0}
  .phone{--w:min(300px,72vw)}}
@media (max-width:600px){.hero .h-title{font-size:clamp(3rem,17vw,6rem)}.fc-a{left:0}.fc-b{right:0;padding:10px 12px}.fc-b b{font-size:12.5px}.hero-phone{padding-inline:14px}.hero-facts span{font-size:12px}}

/* Icônes K.D.S : trait épais, angles vifs, un aplat bleu */
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:miter;stroke-linecap:square;overflow:visible}
.ico .a{fill:var(--klein);stroke:none}
.ico .s{stroke:var(--klein)}

.trust .ico-l{width:40px;height:40px;margin-bottom:6px}

/* Récit au défilement */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,120px);align-items:start}
.flow-l{position:sticky;top:max(80px,6vh);display:grid;justify-items:center;gap:18px}
.phone-s{--w:min(21vw,300px,37vh)}
.flow-dots{display:flex;gap:8px}
.flow-dots i{width:8px;height:8px;border-radius:50%;background:var(--os-2);transition:background .3s,width .3s}
.flow-dots i.on{background:var(--klein);width:24px;border-radius:4px}
.flow-r{list-style:none;margin:0;padding:0}
.st{min-height:78vh;display:grid;align-content:center;gap:14px;opacity:.28;transition:opacity .5s}
.st.on{opacity:1}
.st:first-child{min-height:60vh;align-content:start;padding-top:8vh}
.st:last-child{min-height:64vh}
.st-n{font:800 22px/1 var(--f-cond);font-stretch:62%;color:var(--klein)}
.st h3{font-size:clamp(2.6rem,5vw,4.8rem);line-height:.9}
.st p{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--encre);max-width:36ch}
.st-who{justify-self:start;font-size:13px;padding:6px 12px;border-radius:999px;background:var(--papier);border:1px solid var(--os-2);color:var(--encre)}
.st[data-s="1"] .st-who{background:var(--noir);color:#fff;border-color:var(--noir)}
.st-mini{display:none}

/* Écrans de l'application */
.phone-scr.app{background:#F4F3EF}
.scr{position:absolute;inset:0;padding-top:3.2em;opacity:0;transform:translateY(1.2em) scale(.985);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.phone-s[data-step="1"] .scr[data-s="1"],.phone-s[data-step="2"] .scr[data-s="2"],.phone-s[data-step="3"] .scr[data-s="3"],.phone-s[data-step="4"] .scr[data-s="4"]{opacity:1;transform:none}
.ab{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.9em 1.3em;border-bottom:1px solid #E3E1DB;background:#fff}
.ab span{font-size:.9em;color:var(--klein)}.ab b{font-weight:650;font-size:1.05em}
.ab-body{display:grid;gap:.9em;padding:1.2em 1.3em;align-content:start}
.ab-btn{background:var(--klein);color:#fff;text-align:center;border-radius:2em;padding:.95em;font-weight:600}
.up{display:grid;grid-template-columns:7.5em 1fr;gap:.7em}
.up .gift{border-radius:.6em}
.up-r{display:grid;gap:.7em}
.up-add{border:.1em dashed #B9B7B0;border-radius:.6em;display:grid;place-items:center;color:#8A8990;font-size:1.4em}
.fld{display:grid;gap:.3em;background:#fff;border:1px solid #E3E1DB;border-radius:.8em;padding:.7em .9em}
.fld small{font-size:.75em;color:#6D6C73}.fld>span{font-weight:550}
.ab-body .r2{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.chips{display:flex;gap:.4em}.chips i{font-style:normal;font-size:.85em;border:1px solid #D8D6CF;border-radius:2em;padding:.2em .7em}.chips i.on{background:#111;color:#fff;border-color:#111}
.tg{display:flex;justify-content:space-between;align-items:center;font-size:.95em}
.tg i{width:2.9em;height:1.7em;border-radius:1em;background:var(--klein);position:relative}
.tg i::after{content:"";position:absolute;right:.2em;top:.2em;width:1.3em;height:1.3em;border-radius:50%;background:#fff}
.pay{justify-items:center;text-align:center;padding-top:2em}
.ok-c{width:5em;height:5em;border-radius:50%;background:var(--klein);display:grid;place-items:center;box-shadow:0 0 0 .6em rgba(1,70,253,.12)}
.ok-c svg{width:2.6em;height:2.6em;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:square}
.pay-t{font:800 2em/1 var(--f-cond);font-stretch:62%;text-transform:uppercase;margin-top:.4em}
.pay-s{font-size:.85em;color:#5F5E65}
.pay dl{width:100%;display:grid;grid-template-columns:1fr auto;gap:.45em 1em;margin:.6em 0 0;padding:1em;background:#fff;border-radius:.9em;text-align:left;font-size:.9em}
.pay dd{margin:0;font-variant-numeric:tabular-nums}
.pay .tot{font-weight:700;border-top:1px solid #E3E1DB;padding-top:.5em}
.card-l{font:500 .85em var(--f-mono);color:#5F5E65}.card-l i{font:italic 800 1em var(--f-sans);color:#1A1F71;margin-right:.5em}
.mail-h{display:flex;gap:.7em;align-items:center}
.mail-h .av,.mailn .av,.mem .av{width:2.6em;height:2.6em;border-radius:50%;background:#111;color:#EFE9DF;display:grid;place-items:center;font:400 .85em var(--f-serif);letter-spacing:.1em}
.mail-h b{display:block}.mail-h small{color:#6D6C73;font-size:.8em}
.mail-s{font-size:1.25em;line-height:1.15}
.mail p{font-size:.92em;color:#3A3A40;line-height:1.45}
.pdf{display:grid;grid-template-columns:auto 1fr;gap:.8em;align-items:center;background:#fff;border:1px solid #E3E1DB;border-radius:.9em;padding:.8em}
.pdf>span:first-child{background:#B42318;color:#fff;font:700 .75em var(--f-sans);padding:.9em .6em;border-radius:.4em}
.pdf b{display:block;font-size:.95em}.pdf small{font-size:.8em;color:#6D6C73}
.sent{display:flex;align-items:center;gap:.55em;font-size:.88em;color:#11663D}
.sent i{width:1.3em;height:1.3em;border-radius:50%;background:#11663D;position:relative;flex:none}
.sent i::after{content:"";position:absolute;left:.42em;top:.22em;width:.32em;height:.6em;border:solid #fff;border-width:0 .14em .14em 0;transform:rotate(45deg)}
.lbl{background:#fff;border-radius:.6em;padding:1em;display:grid;gap:.8em;box-shadow:0 .4em 1.2em rgba(11,11,13,.1);border:1px solid #E3E1DB}
.lbl-h{display:flex;justify-content:space-between;align-items:center;border-bottom:.15em solid #111;padding-bottom:.6em}
.lbl-h b{font:800 1.4em/1 var(--f-cond);font-stretch:62%;letter-spacing:.04em;color:#111}
.lbl-h span{font-size:.75em;color:#5F5E65}
.lbl-a{display:grid;gap:.1em;font-size:.95em}.lbl-a small{font-size:.75em;color:#6D6C73;text-transform:uppercase;letter-spacing:.08em}
.bc{height:4.2em;background:repeating-linear-gradient(90deg,#111 0 .14em,transparent .14em .3em,#111 .3em .38em,transparent .38em .62em,#111 .62em .9em,transparent .9em 1.02em,#111 1.02em 1.1em,transparent 1.1em 1.32em)}
.lbl-n{font:500 .85em var(--f-mono);text-align:center;letter-spacing:.12em}

@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}
  .flow-l{display:none}
  .st,.st:first-child,.st:last-child{min-height:0;opacity:1;padding-block:28px;border-top:1px solid var(--os-2);padding-top:28px}
  .st-mini{display:block;justify-self:start;width:min(320px,100%);border-radius:30px;background:#0B0B0D;padding:7px;box-shadow:0 30px 60px -28px rgba(11,11,13,.4)}
  .st-mini .phone-scr{--w:300px;height:auto;border-radius:24px}
  .st-mini .scr{position:relative;opacity:1;transform:none;padding:0 0 .6em}}

/* Emplacements photo (s'affichent tels quels tant que la photo n'est pas fournie) */
.ph{position:relative;margin:0 0 16px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#ECEAE4 0%,#DFE3F4 100%)}
.ph::before{content:"";position:absolute;left:50%;top:44%;width:44px;height:34px;transform:translate(-50%,-50%);border:2px solid rgba(1,70,253,.45);border-radius:6px;
  background:radial-gradient(circle at 50% 55%,transparent 8px,rgba(1,70,253,.45) 8px 10px,transparent 10px)}
.ph figcaption{position:absolute;left:12px;bottom:10px;font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(1,70,253,.7)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph img~figcaption{display:none}
.who .ph{margin-bottom:6px}
.ph-wide{aspect-ratio:21/9;margin:0;border-radius:14px}
.ph-quote{position:absolute;z-index:2;left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,52px);font:800 clamp(2.2rem,6vw,5.6rem)/.88 var(--f-cond);font-stretch:62%;text-transform:uppercase;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.ph-wide:not(:has(img)) .ph-quote{color:var(--noir);text-shadow:none}
.ph-wide figcaption{left:auto;right:16px}
@media (max-width:700px){.ph-wide{aspect-ratio:4/5}}

/* Apparitions au défilement */
.rv-on .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv-on .rv.in{opacity:1;transform:none}
.fld .desc{font-weight:400;font-size:.9em;line-height:1.35;color:#3A3A40}
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);padding:.8em .6em 2.2em;background:rgba(255,255,255,.92);border-top:1px solid #E3E1DB;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tabbar span{display:grid;justify-items:center;gap:.35em;font-size:.72em;color:#8A8990}
.tabbar i{width:1.9em;height:1.9em;border-radius:.45em;border:.18em solid currentColor}
.tabbar .on{color:var(--klein)}.tabbar .on i{background:var(--klein)}
.phone-s .tabbar::after{content:"";position:absolute;left:50%;bottom:.7em;width:36%;height:.32em;border-radius:1em;background:#111;transform:translateX(-50%)}
.inv{position:relative;background:#fff;border:1px solid #E3E1DB;border-radius:.6em;padding:1em;display:grid;gap:.45em;font-size:.82em}
.inv-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #111;padding-bottom:.5em;margin-bottom:.2em}
.inv-h b{font:400 .9em var(--f-serif);letter-spacing:.22em}.inv-h span{font-size:.85em;color:#6D6C73}
.inv-l,.inv-t{display:flex;justify-content:space-between}.inv-l span:last-child{font-variant-numeric:tabular-nums}
.inv-t{border-top:1px solid #E3E1DB;padding-top:.45em;font-weight:600}
.inv-st{position:absolute;left:44%;bottom:.55em;border:.15em solid #11663D;color:#11663D;font:700 .85em var(--f-mono);letter-spacing:.14em;padding:.15em .5em;transform:rotate(-8deg);border-radius:.2em}

/* ===== V12 · Grille en tuiles, bande sombre, étiquettes adoucies ===== */
.ticker{height:36px}
.ticker span{font:500 13px var(--f-sans);letter-spacing:0;text-transform:none}
.tag{font:500 12.5px var(--f-sans);letter-spacing:0}
.sec-c{display:grid;justify-items:center;text-align:center;gap:18px;margin:0 auto clamp(40px,5vw,72px);max-width:60ch}
.sec-c h2{font-size:clamp(3rem,8vw,7.4rem)}
.sec-c p{color:var(--encre);font-size:clamp(1.02rem,1.3vw,1.15rem)}

.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.bt-t{position:relative;background:#fff;border:1px solid var(--os-2);border-radius:20px;padding:clamp(20px,2.2vw,30px);display:grid;gap:18px;align-content:start;overflow:hidden;min-width:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.bt-t:hover{transform:translateY(-3px);box-shadow:0 26px 60px -30px rgba(11,11,13,.28)}
.bt-h{display:grid;gap:8px}
.bt-h .ico{width:30px;height:30px;margin-bottom:6px}
.bt-h h3{margin:0;font:800 clamp(26px,2.4vw,34px)/.92 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.bt-h p{color:var(--encre);font-size:15px;max-width:42ch}
.bv{font-size:13px}
.bt-dash{grid-column:span 8;grid-row:span 2;background:var(--noir);color:#fff;border-color:var(--noir);align-content:start}
.bt-dash .bt-h p{color:#B4B3B8}
.bt-dash .ico{color:#fff}
.bt-dash .mock{box-shadow:0 40px 100px -30px rgba(1,70,253,.55);margin-top:6px}
.bt-cta{justify-self:start;border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.bt-cta:hover{background:#fff;color:var(--noir)}
.bt-pay,.bt-inv{grid-column:span 4}
.bt-colis,.bt-rel,.bt-prod{grid-column:span 4}
.bt-site{grid-column:span 7}.bt-team{grid-column:span 5}

.bv-pay{display:grid;gap:10px}
.apay{display:flex;align-items:center;justify-content:center;gap:5px;height:48px;border-radius:10px;background:#000;color:#fff}
.apay svg{width:17px;height:20px}.apay b{font:600 21px var(--f-sans);letter-spacing:-.01em}
.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pchip{display:grid;place-items:center;height:42px;border:1px solid var(--os-2);border-radius:10px;font-weight:600;font-size:13px}
.pay-ok,.stock{display:flex;align-items:center;gap:8px;font-size:13px;color:#11663D}
.pay-ok i{width:18px;height:18px;border-radius:50%;background:#11663D;position:relative;flex:none}
.pay-ok i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.bt-inv .inv{font-size:13px;transform:rotate(-1.5deg);box-shadow:0 18px 40px -22px rgba(11,11,13,.3)}
.bt-colis .lbl{font-size:12px;transform:rotate(1.2deg)}
.carriers{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.carriers span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--os)}
.bv-rel{display:grid;gap:10px}
.mailn{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:12px;border-radius:14px;background:var(--os);font-size:13px}
.mailn .av,.mem .av{width:34px;height:34px;font-size:11px}
.mailn b{display:block;font-size:13.5px}.mailn small{color:var(--gris);font-size:12.5px}
.won{display:flex;align-items:baseline;gap:10px;padding:2px 2px}
.won b{font:800 34px/1 var(--f-cond);font-stretch:62%;color:var(--klein)}
.won span{color:var(--gris);font-size:12.5px}
.bv-prod{display:grid;gap:10px}
.pp{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center}
.pp .gift{border-radius:8px}
.pp b{display:block;font-size:14.5px}.pp small{color:var(--gris);font-size:12.5px}
.stock{color:#844C04}
.stock i{width:9px;height:9px;border-radius:50%;background:#C27803;box-shadow:0 0 0 4px rgba(194,120,3,.18)}
.bt-site{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.br{border:1px solid var(--os-2);border-radius:12px;overflow:hidden;background:#F6F3EE}
.br-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#fff;border-bottom:1px solid var(--os-2)}
.br-bar i{width:9px;height:9px;border-radius:50%;background:var(--os-2)}
.br-bar span{margin-left:10px;font-size:11.5px;color:var(--gris);background:var(--os);padding:3px 10px;border-radius:999px}
.br-body{position:relative;display:grid;gap:8px;justify-items:start;padding:22px 20px 20px;background:#111;color:#EFE9DF;margin:10px;border-radius:8px;outline:2px dashed var(--klein);outline-offset:3px}
.edit{position:absolute;top:-14px;left:10px;display:flex;gap:8px;align-items:center;background:var(--klein);color:#fff;font-size:11px;padding:3px 9px;border-radius:999px}
.edit em{font-style:normal;opacity:.75}
.br-h{font:italic 400 28px/1 var(--f-serif)}
.caret{display:inline-block;width:2px;height:.9em;background:#EFE9DF;margin-left:3px;vertical-align:-.1em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.br-s{font-size:12px;opacity:.8}
.br-btn{justify-self:end;background:var(--klein);color:#fff;font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px}
.bv-team{display:grid;gap:8px}
.mem{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--os)}
.mem .av{background:#fff;color:var(--noir);border:1px solid var(--os-2);font:700 13px var(--f-sans);letter-spacing:0}
.mem .av.k{background:var(--klein);color:#fff;border-color:var(--klein)}
.mem b{display:block;font-size:14px}.mem small{color:var(--gris);font-size:12.5px}
@media (max-width:1100px){.bt-dash{grid-column:1/-1;grid-row:auto}.bt-pay,.bt-inv,.bt-colis,.bt-rel,.bt-prod{grid-column:span 6}.bt-prod{grid-column:1/-1}.bt-site,.bt-team{grid-column:1/-1}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}.bento>.bt-t{grid-column:1/-1}.bt-site{grid-template-columns:1fr}.m-tix{display:none}}

/* Bande sombre : 0 % et calculateur */
.dark-band{background:var(--noir);color:#fff;padding-block:clamp(80px,10vw,150px)}
.dark-band .manif{border:0;padding-block:0}
.dark-band .manif p{color:#B4B3B8}
.dark-band .calc{background:#fff;color:var(--noir);border:0;border-radius:18px}
.dark-band + .sec{padding-top:clamp(88px,12vw,176px)!important}
.dark-band .calc-note{color:var(--gris)}
.calc label{font:500 13.5px var(--f-sans);letter-spacing:0;text-transform:none;color:var(--encre)}
.calc-out .mono{font:500 13.5px var(--f-sans);letter-spacing:0;text-transform:none;color:var(--encre)}
.bt-site{grid-column:span 6;grid-template-columns:1fr}.bt-team{grid-column:span 6}
@media (max-width:1100px){.bt-site,.bt-team{grid-column:1/-1}}
/* ===== Vitrine éclatée (ordinateur) et rideau (mobile) ===== */
.xp{position:relative;height:330vh;border-top:1px solid var(--os-2)}
.xp-pin{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden;padding-top:60px}
.xp-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.xp-txt{display:grid;gap:18px;align-content:center}
.xp-txt h2{font-size:clamp(2.8rem,5.6vw,5.6rem)}
.xp-txt>p{color:var(--encre);max-width:40ch;font-size:clamp(1rem,1.25vw,1.15rem)}
.xp-list{list-style:none;margin:10px 0 0;padding:0;display:grid;border-top:1px solid var(--os-2)}
.xp-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--os-2);color:var(--gris);transition:color .3s,padding .3s}
.xp-list b{font:800 20px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.xp-list span{font-size:13.5px}
.xp-list li.act{color:var(--noir);padding-left:14px;box-shadow:inset 3px 0 0 var(--klein)}
.xp-list li.act b{color:var(--klein)}
.xp-stage{height:min(80vh,760px);display:grid;place-items:center;min-width:0}
.xp-stack{--t:0;--e:0;--sc:1;position:relative;width:520px;height:340px;transform-style:preserve-3d;
  transform:scale(var(--sc)) translateY(calc(var(--e)*150px)) rotateX(calc(var(--t)*56deg)) rotateZ(calc(var(--t)*-38deg))}
.ly{position:absolute;inset:0;border-radius:18px;background:#fff;border:1px solid #D9DCEA;font-size:14px;color:var(--noir);
  transform:translateZ(calc(var(--i)*(1px + var(--e)*118px) + var(--lift,0px)));box-shadow:0 30px 50px -28px rgba(1,40,160,calc(.12 + var(--e)*.25));padding:22px 24px;display:grid;align-content:start;gap:12px;transition:outline-color .3s,box-shadow .3s,opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.ly[data-l="0"]{--i:0}.ly[data-l="1"]{--i:1}.ly[data-l="2"]{--i:2}.ly[data-l="3"]{--i:3}.ly[data-l="4"]{--i:4}.ly[data-l="5"]{--i:5}
.ly.act{outline:2px solid var(--klein);outline-offset:4px;--lift:26px}
.ly.gh{opacity:.05;--lift:60px}
.ly-t{justify-self:start;font:600 12px var(--f-sans);color:var(--klein);background:#E8EDFF;padding:4px 11px;border-radius:999px}
.ly-base{background:var(--klein);border-color:var(--klein);color:#fff;align-content:center;justify-items:center;text-align:center;gap:10px}
.ly-base img{width:54px;height:auto}
.ly-base b{font:800 34px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase;letter-spacing:.02em}
.ly-base span{opacity:.8}
.ly-ship,.ly-inv{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:center}
.ly .lbl{font-size:12px}.ly .inv{font-size:12px}
.ly-side{display:grid;gap:10px}
.ly .sent{font-size:13px}
.ly-orders{display:grid;gap:8px}
.ly-orders div{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--os);font-size:13px}
.ly-orders div.on{background:#E8EDFF;box-shadow:inset 3px 0 0 var(--klein)}
.ly-orders b{font:500 12px var(--f-mono)}.ly-orders em{font-style:normal;font-weight:600}
.ly-pay{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-top:18px}
.ly-pay .ok-c{font-size:16px}
.ly-pay b{display:block;font:800 52px/1 var(--f-cond);font-stretch:62%}
.ly-pay span{display:block;margin-top:6px}.ly-pay .mut{color:var(--gris);font-size:13px}
.ly-shop{background:#F6F3EE;padding:0;gap:0;overflow:hidden;border-color:#DDD5C8}
.sh-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #DDD5C8;font:500 9px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#111}
.sh-bar b{font:400 13px var(--f-serif);letter-spacing:.32em}
.sh-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px}
.sh-body .gift{border-radius:6px;aspect-ratio:1}
.sh-info{display:grid;gap:8px;align-content:center;color:#111}
.sh-info small{font:500 9px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#6B655C}
.sh-info b{font:italic 400 28px/1 var(--f-serif)}
.sh-info em{font:400 14px var(--f-mono);font-style:normal}
.sh-sz{display:flex;gap:5px}.sh-sz i{font-style:normal;font-size:11px;border:1px solid #CFC8BB;padding:3px 8px}.sh-sz i.on{background:#111;color:#F6F3EE;border-color:#111}
.sh-btn{display:block;text-align:center;background:#111;color:#F6F3EE;font:500 10px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:12px}
.sh-note{font-size:11px;color:#6B655C}

/* Rideau (mobile) */
.cur{display:none}
.cur-box{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid var(--os-2);--x:50%;touch-action:pan-y}
.cur-a,.cur-b{position:absolute;inset:0;display:grid;align-content:start}
.cur-a{background:#F6F3EE}
.cur-b{background:#fff;clip-path:inset(0 0 0 var(--x))}
.cur-tag{position:absolute;left:12px;bottom:12px;z-index:2;font-size:12px;font-weight:600;background:#111;color:#fff;padding:5px 11px;border-radius:999px}
.cur-tag.k{left:auto;right:12px;background:var(--klein)}
.cur-shop{display:grid;gap:8px;padding:18px;color:#111}
.cur-shop .gift{border-radius:6px;aspect-ratio:1/.8}
.cur-shop b{font:italic 400 26px/1 var(--f-serif)}.cur-shop em{font:400 14px var(--f-mono);font-style:normal}
.cur-adm{display:grid;gap:12px;padding:56px 18px 18px;font-size:14px}
.ca-h{display:flex;justify-content:space-between;align-items:center}.ca-h b{font:500 15px var(--f-mono)}
.pill{background:#D8EEDF;color:#11663D;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.ca-r{display:flex;justify-content:space-between;padding:12px;border-radius:10px;background:var(--os)}
.ca-r b{font:800 22px/1 var(--f-cond);font-stretch:62%}
.ca-stock{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:#E8EDFF;font-size:13px}.ca-stock b{color:var(--klein)}
.cur-h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--klein);transform:translateX(-1px);pointer-events:none;z-index:3}
.cur-h i{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--klein);transform:translate(-50%,-50%);box-shadow:0 8px 20px rgba(1,70,253,.35)}
.cur-h i::before,.cur-h i::after{content:"";position:absolute;top:50%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translateY(-50%)}
.cur-h i::before{left:10px;border-right:7px solid #fff}.cur-h i::after{right:10px;border-left:7px solid #fff}
.cur-box input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:4}
.cur-box:has(input:focus-visible){outline:2px solid var(--klein);outline-offset:3px}
.cur-cap{margin-top:12px;text-align:center;color:var(--gris);font-size:13.5px}

@media (max-width:900px){.xp{height:auto;padding-block:clamp(72px,12vw,120px)}
  .xp-pin{position:static;height:auto;padding-top:0;overflow:visible}
  .xp-in{grid-template-columns:minmax(0,1fr)}
  .xp-stage,.xp-list{display:none}
  .cur{display:block}}
.xp.static{height:auto;padding-block:clamp(88px,12vw,176px)}
.xp.static .xp-pin{position:static;height:auto;padding-top:0}

/* ===== V13 · Corrections d'audit ===== */
h2.cond .it{font-size:.86em}
.faq h2{font-size:clamp(2.8rem,5.6vw,5.2rem);overflow-wrap:anywhere}
.faq h2 .it{font-size:.8em}
.price span,.label .setup,.perday{font:500 13px var(--f-sans);letter-spacing:0;text-transform:none}
.label-top .mono{font:500 12.5px var(--f-sans);letter-spacing:0;text-transform:none}
.toggle button{font:600 13px var(--f-sans);letter-spacing:0;text-transform:none}
/* Tableau comparatif : choix de l'offre sur mobile */
.mx-pick{display:none}
@media (max-width:760px){.mx-pick{display:flex;gap:6px;margin-bottom:14px;padding:4px;border-radius:999px;background:var(--papier);border:1px solid var(--os-2)}
  .mx-pick button{flex:1;height:40px;border:0;border-radius:999px;background:transparent;font:600 13.5px var(--f-sans);color:var(--noir);cursor:pointer}
  .mx-pick button[aria-pressed="true"]{background:var(--noir);color:#fff}
  .matrix-w{overflow:visible}
  .matrix-w table.mx{min-width:0;table-layout:auto}
  .mx thead th small{white-space:nowrap}
  .mx th:first-child,.mx td:first-child{width:62%}
  .matrix-w[data-plan="1"] .mx tr>*:nth-child(3),.matrix-w[data-plan="1"] .mx tr>*:nth-child(4),
  .matrix-w[data-plan="2"] .mx tr>*:nth-child(2),.matrix-w[data-plan="2"] .mx tr>*:nth-child(4),
  .matrix-w[data-plan="3"] .mx tr>*:nth-child(2),.matrix-w[data-plan="3"] .mx tr>*:nth-child(3){display:none}
  .mx .grp td{width:auto}
  .mx td:not(:first-child),.mx th:not(:first-child){width:38%}
  .mx thead th{position:static}}
.kicker{margin:0;font:600 13px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--encre);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--klein);box-shadow:0 0 0 4px rgba(1,70,253,.15)}
p.h-title{margin:0}
/* Bandeau du haut : promesses avec icônes */
.ticker{height:42px;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:min(120px,12vw);z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--noir),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--noir),transparent)}
.ticker-track{display:flex;gap:0;padding-left:0;animation:tick 55s linear infinite;width:max-content}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk-g{display:flex;align-items:center;flex:none}
.tk{display:inline-flex;align-items:center;gap:10px;padding:0 22px;font:500 13.5px var(--f-sans);color:#C9C8CE;letter-spacing:0;text-transform:none}
.tk b{color:#fff;font-weight:600}
.tk .ico{width:17px;height:17px;color:#fff;stroke-width:2.6}
.ticker .ico .a{fill:#5E86FF}.ticker .ico .s{stroke:#5E86FF}
.tk-sep{width:4px;height:4px;border-radius:50%;background:#46464D;flex:none}
.ticker span.tk>span{font:inherit;letter-spacing:0;text-transform:none}
@media (max-width:600px){.ticker{height:38px}.tk{font-size:12.5px;padding:0 16px}}
/* Frise « En ligne en 14 jours » */
.tl{--p:0;position:relative}
.tl-line{position:absolute;left:0;right:0;top:9px;height:3px;background:var(--os-2);border-radius:3px;overflow:hidden}
.tl-fill{position:absolute;inset:0;background:var(--klein);transform-origin:left;transform:scaleX(var(--p));transition:transform .2s linear}
.tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.tl-s{position:relative;padding-top:42px;display:grid;gap:12px;align-content:start;opacity:.4;transition:opacity .5s}
.tl-s.on{opacity:1}
.tl-dot{position:absolute;top:0;left:0;width:21px;height:21px;border-radius:50%;background:var(--os);border:3px solid var(--os-2);transition:border-color .4s,background .4s,box-shadow .4s}
.tl-s.on .tl-dot{border-color:var(--klein);background:#fff;box-shadow:0 0 0 6px rgba(1,70,253,.14)}
.tl-s:last-child.on .tl-dot{background:var(--klein)}
.tl-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tl-day{font:800 26px/1 var(--f-cond);font-stretch:62%;color:var(--klein);margin-right:4px}
.tw{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.tw.n{background:var(--noir);color:#fff}
.tw.v{background:#E8EDFF;color:var(--klein)}
.tl-s h3{margin:0;font:800 clamp(26px,2.5vw,34px)/.92 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.tl-s>p{color:var(--encre);font-size:15px;max-width:34ch}
.tl-vis{margin-top:6px;background:#fff;border:1px solid var(--os-2);border-radius:16px;padding:14px;min-height:118px;transform:translateY(10px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tl-s.on .tl-vis{transform:none}
.tv-call{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;align-content:center}
.av-k{width:40px;height:40px;border-radius:50%;background:var(--klein);color:#fff;display:grid;place-items:center;font-weight:700}
.tv-call b,.tv-live b{display:block;font-size:14px}.tv-call small,.tv-live small{color:var(--gris);font-size:12.5px}
.wave{grid-column:1/-1;display:flex;align-items:center;gap:4px;height:22px}
.wave i{width:4px;border-radius:2px;background:var(--klein);height:30%;animation:wv 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:-.2s}.wave i:nth-child(3){animation-delay:-.4s}.wave i:nth-child(4){animation-delay:-.6s}.wave i:nth-child(5){animation-delay:-.8s}
@keyframes wv{50%{height:100%}}
.tv-maq{position:relative;padding:10px}
.tmq{border:1px solid #DDD5C8;border-radius:8px;overflow:hidden;background:#F6F3EE}
.tmq-bar{padding:6px;text-align:center;border-bottom:1px solid #DDD5C8}.tmq-bar b{font:400 8px var(--f-serif);letter-spacing:.3em}
.tmq-hero{height:34px;background:#111;position:relative}.tmq-hero::after{content:"";position:absolute;top:0;bottom:0;left:64%;width:4px;background:#EFE9DF}
.tmq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:6px}.tmq-grid i{aspect-ratio:1;background:#D9CDB8;border-radius:2px}.tmq-grid i:nth-child(2){background:#151515}
.ok-chip{position:absolute;right:-6px;bottom:-10px;background:#11663D;color:#fff;font-size:12px;font-weight:600;padding:5px 11px 5px 26px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(17,102,61,.6);transform:scale(.6);opacity:0;transition:transform .4s .5s cubic-bezier(.3,1.6,.5,1),opacity .3s .5s}
.ok-chip::before{content:"";position:absolute;left:11px;top:7px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tl-s.on .ok-chip{transform:none;opacity:1}
.tv-list{list-style:none;margin:6px 0 0;display:grid;gap:7px;font-size:13.5px}
.tv-list li{display:flex;align-items:center;gap:9px;color:var(--gris);transition:color .3s}
.tv-list li::before{content:"";width:16px;height:16px;border-radius:5px;border:1.5px solid var(--os-2);flex:none;transition:background .3s,border-color .3s}
.tl-s.on .tv-list li{color:var(--noir)}
.tl-s.on .tv-list li::before{background:var(--klein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat;border-color:var(--klein)}
.tv-list li:nth-child(1),.tv-list li:nth-child(1)::before{transition-delay:.15s}
.tv-list li:nth-child(2),.tv-list li:nth-child(2)::before{transition-delay:.35s}
.tv-list li:nth-child(3),.tv-list li:nth-child(3)::before{transition-delay:.55s}
.tv-list li:nth-child(4),.tv-list li:nth-child(4)::before{transition-delay:.75s}
.tv-list li:nth-child(5),.tv-list li:nth-child(5)::before{transition-delay:.95s}
.tv-live{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;align-content:center;background:var(--noir);border-color:var(--noir);color:#fff}
.tv-live .notif-ic{width:40px;height:40px;border-radius:10px}
.tv-live small{color:#A9A8AE}
.tl-sum{margin-top:clamp(36px,4vw,56px);text-align:center;font:300 expanded clamp(1.5rem,2.8vw,2.4rem)/1.15 var(--f-sans);letter-spacing:-.035em}
.tl-sum b{font-weight:600;color:var(--klein)}
@media (max-width:900px){.tl-line{left:9px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .tl-fill{transform-origin:top;transform:scaleY(var(--p))}
  .tl-steps{grid-template-columns:minmax(0,1fr);gap:34px}
  .tl-s{padding-top:0;padding-left:42px}
  .tl-sum{text-align:left;font-size:1.4rem;padding-left:2px}}
/* Exemples : un téléphone, trois styles */

@keyframes stlbar{to{transform:scaleX(1)}}

@keyframes stlin{from{opacity:0;transform:translateY(10px)}}
.stl-badge{justify-self:start;font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;border:1px solid var(--os-2);background:#fff;color:var(--encre)}
.stl-badge.real{background:var(--klein);color:#fff;border-color:var(--klein)}

.sw-dots{display:flex}
.sw-dots i{width:26px;height:26px;border-radius:50%;border:2px solid var(--os);margin-left:-6px;box-shadow:0 0 0 1px var(--os-2)}
.sw-dots i:first-child{margin-left:0}

.phone-scr[data-t="drop"]{background:#E9F23A}.phone-scr[data-t="soin"]{background:#ECE8FB}
.phone-scr{transition:background .5s}

/* Streetwear */

/* Beauté */

.so-btn{margin:0 1.4em;background:#2A2350;color:#fff;text-align:center;border-radius:2em;padding:.9em;font-weight:600;font-size:.95em}

/* ===== Exemples : grand navigateur, boutiques réalistes ===== */
.ex{display:grid;gap:22px}
.ex-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:18px;background:#fff;border:1px solid var(--os-2);justify-self:center}
.ex-tabs button{border:0;background:transparent;border-radius:13px;padding:10px 18px;display:grid;gap:1px;text-align:left;font:700 15px var(--f-sans);color:var(--noir);cursor:pointer;position:relative;overflow:hidden}
.ex-tabs small{font:500 12px var(--f-sans);color:var(--gris)}
.ex-tabs button[aria-selected="true"]{background:var(--noir);color:#fff}
.ex-tabs button[aria-selected="true"] small{color:#A9A8AE}
.ex-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:2px;background:var(--klein);transform-origin:left;transform:scaleX(0);animation:stlbar var(--ex-d,7s) linear forwards}
.ex.paused .ex-tabs button::after{display:none}
.ex-tabs button.soon small{color:var(--klein)}
.ex-tabs button:focus-visible{outline:2px solid var(--klein);outline-offset:2px}
.bw{border-radius:14px;overflow:hidden;background:#fff;border:1px solid #D9D8D2;box-shadow:0 60px 120px -50px rgba(11,11,13,.45),0 0 0 6px rgba(255,255,255,.6)}
.bw-bar{display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;background:#EDECE8;border-bottom:1px solid #DAD9D3}
.bw-dots{display:flex;gap:7px}.bw-dots i{width:11px;height:11px;border-radius:50%;background:#D3D2CC}
.bw-dots i:nth-child(1){background:#FF5F57}.bw-dots i:nth-child(2){background:#FEBC2E}.bw-dots i:nth-child(3){background:#28C840}
.bw-url{flex:1;max-width:460px;margin:0 auto;height:28px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font:500 13px var(--f-sans);color:#3A3A40}
.bw-url svg{width:12px;height:12px;fill:#6B6A70;stroke:#6B6A70;stroke-width:1.5}
.bw-hint{font-size:12px;color:var(--gris);white-space:nowrap}
.bw-view{position:relative;aspect-ratio:16/9.4;overflow:hidden;container-type:inline-size;background:#fff}
.site{position:absolute;left:0;right:0;top:0;font-size:clamp(5px,1.16cqw,16px);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s,transform 7s cubic-bezier(.45,.05,.3,1);font-family:var(--f-sans);line-height:1.35}
.site.on{opacity:1;visibility:visible;transition:opacity .5s,visibility 0s,transform 7s cubic-bezier(.45,.05,.3,1)}
.site b,.site i{font-style:normal}
.site h4,.site h5{margin:0;font-weight:inherit}
/* — Maison El Finâq — */
.s-efq{background:#F6F3EE;color:#111}
.e-ann{background:#111;color:#EFE9DF;text-align:center;font:500 .72em var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:.8em}
.e-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.3em 3em;border-bottom:1px solid #DDD5C8}
.e-l,.e-r{display:flex;gap:2em;font-size:.82em}.e-r{justify-content:flex-end}.e-l b,.e-r b{font-weight:500}
.e-logo{font:400 1.45em var(--f-serif);letter-spacing:.42em}
.e-hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:30em}
.e-hl{background:#111;color:#EFE9DF;position:relative;overflow:hidden;padding:3.4em;display:grid;align-content:end;gap:1.1em}
.e-hl::before{content:"";position:absolute;top:0;bottom:0;left:84%;width:1em;background:#EFE9DF}
.e-hl::after{content:"";position:absolute;left:0;right:0;top:15%;height:1em;background:#EFE9DF}
.e-bow{position:absolute;left:calc(84% + .5em);top:calc(15% + .5em);width:3.4em;height:2em;transform:translate(-50%,-50%);z-index:1}
.e-bow::before,.e-bow::after{content:"";position:absolute;top:0;width:1.8em;height:2em;border:.28em solid #EFE9DF;border-radius:50%;background:#111}
.e-bow::before{left:-.1em;transform:rotate(-18deg)}.e-bow::after{right:-.1em;transform:rotate(18deg)}
.e-hl>*{position:relative;z-index:2}
.e-hl small{font:500 .72em var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#BDB4A6;background:#111;justify-self:start;padding-right:.5em}
.e-hl h4{font:italic 400 3.6em/.98 var(--f-serif);max-width:8ch;background:#111;padding-right:.2em}
.e-hl p{font-size:.95em;max-width:30ch;color:#CFC8BC;background:#111}
.e-btn{justify-self:start;background:#EFE9DF;color:#111;font:500 .72em var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:1.1em 1.8em}
.e-btn.line{background:transparent;border:1px solid #111}
.e-hr{position:relative;background:linear-gradient(160deg,#EDE7DD,#DCD2C2)}
.e-hr .gift{position:absolute;border-radius:.3em;box-shadow:0 2em 3em -1em rgba(60,40,10,.35)}
.e-hr .big{width:42%;left:22%;top:20%}

.e-sec{display:flex;justify-content:space-between;align-items:baseline;padding:3em 3em 1.4em}
.e-sec h5{font:italic 400 2.2em var(--f-serif)}.e-sec span{font-size:.82em;text-decoration:underline}
.e-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em;padding:0 3em}
.e-p{display:grid;gap:.35em;font-size:.92em}
.e-img{position:relative;aspect-ratio:1/1.12;background:#EDE7DD;display:grid;place-items:center;margin-bottom:.5em}
.e-img .gift{width:62%}
.e-img em{position:absolute;left:.8em;top:.8em;font:500 .7em var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:#111;color:#EFE9DF;padding:.3em .6em;font-style:normal}
.e-p b{font:400 1.15em var(--f-serif)}.e-p span{color:#6B655C;font-size:.85em}.e-p i{font:400 .9em var(--f-mono)}
.e-trust{display:grid;grid-template-columns:repeat(4,1fr);margin:3em 3em 0;border-top:1px solid #DDD5C8;border-bottom:1px solid #DDD5C8}
.e-trust span{padding:1.2em;text-align:center;font:500 .72em var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.e-trust span+span{border-left:1px solid #DDD5C8}
.e-story{display:grid;grid-template-columns:1fr 1.2fr;gap:3em;align-items:center;padding:3em}
.e-story .gift{width:60%;justify-self:center}
.e-story>div:last-child{display:grid;gap:.9em}
.e-story small{font:500 .72em var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#6B655C}
.e-story h5{font:italic 400 2.2em/1.05 var(--f-serif)}.e-story p{color:#4A453E;max-width:40ch}
/* — VOLT/07 — */

/* — lumen — */
.s-soin{background:#FBF9FF;color:#2A2350}
.l-ann{background:#2A2350;color:#ECE8FB;text-align:center;font-size:.78em;padding:.8em}
.l-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.3em 3em;border-bottom:1px solid #E6E1F5}
.l-l,.l-r{display:flex;gap:2em;font-size:.85em}.l-r{justify-content:flex-end}.l-l b,.l-r b{font-weight:500}
.l-logo{font:italic 400 2em/1 var(--f-serif)}
.l-hero{display:grid;grid-template-columns:1fr 1.1fr;min-height:30em;background:linear-gradient(120deg,#ECE8FB,#F8E8F0)}
.l-hl{padding:3.4em;display:grid;align-content:center;gap:1.1em}
.l-hl small{font:500 .72em var(--f-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.l-hl h4{font:italic 400 3.8em/1 var(--f-serif);max-width:10ch}
.l-hl p{max-width:32ch;opacity:.85}
.l-btn{justify-self:start;background:#2A2350;color:#fff;border-radius:3em;padding:1em 1.8em;font-weight:600;font-size:.9em}
.l-hr{display:flex;align-items:flex-end;justify-content:center;gap:7%;padding:0 12% 4.5em;position:relative}
.l-hr::before{content:"";position:absolute;left:18%;right:18%;bottom:3em;height:4em;border-radius:50%;background:radial-gradient(closest-side,#fff,transparent)}

.l-sec{display:flex;justify-content:space-between;align-items:baseline;padding:3em 3em 1.4em}
.l-sec h5{font:italic 400 2.4em var(--f-serif)}.l-sec span{font-size:.85em;text-decoration:underline}
.l-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em;padding:0 3em}
.l-p{display:grid;gap:.3em;font-size:.92em}
.l-img{position:relative;aspect-ratio:1/1.1;background:var(--bg);border-radius:1.2em;display:flex;align-items:flex-end;justify-content:center;gap:8%;padding-bottom:12%;margin-bottom:.5em}

.l-img em{position:absolute;left:.8em;top:.8em;background:#fff;color:#2A2350;font-size:.72em;font-weight:600;padding:.3em .8em;border-radius:2em;font-style:normal}
.l-p b{font-weight:600;font-size:1.05em}.l-p span{opacity:.65;font-size:.85em}.l-p i{font-weight:600}
.l-quiz{display:flex;justify-content:space-between;align-items:center;margin:3em;padding:2.4em 3em;border-radius:1.6em;background:#2A2350;color:#ECE8FB}
.l-quiz small{font:500 .72em var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.l-quiz h5{font:italic 400 2.2em var(--f-serif);margin-top:.2em}
.l-quiz .l-btn{background:#ECE8FB;color:#2A2350}
/* — Restez branché — */
.s-soon{height:100%;bottom:0;background:#F4F3EF;display:grid;place-items:center;overflow:hidden}
.so-blur{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto 1fr;gap:1.4em;padding:3em;filter:blur(14px);opacity:.7}
.so-blur i{background:#E3E1DB;border-radius:1em}
.so-blur i:first-child{grid-column:1/-1;height:12em;background:linear-gradient(120deg,#DCE3FF,#E3E1DB)}
.so-card{position:relative;background:#fff;border-radius:1.6em;padding:3em 3.4em;display:grid;gap:1em;justify-items:center;text-align:center;box-shadow:0 3em 6em -3em rgba(11,11,13,.3);font-size:1.15em;max-width:30em}
.so-pill{display:inline-flex;align-items:center;gap:.6em;background:#E8EDFF;color:var(--klein);font-weight:600;font-size:.8em;padding:.4em 1em;border-radius:2em}
.so-pill::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--klein);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.so-card h4{font:800 3.6em/.9 var(--f-cond);font-stretch:62%;text-transform:uppercase;color:var(--noir)}
.so-card p{color:var(--encre);max-width:28ch}
.so-btn{background:var(--klein);color:#fff;border-radius:2em;padding:.9em 1.6em;font-weight:600;font-size:.9em}
/* Infos sous l'écran */
.ex-info{position:relative}
.ex-i{display:none;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr) auto;gap:18px 28px;align-items:center;animation:stlin .5s cubic-bezier(.2,.8,.2,1)}
.ex-i.on{display:grid}
.ex-i>b{font:800 clamp(22px,2vw,28px)/.95 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.ex-i p{color:var(--encre);font-size:15px}
/* Mobile : la boutique passe en version téléphone */
@container (max-width:620px){.site{font-size:2.9cqw}
  .e-nav,.l-nav{grid-template-columns:1fr;justify-items:center;padding:1em}
  .e-l, .e-r, .l-l, .l-r{display:none}
  
  .e-hero, .l-hero, .e-story{grid-template-columns:1fr}
  .e-hr, .l-hr{min-height:16em}
  .e-hl, .l-hl{padding:1.6em}
  .e-grid, .l-grid{grid-template-columns:1fr 1fr;padding:0 1.4em}
  .e-sec, .l-sec{padding:1.8em 1.4em 1em}
  .e-trust{grid-template-columns:1fr 1fr;margin:1.8em 1.4em 0}.e-trust span:nth-child(3){border-left:0}
  
  .l-quiz{flex-direction:column;align-items:flex-start;gap:1em;margin:1.8em 1.4em;padding:1.6em}
  .so-card{font-size:1em;padding:2em;margin:0 1.4em}}
@media (max-width:760px){.bw-view{aspect-ratio:9/15}
  .bw-hint{display:none}
  .ex-tabs{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr}
  .ex-i{grid-template-columns:1fr;justify-items:start;gap:10px}}
/* Photos rendues dans les vitrines */
.site img{display:block;width:100%;height:100%;object-fit:cover}
.e-hr img,.l-hr img,.c-hr img{position:absolute;inset:0}
.l-hr{padding:0}.l-hr::before{display:none}
.e-img,.l-img,.c-img{overflow:hidden}
.e-img img,.l-img img,.c-img img{position:absolute;inset:0}
.l-img{padding:0;display:block}
.e-story>img{aspect-ratio:1/1;height:auto;border-radius:.2em}
/* Céramique « sillon » */
.s-cer{background:#F6F1EA;color:#2B2520}
.c-ann{background:#2B2520;color:#EFE8DF;text-align:center;font-size:.78em;padding:.8em;letter-spacing:.02em}
.c-nav{display:grid;grid-template-columns:auto 1fr auto;gap:3em;align-items:center;padding:1.3em 3em;border-bottom:1px solid #E5DCD0}
.c-logo{font:600 2em/1 var(--f-sans);font-stretch:125%;letter-spacing:-.04em;text-transform:lowercase}
.c-l{display:flex;gap:2em;font-size:.88em}.c-l b,.c-r b{font-weight:500}
.c-r{display:flex;gap:1.6em;font-size:.88em;align-items:center}.c-cart{background:#B86B4B;color:#fff;padding:.5em 1em;border-radius:2em}
.c-hero{display:grid;grid-template-columns:1fr 1.15fr;min-height:30em}
.c-hl{padding:3.4em;display:grid;align-content:center;gap:1.1em}
.c-hl small{font-size:.75em;letter-spacing:.14em;text-transform:uppercase;color:#7A6E62}
.c-hl h4{font:500 3.3em/1 var(--f-sans);font-stretch:110%;letter-spacing:-.04em;max-width:13ch}
.c-hl p{color:#5E544A;max-width:34ch}
.c-btn{justify-self:start;background:#B86B4B;color:#fff;border-radius:3em;padding:1em 1.8em;font-weight:600;font-size:.9em}
.c-note{font-size:.78em;color:#7A6E62;display:flex;align-items:center;gap:.6em}
.c-note::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#9DAE94}
.c-hr{position:relative}
.c-sec{display:flex;justify-content:space-between;align-items:baseline;padding:3em 3em 1.4em}
.c-sec h5{font:500 2.2em/1 var(--f-sans);font-stretch:110%;letter-spacing:-.04em}.c-sec span{font-size:.85em;text-decoration:underline}
.c-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em;padding:0 3em}
.c-p{display:grid;gap:.3em;font-size:.92em}
.c-img{position:relative;aspect-ratio:1/1.1;border-radius:.6em;margin-bottom:.5em;background:#EFE8DF}
.c-img em{position:absolute;z-index:1;left:.8em;top:.8em;background:#fff;color:#2B2520;font-size:.72em;font-weight:600;padding:.3em .8em;border-radius:2em;font-style:normal}
.c-p b{font-weight:600;font-size:1.05em}.c-p span{color:#7A6E62;font-size:.85em}.c-p i{font-weight:600}
.c-work{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:2em;align-items:center;margin:3em;padding:2.4em 2.8em;border-radius:1.4em;background:#2B2520;color:#EFE8DF}
.c-work small{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.c-work h5{font:500 2em/1.05 var(--f-sans);font-stretch:110%;letter-spacing:-.03em;margin:.2em 0}
.c-work p{opacity:.8;font-size:.9em}
.c-slots{display:flex;gap:.7em}
.c-slots span{flex:1;background:rgba(255,255,255,.08);border-radius:.8em;padding:.8em 1em;font-size:.82em;display:grid;gap:.2em}
.c-slots b{font-weight:600;color:#C9D6C1}
.c-slots span:nth-child(2) b{color:#E3A48A}
/* Outils : nom de marque + type d'écran */
.ex-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.ex-name{display:flex;align-items:center;gap:12px;flex:1;min-width:260px;max-width:560px;background:#fff;border:1px solid var(--os-2);border-radius:999px;padding:6px 6px 6px 18px}
.ex-name span{font-size:13.5px;color:var(--gris);white-space:nowrap}
.ex-name input{flex:1;min-width:0;height:36px;border:0;border-radius:999px;background:var(--os);padding:0 14px;font:600 15px var(--f-sans);color:var(--noir)}
.ex-name input:focus{outline:2px solid var(--klein);outline-offset:1px}
.ex-dev{display:flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--os-2)}
.ex-dev button{border:0;background:transparent;height:36px;padding:0 16px;border-radius:999px;font:600 13.5px var(--f-sans);color:var(--encre);cursor:pointer}
.ex-dev button[aria-pressed="true"]{background:var(--noir);color:#fff}
.ex .bw{transition:max-width .5s cubic-bezier(.2,.8,.2,1)}
.ex.mob .bw{max-width:420px;margin-inline:auto;width:100%}
.ex.mob .bw-view{aspect-ratio:9/16}
.ex.mob .bw-hint{display:none}
@container (max-width:620px){.c-nav{grid-template-columns:1fr auto;padding:1em 1.4em}.c-l{display:none}.c-hero{grid-template-columns:1fr}.c-hr{min-height:18em}.c-hl{padding:1.6em}.c-grid{grid-template-columns:1fr 1fr;padding:0 1.4em}.c-sec{padding:1.8em 1.4em 1em}.c-work{grid-template-columns:1fr;margin:1.8em 1.4em;padding:1.6em}.c-slots{flex-wrap:wrap}.e-hr,.l-hr{min-height:18em}}
@media (max-width:760px){.ex-dev{display:none}.ex-name{max-width:none}.ex-name span{display:none}}
/* Cartes de prix : robustes à toutes les largeurs */
.labels{align-items:stretch}
.label{display:flex;min-width:0}
.label-in{flex:1;min-width:0;grid-template-rows:auto auto auto 1fr auto auto;align-content:start}
.label-top{flex-wrap:wrap;row-gap:4px}
.label-top .mono,.label-top span{white-space:nowrap}
.label h3{font-size:clamp(30px,3vw,40px)}
.price b{font-size:clamp(52px,6vw,92px)}
.label li{overflow-wrap:anywhere}
.label .btn{white-space:normal;text-align:center;height:auto;min-height:48px;padding:12px 18px;line-height:1.2;max-width:100%}
@media (max-width:1180px) and (min-width:901px){.label-in{padding:20px 16px 18px}.labels{gap:12px}.label{padding:8px}}
/* ===== Audit : corrections ===== */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--noir);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.dark-band .manif .calc-note{color:var(--gris)}
.flow-r .st{opacity:.78}.flow-r .st.on{opacity:1}
.tl-s{opacity:.55}.tl-s.on{opacity:1}
.phero-meta .mono{font:500 13px var(--f-sans);letter-spacing:0;text-transform:none;color:var(--encre)}
.form .f label,.form .f .l{font:600 13px var(--f-sans);letter-spacing:0;text-transform:none;color:var(--encre)}
.micro b{color:var(--noir)}

/* ===== Lot audit 2 : contact, pour qui, prix annuels, comparatif ===== */
.vs-w{overflow-x:auto;border-top:2px solid var(--noir)}
table.vs{width:100%;border-collapse:collapse;font-size:15px}
.vs th,.vs td{padding:15px 14px;border-bottom:1px solid var(--os-2);text-align:left;vertical-align:top}
.vs tbody th{font-weight:500;padding-left:0;width:34%}
.vs thead th{font:800 24px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase;padding-block:20px}
.vs td.k,.vs th.k{background:var(--papier)}
.vs thead th.k{color:var(--klein)}
.vs td{color:var(--encre)}
.vs b{color:var(--noir);font-weight:600}
.vs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:620px){.vs tbody th{width:auto}.vs thead th{font-size:18px}table.vs{font-size:14px}.vs th,.vs td{padding:12px 8px}}
.label li b{font-weight:600}
.for-who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 28px;align-items:baseline;margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--os-2)}
.for-who .mono{color:var(--klein)}
.for-who ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.for-who li{border:1px solid var(--os-2);background:var(--papier);border-radius:999px;padding:8px 14px;font-size:14.5px}
@media (max-width:700px){.for-who{grid-template-columns:minmax(0,1fr)}}
.home-toggle{margin-bottom:24px}
.micro a{color:var(--klein);font-weight:500;white-space:nowrap}
.calc-link{grid-column:1/-1;margin:0}
.calc-link a{color:var(--klein-2);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor}
.final-mail{display:block;margin-top:10px;font-size:.95em}
.final-mail a{color:inherit;font-weight:600}
.foot-contact{display:grid;gap:6px;margin:6px 0 0}
.foot-contact span{color:#9D9CA3}
.foot-contact a{color:var(--os);font-weight:500}
.foot-contact .foot-call{color:var(--klein-2)}
/* page comparatif */
.cmp-hero .lede{max-width:60ch}
.cost{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cost article{background:var(--papier);border:1px solid var(--os-2);border-radius:6px;padding:22px;display:grid;gap:12px;align-content:start}
.cost h3{margin:0;font:800 26px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.cost dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;font-size:14.5px}
.cost dt{color:var(--encre)}
.cost dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.cost .tot{border-top:1px solid var(--noir);padding-top:10px;font-weight:700;color:var(--noir)}
.cost .seuil{background:var(--os);border-radius:4px;padding:12px;font-size:14px;color:var(--encre)}
.cost .seuil b{color:var(--klein)}
.when{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.when > div{border-top:2px solid var(--noir);padding-top:16px;display:grid;gap:10px;align-content:start}
.when h3{margin:0;font:800 28px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.when .k h3{color:var(--klein)}
@media (max-width:900px){.cost,.when{grid-template-columns:minmax(0,1fr)}}
.nf{min-height:50vh;display:grid;align-content:center;gap:20px;padding-block:clamp(60px,10vw,140px)}
.nf h1{font-size:clamp(4rem,12vw,10rem)}
.nf ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tabbar>span{color:#62616A}
.calc .calc-link a{color:var(--klein)}
.edit>em{color:#fff;opacity:.92}
/* page À propos */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,90px);align-items:start;padding-block:clamp(40px,6vw,90px)}
.about-card{margin:0;background:var(--noir);color:var(--os);border-radius:6px;aspect-ratio:4/5;max-width:100%;display:grid;grid-template-rows:1fr auto;overflow:hidden;position:relative}
.about-mono{display:grid;place-items:center;padding:12%}.about-mono img{width:min(42%,160px);height:auto}
.about-card figcaption{display:grid;gap:4px;padding:20px 22px;border-top:1px solid #2A2A30}
.about-card figcaption b{font:800 26px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.about-card figcaption span{color:#B4B3B8;font-size:14px}
.about-txt{font-size:clamp(1.05rem,1.3vw,1.2rem)}
@media (max-width:900px){.about{grid-template-columns:minmax(0,1fr)}.about-card{aspect-ratio:16/10}}
.trust-link{color:var(--klein);font-weight:500;white-space:nowrap}
.about-txt{display:grid;gap:20px;max-width:62ch;color:var(--encre)}.about-txt p{margin:0}

/* Maison El Finâq : vignettes produits = photos réelles */
.gift[style*="--c:#D9CDB8"],.gift[style*="--c:#2B2622"],.gift[style*="--c:#111;"]{background:url(img/shop/mef-1.webp) center/cover!important}
.gift[style*="--c:#151515"],.gift[style*="--c:#5A1F1B"]{background:url(img/shop/mef-2.webp) center/cover!important}
.gift[style*="--c:#F2EDE4"],.gift[style*="--c:#EFE9DF"],.gift[style*="--c:#F7F3EC"]{background:url(img/shop/mef-3.webp) center/cover!important}
.gift[style*="--c:#8F7F66"]{background:url(img/shop/mef-4.webp) center/cover!important}
.gift[style*="--c:#E8E1D3"]{background:url(img/shop/mef-story.webp) center/cover!important}
.gift[style*="--c:"]::before,.gift[style*="--c:"]::after{display:none!important}
.gift[style*="--c:"]{box-shadow:none!important}
/* ===== Maison El Finâq : maquettes fidèles au vrai site (brun, crème, caramel) ===== */
.s-efq{background:#FBF7F2;color:#2E231C;--mef-c:#A0704F;--mef-d:#2E231C}
.s-efq .e-nav{grid-template-columns:auto 1fr auto;gap:3em;padding:1.5em 3em;border-bottom:1px solid #EFE4D8;background:#FBF7F2}
.s-efq .e-logo{font:500 1.35em var(--f-serif);letter-spacing:.14em;color:var(--mef-d)}
.s-efq .e-l{justify-content:center;gap:2.6em}.s-efq .e-l b,.s-efq .e-r b{font:700 .72em var(--f-sans);letter-spacing:.1em;text-transform:uppercase}
.s-efq .e-hero{grid-template-columns:1fr 1.05fr;gap:3em;padding:3.4em 4em;min-height:28em;background:linear-gradient(180deg,#FBF7F2,#F6EEE5)}
.s-efq .e-hl{background:none;color:var(--mef-d);padding:0;align-content:center;gap:1.2em}
.s-efq .e-hl::before,.s-efq .e-hl::after{display:none}
.s-efq .e-hl small{background:none;color:var(--mef-c);font:700 .7em var(--f-sans);letter-spacing:.32em;padding:0}
.s-efq .e-hl h4{font:400 4.6em/1 var(--f-serif);font-style:normal;background:none;max-width:none;padding:0}
.s-efq .e-hl p{background:none;color:#4A3B31;font-size:1em;max-width:34ch;line-height:1.6}
.s-efq .e-btns{display:flex;flex-wrap:wrap;gap:.8em}
.s-efq .e-btn{background:var(--mef-d);color:#fff;border-radius:999px;font:700 .68em var(--f-sans);letter-spacing:.08em;padding:1.3em 2.2em}
.s-efq .e-btn.line{background:#fff;color:var(--mef-d);border:1px solid #DCCDBD}
.s-efq .e-hr{background:none;border-radius:1em;overflow:hidden;box-shadow:0 2em 3em -1.6em rgba(59,48,41,.35);min-height:22em}
.s-efq .e-hr img{width:100%;height:100%;object-fit:cover}
.s-efq .e-trust{margin:0 3em;border-color:#EFE4D8;background:#FDFAF6}
.s-efq .e-trust span{display:flex;align-items:center;justify-content:center;gap:.8em;font:700 .68em var(--f-sans);letter-spacing:.08em;color:var(--mef-d)}
.s-efq .e-trust span+span{border-color:#EFE4D8}
.s-efq .e-trust i{display:grid;place-items:center;width:2.6em;height:2.6em;border:1px solid #E3D3C2;border-radius:50%;font-style:normal;color:var(--mef-c)}
.s-efq .e-sec h5{font:400 2.3em var(--f-serif);font-style:normal}.s-efq .e-sec span{color:var(--mef-c)}
.s-efq .e-img{background:#F3EAE0;border-radius:.8em;overflow:hidden}
.s-efq .e-img img{width:100%;height:100%;object-fit:cover}
.s-efq .e-img em{background:var(--mef-d);color:#fff;border-radius:999px;font-family:var(--f-sans);font-weight:600;letter-spacing:.06em}
.s-efq .e-p b{font:500 1.12em var(--f-serif)}.s-efq .e-p span{color:#6E5E52}.s-efq .e-p i{font:600 .95em var(--f-sans);color:var(--mef-d)}
.s-efq .e-p s{color:#A89A8E;font-weight:400;margin-right:.3em}
.s-efq .e-story small{color:var(--mef-c);font-family:var(--f-sans);font-weight:700;letter-spacing:.24em}
.s-efq .e-story h5{font-style:normal}.s-efq .e-story p{color:#4A3B31}
.s-efq .e-story>img{border-radius:1em;object-fit:cover}
.s-efq .e-story .e-btn{justify-self:start}
@media (max-width:900px){.s-efq .e-hero{padding:2em}.s-efq .e-l{display:none}}
.ex.mob .s-efq .e-l{display:none}
/* téléphone du haut de page */
.ps-shop.mef{background:#FBF7F2;color:#2E231C}
.ps-shop.mef .ps-head{border-color:#EFE4D8}
.ps-shop.mef .ps-head b{display:grid;justify-items:center;line-height:1;letter-spacing:.08em;font-weight:500}
.ps-shop.mef .ps-head b small{font:700 .42em var(--f-sans);letter-spacing:.4em;color:#A0704F;margin-bottom:.25em}
.ps-shop.mef .ps-burger i{background:#2E231C}.ps-shop.mef .ps-bag{border-color:#2E231C}
.ps-shop.mef .ps-hero{background:linear-gradient(90deg,#FBF7F2 30%,rgba(251,247,242,.75) 52%,rgba(251,247,242,0) 78%),url(img/shop/mef-hero.webp) 70% center/cover;color:#2E231C;gap:.5em}
.ps-shop.mef .ps-hero::before,.ps-shop.mef .ps-hero::after{display:none}
.ps-shop.mef .ps-hero small{position:relative;font:700 .52em var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:#A0704F}
.ps-shop.mef .ps-hero span{background:none;font:400 2.2em/1 var(--f-serif);font-style:normal}
.ps-shop.mef .ps-hero em{background:#2E231C;color:#fff;border-radius:999px;font:700 .62em var(--f-sans);letter-spacing:.06em}
.ps-shop.mef .ps-title b{font-style:normal;font-weight:500}
.ps-shop.mef .ps-grid img{width:100%;height:auto;aspect-ratio:1/.9;object-fit:cover;border-radius:.5em}
.ps-shop.mef .ps-grid b{font:500 .95em var(--f-serif)}
/* ===== Offre maquette gratuite ===== */
.mq-offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(56px,8vw,120px)}
.mq-tag{color:var(--klein)}
.mq-txt{display:grid;gap:18px;align-content:start}
.mq-txt h2{font-size:clamp(2.8rem,6vw,5.4rem)}
.mq-txt>p{color:var(--encre);max-width:46ch;font-size:1.05rem}
.mq-steps{list-style:none;margin:6px 0;padding:0;display:grid;gap:0;counter-reset:mq;border-top:2px solid var(--noir)}
.mq-steps li{counter-increment:mq;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--os-2)}
.mq-steps li::before{content:"0" counter(mq);grid-row:1/3;font:800 26px/1 var(--f-cond);font-stretch:62%;color:var(--klein)}
.mq-steps b{font-weight:600}.mq-steps span{color:var(--encre);font-size:14.5px}
.mq-note{font-size:13px;color:var(--gris);margin:0}
.mq-visual{position:relative}
.mq-browser{background:var(--papier);border:1px solid var(--os-2);border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,11,13,.35);transform:rotate(-1.2deg)}
.mq-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#ECEAE4;border-bottom:1px solid var(--os-2)}
.mq-bar i{width:9px;height:9px;border-radius:50%;background:#C9C6BE}
.mq-bar span{margin-left:10px;font:500 12px var(--f-mono);background:var(--papier);padding:3px 12px;border-radius:999px;color:var(--encre)}
.mq-page{padding:18px 22px 24px;display:grid;gap:18px;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(1,70,253,.05) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(1,70,253,.05) 23px 24px)}
.mq-nav{display:flex;align-items:center;gap:14px}
.mq-nav b{font:500 15px var(--f-serif);letter-spacing:.2em;margin-right:auto}
.mq-nav span{width:44px;height:6px;border-radius:3px;background:#D8D5CD}
.mq-hero{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.mq-hero>div:first-child{display:grid;gap:10px}
.mq-hero em{font:italic 400 clamp(22px,2.6vw,34px)/1 var(--f-serif);color:var(--noir)}
.mq-hero .l1,.mq-hero .l2{height:7px;border-radius:4px;background:#D8D5CD}.mq-hero .l2{width:70%}
.mq-btn{width:110px;height:28px;border-radius:999px;background:var(--noir);margin-top:6px}
.mq-img{aspect-ratio:4/3;border-radius:8px;border:1.5px dashed #B9B6AE;background:linear-gradient(135deg,#EFEDE7,#E3E0D8)}
.mq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mq-grid span{aspect-ratio:1/1.1;border-radius:6px;border:1.5px dashed #C9C6BE;background:#F3F1EC}
.mq-stamp{position:absolute;right:-6px;top:-14px;background:var(--klein);color:#fff;font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:999px;transform:rotate(4deg);box-shadow:0 10px 24px -10px rgba(1,70,253,.6)}
@media (max-width:900px){.mq-offer{grid-template-columns:minmax(0,1fr)}.mq-visual{order:-1;max-width:560px}}
@media (max-width:520px){.mq-grid{grid-template-columns:repeat(2,1fr)}.mq-nav span{display:none}.mq-stamp{right:4px}}
.btn-ghost-w{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.7)!important}
.btn-ghost-w:hover{background:rgba(255,255,255,.12)!important}
.nav-tel{font-weight:600;text-decoration:none;white-space:nowrap}
@media (max-width:900px){.nav-tel{display:none}}

/* capture réelle (étude de cas, pages métier) */
.shot{margin:0;display:grid;gap:0}
.shot-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#E9E6DF;border:1px solid var(--os-2);border-bottom:0;border-radius:8px 8px 0 0}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#C9C5BC}
.shot-bar span{margin-left:10px;font:500 12px var(--f-mono);color:var(--encre);background:var(--papier);padding:3px 12px;border-radius:999px}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--os-2);border-top:0;border-radius:0 0 8px 8px;box-shadow:0 30px 60px -30px rgba(59,48,41,.35)}
.shot figcaption{font-size:13px;color:var(--gris);margin-top:12px}
.shot figcaption a{color:var(--klein);font-weight:500}

.metier-hero .lede{max-width:60ch}
.feat8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--noir)}
.feat8>div{display:grid;gap:8px;align-content:start;padding:20px 18px 22px 0;border-bottom:1px solid var(--os-2)}
.feat8>div:not(:nth-child(4n+1)){padding-left:18px;border-left:1px solid var(--os-2)}
.feat8 b{font:800 22px/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.feat8 p{margin:0;color:var(--encre);font-size:14.5px}
@media (max-width:900px){.feat8{grid-template-columns:1fr 1fr}.feat8>div:not(:nth-child(4n+1)){padding-left:0;border-left:0}.feat8>div:nth-child(even){padding-left:18px;border-left:1px solid var(--os-2)}}
@media (max-width:520px){.feat8{grid-template-columns:1fr}.feat8>div:nth-child(even){padding-left:0;border-left:0}}
.price-teaser{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;background:var(--papier);border:1px solid var(--os-2);border-radius:8px;padding:clamp(22px,3vw,36px)}
.price-teaser h3{margin:0;font:800 clamp(28px,3vw,40px)/1 var(--f-cond);font-stretch:62%;text-transform:uppercase}
.price-teaser p{margin:8px 0 0;color:var(--encre);max-width:56ch}
.price-teaser .big{font:800 clamp(48px,6vw,72px)/.9 var(--f-cond);font-stretch:62%}
.price-teaser .big small{font:500 14px var(--f-sans);color:var(--gris);margin-left:6px}
@media (max-width:700px){.price-teaser{grid-template-columns:1fr}}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.split2 .txt{display:grid;gap:16px}.split2 .txt p{color:var(--encre);margin:0;max-width:52ch}
@media (max-width:900px){.split2{grid-template-columns:minmax(0,1fr)}}
.for-who li a{color:inherit;text-decoration:none;border-bottom:1px solid var(--klein)}
.lnk-k{color:var(--klein);font-weight:600;text-decoration:none}
.s-efq .e-trust i,.s-efq .e-sec span{color:#8A5E40}
@media (max-width:520px){.mq-grid span:nth-child(n+3){display:none}}
.split2 h2{font-size:clamp(2.6rem,5.4vw,4.8rem);margin:0}
.tl-track{position:relative}
/* mini-maquette de la frise aux couleurs Maison El Finâq */
.tmq{background:#FBF7F2;border-color:#EFE4D8}.tmq-bar{border-color:#EFE4D8;color:#2E231C}
.tmq-hero{background:url(img/shop/mef-hero.webp) center/cover}.tmq-hero::after{display:none}
.tmq-grid i{background:url(img/shop/mef-1.webp) center/cover}.tmq-grid i:nth-child(2){background:url(img/shop/mef-2.webp) center/cover}.tmq-grid i:nth-child(3){background:url(img/shop/mef-3.webp) center/cover}
.av-k img{width:22px;height:auto}