/* LA MISE EN PAGE « PROJET » — dite le banc d'essai. Validée par Jonas sur
   maquette le 2026-09-14 (maquette B).

   Le site a deux façons de raconter une réalisation :
   - ÉVÉNEMENTIEL (projet.css) : plein écran, grandes photos. Arcane.
   - PROJET (ce fichier) : une colonne étroite qui reste en place pendant
     qu'on défile, et les écrans qui défilent à côté, en grand.

   ⚠ CE FICHIER NE SE CHARGE PAS AVEC projet.css. Les deux mises en page se
   battraient pour les mêmes sections. Un gabarit choisit l'une OU l'autre.

   ⚠ POURQUOI LES ÉCRANS SONT GRANDS ET LES TITRES PETITS : la première
   version faisait l'inverse, titres à 88 px et captures en vignette de
   560 px. « Les images sont ridicules sur des textes énormes » (Jonas,
   2026-09-14). Sur une étude de cas, ce sont les écrans qui portent la page.
   Le titre ne dépasse pas 30 px, les intertitres 23. */

:root{--banc-large:min(80vw,1450px)}

.projet-banc{display:grid;grid-template-columns:30% 1fr;gap:4.4vw;
  width:var(--banc-large);margin:0 auto;padding:92px 0 86px;align-items:start}

/* ── la colonne qui reste en place ───────────────────────────────────── */
.projet-fil{position:sticky;top:104px}
.projet-fil .eyebrow{margin:0 0 12px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#12546999}
.projet-fil h1{margin:0 0 18px;font-size:30px;line-height:1.16;
  letter-spacing:-.02em;font-weight:700}
.projet-fil h1 em{font-style:normal;color:var(--aio-orange,#ff7526)}
.projet-fil>p{margin:0 0 14px;font-size:15px;line-height:1.7;color:#3d4b4f}

.projet-fiche{margin:22px 0 0;padding:16px 0 0;border-top:1px solid #12546922}
.projet-fiche>div{display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:7px 0;font-size:13px}
.projet-fiche dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#12546999}
.projet-fiche dd{margin:0;text-align:right}

/* la bande de chiffres : la seule chose que Jonas gardait de l'ancienne
   mise en page. Elle passe en deux colonnes dans la barre latérale. */
.projet-chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px;
  margin:24px 0 0;padding:20px 0 0;border-top:1px solid #12546922}
.projet-chiffres strong{display:block;font-size:27px;line-height:1;
  color:var(--aio-orange,#ff7526)}
.projet-chiffres span{display:block;margin-top:4px;font-size:11px;line-height:1.35;
  color:#5a6a6e}

.projet-fil .button{display:inline-block;margin-top:22px}

/* ── les écrans qui défilent ─────────────────────────────────────────── */
.projet-ecrans>section{margin:0 0 62px}
.projet-ecrans h2{margin:0 0 12px;font-size:23px;line-height:1.22;
  letter-spacing:-.015em;font-weight:700}
/* Le texte va jusqu'au bord droit de l'image. Une largeur de lecture plus
   courte laissait un décrochement entre la fin des lignes et le bord de la
   capture, que Jonas a vu tout de suite (2026-09-14). */
.projet-ecrans p{margin:0 0 16px;font-size:16px;line-height:1.72;color:#2b3739;
  text-align:justify;hyphens:auto}
/* Le dernier paragraphe avant une capture respirait moins que la capture
   elle-même : le texte collait l'image du dessous et il restait un trou sous
   celle du dessus (Jonas, 2026-09-14). */
.projet-ecrans p:last-of-type{margin-bottom:26px}
.projet-ecrans figure{margin:0}
.projet-ecrans figure img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 20px 55px #10171918}
.projet-ecrans figcaption{margin-top:10px;font-size:12px;color:#5a6a6e}
.projet-marque{display:inline-block;margin:0 0 10px;padding:5px 11px;
  border-radius:20px;background:var(--aio-petrol,#125469);color:var(--aio-ivory,#f8f5ed);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* deux captures de téléphone côte à côte, à leur taille réelle */
.projet-tel{display:flex;gap:26px;align-items:flex-start}
.projet-tel figure{flex:1;max-width:330px}

/* ── LA HIÉRARCHIE D'UN PROJET ────────────────────────────────────────── */
/* Règle posée par Jonas le 2026-09-14, en montrant l'ancienne fiche des
   24 Heures : bannière, présentation, UN média en pleine largeur, puis des
   sections texte + média en DEUX COLONNES qui alternent gauche et droite,
   et une galerie en mosaïque à la fin.

   « Une galerie n'a pas à être énorme dans un texte, donc le texte ne doit
   pas être noyé entre deux énormes images. » C'était le défaut : chaque
   écran occupait toute la colonne, et le texte disparaissait entre deux
   images de 1150 px. Ici une seule image a droit à la pleine largeur, celle
   qui ouvre. Les autres accompagnent leur texte, à côté de lui. */

/* le média d'ouverture, le seul en pleine largeur */
.projet-ouverture{margin:0 0 58px}
.projet-ouverture figure{margin:0}
/* la bannière est un BANDEAU, pas une affiche : elle annonce, elle
   n'occupe pas l'écran. « Ta bannière ne va pas, elle est trop grosse »,
   Jonas 2026-09-14. */
.projet-ouverture img{display:block;width:100%;height:auto;max-height:min(46vh,460px);
  object-fit:cover;border-radius:10px;box-shadow:0 20px 55px #10171918}
.projet-ouverture .projet-film{aspect-ratio:auto;height:min(46vh,460px)}
/* une vidéo à nous, en fond animé : même cadre que les autres bannières */
.projet-fond{display:block;width:100%;height:min(46vh,460px);object-fit:cover;
  border-radius:10px;box-shadow:0 20px 55px #10171918}

/* un bloc de texte sur toute la colonne : la présentation, et les passages
   qui n'ont rien à montrer. Il respire au lieu d'être collé à une image. */
.projet-seul{margin:0 0 58px}
.projet-seul h2{margin:0 0 14px}
/* pleine largeur de la colonne, et CENTRÉ : ces blocs n'accompagnent aucune
   image, ils annoncent. Le fer à gauche les faisait ressembler à un
   paragraphe de plus au lieu d'une ouverture. */
.projet-seul{text-align:center}
.projet-seul p{max-width:none;text-align:center;hyphens:none}
.projet-seul h2{text-align:center}
.projet-ouverture figcaption{margin-top:10px;font-size:12px;color:#5a6a6e}

/* les sections à deux colonnes, en alternance */
.projet-ecrans .projet-duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;
  align-items:center;margin:0 0 62px}
.projet-ecrans .projet-duo>figure{margin:0}
.projet-ecrans .projet-duo img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 18px 46px #10171914}
.projet-ecrans .projet-duo figcaption{margin-top:10px;font-size:12px;color:#5a6a6e}
/* une section sur deux met le média à gauche : l'œil ne prend pas le pli */
.projet-ecrans .projet-duo--inverse>.projet-duo-texte{order:2}
.projet-ecrans .projet-duo h2{margin:0 0 12px}
.projet-ecrans .projet-duo h2~h2{margin-top:30px}
.projet-ecrans .projet-duo p{margin:0 0 14px}
.projet-ecrans .projet-duo p:last-child{margin-bottom:0}

/* ── la galerie, en mosaïque, à la fin ───────────────────────────────── */
/* Les photos qui n'ont rien à démontrer vivent ici, en petit. C'est leur
   place : elles complètent, elles n'interrompent pas. */
.projet-galerie{margin:16px 0 0}
.projet-galerie h2{margin:0 0 18px;font-size:23px;line-height:1.22;font-weight:700}
.projet-mosaique{columns:3;column-gap:14px}
.projet-mosaique button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;
  background:none;cursor:pointer;border-radius:8px;overflow:hidden;
  break-inside:avoid;line-height:0}
.projet-mosaique img{display:block;width:100%;height:auto;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.projet-mosaique button:hover img{transform:scale(1.04)}
.projet-mosaique button:focus-visible{outline:3px solid var(--aio-orange,#ff7526);
  outline-offset:3px}

@media(max-width:1000px){
  .projet-ecrans .projet-duo{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .projet-ecrans .projet-duo--inverse>.projet-duo-texte{order:0}
  .projet-mosaique{columns:2;column-gap:10px}
  .projet-mosaique button{margin-bottom:10px}
}
@media(max-width:640px){.projet-mosaique{columns:2}}

/* ── la fin, DANS la colonne de droite ───────────────────────────────── */
/* Elle était en pleine largeur sous le banc, donc calée à gauche sous la
   colonne fixe : le regard redescendait à gauche après être monté à droite.
   Elle reste maintenant dans le fil des écrans. */
.projet-fin{padding:16px 0 0}
.projet-fin h2{margin:0 0 14px;font-size:23px;line-height:1.22;
  letter-spacing:-.015em;font-weight:700}
.projet-fin p{margin:0 0 16px;font-size:16px;line-height:1.72;
  text-align:justify;hyphens:auto}
.projet-fin blockquote{margin:26px 0;padding:22px 28px;border-left:3px solid
  var(--aio-orange,#ff7526);background:#1254690d;font-size:16px;line-height:1.7}
.projet-fin blockquote p:last-child{margin:0}

.projet-suite{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:baseline;
  margin:44px 0 0;padding:30px 0 0;border-top:1px solid #12546922}
.projet-suite .eyebrow{margin:0;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#12546999}
.projet-suite a{font-size:19px;color:inherit}

@media(max-width:1000px){
  /* l'en-tête du site est fixe et transparent : sans ce retrait, le titre
     passe dessous et le logo se pose sur le surtitre. */
  .projet-banc{grid-template-columns:1fr;gap:30px;padding-top:92px}
  .projet-fil{position:static}
  .projet-fil h1{font-size:26px}
  .projet-chiffres{grid-template-columns:repeat(4,1fr)}
  .projet-ecrans>section{margin-bottom:44px}
}
@media(max-width:640px){
  .projet-chiffres{grid-template-columns:repeat(2,1fr)}
  .projet-tel{flex-direction:column;align-items:center}
  .projet-ecrans h2{font-size:20px}
  .projet-fin h2{font-size:22px}
}


/* LA FAÇADE VIDÉO. Ces règles vivaient dans projet-banc-nuit.css, la feuille
   de la variante SOMBRE : une vignette, un bouton de lecture et le cadre de
   l'iframe n'ont rien d'une couleur, et une page claire qui porte une vidéo
   n'a aucune raison de charger une variante de teinte pour en hériter.
   Conséquence vécue : au clic, le lecteur s'ajoutait SOUS la vignette, à sa
   taille par défaut de 304 par 154. Mesuré, pas supposé.

   ⚠ La règle de base manquait tout court : `position:absolute` sur l'iframe
   et sur le bouton de lecture ne s'ancre nulle part tant que le bouton lui-
   même est `static`. C'est elle qui tenait tout le reste. */
.projet-film{position:relative;display:block;width:100%;padding:0;border:0;
  background:none;cursor:pointer;overflow:hidden;border-radius:10px;
  aspect-ratio:16/9}   /* 9/16 pour les verticales, règle suivante */
.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)}
/* LA PASTILLE N'EST PLUS AU CENTRE. Depuis que la bannière est la couverture
   du projet, le centre est occupé par le logo du client : le bouton tombait
   dessus et le masquait. En bas à droite il reste évident, et il ne recouvre
   plus rien. */
.projet-film-lire{position:absolute;right:26px;bottom:26px;
  width:64px;height:64px;border-radius:50%;background:#f8f5edee;z-index:2;
  display:grid;place-items:center;transition:background .2s}
.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.joue:after,.projet-film.joue .projet-film-lire{display:none}
.projet-film:hover .projet-film-lire{background:var(--aio-orange,#ff7526)}
.projet-film:focus-visible{outline:3px solid var(--aio-orange,#ff7526);outline-offset:3px}