/* ═══════════════════════════════════════════════════════════════════
   FUNDAMENTALS — ÉCRAN DE CHARGEMENT

   Le défaut corrigé n'est pas « la page est vide pendant l'attente ».
   C'est que le navigateur peint la mise en page AVANT que les données
   n'arrivent : un titre réduit à un tiret, une salutation vide, des
   cartes absentes. L'utilisateur ne voit pas une page qui charge, il
   voit une page cassée.

   D'où deux contraintes de fond :
     — le fond doit être OPAQUE ET IMMÉDIAT. Cette feuille est chargée
       par un <link> dans le <head>, donc bloquante au rendu : rien ne
       se peint avant qu'elle soit appliquée.
     — le markup doit être dans le HTML initial. Un overlay inséré par
       un script placé en bas du <body> arriverait après le premier
       rendu, c'est-à-dire trop tard.

   Convention : le thème est déjà posé sur <html class="dark"> par le
   bootstrap anti-FOUC en haut de chaque page, donc var(--bg) résout
   la bonne valeur dès le premier rendu.
   ═══════════════════════════════════════════════════════════════════ */

.ec {
  position: fixed;
  inset: 0;

  /* Au-dessus de TOUT. Le bandeau cookies monte à 99998 et la modale de
     nav-avatar à 9999 : à 9999 le bandeau traversait le voile et venait
     flotter par-dessus l'écran de chargement. Tant que l'écran est là,
     rien d'autre ne doit être visible ni cliquable ; le bandeau
     réapparaît normalement dès qu'il se lève. */
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  background: var(--bg, #FAF8F5);
  overflow: hidden;
  transition: opacity .34s ease;

  /* FILET DE SÉCURITÉ, EN CSS PUR.
     Si le script ne tourne jamais — fichier absent, erreur de syntaxe,
     réseau coupé au mauvais moment — cette animation retire l'écran
     toute seule au bout de 12 s. Sans elle, une panne du script
     enfermerait l'utilisateur derrière un voile opaque : le remède
     serait pire que le mal. Le script annule ce filet dès qu'il prend
     la main, en posant .ec-js. */
  animation: ecSecours 0s linear 12s forwards;
}
.ec.ec-js   { animation: none; }
.ec.ec-parti { opacity: 0; pointer-events: none; }

@keyframes ecSecours {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* La marque traverse l'écran en filigrane, comme ailleurs sur la
   plateforme (le panneau d'essai de la connexion, les hero crème, les
   blocs de recommandation). */
.ec::after {
  content: 'f';
  position: absolute;
  right: -0.9rem;
  bottom: -4.5rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(190px, 30vw, 320px);
  line-height: 1;
  color: rgba(139, 147, 184, .13);
  pointer-events: none;
  user-select: none;
}
html.dark .ec::after { color: rgba(143, 140, 212, .15); }

/* Le carré de marque, identique au wordmark de la navigation.
   Invisible au départ : il n'apparaît que si l'attente dure. Sous le
   seuil, l'utilisateur n'aura vu qu'un fond uni — jamais un logo qui
   clignote. */
.ec-marque {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--accent-strong, #5B21B6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  opacity: 0;
  transition: opacity .4s ease;
}
.ec.ec-visible .ec-marque {
  opacity: 1;
  animation: ecRespire 2.8s ease-in-out .4s infinite;
}

/* Une respiration, pas une roue. Rien ne tourne, et rien ne se répète
   assez vite pour qu'on y lise une mesure du temps restant — qu'on ne
   connaît pas. */
@keyframes ecRespire {
  0%, 100% { transform: scale(1);     box-shadow: 0 6px 20px rgba(91, 33, 182, .20); }
  50%      { transform: scale(1.055); box-shadow: 0 11px 32px rgba(91, 33, 182, .32); }
}

.ec-mot {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted, #78716C);
  opacity: 0;
  transition: opacity .45s ease;
}
.ec-mot.on { opacity: 1; }

.ec-sortie {
  position: relative;
  z-index: 1;
  display: none;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ec.ec-echec .ec-sortie  { display: flex; }
.ec.ec-echec .ec-marque  { animation: none; }

.ec-btn {
  font: 600 0.8125rem/1 var(--font-body, Inter, system-ui, sans-serif);
  padding: 0.6rem 1.05rem;
  border-radius: 0.7rem;
  cursor: pointer;
  border: 1px solid var(--accent-strong, #5B21B6);
  background: var(--accent-strong, #5B21B6);

  /* L'encre est le FOND DE PAGE, pas du blanc en dur. --accent-strong
     change de clarté avec le thème (#5B21B6 en clair, #A78BFA en
     sombre) : du blanc fixe donnait 2,72 de contraste en sombre, sous
     le seuil. --bg est toujours l'opposé de l'accent en clarté, donc
     l'encre reste lisible dans les deux thèmes. */
  color: var(--bg, #FAF8F5);
}
.ec-btn.ec-btn-2 {
  background: transparent;
  color: var(--text, #1C1917);
  border-color: var(--border-mid, rgba(20, 20, 30, .16));
}

/* Qui a désactivé les animations obtient un écran fixe : la marque est
   là d'emblée, sans respiration ni fondu. Le filet de sécurité, lui,
   n'est PAS touché — ce n'est pas une animation décorative. */
@media (prefers-reduced-motion: reduce) {
  .ec, .ec-marque, .ec-mot   { transition: none; }
  .ec.ec-visible .ec-marque  { animation: none; }
}