/* ==========================================================================
   sebastiendavid.ch — design system (phase 2)
   cinéma × analogique × brutaliste × post-modernisme d'Europe de l'Est
   Règles : toutes les couleurs passent par les variables ci-dessous ;
   aucune étoile ni symbole politique ; le logo n'est jamais redessiné.
   Sommaire : 1 polices · 2 variables · 3 base · 4 typographie · 5 grille
              6 en-tête et navigation · 7 pied de page · 8 composants
              9 textures et repères · 10 utilitaires · 12 accueil · 13 portfolio et projets · 14 références et à propos · 15 contact · 16 habillage · 17 bandeau cookies · 18 hero en scène · 19 animations · 11 mouvement réduit (en dernier)
   ========================================================================== */

/* 1. Polices (hébergées sur le serveur, SIL OFL) -------------------------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* 2. Variables (SD-010 palette, SD-011 typographie, SD-012 grille) -------- */
:root {
  /* Palette du site */
  --noir: #1A1A1A;
  --ivoire: #EAE7E1;
  --rouge: #C62828;
  --beton: #6B6B6B;
  --gris-chaud: #C9C2B8;
  /* Couleurs du logo : réservées au logo, jamais utilisées pour l'interface */
  --logo-jaune: #FCD757;
  --logo-orange: #CD6120;
  --logo-bleu-vert: #568A97;
  --logo-noir: #262626;
  /* Rouge signal éclairci : seulement pour du TEXTE sur fond sombre (contraste 5,2:1 sur le noir) */
  --rouge-clair: #EF5A50;

  /* Rôles (thème clair par défaut ; .theme-dark les inverse) */
  --fond: var(--ivoire);
  --texte: var(--noir);
  --texte-doux: #4A4A4A;          /* 8,3:1 sur ivoire */
  --trait: var(--noir);
  --accent: var(--rouge);
  --surface: #DEDAD3;             /* aplat « papier » un ton sous l'ivoire */

  /* Familles */
  --font-display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  --font-label: "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle typographique fluide */
  --fs-display: clamp(4rem, 13vw, 12.5rem);
  --fs-h1: clamp(3.25rem, 9vw, 8rem);
  --fs-h2: clamp(2.5rem, 5.5vw, 5rem);
  --fs-h3: clamp(1.75rem, 2.8vw, 2.5rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small: .875rem;
  --fs-label: .75rem;

  /* Espacements */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;
  --space-9: clamp(4rem, 9vw, 8rem);    /* respiration entre sections */

  /* Grille */
  --gutter: clamp(1rem, 4vw, 3rem);     /* marge latérale de page */
  --gap: clamp(.75rem, 2vw, 2rem);      /* écart entre colonnes */
  --max: 1600px;
  --measure: 62ch;                      /* longueur de ligne de lecture */

  --header-h: 4.5rem;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

.theme-dark {
  --fond: var(--noir);
  --texte: var(--ivoire);
  --texte-doux: var(--gris-chaud);
  --trait: var(--ivoire);
  --accent: var(--rouge-clair);
  --surface: #262626;
  background: var(--fond);
  color: var(--texte);
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--noir); color: var(--ivoire); }
hr { border: 0; border-top: 1px solid var(--trait); margin: 0; }

/* 4. Typographie ----------------------------------------------------------- */
h1, h2, h3, .display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: .005em;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .82; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: .95; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.45; }
:is(.display, h1, h2, .h1, .h2) + :is(p, .lead) { margin-top: var(--space-6); }
.small { font-size: var(--fs-small); }
.label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.3;
}
.num { font-family: var(--font-label); font-variant-numeric: tabular-nums; color: var(--accent); }
.text-muted { color: var(--texte-doux); }
.text-accent { color: var(--accent); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1em; }

/* 5. Grille (12 colonnes, compositions asymétriques) ----------------------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-9); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.grid > * { min-width: 0; }
.grid > :not([class*="span-"]) { grid-column: 1 / -1; }   /* sans classe : pleine largeur */
@media (max-width: 767px) { .grid > * { grid-column: 1 / -1; } }  /* mobile : tout empilé */
@media (min-width: 768px) {
  .span-3 { grid-column-end: span 3; }  .span-4 { grid-column-end: span 4; }
  .span-5 { grid-column-end: span 5; }  .span-6 { grid-column-end: span 6; }
  .span-7 { grid-column-end: span 7; }  .span-8 { grid-column-end: span 8; }
  .span-9 { grid-column-end: span 9; }
  .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
  .self-end { align-self: end; }
}

/* 6. En-tête et navigation (SD-013, SD-014) -------------------------------- */
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--noir); color: var(--ivoire); padding: var(--space-2) var(--space-4);
}
.skip:focus { top: var(--space-4); }

.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: var(--header-h);
  padding: var(--space-4) var(--gutter);
  border-bottom: 1px solid var(--trait);
  background: var(--fond); color: var(--texte);
}
.site-header--overlay { position: absolute; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; }
.brand { display: flex; align-items: flex-end; gap: var(--space-3); text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.logo-wordmark { width: clamp(5.5rem, 9vw, 7.5rem); height: auto; }
.brand__role { color: var(--texte-doux); padding-bottom: .1rem; }

.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav ol { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-nav a { text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav .num { display: none; }
.lang-switch { display: flex; gap: var(--space-2); align-items: center; }
.lang-switch a { text-decoration: none; opacity: .55; }
.lang-switch a[aria-current="true"] { opacity: 1; }
.lang-switch a:hover { opacity: 1; }
.menu-toggle { display: none; }

/* Mobile : menu plein écran (seulement si le JavaScript est actif ; sinon la liste reste visible). */
@media (max-width: 899px) {
  .js .menu-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: none; border: 1px solid currentColor; color: inherit;
    padding: var(--space-2) var(--space-3); cursor: pointer;
  }
  .js .menu-toggle__bars { width: 1.1rem; height: .6rem; border-block: 1.5px solid currentColor; }
  .js .site-nav {
    position: fixed; inset: 0; z-index: 30;
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    padding: calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-6);
    background: var(--noir); color: var(--ivoire);
    visibility: hidden; opacity: 0; transition: opacity .25s var(--ease), visibility 0s .25s;
  }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transition: opacity .25s var(--ease); }
  .js .site-nav ol { flex-direction: column; gap: var(--space-3); }
  .js .site-nav ol a { font-family: var(--font-display); font-size: clamp(3rem, 15vw, 5rem); line-height: .9; letter-spacing: 0; display: flex; gap: var(--space-4); align-items: flex-start; }
  .js .site-nav .num { display: inline; font-size: var(--fs-label); padding-top: .6rem; }
  .js .menu-open .menu-toggle { position: relative; z-index: 40; color: var(--ivoire); }
  .js .menu-open .brand { position: relative; z-index: 40; color: var(--ivoire); }
  .js .menu-open .brand__role { color: var(--gris-chaud); }
  .site-header { flex-wrap: wrap; }
  html:not(.js) .site-nav { width: 100%; justify-content: space-between; }
}

/* 7. Pied de page (SD-015) ------------------------------------------------- */
.site-footer { padding-block: var(--space-8) var(--space-5); border-top: 1px solid rgb(234 231 225 / .14); }
.site-footer__grid { row-gap: var(--space-7); }
.site-footer__sign { display: flex; align-items: flex-end; gap: var(--space-5); }
.site-footer__cat { width: clamp(3.5rem, 6vw, 5rem); height: auto; }
.site-footer .logo-wordmark { width: clamp(9rem, 16vw, 13rem); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer a { text-decoration: none; }
.site-footer__email { display: inline-block; margin-bottom: var(--space-5); font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1; letter-spacing: .02em; text-decoration: none; overflow-wrap: anywhere; }
.site-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--trait);
}
@media (min-width: 768px) and (max-width: 1023px) {   /* tablette : signature sur toute la largeur */
  .site-footer__grid > .site-footer__sign { grid-column: 1 / -1; }
  .site-footer__grid > .span-4 { grid-column: 1 / span 7; }
  .site-footer__grid > .span-3 { grid-column: 8 / span 5; }
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* 8. Composants ------------------------------------------------------------ */
/* En-tête de section : numéro, filet, intitulé */
.section-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-head::after { content: ""; flex: 1; border-top: 1px solid var(--trait); }

/* Boutons et liens d'action */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--texte); color: var(--fond);
  border: 1px solid var(--texte); text-decoration: none; cursor: pointer;
  font: 500 var(--fs-label)/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .14em;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn:hover { background: var(--rouge); border-color: var(--rouge); color: var(--ivoire); }
.btn--outline { background: transparent; color: var(--texte); }
.btn--accent { background: var(--rouge); border-color: var(--rouge); color: var(--ivoire); }
.btn--accent:hover { background: var(--texte); border-color: var(--texte); color: var(--fond); }

.arrow-link { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.arrow-link__circle {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border: 1px solid currentColor; border-radius: 50%;
  transition: transform .3s var(--ease), background-color .2s, color .2s;
}
.arrow-link__circle svg { width: 1rem; height: 1rem; }
.arrow-link:hover .arrow-link__circle { background: var(--rouge); border-color: var(--rouge); color: var(--ivoire); transform: translateX(.25rem); }

.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.link-button:hover { color: var(--accent); }

/* Champs de formulaire */
.field { display: grid; gap: var(--space-2); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: transparent; color: var(--texte);
  border: 1px solid var(--trait); border-radius: 0;
  font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }

/* Média : cadre avec repères d'angle (croix de cadrage) */
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 1.25rem; height: 1.25rem; pointer-events: none; z-index: 1;
  border: 0 solid var(--accent);
}
.frame::before { top: -.5rem; left: -.5rem; border-top-width: 1.5px; border-left-width: 1.5px; }
.frame::after { bottom: -.5rem; right: -.5rem; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* Emplacement d'image en attendant les vraies photos */
.media-placeholder {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / .06), transparent 60%),
    linear-gradient(160deg, #3a3a3a, #1d1d1d);
  color: var(--gris-chaud);
}
.media-placeholder__label { position: absolute; left: var(--space-4); bottom: var(--space-4); }
.media-placeholder .crosshair { width: clamp(2.5rem, 6vw, 4rem); opacity: .7; }

/* Repère de visée */
.crosshair { width: 3rem; height: auto; color: currentColor; }

/* Bande de film : perforations + numéros d'image */
.film-strip {
  --perf: rgb(234 231 225 / .85);
  position: relative; overflow: hidden;
  padding: 1.1rem 0;
  background: var(--noir); color: var(--gris-chaud);
}
.film-strip::before, .film-strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: .55rem;
  background: repeating-linear-gradient(90deg, transparent 0 .55rem, var(--perf) .55rem 1.35rem, transparent 1.35rem 1.9rem);
  border-radius: 1px;
}
.film-strip::before { top: .3rem; }
.film-strip::after { bottom: .3rem; }
.film-strip__marks { display: flex; gap: var(--space-7); white-space: nowrap; padding-inline: var(--gutter); }
.film-strip__marks .num { color: var(--rouge); }

/* Marquage de bord de pellicule (texte technique) */
.edge-print { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--accent); }
.edge-print::before { content: ""; width: 0; height: 0; border-block: .3rem solid transparent; border-left: .5rem solid currentColor; }

/* 9. Textures et repères (SD-016, SD-017) ---------------------------------- */
/* Grain argentique : bruit gris (grains clairs et sombres), figé, posé au-dessus de toute
   la page sans interaction. Visible sur l'ivoire comme sur le noir. Animé en phase 3. */
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.6 0 0 0 -.3 1.6 0 0 0 -.3 1.6 0 0 0 -.3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .075;
}

/* Poussière et rayures : très discrètes, réservées aux zones sombres ou photographiques */
.texture-dust { position: relative; isolation: isolate; }
.texture-dust::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("../img/textures/dust.svg") center / cover no-repeat;
  opacity: .08;
}
.theme-dark .texture-dust::before, .texture-dust.theme-dark::before { filter: invert(1); opacity: .12; }

/* Bloc d'impression : aplat rouge décalé derrière une image (imperfection d'impression) */
.print-offset { position: relative; isolation: isolate; }
.print-offset::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rouge); transform: translate(.6rem, .6rem);
}

/* 10. Utilitaires ---------------------------------------------------------- */
.ratio-3-2 { aspect-ratio: 3 / 2; }   .ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; } .ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-1-1 { aspect-ratio: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rule { border-top: 1px solid var(--trait); }
.stack > * + * { margin-top: var(--space-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }

/* 12. Accueil (phase 4) ---------------------------------------------------- */
/* Zone rouge : appel au contact. L'accent y devient noir. */
.theme-red {
  --fond: var(--rouge); --texte: var(--ivoire); --texte-doux: var(--ivoire);
  --trait: var(--ivoire); --accent: var(--ivoire);
  background: var(--fond); color: var(--texte);
}

/* Hero plein écran (SD-030) */
.hero { position: relative; }
.hero__stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: clamp(3rem, 9vh, 6.5rem);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media::after {   /* voile pour la lisibilité du texte */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(26 26 26 / .9) 0%, rgb(26 26 26 / .35) 45%, transparent 70%);
}
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-banner { position: sticky; top: 0; z-index: 60; padding: var(--space-3) var(--gutter); background: var(--rouge); color: var(--ivoire); text-align: center; }
.hero__placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 68% 38%, rgb(198 40 40 / .8), rgb(198 40 40 / .18) 55%, transparent 78%),
    radial-gradient(ellipse 70% 50% at 15% 105%, rgb(0 0 0 / .65), transparent 70%),
    linear-gradient(180deg, rgb(22 22 22), rgb(14 14 14));
  color: rgb(234 231 225 / .55);
}
.hero__placeholder > * { position: absolute; left: 68%; top: 38%; transform: translate(-50%, -50%); }
.hero__placeholder .label { top: calc(38% + clamp(3rem, 7vw, 5rem)); white-space: nowrap; }
.hero__crosshair { width: clamp(4rem, 10vw, 7.5rem); }

.hero__content { position: relative; }
.hero__sign p { margin: 0; }
.hero__sign .hero__role { color: var(--ivoire); margin-bottom: var(--space-2); }
.hero__text { color: var(--gris-chaud); }
.hero__title .line, .cta__title .line, .refs-teaser .line, .profile .line { display: block; }
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5) var(--space-7); margin-top: var(--space-6);
}


.hero__rail {
  position: absolute; left: var(--gutter); top: calc(var(--header-h) + var(--space-6));
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  text-decoration: none;
}
.hero__rail:hover .hero__rail-text { color: var(--accent); }
.hero__rail-line { width: 1px; height: clamp(4rem, 18vh, 10rem); background: var(--trait); opacity: .5; }
.hero__rail-text { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--gris-chaud); }
.hero__edge { position: absolute; right: var(--gutter); top: calc(var(--header-h) + var(--space-6)); }
@media (max-width: 767px), (max-height: 640px) {
  .hero__rail { display: none; }
}
@media (max-width: 767px) {
  .hero__placeholder > * { left: 50%; top: 32%; }
  .hero__placeholder .label { top: calc(32% + 3.5rem); }
}

/* Entrée du texte du hero (simple, en CSS ; GSAP prendra le relais en phase 3) */
@keyframes sd-rise {
  from { opacity: 0; transform: translateY(1.25rem); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
.js .hero [data-reveal] { animation: sd-rise .9s var(--ease) both; }
.js .hero .hero__title { animation-delay: .15s; }

/* Projets choisis (SD-031) : composition éditoriale asymétrique */
.works { row-gap: clamp(3rem, 7vw, 6rem); }
.work__link { display: block; text-decoration: none; }
.work__link:hover { color: inherit; }
.work__clip { overflow: hidden; }
.work__clip > * { transition: transform .9s var(--ease); }
.work__link:hover .work__clip > * { transform: scale(1.035); }
.work__meta {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: var(--space-1) var(--space-4); margin-top: var(--space-5);
}
.work__meta .num { grid-row: span 2; }
.work__meta p { margin: 0; }
.work__title { font-size: var(--fs-h3); transition: color .2s; }
.work__link:hover .work__title { color: var(--accent); }
@media (min-width: 768px) {
  .works > .work--a { grid-column: 1 / span 8; }
  .works > .work--b { grid-column: 9 / span 4; margin-top: clamp(4rem, 14vw, 12rem); }
  .works > .work--c { grid-column: 2 / span 5; }
  .works > .work--d { grid-column: 8 / span 5; margin-top: clamp(2rem, 7vw, 6rem); }
}
@media (max-width: 767px) {   /* mobile : alternance gauche / droite, images portrait moins hautes */
  .works > .work--b, .works > .work--d { width: 78%; margin-left: auto; }
  .works > .work--c { width: 88%; }
}
.works__more { display: flex; justify-content: flex-end; margin-top: var(--space-8); }

/* Profil (SD-032) */
.profile { align-items: center; row-gap: var(--space-7); }
.profile__text h2 { margin-bottom: var(--space-6); }
.profile__lead { font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.3; letter-spacing: -.01em; }
.profile__more { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; color: var(--accent); }
.profile__text .arrow-link { margin-top: var(--space-4); }
@media (min-width: 768px) { .profile__media { padding-right: var(--space-5); } }
@media (max-width: 767px) { .profile__media { max-width: 26rem; } }

/* Aperçu des références (SD-033) */
.refs-teaser__wall {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
  margin-top: var(--space-8); align-items: start;
}
.refs-teaser__item { filter: grayscale(1) contrast(1.1); }
.refs-teaser__item--1 { grid-column: 1 / span 4; }
.refs-teaser__item--2 { grid-column: 5 / span 5; margin-top: clamp(2rem, 8vw, 7rem); }
.refs-teaser__item--3 { grid-column: 10 / span 3; margin-top: clamp(-2rem, -3vw, -1rem); }

/* Appel au contact (SD-034) */
.cta { padding-block: clamp(5rem, 13vw, 11rem); }
.cta__title { margin-bottom: var(--space-7); font-size: clamp(2.75rem, 12.5vw, 12.5rem); }
.cta__link {
  display: inline-flex; align-items: center; gap: var(--space-5);
  font-family: var(--font-display); font-size: var(--fs-h1); line-height: .9;
  text-transform: uppercase; text-decoration: none;
}
.cta__arrow {
  display: grid; place-items: center; width: .9em; height: .9em;
  border: 2px solid currentColor; border-radius: 50%;
  transition: transform .3s var(--ease), background-color .2s, color .2s;
}
.cta__arrow svg { width: .45em; height: .45em; }
.cta__link:hover { color: var(--noir); }
.theme-red .arrow-link:hover .arrow-link__circle, .theme-red .btn:hover { background: var(--noir); border-color: var(--noir); }
.cta__link:hover .cta__arrow { transform: translateX(.3rem); background: var(--noir); border-color: var(--noir); color: var(--ivoire); }

/* 13. Portfolio et pages projets (phase 5) --------------------------------- */
.portfolio__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5) var(--space-7); margin-bottom: var(--space-8);
}
.filters ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.filters .filters__cats { margin-top: var(--space-3); }
.filters a { text-decoration: none; padding-bottom: .2rem; border-bottom: 1px solid transparent; }
.filters a[aria-current="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.filters sup { font-size: .8em; margin-left: .2em; vertical-align: super; }
.portfolio__empty { padding-block: var(--space-8); }
.work__clip { position: relative; }
.work__clip > img { width: 100%; height: 100%; object-fit: cover; }
.work__clip .media-placeholder { aspect-ratio: auto; height: 100%; }
.work__play {
  position: absolute; left: var(--space-4); top: var(--space-4);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: var(--rouge); color: var(--ivoire); font-size: .8rem; padding-left: .15rem;
}

.project__head { padding-bottom: var(--space-7); }
.project__title { margin-bottom: var(--space-6); overflow-wrap: anywhere; }
.project__intro { align-items: end; }
.facts { display: grid; gap: var(--space-3); margin: 0; }
.facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--trait); }
.facts dt { color: var(--texte-doux); }
.facts dd { margin: 0; }
.project__cover > .frame > img { width: 100%; }
.project__text { font-size: var(--fs-lead); line-height: 1.55; }
.project__credits p { margin: 0 0 var(--space-2); white-space: pre-line; }

/* Galerie (SD-044) : rangées composées selon les proportions des images */
.gallery { display: grid; gap: clamp(2rem, 6vw, 5.5rem); }
.gallery__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.gallery__item { margin: 0; grid-column: 1 / -1; }
.gallery__item img { width: 100%; }
.gallery__item figcaption { margin-top: var(--space-3); }
@media (min-width: 768px) {
  .gallery__row--pair .gallery__item:first-child { grid-column: 1 / span 6; }
  .gallery__row--pair .gallery__item:last-child { grid-column: 7 / span 6; margin-bottom: clamp(2rem, 8vw, 7rem); }
  .gallery__row--center .gallery__item { grid-column: 4 / span 6; }
  .gallery__row--offset .gallery__item { grid-column: 3 / span 10; }
  .gallery__row--offset:nth-of-type(even) .gallery__item { grid-column: 1 / span 10; }
}

/* Lecteur vidéo (SD-045) : image locale + ▶ ; YouTube chargé seulement au clic */
.video { position: relative; background: var(--noir); }
.video__poster { overflow: hidden; }
.video__poster > img, .video__poster .media-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.video__poster::after { content: ""; position: absolute; inset: 0; background: rgb(26 26 26 / .25); pointer-events: none; }
.video__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  color: var(--ivoire); text-decoration: none;
}
.video__icon {
  display: grid; place-items: center; width: clamp(4rem, 9vw, 6.5rem); aspect-ratio: 1;
  border-radius: 50%; background: var(--rouge); font-size: clamp(1.2rem, 2.4vw, 1.8rem); padding-left: .3rem;
  transition: transform .3s var(--ease), background-color .2s;
}
.video__play:hover { color: var(--ivoire); }
.video__play:hover .video__icon { transform: scale(1.08); background: var(--ivoire); color: var(--rouge); }
.video__consent {
  position: absolute; inset: auto 0 0; z-index: 3;
  display: grid; gap: var(--space-4); padding: var(--space-5); background: rgb(26 26 26 / .94);
}
.video__consent[hidden] { display: none; }
.video__consent p { margin: 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.video.is-playing .video__play, .video.is-playing .video__consent { display: none; }
.video.is-asking .video__play { opacity: .25; }

/* Projet suivant (SD-046) */
.next-project__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  text-decoration: none; margin-bottom: var(--space-4);
}
.next-project__title { font-size: clamp(3rem, 10vw, 9rem); overflow-wrap: anywhere; transition: color .2s; }
.next-project__link .cta__arrow { font-size: clamp(3rem, 8vw, 6rem); flex: none; }
.next-project__link:hover { color: var(--ivoire); }
.next-project__link:hover .next-project__title { color: var(--rouge); }
.next-project__link:hover .cta__arrow { transform: translateX(.3rem); background: var(--rouge); border-color: var(--rouge); color: var(--ivoire); }
.next-project__back { margin-top: var(--space-7); }

/* 14. Références et À propos (phase 6) ------------------------------------- */
.refs__head { margin-bottom: var(--space-8); row-gap: var(--space-5); }
.refs__head .line, .about-head .line, .about-block .line { display: block; }
.refs__intro p { margin: 0 0 var(--space-2); }

.refs__wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 5rem) var(--gap); align-items: start; }
.ref { grid-column: 1 / -1; min-width: 0; }
.ref__clip { overflow: hidden; }
.ref__clip > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .5s var(--ease), transform .9s var(--ease); }
.ref:hover .ref__clip > img { filter: none; transform: scale(1.03); }
.ref__clip .media-placeholder, .about-head__clip .media-placeholder { height: 100%; aspect-ratio: auto; }
.about-head__clip { overflow: hidden; }
.about-head__clip > img { width: 100%; height: 100%; object-fit: cover; }
.ref__meta { margin-top: var(--space-4); }
.ref__meta .label { margin: 0 0 var(--space-2); }
.ref__meta .num { margin-right: .1em; }
.ref__name { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.ref__text { max-width: 42ch; font-style: italic; color: var(--texte-doux); }
.ref__link { text-decoration: none; border-bottom: 1px solid currentColor; }
@media (min-width: 768px) {
  .ref--1 { grid-column: 1 / span 5; }
  .ref--2 { grid-column: 7 / span 5; margin-top: clamp(3rem, 10vw, 9rem); }
  .ref--3 { grid-column: 2 / span 3; }
  .ref--4 { grid-column: 6 / span 7; margin-top: clamp(1rem, 4vw, 3rem); }
  .ref--5 { grid-column: 1 / span 5; margin-top: clamp(1rem, 4vw, 4rem); }
  .ref--6 { grid-column: 8 / span 4; margin-top: clamp(3rem, 9vw, 8rem); }
}
@media (max-width: 767px) {
  .ref:nth-child(even) { width: 82%; margin-left: auto; }
  .ref--3 { width: 64%; }
}
.refs-teaser__name { margin: var(--space-3) 0 0; color: var(--gris-chaud); }

.about-head { padding-bottom: var(--space-8); }
.about-head .grid { align-items: end; row-gap: var(--space-7); }
.about-head__role { margin: var(--space-5) 0 var(--space-6); color: var(--accent); }
.about-head__title { margin-bottom: var(--space-4); }
.about-head__bio p { margin-bottom: 1em; }
.about-head__portrait { display: grid; gap: var(--space-4); }
@media (max-width: 767px) { .about-head__portrait { max-width: 22rem; } }
.about-block__text { font-size: var(--fs-lead); line-height: 1.55; }
.about-block .h2 { margin-top: var(--space-2); }
.about-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.about-list li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--trait); font-size: var(--fs-lead); }
.about-tags { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.about-tags li { padding: var(--space-3) var(--space-4); border: 1px solid var(--trait); }

/* Contenu éditorial (docs/CONTENT.md) : À propos, filmographie, parcours */
.project__format { margin: calc(-1 * var(--space-4)) 0 var(--space-6); color: var(--accent); }
.ref__meta .ref__work { margin: calc(-1 * var(--space-2)) 0 var(--space-3); color: var(--texte-doux); }
.about-head__bio { font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; }
.about-head__line { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; color: var(--accent); max-width: 22ch; }
.about-wide { padding-bottom: var(--space-9); }
.about-bio { font-size: 1.0625rem; }
.about-bio__first { font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; }
.about-statement__title { font-size: clamp(3rem, 8vw, 7.5rem); }
.about-statement p { color: var(--gris-chaud); }
.timeline { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--trait); }
.timeline__step { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5) 0; border-bottom: 1px solid var(--trait); }
@media (min-width: 768px) { .timeline__step { grid-template-columns: minmax(10rem, 4fr) 8fr; gap: var(--gap); align-items: baseline; } }
.timeline__mark { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; }
.timeline__text { margin: 0; color: var(--texte-doux); }
.films { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--trait); }
.films__row {
  display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-1) var(--space-4); align-items: baseline;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--trait); text-decoration: none;
}
.films__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; transition: color .2s; }
.films__format, .films__role { grid-column: 2; }
a.films__row:hover { color: inherit; }
a.films__row:hover .films__title { color: var(--accent); }
@media (min-width: 900px) {
  .films__row { grid-template-columns: 5rem 5fr 4fr 3fr; }
  .films__format, .films__role { grid-column: auto; }
}
.films__more { margin-top: var(--space-6); }

/* 15. Contact (phase 8) ----------------------------------------------------- */
.contact__grid { row-gap: var(--space-8); }
.contact__side .display { margin-bottom: var(--space-6); }
.contact__intro { margin: 0 0 var(--space-6); }
.contact__intro .line { display: block; }
.contact__body { color: var(--texte-doux); }
.contact__block { margin-top: var(--space-6); }
.contact__block .label { margin-bottom: var(--space-2); }
.contact__email { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1; text-decoration: none; overflow-wrap: anywhere; }
.contact__socials { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.contact__socials a { text-decoration: none; }
.contact__form { max-width: 40rem; }
.contact__pair { display: grid; gap: var(--space-5); }
@media (min-width: 600px) { .contact__pair { grid-template-columns: 1fr 1fr; } }
.contact__send { justify-self: start; }
.contact__alert { margin: 0; padding: var(--space-3) var(--space-4); background: var(--rouge); color: var(--ivoire); max-width: none; }
.field--error input, .field--error textarea { border-color: var(--rouge); border-width: 2px; }
.field__error { margin: 0; color: var(--rouge); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__sent { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-7) 0; border-top: 1px solid var(--trait); }
.contact__sent:focus { outline: none; }
.contact__sent .crosshair { color: var(--accent); }
.contact__sent p { margin: 0; }

.horizon { position: relative; overflow: hidden; height: clamp(10rem, 24vw, 20rem); }
.horizon::after {   /* ligne d'horizon */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: var(--noir); border-top: 1px solid rgb(234 231 225 / .25); z-index: 1;
}
.horizon__sun {
  position: absolute; left: 62%; bottom: 18%; width: clamp(9rem, 22vw, 18rem); aspect-ratio: 1;
  border-radius: 50%; background: var(--rouge); transform: translateX(-50%);
}
.horizon > .edge-print { position: absolute; left: var(--gutter); bottom: var(--space-4); z-index: 2; }

/* 16. Images d'habillage (choisies dans Admin › Paramètres) ----------------- */
.refs__side { margin-bottom: var(--space-5); }
.about-statement__image { margin-bottom: var(--space-6); }
.photo-band { position: relative; overflow: hidden; height: clamp(14rem, 34vw, 30rem); background: var(--noir); }
.photo-band > img { width: 100%; height: 100%; object-fit: cover; }
.photo-band > .edge-print { position: absolute; left: var(--gutter); bottom: var(--space-4); z-index: 3; color: var(--ivoire); }
.error-page { align-items: end; row-gap: var(--space-7); }
.error-page__image img { filter: grayscale(1); }

/* 17. Bandeau cookies « COOKIES / 35 MM » (phase 14) ----------------------- */
.consent {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 70;
  max-width: 34rem; padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid rgb(234 231 225 / .2); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .35);
  opacity: 0; transform: translateY(1rem); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.consent.is-visible { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent__strip {
  position: absolute; left: 0; right: 0; top: 0; height: .9rem; background: var(--noir);
  border-bottom: 1px solid rgb(234 231 225 / .15);
}
.consent__strip::before {
  content: ""; position: absolute; left: .6rem; right: .6rem; top: .25rem; height: .4rem;
  background: repeating-linear-gradient(90deg, rgb(234 231 225 / .8) 0 .7rem, transparent .7rem 1.3rem);
}
.consent__title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); }
.consent__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rouge); }
.consent__text { margin: 0 0 var(--space-5); color: var(--gris-chaud); max-width: none; }
.consent__choices { border: 0; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-4); }
.consent__choices[hidden] { display: none; }
.consent__choice { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.consent__choice input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: var(--rouge); }
.consent__choice span { display: grid; gap: var(--space-1); }
.consent__choice .small { color: var(--gris-chaud); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.consent__actions .btn { flex: 1 1 8rem; justify-content: center; }
.consent__actions [hidden] { display: none; }
.btn--light { background: var(--ivoire); color: var(--noir); border-color: var(--ivoire); }
.btn--light:hover { background: var(--rouge); border-color: var(--rouge); color: var(--ivoire); }
.consent .btn--outline { color: var(--ivoire); border-color: var(--ivoire); }
.consent__link { display: inline-block; margin-top: var(--space-4); color: var(--gris-chaud); }

/* 18. Hero en scène (accueil) : photo et signature d'abord, le reste au défilement ----------- */
/* L'en-tête de l'accueil reste fixé ; il s'éclaircit une fois le hero dépassé (main.js). */
.js .site-header--overlay { position: fixed; transition: opacity .5s var(--ease), background-color .3s, color .3s, border-color .3s; }
.js .site-header--overlay.is-solid {
  --fond: var(--ivoire); --texte: var(--noir); --texte-doux: #4A4A4A; --trait: var(--noir);
  background: var(--fond); color: var(--texte); border-bottom-color: var(--trait);
}
.hero-intro .site-header--overlay:not(:focus-within):not(.menu-open) { opacity: 0; pointer-events: none; }

.hero--staged { height: 175vh; height: 175svh; }
.hero--staged .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.hero--staged [data-stage-in] { opacity: 0; transform: translateY(1.25rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero--staged:is([data-stage="1"], [data-stage="2"], [data-stage="3"]) [data-stage-in="1"],
.hero--staged:is([data-stage="2"], [data-stage="3"]) [data-stage-in="2"],
.hero--staged[data-stage="3"] [data-stage-in="3"] { opacity: 1; transform: none; }
/* Habillage : poussière et voile s'installent avec le défilement ; la photo s'impose au début. */
.hero--staged .hero__stage::before { transition: opacity .8s var(--ease); }
.hero--staged[data-stage="0"] .hero__stage::before { opacity: 0; }
.hero--staged .hero__media::after { opacity: calc(.35 + .65 * var(--p, 1)); }
.hero--staged .hero__image { transform: scale(calc(1.06 - .06 * var(--p, 0))); transform-origin: 50% 40%; }

/* 19. Animations (phase 3) ---------------------------------------------------- */
/* Filet des en-têtes de section : tracé au défilement (classe posée par main.js). */
.section-head::after { transform-origin: left center; transition: transform 1.1s var(--ease) .1s; }
.motion .section-head:not(.is-in)::after { transform: scaleX(0); }

/* Grain argentique animé : quelques positions par seconde, par transformation seulement (fluide). */
.grain::after { inset: -10%; animation: sd-grain 1s steps(6) infinite; }
@keyframes sd-grain {
  0% { transform: translate(0, 0); }      17% { transform: translate(-3%, 2%); }
  33% { transform: translate(2%, -4%); }  50% { transform: translate(-4%, -1%); }
  67% { transform: translate(4%, 3%); }   83% { transform: translate(-1%, 4%); }
  100% { transform: translate(0, 0); }
}

/* Transitions entre pages (navigateurs compatibles) : coupe avec léger flash, puis volet. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sd-cut-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: sd-wipe-in .42s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes sd-cut-out { to { opacity: 0; transform: scale(.985); filter: brightness(1.5) contrast(1.1); } }
@keyframes sd-wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .grain::after { animation: none; inset: 0; }
}

/* 11. Mouvement réduit ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Pages légales */
.legal h1 { margin-bottom: var(--space-7); }
.legal__body { max-width: 46rem; }
.legal__body h2 { margin: var(--space-7) 0 var(--space-3); }
.legal__body p, .legal__body ul { margin: 0 0 var(--space-4); }
.legal__body ul { padding-left: 1.2rem; }
.legal__body li + li { margin-top: var(--space-2); }
.legal__consent { margin-top: var(--space-7); }

/* Filmographie */
.films-page__head { margin-bottom: var(--space-8); row-gap: var(--space-5); align-items: end; }
.films-section + .films-section { margin-top: var(--space-9); }
.films-section .h2 { margin-bottom: var(--space-6); }
.films-section__intro { margin-bottom: var(--space-6); }
.films-section__more { margin-top: var(--space-6); }
.films-section--commercial { padding: var(--space-8) var(--gutter); margin-inline: calc(-1 * var(--gutter)); }
.film-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.film-table thead th { text-align: left; padding: 0 var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--trait); color: var(--texte-doux); font-weight: 500; }
.film-table td, .film-table tbody th { text-align: left; vertical-align: baseline; padding: var(--space-4) var(--space-3) var(--space-4) 0; border-bottom: 1px solid var(--trait); font-weight: 400; }
.film-table__title a { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; text-decoration: none; }
.film-table__title a:hover { color: var(--accent); }
@media (max-width: 899px) {
  .film-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .film-table, .film-table tbody, .film-table tr { display: block; }
  .film-table tr { padding: var(--space-5) 0; border-bottom: 1px solid var(--trait); display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-2) var(--space-3); }
  .film-table td, .film-table tbody th { display: contents; border: 0; padding: 0; }
  .film-table td::before, .film-table tbody th::before { content: attr(data-label); color: var(--texte-doux); font: 500 var(--fs-label)/1.6 var(--font-label); text-transform: uppercase; letter-spacing: .12em; }
  .film-table td:empty { display: none; }
}

/* Aperçu de la filmographie (accueil) */
.films-teaser__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.films-teaser__row { display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--trait); text-decoration: none; }
.films-teaser__list .label.text-muted { grid-column: 2; }
.films-teaser__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; transition: color .2s; }
a.films-teaser__row:hover { color: inherit; }
a.films-teaser__row:hover .films-teaser__title { color: var(--accent); }
.films-teaser__more { margin-top: var(--space-7); }
@media (min-width: 900px) { .film-table .nowrap { white-space: nowrap; } }
.films-teaser__heading { margin-bottom: var(--space-5); overflow-wrap: anywhere; }
.film-table__title span { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; }