/* ===========================================================
   Herba Rêve — fondations partagées
   Reset + variables + motifs + utilitaires d'animation.
   Chaque direction surcharge ses propres couleurs/typo.
   =========================================================== */

/* Les polices ne sont plus importées ici (26/09/2026) : un @import dans une
   feuille ne se découvre qu'une fois la feuille téléchargée, ce qui mettait
   une requête vers Google EN CHAÎNE devant le premier affichage de chaque
   page. Elles sont demandées par un <link> dans app/(dream)/layout.tsx, en
   parallèle de cette feuille, et sans les six familles qui ne servaient
   qu'aux maquettes d'accueil écartées (EB Garamond, Cormorant Garamond,
   Fraunces, Karla, Parisienne, Cormorant SC). */

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

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

body {
  margin: 0;
  font-family: var(--font-body, 'Mulish', system-ui, sans-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

:root {
  --font-display: 'Spectral', Georgia, serif;
  --font-body: 'Mulish', system-ui, sans-serif;
  --font-script: 'Petit Formal Script', cursive;
}

.script { font-family: var(--font-script); font-weight: 400; }

/* ---------- Grain / noise overlay ---------- */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  opacity: var(--grain-opacity, .045);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Starfield ---------- */
.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.starfield .star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--min, .15); transform: scale(.85); }
  50% { opacity: var(--max, 1); transform: scale(1.15); }
}
.shooting-star {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255,255,255,.8);
  opacity: 0;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s cubic-bezier(.16,.7,.3,1), transform 1s cubic-bezier(.16,.7,.3,1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
.is-visible[data-reveal] { opacity: 1; transform: none; }

/* Sans JavaScript du tout, personne ne viendra jamais poser `is-visible` :
   le contenu resterait dans le document, invisible pour toujours. Mesuré le
   11/09/2026 sur la landing de prod : 6 388 px sur 8 581. La règle ci-dessous
   rend l'état caché conditionnel à la présence d'un moteur capable de le
   lever. (`scripting` : Chrome 120+, Safari 17+, Firefox 113+ ; ailleurs, on
   retombe simplement sur le comportement d'avant.) */
@media (scripting: none) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .star, .shooting-star { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Placeholder (imagerie à fournir) ---------- */
.ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background-image: repeating-linear-gradient(
    135deg,
    var(--ph-stripe-a, rgba(255,255,255,.05)) 0 10px,
    var(--ph-stripe-b, rgba(255,255,255,.02)) 10px 20px);
  border: 1px solid var(--ph-border, rgba(255,255,255,.18));
  color: var(--ph-text, rgba(255,255,255,.65));
  overflow: hidden;
}
.ph__label {
  font-family: 'Hanken Grotesk', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--ph-chip, rgba(0,0,0,.25));
}

/* ---------- Utilities ---------- */
.container { width: min(1240px, 92vw); margin-inline: auto; }
.eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  font-weight: 600;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }