/* ------------------------------------------------------------------
   PÉNÉLOPE BIESSY — site v2
   Alternance de bandes sombres et claires. Noir de scène, ivoire, or.
------------------------------------------------------------------- */

:root{
  /* thème clair : c'est désormais l'affichage par défaut du site. */
  --ink:#F5F2EB;
  --ink-2:#E7E2D7;
  --paper:#14130F;
  --paper-dim:rgba(20,19,15,.72);
  --muted:#6E685E;
  --line:rgba(20,19,15,.20);
  --line-soft:rgba(20,19,15,.10);
  --accent:#8B6A34;
  --noir:#000;   /* un seul noir : fonds d'écran et cadres d'images */
  --serif:'Cormorant Garamond','Cormorant',Didot,'Times New Roman',Georgia,serif;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1440px;
  /* deux paliers de lettrage seulement, appliqués à toutes les mentions
     techniques en capitales. */
  --track:.2em;
  --track-wide:.28em;
}

html{background:#F5F2EB}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* l'en-tête est fixe : les ancres se posent en dessous, pas dessous */
.sub.major[id],.project[id],.card[id]{scroll-margin-top:7rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.11;mix-blend-mode:overlay;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0;line-height:1.03;letter-spacing:-.015em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--sans);font-size:.66rem;font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);
}
.lede{
  font-family:var(--serif);font-size:clamp(1.35rem,2.35vw,2.05rem);
  line-height:1.42;letter-spacing:-.01em;color:var(--paper);
}
.dim{color:var(--paper-dim)}

/* ------------------------------------------------------------------ */
/* une seule voix pour le texte courant : la serif de la punchline     */
/* d'accueil. La sans-serif est réservée aux petites étiquettes en     */
/* capitales (années, rôles, numéros de section, navigation).          */
/* ------------------------------------------------------------------ */
.prose,
.bio .body p:not(.lede):not(.sig),
.section-head .note,
.p-body > p:not([class]),
.card .c-meta,
.idx .d,.idx .v,
.skill p,
.cv-row .v span{
  font-family:var(--serif);
  font-size:clamp(1.02rem,1.35vw,1.16rem);
  line-height:1.62;letter-spacing:0;
}
.small{font-family:var(--serif);font-size:1rem;line-height:1.6;color:var(--muted)}
/* une seule marche de hiérarchie dans le texte courant : la phrase d'ouverture */
.lede,.bio .body p.lede{
  font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,1.75rem);
  line-height:1.45;letter-spacing:-.01em;color:var(--paper);
}

/* bandes ---------------------------------------------------------- */
.band{background:var(--ink);color:var(--paper);position:relative}
.band.alt{background:var(--ink-2)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4.5rem,10vw,9rem)}

.section-head{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
@media (min-width:900px){
  .section-head{grid-template-columns:14rem minmax(0,1fr);gap:3rem;align-items:start}
  /* le chapitre occupe toute la première ligne, le titre garde la colonne 2 */
  .section-head > div:not(.chapter){grid-column:2}
}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.9rem);text-wrap:balance}
.section-head .note{max-width:48ch;color:var(--paper-dim);margin-top:1.2rem}

/* ------------------------------------------------------------------ */
/* ouverture de chapitre : on doit voir d'un coup d'œil qu'on change   */
/* de partie. Filet pleine largeur, grand numéro, nom du chapitre.     */
/* ------------------------------------------------------------------ */
.section-head > .chapter{grid-column:1/-1}   /* le filet traverse toute la page */
.chapter{
  display:flex;align-items:baseline;gap:clamp(1rem,2.5vw,1.8rem);
  border-top:1px solid var(--line);
  padding-top:clamp(1.4rem,3vw,2.2rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.chapter .ch-n{
  font-family:var(--serif);font-weight:300;line-height:.8;
  font-size:clamp(2.8rem,7vw,5rem);color:var(--accent);
}
.chapter .ch-k{
  font-family:var(--sans);font-size:.74rem;font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--paper);
}
.chapter .ch-line{flex:1;height:1px;background:var(--line-soft);transform:translateY(-.35em)}
.chapter .ch-t{
  font-family:var(--sans);font-size:.62rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
/* le filet se déploie quand le chapitre entre à l'écran */
.chapter .ch-line{transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1) .15s}
.chapter.reveal .ch-line{transform:translateY(-.35em) scaleX(0)}
.chapter.reveal.in .ch-line{transform:translateY(-.35em) scaleX(1)}

/* sous-titres de partie (En cours, Passés, Autres projets…) */
/* deux niveaux sous le chapitre :
   .sub        = repère de temps (En cours, Passés, Autres projets)
   .sub.major  = vraie partie, au même rang qu'un titre de chapitre     */
.sub{
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.6rem);
  margin:clamp(3.5rem,7vw,5.5rem) 0 2.2rem;
}
.section-head + .sub{margin-top:clamp(.5rem,1.5vw,1.5rem)}
.sub span{
  font-family:var(--sans);font-size:clamp(.86rem,1.15vw,1.05rem);font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--paper);white-space:nowrap;
}
.sub::before{content:"";width:clamp(1.8rem,3vw,3rem);height:1px;background:var(--accent);flex:none}
.sub::after{content:"";flex:1;height:1px;background:var(--line-soft)}

/* une vraie partie : même échelle qu'un titre de chapitre */
.sub.major{
  margin:clamp(5rem,9vw,7.5rem) 0 2.6rem;
  padding-top:clamp(1.4rem,3vw,2.2rem);border-top:1px solid var(--line);
  align-items:baseline;
}
.sub.major span{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.05;
  letter-spacing:-.015em;text-transform:none;color:var(--paper);
  white-space:normal;
}
.sub.major::before{display:none}
.sub.major::after{transform:translateY(-.55em)}

/* ---------------------------------------------------------------- */
/* en-tête                                                           */
/* ---------------------------------------------------------------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:120;color:#F0ECE4;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(245,242,235,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(20,19,15,.12);
  color:#14130F;
}
/* en-tête collant clair : les libellés repassent en sombre */
.site-head.is-stuck .nav a,
.site-head.is-stuck .lang a{color:rgba(20,19,15,.66)}
.site-head.is-stuck .nav a:hover,
.site-head.is-stuck .lang a:hover{color:#14130F}
.site-head.is-stuck .lang a[aria-current="true"]{color:var(--accent)}
.site-head.is-stuck .lang i{color:rgba(20,19,15,.28)}
.site-head .bar{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:1rem clamp(1.25rem,3vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem 1.6rem;
}
/* la marque reste dans le flux (invisible au repos) : la barre ne se
   chevauche plus sur les écrans de portable. */
.brand{
  font-family:var(--serif);font-size:.95rem;letter-spacing:var(--track);text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .5s ease;pointer-events:none;flex:none;
}
.site-head.is-stuck .brand{opacity:1;pointer-events:auto}
.brand span{color:var(--accent)}
.nav{display:none;gap:clamp(.9rem,1.5vw,1.8rem);align-items:center;flex:1;justify-content:center}
@media (min-width:1100px){.nav{display:flex}}
.nav a{
  font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase;
  color:rgba(240,236,228,.68);position:relative;padding-block:.35rem;transition:color .35s ease;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .45s cubic-bezier(.16,1,.3,1)}
.nav a:hover{color:#F0ECE4}
.nav a:hover::after{right:0}
.switches{display:flex;align-items:center;gap:1.1rem;flex:none}
.lang{display:flex;align-items:center;gap:.5rem;font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase}
.lang a{color:rgba(240,236,228,.55);transition:color .3s ease}
.lang a:hover{color:#F0ECE4}
.lang a[aria-current="true"]{color:var(--accent)}
.lang i{font-style:normal;color:rgba(240,236,228,.25)}


/* ---------------------------------------------------------------- */
/* accueil : plein écran, image en fond, index par-dessus            */
/* ---------------------------------------------------------------- */
.hero{position:relative;background:var(--noir)}

/* ---- écran 1 : le nom, seul, sur fond noir ---------------------- */
.hero-intro{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* la marge basse tient le repère « Projets » à distance de la punchline */
  text-align:center;padding-block:7rem clamp(9rem,20vh,14rem);
}
.hero-id{color:#F5F2EB}
.hero-id h1{
  font-size:clamp(1.8rem,5.4vw,3.6rem);
  letter-spacing:var(--track-wide);text-transform:uppercase;line-height:1.2;
  margin-bottom:1.4rem;
}
.hero-roles{
  font-size:.63rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:rgba(245,242,235,.72);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.1rem;margin:0;
}
.hero-roles b{font-weight:400}
.hero-roles i{font-style:normal;color:var(--accent)}
.hero-tag{
  margin:clamp(1.8rem,4vw,2.8rem) auto 0;max-width:50ch;
  font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.5;
  color:rgba(245,242,235,.8);
}

/* invitation à descendre vers l'index */
/* repère de descente : un mot en petites capitales et un trait fin qui
   file vers le bas. Utilisé pour « Projets » puis pour « Clients », afin
   que l'invitation à descendre se poursuive le long de la page. */
.hero-scroll,.cue{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0;
  font-family:var(--sans);font-size:.62rem;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--muted);transition:color .4s ease;
}
.hero-scroll{position:absolute;bottom:clamp(2rem,5vh,3.5rem);left:50%;transform:translateX(-50%)}
.hero-scroll:hover{color:var(--accent)}
.hero-scroll i,.cue i{
  display:block;width:1px;height:5rem;
  background:linear-gradient(var(--line),transparent);
  transform-origin:top;transition:height .55s cubic-bezier(.16,1,.3,1),background .4s ease;
}
/* le trait s'allonge quand la souris se pose dessus : l'invitation à
   descendre devient plus insistante. */
.hero-scroll:hover i,.cue:hover i{height:8.5rem;background:linear-gradient(var(--accent),transparent)}
.cue{cursor:default}
.cue:hover{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .hero-scroll i,.cue i{animation:drop 2.6s ease-in-out infinite}
  .hero-scroll:hover i,.cue:hover i{animation:none;opacity:1}
  @keyframes drop{0%,100%{transform:scaleY(.55);opacity:.5}50%{transform:scaleY(1);opacity:1}}
}
/* le même repère, au-dessus du bandeau des collaborations */
.cue-band{display:flex;justify-content:center;padding:clamp(3rem,7vh,5rem) 0 clamp(1.4rem,3vh,2.2rem)}
.cue i{height:4rem}

/* ---- écran 2 : l'index, image plein écran au survol -------------- */
.hero-index{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(4rem,9vh,7rem);overflow:hidden;
}

/* l'image ne touche plus les bords : elle occupe un grand cadre nettement
   délimité, posé sur le noir de la section. */
.hero-media{
  position:absolute;z-index:0;overflow:hidden;
  inset:clamp(4.5rem,11vh,7rem) clamp(1.25rem,5vw,5.5rem) clamp(4rem,10vh,6.5rem);
  border:1px solid rgba(245,242,235,.22);
  background:var(--noir);
}
.hero-media img,.hero-media video{
  /* « contain » : chaque visuel est montré en entier, jamais recadré.
     Le cadre étant plus large que toutes les photos, c'est la hauteur qui
     limite à chaque fois — elles ont donc toutes exactement la même
     hauteur, seule la largeur suit le format de la photo. */
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  opacity:0;filter:brightness(.88) saturate(1.02);
  transition:opacity .28s ease;
}
.hero-media img.is-on,.hero-media video.is-on{opacity:1;transition:opacity .7s ease}

.hero-media{opacity:0;transition:opacity .3s ease}
.hero.is-previewing .hero-media{opacity:1;transition:opacity .5s ease}

/* voile de lisibilité, dans les limites du cadre */
.hero-veil{
  position:absolute;z-index:1;pointer-events:none;
  inset:clamp(4.5rem,11vh,7rem) clamp(1.25rem,5vw,5.5rem) clamp(4rem,10vh,6.5rem);
  opacity:0;transition:opacity .3s ease;
  background:
    radial-gradient(58% 42% at 80% 86%, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.24) 34%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.34) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.1) 28%, rgba(0,0,0,.2) 66%, rgba(0,0,0,.7) 100%);
}
.hero.is-previewing .hero-veil{opacity:1;transition:opacity .5s ease}

.hero-foot{position:relative;z-index:2;width:100%}

/* la légende : en bas à droite, centrée dans sa colonne */
/* la légende se place à l'intérieur du cadre, en bas à droite */
.stage-info{
  position:absolute;z-index:2;
  right:calc(clamp(1.25rem,5vw,5.5rem) + clamp(1.5rem,3vw,2.75rem));
  bottom:calc(clamp(4rem,10vh,6.5rem) + clamp(1.5rem,3vh,2.5rem));
  width:min(23rem,38vw);text-align:left;
}
@media (max-width:999px){.stage-info{display:none}}

.stage-list{list-style:none;margin:0;padding:0}
.stage-list li+li{margin-top:.1rem}
.stage-list a{
  /* inline-block : la zone sensible épouse le titre, pas toute la largeur */
  display:inline-block;font-family:var(--serif);color:#F5F2EB;
  font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.3;
  padding:.22rem 0;opacity:.46;text-shadow:0 2px 18px rgba(0,0,0,.55);
  transition:opacity .22s ease,letter-spacing .3s cubic-bezier(.16,1,.3,1);
}
.stage-list a .n{
  font-family:var(--sans);font-size:.56rem;letter-spacing:var(--track);
  color:var(--accent);vertical-align:.65em;margin-inline-end:.5em;opacity:0;transition:opacity .5s ease;
}
.stage-list li.is-on a{opacity:1;letter-spacing:.012em}
.stage-list li.is-on a .n{opacity:1}
@media (hover:none){.stage-list a{opacity:.85}}

.info{
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .2s ease,transform .2s ease;  /* sortie : au rythme du reste */
  position:absolute;pointer-events:none;color:#F5F2EB;
}
.info.is-on{
  opacity:1;transform:none;position:static;pointer-events:auto;
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.info .y{font-size:.66rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.info .t{font-family:var(--serif);font-size:1.05rem;color:rgba(245,242,235,.86);line-height:1.55;margin-bottom:.9rem}
.info .r{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.63rem;letter-spacing:var(--track);
  text-transform:uppercase;border:1px solid rgba(245,242,235,.4);border-radius:999px;padding:.42rem .9rem;margin:0;
  backdrop-filter:blur(6px);
}
.info .r::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* bandeau collaborations ---------------------------------------- */
.strip{border-block:1px solid var(--line-soft);padding-block:1.1rem;overflow:hidden;background:var(--ink-2)}
.strip-track{display:flex;gap:3.5rem;width:max-content;animation:slide 46s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.strip span{font-size:.7rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:1.2rem 2.5rem}}

/* ---------------------------------------------------------------- */
/* bio                                                               */
/* ---------------------------------------------------------------- */
.bio{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:900px){.bio{grid-template-columns:minmax(0,1fr) 20rem}}
.bio .body{max-width:60ch}
.bio .body p+p{margin-top:1.2em}
.bio .sig{margin-top:2.5rem;font-family:var(--serif);font-size:1.5rem;color:var(--accent)}
.bio figure{margin:0}
.bio figure img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:47% 50%}
.bio figcaption{margin-top:.8rem;font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}

/* ---------------------------------------------------------------- */
/* projets — grandes lignes éditoriales                              */
/* ---------------------------------------------------------------- */
.project{
  display:grid;gap:clamp(1.5rem,3.5vw,3.5rem);
  padding-block:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line-soft);align-items:center;
}
@media (min-width:900px){
  /* colonnes égales : le cadre image garde la même largeur que la fiche
     soit à gauche ou à droite (classe .flip) */
  .project{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .project.flip .p-media{order:2}
}
/* Toutes les fiches projet partagent exactement le même cadre, et le
   visuel y est montré en entier : c'est la règle retenue pour l'accueil,
   appliquée ici aussi. */
.p-media{position:relative;overflow:hidden;background:var(--noir);aspect-ratio:16/10}
.p-media img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:contain;
  transition:filter 1.1s ease;filter:saturate(.96);
}
.project:hover .p-media img{filter:saturate(1.04)}
/* diaporama dans une fiche projet : les vues se croisent en fondu */
.p-media.slides{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--noir)}
.p-media.slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  aspect-ratio:auto;opacity:0;transform:none;
  transition:opacity .9s ease;
}
.p-media.slides img.on{opacity:1}
.project:hover .p-media.slides img{transform:none}


.p-media video{width:100%;height:100%;object-fit:contain;display:block;background:var(--noir)}
.p-media.portrait img{aspect-ratio:3/4;object-fit:contain;background:var(--noir)}
.p-body{max-width:52ch}
.p-year{font-size:.7rem;letter-spacing:var(--track-wide);color:var(--accent);text-transform:uppercase;display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.p-year::after{content:"";height:1px;flex:1;background:var(--line)}
.p-body h3{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.7rem}
.p-meta{font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}
.p-body p{color:var(--paper-dim)}
.p-role{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;
  font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1.05rem;
}
.p-role::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------------------------------------------------------------- */
/* cartes                                                            */
/* ---------------------------------------------------------------- */
.cards{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:block;position:relative}
.card .c-media{position:relative;overflow:hidden;background:var(--ink-2)}  /* position:relative indispensable : sans elle le crédit sort du cadre */
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease;filter:saturate(.92)}
.card:hover img{transform:scale(1.05);filter:saturate(1.04)}
.card .c-media.blank{aspect-ratio:4/3;display:grid;place-items:center;border:1px solid var(--line)}
.card .c-media.blank span{font-family:var(--serif);font-size:2.6rem;color:var(--muted)}
.card h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:1.1rem 0 .45rem}
/* visuels de définition limitée : présentés en petit dans un cadre,
   plutôt qu'étirés en pleine largeur où ils deviennent flous. */
.c-media.soft,.p-media.soft{
  background:var(--noir);   /* même noir que les fonds d'écran */
  display:grid;place-items:center;
  /* piste explicite : sans elle, la piste se dimensionne sur la hauteur
     intrinsèque de l'image (avant plafonnement) et pousse le visuel hors
     du cadre — c'est ce qui faisait déborder l'affiche de Rencontre(s). */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  padding:clamp(1.4rem,3.5vw,3rem);
  border:1px solid rgba(240,236,228,.14);
}
.card .c-media.soft{aspect-ratio:4/3}  /* même gabarit que les autres cartes : la grille reste alignée */
.card .c-media.soft img{
  /* jamais au-delà de la moitié de sa définition réelle : reste net sur Retina.
     La hauteur est plafonnée en pixels : « max-height:100% » ne se résout pas
     dans une boîte dont la hauteur vient d'un aspect-ratio, et l'affiche de
     Rencontre(s), en portrait, débordait alors de son cadre. */
  width:auto;height:auto;
  max-width:min(100%,340px);
  max-height:min(100%,300px);
  aspect-ratio:auto;object-fit:contain;
}
.p-media.soft video{width:min(100%,540px);height:auto;aspect-ratio:3/2}
.p-media.soft img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

.card .c-year{font-size:.64rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--accent);margin-top:1.1rem}
.card .c-meta{color:var(--paper-dim)}

/* distribution d'un spectacle : sous le chapeau, plus discrète, séparée d'un filet */
.card .c-dist{
  font-family:var(--serif);font-size:.86rem;line-height:1.58;color:var(--muted);
  margin-top:.95rem;padding-top:.95rem;border-top:1px solid var(--line);
}
/* crédit hors cadre (portrait de bio) : même valeur que les crédits sur fond noir */
.credit-inline{
  display:inline-block;margin-top:.35em;font-size:.58rem;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);
}

/* ---------------------------------------------------------------- */
/* index avec aperçu                                                 */
/* ---------------------------------------------------------------- */
.index-list{border-top:1px solid var(--line)}
.idx{
  display:grid;grid-template-columns:1fr;gap:.15rem;padding:1.3rem 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .5s cubic-bezier(.16,1,.3,1),border-color .4s ease;position:relative;
}
@media (min-width:820px){
  .idx{grid-template-columns:5.5rem minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:baseline;padding-block:1.5rem}
}
.idx:hover{padding-left:1rem;border-bottom-color:var(--line)}
.idx .y{font-size:.7rem;letter-spacing:var(--track);color:var(--muted)}
.idx .t{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.2}
.idx .d,.idx .v{color:var(--paper-dim)}
@media (min-width:820px){.idx .v{text-align:right}}

.peek{
  position:fixed;top:0;left:0;z-index:90;width:min(24vw,300px);aspect-ratio:4/3;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .4s ease;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.peek img{width:100%;height:100%;object-fit:cover}
.peek.on{opacity:1}
@media (max-width:1023px),(prefers-reduced-motion:reduce){.peek{display:none}}

/* ---------------------------------------------------------------- */
/* savoir-faire                                                      */
/* ---------------------------------------------------------------- */
.skills{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:820px){.skills{grid-template-columns:repeat(3,minmax(0,1fr))}}
.skill{border-top:1px solid var(--line);padding-top:1.5rem}
.skill h3{font-size:1.5rem;margin-bottom:.9rem}
.skill p{color:var(--paper-dim)}
.skill .n{font-size:.64rem;letter-spacing:var(--track-wide);color:var(--accent);display:block;margin-bottom:1.1rem}

.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0}
.tags li{
  list-style:none;font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--paper-dim);
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;transition:color .4s ease,border-color .4s ease;
}
.tags li:hover{color:var(--paper);border-color:var(--accent)}

/* ---------------------------------------------------------------- */
/* parcours                                                          */
/* ---------------------------------------------------------------- */
.cv{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:900px){.cv{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.cv-block+.cv-block{margin-top:2.8rem}
.cv h3{font-size:.7rem;font-family:var(--sans);font-weight:400;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem}
.cv-row{display:grid;gap:.2rem;padding:1.05rem 0;border-top:1px solid var(--line-soft)}
@media (min-width:620px){.cv-row{grid-template-columns:8rem minmax(0,1fr);gap:1.5rem}}
.cv-row .k{font-size:.7rem;letter-spacing:var(--track);color:var(--muted);padding-top:.3rem}
.cv-row .v strong{font-weight:400;font-family:var(--serif);font-size:1.22rem;display:block;margin-bottom:.25rem}
.cv-row .v span{color:var(--paper-dim)}

/* ---------------------------------------------------------------- */
/* contact                                                           */
/* ---------------------------------------------------------------- */
.contact{padding-block:clamp(5rem,12vw,9rem);position:relative;overflow:hidden}
.contact-bg{position:absolute;inset:0;z-index:0}
.contact-bg img{width:100%;height:100%;object-fit:cover;opacity:.20;filter:saturate(.4)}
.contact-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink) 0%,rgba(11,11,12,.74) 45%,var(--ink) 100%)}
.contact .wrap{position:relative;z-index:2}
.contact h2{font-size:clamp(2.3rem,6.5vw,5rem);margin-block:1.5rem 2.5rem;max-width:16ch}
.write-me{
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.9rem);
  color:var(--accent);margin:0 0 .9rem;
}
.mail{display:inline-block;font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.7rem);border-bottom:1px solid var(--line);padding-bottom:.15em;transition:border-color .45s ease,color .45s ease}
.mail:hover{border-color:var(--accent);color:var(--accent)}
.contact-meta{display:flex;flex-wrap:wrap;gap:1.2rem 3rem;margin-top:clamp(2.5rem,5vw,4rem);font-size:.7rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--paper-dim)}
.contact-meta a{border-bottom:1px solid var(--line);padding-bottom:.25rem;transition:border-color .4s ease,color .4s ease}
.contact-meta a:hover{color:var(--accent);border-color:var(--accent)}

.site-foot{border-top:1px solid var(--line-soft);padding-block:2rem;font-size:.64rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.site-foot .bar{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.to-top{transition:color .35s ease}
.to-top:hover{color:var(--accent)}

/* ---------------------------------------------------------------- */
/* apparitions                                                       */
/* ---------------------------------------------------------------- */
.reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}
.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .stage-frame img{transition:opacity .2s linear}
}


/* ---------------------------------------------------------------- */
/* dossier artistique : lien et visionneuse plein écran              */
/* ---------------------------------------------------------------- */
.p-links{margin-top:1.2rem}
.doc-open{
  font-family:var(--sans);font-size:.66rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--paper);
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.55rem 1.15rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.6rem;
  transition:border-color .4s ease,color .4s ease;
}
.doc-open::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.doc-open:hover{border-color:var(--accent);color:var(--accent)}

.doc{
  position:fixed;inset:0;z-index:300;background:var(--noir);
  display:flex;flex-direction:column;
}
.doc[hidden]{display:none}
.doc-bar{
  flex:none;display:flex;align-items:center;gap:1.5rem;
  padding:1rem clamp(1.25rem,3vw,3rem);
  border-bottom:1px solid rgba(240,236,228,.14);
  font-family:var(--sans);font-size:.66rem;letter-spacing:var(--track);
  text-transform:uppercase;color:rgba(240,236,228,.72);
}
.doc-t{margin-inline-end:auto;color:#F0ECE4}
.doc-dl,.doc-close{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:rgba(240,236,228,.72);background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid rgba(240,236,228,.3);transition:color .3s ease,border-color .3s ease;
}
.doc-dl:hover,.doc-close:hover{color:#C9A876;border-color:#C9A876}
.doc-pages{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.5rem,4vh,3rem) clamp(1.25rem,3vw,3rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,2.5vh,2rem);
}
.doc-pages img{
  width:100%;max-width:1100px;height:auto;
  border:1px solid rgba(240,236,228,.1);
}
body.doc-ouvert{overflow:hidden}


/* ---------------------------------------------------------------- */
/* crédits photo                                                     */
/* ---------------------------------------------------------------- */
/* Une mention discrète dans le bas du cadre noir, posée sur la marge
   laissée par le visuel contenu. Rien ne s'affiche si le crédit n'est
   pas renseigné : jamais de mention vide sur le site. */
.credit{
  position:absolute;left:0;right:0;bottom:.55rem;
  font-family:var(--sans);font-size:.58rem;font-weight:400;
  letter-spacing:var(--track);text-transform:uppercase;
  color:rgba(240,236,228,.5);text-align:center;
  pointer-events:none;
}
.credit:empty{display:none}

/* crédit sous l'aperçu flottant de l'index */
.peek-c{
  position:absolute;left:0;right:0;bottom:0;
  padding:.45rem .6rem;
  font-family:var(--sans);font-size:.55rem;letter-spacing:var(--track);
  text-transform:uppercase;color:rgba(240,236,228,.72);
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  text-align:center;
}
.peek-c:empty{display:none}

/* ================================================================ */
/* ÉCRANS ÉTROITS                                                    */
/* Sans survol, l'index d'accueil était un rectangle noir avec quatre */
/* titres : ni image, ni texte, ni menu. Chaque projet reprend donc   */
/* sa première vue et sa notice, empilées ; site.js déplace les nœuds */
/* existants (aucune image n'est dupliquée) et les remet en place si  */
/* la fenêtre repasse au-dessus du seuil.                            */
/* ================================================================ */
.nav-btn{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;
  background:none;border:0;padding:0;cursor:pointer;
}
@media (min-width:1100px){.nav-btn{display:none}}
.nav-btn i{
  display:block;position:relative;width:20px;height:1px;
  background:rgba(240,236,228,.8);transition:background .25s ease;
}
.nav-btn i::before,.nav-btn i::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:inherit;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-btn i::before{top:-6px}
.nav-btn i::after{top:6px}
.site-head.is-stuck .nav-btn i{background:rgba(20,19,15,.78)}
body.menu-ouvert .nav-btn i{background:transparent}
body.menu-ouvert .nav-btn i::before{background:rgba(245,242,235,.9);transform:translateY(6px) rotate(45deg)}
body.menu-ouvert .nav-btn i::after{background:rgba(245,242,235,.9);transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1099px){
  .nav{
    position:fixed;inset:0;z-index:60;background:var(--noir);
    display:flex;flex-direction:column;justify-content:center;gap:1.5rem;
    padding:7rem clamp(1.5rem,8vw,3rem);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
  }
  body.menu-ouvert{overflow:hidden}
  /* « backdrop-filter » sur l'en-tête collant crée un bloc conteneur : le
     menu en position:fixed se calait sur la barre au lieu de la fenêtre.
     On le neutralise le temps de l'ouverture, l'en-tête devant de toute
     façon être transparent par-dessus le menu noir. */
  body.menu-ouvert .site-head{
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom-color:transparent;color:#F0ECE4;
  }
  body.menu-ouvert .site-head .brand,
  body.menu-ouvert .site-head.is-stuck .lang a{color:rgba(240,236,228,.78)}
  body.menu-ouvert .site-head.is-stuck .lang a[aria-current="true"]{color:var(--accent)}
  /* les libellés du menu passent au clair : la règle de l'en-tête collant
     (.site-head.is-stuck .nav a) les rendait sombres sur fond noir. */
  body.menu-ouvert .site-head .nav a{color:rgba(245,242,235,.88)}
  /* le voile noir ne doit pas recouvrir la marque, le bouton et FR/EN */
  body.menu-ouvert .nav{z-index:1}
  body.menu-ouvert .brand,
  body.menu-ouvert .nav-btn,
  body.menu-ouvert .switches{position:relative;z-index:2}
  body.menu-ouvert .nav{opacity:1;visibility:visible}
  .nav a{
    font-family:var(--serif);font-size:1.3rem;line-height:1.25;
    letter-spacing:0;text-transform:none;color:rgba(245,242,235,.88);padding-block:.15rem;
  }
  .nav a::after{display:none}
}

@media (max-width:999px){
  .hero-index{min-height:auto;display:block;padding:6.5rem 0 clamp(3rem,8vh,5rem)}
  .hero-media,.hero-veil{display:none}
  .hero-foot{width:100%}
  .stage-list li+li{margin-top:2.9rem}
  .stage-list a{display:block;opacity:1}
  .stage-list a .n{display:block;opacity:1;margin:0 0 .5rem;vertical-align:baseline}
  /* le cadre porte le format ; les vues du projet s'y superposent et
     défilent, comme au survol sur grand écran. Image entière visible. */
  .stage-list .vignette{
    position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;
    background:var(--noir);border:1px solid rgba(245,242,235,.18);margin-bottom:.9rem;
  }
  .stage-list .vignette img{
    position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;aspect-ratio:auto;
    object-fit:contain;object-position:center;filter:brightness(.94);
    opacity:0;transition:opacity .45s ease;
  }
  .stage-list .vignette img.on{opacity:1}
  /* lignes « Autres projets » : l'image du survol se pose dans la ligne */
  .idx-vue{
    display:block;width:100%;aspect-ratio:16/10;object-fit:contain;
    background:var(--noir);margin-bottom:.85rem;
  }
  .stage-list .info{position:static;opacity:1;transform:none;pointer-events:auto;margin-top:.8rem}
  .stage-list .info .t{font-size:1rem}
}


/* ---------------------------------------------------------------- */
/* barre de navigation : une seule ligne, toujours                    */
/* Sept libellés français, dont « Collaborations artistiques » :      */
/* en dessous de 1440 px la rangée passait à deux lignes et un même   */
/* libellé pouvait se couper en deux. On empêche la coupure, et on    */
/* resserre légèrement la typographie dans la zone intermédiaire.     */
/* Sous 1100 px, c'est le menu qui prend le relais.                   */
/* ---------------------------------------------------------------- */
.nav{flex-wrap:nowrap}
.nav a{white-space:nowrap}
@media (min-width:1100px) and (max-width:1439px){
  .nav{gap:.8rem}
  .nav a{font-size:.62rem;letter-spacing:.06em}
}