/* =====================================================================
   La nuee de mots — accueil
   ---------------------------------------------------------------------
   Les mots du poeme du jour, jetes en desordre sur la photo de ruelle.
   Chacun est un pochoir : les lettres sont une decoupe dans la photo
   elle-meme, recouverte d'une teinte translucide prise dans la palette
   de l'image.

   Ce fichier ne remplace rien. L'animation du poeme qui se fabrique vit
   toujours dans hero-cutout.css et hero-cutout.js, intacte. C'est
   l'interrupteur $heroAccueil, en tete de partials/hero-cutout.php, qui
   choisit ce que le visiteur voit.

   Tous les reglages sont dans hero-nuee.js, en tete du fichier, sous le
   titre REGLAGES. Ils viennent du banc d'essai du 16 septembre 2026.
   ===================================================================== */

.heronuee{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;   /* la nuee ne doit rien intercepter */
}

.heronuee__mot{
  position: absolute;
  white-space: nowrap;
  line-height: 1.12;
  padding: 0 .04em;       /* sans quoi les jambages debordent du pochoir */
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  /* La decoupe elle-meme est posee par le script : deux couches de fond
     rognees ensemble sur le texte, la teinte par-dessus la photo. */
}

/* Les memes familles que les papiers decoupes, sans leur corps : ici la
   taille est tiree au sort mot par mot. */
.nuee-f-book{ font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; }
.nuee-f-news{ font-family: "Newsreader", Georgia, serif; font-weight: 700; }
.nuee-f-art { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
.nuee-f-ad  { font-family: "Archivo Black", Arial, sans-serif; text-transform: uppercase; }
.nuee-f-mono{ font-family: "Space Mono", ui-monospace, monospace; }

/* Sans background-clip: text, un mot transparent serait invisible. Le
   script le detecte et retombe sur la couleur pleine ; cette regle est la
   ceinture de la bretelle. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .heronuee__mot{ -webkit-text-fill-color: currentColor; }
}


/* =====================================================================
   Le seuil : la vitre posee sur la nuee
   ---------------------------------------------------------------------
   Meme matiere que le pied de page, mais reglee autrement. Le pied de
   page recouvre du texte et doit l'effacer, donc il floute beaucoup. La
   vitre d'accueil recouvre une image et doit la montrer, donc elle
   floute peu et retient un peu de lumiere. Verre fume, pas verre depoli.

   Reglages trouves au banc d'essai du 18 septembre 2026 :
     flou 4px, fond de rgba(10,11,13,.24) a .35, coins 14px.
   ===================================================================== */
.heroseuil{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(37rem, 86vw);
  text-align: center;
  padding: clamp(1.5rem, 3.4vw, 2.4rem) clamp(1.1rem, 3vw, 2.1rem) clamp(1.7rem, 3.6vw, 2.6rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,11,13,.24), rgba(10,11,13,.35));
  -webkit-backdrop-filter: blur(4px) saturate(.85);
          backdrop-filter: blur(4px) saturate(.85);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
/* Sans backdrop-filter, la vitre redevient opaque : on perd le flou,
   jamais la lisibilite. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .heroseuil{ background: linear-gradient(180deg, rgba(10,11,13,.80), rgba(10,11,13,.88)); }
}

/* La vitre est posee sur une photo sombre : ses couleurs sont donc
   ecrites en clair et ne suivent pas le theme, contrairement au reste
   de la page. C'est voulu, pas un oubli. */
.heroseuil__sur{
  font-family: 'Special Elite', serif;
  font-size: clamp(10px, 9px + .25vw, 12px);
  letter-spacing: .34em; text-transform: uppercase;
  color: #e3c056; margin: 0 0 1rem;
}
.heroseuil__titre{
  font-family: 'Special Elite', serif; font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.7rem);
  line-height: 1.02; letter-spacing: .02em; margin: 0;
  color: #f1eee7; text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.heroseuil__titre span{ color: #ff6a2a; }
.heroseuil__ligne{
  font-family: 'Alegreya Sans', sans-serif; font-weight: 300; font-style: italic;
  font-size: clamp(.98rem, .9rem + .42vw, 1.18rem); line-height: 1.55;
  max-width: 32rem; margin: 1.3rem auto 0; color: #e6e2da;
}
.heroseuil__actions{
  margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
}