/* =====================================================================
   SAINT-CYPRIEN · "LA NOUVELLE GÉNÉRATION" — galerie.css
   Regardée, pas lue : une grille par zone, captions mono "spec", et chaque
   photo qui "se développe" (du sombre au net) à l'entrée. Réutilise
   base.css + home.css (.phero, .gong). Aspect-ratios posés → CLS 0.
   ===================================================================== */

/* ==================== INTERTITRE DE ZONE ======================= */
.gzone { padding-block: clamp(2.6rem,5vw,4.2rem); }
.gzone + .gzone { padding-top: 0; }
.gzone__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.2rem; margin-bottom: clamp(1rem,2.4vw,1.6rem); padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.gzone__zone { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.4rem,1rem+1.8vw,2.2rem); color: var(--ink); }
.gzone__spec { font: 600 var(--step--1)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--spark); }

/* ==================== LA GRILLE PAR ZONE ======================= */
.ggrid { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; grid-auto-flow: dense; }
@media (min-width: 760px){ .ggrid { grid-template-columns: repeat(3,1fr); gap: .8rem; } }

.gitem { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-2); aspect-ratio: 4/3.4; box-shadow: var(--shadow); }
.gitem--wide { grid-column: span 2; aspect-ratio: 16/9; }
.gitem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* "développer" : atténué + léger flou au repos (jamais illisible — loi n°1),
   net et lumineux quand la photo entre dans le cadre. */
.gitem img { filter: brightness(.52) saturate(.72) contrast(1.06) blur(3px); transform: scale(1.035); opacity: .6; transition: filter 1s var(--ease), transform 1.1s var(--ease), opacity .9s var(--ease); }
.gitem.is-in img { filter: brightness(.95) saturate(.95) contrast(1.08) blur(0); transform: scale(1); opacity: 1; }
.gitem:hover img { transform: scale(1.04); filter: brightness(1.02) saturate(1) contrast(1.08); }
/* the beam that lands as it develops */
.gitem__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1s var(--ease);
  background: radial-gradient(70% 55% at 50% -6%, rgba(var(--spark-rgb),.22), rgba(var(--spark-rgb),.04) 46%, transparent 72%); }
.gitem.is-in .gitem__glow { opacity: 1; }
/* the floor fade keeps the caption legible */
.gitem::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(var(--void-rgb),.72)); }
.gitem__cap { position: absolute; left: .8rem; bottom: .75rem; z-index: 2; font: 600 .64rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(var(--void-rgb),.6); border: 1px solid var(--line); border-radius: 100px; padding: .5em .85em; backdrop-filter: blur(4px); transform: translateY(6px); opacity: 0; transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s; }
.gitem.is-in .gitem__cap { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .gitem img { filter: brightness(.95) saturate(.95) contrast(1.08); transform: none; opacity: 1; }
  .gitem__cap { opacity: 1; transform: none; }
}

/* ==================== MOBILE PASS ============================== */
@media (max-width: 560px){
  .gitem { aspect-ratio: 4/3.2; }
  .gitem--wide { aspect-ratio: 16/10; }
}

/* ==================== L'INDEX DES ZONES ======================== */
.gindex { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.4rem,3vw,2rem); }
.gchip { display: inline-flex; align-items: center; gap: .75ch; min-height: 44px; padding: .55em 1em; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(var(--paper-2-rgb),.7); color: var(--ink-soft);
  font: 600 var(--step--1)/1 var(--f-ui); transition: color .3s, background .3s, border-color .3s, transform .2s var(--ease-spring); }
.gchip:hover { color: var(--ink); border-color: var(--spark); transform: translateY(-2px); }
.gchip:active { transform: scale(.94); }
.gchip.is-on { background: var(--spark); border-color: var(--spark); color: var(--on-spark); }
.gchip:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.gchip__n { font: 600 .62rem/1 var(--f-mono); opacity: .75; border-left: 1px solid currentColor; padding-left: .75ch; }

/* ==================== L'ÉDITO DE ZONE ========================== */
.gzone { scroll-margin-top: 6rem; }
.gzone__lede { max-width: 62ch; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.66; margin: -.4rem 0 clamp(1rem,2.4vw,1.5rem); }

/* ============ LA PHOTO DEVIENT UN BOUTON (visionneuse) ========= */
.gitem__btn { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gitem__btn:focus-visible { outline: 2px solid var(--spark); outline-offset: -3px; }
.gitem__zoom { position: absolute; right: .8rem; top: .75rem; z-index: 3; font: 600 .6rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-spark); background: var(--spark); border-radius: 100px; padding: .5em .85em; opacity: 0; transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.gitem:hover .gitem__zoom, .gitem__btn:focus-visible .gitem__zoom { opacity: 1; transform: none; }
/* tactile : pas de survol → la pastille se montre quand la photo est développée */
@media (hover: none){ .gitem.is-in .gitem__zoom { opacity: .92; transform: none; } }

/* ==================== LA VISIONNEUSE =========================== */
.glight { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: clamp(.8rem,3vw,2rem); }
.glight[hidden] { display: none; }
.glight__scrim { position: absolute; inset: 0; background: rgba(var(--void-rgb),.94); backdrop-filter: blur(10px); cursor: zoom-out; }
.glight__inner { position: relative; z-index: 1; width: min(96vw, 1180px); max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.glight__fig { display: flex; flex-direction: column; gap: .9rem; align-items: center; max-height: 92vh; }
.glight__fig img { max-width: 100%; max-height: 74vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow), var(--glow); background: var(--paper-2); }
.glight__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .7rem 1.1rem; text-align: center; }
.glight__zone { font: 600 .64rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.glight__label { font-size: var(--step-0); color: var(--ink); }
.glight__count { font: 600 .64rem/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.glight__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; display: grid; place-items: center;
  font-size: 2rem; line-height: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: rgba(var(--paper-2-rgb),.86);
  transition: background .3s, border-color .3s, color .3s; }
.glight__nav:hover { background: var(--spark); color: var(--on-spark); border-color: var(--spark); }
.glight__nav:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }
.glight__nav--prev { left: max(-6px, -3vw); }
.glight__nav--next { right: max(-6px, -3vw); }
.glight__close { position: absolute; top: -.2rem; right: 0; z-index: 2; display: inline-flex; align-items: center; gap: .7ch; min-height: 44px; padding: .5em 1em;
  font: 600 var(--step--1)/1 var(--f-ui); color: var(--ink); border: 1px solid var(--line); border-radius: 100px; background: rgba(var(--paper-2-rgb),.86); transition: border-color .3s, color .3s; }
.glight__close:hover { border-color: var(--spark); color: var(--spark); }
.glight__close:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
@media (max-width: 700px){
  .glight__inner { width: 100%; }
  .glight__fig img { max-height: 62vh; }
  .glight__nav { top: auto; bottom: -2px; transform: none; width: 46px; height: 46px; }
  .glight__nav--prev { left: 4px; }
  .glight__nav--next { right: 4px; }
  .glight__close { position: static; margin-top: .9rem; }
  .glight__fig { padding-bottom: 3.2rem; }
}

/* ============== HORS CADRE — ce qu'une photo ne dit pas ========= */
.gnote__grid { display: grid; gap: clamp(1.4rem,4vw,3.4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px){ .gnote__grid { grid-template-columns: .85fr 1.15fr; } }
.gnote__title { margin-top: 1rem; font-size: clamp(1.6rem,1rem+2.2vw,2.6rem); }
.gnote__prose { display: flex; flex-direction: column; gap: 1rem; max-width: 64ch; }
.gnote__prose p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.72; }

/* =====================================================================
   LE MUR DU CLUB — ce qui existe DÈS LE PREMIER RENDU.
   Le titre, l'accroche et le cadre de la grille sont dans le HTML : ils
   doivent donc être habillés tout de suite, sinon la section clignote en
   arrivant. Tout le RESTE — les vignettes, le squelette, l'état « rien
   encore », et le formulaire de dépôt entier — habille du DOM qui n'existe
   pas encore : il est parti dans /assets/css/community.css, que community.js
   fait descendre à l'approche de la section. Un visiteur qui ne scrolle pas
   jusqu'au mur ne télécharge donc ni ce CSS ni son JS.
   ===================================================================== */
.club { border-top: 1px solid var(--line); background: var(--void); }
.club__head { max-width: 58ch; }
.club__title { margin-top: 1rem; font-size: clamp(1.7rem,1rem+2.4vw,2.9rem); }
.club__lead { margin-top: 1rem; max-width: 52ch; }

/* --- le mur --- */
.club__grid { display: grid; gap: .7rem; grid-template-columns: repeat(2,1fr); margin-top: clamp(1.8rem,4vw,2.6rem); }
@media (min-width: 700px){ .club__grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1040px){ .club__grid { grid-template-columns: repeat(4,1fr); } }

/* ---------------- LES CLICHÉS EN PORTRAIT ------------------------- *
 * La tuile est en 4/3.4 — presque carrée, légèrement paysage. Une photo
 * verticale y perd 35 % de sa hauteur au recadrage, et `cover` prend ce
 * qu'il coupe MOITIÉ EN HAUT, moitié en bas : sur la photo de l'école,
 * ça sectionnait le haut du crâne d'une des deux gamines.
 *
 * On ancre donc le cadrage en haut : ce qui saute est le bas (herbe et
 * jambes), ce qui reste est ce qui compte — les visages, les médailles
 * et le maillot du club. Vérifié en simulant le recadrage aux deux
 * positions avant de trancher.
 *
 * Le sélecteur vaut pour tout cliché vertical qu'on ajoutera ensuite :
 * il suffit de nommer le fichier et de l'ajouter ici. */
.gitem img[src*="educative"] { object-position: 50% 0%; }