/* ILS — feuille de style
   Une seule fonte (Times, Tinos en secours), deux tailles, aucun cadre.
   Les images sont dithérées en 1 bit et passent en couleur au survol. */

@font-face { font-family: Tinos; src: url(fonts/tinos-latin-400-normal.woff2) format("woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: Tinos; src: url(fonts/tinos-latin-400-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }

:root {
  --bg: #000;
  --fg: #ededed;
  --dim: #8a8a8a;
  --line: #333;
  --serif: "Times New Roman", Tinos, Times, serif;
  /* quatre rôles : méta / texte / titre / affiche */
  --t0: 13px;                                   /* méta : en-têtes de tableau, numéros, effectifs */
  --t1: 16px;                                   /* texte courant */
  --t2: clamp(20px, 1.75vw, 26px);              /* titres de projet, présentation */
  --t3: clamp(30px, 3.4vw, 52px);               /* affiche : mail, projet suivant */
  --g: clamp(16px, 2vw, 28px);                  /* gouttière et marges latérales */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}
@property --k { syntax: '<number>'; inherits: true; initial-value: 0; } /* déclarée pour pouvoir l'animer */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scrollbar-color: #3a3a37 var(--bg); scrollbar-width: thin; }
body { color: var(--fg); background: var(--bg); font: var(--t1)/1.45 var(--serif); letter-spacing: 0.005em; font-variant-numeric: oldstyle-nums; -webkit-font-smoothing: antialiased; }
::selection { background: var(--fg); color: var(--bg); }
img, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2 { font-weight: 400; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent); transition: text-decoration-color 160ms ease; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--fg); } }

.wrap { padding-left: var(--g); padding-right: var(--g); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.dim { color: var(--dim); }

/* ---------- en-tête : une ligne de texte ---------- */
.site { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: baseline; padding-top: 18px; padding-bottom: 18px; }
.logo { grid-column: 1 / span 2; text-decoration: none; letter-spacing: 0.04em; }
.tag { grid-column: 3 / span 6; }
.nav { grid-column: 9 / span 4; justify-self: end; display: flex; gap: 1.1em; }
.lang { color: var(--dim); }
.lang button { color: var(--dim); }
/* zone cliquable d'au moins 24 px de haut (WCAG 2.5.8) sans déplacer le texte */
.lang button, #rp { padding: 4px 3px; margin: -4px -3px; }

/* texte réservé aux lecteurs d'écran ; lien d'évitement visible seulement au focus clavier */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--g); top: 8px; z-index: 10; padding: 4px 8px; background: var(--fg); color: var(--bg); text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline-offset: 2px; }
#root:focus { outline: 0; }
.lang button[aria-pressed="true"] { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .lang button:hover { color: var(--fg); } }

/* ---------- médias dithérés ---------- */
.th { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.th canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .work:hover .th canvas { transform: scale(1.02); } }

/* ---------- showreel ---------- */
.reel { padding-bottom: clamp(56px, 8vw, 120px); }
.reel a.th { display: block; aspect-ratio: auto; height: min(calc(100svh - 96px), 56.25vw); cursor: pointer; }
/* libellé « Son / Couper » : suit la souris au survol, posé en bas à gauche sur écran tactile */
.reel a.th { position: relative; overflow: hidden; }
.reel .cur { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; font-size: var(--t0); line-height: 1; padding: 3px 5px 4px; background: var(--bg); color: var(--fg); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .reel a.th { cursor: none; }
  .reel .cur { opacity: 0; transition: opacity 120ms ease; }
  .reel a.th:hover .cur { opacity: 1; }
}
@media not ((hover: hover) and (pointer: fine)) {
  .reel .cur { top: auto; bottom: 8px; left: 8px; }
}
/* barre de lecture : un filet, la partie lue en blanc ; zone cliquable plus haute que le trait */
.seek { position: relative; height: 15px; cursor: pointer; touch-action: none; }
.seek::before, .seek span { content: ''; position: absolute; left: 0; top: 7px; height: 1px; }
.seek::before { right: 0; background: var(--line); }
.seek span { width: 0; background: var(--fg); transition: height 120ms var(--ease), top 120ms var(--ease); }
.seek:hover span, .seek.drag span, .seek:focus-visible span { top: 6px; height: 3px; }
.seek:focus-visible { outline-offset: 0; }
/* au doigt : zone de toucher de 31 px qui déborde sur le bas de la vidéo, le trait reste à sa place */
@media not ((hover: hover) and (pointer: fine)) {
  .seek { height: 31px; margin: -12px 0 -4px; z-index: 1; }
  .seek::before, .seek span { top: 19px; }
  .seek:hover span, .seek.drag span, .seek:focus-visible span { top: 18px; }
}
.reel .line { display: flex; justify-content: space-between; padding-top: 1px; font-size: var(--t0); }
.tc { color: var(--dim); font-variant-numeric: tabular-nums; margin-left: 0.75em; }
.bar h2 .yrs { font-size: var(--t0); margin-left: 0.4em; }

/* ---------- travaux : barre, tableau, grille ---------- */
.works { padding-bottom: clamp(64px, 8vw, 128px); }
.bar { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bar h2 { grid-column: 1 / span 2; font-size: var(--t1); }
.filters { grid-column: 3 / span 8; display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; }
.views { grid-column: 11 / span 2; justify-self: end; color: var(--dim); }
.filters button, .views button { color: var(--dim); transition: color 160ms ease; }
.filters button[aria-pressed="true"], .views button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.filters sup { font-size: 0.65em; margin-left: 0.15em; vertical-align: 0.5em; }
/* puce 1 bit devant le filtre actif, hors du flux pour ne rien décaler */
.filters button { position: relative; }
.filters button[aria-pressed="true"]::before { content: ''; position: absolute; left: -11px; top: 50%; width: 6px; height: 6px; margin-top: -4px; background: var(--sq); }
@media (hover: hover) and (pointer: fine) { .filters button:hover, .views button:hover { color: var(--fg); } }

/* index : titres seuls, aperçu fixe à droite */
.idx { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding-top: 10px; }
.rows { grid-column: 1 / span 7; }
.row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.75em; padding: 3px 8px 4px; margin: 0 -8px; text-decoration: none; }
.row .t { font-size: var(--t2); line-height: 1.2; }
.row .m { color: var(--dim); font-size: var(--t0); }
.row .m-in { display: block; }
.row .m-in .c + .c::before { content: ', '; }
.row .m-in .r { display: none; }
@media (hover: hover) and (pointer: fine) {
  .row:hover, .row:focus-visible { background: var(--fg); color: var(--bg); outline: 0; }
  .row:hover .m, .row:focus-visible .m { color: #444; }
}
/* souris, écran large : titres seuls ; au survol la ligne s'ouvre sur ses infos */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  /* liste en tableau : filets entre les lignes, infos rangées en colonnes séparées par des filets */
  /* filets jusqu'au bord droit ; quand l'aperçu apparaît ils se rétractent jusqu'à lui (--k : 0 → 1).
     --cut = largeur des colonnes 9 à 12 plus une gouttière, en % de la ligne (qui déborde de 8px de chaque côté) */
  /* seules les lignes que la vignette recouvre se rétractent (classe .cut posée par le JS) */
  .rows, .row { --k: 0; }
  .rows.cut, .row.cut { --k: 1; }
  .rows { transition: --k 220ms var(--ease); }
  .rows.cut { transition-duration: 320ms; }
  .rows, .row { --cut: calc(var(--k) * (100% + 8px + var(--g)) / 3); background-repeat: no-repeat; background-origin: border-box; }
  .rows { grid-column: 1 / -1; grid-row: 1; margin: 0 -8px; border-top: 1px solid transparent;
    background-image: linear-gradient(var(--line), var(--line)); background-position: left top; background-size: calc(100% - var(--cut)) 1px; }
  .row { display: grid; grid-template-rows: auto 0fr; grid-template-columns: minmax(0, calc((100% - 11 * var(--g)) * 2 / 3 + 7 * var(--g) - 8px));
    margin: 0; padding: 6px 8px 7px; border-bottom: 1px solid transparent;
    background-image: linear-gradient(var(--line), var(--line)); background-position: left bottom; background-size: calc(100% - var(--cut)) 1px;
    transition: grid-template-rows 180ms var(--ease), padding-bottom 180ms var(--ease), --k 220ms var(--ease); }
  .row.cut { transition: grid-template-rows 180ms var(--ease), padding-bottom 180ms var(--ease), --k 320ms var(--ease); }
  .row:hover, .row:focus-visible { background-color: transparent; background-image: linear-gradient(var(--fg), var(--fg)); background-position: left top; background-size: calc(100% - var(--cut)) 100%; }
  .pv { grid-row: 1; z-index: 1; pointer-events: none; }
  .row .m { overflow: hidden; min-height: 0; }
  .row .m-in { display: grid; grid-template-columns: 1.2fr 1fr 0.5fr 1.6fr; margin-top: 8px; border-top: 1px solid; opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease, transform 180ms var(--ease); }
  .row .m-in > span { padding: 5px 8px 0; border-left: 1px solid; min-width: 0; }
  .row .m-in > span:first-child { padding-left: 0; border-left: 0; }
  .row .m-in .c + .c::before { content: none; }
  .row .m-in .r { display: block; }
  .row:hover { grid-template-rows: auto 1fr; padding-bottom: 9px; transition-duration: 260ms; }
  .row:hover .m-in { opacity: 1; transform: none; transition: opacity 200ms ease 60ms, transform 260ms var(--ease) 40ms; }
  /* puce 1 bit au bout de la ligne survolée */
  .row { position: relative; }
  .row::after { content: ''; position: absolute; right: calc(8px + var(--cut)); top: 16px; width: 8px; height: 8px; background: var(--sqk); opacity: 0; }
  .row:hover::after { opacity: 1; }
  /* au clavier : ouvert d'emblée, sans animation */
  .row:focus-visible { grid-template-rows: auto 1fr; padding-bottom: 9px; transition: none; }
  .row:focus-visible .m-in { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .row, .row .m-in, .rows { transition: none !important; }
}
.pv { grid-column: 9 / -1; position: relative; }
.pv-in { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16 / 9; opacity: 0; transition: opacity 120ms ease; }
.pv.on .pv-in { opacity: 1; }
/* coins de cadrage, comme le cadre de sécurité d'un visualiseur */
.pv-in::after { content: ''; position: absolute; inset: -7px; z-index: 1; pointer-events: none; --c: linear-gradient(var(--fg), var(--fg));
  background: var(--c) left top / 10px 1px, var(--c) left top / 1px 10px, var(--c) right top / 10px 1px, var(--c) right top / 1px 10px,
    var(--c) left bottom / 10px 1px, var(--c) left bottom / 1px 10px, var(--c) right bottom / 10px 1px, var(--c) right bottom / 1px 10px;
  background-repeat: no-repeat; }
.pv .th { position: absolute; inset: 0; display: none; }
.pv .th.on { display: block; }

/* grille : trois colonnes égales */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--g); row-gap: clamp(32px, 4vw, 56px); padding-top: var(--g); }
.card { display: block; text-decoration: none; }
.card .t { display: block; padding-top: 10px; }
.card .m { display: block; color: var(--dim); font-size: var(--t0); }
@media (hover: hover) and (pointer: fine) { .card:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } }

/* ---------- page projet : colonne fixe + colonne médias ---------- */
.proj { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); border-top: 1px solid var(--line); }
.proj aside { grid-column: 1 / span 4; border-right: 1px solid var(--line); padding-right: var(--g); }
.proj .stick { position: sticky; top: 0; padding: 20px 0 40px; }
.proj h1 { font-size: var(--t2); line-height: 1.15; margin: 6px 0 24px; text-wrap: balance; }
.kv { display: grid; grid-template-columns: minmax(6.5em, max-content) 1fr; border-top: 1px solid var(--line); }
.kv dt, .kv dd { padding: 7px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--dim); padding-right: 1em; }
.proj .txt { padding-top: 24px; max-width: 32em; }
.proj .txt p + p { margin-top: 0.8em; }
.pn { display: flex; justify-content: space-between; padding-top: 32px; }
.pm { padding-top: 24px; font-size: var(--t2); }
.media { grid-column: 5 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-items: start; align-content: start; padding: 20px 0 clamp(64px, 8vw, 120px); }
.media figure { grid-column: 1 / -1; margin: 0; }
.media figure.half { grid-column: auto; }
.media video, .media img, .media canvas { display: block; width: 100%; height: auto; background: #000; }
.media .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-items: start; }
.media .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); align-items: start; }
/* still timecodé : clic = le film saute à ce moment ; le timecode s'affiche en bas à gauche */
.media .jump { display: block; position: relative; width: 100%; padding: 0; text-align: left; }
.media .jump .tcl { position: absolute; left: 0; bottom: 0; font-size: var(--t0); line-height: 1; padding: 3px 5px 4px; background: var(--bg); color: var(--fg); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .media .jump .tcl { opacity: 0; transition: opacity 120ms ease; }
  .media .jump:hover .tcl, .media .jump:focus-visible .tcl { opacity: 1; }
}
.next { padding: clamp(48px, 7vw, 112px) var(--g) clamp(96px, 12vw, 200px); border-top: 1px solid var(--line); }
.next a { font-size: var(--t3); line-height: 1.05; letter-spacing: -0.01em; text-decoration-thickness: 2px; text-underline-offset: 0.1em; }
.next .dim { display: block; margin-bottom: 12px; }

/* ---------- pied de page : présentation | fiche ---------- */
footer { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding-top: clamp(40px, 6vw, 96px); border-top: 1px solid var(--line); }
.bio { grid-column: 1 / span 6; font-size: var(--t2); line-height: 1.32; max-width: 30em; text-wrap: pretty; padding-bottom: clamp(48px, 7vw, 112px); }
.cols { grid-column: 8 / -1; display: grid; grid-template-columns: 6.5em 1fr; align-content: start; border-top: 1px solid var(--line); }
.cols > div { display: contents; }
.cols h2 { font-size: var(--t1); color: var(--dim); padding: 7px 0; border-bottom: 1px solid var(--line); }
.cols p { padding: 7px 0; border-bottom: 1px solid var(--line); }
.mail { grid-column: 1 / -1; justify-self: start; font-size: var(--t3); line-height: 1.05; letter-spacing: -0.01em; text-decoration-thickness: 2px; text-underline-offset: 0.12em; margin-top: clamp(48px, 7vw, 112px); }
.legal { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--dim); padding: clamp(48px, 7vw, 112px) 0 18px; }

/* ---------- petits écrans ---------- */
@media (max-width: 1100px) {
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .rows { grid-column: 1 / -1; }
  .pv { display: none; }
  .row { display: grid; align-items: start; align-content: start; grid-template-columns: 1fr 120px; column-gap: 12px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); }
  .row .t { grid-column: 1; }
  .row .m { grid-column: 1; grid-row: 2; }
  .row .th { grid-column: 2; grid-row: 1 / span 2; width: 120px; }
  .tag { grid-column: 1 / -1; grid-row: 2; padding-top: 4px; color: var(--dim); }
  .logo { grid-column: 1 / span 4; }
  .nav { grid-column: 5 / -1; }
  .reel a.th { height: auto; aspect-ratio: 16 / 9; }
  .bar h2 { grid-column: 1 / span 6; }
  .views { grid-column: 7 / -1; }
  .filters { grid-column: 1 / -1; grid-row: 2; padding-top: 8px; }
  .proj aside { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
  .proj .stick { position: static; padding-bottom: 24px; }
  /* le premier média passe avant les infos, le reste suit dessous */
  .proj { row-gap: var(--g); }
  .media { display: contents; }
  .media > figure { grid-column: 1 / -1; }
  .media > figure.half { grid-column: span 6; }
  .media > figure:first-child { order: -1; margin-top: 16px; }
  .media > figure:last-child { margin-bottom: clamp(64px, 8vw, 120px); }
  .bio, .cols { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .nav { gap: 0.8em; }
  .cards { grid-template-columns: 1fr; }
  .media .trio { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .th canvas { transition: none; }
}

/* ---------- liens : surlignage tramé ----------
   au survol, un fond blanc se remplit derrière le mot dans l'ordre de la matrice de Bayer (trames --h1..--h4, app.js),
   le texte passe en noir à mi-chemin et reste inversé tant que la souris est dessus ; retour instantané.
   À la souris seulement, rien au clavier ; sans paliers si l'utilisateur réduit les animations. */
@media (hover: hover) and (pointer: fine) {
  :is(.nav a, .pn a, .pm a, .reel .line a, #rp, .cols a, .filters button, .views button, .lang button, .mail, .next a):hover {
    background: var(--fg); color: var(--bg); text-decoration-color: transparent;
    animation: hl 200ms steps(1, end);
  }
}
@keyframes hl {
  0%  { background: var(--h1); color: var(--fg); }
  20% { background: var(--h2); color: var(--fg); }
  40% { background: var(--h3); color: var(--bg); }
  60% { background: var(--h4); color: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.nav a, .pn a, .pm a, .reel .line a, #rp, .cols a, .filters button, .views button, .lang button, .mail, .next a):hover { animation: none; }
}