/* ==================================================================
   DRAREK — socle : jetons, réinitialisation, textures, animations.
   Direction « Forge » : ardoise froide, bronze coulé, et un accent
   braise orange #E2903F assumé. Arêtes vives (rayon 1px), pas de
   cartes ni d'ombres portées sur le contenu.
   ================================================================== */

:root{
  /* --- Fonds --- */
  --nuit:            #060B08;  /* fond global */
  --foret:           #0A1310;  /* haut du héros */
  --halo-foret:      #1A2A1B;  /* halo vert du héros */
  --section-plate:   #0A0F0C;  /* système + tables */
  --bandeau-epreuve: #0D0F0C;  /* cœur du bandeau L'Épreuve */
  --foret-monde:     #101C11;
  --bas-rejoindre:   #0E1A11;

  /* --- Braise : l'accent de cette direction --- */
  --braise:        #E2903F;
  --braise-chaude: #C2591F;
  --braise-haut:   #FFD9A0;
  --braise-bas:    #5A2408;
  --braise-morte:  #252927;
  --forge:         #7C3A16;  /* lueur basse du bandeau, sélection */

  /* --- Bronze --- */
  --bronze:        #A68B6E;
  --bronze-vif:    #D9BE96;
  --bronze-haut:   #F0DDBB;
  --bronze-bas:    #6E5C45;
  --bronze-milieu: #C0A382;
  --bronze-eclat:  #FFF3DC;  /* pic du reflet balayable */
  --sur-bronze:    #1B1409;

  /* --- Disque du dé --- */
  --disque-haut:   #5E6663;
  --disque-milieu: #2B3033;
  --disque-bas:    #101413;

  /* --- Textes --- */
  --os:            #E2DACB;
  --cendre:        #8A8C82;
  --cendre-chaude: #B8A183;  /* méta mono des tables ouvertes */
  --cendre-morte:  #6E706A;  /* table complète */

  /* --- Sang (appel MJ) --- */
  --sang:       #A8422C;
  --sang-bas:   #7C2E1D;
  --sang-eclat: #D96A4C;  /* pic du reflet balayable */
  --sur-sang:   #F6EADF;

  /* --- Verdicts de L'Épreuve --- */
  --v-souffle:  #FFD9A0;
  --v-reussite: #9FD3A6;
  --v-prix:     #E2903F;
  --v-echec:    #A8422C;

  /* --- Typographie ---
         Les étiquettes et la nav sont en mono : c'est le marqueur de
         cette direction (mécanique/atelier, pas médiéval décoratif). */
  --titre:   "Cinzel", Georgia, serif;
  --corps:   "Alegreya Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  /* Repli si Noto Sans Runic ne charge pas : polices système runiques. */
  --rune:    "Noto Sans Runic", "Segoe UI Historic", "Noto Sans Symbols 2", serif;

  /* --- Rythme --- */
  --gout: clamp(18px, 4.5vw, 56px);
  --max:  1280px;
  --max-epreuve: 900px;
  --pad-sec: clamp(56px, 8vw, 110px);
  --rayon: 1px;                /* arêtes quasi vives */

  /* --- Textures procédurales (SVG feTurbulence en data-URI). --- */
  --grain-pierre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23p)'/%3E%3C/svg%3E");
  --grain-metal:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23m)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* Les contrôles natifs (cases à cocher, ascenseurs) se rendent en sombre :
     sans ça une case décochée sort en blanc franc au milieu de l'ardoise. */
  color-scheme:dark;
}

body{
  margin:0;
  background:var(--nuit);
  color:var(--os);
  font-family:var(--corps);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* height:auto est obligatoire : sans elle, l'attribut height="…" du HTML
   s'applique et écrase le ratio (le logo du héros sortait étiré). */
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-family:var(--titre); margin:0; }
a{ color:var(--bronze-vif); }
a:hover{ color:var(--bronze-haut); }
::selection{ background:var(--forge); color:#FFE7C4; }
input::placeholder{ color:var(--cendre); }
:focus-visible{ outline:2px solid var(--braise); outline-offset:3px; }

/* Le wrapper racine : contient les débordements des halos et des textures. */
.page{ position:relative; overflow-x:hidden; background:var(--nuit); }

/* Calque de matière posé sur une section. La section porte
   position:relative, son contenu position:relative. */
.matiere::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.matiere--pierre::after{ opacity:.45; mix-blend-mode:soft-light; background-image:var(--grain-pierre); }
.matiere--metal::after{  opacity:.14; mix-blend-mode:overlay;    background-image:var(--grain-metal); }

/* ---------------- Animations ----------------
   fg-roll    : le dé roule, s'écrase, rebondit, se fige.
   fg-strike  : onde de braise qui s'étale sur 40px (tout sauf l'échec).
   fg-verdict : le verdict monte, sort du flou et s'opacifie.
   fg-pulse   : respiration des braises vives.
   fg-breathe : la forge respire derrière le dé.
   fg-spin    : rotation lente de l'anneau runique.
   fg-float   : flottement au repos du sceau du héros.
   fg-rise    : une étincelle qui monte de la forge et s'éteint.
   -------------------------------------------- */
@keyframes fg-roll{
  0%{   transform:rotate(0)      scale(1);    }
  34%{  transform:rotate(410deg) scale(.8);   }
  72%{  transform:rotate(700deg) scale(1.07); }
  100%{ transform:rotate(720deg) scale(1);    }
}
@keyframes fg-strike{
  0%{   box-shadow:inset 0 4px 14px rgba(0,0,0,.85), 0 0 0 0    rgba(226,144,63,.6), 0 0 90px rgba(226,144,63,.55); }
  100%{ box-shadow:inset 0 4px 14px rgba(0,0,0,.85), 0 0 0 40px rgba(226,144,63,0),  0 0 0    rgba(226,144,63,0); }
}
@keyframes fg-verdict{
  0%{   opacity:0; transform:translateY(14px); filter:blur(8px); }
  100%{ opacity:1; transform:none;             filter:blur(0);   }
}
@keyframes fg-pulse{
  0%,100%{ filter:brightness(1);   }
  50%{     filter:brightness(1.5); }
}
@keyframes fg-breathe{
  0%,100%{ opacity:.5;  }
  50%{     opacity:.85; }
}
@keyframes fg-spin{
  from{ transform:rotate(0);      }
  to{   transform:rotate(360deg); }
}
@keyframes fg-float{
  0%,100%{ transform:translateY(0);    }
  50%{     transform:translateY(-9px); }
}
@keyframes fg-rise{
  0%{   transform:translateY(20px)   scale(.7); opacity:0;   }
  18%{                                          opacity:.75; }
  100%{ transform:translateY(-210px) scale(1);  opacity:0;   }
}

/* Le jet devient instantané : la logique lit la même media query. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}