/* ============================================================
   TALENTUM — Loader : structure et layout uniquement
   Les scales de chaque élément sont dans leurs fichiers dédiés.
   ============================================================ */

#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Composition externe : [*]  [( photo )]  [%] */
.loader__composition {
  display: flex;
  align-items: flex-start;   /* * s'aligne sur le haut du bloc */
  gap: clamp(1.6rem, 3.5vw, 3rem);
}

/* Bloc central : ( photo ) — photo top-alignée avec les parens */
.loader__block {
  display: flex;
  align-items: flex-start;   /* photo commence au même niveau que le haut de ( */
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* Portrait carré — height explicite = même clamp que width, double garantie anti-reflow */
.loader__portrait-wrap {
  aspect-ratio: 1 / 1;
  height: clamp(130px, 16vw, 195px);
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 20px;
}

.loader__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Step 10.1 — mode « retour » : le loader a déjà joué dans cet onglet.
   L'attribut est posé par le script inline du <head> avant le premier rendu. */
html[data-loader="skip"] #loader,
html[data-loader="skip"] #curtain {
  display: none;
}