/**
 * 13 - Photothèque
 *
 * La galerie n est plus une grille uniforme : elle se lit série par série,
 * comme un magazine. Chaque série a un en-tête (titre, contexte sportif,
 * photographe), une image de tête pour la série mise en avant, puis une
 * mosaïque à rythme fixe qui ne laisse jamais de trou, quel que soit le
 * nombre de photographies. Le même composant sert au retour en images de
 * l accueil.
 *
 * Aucune couleur en dur : tout passe par les jetons de 01-tokens.css.
 */

/* ------------------------------------------------------------------
   Sommaire des séries (page galerie)
   ------------------------------------------------------------------ */

.otb-sommaire {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otb-e-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.otb-sommaire__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--otb-e-s);
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--otb-filet);
	border-radius: var(--otb-r-pill);
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--otb-gris);
	text-decoration: none;
	transition: color var(--otb-vite) var(--otb-courbe), border-color var(--otb-vite) var(--otb-courbe), background var(--otb-vite) var(--otb-courbe);
}

.otb-sommaire__lien:hover,
.otb-sommaire__lien:focus-visible {
	color: var(--otb-blanc);
	border-color: var(--otb-or);
	background: var(--otb-surface);
}

.otb-sommaire__lien--une { border-color: var(--otb-or); color: var(--otb-or); }

.otb-sommaire__nb {
	font-family: var(--otb-texte);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.7;
}

/* ------------------------------------------------------------------
   Série
   ------------------------------------------------------------------ */

.otb-serie {
	padding-block: var(--otb-e-xxl);
	scroll-margin-top: calc(var(--otb-entete-h) + var(--otb-e-m));
}

.otb-serie + .otb-serie { border-top: 1px solid var(--otb-filet); }

.otb-serie--une {
	background:
		radial-gradient(70% 60% at 100% 0%, rgba(42, 75, 216, 0.16) 0%, rgba(7, 12, 30, 0) 60%),
		var(--otb-surface);
}

.otb-serie--archive { padding-block: var(--otb-e-xl); }

.otb-serie__tete {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--otb-e-l) var(--otb-e-xl);
	align-items: end;
	margin-bottom: var(--otb-e-l);
}

.otb-serie__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--otb-e-m);
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--otb-or);
}

.otb-serie__kicker::before {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--otb-or);
}

.otb-serie__titre {
	margin: 0;
	font-size: var(--otb-t-titre);
	line-height: 0.98;
	text-transform: uppercase;
}

.otb-serie--une .otb-serie__titre { font-size: var(--otb-t-affiche); }

.otb-serie--archive .otb-serie__titre { font-size: var(--otb-t-grand); }

.otb-serie__meta {
	margin: var(--otb-e-m) 0 0;
	color: var(--otb-gris);
	font-size: var(--otb-t-petit);
	line-height: 1.6;
}

.otb-serie__meta strong { color: var(--otb-blanc); font-weight: 600; }

.otb-serie__meta .otb-sep { padding-inline: 8px; color: var(--otb-or); opacity: 0.7; }

.otb-serie__cote {
	display: flex;
	flex-direction: column;
	gap: var(--otb-e-m);
	align-items: flex-start;
}

.otb-serie__intro {
	margin: 0;
	max-width: 46ch;
	color: rgba(244, 246, 252, 0.82);
	font-size: var(--otb-t-moyen);
	line-height: 1.5;
}

.otb-serie__credit {
	margin: 0;
	font-family: var(--otb-titre);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--otb-gris);
}

.otb-serie__credit strong { color: var(--otb-or-clair); font-weight: 700; }

.otb-serie__actions { display: flex; flex-wrap: wrap; gap: var(--otb-e-s) var(--otb-e-m); }

/* Image de tête : plein cadre, format cinéma, légende en bas. */
.otb-serie__une {
	position: relative;
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: var(--otb-r-m);
	background: var(--otb-surface-haute);
	aspect-ratio: 21 / 9;
	isolation: isolate;
}

.otb-serie__une .otb-photos__ouvrir,
.otb-serie__une img {
	display: block;
	width: 100%;
	height: 100%;
}

.otb-serie__une img {
	object-fit: cover;
	object-position: center 40%;
	transition: transform var(--otb-lent) var(--otb-courbe);
}

.otb-serie__une:hover img { transform: scale(1.025); }

.otb-serie__legende {
	position: absolute;
	inset: auto 0 0;
	padding: var(--otb-e-xl) var(--otb-e-l) var(--otb-e-l);
	margin: 0;
	background: linear-gradient(180deg, rgba(7, 12, 30, 0) 0%, rgba(7, 12, 30, 0.82) 100%);
	color: var(--otb-blanc);
	font-size: var(--otb-t-petit);
	line-height: 1.5;
	pointer-events: none;
}

.otb-serie__legende span { display: block; color: var(--otb-gris); font-size: 0.78rem; margin-top: 4px; }

/* Sur téléphone, seule la mention du photographe reste sur l image. */
@media (max-width: 600px) {
	.otb-serie__legende-texte { display: none; }
	.otb-serie__legende { padding-top: var(--otb-e-l); }
}

/* ------------------------------------------------------------------
   Mosaïque à rythme fixe : 8 cases par cycle, jamais de trou.
   ------------------------------------------------------------------ */

.otb-photos {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: 230px;
	grid-auto-flow: dense;
	gap: 12px;
}

.otb-serie--une .otb-photos { grid-auto-rows: 260px; }

.otb-photos__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--otb-r-m);
	background: var(--otb-surface-haute);
	grid-column: span 4;
}

.otb-photos__item:nth-child(8n+1) { grid-column: span 8; grid-row: span 2; }
.otb-photos__item:nth-child(8n+7),
.otb-photos__item:nth-child(8n+8) { grid-column: span 6; }

/* Fin de série : la dernière case s étire pour ne jamais laisser de vide. */
.otb-photos__item:last-child:nth-child(8n+2) { grid-row: span 2; }
.otb-photos__item:last-child:nth-child(8n+4),
.otb-photos__item:last-child:nth-child(8n+7) { grid-column: span 12; }
.otb-photos__item:last-child:nth-child(8n+5) { grid-column: span 8; }

/* Les séries repliées (archives) restent en petites vignettes égales. */
.otb-photos--sobre .otb-photos__item,
.otb-photos--sobre .otb-photos__item:nth-child(8n+1),
.otb-photos--sobre .otb-photos__item:nth-child(8n+7),
.otb-photos--sobre .otb-photos__item:nth-child(8n+8) { grid-column: span 3; grid-row: span 1; }

.otb-photos--sobre { grid-auto-rows: 190px; }

.otb-photos__ouvrir {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	color: inherit;
}

.otb-photos__ouvrir:focus-visible {
	outline: 2px solid var(--otb-or);
	outline-offset: -3px;
}

.otb-photos__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--otb-lent) var(--otb-courbe), opacity var(--otb-moyen) var(--otb-courbe);
}

.otb-photos__item:hover img,
.otb-photos__ouvrir:focus-visible img { transform: scale(1.05); }

/* Repli : sans script, tout est visible ; le script masque le surplus. */
.otb-js .otb-serie:not(.est-deplie) .otb-photos__item.est-replie { display: none; }

.otb-serie__plus {
	display: none;
	justify-content: center;
	margin-top: var(--otb-e-l);
}

.otb-js .otb-serie__plus { display: flex; }
.otb-js .otb-serie__plus[hidden] { display: none; }

/* Tablette */
@media (max-width: 1024px) {
	.otb-photos { grid-auto-rows: 200px; }
	.otb-serie--une .otb-photos { grid-auto-rows: 210px; }
	.otb-serie__une { aspect-ratio: 16 / 9; }
	.otb-serie__legende { padding: var(--otb-e-l) var(--otb-e-m) var(--otb-e-m); }
}

@media (max-width: 900px) {
	.otb-serie__tete { grid-template-columns: 1fr; gap: var(--otb-e-m); }
	.otb-photos { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 180px; }
	.otb-photos__item { grid-column: span 3; }
	.otb-photos__item:nth-child(8n+8) { grid-column: span 6; grid-row: span 1; }
	/* La première case du cycle garde deux rangées : une seule rangée en pleine
	   largeur couperait les visages. */
	.otb-photos__item:nth-child(8n+1) { grid-column: span 6; grid-row: span 2; }
	.otb-photos__item:nth-child(8n+7) { grid-column: span 3; }
	.otb-photos__item:last-child:nth-child(8n+2),
	.otb-photos__item:last-child:nth-child(8n+4),
	.otb-photos__item:last-child:nth-child(8n+5),
	.otb-photos__item:last-child:nth-child(8n+6),
	.otb-photos__item:last-child:nth-child(8n+7) { grid-column: span 3; grid-row: span 1; }
	.otb-photos__item:last-child:nth-child(8n+2),
	.otb-photos__item:last-child:nth-child(8n+4),
	.otb-photos__item:last-child:nth-child(8n+6) { grid-column: span 6; }
	.otb-photos--sobre .otb-photos__item,
	.otb-photos--sobre .otb-photos__item:nth-child(8n+1),
	.otb-photos--sobre .otb-photos__item:nth-child(8n+8) { grid-column: span 3; }
}

/* Téléphone : deux colonnes, la première de chaque cycle en pleine largeur. */
@media (max-width: 600px) {
	.otb-serie { padding-block: var(--otb-e-xl); }
	.otb-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; }
	.otb-serie--une .otb-photos { grid-auto-rows: 160px; }
	.otb-photos__item,
	.otb-photos__item:nth-child(8n+7),
	.otb-photos__item:last-child:nth-child(8n+5),
	.otb-photos__item:last-child:nth-child(8n+7),
	.otb-photos--sobre .otb-photos__item { grid-column: span 1; grid-row: span 1; }
	.otb-photos__item:nth-child(8n+8),
	.otb-photos__item:last-child:nth-child(8n+2),
	.otb-photos__item:last-child:nth-child(8n+4),
	.otb-photos__item:last-child:nth-child(8n+6) { grid-column: span 2; grid-row: span 1; }
	.otb-photos__item:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }
	.otb-photos--sobre .otb-photos__item:nth-child(8n+1),
	.otb-photos--sobre .otb-photos__item:nth-child(8n+8) { grid-column: span 1; }
	.otb-serie__une { aspect-ratio: 4 / 3; border-radius: var(--otb-r-s); }
	.otb-photos__item { border-radius: var(--otb-r-s); }
	.otb-serie__legende { padding: var(--otb-e-l) var(--otb-e-m) var(--otb-e-m); font-size: 0.8rem; }
}

/* ------------------------------------------------------------------
   Retour en images (accueil) : une série, cinq photographies.
   ------------------------------------------------------------------ */

.otb-retour__tete {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--otb-e-l) var(--otb-e-xl);
	align-items: end;
	margin-bottom: var(--otb-e-l);
}

.otb-retour__mosaique {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 12px;
	aspect-ratio: 12 / 6.2;
}

/* Dans le retour en images, la mosaïque de la photothèque ne s applique pas :
   chaque vignette occupe une case, la grande deux rangées. */
.otb-retour__mosaique .otb-photos__item,
.otb-retour__mosaique .otb-photos__item:nth-child(n),
.otb-retour__mosaique .otb-photos__item:last-child:nth-child(n) { grid-column: auto; grid-row: auto; }

.otb-retour__mosaique > .otb-photos__item:first-child:nth-child(n) { grid-row: span 2; }

.otb-retour__secondaires {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-row: span 2;
	gap: 12px;
	min-height: 0;
}

.otb-retour__pied {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--otb-e-m);
	margin-top: var(--otb-e-l);
}

@media (max-width: 900px) {
	.otb-retour__tete { grid-template-columns: 1fr; gap: var(--otb-e-m); }
	.otb-retour__mosaique {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		aspect-ratio: auto;
	}
	.otb-retour__mosaique > .otb-photos__item:first-child:nth-child(n) { grid-row: auto; aspect-ratio: 3 / 2; }
	.otb-retour__secondaires { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.otb-retour__secondaires .otb-photos__item { aspect-ratio: 1; }
}

@media (max-width: 600px) {
	.otb-retour__mosaique, .otb-retour__secondaires { gap: 8px; }
	.otb-retour__mosaique .otb-photos__item { border-radius: var(--otb-r-s); }
}

/* Mouvement réduit : aucun zoom au survol. */
@media (prefers-reduced-motion: reduce) {
	.otb-photos__item img,
	.otb-serie__une img { transition: none; }
	.otb-photos__item:hover img,
	.otb-serie__une:hover img { transform: none; }
}