/* Rituel — la scène et les éléments permanents : calques de fond, en-tête,
   pied de page, bandeau défilant, curseur personnalisé.
   Les valeurs des calques sont reprises telles quelles de la référence v4. */

/* ══ Pile de calques ══
   0 nuit · 3 grain · 4 contenu
   **La v5 n'a plus de calque de scène.** L'orbe est descendue dans le hero de
   l'accueil, sur un canvas transparent ; le sol crème vient du CSS. Sont partis
   avec elle : le canvas plein écran, son repli, le voile de transition et le
   calque de lueur en `soft-light` piloté par les quatre variables `--orb-*`.
   Ne pas les remettre — c'est l'orbe chrome de la v4, refusée par le design. */

.layer { position: fixed; inset: 0; pointer-events: none }

.layer-night {
  z-index: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 0%, #343a24, var(--night-ground) 62%);
  transition: opacity 620ms var(--ease-out);
}
.layer-grain {
  z-index: 3; opacity: .055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page-root { position: relative; z-index: 4 }

/* ══ En-tête ══ */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  padding: 26px clamp(18px, 4vw, 56px);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 38px);
}
.site-header__brand {
  font-family: var(--font-heading); font-size: 23px; color: var(--ink);
  text-decoration: none; margin-right: auto;
}
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px) }
/* --nav-ink est en PLEINE opacité : jamais d'encre atténuée par alpha sur du
   métal ou de la photo (README §10, piège n°2). */
/* :not(.btn) est indispensable : sans lui, cette règle l'emporte en spécificité
   sur .btn--primary et repeint le bouton « Télécharger » en encre de
   navigation — bronze sur bronze, illisible. */
.site-nav a:not(.btn) {
  font-size: 14.5px; font-weight: 600; color: var(--nav-ink); text-decoration: none;
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] { color: var(--color-accent) }

/* **Sur sol nuit, le bronze ne tient pas.** `#8c6a3f` sur `#272b1a` donne
   2,6:1 — la §10 de la passation interdit d'atténuer l'encre de navigation,
   et un survol qui assombrit le texte revient au même. On monte donc dans la
   rampe : `accent-300` sur nuit, c'est 7:1. `data-page` suit la navigation,
   la règle vaut donc aussi après une bascule sans rechargement. */
[data-page="conditions"] .site-nav a:not(.btn):hover,
[data-page="conditions"] .site-nav a:not(.btn)[aria-current="page"] { color: var(--color-accent-300) }

/* La marque n'est pas un lien de plus : elle ne change pas de couleur au
   survol. `a:hover` de brand.css la repeignait en bronze — illisible sur la
   page nuit, et inutile sur les autres : c'est le nom du site, pas une action. */
.site-header__brand:hover { color: var(--ink) }
.site-nav a.btn { text-decoration: none }
/* `display: contents` : le conteneur disparaît de la mise en page, les trois
   liens deviennent enfants directs de la barre. Il était écrit **en ligne**
   dans le gabarit, ce qui battait la media query ci-dessous : les liens
   restaient affichés à 390 px et chevauchaient la marque. */
.site-nav__links { display: contents }

@media (max-width: 720px) {
  .site-nav__links { display: none }
}

/* ══ Bandeau défilant ══ */
.ticker {
  overflow: hidden; background: var(--night-ground); color: var(--night-ink);
  padding: 15px 0; margin-top: clamp(60px, 8vw, 96px);
}
.ticker__run { display: flex; width: max-content; animation: tickerRun 46s linear infinite }
.ticker__item {
  display: inline-flex; align-items: center; gap: 14px; padding-inline: 22px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: color-mix(in srgb, var(--night-ink) 64%, transparent);
}
.ticker__item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent-400);
}

/* ══ Pied de page ══ */
.site-footer { position: relative; padding: clamp(46px, 6vw, 72px) 0 40px }
.site-footer::before {
  content: ""; position: absolute; inset: 0; background: var(--foot-scrim);
  pointer-events: none;
}
.site-footer > * { position: relative }
.site-footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.site-footer h2 { font-size: 21px; color: var(--ink) }
.site-footer p, .site-footer a { color: var(--ink-dim); font-size: 14.5px }
.site-footer ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px }
.site-footer__legal {
  margin-top: clamp(30px, 4vw, 46px); padding-top: 22px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px; color: var(--ink-dim);
}

/* ══ Curseur personnalisé — pointeur fin uniquement (README §7.4) ══ */
.cursor-on, .cursor-on a, .cursor-on button { cursor: none }
.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference; opacity: 0;
}
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid #fff; margin: -17px 0 0 -17px }
.cursor-dot  { width: 6px;  height: 6px;  background: #fff;          margin: -3px 0 0 -3px }
@media (pointer: coarse) { .cursor-ring, .cursor-dot { display: none } }

/* ══ Mouvement propre au site ══ */
@keyframes springIn { 0% { opacity: 0; transform: translateY(36px) scale(.962) } 56% { opacity: 1; transform: translateY(-8px) scale(1.009) } 79% { transform: translateY(2px) scale(.997) } 100% { opacity: 1; transform: none } }
@keyframes floatIn  { from { opacity: 0; transform: translateY(44px) scale(.978) } to { opacity: 1; transform: none } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
/* Le titre du hero : chaque ligne monte de dessous son masque, avec un quart de
   degré de bascule qui se résorbe (§4.2). */
@keyframes riseIn   { from { transform: translateY(115%) rotate(1.6deg) } to { transform: translateY(0) rotate(0) } }
/* Le halo derrière la carte du hero : neuf secondes, aucune agitation. */
@keyframes glowBreathe { 0%, 100% { opacity: .75; transform: translateZ(-40px) scale(1) } 50% { opacity: 1; transform: translateZ(-40px) scale(1.06) } }
@keyframes pageIn   { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes pageOut  { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(-18px) } }
@keyframes tickerRun{ to { transform: translateX(-50%) } }
@keyframes moteDrift{ 0% { transform: translate3d(0,0,0) scale(.6); opacity: 0 } 14% { opacity: .8 } 100% { transform: translate3d(26px,-300px,0) scale(1); opacity: 0 } }
@keyframes floatA   { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-13px) } }
@keyframes floatB   { 0%, 100% { transform: translateY(0) rotate(-1.2deg) } 50% { transform: translateY(11px) rotate(1deg) } }
@keyframes livePulse{ 0% { transform: scale(.9); opacity: .9 } 70% { transform: scale(2.6); opacity: 0 } 100% { transform: scale(2.6); opacity: 0 } }
@keyframes cueDot   { 0% { transform: translateY(0); opacity: 0 } 22% { opacity: 1 } 100% { transform: translateY(46px); opacity: 0 } }

/* Révélation au scroll : expo.out, longue décélération, zéro rebond. */
[data-reveal] { opacity: 0 }
[data-reveal].is-revealed { animation: floatIn 1150ms var(--expo) both }

/* Transition de page. `both` est indispensable : sans lui, une page dont les
   animations ne tournent pas resterait invisible (référence v4). */
.page-enter { animation: pageIn 620ms var(--ease-out) both }
.page-exit  { animation: pageOut 220ms var(--ease-out) both }

/* Libellé du curseur : il contre-échelle l'anneau pour rester lisible. */
.cursor-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #fff; opacity: 0; white-space: nowrap;
}