/* Site vitrine KitchenSync — charte Titane (charte-graphique.md).
   Les couleurs de signal (vert, orange, violet, rouge, bleu) ne servent qu'aux statuts illustrés. */
:root{
  --acier:#E5E8EC;--blanc:#FBFCFD;--acier-c:#F1F3F6;--acier-s:#DCE0E6;--filet:#D5DAE1;
  --graphite:#1B222B;--graphite-2:#27313C;--graphite-3:#151B22;--ardoise:#3F4854;--gris:#5B6571;--gris-clair:#9AA4B0;
  --petrole:#0D6A74;--petrole-clair:#5FB8C0;--petrole-pale:#E6F2F3;--corail:#A2493A;--corail-s:#D0705C;
  --vert:#1B8556;--orange:#AD620C;--violet:#6A4FB8;--bleu:#2D5FA8;--teal:#13756F;
  --body:'Manrope',Arial,sans-serif;--mono:'Roboto Mono','Courier New',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--graphite);background:var(--acier);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid var(--petrole-clair);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.wrap-s{max-width:880px;margin:0 auto;padding:0 40px}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--petrole)}
.dark .eyebrow,.eyebrow.clair{color:var(--petrole-clair)}
.mono-note{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris)}
.dark .mono-note{color:var(--gris-clair)}

/* boutons */
.btn{display:inline-block;background:var(--petrole);color:#fff;font-weight:700;font-size:17px;padding:16px 28px;border-radius:12px;border:0;cursor:pointer;font-family:inherit;line-height:1.2;text-align:center;transition:filter .15s}
.btn:hover{filter:brightness(1.1)}
.btn.sm{font-size:15px;padding:12px 22px;border-radius:10px}
.btn.ghost{background:var(--blanc);color:var(--graphite);border:1.5px solid var(--filet)}
.btn.line{background:transparent;color:var(--graphite);border:1.5px solid var(--gris)}
.dark .btn.line{color:#F1F3F6;border-color:var(--gris)}
.btn.noir{background:var(--graphite)}
.btn.outline{background:transparent;border:1.5px solid var(--petrole);color:var(--petrole)}

/* en-tête */
.top{position:relative;z-index:5}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0}
.top .logo img{height:44px;display:block}
.top .logo{flex:none}
.nav-d{display:flex;gap:clamp(14px,1.6vw,26px);white-space:nowrap;font-size:15px;font-weight:600;color:var(--ardoise)}
.nav-d a:hover,.nav-d a[aria-current]{color:var(--petrole)}
.dark .nav-d{color:#DCE0E6}.dark .nav-d a:hover,.dark .nav-d a[aria-current]{color:var(--petrole-clair)}
.nav-m{display:none;position:relative}
.nav-m summary{list-style:none;cursor:pointer;font-weight:700;font-size:15px;padding:11px 18px;border-radius:10px;border:1.5px solid var(--filet);background:var(--blanc)}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m nav{position:absolute;right:0;top:54px;background:var(--blanc);border-radius:14px;box-shadow:0 20px 50px rgba(27,34,43,.25);padding:10px;display:flex;flex-direction:column;min-width:240px;z-index:20}
.nav-m nav a{padding:12px 16px;border-radius:8px;font-weight:600;color:var(--graphite)}
.nav-m nav a:hover{background:var(--acier-c)}
@media(max-width:1180px){.nav-d,.top .cta-d{display:none}.nav-m{display:block}}

/* sections */
section{position:relative}
.dark{background:radial-gradient(ellipse at 30% 20%,var(--graphite-2) 0%,var(--graphite) 55%,var(--graphite-3) 100%);color:#F1F3F6}
.band{background:var(--graphite);color:#F1F3F6}
.light-bg{background:radial-gradient(ellipse at 50% 0%,var(--acier-c) 0%,var(--acier) 50%,var(--acier-s) 100%)}
.pad{padding:88px 0}.pad-s{padding:56px 0}
.t-xl{font-size:68px;line-height:1.02;letter-spacing:-2.4px}
.t-l{font-size:56px;line-height:1.05;letter-spacing:-2px}
.t-m{font-size:42px;line-height:1.1;letter-spacing:-1.3px}
.t-s{font-size:34px;line-height:1.12;letter-spacing:-1px}
.lead{font-size:20px;line-height:1.6;color:var(--ardoise)}
.dark .lead,.band .lead{color:#DCE0E6}
.center{text-align:center}.mx{margin-left:auto;margin-right:auto}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt48{margin-top:48px}
.max6{max-width:640px}.max7{max-width:760px}.max9{max-width:960px}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.row.c{justify-content:center}
.split{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.split>*{flex:1 1 440px;min-width:0}
.split.rev{flex-wrap:wrap-reverse}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}.wrap,.wrap-s{padding:0 20px}.t-xl{font-size:44px;letter-spacing:-1.4px}.t-l{font-size:38px;letter-spacing:-1.2px}.t-m{font-size:31px}.t-s{font-size:27px}.pad{padding:60px 0}.lead{font-size:18px}}

/* cartes et listes */
.card{background:var(--blanc);border-radius:18px;padding:30px;box-shadow:0 10px 28px rgba(27,34,43,.08)}
.card h3{font-size:21px;letter-spacing:-.4px}
.card p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--ardoise)}
.card.noir{background:var(--graphite);color:#F1F3F6}.card.noir p{color:#DCE0E6}
.card.pet{background:var(--petrole);color:#fff}.card.pet p{color:#E6F2F3}
.ico{width:56px;height:56px;border-radius:14px;background:var(--petrole-pale);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ico svg{width:28px;height:28px;fill:none;stroke:var(--petrole);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.d{background:var(--graphite)}.ico.d svg{stroke:var(--corail-s)}
.li{display:flex;gap:12px;margin-top:10px;font-size:16px;line-height:1.5}
.li:before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--petrole);margin-top:8px}
.dark .li:before,.band .li:before,.card.noir .li:before{background:var(--petrole-clair)}
.card.pet .li:before{background:#fff}
.num{flex:none;width:44px;height:44px;border-radius:12px;background:var(--petrole-pale);color:var(--petrole);font-family:var(--mono);font-weight:600;display:flex;align-items:center;justify-content:center}
.step{display:flex;gap:18px;align-items:flex-start}
.step b{font-size:20px}.step p{margin-top:4px;font-size:16px;color:var(--ardoise)}
.rule3{border-top:3px solid var(--petrole);padding-top:16px}.rule3 b{font-size:18px;display:block}.rule3 p{margin-top:8px;font-size:15.5px;color:var(--ardoise)}

/* frise des statuts */
.frise{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.frise div{flex:1 1 120px;min-width:110px;text-align:center;font-size:14px;font-weight:700}
.frise i{display:block;height:8px;border-radius:4px;margin-bottom:12px}
.s-bleu{background:var(--bleu)}.s-orange{background:var(--orange)}.s-violet{background:var(--violet)}.s-teal{background:var(--teal)}.s-vert{background:var(--vert)}.s-petrole{background:var(--petrole)}.s-noir{background:var(--graphite)}
.illu{background:var(--blanc);border-radius:20px;padding:26px;box-shadow:0 18px 44px rgba(27,34,43,.10)}
.illu.noir{background:var(--graphite);color:#F1F3F6}
.illu .rowl{display:flex;justify-content:space-between;background:var(--acier-c);border-radius:10px;padding:12px 14px;font-size:14px;font-weight:600;margin-top:9px}

/* vidéos */
.video-box{position:relative;border-radius:22px;overflow:hidden;background:var(--graphite);box-shadow:0 30px 70px rgba(27,34,43,.3);aspect-ratio:16/9}
.video-box video{width:100%;height:100%;display:block;object-fit:cover;background:var(--graphite)}
.vcard{display:block;background:var(--blanc);border-radius:18px;overflow:hidden;box-shadow:0 12px 32px rgba(27,34,43,.09)}
.vcard video{width:100%;display:block;aspect-ratio:16/9;background:var(--graphite)}
.vcard .b{padding:16px 20px 22px}
.vcard .tag{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--petrole);text-transform:uppercase;margin-bottom:6px}
.vcard .t{font-weight:700;font-size:18px;letter-spacing:-.3px}
.vcard .d{font-size:14.5px;color:var(--gris);margin-top:6px;line-height:1.5}
.vcard .m{font-family:var(--mono);font-size:12px;color:var(--gris);margin-top:8px}
.dark .vcard{box-shadow:none}

/* téléphones */
.phone{border-radius:58px;overflow:hidden;box-shadow:0 34px 70px rgba(27,34,43,.34)}
.phone img{width:100%;display:block}
.phones{display:flex;gap:26px;justify-content:center;align-items:flex-end}
.phones .phone{width:min(236px,38vw)}
.phone-css{width:260px;max-width:100%;border-radius:44px;background:var(--graphite);padding:9px;box-shadow:0 34px 70px rgba(27,34,43,.34)}
.phone-css .scr{border-radius:36px;background:var(--blanc);padding:22px 16px 24px;min-height:470px;color:var(--graphite)}
.phone-css .bloc{margin-top:12px;background:var(--acier-c);border-radius:14px;padding:14px}
.phone-css .bloc small{font-size:13px;color:var(--gris);display:block}
.phone-css .bloc strong{font-size:20px;display:block;margin-top:2px}
.phone-css .bt{margin-top:12px;background:var(--petrole);color:#fff;text-align:center;font-weight:700;font-size:14px;padding:11px;border-radius:10px}
.phone-css .bt.o{background:none;border:1.5px solid var(--petrole);color:var(--petrole);padding:9px;margin-top:8px}
.phone-css .ok{margin-top:8px;font-size:13px;color:var(--vert);font-weight:600}
.bandeau-tel{background:radial-gradient(ellipse at 30% 20%,var(--graphite-2) 0%,var(--graphite) 60%,var(--graphite-3) 100%);color:#F1F3F6;border-radius:30px;padding:56px 56px 0;overflow:hidden;box-shadow:0 30px 70px rgba(27,34,43,.28)}
.bandeau-tel .phones .phone{border-radius:52px 52px 0 0;box-shadow:none;width:min(210px,38vw)}
@media(max-width:620px){.bandeau-tel{padding:36px 22px 0;border-radius:22px}}

/* schéma magasin / téléphone */
.sync{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.sync .box{flex:1 1 300px;border-radius:20px;padding:28px}
.sync .box.a{background:var(--acier)}.sync .box.b{background:var(--graphite);color:#F1F3F6}
.sync .box b{font-size:20px;display:block}.sync .box small{display:block;color:var(--gris);margin-top:4px;font-size:14px}.sync .box.b small{color:var(--gris-clair)}
.sync .mid{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--petrole);font-weight:600}
@media(max-width:900px){.sync .mid{flex:1 1 100%;flex-direction:row}}

/* tarifs */
.plans{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.plan{flex:1 1 290px;min-width:0;background:var(--blanc);border-radius:22px;padding:36px 32px;box-shadow:0 14px 36px rgba(27,34,43,.09);display:flex;flex-direction:column;position:relative}
.plan h3{font-size:26px;letter-spacing:-.6px}
.plan .sub{font-size:15px;color:var(--gris);margin-top:6px}
.plan .prix{margin:18px 0 4px;font-size:46px;font-weight:700;letter-spacing:-1.5px;color:var(--petrole);line-height:1.1}
.plan .prix small{font-size:18px;color:var(--gris);letter-spacing:0;font-weight:600}
.plan .per{font-size:14px;color:var(--gris)}
.plan .liste{border-top:1px solid var(--filet);margin-top:22px;padding-top:6px;flex:1}
.plan .btn{margin-top:28px}
.plan.star{background:var(--graphite);color:#F1F3F6;box-shadow:0 30px 70px rgba(27,34,43,.32)}
.plan.star .prix{color:var(--petrole-clair)}.plan.star .sub,.plan.star .per,.plan.star .prix small{color:var(--gris-clair)}.plan.star .liste{border-color:#37434F}
.plan.star .li:before{background:var(--petrole-clair)}
.badge{position:absolute;top:-14px;left:32px;background:var(--petrole);color:#fff;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:99px}

/* FAQ */
.faq h2{font-size:26px;letter-spacing:-.6px;margin:48px 0 16px}
.faq details{background:var(--blanc);border-radius:16px;padding:0;margin-top:12px;box-shadow:0 8px 22px rgba(27,34,43,.06)}
.faq summary{list-style:none;cursor:pointer;padding:22px 28px;font-weight:700;font-size:18px;letter-spacing:-.3px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--petrole);font-size:24px;line-height:1;font-weight:700}
.faq details[open] summary:after{content:"–"}
.faq .rep{padding:0 28px 24px;color:var(--ardoise);font-size:16.5px;line-height:1.65}
.faq .rep p+p{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{background:var(--blanc);border:1.5px solid var(--filet);border-radius:99px;padding:9px 18px;font-size:14.5px;font-weight:600}
.chips a:hover{border-color:var(--petrole);color:var(--petrole)}

/* formulaire */
form.contact{background:var(--blanc);border-radius:24px;padding:40px;box-shadow:0 24px 60px rgba(27,34,43,.12);display:flex;flex-direction:column;gap:18px}
form.contact label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ardoise)}
form.contact input,form.contact textarea{width:100%;font:inherit;font-size:16px;padding:14px 16px;border-radius:10px;border:1.5px solid var(--filet);background:#fff;color:var(--graphite)}
form.contact input:focus,form.contact textarea:focus{border-color:var(--petrole);outline:none;box-shadow:0 0 0 3px var(--petrole-pale)}
form.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg-ok{background:var(--petrole-pale);color:#0B5961;border-radius:12px;padding:18px 20px;font-weight:600}
.msg-ko{background:#FBE9E9;color:#8A2626;border-radius:12px;padding:16px 20px;font-weight:600}
[hidden]{display:none!important}

/* pied */
.foot{background:var(--graphite-3);color:var(--gris-clair);font-size:14px;padding:30px 0}
.foot .in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a:hover{color:#fff}
.legal h2{font-size:24px;margin:36px 0 10px;letter-spacing:-.4px}
.legal p,.legal li{color:var(--ardoise);font-size:16.5px;line-height:1.7}
.legal p+p{margin-top:10px}.legal ul{margin:8px 0;padding-left:22px}

/* ── Titre d'accueil : les mots arrivent un à un, « contrôle. » tombe du ciel et s'écrase ── */
.hero-title{position:relative}
.hero-title .w{display:inline-block}
.hero-title .drop-wrap{position:relative;display:inline-block}
.hero-title .drop{display:inline-block;transform-origin:50% 100%;color:var(--petrole)}
.hero-title .shock,.hero-title .deb{display:none}
@media(prefers-reduced-motion:no-preference){
  html:not(.skip-anim) .hero-title .w{opacity:0;transform:translateY(18px);animation:motIn .55s cubic-bezier(.2,.75,.25,1) forwards}
  html:not(.skip-anim) .hero-title .w1{animation-delay:.15s}
  html:not(.skip-anim) .hero-title .w2{animation-delay:.33s}
  html:not(.skip-anim) .hero-title .w3{animation-delay:.51s}
  html:not(.skip-anim) .hero-title .w4{animation-delay:.69s}
  html:not(.skip-anim) .hero-title .w5{animation-delay:1.0s}
  html:not(.skip-anim) .hero-title .w6{animation-delay:1.18s}
  html:not(.skip-anim) .hero-title .drop{opacity:0;animation:chute 1.5s linear 1.75s forwards}
  html:not(.skip-anim) .hero-title .shock,html:not(.skip-anim) .hero-title .deb{display:block}
  html:not(.skip-anim) .hero-title .shock{position:absolute;left:50%;bottom:4px;width:30px;height:12px;margin-left:-15px;border:4px solid rgba(13,106,116,.55);border-radius:50%;opacity:0;animation:onde .75s ease-out 2.62s forwards;pointer-events:none}
  html:not(.skip-anim) .hero-title .deb{position:absolute;left:50%;bottom:10px;width:9px;height:9px;margin-left:-4px;background:var(--graphite);border-radius:2px;opacity:0;pointer-events:none;animation:debris .8s cubic-bezier(.2,.6,.4,1) 2.62s forwards}
  html:not(.skip-anim) .hero-title .deb.d1{--dx:-190px;--dy:-70px;--r:-200deg;background:var(--petrole)}
  html:not(.skip-anim) .hero-title .deb.d2{--dx:-110px;--dy:-120px;--r:160deg}
  html:not(.skip-anim) .hero-title .deb.d3{--dx:-40px;--dy:-150px;--r:-120deg;background:var(--corail)}
  html:not(.skip-anim) .hero-title .deb.d4{--dx:50px;--dy:-140px;--r:140deg;background:var(--petrole)}
  html:not(.skip-anim) .hero-title .deb.d5{--dx:125px;--dy:-100px;--r:-170deg}
  html:not(.skip-anim) .hero-title .deb.d6{--dx:200px;--dy:-60px;--r:210deg;background:var(--corail)}
  html:not(.skip-anim) .hero-secousse{animation:secousse .5s linear 2.62s}
  html:not(.skip-anim) .hero-fade{opacity:0;animation:motIn .7s ease-out 3.0s forwards}
}
@keyframes motIn{to{opacity:1;transform:none}}
@keyframes chute{
  0%{opacity:0;transform:translateY(-78vh) rotate(-9deg) scale(1.35);filter:blur(7px);animation-timing-function:cubic-bezier(.55,0,.95,.55)}
  7%{opacity:1}
  58%{opacity:1;transform:translateY(0) rotate(0) scale(1);filter:blur(0);animation-timing-function:ease-out}
  62%{transform:translateY(0) scale(1.16,.74)}
  76%{transform:translateY(-30px) scale(.97,1.06);animation-timing-function:ease-in}
  88%{transform:translateY(0) scale(1.05,.94);animation-timing-function:ease-out}
  94%{transform:translateY(-6px) scale(1)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes secousse{
  0%{transform:translate(0,0)}12%{transform:translate(-9px,6px)}24%{transform:translate(8px,-5px)}36%{transform:translate(-6px,4px)}
  50%{transform:translate(5px,-3px)}64%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}100%{transform:translate(0,0)}
}
@keyframes onde{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(11,3.4)}}
@keyframes debris{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  55%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 60px)) rotate(var(--r))}
}

.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;color:#1B222B;padding:10px 14px;border-radius:8px;z-index:50}

/* Captures du logiciel (magasin fictif Horizon Cuisines) */
.shot{margin:0;border-radius:16px;overflow:hidden;background:var(--blanc);box-shadow:0 18px 44px rgba(27,34,43,.16);border:1px solid rgba(27,34,43,.08)}
.dark .shot{border-color:rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:10px 16px;font-size:13px;color:var(--ardoise);background:var(--blanc);border-top:1px solid rgba(27,34,43,.08)}
.card .shot{margin-top:20px;box-shadow:0 8px 22px rgba(27,34,43,.12)}
.card.large{grid-column:1/-1}
.shot-note{margin-top:10px;font-size:13px;color:var(--ardoise)}
.card.large>.split>div:last-child{flex:1.7 1 520px}

.lang{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;border:1.5px solid var(--filet);border-radius:8px;padding:5px 10px;line-height:1}
.dark .lang{border-color:rgba(255,255,255,.25)}
.nav-m nav a.lang{align-self:flex-start;margin:6px 16px 8px}

.portrait-wrap{flex:0 1 400px}.portrait{max-width:400px;margin-inline:auto}

.avis-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.avis-c{margin:0;border:1px solid var(--filet);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--blanc);min-width:0}
.avis-c.wide{grid-column:span 2}
@media(max-width:700px){.avis-c.wide{grid-column:auto}}
.tag-m{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#0D6A74;background:rgba(13,106,116,.1);padding:4px 9px;border-radius:6px}
.avis-k{margin:0;font-weight:800;font-size:18px;line-height:1.35;text-wrap:balance}
.avis-c p{margin:0}
.avis-c figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.avis-c figcaption b{display:block;font-size:15px}
.avis-c figcaption small{display:block;font-size:13px;color:var(--gris)}
.avis-i{flex:none;width:42px;height:42px;border-radius:50%;background:#0D6A74;color:#fff;display:grid;place-items:center;font-weight:800}

/* page /demo (annonces) : phrases de problèmes et liste de garanties */
.dark .chips span{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:99px;padding:8px 16px;font-size:14.5px;font-weight:600;color:#E9ECF0}
.coches{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.coches li{position:relative;padding-left:34px;color:#DCE0E6;font-size:17px;line-height:1.5}
.coches li:before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;background:var(--petrole-clair) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%231B222B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat}
@media(max-width:700px){.dark .t-l{font-size:40px;letter-spacing:-1.4px}}

.dark form.contact{color:var(--graphite)}
.dark form.contact h2{color:var(--graphite)}
.dark form.contact a{color:var(--petrole)}
@media(max-width:900px){
  .demo-split{flex-direction:column;flex-wrap:nowrap;gap:22px;align-items:stretch}
  .demo-split>div:first-child{display:contents}
  .demo-split>*{flex:0 0 auto;width:100%}
  .demo-split>div:last-child{order:1}
  .demo-split .probleme{order:2;margin-top:8px}
  .demo-split .coches{order:3;margin-top:8px}
  .dark .chips span{font-size:13.5px;padding:6px 13px}
  .demo-split .lead{font-size:18px}
  form.contact{padding:28px 22px}
}

/* bandeau de consentement aux cookies (consent.js) : refuser aussi visible qu'accepter */
.ks-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:920px;margin:0 auto;background:var(--graphite);color:#F1F3F6;border-radius:16px;padding:20px 24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:0 20px 60px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14)}
.ks-cookies-t{flex:1 1 380px;min-width:0}
.ks-cookies-t b{display:block;font-size:16px}
.ks-cookies-t p{margin-top:6px;font-size:14px;line-height:1.5;color:#DCE0E6}
.ks-cookies-t a{text-decoration:underline;color:var(--petrole-clair)}
.ks-cookies-b{display:flex;gap:10px;flex:0 0 auto}
.ks-cookies-b button{font:inherit;font-weight:700;font-size:15px;min-width:120px;padding:12px 22px;border-radius:10px;border:1.5px solid #F1F3F6;background:#F1F3F6;color:var(--graphite);cursor:pointer}
.ks-cookies-b button:hover{filter:brightness(.94)}
.lien-cookies{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
@media(max-width:600px){.ks-cookies{padding:16px;left:10px;right:10px;bottom:10px}.ks-cookies-b{width:100%}.ks-cookies-b button{flex:1}}

/* Accueil : le texte centré par-dessus une cuisine tracée au crayon qui devient un rendu 3D (assets/hero-cuisine.js).
   Le dessin remplit toute la largeur et se fond vers le bas dans le fond de la page. */
.hero-stage{position:relative;min-height:clamp(900px,76vw,1120px)}
.hero-stage>.wrap{position:relative;z-index:3}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#F3F0E8;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%)}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 36% at 50% 29%,rgba(243,240,232,.94) 0%,rgba(243,240,232,.86) 38%,rgba(243,240,232,.45) 66%,rgba(243,240,232,0) 100%)}
.hero-stage .t-xl{font-size:clamp(38px,5vw,68px)}
.hero-stage + .wrap{margin-top:-40px;position:relative;z-index:2}
.hero-replay{position:absolute;z-index:6;right:max(20px,calc(50vw - 580px));bottom:70px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--filet);background:rgba(251,252,253,.92);color:var(--graphite);font:700 13px var(--body);cursor:pointer;opacity:0;transition:opacity .4s}
html:not(.hero-pret) .hero-replay{display:none}
.hero-stage:hover .hero-replay,.hero-replay:focus-visible{opacity:1}
@media(max-width:900px){.hero-replay{opacity:1;bottom:56px}.hero-veil{background:radial-gradient(ellipse 100% 46% at 50% 30%,rgba(243,240,232,.95) 0%,rgba(243,240,232,.85) 50%,rgba(243,240,232,0) 100%)}}
@media(max-width:700px){.hero-stage{min-height:1060px}.hero-stage .t-xl{font-size:38px}}
@media(prefers-reduced-motion:reduce){.hero-replay{display:none}}
.nav-d .lang+.lang{margin-left:6px}