.page-discipline {
  letter-spacing: 0;
}

.discipline-entete {
  padding-block-end: var(--espace-m);
}

.discipline-entete h1 {
  font-size: 4.5rem;
  margin-block-end: var(--espace-s);
}

.discipline-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xxs) var(--espace-s);
  margin-block-start: var(--espace-s);
  font-size: var(--taille-texte-petit);
}

.discipline-navigation a {
  padding-block: 0.5rem;
}

.discipline-navigation a[aria-current="page"],
.discipline-navigation a:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.discipline-section {
  padding-block: var(--espace-m) var(--espace-l);
  border-block-start: 1px solid rgba(34, 24, 28, 0.15);
}

.discipline-section__entete {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--espace-s);
  margin-block-end: var(--espace-m);
}

.discipline-section h2 {
  font-size: 2rem;
  margin-block-end: var(--espace-xxs);
}

.discipline-section__entete .meta {
  display: block;
  margin-block-end: var(--espace-xxs);
}

.serie-photo,
.creations-graphiques {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--espace-m) var(--grille-gouttiere);
  align-items: start;
}

.serie-photo__image {
  grid-column: span 4;
  min-width: 0;
}

.serie-photo__image--large { grid-column: span 8; }
.serie-photo__image--demi { grid-column: span 6; }
.serie-photo__image--decalee { margin-block-start: var(--espace-l); }

.visuel-agrandissable {
  display: block;
  cursor: zoom-in;
}

.visuel-agrandissable img {
  display: block;
  width: 100%;
  height: auto;
}

.serie-photo figcaption {
  margin-block-start: var(--espace-xxs);
  font-size: var(--taille-meta);
  opacity: 0.7;
}

.creation-graphique {
  min-width: 0;
}

.creation-graphique:nth-child(4n + 1) { grid-column: 1 / span 5; }
.creation-graphique:nth-child(4n + 2) { grid-column: 8 / span 5; margin-block-start: var(--espace-l); }
.creation-graphique:nth-child(4n + 3) { grid-column: 2 / span 4; }
.creation-graphique:nth-child(4n + 4) { grid-column: 7 / span 6; margin-block-start: var(--espace-l); }

.creation-graphique h3 {
  font-size: 1.5rem;
  margin-block: var(--espace-xs) var(--espace-xxs);
}

.creation-graphique p {
  font-size: var(--taille-texte-petit);
  max-width: 34rem;
}

.page-discipline .footer {
  background-color: transparent;
  color: inherit;
  opacity: 1;
  padding-block: var(--espace-m);
  border-block-start: 1px solid rgba(34, 24, 28, 0.15);
}

.page-discipline .footer__conteneur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-s);
  font-size: var(--taille-texte-petit);
}

.page-discipline.visionneuse-ouverte { overflow: hidden; }

.visionneuse {
  width: min(90rem, calc(100% - 2rem));
  height: calc(100dvh - 2rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: var(--espace-xs);
  border: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
}

.visionneuse[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--espace-xs);
}

.visionneuse::backdrop { background: rgba(34, 24, 28, 0.85); }

.visionneuse__entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  gap: var(--espace-xs);
  align-items: center;
}

.visionneuse__entete h2 {
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.visionneuse__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.visionneuse__commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s);
}

.visionneuse__compteur {
  min-width: 5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.visionneuse__bouton {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 24, 28, 0.25);
}

.visionneuse__bouton:hover { background: var(--couleur-surface-douce); }
.visionneuse__bouton:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 767px) {
  .discipline-entete { padding-block-start: calc(var(--espace-l) + 3rem); }
  .discipline-entete h1 { font-size: 2.5rem; }
  .discipline-section h2 { font-size: 1.75rem; }
  .serie-photo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serie-photo__image { grid-column: span 1; }
  .serie-photo__image--large,
  .serie-photo__image--demi { grid-column: span 2; }
  .serie-photo__image--decalee { margin-block-start: var(--espace-m); }
  .creations-graphiques { display: block; }
  .creation-graphique:nth-child(n) { margin-block: 0 var(--espace-l); }
  .creation-graphique:nth-child(even) { margin-inline-start: var(--espace-s); }
}

/* -------------------- CHAOS MAÎTRISÉ (desktop) -------------------- */
/* L'en-tête de chaque série repart d'une colonne différente ; les
   galeries gardent leur propre rythme de décalages. */

@media (min-width: 1024px) {
  .discipline-section:nth-of-type(3n + 2) .discipline-section__entete { padding-inline-start: calc(var(--colonne) * 3); }
  .discipline-section:nth-of-type(3n) .discipline-section__entete     { padding-inline-start: var(--colonne); }
}

/* -------------------- CHAOS MAÎTRISÉ (mobile) -------------------- */
/* Galerie photo sur deux colonnes : "dense" comble les trous laissés par
   une photo seule avant une image large. En-têtes de série en alternance. */

@media (max-width: 767px) {
  .serie-photo { grid-auto-flow: dense; }
  .discipline-section:nth-of-type(even) .discipline-section__entete { padding-inline-start: 12%; }
}

/* -------------------- CHAOS MAÎTRISÉ (tablette) -------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .discipline-section:nth-of-type(even) .discipline-section__entete { padding-inline-start: calc(var(--colonne) * 2); }
}