:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --mist:#F4F4F4; --line:#E5E5E5;
  --ink:#111111; --muted:#555555; --label:#6B6B6B;
  --accent:#2E2E2E; --on-accent:#FFFFFF; --soft:#E2E2E2; --focus:#3887BE;
  --tint1:#FAFAFA; --tint2:#F3F3F3; --foot:#F3F3F3; --ring-bg:#F1F1F1;
  --f-display:"Lexend",system-ui,sans-serif; --f-label:"Lexend Exa","Lexend",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --maxw:1180px; --fs:1.06rem;
}
:root.night{
  --paper:#1C1C1C; --surface:#242424; --mist:#2C2C2C; --line:#3A3A3A;
  --ink:#EDEDED; --muted:#B4B4B4; --label:#A0A0A0;
  --accent:#EDEDED; --on-accent:#141414; --soft:#3A3A3A;
  --tint1:#1F1F1F; --tint2:#232323; --foot:#202020; --ring-bg:#2A2A2A; color-scheme:dark}
*{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
html.big{font-size:118%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs)/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.14;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.5rem)} h2{font-size:clamp(1.65rem,3.2vw,2.4rem)} h3{font-size:1.2rem}
p{margin:0}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(56px,8vw,100px)}
.t1{background:var(--tint1)}.t2{background:var(--tint2)}
.eyebrow{font:500 .74rem/1.2 var(--f-label);text-transform:uppercase;letter-spacing:.14em;color:var(--label)}
.muted{color:var(--muted)}
.sec-head{display:grid;gap:.8rem;max-width:64ch;margin-bottom:2.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:0 1.5rem;border-radius:999px;border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);font:500 1rem var(--f-display);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.sm{min-height:44px;padding:0 1.1rem;font-size:.95rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;z-index:50}.skip:focus{left:8px}

/* bandeaux */
.top{border-bottom:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px;flex-wrap:wrap}
.top .tools{display:flex;gap:.4rem}
.top button{font:600 .9rem var(--f-display);background:var(--mist);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;cursor:pointer}
.head{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.brand img{height:42px;width:auto}
:root.night .brand img,:root.night .ring img{filter:invert(1)}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a:not(.btn){text-decoration:none;font:500 .97rem var(--f-display)}
.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.menu-btn{display:none;min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 1rem var(--f-display);cursor:pointer}
.drawer{border-bottom:1px solid var(--line);background:var(--surface)}
.drawer .wrap{display:grid;padding-block:.5rem 1rem}
.drawer a{padding:.85rem 0;border-bottom:1px solid var(--line);text-decoration:none;font:500 1.1rem var(--f-display)}

/* hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .txt{display:grid;gap:1.4rem;min-width:0}
.lead{font-size:1.18rem;max-width:54ch;color:var(--muted)}
.ring{position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:center;border-radius:50%;border:clamp(6px,1vw,10px) solid var(--soft);background:var(--ring-bg);display:grid;place-items:center}
.ring img{width:46%;height:auto}
.badges{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.95rem;color:var(--muted)}
.badges span::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);margin-right:.5rem;vertical-align:.08em}
.hero.sub{background:var(--tint2);padding-block:clamp(44px,6vw,80px)}
.hero.sub .wrap{display:block}
.hero.sub .txt{max-width:820px}

/* faits */
.facts{background:var(--surface);border-block:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:1.6rem}
.facts b{display:block;font:500 1.2rem/1.25 var(--f-display)}
.facts span{font-size:.93rem;color:var(--muted)}

/* texte */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split>*{min-width:0}
.prose{display:grid;gap:1rem}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.strong{font:500 1.15rem/1.45 var(--f-display)}
.checks{list-style:none;padding:0!important}
.checks li{padding-left:1.8rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.4em;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--accent)}
.checks li::after{content:"";position:absolute;left:.36rem;top:.58em;width:.3rem;height:.55rem;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* offres */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.svc{display:grid;grid-template-rows:auto 1fr auto;gap:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;text-decoration:none;min-width:0;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--ink);transform:translateY(-2px)}
.svc .ic{width:54px;height:54px;border-radius:50%;background:var(--tint2);display:grid;place-items:center}
.svc .ic svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc .more{font:500 .95rem var(--f-display);color:var(--muted)}
.svc .more::after{content:" →"}

/* tarifs */
.cols{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.cols>*{min-width:0}
.tarifs{background:var(--tint2);border-radius:var(--r);padding:1.5rem;display:grid;gap:.15rem;position:sticky;top:96px}
.tarifs h3{margin-bottom:.5rem}
.tarifs .r{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.tarifs .r:last-of-type{border-bottom:0}
.tarifs .r b{font:500 1.02rem var(--f-display);white-space:nowrap}
.tarifs .note{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.tarifs .btn{margin-top:1rem}

/* contact */
.ask{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,3vw,2rem);display:grid;gap:.9rem}
.ask label{font:500 .95rem var(--f-display);display:grid;gap:.4rem}
.ask input,.ask textarea{width:100%;font:400 1rem var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;min-height:50px}
.ask textarea{min-height:140px;resize:vertical}
.ask .two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ask .hp{position:absolute;left:-5000px}
.ask .consent{display:flex;gap:.6rem;align-items:flex-start;font:400 .9rem var(--f-body);color:var(--muted)}
.ask .consent input{width:auto;min-height:auto;margin-top:.3rem}
.ask .send{display:flex;justify-content:flex-end}
.notice{border-radius:12px;padding:1rem 1.1rem;font-size:.97rem}
.notice.ok{background:#E8F3EC;color:#14532D}.notice.err{background:#FBEAEA;color:#7F1D1D}
.call{margin-top:1.4rem;display:grid;gap:.3rem}

/* pied */
.foot{background:var(--foot);border-top:1px solid var(--line);padding-block:3rem 2rem;font-size:.95rem}
.foot .cols4{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot h4{font-size:.95rem;margin-bottom:.7rem}
.foot .cols4 a{display:block;text-decoration:none;color:var(--muted);padding:.2rem 0}
.foot p{color:var(--muted);margin-top:1rem}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
.mbar{display:none}
.doc h2{font-size:1.3rem;margin-top:1.4rem}
.doc p{color:var(--muted)}

@media (max-width:980px){
  .nav{display:none}.menu-btn{display:inline-flex;align-items:center}
  .hero .wrap,.split,.cols{grid-template-columns:1fr}
  .ring{max-width:300px}
  .svcs{grid-template-columns:1fr 1fr}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .tarifs{position:static}
  .foot .cols4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .svcs,.ask .two,.foot .cols4{grid-template-columns:1fr}
  .top .addr{display:none}
  .brand img{height:36px}
  .ring{max-width:240px}
  body{padding-bottom:78px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:.7rem max(16px,env(safe-area-inset-left,0px)) calc(.7rem + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
}

/* compléments pages annexes */
.need{display:inline-block;background:#F1CF7A;color:#2A2210;font:500 .72rem/1.3 var(--f-label);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.3rem .65rem}
[id]{scroll-margin-top:90px}
.crumb{font-size:.9rem;color:var(--muted);margin-bottom:1rem}.crumb a{text-decoration:none}
.doc{max-width:820px}
.doc h2{font-size:1.3rem;margin-top:1.6rem}
.doc ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.doc .dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;background:var(--tint2);border-radius:14px;padding:1.1rem 1.2rem}
.doc .dl dt{color:var(--muted)}.doc .dl dd{margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;display:grid;gap:.3rem;text-decoration:none}
.card small{color:var(--muted);font-size:.85rem}.card b{font:500 1.05rem var(--f-display)}
.rule{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem}
.rule .tag{font:500 .8rem var(--f-label);letter-spacing:.06em;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.35rem .75rem;white-space:nowrap}
.rule .tag.g{background:var(--tint2);color:var(--ink)}
.rules{display:grid;gap:.8rem;margin-top:1.2rem}
.faq{display:grid;gap:.7rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font:500 1.02rem var(--f-display);display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--muted)}.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 1.2rem 1.1rem;color:var(--muted)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}