/* ══════════════════════════════════════════════════════════════════════════
   FOND ANIMÉ DE LA PAGE D'ACCUEIL

   CE QUE C'EST
   Une courte vidéo d'atelier de technologie, posée DERRIÈRE la carte de
   connexion. Elle donne à voir le contexte réel de la plateforme — établi,
   imprimante 3D, cartes électroniques — là où la page n'offrait qu'un
   dégradé.

   POURQUOI ELLE EST AUSSI SOMBRE
   Ce n'est pas un réglage esthétique, c'est un calcul. La carte de connexion
   est translucide (rgba(26,24,37,.4)) : ce qui passe derrière change le
   contraste du texte. Or cette vidéo contient de grandes fenêtres presque
   blanches. Sans correction, le texte principal tombait à 2,52 : 1 et le
   texte secondaire à 1,09 : 1 — illisibles, très loin du minimum WCAG AA
   de 4,5 : 1.

   Avec brightness(.75), opacity(.55) et le voile radial ci-dessous, le PIRE
   pixel de la vidéo laisse 15,4 : 1 au texte principal et 6,5 : 1 au
   secondaire, mesurés au centre — là où se trouve la carte.
   Ces trois valeurs vont ensemble : les changer sans refaire le calcul, c'est
   rendre la page illisible pour quelqu'un. Le contrôle
   scripts/test-fond-anime.js les verrouille.

   CE QUI LA COUPE, ET POURQUOI
   · prefers-reduced-motion : mouvement non désiré (vertiges, migraines) ;
   · html.accessibility-focus : le mode « sans distraction » de la page ;
   · html.accessibility-contrast : le fond doit y rester blanc uni ;
   · connexion lente ou économiseur de données : voir fond-anime.js.
   Dans tous ces cas l'affiche fixe reste, la page ne perd rien.
   ══════════════════════════════════════════════════════════════════════════ */

.fond-anime {
  position: fixed;
  inset: 0;
  z-index: 0;               /* même plan que les décors existants, sous la carte */
  overflow: hidden;
  pointer-events: none;     /* ne vole jamais un clic à la carte de connexion */
}

.fond-anime video,
.fond-anime .fond-anime-affiche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 23/09/2026 — la vidéo est verticale (540 × 960) : sur un écran large,
     « cover » la zoome et n'en montrait que le milieu — une tablette géante
     affichant un faux tableau de bord, juste derrière la vraie carte de
     connexion. Cadrée sur le haut, elle montre l'atelier : fenêtres,
     imprimante 3D, établis — un décor qu'on reconnaît au premier coup d'œil. */
  object-position: 50% 18%;
  /* Le flou adoucit les arêtes du décor : l'œil ne cherche plus à lire ce
     qu'il y a derrière la carte. */
  /* 23/09/2026 — la carte de connexion est devenue presque opaque
     (rgba(22,20,34,.92), index.html bloc « CLARTÉ ») : l'atelier n'a plus
     besoin d'être éteint ni flouté pour protéger le texte. Il est net et
     clair ; scripts/test-fond-anime.js refait le calcul de contraste. */
  filter: brightness(0.95);
  opacity: 0.85;
  transition: opacity .9s ease;
}

/* La vidéo n'apparaît qu'une fois vraiment prête : sans cela on verrait un
   rectangle noir remplacer l'affiche pendant le chargement. */
.fond-anime video { opacity: 0; }
.fond-anime.prete video.prete { opacity: 0.85; }
/* Chaque affiche s'efface quand SA vidéo est prête (deux couches depuis le
   24/09/2026 : si l'une échoue, son affiche reste). */
.fond-anime:has(video.fond-anime-ambiance.prete) .fond-anime-affiche.fond-anime-ambiance,
.fond-anime:has(video.fond-anime-cadre.prete) .fond-anime-affiche.fond-anime-cadre { opacity: 0; }

/* ══ 24/09/2026 — PLUS DE ZOOM : ambiance floue + cadre complet ══════════
   La vidéo d'origine est VERTICALE (540 × 960). « Remplir » un écran large
   l'agrandissait jusqu'à 5 fois et coupait la tablette et les coins de la
   salle. Désormais :
   · .fond-anime-ambiance remplit l'écran, mais c'est une version FLOUE
     (calculée dans le fichier, 33 Ko) : étirée, elle reste une lumière ;
   · .fond-anime-cadre montre l'image ENTIÈRE, jamais recadrée, à la hauteur
     de l'écran, calée à droite, fondue vers la gauche ;
   · écran vertical (téléphone, tablette en portrait) : le cadre a déjà la
     bonne forme, il remplit tout sans être agrandi. */
.fond-anime .fond-anime-cadre {
  left: auto;
  right: 0;
  width: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
@media (max-aspect-ratio: 4/5) {
  .fond-anime .fond-anime-cadre {
    left: 0; width: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 40%;
    -webkit-mask-image: none; mask-image: none;
  }
  .fond-anime .fond-anime-ambiance { display: none; }
}

/* LE VOILE EST RADIAL, ET C'EST TOUT L'INTÉRÊT.

   Un assombrissement uniforme calé sur le pire pixel effaçait l'atelier :
   la page redevenait le dégradé qu'elle était, avec 163 Ko en plus. Le
   contraste ne se joue pourtant qu'à UN endroit — derrière la carte de
   connexion, seule zone où il y a du texte à lire.

   Le voile est donc dense au centre (0,65 : le texte secondaire y garde
   6,5 : 1, au-delà du minimum AA de 4,5) et s'efface vers les bords, où
   l'atelier reste visible. La carte est centrée par `body { display:flex;
   align-items:center; justify-content:center }` : le centre du voile et le
   centre de la carte coïncident donc toujours, quelle que soit la taille
   de l'écran. */
.fond-anime::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%,
      rgba(8, 6, 18, 0.40) 0%,
      rgba(8, 6, 18, 0.30) 45%,
      rgba(8, 6, 18, 0.12) 78%,
      rgba(8, 6, 18, 0.04) 100%);
}

/* ── Coupures ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fond-anime video { display: none !important; }
  .fond-anime .fond-anime-affiche { opacity: 0.85 !important; }
}
html.accessibility-focus .fond-anime,
html.accessibility-contrast .fond-anime {
  display: none !important;
}

/* Sur un téléphone tenu à l'horizontale, la carte occupe presque tout
   l'écran : le fond ne se verrait pas, autant ne pas le télécharger. */
@media (max-height: 540px) and (orientation: landscape) {
  .fond-anime { display: none; }
}