/* David S. Prudhomme - Film & TV Director
   Principe : un écran de cinéma. Noir pur, blanc franc, la couleur vient des images.
   Une seule famille (Archivo), dont on joue la largeur comme un générique de fin. */
:root{
  --black:#000;
  --white:#FFFFFF;
  --grey:#A6A6A6;      /* texte secondaire, lisible (8.6:1) */
  --grey-2:#6E6E6E;    /* texte tertiaire (4.6:1) */
  --rule:#262626;
  --screen:#0D0D0D;    /* fond d'image en attente */
  --rec:#E5251B;       /* le point REC, réservé au direct */
  --accent:#3FC9B5;    /* turquoise (teal, tendance 2026-2027) : uniquement le métier sous le nom */
  --pad:clamp(20px,3.2vw,48px);
  --wide:"wdth" 118;
  --cond:"wdth" 75;
}
*{box-sizing:border-box}
html{background:var(--black);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font-family:"Archivo",system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.site-header{position:relative;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px var(--pad)}
.brand{display:flex;align-items:baseline;gap:14px;min-height:44px;align-items:center;flex-wrap:wrap}
.brand-name{font-weight:600;font-variation-settings:var(--wide);font-size:15px;letter-spacing:.01em}
.brand-role{font-size:14px;color:var(--accent)}
.menu{position:relative}
.menu-btn{min-height:44px;min-width:44px;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:10px}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:5px;width:18px}
.menu-btn .bars i{display:block;height:1.5px;background:var(--white);transition:transform .3s}
.menu-btn[aria-expanded=true] .bars i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded=true] .bars i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu-panel{position:absolute;top:56px;right:0;min-width:260px;padding:20px 0 0;background:var(--black);border-top:1px solid var(--white);display:none;flex-direction:column}
.menu-panel.open{display:flex}
.menu-panel .item{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:9px 0;font-size:22px;font-weight:500;font-variation-settings:var(--wide);letter-spacing:-.01em;color:var(--grey);transition:color .2s}
.menu-panel .item:hover,.menu-panel .item[aria-current=page]{color:var(--white)}
.menu-panel .item.dev{font-style:italic;font-weight:400}
.menu-panel .item[aria-current=page]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--white)}
.menu-social{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;padding:14px 0 4px;border-top:1px solid var(--rule)}
.menu-social a{font-size:14px;color:var(--grey);min-height:32px;display:inline-flex;align-items:center}
.menu-social a:hover{color:var(--white)}

/* ---------- page ---------- */
main{padding:0 var(--pad)}
.page{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:96px;padding:56px 0 140px}
.page-title{margin:0;font-size:clamp(44px,7vw,112px);line-height:.92;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.035em}
.intro{max-width:620px;margin:0;font-size:19px;line-height:1.5;color:var(--grey)}
.head{display:flex;flex-direction:column;gap:22px}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--grey);margin-bottom:-64px}
.back:hover{color:var(--white)}
.back svg{transition:transform .25s}
.back:hover svg{transform:translateX(-3px)}

/* ---------- footer ---------- */
.site-footer{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px 40px;padding:40px var(--pad) 44px;border-top:1px solid var(--rule)}
.site-footer .say{display:flex;flex-direction:column;gap:6px}
.site-footer .say span{color:var(--grey);font-size:15px}
.site-footer .mail{align-self:flex-start;font-size:clamp(22px,2.4vw,32px);font-weight:500;font-variation-settings:var(--wide);letter-spacing:-.02em;border-bottom:1px solid var(--white);padding-bottom:2px}
.social{display:flex;flex-wrap:wrap;gap:8px 24px}
.social a{font-size:15px;color:var(--grey);min-height:36px;display:inline-flex;align-items:center}
.social a:hover{color:var(--white)}

/* ---------- home ---------- */
.home{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column}
.reel-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px var(--pad) 12px}
.reel{position:relative;width:min(100%,calc((100svh - 190px)*2.39));aspect-ratio:2.39/1;background:var(--screen);overflow:hidden}
.reel iframe{position:absolute;top:50%;left:50%;width:100%;height:134.4%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.home-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:0 var(--pad) 22px}
.sound{min-height:44px;font-size:15px;color:var(--grey);display:inline-flex;align-items:center;gap:10px}
.sound:hover,.sound[aria-pressed=true]{color:var(--white)}
.sound .wave{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.sound .wave i{width:2px;height:3px;background:currentColor;transition:height .2s}
.sound[aria-pressed=true] .wave i{animation:eq 1s ease-in-out infinite}
.sound[aria-pressed=true] .wave i:nth-child(2){animation-delay:.2s}
.sound[aria-pressed=true] .wave i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

/* ---------- images ---------- */
.still{position:relative;background:var(--screen);overflow:hidden}
.still img{width:100%;height:100%;object-fit:cover}
.still.r169{aspect-ratio:16/9}
.still.scope{aspect-ratio:2.39/1}

/* ---------- fiction : la salle ---------- */
.programme{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px)}
.screening{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;width:min(100%,1000px);margin:0 auto}
.screening .still img{transition:opacity .6s}
.screening:hover .still img{opacity:.88}
.caption{display:flex;justify-content:space-between;align-items:baseline;gap:8px 32px;flex-wrap:wrap}
.caption .t{font-size:clamp(26px,3vw,40px);line-height:1.05;font-weight:500;font-variation-settings:var(--wide);letter-spacing:-.025em}
.caption .t small{display:block;margin-top:6px;font-size:15px;letter-spacing:0;font-weight:400;font-variation-settings:normal;color:var(--grey)}
.caption .m{font-size:15px;color:var(--grey)}

/* ---------- grilles ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:72px 28px}
.grid.three{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.card{display:flex;flex-direction:column;gap:16px}
.card .still img{transition:opacity .5s}
.card:hover .still img{opacity:.85}
.card-t{font-size:21px;line-height:1.2;font-weight:500;font-variation-settings:var(--wide);letter-spacing:-.015em}
.card-m{font-size:15px;color:var(--grey);margin-top:4px}
.group{display:flex;flex-direction:column;gap:36px}
.group-t{margin:0;font-size:15px;font-weight:500;color:var(--grey);padding-bottom:14px;border-bottom:1px solid var(--rule)}

/* ---------- projet ---------- */
.player{position:relative;width:100%;aspect-ratio:16/9;background:var(--screen)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.project-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px 80px;align-items:start}
.project-title{margin:0;font-size:clamp(38px,5vw,76px);line-height:.95;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.035em}
.project-title small{display:block;margin-top:12px;font-size:18px;font-weight:400;font-variation-settings:normal;letter-spacing:0;color:var(--grey)}
.project-meta{margin:22px 0 0;font-size:16px;color:var(--grey)}
.logline{margin:28px 0 0;font-size:21px;line-height:1.45;max-width:30em}
.versions{display:flex;gap:6px;margin-top:28px}
.versions button{min-height:40px;min-width:52px;padding:0 14px;font-size:14px;font-weight:500;color:var(--grey);border:1px solid var(--rule);border-radius:999px}
.versions button[aria-pressed=true]{color:var(--black);background:var(--white);border-color:var(--white)}
.credits{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:12px 28px;margin:0;font-size:15px}
.credits dt{color:var(--grey-2)}
.credits dd{margin:0;color:var(--white)}
.laurels{margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px}
.laurels li{color:var(--white)}
.laurels-t{font-size:15px;color:var(--grey-2);margin:32px 0 0}
.laurels-t+.laurels{margin-top:10px}
.episodes{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.ep{display:grid;grid-template-columns:120px 1fr auto;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);text-align:left;width:100%;color:var(--grey);transition:color .2s}
.ep .n{font-size:15px}
.ep .tt{font-size:20px;font-weight:500;font-variation-settings:var(--wide);letter-spacing:-.01em;color:var(--white)}
.ep .st{font-size:14px}
.ep:hover .tt{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ep[aria-current=true] .st::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--white);margin-right:8px;vertical-align:middle}
.more{align-self:flex-start;font-size:15px;border-bottom:1px solid var(--white);padding-bottom:2px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:28px;border-top:1px solid var(--rule)}
.pager a{display:flex;flex-direction:column;gap:6px;min-height:44px}
.pager a:last-child{text-align:right;align-items:flex-end}
.pager .k{font-size:14px;color:var(--grey-2)}
.pager .v{font-size:clamp(20px,2vw,28px);font-weight:500;font-variation-settings:var(--wide);letter-spacing:-.02em;color:var(--grey);transition:color .2s}
.pager a:hover .v{color:var(--white)}

/* ---------- live ---------- */
.on-air{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--white)}
.on-air::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec);animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}
.comps{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.comps li{font-size:clamp(26px,3.4vw,52px);line-height:1.08;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.03em;width:100%}
.for{font-size:16px;color:var(--grey);margin:0}

/* ---------- boutons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--white);color:var(--black);font-size:15px;font-weight:500;transition:opacity .2s}
.button:hover{opacity:.85}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px 88px;align-items:start}
.about .lead{margin:0 0 32px;font-size:clamp(26px,2.7vw,42px);line-height:1.04;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.03em}
.about .bio{display:flex;flex-direction:column;gap:18px;font-size:18px;line-height:1.6;color:var(--grey);max-width:34em;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.about .bio p{margin:0}
.about .bio strong{font-weight:400;color:var(--white)}
.about .bio .fr{font-size:14px;line-height:1.5;color:var(--grey2,#6E6E6E);text-align:left;padding-top:6px}
.about .reach{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:40px}
.about .reach .social a{color:var(--white)}
.about .reach .social a:hover{color:var(--grey)}

/* ---------- 404 ---------- */
.lost{display:flex;flex-direction:column;align-items:flex-start;gap:32px}

/* ---------- photos ---------- */
.still.r32{aspect-ratio:3/2}
.still.r45{aspect-ratio:4/5}
.still.portrait{aspect-ratio:4/5}
.still.slot{background:#0B0B0B;outline:1px dashed #2a2a2a;outline-offset:-1px}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.gallery.bts{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery.four{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- index (commercials, music videos) ---------- */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 64px;align-items:baseline;gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--rule);transition:color .25s}
.row-c{font-size:clamp(28px,4.2vw,64px);line-height:1;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.035em}
.row-s{font-size:16px;color:var(--grey)}
.row-y{font-size:16px;color:var(--grey);text-align:right;font-variant-numeric:tabular-nums}
.row-img{position:fixed;z-index:5;right:var(--pad);top:50%;width:min(34vw,560px);transform:translateY(-50%) scale(.98);opacity:0;pointer-events:none;transition:opacity .35s,transform .5s}
.index:hover .row{color:var(--grey-2)}
.index:hover .row .row-s,.index:hover .row .row-y{color:var(--grey-2)}
.index .row:hover,.index .row:focus-visible{color:var(--white)}
.index .row:hover .row-s,.index .row:hover .row-y{color:var(--grey)}
.row:hover .row-img,.row:focus-visible .row-img{opacity:1;transform:translateY(-50%) scale(1)}
@media (hover:none),(max-width:900px){
  .row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:20px 0 26px}
  .row-img{position:static;grid-column:1/-1;grid-row:1;width:100%;opacity:1;transform:none;margin-bottom:12px}
  .row-s{grid-column:1/2}
  .row-y{grid-row:2;grid-column:2}
  .row-c{grid-column:1/2;grid-row:2;font-size:30px}
  .row-s{grid-row:3}
  .index:hover .row{color:var(--white)}
}

/* ---------- in development ---------- */
.devs{display:flex;flex-direction:column;gap:96px}
.dev{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 72px;align-items:end}
.dev-t{margin:0;font-size:clamp(34px,4vw,64px);line-height:.95;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.035em}
.dev-f{margin:14px 0 0;font-size:16px;color:var(--grey)}
.dev .line{margin:28px 0 0;font-size:clamp(20px,1.8vw,26px);line-height:1.3;font-weight:500;font-variation-settings:normal;letter-spacing:0}
.dev-s{margin:16px 0 0;font-size:15px;color:var(--grey-2)}

/* ---------- texte ---------- */
.textlink{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--white);border-bottom:1px solid var(--white);line-height:1.2;padding-top:12px;padding-bottom:2px;min-height:0}
.textlink:hover{color:var(--grey);border-color:var(--grey)}
.note{margin:16px 0 0;font-size:16px;color:var(--grey)}
.award{margin:32px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);font-size:17px;font-weight:500;color:var(--white)}
.award+.laurels-t{margin-top:20px}
.stills{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:12px}
[hidden]{display:none!important}
.ep.no-n{grid-template-columns:1fr auto}
.ep.no-n .n{display:none}

/* ---------- documentary ---------- */
.index.small .row-c{font-size:clamp(24px,2.8vw,40px)}

/* ---------- tv director ---------- */
.tv-match{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px 80px;align-items:start}
.tv-text{display:flex;flex-direction:column;gap:24px;padding-top:clamp(24px,12vh,150px)}
.tv-lead{margin:0;font-size:clamp(20px,1.8vw,26px);line-height:1.35;color:var(--white);max-width:26em}
.vertical{position:relative;height:min(78svh,720px);aspect-ratio:9/16;background:var(--screen)}
.vertical iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.screening.wide{width:100%}
.grid.studio{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:72px 32px}
.card.big .card-t{font-size:clamp(26px,2.6vw,38px);font-weight:600;letter-spacing:-.03em}
.card.big .card-m{font-size:16px;margin-top:8px}

/* ---------- in development ---------- */
.dev{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:48px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dev-more{display:flex;flex-direction:column;gap:8px;margin-top:-40px}
.dev-more p{margin:0;font-size:16px;color:var(--grey)}

/* ---------- instagram ---------- */
.insta-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.still.sq{aspect-ratio:1/1}
.insta .textlink{margin-top:-12px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .project-grid,.dev,.about,.tv-match{grid-template-columns:minmax(0,1fr)}
  .vertical{height:auto;width:min(100%,360px);margin:0 auto}
  .insta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .about .still.portrait{max-width:420px}
  .gallery.bts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page{gap:72px;padding-top:32px}
  .back{margin-bottom:-48px}
}
@media (max-width:640px){
  .gallery.bts,.gallery.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-header{padding:18px var(--pad)}
  .brand{gap:2px 10px}
  .brand-name{font-size:14px}
  .brand-role{font-size:13px}
  .menu-panel{position:fixed;top:72px;left:0;right:0;min-width:0;padding:16px var(--pad) 24px;border-top:1px solid var(--rule);height:calc(100svh - 72px)}
  .menu-panel .item{font-size:30px;padding:10px 0}
  .reel{width:100%;aspect-ratio:auto;height:100%}
  .reel iframe{height:100%;width:auto;aspect-ratio:16/9}
  .reel-wrap{padding:0}
  .page{gap:56px;padding-bottom:96px}
  .back{margin-bottom:-36px}
  .grid{gap:48px}
  .ep{grid-template-columns:1fr auto}
  .ep .n{grid-column:1/-1;margin-bottom:-10px;font-size:13px}

  .credits{grid-template-columns:minmax(0,1fr);gap:2px}
  .credits dd{margin-bottom:12px}
  .site-footer{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.group .index{border-top:0}

.gallery.onset{grid-template-columns:repeat(4,minmax(0,1fr))}

.press{margin:28px 0 0;padding:0 0 0 20px;border-left:1px solid var(--white)}
.press p{margin:0;font-size:19px;line-height:1.45;color:var(--white)}
.press a{display:inline-block;margin-top:8px;font-size:14px;color:var(--grey)}
.press a:hover{color:var(--white)}
@media (max-width:640px){.gallery.onset{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery.onset{grid-auto-rows:clamp(200px,24vw,380px)}
.gallery.onset .still{aspect-ratio:auto!important;height:100%}
@media (max-width:640px){.gallery.onset{grid-auto-rows:clamp(160px,44vw,260px)}}

.press footer{margin-top:8px;font-size:14px;color:var(--grey)}
.press .textlink{font-size:14px;padding-top:10px}
/* TV Director : sections lisibles */
.tv-section{display:flex;flex-direction:column;gap:32px;padding-top:40px;border-top:1px solid var(--white)}
.tv-h{margin:0;font-size:clamp(32px,4vw,60px);line-height:1;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.035em}
.tv-d{margin:-16px 0 0;font-size:17px;color:var(--grey);max-width:40em}

/* Alignement des textes : justifiés, comme la bio */
.logline,.note,.intro,.tv-d,.press p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.press-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:28px 0 0;font-size:15px}
.press-links .k{color:var(--grey);width:100%}
.poster{margin:40px 0 0;max-width:300px}
.poster img{display:block;width:100%;height:auto}
@media (max-width:900px){.tv-text{padding-top:0}.poster{max-width:240px}}

.social a.legal,.menu-social a.legal,.legal{font-size:10px;letter-spacing:.02em;color:var(--grey);opacity:.38;white-space:nowrap;align-self:center;margin-left:6px}
.social a.legal:hover,.menu-social a.legal:hover{opacity:.8;color:var(--grey)}
.legal-page{display:flex;flex-direction:column;gap:40px;max-width:44em}
.legal-page h2{margin:0 0 12px;font-size:20px;font-weight:600;font-variation-settings:var(--wide);letter-spacing:-.01em}
.legal-page p{margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--grey);text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Mobile : pas de justification (trous dans les lignes courtes), pas de retours forcés */
@media (max-width:640px){
  .logline,.note,.intro,.tv-d,.press p,.about .bio,.legal-page p{text-align:left}
  br.dbr{display:none}
}
.menu-social a.legal{margin-left:0;width:100%}