/* =============================================================================
   VARIANTE « VIF » — la baie est sous tension
   =============================================================================
   Trois interprétations du même site cohabitent. `site/` est la version sobre,
   validée : elle montre une régie éteinte, photographiée. Celle-ci montre la
   même régie ALLUMÉE. Rien n'est inventé — la mire, le rouge tally, la tôle et
   les légendes sérigraphiées sont ceux de la charte ; ils font seulement
   davantage de choses.

   LA LIGNE DE CONDUITE, puisqu'il fallait rester crédible pour un outil de
   travail : chaque effet ajouté doit avoir un référent dans le métier. Un
   balayage de mire ouvre une section parce qu'une régie ouvre une source ainsi.
   Un moniteur porte des lignes de balayage parce qu'un moniteur en porte. Rien
   ici n'est un effet de librairie posé parce qu'il est joli.

   CE QUI N'EST PAS TOUCHÉ, et c'est ce qui la garde crédible : la typographie,
   la mise en page, les couleurs de texte, les contrastes. On n'ajoute que de la
   lumière et du mouvement.
   ============================================================================= */

/* -- 1. LE DÉGRADÉ SORT DE LA BANNIÈRE ---------------------------------------
   La version sobre n'allume qu'un seul écran, tout en haut ; le reste de la
   page est une longue plaque mate. Ici une seconde nappe, deux fois plus
   discrète, éclaire la bande des offres — l'endroit où l'on décide. Le
   défilement gagne un rythme : deux zones sous tension au lieu d'une.

   `data-gradient-amp="0.42"` dans le gabarit règle son intensité ; le shader
   est le même fichier. */
.band-lit {
  position: relative;
  isolation: isolate;
}

/* Le contenu passe au-dessus de la nappe -- SAUF la nappe elle-meme.
   Premier jet : `.band-lit > *`, sans exception. Le canevas et le grain sont
   inseres PAR gradient.js comme enfants directs de la section : ils recevaient
   donc `z-index: 1` eux aussi, par-dessus le texte. Resultat sur la capture,
   la bande des offres etait entierement VIDE -- une plaque de couleur a la
   place du prix. Rien dans la console, rien dans les controles : il fallait
   regarder l'image. */
.band-lit > *:not(.hero-gradient):not(.hero-grain) {
  position: relative;
  z-index: 1;
}

/* -- 2. LA MIRE OUVRE CHAQUE SECTION -----------------------------------------
   Un filet de sept couleurs court sur le bord haut de chaque bande et se
   déroule de gauche à droite quand la section entre dans le champ. C'est le
   même objet que le bandeau du haut de page, employé comme ponctuation.

   `scaleX` et rien d'autre : aucune propriété qui recalcule la mise en page. */
/* detecteur: variante
   Ce fichier est une COUCHE posee par-dessus styles.css, qui reste identique
   a celui de la version sobre. Redefinir ce selecteur est l'intention meme :
   c'est ce qui permet de comparer trois interpretations du meme site sans
   maintenir trois copies de neuf cents lignes, et de voir d'un coup d'oeil
   ce que la variante change exactement. */
.band {
  position: relative;
}

.band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(
    to right,
    #c8c8c8 0 14.28%,
    #c8c800 14.28% 28.57%,
    #00c8c8 28.57% 42.85%,
    #00c800 42.85% 57.14%,
    #c800c8 57.14% 71.42%,
    #c80000 71.42% 85.71%,
    #0000c8 85.71% 100%
  );
  opacity: 0.55;
}

/* Le déroulé n'a lieu que si le script tourne ; sans lui le filet est déjà
   entier, et la page ne perd rien. */
html.js-reveal .band::before {
  transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-reveal .band.is-band-lit::before,
html:not(.js-reveal) .band::before {
  transform: scaleX(1);
}

/* -- 3. LE MONITEUR AFFICHE QUELQUE CHOSE ------------------------------------
   Des lignes de balayage à 4 %, et un reflet lent qui traverse la dalle. Un
   moniteur de régie n'est jamais parfaitement mat : c'est du verre devant une
   image qui se rafraîchit.

   Les deux couches sont posées PAR-DESSUS la capture, en `pointer-events: none`,
   et n'entrent jamais dans le calcul du contraste du texte : il n'y a pas de
   texte dessous. */
/* detecteur: variante
   Ce fichier est une COUCHE posee par-dessus styles.css, qui reste identique
   a celui de la version sobre. Redefinir ce selecteur est l'intention meme :
   c'est ce qui permet de comparer trois interpretations du meme site sans
   maintenir trois copies de neuf cents lignes, et de voir d'un coup d'oeil
   ce que la variante change exactement. */
.monitor-screen {
  position: relative;
  overflow: hidden;
}

.monitor-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0 1px,
    transparent 1px 3px
  );
}

.monitor-screen::before {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 42%;
  left: -60%;
  z-index: 2;
  pointer-events: none;
  transform: skewX(-14deg);
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.055),
    transparent
  );
  animation: vif-reflet 9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes vif-reflet {
  0%, 62% { left: -60% }
  92%, 100% { left: 130% }
}

/* -- 4. LES LÉGENDES S'ALLUMENT ----------------------------------------------
   Une plaque sérigraphiée qui apparaît prend brièvement l'éclat d'un voyant
   qui vient de s'établir, puis retombe. Une seule fois, à la révélation.

   La COULEUR du texte ne change pas — seul un halo est ajouté puis retiré.
   C'est ce qui permet de ne pas toucher au contraste, qui reste celui mesuré
   sur la version sobre. */
html.js-reveal [data-reveal].is-revealed .plate {
  animation: vif-allumage 1100ms ease-out both;
}

@keyframes vif-allumage {
  0% { text-shadow: 0 0 0 rgba(255, 176, 32, 0) }
  22% { text-shadow: 0 0 14px rgba(255, 176, 32, 0.55) }
  100% { text-shadow: 0 0 0 rgba(255, 176, 32, 0) }
}

/* -- 5. L'APPARITION A PLUS DE COURSE ----------------------------------------
   14 px et un fondu dans la version sobre. Ici 22 px, et un léger flou qui se
   résorbe : le bloc arrive au point plutôt que d'apparaître. Même durée, même
   courbe — c'est l'amplitude qui change, pas le geste. */
html.js-reveal [data-reveal] {
  transform: translateY(22px);
  filter: blur(5px);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    filter 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

html.js-reveal [data-reveal].is-revealed {
  filter: none;
}

/* -- 6. LE VOYANT DU BOUTON D'ACHAT ------------------------------------------
   Le rouge tally veut dire « à l'antenne ». Sur le seul bouton qui l'emploie,
   un halo respire lentement — comme un voyant en attente. Très lent et très
   faible : à 2,4 secondes de cycle, on ne le voit pas clignoter, on le sent
   présent.

   Aucune modification de la couleur du fond ni du texte : le 5,93:1 mesuré
   tient. */
.hero-actions .btn-buy {
  animation: vif-veille 2400ms ease-in-out infinite;
}

@keyframes vif-veille {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0) }
  50% { box-shadow: 0 0 26px 2px rgba(255, 59, 48, 0.28) }
}

/* -- Mouvement réduit --------------------------------------------------------
   Tout ce qui bouge tout seul s'arrête. Ce qui est révélé au défilement reste
   révélé — la page ne se dévoile pas par à-coups, elle ne bouge pas. */
@media (prefers-reduced-motion: reduce) {
  .monitor-screen::before,
  .hero-actions .btn-buy,
  html.js-reveal [data-reveal].is-revealed .plate {
    animation: none;
  }

  html.js-reveal .band::before {
    transition: none;
    transform: scaleX(1);
  }

  html.js-reveal [data-reveal] {
    transform: none;
    filter: none;
  }
}