/* La landing (#login), avant toute session — G1 (EF-01 à EF-05). Le téléphone d'abord (360-430
 * px), un seul élargissement à 900 px, comme `coque.css`. Aucune couleur neuve : tout vient des
 * jetons de `coque.css` (§2.3), pour rester « mini éditeur ». Animations transform/opacity
 * uniquement, coupées sous `prefers-reduced-motion` (landing.js ne les lance pas dans ce cas).
 */

/* `#login` (coque.css) pose une grille sans colonne déclarée : sa piste implicite se dimensionne
 * alors sur le contenu le plus large de la landing (la bande de vidéos), et déborde le téléphone
 * sans que `scrollWidth` le voie (l'écran est en `position:fixed`). Une seule colonne qui peut
 * se réduire à 0 referme la piste sur la largeur réellement disponible — la grammaire de
 * `#login` (centrage, défilement) ne change pas, elle se contente enfin de la vraie largeur. */
#login { grid-template-columns: minmax(0, 1fr); }

.accueil {
  width: 100%;
  min-width: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 12px 0 40px;
}

.accueil-marque { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; }

/* ---- Héros ---------------------------------------------------------------------------- */

.accueil-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  text-align: center;
  padding-top: 8px;
}

/* Une lueur douce qui respire derrière le titre — un dégradé posé une fois, jamais une image :
 * `transform`/`opacity` seulement, coupée avec le reste sous `prefers-reduced-motion`. */
.accueil-hero-lueur {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 340px;
  height: 340px;
  margin-left: -170px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-2), transparent 72%);
  animation: accueil-respire 6s ease-in-out infinite;
  z-index: -1;
}
@keyframes accueil-respire {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.12); opacity: .9; }
}

.accueil-titre {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 8vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Chaque ligne entre l'une après l'autre — un fondu + une légère montée, jamais de mise en page
 * (translateY est un `transform`) : trois `@keyframes` identiques, trois délais. */
.accueil-titre-ligne {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  animation: accueil-titre-entree 640ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.accueil-titre-ligne:nth-child(1) { animation-delay: 40ms; }
.accueil-titre-ligne:nth-child(2) { animation-delay: 160ms; }
.accueil-titre-ligne:nth-child(3) { animation-delay: 280ms; }
@keyframes accueil-titre-entree { to { opacity: 1; transform: translateY(0); } }

.accueil-mot-cle {
  color: var(--accent);
  text-decoration: underline wavy var(--accent) 3px;
  text-underline-offset: 5px;
}

.accueil-accroche {
  margin: 0;
  max-width: 42ch;
  color: var(--encre-2);
  font-size: 17px;
  line-height: 1.5;
}

.accueil-cta { padding: 14px 28px; font-size: 16px; font-weight: 700; }
.accueil-statut { margin: 0; min-height: 20px; color: var(--encre-2); font-size: 14px; }
#login-status:empty { display: none; }

/* ---- La bande de vidéos ---------------------------------------------------------------- */

.accueil-bande {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(60vw, 220px);
  justify-content: start;
  gap: var(--e2);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 8px;
  margin: 0 -2px;
  /* À 390 px, la troisième carte reste coupée pile au bord — un signe à swiper, pas une erreur —
   * mais le bord dur est disgracieux : un fondu de 28 px la laisse déborder élégamment. */
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.accueil-video-carte { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }

.accueil-video-cadre {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--doux);
  box-shadow: var(--ombre);
}

.accueil-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--doux); }
.accueil-video-legende { margin: 0; color: var(--encre-2); font-size: 13px; text-align: center; }

/* ---- Avant / après (le son nettoyé) ----------------------------------------------------- */

.accueil-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
  text-align: center;
}

.accueil-h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.accueil-onde-texte { margin: 0; color: var(--encre-2); font-size: 15px; }
.accueil-onde-svg { width: 100%; max-width: 420px; height: auto; display: block; }
/* Cinq allongements distincts seulement (calculés une fois, à la main — pas un tirage au sort) :
 * chaque blanc qui se referme avant une barre la rapproche de 10px vers la gauche. Une seule
 * paire de `@keyframes`, partagée par les 26 barres ; `--dx` (posé ici, jamais en attribut
 * `style`) choisit de combien chacune glisse. */
.accueil-onde-svg rect {
  fill: var(--accent);
  animation: accueil-onde-pleine 4200ms cubic-bezier(.65, 0, .35, 1) infinite alternate;
}
.accueil-onde-svg rect.accueil-blanc { fill: var(--trait); animation-name: accueil-onde-blanc; }
.accueil-onde-svg rect.dx-0 { --dx: 0px; }
.accueil-onde-svg rect.dx-1 { --dx: -10px; }
.accueil-onde-svg rect.dx-2 { --dx: -20px; }
.accueil-onde-svg rect.dx-3 { --dx: -30px; }
.accueil-onde-svg rect.dx-4 { --dx: -40px; }
@keyframes accueil-onde-pleine { 0%, 30% { transform: translateX(0); } 70%, 100% { transform: translateX(var(--dx)); } }
@keyframes accueil-onde-blanc { 0%, 30% { transform: translateX(0); opacity: 1; } 70%, 100% { transform: translateX(var(--dx)); opacity: 0; } }

/* Les deux durées côte à côte (plus lisible qu'un fondu qui oblige à attendre) : la frise, elle,
 * continue de montrer le mouvement — les barres se resserrent pendant que ce nombre reste fixe. */
.accueil-onde-duree {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.accueil-onde-fleche { width: 20px; height: 20px; flex: none; color: var(--encre-2); }

/* ---- Les trois étapes, en cartes ---------------------------------------------------------- */

.accueil-etapes-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.accueil-etape {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2);
  padding-left: 52px;
  border-radius: var(--rayon);
  background: var(--fond-2);
  box-shadow: var(--ombre);
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.accueil-etape-icone { flex: none; width: 36px; height: 36px; color: var(--accent); }
/* La flèche (envoi) : un petit va-et-vient. Les points (étincelle, puis message qui arrive) :
 * un même clignotement, décalé — le second motif ne réutilise que le délai. */
.accueil-icone-fleche { animation: accueil-icone-monte 2.2s ease-in-out infinite; transform-origin: center; }
@keyframes accueil-icone-monte { 0%, 100% { transform: translateY(2px); opacity: .7; } 50% { transform: translateY(-2px); opacity: 1; } }
.accueil-icone-point { animation: accueil-icone-point 1.3s ease-in-out infinite; transform-origin: center; }
.accueil-icone-point-2 { animation-delay: .18s; }
.accueil-icone-point-3 { animation-delay: .36s; }
@keyframes accueil-icone-point { 0%, 100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }

.accueil-etape-chiffre {
  position: absolute; top: 14px; left: 14px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--accent-2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.accueil-etape p { margin: 0; }

/* ---- Le pied, second appel ---------------------------------------------------------------- */

.accueil-fin { padding: 40px 0 8px; }

@media (min-width: 900px) {
  .accueil { gap: 72px; padding: 24px 0 64px; }
  /* Trois cartes de 200 px tiennent large dans 900 px et plus : elles se centrent au lieu de
   * rester collées au bord gauche, et le fondu de bord (pensé pour le swipe du téléphone) part
   * avec elles. */
  .accueil-bande { grid-auto-columns: 200px; justify-content: center; mask-image: none; }
  /* La frise a de la place : elle grandit, et les deux durées avec elle. */
  .accueil-onde-svg { max-width: 620px; }
  .accueil-onde-duree { font-size: 26px; }
  .accueil-onde-fleche { width: 26px; height: 26px; }
  /* Les trois cartes passent en rangée, icône au-dessus du texte plutôt qu'à côté — le bas de
   * page, trop nu à cette largeur, tient enfin sa place. */
  .accueil-etapes-liste { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
  .accueil-etape { flex-direction: column; padding: 28px var(--e2) var(--e2); text-align: center; gap: 14px; }
  .accueil-etape-icone { width: 44px; height: 44px; }
}

/* Toutes les animations de la landing, au même endroit : une seule media query qui les coupe —
 * et qui réagit EN DIRECT si la personne change le réglage pendant sa visite, puisque c'est du
 * CSS et non un `matchMedia().matches` lu une fois par `landing.js`. */
@media (prefers-reduced-motion: reduce) {
  .accueil-hero-lueur { animation: none; }
  .accueil-titre-ligne { animation: none; opacity: 1; transform: none; }
  .accueil-onde-svg rect { animation: none; transform: translateX(var(--dx)); }
  .accueil-onde-svg rect.accueil-blanc { opacity: 0; }
  .accueil-icone-fleche, .accueil-icone-point { animation: none; opacity: 1; transform: none; }
}