/* 144 · PAGES PROJET · 10/09/2026
   Demande Marwan : « la même fonctionnalité, le moins d'écriture possible, on choisit
   facilement le contenu et on l'agrandit, hyper basique, pas de gros next, le nom minimal ».
   Donc : une mosaïque du projet (même grammaire que projects.html), appui maintenu = lecture,
   clic = plein écran. Aucun titre, aucun paragraphe. Le nom vit dans le coin, en 9px. */
:root{
  --paper:#EFEFEF; --black:#050505; --ink:#111; --grey:#6B6B6B; --line:#DCDCDC;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif; --ease:cubic-bezier(.19,1,.22,1);
  --inset:4vw; --gap:3px;
}
*{margin:0;box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:#050505;color:#EFEFEF}

/* les 4 coins, seuls textes de la page */
.fr{position:fixed;z-index:20;font-weight:700;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.fr.tl{top:20px;left:26px}
.fr.tr{top:20px;right:26px;display:flex;gap:18px}
.fr.bl{bottom:18px;left:26px;color:var(--grey)}
.fr.br{bottom:18px;right:26px;color:var(--grey)}
.fr a{opacity:.75;transition:opacity .3s}
.fr a:hover{opacity:1}

main{padding:12vh var(--inset) 10vh}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}

.pc{position:relative;display:block;cursor:zoom-in;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.pc figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#161513}
.pc img,.pc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;pointer-events:none}
.pc img.pv{z-index:0;filter:grayscale(1);transition:filter .5s var(--ease),transform .6s var(--ease)}
.pc video{z-index:1;opacity:0;filter:grayscale(1);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .6s var(--ease)}
.pc video.on{opacity:1}
@media(hover:hover){.pc:hover img.pv,.pc:hover video{filter:grayscale(0);transform:scale(1.03)}}
.pc.live img.pv,.pc.live video{filter:grayscale(0)}

/* plein écran : on agrandit, rien d'autre */
#zoom{position:fixed;inset:0;z-index:100;background:rgba(5,5,5,.96);display:none;
  align-items:center;justify-content:center;cursor:zoom-out}
#zoom.on{display:flex}
#zoom img,#zoom video{max-width:94vw;max-height:92vh;width:auto;height:auto;object-fit:contain}
#zoom .cl{position:fixed;top:20px;right:26px;font-weight:700;font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;opacity:.7}
@media(prefers-reduced-motion:reduce){.pc img.pv,.pc video{transition:none}}

/* 15/09 · UNE SEULE PIECE SUR LA PAGE.
   La grille a 3 colonnes laissait la tuile unique dans le tiers gauche, deux tiers de page
   vides : ca lisait comme une grille cassee, pas comme un choix. Quatre pages etaient dans
   ce cas (bershka, agape vespers, les deux birkenstock). Une piece seule se montre grande
   et centree, et garde son propre format au lieu du 4/5 de la grille. */
.grid .pc:only-child{grid-column:1/-1;width:min(560px,100%);margin:0 auto}
.grid .pc:only-child figure{aspect-ratio:4/5}
@media(max-width:900px){.grid .pc:only-child{width:100%}}
/* deux pieces : elles se centrent au lieu de laisser une colonne vide a droite */
.grid .pc:nth-child(1):nth-last-child(2),.grid .pc:nth-child(2):nth-last-child(1){grid-column:span 1}
.grid:has(.pc:nth-child(2):nth-last-child(1)){grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}