/* Charte du hero (lot L3). Couleurs relevées sur la gravure le 11/10/2026 :
   papier = couleur du bord de assets/gravure.jpg (aucun cadre visible autour de
   l'image), encre = moyenne des 2 % de pixels les plus sombres, or foncé à la
   demande de Loïc pour rester lisible sur le papier.
   --or est la seule définition de l'or : js/hero.js la lit pour les particules. */
:root {
  --papier: #f5f3e7;
  --encre: #30422f;
  --or: #9a6f1c;
  /* Encre telle que le laiton l'affiche une fois éclairé (moyenne mesurée sur une
     capture de ?piste=laiton le 11/10/2026) : couleur de la poussière de la variante. */
  --encre-metal: #5e7558;
}

@font-face {
  font-family: "IM Fell English";
  src: url("../assets/fonts/IMFeENrm28P.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body { margin: 0; }
body { background: var(--papier); color: var(--encre); }

/* Mobile : la gravure au-dessus, le titre en dessous. */
.hero {
  display: grid;
  grid-template-rows: auto 1fr;
  /* Le bandeau du menu (css/menu.css) prend le haut de l'écran. */
  min-height: calc(100vh - var(--hauteur-bandeau, 0px));
  min-height: calc(100svh - var(--hauteur-bandeau, 0px));
}

.hero__gravure {
  display: block;
  width: 100%;
  max-height: 45svh;
  object-fit: contain;
}

.hero__scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40svh;
  overflow: hidden;
}

/* Écran large : le hero coupé en deux, la gravure à gauche. */
@media (min-width: 768px) {
  .hero {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .hero__gravure {
    height: 100%;
    max-height: 100svh;
  }
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__titre {
  position: relative;
  margin: 0;
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--encre);
}

/* Quand les particules écrivent le titre, le <h1> reste lu par les lecteurs
   d'écran et les moteurs, mais n'est plus affiché en double. */
.hero--particules .hero__titre,
.hero--image .hero__titre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sans WebGL : l'image fixe du titre en poussière d'or remplace le canvas. */
.hero--image {
  background: url("../assets/hero-fixe.jpg") center / contain no-repeat;
}
.hero--image .hero__canvas { display: none; }