/* =====================================================================
   projet.css — l'habillage des pages projet

   Sorti de projet.html pour qu'il puisse servir à sept pages au lieu
   d'une. Rien n'y a changé : c'est le même style, à un autre endroit.
   ===================================================================== */

  @font-face{font-family:"Aukera";src:url(medias/aukera.woff2) format("woff2");font-display:swap}
  /* Les mesures de l'accueil : mêmes corps, même marge, même filet, mêmes typos */
  :root{
    --muted:rgba(255,255,255,.55); --line:rgba(255,255,255,.18);
    --helv:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --titre:"Aukera","Helvetica Neue",Helvetica,Arial,sans-serif;
    --marge:clamp(18px,2.4vw,38px);
    --t-xs:clamp(9px,.72vw,11px);
    --t-s:clamp(12px,min(1.02vw,1.72vh),16px);
    --t-m:clamp(15px,min(1.4vw,2.4vh),21px);
    --t-l:clamp(40px,min(5.4vw,9vh),84px);
    --col:min(44vw,680px);
    /* La colonne de droite commence exactement où commence la seconde image d'une paire */
    --droite:calc(var(--vw, 100vw) / 2 - 3px - var(--marge));
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* le noir dès la racine : sinon le navigateur peint un fond blanc
     entre la navigation et l'application de la feuille de style */
  html{scroll-behavior:smooth; background:#000}
  /* pendant l'ouverture, pas de barre de défilement : elle rétrécirait la
     fenêtre de ~15px et décalerait le centrage par rapport à la page works */
  body.closed{overflow:hidden}
  body{
    background:#000; color:#fff;
    font:400 15px/1.5 var(--helv);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none}
  ::selection{background:#fff; color:#000}

  /* Les relevés : le même corps partout, comme à l'accueil */
  .label{font:400 var(--t-xs)/1.7 var(--helv); letter-spacing:.1em; text-transform:uppercase}
  .muted{color:var(--muted)}

  /* ===== NAV ===== */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:60;
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 10px;   /* lisibilité : halo posé dans nav.js */
    font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  }
  .nav > *{color:rgba(255,255,255,.72); transition:color .25s}
  .nav > *:hover{color:#fff}
  .nav .logo{font-weight:700; letter-spacing:.26em; font-size:13px; color:#fff}
  .nav .on{color:var(--accent)}

  /* ===== HERO ===== */
  .hero{
    height:82vh; margin:0 auto; overflow:hidden; position:relative;
    width:var(--strip, 190px);
    transition:width 760ms cubic-bezier(.16,1,.3,1);
    will-change:width;
  }
  body.opened .hero{width:100%}
  /* Sans `?t=1`, on n'arrive pas d'une lamelle : la page est là, entière, dès le
     premier rendu. La classe vient d'un script en tête de page, avant tout dessin ;
     depuis l'accueil, c'est la plongée dans la silhouette qui fait la transition. */
  html.direct .hero{width:100%; transition:none}
  html.direct .reveal{opacity:1; transform:none; transition:none}
  @view-transition{navigation:auto}
  ::view-transition-group(root){animation-duration:.25s}
  /* Une image claire ne doit pas effacer la barre */
  .hero::before{content:""; position:absolute; left:0; right:0; top:0; height:120px; z-index:3; pointer-events:none;
                background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0))}
  .hero .media{position:absolute; inset:0; background-size:cover; background-position:center}
  /* L'image d'en-tête, posée en dur par le générateur. Elle se comporte
     exactement comme le fond CSS qu'elle remplace — d'où `object-fit:cover`.
     Le dégradé du projet reste derrière et tient la place le temps du
     chargement, ce qui évite le rectangle blanc. */
  .hero .media img{position:absolute; inset:0; width:100%; height:100%;
                   object-fit:cover; display:block}
  /* Le lecteur : celui de l'en-tête, et celui des films à écouter dans la page */
  .lecteur{position:relative; cursor:pointer}
  .lecteur .play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:74px; height:74px; border:1px solid rgba(255,255,255,.85); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .5s 500ms;
  }
  body.opened .lecteur .play{opacity:1}
  /* le sélecteur reprend `body.opened`, sinon la règle du dessus — plus
     spécifique — garderait la flèche visible pendant la lecture */
  body.opened .lecteur.joue .play{opacity:0; pointer-events:none}

  /* ===== LECTEUR ===== */
  /* La vidéo ne s'affiche qu'une fois ses métadonnées lues : tant que le
     fichier manque, la page garde son dégradé au lieu d'un rectangle noir. */
  .hero video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:none; background:#000;
  }
  .hero.video video{display:block}

  .pbar{
    position:absolute; left:0; right:0; bottom:0; z-index:4;
    display:none; align-items:center; gap:16px;
    padding:26px var(--marge) 12px;
    background:linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0));
    opacity:0; transition:opacity .3s; cursor:default;
    font:400 var(--t-xs)/1.7 var(--helv); letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.68);
  }
  /* Le jour, la barre et son voile restent ceux d'un film : sombres, posés sur l'image */
  html.clair .lecteur .pbar,html.clair .lecteur .play{filter:invert(1)}
  html.clair .lecteur .pfill{filter:none !important}
  .lecteur.video .pbar{display:flex}
  .lecteur.video:hover .pbar, .lecteur.video.pause .pbar{opacity:1}

  .ptime{display:flex; gap:6px; font-variant-numeric:tabular-nums}
  .ptime b{font-weight:400; color:#fff}

  /* piste haute de 12px pour être attrapable, filet d'1px pour rester discret */
  .ptrack{position:relative; flex:1; height:12px; cursor:pointer}
  .ptrack i, .pfill{
    position:absolute; top:50%; left:0; height:1px; margin-top:-.5px;
  }
  .ptrack i{right:0; background:rgba(255,255,255,.22)}
  .pfill{width:0; background:var(--accent)}

  .pbar button{
    background:none; border:0; padding:2px 0; cursor:pointer;
    font:inherit; letter-spacing:inherit; text-transform:inherit;
    color:rgba(255,255,255,.68); transition:color .2s;
  }
  .pbar button:hover{color:#fff}

  @media(max-width:760px){
    .pbar{gap:11px; padding:22px var(--marge) 11px}
    .pbar .plein{display:none}
  }

  /* ===== CONTENU ===== */
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s 380ms, transform .6s 380ms}
  body.opened .reveal{opacity:1; transform:none}

  /* La page s'aligne sur la barre et sur l'accueil : une marge, pas une colonne centrée */
  .wrap{padding:0 var(--marge)}

  .titleline{
    padding-top:clamp(28px,5.5vh,56px);
    font:400 var(--t-l)/.92 var(--titre); letter-spacing:-.015em; text-wrap:balance;
  }
  .titleline b{display:block; font-weight:400}
  .titleline span{display:none}
  .titleline em{
    display:block; margin-top:clamp(8px,1.6vh,16px);
    font:italic 400 var(--t-m)/1.3 var(--helv); letter-spacing:0; color:var(--muted);
  }
  /* Quand le client et le titre se confondent, le titre seul prend la place */
  .titleline em:first-child{margin-top:0; font:inherit; letter-spacing:inherit; color:inherit}

  /* Deux colonnes, comme Istor : le récit à gauche, le relevé à droite */
  .ouverture,section{display:grid; grid-template-columns:minmax(0,1fr) var(--droite); column-gap:26px}
  .ouverture{margin-top:clamp(22px,4.5vh,46px); padding-top:9px; border-top:1px solid var(--line)}

  .meta,.credits{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 26px; align-content:start}
  .credits{
    margin-top:clamp(18px,3.4vh,34px); padding-top:9px; border-top:1px solid var(--line);
    font-size:var(--t-s); line-height:1.56; color:rgba(255,255,255,.82);
  }
  .credits:empty{display:none}
  .meta div span,.credits div span{
    display:block; font:400 var(--t-xs)/1.7 var(--helv); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
  .meta div b{font-weight:400; font-size:var(--t-s); line-height:1.5; letter-spacing:.01em; text-transform:uppercase}

  .intro,section p{
    width:var(--col); max-width:100%;
    font-size:var(--t-s); line-height:1.56; color:rgba(255,255,255,.72); text-wrap:pretty;
  }
  .intro p + p,section p + p{margin-top:.85em}

  section{padding-top:clamp(60px,11vh,112px)}
  /* Le titre à gauche, son texte à droite, les images dessous sur toute la largeur */
  section :is(h2,h3){grid-column:1; grid-row:1 / span 8}
  section p{grid-column:2}
  section:not(:has(p)) :is(h2,h3){grid-column:1 / -1}
  section > :is(.full,.pair,.strip,.carres){grid-column:1 / -1}
  /* Une paire d'images sous un film en est la suite : le même écart qu'entre deux images */
  section:not(:has(h2,h3)){padding-top:0}
  section:not(:has(h2,h3)) > :is(.pair,.full){margin-top:6px}
  section :is(h2,h3){font:400 calc(var(--t-l) * .52)/1 var(--titre); letter-spacing:-.01em}
  section :is(h2,h3) i{
    display:block; margin-top:clamp(6px,1.2vh,12px);
    font:400 var(--t-xs)/1.7 var(--helv); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }

  /* Les médias sortent du conteneur de texte pour occuper toute la largeur.
     --vw vaut clientWidth, pas 100vw : 100vw inclut la barre de défilement et
     provoquerait un débordement horizontal de quinze pixels. */
  .full, .pair, .strip, .carres{
    width:var(--vw, 100vw);
    position:relative; left:50%; margin-left:calc(var(--vw, 100vw) / -2);
  }

  /* Garde-fou : si `--vw` est momentanément trop grand — le temps d'une
     image, entre l'apparition d'une barre de défilement et sa prise en
     compte — le débordement est coupé au lieu de faire apparaître une barre
     horizontale, qui elle-même rétrécirait la page et relancerait le
     problème. `clip` plutôt que `hidden` : `hidden` ferait de la page un
     conteneur de défilement, ce qui casserait tout élément collant qu'on y
     poserait un jour. */
  body{overflow-x:clip}

  /* Une vidéo de bloc doit remplir sa case exactement comme une image. Sans
     cette règle, un navigateur qui ignore le style en ligne — ou une vidéo
     à qui l'on vient d'ajouter des commandes — retombe sur sa taille
     naturelle de 300 × 150 et se retrouve petite et calée à gauche. */
  .full > video, .full > img,
  .pair > div > video, .pair > div > img,
  .strip > div > video, .strip > div > img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* ===== UN FILM PLEINE LARGEUR SE MONTRE ENTIER =====
     `.full` a une hauteur fixe et recadre ce qu'on y met. C'est le bon
     comportement pour une image : une bande pleine largeur se compose en
     rognant. C'est le mauvais pour un film — un 16:9 dans une bande de
     2,43:1 perd plus du quart de sa hauteur, et sur un film qui porte du
     texte à l'image, ce quart emporte les titres.

     La case prend donc le rapport du film lui-même, relevé à la volée dans
     `projet.js` puisque le CSS ne peut pas connaître la définition d'un
     fichier. Un film large occupe toute la largeur, comme l'en-tête : la page
     défile, lui n'a pas à rétrécir. Seul un format vertical est plafonné, pour
     ne pas prendre toute la page ; `contain` laisse alors des bandes plutôt que
     de recadrer — mieux vaut du noir qu'un titre coupé. */
  .full.film{
    height:auto;
    aspect-ratio:var(--ar, 16 / 9);
    background:#000;
  }
  .full.film.debout{max-height:min(88vh, 1000px)}
  /* Une image seule se montre entière elle aussi */
  .full:has(> img){height:auto}
  .full > img{height:auto}
  .full.film > video{object-fit:contain}
  /* Un film à écouter part de son affiche, et le lecteur le fait démarrer */
  .full.lecteur > .play{z-index:3}
  .full{height:min(78vh,860px); background-size:cover; background-position:center; margin-top:clamp(22px,4.5vh,46px)}
  .pair{display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:6px; margin-top:clamp(22px,4.5vh,46px)}
  /* Des images et des films larges : la case garde leur format, rien n'est recadré */
  .pair div{aspect-ratio:16 / 9; background-size:cover; background-position:center}
  /* Le nombre de colonnes vient du bloc lui-même, via --cols : trois médias
     occupent la même largeur que quatre, chacun plus large. Au-delà de six,
     la bande passe à la ligne plutôt que de réduire les vignettes à des traits. */
  .strip{
    display:grid; gap:6px; margin-top:clamp(22px,4.5vh,46px);
    grid-template-columns:repeat(var(--cols,4), minmax(0,1fr));
  }
  .strip.foule{grid-template-columns:repeat(auto-fill, minmax(180px,1fr))}
  /* le format reste vertical, mais on plafonne : à trois colonnes sur un grand
     écran, un 9/16 strict ferait 1100px de haut */
  .strip div{
    /* `width:100%` n'est pas décoratif : avec un aspect-ratio et un plafond de
       hauteur, la cellule se sizerait sur son ratio et ne remplirait plus sa
       colonne — mesuré à 169px au lieu de 396. La largeur définie force la
       colonne, le plafond ne rogne plus que la hauteur. */
    width:100%; aspect-ratio:9/16; max-height:min(76vh,900px);
    background-size:cover; background-position:center; overflow:hidden;
  }

  /* ===== SUITE ===== */
  .next{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 26px;
    margin-top:clamp(44px,8vh,84px); border-top:1px solid var(--line);
  }
  .next a{
    display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:clamp(6px,1.2vh,12px); padding-top:9px;
    font:400 calc(var(--t-l) * .52)/1 var(--titre); letter-spacing:-.01em;
    color:rgba(255,255,255,.72); transition:color .25s;
  }
  .next a:hover{color:#fff}
  .next a#nNext{align-items:flex-end; text-align:right}
  .next a small{font:400 var(--t-xs)/1.7 var(--helv); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

  /* ===== PIED : celui de Contact, à l'accueil ===== */
  .pied{
    display:grid; grid-template-columns:1fr auto 1fr; gap:8px 26px; align-items:end;
    margin-top:clamp(70px,13vh,130px); padding:9px 0 12px; border-top:1px solid var(--line);
  }
  .pied > :last-child{text-align:right}
  .pied a:hover{color:var(--accent)}
  .pied .liens{display:flex; flex-wrap:wrap; gap:6px 18px}

  @media(max-width:760px){
    :root{--t-l:36px; --t-m:14px; --col:auto}
    /* Une seule colonne : le relevé, le récit, puis les crédits */
    .ouverture{display:flex; flex-direction:column; gap:clamp(22px,4vh,34px)}
    .releve{display:contents}
    .meta{order:-1}
    .credits{margin-top:0}
    section{display:block}
    section p{margin-top:clamp(14px,2.8vh,30px)}
    .next{grid-template-columns:minmax(0,1fr)}
    .next a#nNext{align-items:flex-start; text-align:left}
    .pied{grid-template-columns:minmax(0,1fr)}
    .pied > :last-child{text-align:left}
    .pair{grid-template-columns:1fr}
    /* déclaration directe : elle prime sur le --cols posé en attribut style */
    .strip, .strip.foule{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* Un nombre impair ne laisse pas de trou : la dernière prend toute la largeur */
    .strip > div:last-child:nth-child(odd){grid-column:1 / -1; aspect-ratio:16 / 9}
    .hero{height:62vh}
  }

  /* ===== UN PROJET TOUT EN 1:1 =====
     L'écran s'ouvre coupé en deux : le texte à gauche, le film à droite, jusqu'au
     bord et sur le même axe que la seconde image d'une paire. Le récit et le relevé
     se posent au bas du carré. Puis tous les médias restent carrés. */
  body.carre{--carre:min(calc(var(--vw, 100vw) / 2 - 3px), 100vh)}
  body.carre .hero{position:absolute; top:0; right:0; width:var(--carre); height:var(--carre); margin:0; transition:none}
  body.carre .wrap{display:grid; grid-template-columns:minmax(0,1fr) var(--droite); column-gap:26px; grid-template-rows:auto 1fr}
  body.carre .wrap::before{content:""; grid-column:2; grid-row:1 / 3; height:var(--carre)}
  body.carre .wrap > *{grid-column:1 / -1}
  /* Le titre reste dans sa moitié : Aukera est large, et un long mot ne se coupe pas */
  body.carre .wrap > .titleline{grid-column:1; grid-row:1; padding-top:clamp(58px,10vh,96px); font-size:min(var(--t-l), calc((var(--vw, 100vw) / 2 - var(--marge) - 26px) / 9.1))}
  body.carre .wrap > .ouverture{
    grid-column:1; grid-row:2; align-self:end; margin:clamp(22px,4.5vh,46px) 0 clamp(12px,2.4vh,26px);
    display:flex; flex-direction:column; gap:clamp(14px,2.8vh,30px);
  }
  body.carre .intro{width:auto}
  body.carre .pair div,body.carre .strip div{aspect-ratio:1 / 1; max-height:none}
  .carres{display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:6px; margin-top:clamp(22px,4.5vh,46px)}
  .carres > .lecteur{aspect-ratio:1 / 1; background:#000; overflow:hidden}
  .carres video{width:100%; height:100%; object-fit:cover; display:block}
  .pbar button{white-space:nowrap}
  /* À trois de front, la barre n'a pas la place de tout dire avant 1200 px */
  @media(max-width:1200px){
    .carres .plein{display:none}
    .carres .pbar{padding-left:12px; padding-right:12px; gap:10px}
  }
  @media(max-width:760px){
    body.carre .hero{position:relative; width:100%; height:auto; aspect-ratio:1 / 1}
    body.carre .wrap{display:block}
    body.carre .wrap::before{display:none}
    body.carre .wrap > .titleline{padding-top:clamp(28px,5.5vh,56px); font-size:min(var(--t-l), calc((100vw - 2 * var(--marge)) / 9.1))}
    body.carre .wrap > .ouverture{gap:clamp(22px,4vh,34px); margin-bottom:0}
    body.carre .strip > div:last-child:nth-child(odd){aspect-ratio:1 / 1}
    .carres{grid-template-columns:minmax(0,1fr)}
  }