/* Romain Thouin — page d'attente
   ------------------------------------------------------------------ */

/* Neue Haas Grotesk (Christian Schwartz d'après Max Miedinger, Linotype/Monotype).
   Display pour les grands corps, Text pour les petits (< ~20 px) : c'est le
   découpage optique prévu par la famille.
   local() d'abord (police installée chez le visiteur), puis fichiers WOFF2
   à déposer dans assets/fonts/ sous ces noms (noms PostScript). */
@font-face {
  font-family: "NHG Display";
  src: local("NHaasGroteskDSPro-65Md"), local("NeueHaasDisplay-Mediu"), local("Neue Haas Grotesk Display Pro 65 Medium"),
       url("fonts/NHaasGroteskDSPro-65Md.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NHG Display";
  src: local("NHaasGroteskDSPro-55Rg"), local("NeueHaasDisplay-Roman"), local("Neue Haas Grotesk Display Pro 55 Roman"),
       url("fonts/NHaasGroteskDSPro-55Rg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NHG Text";
  src: local("NHaasGroteskTXPro-55Rg"), local("Neue Haas Grotesk Text Pro 55 Roman"),
       url("fonts/NHaasGroteskTXPro-55Rg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f4f4;
  --ink: #0b0b0b;
  --gap: 8px;                       /* marge entre images */
  --strip-h: min(74svh, 900px);     /* hauteur de la bande d'images (mode défilé) */
  --cadre-h: min(calc((100svh - 4 * var(--pad)) / 1.3), 820px); /* hauteur du cadre (mode cadre), place laissée au nom et aux sous-titres */
  --pad: clamp(16px, 2.6vw, 40px);  /* marge de page */
  /* Repli : Helvetica Neue est la descendante directe, métriques très proches. */
  --font-display: "NHG Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "NHG Text", "NHG Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                 /* page unique, pas de défilement vertical */
  height: 100svh;
}

/* ---- Bande défilante ------------------------------------------- */

.defile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.defile__track {
  display: flex;
  gap: var(--gap);
  height: var(--strip-h);
  will-change: transform;
}

.slide {
  position: relative;
  flex: none;
  height: 100%;
  margin: 0;
}

.slide__frame {
  display: block;
  height: 100%;
}

.slide img {
  display: block;
  height: 100%;
  width: auto;                      /* largeur déduite des attributs width/height → pas de saut de mise en page */
  background: #e6e6e6;
  -webkit-user-drag: none;
  transition: opacity .45s ease, filter .45s ease;
}

/* Arrêt : l'image survolée/touchée reste pleine, les autres s'effacent */
.defile.has-active .slide:not(.is-active) img { opacity: .28; }

/* ---- Mode cadre : une image à la fois, coupe franche (type gif) -- */
/* Colonne centrée : nom au-dessus du cadre, sous-titres dessous,
   tout aligné sur la largeur du cadre. Texte noir sur fond, sans inversion. */

.cadre {
  --cadre-ratio: 4 / 5;            /* format du cadre ; 1 / 1 pour un carré */
  --cadre-fit: cover;              /* cover = remplit et recadre ; contain = image entière */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}

.cadre__stack {
  container-type: inline-size;     /* le nom se dimensionne sur la largeur du cadre */
  width: min(calc(var(--cadre-h) * (var(--cadre-ratio))), calc(100vw - 2 * var(--pad)));
}

.cadre__name {
  margin: 0 0 .1em -.05em;         /* -0.05em : alignement optique du R sur le bord du cadre */
  font-family: var(--font-display);
  font-weight: 400;              /* 55 Roman (65 Medium jugé trop gras) */
  font-size: 16.2cqi;              /* valeur de départ ; cadre.js ajuste ensuite au pixel sur la largeur du cadre */
  line-height: .9;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.cadre__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cadre-ratio);
}

.cadre__role {
  display: flex;                   /* une ligne : gauche / droite, calée sur les bords du cadre */
  justify-content: space-between;
  gap: 1em;
  margin: .45em 0 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 4.6cqi, 30px);
  line-height: 1.05;
  letter-spacing: -.015em;
}

.cadre__item {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;              /* pas de transition : la coupe est sèche */
}
.cadre__item.is-current { visibility: visible; }

.cadre__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--cadre-fit);
  -webkit-user-drag: none;
}

/* ---- Signature -------------------------------------------------- */

.signature {
  position: fixed;
  left: var(--pad);
  bottom: calc((100svh - var(--strip-h)) / 2 + var(--pad));
  z-index: 2;
  margin: 0;
  color: #fff;
  mix-blend-mode: difference;       /* lisible sur le fond clair comme sur les images */
  pointer-events: none;             /* le survol traverse le texte jusqu'aux images */
}

.signature h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: .92;
}

.signature__name {
  display: block;
  font-size: clamp(56px, 11vw, 200px);
  line-height: .86;
  letter-spacing: -.045em;
  margin-left: -.04em;              /* compense l'approche du R pour aligner optiquement */
}

.signature__role {
  display: block;
  margin-top: .6em;
  font-weight: 400;
  font-size: clamp(17px, 2.3vw, 38px);
  line-height: 1.05;
  letter-spacing: -.015em;
}

/* ---- Contact ---------------------------------------------------- */

.contact {
  position: fixed;
  left: var(--pad);
  right: var(--pad);
  top: var(--pad);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: .01em;
}

.contact a {
  color: var(--ink);
  text-decoration: none;
}
.contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Mobile ----------------------------------------------------- */

@media (max-width: 700px), (orientation: portrait) {
  :root { --strip-h: 62svh; --gap: 6px; --cadre-h: min(calc((100svh - 4 * var(--pad)) / 1.3), (100vw - 2 * var(--pad)) * 1.25); }
  .signature { bottom: calc((100svh - var(--strip-h)) / 2 + var(--pad) * .5); }
  .signature__name { font-size: 21vw; letter-spacing: -.05em; }
  .signature__role { font-size: 5.2vw; margin-top: .6em; }
}

/* ---- Sans animation (préférence système ou sans JS) ------------ */

.defile.is-static {
  overflow-x: auto;
  touch-action: auto;
  scrollbar-width: none;
}
.defile.is-static .defile__track { padding-inline: var(--pad); }
.defile.is-static::-webkit-scrollbar { display: none; }