/*
 * Écran de première ouverture (M06-T18). Feuille de même origine, liée dans <head> de
 * index.html : la CSP interdit les styles en ligne (style-src 'self'). Aucun script, aucune
 * police externe : l'écran s'affiche dès que le HTML est lu, avant le paquet JavaScript.
 *
 * Couleurs : jetons de la marque quand theme.css est déjà arrivé, sinon valeurs de repli
 * (clair ou sombre, selon l'attribut data-theme posé par theme-init.js). L'écran est
 * retiré par React au premier rendu (createRoot vide #racine) : même cadre plein écran,
 * donc aucun saut de mise en page.
 */
.amorce {
  --amorce-fond: oklch(0.95 0.014 275);
  --amorce-texte: oklch(0.43 0.03 275);
  --amorce-marque: oklch(0.5 0.2 282);
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--background, var(--amorce-fond));
  color: var(--muted-foreground, var(--amorce-texte));
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

html[data-theme="sombre"] .amorce {
  --amorce-fond: oklch(0.17 0.03 275);
  --amorce-texte: oklch(0.78 0.02 275);
  --amorce-marque: oklch(0.78 0.13 282);
}

.amorce-marque {
  position: relative;
  inline-size: 4rem;
  block-size: 4rem;
}

.amorce-marque::before,
.amorce-marque::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Disque plein, fixe : la marque. */
.amorce-marque::before {
  inset: 1.25rem;
  background: var(--primary, var(--amorce-marque));
}

/* Halo qui respire : opacité et échelle seulement, sans toucher à la mise en page. */
.amorce-marque::after {
  border: 2px solid var(--primary, var(--amorce-marque));
  opacity: 0;
  animation: amorce-respire 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

.amorce-texte {
  margin: 0;
}

@keyframes amorce-respire {
  0% {
    transform: scale(0.35);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Mouvement réduit : rien ne bouge ; le halo reste un anneau fixe et discret. */
@media (prefers-reduced-motion: reduce) {
  .amorce-marque::after {
    animation: none;
    opacity: 0.35;
    transform: none;
  }
}