/* ============================================================
   PAGES PROJET — variante SYMÉTRIQUE (classe body .pj--sym)
   S'ajoute après css/projet.css. Ouverture, fiche et pleins cadres
   inchangés ; seules les planches changent : tout est centré sur l'axe
   de la page, rangées d'images égales alignées sur la grille 12 colonnes
   (4 × 3 col., 3 × 4 col., 2 × 6 col.), comme la galerie de l'accueil.
   ============================================================ */
.pj--sym{--row:clamp(40px,5vw,80px);}

/* ---- en-tête de planche : n°, titre, filet court, centrés (comme .h-label) ---- */
.pj--sym .pj-board{padding-top:12px;border-top:1px solid var(--hair);}
.sym-head{display:flex;flex-direction:column;align-items:center;text-align:center;}
.sym-head .pj-label{margin-top:6px;}
.sym-head::after{content:"";width:27px;height:1px;margin-top:18px;background:currentColor;}
.sym-intro{max-width:46ch;margin:clamp(28px,3vw,44px) auto 0;text-align:center;}
.sym-intro .pj-text{max-width:none;margin:0 auto;}
.sym-intro .pj-hand{margin-bottom:16px;}

/* ---- ouverture de planche en 2 moitiés égales : texte à gauche (col. 2 à 5,
   centré dans sa moitié), photo à droite (col. 7 à 12) ---- */
.sym-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:center;}
.sym-split__txt{grid-column:2 / 6;}
.sym-split > figure{grid-column:7 / 13;}
.pj--sym .sym-split .pj-hand{font-size:clamp(30px,3vw,46px);color:var(--ink);margin-bottom:clamp(22px,2.4vw,36px);}
.sym-lede{margin:0 0 18px;font-weight:300;font-size:clamp(22px,2.3vw,34px);line-height:1.22;letter-spacing:-.015em;}
.sym-split .pj-text{font-size:15px;color:var(--mute);max-width:34ch;}

/* ---- corps : une pile de rangées, espacement régulier ---- */
.sym-body{display:flex;flex-direction:column;gap:var(--row);padding-top:clamp(48px,6vw,96px);}
.sym-row{display:grid;column-gap:var(--col);row-gap:var(--col);}
.sym-row--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sym-row--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sym-row--4{grid-template-columns:repeat(4,minmax(0,1fr));}
/* image seule, centrée sur l'axe : 6 ou 8 colonnes sur 12 */
.sym-solo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);}
.sym-solo > figure{grid-column:4 / 10;}
.sym-solo--wide > figure{grid-column:3 / 11;}

/* formats imposés : toutes les images d'une rangée ont la même hauteur */
.pj--sym .r-34 img{aspect-ratio:3 / 4;object-fit:cover;}
.pj--sym .r-23 img{aspect-ratio:2 / 3;object-fit:cover;}
.pj--sym .r-43 img{aspect-ratio:4 / 3;object-fit:cover;}
.pj--sym .r-11 img{aspect-ratio:1 / 1;object-fit:cover;}
.pj--sym .r-169 img{aspect-ratio:16 / 9;object-fit:cover;}

/* ---- triptyque en miroir 2 | 1 | 2 : la pièce centrale couvre deux rangs ---- */
.sym-mirror > figure:nth-child(1){grid-column:1;grid-row:1;}
.sym-mirror > figure:nth-child(2){grid-column:1;grid-row:2;}
.sym-mirror > .sym-mid{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;}
.sym-mirror > figure:nth-child(4){grid-column:3;grid-row:1;}
.sym-mirror > figure:nth-child(5){grid-column:3;grid-row:2;}
.sym-mid .sym-fill{position:relative;flex:1;min-height:0;}

/* ---- triptyque centré 3:4 | 4:3 | 3:4 : colonnes au prorata des formats, même hauteur ---- */
.sym-tri{display:grid;grid-template-columns:9fr 16fr 9fr;column-gap:var(--col);row-gap:var(--col);align-items:start;}
.pj--sym .sym-tri img{aspect-ratio:3 / 4;object-fit:cover;}
.pj--sym .sym-tri > figure:nth-child(2) img{aspect-ratio:4 / 3;}
.pj--sym .sym-mid .sym-fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* fenêtre de navigateur qui défile (js/pages.js) : centrée, haute comme l'écran le permet,
   au format d'un écran de bureau (≈ 1,16:1) pour voir le haut de page en entier */
.pj--sym .case-scroller__sticky{--fh:min(86vh,940px);--w:min(100%,calc(var(--fh) * 1.16));align-items:center;}
.pj--sym .case-scroller__frame{height:var(--fh);}
.pj--sym .pj-scroller__cap{justify-content:center;}

/* légendes centrées sous chaque image */
.sym-cap{margin-top:10px;text-align:center;}

/* ---- pied de planche : légende centrée ---- */
.sym-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:clamp(36px,4vw,56px);text-align:center;}
.sym-foot .pj-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;}

/* ============ MOBILE : on garde la symétrie, en 2 colonnes ============ */
@media (max-width:768px){
  .pj--sym{--row:32px;}
  .sym-row--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* 3 images : la première en grand, les deux autres côte à côte */
  .sym-row--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sym-row--3 > :first-child{grid-column:1 / -1;}
  .sym-solo > figure,.sym-solo--wide > figure{grid-column:1 / -1;}
  .sym-split{row-gap:32px;}
  .sym-split__txt,.sym-split > figure{grid-column:1 / -1;}
  /* miroir : pièce centrale en tête, les quatre autres en 2 × 2 */
  .sym-mirror{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sym-mirror > .sym-mid{grid-column:1 / -1;grid-row:1;}
  .sym-mirror > figure:nth-child(1){grid-column:1;grid-row:2;}
  .sym-mirror > figure:nth-child(2){grid-column:2;grid-row:2;}
  .sym-mirror > figure:nth-child(4){grid-column:1;grid-row:3;}
  .sym-mirror > figure:nth-child(5){grid-column:2;grid-row:3;}
  .sym-mid .sym-fill{flex:none;aspect-ratio:2 / 3;}
  /* triptyque : l'horizontale en tête, les deux verticales côte à côte */
  .sym-tri{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sym-tri > figure:nth-child(2){grid-column:1 / -1;grid-row:1;}
  .sym-foot .pj-legend{gap:2px 16px;}
}