/* Layout: a fixed world map behind the whole site — arcs advance node to node, the tech they carry rides along,
   hostile addresses stop at the firewall — and the content scrolls over it on dark panels. */
@font-face{font-family:"Archivo";src:url(/static/archivo-1.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --void:#07070A; --panel:#0D0F16; --line:#262B3A; --line-2:#3A4154;
  --ink:#E6F1FF; --ink-2:#A3AEC2; --ink-3:#7B8599;
  --blue:#4A79BB; --amber:#FFC857; --red:#FF3E1F; --green:#46E0A0;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --out:cubic-bezier(.16,1,.3,1);
  --gutter:max(20px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
/* Noir dans tous les cas : le site ne suit pas le thème clair du système (choix du client). */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --void:#07070A; --panel:#0D0F16; --line:#262B3A; --line-2:#3A4154;
  --ink:#E6F1FF; --ink-2:#A3AEC2; --ink-3:#7B8599;
  --blue:#4A79BB; --amber:#FFC857; --red:#FF3E1F; --green:#46E0A0; color-scheme:dark}}
:root[data-theme="light"]{
  --void:#07070A; --panel:#0D0F16; --line:#262B3A; --line-2:#3A4154;
  --ink:#E6F1FF; --ink-2:#A3AEC2; --ink-3:#7B8599;
  --blue:#4A79BB; --amber:#FFC857; --red:#FF3E1F; --green:#46E0A0; color-scheme:dark}
:root[data-theme="dark"]{
  --void:#07070A; --panel:#0D0F16; --line:#262B3A; --line-2:#3A4154;
  --ink:#E6F1FF; --ink-2:#A3AEC2; --ink-3:#7B8599;
  --blue:#4A79BB; --amber:#FFC857; --red:#FF3E1F; --green:#46E0A0; color-scheme:dark}

*{box-sizing:border-box}
html{scrollbar-color:var(--line-2) var(--void);background:var(--void)}
body{margin:0;background:var(--void);color:var(--ink);font:400 17px/1.6 var(--display);font-stretch:100%;-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in oklab,var(--amber) 35%,transparent);color:var(--ink)}
a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:.25em}
a:hover{text-decoration-color:var(--amber)}
:focus-visible{outline:1.5px solid var(--amber);outline-offset:4px;border-radius:999px}
.wrap{max-width:1960px;margin:0 auto;padding-inline:var(--gutter) max(20px,env(safe-area-inset-right,0px))}

/* ================= The background: fixed, full screen, the site scrolls over it ================= */
.fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--void) url(/static/fond-1.webp) center/cover no-repeat}
.fond video,.fond .surcouche{position:absolute;inset:0;width:100%;height:100%}
.fond video{object-fit:cover;object-position:center}
/* Inner pages: the background stays, dimmed and without its moving labels. */
.interne .fond{opacity:.38;animation:none}
.interne .surcouche{display:none}
/* Grand écran : la carte glisse à droite, l'Europe vers 62 %, et laisse le côté du titre à l'Atlantique. */
@media (min-width:1100px){.fond video,.fond .surcouche{width:124%;right:auto}}
.pluie{position:absolute;inset:0;display:flex;justify-content:space-between;padding-inline:1vw;opacity:.5;
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.pluie .col{display:flex;flex-direction:column;font:400 11px/1.65 var(--mono);color:color-mix(in oklab,var(--green) 26%,transparent);
  letter-spacing:.08em;animation:ruisselle linear infinite;will-change:transform}
.pluie .h{color:color-mix(in oklab,var(--green) 70%,transparent)}
.pluie .a{color:color-mix(in oklab,var(--amber) 55%,transparent)}
@keyframes ruisselle{from{transform:translateY(-100%)}to{transform:translateY(100vh)}}
.voile{position:absolute;inset:0;
  background:linear-gradient(90deg,var(--void) 0%,color-mix(in oklab,var(--void) 86%,transparent) 26%,color-mix(in oklab,var(--void) 45%,transparent) 48%,transparent 70%),
             linear-gradient(0deg,color-mix(in oklab,var(--void) 70%,transparent),transparent 30%)}

/* The overlay, in the video's own frame: the video draws the arcs; here the tech rides along them, nodes flash as
   they connect, and hostile addresses turn red and stop at the firewall. */
.surcouche .eclat{fill:none;stroke:var(--green);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;animation:raccorde 20s var(--out) infinite}
@keyframes raccorde{0%{opacity:0;transform:scale(.3)}4%{opacity:.9}20%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.surcouche .noeud{fill:var(--ink);filter:drop-shadow(0 0 8px var(--green))}
.surcouche .nom{fill:var(--ink);font:400 21px var(--display);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase}
.surcouche .statut{fill:var(--green);font:400 18px var(--mono);letter-spacing:.04em}
.surcouche .pkt,.surcouche .ip{offset-rotate:0deg;opacity:0;animation:voyage 20s linear infinite}
.surcouche .pkt rect{fill:color-mix(in oklab,var(--void) 82%,transparent);stroke:var(--green);stroke-width:1.4}
.surcouche .pkt text,.surcouche .ip text{font:500 19px var(--mono);text-anchor:middle;letter-spacing:.02em}
.surcouche .pkt text{fill:var(--green)}
.surcouche .pkt.b rect{stroke:#8FB3E8}.surcouche .pkt.b text{fill:#B9D2F5}
.surcouche .pkt.a rect{stroke:var(--amber)}.surcouche .pkt.a text{fill:var(--amber)}
@keyframes voyage{0%{offset-distance:0%;opacity:0}4%{opacity:1}30%{offset-distance:100%;opacity:1}36%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
.surcouche .ip{animation-name:approche}
.surcouche .ip rect{fill:color-mix(in oklab,var(--void) 82%,transparent);stroke:var(--amber);stroke-width:1.4;animation:inherit;animation-name:vire}
.surcouche .ip text{fill:var(--amber);animation:inherit;animation-name:vire-t}
@keyframes approche{0%{offset-distance:0%;opacity:0}4%{opacity:1}28%{offset-distance:100%;opacity:1}34%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes vire{0%,18%{stroke:var(--amber)}24%,100%{stroke:var(--red)}}
@keyframes vire-t{0%,18%{fill:var(--amber)}24%,100%{fill:var(--red)}}
.surcouche .mur{opacity:0;animation:mur 20s var(--out) infinite}
.surcouche .mur circle{fill:color-mix(in oklab,var(--red) 18%,transparent);stroke:var(--red);stroke-width:2.4}
.surcouche .mur path{stroke:var(--red);stroke-width:3;stroke-linecap:round}
.surcouche .mur text{fill:var(--red);font:500 18px var(--mono)}
@keyframes mur{0%,27%{opacity:0}30%{opacity:1}48%{opacity:1}55%,100%{opacity:0}}
@supports (animation-timeline: scroll()){
  .fond{animation:recul linear both;animation-timeline:scroll(root);animation-range:0 120vh}
  @keyframes recul{from{opacity:1}to{opacity:.42}}
}

/* ================= The site, over the background ================= */
.site{position:relative;z-index:1}
header.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-ring{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);position:relative;flex:none}
.brand-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,var(--amber) 0 22%,transparent 24%)}
.brand-name{font-stretch:125%;font-weight:300;letter-spacing:.42em;font-size:15px;line-height:1.1}
.brand-name small{display:block;font-size:10px;letter-spacing:.5em;color:var(--blue);margin-top:4px}
nav ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{font-stretch:115%;font-size:12px;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);transition:color .2s}
nav a:hover{color:var(--ink)}

.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:18px;padding:15px 18px 15px 30px;border-radius:999px;
  font:300 12.5px/1 var(--display);font-stretch:118%;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1.5px solid transparent;
  background:linear-gradient(var(--void),var(--void)) padding-box,linear-gradient(90deg,var(--blue),var(--line-2) 45%,var(--amber) 82%,var(--red)) border-box;
  box-shadow:-6px 4px 24px -14px var(--blue),8px 6px 26px -12px color-mix(in oklab,var(--red) 70%,transparent);
  transition:box-shadow .5s var(--out),background .5s var(--out)}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,color-mix(in oklab,var(--amber) 22%,transparent) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .9s var(--out)}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{background:linear-gradient(var(--void),var(--void)) padding-box,linear-gradient(90deg,var(--amber),var(--amber) 60%,var(--red)) border-box;
  box-shadow:0 8px 28px -10px color-mix(in oklab,var(--amber) 80%,transparent),10px 8px 30px -12px var(--red)}
.btn:active{transform:translateY(1px)}
.btn .target{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--amber);position:relative;flex:none;transition:transform .5s var(--out)}
.btn .target::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px solid var(--amber)}
.btn:hover .target{transform:scale(1.12)}
.btn.quiet{background:color-mix(in oklab,var(--void) 55%,transparent);border:1px solid var(--line-2);box-shadow:none;padding-right:30px}
.btn.quiet:hover{border-color:var(--ink-2);box-shadow:none}
.btn.small{padding:11px 14px 11px 22px;font-size:11px}

/* Opening: transparent, the map lives behind it */
.hero{min-height:max(620px,calc(100svh - 100px));display:flex;flex-direction:column}
.opening{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:720px;padding-block:40px 80px}
.opening::before{content:"";position:absolute;inset:-40px -140px -40px -160px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 40% 50%,color-mix(in oklab,var(--void) 82%,transparent),transparent 72%)}
h1{font-weight:200;font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;font-size:clamp(2.4rem,5.2vw,5.4rem);margin:0 0 28px}
h1 .l{display:block;animation:focus 1.6s var(--out) both}
h1 .l:nth-child(2){animation-delay:.18s}
h1 .l:nth-child(3){animation-delay:.36s}
.lede{color:var(--ink-2);font-size:1.12rem;max-width:34em;margin:0 0 36px;font-weight:350;animation:arrive 1.2s .7s var(--out) both}
.lede strong{color:var(--ink);font-weight:500}
.actions{display:flex;gap:16px;flex-wrap:wrap;animation:arrive 1.2s .9s var(--out) both}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-stretch:112%;color:var(--ink-3);animation:arrive 1.2s 1.1s var(--out) both}
.facts b{color:var(--ink);font-weight:400}
@keyframes focus{from{opacity:0;filter:blur(14px);letter-spacing:.32em}to{opacity:1;filter:blur(0);letter-spacing:.02em}}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Content panels: dark enough to read, open enough to feel the map underneath */
.contenu{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--void) 84%,transparent) 5%,color-mix(in oklab,var(--void) 84%,transparent) 95%,transparent)}
section{padding-block:96px;border-top:1px solid var(--line)}
h2{font-weight:200;font-stretch:122%;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.1;margin:0 0 14px;text-wrap:balance}
.intro{color:var(--ink-2);max-width:42em;margin:0 0 44px}
.note{color:var(--ink-3);font-size:.9rem;margin-top:26px}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center;margin-bottom:56px}
.feature .intro{margin-bottom:0}
.shot{margin:0;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--panel)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--line) 70%,transparent);
  background:linear-gradient(90deg,var(--void),transparent 30%),linear-gradient(0deg,color-mix(in oklab,var(--void) 60%,transparent),transparent 40%)}
.feature.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.feature.flip .shot{order:-1}
.feature.flip .shot::after{background:linear-gradient(270deg,var(--void),transparent 30%),linear-gradient(0deg,color-mix(in oklab,var(--void) 60%,transparent),transparent 40%)}

.guarantees{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.guarantee{padding:4px 32px 4px 0;margin-right:32px;border-right:1px solid var(--line)}
.guarantee:last-child{border-right:0;margin-right:0}
.guarantee h3{font-weight:300;font-stretch:112%;font-size:1.22rem;letter-spacing:.01em;margin:0 0 10px;line-height:1.3}
.guarantee p{color:var(--ink-2);margin:0;font-size:.98rem}
.guarantee .tech{display:block;margin-top:12px;font:400 12px/1.5 var(--mono);color:var(--green);letter-spacing:.02em}

.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;counter-reset:step}
.path::before,.path::after{content:"";position:absolute;left:11px;right:11px;top:11px;height:1px}
.path::before{background:var(--line-2)}
.path::after{background:linear-gradient(90deg,var(--blue),#8FB3E8 40%,var(--amber) 85%,var(--red));transform-origin:left;box-shadow:0 0 12px color-mix(in oklab,var(--amber) 50%,transparent)}
.path li{position:relative;z-index:1;padding:44px 20px 0 0;counter-increment:step}
.path li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--void);border:1.5px solid var(--line-2)}
.path li:last-child::before{border-color:var(--amber);box-shadow:0 0 16px -2px color-mix(in oklab,var(--amber) 70%,transparent)}
.path li::after{content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;display:grid;place-items:center;font-size:10px;color:var(--ink-2)}
.path h3{font-weight:400;font-size:1rem;margin:0 0 6px;font-stretch:108%}
.path p{color:var(--ink-2);margin:0;font-size:.92rem}

/* Defence: four moves, and the line the portal cannot cross */
.defense{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.defense li{border:1px solid var(--line);border-radius:18px;padding:26px 28px;background:color-mix(in oklab,var(--panel) 80%,transparent)}
.defense h3{margin:0 0 10px;font-weight:300;font-stretch:118%;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase}
.defense p{margin:0;color:var(--ink-2)}
.defense .tech{display:block;margin-top:14px;font:400 12px/1.6 var(--mono);color:var(--green)}
.defense li:nth-child(3){border-color:color-mix(in oklab,var(--amber) 45%,var(--line))}
.defense li:nth-child(4){border-color:color-mix(in oklab,var(--red) 45%,var(--line))}
.defense li:nth-child(4) .tech{color:var(--amber)}
.promesse{border:1.5px solid transparent;border-radius:18px;padding:30px 34px;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(120deg,var(--green),var(--line) 45%,var(--amber)) border-box;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:40px;align-items:center}
.promesse h3{margin:0;font-weight:200;font-stretch:122%;font-size:1.7rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.15}
.promesse p{margin:0;color:var(--ink-2)}
.promesse ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.promesse li{font:400 12px var(--mono);border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;color:var(--ink-2)}
.promesse li.non{color:var(--red);border-color:color-mix(in oklab,var(--red) 45%,var(--line))}
.promesse li.oui{color:var(--green);border-color:color-mix(in oklab,var(--green) 45%,var(--line))}

/* The portal's tapmap view, shown as the screen it is */
.ecran{border:1px solid var(--line-2);border-radius:20px;overflow:hidden;background:color-mix(in oklab,var(--void) 92%,transparent);
  box-shadow:0 30px 80px -40px color-mix(in oklab,var(--green) 40%,transparent)}
.ecran-barre{display:flex;align-items:center;gap:20px;padding:14px 22px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-stretch:115%;color:var(--ink-3)}
.ecran-barre b{color:var(--ink);font-weight:400}
.ecran-barre .vivant{margin-left:auto;color:var(--green)}
.ecran-barre .vivant::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:9px;vertical-align:1px;
  box-shadow:0 0 10px var(--green)}
.ecran-corps{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
.carte{margin:0;padding:22px;border-right:1px solid var(--line)}
.carte svg{display:block;width:100%;height:auto}
.carte .flien{fill:none;stroke:var(--green);stroke-width:1.3;opacity:.75}
.carte .fpouls{fill:var(--ink);offset-rotate:0deg;animation:fparcours linear infinite;filter:drop-shadow(0 0 4px var(--green))}
@keyframes fparcours{from{offset-distance:0%}to{offset-distance:100%}}
.carte .fattaque{fill:none;stroke:var(--red);stroke-width:1.3;stroke-dasharray:4 6;opacity:.85;animation:fdefile 1.6s linear infinite}
@keyframes fdefile{to{stroke-dashoffset:-20}}
.carte .fsource{fill:var(--red)}
.carte .fbloc circle{fill:color-mix(in oklab,var(--red) 20%,transparent);stroke:var(--red);stroke-width:1.4}
.carte .fbloc path{stroke:var(--red);stroke-width:1.6;stroke-linecap:round}
.carte .fhalo{fill:color-mix(in oklab,var(--green) 22%,transparent)}
.carte .fnoeud{fill:var(--ink)}
.carte .fnom{fill:var(--ink-2);font:400 10.5px var(--display);font-stretch:115%;letter-spacing:.1em;text-transform:uppercase}
.flux{list-style:none;margin:0;padding:10px 0;font-size:.9rem}
.flux li{padding:14px 22px;border-bottom:1px solid var(--line);display:grid;gap:3px;animation:alerte 9s var(--out) infinite}
.flux li:nth-child(2){animation-delay:2.2s}.flux li:nth-child(3){animation-delay:4.4s}.flux li:nth-child(4){animation-delay:6.6s}
@keyframes alerte{0%{background:color-mix(in oklab,var(--red) 12%,transparent)}20%,100%{background:transparent}}
.flux b{font:500 13px var(--mono);color:var(--red)}
.flux span{color:var(--ink)}
.flux em{font-style:normal;font-size:.82rem;color:var(--green)}

.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.offer{border:1px solid var(--line);border-radius:18px;padding:28px 28px 26px;background:var(--panel);transition:border-color .3s}
.offer:hover{border-color:var(--line-2)}
.offer.lit{border:1.5px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(150deg,var(--amber),var(--red) 40%,var(--line) 75%) border-box;
  box-shadow:0 18px 40px -26px color-mix(in oklab,var(--amber) 90%,transparent)}
.offer header{padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.offer h3{margin:0;font-weight:300;font-stretch:125%;letter-spacing:.32em;text-transform:uppercase;font-size:13px}
.offer .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-2)}
.offer.lit .dot{border-color:var(--amber);background:radial-gradient(circle,var(--amber) 0 30%,transparent 34%)}
.price{font-weight:200;font-stretch:118%;font-size:2.6rem;line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.price small{font-size:.9rem;color:var(--ink-2);font-weight:300;letter-spacing:.06em}
.ttc{color:var(--ink-3);font-size:.9rem;margin:0 0 20px}
dl.rows{margin:0 0 24px;display:grid;grid-template-columns:1fr auto;row-gap:10px;font-size:.92rem}
dl.rows dt{color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-stretch:112%;align-self:center}
dl.rows dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

.proofs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}
.proof{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--line)}
.proof b{font-weight:400}
.proof .result{color:var(--amber);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-stretch:112%;white-space:nowrap}
.proof span{grid-column:1/-1;color:var(--ink-3);font-size:.9rem}

.systems{display:flex;gap:14px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);border-radius:999px;padding:9px 18px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-stretch:115%}

footer{border-top:1px solid var(--line);padding-block:36px 48px;color:var(--ink-3);font-size:.85rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@supports (animation-timeline: view()){
  .shot img{animation:surface linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .path::after{animation:fill linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
}
@keyframes surface{from{opacity:.15;filter:brightness(.25) blur(6px);transform:scale(1.08)}to{opacity:1;filter:none;transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:1100px){
  .guarantees{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .guarantee:nth-child(2){border-right:0;margin-right:0}
  .ecran-corps{grid-template-columns:1fr}
  .carte{border-right:0;border-bottom:1px solid var(--line)}
  .promesse{grid-template-columns:1fr;gap:16px}
  .defense{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .voile{background:linear-gradient(0deg,var(--void) 8%,color-mix(in oklab,var(--void) 72%,transparent) 60%,color-mix(in oklab,var(--void) 45%,transparent))}
  .surcouche .statut,.surcouche .pkt,.surcouche .ip,.surcouche .mur text{display:none}
  .feature,.feature.flip{grid-template-columns:1fr;gap:28px}
  .feature.flip .shot{order:0}
  .guarantees,.offers,.proofs,.defense{grid-template-columns:1fr}
  .guarantee{border-right:0;margin-right:0;padding:0 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px}
  .guarantee:last-child{border-bottom:0;margin-bottom:0}
  .path{grid-template-columns:1fr;gap:26px}
  .path::before,.path::after{left:11px;right:auto;top:11px;bottom:11px;width:1px;height:auto}
  .path::after{background:linear-gradient(180deg,var(--blue),var(--amber));transform-origin:top}
  @keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .path li{padding:0 0 0 44px}
  nav ul{gap:20px}
}
/* Reduced motion: the film gives way to its still, nothing travels; the nodes and their names stay, colour and focus
   remain. */
@media (prefers-reduced-motion:reduce){
  .fond video,.pluie,.surcouche .pkt,.surcouche .ip,.surcouche .eclat,.surcouche .mur{display:none}
  h1 .l,.lede,.actions,.facts,.shot img,.path::after,.flux li,.carte .fpouls,.carte .fattaque{animation:none}
  .carte .fpouls{display:none}
  .btn::before{display:none}
}

/* ================= Pages of the shop itself: order, summary, legal texts ================= */
.page{max-width:980px;padding-block:48px 96px}
.page h1{font-weight:200;font-stretch:122%;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;margin:0 0 28px}
.panneau{background:color-mix(in oklab,var(--void) 90%,transparent);border:1px solid var(--line);border-radius:20px;padding:32px 36px}
.essai{margin:0 0 24px;padding:12px 18px;border:1px solid color-mix(in oklab,var(--amber) 55%,var(--line));border-radius:14px;
  background:color-mix(in oklab,var(--amber) 9%,var(--void));color:var(--ink);font-size:.92rem}
.hero .essai{max-width:720px;margin-top:8px}
.problemes{margin:0 0 24px;padding:14px 20px;border:1px solid color-mix(in oklab,var(--red) 60%,var(--line));border-radius:14px;
  background:color-mix(in oklab,var(--red) 10%,var(--void))}
.problemes p{margin:0 0 6px;font-weight:500}
.problemes ul{margin:0;padding-left:20px;color:var(--ink-2)}
/* Form: quiet fields, the amber edge only where the eye should go */
.form fieldset{border:1px solid var(--line);border-radius:16px;margin:0 0 20px;padding:18px 24px 20px;background:color-mix(in oklab,var(--panel) 70%,transparent)}
.form legend{padding:0 10px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-stretch:115%;color:var(--ink-2)}
.form label{display:block;margin:12px 0;color:var(--ink-2);font-size:.95rem}
.form input[type=text],.form input[type=email],.form input[type=number]{display:block;width:100%;margin-top:6px;padding:12px 14px;
  font:inherit;color:var(--ink);background:var(--void);border:1px solid var(--line-2);border-radius:10px;transition:border-color .2s,box-shadow .2s}
/* Text fields show focus by their edge; radios and boxes keep the site's focus ring. */
.form input[type=text]:focus-visible,.form input[type=email]:focus-visible,.form input[type=number]:focus-visible{outline:none;
  border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in oklab,var(--amber) 22%,transparent)}
.form label.choix{display:flex;gap:12px;align-items:flex-start;color:var(--ink);cursor:pointer}
.form label.choix input{margin-top:5px;accent-color:var(--amber);flex:none}
.form label.choix strong{font-weight:500}
.form .envoi{margin-top:8px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
button.btn{cursor:pointer}
/* Summary: a ruled table, the total stands out */
.recap{width:100%;border-collapse:collapse;margin:0 0 24px;font-variant-numeric:tabular-nums}
.recap th{text-align:left;font-weight:400;color:var(--ink-3);padding:10px 16px 10px 0;width:38%;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-stretch:112%}
.recap td{padding:10px 0;text-align:right}
.recap tr{border-bottom:1px solid var(--line)}
.recap .total th,.recap .total td{color:var(--amber);font-size:1.15rem;font-weight:500}
.id{font-family:var(--mono);font-size:.85em;word-break:break-all;color:var(--ink-2)}
/* Legal texts: readable measure, quiet headings */
.legal{max-width:76ch}
.legal h1{font-size:clamp(1.7rem,3vw,2.4rem)}
.legal h2{font-size:1.15rem;letter-spacing:.08em;margin:36px 0 10px}
.legal p,.legal li{color:var(--ink-2)}
.legal strong{color:var(--ink);font-weight:500}
.legal .version{color:var(--ink-3);font-size:.9rem}
footer.pied{flex-direction:column;align-items:flex-start;gap:8px;background:color-mix(in oklab,var(--void) 88%,transparent)}
.cible{margin:22px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-stretch:112%;color:var(--amber)}
footer.pied p{margin:0}

/* Généré par tools/site/fabrique.py : trajet, retard et durée de chaque élément animé. */
.pluie .pl0{animation-duration:19.8s;animation-delay:-7.1s}
.pluie .pl1{animation-duration:21.2s;animation-delay:-21.1s}
.pluie .pl2{animation-duration:27.8s;animation-delay:-17.7s}
.pluie .pl3{animation-duration:20.2s;animation-delay:-11.7s}
.pluie .pl4{animation-duration:39.1s;animation-delay:-19.4s}
.pluie .pl5{animation-duration:26.1s;animation-delay:-15.8s}
.pluie .pl6{animation-duration:37.5s;animation-delay:-11.5s}
.pluie .pl7{animation-duration:22.1s;animation-delay:-11.6s}
.pluie .pl8{animation-duration:27.9s;animation-delay:-18.7s}
.pluie .pl9{animation-duration:34.2s;animation-delay:-1.5s}
.pluie .pl10{animation-duration:27.0s;animation-delay:-20.7s}
.pluie .pl11{animation-duration:30.6s;animation-delay:-6.0s}
.pluie .pl12{animation-duration:21.2s;animation-delay:-16.7s}
.pluie .pl13{animation-duration:38.0s;animation-delay:-31.6s}
.pluie .pl14{animation-duration:24.4s;animation-delay:-14.3s}
.pluie .pl15{animation-duration:21.4s;animation-delay:-19.2s}
.pluie .pl16{animation-duration:39.4s;animation-delay:-3.9s}
.pluie .pl17{animation-duration:22.1s;animation-delay:-20.5s}
.surcouche .k0{offset-path:path('M1361.5 513.3 Q1377.7 519.3 1380.1 536.5');animation-delay:-0.00s}
.surcouche .k0e{animation-delay:6.00s}
.surcouche .k1{offset-path:path('M1361.5 513.3 Q1341.6 521.8 1339.7 543.3');animation-delay:-2.00s}
.surcouche .k1e{animation-delay:4.00s}
.surcouche .k2{offset-path:path('M1380.1 536.5 Q1387.6 544.4 1384.1 554.8');animation-delay:-4.00s}
.surcouche .k2e{animation-delay:2.00s}
.surcouche .k4{offset-path:path('M1380.1 536.5 Q1802.6 584.0 2119.0 868.1');animation-delay:-8.00s}
.surcouche .k4e{animation-delay:-2.00s}
.surcouche .k5{offset-path:path('M1384.1 554.8 Q1256.2 627.5 1213.7 768.4');animation-delay:-10.00s}
.surcouche .k5e{animation-delay:-4.00s}
.surcouche .k7{offset-path:path('M1361.5 513.3 Q1591.0 530.5 1756.9 690.0');animation-delay:-14.00s}
.surcouche .k7e{animation-delay:-8.00s}
.surcouche .k8{offset-path:path('M1384.1 554.8 Q1317.5 566.9 1287.3 627.5');animation-delay:-16.00s}
.surcouche .k8e{animation-delay:-10.00s}
.surcouche .x0{offset-path:path('M2251.2 645.2 Q1897.2 433.6 1507.8 505.5');animation-delay:-3.00s}
.surcouche .x0m{animation-delay:-3.00s}
.surcouche .x2{offset-path:path('M1920.4 664.6 Q1710.6 515.9 1465.0 541.8');animation-delay:-9.67s}
.surcouche .x2m{animation-delay:-9.67s}
.surcouche .x5{offset-path:path('M2387.1 611.6 Q2223.3 671.1 2143.0 817.9');animation-delay:-19.67s}
.surcouche .x5m{animation-delay:-19.67s}
.carte .fp0{offset-path:path('M729.4 124.6 Q738.1 127.8 739.3 137.0');animation-duration:3.5s;animation-delay:0.0s}
.carte .fp1{offset-path:path('M729.4 124.6 Q718.7 129.1 717.7 140.6');animation-duration:4.2s;animation-delay:-0.6s}
.carte .fp2{offset-path:path('M739.3 137.0 Q743.4 141.2 741.5 146.8');animation-duration:4.9s;animation-delay:-1.2s}
.carte .fp3{offset-path:path('M729.4 124.6 Q575.1 76.6 425.7 138.0');animation-duration:5.6s;animation-delay:-1.8s}
.carte .fp4{offset-path:path('M739.3 137.0 Q965.7 162.4 1135.2 314.6');animation-duration:3.5s;animation-delay:-2.4s}
.carte .fp5{offset-path:path('M741.5 146.8 Q673.0 185.7 650.2 261.2');animation-duration:4.2s;animation-delay:-3.0s}
.carte .fp6{offset-path:path('M717.7 140.6 Q568.2 101.9 424.0 157.2');animation-duration:4.9s;animation-delay:-3.6s}
.carte .fp7{offset-path:path('M729.4 124.6 Q852.3 133.8 941.2 219.2');animation-duration:5.6s;animation-delay:-4.2s}
.carte .fp8{offset-path:path('M741.5 146.8 Q705.8 153.3 689.6 185.7');animation-duration:3.5s;animation-delay:-4.8s}
.carte .fp9{offset-path:path('M424.0 157.2 Q419.1 147.1 425.7 138.0');animation-duration:4.2s;animation-delay:-5.4s}
.carte .fa0{animation-delay:0.0s}
.carte .fa1{animation-delay:-0.9s}
.carte .fa2{animation-delay:-1.8s}
.carte .fa3{animation-delay:-2.7s}
.carte .fa4{animation-delay:-3.6s}
.carte .fa5{animation-delay:-4.5s}