/* ==============================================================================================
   Varuna SMP — design system « La Forge » (refonte steampunk/Create, 2026-08-06).

   DIRECTION. Le serveur tourne autour de Create : des machines, des engrenages de laiton, des
   tuyaux de cuivre, des plaques de fer rivetees, des lettres en pixels creme (le logo). La page est
   une salle des machines. Tout ce qui structure est du FER (gunmetal) ; tout ce qui se clique est du
   LAITON ; le CUIVRE relie et signale le populaire ; le JADE dit ce qui vit ; le CREME porte les
   titres, en pixels, comme le logo.

   LE MOTIF signature : l'ENGRENAGE. Il n'est pas decoratif — Create, c'est l'energie cinetique, donc
   des engrenages. Ils tournent en fond (lentement, et se taisent pour qui refuse le mouvement), et
   ponctuent les sections comme un arbre de transmission. Les plaques portent des RIVETS aux coins.

   AUCUNE RESSOURCE EXTERNE, toujours (CSP `default-src 'self'`). Les deux polices pixel sont
   AUTO-HEBERGEES en .woff2 (3 a 8 Ko chacune), servies par notre propre serveur — jamais un CDN.

   PAS DE NOIR PUR (#000 macule sur OLED et interdit de creuser un plan en dessous). Le fond est un
   noir chaud de forge, #100e0b. Trois plans de surface, du plus loin au plus proche.

   CONTRASTES (WCAG AA) verifies sur le pire cas (--surface-haute) : texte 13:1, laiton 8:1,
   creme 12:1, gris 6:1, jade 8:1, cuivre 4.6:1 (jamais en petit texte long).
   ============================================================================================== */

/* --- Polices auto-hebergees ------------------------------------------------------------------- */
/* Pixelify Sans (OFL) : le pixel LISIBLE des titres, cousin des lettres VARUNA du logo.
   Silkscreen (OFL) : la petite plaque estampee — surtitres, badges, libelles de jauge, cadrans. */
@font-face {
  font-family:"Pixelify Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/pixelify.woff2") format("woff2");
}
@font-face {
  font-family:"Silkscreen"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/silkscreen.woff2") format("woff2");
}
@font-face {
  font-family:"Silkscreen"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/silkscreen-bold.woff2") format("woff2");
}

:root {
  /* Matieres — trois plans de forge, du plus loin au plus proche */
  --fond:#100e0b;
  --surface:#1a1610;
  --surface-haute:#241e16;
  --bord:#342b1e;
  --bord-clair:#4c3f2b;

  /* Metaux et encres */
  --texte:#efe9dc;
  --gris:#b3a992;         /* texte secondaire, pleinement lisible */
  --gris-faible:#948a76;  /* uniquement « absent », « neant » — jamais une phrase */
  --creme:#f2e8cf;        /* les titres, comme les lettres du logo */
  --laiton:#e0b352;
  --laiton-vif:#f2ca73;
  --or-clair:#f8de95;
  --cuivre:#cf8446;       /* cuivre : accent secondaire, tuyaux, « populaire » */
  --cuivre-vif:#e6a163;
  --fer:#525b66;          /* gunmetal : structure, barres, plaques neutres */
  --fer-clair:#727c88;
  --jade:#5fd39a;         /* en ligne, acquis */
  --rouge:#ef6a52;        /* alerte / urgence, en TEXTE */
  --cramoisi:#7a2420;     /* aplat uniquement */

  /* Polices : pixel pour les titres et les libelles-machine, sans systeme pour le corps. */
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,
           "Helvetica Neue",Arial,sans-serif;
  --police-titre:"Pixelify Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --police-etiquette:"Silkscreen",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  /* Rythme vertical : une seule echelle, partout. */
  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2rem; --e5:3rem; --e6:4rem; --e7:6rem;

  --rayon:12px;
  --rayon-petit:7px;

  --arete:inset 0 1px 0 rgba(255,236,200,.06);
  --transition:.18s cubic-bezier(.4,0,.2,1);
}

* { box-sizing:border-box }
[hidden] { display:none !important }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body {
  margin:0; background:var(--fond); color:var(--texte);
  font-family:var(--police); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* Trois lueurs de forge tres basses, sur le FOND seulement : jamais au-dessus d'un texte. La
     chaude en haut a gauche (le foyer), une froide de fer a droite, une braise cuivree en bas. */
  background-image:
    radial-gradient(ellipse 85% 45% at 15% -8%, rgba(224,179,82,.09), transparent 60%),
    radial-gradient(ellipse 65% 40% at 92% 4%, rgba(114,124,136,.06), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(207,132,70,.05), transparent 60%);
  background-attachment:fixed; background-repeat:no-repeat;
}

a { color:var(--laiton); text-underline-offset:.2em }
a:hover { color:var(--laiton-vif) }
:focus-visible { outline:2px solid var(--laiton-vif); outline-offset:3px; border-radius:3px }
::selection { background:rgba(224,179,82,.28); color:var(--creme) }

.page { max-width:72rem; margin:0 auto; padding:0 var(--e3) }

.saut {
  position:absolute; left:var(--e2); top:-5rem; z-index:40;
  background:var(--laiton); color:var(--fond); font-weight:700;
  padding:.7rem 1.1rem; border-radius:var(--rayon-petit); text-decoration:none;
  transition:top var(--transition);
}
.saut:focus { top:var(--e2); color:var(--fond) }

/* --- L'engrenage : le motif signature -------------------------------------------------------- */
/* Un <svg class="engrenage"> pose dans le HTML. `.tourne` le fait pivoter ; `.envers` inverse le sens.
   Deux engrenages qui s'engrenent tournent en sens CONTRAIRE, et leur vitesse ANGULAIRE est inverse
   de leur taille : au point de contact, les dents doivent avancer a la meme vitesse lineaire, sinon
   elles broutent. La duree d'un tour est donc proportionnelle au diametre (var --d, posee par la
   classe de position de chaque roue) ; une petite roue tourne vite, une grande lentement. Purement
   decoratif : aria-hidden dans le markup. */
.engrenage { display:block }
.engrenage.tourne { animation:rotation var(--d, 26s) linear infinite; transform-origin:50% 50% }
.engrenage.envers { animation:rotation var(--d, 26s) linear infinite reverse; transform-origin:50% 50% }
@keyframes rotation { to { transform:rotate(360deg) } }

/* Champ d'engrenages d'ambiance derriere un en-tete : hors flux, sous le contenu, masque en fondu. */
.machinerie { position:relative; isolation:isolate }
.machinerie > .rouages {
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 15%, #000 20%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 70% 15%, #000 20%, transparent 78%);
}
.rouages .engrenage { position:absolute; opacity:.5 }

/* --- Plaque de fer rivetee : la surface de base des cartes et panneaux ----------------------- */
.plaque {
  position:relative;
  background:
    linear-gradient(180deg, var(--surface-haute), var(--surface));
  border:1px solid var(--bord-clair); border-radius:var(--rayon);
  box-shadow:var(--arete), 0 12px 34px -20px rgba(0,0,0,.8);
}
/* Rivets : quatre tetes aux coins, en degrades radiaux (zero image). */
.plaque.rivetee {
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255,240,205,.16) 0 1px, rgba(0,0,0,.35) 2px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, rgba(255,240,205,.16) 0 1px, rgba(0,0,0,.35) 2px 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), rgba(255,240,205,.16) 0 1px, rgba(0,0,0,.35) 2px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), rgba(255,240,205,.16) 0 1px, rgba(0,0,0,.35) 2px 3px, transparent 4px),
    linear-gradient(180deg, var(--surface-haute), var(--surface));
  background-repeat:no-repeat;
}

/* --- Barre laiton (le rail du logo) et tuyau de cuivre --------------------------------------- */
.rail { height:3px; border-radius:2px; background:linear-gradient(90deg,
        transparent, var(--fer), var(--fer-clair), var(--fer), transparent) }
.tuyau { height:6px; border-radius:6px;
  background:linear-gradient(180deg, var(--cuivre-vif), var(--cuivre) 55%, #8a5426);
  box-shadow:inset 0 1px 0 rgba(255,220,180,.4), 0 1px 3px rgba(0,0,0,.5) }

/* --- Navigation ------------------------------------------------------------------------------ */
.nav {
  border-bottom:1px solid var(--bord);
  background:rgba(16,14,11,.82); backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  position:sticky; top:0; z-index:30;
  box-shadow:0 1px 0 rgba(255,236,200,.04);
}
.nav .page {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  min-height:4.4rem;
}
.nav a { text-decoration:none }
.nav-marque {
  font-family:var(--police-titre); font-weight:700; color:var(--creme);
  font-size:1.15rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.65rem;
}
/* La marque porte le vrai logo (webp leger, png de repli via <picture>). */
.nav-marque img { width:2.1rem; height:2.1rem; display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) }
.nav-liens { display:flex; align-items:center; gap:var(--e1) }
.nav-liens a {
  color:var(--gris); font-size:.95rem; font-weight:500;
  min-height:44px; display:inline-flex; align-items:center; padding:0 .85rem;
  border-radius:var(--rayon-petit); position:relative;
  transition:color var(--transition), background var(--transition);
}
.nav-liens a:hover { color:var(--creme); background:rgba(255,236,200,.05) }
.nav-liens a[aria-current] { color:var(--laiton) }
.nav-liens a[aria-current]::after {
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.5rem;
  height:2px; border-radius:2px; background:var(--laiton);
}
/* Un lien-bouton dans la nav : l'appel a l'action toujours visible, en laiton plein. On repose
   color/font-weight ici car `.nav-liens a` (specificite 0,1,1) l'emporterait sinon sur `.bouton`
   (0,1,0) et peindrait le libelle en gris pale sur le laiton - « Jouer » devenait illisible. */
.nav-liens .bouton { min-height:40px; padding:.4rem 1.1rem; font-size:.92rem;
  color:#241a08; font-weight:700 }
.nav-liens .bouton:hover { color:#241a08 }

/* --- Titres ---------------------------------------------------------------------------------- */
h1, h2, h3 { font-family:var(--police-titre); margin:0; color:var(--creme); font-weight:700 }
h1 {
  font-size:clamp(2.3rem,6.2vw,4.1rem); line-height:1.04; letter-spacing:.005em;
  text-shadow:0 3px 0 rgba(0,0,0,.35);
}
/* Le membre accentue du titre passe au laiton : la couleur designe le mot qui porte la promesse. */
h1 .accent { color:var(--laiton) }
h1 .cuivre { color:var(--cuivre-vif) }
h2 { font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.15; letter-spacing:.005em }
h3 { font-size:1.1rem; line-height:1.4; letter-spacing:.01em; color:var(--texte) }

/* Surtitre : plaque estampee. Pixel etroit, capitales espacees, tiret de laiton. */
.surtitre {
  font-family:var(--police-etiquette); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--laiton); margin:0 0 var(--e3);
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.surtitre::before { content:""; width:1.6rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--laiton), var(--cuivre)); flex:0 0 1.6rem }
.chapeau { color:var(--gris); font-size:1.16rem; line-height:1.62; max-width:44rem; margin:var(--e3) 0 0 }

/* Section + arbre de transmission : un filet de fer traverse, un engrenage le ponctue. */
.section { padding:var(--e7) 0; position:relative }
.section + .section { border-top:1px solid var(--bord) }
.section > h2 { position:relative; padding-bottom:var(--e2) }
.section > h2::after {
  content:""; position:absolute; left:0; bottom:0; width:3.2rem; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--laiton), var(--cuivre) 70%, transparent);
}

/* --- Boutons : des touches de laiton estampees ----------------------------------------------- */
.bouton {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  text-decoration:none; font-family:var(--police); font-weight:700; font-size:1.02rem;
  letter-spacing:.005em;
  min-height:50px; padding:.85rem 1.8rem; border-radius:var(--rayon-petit);
  border:1px solid rgba(120,80,20,.55); cursor:pointer; position:relative;
  color:#241a08;
  background:linear-gradient(180deg, var(--or-clair), var(--laiton) 52%, #cf9d3d);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.7), inset 0 -2px 0 rgba(120,80,20,.45),
    0 0 0 1px rgba(224,179,82,.25), 0 10px 26px -10px rgba(224,179,82,.6);
  transition:filter var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bouton:hover { filter:brightness(1.06); color:#241a08;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.8), inset 0 -2px 0 rgba(120,80,20,.5),
    0 0 0 1px rgba(242,202,115,.55), 0 12px 30px -10px rgba(224,179,82,.75) }
.bouton:active { transform:translateY(2px);
  box-shadow:inset 0 2px 5px rgba(80,50,10,.5), 0 0 0 1px rgba(224,179,82,.3) }
/* Creux : plaque de fer sombre, s'allume en laiton au survol. */
.bouton.creux {
  background:linear-gradient(180deg, rgba(255,236,200,.05), rgba(0,0,0,.15));
  color:var(--texte); border-color:var(--bord-clair);
  box-shadow:var(--arete), 0 6px 18px -12px rgba(0,0,0,.9);
}
.bouton.creux:hover { background:rgba(224,179,82,.1); border-color:var(--laiton);
  color:var(--laiton-vif); filter:none;
  box-shadow:var(--arete), 0 0 0 1px rgba(224,179,82,.3) }
.bouton.cuivre {
  color:#2a1608; border-color:rgba(110,60,20,.6);
  background:linear-gradient(180deg, var(--cuivre-vif), var(--cuivre) 52%, #9c5a2a);
  box-shadow:inset 0 1px 0 rgba(255,224,190,.6), inset 0 -2px 0 rgba(90,45,15,.5),
    0 0 0 1px rgba(207,132,70,.25), 0 10px 26px -10px rgba(207,132,70,.6);
}
.bouton.cuivre:hover { filter:brightness(1.06); color:#2a1608 }
.bouton.inerte {
  background:transparent; color:var(--gris-faible); border-color:var(--bord);
  cursor:not-allowed; box-shadow:none;
}
.bouton.inerte:hover { background:transparent; border-color:var(--bord); color:var(--gris-faible);
  filter:none; box-shadow:none; transform:none }
/* Un bouton éteint porte le curseur de l'INTERDIT, pas celui de l'ATTENTE : avec `progress`, un
   bouton d'achat désactivé donnait une roue qui tourne sans fin sous la souris, et le visiteur
   attendait une page qui ne venait jamais (« la souris charge en boucle et rien ne se passe »,
   signalé le 2026-08-12). L'attente, la vraie, est portée par aria-busy pendant la requête. */
.bouton:disabled, .bouton[aria-disabled=true] { opacity:.55; cursor:not-allowed; filter:none; transform:none }
.bouton[aria-busy=true] { cursor:progress }
.actions { display:flex; gap:.85rem; flex-wrap:wrap; margin-top:var(--e4) }

/* --- La jauge du serveur : un manometre de chaudiere ----------------------------------------- */
.etat {
  display:flex; flex-wrap:wrap; gap:1px; margin-top:var(--e6);
  background:var(--bord); border:1px solid var(--bord-clair); border-radius:var(--rayon);
  overflow:hidden; box-shadow:var(--arete), 0 12px 34px -20px rgba(0,0,0,.8);
}
.etat > * {
  background:linear-gradient(180deg, var(--surface-haute), var(--surface));
  box-shadow:var(--arete);
  padding:var(--e2) var(--e3); flex:1 1 9rem; min-width:0;
  font-family:var(--police-etiquette); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris); display:flex; flex-direction:column; gap:.25rem;
}
.etat b {
  color:var(--creme); font-family:var(--police-titre);
  font-size:1.6rem; font-weight:700; line-height:1.1; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; text-transform:none;
}
.etat .vivant {
  flex-direction:row; align-items:center; justify-content:center;
  color:var(--texte); font-weight:400; font-size:.7rem;
}
.pastille {
  width:.55rem; height:.55rem; border-radius:50%; display:inline-block; margin-right:.5rem;
  flex:0 0 auto;
}
.pastille.allumee { background:var(--jade); box-shadow:0 0 0 3px rgba(95,211,154,.16), 0 0 12px rgba(95,211,154,.7);
  animation:pulse 2.4s ease-in-out infinite }
.pastille.eteinte { background:var(--rouge); box-shadow:0 0 0 3px rgba(239,106,82,.16) }
/* Maintenance : le serveur est fermé, mais volontairement et pour un temps annoncé — ce n'est pas la
   même chose qu'une panne, et la pastille ne doit pas dire la même chose. Sans pulsation : elle
   signale « ça vit », or justement, ici, on attend. */
.pastille.enveille { background:var(--laiton-vif); box-shadow:0 0 0 3px rgba(242,202,115,.18) }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 3px rgba(95,211,154,.16), 0 0 12px rgba(95,211,154,.7) }
                   50% { box-shadow:0 0 0 5px rgba(95,211,154,.08), 0 0 16px rgba(95,211,154,.85) } }

/* --- Grilles et cartes de benefices ---------------------------------------------------------- */
.grille {
  display:grid; gap:var(--e2); grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  margin-top:var(--e5);
}
.grille > * {
  position:relative;
  background:linear-gradient(180deg, var(--surface-haute), var(--surface));
  border:1px solid var(--bord); border-radius:var(--rayon);
  padding:var(--e3); box-shadow:var(--arete);
  transition:background var(--transition), border-color var(--transition), transform var(--transition),
             box-shadow var(--transition);
}
.grille > *:hover {
  background:linear-gradient(180deg, var(--surface-haute), var(--surface-haute));
  border-color:var(--bord-clair); transform:translateY(-3px);
  box-shadow:var(--arete), 0 16px 34px -22px rgba(0,0,0,.9);
}
.grille .etiquette {
  font-family:var(--police-etiquette); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--laiton); display:flex; align-items:center; gap:.55rem; margin-bottom:var(--e2);
}
.grille .etiquette::after {
  content:""; height:1px; flex:1; background:linear-gradient(90deg, var(--bord-clair), transparent);
}
.grille h3 { margin-bottom:.45rem }
.grille p { margin:0; color:var(--gris); font-size:.98rem }

.encart {
  border:1px solid var(--bord); border-left:3px solid var(--laiton);
  border-radius:var(--rayon); padding:var(--e3); margin:var(--e3) 0;
  background:linear-gradient(180deg, var(--surface-haute), var(--surface)); box-shadow:var(--arete);
}
.encart p { margin:0; color:var(--gris) }
.encart strong { color:var(--creme) }

code {
  font-family:var(--mono); font-size:.86em; background:rgba(224,179,82,.1); color:var(--laiton);
  padding:.16rem .45rem; border-radius:4px; border:1px solid rgba(224,179,82,.24);
}

/* --- Pied ------------------------------------------------------------------------------------ */
footer {
  border-top:1px solid var(--bord); margin-top:var(--e7); padding:var(--e5) 0 var(--e4);
  color:var(--gris-faible); font-size:.9rem; position:relative;
}
footer::before { content:""; position:absolute; top:-1px; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--cuivre), var(--laiton), var(--cuivre), transparent);
  opacity:.5 }
footer .page { display:flex; justify-content:space-between; gap:var(--e2); flex-wrap:wrap; align-items:center }
footer a { color:var(--gris) }
footer a:hover { color:var(--creme) }

/* --- Ecrans etroits -------------------------------------------------------------------------- */
@media (max-width:40rem) {
  .page { padding:0 var(--e2) }
  .section { padding:var(--e6) 0 }
  .nav .page { gap:var(--e1) }
  .nav-liens a { padding:0 .55rem; font-size:.88rem }
  .nav-liens a[aria-current]::after { left:.55rem; right:.55rem }
  .surtitre::before { display:none }
  .actions .bouton { flex:1 1 100% }
  .etat > * { flex:1 1 100% }
}

/* --- Mouvement : jamais impose --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .bouton:active, .grille > *:hover { transform:none }
  .engrenage.tourne, .engrenage.envers { animation:none }
}