/* REACTORS — site classique. La page DEFILE, l'en-tete est collant, le pied est un vrai pied.
   C'est volontairement l'inverse des quatre autres essais (rail, bande, mur, console) : ici on
   fait un SITE, pas une interface. */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#04070d; --bg2:#070c16; --card:#0a1020;
  --line:rgba(148,163,184,.13); --line-c:rgba(0,240,228,.22);
  --ink:#eaf5f6; --dim:#8b9aa6; --faint:#55646f;
  --cyan:#00f0e4; --gold:#f5c542; --blue:#7aa2ff; --mag:#ff4fd8; --red:#f87171;
  --mono:'Fira Code',ui-monospace,Menlo,monospace;
  --sans:'Fira Sans',system-ui,sans-serif;
  --w:1120px; --gut:clamp(20px,5vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; position:relative}

/* ── le fond ───────────────────────────────────────────────────────────────
   Trois couches, toutes en CSS pur : pas de canvas, rien a charger, et le texte reste net.
   1. une trame technique fine, comme un papier millimetre d'atelier
   2. deux halos cyan qui derivent lentement, la chaleur des coeurs au loin
   3. un vignettage qui recentre le regard
   Tout est en `position:fixed` et `pointer-events:none` : le fond ne defile pas avec la page,
   ce qui evite le moire d'une trame qui bouge, et il n'intercepte aucun clic. */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22560%22%20height=%22560%22%20viewBox=%220%200%20560%20560%22%20fill=%22%2300f0e4%22%20shape-rendering=%22crispEdges%22%3E%3Cg%20opacity=%220.31%22%3E%3Crect%20x=%22295%22%20y=%2239%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22295%22%20y=%2255%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22287%22%20y=%2247%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22303%22%20y=%2247%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22295%22%20y=%2247%22%20width=%228%22%20height=%228%22/%3E%3C/g%3E%3Cg%20opacity=%220.26%22%3E%3Crect%20x=%2272%22%20y=%22-1%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2272%22%20y=%2215%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2264%22%20y=%227%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2280%22%20y=%227%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2272%22%20y=%227%22%20width=%228%22%20height=%228%22/%3E%3C/g%3E%3Cg%20opacity=%220.32%22%3E%3Crect%20x=%22529%22%20y=%22342%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22529%22%20y=%22350%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22525%22%20y=%22346%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22533%22%20y=%22346%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22529%22%20y=%22346%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.4%22%3E%3Crect%20x=%22167%22%20y=%22329%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22167%22%20y=%22341%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22161%22%20y=%22335%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22173%22%20y=%22335%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22167%22%20y=%22335%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3Cg%20opacity=%220.19%22%3E%3Crect%20x=%22264%22%20y=%22139%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22264%22%20y=%22155%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22256%22%20y=%22147%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22272%22%20y=%22147%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22264%22%20y=%22147%22%20width=%228%22%20height=%228%22/%3E%3C/g%3E%3Cg%20opacity=%220.41%22%3E%3Crect%20x=%22380%22%20y=%22501%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22380%22%20y=%22521%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22370%22%20y=%22511%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22390%22%20y=%22511%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22380%22%20y=%22511%22%20width=%2210%22%20height=%2210%22/%3E%3C/g%3E%3Cg%20opacity=%220.32%22%3E%3Crect%20x=%22372%22%20y=%22471%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22372%22%20y=%22491%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22362%22%20y=%22481%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22382%22%20y=%22481%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22372%22%20y=%22481%22%20width=%2210%22%20height=%2210%22/%3E%3C/g%3E%3Cg%20opacity=%220.39%22%3E%3Crect%20x=%22522%22%20y=%2292%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22522%22%20y=%22104%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22516%22%20y=%2298%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22528%22%20y=%2298%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22522%22%20y=%2298%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3Cg%20opacity=%220.39%22%3E%3Crect%20x=%22365%22%20y=%22226%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22365%22%20y=%22246%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22355%22%20y=%22236%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22375%22%20y=%22236%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22365%22%20y=%22236%22%20width=%2210%22%20height=%2210%22/%3E%3C/g%3E%3Cg%20opacity=%220.17%22%3E%3Crect%20x=%2229%22%20y=%22311%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%2229%22%20y=%22319%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%2225%22%20y=%22315%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%2233%22%20y=%22315%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%2229%22%20y=%22315%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.39%22%3E%3Crect%20x=%22446%22%20y=%22186%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22446%22%20y=%22194%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22442%22%20y=%22190%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22450%22%20y=%22190%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22446%22%20y=%22190%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.37%22%3E%3Crect%20x=%22281%22%20y=%2235%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22281%22%20y=%2243%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22277%22%20y=%2239%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22285%22%20y=%2239%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22281%22%20y=%2239%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.24%22%3E%3Crect%20x=%22416%22%20y=%22364%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22416%22%20y=%22372%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22412%22%20y=%22368%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22420%22%20y=%22368%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22416%22%20y=%22368%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.34%22%3E%3Crect%20x=%22439%22%20y=%22530%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22439%22%20y=%22538%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22435%22%20y=%22534%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22443%22%20y=%22534%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22439%22%20y=%22534%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.28%22%3E%3Crect%20x=%2255%22%20y=%2249%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%2255%22%20y=%2261%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%2249%22%20y=%2255%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%2261%22%20y=%2255%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%2255%22%20y=%2255%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3Cg%20opacity=%220.19%22%3E%3Crect%20x=%22374%22%20y=%22234%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22374%22%20y=%22242%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22370%22%20y=%22238%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22378%22%20y=%22238%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22374%22%20y=%22238%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.3%22%3E%3Crect%20x=%22427%22%20y=%22494%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22427%22%20y=%22514%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22417%22%20y=%22504%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22437%22%20y=%22504%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22427%22%20y=%22504%22%20width=%2210%22%20height=%2210%22/%3E%3C/g%3E%3Cg%20opacity=%220.3%22%3E%3Crect%20x=%22532%22%20y=%22257%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22532%22%20y=%22265%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22528%22%20y=%22261%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22536%22%20y=%22261%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22532%22%20y=%22261%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.26%22%3E%3Crect%20x=%22298%22%20y=%22169%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22298%22%20y=%22185%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22290%22%20y=%22177%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22306%22%20y=%22177%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%22298%22%20y=%22177%22%20width=%228%22%20height=%228%22/%3E%3C/g%3E%3Cg%20opacity=%220.16%22%3E%3Crect%20x=%22486%22%20y=%22193%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22486%22%20y=%22205%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22480%22%20y=%22199%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22492%22%20y=%22199%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22486%22%20y=%22199%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3Cg%20opacity=%220.25%22%3E%3Crect%20x=%22368%22%20y=%22152%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22368%22%20y=%22164%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22362%22%20y=%22158%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22374%22%20y=%22158%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22368%22%20y=%22158%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3Cg%20opacity=%220.23%22%3E%3Crect%20x=%22469%22%20y=%2210%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22469%22%20y=%2230%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22459%22%20y=%2220%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22479%22%20y=%2220%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22469%22%20y=%2220%22%20width=%2210%22%20height=%2210%22/%3E%3C/g%3E%3Cg%20opacity=%220.39%22%3E%3Crect%20x=%22367%22%20y=%22253%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22367%22%20y=%22261%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22363%22%20y=%22257%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22371%22%20y=%22257%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22367%22%20y=%22257%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3Cg%20opacity=%220.26%22%3E%3Crect%20x=%2232%22%20y=%22141%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2232%22%20y=%22157%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2224%22%20y=%22149%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2240%22%20y=%22149%22%20width=%228%22%20height=%228%22/%3E%3Crect%20x=%2232%22%20y=%22149%22%20width=%228%22%20height=%228%22/%3E%3C/g%3E%3Cg%20opacity=%220.25%22%3E%3Crect%20x=%22457%22%20y=%22241%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22457%22%20y=%22261%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22447%22%20y=%22251%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22467%22%20y=%22251%22%20width=%2210%22%20height=%2210%22/%3E%3Crect%20x=%22457%22%20y=%22251%22%20width=%2210%22%20height=%2210%22/%3E%3C/g%3E%3Cg%20opacity=%220.24%22%3E%3Crect%20x=%22247%22%20y=%22363%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22247%22%20y=%22371%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22243%22%20y=%22367%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22251%22%20y=%22367%22%20width=%224%22%20height=%224%22/%3E%3Crect%20x=%22247%22%20y=%22367%22%20width=%224%22%20height=%224%22/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(rgba(0,240,228,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,228,.14) 1px, transparent 1px);
  background-size:560px 560px, 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  /* Deux masques COMBINES : l'un attenue vers le bas, l'autre attenue a GAUCHE, la ou vit le
     texte. La constellation reste pleine sur la moitie droite, qui est ouverte. Sans le masque
     horizontal les croix passaient derriere le titre et le rendaient bruyant. */
  mask-image:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.4) 72%, transparent 100%),
    linear-gradient(100deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.34) 32%, rgba(0,0,0,.8) 56%, #000 74%);
  mask-composite:intersect;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.4) 72%, transparent 100%),
    linear-gradient(100deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.34) 32%, rgba(0,0,0,.8) 56%, #000 74%);
  -webkit-mask-composite:source-in;
}

/* Le fantome : la croix du logo, ENORME, derriere le heros. Les couches precedentes etaient a
   0,05 d'opacite sur du noir : techniquement presentes, visuellement inexistantes. Celle-ci se
   voit, et c'est le but — c'est la marque qui tient le fond, pas un bruit decoratif. */
.hero{position:relative; overflow:hidden}
.hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-14%; top:50%; transform:translateY(-50%);
  width:min(760px, 74vw); aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20400%22%20fill=%22%2300f0e4%22%20shape-rendering=%22crispEdges%22%3E%3Cg%20transform=%22rotate%280%20200%20200%29%22%3E%3Crect%20x=%22188%22%20y=%2240%22%20width=%2224%22%20height=%22120%22/%3E%3Crect%20x=%22174%22%20y=%22150%22%20width=%2252%22%20height=%2226%22/%3E%3Crect%20x=%22168%22%20y=%2218%22%20width=%2264%22%20height=%2220%22/%3E%3C/g%3E%3Cg%20transform=%22rotate%2890%20200%20200%29%22%3E%3Crect%20x=%22188%22%20y=%2240%22%20width=%2224%22%20height=%22120%22/%3E%3Crect%20x=%22174%22%20y=%22150%22%20width=%2252%22%20height=%2226%22/%3E%3Crect%20x=%22168%22%20y=%2218%22%20width=%2264%22%20height=%2220%22/%3E%3C/g%3E%3Cg%20transform=%22rotate%28180%20200%20200%29%22%3E%3Crect%20x=%22188%22%20y=%2240%22%20width=%2224%22%20height=%22120%22/%3E%3Crect%20x=%22174%22%20y=%22150%22%20width=%2252%22%20height=%2226%22/%3E%3Crect%20x=%22168%22%20y=%2218%22%20width=%2264%22%20height=%2220%22/%3E%3C/g%3E%3Cg%20transform=%22rotate%28270%20200%20200%29%22%3E%3Crect%20x=%22188%22%20y=%2240%22%20width=%2224%22%20height=%22120%22/%3E%3Crect%20x=%22174%22%20y=%22150%22%20width=%2252%22%20height=%2226%22/%3E%3Crect%20x=%22168%22%20y=%2218%22%20width=%2264%22%20height=%2220%22/%3E%3C/g%3E%3Cpolygon%20points=%22200,152%20241.6,176%20241.6,224%20200,248%20158.4,224%20158.4,176%22/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.09;
  filter:drop-shadow(0 0 60px rgba(0,240,228,.28));
}
.hero .wrap{position:relative; z-index:1}

/* La ligne d'horizon : une lueur nette sous le heros, qui separe la scene au lieu de la degrader. */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(0,240,228,.55) 26%, rgba(0,240,228,.75) 50%, rgba(0,240,228,.55) 74%, transparent);
  box-shadow:0 0 26px rgba(0,240,228,.35);
}

@media (prefers-reduced-motion:no-preference){
  body::before{animation:breathe 11s ease-in-out infinite alternate}
}
@keyframes breathe{from{opacity:.62}to{opacity:1}}}

body::after{
  content:''; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 42% at 74% 16%, rgba(0,240,228,.16), transparent 68%),
    radial-gradient(38% 40% at 16% 74%, rgba(122,162,255,.10), transparent 66%),
    radial-gradient(140% 100% at 50% 50%, transparent 42%, rgba(2,4,9,.82) 100%);
  filter:blur(22px);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-2.2%,-1.4%,0) scale(1)}
  to  {transform:translate3d(2.2%,1.8%,0) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
.wrap{max-width:var(--w); margin:0 auto; padding-inline:var(--gut)}

/* ── en-tete collant ── */
header{position:sticky; top:0; z-index:50; background:rgba(4,7,13,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
header .bar{display:flex; align-items:center; gap:22px; height:66px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.logo img{width:24px;height:24px;display:block}
.logo b{font-family:var(--mono); font-size:13px; letter-spacing:.3em; font-weight:500}
nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; padding:9px 12px; border-radius:2px; transition:color .18s,background .18s}
nav a:hover{color:var(--ink); background:rgba(0,240,228,.07)}
nav a.x{color:var(--cyan); border:1px solid var(--line-c)}
nav a.x:hover{background:var(--cyan); color:#04070d}
nav a:focus-visible,.btn:focus-visible,.logo:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* ── hero ── */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:52px;
  align-items:center; padding-block:clamp(52px,9vw,104px)}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:18px}
h1{font-size:clamp(34px,5.6vw,62px); line-height:1.05; letter-spacing:-.028em; font-weight:700}
.hero p{font-size:clamp(16px,1.9vw,19px); color:var(--dim); margin-top:20px; max-width:52ch}
.cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; min-height:46px; padding:0 22px; text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--line-c); color:var(--ink); transition:background .18s,color .18s,border-color .18s}
.btn:hover{border-color:var(--cyan)}
.btn.solid{background:var(--cyan); color:#04070d; border-color:var(--cyan); font-weight:600}
.btn.solid:hover{background:#7dfff8}
.heroart{border:1px solid var(--line); background:var(--card); padding:14px}
.heroart svg{width:100%;height:auto;display:block}
.heroart .cap{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:11px;
  display:flex; justify-content:space-between; gap:10px}
.heroart .cap b{color:var(--cyan); font-weight:400}

/* ── sections ── */
section{border-bottom:1px solid var(--line); padding-block:clamp(48px,7vw,88px)}
section:nth-of-type(even){background:rgba(7,12,22,.72)}
.head{max-width:64ch; margin-bottom:30px}
.num{font-family:var(--mono); font-size:11px; letter-spacing:.26em; color:var(--cyan)}
h2{font-size:clamp(25px,3.6vw,38px); line-height:1.14; letter-spacing:-.02em; font-weight:600; margin:10px 0 14px}
h3{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:28px 0 10px}
p{font-size:16px; color:var(--dim); max-width:66ch}
p+p{margin-top:12px}
p strong{color:var(--ink); font-weight:600} p em{color:#b3c2c8; font-style:italic}
code{font-family:var(--mono); font-size:.9em; color:#bcd}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; align-items:start}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:14px; margin-top:8px}
.card{border:1px solid var(--line); background:rgba(10,16,32,.72); padding:18px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.card .k{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.card .v{font-size:26px; margin-top:7px; letter-spacing:-.02em; font-weight:600}
.card .s{font-size:14px; color:var(--dim); margin-top:4px}

.tablewrap{overflow-x:auto; margin-top:8px}
table{border-collapse:collapse; width:100%; font-size:14.5px}
th,td{text-align:left; padding:11px 14px; border:1px solid var(--line)}
th{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); font-weight:400}
td{color:var(--dim)} td:first-child{color:var(--ink)}
.bad{color:var(--red)}
.quote{border-left:3px solid var(--cyan); padding:4px 0 4px 18px; margin:22px 0}
.quote p{color:#b3c2c8; font-size:17px}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); gap:12px; margin-top:20px}
.gallery figure{border:1px solid var(--line); background:var(--card)}
.gallery svg{width:100%;height:auto;display:block}
.gallery figcaption{font-family:var(--mono); font-size:9.5px; color:var(--faint);
  padding:7px 9px; border-top:1px solid var(--line); line-height:1.5}
.gallery figcaption b{display:block; color:var(--dim); font-weight:400}

/* ── pied de page, en colonnes, comme il se doit ── */
footer{padding-block:52px 34px; background:rgba(7,12,22,.82)}
.fcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px}
.fcols h4{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px; font-weight:400}
.fcols a,.fcols span{display:block; font-size:14px; color:var(--dim); text-decoration:none; padding:4px 0}
.fcols a:hover{color:var(--cyan)}
.legal{margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--faint)}

@media (max-width:820px){
  html{scroll-padding-top:66px}
  header .bar{height:56px; gap:12px}
  .logo b{display:none}
  nav{gap:0} nav a{padding:8px 9px; font-size:11px}
  .hero .wrap{grid-template-columns:minmax(0,1fr); gap:32px}
  .heroart{order:-1}
}