/* Une seule famille (Helvetica), deux graisses. Couleurs ici. */
:root {
  --fond: #faf8f4;
  --encre: #111;
  --gris: #8a8780;
  --filet: #e3dfd7;
  --police: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --marge: clamp(16px, 3vw, 40px);
  --gouttiere: clamp(12px, 2vw, 24px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 14px/1.4 var(--police);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gris); }
img { display: block; max-width: 100%; }
h2, h3, p, dl, dd { margin: 0; font-size: inherit; font-weight: inherit; }
.hidden { display: none; }

/* Grille 12 colonnes */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  padding: 0 var(--marge);
}

/* En-tête */
.top {
  position: sticky; top: 0; z-index: 5;
  padding-top: 16px; padding-bottom: 16px;
  background: var(--fond);
}
.top .name { grid-column: 1 / 4; font-weight: 700; }
.top .role { grid-column: 4 / 7; color: var(--gris); }
.top nav { grid-column: 7 / 13; display: flex; gap: var(--gouttiere); justify-content: flex-end; }

/* Filmographie */
#filmographie { padding-top: clamp(48px, 10vw, 120px); align-items: start; }
.list { grid-column: 1 / 9; }
#assistanat { padding-top: 56px; }
.assist { grid-column: 1 / 13; }
.group + .group { margin-top: 56px; }
.group h2 {
  display: grid; grid-template-columns: 4em 1fr; column-gap: var(--gouttiere);
  padding-bottom: 8px; border-bottom: 1px solid var(--encre);
  font-weight: 700;
}
.group h2 span { color: var(--gris); font-weight: 400; }
.row {
  display: grid;
  grid-template-columns: 4em minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);
  column-gap: var(--gouttiere);
  padding: 7px 0;
  border-bottom: 1px solid var(--filet);
  cursor: pointer;
}
.row:hover, .row:focus-visible { outline: none; }
.row:hover .t, .row:focus-visible .t { text-decoration: underline; text-underline-offset: 3px; }
.row .y, .row .r, .row .p { color: var(--gris); }
.row .t { font-weight: 700; }
.row .k { font-weight: 400; color: var(--gris); }
.row .thumb { display: none; }

.preview {
  grid-column: 9 / 13; pointer-events: none;
  position: sticky; top: 72px;
  aspect-ratio: 4 / 5;
}
.preview img { width: 100%; height: 100%; object-fit: contain; object-position: left top; opacity: 0; transition: opacity .15s; }
.preview.on img { opacity: 1; }

/* Blocs Info / Contact */
.block { padding-top: clamp(80px, 12vw, 160px); row-gap: 24px; }
.block h2 { grid-column: 1 / 13; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--encre); }
.bio { grid-column: 1 / 7; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; }
.bio p + p { margin-top: 1em; }
.facts { grid-column: 8 / 13; }
.facts dt { color: var(--gris); }
.facts dt:not(:first-child) { margin-top: 16px; }
.facts dd.bloc + dd.bloc { margin-top: 8px; }
.facts dd.bloc span { display: block; color: var(--gris); }

.contact-text { grid-column: 1 / 7; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; }
.contact-text p + p { margin-top: 1em; }
.contact-text a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
form { grid-column: 8 / 13; display: grid; gap: 12px; }
label { display: grid; gap: 2px; color: var(--gris); }
input, select, textarea {
  font: inherit; color: var(--encre);
  background: transparent; border: 0; border-bottom: 1px solid var(--filet);
  padding: 6px 0; border-radius: 0; appearance: none;
}
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--encre); }
textarea { resize: vertical; }
button[type="submit"] {
  justify-self: start; margin-top: 8px;
  font: 700 14px var(--police); cursor: pointer;
  background: none; color: var(--encre); border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 4px;
}
button[type="submit"]:hover { color: var(--gris); }

.bottom { padding-top: 120px; padding-bottom: 24px; color: var(--gris); }
.bottom span:first-child { grid-column: 1 / 4; }
.bottom span:last-child { grid-column: 4 / 13; }

/* Version Sélection */
#selection { padding-top: clamp(48px, 10vw, 120px); }
.sel { grid-column: 1 / 13; }
.sel-h { display: grid; grid-template-columns: 4em 1fr; column-gap: var(--gouttiere); padding-bottom: 8px; border-bottom: 1px solid var(--encre); font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gouttiere); padding-top: 16px; }
.card { cursor: pointer; display: grid; gap: 2px; align-content: start; }
.card .frame { aspect-ratio: 16 / 9; background: var(--filet); overflow: hidden; margin-bottom: 8px; }
.card .frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.card:hover .frame img { opacity: .85; }
.card .t { font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); }
.card:hover .t, .card:focus-visible .t { text-decoration: underline; text-underline-offset: 3px; }
.card:focus-visible { outline: none; }
.card .r { color: var(--gris); }
.card .d { color: var(--encre); }
#selection + #filmographie { padding-top: 96px; }

/* Assistanat : affiches */
.poster-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px var(--gouttiere); padding-top: 16px;
}
.poster { cursor: pointer; display: grid; gap: 2px; align-content: start; }
.poster .frame { aspect-ratio: 2 / 3; background: var(--filet); margin-bottom: 6px; overflow: hidden; }
.poster .frame img { width: 100%; height: 100%; object-fit: cover; }
.poster .t { font-weight: 700; }
.poster .r { color: var(--gris); }
.poster:hover .t, .poster:focus-visible .t { text-decoration: underline; text-underline-offset: 3px; }
.poster:focus-visible { outline: none; }

/* Fenêtre film : quand un film est ouvert, la fiche remplace la page
   et défile comme une page normale (fiable sur téléphone, barres du navigateur comprises) */
.viewer {
  position: static; width: 100%; max-width: none; max-height: none; min-height: 100vh; margin: 0;
  border: 0; padding: 0; background: var(--fond); color: var(--encre);
}
.viewer:not([open]) { display: none; }
html.viewer-open body > :not(dialog) { display: none; }
.viewer .close {
  position: sticky; top: 12px; z-index: 2; display: block; margin: 12px var(--marge) 0 auto;
  padding: 4px 8px; transform: translateX(8px);
  font: 400 14px var(--police); background: var(--fond); border: 0; cursor: pointer; color: var(--encre);
}
.viewer .close:hover { color: var(--gris); }
.viewer-body { padding: 16px var(--marge) calc(64px + env(safe-area-inset-bottom)); }
.hero { width: 100%; max-height: calc(100vh - 120px); max-height: calc(100svh - 120px); object-fit: contain; object-position: left top; }
.viewer-body .cols {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere); row-gap: 24px; margin-top: 24px;
}
.main { grid-column: 1 / 8; }
.side { grid-column: 9 / 13; }
.viewer-body h3 { font-weight: 700; font-size: clamp(24px, 3vw, 40px); line-height: 1.05; }
.resume { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; margin-top: 16px; max-width: 32em; }
.poster-big { width: min(280px, 60%); margin-bottom: 24px; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; align-content: start; }
.details dt { color: var(--gris); }
.stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: 48px; }
/* 3 photogrammes sous le grand : une seule ligne de 3, jamais d'image seule en bas */
.stills.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.liens { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 4px; }
.liens a { text-decoration: underline; text-underline-offset: 3px; }
.ask { display: inline-block; margin-top: 24px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Tablette et téléphone */
@media (max-width: 900px) {
  .list { grid-column: 1 / 13; }
  .preview { display: none; }
  .row { grid-template-columns: 3.2em minmax(0, 1fr); row-gap: 2px; }
  .row .r, .row .p { grid-column: 2; }
  .row .thumb { display: block; grid-column: 2; margin: 6px 0 4px; aspect-ratio: 16 / 9; width: 100%; max-width: 320px; object-fit: cover; }
  .group h2 { grid-template-columns: 3.2em 1fr; }
  .bio, .facts, .contact-text, form { grid-column: 1 / 13; }
  .main, .side { grid-column: 1 / 13; }
  .stills, .stills.n3 { grid-template-columns: 1fr; margin-top: 24px; }
  .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
  .sel-h { grid-template-columns: 3.2em 1fr; }
}
@media (max-width: 560px) {
  .top .role { display: none; }
  .top .name { grid-column: 1 / 6; }
  .top nav { grid-column: 6 / 13; gap: 12px; }
  .bottom span:first-child { grid-column: 1 / 7; }
  .bottom span:last-child { grid-column: 7 / 13; text-align: right; }
}