/* ==========================================================================
   Mikael De Franceschi — feuille de style
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Monde anthracite : le site est sombre de bout en bout, les photos
     apportent la seule couleur. --h/--s pilotent toute l'ambiance. */
  --h: 220;          /* teinte, quasi neutre */
  --s: 5%;           /* saturation très basse */

  --ground:     hsl(var(--h) var(--s) 15%);             /* fond général */
  --ground-2:   hsl(var(--h) var(--s) 19%);
  --surface:    hsl(var(--h) calc(var(--s) + 2%) 7%);   /* blocs sombres */
  --surface-2:  hsl(var(--h) calc(var(--s) + 1%) 11%);

  /* le fond étant sombre partout, le texte « sombre » devient clair */
  --ink:        hsl(var(--h) 8% 91%);
  --ink-soft:   hsl(var(--h) 6% 70%);
  --ink-faint:  hsl(var(--h) 5% 54%);
  --chalk:      hsl(var(--h) 10% 96%);
  --chalk-soft: hsl(var(--h) 6% 64%);
  --accent:     hsl(32 48% 62%);                        /* sable, en contrepoint */

  /* alias : les règles écrites pour la version claire continuent de marcher */
  --ivory:      var(--ground);
  --ivory-warm: var(--ground-2);
  --night:      var(--surface);
  --night-soft: var(--surface-2);

  --line:       hsl(var(--h) 10% 96% / .14);
  --line-dark:  hsl(var(--h) 10% 96% / .16);

  --ff-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ff-ui:      'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pad:        clamp(1.25rem, 5vw, 6rem);
  --gutter:     clamp(1rem, 2.4vw, 2.25rem);
  --section-y:  clamp(3rem, 7vh, 5.5rem);

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --dur:        .7s;

  --radius:     clamp(20px, 2.4vw, 38px);
  --radius-sm:  clamp(12px, 1.4vw, 22px);

  --header-h:   72px;
}

html[dir="rtl"]{
  --ff-display: 'Amiri', 'Cormorant Garamond', serif;
  --ff-ui:      'Noto Sans Arabic', 'Jost', sans-serif;
}
html[lang="fa"]{
  --ff-display: 'Vazirmatn', 'Amiri', serif;
  --ff-ui:      'Vazirmatn', 'Noto Sans Arabic', sans-serif;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--ff-ui);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.no-scroll{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--accent); color:#fff; }

:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

/* ---------- 3. Typographie ---------- */
.kicker{
  font-family:var(--ff-ui);
  font-size:.68rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1.4rem;
}
html[dir="rtl"] .kicker{ letter-spacing:0; font-size:.78rem; }

.section--dark .kicker,
.contact .kicker{ color:var(--chalk-soft); }

.h2{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(2.1rem,5.2vw,4.2rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
}
.h1-alt{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(2.6rem,7vw,6rem);
  line-height:1;
  letter-spacing:-.02em;
  margin:0 0 1.2rem;
}
html[dir="rtl"] .h2, html[dir="rtl"] .h1-alt{ letter-spacing:0; line-height:1.3; }

.prose p{ margin:0 0 1.35em; color:var(--ink-soft); max-width:62ch; }
.prose p:first-child{ font-size:1.12em; color:var(--ink); }
.prose p:last-child{ margin-bottom:0; }

/* ---------- 4. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:200;
  pointer-events:none;
}
.preloader__panel{
  position:absolute; left:0; width:100%; height:50.5%;
  background:var(--night);
  transition:transform 1.05s var(--ease-out);
}
.preloader__panel--top{ top:0; }
.preloader__panel--bottom{ bottom:0; }
.preloader__inner{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem;
  transition:opacity .5s ease, transform .9s var(--ease-out);
}
.preloader__logo{
  width:clamp(96px,13vw,168px); height:auto;
  color:var(--chalk);
  overflow:visible;
}
/* le groupe interne applique scale(.1) : l'épaisseur est donc exprimée
   dans l'espace pré-transformation (250 ≈ 25 unités du viewBox) */
.preloader__logo use{
  fill:var(--chalk);
  fill-opacity:0;
  stroke:var(--chalk);
  stroke-width:250;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.preloader__word{
  font-family:var(--ff-display);
  font-size:clamp(.95rem,1.5vw,1.15rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--chalk-soft);
  opacity:0; transform:translateY(8px);
  transition:opacity .8s ease .1s, transform .8s var(--ease-out) .1s;
}
html[dir="rtl"] .preloader__word{ letter-spacing:.06em; }

/* états pilotés par JS */
.preloader.is-drawing .preloader__logo use{
  animation:draw 1.25s var(--ease-out) forwards;
}
.preloader.is-drawing #pl-m{ animation-delay:.05s; }
.preloader.is-drawing #pl-d{ animation-delay:.25s; }
.preloader.is-drawing #pl-slash{ animation-delay:.62s; animation-duration:.95s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* écran tactile : vrais tracés à longueur mesurée (voir runPreloader),
   ces règles ne concernent aucun élément sur ordinateur */
.preloader__logo .pl-path{
  fill:var(--chalk); fill-opacity:0;
  stroke:var(--chalk); stroke-width:250;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--pl-len); stroke-dashoffset:var(--pl-len);
}
.preloader.is-drawing .preloader__logo .pl-path{ animation:draw 1.25s var(--ease-out) forwards; }
.preloader.is-filled .preloader__logo .pl-path{
  fill-opacity:1; stroke-opacity:0;
  transition:fill-opacity .75s ease, stroke-opacity .6s ease .18s;
}

.preloader.is-filled .preloader__logo use{
  fill-opacity:1;
  stroke-opacity:0;
  transition:fill-opacity .75s ease, stroke-opacity .6s ease .18s;
}
.preloader.is-filled .preloader__word{ opacity:1; transform:none; }

.preloader.is-out .preloader__inner{ opacity:0; transform:translateY(-14px); }
.preloader.is-out .preloader__panel--top{ transform:translateY(-100%); }
.preloader.is-out .preloader__panel--bottom{ transform:translateY(100%); }
.preloader.is-done{ display:none; }

@media (prefers-reduced-motion: reduce){
  .preloader__logo use{ animation:none !important; stroke-dashoffset:0; fill-opacity:1; stroke-opacity:0; }
  .preloader__panel{ transition-duration:.3s; }
}

/* ---------- 5. Header ---------- */
.header{
  position:fixed; top:0; inset-inline:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-inline:var(--pad);
  color:var(--chalk);
  transition:background .5s var(--ease), color .5s var(--ease), height .4s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(244,241,234,.94);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  color:var(--ink);
  border-bottom-color:var(--line);
}

.header__brand{ display:flex; align-items:center; gap:.7rem; }
/* les <use> n'héritent pas de `color` : le fill doit être explicite */
.brandmark,.footer__mark,.preloader__logo{ fill:currentColor; }
.brandmark{ width:44px; height:44px; flex:none; }
.header__name{ display:flex; flex-direction:column; line-height:1.15; }
.header__name b{
  font-family:var(--ff-display); font-weight:400;
  font-size:1rem; letter-spacing:.06em;
}
.header__name i{
  font-style:normal; font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; opacity:.62;
}
html[dir="rtl"] .header__name i{ letter-spacing:.02em; font-size:.66rem; }

.nav__list{ display:flex; align-items:center; gap:clamp(1rem,2.1vw,2.1rem); }
.nav__list a{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  position:relative; padding-block:.35rem; white-space:nowrap;
  transition:opacity .3s;
}
html[dir="rtl"] .nav__list a{ letter-spacing:0; font-size:.82rem; }
.nav__list a::after{
  content:''; position:absolute; inset-inline-start:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:var(--o,left);
  transition:transform .45s var(--ease-out);
}
html[dir="rtl"] .nav__list a::after{ --o:right; }
.nav__list a:hover::after,.nav__list a.is-active::after{ transform:scaleX(1); }
.nav__foot{ display:none; }

/* le panneau .nav est un enfant du header : les outils doivent rester
   au-dessus de lui pour que le burger reste cliquable menu ouvert */
.header__tools{ display:flex; align-items:center; gap:1rem; position:relative; z-index:101; }
.header__brand{ position:relative; z-index:101; }

/* sélecteur de langue */
.langswitch{ position:relative; }
.langswitch__toggle{
  display:flex; align-items:center; gap:.42rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.4rem .1rem;
}
.langswitch__toggle svg{ width:9px; height:6px; transition:transform .35s var(--ease); }
.langswitch.is-open .langswitch__toggle svg{ transform:rotate(180deg); }
.langswitch__list{
  position:absolute; inset-inline-end:0; top:calc(100% + .55rem);
  min-width:9.5rem; padding:.4rem 0;
  background:var(--night); color:var(--chalk);
  border:1px solid var(--line-dark);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s, transform .3s var(--ease), visibility .3s;
}
.header.is-stuck .langswitch__list{ background:#fff; color:var(--ink); border-color:var(--line); }
.langswitch.is-open .langswitch__list{ opacity:1; visibility:visible; transform:none; }
.langswitch__list button{
  display:block; width:100%; text-align:start;
  padding:.5rem 1.1rem; font-size:.82rem; letter-spacing:.05em;
  transition:background .25s, color .25s;
}
.langswitch__list button:hover,
.langswitch__list button[aria-selected="true"]{ background:rgba(169,139,98,.16); color:var(--accent); }

/* burger */
.burger{ display:none; width:26px; height:16px; position:relative; }
.burger span{
  position:absolute; inset-inline:0; height:1px; background:currentColor;
  transition:transform .45s var(--ease-out), opacity .3s;
}
.burger span:first-child{ top:3px; }
.burger span:last-child{ bottom:3px; }
.burger.is-open span:first-child{ transform:translateY(4.5px) rotate(45deg); }
.burger.is-open span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
/* Hero épinglé le temps d'être recouvert, puis il sort du flux.
   Un calque `fixed` resterait derrière toute la page : lors d'un défilement
   rapide le navigateur ne repeint pas le contenu assez vite et le calque
   transparaît. Avec `sticky` borné par .hero-wrap, le hero n'existe plus
   au-delà des deux premiers écrans. */
.hero{
  position:sticky; top:0; height:100svh;
  z-index:0;
  display:flex; align-items:flex-end;
  padding:var(--pad);
  padding-bottom:clamp(3rem,9vh,6rem);
  color:var(--chalk);
  background:var(--night);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__video{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.06);
  opacity:0;
  transition:opacity 1.4s ease, transform 2.4s var(--ease-out);
}
body.is-ready .hero__video{ opacity:1; transform:scale(1); }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,11,12,.92) 0%, rgba(11,11,12,.35) 42%, rgba(11,11,12,.18) 68%, rgba(11,11,12,.5) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(11,11,12,.45) 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__content{ position:relative; z-index:2; max-width:min(60rem,100%); }
.hero__title{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(2.9rem,10.5vw,10rem);
  line-height:.92; letter-spacing:-.025em;
  margin:0 0 1.4rem;
}
html[dir="rtl"] .hero__title{ letter-spacing:0; line-height:1.16; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease-out);
}
.hero__title .line:nth-child(2) > span{ transition-delay:.1s; }
body.is-ready .hero__title .line > span{ transform:none; }

.hero__sub{
  font-size:clamp(.95rem,1.5vw,1.22rem);
  color:rgba(237,233,225,.8); max-width:34ch; margin:0;
  opacity:0; transform:translateY(16px);
  transition:opacity .9s ease .25s, transform .9s var(--ease-out) .25s;
}
body.is-ready .hero__sub{ opacity:1; transform:none; }


/* ---------- 8. Portrait ---------- */
.portrait{ padding:0 var(--pad) var(--section-y); background:var(--ivory); }
.portrait__grid{
  display:grid; gap:clamp(2.5rem,5vw,5.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:start;
}
/* le portrait accompagne la lecture au lieu de laisser la colonne vide */
.portrait__media{
  margin:0; position:sticky; top:calc(var(--header-h) + 2.5rem);
}
.portrait__media img{ width:100%; height:auto; filter:grayscale(1) contrast(1.04); }
.portrait__caption{
  margin-top:.9rem; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
html[dir="rtl"] .portrait__caption{ letter-spacing:.03em; }
.portrait__text .h2{ margin-bottom:2rem; max-width:16ch; }

/* lien de téléchargement du CV, seul sous la biographie */
.cvlink{
  display:inline-block;
  margin-top:clamp(2.4rem,5vw,3.4rem);
  padding:.9rem 1.6rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--chalk);
  border:1px solid var(--line-dark);
  transition:background .4s, border-color .4s, color .4s, gap .4s var(--ease-out);
}
html[dir="rtl"] .cvlink{ letter-spacing:.02em; font-size:.8rem; }
.cvlink:hover{ background:var(--chalk); color:var(--surface); border-color:var(--chalk); }

/* ---------- 10. Sections génériques ---------- */
.section{ padding:var(--section-y) var(--pad); }
.section--dark{ background:var(--night); color:var(--chalk); }
.section--dark .h2{ color:var(--chalk); }
.section__head{ max-width:78rem; margin:0 auto clamp(2.6rem,6vh,4.5rem); }
.section__head--center{ text-align:center; }

/* ---------- 11. Filmographie ----------
   Le millésime sert de repère de lecture, le rang du rôle porte la
   hiérarchie que cherche un directeur de casting. */
.filmo{ max-width:78rem; margin:0 auto; }

/* Deux colonnes : la liste en une seule colonne faisait deux écrans de haut.
   Le millésime passe en tête de groupe plutôt qu'en rail latéral, ce qui
   supprime au passage l'épinglage qui accrochait la barre au défilement. */
.filmo__year{ display:block; }
.filmo__year + .filmo__year{ margin-top:clamp(2.5rem,6vh,4.5rem); }
.filmo__yearmark{
  margin:0 0 .6rem;
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--chalk-soft);
  letter-spacing:.01em;
}
.filmo__yearmark span{ display:block; }
.filmo__list{
  border-top:1px solid var(--line-dark);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,4.5rem);
}

.filmo__item{ border-bottom:1px solid var(--line-dark); }
/* en grille, les deux dernières entrées d'un groupe ferment le bloc */
.filmo__item:last-child,
.filmo__item:nth-last-child(2):nth-child(odd){ border-bottom:0; }
.filmo__row{
  display:block;
  padding:clamp(1.5rem,3.2vh,2.4rem) 0;
}
.filmo__month{
  margin:0 0 .5rem; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--chalk-soft);
}
html[dir="rtl"] .filmo__month{ letter-spacing:.02em; font-size:.78rem; }
.filmo__title{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.5rem,3.1vw,2.5rem); line-height:1.1; margin:0 0 .35rem;
}
.filmo__format{ font-size:.86rem; color:var(--chalk-soft); margin:0; }
.filmo__credit{ font-size:.8rem; color:rgba(164,159,150,.75); margin:.25rem 0 0; }

/* rang du rôle : un filet précède le libellé, sa densité dit le poids */
/* le rang du rôle se lit à la couleur seule : doré pour un premier rôle,
   ivoire pour un rôle secondaire, atténué pour une silhouette */
.filmo__rank{
  display:block; margin:.6rem 0 .3rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--chalk-soft);
}
html[dir="rtl"] .filmo__rank{ letter-spacing:.02em; font-size:.8rem; }
.filmo__item[data-rank="lead"] .filmo__rank{ color:var(--accent); }
.filmo__item[data-rank="supporting"] .filmo__rank{ color:var(--chalk); }
.filmo__character{
  margin:0; font-family:var(--ff-display); font-style:italic;
  font-size:1.18rem; line-height:1.3; color:var(--chalk);
}
html[dir="rtl"] .filmo__character{ font-style:normal; }
.filmo__item[data-rank="lead"] .filmo__title{ color:#fff; }

/* la distinction se signale par la couleur dorée seule, sans pictogramme */
.filmo__award{
  display:block; margin:.75rem 0 0;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); max-width:34ch;
}
html[dir="rtl"] .filmo__award{ letter-spacing:.02em; font-size:.8rem; }

/* ---------- 12. Showreel ---------- */
/* la démo d'interprétation en pleine largeur, les deux autres dessous */
.showreel__grid{ max-width:78rem; margin:0 auto; }
.showreel__rest{
  display:grid; gap:var(--gutter); align-items:start;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  margin-top:clamp(2.6rem,6vh,4.5rem);
}
.showreel__col{ display:flex; flex-direction:column; gap:var(--gutter); min-width:0; }
.reel{ position:relative; overflow:hidden; background:#000; }
.reel__frame{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.reel--portrait .reel__frame{ aspect-ratio:9/16; }
.reel video,.reel img{ width:100%; height:100%; object-fit:cover; }
.reel__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.1));
  transition:opacity .45s, background .45s;
}
/* le bandeau titre repose sur le bas du cadre : il lui faut plus d'assise */
.reel--feature .reel__play{
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.08) 100%);
}
.reel__play span{
  width:64px; height:64px; border:1px solid rgba(237,233,225,.55); border-radius:50%;
  display:grid; place-items:center; color:var(--chalk);
  transition:background .4s, transform .5s var(--ease-out), border-color .4s;
}
.reel__play span::after{
  content:''; width:0; height:0; margin-inline-start:4px;
  border-inline-start:11px solid currentColor; border-block:7px solid transparent;
}
html[dir="rtl"] .reel__play span::after{ transform:scaleX(-1); margin-inline-start:0; margin-inline-end:4px; }
.reel:hover .reel__play span{ background:rgba(237,233,225,.16); transform:scale(1.06); border-color:var(--chalk); }
.reel.is-playing .reel__play{ opacity:0; pointer-events:none; }
/* --- pièce maîtresse --- */
.reel__stage{ position:relative; }
.reel--feature .reel__frame{ aspect-ratio:var(--ratio, 2.4/1); }
.reel--feature .reel__play span{ width:88px; height:88px; }
.reel--feature .reel__play span::after{ border-inline-start-width:15px; border-block-width:9px; }
.reel__banner{
  position:absolute; z-index:2; inset-inline-start:0; bottom:0;
  padding:clamp(1.2rem,3vw,2.4rem);
  pointer-events:none;
  transition:opacity .45s;
}
.reel--feature.is-playing .reel__banner{ opacity:0; }
.reel__label{
  display:inline-block; margin:0 0 .7rem;
  padding:.34rem .8rem;
  background:var(--accent); color:#fff;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
}
html[dir="rtl"] .reel__label{ letter-spacing:.02em; font-size:.72rem; }
.reel__headline{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.8rem,4vw,3.2rem); line-height:1.05;
  margin:0 0 .35rem; color:var(--chalk);
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
html[dir="rtl"] .reel__headline{ line-height:1.4; }
.reel__banner .reel__sub{ text-shadow:0 1px 14px rgba(0,0,0,.6); }
.reel__note{
  max-width:56ch; margin:1.4rem 0 0;
  font-size:.98rem; color:var(--chalk-soft);
}

.reel__meta{ padding:1.1rem .2rem 0; }
.reel__title{ font-family:var(--ff-display); font-size:1.25rem; font-weight:400; margin:0; }
.reel__sub{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--chalk-soft); margin:.35rem 0 0; }
html[dir="rtl"] .reel__sub{ letter-spacing:.02em; font-size:.78rem; }

/* ---------- 13. Campagnes — rangées alternées ---------- */
.cards{
  max-width:80rem; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(3.5rem,8vh,7rem);
}
.camp{
  display:grid; align-items:center;
  gap:clamp(1.6rem,4vw,4.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
}
/* une campagne sur deux inverse image et texte */
.camp:nth-child(even) .camp__media{ order:2; }
.camp__media{
  margin:0; overflow:hidden; background:var(--ivory-warm);
  /* la hauteur se règle par la largeur de colonne, pas par un plafond :
     un max-height empêcherait l'image de remplir sa colonne */
  aspect-ratio:4/5;
}
.camp__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1);
  transition:transform 1.3s var(--ease-out), filter .8s;
}
.camp:hover .camp__media img{ transform:scale(1.04); filter:grayscale(0); }
.camp__date{
  margin:0 0 1.1rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}
html[dir="rtl"] .camp__date{ letter-spacing:.02em; font-size:.76rem; }
.camp__title{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.06; letter-spacing:-.015em;
  margin:0 0 .7rem;
}
html[dir="rtl"] .camp__title{ letter-spacing:0; line-height:1.3; }
.camp__tag{
  display:block; margin:0 0 1.4rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
html[dir="rtl"] .camp__tag{ letter-spacing:.02em; font-size:.76rem; }
.camp__text{ margin:0; max-width:44ch; color:var(--ink-soft); font-size:1rem; }

/* ---------- 14. Marques ---------- */
.brands{ padding:var(--section-y) 0; background:var(--ivory-warm); overflow:hidden; }
/* photo à gauche, intitulé à droite ; les logos défilent dessous */
.brands__top{
  max-width:78rem; margin:0 auto;
  padding-inline:var(--pad);
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.8rem,5vw,5rem);
}
/* l'accroche est plus longue qu'avant : elle a besoin de largeur */
.brands__head .h2{ max-width:19ch; text-wrap:balance; }
/* le logo de la maison mise en avant, sous l'intitulé */
/* le logo tient lieu du nom de la maison dans l'accroche. `width:fit-content`
   sur l'en-tête le ramène à la largeur réelle du texte : le logo s'y centre
   donc sous la phrase, et non au milieu de toute la colonne. */
/* Bloc centré : titre et logo partagent le même axe, le centrage est donc
   naturel et n'a plus besoin d'être calculé. */
.brands__head{ text-align:center; }
/* le bloc glisse un peu vers la photo : la marge de fin décale son axe */
.brands__head{ margin-inline-end:clamp(0rem,7vw,7rem); }
.brands__head .h2{ margin-inline:auto; }
.brands__feature{
  display:block; margin:clamp(1.6rem,3.4vw,2.6rem) auto 0;
  height:clamp(64px,7vw,104px); width:auto;
  filter:grayscale(1) invert(1); opacity:.95;
}
.brands__media{ margin:0; overflow:hidden; aspect-ratio:5/7; background:var(--surface-2); }
.brands__media img,
.brands__media video{ width:100%; height:100%; object-fit:cover; }
.brands__more{
  max-width:78rem; margin:0 auto clamp(1.6rem,3vh,2.4rem);
  padding-inline:var(--pad);
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}
html[dir="rtl"] .brands__more{ letter-spacing:.03em; font-size:.8rem; }
.marquee{ position:relative; display:flex; gap:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{
  display:flex; align-items:center; gap:clamp(3rem,6vw,6rem);
  padding-inline-end:clamp(3rem,6vw,6rem); flex:none;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-100%); } }
html[dir="rtl"] .marquee__track{ animation-direction:reverse; }
.marquee img{
  height:clamp(30px,3.4vw,46px); width:auto; object-fit:contain;
  filter:grayscale(1);
  opacity:.5; transition:filter .5s, opacity .5s;
}
.marquee img:hover{ filter:none; opacity:1; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; } }

/* ---------- 15. Galerie ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:2rem; }
.filters button{
  padding:.5rem 1.1rem; border:1px solid var(--line-dark);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--chalk-soft); border-radius:999px;
  transition:color .35s, border-color .35s, background .35s;
}
html[dir="rtl"] .filters button{ letter-spacing:.02em; font-size:.78rem; }
.filters button:hover{ color:var(--chalk); border-color:var(--chalk-soft); }
.filters button.is-active{ background:var(--chalk); color:var(--night); border-color:var(--chalk); }

.grid{
  max-width:86rem; margin:0 auto;
  display:grid; gap:clamp(.5rem,1.1vw,1rem);
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;              /* comble les trous laissés par les tuiles hautes */
}
.tile{
  position:relative; margin:0; overflow:hidden; background:var(--night-soft);
  aspect-ratio:4/5; cursor:pointer;
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease-out);
}
.tile.is-in{ opacity:1; transform:none; }
.tile.is-hidden{ display:none; }
.tile--feat{ grid-row:span 2; aspect-ratio:4/10; }
.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.9);
  transition:transform 1.3s var(--ease-out), filter .7s;
}
.tile:hover img{ transform:scale(1.05); filter:grayscale(0) brightness(1); }
.tile::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(237,233,225,0); transition:box-shadow .4s;
}
.tile:hover::after{ box-shadow:inset 0 0 0 1px rgba(237,233,225,.28); }

/* ---------- 16. Presse — blocs de citation d'affiche ---------- */
.press{
  max-width:78rem; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.press__item{
  display:flex; flex-direction:column;
  padding:clamp(2rem,4vw,3.2rem);
  background:var(--ivory);
  transition:background .45s, color .4s;
}
.press__item:hover{ background:var(--ivory-warm); }
.press__quote{
  flex:1; margin:0 0 1.6rem;
  font-family:var(--ff-display); font-weight:300; font-style:italic;
  font-size:clamp(1.3rem,2.5vw,2rem); line-height:1.25;
  color:var(--ink); text-wrap:balance;
}
html[dir="rtl"] .press__quote{ font-style:normal; line-height:1.55; }
.press__src{
  display:block; margin:0 0 1.1rem;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
html[dir="rtl"] .press__src{ letter-spacing:.02em; font-size:.78rem; }
.press__go{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
html[dir="rtl"] .press__go{ letter-spacing:.02em; font-size:.76rem; }
.press__go::after{ content:'→'; margin-inline-start:.5rem; display:inline-block; transition:transform .4s var(--ease-out); }
html[dir="rtl"] .press__go::after{ content:'←'; }
.press__item:hover .press__go::after{ transform:translateX(5px); }
html[dir="rtl"] .press__item:hover .press__go::after{ transform:translateX(-5px); }

/* ---------- 17. Agences — regroupées par territoire ---------- */
.agencies{
  max-width:78rem; margin:0 auto;
  display:grid; gap:clamp(2.4rem,5vw,4.5rem);
  grid-template-columns:repeat(3,1fr);
}
.territory__head{
  padding-bottom:1.1rem; margin-bottom:.4rem;
  border-bottom:1px solid var(--chalk-soft);
}
.territory__place{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.1; margin:0;
}
.territory__zone{
  margin:.45rem 0 0;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--chalk-soft);
}
html[dir="rtl"] .territory__zone{ letter-spacing:.03em; font-size:.74rem; }
.territory__list li{ border-bottom:1px solid var(--line-dark); }
.agency{
  display:flex; align-items:baseline; gap:.6rem;
  padding:1rem 0;
  transition:color .35s, padding-inline-start .45s var(--ease-out);
}
a.agency:hover{ color:var(--accent); padding-inline-start:.6rem; }
.agency__n{ font-size:1rem; }
.agency__city{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--chalk-soft);
}
html[dir="rtl"] .agency__city{ letter-spacing:.02em; font-size:.74rem; }
.agency__link{ margin-inline-start:auto; color:var(--accent); font-size:.8rem; }

/* ---------- 18. Contact ---------- */
.contact{
  position:relative; overflow:hidden;
  padding:clamp(6rem,16vh,12rem) var(--pad);
  background:var(--night); color:var(--chalk);
  display:grid; place-items:center; text-align:center;
}
.contact__media{ position:absolute; inset:0; opacity:.38; }
.contact__media img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:grayscale(1) contrast(1.05); }
.contact::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(78% 70% at 50% 50%, rgba(11,11,12,.6), rgba(11,11,12,.93));
}
.contact__inner{ position:relative; z-index:2; max-width:44rem; }
.contact__lead{ color:var(--chalk-soft); margin:0 0 2.6rem; }
.contact__links{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.btn{
  display:inline-block; padding:1rem 2.1rem;
  background:var(--chalk); color:var(--night);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  transition:background .4s, color .4s, transform .4s var(--ease-out);
}
html[dir="rtl"] .btn{ letter-spacing:.02em; font-size:.84rem; }
.btn:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--chalk); box-shadow:inset 0 0 0 1px var(--line-dark); }
.btn--ghost:hover{ background:var(--chalk); color:var(--night); box-shadow:inset 0 0 0 1px var(--chalk); }
.contact__social{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; margin-top:2.8rem; }
.contact__social a{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-soft);
  padding-bottom:.25rem; border-bottom:1px solid transparent; transition:color .35s, border-color .35s;
}
html[dir="rtl"] .contact__social a{ letter-spacing:.02em; font-size:.78rem; }
.contact__social a:hover{ color:var(--chalk); border-color:var(--chalk-soft); }

/* ---------- 19. Footer ---------- */
.footer{ background:var(--night); color:var(--chalk-soft); padding:0 var(--pad) 2.2rem; }
.footer__top{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:center;
  text-align:center;
  padding:clamp(2.6rem,7vh,4.5rem) 0; border-top:1px solid var(--line-dark);
}
.footer__mark{ width:34px; height:34px; color:var(--chalk); opacity:.85; }
.footer__tag{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; margin:0; }
html[dir="rtl"] .footer__tag{ letter-spacing:.02em; font-size:.78rem; }
.footer__bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:1px solid var(--line-dark);
  font-size:.64rem; letter-spacing:.1em;
}

/* ---------- 20. Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:150;
  background:rgba(8,8,9,.985);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:clamp(1rem,5vw,4rem);
  opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__figure{ margin:0; max-width:min(92vw,1100px); max-height:88vh; display:flex; flex-direction:column; gap:1rem; }
.lightbox__figure img{ max-height:82vh; width:auto; margin-inline:auto; object-fit:contain; }
.lightbox__figure figcaption{
  text-align:center; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-soft);
}
.lightbox__close{
  position:absolute; top:clamp(1rem,3vw,2rem); inset-inline-end:clamp(1rem,3vw,2rem);
  font-size:2rem; line-height:1; color:var(--chalk-soft); transition:color .3s;
}
.lightbox__close:hover{ color:var(--chalk); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; font-size:2.2rem; line-height:1; color:var(--chalk-soft);
  transition:color .3s;
}
.lightbox__nav:hover{ color:var(--chalk); }
.lightbox__nav--prev{ inset-inline-start:clamp(.4rem,2vw,2rem); }
.lightbox__nav--next{ inset-inline-end:clamp(.4rem,2vw,2rem); }

/* ---------- 21. Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal,.tile{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.01ms !important; transition-duration:.15s !important; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width:1180px){
  .grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px){
  .nav__list{ gap:1rem; }
  .nav__list a{ font-size:.66rem; letter-spacing:.12em; }
  .portrait__grid{ grid-template-columns:1fr; }
  .portrait__media{ max-width:34rem; position:static; }
  .agencies{ grid-template-columns:1fr; gap:2.6rem; }
}
@media (max-width:860px){
  :root{ --header-h:66px; }
  .brandmark{ width:38px; height:38px; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:-1;
    background:var(--night); color:var(--chalk);
    display:flex; flex-direction:column; justify-content:center; gap:2rem;
    padding:var(--pad);
    opacity:0; visibility:hidden; transform:translateY(-2%);
    transition:opacity .5s var(--ease), visibility .5s, transform .6s var(--ease-out);
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; z-index:99; }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  .nav__list a{
    font-family:var(--ff-display); font-size:2rem; letter-spacing:0;
    text-transform:none; font-weight:300;
  }
  .nav__foot{
    display:flex; gap:1.6rem; flex-wrap:wrap;
    padding-top:2rem; border-top:1px solid var(--line-dark);
  }
  .nav__foot a{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-soft); }
  .header.is-menu-open{ color:var(--chalk); background:transparent; backdrop-filter:none; border-color:transparent; }

  .showreel__rest{ grid-template-columns:1fr; }
  .showreel__col{ display:contents; }
  .camp{ grid-template-columns:1fr; gap:1.4rem; }
  .camp:nth-child(even) .camp__media{ order:0; }
  .camp__media{ aspect-ratio:4/5; }
  .reel--portrait .reel__frame{ aspect-ratio:4/5; }
  .reel--feature .reel__play span{ width:64px; height:64px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .tile--feat{ grid-row:span 1; aspect-ratio:4/5; }
  .press{ grid-template-columns:1fr; }
  .hero{ align-items:flex-end; }
}
@media (max-width:600px){
  /* le millésime repasse en tête de groupe plutôt qu'en rail latéral */

  /* cadre 2.40:1 trop bas pour porter du texte : le bandeau passe dessous */
  /* sur téléphone la scène dramatique gagne en hauteur : 4:3 au lieu du
     2.42:1 d'origine, recadrée au centre */
  .reel--feature .reel__frame{ aspect-ratio:4/3; }
  .reel__banner{ position:static; padding:1.1rem .2rem 0; }
  .reel__headline,.reel__banner .reel__sub{ text-shadow:none; }
  .reel--feature .reel__play{ background:linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,.1)); }
  .reel__note{ margin-top:.9rem; font-size:.92rem; }
  .agencies{ grid-template-columns:1fr; }
  .header__name i{ display:none; }
  .contact__links{ flex-direction:column; }
  .btn{ display:block; }
  .footer__bottom{ justify-content:center; text-align:center; }
}

/* ==========================================================================
   23. Conséquences du fond sombre
   La feuille au-dessus a été écrite pour des sections ivoire alternant avec
   des sections noires. Le site étant désormais sombre partout, ce bloc
   reprend les quelques endroits où la clarté était supposée.
   ========================================================================== */

/* Au-dessus du hero la barre reste transparente, texte clair sur la vidéo.
   Dès qu'elle se fixe, elle prend le papier de la page pour ne plus trancher
   avec elle. */
.header{ color:var(--chalk); }
.header.is-stuck{
  background:hsl(38 24% 90% / .94);
  color:hsl(30 12% 10%);
  border-bottom-color:hsl(30 12% 10% / .14);
}
.langswitch__list{
  background:var(--surface-2); color:var(--chalk); border-color:var(--line-dark);
}
.header.is-stuck .langswitch__list{
  background:hsl(38 24% 90%); color:hsl(30 12% 10%);
  border-color:hsl(30 12% 10% / .16);
}
.header.is-stuck .langswitch__list button:hover,
.header.is-stuck .langswitch__list button[aria-selected="true"]{
  background:hsl(32 34% 42% / .14); color:hsl(32 34% 38%);
}

/* les logos de marques sont des dessins noirs : invisibles sans inversion */
.marquee img{ filter:grayscale(1) invert(1); opacity:.62; }
.marquee img:hover{
  filter:none; opacity:1;
  background:var(--chalk); border-radius:3px; padding:2px 7px;
}

.press{ background:var(--line); }
.press__item{ background:var(--ground-2); }
.press__item:hover{ background:var(--surface-2); }
.camp__media,.portrait__media{ background:var(--surface-2); }
.btn{ background:var(--chalk); color:var(--surface); }
.btn--ghost{ background:transparent; color:var(--chalk); }

/* la section références passe en tête de page : une colonne sur petit écran */
@media (max-width:860px){
  .brands__top{ grid-template-columns:1fr; gap:1.6rem; }
  .brands__media{ aspect-ratio:560/1002; }
  .brands__head .h2{ max-width:none; }
}

/* ==========================================================================
   Contenu posé sur le hero, en blocs arrondis
   .page est le calque opaque qui recouvre la vidéo fixée ; à l'intérieur,
   chaque section est une carte distincte flottant sur le fond.
   ========================================================================== */

/* .hero-wrap tient deux écrans : le hero reste épinglé pendant le premier,
   le contenu remonte dessus, puis le hero s'en va avec son conteneur. */
.hero-wrap{ height:200svh; }
.page{
  position:relative; z-index:1;
  margin-top:-100svh;
  /* le passe-partout passe en papier : les blocs sombres y flottent, les
     sections claires s'y fondent */
  background:hsl(38 24% 90%);
  padding:0;
  min-height:100svh;
  /* couche de composition dédiée : évite que le hero transparaisse
     pendant un défilement rapide */
  transform:translate3d(0,0,0);
}

/* tout est en papier : plus de cartes à détacher, donc ni marge ni rayon.
   Les 72 px de marge ne créaient plus qu'un vide. */
.page > section{
  border-radius:0;
  margin:0;
  overflow:hidden;
  background:var(--surface);
}
/* ---- blocs sombres ----
   Redéfinir localement les jetons suffit à basculer un bloc entier : toutes
   les règles écrites plus haut suivent, sans avoir à les réécrire. */
.tone--dark{
  --ground:     hsl(220 6% 8%);
  --ground-2:   hsl(220 6% 12%);
  --surface:    hsl(220 6% 8%);
  --surface-2:  hsl(220 6% 12%);
  --night:      hsl(220 6% 8%);
  --night-soft: hsl(220 6% 12%);
  --ivory:      hsl(220 6% 8%);
  --ivory-warm: hsl(220 6% 12%);

  --ink:        hsl(220 10% 94%);
  --ink-soft:   hsl(220 7% 72%);
  --ink-faint:  hsl(220 6% 56%);
  --chalk:      hsl(220 10% 96%);
  --chalk-soft: hsl(220 7% 66%);
  --accent:     hsl(32 48% 62%);

  --line:       hsl(220 10% 96% / .16);
  --line-dark:  hsl(220 10% 96% / .16);

  color:var(--ink);
}

/* rattrapages : couleurs écrites en dur, ou inversions valables seulement
   sur fond sombre */
.filmo__item[data-rank="lead"] .filmo__title{ color:var(--ink); }
 /* logos et monogrammes sont des dessins noirs : inversés sur fond sombre */
.marquee img{ filter:grayscale(1) invert(1); opacity:.62; }
.marquee img:hover{ filter:none; opacity:1; background:var(--chalk);
                    border-radius:3px; padding:2px 7px; }
.brands__feature{ filter:grayscale(1) invert(1); opacity:.9; }
.tile::after{ box-shadow:inset 0 0 0 1px hsl(220 10% 96% / 0); }
.tile:hover::after{ box-shadow:inset 0 0 0 1px hsl(220 10% 96% / .28); }

/* les sections avaient des marges pleine largeur : la carte les porte */
.page > section.section{ padding-inline:clamp(1.5rem,4vw,4.5rem); }
.page > .portrait{ padding:var(--section-y) clamp(1.5rem,4vw,4.5rem); }
.page > .brands{ padding-block:var(--section-y); }
.page > .contact{ padding-inline:clamp(1.5rem,4vw,4.5rem); }

/* médias arrondis, en écho aux cartes */
.tile, .camp__media, .brands__media, .portrait__media picture,
.portrait__media img, .reel__frame, .press{ border-radius:var(--radius-sm); overflow:hidden; }
.btn, .filters button{ border-radius:999px; }

.footer{
  position:relative; z-index:1;
  background:var(--surface);
  border-radius:var(--radius);
  margin:0 var(--pad) var(--pad);
  padding-inline:clamp(1.5rem,4vw,4.5rem);
}
.footer__top{ border-top:0; }

@media (max-width:860px){
  .brands__top{ grid-template-columns:1fr; gap:1.6rem; }
  /* la vidéo Ritz est verticale (560×1002) : le cadre prend son format exact
     pour qu'elle ne soit plus rognée sur téléphone ; l'accroche passe avant */
  .brands__media{ aspect-ratio:560/1002; }
  /* portrait : le titre passe au-dessus de la photo, la bio et le CV
     restent dessous avec leurs espacements d'origine */
  .portrait__grid{ row-gap:0; }
  .portrait__text{ display:contents; }
  .portrait__text .h2{ order:-1; margin-bottom:1.8rem; }
  .portrait__media{ margin-bottom:2.5rem; }
  .portrait__text .cvlink{ justify-self:start; }
  .brands__head .h2{ max-width:none; }
  .brands__feature{ margin-top:1.6rem; }
  .brands__head{ margin-inline-end:0; }
}

/* ---- les deux derniers blocs prennent toute la page ---- */
.page{ padding-bottom:0; }
.page > .contact{
  margin:0; border-radius:0;
  padding-inline:var(--pad);
}
.footer{
  margin:0; border-radius:0;
  padding-inline:var(--pad);
  background:var(--surface);
}

/* ==========================================================================
   Couleur libérée
   Le noir et blanc ne sert plus de vernis d'uniformité : il est réservé aux
   portraits et au cinéma, là où il dit quelque chose. La mode, les éditos et
   le brand content retrouvent leurs couleurs.
   ========================================================================== */

/* galerie : couleur par défaut, N&B sur portraits et cinéma */
.tile img{ filter:none; }
.tile[data-cat="portrait"] img,
.tile[data-cat="cinema"] img{ filter:grayscale(1) contrast(1.04); }
.tile:hover img{ filter:none; }

/* campagnes et défilés : mode et publicité, donc en couleur */
.camp__media img{ filter:none; }

/* le portrait de la biographie et le fond de contact restent en N&B :
   ce sont des portraits, et c'est là que le parti pris a du sens */
.portrait__media img{ filter:grayscale(1) contrast(1.06); }
.contact__media img{ filter:grayscale(1) contrast(1.05); }

/* ---- showreel sur fond clair ----
   Le noir servait au cadrage des vidéos ; appliqué à toute la carte, il
   rendait les titres illisibles depuis la bascule en noir sur blanc. */
.reel{ background:transparent; }
.reel__frame{ background:#000; }

/* le bandeau de la pièce maîtresse est posé SUR la vidéo : texte clair
   quel que soit le thème de la section */
.reel__banner,
.reel__banner .reel__headline{ color:hsl(220 10% 96%); }
.reel__banner .reel__sub{ color:hsl(220 8% 82%); }

@media (max-width:600px){
  /* en petit écran le bandeau repasse sous la vidéo : il reprend le texte
     de la section */
  .reel__banner,
  .reel__banner .reel__headline{ color:var(--ink); }
  .reel__banner .reel__sub{ color:var(--ink-faint); }
}

/* la grille à deux colonnes repasse en une seule sur petit écran */
@media (max-width:860px){
  .filmo__list{ grid-template-columns:1fr; }
  .filmo__item:nth-last-child(2):nth-child(odd){ border-bottom:1px solid var(--line-dark); }
  .filmo__item:last-child{ border-bottom:0; }
}

/* ==========================================================================
   Alternance papier / sombre
   Le papier chaud vient de la v2. Une section marquée .tone--paper redéfinit
   localement les jetons de couleur : toutes les règles écrites pour le fond
   sombre basculent d'elles-mêmes, sans avoir à les réécrire.
   ========================================================================== */

.tone--paper{
  --paper:      hsl(38 24% 90%);
  --ink-deep:   hsl(30 12% 10%);

  --ground:     var(--paper);
  --ground-2:   hsl(38 20% 85%);
  --surface:    var(--paper);
  --surface-2:  hsl(38 20% 85%);
  --night:      var(--paper);
  --night-soft: hsl(38 20% 85%);
  --ivory:      var(--paper);
  --ivory-warm: hsl(38 20% 85%);

  --ink:        var(--ink-deep);
  --ink-soft:   hsl(30 8% 32%);
  --ink-faint:  hsl(30 7% 46%);
  --chalk:      var(--ink-deep);
  --chalk-soft: hsl(30 8% 38%);
  --accent:     hsl(32 34% 42%);

  --line:       hsl(30 12% 10% / .18);
  --line-dark:  hsl(30 12% 10% / .16);

  color:var(--ink);
}

/* rattrapages : inversions et couleurs en dur valables seulement sur sombre */
.tone--paper .marquee img{ filter:grayscale(1); opacity:.55; }
.tone--paper .marquee img:hover{ filter:none; opacity:1; background:none; padding:0; }
.tone--paper .brands__feature{ filter:grayscale(1); opacity:.85; }
.tone--paper .filmo__item[data-rank="lead"] .filmo__title{ color:var(--ink); }
.tone--paper .camp__media,
.tone--paper .brands__media{ background:var(--ground-2); }
.tone--paper .press__item{ background:var(--ground-2); }
.tone--paper .press__item:hover{ background:hsl(38 20% 81%); }
.tone--paper .btn{ background:var(--ink-deep); color:var(--paper); }
.tone--paper .btn--ghost{ background:transparent; color:var(--ink-deep); }

/* sur papier, les photos de mode et d'édito gardent leurs couleurs */
.tone--paper .camp__media img{ filter:none; }

/* ---------- Ils m'ont fait confiance — grille fixe ----------
   Le défilement a été retiré : les logos sont posés, alignés, immobiles.
   Sur papier ils ne sont pas inversés, seulement désaturés et atténués. */
.clients__grid{
  max-width:78rem; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
}
.clients__item{
  display:grid; place-items:center;
  min-height:clamp(70px,7vw,104px);
  padding:.5rem;
}
.clients__item img{
  max-height:clamp(34px,3.6vw,52px); width:auto; max-width:100%;
  object-fit:contain;
  filter:grayscale(1); opacity:.55;
  transition:opacity .45s, filter .45s;
}
.clients__item img:hover{ filter:none; opacity:1; }
/* sur fond sombre, ces dessins noirs doivent être inversés */
.section--dark .clients__item img{ filter:grayscale(1) invert(1); opacity:.6; }
.section--dark .clients__item img:hover{ filter:none; opacity:1; }

@media (max-width:1024px){ .clients__grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px){  .clients__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){  .clients__grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Page entièrement en papier après le hero ----------
   Ce qui suit reprend les endroits dessinés pour un fond sombre et qui ne
   basculent pas d'eux-mêmes : bagues de survol claires, calques assombrissants
   et fonds vidéo. */

/* la bague de survol des vignettes était claire : elle doit devenir encre */
.tone--paper .tile::after{ box-shadow:inset 0 0 0 1px hsl(30 12% 10% / 0); }
.tone--paper .tile:hover::after{ box-shadow:inset 0 0 0 1px hsl(30 12% 10% / .26); }
.tone--paper .tile{ background:var(--ground-2); }

/* showreel : seul le cadre de la vidéo reste noir */
.tone--paper .reel{ background:transparent; }
.tone--paper .reel__frame{ background:#000; }

/* clôture : la photo de fond était posée sous un voile sombre. Sur papier,
   elle s'éclaircit et le voile devient clair, sinon le texte encre s'y perd. */
.tone--paper.contact{ background:var(--ground); }
.tone--paper .contact__media{ opacity:.16; }
.tone--paper .contact__media img{ filter:grayscale(1) contrast(1.04); }
.tone--paper.contact::after{
  background:radial-gradient(78% 70% at 50% 50%,
    hsl(38 24% 90% / .72), hsl(38 24% 90% / .95));
}

/* pied de page */
.tone--paper.footer{ background:var(--ground-2); }
.tone--paper .footer__mark{ color:var(--ink); }

/* logos : sur papier, jamais d'inversion */
.tone--paper .clients__item img{ filter:grayscale(1); opacity:.55; }
.tone--paper .clients__item img:hover{ filter:none; opacity:1; }

/* le bandeau de la pièce maîtresse est posé SUR la vidéo : texte clair,
   quel que soit le ton de la section. En petit écran il glisse sous la
   vidéo et reprend alors l'encre de la page. */
.tone--paper .reel__banner,
.tone--paper .reel__banner .reel__headline{ color:hsl(38 20% 96%); }
.tone--paper .reel__banner .reel__sub{ color:hsl(36 12% 82%); }
@media (max-width:600px){
  .tone--paper .reel__banner,
  .tone--paper .reel__banner .reel__headline{ color:var(--ink); }
  .tone--paper .reel__banner .reel__sub{ color:var(--ink-faint); }
}

/* ---------- Bouton son du hero ----------
   Le hero est muet au chargement, seule condition pour que la lecture
   automatique soit acceptée par les navigateurs. Le bouton rend la main. */
.hero__sound{
  position:absolute; z-index:3;
  inset-block-start:calc(var(--header-h) + 1.6rem); inset-inline-end:var(--pad);
  display:flex; align-items:center; gap:.55rem;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:hsl(38 20% 96% / .75); transition:color .3s;
}
html[dir="rtl"] .hero__sound{ letter-spacing:.02em; font-size:.78rem; }
.hero__sound:hover{ color:hsl(38 20% 96%); }
.hero__sound-bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.hero__sound-bars i{ width:2px; height:3px; background:currentColor; transition:height .3s; }
.hero__sound[aria-pressed="true"] .hero__sound-bars i{
  animation:eq .9s ease-in-out infinite alternate;
}
.hero__sound-bars i:nth-child(2){ animation-delay:.15s; }
.hero__sound-bars i:nth-child(3){ animation-delay:.3s; }
.hero__sound-bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ from{ height:3px; } to{ height:12px; } }

/* ---------- Recadrage des vignettes ----------
   `object-fit: cover` centrait la découpe : sur des portraits verticaux, le
   visage se trouve plus haut et se faisait couper. On remonte le point de
   cadrage au tiers supérieur. */
.tile img{ object-position:center 22%; }
.camp__media img{ object-position:center 25%; }

/* les campagnes peuvent porter une vidéo au lieu d'une photo */
.camp__media video{
  width:100%; height:100%; object-fit:cover; object-position:center 25%;
}

/* ---------- Mentions légales & crédit ----------
   Lien discret dans le pied de page ; le texte s'ouvre dans une fenêtre
   papier, en feuille remontant du bas sur téléphone. */
.footer__legal{
  color:inherit;
  text-decoration:underline; text-underline-offset:.28em;
  text-decoration-color:var(--line-dark);
  transition:color .3s, text-decoration-color .3s;
}
.footer__legal:hover{ color:var(--ink); text-decoration-color:currentColor; }
.footer__powered{
  margin:1.4rem 0 0; text-align:center;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.footer__powered a{ color:inherit; transition:color .3s; }
.footer__powered a:hover{ color:var(--ink); }

.legal{
  position:fixed; inset:0; z-index:160;
  display:grid; place-items:center;
  padding:clamp(.75rem,4vw,3rem);
  background:hsl(30 12% 10% / .55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.legal.is-open{ opacity:1; visibility:visible; }
/* la page ne défile pas derrière la fenêtre ouverte */
html.legal-open, html.legal-open body{ overflow:hidden; }
.legal__panel{
  position:relative;
  width:min(100%, 46rem); max-height:88vh;
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius);
  padding:clamp(1.8rem,5vw,3.4rem) clamp(1.4rem,5vw,3.4rem);
  transform:translateY(14px); transition:transform .55s var(--ease-out);
}
.legal.is-open .legal__panel{ transform:none; }
.legal__close{
  position:sticky; top:0; float:inline-end;
  width:44px; height:44px; margin:-.9rem -.9rem 0 .8rem;
  font-size:2rem; line-height:1; color:var(--ink-soft);
  transition:color .3s;
}
.legal__close:hover{ color:var(--ink); }
.legal__title{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.8rem,4.5vw,2.6rem); line-height:1.1;
  margin:0 0 1.8rem; max-width:20ch; color:var(--ink);
}
html[dir="rtl"] .legal__title{ line-height:1.45; }
.legal__section{ padding-top:1.3rem; margin-top:1.3rem; border-top:1px solid var(--line); }
.legal__section h3{
  margin:0 0 .6rem;
  font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
html[dir="rtl"] .legal__section h3{ letter-spacing:.02em; font-size:.85rem; }
.legal__section p{ margin:0 0 .7rem; font-size:.95rem; line-height:1.65; color:var(--ink-soft); }
.legal__section p:last-child{ margin-bottom:0; }
.legal__section a{
  color:var(--ink); overflow-wrap:anywhere;
  text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--line);
}
.legal__section .legal__tel{ white-space:nowrap; unicode-bidi:isolate; }
.legal__updated{ margin:2rem 0 0; font-size:.72rem; color:var(--ink-faint); }

@media (max-width:600px){
  .legal{ padding:0; place-items:end stretch; }
  .legal__panel{
    width:100%; max-height:92svh;
    border-radius:var(--radius) var(--radius) 0 0;
    padding-bottom:calc(2rem + env(safe-area-inset-bottom));
    transform:translateY(40px);
  }
}