/* Écran de chargement de l'accueil (piloté par js/chargeur.js).
   Fond bleu Fitou ; l'astérisque de la marque, couleur crème (le fond de l'affiche), apparaît en grandissant
   puis tourne lentement comme un indicateur de chargement ; sous lui, une barre qui se remplit. À 100 % on plonge
   dans l'astérisque :
   il grandit jusqu'à couvrir l'écran de crème, puis l'écran s'efface sur l'affiche, du même crème.
   Affiché seulement si le <head> a posé la classe « chargement » (une fois par visite, jamais en mouvement réduit). */

.chargeur{ display:none; }
.chargement{ overflow:hidden; }
.chargement .chargeur, .chargeur.actif{ display:grid; place-items:center; position:fixed; inset:0; z-index:100;
  background:var(--bleu); color:var(--creme); overflow:hidden; }

.chargeur__centre{ display:grid; justify-items:center; gap:clamp(22px,4.5vh,44px); }

/* Le logo animé : 40 images de la vidéo (8 colonnes × 5 rangées, 520 × 272 px chacune), recadrées sur le logo.
   js/chargeur.js choisit l'image d'après l'avancement de la barre : la vidéo avance avec le chargement. */
.chargeur__logo{ width:clamp(190px,24vw,340px); aspect-ratio:520 / 272;
  background:url(../assets/accueil/chargeur/logo-planche.png) 0 0 / 800% 500% no-repeat; }

/* L'astérisque : il apparaît (scale), puis tourne (rotate) ; les deux propriétés sont séparées pour pouvoir
   ensuite agrandir l'astérisque par transition sans arrêter la rotation. */
.chargeur__aster{ display:block; width:clamp(84px,13vw,136px); height:auto; aspect-ratio:1; color:var(--creme);
  animation:ch-apparait 700ms var(--sortie) backwards, ch-tourne 4s linear infinite;
  will-change:scale, rotate; }
@keyframes ch-apparait{ from{ scale:0; } to{ scale:1; } }
@keyframes ch-tourne{ to{ rotate:360deg; } }

/* La jauge */
.chargeur__jauge{ position:relative; width:min(320px,62vw); height:6px; }
.chargeur__barre{ display:block; height:100%; border-radius:3px; background:rgba(246,243,236,.22); overflow:hidden; }
.chargeur__barre i{ display:block; height:100%; background:var(--creme); transform-origin:0 50%; transform:scaleX(var(--p,0)); }
.chargeur__pct{ margin:0; color:var(--creme); font-variant-numeric:tabular-nums; letter-spacing:.2em; }

/* La jauge et le pourcentage apparaissent juste après l'astérisque */
.chargeur__jauge, .chargeur__pct{ animation:ch-monte 600ms var(--sortie) 250ms backwards; }
@keyframes ch-monte{ from{ opacity:0; translate:0 12px; } to{ opacity:1; translate:none; } }

/* À 100 % : la jauge s'efface, l'astérisque grandit jusqu'à remplir l'écran */
.chargeur.zoom .chargeur__jauge, .chargeur.zoom .chargeur__pct, .chargeur.zoom .chargeur__logo{ opacity:0; transition:opacity 220ms linear; }
/* Pendant le zoom, l'astérisque s'emballe : un tour et demi de plus, qui accélère avec le zoom
   (transform s'ajoute à la rotation continue, portée par la propriété rotate). */
.chargeur.zoom .chargeur__aster{ scale:90; transform:rotate(540deg);
  transition:scale 600ms cubic-bezier(.7,0,.84,0), transform 600ms cubic-bezier(.55,0,.75,0); }
/* Puis l'écran (désormais crème) s'efface sur l'affiche */
.chargeur.fin{ opacity:0; transition:opacity 380ms linear; }
.chargeur.zoom{ background:var(--bleu); }