/*
 * EFFETS V2 — n'utilise QUE des var(--…) de tokens.css.
 *
 * Chaque bloc ne s'applique que sous html.effet-<nom>, classe posée par
 * js/effets.js selon la variante choisie (js/variantes.js). Sans JavaScript
 * ou en mouvement réduit, aucune classe n'est posée : la page est la V1.
 */

/* ---------- Commun : texte découpé (js/effets/decouper.js) ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mot { display: inline-block; white-space: nowrap; }
.lettre { display: inline-block; }
/* Case figée à la largeur de la lettre finale (decouper.js) : le glyphe s'y centre, quitte à déborder */
.lettre.est-figee { display: inline-flex; justify-content: center; }

/* ---------- lumiere-defilement : le texte s'allume mot à mot ---------- */

.effet-lumiere-defilement [data-texte] .mot {
  color: var(--text-unlit);
  transition: color var(--duration-light);
}

.effet-lumiere-defilement [data-texte] .mot.est-allume { color: inherit; }

/* ---------- Shaders : toiles WebGL (js/effets/gl.js) ---------- */

/* dissolution : la toile prend la place exacte de la photo.
   Largeur et hauteur explicites : enfant absolu d'une grille centrée (.hero),
   sans elles la toile se réduirait. */
.photo-gl {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* La photo d'origine ne s'efface qu'une fois la toile prête */
.photo-gl-actif .photo { visibility: hidden; }

/* Le voile du bas est alors peint par le shader, sur la photo seule : là où
   elle se dissout, on voit le fond exact de la page, sans ligne de démarcation */
.hero.photo-gl-actif::after,
.scene.photo-gl-actif::after { content: none; }

/* anneau-vivant : la toile remplace l'anneau dessiné en CSS */
.anneau-gl {
  position: absolute;
  width: calc(var(--ring-large) * var(--live-ring-canvas) * var(--live-ring-scale-x));
  height: calc(var(--ring-large) * var(--live-ring-canvas) * var(--live-ring-scale-y));
  pointer-events: none;
}

.anneau-gl-actif .contact-ring { visibility: hidden; }

/* ligne-vivante : la toile remplace le fil CSS sous l'adresse e-mail.
   Largeur explicite : une <canvas> est un élément remplacé, left + right ne
   l'étirent pas (elle garderait ses 300 px par défaut). */
.ligne-gl {
  position: absolute;
  left: calc(-1 * var(--live-line-canvas-margin));
  width: calc(100% + 2 * var(--live-line-canvas-margin));
  bottom: calc(var(--underline-offset) - var(--live-line-canvas-height) / 2);
  height: var(--live-line-canvas-height);
  pointer-events: none;
}

.ligne-gl-actif::after { content: none; }

/* ---------- V3 · Veille : la page se trouble quand on ne bouge plus ---------- */

/* Les sections visibles au moment de l'assoupissement (js/effets/veille.js) */
.est-troublee { filter: url(#veille-trouble) brightness(var(--veille-lumiere, 1)); }

/* L'anneau de la veille (anneau-vivant.js, comme au contact) : centré dans la scène,
   à sa propre taille ; son opacité suit l'assoupissement (veille.js) */
.veille .veille-anneau {
  width: calc(var(--idle-ring-size) * var(--live-ring-canvas) * var(--idle-ring-scale-x));
  height: calc(var(--idle-ring-size) * var(--live-ring-canvas) * var(--idle-ring-scale-y));
  opacity: 0;
}

/* La scène de la phrase : au-dessus du trouble, elle reste nette */
.veille {
  position: fixed; inset: 0; z-index: 45;
  display: grid; place-items: center;
  padding: var(--gutter);
  text-align: center;
  pointer-events: none;
}

.veille-phrase {
  max-width: var(--phrase-measure);
  position: relative;           /* au-dessus de la toile de l'anneau (positionnée, donc peinte après) */
  margin: 0;
  font-size: var(--text-title);
  font-weight: var(--weight-thin);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: var(--phrase-transform);
  text-wrap: balance;           /* jamais un mot seul sur la dernière ligne */
  text-shadow: 0 0 2rem var(--background), 0 0 0.6rem var(--background);
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-out);
}

.veille-phrase.est-visible { opacity: 1; }

/* Le flux (js/effets/flux-chiffre.js). Chaque lettre est une case de largeur fixe
   (celle de sa lettre finale, posée en JS) : les glyphes n'y font rien bouger. */
/* Toujours deux lignes, coupées par flux-chiffre.js ; une ligne ne se recoupe jamais */
.veille-phrase .ligne-flux { display: block; white-space: nowrap; }
/* L'espace entre deux mots : seule dans sa case, elle garderait une largeur nulle */
.veille-phrase .espace-flux { display: inline-block; white-space: pre; }

.veille-phrase .flux {
  display: inline-block;
  text-align: center;
  opacity: var(--phrase-encrypted-opacity);
  transition: opacity var(--duration-fast);
}

.veille-phrase .flux.est-fixe { opacity: 1; }

/* ---------- Sélecteur de variantes (essais seulement) ---------- */

.a-selecteur { padding-bottom: calc(var(--touch-target) + var(--space-12)); }

.selecteur-variantes {
  position: fixed; inset: auto 0 0 0; z-index: 25;
  padding: var(--space-2) var(--gutter) var(--space-1);
  background: var(--switcher-background);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.selecteur-intention {
  display: none;                /* sur téléphone, la barre ne garde que les liens */
  margin: 0;
  color: var(--muted-foreground);
  text-transform: none;
  letter-spacing: normal;
  line-height: var(--leading-body);
}

.selecteur-liens { display: flex; flex-wrap: wrap; }

.selecteur-liens a {
  display: inline-flex; align-items: center;
  min-height: var(--touch-target);
  padding-inline: var(--space-3);
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
}

.selecteur-liens a:first-child { padding-left: 0; }

.selecteur-liens a[aria-current="page"] { color: var(--primary); }

@media (min-width: 48rem) {
  .selecteur-variantes { display: flex; align-items: center; gap: var(--space-8); padding-inline: var(--gutter-wide); }
  .selecteur-intention { display: block; flex: 1; }
}

/* ---------- Panneau de réglages (essais seulement, js/reglages.js) ---------- */

/* Téléphone : un tiroir en bas, au-dessus du sélecteur ; ordinateur : une colonne à droite */
.reglages {
  position: fixed; inset: auto 0 calc(var(--touch-target) * 2 + var(--space-4)) 0; z-index: 26;
  max-height: 45svh;
  display: flex; flex-direction: column;
  background: var(--switcher-background);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
}

.reglages-entete,
.reglages-actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 0 var(--gutter);
}

.reglages-titre {
  margin: 0 auto 0 0;
  color: var(--primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Un mode (MAIN, VEILLE) : grand tiroir ; ses sections sont en retrait */
.reglages-mode { border-top: 1px solid var(--border); }

.reglages-mode > summary {
  display: flex; align-items: center;
  min-height: var(--touch-target);
  color: var(--foreground);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.reglages-mode > .reglages-tiroir { margin-left: var(--space-3); }

.reglages-liste {
  overflow-y: auto;
  padding: 0 var(--gutter);
}

.reglages-ligne {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--space-3);
  padding-block: var(--space-1);
  color: var(--muted-foreground);
}

.reglages-ligne output { color: var(--foreground); font-variant-numeric: tabular-nums; }

.reglages-tiroir { border-top: 1px solid var(--border); }

.reglages-tiroir > summary {
  display: flex; align-items: center;
  min-height: var(--touch-target);
  color: var(--primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.reglages-tiroir[open] > summary { margin-bottom: var(--space-1); }

.reglages button:disabled { opacity: 0.3; cursor: default; }

/* Un interrupteur tient sur une ligne : libellé, état, case */
.reglages-interrupteur { grid-template-columns: 1fr auto auto; min-height: var(--touch-target); }
/* Plus précis que .reglages-ligne input (les curseurs), qui l'emportait */
.reglages-ligne.reglages-interrupteur input { grid-column: auto; width: 1.25rem; height: 1.25rem; min-height: 0; }

.reglages-ligne input {
  grid-column: 1 / -1;
  width: 100%;
  min-height: var(--touch-target);
  margin: 0;
  accent-color: var(--primary);
}

.reglages button {
  min-height: var(--touch-target);
  padding-inline: var(--space-3);
  background: none;
  border: 0;
  color: var(--foreground);
  font: inherit;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.reglages button:hover { color: var(--primary); }

.reglages.est-replie .reglages-liste,
.reglages.est-replie .reglages-actions { display: none; }

@media (min-width: 48rem) {
  .reglages {
    inset: var(--header-height) var(--space-4) auto auto;
    width: 20rem;
    max-height: calc(100svh - var(--header-height) - var(--touch-target) * 2 - var(--space-8));
    border: 1px solid var(--border);
  }
}