/* ==========================================================================
   TLM Matchs — styles front (design EVENTORI, charte verte)
   Couleurs prélevées sur la billetterie officielle. Ajuste si besoin.
 
   ⚠️ IMPORTANT — toutes les règles ci-dessous sont préfixées par `.tlm-matchs`
   (le conteneur du shortcode). Le site du club utilise DÉJÀ des classes en
   `tlm-` (ex. le bouton d'en-tête `.tlm-btn`, la classe Divi `.tlm-billetterie`) :
   une règle non scopée repeindrait des éléments hors du plugin.
   Ne jamais écrire de sélecteur `.tlm-…` à la racine, sauf `.tlm-menu-volley`
   (onglet de menu, hors section) et la variable d'icône sur `:root`.
   ========================================================================== */
 
.tlm-matchs {
	--tlm-green-dark: #365543; /* vert foncé : éléments forts             */
	--tlm-green:      #40634d; /* vert principal : VS, accents            */
	--tlm-green-med:  #5b7763; /* « Date à confirmer »                    */
	--tlm-square:     #497453; /* carré séparateur des équipes            */
	--tlm-green-050:  #eaf1ea; /* fond badge date                         */
	--tlm-green-100:  #cfe3d3; /* bordure badge lieu                      */
	--tlm-section-bg: #edf2ed; /* fond de section (crans du ticket)       */
	--tlm-btn-bg:     #0F5132; /* bouton CTA : vert de la charte du site   */
	--tlm-text:       #1a1a1a;
	--tlm-muted:      #9a9db0;
	--tlm-border:     #e5e7eb;
	--tlm-card-bg:    #ffffff;
	--tlm-radius:     14px;
 
	font-family: inherit;
	color: var(--tlm-text);
	max-width: 1200px;
	margin: 0 auto;
	background: var(--tlm-section-bg);
	padding: 20px clamp(16px, 3vw, 28px);
	border-radius: 22px;
	box-sizing: border-box;
}
 
/* ------------------------------------------------------------------ En-tête */
.tlm-matchs .tlm-matchs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
.tlm-matchs .tlm-matchs-title {
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	color: #101828;
}
.tlm-matchs .tlm-matchs-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	color: var(--tlm-text);
	white-space: nowrap;
	transition: color .2s ease;
}
.tlm-matchs .tlm-matchs-all::after { content: "›"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); }
.tlm-matchs .tlm-matchs-all:hover { color: var(--tlm-green); }
 
/* -------------------------------------------------------- Liste (verticale) */
.tlm-matchs .tlm-matchs-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
 
/* --------------------------------------------------------------------- Carte */
.tlm-matchs .tlm-match-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
@media (min-width: 768px) {
	.tlm-matchs .tlm-match-card { flex-direction: row; gap: 14px; }
}
 
/* Souche à logos (partie gauche, bord cranté « ticket ») */
.tlm-matchs .tlm-match-stub {
	position: relative;
	background: var(--tlm-card-bg);
	border-radius: var(--tlm-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 10px 18px;
}
@media (min-width: 768px) {
	.tlm-matchs .tlm-match-stub {
		flex: 0 0 auto;
		width: clamp(170px, 23%, 240px);
		/* crans du ticket sur le bord gauche */
		-webkit-mask: radial-gradient(9px at 0 16px, transparent 8px, #000 8.5px) 0 0 / 100% 32px;
		        mask: radial-gradient(9px at 0 16px, transparent 8px, #000 8.5px) 0 0 / 100% 32px;
	}
}
 
.tlm-matchs .tlm-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}
.tlm-matchs .tlm-logo img { width: 100%; height: 100%; object-fit: contain; }
.tlm-matchs .tlm-logo--empty {
	border-radius: 50%;
	background: #f1f2f4;
	box-shadow: inset 0 0 0 1px var(--tlm-border);
}
 
.tlm-matchs .tlm-vs {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: .82;
	color: var(--tlm-green);
	font-weight: 800;
	font-size: .9rem;
	letter-spacing: .01em;
}
 
/* Panneau d'informations (partie droite) */
.tlm-matchs .tlm-match-panel {
	flex: 1 1 auto;
	background: var(--tlm-card-bg);
	border-radius: var(--tlm-radius);
	box-shadow: 0 8px 26px rgba(16, 24, 40, .08);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 20px;
}
@media (min-width: 768px) {
	.tlm-matchs .tlm-match-panel { flex-direction: row; align-items: center; gap: 12px; }
}
 
.tlm-matchs .tlm-match-info {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}
 
/* Logo de compétition en filigrane, coin haut-droit */
.tlm-matchs .tlm-compet-logo {
	position: absolute;
	top: -2px;
	right: -4px;
	height: 44px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .28;
	pointer-events: none;
}
 
.tlm-matchs .tlm-match-teams {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	font-size: 1.02rem;
	color: #101828;
	padding-right: 66px; /* laisse la place au filigrane */
}
.tlm-matchs .tlm-sq {
	width: 7px;
	height: 7px;
	background: var(--tlm-square);
	border-radius: 1px;
	flex: 0 0 auto;
}
 
.tlm-matchs .tlm-match-compet {
	margin: 0;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tlm-muted);
}
 
/* Badges */
.tlm-matchs .tlm-match-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.tlm-matchs .tlm-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: .86rem;
	font-weight: 500;
	line-height: 1.2;
}
.tlm-matchs .tlm-badge--date { background: var(--tlm-green-050); color: var(--tlm-text); }
.tlm-matchs .tlm-badge--date em { font-style: normal; font-weight: 600; color: var(--tlm-green-med); }
.tlm-matchs .tlm-badge--lieu {
	background: #fff;
	border: 1px solid var(--tlm-green-100);
	color: var(--tlm-text);
	text-transform: uppercase;
	font-size: .82rem;
	letter-spacing: .01em;
}
 
/* Colonne CTA + séparateur vertical (desktop) */
.tlm-matchs .tlm-match-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	flex: 0 0 auto;
}
@media (min-width: 768px) {
	.tlm-matchs .tlm-match-cta {
		padding-left: 22px;
		border-left: 1px solid var(--tlm-border);
		align-self: stretch;
		justify-content: center;
	}
}
 
/* ---------------------------------------------- Bouton « Voir les offres »
   Reprend l'animation du bouton billetterie du site : volet blanc qui descend
   au survol (trait vert en bas), texte qui passe du blanc au vert.
   Le `::before` en `z-index:-1` se peint AU-DESSUS du fond du bouton mais SOUS
   le texte (ordre de peinture CSS) — c'est ce qui fait l'effet de volet.
   Classe volontairement nommée `tlm-match-btn` : `tlm-btn` est DÉJÀ utilisée
   par les boutons d'en-tête du site (billetterie / boutique / compte). */
.tlm-matchs .tlm-match-btn,
.tlm-matchs .tlm-match-btn:link,
.tlm-matchs .tlm-match-btn:visited {
	position: relative;
	overflow: hidden;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: .7em 1.7em;
	border-radius: 8px;
	border: 2px solid var(--tlm-btn-bg);
	background-color: var(--tlm-btn-bg);
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color .45s ease;
}
 
.tlm-matchs .tlm-match-btn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background-color: #fff;
	border-bottom: 3px solid var(--tlm-btn-bg);
	z-index: -1;
	transition: height .45s cubic-bezier(.65, .05, .36, 1);
}
 
.tlm-matchs .tlm-match-btn:hover,
.tlm-matchs .tlm-match-btn:focus,
.tlm-matchs .tlm-match-btn:active {
	color: var(--tlm-btn-bg);
	text-decoration: none;
}
.tlm-matchs .tlm-match-btn:hover::before,
.tlm-matchs .tlm-match-btn:focus::before {
	height: 100%;
}
.tlm-matchs .tlm-match-btn:focus-visible { outline: 2px solid var(--tlm-btn-bg); outline-offset: 2px; }
 
/* Respecte la préférence « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
	.tlm-matchs .tlm-match-btn,
	.tlm-matchs .tlm-match-btn::before { transition: none; }
}
 
.tlm-matchs .tlm-empty { color: var(--tlm-muted); font-style: italic; }
 
/* ==========================================================================
   Onglet de menu « CALENDRIER MATCHS » — ballon de volley
   (seule règle hors `.tlm-matchs` : elle vise l'élément de menu du thème)
   L'icône reprend la couleur du texte du menu (currentColor).
   ========================================================================== */
.tlm-menu-volley > a::before,
.tlm-menu-volley a .menu-item-text::before,
.tlm-menu-volley .wp-block-navigation-item__label::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .45em;
	vertical-align: -.14em;
	background-color: currentColor;
	-webkit-mask: var(--tlm-volley-icon) center / contain no-repeat;
	        mask: var(--tlm-volley-icon) center / contain no-repeat;
}
 
:root {
	--tlm-volley-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279.3%27%2F%3E%3Cpath%20d%3D%27M12%202.7c2.6%202.9%204%206%204%209.3s-1.4%206.4-4%209.3%27%2F%3E%3Cpath%20d%3D%27M2.9%208.4c3.2%201.4%206.8%201.7%2010.4.6%202.9-.9%205.5-2.6%207.4-4.9%27%2F%3E%3Cpath%20d%3D%27M2.9%2015.6c3.2-1.4%207-1.2%2010.6.5%202.7%201.2%205%203%206.4%205.2%27%2F%3E%3C%2Fsvg%3E");
}