/* =========================================================
   Florian Fabre — Bruiteur
   Thème clair : papier chaud, encre noire, laiton
   ========================================================= */

:root{
  --paper:#faf8f4;
  --paper-2:#f0ece3;
  --card:#ffffff;
  --ink:#15151a;
  --body:#4a463f;
  --muted:#6f695e;
  --brass:#7d5612;
  --brass-2:#b8873a;
  --brass-soft:rgba(125,86,18,.16);
  --line:rgba(21,21,26,.16);      /* filets décoratifs : séparateurs, grilles */
  --edge:rgba(21,21,26,.48);      /* contour des contrôles : 3,1:1, seuil WCAG 1.4.11 */
  --line-2:rgba(21,21,26,.07);

  --ff-display:"Barlow Condensed", "Haettenschweiler", Impact, sans-serif;
  --ff-text:"Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --hdr-h:74px;
  --wrap:1180px;

  /* Échelle typographique — aucune valeur en dehors de celles-ci */
  --fs-100:12px;   /* micro-libellés capitales */
  --fs-200:13px;   /* légendes, pied de page */
  --fs-300:15px;   /* listes, fiches techniques */
  --fs-400:17px;   /* texte courant */
  --fs-500:20px;   /* chapeau */
  --tr-label:.18em;  /* un seul interlettrage pour tous les micro-libellés */
  --tr-btn:.14em;

  /* Un seul rayon, trois ombres, une seule amplitude de survol */
  --r:3px;
  --sh-1:0 1px 2px rgba(21,21,26,.06);
  --sh-2:0 8px 24px rgba(21,21,26,.09);
  --sh-3:0 24px 60px rgba(21,21,26,.20);
  --lift:translateY(-3px);
  --pad:clamp(20px, 5vw, 64px);
  --sec-y:clamp(48px, 5.6vw, 88px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:82px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--ff-text); font-weight:400; font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.66; letter-spacing:.005em;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}

.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* Un anneau de focus unique, sur tout ce qui se pilote au clavier. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--brass); outline-offset:3px; border-radius:var(--r);
}
.film:focus-visible .film__poster{transform:var(--lift)}

/* ---------- Typo ---------- */
.h2{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase; color:var(--ink);
  font-size:clamp(30px,3.4vw,42px); line-height:1.06; letter-spacing:-.01em;
  margin:.12em 0 .5em; max-width:none; text-wrap:balance;
}
.eyebrow{
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:var(--tr-label);
  font-size:var(--fs-300); font-weight:600; color:var(--brass); margin:0 0 .35em;
}
p{margin:0 0 1.1em; max-width:62ch}
.lead{font-size:clamp(17px,1.5vw,20px); color:var(--ink); font-weight:400}

/* ---------- Boutons / liens ---------- */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:var(--tr-label);
  font-size:var(--fs-200); font-weight:600;
  padding:14px 26px; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  text-decoration:none; cursor:pointer; border-radius:var(--r);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--solid{--bg:var(--ink); --fg:var(--paper); --bd:var(--ink)}
.btn--solid:hover{transform:var(--lift); --bg:var(--brass); --bd:var(--brass)}
.btn--ghost{--bd:var(--edge)}
.btn--ghost:hover{--bd:var(--brass); --fg:var(--brass); transform:var(--lift)}

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-200); font-weight:600;
  color:var(--brass); border-bottom:1px solid var(--brass-soft); padding-bottom:4px;
  transition:border-color .3s var(--ease);
}
.link-arrow::after{content:"→"; transition:transform .3s var(--ease)}
.link-arrow:hover{border-color:var(--brass)}
.link-arrow:hover::after{transform:translateX(5px)}

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; gap:24px;
  padding-block:16px;
  padding-inline:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(250,248,244,.88); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line); padding-block:11px;
  box-shadow:var(--sh-1);
}
.hdr__brand{display:flex; flex-direction:column; text-decoration:none; line-height:1; margin-right:auto; color:var(--ink); white-space:nowrap; flex:0 0 auto}
.hdr__name{font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-500)}
.hdr__role{font-size:var(--fs-100); letter-spacing:.3em; text-transform:uppercase; color:var(--brass); margin-top:5px}

.nav{display:flex; align-items:center; gap:20px; flex-wrap:nowrap}
.nav a{
  position:relative; text-decoration:none; font-size:var(--fs-200); letter-spacing:.02em;
  color:var(--body); transition:color .25s var(--ease); padding:6px 0; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--brass);
  transition:right .35s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a.is-active{color:var(--brass)}
.nav a.is-active::after{right:0}
.nav__cta{border:1px solid var(--edge); padding:8px 16px !important; border-radius:var(--r)}
.nav__cta::after{display:none}
.nav__cta:hover{border-color:var(--brass); color:var(--brass)}

.hdr__tools{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.lang{
  background:none; border:1px solid var(--edge); border-radius:var(--r); padding:7px 11px; cursor:pointer;
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-200); letter-spacing:var(--tr-label); color:var(--ink);
  transition:border-color .25s var(--ease);
}
.lang:hover{border-color:var(--brass)}
.lang__off{color:var(--muted)}
.lang__sep{color:var(--muted); margin:0 3px}
.lang.is-en .lang__on{color:var(--muted)}
.lang.is-en .lang__off{color:var(--ink)}

.burger{display:none; background:none; border:0; cursor:pointer; width:34px; height:28px; padding:6px 0}
.burger span{display:block; height:1.5px; background:var(--ink); margin:5px 0; transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--paper); padding-bottom:clamp(40px,6vw,78px)}

/* L'image n'est JAMAIS recadrée : hauteur libre, ratio d'origine. */
/* L'image garde son format et sa hauteur entière : on la borne par la HAUTEUR,
   la largeur suit. Sur un écran paysage elle occupe donc moins de place. */
.hero{padding-bottom:clamp(40px,6vw,78px)}
.hero__img{
  position:relative; margin:calc(var(--hdr-h) + 20px) 0 0; width:100%;
  overflow:hidden; background:var(--paper-2); border-radius:var(--r);
}
/* width:100% dans la colonne + height:auto : la largeur borne la hauteur,
   le ratio d'origine est conservé au pixel près, aucun recadrage possible. */
.hero__img img{display:block; width:100%; height:auto}

/* Voile en bas à gauche seulement : la personne reste dégagée. */
/* Aucun voile : mesurée, la photo est à 38-41 de luminance sous le titre,
   soit 15:1 de contraste pour du blanc. C'est l'ombre portée des lettres,
   locale, qui assure la lisibilité — l'image reste nue. */
.hero__over{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:0 clamp(16px,2.4vw,46px) clamp(14px,2.2vw,38px);
  max-width:100%;
}
.hero__title{
  /* Une ligne par élément : « Florian Fabre » puis « Bruiteur », quelle que
     soit la largeur de l'écran — le retour n'est plus laissé au hasard. */
  display:flex; flex-direction:column; align-items:flex-start;
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; color:#fff;
  font-size:clamp(34px, 8.2vw, 116px); line-height:.9; letter-spacing:-.015em;
  margin:0 0 .16em;
  text-shadow:0 1px 3px rgba(10,10,12,.55), 0 2px 22px rgba(10,10,12,.6);
}
.hero__title span{display:inline-block; opacity:0; animation:up 1s var(--ease) forwards}
.hero__job{color:var(--brass-2)}
.hero__title span:nth-child(1){animation-delay:.18s}
.hero__title span:nth-child(2){animation-delay:.3s}
.hero__role{
  margin:0; color:rgba(255,255,255,.9);
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.3em;
  font-size:clamp(10px, 1.15vw, var(--fs-200));
  opacity:0; animation:up 1s .44s var(--ease) forwards;
  text-shadow:0 1px 2px rgba(10,10,12,.6), 0 1px 14px rgba(10,10,12,.7);
}
@keyframes up{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

.hero__text{margin-top:clamp(30px,4vw,52px); display:grid; gap:24px; justify-items:start}
/* Lignes équilibrées, et « campagne charentaise » liés par une espace
   insécable : plus de mot seul en bas. */
.hero__lede{max-width:46ch; margin:0; font-size:clamp(17px,1.5vw,21px); color:var(--ink); text-wrap:balance}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px}

.hero__stats{
  position:relative; list-style:none; margin:clamp(30px,4vw,52px) auto 0; padding-top:24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
/* Le filet suit la colonne, il ne déborde pas dans les marges du .wrap */
.hero__stats::before{
  content:""; position:absolute; top:0; left:var(--pad); right:var(--pad);
  height:1px; background:var(--line);
}
.hero__stats li{display:flex; flex-direction:column; gap:6px}
.hero__stats li > span{font-size:var(--fs-100); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--muted)}
.stat{
  font-family:var(--ff-display); font-style:italic; font-weight:600; color:var(--ink);
  font-size:clamp(30px,3.4vw,48px); line-height:1; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}

/* ---------- Sections ---------- */
.sec{padding-block:var(--sec-y); position:relative}
.sec--alt{background:var(--paper-2)}
.sec__head{display:grid; grid-template-columns:1fr minmax(0,42ch); gap:clamp(18px,4vw,60px); align-items:end; margin-bottom:clamp(24px,3.2vw,44px)}
.sec__head--solo{grid-template-columns:1fr}
.sec__head-note{color:var(--muted); margin:0}

.studio-intro{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); margin-bottom:clamp(28px,3.6vw,48px)}
.studio-intro p:last-child{margin-bottom:0}

.intro{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.4fr) minmax(0,.62fr); gap:clamp(20px,3vw,44px); align-items:center}
.intro__txt{min-width:0}
.intro__txt p:not(.eyebrow):not(.h2){font-size:var(--fs-400); color:var(--body); max-width:46ch}
.intro__ph{margin:0; position:relative}
.intro__ph img{width:100%; height:auto; aspect-ratio:600/1125; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-2); filter:saturate(.92) contrast(1.02)}

.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,80px); align-items:start}


.portrait{margin:0; position:relative}
.portrait img{width:100%; height:auto; border-radius:var(--r); box-shadow:var(--sh-2); filter:saturate(.92) contrast(1.02)}
.portrait figcaption{margin-top:12px; font-size:var(--fs-200); color:var(--muted)}


/* ---------- Filmographie ---------- */
.filmo__bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:26px}
.field{position:relative; display:block}
.field input,.field select{
  background:var(--card); border:1px solid var(--edge); border-radius:var(--r); color:var(--ink);
  padding:12px 16px; min-width:190px; outline:none; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus,.field select:focus{border-color:var(--brass)}
.field select{appearance:none; padding-right:38px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.sortbar{display:flex; align-items:center; gap:2px; border:1px solid var(--edge); border-radius:var(--r); background:var(--card); padding:3px}
.sortbar__label{font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-100); color:var(--muted); padding:0 9px 0 7px}
.sortbtn{
  border:0; background:none; cursor:pointer; border-radius:var(--r); padding:9px 14px; color:var(--body);
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-200);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.sortbtn:hover{color:var(--ink)}
.sortbtn.is-on{background:var(--ink); color:var(--paper)}

.filmo__count{margin:0 0 0 auto; font-size:var(--fs-200); letter-spacing:var(--tr-btn); text-transform:uppercase; color:var(--muted)}

.filmo__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(16px,1.8vw,26px) clamp(14px,1.4vw,20px);
}
.film{text-decoration:none; display:flex; flex-direction:column; gap:9px}
.film__poster{
  position:relative; display:block; aspect-ratio:2/3; overflow:hidden; border-radius:var(--r);
  background:var(--paper-2); box-shadow:var(--sh-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.film__poster img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.film:hover .film__poster{transform:var(--lift); box-shadow:var(--sh-2)}
.film:hover .film__poster img{transform:scale(1.05)}
.film__year{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--ink); color:var(--paper);
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-100); letter-spacing:var(--tr-label);
  padding:3px 9px 2px;
}
.film:hover .film__year{background:var(--brass)}
.film__noposter{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  height:100%; padding:16px; gap:8px;
  background:linear-gradient(160deg, var(--card), var(--paper-2));
  border:1px solid var(--line-2);
}
.film__noposter em{font-family:var(--ff-display); font-style:normal; font-size:34px; color:var(--brass); line-height:1}
.film__noposter b{font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-200); color:var(--ink); line-height:1.15}
.film__poster:has(.film__noposter) .film__year{display:none}
.film__title{font-size:var(--fs-300); line-height:1.28; color:var(--ink); font-weight:500}
.film:hover .film__title{color:var(--brass)}
.film__meta{font-size:var(--fs-100); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--muted); margin-top:-4px}
.filmo__more{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-top:28px}
.filmo__empty{padding:40px 0; color:var(--muted); grid-column:1/-1}

/* ---------- Galerie ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(150px,17vw,240px);
  gap:clamp(8px,1vw,14px); margin-bottom:clamp(28px,4vw,52px);
}
.gallery button{padding:0; border:0; background:var(--paper-2); cursor:pointer; overflow:hidden; border-radius:var(--r); position:relative}
.gallery button:first-child{grid-column:span 2; grid-row:span 2}
.gallery img{width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.02); transition:transform .7s var(--ease), filter .5s var(--ease)}
.gallery button:hover img{transform:scale(1.05); filter:saturate(1.05)}
.gallery button::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--r)}

/* ---------- Specs ---------- */
/* ---------- Fiche technique repliable ----------
   <details> natif : aucun JavaScript, accessible au clavier d'origine, et le
   contenu reste dans le HTML pour les moteurs de recherche même replié. */
.fold{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fold summary{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:22px 2px; cursor:pointer; list-style:none;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover .fold__t{color:var(--brass)}
.fold__t{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tr-label); font-size:var(--fs-300); color:var(--ink);
}
.fold__h{font-size:var(--fs-200); color:var(--muted); flex:1 1 auto; min-width:0}
.fold summary::after{
  content:"+"; margin-left:auto; flex:0 0 auto;
  font-family:var(--ff-display); font-weight:600; font-size:24px; line-height:1;
  color:var(--brass); transform:translateY(2px);
}
.fold[open] summary::after{content:"–"}
.fold[open] .fold__h{display:none}
.fold .specs{margin:0 0 26px}

.specs{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.spec{background:var(--card); padding:26px 24px}
.spec h3{font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-200); color:var(--brass); margin:0 0 14px}
.spec ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.spec li{font-size:var(--fs-300); color:var(--ink)}

/* ---------- Vidéo ---------- */
.video-wrap{max-width:860px}
.video{display:block; position:relative; aspect-ratio:16/9; width:100%; border-radius:var(--r); overflow:hidden; cursor:pointer; border:1px solid var(--line); background:var(--ink)}
.video img{width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .5s var(--ease), transform .8s var(--ease)}
.video:hover img{opacity:1; transform:scale(1.02)}
video.video{object-fit:cover}
video.video::-webkit-media-controls-enclosure{border-radius:0}
.video__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:86px; height:86px; border-radius:50%; border:1px solid rgba(250,248,244,.8); background:rgba(21,21,26,.35);
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.video__play::after{content:""; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%); border-left:20px solid var(--paper); border-top:12px solid transparent; border-bottom:12px solid transparent}
.video:hover .video__play{background:var(--brass); border-color:var(--brass); transform:translate(-50%,-50%) scale(1.06)}
.video__note{margin-top:14px; font-size:var(--fs-200); color:var(--muted)}

/* ---------- Facts ---------- */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); margin:28px 0 0; overflow:hidden}
.facts>div{background:var(--card); padding:20px}
.facts dt{font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-100); color:var(--brass); margin-bottom:6px; min-height:2.5em}
.facts dd{margin:0; font-size:var(--fs-300); color:var(--ink)}

.map{margin:0}
.map__frame{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; aspect-ratio:4/3; background:var(--paper-2);
}
/* L'iframe est débordée par le bas : la barre d'attribution d'OSM sort du
   cadre, et l'attribution — obligatoire — est reportée en légende dessous. */
.map__frame iframe{
  position:absolute; inset:0 0 auto 0; width:100%; height:calc(100% + 34px); border:0;
  filter:grayscale(1) contrast(.92) brightness(1.05) sepia(.14);
}
.map figcaption{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:10px; font-size:var(--fs-200); color:var(--muted);
}
.map figcaption a{color:var(--brass); text-decoration:none}
.map figcaption a:hover{text-decoration:underline}

/* ---------- Presse ---------- */
.press{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.press__item:first-child{grid-column:span 2}
.press__item:first-child img{aspect-ratio:2/1}
.press__item{text-decoration:none; border:1px solid var(--line); background:var(--card); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease)}
a.press__item:hover{border-color:var(--brass); transform:var(--lift); box-shadow:var(--sh-2)}
.press__item--nolink{cursor:default}
.press__item img{aspect-ratio:16/10; object-fit:cover; width:100%; filter:saturate(.92) contrast(1.02); transition:filter .4s var(--ease)}
a.press__item:hover img{filter:saturate(1.05)}
.press__item>div{padding:20px}
.press__src{font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-100); color:var(--brass)}
.press__item h3{font-size:var(--fs-300); font-weight:500; line-height:1.35; margin:8px 0 0; color:var(--ink)}

/* ---------- Contact ---------- */
.contact-list{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.contact-list li{background:var(--card); padding:16px 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.contact-list span{font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-100); color:var(--muted)}
.contact-list a{text-decoration:none; color:var(--ink)}
.contact-list a:hover{color:var(--brass)}
.contact-social{display:flex; gap:16px; font-family:var(--ff-text) !important; text-transform:none !important; letter-spacing:normal !important; font-size:var(--fs-300) !important; color:var(--ink) !important}

.hp{display:none}
.form{display:grid; gap:16px}
.form label{display:grid; gap:7px}
.form label span{font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tr-label); font-size:var(--fs-100); color:var(--muted)}
.form input,.form textarea{
  background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:13px 15px; color:var(--ink);
  outline:none; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); resize:vertical; width:100%;
}
.form input:focus,.form textarea:focus{border-color:var(--brass)}
.form .btn{justify-self:start}
.form__note{font-size:var(--fs-200); color:var(--muted); margin:0}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line); padding-block:28px; font-size:var(--fs-200); color:var(--muted)}
.foot__in{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.foot p{margin:0}
.foot nav{display:flex; gap:22px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--brass)}

/* ---------- Lightbox ---------- */
.lb{position:fixed; inset:0; z-index:120; background:rgba(21,21,26,.93); display:flex; align-items:center; justify-content:center; padding:4vh 5vw; backdrop-filter:blur(6px)}
.lb[hidden]{display:none}
.lb img{width:auto; height:auto; max-width:92vw; max-height:88vh; object-fit:contain; border-radius:var(--r); box-shadow:var(--sh-3)}
.lb__close,.lb__nav{position:absolute; background:none; border:0; color:var(--paper); cursor:pointer; opacity:.75; transition:opacity .25s var(--ease), color .25s var(--ease)}
.lb__close{top:22px; right:26px; font-size:44px; line-height:1}
.lb__nav{top:50%; transform:translateY(-50%); font-size:58px; line-height:1; padding:0 18px}
.lb__nav--prev{left:6px}
.lb__nav--next{right:6px}
.lb__close:hover,.lb__nav:hover{opacity:1; color:var(--brass-2)}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- Grain ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:150; pointer-events:none; opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,3vw,36px)}
  .intro__txt{grid-column:1/-1; order:-1}
  .intro__ph--l,.intro__ph--r{margin:0; align-self:stretch}
}
@media (max-width:980px){
  .grid-2,.studio-intro{grid-template-columns:1fr}
  .press{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
  .specs{grid-template-columns:repeat(2,1fr)}
  .sec__head{grid-template-columns:1fr}
}
@media (max-width:1120px){
  .burger{display:block}
  .nav{
    position:fixed; inset:0 0 auto 0; flex-direction:column; align-items:flex-start; gap:6px;
    background:rgba(250,248,244,.98); backdrop-filter:blur(16px); padding:96px var(--pad) 34px;
    transform:translateY(-100%); transition:transform .5s var(--ease), visibility .5s;
    visibility:hidden; border-bottom:1px solid var(--line);
  }
  .nav.is-open{transform:none; visibility:visible}
  .nav a{font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:var(--tr-btn); font-size:clamp(20px,2.6vw,26px); padding:9px 0; white-space:normal}
  .nav__cta{margin-top:12px; font-size:var(--fs-300) !important; padding:11px 22px !important}
  .hdr{padding-block:14px}
}
@media (max-width:620px){
  /* Sur téléphone, l'aperçu du matériel passerait sur trois lignes : on ne
     garde que l'intitulé, la ligne repliée reste compacte. */
  .fold__h{display:none}
  .fold summary{padding-block:18px}

  .filmo__grid{grid-template-columns:repeat(2,1fr)}
  .press{grid-template-columns:1fr}
  .press__item:first-child{grid-column:auto}
  .press__item:first-child img{aspect-ratio:16/10}
  .hero__over{padding-bottom:20px}
  .hero__stats{grid-template-columns:repeat(2,1fr); gap:22px}
  .specs{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:132px}
  .facts{grid-template-columns:1fr}
  .filmo__count{margin-left:0}
  .sortbar{width:100%; justify-content:space-between}
  .sortbtn{flex:1}
}
/* ---------- Hero sur téléphone ----------
   Le format 2,05:1 dans une colonne de 335 px ne donne qu'une bande de 163 px.
   On passe en 4:3 pleine largeur : 375 x 281, soit 1,7 fois plus haut.
   La source (2,05:1) étant bien plus large que 4:3, `cover` rogne UNIQUEMENT
   sur les côtés : la hauteur de l'image est conservée intégralement.
   Seuil à 520 px et non 620 : au-delà, le 4:3 donnerait une image trop haute. */
@media (max-width:520px){
  .hero__img{
    margin-inline:calc(-1 * var(--pad));
    width:calc(100% + 2 * var(--pad));
    border-radius:0;
  }
  .hero__img img{aspect-ratio:4/3; object-fit:cover; object-position:40% 50%}
  .hero__title{font-size:clamp(40px, 11.8vw, 58px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .hero__title span,.hero__lede,.hero__actions,.hero__stats{opacity:1}
}