/* LA VARIANTE NUIT DU BANC D'ESSAI — 2026-09-14.

   ⚠ CE FICHIER NE REMPLACE PAS projet-banc.css, IL SE CHARGE APRÈS LUI.
   C'est tout l'intérêt : un projet événementiel a EXACTEMENT la même mise en
   page que les autres, seules les couleurs changent, pour que le visiteur
   voie immédiatement qu'il a changé de famille.

   Une première version faisait une mise en page à part, photos bord à bord
   et peu de texte. Refusée par Jonas le 2026-09-14 : « on ne fait pas un
   site pour un événement, ça doit rester un projet, DA AIO, mise en page
   AIO, juste on met en noir ». Il avait raison : la page perdait le fil du
   projet et les vidéos avaient disparu avec. */

.projet-nuit{background:var(--ink,#101719);color:var(--ivory,#f8f5ed)}

/* la colonne de gauche */
.projet-nuit .projet-fil .eyebrow{color:#8fa0a6}
.projet-nuit .projet-fil>p{color:#b9c6c9}
.projet-nuit .projet-fiche{border-top-color:#f8f5ed22}
.projet-nuit .projet-fiche dt{color:#8fa0a6}
.projet-nuit .projet-chiffres{border-top-color:#f8f5ed22}
.projet-nuit .projet-chiffres span{color:#a9b8bc}
.projet-nuit .button{background:var(--ivory,#f8f5ed);color:var(--ink,#101719);
  border-color:var(--ivory,#f8f5ed)}
.projet-nuit .button:hover{background:var(--orange,#ff7526);
  border-color:var(--orange,#ff7526);color:var(--ink,#101719)}

/* la colonne des écrans */
.projet-nuit .projet-ecrans p{color:#b9c6c9}
.projet-nuit .projet-ecrans figcaption{color:#8fa0a6}
.projet-nuit .projet-ecrans figure img{box-shadow:0 20px 55px #00000059}
.projet-nuit .projet-marque{background:var(--orange,#ff7526);color:var(--ink,#101719)}

/* la fin */
.projet-nuit .projet-fin p{color:#b9c6c9}
.projet-nuit .projet-fin blockquote{background:#f8f5ed0f;border-left-color:var(--orange,#ff7526)}
.projet-nuit .projet-suite{border-top-color:#f8f5ed22}
.projet-nuit .projet-suite .eyebrow{color:#8fa0a6}
.projet-nuit .projet-suite a{color:var(--ivory,#f8f5ed)}

/* la hiérarchie, en nuit */
.projet-nuit .projet-ouverture figcaption,
.projet-nuit .projet-duo figcaption{color:#8fa0a6}
.projet-nuit .projet-ouverture img,
.projet-nuit .projet-duo img{box-shadow:0 20px 55px #00000059}
.projet-nuit .projet-duo p{color:#b9c6c9}

/* ── la vidéo, à la place d'une capture ──────────────────────────────── */
/* Façade : on montre la vignette, on ne charge le lecteur qu'au clic. Une
   page qui embarque quatre lecteurs YouTube au chargement pèse plus lourd
   que tout le reste du site réuni. */
.projet-film{position:relative;display:block;width:100%;padding:0;border:0;
  background:none;cursor:pointer;border-radius:10px;overflow:hidden;
  aspect-ratio:16/9}
.projet-film--verticale{aspect-ratio:9/16;max-width:min(420px,88vw);margin:0 auto}
.projet-film img{display:block;width:100%;height:100%;object-fit:cover}
.projet-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.projet-film:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#10171900 40%,#10171966)}
.projet-film-lire{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:#f8f5edee;z-index:2;
  display:grid;place-items:center;transition:background .2s}
.projet-film:hover .projet-film-lire{background:var(--orange,#ff7526)}
.projet-film-lire:before{content:"";border-left:19px solid #101719;
  border-top:12px solid transparent;border-bottom:12px solid transparent;
  margin-left:5px}
.projet-film:focus-visible{outline:3px solid var(--orange,#ff7526);outline-offset:3px}
.projet-film.joue:after,.projet-film.joue .projet-film-lire{display:none}