/* ================================================================== *
 *  Socle partage par toutes les pages : palette, echelle typographique,
 *  boutons, barre. Une seule definition de la charte, sinon les deux
 *  pages divergent au premier ajustement.
 * ================================================================== */
/* ------------------------------------------------------------------ *
 *  Palette : quatre couleurs, plus un vert ajouté pour le seul GO.
 *  Le rouille ne décore pas, il alerte : il porte le NO GO et rien
 *  d'autre que l'accent. La réserve est en ardoise, qui est neutre.
 * ------------------------------------------------------------------ */
:root{
  --onyx:#0A0A0A; --onyx-1:#101112; --onyx-2:#16181A; --onyx-3:#22262A;
  --alab:#E5E4E2; --alab-1:#EFEEEC; --alab-2:#D6D5D2;
  --slate:#536878; --slate-t:#44576A; --slate-l:#93A2B0;
  --rust:#BA3902; --rust-hi:#DE5A1E;
  --go:#2E6A4E; --go-hi:#479C73;   /* jade botanical, choisi par Julian */

  --pad:clamp(20px,4.4vw,64px);
  --max:1560px;
  --edge:14vh;            /* pente du bord d'aile */
}
*{box-sizing:border-box}
/* « clip » et non « hidden » : ca laisse deborder l'avion sans creer de
   conteneur de defilement, donc position:sticky continue de marcher */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--alab);color:var(--onyx);
  font-family:"Instrument Sans",-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;letter-spacing:-.006em;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%}
a{color:inherit}
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* --- échelle typographique ---------------------------------------- */
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.032em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(40px,6.1vw,92px)}
h2{font-size:clamp(31px,4.3vw,64px)}
h3{font-size:clamp(19px,1.5vw,25px);letter-spacing:-.022em;line-height:1.18}
.kick{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--slate)}
.lede{font-size:clamp(17px,1.35vw,20.5px);line-height:1.5;color:var(--slate-t);max-width:46ch}
.dim{color:var(--slate-t)}
.tech{font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase}

/* --- boutons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  min-height:48px;padding:0 8px 0 26px;border:0;border-radius:999px;
  background:var(--onyx);color:var(--alab);cursor:pointer;
  font:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;transition:background .2s,color .2s;
}
.btn .pip{
  width:32px;height:32px;flex:none;border-radius:999px;
  background:var(--rust);color:#fff;
  display:grid;place-items:center;font-size:14px;line-height:1;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
/* un bouton sans pastille garde une gouttiere symetrique : sinon le texte
   colle au bord droit de la pilule */
.btn:not(:has(.pip)){padding:0 26px}
.btn:hover{background:var(--rust)}
.btn:hover .pip{background:#fff;color:var(--rust);transform:translateX(3px)}
.btn.sur-onyx{background:var(--alab);color:var(--onyx)}
.btn.sur-onyx:hover{background:var(--rust);color:#fff}
.btn.creux{background:transparent;color:var(--alab);box-shadow:inset 0 0 0 1px #ffffff2e}
.btn.creux:hover{background:var(--alab);color:var(--onyx)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* ================================================================== *
 *  BARRE
 * ================================================================== */
.barre{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:66px;padding:0 var(--pad);
  color:var(--alab);
  transition:background .35s,color .35s,box-shadow .35s;
}
.barre.pose{background:var(--alab);color:var(--onyx);box-shadow:0 1px 0 #0a0a0a1f}
.marque{display:flex;align-items:baseline;gap:9px;text-decoration:none;font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.marque i{
  width:7px;height:7px;flex:none;border-radius:99px;background:var(--rust);
  transform:translateY(-1px);
}
.barre nav{display:flex;gap:30px;font-size:14px}
.barre nav a{text-decoration:none;opacity:.72;transition:opacity .2s}
.barre nav a:hover{opacity:1}
.barre .btn{min-height:40px;font-size:14px;padding-left:20px}
.barre .btn .pip{width:26px;height:26px;font-size:12px}
@media(max-width:900px){.barre nav{display:none}}