/* CC-LOGIN-DIAPORAMA-BO-01 (#865, c2) — le diaporama fixe du panneau décoratif.
   Chargé par login.html, verify-email.html et index.html (vitrine d'onboarding).

   RÈGLE DURE, vérifiable : aucune `transition`, aucune `animation`, aucun
   `@keyframes` sur le panneau ni sur les slides. Le seul mouvement du produit
   ici est celui du doigt du visiteur. Les micro-transitions tolérées sont
   confinées aux CONTRÔLES (points et flèches), qui ne bougent que sous le
   curseur — jamais le contenu. */

.lsv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto; /* le panneau devient interactif (points + flèches) */
}

.lsv-scene { position: absolute; inset: 0; }

.lsv-slide {
  position: absolute;
  inset: 0;
  display: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lsv-slide.on { display: block; }

/* Sans image : le fond de marque, retour Damien — dégradé RADIAL violet SOMBRE,
   le point clair EN HAUT À DROITE. C'est l'idiome radial du produit (les avatars
   générés éclairent en cx .82 / cy .12, avatar-gen.js:139) porté au panneau, et
   il descend sur --colo-brand-bg, le fond sombre de marque (colors.css:25). */
.lsv-slide:not(.has-img) {
  background: radial-gradient(112% 112% at 82% 12%,
    color-mix(in srgb, var(--colo-fresh, #7141D9) 55%, #fff) 0%,
    var(--colo-fresh, #7141D9) 26%,
    color-mix(in srgb, var(--colo-fresh, #7141D9) 34%, var(--colo-brand-bg, #1a0f2e)) 52%,
    var(--colo-brand-bg, #1a0f2e) 88%);
}

/* Le texte : à gauche, au PIED du panneau par défaut — la position verticale est
   un choix du BO (retour Damien), d'où les classes .al-bottom / .al-top. */
.lsv-txt {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 clamp(24px, 5vw, 72px) clamp(72px, 9vh, 108px);
  /* la mesure est en % du panneau, PAS en `ch` : `ch` se calcule sur la fonte du
     bloc (≈16 px) et non sur celle du titre — après le doublement, un cap à 46ch
     coupait « Deux siècles » en deux lignes malgré le saut demandé au BO. */
  max-width: 88%;
}
.lsv-slide.al-top .lsv-txt {
  inset: 0 0 auto 0;
  padding: clamp(56px, 9vh, 104px) clamp(24px, 5vw, 72px) 0;
}

/* Tailles DOUBLÉES (retour Damien) : titre 24→48 / 44→88, texte 14→28 / 18→36.
   `pre-line` rend les vrais sauts de ligne du textContent — le marqueur « \n »
   est traduit en amont par login-slides.js, sans jamais passer par innerHTML. */
.lsv-title {
  margin: 0 0 10px;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.08;
  font-weight: 700;
  white-space: pre-line;
}
.lsv-text {
  margin: 0;
  font-size: clamp(28px, 2.3vw, 36px);
  line-height: 1.35;
  white-space: pre-line;
}

/* ── L'ENCRE, au choix par slide (retour Damien) ──
   `dark` n'est JAMAIS un noir brut : c'est --login-fg, la variable de texte du
   produit, comme partout ailleurs. */
.lsv-slide.ink-white .lsv-title { color: #fff; }
.lsv-slide.ink-white .lsv-text { color: rgba(255, 255, 255, .92); }
.lsv-slide.ink-dark .lsv-title { color: var(--login-fg, #1d2330); }
.lsv-slide.ink-dark .lsv-text { color: color-mix(in srgb, var(--login-fg, #1d2330) 72%, transparent); }

/* ── HALO derrière le TITRE (retour Damien), au choix par slide ──
   Trois couches de flou décroissant : le fond IMMÉDIAT du glyphe devient la
   couleur du halo, donc le contraste ne dépend plus de l'image. C'est ce que le
   voile de bloc ne pouvait pas faire — à la hauteur du titre il ne valait plus
   que 0,165 (mesure #865 §7). Les rayons sont en `em` : ils suivent la taille du
   titre, y compris après le doublement. */
.lsv-slide.halo-white .lsv-title {
  text-shadow:
    0 0 .18em rgba(255, 255, 255, .95),
    0 0 .45em rgba(255, 255, 255, .8),
    0 0 .9em rgba(255, 255, 255, .55);
}
.lsv-slide.halo-dark .lsv-title {
  text-shadow:
    0 0 .18em rgba(0, 0, 0, .95),
    0 0 .45em rgba(0, 0, 0, .8),
    0 0 .9em rgba(0, 0, 0, .55);
}

/* Sur une IMAGE, un voile de lisibilité — dans le sens de l'encre ET du côté où
   le bloc est posé (un voile qui monte sous un texte placé en haut ne servirait
   à rien). */
.lsv-slide.has-img .lsv-txt { max-width: none; }
.lsv-slide.has-img.al-bottom .lsv-txt { padding-top: clamp(48px, 8vh, 96px); }
.lsv-slide.has-img.al-top .lsv-txt { padding-bottom: clamp(48px, 8vh, 96px); }
.lsv-slide.has-img.ink-white.al-bottom .lsv-txt {
  background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, .18) 55%, transparent);
}
.lsv-slide.has-img.ink-white.al-top .lsv-txt {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .58), rgba(0, 0, 0, .18) 55%, transparent);
}
.lsv-slide.has-img.ink-dark.al-bottom .lsv-txt {
  background: linear-gradient(to top, rgba(255, 255, 255, .72), rgba(255, 255, 255, .3) 55%, transparent);
}
.lsv-slide.has-img.ink-dark.al-top .lsv-txt {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .72), rgba(255, 255, 255, .3) 55%, transparent);
}

/* ── Le widget de navigation, en bas : les POINTS seuls (retour Damien —
   flèches retirées, et alignées À GAUCHE sur le texte : le même retrait que
   `.lsv-txt`, pour que le widget tombe sous la première lettre du titre). ── */
.lsv-nav {
  position: absolute;
  /* même ligne horizontale que les liens légaux et le fab Pacte (retour
     Damien) : centre ancré sur --login-baseline, indépendant de la hauteur. */
  inset: auto 0 var(--login-baseline, 31px) 0;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: clamp(24px, 5vw, 72px);
  gap: 10px;
}
.lsv-dots { display: flex; align-items: center; gap: 6px; }

/* Le même langage que le carrousel de looks du produit (look-carousel.css) */
.lsv-dot {
  width: 24px;
  height: 7px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-full, 999px);
  background: color-mix(in srgb, var(--login-fg, #1d2330) 26%, transparent);
  font-size: 0;
  line-height: 1;
  transition: background .12s, width .12s; /* contrôle, pas contenu */
}
.lsv-dot.on { width: 39px; background: var(--colo-fresh, #7141D9); }

.lsv-dot:focus-visible {
  outline: 2px solid var(--colo-fresh, #7141D9);
  outline-offset: 2px;
}

/* Les contrôles suivent l'ENCRE du slide courant (et non « y a-t-il une image »)
   — sur un slide à encre blanche, des points sombres seraient illisibles.
   La classe est posée sur l'HÔTE par le JS : .lsv-nav n'est pas frère des slides
   (ils vivent dans .lsv-scene), un sélecteur `~` ne marcherait pas. */
.lsv.ink-white .lsv-dot { background: rgba(255, 255, 255, .5); }
.lsv.ink-white .lsv-dot.on { background: #fff; }


@media (prefers-reduced-motion: reduce) {
  .lsv-dot { transition: none; }
}