/* ============================================================================
 *  DESIGN 4 — style.css  « L'Affiche »
 * ============================================================================
 *  FR : Tout repose sur la typographie. Nom gigantesque, listes sobres, un
 *       aperçu image qui suit la souris. Palette quasi noir & blanc : la
 *       retenue est le propos. C'est le design le plus audacieux par sa nudité.
 *  EN : Everything rests on typography. Giant name, quiet lists, a cursor-
 *       following image preview. Near black & white palette: restraint is the
 *       point. The boldest design precisely because it's so bare.
 * ========================================================================== */

:root {
  --ink:    #0e0e0e;
  --paper:  #f4f4f1;   /* FR: blanc cassé, chaud EN: warm off-white */
  --muted:  #8a8a85;
  --line:   #dadad5;
  --accent: #0e0e0e;   /* FR: l'accent EST l'encre — radical EN: accent IS the ink — radical */
  --max:    1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: "Times New Roman", Georgia, serif; /* FR: serif = caractère éditorial EN: serif = editorial character */
  line-height: 1.4; -webkit-font-smoothing: antialiased;
  cursor: default;
}

/* ----- BOUTON LANGUE / LANGUAGE BUTTON ----------------------------------- */
.lang-btn {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 20;
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  padding: 0.35rem 0.75rem; cursor: pointer; font-family: inherit;
  font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.15s;
}
.lang-btn:hover { background: var(--ink); color: var(--paper); }
.lang-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ----- AFFICHE / POSTER --------------------------------------------------- */
.poster {
  max-width: var(--max); margin: 0 auto; padding: 14vh 1.5rem 8vh;
}
.poster-name {
  /* FR : énorme, serré, à la limite du cadre. EN : enormous, tight, near the edge. */
  font-size: clamp(3rem, 13vw, 9rem); font-weight: 400; line-height: 0.92;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.poster-role {
  font-size: clamp(1rem, 2.2vw, 1.4rem); margin-top: 1.5rem;
  font-style: italic; color: var(--muted); max-width: 40ch;
}

/* ----- INDEX -------------------------------------------------------------- */
.index { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem 6rem; }
.index-group { border-top: 1px solid var(--ink); padding: 2rem 0; }
.index-cat {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 400; color: var(--muted); margin-bottom: 1rem; font-family: -apple-system, sans-serif;
}
.index-list { list-style: none; }
.index-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: padding-left 0.25s ease, color 0.2s;
}
.index-row:hover { padding-left: 1.2rem; color: var(--accent); }
.index-title {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 400; letter-spacing: -0.01em;
}
.index-caption {
  font-size: 0.85rem; color: var(--muted); text-align: right; max-width: 30ch;
  font-family: -apple-system, sans-serif;
}

/* ----- APERÇU QUI SUIT LA SOURIS / CURSOR-FOLLOWING PREVIEW -------------- */
.preview {
  position: fixed; top: 0; left: 0; z-index: 5; pointer-events: none;
  width: 260px; opacity: 0; transition: opacity 0.2s;
  /* FR : 'transform' est piloté par JS pour suivre la souris.
     EN : 'transform' is driven by JS to follow the cursor. */
}
.preview--on { opacity: 1; }
.preview img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25); background: var(--line);
}

/* ----- PIED DE PAGE / FOOTER ---------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--ink); padding: 2.5rem 1.5rem; text-align: center;
  color: var(--muted); font-size: 0.85rem; font-family: -apple-system, sans-serif;
}

/* FR : sur écran tactile, l'aperçu flottant n'a pas de sens : on le masque.
   EN : on touch screens the floating preview makes no sense: hide it. */
@media (hover: none) {
  .preview { display: none; }
  .index-row:hover { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}