/**
 * 09 - Calendrier et rencontres
 *
 * L affiche de rencontre est le composant central de la saison : bandeau
 * de competition, les deux ecussons face a face, l heure ou le score au
 * centre, le terrain en pied. Elle sert au calendrier, aux resultats et
 * a la mise en avant du prochain match, dans trois tailles differentes.
 *
 * Aucune valeur en dur : tout passe par les jetons de 01-tokens.css.
 */

/* ==================================================================
   AFFICHE DE RENCONTRE
   ================================================================== */

.otb-affiche {
	position: relative;
	display: block;
	background: var(--otb-surface);
	border: 1px solid var(--otb-filet);
	border-radius: var(--otb-r-m);
	overflow: hidden;
	color: inherit;
	transition:
		border-color var(--otb-moyen) var(--otb-courbe),
		transform var(--otb-moyen) var(--otb-courbe);
}

a.otb-affiche:hover,
a.otb-affiche:focus-visible {
	border-color: var(--otb-or);
	transform: translateY(-2px);
}

/* Filet or a gauche des rencontres a domicile : la meme grammaire que la
   ligne du club dans le tableau de classement. */
.otb-affiche--domicile::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--otb-or);
	z-index: 1;
}

/* ----- Bandeau superieur ----- */

.otb-affiche__bandeau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--otb-e-s);
	padding: 11px var(--otb-e-l);
	border-bottom: 1px solid var(--otb-filet);
	background: linear-gradient(90deg, rgba(42, 75, 216, 0.18) 0%, rgba(42, 75, 216, 0) 64%);
}

.otb-affiche__compet {
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--otb-gris);
}

.otb-affiche__ou {
	flex: 0 0 auto;
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--otb-gris);
}

.otb-affiche--domicile .otb-affiche__ou { color: var(--otb-or); }

/* ----- Corps : ecusson, pivot, ecusson ----- */

.otb-affiche__corps {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--otb-e-m);
	padding: var(--otb-e-l);
}

.otb-affiche__equipe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
	text-align: center;
}

.otb-affiche__ecusson {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: var(--otb-r-pill);
	background: var(--otb-surface-haute);
	border: 1px solid var(--otb-filet);
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: var(--otb-gris);
}

.otb-affiche__ecusson--otb { border-color: rgba(200, 162, 72, 0.42); }

.otb-affiche__ecusson--logo {
	background: transparent;
	border-color: transparent;
	padding: 4px;
}

.otb-affiche__ecusson .otb-blason { width: auto; height: 56%; max-width: 62%; }

.otb-affiche__ecusson .otb-ecusson__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.otb-affiche__nom {
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.2;
	color: var(--otb-blanc);
	overflow-wrap: normal;
	hyphens: none;
}

.otb-affiche__pivot {
	text-align: center;
	min-width: 96px;
	padding-inline: var(--otb-e-s);
}

.otb-affiche__vs {
	display: block;
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--otb-gris);
	margin-bottom: 6px;
}

.otb-affiche__heure {
	display: block;
	font-family: var(--otb-titre);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--otb-blanc);
}

.otb-affiche__score {
	display: block;
	font-family: var(--otb-titre);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.75rem, 3.4vw, 2.375rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--otb-or);
}

.otb-affiche__date {
	display: block;
	margin-top: 7px;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--otb-gris);
}

/* ----- Pied ----- */

.otb-affiche__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--otb-e-m);
	padding: 12px var(--otb-e-l);
	border-top: 1px solid var(--otb-filet);
}

.otb-affiche__stade {
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--otb-gris);
}

.otb-affiche__voir {
	flex: 0 0 auto;
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--otb-or);
	transition: transform var(--otb-vite) var(--otb-courbe);
}

a.otb-affiche:hover .otb-affiche__voir { transform: translateX(3px); }

/* Pastille de resultat dans le bandeau.
   La lettre est volontairement dimensionnee a 20 pixels en graisse 800 :
   au-dela de 18,66 pixels en gras, le seuil de contraste exige par le
   WCAG passe de 4,5 a 3, ce qui met le couple blanc sur rouge de defaite
   au-dessus de la barre au lieu de le laisser a 4,47. */
.otb-affiche__issue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding-inline: 9px;
	border-radius: var(--otb-r-pill);
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0;
	color: var(--otb-nuit);
}

/* Le texte de la pastille reste dans la palette : encre de nuit sur le
   vert de victoire, encre claire sur le rouge de defaite. Les deux
   couples depassent 4,5:1. */
.otb-affiche__issue--victoire { background: var(--otb-victoire); color: var(--otb-nuit); }
.otb-affiche__issue--nul { background: var(--otb-gris); color: var(--otb-nuit); }
.otb-affiche__issue--defaite { background: var(--otb-defaite); color: var(--otb-blanc); }

/* ----- Variante posee dans la carte du prochain match ----- */

.otb-affiche--nu {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.otb-affiche--nu::before { display: none; }

.otb-affiche--nu .otb-affiche__bandeau,
.otb-affiche--nu .otb-affiche__pied {
	padding-inline: 0;
	background: none;
	border-color: var(--otb-filet-clair);
}

.otb-affiche--nu .otb-affiche__corps { padding: var(--otb-e-l) 0; }

.otb-affiche--nu .otb-affiche__ecusson {
	width: 88px;
	height: 88px;
	font-size: 1.25rem;
}

.otb-affiche--nu .otb-affiche__nom { font-size: var(--otb-t-normal); }
.otb-affiche--nu .otb-affiche__heure { font-size: 2rem; }

/* ----- Replis ----- */

@media (max-width: 620px) {
	.otb-affiche__bandeau,
	.otb-affiche__pied { padding-inline: var(--otb-e-m); }
	.otb-affiche__corps { padding: var(--otb-e-m); gap: var(--otb-e-s); }
	.otb-affiche__ecusson { width: 52px; height: 52px; font-size: 0.8rem; }
	.otb-affiche__nom { font-size: 0.8rem; }
	.otb-affiche__pivot { min-width: 74px; padding-inline: 0; }
	.otb-affiche__heure { font-size: 1.25rem; }
	.otb-affiche__stade { font-size: 0.74rem; }
	.otb-affiche--nu .otb-affiche__ecusson { width: 64px; height: 64px; }
	.otb-affiche--nu .otb-affiche__heure { font-size: 1.5rem; }
}

@media (max-width: 380px) {
	.otb-affiche__ecusson { width: 46px; height: 46px; }
	.otb-affiche__nom { font-size: 0.74rem; }
}

/* ==================================================================
   BANDE DU PROCHAIN MATCH
   Photo au bord de l ecran, carte en verre depoli posee dessus.
   ================================================================== */

.otb-rencontre {
	position: relative;
	padding-block: var(--otb-e-xxl);
	overflow: hidden;
	isolation: isolate;
}

.otb-rencontre__media { position: absolute; inset: 0; z-index: -2; }

.otb-rencontre__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 34%;
}

.otb-rencontre__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, var(--otb-nuit) 0%, rgba(7, 12, 30, 0.72) 26%, rgba(7, 12, 30, 0.82) 74%, var(--otb-nuit) 100%),
		linear-gradient(96deg, rgba(7, 12, 30, 0.86) 0%, rgba(7, 12, 30, 0.34) 52%, rgba(7, 12, 30, 0.1) 100%);
}

.otb-rencontre__grille {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: var(--otb-e-xl);
}

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

.otb-rencontre__quand {
	margin-top: var(--otb-e-m);
	font-size: var(--otb-t-moyen);
	line-height: 1.55;
	color: rgba(244, 246, 252, 0.82);
	max-width: 34ch;
}

.otb-rencontre__actions { margin-top: var(--otb-e-l); }

@media (max-width: 900px) {
	.otb-rencontre__grille { grid-template-columns: 1fr; gap: var(--otb-e-l); }
}

/* ==================================================================
   FILTRES DE COMPETITION
   ================================================================== */

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

.otb-filtre {
	padding: 9px 18px;
	background: transparent;
	border: 1px solid var(--otb-filet);
	border-radius: var(--otb-r-pill);
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--otb-gris);
	cursor: pointer;
	transition:
		border-color var(--otb-vite) var(--otb-courbe),
		color var(--otb-vite) var(--otb-courbe),
		background-color var(--otb-vite) var(--otb-courbe);
}

.otb-filtre:hover { border-color: var(--otb-or); color: var(--otb-or); }
.otb-filtre:active { transform: translateY(1px); }

.otb-filtre[aria-pressed="true"] {
	background: var(--otb-or);
	border-color: var(--otb-or);
	color: var(--otb-nuit);
}

/* ==================================================================
   RYTHME DU CALENDRIER
   ================================================================== */

.otb-mois { margin-bottom: var(--otb-e-xl); }

.otb-mois:last-of-type { margin-bottom: 0; }

.otb-mois__tete {
	display: flex;
	align-items: center;
	gap: var(--otb-e-m);
	margin-bottom: var(--otb-e-m);
}

.otb-mois__nom {
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: var(--otb-t-moyen);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--otb-blanc);
	white-space: nowrap;
}

.otb-mois__filet {
	flex: 1;
	height: 1px;
	background: var(--otb-filet);
}

.otb-mois__nombre {
	font-family: var(--otb-titre);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: var(--otb-t-moyen);
	color: var(--otb-or);
}

.otb-rencontres {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--otb-e-m);
}

@media (max-width: 900px) {
	.otb-rencontres { grid-template-columns: 1fr; }
}

/* Un mois entierement filtre disparait avec son titre. */
.otb-mois[hidden],
.otb-affiche[hidden] { display: none; }

/* Etat vide du filtre, compose plutot que blanc. */
.otb-calendrier__aucun {
	padding: var(--otb-e-xl) var(--otb-e-l);
	text-align: center;
	border: 1px dashed var(--otb-filet);
	border-radius: var(--otb-r-m);
	color: var(--otb-gris);
}

/* Barre d outils : titre a gauche, filtres a droite. */
.otb-outils {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--otb-e-m);
	margin-bottom: var(--otb-e-xl);
}

.otb-note {
	margin-top: var(--otb-e-xl);
	max-width: 62ch;
	font-size: 0.86rem;
	line-height: 1.7;
	color: var(--otb-gris);
}

/* Sur une section a fond eleve, les affiches gardent leur detachement. */
.otb-section--surface .otb-affiche { background: var(--otb-surface-haute); }
.otb-section--surface .otb-affiche__bandeau,
.otb-section--surface .otb-affiche__pied { border-color: rgba(244, 246, 252, 0.1); }
/* Horaire non communique : l information reste secondaire, sinon elle
   prend le pas sur le nom des deux clubs. */
.otb-affiche__heure--attente {
	font-family: var(--otb-texte);
	font-weight: 600;
	font-size: 0.86rem;
	letter-spacing: 0;
	line-height: 1.35;
	color: var(--otb-gris);
}

.otb-affiche--nu .otb-affiche__heure--attente { font-size: 1rem; }

@media (max-width: 620px) {
	.otb-affiche__heure--attente { font-size: 0.78rem; }
}

/* ---------------------------------------------------------------
   Rencontre reportee — 02.09.2026
   Un etat a part entiere, ni match a venir ni match joue : filet en
   pointille, pastille doree, et la date remplacee par une attente
   plutot que par une date inventee.
   --------------------------------------------------------------- */

.otb-affiche__etat {
	flex: 0 0 auto;
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: 0.62rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 5px 10px;
	border-radius: var(--otb-r-pill);
}

.otb-affiche__etat--reporte {
	color: var(--otb-or);
	border: 1px solid var(--otb-or);
	background: transparent;
}

.otb-affiche--reporte {
	border-style: dashed;
}

.otb-affiche--reporte .otb-affiche__bandeau {
	border-bottom-style: dashed;
	background: none;
}

.otb-affiche--reporte .otb-affiche__heure--attente {
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--otb-or);
}

/* Ligne de match compacte, meme grammaire. */
.otb-match--reporte {
	border-style: dashed;
}

.otb-match__heure--reporte {
	color: var(--otb-or);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.otb-reportes__note {
	max-width: var(--otb-largeur-texte);
	margin: 0 0 var(--otb-e-l);
	color: var(--otb-gris);
	font-size: var(--otb-t-petit);
	line-height: 1.6;
}