/* =========================================================================
 * CDM 2026 — Page « Coupe du Monde 2026 » ([cdm2026_coupe_du_monde]).
 * Réplique le corps de la page compétition KOVASCORE. Sélecteurs SCOPÉS sous
 * .cdm2026-cdm (zéro collision avec le thème). Drapeaux = SVG locaux.
 * Thèmes clair/sombre + RTL. Onglets : amélioration progressive (sans JS, toutes
 * les sections s'affichent ; avec JS, vrais onglets).
 * ====================================================================== */

/* Palette « Coupe du Monde 2026 » : ACCENT = OR du trophée (We Are 26) ; le vert
 * néon emprunté à KOVASCORE est retiré de toute l'UI. 1 seul accent fort (l'or) ;
 * le multicolore reste DÉCORATIF (bordure du bandeau). Sémantique conservée :
 * qualifié = vert, qualif. possible = orange, LIVE = rouge. Thème clair + sombre, RTL. */
.cdm2026-cdm {
	/* Défilement d'arrivée (onglet/barre) : dégage l'en-tête fixe du site lorsqu'on amène le
	   bloc au sommet du champ de vision (scroll-margin respecté par scrollIntoView). */
	scroll-margin-top: 72px;
	--cdm-accent: #f4b81e;            /* OR (trophée) : pilule active, chip active, focus, CTA */
	--cdm-accent-deep: #d99a06;        /* or foncé : hover / bord actif */
	--cdm-accent-text: #b07c08;        /* or lisible (texte/accent) sur fond clair (AA) */
	--cdm-accent-soft: rgba(244, 184, 30, .14);
	--cdm-on-accent: #1a1205;          /* quasi-noir chaud : texte SUR or */
	--cdm-q: #16a34a;                  /* qualifié (sémantique) */
	--cdm-q-soft: rgba(22, 163, 74, .10);
	--cdm-p: #e0a52e;                  /* qualification possible (sémantique) */
	--cdm-live: #e11d48;               /* LIVE (rouge WC2026) */
	--cdm-live-soft: rgba(225, 29, 72, .08);
	--cdm-bg: #ffffff;
	--cdm-surface: #ffffff;
	--cdm-surface-2: #f0f3f8;
	--cdm-skel-hi: #f7efdd;            /* reflet shimmer (léger ton doré) */
	--cdm-text: #0e1320;
	--cdm-text-2: #55607a;
	--cdm-text-3: #8a93a6;
	--cdm-border: #e2e7ef;
	--cdm-border-soft: #edf1f6;
	--cdm-win: #0e1320;
	--cdm-radius: 14px;
	--cdm-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -12px rgba(16, 24, 40, .18);
	--cdm-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	max-width: 1100px;
	margin: 0 auto;
	padding: 4px 0 24px;
	font-family: var(--cdm-font);
	color: var(--cdm-text);
	box-sizing: border-box;
}
.cdm2026-cdm *,
.cdm2026-cdm *::before,
.cdm2026-cdm *::after { box-sizing: border-box; }

.cdm2026-cdm--dark {
	--cdm-accent: #f4b81e;
	--cdm-accent-deep: #d99a06;
	--cdm-accent-text: #f4b81e;        /* or vif lisible sur fond sombre */
	--cdm-accent-soft: rgba(244, 184, 30, .16);
	--cdm-on-accent: #1a1205;
	--cdm-q: #16a34a;
	--cdm-q-soft: rgba(22, 163, 74, .16);
	--cdm-p: #e0a52e;
	--cdm-live: #ff5a6e;
	--cdm-live-soft: rgba(225, 29, 72, .16);
	--cdm-bg: #0f131a;
	--cdm-surface: #13161c;
	--cdm-surface-2: #191d24;
	--cdm-skel-hi: #232a36;            /* reflet shimmer (sombre, neutre/chaud) */
	--cdm-text: #eceff4;
	--cdm-text-2: #98a2b2;
	--cdm-text-3: #5e6877;
	--cdm-border: #272d37;
	--cdm-border-soft: #1a1f27;
	--cdm-win: #ffffff;
	--cdm-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .6);
	background: var(--cdm-bg);
	border-radius: 16px;
	padding: 4px 16px 26px;
}

/* ---- En-tête : bandeau « Coupe du Monde », TOUJOURS en mode NUIT (réplique
 * KOVASCORE .hub-band.hub-band-wc, variante sombre) — identique dans les 2 thèmes
 * du plugin. Fond dégradé profond + bordure SEGMENTÉE 4 couleurs (violet/bleu/rouge/jaune)
 * via ::before (masque composite). ---- */
.cdm2026-cdm-band {
	--cdm-wc-purple: #7c3aed;
	--cdm-wc-blue: #2563eb;
	--cdm-wc-yellow: #f4b81e;
	--cdm-wc-red: #e11d48;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	margin-bottom: 14px;
	border: none;
	border-radius: 18px;
	color: #fff;
	background: linear-gradient(125deg, #0a1020 0%, #13203c 46%, #1b1733 78%, #221634 100%);
	box-shadow: 0 10px 30px -16px rgba(42, 57, 141, .5), 0 4px 16px -10px rgba(230, 29, 37, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Bordure segmentée 4 couleurs (haut: violet|—|jaune ; côtés: bleu / rouge). */
.cdm2026-cdm-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	padding: 4px;
	border-radius: inherit;
	background:
		linear-gradient(90deg, var(--cdm-wc-purple) 0%, var(--cdm-wc-purple) 25%, transparent 25%, transparent 75%, var(--cdm-wc-yellow) 75%, var(--cdm-wc-yellow) 100%),
		linear-gradient(180deg, var(--cdm-wc-blue) 0%, var(--cdm-wc-blue) 50%, var(--cdm-wc-red) 50%, var(--cdm-wc-red) 100%) center / 50% 100% no-repeat;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.cdm2026-cdm-band > * { position: relative; z-index: 3; }
/* Le bandeau ne suit PAS le thème : on neutralise toute variante claire. */
.cdm2026-cdm--light .cdm2026-cdm-band,
.cdm2026-cdm--dark .cdm2026-cdm-band {
	background: linear-gradient(125deg, #0a1020 0%, #13203c 46%, #1b1733 78%, #221634 100%);
	color: #fff;
}
.cdm2026-cdm-emblem {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	display: inline-block;
	/* Emblème = logo FIFA blanc (local, background-image en style inline) sur le bandeau sombre :
	   fond TRANSPARENT (sinon le logo blanc serait invisible) ; le logo portrait tient en « contain ». */
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.cdm2026-cdm-band-txt { flex: 1 1 auto; min-width: 0; }
.cdm2026-cdm-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #f4b81e; }
.cdm2026-cdm-title { margin: 2px 0 8px; font-size: 22px; font-weight: 800; line-height: 1.05; color: #fff; }
.cdm2026-cdm-facts { display: flex; flex-wrap: wrap; gap: 6px; }
/* Bouton « Rafraîchir » (coin du bandeau nuit). */
.cdm2026-cdm-refresh {
	flex: 0 0 auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	transition: background .15s;
}
.cdm2026-cdm-refresh:hover { background: rgba(255, 255, 255, .2); }
.cdm2026-cdm-refresh:focus-visible { outline: 2px solid #f4b81e; outline-offset: 2px; }
.cdm2026-cdm-refresh.is-busy, .cdm2026-cdm-refresh[disabled] { opacity: .55; pointer-events: none; }
.cdm2026-cdm-refresh.is-busy .cdm2026-cdm-refresh-i { display: inline-block; animation: cdm2026-cdm-spin .7s linear infinite; }
@keyframes cdm2026-cdm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cdm2026-cdm-refresh.is-busy .cdm2026-cdm-refresh-i { animation: none; } }
.cdm2026-cdm-refresh-i { font-size: 14px; line-height: 1; }
@media (max-width: 540px) { .cdm2026-cdm-refresh-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.cdm2026-cdm-fact {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .22);
}

/* ---- Onglets en PILULES (conteneur arrondi, pilule active en accent vif) ---- */
.cdm2026-cdm-tabs {
	display: inline-flex;
	max-width: 100%;
	gap: 4px;
	padding: 4px;
	margin-bottom: 18px;
	background: var(--cdm-surface-2);
	border: 1px solid var(--cdm-border);
	border-radius: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.cdm2026-cdm-tabs::-webkit-scrollbar { display: none; }
.cdm2026-cdm-tab {
	flex: 0 0 auto;
	appearance: none;
	cursor: pointer;
	padding: 9px 17px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .2px;
	white-space: nowrap;
	color: var(--cdm-text-2);
	text-decoration: none;
	background: transparent;
	border: 0;
	border-radius: 9px;
	transition: background .16s, color .16s, box-shadow .16s;
}
.cdm2026-cdm-tab:hover { color: var(--cdm-text); }
.cdm2026-cdm-tab.is-active {
	color: var(--cdm-on-accent);
	background: var(--cdm-accent);
	box-shadow: 0 2px 8px rgba(244, 184, 30, .30);
}
.cdm2026-cdm-tab:focus-visible { outline: 2px solid var(--cdm-accent); outline-offset: 2px; }

.cdm2026-cdm-panel-h {
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 12px;
	color: var(--cdm-text);
}
/* Avec JS (onglets actifs) : on masque les panneaux inactifs et leur titre. */
.cdm2026-cdm.is-tabbed .cdm2026-cdm-panel { display: none; }
.cdm2026-cdm.is-tabbed .cdm2026-cdm-panel.is-active { display: block; }
.cdm2026-cdm.is-tabbed .cdm2026-cdm-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Sans JS : on sépare visuellement les sections empilées. */
.cdm2026-cdm:not(.is-tabbed) .cdm2026-cdm-panel { margin-bottom: 26px; }

/* ---- Chips de groupe ---- */
.cdm2026-cdm-gnav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}
.cdm2026-cdm-gchip {
	appearance: none;
	cursor: pointer;
	white-space: nowrap;
	padding: 7px 14px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cdm-text-2);
	background: var(--cdm-surface);
	border: 1px solid var(--cdm-border);
}
.cdm2026-cdm-gchip:hover { color: var(--cdm-text); border-color: var(--cdm-accent-deep); }
.cdm2026-cdm-gchip.is-on { color: var(--cdm-on-accent); background: var(--cdm-accent); border-color: var(--cdm-accent); }
.cdm2026-cdm-gchip:focus-visible { outline: 2px solid var(--cdm-accent); outline-offset: 2px; }
/* Survol des cartes : fine bordure dorée (signature discrète, accent unique). */
.cdm2026-cdm-grp,
.cdm2026-cdm-round,
.cdm2026-cdm-scorers,
.cdm2026-cdm-ko-stage { transition: border-color .16s, box-shadow .16s; }
.cdm2026-cdm-grp:hover,
.cdm2026-cdm-round:hover,
.cdm2026-cdm-scorers:hover,
.cdm2026-cdm-ko-stage:hover { border-color: var(--cdm-accent-soft); }

/* ---- Classements ---- */
.cdm2026-cdm-stand {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.cdm2026-cdm-stand .is-full,
.cdm2026-cdm-stand .cdm2026-cdm-legend { grid-column: 1 / -1; }

/* Filtrage par groupe (JS) : on masque les groupes non actifs (sauf 3es). */
.cdm2026-cdm-stand.is-filtered .cdm2026-cdm-grp:not(.is-active):not(.is-full) { display: none; }

.cdm2026-cdm-grp {
	border: 1px solid var(--cdm-border);
	border-radius: var(--cdm-radius);
	overflow: hidden;
	background: var(--cdm-surface);
	box-shadow: var(--cdm-shadow);
}
.cdm2026-cdm-grp-h {
	font-weight: 800;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--cdm-text-2);
	padding: 11px 14px;
	background: var(--cdm-surface-2);
	border-bottom: 1px solid var(--cdm-border-soft);
}
.cdm2026-cdm-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cdm2026-cdm-t th {
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cdm-text-3);
	text-align: center;
	padding: 7px 4px;
}
.cdm2026-cdm-t th.l { text-align: left; padding-left: 13px; }
.cdm2026-cdm-t td { text-align: center; padding: 7px 4px; border-top: 1px solid var(--cdm-border); }
.cdm2026-cdm-t td.l { text-align: left; }
.cdm2026-cdm-t td { border-top-color: var(--cdm-border-soft); }
.cdm2026-cdm-t td.rk { width: 26px; font-weight: 700; padding-left: 13px; border-left: 3px solid transparent; }
.cdm2026-cdm-t tr.is-q td.rk { border-left-color: var(--cdm-q); }
.cdm2026-cdm-t tr.is-p td.rk { border-left-color: var(--cdm-p); }
.cdm2026-cdm-t tr.is-q td { background: var(--cdm-q-soft); }
.cdm2026-cdm-t td.tm { display: flex; align-items: center; gap: 8px; padding-left: 8px; min-width: 0; }
.cdm2026-cdm-t td.tm .cdm2026-cdm-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdm2026-cdm-t td.pts { font-weight: 800; }

/* Drapeau = IMAGE DE FOND CSS (jamais de balise <img>) → insensible aux lazy-loaders. */
.cdm2026-cdm-flag {
	width: 22px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 3px;
	display: inline-block;
	vertical-align: middle;
	background-color: var(--cdm-surface-2);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	line-height: 16px;
	text-align: center;
	font-size: 14px;
	overflow: hidden;
}
.cdm2026-cdm-flag--emoji {
	background-image: none;
	background-color: transparent;
}

.cdm2026-cdm-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 2px; }
.cdm2026-cdm-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cdm-text-2); }
.cdm2026-cdm-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cdm2026-cdm-dot.is-q { background: var(--cdm-q); }
.cdm2026-cdm-dot.is-p { background: var(--cdm-p); }

/* ---- Matchs (calendrier / résultats) : CARTE de section ---- */
.cdm2026-cdm-round {
	margin-bottom: 16px;
	background: var(--cdm-surface);
	border: 1px solid var(--cdm-border);
	border-radius: var(--cdm-radius);
	overflow: hidden;
	box-shadow: var(--cdm-shadow);
}
.cdm2026-cdm-round-h {
	font-weight: 800;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--cdm-text-2);
	padding: 11px 14px;
	background: var(--cdm-surface-2);
	border-bottom: 1px solid var(--cdm-border-soft);
}
.cdm2026-cdm-match {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--cdm-border-soft);
	transition: background .12s;
}
.cdm2026-cdm-match:last-child { border-bottom: 0; }
.cdm2026-cdm-match:hover { background: var(--cdm-surface-2); }
.cdm2026-cdm-match.is-live { background: var(--cdm-live-soft); }
.cdm2026-cdm-stat {
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	color: var(--cdm-text-2);
}
.cdm2026-cdm-stat.is-live { color: var(--cdm-live); }
.cdm2026-cdm-stat .cdm2026-cdm-ko-t { font-weight: 800; color: var(--cdm-text); }
.cdm2026-cdm-teams { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cdm2026-cdm-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cdm2026-cdm-team .cdm2026-cdm-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.cdm2026-cdm-team.is-win .cdm2026-cdm-tn { font-weight: 800; color: var(--cdm-win); }
.cdm2026-cdm-sc { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cdm2026-cdm-sc span {
	font-weight: 800;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--cdm-text-2);
	min-width: 16px;
	text-align: right;
}
.cdm2026-cdm-sc span.is-win { color: var(--cdm-win); }

/* ---- Match EN DIRECT : badge « DIRECT » clignotant + période + minute (rouge) + score rouge ---- */
.cdm2026-cdm-stat.is-live { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cdm2026-cdm-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--cdm-live); }
.cdm2026-cdm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cdm-live); animation: cdm2026-cdm-blink 1.1s ease-in-out infinite; }
.cdm2026-cdm-period { font-size: 9.5px; font-weight: 700; color: var(--cdm-live); white-space: nowrap; }
.cdm2026-cdm-min { font-size: 12px; font-weight: 800; color: var(--cdm-live); font-variant-numeric: tabular-nums; }
.cdm2026-cdm-match.is-live .cdm2026-cdm-sc span { color: var(--cdm-live); }
@keyframes cdm2026-cdm-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .cdm2026-cdm-dot { animation: none; } }

/* Sous-section vide (Prévus / Derniers résultats sans match) : message discret. */
.cdm2026-cdm-nomatch { padding: 12px 14px; font-size: 12px; color: var(--cdm-text-3); text-align: center; }

/* ---- Buteurs ---- */
.cdm2026-cdm-scorers {
	border: 1px solid var(--cdm-border);
	border-radius: var(--cdm-radius);
	overflow: hidden;
	max-width: 560px;
	background: var(--cdm-surface);
	box-shadow: var(--cdm-shadow);
}
.cdm2026-cdm-srow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--cdm-border-soft);
	transition: background .12s;
}
.cdm2026-cdm-srow:hover { background: var(--cdm-surface-2); }
.cdm2026-cdm-srow:last-child { border-bottom: 0; }
.cdm2026-cdm-srow:last-child { border-bottom: 0; }
.cdm2026-cdm-srk { width: 18px; text-align: center; font-weight: 700; color: var(--cdm-text-3); }
.cdm2026-cdm-sp { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; }
.cdm2026-cdm-sp small { display: block; font-weight: 500; font-size: 11.5px; color: var(--cdm-text-3); }
.cdm2026-cdm-sg { font-weight: 800; font-size: 15px; color: var(--cdm-accent-text); }

/* État VIDE élégant (warm terminé, réellement aucune donnée) — jamais une erreur. */
.cdm2026-cdm-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 30px 16px;
	text-align: center;
	color: var(--cdm-text-3);
	font-size: 13px;
	background: var(--cdm-surface);
	border: 1px solid var(--cdm-border);
	border-radius: var(--cdm-radius);
}
.cdm2026-cdm-empty-i { color: var(--cdm-text-3); opacity: .7; }

/* ---- SKELETON (chargement) : structure fantôme + balayage shimmer doré doux ---- */
.cdm2026-cdm-skel { display: flex; flex-direction: column; }
.cdm2026-cdm-skel-chips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cdm2026-cdm-skel-card {
	border: 1px solid var(--cdm-border);
	border-radius: var(--cdm-radius);
	overflow: hidden;
	background: var(--cdm-surface);
	box-shadow: var(--cdm-shadow);
}
.cdm2026-cdm-skel-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--cdm-border-soft);
}
.cdm2026-cdm-skel-row:last-child { border-bottom: 0; }
.cdm2026-cdm-skel-chip { width: 74px; height: 32px; border-radius: 999px; flex: 0 0 auto; }
.cdm2026-cdm-skel-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.cdm2026-cdm-skel-bar { height: 11px; border-radius: 6px; }
.cdm2026-cdm-skel-bar.w-name { flex: 1; max-width: 210px; }
.cdm2026-cdm-skel-bar.w-sm { width: 26px; flex: 0 0 auto; }
.cdm2026-cdm-skel-bar.w-sm:nth-of-type(3) { margin-left: auto; }
.cdm2026-cdm-skel-chip,
.cdm2026-cdm-skel-dot,
.cdm2026-cdm-skel-bar {
	background: linear-gradient(100deg, var(--cdm-surface-2) 28%, var(--cdm-skel-hi) 50%, var(--cdm-surface-2) 72%);
	background-size: 220% 100%;
	animation: cdm2026-cdm-shimmer 1.2s linear infinite;
}
@keyframes cdm2026-cdm-shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.cdm2026-cdm-skel-note { font-size: 12px; color: var(--cdm-text-3); text-align: center; padding: 12px 10px 2px; letter-spacing: .2px; }
@media (prefers-reduced-motion: reduce) {
	.cdm2026-cdm-skel-chip,
	.cdm2026-cdm-skel-dot,
	.cdm2026-cdm-skel-bar { animation: none; }
}

/* Fondu d'apparition du contenu (skeleton → réel, ou bascule d'onglet). */
.cdm2026-cdm.is-tabbed .cdm2026-cdm-panel.is-active { animation: cdm2026-cdm-fade .25s ease; }
@keyframes cdm2026-cdm-fade { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cdm2026-cdm.is-tabbed .cdm2026-cdm-panel.is-active { animation: none; } }


/* ---- Onglets de dates (Aperçu) + blocs de jour ---- */
.cdm2026-cdm-daynav {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}
.cdm2026-cdm-day {
	appearance: none;
	cursor: pointer;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--cdm-text-2);
	background: var(--cdm-surface);
	border: 1px solid var(--cdm-border);
	display: inline-block;
	text-decoration: none; /* barre de dates = liens <a> (navigation par page). */
}
.cdm2026-cdm-day.is-on { color: var(--cdm-on-accent); background: var(--cdm-accent); border-color: var(--cdm-accent); }
.cdm2026-cdm-day:focus-visible { outline: 2px solid var(--cdm-accent); outline-offset: 2px; }

/* ---- Sous-onglets de « Résultats » (« Matchs » / « Classements ») : segmented control SECONDAIRE,
   volontairement distinct des grandes pastilles or principales (hiérarchie visuelle). RTL : le
   conteneur dir=rtl inverse naturellement l'ordre des éléments flex. ---- */
.cdm2026-cdm-subnav {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	margin-bottom: 14px;
	background: var(--cdm-surface-2);
	border: 1px solid var(--cdm-border);
	border-radius: 9px;
}
.cdm2026-cdm-subtab {
	appearance: none;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--cdm-text-2);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 7px;
	transition: background .12s, color .12s;
	display: inline-block;
	text-decoration: none; /* sous-onglets = liens <a> (navigation par page). */
}
.cdm2026-cdm-subtab:hover { color: var(--cdm-text); }
.cdm2026-cdm-subtab.is-on { background: var(--cdm-surface); color: var(--cdm-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cdm2026-cdm-subtab:focus-visible { outline: 2px solid var(--cdm-accent); outline-offset: 2px; }
/* Avec JS (is-tabbed) : seul le sous-panneau actif s'affiche. Sans JS : les deux restent visibles. */
.cdm2026-cdm.is-tabbed .cdm2026-cdm-subpanel:not(.is-active) { display: none; }

/* ---- Onglet Groupes (blocs par groupe) ---- */
.cdm2026-cdm.is-tabbed .cdm2026-cdm-grpblock:not(.is-active) { display: none; }
.cdm2026-cdm:not(.is-tabbed) .cdm2026-cdm-grpblock { margin-bottom: 22px; }
.cdm2026-cdm-grpblock .cdm2026-cdm-grp { max-width: 560px; margin-bottom: 12px; }

/* ---- Phase finale (bracket) ---- */
.cdm2026-cdm-bracket { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cdm2026-cdm-ko-stage { border: 1px solid var(--cdm-border); border-radius: 10px; overflow: hidden; }
.cdm2026-cdm-ko-h { margin: 0; padding: 9px 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; background: var(--cdm-surface); border-bottom: 1px solid var(--cdm-border); }
.cdm2026-cdm-ko-mu { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--cdm-border); }
.cdm2026-cdm-ko-mu:last-child { border-bottom: 0; }
.cdm2026-cdm-ko-team { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; min-width: 0; }
.cdm2026-cdm-ko-team.is-tbd { color: var(--cdm-text-3); font-weight: 600; }
.cdm2026-cdm-ko-vs { color: var(--cdm-text-3); font-size: 11px; }
.cdm2026-cdm-ko-d { margin-left: auto; font-size: 11px; color: var(--cdm-text-3); font-variant-numeric: tabular-nums; }

/* ---- RTL ---- */
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-ko-d { margin-left: 0; margin-right: auto; }
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-t th.l,
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-t td.l { text-align: right; }
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-t td.rk { padding-left: 4px; padding-right: 13px; border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-t tr.is-q td.rk { border-right-color: var(--cdm-q); }
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-t tr.is-p td.rk { border-right-color: var(--cdm-p); }
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-sc { align-items: flex-start; }
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-sc span { text-align: left; }
[dir="rtl"].cdm2026-cdm .cdm2026-cdm-tab { border-bottom: 3px solid transparent; }

/* ---- Mobile ---- */
@media (max-width: 760px) {
	.cdm2026-cdm-stand { grid-template-columns: 1fr; }
	.cdm2026-cdm-title { font-size: 19px; }
	/* On masque G/N/P sur petit écran (comme la source) pour garder la lisibilité. */
	.cdm2026-cdm-t th:nth-child(n+4):nth-child(-n+6),
	.cdm2026-cdm-t td:nth-child(n+4):nth-child(-n+6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cdm2026-cdm * { scroll-behavior: auto; }
}