/* ==========================================================================
   IMPRA — PORTAIL « EXPLORER IMPRA »
   Couche autonome, chargée en dernier. Trois temps sur un seul overlay :

     1. cine--mail  — la carte e-mail, surface claire ;
     2. cine--fly   — la signature : le logo se pose sur une surface unie, un
                      filet de progression court dessous, puis tout s'ouvre
                      vers le blanc ;
     3. cine--end   — l'écran de confirmation (remplacé par la redirection
                      vers la démo dès que DEMO_URL est renseignée).

   Langage : celui de la page — surfaces unies, navy, un seul bleu. Fondu,
   translation courte, progression : pas de rebond, pas de rotation, pas de
   trame. Tout est neutralisé sous prefers-reduced-motion (le JS saute la
   séquence).
   ========================================================================== */

.cine {
  position: fixed; inset: 0; z-index: 220;
  display: grid; place-items: center;
  padding: var(--space-24);
}
/* Indispensable : `display: grid` ci-dessus écraserait le [hidden] du
   navigateur — fermé, le portail doit disparaître complètement. */
.cine[hidden] { display: none; }
body.cine-lock { overflow: hidden; }

.cine-veil {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--impra-navy) 34%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: cineVeilIn 320ms var(--ease-standard) both;
}
@keyframes cineVeilIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Les trois temps s'excluent ── */
.cine-gate, .cine-scene, .cine-end { display: none; }
.cine--mail .cine-gate { display: block; }
.cine--fly  .cine-scene { display: grid; }
.cine--end  .cine-end  { display: grid; }
/* Pendant la séquence et la fin, le voile devient opaque : plus de page
   derrière, et la surface reste celle de la page — claire et unie. */
.cine--fly .cine-veil, .cine--end .cine-veil {
  background: var(--color-warm-canvas);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ==========================================================================
   TEMPS 1 · LA CARTE E-MAIL
   Surface claire et unie, comme le reste de la page. Aucune trame.
   ========================================================================== */
.cine-gate {
  position: relative;
  width: min(600px, 100%);
  border-radius: var(--radius-images);
  padding: var(--space-48);
  background: var(--color-paper-white);
  border: var(--border-hairline);
  box-shadow: 0 24px 60px rgba(15, 23, 46, .12);
  animation: cineGateIn 420ms var(--ease-standard) both;
}
@keyframes cineGateIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cine-title {
  margin: var(--space-16) 0 0;
  font-family: var(--font-geometric);
  font-weight: var(--weight-regular);
  font-size: clamp(26px, 3.4vw, var(--text-heading));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--impra-navy);
}
.cine-lead {
  margin: var(--space-12) 0 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--impra-muted);
  max-width: 46ch;
}

.cine-form {
  display: flex; gap: var(--space-12); flex-wrap: wrap;
  margin-top: var(--space-32);
}
.cine-mail {
  flex: 1 1 220px; min-width: 0;
  padding: 14px var(--space-20);
  font-size: var(--text-body);
  color: var(--impra-navy);
  background: var(--color-warm-canvas);
  border: var(--border-input);
  border-radius: var(--radius-buttons);
  transition: border-color var(--motion-base) var(--ease-standard),
              background-color var(--motion-base) var(--ease-standard);
}
.cine-mail::placeholder { color: var(--impra-muted-soft); }
.cine-mail:focus {
  outline: none;
  background: var(--color-paper-white);
  border-color: var(--impra-blue);
}
.cine-go { flex: 0 0 auto; }

.cine-error {
  margin: var(--space-12) 0 0;
  font-size: var(--text-body-sm);
  color: var(--impra-danger);
}
.cine-consent {
  margin: var(--space-16) 0 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--impra-muted-soft);
}
.cine-reassure {
  display: flex; gap: var(--space-24); flex-wrap: wrap;
  margin-top: var(--space-24);
  padding-top: var(--space-20);
  border-top: var(--border-hairline);
  font-size: var(--text-body-sm);
  color: var(--impra-muted);
}

.cine-x {
  position: absolute; top: var(--space-16); right: var(--space-16); z-index: 1;
  width: 36px; height: 36px;
  border: var(--border-hairline);
  border-radius: var(--radius-buttons);
  background: transparent; color: var(--impra-muted);
  font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: color 180ms var(--ease-standard), border-color 180ms var(--ease-standard);
}
.cine-x:hover { color: var(--impra-navy); border-color: var(--impra-border-strong); }
.cine-x:focus-visible { outline: 2px solid var(--impra-blue); outline-offset: 2px; }

/* ==========================================================================
   TEMPS 2 · LA SIGNATURE
   Surface unie, aucun décor. Le logo se pose, un filet de progression court
   dessous, puis tout s'ouvre vers le blanc. Le mouvement suit la doctrine de
   la page : fondu, translation courte, progression. Rien d'autre.
   ========================================================================== */
/* `display` n'est PAS déclaré ici : il appartient à la règle d'exclusion des
   trois temps, plus haut. Le déclarer à nouveau ferait gagner ce bloc par
   l'ordre de la cascade, et la scène couvrirait la carte e-mail. */
.cine-scene {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--color-warm-canvas);
  align-content: center;
  justify-items: center;
  gap: var(--space-32);
}

/* La marque — elle se pose, elle ne se construit pas devant nous */
.cine-mark {
  width: min(58vw, 460px);
  transform-origin: 50% 50%;
}
.cine-mark__svg { display: block; width: 100%; height: auto; }

/* Le slash ouvre, d'un souffle d'avance : c'est le repère de la marque */
.cine-mark__slash { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.cine--fly .cine-mark__slash { animation: cineRise 720ms var(--ease-standard) .18s forwards; }

/* Le M et le mot suivent ensemble : une seule masse, pas un assemblage */
.cine-mark__m, .cine-mark__word { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.cine--fly .cine-mark__m,
.cine--fly .cine-mark__word { animation: cineRise 720ms var(--ease-standard) .36s forwards; }

@keyframes cineRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* La légende, puis le filet qui court : le vocabulaire de progression du
   système (.meter), à l'échelle d'un écran. */
.cine-cap {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--impra-muted-soft);
  opacity: 0;
}
.cine--fly .cine-cap { animation: cineFade 600ms var(--ease-standard) 1s forwards; }
@keyframes cineFade { to { opacity: 1; } }

.cine-line {
  display: block;
  width: min(58vw, 460px);
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--impra-navy) 8%, transparent);
  overflow: hidden;
  opacity: 0;
}
.cine-line i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: var(--impra-blue);
}
.cine--fly .cine-line { animation: cineFade 500ms var(--ease-standard) .95s forwards; }
.cine--fly .cine-line i { animation: cineProgress 2.5s cubic-bezier(.35, 0, .2, 1) 1.05s forwards; }
@keyframes cineProgress { from { width: 0; } to { width: 100%; } }

/* L'ouverture : la marque s'approche à peine, la lumière prend le dessus.
   Pas de zoom violent — la page suivante arrive, elle ne nous avale pas. */
.cine--fly .cine-mark { animation: cineOpen 1.3s cubic-bezier(.4, 0, .2, 1) 3.5s forwards; }
@keyframes cineOpen {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.cine-flash {
  position: absolute; inset: 0;
  background: var(--color-paper-white);
  opacity: 0;
  pointer-events: none;
}
.cine--fly .cine-flash { animation: cineFlash 1.3s var(--ease-standard) 3.5s forwards; }
@keyframes cineFlash { 0% { opacity: 0; } 100% { opacity: 1; } }

/* ==========================================================================
   TEMPS 3 · LA CONFIRMATION
   Elle naît de l'éclat : fond clair, la voix redevient posée.
   ========================================================================== */
.cine--end .cine-veil { background: var(--impra-bg); animation: none; }
.cine-end {
  position: relative;
  justify-items: center;
  gap: var(--space-16);
  width: min(560px, 100%);
  text-align: center;
  padding: var(--space-48) var(--space-32);
  border-radius: var(--radius-images);
  background: var(--color-paper-white);
  border: var(--border-hairline);
  box-shadow: var(--shadow-card);
  animation: cineGateIn 420ms var(--ease-standard) both;
}
.cine-end__badge {
  width: 52px; height: 52px;
  border-radius: var(--radius-buttons);
  display: grid; place-items: center;
  color: var(--impra-success);
  background: color-mix(in srgb, var(--impra-success) 12%, transparent);
}
.cine-end__t {
  margin: 0;
  font-family: var(--font-geometric);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading-sm);
  line-height: var(--lh-heading-sm);
  letter-spacing: var(--ls-heading-sm);
  color: var(--impra-navy);
}
.cine-end__p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--impra-muted);
  max-width: 40ch;
}
.cine-end__p b { color: var(--impra-navy); font-weight: var(--weight-semibold); }

/* ── LE RACCOURCI DE CONVERSION ────────────────────────────────────────
   Le prospect vient de traverser la démonstration : l'essai doit être à
   un clic, sans qu'il ait à retourner chercher un bouton sur la page.
   Le raccourci passe devant, le retour reste disponible — c'est une
   sortie proposée, jamais un passage forcé.
   ---------------------------------------------------------------------- */
.cine-end__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-8);
}
.cine-end__cta { white-space: nowrap; }
.cine-end__note {
  margin: var(--space-12) 0 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--impra-muted);
}
@media (max-width: 560px) {
  /* Au doigt, deux boutons côte à côte deviennent deux cibles étroites :
     ils s'empilent, le raccourci en tête. Le retour, plus discret, garde
     malgré tout une cible pleine : discret ne veut pas dire difficile à
     atteindre (il tombait à 33 px). */
  .cine-end__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .cine-end__actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .cine-end__cta { white-space: normal; }
}
/* Cette règle peignait TOUS les boutons de l'écran en bleu — elle datait
   du temps où il n'y en avait qu'un. Deux actions cohabitent désormais :
   le bleu appartient au raccourci, le retour s'efface derrière lui. */
.cine-end .btn--primary { background: var(--impra-blue); color: #fff; }
.cine-end .btn--primary:hover { background: var(--color-primary-hover); }
.cine-end .btn--ghost { background: transparent; color: var(--impra-muted); }
.cine-end .btn--ghost:hover {
  background: color-mix(in srgb, var(--impra-navy) 6%, transparent);
  color: var(--impra-navy);
}

/* ── Mobile ── */
@media (max-width: 620px) {
  .cine { padding: var(--space-16); }
  .cine-gate { padding: var(--space-32) var(--space-24); }
  /* En colonne, la base flex de 220px deviendrait une HAUTEUR : on la coupe. */
  .cine-form { flex-direction: column; }
  .cine-mail { flex: 0 0 auto; width: 100%; }
  .cine-go { width: 100%; }
  .cine-mark, .cine-line { width: 72vw; }
  /* La légende tient dans la gouttière, quitte à passer sur deux lignes. */
  .cine-cap { max-width: 72vw; text-align: center; letter-spacing: .08em; }
  .cine-end { padding: var(--space-40) var(--space-24); }
}

/* ── Mouvement réduit : le JS saute le vol ; au cas où, tout est neutralisé ── */
@media (prefers-reduced-motion: reduce) {
  .cine-veil, .cine-gate, .cine-end { animation: none; }
  .cine--fly .cine-mark, .cine--fly .cine-mark__slash, .cine--fly .cine-mark__m,
  .cine--fly .cine-mark__word, .cine--fly .cine-line, .cine--fly .cine-line i,
  .cine--fly .cine-cap, .cine--fly .cine-flash { animation: none; }
}