/* =========================================================
   Prestacode — feuille de style principale
   Encre petrole + accent variable (5 palettes)
   ========================================================= */

:root{
  --ink:#08161C;
  --ink-2:#0D2029;
  --ink-3:#122C37;
  --line:#1B3E4B;
  --line-soft:#14313C;
  --fg:#E9F2F3;
  --fg-2:#8AA8B2;
  --fg-3:#5B7B86;
  --live:#5FD3A6;
  --err:#FF8577;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1180px;
  --gutter:32px;
  --ease:cubic-bezier(.2,.8,.3,1);
}

/* ---------- palettes d'accent ---------- */
[data-accent="ocre"]   { --acc:#F0B23C; --acc-hi:#FFC456; --acc-dim:#8A6620; --acc-rgb:240,178,60;  --on-acc:#08161C; }
[data-accent="glacier"]{ --acc:#4CC9E0; --acc-hi:#6EDAEF; --acc-dim:#1F6B7A; --acc-rgb:76,201,224;  --on-acc:#04191F; }
[data-accent="violet"] { --acc:#9B8CFF; --acc-hi:#B3A7FF; --acc-dim:#4B3F91; --acc-rgb:155,140,255; --on-acc:#0B0A22; }
[data-accent="corail"] { --acc:#FF7A5C; --acc-hi:#FF9478; --acc-dim:#8C3A28; --acc-rgb:255,122,92;  --on-acc:#1A0B07; }
[data-accent="ivoire"] { --acc:#EFE7D2; --acc-hi:#FFF8E8; --acc-dim:#7C7461; --acc-rgb:239,231,210; --on-acc:#08161C; }

*{box-sizing:border-box;margin:0;padding:0}

/* L'attribut hidden doit primer sur toute regle de classe qui declare
   un display (ex. .cookie-modal{display:flex}), sinon un element marque
   hidden reste visible et ne peut plus etre ferme. */
[hidden]{display:none!important}

html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--on-acc);padding:12px 20px;z-index:100}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--acc);cursor:pointer;text-decoration:underline}

/* ---------- navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease}
.nav.stuck{background:rgba(8,22,28,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{font-family:var(--mono);font-size:15px;display:flex;align-items:center;gap:1px;flex-shrink:0}
.brand b{font-weight:500}
.brand i{color:var(--acc);font-style:normal;animation:blink 1.4s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.nav-links{display:flex;gap:28px;list-style:none;font-family:var(--mono);font-size:12px;color:var(--fg-2)}
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--acc);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{width:100%}
.nav-cta{font-family:var(--mono);font-size:12px;color:var(--on-acc);background:var(--acc);
  padding:9px 18px;border-radius:3px;flex-shrink:0;transition:background .25s,transform .25s var(--ease)}
.nav-cta:hover{background:var(--acc-hi);transform:translateY(-1px)}

.burger{display:none;background:none;border:0;width:38px;height:38px;cursor:pointer;padding:10px}
.burger span{display:block;height:1.5px;background:var(--fg);transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;padding:14px var(--gutter) 24px;border-top:1px solid var(--line-soft);background:var(--ink)}
.mobile-menu a{font-family:var(--mono);font-size:14px;padding:11px 0;color:var(--fg-2);border-bottom:1px solid var(--line-soft)}
.mobile-menu a:last-child{color:var(--acc);border-bottom:0}

@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .mobile-menu:not([hidden]){display:flex}
  .nav:has(.mobile-menu:not([hidden])){background:var(--ink);border-bottom-color:var(--line-soft)}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:180px 0 92px;overflow:hidden}
#grid{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}

h1{font-family:var(--display);font-size:clamp(38px,6vw,72px);line-height:1.03;font-weight:500;
  letter-spacing:-.035em;margin:20px 0 0}
h1 em{font-style:normal;color:var(--acc)}
.lede{color:var(--fg-2);font-size:17px;max-width:48ch;margin-top:22px}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{font-family:var(--mono);font-size:13px;padding:13px 24px;border-radius:3px;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.btn-sm{padding:9px 16px;font-size:12px}
.btn-primary{background:var(--acc);color:var(--on-acc);font-weight:500}
.btn-primary:hover{background:var(--acc-hi);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:none}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
.arw{transition:transform .25s ease}
.btn:hover .arw{transform:translateX(4px)}

/* panneau signature */
.panel{background:linear-gradient(180deg,var(--ink-2),var(--ink));border:1px solid var(--line-soft);
  border-radius:6px;overflow:hidden}
.panel-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;color:var(--fg-3)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--live);display:inline-block;margin-right:7px;
  animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,211,166,.45)}70%{box-shadow:0 0 0 8px rgba(95,211,166,0)}100%{box-shadow:0 0 0 0 rgba(95,211,166,0)}}
.log{padding:8px 0;height:236px;overflow:hidden;position:relative}
.log::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(180deg,rgba(8,22,28,0),var(--ink));pointer-events:none}
.log .row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:baseline;padding:7px 16px;
  font-family:var(--mono);font-size:11.5px;opacity:0;transform:translateY(8px);
  animation:rowin .5s var(--ease) forwards}
@keyframes rowin{to{opacity:1;transform:none}}
.log .t{color:var(--fg-3)}
.log .m{color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log .s{color:var(--live);font-size:10.5px}
.log .s.warn{color:var(--acc)}

/* ---------- marquee ---------- */
.marq{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:20px 0;overflow:hidden}
.marq-track{display:flex;gap:52px;width:max-content;animation:slide 34s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marq span{font-family:var(--mono);font-size:13px;color:var(--fg-3);white-space:nowrap;transition:color .25s}
.marq span:hover{color:var(--acc)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- sections ---------- */
section{padding:100px 0}
.sec-tight{padding:0 0 100px}
.page-head{padding:170px 0 56px}
.page-head h1{max-width:20ch}
.page-404{min-height:62vh}

.sec-hd{max-width:660px;margin-bottom:50px}
h2{font-family:var(--display);font-size:clamp(27px,3.8vw,41px);line-height:1.1;font-weight:500;letter-spacing:-.025em}
.sec-hd h2{margin-top:16px}
.sec-hd>p:last-child{color:var(--fg-2);margin-top:16px}

/* differenciateurs */
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
.diff{padding:30px 28px;border-right:1px solid var(--line-soft)}
.diff:last-child{border-right:0}
.diff h2{font-size:19px;letter-spacing:-.015em}
.diff p{color:var(--fg-2);font-size:14.5px;margin-top:10px}

/* cartes services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;padding:30px 28px 34px;border:1px solid var(--line-soft);border-radius:6px;
  background:var(--ink-2);overflow:hidden;transition:border-color .35s ease,transform .35s var(--ease)}
.card::before{content:"";position:absolute;width:340px;height:340px;left:var(--mx,50%);top:var(--my,50%);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle,rgba(var(--acc-rgb),.10),transparent 62%)}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card .k{font-family:var(--mono);font-size:11px;color:var(--acc-dim);letter-spacing:.1em}
.card h3{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:-.02em;margin:14px 0 10px}
.card .card-lead{color:var(--fg-2);font-size:14.5px}
.card ul{list-style:none;margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
.card li{font-family:var(--mono);font-size:12px;color:var(--fg-3);padding:5px 0}
.card li::before{content:"→ ";color:var(--acc-dim)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
.stat{padding:30px 26px;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--display);font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1}
.stat .l{font-family:var(--mono);font-size:11px;color:var(--fg-3);margin-top:9px;letter-spacing:.05em}

/* process */
.steps{border-top:1px solid var(--line-soft);list-style:none}
.step{display:grid;grid-template-columns:64px 1fr 1.1fr;gap:26px;padding:26px 0;
  border-bottom:1px solid var(--line-soft);align-items:baseline;transition:background .35s ease}
.step:hover{background:var(--ink-2)}
.step .no{font-family:var(--mono);font-size:12px;color:var(--acc-dim)}
.step h3{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.015em}
.step p{color:var(--fg-2);font-size:14.5px}

/* temoignages */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.quote{border:1px solid var(--line-soft);border-radius:6px;padding:32px 28px;background:var(--ink-2);
  transition:border-color .35s ease}
.quote:hover{border-color:var(--line)}
.quote blockquote{font-family:var(--display);font-size:17.5px;line-height:1.5;font-weight:400;letter-spacing:-.012em}
.quote blockquote::before{content:"«";color:var(--acc);margin-right:5px}
.quote blockquote::after{content:"»";color:var(--acc);margin-left:5px}
.quote figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11.5px;display:flex;flex-direction:column;gap:3px}
.quote .who{color:var(--fg);font-weight:500}
.quote .role{color:var(--fg-2)}
.quote .proj{color:var(--acc-dim)}

/* cta */
.cta{text-align:center;padding:108px 0}
.cta h2{max-width:19ch;margin:16px auto 0}
.cta-p{color:var(--fg-2);margin-top:16px}
.cta .btns{justify-content:center}

/* ---------- formulaire ---------- */
.contact-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start}
.form{display:flex;flex-direction:column;gap:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--fg-2);text-transform:uppercase}
.req{color:var(--acc)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--fg);background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:4px;padding:12px 14px;width:100%;
  transition:border-color .25s,background .25s}
.field textarea{resize:vertical;min-height:140px;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);background:var(--ink-3)}
.field input[aria-invalid],.field textarea[aria-invalid],.field select[aria-invalid]{border-color:var(--err)}
.field ::placeholder{color:var(--fg-3)}
.err{color:var(--err);font-size:13px}
.field-check .check{display:flex;gap:11px;align-items:flex-start;text-transform:none;
  font-family:var(--sans);font-size:14px;color:var(--fg-2);letter-spacing:0;cursor:pointer}
.check input{width:17px;height:17px;margin-top:3px;accent-color:var(--acc);flex-shrink:0}
.check a{color:var(--acc);text-decoration:underline}
.form-note{font-size:13px;color:var(--fg-3)}
.form button[type=submit]{align-self:flex-start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{border:1px solid var(--line-soft);border-radius:6px;padding:28px 26px;background:var(--ink-2)}
.alert h2{font-size:22px}
.alert p{color:var(--fg-2);margin-top:10px}
.alert-ok{border-left:2px solid var(--live)}
.alert-err{border-left:2px solid var(--err)}
.alert-err p{color:var(--err);margin:0}
.alert-sub{font-size:14px}
.alert a{color:var(--acc)}

.info-col{display:flex;flex-direction:column;gap:18px}
.info-card{border:1px solid var(--line-soft);border-radius:6px;padding:26px 24px;background:var(--ink-2)}
.info-card h2{font-size:16px;font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.info-card dl{margin-top:18px;font-size:14.5px}
.info-card dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-top:14px}
.info-card dt:first-child{margin-top:0}
.info-card dd{color:var(--fg-2);margin-top:3px}
.info-card dd a{color:var(--acc)}
.mini-steps{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:14px}
.mini-steps li{font-size:14px;color:var(--fg-2);display:grid;grid-template-columns:28px 1fr;gap:10px}
.mini-steps span{font-family:var(--mono);font-size:11px;color:var(--acc-dim)}

/* ---------- prose (pages legales) ---------- */
.prose{max-width:760px}
.prose h2{font-size:24px;margin:44px 0 14px}
.prose h3{font-family:var(--display);font-size:18px;font-weight:500;margin:26px 0 8px}
.prose p,.prose li{color:var(--fg-2);font-size:15.5px}
.prose p{margin-bottom:14px}
.prose ul{margin:0 0 18px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--acc);text-decoration:underline}
.prose strong{color:var(--fg);font-weight:500}
.prose .intro{border-left:2px solid var(--acc);padding-left:20px;font-size:16.5px;color:var(--fg)}
.tbl{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:14px}
.tbl th,.tbl td{border:1px solid var(--line-soft);padding:11px 14px;text-align:left;vertical-align:top;color:var(--fg-2)}
.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);background:var(--ink-2)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:60px 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:44px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-blurb{color:var(--fg-3);font-size:14px;max-width:34ch;margin-top:6px}
.foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:5px}
.foot-col a{font-size:14.5px;color:var(--fg-2);transition:color .25s}
.foot-col a:hover{color:var(--acc)}
.foot-col address{font-style:normal;font-size:14px;color:var(--fg-3);line-height:1.6;margin-top:4px}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  border-top:1px solid var(--line-soft);padding-top:22px;padding-bottom:30px;
  font-family:var(--mono);font-size:11.5px;color:var(--fg-3)}
.foot-legal{display:flex;flex-wrap:wrap;gap:20px}
.foot-legal a:hover{color:var(--acc)}
.foot-bar .linklike{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);text-decoration:none}
.foot-bar .linklike:hover{color:var(--acc)}

/* ---------- cookies ---------- */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(13,32,41,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  animation:cookieup .5s var(--ease)}
@keyframes cookieup{from{transform:translateY(100%)}to{transform:none}}
.cookie-in{max-width:var(--wrap);margin:0 auto;padding:22px var(--gutter);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.cookie-h{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.cookie-p{color:var(--fg-2);font-size:14px;margin-top:7px;max-width:76ch}
.cookie-actions{display:flex;flex-wrap:wrap;gap:9px}

.cookie-modal{position:fixed;inset:0;z-index:90;background:rgba(4,11,14,.72);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cookie-dialog{background:var(--ink-2);border:1px solid var(--line);border-radius:8px;
  max-width:580px;width:100%;max-height:86vh;overflow-y:auto;animation:pop .35s var(--ease)}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.cookie-dialog-hd{display:flex;align-items:center;justify-content:space-between;
  padding:22px 26px;border-bottom:1px solid var(--line-soft)}
.cookie-dialog-hd h2{font-size:20px}
.cookie-x{background:none;border:0;color:var(--fg-2);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.cookie-x:hover{color:var(--fg)}
.cookie-group{padding:22px 26px;border-bottom:1px solid var(--line-soft)}
.cookie-group-hd{display:flex;gap:24px;align-items:flex-start;justify-content:space-between}
.cookie-group h3{font-family:var(--sans);font-size:15px;font-weight:500}
.cookie-group p{color:var(--fg-2);font-size:13.5px;margin-top:6px;max-width:44ch}
.cookie-locked{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);border:1px solid var(--line-soft);border-radius:3px;padding:5px 9px;white-space:nowrap}
.switch{position:relative;flex-shrink:0;cursor:pointer;display:inline-block}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .track{display:block;width:42px;height:23px;border-radius:999px;background:var(--ink-3);
  border:1px solid var(--line);transition:background .25s,border-color .25s}
.switch .track::after{content:"";position:absolute;top:4px;left:4px;width:15px;height:15px;border-radius:50%;
  background:var(--fg-3);transition:transform .25s var(--ease),background .25s}
.switch input:checked+.track{background:var(--acc);border-color:var(--acc)}
.switch input:checked+.track::after{transform:translateX(19px);background:var(--on-acc)}
.switch input:focus-visible+.track{outline:2px solid var(--acc);outline-offset:2px}
.cookie-dialog-ft{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px}
.cookie-link{font-size:13.5px;color:var(--fg-2);text-decoration:underline}
.cookie-link:hover{color:var(--acc)}

/* ---------- selecteur de palette (dev) ---------- */
.palette{position:fixed;right:18px;bottom:18px;z-index:70;background:var(--ink-2);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:var(--mono);font-size:10.5px}
.palette p{color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
.palette-dots{display:flex;gap:7px}
.palette button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),border-color .2s}
.palette button:hover{transform:scale(1.12)}
.palette button[aria-pressed="true"]{border-color:var(--fg)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:46px}
  .hero{padding:140px 0 70px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:860px){
  :root{--gutter:22px}
  section{padding:74px 0}
  .sec-tight{padding:0 0 74px}
  .page-head{padding:130px 0 40px}
  .cards,.quotes{grid-template-columns:1fr}
  .diffs{grid-template-columns:1fr}
  .diff{border-right:0;border-bottom:1px solid var(--line-soft)}
  .diff:last-child{border-bottom:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--line-soft)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .step{grid-template-columns:42px 1fr;gap:14px}
  .step p{grid-column:2}
  .f-row{grid-template-columns:1fr}
  .cookie-in{grid-template-columns:1fr;gap:18px}
  .cookie-actions{justify-content:flex-start}
  .foot-grid{grid-template-columns:1fr}
  .palette{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .log .row{opacity:1;transform:none}
}

/* =====================================================================
   Pages services — respiration claire, illustrations, fenetre de code
   ===================================================================== */

/* ---------- sections claires ---------- */
.light{background:var(--paper);color:var(--paper-fg)}
.light-head{background:var(--paper);color:var(--paper-fg);padding-top:150px}
.light h2,.light-head h1{color:var(--paper-fg)}
.light p,.light-head .lede{color:var(--paper-fg-2)}
.light .sec-hd>p:last-child{color:var(--paper-fg-2)}
:root{
  --paper:#F4F2EC;
  --paper-2:#FFFFFF;
  --paper-fg:#132026;
  --paper-fg-2:#4E6069;
  --paper-line:#DFDACE;
}

/* ---------- bandeau de faits ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.fact{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--paper-line);border-radius:8px;padding:16px 18px}
.fact svg{width:20px;height:20px;color:var(--acc-dim);flex-shrink:0;margin-top:2px}
.fact-l{display:block;font-size:14px;font-weight:500;color:var(--paper-fg)}
.fact-n{display:block;font-family:var(--mono);font-size:11px;color:var(--paper-fg-2);margin-top:3px}

/* ---------- bloc deux colonnes ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-lead{margin-top:16px;font-size:16px}
.split .btn{margin-top:26px}
.split-illu{display:flex;justify-content:center}

.checks{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.checks li{position:relative;padding-left:28px;font-size:15px;color:inherit}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--acc);opacity:.16}
.checks li::after{content:"";position:absolute;left:5px;top:11px;width:5px;height:8px;
  border:solid var(--acc);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* ---------- illustrations ---------- */
.illu{width:100%;max-width:200px;height:auto}
.illu-lg{max-width:340px}
.il-fill{fill:var(--paper-2);stroke:var(--acc-dim)}
.il-soft{fill:none;stroke:var(--paper-line);stroke:#C9C2B2}
.il-accent{fill:rgba(var(--acc-rgb),.12);stroke:var(--acc-dim)}
.il-line{stroke:#C9C2B2}
.il-stroke-a{stroke:var(--acc-dim);fill:none}
.il-txt{font-family:var(--sans);font-size:11px;fill:var(--paper-fg)}
.il-txt-s{font-family:var(--mono);font-size:9px;fill:var(--paper-fg-2)}
.il-txt-a{font-family:var(--mono);font-size:9px;fill:var(--acc-dim)}
/* sur fond encre, les illustrations s'inversent */
section:not(.light) .il-fill{fill:var(--ink-2);stroke:var(--acc)}
section:not(.light) .il-soft,section:not(.light) .il-line{stroke:var(--line)}
section:not(.light) .il-accent{fill:rgba(var(--acc-rgb),.14);stroke:var(--acc)}
section:not(.light) .il-stroke-a{stroke:var(--acc)}
section:not(.light) .il-txt{fill:var(--fg)}
section:not(.light) .il-txt-s{fill:var(--fg-2)}
section:not(.light) .il-txt-a{fill:var(--acc)}

/* ---------- cartes claires ---------- */
.card-light{background:var(--paper-2);border-color:var(--paper-line)}
.card-light h3{color:var(--paper-fg)}
.card-light .card-lead{color:var(--paper-fg-2)}
.card-light:hover{border-color:#C9C2B2}
.card-illu{margin-bottom:18px;display:flex;justify-content:center;
  background:var(--paper);border-radius:8px;padding:16px}

/* ---------- fenetre de code ---------- */
.codewin{background:#06131A;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden}
.light .codewin{border-color:#20323B}
.codewin figcaption{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid #16303A;background:#0A1B23}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#2A3F49}
.dots i:first-child{background:#E5534B}
.dots i:nth-child(2){background:#E3B341}
.dots i:last-child{background:#3FB950}
.codewin-name{font-family:var(--mono);font-size:11px;color:#7E9AA5}
.codewin pre{margin:0;padding:18px 16px;overflow-x:auto}
.codewin code{font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#C6D9DE;white-space:pre}

/* ---------- FAQ ---------- */
.faq{max-width:820px;display:flex;flex-direction:column;gap:0}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-size:16.5px;font-weight:500;
  position:relative;list-style:none;color:var(--paper-fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:27px;width:9px;height:9px;
  border:solid var(--acc-dim);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
  transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq details p{padding:0 40px 22px 0;color:var(--paper-fg-2);font-size:15px}

/* ---------- realisations ---------- */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.project{border:1px solid var(--line-soft);border-radius:8px;padding:28px 26px;
  background:var(--ink-2);transition:border-color .35s ease,transform .35s var(--ease)}
.project:hover{border-color:var(--line);transform:translateY(-3px)}
.project .p-client{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc)}
.project h3{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.02em;margin:12px 0 10px}
.project p{color:var(--fg-2);font-size:14.5px}
.p-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line-soft)}
.p-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3)}
.p-meta dd{font-size:13px;color:var(--fg-2);margin-top:4px}
.p-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-family:var(--mono);font-size:12px;color:var(--acc)}
.p-link:hover{text-decoration:underline}

/* ---------- grille technologies ---------- */
.stackgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tech{border:1px solid var(--line-soft);border-radius:7px;padding:16px 18px;
  background:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:border-color .3s ease}
.tech:hover{border-color:var(--acc-dim)}
.tech-n{font-size:14.5px;font-weight:500}
.tech-c{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc-dim);border:1px solid var(--line-soft);border-radius:3px;padding:3px 7px;white-space:nowrap}

@media(max-width:1000px){
  .split{grid-template-columns:1fr;gap:36px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:1fr}
  .stackgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .light-head{padding-top:118px}
  .facts{grid-template-columns:1fr}
  .p-meta{grid-template-columns:1fr;gap:10px}
}