/* ============================================================
   NINTAI — Page Réalisateur (Director.html)
   Charte du site conservée : mêmes tokens (--bg/--fg/--display/--mono…),
   aucune couleur ni police inventée. Seule la MISE EN PAGE est nouvelle :
   le texte du PDF au centre, les visuels qui défilent en continu autour.
   ============================================================ */

/* ---------- Fil d'ariane / retour ---------- */
.dir-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); text-decoration: none;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.dir-back:hover { color: var(--accent); gap: 14px; }
.dir-back .ar { transition: transform 0.3s var(--ease); }
.dir-back:hover .ar { transform: translateX(-3px); }

/* ---------- Hero ---------- */
.dir-hero {
  /* même décalage que .wk-intro pour passer sous la nav fixe */
  /* ⚠️ padding-BLOCK uniquement : la propriété raccourcie `padding` écrasait le
     `padding-inline: var(--gutter)` de .wrap → le texte se retrouvait collé au
     bord en fenêtre étroite / mobile. Même piège lignes ~60 et ~169. */
  padding-block: clamp(94px, 11vh, 124px) clamp(18px, 3vw, 34px);
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 26px);
}
.dir-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dir-index {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}
.dir-titleblock { display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; }
.dir-portrait {
  flex: 0 0 auto; width: clamp(78px, 9vw, 116px); aspect-ratio: 1;
  border-radius: 999px; overflow: hidden; border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.dir-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-name {
  margin: 0;
  font-family: var(--display); font-weight: var(--d-weight);
  font-size: clamp(2.6rem, 8vw, 6.2rem);
  line-height: 0.94; letter-spacing: var(--d-track); color: var(--fg);
}
.dir-role {
  margin: 10px 0 0;
  font-family: var(--mono); font-size: clamp(0.68rem, 1.1vw, 0.78rem); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.dir-rule { height: 1px; background: var(--line); width: 100%; }

/* ============================================================
   SCÈNE — rail gauche | texte | rail droit
   ============================================================ */
.dir-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr) minmax(0, 0.82fr);
  /* respiration entre le texte et les rails d'images */
  gap: clamp(30px, 5vw, 96px);
  align-items: start;
  padding-block: clamp(24px, 4vw, 52px) clamp(40px, 6vw, 86px);
}

/* ---------- Colonne texte ---------- */
.dir-text { padding-top: clamp(10px, 3vw, 46px); }
.dir-lead {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 clamp(16px, 2vw, 24px);
}
.dir-body p {
  margin: 0 0 1.2em;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(0.9rem, 1.08vw, 1rem);
  line-height: 1.7; color: var(--muted);
  text-wrap: pretty;
}
/* 1er paragraphe mis en avant + le NOM en tête détaché */
.dir-body p:first-child {
  font-size: clamp(0.98rem, 1.24vw, 1.12rem);
  line-height: 1.6; color: var(--fg);
}
.dir-body p:last-child { margin-bottom: 0; }
.dir-body b, .dir-body strong {
  font-weight: 600; color: var(--fg);
  letter-spacing: 0.01em;
}

/* liens sociaux repris de la fiche talent */
.dir-links {
  display: flex; gap: 10px; margin-top: clamp(24px, 3vw, 36px);
  flex-wrap: wrap; justify-content: center;   /* icônes centrées sous le texte */
}
.dir-links a svg { flex: 0 0 auto; display: block; }
.dir-links a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; background: transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.dir-links a:hover { color: var(--accent); border-color: var(--accent); background: oklch(0.62 0.13 65 / 0.07); }

/* ============================================================
   RAILS — défilement automatique, infini, sens opposés
   Un rail = piste dupliquée 2× puis translatée de -50% → boucle sans couture.
   ============================================================ */
.dir-rail {
  position: relative; overflow: hidden;
  height: clamp(520px, 76vh, 880px);
  /* fondu haut/bas pour que ça sorte proprement du cadre */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.dir-rail-track {
  display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px);
  /* ⚠️ PAS de `will-change: transform` ici : la piste fait ~1700px de haut,
     et promouvoir toute la couche empêchait le compositeur de rastériser
     les tuiles hors-champ → visuels blancs pendant le défilement.
     L'animation de transform est déjà accélérée sans ça. */
  animation: dir-scroll-up var(--dur, 46s) linear infinite;
}
.dir-rail.is-down .dir-rail-track { animation-name: dir-scroll-down; }

@keyframes dir-scroll-up   { from { transform: translateY(0);     } to { transform: translateY(-50%); } }
@keyframes dir-scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0);     } }

/* on met en pause quand on survole : on peut regarder un visuel */
.dir-rail:hover .dir-rail-track { animation-play-state: paused; }

.dir-media {
  margin: 0; position: relative; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg-2);
  aspect-ratio: 16 / 10;      /* même ratio que les tiles Works */
}
.dir-media img,
.dir-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.dir-media[data-fit="contain"] img,
.dir-media[data-fit="contain"] video { object-fit: contain; background: var(--bg-3); }
.dir-rail:hover .dir-media img { filter: saturate(1.04); }
.dir-media:hover img,
.dir-media:hover video { transform: scale(1.035); }
/* légende discrète, apparaît au survol */
.dir-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 12px 9px;
  font-family: var(--mono); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: oklch(0.98 0.004 85);
  background: linear-gradient(180deg, transparent, oklch(0.15 0.02 264 / 0.82));
  opacity: 0; transition: opacity 0.35s var(--ease);
  pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dir-media:hover figcaption { opacity: 1; }

/* Le rail du milieu (mobile) et les variantes de vitesse */
.dir-rail--a { --dur: 52s; }
.dir-rail--b { --dur: 64s; }

/* ---------- Pied de page réalisateur ---------- */
.dir-foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(28px, 4vw, 46px) clamp(46px, 6vw, 78px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.dir-foot-nav { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   RESPONSIVE — sous 1000px les rails passent à l'horizontale,
   un au-dessus du texte, un en dessous (le texte reste « entouré »).
   ============================================================ */
@media (max-width: 1000px) {
  .dir-stage {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 34px);
  }
  /* Les rails restent en PLEINE LARGEUR (on annule la gouttière .wrap) :
     le marquee est décoratif, le débord fait partie de l'effet — et ça met
     d'autant mieux en valeur le texte, lui bien au chaud dans sa marge. */
  .dir-rail { margin-inline: calc(var(--gutter) * -1); }
  .dir-rail {
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .dir-rail-track {
    flex-direction: row;
    animation-name: dir-scroll-left;
  }
  .dir-rail.is-down .dir-rail-track { animation-name: dir-scroll-right; }
  .dir-media { flex: 0 0 clamp(190px, 46vw, 280px); }

  @keyframes dir-scroll-left  { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
  @keyframes dir-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0);     } }

  /* ordre : rail A → texte → rail B */
  .dir-rail-a { order: 1; }
  .dir-text   { order: 2; padding-top: 4px; }
  .dir-rail-b { order: 3; }
}

/* Écrans étroits (téléphone, ou fenêtre en demi-écran) : la gouttière standard
   du site (20px) est un peu juste pour une page aussi textuelle → on l'élargit
   un peu, uniquement sur cette page.
   Posé sur .dir-page (le main) : les variables CSS s'héritent, donc tous les
   .wrap de la page en profitent, y compris celui du pied de page. Scopé à cette
   page uniquement — director.css est aussi chargé par Talents.html (bouton
   « +more »), qui doit garder la gouttière standard du site. */
@media (max-width: 620px) {
  .dir-page { --gutter: 26px; }
}

/* Accessibilité : on respecte « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  .dir-rail-track { animation: none !important; }
  .dir-rail {
    overflow-x: auto; overflow-y: hidden;
    -webkit-mask-image: none; mask-image: none;
  }
  .dir-media img { transition: none; }
}

/* ============================================================
   Bouton « +more » sur la page Talents
   ============================================================ */
.tal-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  min-height: 32px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; background: transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              background 0.3s var(--ease), gap 0.3s var(--ease);
}
.tal-more:hover {
  color: var(--mc, var(--accent)); border-color: var(--mc, var(--accent));
  background: color-mix(in oklch, var(--mc, var(--accent)) 8%, transparent);
  gap: 11px;
}
.tal-more .pl { font-size: 0.85em; line-height: 1; }

/* ---------- Portrait + nom cliquables vers la page Réalisateur ----------
   Même destination que « +more ». Uniquement sur les cartes .has-page :
   les talents sans page dédiée gardent un nom non cliquable. */
.tal-av-link {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* le cadre réagit au survol de TOUTE la carte, pour montrer que c'est cliquable */
.tal-card.has-page .tal-avatar::after {
  transition: border-color 0.35s var(--ease), inset 0.35s var(--ease);
}
.tal-card.has-page:hover .tal-avatar::after {
  border-color: var(--mc, var(--accent));
  inset: -8px;
}
.tal-av-link image-slot { transition: transform 0.5s var(--ease); }
.tal-card.has-page:hover .tal-av-link image-slot { transform: scale(1.04); }

.tal-name-link {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--mc, var(--accent)), var(--mc, var(--accent)));
  background-repeat: no-repeat;
  background-size: 0% 1px;              /* soulignement qui se déploie au survol */
  background-position: 0 92%;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.tal-card.has-page:hover .tal-name-link { background-size: 100% 1px; }
.tal-name-link:hover { color: var(--mc, var(--accent)); }
.tal-name-link:focus-visible {
  outline: 2px solid var(--mc, var(--accent));
  outline-offset: 3px; border-radius: 3px;
}