:root { --page:#f5f5f4; --ink:#101010; --pale:#dedede; --type-size:clamp(29px, 3.03vw, 49px); --line-height:1.073; --band-height:calc(var(--type-size) * var(--line-height)); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-height:100%; }
body { background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased; }
button { font:inherit; }
.page { height:100vh; height:100dvh; min-height:400px; width:100%; position:relative; overflow:hidden; background:var(--page); border-radius:0 0 12px 12px; }
.nav { position:absolute; z-index:10; top:7.1%; bottom:7.1%; left:4%; width:210px; display:flex; flex-direction:column; justify-content:space-between; font: 13px/1.2 Arial, Helvetica, sans-serif; }
.nav-top,.nav-bottom { width:100%; }
.nav-link { display:flex; align-items:center; justify-content:flex-start; gap:4px; height:30px; width:100%; padding:0; background:none; color:#0d0d0d; border:0; border-top:1px solid #bababa; text-align:left; cursor:pointer; text-decoration:none; }
.nav-link:hover { color:#888; }
.nav-link span { transform:translateY(-1px); }
.nav-bottom .nav-link { border-color:#d9d9d9; }
.hero { position:absolute; inset:0; display:grid; grid-template-columns:55% 45%; align-items:center; pointer-events:none; }
.fixed-word, .marquee-track { font-family:Georgia, 'Times New Roman', Times, serif; font-size:var(--type-size); font-weight:400; line-height:var(--line-height); letter-spacing:-.022em; }
.fixed-word { font-size:clamp(26px, 3.03vw, 49px); justify-self:end; padding:0 23px 0 0; margin:0; white-space:nowrap; transform:translateY(-1px); }
.marquee-window { position:relative; width:100%; height:100%; overflow:hidden; }
.marquee-track { position:absolute; left:0; top:0; width:max-content; min-width:100%; will-change:transform; }
.marquee-row { height:var(--band-height); line-height:var(--line-height); color:var(--pale); white-space:nowrap; }
/* Masque central fixe : seul le morceau de texte dans cette bande est noir. */
.marquee-ink { position:absolute; inset:0; overflow:hidden; pointer-events:none; clip-path:inset(calc(50% - var(--band-height) / 2) 0 calc(50% - var(--band-height) / 2) 0); }
.marquee-track-ink .marquee-row { color:var(--ink); }
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.detail { z-index:20; position:fixed; inset:0; background:var(--page); visibility:hidden; opacity:0; transition:opacity .35s ease, visibility .35s ease; overflow:auto; }
.detail.is-open { visibility:visible; opacity:1; }
.detail-inner { width:min(740px,calc(100% - 50px)); margin:8vh auto 12vh; font:18px/1.5 Arial, Helvetica, sans-serif; }
.detail-overline {font-size:12px;margin:0 0 56px;}
.detail h2 {font:normal clamp(64px, 10vw, 150px)/1 Georgia,serif; letter-spacing:-.045em; margin:0 0 45px;}
.detail-content { max-width:590px; }
.detail-content p { margin:0 0 24px; }
.detail-content a { color:inherit; text-decoration:underline; text-underline-offset:4px; }
.detail-close { position:fixed; top:5.5%; right:4%; border:0; background:none; font:36px/1 Arial,sans-serif; cursor:pointer; }
@media (max-width:900px) { .nav { width:150px; } .hero{grid-template-columns:55% 45%;} .fixed-word{padding-right:15px;} }
@media (max-width:650px) { :root {--type-size:clamp(24px,5.4vw,34px);} .page{min-height:500px;} .nav { top:4%; bottom:4%; left:5%; width:130px; font-size:11px;} .nav-link {height:27px;} .hero { grid-template-columns:54% 46%; } .fixed-word{font-size:clamp(17px, 3.8vw, 26px);padding-right:12px;} .marquee-row{letter-spacing:-.035em;} }
@media (prefers-reduced-motion:reduce){ .marquee-track{will-change:auto;} }

.nav-name { cursor:default; }
.nav-name:hover { color:#0d0d0d; }

/* Lien social discret, au-dessus du contact */
.social-link { display:flex; align-items:center; width:max-content; min-height:38px; color:#0d0d0d; text-decoration:none; }
.social-link svg { opacity:.42; transition:opacity .2s ease; }
.social-link:hover svg, .social-link:focus-visible svg { opacity:.78; }
.social-link:hover, .social-link:focus-visible { color:#777; }
.nav-link[data-panel] { font:inherit; }

/* V11 : l'accroche commence sur le meme axe vertical que les liens du menu. */
.hero {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:18px;
  padding-left:4%;
}
.fixed-word {
  justify-self:start;
  padding:0;
  font-size:var(--type-size);
}
@media (max-width:900px) {
  .hero { grid-template-columns:max-content minmax(0,1fr); column-gap:12px; padding-left:4%; }
  .fixed-word { padding:0; }
}
@media (max-width:650px) {
  .hero { grid-template-columns:max-content minmax(0,1fr); column-gap:9px; padding-left:5%; }
  .fixed-word { font-size:clamp(17px,3.8vw,26px); padding:0; }
}

/* V14 — une texture au-dessus de toute la page, sans changer les positions. */
.nav-top .nav-name { border-top: 0; }
.page { border-radius: 0; }
#film-grain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { #film-grain { opacity: .11; } }

/* V17 — direction editoriale et typographie Instrument Serif. */
:root { --editorial-serif:'Newsreader', Georgia, 'Times New Roman', serif; }
.fixed-word, .marquee-track, .detail h2, .index-title, .note-item h3, .chapter-intro { font-family:var(--editorial-serif); font-weight:400; }
.fixed-word,.marquee-track {letter-spacing:-.012em;}
.detail { transform:translateY(24px); transition:opacity .52s cubic-bezier(.22,1,.36,1), transform .52s cubic-bezier(.22,1,.36,1), visibility .52s; }
.detail.is-open {transform:translateY(0);}
.detail-inner {width:min(1080px,calc(100% - 80px));margin:0 auto;padding:11vh 0 13vh;font:14px/1.5 Arial,Helvetica,sans-serif;}
.detail-overline {margin-bottom:48px;letter-spacing:.12em;font-size:10px;color:#777;}
.detail h2 {font-size:clamp(90px,12vw,180px);letter-spacing:-.042em;line-height:.84;margin:0 0 65px;}
.detail-content {max-width:none;}
.chapter-intro {font-size:clamp(27px,3vw,45px);line-height:1.12;max-width:780px;margin:0 0 86px!important;}
.section-index,.notes-index {border-top:1px solid #bfc0bd;}
.index-item {border-bottom:1px solid #bfc0bd;}
.index-item summary {list-style:none;display:grid;grid-template-columns:70px 1fr 24px;align-items:center;gap:18px;padding:23px 0;cursor:pointer;}
.index-item summary::-webkit-details-marker {display:none;}
.index-no,.index-symbol,.note-category,.note-status {font:11px/1.3 Arial,Helvetica,sans-serif;color:#888;}
.index-title {font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.02em;}
.index-symbol {font-size:19px;color:#444;transition:transform .25s;}
.index-item[open] .index-symbol{transform:rotate(45deg);}
.index-expanded {padding:0 60px 30px 88px;max-width:700px;font:15px/1.6 Arial,Helvetica,sans-serif;}
.index-expanded p {margin:0 0 12px;}
.muted,.chapter-end {color:#777;}
.chapter-end {font:11px/1.5 Arial,sans-serif;letter-spacing:.08em;margin:45px 0 0!important;text-transform:uppercase;}
.note-item {display:grid;grid-template-columns:70px minmax(0,1fr) 65px;gap:18px;align-items:start;border-bottom:1px solid #bfc0bd;padding:30px 0;}
.note-category{letter-spacing:.1em;}
.note-item h3 {font-size:clamp(38px,5vw,68px);line-height:1.04;margin:13px 0 12px;letter-spacing:-.025em;}
.note-item p{font-size:14px;color:#6b6b6b;margin:0;}
.note-status{text-align:right;}
.location-clock {display:flex;justify-content:space-between;align-items:center;margin:0 0 16px;font:11px/1.3 Arial,Helvetica,sans-serif;color:#666;}
.location-clock time {font-variant-numeric:tabular-nums;color:#171717;}
.rights {font:10px/1.5 Arial,Helvetica,sans-serif;color:#888;margin-top:17px;}
.nav-bottom .social-link{min-height:29px;}
@media(max-width:700px){
  .detail-inner{width:calc(100% - 44px);padding-top:95px;}
  .detail h2{font-size:clamp(68px,15vw,105px);margin-bottom:45px;}
  .chapter-intro{margin-bottom:55px!important;}
  .index-item summary{grid-template-columns:29px 1fr 18px;gap:8px;padding:19px 0;}
  .index-title{font-size:clamp(34px,8vw,54px);}
  .index-expanded{padding:0 15px 25px 37px;}
  .note-item{grid-template-columns:28px 1fr;gap:12px;}
  .note-status{grid-column:2;text-align:left;}
  .nav{bottom:3%;top:4%;}
  .rights{font-size:9px;margin-top:7px;}
  .location-clock{font-size:10px;}
  .nav-bottom .nav-link{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){.detail{transition:none;transform:none;}}

/* V18 : copyright sur une ligne, sans séparateur entre Expériences et Notes. */
.rights { white-space:nowrap; width:max-content; max-width:none; }
.nav-top .nav-link[data-panel="notes"] { border-top:0; }

/* V19 : plus de respiration sous le filet du menu, sans deplacer le nom. */
.nav-top .nav-link[data-panel="experience"] {
  height: 46px;
  padding-top: 16px;
}
@media (max-width:650px) {
  .nav-top .nav-link[data-panel="experience"] {
    height: 41px;
    padding-top: 14px;
  }
}

/* V23 — Newsreader : serif editorial principale, sans police commerciale. */
:root { --editorial-serif: 'Newsreader', Georgia, 'Times New Roman', serif; }
/* La police change uniquement; la mise en page, les transitions, les timings
   du defilement et le grain conservent leurs reglages V19. */

/* V22 : localisation et heure au-dessus de la ligne du mail. */
.location-clock { margin:0 0 15px; }


/* V24 — Index des experiences: typographie Instrument Serif et composition sans filets. */
:root { --experience-serif:'Instrument Serif', Georgia, 'Times New Roman', serif; }
.detail.experience-chapter .detail-inner { width:min(1080px,calc(100% - 80px)); }
.detail.experience-chapter .detail-overline { margin-bottom:clamp(64px,11vh,145px); }
.detail.experience-chapter #detail-title {
  font-family:var(--experience-serif);
  font-size:clamp(74px,11vw,155px);
  letter-spacing:-.035em;
  line-height:.95;
  margin:0 0 clamp(45px,7vh,90px);
}
.detail.experience-chapter .section-index { border:0; }
.detail.experience-chapter .index-item { border:0; }
.detail.experience-chapter .index-item summary {
  grid-template-columns:38px minmax(0,1fr);
  gap:16px;
  padding:7px 0;
  align-items:baseline;
  border:0;
}
.detail.experience-chapter .index-no { font-size:11px; color:#a6a6a4; }
.detail.experience-chapter .index-title {
  font-family:var(--experience-serif);
  font-weight:400;
  font-size:clamp(42px,5.3vw,76px);
  line-height:1.10;
  letter-spacing:-.012em;
  color:#1a1a1a;
  transition:color .2s ease;
}
.detail.experience-chapter .index-item summary:hover .index-title,
.detail.experience-chapter .index-item summary:focus-visible .index-title { color:#757575; }
.detail.experience-chapter .index-item summary:focus-visible { outline:1px solid #aaa; outline-offset:4px; }
.detail.experience-chapter .index-expanded {
  padding:15px 0 22px 54px;
  max-width:650px;
  color:#555;
  animation:experienceReveal .35s ease-out both;
}
@keyframes experienceReveal {
  from { opacity:0; transform:translateY(-5px); }
  to { opacity:1; transform:translateY(0); }
}
.detail.experience-chapter .chapter-end { margin-top:clamp(65px,12vh,135px)!important; color:#aaa; }
@media(max-width:700px){
  .detail.experience-chapter .detail-inner { width:calc(100% - 44px); }
  .detail.experience-chapter .detail-overline { margin-bottom:68px; }
  .detail.experience-chapter #detail-title { font-size:clamp(65px,15vw,110px); margin-bottom:65px; }
  .detail.experience-chapter .index-item summary { grid-template-columns:27px minmax(0,1fr);gap:10px;padding:8px 0; }
  .detail.experience-chapter .index-title { font-size:clamp(36px,8vw,57px); }
  .detail.experience-chapter .index-expanded { padding-left:37px; }
}
@media(prefers-reduced-motion:reduce){ .detail.experience-chapter .index-expanded{animation:none;} }

/* V25 — menu sans filets entre les quatre entrees editoriales. */
.nav-top .nav-link[data-panel] { border-top:0; }
/* Seule la première entrée garde l'espacement ajouté dans la V19. */
.editorial-placeholder { max-width:650px; padding-top:18px; }
.editorial-placeholder .editorial-number { display:block; color:#999; font:11px/1.4 Arial,Helvetica,sans-serif; letter-spacing:.09em; margin-bottom:32px; }
.editorial-placeholder p { font-size:clamp(19px,2.25vw,27px); line-height:1.4; margin:0 0 24px; }
.editorial-placeholder p.muted { font:12px/1.5 Arial,Helvetica,sans-serif; color:#999; margin-top:38px; }


/* V27 — page Experiences inspirée d'un index éditorial minimaliste. */
.detail.experience-chapter .detail-overline,
.detail.experience-chapter #detail-title {
  display:none;
}
.detail.experience-chapter .detail-inner {
  width:min(1090px, calc(100% - 64px));
  padding:9.5vh 0 11vh;
}
.experience-layout {
  border-top:1px dotted #a8a8a8;
}
.experience-block {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  column-gap:34px;
  padding:28px 0 38px;
}
.experience-block + .experience-block {
  border-top:1px dotted #a8a8a8;
  padding-top:30px;
}
.experience-kicker {
  font:12px/1.35 Arial, Helvetica, sans-serif;
  color:#383838;
  padding-top:2px;
}
.experience-kicker span {
  display:inline-block;
}
.experience-manifesto {
  max-width:760px;
  font-family: var(--experience-serif);
  font-size: clamp(44px, 4.35vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color:#121212;
}
.experience-manifesto p {
  margin:0;
}
.experience-index {
  width:100%;
}
.experience-row {
  border-bottom:1px dotted #a8a8a8;
}
.experience-row summary {
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  gap:20px;
  align-items:center;
  padding:16px 0 18px;
  cursor:pointer;
}
.experience-row summary::-webkit-details-marker { display:none; }
.experience-role {
  font:400 14px/1.45 Arial, Helvetica, sans-serif;
  color:#171717;
}
.experience-date {
  font:12px/1.35 Arial, Helvetica, sans-serif;
  text-align:right;
  color:#8b8b8b;
  white-space:nowrap;
}
.experience-row .index-expanded {
  padding:0 120px 18px 0;
  max-width:760px;
  color:#5a5a5a;
  font:14px/1.6 Arial, Helvetica, sans-serif;
  animation:experienceReveal .28s ease-out both;
}
.experience-row .index-expanded p { margin:0 0 10px; }
.experience-row summary:hover .experience-role,
.experience-row summary:focus-visible .experience-role { color:#6f6f6f; }
.experience-row summary:focus-visible { outline:1px solid #aaa; outline-offset:4px; }
.experience-footer {
  margin-top:20px;
  font:11px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9a9a9a;
}
@media (max-width: 900px) {
  .detail.experience-chapter .detail-inner { width:calc(100% - 44px); }
  .experience-block { grid-template-columns:1fr; row-gap:20px; }
  .experience-manifesto { max-width:none; font-size: clamp(34px, 8vw, 54px); }
}
@media (max-width: 640px) {
  .experience-block { padding:20px 0 28px; row-gap:16px; }
  .experience-block + .experience-block { padding-top:22px; }
  .experience-kicker { font-size:11px; }
  .experience-row summary { grid-template-columns:minmax(0,1fr) 78px; gap:12px; padding:14px 0 16px; }
  .experience-role { font-size:13px; }
  .experience-date { font-size:11px; }
  .experience-row .index-expanded { padding:0 0 16px 0; font-size:13px; }
}

/* V28 — petites fleches au bout des intitules, jamais sur les dates. */
.experience-role { display:inline-flex; align-items:baseline; flex-wrap:wrap; column-gap:10px; }
.experience-arrow { display:inline-block; color:#8d8d8b; font:400 15px/1 Arial,Helvetica,sans-serif; transform:translate3d(0,0,0) rotate(0deg); transition:transform .32s cubic-bezier(.22,1,.36,1), color .25s ease; }
.experience-row summary:hover .experience-arrow,
.experience-row summary:focus-visible .experience-arrow { transform:translate3d(3px,-3px,0); color:#171717; }
.experience-row[open] .experience-arrow { transform:rotate(90deg); color:#171717; }
.experience-row[open] summary:hover .experience-arrow,
.experience-row[open] summary:focus-visible .experience-arrow { transform:rotate(90deg) translate3d(3px,-3px,0); }
@media (prefers-reduced-motion:reduce) { .experience-arrow { transition:none; } }

/* V29 : deux villes compactes au-dessus du contact. */
.location-clocks { margin-bottom:15px; }
.location-clocks .location-clock { margin:0; padding:0; }
.location-clocks .location-clock + .location-clock { margin-top:5px; }


/* V31 — A propos: The Personal Manifesto. Styles limites au chapitre. */
.detail.manifesto-chapter .detail-overline,
.detail.manifesto-chapter #detail-title { display:none; }
.detail.manifesto-chapter .detail-inner { width:min(1080px,calc(100% - 80px)); padding:9vh 0 9vh; }
.personal-manifesto { min-height:78vh; display:flex; flex-direction:column; color:#171717; }
.manifesto-heading,.manifesto-footer { display:flex; justify-content:space-between; gap:20px; font:11px/1.4 Arial,Helvetica,sans-serif; letter-spacing:.04em; }
.manifesto-heading { color:#777; }
.manifesto-verbs { margin:clamp(65px,12vh,140px) 0 clamp(68px,12vh,135px); }
.manifesto-verbs p { font:400 clamp(64px,9.1vw,138px)/.96 var(--experience-serif,'Instrument Serif',Georgia,serif); letter-spacing:-.035em; margin:0; opacity:0; transform:translateY(14px); animation:manifestoAppear .75s cubic-bezier(.22,1,.36,1) forwards; }
.manifesto-verbs p:nth-child(2) { animation-delay:.13s; }
.manifesto-verbs p:nth-child(3) { animation-delay:.26s; }
.manifesto-verbs p:nth-child(4) { animation-delay:.39s; }
@keyframes manifestoAppear { to { opacity:1;transform:translateY(0); } }
.manifesto-statement { border-top:1px solid #c7c7c2; display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:22px 0 clamp(75px,12vh,150px); }
.manifesto-statement span { font:11px/1.4 Arial,Helvetica,sans-serif; letter-spacing:.08em; color:#888; }
.manifesto-statement p { margin:0; max-width:440px; font:17px/1.5 Arial,Helvetica,sans-serif; }
.manifesto-footer { margin-top:auto; color:#888; }
@media(max-width:700px){
 .detail.manifesto-chapter .detail-inner { width:calc(100% - 44px); padding:92px 0 55px; }
 .manifesto-verbs { margin:78px 0 85px; }
 .manifesto-verbs p { font-size:clamp(55px,12vw,88px); }
 .manifesto-statement { grid-template-columns:1fr; gap:18px; padding-bottom:75px; }
 .manifesto-statement p { font-size:15px; }
 .manifesto-footer { font-size:9px; }
}
@media(prefers-reduced-motion:reduce){ .manifesto-verbs p { animation:none; opacity:1; transform:none; } }


/* V32 — portrait editorial : une accroche, puis des textes aérés. */
.about-editorial-intro { margin:clamp(75px,12vh,130px) 0 clamp(75px,13vh,135px); max-width:950px; }
.about-eyebrow { margin:0 0 22px; color:#8a8a86; font:10px/1.5 Arial,Helvetica,sans-serif; letter-spacing:.13em; }
.about-editorial-intro h3 { margin:0 0 40px; font:400 clamp(54px,7.3vw,106px)/.98 var(--experience-serif,'Instrument Serif',Georgia,serif); letter-spacing:-.028em; }
.about-lead { max-width:710px; margin:0; font:400 clamp(23px,2.7vw,37px)/1.19 var(--experience-serif,'Instrument Serif',Georgia,serif); }
.about-editorial-sections { margin-bottom:clamp(90px,14vh,160px); }
.about-editorial-section { display:grid; grid-template-columns:minmax(150px, 1fr) minmax(0, 1.6fr); gap:40px; padding:29px 0 56px; border-top:1px solid #c7c7c2; }
.about-editorial-section h4 { margin:0; font:11px/1.5 Arial,Helvetica,sans-serif; font-weight:400; color:#777; }
.about-editorial-copy { max-width:570px; }
.about-editorial-copy p { margin:0 0 19px; font:16px/1.68 Arial,Helvetica,sans-serif; color:#292929; }
@media(max-width:700px) {
 .about-editorial-intro {margin:75px 0 76px;}
 .about-editorial-intro h3 {font-size:clamp(47px,11vw,75px);margin-bottom:29px;}
 .about-lead {font-size:clamp(24px,6.5vw,32px);}
 .about-editorial-section {grid-template-columns:1fr;gap:19px;padding:21px 0 35px;}
 .about-editorial-copy p {font-size:14px;line-height:1.65;}
}

/* V33 — Transition de chapitre et croix filaire raffinée. */
.detail {
  transform:none;
  opacity:0;
  visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .68s cubic-bezier(.76,0,.24,1),
             opacity .32s ease, visibility .68s;
}
.detail.is-open {
  transform:none;
  opacity:1;
  visibility:visible;
  clip-path:inset(0 0 0 0);
}
.detail-inner > :not(.detail-close) {
  opacity:0;
  transform:translateY(18px);
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .55s ease;
}
.detail.is-open .detail-inner > :not(.detail-close) {
  opacity:1;
  transform:translateY(0);
  transition-delay:.19s;
}
.detail-close {
  position:fixed;
  top:5.5%;right:4%;
  width:38px;height:38px;
  padding:0;
  display:grid;
  place-items:center;
  background:none;
  border:0;
  color:var(--ink);
  cursor:pointer;
  z-index:25;
  opacity:0;
  transform:rotate(-32deg);
  transition:opacity .4s ease,transform .65s cubic-bezier(.22,1,.36,1);
}
.detail.is-open .detail-close {opacity:1;transform:rotate(0deg);transition-delay:.24s;}
.close-stroke {position:absolute;width:24px;height:1px;background:currentColor;transform-origin:center;transition:transform .42s cubic-bezier(.22,1,.36,1),width .3s ease;}
.close-stroke-one {transform:rotate(45deg);}
.close-stroke-two {transform:rotate(-45deg);}
.detail-close:hover .close-stroke-one,.detail-close:focus-visible .close-stroke-one {transform:rotate(135deg);}
.detail-close:hover .close-stroke-two,.detail-close:focus-visible .close-stroke-two {transform:rotate(45deg);}
.detail-close:focus-visible {outline:1px solid #888;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .detail,.detail-inner > :not(.detail-close),.detail-close,.close-stroke{transition:none!important;}
}


/* V34 — Cinema : index de films sobre et éditorial. */
.detail.cinema-chapter .detail-inner { width:min(1080px,calc(100% - 80px)); }
.detail.cinema-chapter .detail-overline { margin-bottom:30px; }
.detail.cinema-chapter #detail-title { font-family:'Instrument Serif',Georgia,serif; font-size:clamp(80px,10vw,152px); line-height:.95; margin-bottom:35px; letter-spacing:-.025em; }
.film-index { max-width:100%; }
.film-index-meta { display:flex; justify-content:space-between; gap:20px; font:10px/1.4 Arial,Helvetica,sans-serif; letter-spacing:.08em; color:#858585; }
.film-index-lead { font:15px/1.55 Arial,Helvetica,sans-serif; color:#686868; max-width:530px; margin:40px 0 58px; }
.film-index-list { padding:0; margin:0; list-style:none; border-top:1px solid #cacac6; }
.film-index-row { display:grid; grid-template-columns:62px minmax(0,1fr) 70px; align-items:center; column-gap:22px; padding:20px 0 22px; border-bottom:1px solid #cacac6; }
.film-index-number,.film-index-year {font:11px/1.4 Arial,Helvetica,sans-serif;color:#8f8f8b;font-variant-numeric:tabular-nums;}
.film-index-year {text-align:right;}
.film-index-identity h3 {font:400 clamp(29px,3.35vw,48px)/1.05 'Instrument Serif',Georgia,serif; letter-spacing:-.012em; margin:0 0 6px; color:#161616;}
.film-index-identity > span {font:12px/1.5 Arial,Helvetica,sans-serif;color:#888;}
.film-index-disclaimer {font:11px/1.5 Arial,Helvetica,sans-serif;color:#979793;margin-top:26px;}
@media(max-width:700px) {
  .detail.cinema-chapter .detail-inner {width:calc(100% - 44px);}
  .detail.cinema-chapter #detail-title {font-size:clamp(60px,13vw,92px);}
  .film-index-row {grid-template-columns:30px minmax(0,1fr) 44px;column-gap:10px;padding:16px 0;}
  .film-index-identity h3 {font-size:clamp(26px,7vw,40px);}
  .film-index-lead {margin:28px 0 38px;font-size:14px;}
}

/* V35 : affiche au centre au survol / focus d'un titre de film. */
.film-hover-title { display:inline-block; cursor:default; transition:color .2s ease; }
.film-hover-title:hover, .film-hover-title:focus-visible {color:#7b7b77;}
.film-hover-title:focus-visible {outline:1px dotted #777; outline-offset:4px;}
.film-poster-preview {
  position:fixed; left:50%; top:50%; z-index:90;
  width:clamp(175px,21vw,320px); aspect-ratio:2/3;
  transform:translate(-50%,-47%) scale(.96);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility .28s;
  box-shadow:0 22px 70px rgba(20,20,20,.19);
  background:#dedbd4; overflow:hidden;
}
.film-poster-preview.is-visible {opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
.film-poster-preview img {width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;opacity:0;transition:opacity .22s ease;}
.film-poster-preview.has-image img {opacity:1;}
.film-poster-fallback {display:flex; flex-direction:column;justify-content:space-between; padding:20px; height:100%; color:#272622;}
.film-poster-fallback-index,.film-poster-fallback-director {font:10px/1.5 Arial,sans-serif;letter-spacing:.04em;}
.film-poster-fallback-title {font:400 clamp(30px,3.6vw,54px)/1 'Instrument Serif',Georgia,serif;}
@media(max-width:700px){.film-poster-preview{width:min(48vw,250px);}}
@media(prefers-reduced-motion:reduce){.film-poster-preview,.film-poster-preview img,.film-hover-title{transition:none;}}

/* V36 — filet discret sous le nom, sans modifier les autres entrees. */
.nav-top .nav-name {
  border-top: 0;
  border-bottom: 1px solid #bababa;
}

/* V38 : zone de survol et focus = ligne complete du film. */
.film-index-row { cursor:default; transition:background-color .22s ease; }
.film-index-row:hover,.film-index-row:focus-visible { background-color:rgba(30,30,30,.025); }
.film-index-row:focus-visible { outline:1px dotted #858580; outline-offset:-2px; }
.film-index-row:hover .film-hover-title,.film-index-row:focus-visible .film-hover-title {color:#7b7b77;}

/* V39 — Cinémathèque : survol neutre et typographie agrandie. */
.film-index-row { transition:none; padding:24px 0 26px; }
.film-index-row:hover, .film-index-row:focus-visible { background-color:transparent; }
.film-index-row:hover .film-hover-title, .film-index-row:focus-visible .film-hover-title,
.film-hover-title:hover, .film-hover-title:focus-visible { color:#161616; }
.film-hover-title { transition:none; }
.film-index-identity h3 { font-size:clamp(36px,4.1vw,59px); line-height:1.04; margin-bottom:8px; }
.film-index-identity > span { font-size:14px; }
.film-index-number, .film-index-year { font-size:13px; }
.film-index-lead { font-size:16px; }
@media(max-width:700px){
  .film-index-row { padding:20px 0 22px; }
  .film-index-identity h3 { font-size:clamp(31px,7.8vw,46px); }
  .film-index-identity > span { font-size:12px; }
  .film-index-number, .film-index-year { font-size:11px; }
}

/* V40 — Titres de films plus grands, sans changer les autres informations. */
.film-index-identity h3 {
  font-size: clamp(44px, 5.2vw, 78px);
  line-height: 1.01;
}
@media (max-width: 700px) {
  .film-index-identity h3 {
    font-size: clamp(34px, 9vw, 56px);
  }
}

/* V41 — Cinematheque : lignes compactes, marges verticales symetriques. */
.film-index-row { padding-block: 12px; align-items: center; }
.film-index-identity h3 { margin-bottom: 5px; }
@media (max-width: 700px) {
  .film-index-row { padding-block: 11px; }
  .film-index-identity h3 { margin-bottom: 4px; }
}

/* V42 — correction de la taille des titres et centrage reel des lignes. */
.film-index-row {
  padding-top: 14px;
  padding-bottom: 14px;
  align-items: center;
}
.film-index-identity h3 .film-hover-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
  color: #161616;
}
.film-index-identity > span { font-size:14px; line-height:1.5; }
@media(max-width:700px) {
  .film-index-row { padding-top:12px; padding-bottom:12px; }
  .film-index-identity > span { font-size:12px; }
}

/* V43 — titres plus discrets, affiches flottantes 50 % plus grandes. */
.film-index-identity h3 {
  font-size: clamp(36px, 4.1vw, 59px);
}
.film-poster-preview {
  width: clamp(262.5px, 31.5vw, 480px);
  max-height: 88dvh;
}
@media (max-width: 700px) {
  .film-index-identity h3 { font-size: clamp(29px, 7.8vw, 46px); }
  .film-poster-preview { width: min(72vw, 375px); }
}

/* V44 — Titres de la Cinémathèque un peu plus discrets. */
.film-index-identity h3 { font-size:clamp(33px,3.55vw,51px); }
@media (max-width:700px) { .film-index-identity h3 { font-size:clamp(27px,7vw,41px); } }

/* V45 : masquer le sur-titre du chapitre Cinémathèque. */
.detail.cinematheque-chapter .detail-overline { display:none; }


/* V47 — sémantique, accessibilité et robustesse des interactions. */
.skip-link { position:fixed; top:12px; left:12px; padding:12px 16px; z-index:200; transform:translateY(-160%); background:#121212; color:#fff; text-decoration:none; font:13px/1.3 Arial,sans-serif; }
.skip-link:focus-visible { transform:translateY(0); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid #454545; outline-offset:3px; }
body.chapter-open { overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
  .detail, .detail::before, .detail::after, .detail-inner, .detail-content,
  .film-poster-preview, .film-poster-preview img, .detail-close, .close-stroke {
    transition:none !important; animation:none !important;
  }
}

/* V48 — Page À propos : sous-titres puis paragraphes sur un seul axe. */
.about-editorial-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  padding: 26px 0 44px;
}
.about-editorial-section h4,
.about-editorial-copy {
  width: 100%;
}
.about-editorial-copy {
  max-width: 720px;
}
@media (max-width: 700px) {
  .about-editorial-section {
    gap: 14px;
    padding: 22px 0 34px;
  }
}

/* V50 — organisations et periodes du parcours LinkedIn */
.experience-row .experience-role {display:flex; align-items:baseline; flex-wrap:wrap; column-gap:10px; row-gap:4px;}
.experience-row .experience-company {flex-basis:100%; font:400 12px/1.45 Arial,Helvetica,sans-serif; color:#777; letter-spacing:0;}
.experience-row summary {align-items:center;}
@media(max-width:640px) { .experience-row .experience-company {font-size:11px;} .experience-date{white-space:normal;} }

/* V52 — missions professionnelles, lisibles dans les entrées dépliables. */
.experience-missions { max-width:820px; }
.experience-missions-label { font-weight:600; margin:18px 0 7px; }
.experience-missions ul { margin:0 0 12px; padding-left:1.15em; list-style:disc; }
.experience-missions li { margin:0 0 9px; padding-left:.15em; }
.experience-client-list { margin:12px 0 16px; }
@media (max-width:650px) { .experience-missions li { margin-bottom:10px; } }

/* V62 — transition de volet unique pour tous les chapitres. */
:root { --chapter-wipe-duration: .68s; --chapter-wipe-ease: cubic-bezier(.76,0,.24,1); }
.detail,
.detail.experience-chapter,
.detail.cinematheque-chapter,
.detail.cinema-chapter,
.detail.manifesto-chapter {
  transform: none;
  opacity: 1;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--chapter-wipe-duration) var(--chapter-wipe-ease), visibility var(--chapter-wipe-duration);
}
.detail.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
}
/* Le volet pilote toute l'ouverture et la fermeture : pas de seconde apparition par chapitre. */
.detail .detail-inner > :not(.detail-close),
.detail.is-open .detail-inner > :not(.detail-close) {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}
.detail .detail-close,
.detail.is-open .detail-close {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .detail { transition: none !important; }
}

/* V65 : Instrument Serif, comme le titre Cinematheque, sur toute la homepage. */
.fixed-word, .marquee-track, .marquee-track-ink { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; }

/* V66 : le debut de l'accroche s'aligne exactement avec le bord droit
   des filets du nom et du contact dans la colonne laterale. */
@media (min-width: 901px) {
  .hero { padding-left: calc(4% + 210px); }
}
@media (min-width: 651px) and (max-width: 900px) {
  .hero { padding-left: calc(4% + 150px); }
}
/* Sur ecrans etroits, conserver l'accroche et la colonne animee lisibles. */
@media (max-width: 650px) {
  .hero { padding-left: 5%; }
}

/* V68 — Typographie de l'accueil plus grande, sans toucher aux chapitres. */
:root { --type-size: clamp(35px, 3.72vw, 61px); }
.fixed-word { font-size: var(--type-size); }
@media (min-width: 651px) and (max-width: 900px) {
  :root { --type-size: clamp(32px, 4.2vw, 43px); }
}
@media (max-width: 650px) {
  :root { --type-size: clamp(26px, 6.7vw, 38px); }
  .fixed-word { font-size: clamp(19px, 4.65vw, 29px); }
}