/* Friends & Family × personnage animé. Page de test hors charte de production,
   comme ../friends-family.css dont elle reprend les variables (--bg, --ink, --accent, --cta, --mono…). */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-loading, html.is-loading body { overflow: hidden; }

/* Une seule famille de textes, celle du chargement : IBM Plex Mono pour tout le courant,
   Manrope 800 pour les grands titres (comme le pourcentage). DM Sans n'est plus chargée. */
body.perso-page { --sans: var(--mono); }
.perso-page .hero-lead { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.7; letter-spacing: 0; }

/* Le même logo partout : img/logo.svg, en image ou en masque teinté. */
.loader__mark {
  display: block; width: 132px; aspect-ratio: 1757 / 354; background: var(--bg);
  -webkit-mask: url(./img/logo.svg) left center / contain no-repeat; mask: url(./img/logo.svg) left center / contain no-repeat;
}

/* ——— Chargement ——————————————————————————————————————————————— */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink); color: var(--bg);
  overflow: hidden; pointer-events: none;
}
html:not(.is-loading) .loader { display: none; }
.loader p { margin: 0; }
.loader .label { font-size: 11px; line-height: 1.55; }
.loader__corner { position: absolute; left: clamp(18px, 4vw, 64px); top: 24px; }
.loader__a { position: absolute; left: 26%; top: 24px; }
.loader__b { position: absolute; left: 26%; top: 38%; }
.loader__c { position: absolute; left: 52%; top: 24px; }
.loader__d { position: absolute; right: clamp(18px, 4vw, 64px); top: 24px; text-align: right; }
.loader__pct {
  position: absolute; left: clamp(18px, 4vw, 64px); bottom: 34px;
  font: 800 clamp(96px, 16vw, 260px)/.8 var(--display); letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
}
.loader__ff { position: absolute; right: clamp(18px, 4vw, 64px); bottom: 40px; }
.loader__logo {
  position: fixed; z-index: 5; left: 50%; top: 50%;
  width: min(86vw, 1320px); aspect-ratio: 1757 / 354; transform: translate(-50%, -50%);
  background: var(--bg);
  -webkit-mask: url(./img/logo.svg) center / contain no-repeat; mask: url(./img/logo.svg) center / contain no-repeat;
  opacity: 0; will-change: transform, opacity;
}
.loader__line { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.loader__flood { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 100%; transform: scaleY(0); }
.loader__cream { position: absolute; inset: 0; background: var(--bg); transform-origin: 50% 100%; transform: scaleY(0); }
/* La phrase tapée à la machine sous le logo, sur l'écran pervenche : chaque lettre naît dans un carré de couleur. */
.loader__tagline {
  position: absolute; left: 50%; top: calc(50% + min(86vw, 1320px) * .1007 + clamp(22px, 3.2vw, 44px)); /* sous le logo en taille pleine */
  transform: translateX(-50%); width: min(92vw, 1100px); text-align: center;
  font: 500 clamp(13px, 1.45vw, 21px)/1.6 var(--mono); letter-spacing: .02em; color: var(--ink);
}
.loader__tagline .tw { display: inline-block; white-space: nowrap; }
.loader__tagline .tc { display: inline-block; white-space: pre; padding: 0 .04em; opacity: 0; }
.loader__tagline .caret { display: inline-block; width: .6em; height: 1.15em; margin-left: .08em; vertical-align: -.2em; background: var(--ink); }
.rl { will-change: filter, opacity, transform; }

/* ——— Hero ——————————————————————————————————————————————————— */
.perso-page .hero h1 .ln { overflow: hidden; }
.perso-page .hero h1 .ln > .w { display: inline-block; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; background: none; padding: 0; margin: 0; will-change: transform; }
.perso-page .hero h1 .change { column-gap: 0; }
.perso-page .hero h1 .change .w + .w { margin-left: .2em; }

/* ——— La scène du personnage ——————————————————————————————————— */
.fiche { position: relative; background: var(--bg); color: var(--ink); border-top: 0 !important; }
.perso-page .hero { padding-bottom: 24px; }
.fiche__stage { position: relative; z-index: 3; height: 100vh; height: 100svh; overflow: hidden; }
.figure-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 2; pointer-events: none; display: block; }
.hero h1 { position: relative; z-index: 3; }

/* les textes longs autour du personnage */
.fiche__column {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; gap: clamp(18px, 3.2vh, 34px);
  padding: 0 clamp(18px, 4vw, 64px);
  pointer-events: none; will-change: transform;
}
.fl {
  margin: 0; max-width: min(30vw, 440px);
  font: 500 clamp(14px, 1.08vw, 17px)/1.5 var(--mono);
  letter-spacing: 0; color: var(--ink);
  will-change: filter, opacity;
}
.fl[data-side="l"] { align-self: flex-start; text-align: left; }
.fl[data-side="r"] { align-self: flex-end; text-align: right; }
.fl--label { font: 500 11px/1.5 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--muted-declic); }
.fl--big { max-width: min(38vw, 600px); font: 800 clamp(34px, 3.8vw, 62px)/.98 var(--display); letter-spacing: -.075em; }
.fl--big span { background: var(--accent); color: var(--ink); padding: 0 .1em .05em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* HUD : micro-typo en mono, comme un scanner qui lit la personne */
.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; font: 500 10px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-declic); }
.hud p { margin: 0; }
.hud b { font-weight: 600; color: var(--ink); }
.hud__map { position: absolute; left: clamp(18px, 4vw, 64px); top: 22px; width: 220px; }
.hud__mapbox {
  position: relative; height: 112px; display: grid; place-items: center;
  border: 1px solid var(--outline);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1.4px);
  background-size: 6px 6px;
}
.hud__mapbox img { height: 74px; width: auto; filter: brightness(.14); will-change: transform; }
.hud__xy { display: flex; justify-content: space-between; margin-top: 6px; }
.hud__xy span { padding: 1px 6px; background: var(--ink); color: var(--bg); }
.hud__xy b { color: var(--bg); font-variant-numeric: tabular-nums; }
.hud__map > p { margin-top: 10px; }
.hud__listen { position: absolute; right: clamp(18px, 4vw, 64px); top: 22px; width: 250px; }
.hud__listen-head, .hud__listen-total { display: flex; justify-content: space-between; }
.hud__listen-head { padding: 3px 8px; background: var(--accent); color: var(--ink); }
.hud__listen ol { list-style: none; margin: 8px 0 6px; padding: 0; }
.hud__listen li { display: flex; justify-content: space-between; padding: 2px 0; opacity: .32; transition: opacity .4s, color .4s; }
.hud__listen li.on { opacity: 1; color: var(--ink); }
.hud__listen li.on b { padding: 0 4px; color: var(--ink); }
.hud__listen li.now { font-weight: 600; }
.hud__listen li.now b { background: var(--cta); }
/* les titres d'étape dans le défilé : repérables d'un coup d'œil */
.fl--label[data-step] { padding: 3px 8px; background: var(--ink); color: var(--bg); }
.hud__foot { position: absolute; left: clamp(18px, 4vw, 64px); bottom: 22px; width: 220px; }
.hud__bar { height: 2px; margin: 8px 0 5px; background: var(--outline); }
.hud__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.hud__ends { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.hud__right { position: absolute; right: clamp(18px, 4vw, 64px); bottom: 22px; text-align: right; }
.hud__right b { font-variant-numeric: tabular-nums; }

/* reveal des sections Friends & Family qui suivent */
.rv { will-change: transform, opacity; }

@media (max-width: 900px) {
  .hud__listen { display: none; }
  .hud__map { width: 150px; }
  .hud__mapbox { height: 76px; }
  .hud__mapbox img { height: 52px; }
  /* lecture mobile : texte net, plein contraste, posé sur une plaque crème opaque */
  .fl, .fl--big { max-width: 86vw; }
  .fl { font-size: 15px; line-height: 1.55; font-weight: 500; filter: none !important; }
  .fl:not(.fl--big):not(.fl--label) { padding: 8px 11px; background: var(--bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
  .fl--label { padding: 4px 8px; background: var(--bg); color: var(--ink); }
  .fl--big { font-size: clamp(30px, 8.6vw, 40px); }
  .fl--label[data-step] { font-size: 11px; background: var(--ink); color: var(--bg); }
  .loader__a, .loader__c { display: none; }
  .loader__b { left: clamp(18px, 4vw, 64px); top: 34%; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-loading, html.is-loading body { overflow: auto; }
  .loader { display: none; }
  .fiche__stage { height: auto; min-height: 100vh; padding: 360px 0 140px; }
  .fiche__column { position: relative; }
  .fl:not(.fl--big):not(.fl--label) { background: color-mix(in srgb, var(--bg) 80%, transparent); }
}