/**
 * 04 - Composants
 *
 * Boutons, cartes, tableaux, badges. Chaque composant respecte l echelle
 * de rayons unique et n utilise l or que pour ce qui merite d etre remarque.
 */

/* ------------------------------------------------------------------
   Boutons
   Un seul libelle par intention sur tout le site.
   ------------------------------------------------------------------ */

.otb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--otb-r-pill);
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: var(--otb-t-petit);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--otb-vite) var(--otb-courbe),
		background-color var(--otb-vite) var(--otb-courbe),
		border-color var(--otb-vite) var(--otb-courbe),
		color var(--otb-vite) var(--otb-courbe);
}

.otb-btn--primaire {
	background: var(--otb-or);
	color: var(--otb-nuit);
}

.otb-btn--primaire:hover,
.otb-btn--primaire:focus-visible {
	background: var(--otb-or-clair);
	color: var(--otb-nuit);
}

.otb-btn--filet {
	background: transparent;
	border-color: var(--otb-or);
	color: var(--otb-or);
}

.otb-btn--filet:hover,
.otb-btn--filet:focus-visible {
	background: var(--otb-or);
	color: var(--otb-nuit);
}

/* Sur photo : un filet blanc sur voile sombre garantit le contraste. */
.otb-btn--photo {
	background: rgba(7, 12, 30, 0.55);
	border-color: rgba(244, 246, 252, 0.55);
	color: var(--otb-blanc);
	backdrop-filter: blur(6px);
}

.otb-btn--photo:hover,
.otb-btn--photo:focus-visible {
	background: var(--otb-blanc);
	border-color: var(--otb-blanc);
	color: var(--otb-nuit);
}

/* Retour tactile a l appui. */
.otb-btn:active { transform: translateY(1px); }

/* ------------------------------------------------------------------
   Carte de match
   ------------------------------------------------------------------ */

.otb-match {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--otb-e-m);
	padding: var(--otb-e-l);
	background: var(--otb-surface);
	border: 1px solid var(--otb-filet);
	border-radius: var(--otb-r-m);
	transition: border-color var(--otb-moyen) var(--otb-courbe), transform var(--otb-moyen) var(--otb-courbe);
}

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

.otb-match__club {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.otb-match__club--visiteur { flex-direction: row-reverse; text-align: right; }

.otb-match__ecusson {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	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: 0.9rem;
	letter-spacing: 0.02em;
	color: var(--otb-gris);
}

.otb-match__ecusson--otb {
	background: var(--otb-royal-profond);
	border-color: var(--otb-royal);
	color: var(--otb-blanc);
}

.otb-match__nom {
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: var(--otb-t-normal);
	line-height: 1.2;
	color: var(--otb-blanc);
	/* jamais de coupure au milieu d un mot : le nom du club doit rester
	   lisible d un seul tenant. */
	overflow-wrap: normal;
	hyphens: none;
}

.otb-match__centre {
	text-align: center;
	padding-inline: var(--otb-e-m);
}

.otb-match__score {
	font-family: var(--otb-titre);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	color: var(--otb-or);
	letter-spacing: -0.04em;
}

.otb-match__heure {
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: var(--otb-t-moyen);
	color: var(--otb-blanc);
	line-height: 1;
}

.otb-match__date,
.otb-match__lieu {
	font-size: var(--otb-t-petit);
	color: var(--otb-gris);
	line-height: 1.4;
}

.otb-match__meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--otb-e-m);
	padding-top: var(--otb-e-m);
	border-top: 1px solid var(--otb-filet);
	font-size: var(--otb-t-petit);
	color: var(--otb-gris);
	text-align: center;
}

@media (max-width: 620px) {
	.otb-match { padding: var(--otb-e-m); gap: var(--otb-e-s); }
	.otb-match__ecusson { width: 40px; height: 40px; font-size: 0.72rem; }
	.otb-match__nom { font-size: 0.86rem; }

	/* L ecusson passe au dessus du nom : la colonne entiere revient au
	   texte, ce qui suffit a tenir le mot le plus long sans le couper. */
	.otb-match__club,
	.otb-match__club--visiteur {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--otb-e-s);
	}

	.otb-match__centre { padding-inline: var(--otb-e-xs); }
}

/* Pastille de resultat. La couleur ne sert qu au resultat sportif. */
.otb-issue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding-inline: 8px;
	border-radius: var(--otb-r-pill);
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--otb-nuit);
}

.otb-issue--victoire { background: var(--otb-victoire); color: #04150D; }
.otb-issue--nul { background: var(--otb-gris); }
.otb-issue--defaite { background: var(--otb-defaite); color: #1B0605; }

/* Etiquette de competition. */
.otb-etiquette {
	display: inline-block;
	padding: 5px 12px;
	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);
}

.otb-etiquette--or { border-color: var(--otb-or); color: var(--otb-or); }
/* ------------------------------------------------------------------
   Statistiques
   Pas de conteneur de carte : des chiffres qui respirent, separes
   par des filets verticaux.
   ------------------------------------------------------------------ */

.otb-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--otb-filet);
	border-bottom: 1px solid var(--otb-filet);
}

.otb-stat {
	padding: var(--otb-e-l) var(--otb-e-m);
	border-left: 1px solid var(--otb-filet);
}

.otb-stat:first-child { border-left: 0; }

.otb-stat__valeur {
	display: block;
	font-family: var(--otb-titre);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--otb-or);
}

.otb-stat__libelle {
	display: block;
	margin-top: 10px;
	font-size: var(--otb-t-petit);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--otb-gris);
}

@media (max-width: 780px) {
	.otb-stats { grid-template-columns: repeat(2, 1fr); }
	.otb-stat:nth-child(3) { border-left: 0; }
	.otb-stat:nth-child(n+3) { border-top: 1px solid var(--otb-filet); }
}

/* ------------------------------------------------------------------
   Tableau de classement
   Sans carte : des filets horizontaux, et la ligne du club mise en avant.
   ------------------------------------------------------------------ */

.otb-tableau-enveloppe {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.otb-tableau {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.otb-tableau th {
	padding: 14px 12px;
	text-align: right;
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--otb-gris);
	border-bottom: 1px solid var(--otb-filet);
	white-space: nowrap;
}

.otb-tableau th:nth-child(2) { text-align: left; }

.otb-tableau td {
	padding: 16px 12px;
	text-align: right;
	border-bottom: 1px solid var(--otb-filet);
	color: var(--otb-gris);
	font-size: var(--otb-t-normal);
}

.otb-tableau td:nth-child(2) {
	text-align: left;
	color: var(--otb-blanc);
	font-family: var(--otb-titre);
	font-weight: 700;
}

.otb-tableau .otb-pts {
	color: var(--otb-blanc);
	font-family: var(--otb-titre);
	font-weight: 800;
}

/* Ligne de l Olympique : fond eleve et filet or a gauche. */
.otb-tableau tr.est-otb td {
	background: var(--otb-surface-haute);
	color: var(--otb-blanc);
}

.otb-tableau tr.est-otb td:first-child {
	box-shadow: inset 3px 0 0 var(--otb-or);
}

/* ------------------------------------------------------------------
   Carte joueur
   ------------------------------------------------------------------ */

.otb-joueur {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--otb-r-m);
	background: var(--otb-surface);
	border: 1px solid var(--otb-filet);
	aspect-ratio: 4 / 5;
	transition: border-color var(--otb-moyen) var(--otb-courbe);
}

.otb-joueur:hover { border-color: var(--otb-or); }

.otb-joueur__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	transition: transform var(--otb-lent) var(--otb-courbe);
}

.otb-joueur:hover .otb-joueur__photo { transform: scale(1.04); }

/* Numero en filigrane, tres grand, derriere le nom. */
.otb-joueur__numero {
	position: absolute;
	right: 12px;
	bottom: 46px;
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: clamp(4rem, 9vw, 6.5rem);
	line-height: 0.8;
	letter-spacing: -0.06em;
	color: rgba(244, 246, 252, 0.14);
	pointer-events: none;
}

.otb-joueur__pied {
	position: absolute;
	inset: auto 0 0 0;
	padding: 60px 18px 18px;
	background: linear-gradient(180deg, rgba(7, 12, 30, 0) 0%, rgba(7, 12, 30, 0.9) 62%, var(--otb-nuit) 100%);
}

.otb-joueur__nom {
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: var(--otb-t-moyen);
	line-height: 1.05;
	color: var(--otb-blanc);
}

.otb-joueur__poste {
	margin-top: 4px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--otb-or);
	font-family: var(--otb-titre);
	font-weight: 700;
}

/* Repli visuel quand aucune photo n est encore disponible. */
.otb-joueur__vide {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(42, 75, 216, 0.35) 0%, rgba(7, 12, 30, 0) 62%),
		linear-gradient(160deg, var(--otb-surface-haute) 0%, var(--otb-surface) 100%);
}

/* ------------------------------------------------------------------
   Carte d actualite
   ------------------------------------------------------------------ */

.otb-carte {
	display: flex;
	flex-direction: column;
	border-radius: var(--otb-r-m);
	overflow: hidden;
	background: var(--otb-surface);
	border: 1px solid var(--otb-filet);
	transition: border-color var(--otb-moyen) var(--otb-courbe), transform var(--otb-moyen) var(--otb-courbe);
	height: 100%;
}

.otb-carte:hover,
.otb-carte:focus-within {
	border-color: var(--otb-or);
	transform: translateY(-3px);
}

.otb-carte__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--otb-surface-haute);
}

.otb-carte__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--otb-lent) var(--otb-courbe);
}

.otb-carte:hover .otb-carte__media img { transform: scale(1.05); }

.otb-carte__corps {
	padding: var(--otb-e-l);
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.otb-carte__titre {
	font-size: var(--otb-t-moyen);
	line-height: 1.15;
	color: var(--otb-blanc);
}

.otb-carte__date {
	font-size: var(--otb-t-petit);
	color: var(--otb-gris);
}

.otb-carte__extrait {
	color: var(--otb-gris);
	font-size: 0.98rem;
	line-height: 1.6;
}

/* Etat vide compose, jamais une zone blanche. */
.otb-vide {
	padding: var(--otb-e-xl) var(--otb-e-l);
	text-align: center;
	border: 1px dashed var(--otb-filet);
	border-radius: var(--otb-r-m);
	background:
		radial-gradient(100% 100% at 50% 0%, rgba(42, 75, 216, 0.14) 0%, rgba(7, 12, 30, 0) 70%),
		var(--otb-surface);
}

.otb-vide__titre {
	font-size: var(--otb-t-grand);
	color: var(--otb-blanc);
	margin-bottom: 10px;
}

.otb-vide__texte {
	color: var(--otb-gris);
	margin-inline: auto;
	max-width: 46ch;
}

/* ------------------------------------------------------------------
 * Blason officiel
 *
 * Remplace les initiales OT partout ou le club est represente.
 * Le trace vient du symbole SVG injecte une seule fois par page.
 * ------------------------------------------------------------------ */

.otb-blason {
	display: block;
	width: 100%;
	height: auto;
}

/* Dans un ecusson rond de carte de match. Le trace est plus haut que
   large : on le contient en hauteur pour qu il reste centre optiquement. */
.otb-blason--ecusson {
	width: auto;
	height: 56%;
	max-width: 62%;
}

/* L ecusson du club abandonne le fond bleu plein : le blason porte
   desormais l identite, un aplat colore derriere lui ferait doublon. */
.otb-match__ecusson--otb {
	background: var(--otb-surface-haute);
	border-color: rgba(200, 162, 72, 0.42);
}


/* ------------------------------------------------------------------
 * Blason en trois dimensions, hero de la page d accueil
 *
 * Deux anneaux en filet d or tournent lentement autour du blason, sur
 * des inclinaisons differentes : la profondeur nait de la superposition
 * et non d une lueur, conformement au systeme de design.
 * Aucune ombre noire, aucun halo. Seules transform et opacity sont
 * animees. Le mouvement s arrete si le visiteur le demande.
 * ------------------------------------------------------------------ */

.otb-blason3d {
	position: relative;
	width: min(240px, 46vw);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	margin-inline: 0;
	margin-bottom: var(--otb-e-l);
	perspective: 900px;
}

.otb-blason3d__anneau {
	position: absolute;
	inset: 0;
	border-radius: var(--otb-r-pill);
	border: 1px solid rgba(200, 162, 72, 0.28);
	transform-style: preserve-3d;
}

.otb-blason3d__anneau--deux {
	inset: -11%;
	border-color: rgba(42, 75, 216, 0.30);
}

/* Le point lumineux qui parcourt l anneau : un simple disque d or,
   sans ombre portee ni diffusion. */
.otb-blason3d__anneau::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: var(--otb-r-pill);
	background: var(--otb-or-clair);
}

.otb-blason3d__piece {
	position: relative;
	width: 52%;
	transform-style: preserve-3d;
}

.otb-blason3d__piece .otb-blason {
	width: 100%;
}

@media (min-width: 901px) {
	.otb-blason3d { width: min(300px, 22vw); }
}

/* Sous 900px le blason cede la place au titre : le systeme de design
   impose que le hero tienne dans le premier ecran. */
@media (max-width: 900px) {
	.otb-blason3d { width: min(150px, 34vw); }
	.otb-blason3d__anneau--deux { display: none; }
}

.otb-blason3d__anneau {
	transform: rotateX(72deg);
	animation: otb-orbite-a 26s linear infinite;
}

.otb-blason3d__anneau--deux {
	transform: rotateX(64deg) rotateY(14deg);
	animation: otb-orbite-b 38s linear infinite;
}

.otb-blason3d__piece {
	animation: otb-levitation 8s var(--otb-courbe) infinite;
}

@keyframes otb-orbite-a {
	from { transform: rotateX(72deg) rotateZ(0deg); }
	to   { transform: rotateX(72deg) rotateZ(360deg); }
}

@keyframes otb-orbite-b {
	from { transform: rotateX(64deg) rotateY(14deg) rotateZ(360deg); }
	to   { transform: rotateX(64deg) rotateY(14deg) rotateZ(0deg); }
}

@keyframes otb-levitation {
	0%, 100% { transform: translate3d(0, -6px, 0) rotateZ(-0.6deg); }
	50%      { transform: translate3d(0, 6px, 0) rotateZ(0.6deg); }
}

@media (prefers-reduced-motion: reduce) {
	.otb-blason3d__anneau,
	.otb-blason3d__anneau--deux,
	.otb-blason3d__piece {
		animation: none;
	}
	.otb-blason3d__anneau { transform: rotateX(72deg); }
	.otb-blason3d__anneau--deux { transform: rotateX(64deg) rotateY(14deg); }
}

/* ------------------------------------------------------------------
   Blason en relief (16.09.2026).

   Quinze copies du symbole empilees sur l axe Z : la premiere est la
   face avant (degrade or intact), les autres forment la tranche, plus
   sombres. Le tout oscille de -32 a +32 degres : le monogramme reste
   lisible en permanence, contrairement a un tour complet qui montre le
   T a l envers une seconde sur deux. Seul transform est anime ; les
   filtres sont fixes, calcules une fois par le navigateur.
   Retour arriere : supprimer ce bloc et remettre
   .sauvegarde-blason3d-20260916/templates__accueil.php.
   ------------------------------------------------------------------ */

.otb-blason3d {
	--otb-ext-pas: 1.1px;   /* epaisseur d une couche */
	--otb-ext-angle: 32deg; /* amplitude de l oscillation */
}

.otb-ext {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 100 / 117.41;
	transform-style: preserve-3d;
	transform: rotateX(10deg) rotateY(-18deg);
	animation: otb-ext-oscille 12s ease-in-out infinite;
}

.otb-ext__couche {
	position: absolute;
	inset: 0;
	display: block;
	transform: translateZ(calc(var(--otb-i) * var(--otb-ext-pas) * -1));
	/* la tranche : le meme or, assombri */
	filter: brightness(0.42) saturate(0.9);
}

.otb-ext__couche .otb-blason {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.otb-ext__couche--face { filter: none; }
.otb-ext__couche--dos  { filter: brightness(0.62); }

@keyframes otb-ext-oscille {
	0%   { transform: rotateX(10deg) rotateY(calc(var(--otb-ext-angle) * -1)); }
	50%  { transform: rotateX(10deg) rotateY(var(--otb-ext-angle)); }
	100% { transform: rotateX(10deg) rotateY(calc(var(--otb-ext-angle) * -1)); }
}

/* Sous 900px le blason mesure environ 80px : tranche plus fine, pour
   garder les proportions du logo. */
@media (max-width: 900px) {
	.otb-blason3d { --otb-ext-pas: 0.75px; }
}

/* Mouvement reduit : le relief reste (angle fixe), l oscillation s arrete. */
@media (prefers-reduced-motion: reduce) {
	.otb-ext { animation: none; }
}

/* Sans preserve-3d (navigateurs anciens), on n empile pas : seule la
   face avant est visible, le logo reste plat mais correct. */
@supports not (transform-style: preserve-3d) {
	.otb-ext__couche:not(.otb-ext__couche--face) { display: none; }
	.otb-ext { transform: none; animation: none; }
}

/* ------------------------------------------------------------------
   Ecussons adverses.

   L ecusson depose par le club adverse remplace ses initiales. Le cadre
   garde exactement les memes dimensions dans les deux cas, afin que la
   grille des fiches ne bouge pas quand un logo arrive ou manque.
   ------------------------------------------------------------------ */

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

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

/* Sur tres petit ecran, un libelle long ne doit pas pousser la page au dela
   de la fenetre : le bouton passe sur deux lignes plutot que de deborder.
   Cas rencontre avec Classement officiel de l association, a 391 pixels de
   large pour une fenetre de 390. */
@media (max-width: 480px) {
	.otb-btn {
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
}

/* ==================================================================
   DERNIER RESULTAT
   Carte posee sous le bandeau d accueil. Le score est le plus gros
   element de la page apres le titre : il doit se lire d un coup d oeil,
   sur un telephone, en marchant.
   ================================================================== */

.otb-dernier {
	border: 1px solid var(--otb-filet);
	border-radius: var(--otb-r-l);
	background: linear-gradient(160deg, var(--otb-surface-haute), var(--otb-surface));
	box-shadow: var(--otb-ombre);
	overflow: hidden;
}

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

.otb-dernier__titre {
	margin: 0;
	font-size: var(--otb-t-petit);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--otb-or);
}

.otb-dernier__compet {
	font-size: var(--otb-t-petit);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--otb-gris);
}
/* minmax(0, 1fr) et non 1fr : sans cela les colonnes laterales refusent de
   descendre sous la largeur du nom de club le plus long, et la colonne du
   score se retrouve ecrasee sous sa largeur naturelle. */
.otb-dernier__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--otb-e-m);
	padding: var(--otb-e-xl) var(--otb-e-l);
}

.otb-dernier__equipe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--otb-e-s);
	text-align: center;
	min-width: 0;
}

.otb-dernier__ecusson {
	width: 72px;
	height: 72px;
}

.otb-dernier__nom {
	font-weight: 700;
	font-size: var(--otb-t-normal);
	line-height: 1.25;
	color: var(--otb-blanc);
	overflow-wrap: anywhere;
}

.otb-dernier__score {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--otb-e-s);
}

.otb-dernier__chiffres {
	margin: 0;
	font-family: var(--otb-titre);
	font-weight: 800;
	font-size: clamp(2.75rem, 9vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--otb-blanc);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.otb-dernier__tiret {
	color: var(--otb-or);
	margin: 0 0.18em;
}
/* Pastille d issue : texte de 1 rem sur aplat, donc seuil de contraste 4,5:1.
   Les couleurs de la charte sont posees en fond, le texte prend le bleu nuit
   ou le blanc selon celle qui passe. */
.otb-dernier__issue {
	display: inline-block;
	padding: 0.3em 0.9em;
	border-radius: var(--otb-r-pill);
	font-size: var(--otb-t-petit);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.otb-dernier__issue--victoire {
	background: var(--otb-victoire);
	color: var(--otb-nuit);
}

.otb-dernier__issue--nul {
	background: var(--otb-filet-clair);
	color: var(--otb-blanc);
}

.otb-dernier__issue--defaite {
	background: var(--otb-defaite);
	color: var(--otb-blanc);
}

.otb-dernier__pied {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otb-e-m);
	align-items: center;
	justify-content: space-between;
	padding: var(--otb-e-m) var(--otb-e-l);
	border-top: 1px solid var(--otb-filet);
	background: rgba(0, 0, 0, 0.16);
}

.otb-dernier__contexte {
	margin: 0;
	font-size: 0.92rem;
	color: var(--otb-gris);
}

.otb-dernier__sep {
	margin: 0 0.5em;
	color: var(--otb-or);
}

.otb-dernier__liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otb-e-s);
}
@media (max-width: 640px) {
	.otb-dernier__corps {
		gap: var(--otb-e-xs);
		padding: var(--otb-e-l) var(--otb-e-m);
	}

	.otb-dernier__issue {
		font-size: 0.62rem;
		padding: 0.28em 0.7em;
		letter-spacing: 0.06em;
	}

	.otb-dernier__ecusson {
		width: 48px;
		height: 48px;
	}

	.otb-dernier__nom {
		font-size: 0.8rem;
	}

	.otb-dernier__pied {
		flex-direction: column;
		align-items: flex-start;
	}

	.otb-dernier__liens {
		width: 100%;
	}

	.otb-dernier__liens .otb-btn {
		flex: 1 1 auto;
		text-align: center;
		justify-content: center;
	}
}
/* Carte joueur sans portrait : le numero devient le visuel — 31.08.2026 */
.otb-joueur--sans-photo .otb-joueur__vide {
	background:
		radial-gradient(90% 70% at 50% 30%, rgba(27, 79, 216, 0.38) 0%, rgba(7, 12, 30, 0) 65%),
		linear-gradient(160deg, var(--otb-surface-haute) 0%, var(--otb-surface) 100%);
}
.otb-joueur--sans-photo .otb-joueur__vide::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(212, 175, 55, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 175, 55, 0.07) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.otb-joueur--sans-photo .otb-joueur__numero {
	right: auto;
	bottom: auto;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	font-size: clamp(5.5rem, 12vw, 8.5rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	color: var(--otb-or);
	opacity: 1;
	text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.otb-joueur--sans-photo:hover .otb-joueur__numero { color: var(--otb-or-clair); }
.otb-joueur--sans-photo .otb-joueur__pied {
	background: linear-gradient(180deg, rgba(7, 12, 30, 0) 0%, rgba(7, 12, 30, 0.85) 55%, var(--otb-nuit) 100%);
}