.page-projet{background:var(--creme);color:var(--noir)}
.projet{padding-top:calc(var(--tete) + 2rem);padding-bottom:3rem;max-width:1200px}
.projet__retour,.projet__fin a{display:inline-flex;align-items:center;min-height:44px;font-size:.85rem;text-underline-offset:5px}
.projet__retour{gap:.6rem;color:var(--rouge-sang,#FF0000);font-weight:500}
.projet__retour svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.projet__retour:hover,.projet__fin a:hover{text-decoration:underline}
.projet__entete{margin:1.5rem 0 1rem}
.projet__entete > p:first-child{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.projet h1{font-size:clamp(2rem,5vw,5rem);font-weight:650;line-height:1.05;letter-spacing:-.035em;text-transform:uppercase;margin:.7rem 0 1rem;overflow-wrap:anywhere}
.projet__chapo{font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:350;line-height:1.5}
.projet__image{position:relative;display:block;margin:2rem auto 2.5rem}
.projet__image .catalogue__cadre{position:relative;aspect-ratio:auto;margin:0}
.projet__image .catalogue__cadre img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.projet__lecture{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:44px;height:44px;color:var(--rouge-sang,#FF0000);transform:translate(-50%,-50%);pointer-events:none}
.projet__lecture svg{width:28px;height:28px;fill:currentColor}
.projet__image:focus-visible{outline:2px solid #FF0000;outline-offset:6px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .projet__lecture{transition:transform .2s ease}
  .projet__image:hover .projet__lecture{transform:translate(-50%,-50%) scale(1.08)}
}
.projet__image--verticale{width:min(100%,360px)}
.projet__image--verticale .catalogue__cadre{aspect-ratio:auto}
.projet__action{display:inline-flex;align-items:center;min-height:44px;margin-top:.65rem;font-size:.8rem;border-bottom:1px solid var(--trait)}
.projet__texte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.projet__texte h2{font-size:1rem;font-weight:600;margin-bottom:.65rem}
.projet__texte p{font-size:1rem;font-weight:350;line-height:1.75;color:var(--gris)}
.projet__texte p + h2{margin-top:1.75rem}
.projet__fin{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--trait);margin-top:2.5rem;padding-top:1rem}
.projet__galerie{margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1.25rem;border-top:1px solid var(--trait)}
.projet__galerie h2{margin-bottom:1.25rem;font-size:.8rem;font-weight:450;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.projet__photogrammes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}
.projet__photogrammes figure{margin:0;min-width:0}
.projet__photogrammes figure:first-child{grid-column:1/-1}
.projet__photogrammes--ample figure:last-child{grid-column:1/-1}
.projet__photogrammes img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.projet__photogrammes--verticales{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin-inline:auto}
.projet__photogrammes--verticales figure:first-child{grid-column:auto}
.projet__photogrammes--verticales img{aspect-ratio:auto}
.projet--vimeo .projet__image .catalogue__cadre{aspect-ratio:auto}
.projet--vimeo .projet__photogrammes img{aspect-ratio:auto;object-fit:contain}
.projet--vimeo .projet__texte{display:block}
.projet--vimeo .suite__fiche{grid-template-columns:repeat(4,minmax(0,1fr))}
.projet__intention{max-width:65ch;margin:2rem 0 0 auto}
.projet__intention p{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.8}
@media(max-width:719px){
  .projet{padding-top:calc(var(--tete) + 1rem)}
  .projet__entete{margin-top:1rem}
  .projet__texte{grid-template-columns:1fr;gap:1.5rem}
  .projet__image{margin-block:1.5rem}
  .projet__image--verticale{width:min(85%,320px)}
  .projet--vimeo .suite__fiche{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Films verticaux : respecter le format sans laisser deux bandes vides ──
   Un 9:16 centre dans la colonne de 1200 px laissait plus de 400 px de fond
   noir de chaque cote. L'image garde son format exact, mais elle prend une
   colonne a gauche et la fiche se lit a cote d'elle : la page est remplie par
   la composition, pas par un agrandissement de l'image. */
@media(min-width:900px){
  .projet--vertical{
    display:grid;
    grid-template-columns:minmax(0,clamp(300px,31vw,420px)) minmax(0,1fr);
    column-gap:clamp(2rem,4.5vw,4rem);
    align-items:start;
    max-width:1080px;
  }
  .projet--vertical > .projet__retour,
  .projet--vertical > .projet__entete,
  .projet--vertical > .projet__statut,
  .projet--vertical > .projet__galerie,
  .projet--vertical > .projet__fin{grid-column:1 / -1}
  .projet--vertical > .projet__image{grid-column:1;grid-row:auto;margin:0}
  .projet--vertical > .projet__texte{grid-column:2;margin-top:0}
  .projet--vertical .projet__image--verticale{width:100%}
  /* La fiche tient dans la colonne de droite : deux colonnes, pas quatre. */
  .projet--vertical .suite__fiche{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Pages verticales d'avant Vimeo : la fiche et le texte se suivent dans la
     colonne de droite au lieu de se partager sa largeur en deux. */
  .projet--vertical > .projet__texte{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .projet--vertical .projet__intention{max-width:none;margin:1.75rem 0 0}
  /* Le mur de photogrammes verticaux remplit lui aussi la largeur utile. */
  .projet--vertical .projet__photogrammes--verticales{max-width:none}
}

/* Une entree de fiche peut porter plusieurs valeurs (vocation, role, annee) :
   en ligne elles se collaient les unes aux autres (« Film de marqueRéalisation »). */
.suite__fiche dd span{display:block}
.suite__fiche dd span + span{margin-top:.2rem}