/* L'ecran d'ouverture, le temps que React demarre (voir index.html). Un
   fichier a part, pas un <style> dans la page : la politique de contenu
   (vite.config.ts) interdit les styles en ligne. */
html { background: #f8f8f8; }
.ouverture { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; background: #f8f8f8; opacity: 0;
  animation: ouverture-apparait 300ms ease-out 180ms forwards; }
.ouverture__piste { position: relative; width: 270px; height: 120px;
  background-image: linear-gradient(90deg, #161616 0 14px, transparent 14px 26px);
  background-position: 0 100%; background-repeat: repeat-x; background-size: 26px 3px;
  animation: ouverture-piste 0.45s linear infinite; }
.ouverture__tortue { position: absolute; left: 50%; bottom: 8px; width: 172px; height: auto;
  transform-origin: 50% 100%; animation: ouverture-course 0.36s ease-in-out infinite alternate; }
.ouverture__trainee { position: absolute; left: 0; height: 5px; border-radius: 2px; background: #ffc600;
  animation: ouverture-vitesse 0.7s linear infinite; }
.ouverture__trainee:nth-child(1) { top: 30px; width: 62px; }
.ouverture__trainee:nth-child(2) { top: 56px; width: 40px; animation-delay: -0.25s; animation-duration: 0.55s; }
.ouverture__trainee:nth-child(3) { top: 82px; width: 76px; animation-delay: -0.45s; animation-duration: 0.8s; }
.ouverture__chrono { margin: 0; font: 600 17px ui-monospace, 'IBM Plex Mono', Consolas, monospace;
  letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: #161616; }
@keyframes ouverture-apparait { to { opacity: 1; } }
@keyframes ouverture-course { from { transform: translate(-50%, 0) rotate(-2deg); }
  to { transform: translate(-50%, -7px) rotate(2deg); } }
@keyframes ouverture-vitesse { from { transform: translateX(210px); opacity: 0; } 20% { opacity: 1; }
  to { transform: translateX(-40px); opacity: 0; } }
@keyframes ouverture-piste { to { background-position: -26px 100%; } }
@media (prefers-reduced-motion: reduce) {
  .ouverture__piste, .ouverture__tortue { animation: none; }
  .ouverture__tortue { transform: translateX(-50%); }
  .ouverture__trainee { display: none; }
}