/* ============================================================
   Ecran de chargement — depouille
   16/09
   ------------------------------------------------------------
   Chargee apres editorial.css, qui porte la version d'origine, et
   apres logo.css, dont une regle plus specifique visait deja les
   images du chargeur. Le JS est inchange : js/loader.js ne fait
   que poser .is-loading puis .is-ready.

   DEUX PASSES, ET LA SECONDE ANNULE UNE ERREUR DE LA PREMIERE.

   Passe 1, le raccord. Le chargeur d'origine etait centre, avec un
   objet orbital D/H en 3D, des halos radiaux et un vieux fichier
   de logo. Rien ne le reliait au hero, qui est aligne a gauche et
   photographique. J'ai donc aligne, repris le kicker du hero, pose
   le verrou complet et garde la barre d'etat.

   Passe 2, le depouillement. Resultat de la passe 1 : un ecran de
   1.3 seconde portant le kicker, le verrou, « Paris · France ·
   International », un filet et « Chargement ». Quatre blocs,
   trois familles de couleur. Alexis : « trop chelou et ca manque
   de sobriete, avec toutes ces infos et variations de couleurs ».
   Il avait raison, et l'erreur est identifiable : j'ai AJOUTE du
   raccord au lieu d'en RETIRER. Raccorder, ici, c'etait enlever.

   Ce qui reste : le verrou, sur la gouttiere du hero, et un filet
   laiton sous lui. Le kicker, la mention des territoires et le mot
   « Chargement » sont supprimes — la page les dit deux secondes
   plus tard, mieux et a leur place.

   Pour tout annuler : retirer le <link> des six pages, supprimer ce
   fichier, reprendre le balisage dans archive/avant-chargeur-20260916/
   ============================================================ */

/* --- Le fond ----------------------------------------------------------
   Les deux halos radiaux centres cedent la place au degrade directionnel
   du hero : sombre a gauche ou vit la marque, un souffle plus clair a
   droite. Meme geometrie de lumiere, donc pas de rupture a la bascule. */
.is-loading .site-loader{
  display: grid;
  place-items: center start;
  padding: 0;
  background:
    linear-gradient(100deg,
      var(--ink-950) 0%,
      rgba(8, 9, 10, 0.97) 40%,
      rgba(18, 17, 15, 0.95) 74%,
      rgba(24, 22, 18, 0.94) 100%),
    var(--ink-950);
}

.loader-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  inline-size: 100%;
}


/* --- Le verrou --------------------------------------------------------
   Une seule taille commande les trois pieces, et les coefficients sont
   les rapports MESURES sur la barre de navigation, ou le verrou est deja
   regle : rosette 29px, DANIGO 15, HOSPITALITY 9, ecart 4. Soit 0.52,
   0.31 et 0.14 de la rosette.

   Premiere version : un clamp independant par piece. Mesure au
   comparateur, rosette 26px contre un bloc de mots de 59px, rapport 0.44
   la ou l'en-tete est a 1.00 : la rosette paraissait perdue. Une taille
   unique rend ce defaut impossible a reproduire.

   SELECTEURS A DEUX CLASSES, volontairement : logo.css porte
   « .loader-name img », qui vaut une classe et un element. A specificite
   comparee, deux classes l'emportent. Avec un simple .loader-marque, la
   regle de logo.css gagnait et ecrasait la taille. */
.loader-name{
  --verrou-h: clamp(3.2rem, 6.5vw, 5.2rem);
  display: inline-flex;
  align-items: center;
  gap: clamp(0.55rem, 1.3vw, 0.95rem);
  margin: 0;
  line-height: 0;
  animation: loaderRise 0.9s 0.1s both var(--ease-cinema);
}

.loader-name .loader-marque{
  display: block;
  block-size: var(--verrou-h);
  inline-size: auto;
  margin-inline: 0;
}

.loader-lockup{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--verrou-h) * 0.14);
  line-height: 0;
}

.loader-name .loader-mot{
  display: block;
  block-size: calc(var(--verrou-h) * 0.52);
  inline-size: auto;
  margin-inline: 0;
}

/* Meme proportion assumee qu'a l'en-tete : le verrou d'origine met
   HOSPITALITY a 59 % de la largeur de DANIGO, illisible en petit corps.
   Ce coefficient le porte autour de 80 %. */
.loader-name .loader-baseline{
  display: block;
  block-size: calc(var(--verrou-h) * 0.31);
  inline-size: auto;
  margin-inline: 0;
}


/* --- Le filet ---------------------------------------------------------
   Seul mouvement de l'ecran, et seul accent de couleur en dehors du
   verrou lui-meme. Il n'est pas pleine largeur : il s'arrete court sous
   la marque, pour rester un trait et non une barre de progression.

   L'animation loaderRule vit dans editorial.css, on la reutilise telle
   quelle. */
.loader-rule{
  inline-size: clamp(5rem, 12vw, 9rem);
  block-size: 1px;
  margin-block-start: clamp(1.75rem, 4vh, 2.75rem);
  background: var(--line-dark);
  overflow: hidden;
}

.loader-rule i{
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background: var(--brass-400);
  transform-origin: left;
  animation: loaderRule 2s both var(--ease-cinema);
}


/* --- Retrait du voile -------------------------------------------------
   Fondu, plus une montee d'un demi-rem : l'oeil lit une continuite de
   mouvement avec le hero, qui arrive lui aussi par le bas. */
.is-ready .site-loader{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.8s var(--ease-cinema),
    transform 0.8s var(--ease-cinema),
    visibility 0.8s;
}

@media (prefers-reduced-motion: reduce){
  .loader-name{ animation: none; }
  .loader-rule i{ animation: none; }
  .is-ready .site-loader{ transform: none; }
}