/* 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(--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(--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(--petrol,#125469);color:var(--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(--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(--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}
}