/* ============================================================
   Splash animé du tunnel — porté depuis la page de connexion du
   produit (css/login_splash.css du dépôt eBrigade), pour que
   ebrigade.online, le login et l'application racontent la même
   histoire visuelle.

   Deux emplois, un seul jeu de couches :
     .eb-splash-stage--band  bandeau de marque en tête du tunnel
     .eb-splash-stage--full  fond plein écran de l'écran d'installation

   Deux règles tenues partout dans ce fichier :
   1. aucune animation ne conditionne la visibilité d'un élément
      (pas de keyframe `from { opacity: 0 }` en `both`) — un onglet
      en arrière-plan ou un moteur bridé fige l'animation à 0 % et
      laisserait le contenu invisible, sur la page où on peut le
      moins se le permettre ;
   2. rien ne bouge derrière les champs du formulaire, et le
      bandeau est figé en mobile (voir la media query en bas).
   ============================================================ */

.eb-splash-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: #0B0A26;
  pointer-events: none;
}

.eb-splash-stage--full {
  position: fixed;
}

/* ---- Couche 1 : mesh de blobs animés ---- */
.eb-splash-mesh {
  position: absolute;
  inset: -20%;
  filter: blur(80px) saturate(140%);
  opacity: 0.9;
  pointer-events: none;
}
.eb-splash-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.eb-splash-blob--1 {
  width: 55%; height: 55%; left: -5%; top: -10%;
  background: radial-gradient(circle, #FF6B6B 0%, transparent 70%);
  animation: ebSplashFloat1 18s ease-in-out infinite;
}
.eb-splash-blob--2 {
  width: 50%; height: 50%; right: -5%; top: 10%;
  background: radial-gradient(circle, #6C5CE7 0%, transparent 70%);
  animation: ebSplashFloat2 22s ease-in-out infinite;
}
.eb-splash-blob--3 {
  width: 60%; height: 60%; left: 10%; bottom: -15%;
  background: radial-gradient(circle, #1ABFC7 0%, transparent 70%);
  animation: ebSplashFloat3 25s ease-in-out infinite;
}
.eb-splash-blob--4 {
  width: 45%; height: 45%; right: 5%; bottom: 5%;
  background: radial-gradient(circle, #F58A82 0%, transparent 70%);
  animation: ebSplashFloat4 20s ease-in-out infinite;
}

@keyframes ebSplashFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(12%, 20%) scale(1.15); }
  66%     { transform: translate(-8%, 10%) scale(0.9); }
}
@keyframes ebSplashFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-15%, 15%) scale(1.1); }
  66%     { transform: translate(10%, -10%) scale(0.95); }
}
@keyframes ebSplashFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(10%, -15%) scale(1.2); }
  66%     { transform: translate(-12%, 8%) scale(0.85); }
}
@keyframes ebSplashFloat4 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-10%, -20%) scale(0.95); }
  66%     { transform: translate(15%, 5%) scale(1.1); }
}

/* ---- Couche 2 : grille en perspective ---- */
.eb-splash-grid-layer {
  position: absolute;
  inset: 0;
  perspective: 800px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  pointer-events: none;
}
.eb-splash-grid {
  position: absolute;
  left: -25%;
  top: 40%;
  width: 150%;
  height: 160%;
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(65deg);
  animation: ebSplashGridMove 14s linear infinite;
  mask-image: radial-gradient(ellipse at center top, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 0%, transparent 75%);
}
@keyframes ebSplashGridMove {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

/* Dans un bandeau de ~90 px, la grille du login (top: 40 %, maille 60 px)
   tombe hors cadre : on la remonte et on la resserre. */
.eb-splash-stage--band .eb-splash-grid {
  top: 8%;
  height: 220%;
  background-size: 38px 38px;
  opacity: 0.75;
}

/* Même remarque pour le mesh : des blobs hauts de 55 % d'un bandeau
   (~45 px) noyés dans 80 px de flou ne laissent qu'une barre noire.
   On les fait déborder largement en hauteur et on allège le flou. */
.eb-splash-stage--band .eb-splash-mesh {
  inset: -160% -10%;
  filter: blur(55px) saturate(150%);
}
.eb-splash-stage--band .eb-splash-blob--1 { width: 45%; height: 100%; left: -8%;  top: 8%; }
.eb-splash-stage--band .eb-splash-blob--2 { width: 40%; height: 95%;  right: 8%;  top: 12%; }
.eb-splash-stage--band .eb-splash-blob--3 { width: 45%; height: 100%; left: 28%;  bottom: 5%; }
.eb-splash-stage--band .eb-splash-blob--4 { width: 35%; height: 90%;  right: -6%; bottom: 8%; }

/* ---- Couche 2b : traits lumineux qui traversent ---- */
.eb-splash-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.eb-splash-trail {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3.5;
  /* pathLength normalisé à 1000 sur les <path> ; le dash visible parcourt le path. */
  stroke-dasharray: 180 1000;
  stroke-dashoffset: 1180;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 0 24px currentColor);
  opacity: 1;
}
.eb-splash-trail--1 { color: #FF6B6B; stroke: url(#ebSplashGrad1); animation: ebSplashDash 9s linear infinite; animation-delay: 0s; }
.eb-splash-trail--2 { color: #F58A82; stroke: url(#ebSplashGrad2); animation: ebSplashDash 11s linear infinite; animation-delay: 2.2s; stroke-dasharray: 150 1000; stroke-width: 3; }
.eb-splash-trail--3 { color: #FFFFFF; stroke: url(#ebSplashGrad3); animation: ebSplashDash 13s linear infinite; animation-delay: 4.5s; stroke-dasharray: 220 1000; stroke-width: 2.5; }
.eb-splash-trail--4 { color: #FF8FA3; stroke: url(#ebSplashGrad4); animation: ebSplashDash 10s linear infinite; animation-delay: 1.1s; stroke-dasharray: 130 1000; stroke-width: 2.8; }
.eb-splash-trail--5 { color: #FF6B6B; stroke: url(#ebSplashGrad5); animation: ebSplashDash 14s linear infinite; animation-delay: 6.3s; stroke-dasharray: 180 1000; stroke-width: 3; }

/* Le dash traverse tout le path puis sort, pour une boucle continue. */
@keyframes ebSplashDash {
  0%   { stroke-dashoffset: 1200; }
  100% { stroke-dashoffset: -200; }
}

/* ---- Couche 3 : particules scintillantes ---- */
.eb-splash-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.eb-splash-particle {
  position: absolute;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.9);
  animation: ebSplashTwinkle 4s ease-in-out infinite;
}
.eb-splash-particle:nth-child(1)  { top: 15%; left: 10%; animation-delay: 0s; }
.eb-splash-particle:nth-child(2)  { top: 25%; left: 80%; animation-delay: 0.3s; }
.eb-splash-particle:nth-child(3)  { top: 45%; left: 30%; animation-delay: 0.8s; }
.eb-splash-particle:nth-child(4)  { top: 65%; left: 70%; animation-delay: 1.2s; }
.eb-splash-particle:nth-child(5)  { top: 75%; left: 20%; animation-delay: 1.8s; }
.eb-splash-particle:nth-child(6)  { top: 35%; left: 55%; animation-delay: 2.2s; }
.eb-splash-particle:nth-child(7)  { top: 85%; left: 50%; animation-delay: 2.6s; }
.eb-splash-particle:nth-child(8)  { top: 10%; left: 45%; animation-delay: 3.1s; }
.eb-splash-particle:nth-child(9)  { top: 55%; left: 90%; animation-delay: 0.5s; }
.eb-splash-particle:nth-child(10) { top: 20%; left: 65%; animation-delay: 1.5s; }
.eb-splash-particle:nth-child(11) { top: 60%; left: 15%; animation-delay: 2.8s; }
.eb-splash-particle:nth-child(12) { top: 80%; left: 85%; animation-delay: 3.5s; }

@keyframes ebSplashTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* ============================================================
   Bandeau de marque (étapes du formulaire)
   ============================================================ */

.eb-band-wrap {
  position: relative;
  overflow: hidden;
  background: #0B0A26;
}
/* Voile sombre : dense aux deux extrémités (là où se posent le logo et
   le sélecteur de langue), léger au centre pour ne pas éteindre l'aurore
   derrière la baseline. Sans lui, du texte blanc sur un blob corail clair
   passe sous le seuil de contraste. */
.eb-band-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(11,10,38,0.62) 0%,
    rgba(11,10,38,0.16) 26%,
    rgba(11,10,38,0.16) 74%,
    rgba(11,10,38,0.62) 100%);
}
/* Filet dégradé qui ferme le bandeau, au-dessus du splash. */
.eb-band-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, #FF6B6B 0%, #F58A82 35%, #6C5CE7 70%, #1ABFC7 100%);
  opacity: 0.85;
}

.eb-band {
  position: relative;
  z-index: 2;
  display: flex;
  /* Le bloc central prend toute la largeur sous 1100 px et passe donc sur une
     seconde ligne. Sans `wrap`, il écrase le logo à zéro. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 0.95rem 1.75rem;
}

.eb-band-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  text-decoration: none;
}
.eb-band-mark {
  height: 2.5rem;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(255, 107, 107, 0.35));
}
.eb-band-name {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.eb-band-sub {
  display: block;
  color: rgba(255,255,255,0.68);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.eb-band-brand:focus-visible,
.eb-band-lang a:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* Baseline + réassurance. En desktop le bloc est centré sur la page (et non
   entre les deux blocs latéraux, qui n'ont pas la même largeur), donc sorti
   du flux ; en mobile il passe simplement sur une deuxième ligne. */
.eb-band-center {
  order: 3;
  flex: 1 0 100%;
  text-align: center;
  min-width: 0;
}
@media (min-width: 1100px) {
  .eb-band-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: 0;
    flex: 0 0 auto;
    width: auto;
  }
}

/* Signature du login : la baseline avec son reflet qui balaie. Masquée sous
   1100 px, où la place revient à la réassurance. */
.eb-band-tagline {
  display: none;
  white-space: nowrap;
  margin: 0;
}
@media (min-width: 1100px) {
  .eb-band-tagline { display: block; }
}
/* Réassurance : elle vivait en triple exemplaire dans une bande rose au-dessus
   du formulaire. Une seule fois ici, sous la baseline, elle dit la même chose
   et rend 60 px au formulaire. */
/* Volontairement `block` et non `flex` : sur deux lignes, un picto en enfant
   flex se détache à gauche du bloc entier au lieu de rester collé au texte. */
.eb-band-trust {
  display: block;
  text-align: center;
  text-wrap: balance;
  margin: 0.35rem 0 0;
  color: rgba(255,255,255,0.88);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}
.eb-band-trust i {
  color: #FF8FA3;
  margin-right: 0.45rem;
}
@media (max-width: 640px) {
  .eb-band-trust { font-size: 0.68rem; margin-top: 0; }
}
.eb-band-tagline > span {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(90deg, #fff 0%, #FFD1D1 50%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ebSplashShimmer 6s linear infinite;
}
@keyframes ebSplashShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.eb-band-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 0.6rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}
.eb-band-lang a {
  padding: 0.25rem 0.6rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.eb-band-lang a:hover { color: #fff; }
.eb-band-lang a.is-active {
  background: #fff;
  color: #1A133B;
}

@media (max-width: 640px) {
  .eb-band { padding: 0.85rem 1rem; gap: 0.75rem; }
  .eb-band-mark { height: 2rem; }
  .eb-band-name { font-size: 0.95rem; }
  .eb-band-sub { font-size: 0.68rem; }
}

/* ============================================================
   Écran d'installation : logo avec halo devant le splash
   ============================================================ */

.eb-splash-mark-halo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
}
.eb-splash-mark-halo::before,
.eb-splash-mark-halo::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  animation: ebSplashPulseRing 4s ease-out infinite;
  pointer-events: none;
}
.eb-splash-mark-halo::after { animation-delay: 2s; }
@keyframes ebSplashPulseRing {
  0%   { transform: scale(0.75); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}
.eb-splash-glow {
  position: absolute;
  inset: -70%;
  background: radial-gradient(ellipse at center, rgba(255,107,107,0.55) 0%, rgba(108,92,231,0.24) 38%, transparent 70%);
  filter: blur(30px);
  animation: ebSplashGlowPulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ebSplashGlowPulse {
  0%,100% { transform: scale(1);   opacity: 0.75; }
  50%     { transform: scale(1.08); opacity: 1; }
}
.eb-splash-mark {
  position: relative;
  z-index: 1;
  width: 4.4rem;
  height: auto;
  filter:
    drop-shadow(0 10px 30px rgba(0,0,0,0.35))
    drop-shadow(0 0 18px rgba(255,255,255,0.18));
  /* Pas d'animation d'apparition : `breathe` seul, qui ne touche
     jamais à l'opacité. Un moteur bridé laisse donc le logo visible. */
  animation: ebSplashBreathe 6s ease-in-out infinite;
}
@keyframes ebSplashBreathe {
  0%,100% { transform: translateY(0)    scale(1); }
  50%     { transform: translateY(-4px) scale(1.015); }
}

/* Mobile : on resserre le bloc de tête pour que la progression
   arrive plus haut dans l'écran. */
@media (max-width: 640px) {
  .eb-splash-mark-halo { width: 5rem; height: 5rem; }
  .eb-splash-mark { width: 3.2rem; }
}

/* Le fond de page passe au sombre dès le premier octet peint : pas de
   flash blanc avant le splash, et rien de clair à découvrir si le
   contenu dépasse la hauteur de l'écran. */
.eb-splash-body {
  background: #0B0A26;
}

/* Contenu posé au-dessus du splash plein écran. */
.eb-above-splash {
  position: relative;
  z-index: 1;
}

/* Textes de l'écran d'installation, repassés sur fond sombre. */
.eb-on-splash        { color: #fff; }
.eb-on-splash-muted  { color: rgba(255,255,255,0.6); }
.eb-on-splash-faint  { color: rgba(255,255,255,0.35); }

/* ============================================================
   Garde-fous
   ============================================================ */

/* Mobile : le bandeau ne bouge plus. On garde le mesh (immobile,
   donc zéro compositing continu) et on retire ce qui coûte cher
   pour un rendu de 2 mm de haut. */
@media (max-width: 767px) {
  .eb-splash-stage--band .eb-splash-trails,
  .eb-splash-stage--band .eb-splash-particles,
  .eb-splash-stage--band .eb-splash-grid-layer {
    display: none;
  }
  .eb-splash-stage--band .eb-splash-blob {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eb-splash-stage *,
  .eb-splash-stage *::before,
  .eb-splash-stage *::after,
  .eb-band-tagline span,
  .eb-splash-mark-halo::before,
  .eb-splash-mark-halo::after,
  .eb-splash-glow,
  .eb-splash-mark {
    animation: none !important;
    transition: none !important;
  }
  .eb-splash-trail { opacity: 0; }
}