/* ═══════════════════════════════════════════════════════════════════
   GALERIE — en-tête, filtres, séries, compositions, visionneuse
   Dépend de : tokens.css, base.css, nav.css, theme.css

   Principe de la page : le blanc domine. Les photos et le texte
   tiennent la structure ; la couleur n'arrive que par petites touches,
   comme sur une toile — jamais en aplat sur une grande surface,
   jamais sur du texte courant.

   Le rythme est volontairement irrégulier : trois séries de grilles
   aux densités différentes (3 colonnes, 2 colonnes, 4 colonnes),
   séparées par des compositions en damier et par une image seule.

   SOMMAIRE
   00. Surcharges locales
   01. En-tête de page
   02. Barre de filtres
   03. Séries — grilles à densités variables
   04. Composition — damier
   05. Composition — plein cadre
   06. Composition — bande finale
   07. Visionneuse
   08. Responsive
   ═══════════════════════════════════════════════════════════════════ */


/* ── 00. SURCHARGES LOCALES ─────────────────────────────────────────
   Les trois couleurs de la charte vivent dans theme.css : elles
   servent aussi sur la page Presse. Règle d'emploi : une touche par
   composition, jamais deux couleurs côte à côte sur la même image,
   jamais plus d'une case colorée à la fois dans un même damier.

   Ne restent ici que les mesures propres aux compositions.       */
:root {
  /* Module des compositions : hauteur d'une case de damier. Les cases
     sont posées sur une grille de 8 colonnes ; cette valeur les garde
     à peu près carrées à toutes les largeurs.                      */
  --art-cell: clamp(7rem, 10.4vw, 15rem);
  --art-gap:  var(--s-4);
}


/* ── 01. EN-TÊTE DE PAGE ────────────────────────────────────────────
   Une page de consultation : l'en-tête annonce, il n'occupe pas
   l'écran. Les photos arrivent vite. Inchangé, à un détail près :
   le repère à quatre cases (.head-mark, dans theme.css) qui pose le
   motif de la page.                                               */
.page-head {
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-8);
}

.page-head-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
}

.page-head .eyebrow { margin-bottom: var(--s-5); }

.page-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}
.page-title em { font-style: italic; }

.count {
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: var(--tr-title);
  color: var(--c-ink-soft);
  white-space: nowrap;
}


/* ── 02. BARRE DE FILTRES ───────────────────────────────────────────
   Collée sous la nav : le tri reste à portée pendant tout le
   défilement. Chaque catégorie porte sa couleur, en pastille et sous
   le libellé — c'est la légende du damier, elle sert deux fois.   */
.filters {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
  background: var(--c-page);
  border-block: 1px solid var(--c-line);
}

.filters-inner {
  display: flex;
  gap: var(--s-7);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-4);
}
.filters-inner::-webkit-scrollbar { display: none; }

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  padding: var(--s-2) 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--t);
}
.filter-btn:hover { color: var(--c-ink); }

/* Pastille : une case de damier réduite à sa plus simple expression */
.filter-btn::before {
  content: '';
  width: var(--s-2);
  height: var(--s-2);
  background: var(--puce, var(--c-ink));
  opacity: 0.3;
  transition: opacity var(--t);
}

.filter-btn[data-filter='terrain'] { --puce: var(--c-art-vert); }
.filter-btn[data-filter='hors']    { --puce: var(--c-art-bleu); }
.filter-btn[data-filter='famille'] { --puce: var(--c-art-rouge); }

.filter-btn[aria-pressed='true'] {
  color: var(--c-ink);
  border-bottom-color: var(--puce, var(--c-ink));
}
.filter-btn[aria-pressed='true']::before { opacity: 1; }


/* ── 03. SÉRIES ─────────────────────────────────────────────────────
   Trois blocs de photos, trois densités. La colonne libre garde les
   proportions d'origine : aucune photo n'est recadrée.            */
.gallery {
  padding-bottom: var(--s-10);
}

.serie { padding-block: var(--s-9); }

/* Filet + numéro : l'entrée de série, en tout petit. La couleur ne
   porte que sur le numéro.                                        */
.serie-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding-top: var(--s-4);
  margin-bottom: var(--s-7);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.serie-num   { color: var(--serie-c, var(--c-ink)); }
.serie-title { color: var(--c-ink); }
.serie-count { margin-left: auto; color: var(--c-ink-soft); }

.serie--vert  { --serie-c: var(--c-art-vert); }
.serie--bleu  { --serie-c: var(--c-art-bleu); }
.serie--rouge { --serie-c: var(--c-art-rouge); }

/* Trois densités. Le gouttières suivent : plus c'est dense, plus
   c'est serré.                                                    */
.grid {
  columns: 3;
  column-gap: var(--s-5);
}
.grid > * {
  break-inside: avoid;
  margin-bottom: var(--s-5);
}

.grid--large { columns: 2; column-gap: var(--s-7); }
.grid--large > * { margin-bottom: var(--s-7); }

.grid--dense { columns: 4; column-gap: var(--s-4); }
.grid--dense > * { margin-bottom: var(--s-4); }

.shot {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--c-page);
  cursor: pointer;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot.is-hidden { display: none; }

/* Touche de peinture — un trait de couleur sous quelques photos
   seulement, jamais deux voisines. La couleur reprend celle de la
   catégorie : vert le terrain, bleu le hors-terrain, rouge la
   famille.                                                        */
.shot--vert,
.shot--rouge,
.shot--bleu { padding-bottom: var(--s-4); }

.shot--vert  { --peint: var(--c-art-vert); }
.shot--rouge { --peint: var(--c-art-rouge); }
.shot--bleu  { --peint: var(--c-art-bleu); }

.shot--vert::after,
.shot--rouge::after,
.shot--bleu::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: var(--s-2);
  background: var(--peint);
}

/* Cases pleines glissées dans le flux de la grille : le damier
   s'invite au milieu des photos, sans casser la colonne. Deux
   proportions seulement — le carré et la bande — pour que deux
   touches d'une même grille ne se lisent jamais comme une paire. */
.grid-cell {
  aspect-ratio: 1;
  background: var(--cell-c, var(--c-surface));
}
.grid-cell--bande { aspect-ratio: 2 / 1; }
.grid-cell--vert  { --cell-c: var(--c-art-vert); }
.grid-cell--rouge { --cell-c: var(--c-art-rouge); }
.grid-cell--bleu  { --cell-c: var(--c-art-bleu); }

/* Libellé au survol : il nomme la photo, il ne la décore pas */
.shot-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-6) var(--s-5) var(--s-4);
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  transition: opacity var(--t);
}
.shot:hover .shot-label,
.shot:focus-visible .shot-label { opacity: 1; }

/* Sur une photo peinte, le libellé s'arrête au-dessus du trait */
.shot--vert .shot-label,
.shot--rouge .shot-label,
.shot--bleu .shot-label { inset: auto 0 var(--s-4) 0; }

/* Message affiché quand un filtre ne renvoie rien */
.grid-empty {
  padding-block: var(--s-8);
  font-size: var(--fs-body);
  color: var(--c-ink-soft);
}


/* ── 04. COMPOSITION — DAMIER ───────────────────────────────────────
   Une grille de huit colonnes où presque rien n'est posé : trois
   images, un texte, trois cases de couleur. Tout le reste est blanc.
   Les cases sont placées une à une — c'est une composition, pas une
   grille automatique.                                              */
.compo .h2 em,
.compo .h3 em { font-style: italic; }

.compo-legend { max-width: 28rem; text-align: right; }

.damier {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(var(--art-cell), auto);
  gap: var(--art-gap);
}

.damier-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-surface);
}

.damier-cell { background: var(--cell-c); }
.damier-cell--vert  { --cell-c: var(--c-art-vert); }
.damier-cell--rouge { --cell-c: var(--c-art-rouge); }
.damier-cell--bleu  { --cell-c: var(--c-art-bleu); }

.damier-note {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s-4);
  padding-right: var(--s-5);
}

/* Placement — 1 grande verticale, 1 verticale, 1 carré, la note,
   puis les trois touches de couleur.                              */
.damier--a > :nth-child(1) { grid-area: 1 / 1 / 5 / 4; }  /* verticale  */
.damier--a > :nth-child(2) { grid-area: 1 / 7 / 4 / 9; }  /* verticale  */
.damier--a > :nth-child(3) { grid-area: 2 / 5 / 4 / 7; }  /* carré      */
.damier--a > :nth-child(4) { grid-area: 4 / 5 / 6 / 8; }  /* note       */
.damier--a > :nth-child(5) { grid-area: 4 / 8 / 5 / 9; }  /* bleu       */
.damier--a > :nth-child(6) { grid-area: 1 / 4 / 2 / 5; }  /* vert       */
.damier--a > :nth-child(7) { grid-area: 5 / 1 / 6 / 2; }  /* rouge      */


/* ── 05. COMPOSITION — PLEIN CADRE ──────────────────────────────────
   Une image seule, décalée à droite, avec toute la colonne de gauche
   laissée vide sauf trois lignes de texte.                        */
.solo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5);
  align-items: end;
}

.solo-note {
  grid-column: 1 / 4;
  padding-bottom: var(--s-7);
}

.solo-rule {
  display: block;
  width: var(--s-8);
  height: var(--s-2);
  margin-bottom: var(--s-6);
  background: var(--c-art-bleu);
}

.solo-note .eyebrow { margin-bottom: var(--s-4); }
.solo-title { margin-bottom: var(--s-4); }

.solo-fig { grid-column: 4 / 13; }

.solo-fig img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 30%;
  background: var(--c-page);
}

.solo-fig figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-caption);
  color: var(--c-ink-soft);
}


/* ── 06. COMPOSITION — BANDE FINALE ─────────────────────────────────
   Le damier pris au pied de la lettre : six cases carrées, bord à
   bord, d'un côté à l'autre de l'écran. Trois photos, deux couleurs,
   un vide. C'est le seul endroit de la page sans gouttière.       */
.bande {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--s-8);
}

.bande > * { aspect-ratio: 1; }

.bande-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-surface);
}

.bande-cell { background: var(--cell-c, var(--c-surface)); }
.bande-cell--vert  { --cell-c: var(--c-art-vert); }
.bande-cell--rouge { --cell-c: var(--c-art-rouge); }
.bande-cell--bleu  { --cell-c: var(--c-art-bleu); }


/* ── 07. VISIONNEUSE ────────────────────────────────────────────────*/
.viewer {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,15,14,0.97);
}
.viewer[open],
.viewer.is-open { display: flex; }

.viewer img {
  max-width: 88vw;
  max-height: 84svh;
  width: auto;
  object-fit: contain;
}

.viewer-bar {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--gutter);
  color: rgba(255,255,255,0.62);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.viewer-btn {
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  transition: color var(--t);
}
.viewer-btn:hover { color: #ffffff; }

.viewer-nav {
  display: flex;
  gap: var(--s-6);
}


/* ── 08. RESPONSIVE ─────────────────────────────────────────────────
   Les compositions ne sont pas réduites : elles sont recomposées.
   Chaque palier redonne un placement complet au damier, pour que la
   lecture reste une composition et pas une pile.                  */

@media (max-width: 1024px) {
  .grid        { columns: 2; }
  .grid--large { columns: 2; }
  .grid--dense { columns: 3; }

  .page-head-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
  }

  .compo-legend { text-align: left; }
}

/* Le damier repasse sur quatre colonnes : la verticale garde sa
   dominance, le carré se décale, la note prend toute la largeur.  */
@media (max-width: 900px) {
  :root { --art-cell: clamp(6rem, 20vw, 15rem); }

  .damier { grid-template-columns: repeat(4, 1fr); }

  .damier--a > :nth-child(1) { grid-area: 1 / 1 / 4 / 4;  }
  .damier--a > :nth-child(2) { grid-area: 6 / 1 / 8 / 3;  }
  .damier--a > :nth-child(3) { grid-area: 4 / 2 / 6 / 5;  }
  .damier--a > :nth-child(4) { grid-area: 8 / 1 / 9 / 5;  }
  .damier--a > :nth-child(5) { grid-area: 6 / 4 / 7 / 5;  }
  .damier--a > :nth-child(6) { grid-area: 1 / 4 / 2 / 5;  }
  .damier--a > :nth-child(7) { grid-area: 9 / 1 / 10 / 2; }

  .damier-note { padding-right: 0; }

  .solo { grid-template-columns: 1fr; gap: var(--s-6); }
  .solo-note,
  .solo-fig { grid-column: 1 / -1; }
  .solo-note { padding-bottom: 0; }
  .solo-fig img { aspect-ratio: 4 / 5; }

  .bande { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  /* Une colonne pour les deux premières séries, deux pour la
     mosaïque : c'est elle qui garde le rythme serré sur mobile. */
  .grid        { columns: 1; }
  .grid--large { columns: 1; }
  .grid--dense { columns: 2; }

  .filters-inner { gap: var(--s-6); }

  .serie { padding-block: var(--s-8); }

  .bande { grid-template-columns: repeat(2, 1fr); }
}

/* Sur écran tactile, le libellé reste visible : il n'y a pas de survol */
@media (hover: none) {
  .shot-label { opacity: 1; }
}