@import url("fonts.css");

:root{
  --paper:#E4E6E1;
  --paper-2:#D7DAD3;
  --card:#EFF0EC;
  --ink:#141715;
  --muted:#575D57;
  --faint:#868C85;
  --rule:#C2C6BD;
  --signal:#1B36C4;
  --green:#146B52;
  --pad:clamp(20px,5vw,88px);
  --maxw:1360px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:var(--grain);background-size:180px 180px;
}

img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--signal);color:#fff}

.serif{font-family:"Newsreader",Georgia,serif;font-weight:400}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.rule{height:1px;background:var(--rule);border:0}

.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--signal);
}
.eyebrow.n{color:var(--faint)}

/* ══════════ header ══════════ */
header{
  position:sticky;top:0;z-index:100;background:rgba(228,230,225,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
}
header .bar{display:flex;align-items:center;justify-content:space-between;
  height:60px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.logo{font-family:"Newsreader",Georgia,serif;font-weight:600;font-size:24px;letter-spacing:-.01em;text-decoration:none}
.logo b{color:var(--signal);font-weight:400}
nav{display:flex;gap:30px;align-items:center}
nav a{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .2s}
nav a:hover{color:var(--ink)}
nav .cta{border:1px solid var(--ink);border-radius:100px;padding:8px 16px;color:var(--ink);
  background:none;cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
nav .cta:hover{background:var(--ink);color:var(--paper)}
@media(max-width:820px){nav a{display:none}}

/* ══════════ hero ══════════ */
.hero{padding-top:clamp(52px,8vw,104px);padding-bottom:0}
.heroGrid{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(24px,4vw,64px);align-items:end}
@media(max-width:980px){.heroGrid{grid-template-columns:1fr}}
.hero h1{
  font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:clamp(38px,5.6vw,84px);line-height:1.04;letter-spacing:-.022em;font-weight:500;
  margin-top:22px;
}

/* panneau latéral */
.panel{border:1px solid var(--rule);background:var(--card);border-radius:8px;overflow:hidden}
.panel .phead{display:flex;align-items:center;gap:9px;padding:13px 20px;
  border-bottom:1px solid var(--rule);background:var(--paper-2);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.panel .phead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(20,107,82,.18)}
.panel .pr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 20px;border-bottom:1px solid var(--rule)}
.panel .pr:last-child{border-bottom:0}
.panel .pr .a{font-size:14.5px;font-weight:500;line-height:1.35}
.panel .pr .b{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.panel .pfoot{padding:12px 20px;background:var(--paper-2);border-top:1px solid var(--rule);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.contactGrid{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(28px,4vw,64px);align-items:end}
@media(max-width:980px){.contactGrid{grid-template-columns:1fr}}
.hero h1 em{font-style:italic;color:var(--signal)}
.hero .lede{font-size:clamp(17px,1.35vw,20.5px);color:var(--muted);max-width:62ch;
  margin-top:30px;line-height:1.6}
.hero .lede strong{color:var(--ink);font-weight:500}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule);margin-top:clamp(44px,6vw,76px)}
.kpi{padding:26px 26px 30px 0;border-right:1px solid var(--rule)}
.kpi:last-child{border-right:0}
.kpi .v{font-family:"Newsreader",Georgia,serif;font-size:clamp(38px,4.4vw,62px);line-height:.98}
.kpi .k{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.5}
@media(max-width:760px){.kpis{grid-template-columns:1fr 1fr}
  .kpi{padding-right:20px}.kpi:nth-child(2n){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--rule)}}

/* ticker */
.ticker{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:clamp(40px,5vw,64px);background:var(--paper-2);overflow:hidden;position:relative}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper-2),transparent 9%,transparent 91%,var(--paper-2))}
.ticker .lbl{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;
  padding:0 18px;background:var(--ink);color:var(--paper);z-index:3;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.ticker .rail{display:flex;width:max-content;animation:slide 62s linear infinite;padding-left:190px}
.ticker:hover .rail{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker .row{display:flex;gap:0;flex:none}
.tk{display:flex;align-items:center;gap:14px;padding:13px 26px;white-space:nowrap;
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);
  border-right:1px solid var(--rule)}
.tk .ok{color:var(--green)}
.tk .who{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ticker .rail{animation:none}}

/* ══════════ section shell ══════════ */
section{padding-block:clamp(70px,9vw,132px)}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  border-bottom:1px solid var(--ink);padding-bottom:16px;margin-bottom:clamp(38px,5vw,64px)}
.shead h2{font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(30px,4.2vw,58px);line-height:1.05;letter-spacing:-.012em}
.shead .idx{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.18em;
  color:var(--faint);white-space:nowrap}
.intro{font-size:clamp(17px,1.4vw,21px);color:var(--muted);max-width:68ch;
  margin-top:-16px;margin-bottom:clamp(38px,5vw,60px);line-height:1.6}

/* ══════════ cases ══════════ */
.case{border-top:1px solid var(--rule);padding-top:26px;margin-bottom:clamp(70px,9vw,120px)}
.case:last-child{margin-bottom:0}
.caseMeta{display:flex;flex-wrap:wrap;gap:0 24px;font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.caseMeta .num{color:var(--signal)}
.caseMeta .live{color:var(--green);display:inline-flex;align-items:center;gap:7px}
.caseMeta .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.case h3{font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(28px,3.9vw,56px);line-height:1.04;letter-spacing:-.015em;
  margin-top:16px;max-width:20ch}
.case .oneline{font-size:clamp(17px,1.4vw,21px);color:var(--muted);max-width:64ch;margin-top:18px}

.caseGrid{display:grid;grid-template-columns:1.62fr .95fr;gap:clamp(24px,3vw,48px);
  margin-top:clamp(30px,4vw,46px);align-items:start}
@media(max-width:960px){.caseGrid{grid-template-columns:1fr}}

/* video */
.player{position:relative;border:1px solid var(--rule);background:var(--paper-2);
  border-radius:8px;overflow:hidden;aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:cover;display:block;background:var(--paper-2)}
.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;padding:0}
.player .play span{display:inline-flex;align-items:center;gap:12px;background:var(--ink);
  color:var(--paper);padding:14px 24px 14px 20px;border-radius:100px;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.player .play:hover span{transform:scale(1.05)}
.player .play svg{width:11px;height:13px;fill:var(--paper)}
.player.on .play,.player.on .poster{display:none}
.vcap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* fiche technique */
.fiche{border:1px solid var(--rule);background:var(--card);border-radius:8px;padding:6px 22px 18px}
.fiche dl{display:grid;grid-template-columns:1fr;gap:0}
.fiche .r{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--rule)}
.fiche .r:last-child{border-bottom:0}
.fiche dt{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;padding-top:3px}
.fiche dd{font-size:14.5px;text-align:right;line-height:1.42;font-weight:500}

.body2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,54px);
  margin-top:clamp(30px,4vw,44px)}
@media(max-width:820px){.body2{grid-template-columns:1fr}}
.body2 p{margin-bottom:16px;color:#242926;line-height:1.68}
.body2 p:last-child{margin-bottom:0}
.body2 p strong{font-weight:600;color:var(--ink)}

.hard{border-left:2px solid var(--signal);padding:2px 0 2px 22px;margin-top:6px}
.hard .t{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.hard p{font-size:16px;color:#242926;line-height:1.66}

.stats{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);margin-top:clamp(28px,3.4vw,40px)}
.stats div{padding:20px 34px 20px 0;border-right:1px solid var(--rule);flex:1 1 150px}
.stats div:last-child{border-right:0}
.stats .v{font-family:"Newsreader",Georgia,serif;font-size:clamp(30px,3.2vw,44px);line-height:1}
.stats .k{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:9px}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tag{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);
  border-radius:100px;padding:6px 13px;background:var(--card)}

/* ══════════ méthode ══════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:28px 30px 34px 0;border-right:1px solid var(--rule)}
.step:last-child{border-right:0}
.step .n{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--signal)}
.step h4{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:27px;line-height:1.12;margin:12px 0 12px}
.step p{font-size:15.5px;color:var(--muted);line-height:1.62}

.stack{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px);
  margin-top:clamp(46px,5vw,70px)}
@media(max-width:720px){.stack{grid-template-columns:1fr}}
.stack .r{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--rule);font-size:15px}
.stack .r span:first-child{font-weight:500}
.stack .r span:last-child{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:right}

/* ══════════ about ══════════ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start}
@media(max-width:880px){.about{grid-template-columns:1fr}}
.about .big{font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(26px,3.2vw,44px);line-height:1.16;letter-spacing:-.01em}
.about p{color:#242926;line-height:1.7;margin-bottom:16px}

/* ══════════ contact ══════════ */
#contact{background:var(--paper-2);border-top:1px solid var(--rule)}
#contact h2{font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(34px,5.6vw,78px);line-height:1.03;letter-spacing:-.018em;max-width:17ch}
#contact .sub{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:56ch;margin-top:24px}
.links{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  border:1px solid var(--ink);border-radius:100px;padding:14px 24px;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;transition:.25s cubic-bezier(.2,.8,.2,1)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn:hover{transform:translateY(-2px)}
.btn.solid:hover{background:var(--signal);border-color:var(--signal)}
.btn:not(.solid):hover{background:var(--ink);color:var(--paper)}

footer{border-top:1px solid var(--rule);padding-block:26px;background:var(--paper-2)}
footer .in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}

/* ══════════ reveal ══════════ */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.2,.75,.25,1),transform .85s cubic-bezier(.2,.75,.25,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* progress rail */
#rail{position:fixed;left:0;top:0;height:2px;background:var(--signal);z-index:200;width:0}

/* ══════════ navigation interne ══════════ */
.case{scroll-margin-top:84px}
#top{scroll-margin-top:0}

.panel a.pr{text-decoration:none;transition:background .18s,padding-left .18s}
.panel a.pr:hover{background:var(--paper-2);padding-left:24px}
.panel a.pr:hover .a{color:var(--signal)}
.panel a.pr .a::after{content:"→";margin-left:9px;opacity:0;color:var(--signal);
  transition:opacity .18s,transform .18s;display:inline-block}
.panel a.pr:hover .a::after{opacity:1}
.panel a.pr:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}

#totop{position:fixed;z-index:120;
  right:max(16px,env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--ink);color:var(--paper);border-radius:100px;padding:12px 20px;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;box-shadow:0 12px 28px -16px rgba(20,23,21,.8);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),background .2s}
#totop.on{opacity:1;transform:none;pointer-events:auto}
#totop:hover{background:var(--signal)}
#totop:active{background:var(--signal)}
@media(min-width:900px){#totop{right:32px;bottom:32px}}
@media(max-width:520px){#totop{padding:11px 16px;font-size:10.5px;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){#totop{transition:none}}

/* ══════════ formulaire de rappel ══════════ */
button.btn{cursor:pointer;font-family:"JetBrains Mono",monospace}
.panel button.pr{width:100%;background:none;border:0;border-bottom:1px solid var(--rule);
  cursor:pointer;text-align:left;font:inherit;transition:background .18s,padding-left .18s}
.panel button.pr .a{color:var(--signal)}
.panel button.pr:hover{background:var(--paper-2);padding-left:24px}
.panel button.pr .a::after{content:"→";margin-left:9px;opacity:0;color:var(--signal);
  transition:opacity .18s;display:inline-block}
.panel button.pr:hover .a::after{opacity:1}

#rappel{border:0;padding:0;margin:auto;background:transparent;
  max-width:min(640px,calc(100vw - 32px));width:100%;color:var(--ink)}
#rappel::backdrop{background:rgba(20,23,21,.62);backdrop-filter:blur(3px)}
.dlgIn{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:clamp(26px,4vw,40px);box-shadow:0 40px 80px -40px rgba(20,23,21,.6);
  max-height:calc(100dvh - 40px);overflow-y:auto}
.dlgX{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--rule);background:var(--paper);color:var(--muted);font-size:20px;
  line-height:1;cursor:pointer;z-index:2;transition:background .2s,color .2s}
.dlgX:hover{background:var(--ink);color:var(--paper)}
#rappel h3{font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(26px,3.6vw,38px);line-height:1.1;letter-spacing:-.012em;margin-top:14px}
.dlgLede{color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:14px}
.dlgForm{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.fRow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.fRow{grid-template-columns:1fr}}
.dlgForm label{display:flex;flex-direction:column;gap:7px;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.dlgForm label span{color:var(--faint);text-transform:none;letter-spacing:.04em}
.dlgForm input,.dlgForm textarea{font-family:Archivo,sans-serif;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:12px 14px;
  width:100%;transition:border-color .18s,box-shadow .18s;resize:vertical}
.dlgForm input:focus,.dlgForm textarea:focus{outline:0;border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(27,54,196,.14)}
.dlgForm input:user-invalid,.dlgForm textarea:user-invalid{border-color:#B23A2A}
.dlgForm .full{width:100%}
.dlgForm button.full{width:100%;justify-content:center;margin-top:4px}
.dlgNote{font-size:13px;color:var(--faint);line-height:1.5;text-align:center}