:root{
  --red:#D8232C; --ink:#0E1522; --paper:#F6F4EF; --paper2:#ECE9E1; --graphite:#5a6170; --line:#c9c5ba;
  --f-display:"Bebas Neue",Impact,sans-serif; --f-body:"Barlow",system-ui,sans-serif; --f-hand:"Caveat",cursive;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:.02em;line-height:.95}
h2{font-size:clamp(2.6rem,6vw,4.6rem)}
.hand{font-family:var(--f-hand);color:var(--red);font-size:1.6rem;line-height:1}
.eyebrow{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--graphite);font-weight:600}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:999}

/* header */
header.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:.35s;padding:1rem 0}
header.top.scrolled{background:rgba(246,244,239,.92);backdrop-filter:blur(10px);padding:.55rem 0;box-shadow:0 1px 0 var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand img{height:44px;transition:.3s}.scrolled .brand img{height:36px}
nav ul{display:flex;gap:1.8rem;list-style:none;padding:0}
nav a{text-decoration:none;font-weight:600;font-size:.9rem;position:relative;padding:.3rem 0}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:.3s}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--red);color:#fff;padding:.9rem 1.6rem;border:2px solid var(--red);font:600 .95rem var(--f-body);text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:.25s}
.btn:hover{background:var(--ink);border-color:var(--ink);transform:translateX(4px)}
.btn.ghost{clip-path:none;background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.head-actions{display:flex;align-items:center;gap:.7rem}
.head-social{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;color:var(--ink);transition:.2s}.head-social:hover{background:var(--red);border-color:var(--red);color:#fff}.head-social svg{width:22px;height:22px}

/* hero */
.hero{min-height:100svh;position:relative;display:grid;align-items:center;padding:7rem 0 4rem;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:2rem;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,7vw,6rem);margin:.8rem 0 1.2rem}
.hero h1 em{font-style:normal;color:var(--red);display:inline-block;position:relative}
.hero h1 em .w{display:inline-block;animation:inkIn .9s .15s cubic-bezier(.7,0,.2,1) both}
.hero h1 em svg{position:absolute;left:0;bottom:-.1em;width:100%;height:.25em;overflow:visible}
.hero h1 em path{stroke:var(--red);stroke-width:5;fill:none;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.2s .9s forwards}
.hero p.lead strong{color:var(--ink);font-weight:600}.hero p.lead span{display:block;margin-top:.3rem;font-size:1rem;color:var(--graphite)}
.hero p.lead{max-width:44ch;font-size:1.15rem;color:#2b3342;margin-bottom:2rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;border:1px solid var(--line);padding:.4rem .9rem;border-radius:99px;background:#fff9}
.dot{width:10px;height:10px;border-radius:50%;background:#999;position:relative}
.status.open .dot{background:#1f9d55}.status.open .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #1f9d55;animation:ping 1.8s infinite}
.status.closed .dot{background:var(--red)}
.sketch{position:relative;aspect-ratio:1/.8;transform-style:preserve-3d;transition:transform .15s}
.sketch .frames{position:absolute;inset:0;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);}
.sketch .f{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 2s cubic-bezier(.45,0,.25,1)}
.sketch .f.on{opacity:1}
.sketch .reveal-wipe{display:none}
.sketch .note{position:absolute;font-family:var(--f-hand);font-size:1.5rem;color:var(--red);opacity:0;animation:fadeIn .8s forwards;white-space:nowrap}
.sketch .note svg{display:block;width:54px;height:36px;stroke:var(--red);fill:none;stroke-width:2}
.n1{left:2%;top:6%;animation-delay:2s!important}.n2{right:0;bottom:12%;animation-delay:2.4s!important}
.big-wheel{position:absolute;right:-18vw;bottom:-20vw;width:52vw;opacity:.09;z-index:1;pointer-events:none}
.scrollhint{position:absolute;bottom:1.5rem;left:50%;translate:-50% 0;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--graphite);z-index:2}
.scrollhint::after{content:"";display:block;width:1px;height:34px;background:var(--ink);margin:.5rem auto 0;animation:drop 1.6s infinite}

/* marquee */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:1rem 0;transform:skewY(-1.2deg);margin:3rem 0}
.marquee div{display:flex;gap:3rem;width:max-content;animation:slide 28s linear infinite;font:2rem var(--f-display);letter-spacing:.08em;white-space:nowrap}
.marquee span::after{content:"✦";color:var(--red);margin-left:3rem}
.marquee:hover div{animation-play-state:paused}

section{padding:6rem 0;position:relative}
.head{margin-bottom:3rem;max-width:720px}
.head h2{margin:.6rem 0 1rem}
.head p{color:#2b3342}

/* services interactive */
.machines{display:grid;grid-template-columns:240px 1fr;gap:3rem;align-items:start}
.tabs{display:flex;flex-direction:column;gap:.4rem}
.tab{all:unset;cursor:pointer;font:2rem var(--f-display);letter-spacing:.04em;padding:.5rem 1rem;border:1px solid transparent;color:var(--graphite);transition:.25s}
.tab:hover{color:var(--ink);padding-left:1.4rem}
.tab[aria-selected=true]{border-color:var(--ink);color:var(--ink);padding-left:1.6rem;background:#fff;box-shadow:5px 5px 0 var(--red)}
.tab:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.panel{background:#fff;border:1px solid var(--line);padding:2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;position:relative;min-height:360px;box-shadow:10px 10px 0 var(--paper2)}
.panel[hidden]{display:none}
.panel.in{animation:panelIn .5s both}
.panel h3{font-size:3rem;margin-bottom:.8rem}
.panel ul{list-style:none;padding:0;margin:1.2rem 0}
.panel li{padding:.45rem 0 .45rem 1.6rem;border-bottom:1px dashed var(--line);position:relative}
.panel li::before{content:"";position:absolute;left:0;top:1rem;width:10px;height:10px;border:2px solid var(--red);border-radius:50%}
.panel .viz{display:grid;place-items:center}
.panel .viz svg{width:100%;max-width:300px;overflow:visible}
.spin{transform-origin:center;animation:spin 14s linear infinite}
.panel:hover .spin{animation-duration:2.5s}
.tire-label{font-family:var(--f-hand);fill:var(--red);font-size:20px}

/* prestations */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.card{background:#fff;border:1px solid var(--line);padding:2rem;position:relative;transition:.35s;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--red);transition:.4s}
.card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 20px 30px -18px #0e152255}
.card:hover::before{width:100%}
.card svg{width:54px;height:54px;stroke:var(--ink);fill:none;stroke-width:1.6;margin-bottom:1.2rem}
.card:hover svg{stroke:var(--red)}
.card h3{font-size:1.8rem;margin-bottom:.5rem}.card p{font-size:.95rem;color:#3b4354}
.num{position:absolute;right:1rem;top:.4rem;font:4rem var(--f-display);color:var(--paper2)}

/* process */
.process{background:var(--ink);color:#fff}
.process .eyebrow{color:#9aa3b5}.process .head p{color:#c3c9d6}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative}
.steps::before{content:"";position:absolute;top:34px;left:6%;right:6%;border-top:2px dashed #ffffff40}
.step{position:relative}
.step b{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--ink);border:2px solid var(--red);font:2rem var(--f-display);margin-bottom:1rem;transition:.3s}
.step:hover b{background:var(--red);transform:rotate(180deg)}
.step h3{font-size:1.7rem;margin-bottom:.4rem}.step p{font-size:.92rem;color:#c3c9d6}

/* horaires */
.hours{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.table{background:#fff;border:1px solid var(--line);padding:2rem}
.table li{list-style:none;display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.table li:last-child{border:0}
.table li.today{color:var(--red);font-weight:700}
.table .msg{color:var(--graphite)}
.callout{background:var(--red);color:#fff;padding:2.5rem;position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.callout h3{font-size:2.6rem;margin-bottom:.6rem}
.callout a.tel{display:block;font:3.2rem var(--f-display);text-decoration:none;margin:1rem 0;letter-spacing:.04em}
.callout .hand{color:#fff;opacity:.85}
.callout .btn{background:#fff;color:var(--red);border-color:#fff}.callout .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* location */
.loc{background:var(--paper2);overflow:hidden}
.loc .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.mapframe{border:1px solid var(--ink);box-shadow:12px 12px 0 var(--red);aspect-ratio:4/3;background:#fff}
.mapframe iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.mapframe:hover iframe{filter:none}

/* footer */
footer{background:#444;color:#d2d2d2;padding:3rem 0 2rem;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
footer img{height:46px;filter:brightness(0) invert(1);margin-bottom:.8rem}
footer a{text-decoration:none}footer a:hover{color:#fff;text-decoration:underline}
footer .social{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid #ffffff55;border-radius:50%;color:#fff;transition:.2s}footer .social:hover{background:var(--red);border-color:var(--red);text-decoration:none}footer .social svg{width:22px;height:22px}
footer small a{color:#c8c8c8;font-weight:400;text-decoration:underline;text-decoration-color:#ffffff55;text-decoration-thickness:1px;text-underline-offset:3px}footer small a::after{content:none}footer small a:hover{color:#fff;text-decoration-color:#fff}
footer small{width:100%;border-top:1px solid #ffffff22;padding-top:1.2rem;color:#a0a0a0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem}

/* contact */
.page-hero{padding:9rem 0 2rem}
.page-hero h1{font-size:clamp(3.4rem,9vw,7rem);margin:.6rem 0}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;padding-bottom:6rem}
form{background:#fff;border:1px solid var(--line);padding:2.5rem;box-shadow:10px 10px 0 var(--paper2)}
.field{position:relative;margin-bottom:1.6rem}
.field label{display:block;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-bottom:.35rem;color:var(--graphite)}
.field input,.field select,.field textarea{width:100%;font:1rem var(--f-body);color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:.6rem 0;outline:0;border-radius:0;transition:.25s}
.field textarea{min-height:140px;resize:vertical;border:2px solid var(--line);padding:.8rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips input{position:absolute;opacity:0}
.chips label{margin:0;cursor:pointer;border:1.5px solid var(--ink);padding:.45rem 1rem;border-radius:99px;font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--ink);transition:.2s}
.chips label:hover{background:var(--paper2)}
.chips input:checked+label{background:var(--ink);color:#fff}
.chips input:focus-visible+label{outline:2px solid var(--red);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.feedback{margin-top:1rem;padding:1rem;border:1.5px solid;display:none}
.feedback.ok{display:block;border-color:#1f9d55;background:#1f9d5514}
.feedback.err{display:block;border-color:var(--red);background:#d8232c12}
.side .callout{margin-bottom:1.5rem}
.side .table{padding:1.5rem}
button[disabled]{opacity:.6;cursor:wait}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* Thème épuré */
:root{--paper:#FFFFFF;--paper2:#F5F5F3;--line:#E3E3E0;--graphite:#6b7280}
body::before{display:none}
.hand{font-family:var(--f-body);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--graphite)}
.callout .hand{color:#fff}
.btn,.callout{clip-path:none}
.btn{border-radius:2px}
.marquee{transform:none;margin:0;background:var(--paper2);color:var(--ink);border-block:1px solid var(--line)}
.marquee div{font-size:1.3rem;color:var(--graphite)}
section{padding:7rem 0}
.panel,form,.mapframe,.tab[aria-selected=true]{box-shadow:none}
.panel{grid-template-columns:1fr;min-height:0;border-radius:2px}
.panel p{max-width:52ch}
.card{border-radius:2px}
.card:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.num{display:none}
.mapframe{border-color:var(--line)}
.tab[aria-selected=true]{border-color:var(--line);border-bottom:2px solid var(--red)}
.callout{border-radius:2px}
.hero{background:#fff}
/* Rondeurs */
:root{--r:18px}
.btn{border-radius:99px}
.card,.panel,form,.table,.callout,.mapframe{border-radius:var(--r)}
.mapframe,.table{overflow:hidden}
.field input,.field select{border-radius:0}
.field textarea{border-radius:12px}
.tab{border-radius:12px}
.tab[aria-selected=true]{border-radius:12px}
.status,.chips label{border-radius:99px}
.marquee{border-radius:0}
.step b{border-radius:50%}
.feedback{border-radius:12px}
.skip:focus{border-radius:8px}
.sketch img{border-radius:var(--r)}
@keyframes inkIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes wipe{to{transform:scaleX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes panelIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .hero .wrap,.machines,.panel,.hours,.loc .wrap,.contact-grid{grid-template-columns:1fr}
  .tabs{flex-direction:row;overflow-x:auto}.tab{font-size:1.6rem;padding:.4rem .8rem;white-space:nowrap}
  .tab[aria-selected=true]{padding-left:.8rem}
  .cards{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}
  .row2{grid-template-columns:1fr}
  .scrollhint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .rv{opacity:1;transform:none}.hero h1 em path{stroke-dashoffset:0}
}























.tab{display:flex;align-items:center;gap:.7rem}
.tab .ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.tab:hover .ico,.tab[aria-selected=true] .ico{stroke:var(--red)}

/* Formulaire moderne */
form{padding:2.5rem;box-shadow:0 24px 50px -30px #0e152244}
.legend{font-size:.85rem;color:var(--graphite);margin:0 0 1.6rem;line-height:1.5}.legend em{font-style:normal;font-weight:600;color:var(--ink)}
.req{color:var(--red);font-weight:700;margin-left:.1em}
.field label{font-size:.82rem;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--ink);margin-bottom:.45rem}
.field input,.field select,.field textarea{background:#f7f7f5;border:1.5px solid transparent;border-radius:12px;padding:.85rem 1rem;transition:border-color .2s,background .2s,box-shadow .2s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--red);box-shadow:0 0 0 4px #d8232c1a}
.field input::placeholder,.field textarea::placeholder{color:#a3a8b2}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--red);background:#fff6f6}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;background:#f7f7f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center/18px}
.field select:focus{background-color:#fff}
.field textarea{min-height:150px;border-radius:12px}
.chips label{background:#f7f7f5;border:1.5px solid transparent;font-weight:600}
.chips label:hover{border-color:var(--ink);background:#fff}
.chips input:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
form .btn{display:inline-flex;align-items:center;gap:.7rem;margin-top:.4rem}
form .btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
form .btn:hover svg{transform:translateX(4px)}
/* Messages d'erreur du formulaire */
.field .err{display:flex;align-items:center;gap:.45rem;margin:.45rem 0 0;font-size:.85rem;font-weight:600;color:var(--red);animation:errIn .25s ease}
.field .err::before{content:"!";flex:none;display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--red);color:#fff;font-size:.75rem;line-height:1}
.field.bad input,.field.bad textarea{border-color:var(--red);background:#fff6f6}
.field.bad input:focus,.field.bad textarea:focus{box-shadow:0 0 0 4px #d8232c1a}
.field.bad label{color:var(--red)}
@keyframes errIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Navigation mobile : barre en haut, effet liquid glass, sans hamburger */
nav a svg,.head-cta svg{display:none}
.liquid{display:none}
@media (max-width:900px){
  html{scroll-padding-top:140px}
  .hero{padding-top:10.5rem;align-items:start;min-height:0}
  header.top .wrap{flex-wrap:wrap;padding-inline:1rem;row-gap:.5rem}
  header.top,header.top.scrolled{padding:.6rem 0 .5rem}
  .brand{order:1}.brand img{height:34px}
  .head-actions{order:2;margin-left:auto;gap:.5rem}
  .head-cta{width:42px;height:42px;padding:0;justify-content:center;border-radius:50%}
  .head-cta span{display:none}
  .head-cta svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  nav{order:3;flex:0 0 100%;position:relative;border-radius:99px;padding:4px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 24px -12px #0e152255,inset 0 1px 0 #fff,inset 0 -1px 0 rgba(14,21,34,.06)}
  nav ul{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;padding:0}
  nav a{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .1rem;font-size:.82rem;font-weight:600;color:var(--graphite);transition:color .3s}
  nav a::after{display:none}
  nav a svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  nav a[aria-current]{color:var(--red)}
  .liquid{display:block;position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:99px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 12px -6px #0e152255,inset 0 -2px 0 #d8232c22;transition:transform .55s cubic-bezier(.34,1.45,.5,1),width .55s cubic-bezier(.34,1.45,.5,1)}
  .liquid.go{animation:squish .55s ease}
}
@keyframes squish{40%{filter:blur(1.5px);scale:1.12 .88}100%{filter:none;scale:1}}
/* Mobile : onglets de services visibles d'un coup, avec un aspect de boutons */
@media (max-width:900px){
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;overflow:visible}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font-size:1.15rem;padding:.7rem .3rem;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 2px 6px -3px #0e152233;text-align:center}
  .tab .ico{width:22px;height:22px}
  .tab[aria-selected=true]{padding:.7rem .3rem;border-color:var(--red);box-shadow:0 4px 12px -6px #d8232c88}
}
.callout p+.btn{margin-top:1.4rem}
/* Mobile : l'accueil tient dans l'écran, moto entière visible */
@media (max-width:900px){
  .hero{min-height:100svh;display:flex;align-items:stretch;padding-top:8.2rem;padding-bottom:1rem}
  .hero .wrap{display:flex;flex-direction:column;width:100%;gap:.5rem;align-items:stretch;align-self:stretch;margin-block:0}
  .hero .sketch{flex:1 1 0;min-height:200px;aspect-ratio:auto}
  .hero .sketch .frames{inset:0}
  .hero .scrollhint{display:none}
}
@media (max-width:900px) and (max-height:720px){
  .hero{padding-top:7.4rem}
  .hero h1{font-size:2.8rem;margin:.2rem 0 .6rem}
  .hero p.lead{font-size:1rem;margin-bottom:.9rem}
  .hero p.lead span{display:none}
  .cta-block,.cta-block .cta{gap:.6rem}
  .hero .btn{padding:.8rem 1.2rem}
}
/* Menu mobile allégé : icônes seules, libellé sur l'onglet actif */
@media (max-width:900px){
  nav{padding:3px;background:rgba(255,255,255,.55);box-shadow:0 6px 18px -12px #0e152244,inset 0 1px 0 #fff}
  nav a{justify-content:center;gap:0;min-height:46px;padding:.3rem .1rem;font-size:.78rem}
  nav a>span{display:block;max-height:0;opacity:0;overflow:hidden;line-height:1.1;transition:max-height .3s,opacity .3s}
  nav a[aria-current]>span{max-height:1.2em;opacity:1;margin-top:.1rem}
  nav.hovering a[aria-current]:not(.hov)>span{max-height:0;opacity:0;margin-top:0}
  nav a.hov>span{max-height:1.2em;opacity:1;margin-top:.1rem}
  nav a.hov{color:var(--red)}
  nav.hovering a[aria-current]:not(.hov){color:var(--graphite)}
  nav a svg{width:25px;height:25px}
  .liquid{top:3px;bottom:3px}
}
.callout h3{margin-top:.6rem}

a.card{display:block;color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);border-color:var(--red);box-shadow:0 14px 30px -18px #0e152266}
a.card .go{display:inline-block;margin-top:1rem;font-weight:600;font-size:.9rem;color:var(--red)}
a.card{position:relative}a.card .go{position:absolute;right:1.6rem;top:1.6rem;margin:0;font-size:1.3rem;line-height:1;transition:transform .25s}a.card:hover .go{transform:translateX(4px)}
.hero .status{margin:0 0 .9rem}
.hero p.lead{margin-bottom:1.5rem}
.toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,1rem);background:var(--ink);color:#fff;padding:.8rem 1.4rem;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}
.cta-block{display:inline-flex;flex-direction:column;align-items:center;gap:1rem;max-width:100%}.hero .status{margin:0}
@media (max-width:900px){
  .hero .wrap>div:first-child{text-align:center}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero .cta{justify-content:center}
}

/* Menu desktop : même pilule que sur mobile, titre au survol */
@media (min-width:901px){
  nav{position:relative;border-radius:99px;padding:4px;background:rgba(255,255,255,.6);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 18px -12px #0e152244,inset 0 1px 0 #fff}
  nav ul{position:relative;z-index:1;gap:.2rem;margin:0;padding:0}
  nav a{display:grid;place-items:center;width:52px;height:44px;padding:0;color:var(--graphite);transition:color .3s}
  nav a::after{display:none}
  nav a svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  nav a:hover,nav a:focus-visible,nav a[aria-current]{color:var(--red)}
  nav a>span{display:block;max-height:0;opacity:0;overflow:hidden;font-size:.78rem;font-weight:600;line-height:1.1;white-space:nowrap;transition:max-height .3s,opacity .3s}
  nav:not(.hovering) a[aria-current]>span,nav a.hov>span{max-height:1.2em;opacity:1}
  nav a.hov{color:var(--red)}
  nav.hovering a[aria-current]:not(.hov){color:var(--graphite)}
  .liquid{display:block;position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:99px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 12px -6px #0e152255,inset 0 -2px 0 #d8232c22;transition:transform .55s cubic-bezier(.34,1.45,.5,1),width .55s cubic-bezier(.34,1.45,.5,1)}
  .liquid.go{animation:squish .55s ease}
}
@media (min-width:901px){
  nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;width:72px;height:54px}
}

/* Page mentions légales */
.legal{padding:8rem 0 4rem}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2.6rem,7vw,4.5rem);margin:.4rem 0 1.5rem}
.legal h2{font-size:1.6rem;margin:2.2rem 0 .6rem}
.legal p,.legal dd{color:#2b3342}
.legal a{color:var(--red)}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.5rem;margin:1rem 0}
.legal dt{font-weight:600}.legal dd{margin:0}
@media (max-width:560px){.legal dl{grid-template-columns:1fr;gap:0}.legal dd{margin-bottom:.6rem}}
.legal p+p{margin-top:.8rem}
.modal-open{overflow:hidden}
.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden}
.modal::backdrop{background:rgba(14,18,28,.55);backdrop-filter:blur(6px)}
.modal[open]{display:grid;place-items:center;padding:1rem}
.modal-box{position:relative;background:#fff;border-radius:22px;width:min(680px,100%);max-height:88vh;max-height:88dvh;overflow:auto;padding:2.2rem 2rem 1.6rem;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:modalIn .35s cubic-bezier(.2,.9,.3,1.1)}
.modal.closing .modal-box{animation:modalOut .2s ease forwards}
.modal.closing::backdrop{opacity:0;transition:opacity .2s}
.modal-close{position:sticky;top:0;float:right;margin:-.8rem -.6rem 0 0;width:40px;height:40px;border-radius:50%;border:0;background:#f1f2f5;font-size:1.6rem;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.modal-close:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.modal .legal{padding:0}
.modal .modal-h1{font-size:clamp(2.2rem,6vw,3.2rem);margin:.3rem 0 1rem}
.modal .legal h3{font-size:1.4rem;margin:1.6rem 0 .4rem}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes modalOut{to{opacity:0;transform:translateY(16px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.modal-box{animation:none}}
.legal h2,.legal h3{position:relative;padding-left:.9rem;letter-spacing:.02em}
.legal h2::before,.legal h3::before{content:"";position:absolute;left:0;top:.18em;bottom:.12em;width:4px;border-radius:2px;background:var(--red)}
.legal .modal-h1{padding-left:0}.legal .modal-h1::before{display:none}
.legal dl.ids{background:#f6f7f9;border:1px solid #e8eaef;border-radius:14px;padding:1rem 1.2rem;gap:.55rem 1.5rem}
.legal dl.ids dt{color:#6b7385;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.legal dl.ids dd{font-weight:600;font-variant-numeric:tabular-nums;color:#11151f}
.modal .legal h3{padding-top:1.4rem;border-top:1px solid #eceef2;margin-top:1.4rem}
.modal .legal h3:first-of-type{border-top:0;padding-top:0;margin-top:1rem}
.modal .legal h3::before{top:calc(1.4rem + .18em)}
.modal .legal h3:first-of-type::before{top:.18em}
@media (max-width:560px){.legal dl.ids dd{margin-bottom:.5rem}}

/* Mode sombre */
.theme-toggle{background:none;cursor:pointer;padding:0;font:inherit}
.theme-toggle .i-sun{display:none}
html[data-theme=dark] .theme-toggle .i-sun{display:block}
html[data-theme=dark] .theme-toggle .i-moon{display:none}
html[data-theme=dark]{color-scheme:dark;--ink:#EDEFF4;--paper:#0C1017;--paper2:#141A24;--line:#2A3344;--graphite:#9AA3B5}
html[data-theme=dark] body::before{display:none}
html[data-theme=dark] header.top.scrolled{background:rgba(12,16,23,.9)}
html[data-theme=dark] .hero,html[data-theme=dark] .loc{background:var(--paper)}
html[data-theme=dark] .sketch .frames{filter:invert(1);mix-blend-mode:screen}
html[data-theme=dark] .hero p.lead,html[data-theme=dark] .head p,html[data-theme=dark] .legal p,html[data-theme=dark] .legal dd{color:#C4CAD6}
html[data-theme=dark] .legal dl.ids dd{color:#fff}
html[data-theme=dark] .tab[aria-selected=true],html[data-theme=dark] .panel,html[data-theme=dark] .card,html[data-theme=dark] .table,html[data-theme=dark] form,html[data-theme=dark] .modal-box,html[data-theme=dark] .mapframe{background:var(--paper2)}
html[data-theme=dark] form{box-shadow:10px 10px 0 #0a0d13}
html[data-theme=dark] .field input,html[data-theme=dark] .field select,html[data-theme=dark] .field textarea{background:#0f141d;color:var(--ink);border-color:var(--line)}
html[data-theme=dark] .field input:focus,html[data-theme=dark] .field select:focus,html[data-theme=dark] .field textarea:focus{background:#0c1017;border-color:var(--red)}
html[data-theme=dark] .field select:focus{background-color:#0c1017}
html[data-theme=dark] .chips label:hover{background:#1b2331;border-color:var(--ink)}
html[data-theme=dark] .chips input:checked+label{background:var(--red);border-color:var(--red);color:#fff}
html[data-theme=dark] .marquee{background:#05070b;color:#fff;border-block:1px solid var(--line)}
html[data-theme=dark] .process{background:#05070b}
html[data-theme=dark] .step b{background:#05070b}
html[data-theme=dark] .btn:hover{background:#fff;border-color:#fff;color:var(--red)}
html[data-theme=dark] .btn.ghost{color:var(--ink);border-color:var(--ink)}
html[data-theme=dark] .btn.ghost:hover{background:var(--ink);color:#0C1017}
html[data-theme=dark] .callout .btn:hover{background:#05070b;border-color:#05070b;color:#fff}
html[data-theme=dark] footer{background:#05070b}
html[data-theme=dark] .toast{background:#fff;color:#0C1017}
html[data-theme=dark] .modal::backdrop{background:rgba(0,0,0,.7)}
html[data-theme=dark] .modal-close{background:#232c3b;color:var(--ink)}
html[data-theme=dark] .legal dl.ids{background:#0f141d;border-color:var(--line)}
html[data-theme=dark] .modal .legal h3{border-top-color:var(--line)}
html[data-theme=dark] nav{background:rgba(24,31,44,.62);border-color:rgba(255,255,255,.12);box-shadow:0 8px 24px -12px #000,inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme=dark] .liquid{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));border-color:rgba(255,255,255,.22);box-shadow:0 4px 12px -6px #000,inset 0 -2px 0 #d8232c55}
html[data-theme=dark] .status,html[data-theme=dark] #status{background:var(--paper2);border-color:var(--line);color:var(--ink)}
html[data-theme=dark] .chips label{background:#1b2331}
html[data-theme=dark] .chips label:hover{background:#243047}