/*
 * Classements Le Push – couleurs modifiables via ces variables
 * (Apparence → Personnaliser → CSS additionnel, par ex. .lp-front { --lp-tapis: #123; }).
 */
.lp-front {
	--lp-tapis: #1c1c1e;        /* noir */
	--lp-tapis-fonce: #0b0b0c;
	--lp-accent: var(--nv-primary-accent, #c8161d); /* rouge */
	--lp-or: #c9a227;
	--lp-argent: #9ba4ad;
	--lp-bronze: #a8693a;
	--lp-texte: #1d2321;
	--lp-doux: #5d6b65;
	--lp-fond: #ffffff;
	--lp-fond-2: #f4f6f5;
	--lp-bord: #dfe5e2;
	--lp-pos: #1f7a4a;
	--lp-neg: #b3261e;
	--lp-rayon: 10px;
	color: var(--lp-texte);
	font-variant-numeric: tabular-nums;
	margin: 1.5em 0;
}
.lp-front *, .lp-front *::before, .lp-front *::after { box-sizing: border-box; }

/* ---------- Accueil : podiums ---------- */
.lp-accueil-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.lp-carte { background: var(--lp-fond); border: 1px solid var(--lp-bord); border-radius: var(--lp-rayon); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.lp-carte-tete { background: linear-gradient(135deg, var(--lp-tapis), var(--lp-tapis-fonce)); color: #fff; padding: 14px 18px; border-bottom: 3px solid var(--lp-accent); }
.lp-carte-tete h3 { margin: 0; font-size: 1.15em; color: #fff; letter-spacing: .02em; }
.lp-carte-tete p { margin: 2px 0 0; font-size: .85em; opacity: .8; }

.lp-front ol.lp-podium { list-style: none; margin: 0; padding: 22px 14px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; background: var(--lp-fond-2); border-bottom: 1px solid var(--lp-bord); }
.lp-front .lp-marche { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 4px 10px; border-radius: 8px 8px 0 0; background: var(--lp-fond); border: 1px solid var(--lp-bord); border-bottom: 0; min-width: 0; }
.lp-marche-1 { padding-top: 22px; padding-bottom: 22px; }
.lp-marche-2 { padding-top: 14px; }
.lp-jeton { --c: var(--lp-or); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--c); border: 4px dashed rgba(255, 255, 255, .55); box-shadow: 0 0 0 2px var(--c); }
.lp-marche-1 .lp-jeton { width: 52px; height: 52px; font-size: 1.2em; }
.lp-marche-2 .lp-jeton { --c: var(--lp-argent); }
.lp-marche-3 .lp-jeton { --c: var(--lp-bronze); }
.lp-marche .lp-nom { font-weight: 700; overflow-wrap: anywhere; line-height: 1.2; }
.lp-marche .lp-pts { font-size: .9em; color: var(--lp-doux); }

.lp-front ol.lp-suite { list-style: none; margin: 0; padding: 6px 0; }
.lp-front .lp-suite li { display: flex; align-items: center; gap: 12px; padding: 7px 18px; border-bottom: 1px solid var(--lp-fond-2); }
.lp-suite li:last-child { border-bottom: 0; }
.lp-suite .lp-rang { width: 1.8em; color: var(--lp-doux); font-weight: 600; }
.lp-suite .lp-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-suite .lp-pts { font-weight: 700; }

.lp-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 0; font-size: .85em; color: var(--lp-doux); }
.lp-bouton { display: inline-block; padding: 8px 16px; border-radius: 6px; background: var(--lp-tapis); color: #fff !important; text-decoration: none !important; font-weight: 600; }
.lp-bouton:hover { background: var(--lp-tapis-fonce); }
.lp-vide { padding: 18px; color: var(--lp-doux); font-style: italic; }

/* ---------- Page des classements ---------- */
.lp-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.lp-barre h2 { margin: 0; }
.lp-barre small { font-weight: 400; color: var(--lp-doux); }
.lp-archives select { margin-left: 6px; padding: 4px 8px; }
.lp-maj { color: var(--lp-doux); font-size: .9em; margin: 4px 0 16px; }

.lp-onglets { display: none; flex-wrap: wrap; gap: 4px; border-bottom: 3px solid var(--lp-tapis); }
.lp-js .lp-onglets { display: flex; }
.lp-onglets button { appearance: none; border: 1px solid var(--lp-bord); border-bottom: 0; background: var(--lp-fond-2); color: var(--lp-texte); padding: 9px 16px; border-radius: 8px 8px 0 0; cursor: pointer; font: inherit; font-weight: 600; }
.lp-onglets button[aria-selected="true"] { background: var(--lp-tapis); border-color: var(--lp-tapis); color: #fff; }
.lp-onglets button:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.lp-panneau { padding-top: 12px; }
.lp-js .lp-titre-panneau { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lp-sous-titre { margin: 20px 0 8px; }

.lp-defile { overflow-x: auto; border: 1px solid var(--lp-bord); border-radius: var(--lp-rayon); background: var(--lp-fond); }
.lp-tableau { width: 100%; border-collapse: collapse; margin: 0; font-size: .95em; border: 0; }
.lp-tableau th, .lp-tableau td { padding: 8px 10px; text-align: right; border: 0; border-bottom: 1px solid var(--lp-fond-2); white-space: nowrap; }
.lp-tableau th { background: var(--lp-fond-2); color: var(--lp-doux); font-size: .8em; text-transform: uppercase; letter-spacing: .04em; }
.lp-tableau .lp-c-nom { text-align: left; width: 100%; font-weight: 600; white-space: normal; }
.lp-tableau .lp-c-rang { text-align: center; width: 3em; }
.lp-tableau .lp-c-rang span { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-weight: 700; font-size: .9em; }
.lp-tableau td.lp-c-total { font-weight: 700; color: var(--lp-tapis); font-size: 1.05em; }
.lp-tableau tbody tr:hover { background: var(--lp-fond-2); }
.lp-top-1 .lp-c-rang span { background: var(--lp-or); color: #fff; }
.lp-top-2 .lp-c-rang span { background: var(--lp-argent); color: #fff; }
.lp-top-3 .lp-c-rang span { background: var(--lp-bronze); color: #fff; }
.lp-pos { color: var(--lp-pos); }
.lp-neg { color: var(--lp-neg); }

.lp-regles { margin-top: 20px; padding: 12px 16px; background: var(--lp-fond-2); border-radius: var(--lp-rayon); font-size: .9em; }
.lp-regles summary { cursor: pointer; font-weight: 600; }
.lp-regles ul { margin: 10px 0 0 1.2em; }

@media (max-width: 600px) {
	.lp-tableau .lp-opt { display: none; }
	.lp-tableau th, .lp-tableau td { padding: 7px 6px; }
	.lp-onglets button { padding: 8px 10px; font-size: .9em; }
}