/* ============================================================
   ANALYSE TOP 14 · ANALYSE EUROPE — la page, ses outils communs,
   et l'onglet « Par club ». Les autres onglets ont leur feuille dans
   css/analyse/<onglet>.css, chargée avec eux.
   ============================================================ */

.an-page { --an-barre: 64px; position: relative; }
.an-comp-europe { --an-accent: #c7f04a; --an-accent-2: #f5c451; }
.an-comp-top14 { --an-accent: #5b8cff; --an-accent-2: #8fb3ff; }

/* ---------------- En-tête ---------------- */
.an-entete {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px;
  margin: 6px 0 18px; padding: 30px 30px 26px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 100% 0%, rgba(47, 107, 255, .28), transparent 55%), linear-gradient(160deg, rgba(14, 26, 66, .92), rgba(5, 10, 28, .9));
  border: 1px solid var(--ligne-2); box-shadow: var(--ombre);
}
.an-comp-europe .an-entete { background: radial-gradient(120% 140% at 100% 0%, rgba(199, 240, 74, .16), transparent 55%), linear-gradient(160deg, rgba(14, 26, 40, .94), rgba(5, 10, 22, .92)); }
.an-entete::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 64px); mask: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.an-entete-fond { position: absolute; right: 2%; top: 50%; z-index: -1; display: flex; gap: 10px; transform: translateY(-50%); pointer-events: none; }
.an-entete-fond img { width: clamp(110px, 15vw, 190px); height: auto; opacity: .2; filter: drop-shadow(0 26px 50px rgba(47, 107, 255, .6)) saturate(1.1); animation: an-flotte 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2.4s); }
@keyframes an-flotte { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); } 50% { transform: translate3d(0, -10px, 0) rotate(2deg); } }
.an-entete h1 { margin: 0; font: 600 clamp(36px, 5vw, 66px)/.92 var(--titre); text-transform: uppercase; letter-spacing: .01em; }
.an-entete h1 em { font-style: normal; background: linear-gradient(90deg, var(--an-accent), var(--an-accent-2) 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.an-entete p { margin: 10px 0 0; max-width: 720px; color: var(--texte-2); font-size: 15px; }
.an-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; font-size: 13px; color: var(--texte-2); }
.an-resume b { font: 600 24px/1 var(--titre); color: #fff; margin-right: 4px; font-variant-numeric: tabular-nums; }
.an-resume-j { display: flex; flex-wrap: wrap; gap: 4px; }
.an-resume-j i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--ligne); color: var(--texte-2); }
.an-resume-attente { gap: 6px; }
.an-resume-attente i, .an-attente i { width: 8px; height: 8px; border-radius: 50%; background: var(--bleu-2); animation: an-point 1s ease-in-out infinite; }
.an-resume-attente i:nth-child(2), .an-attente i:nth-child(2) { animation-delay: .15s; }
.an-resume-attente i:nth-child(3), .an-attente i:nth-child(3) { animation-delay: .3s; }
@keyframes an-point { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.an-entete-choix { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.an-choix-coupe { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }
.an-comp-europe .an-entete .segments .glisseur { background: linear-gradient(135deg, #6f8f12, #3e5a06); box-shadow: 0 8px 24px -10px #a5d32c; }

/* ---------------- Les onglets ---------------- */
.an-onglets { position: sticky; top: var(--an-barre); z-index: 20; margin: 0 -6px 22px; padding: 8px 6px; background: linear-gradient(180deg, rgba(4, 8, 22, .96), rgba(4, 8, 22, .86)); border-bottom: 1px solid var(--ligne); }
.an-onglets-defile { position: relative; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.an-onglets-defile::-webkit-scrollbar { display: none; }
.an-onglets-defile button { position: relative; z-index: 1; flex: none; padding: 9px 14px; border: 0; border-radius: 11px; background: none; color: var(--texte-2); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: color .25s; }
.an-onglets-defile button:hover { color: #fff; }
.an-onglets-defile button.est-actif { color: #fff; }
.an-onglets-groupe { flex: none; margin: 0 4px 0 12px; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-3); writing-mode: horizontal-tb; }
.an-onglets-groupe:first-child { margin-left: 4px; }
.an-onglets-glisseur { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; border-radius: 11px; background: linear-gradient(135deg, var(--bleu), #2149c4); box-shadow: 0 8px 24px -10px var(--bleu); transition: transform .4s var(--ressort), width .4s var(--ressort); }
.an-comp-europe .an-onglets-glisseur { background: linear-gradient(135deg, #6f8f12, #3e5a06); box-shadow: 0 8px 24px -10px #a5d32c; }

.an-corps { min-height: 60vh; }
.an-attente { display: flex; justify-content: center; gap: 8px; padding: 80px 0; }
.an-onglet { animation: an-entre .45s var(--doux) both; }
@keyframes an-entre { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.an-vide { padding: 40px 24px; text-align: center; color: var(--texte-3); border: 1px dashed var(--ligne-2); border-radius: var(--rayon); }
.an-bientot { max-width: 620px; margin: 40px auto; padding: 34px 30px; text-align: center; border-radius: 22px; background: var(--surface); border: 1px solid var(--ligne); }
.an-bientot b { font: 600 28px var(--titre); text-transform: uppercase; }
.an-bientot p { margin: 10px 0 0; color: var(--texte-2); }

/* ---------------- Outils communs ---------------- */
.an-logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; padding: 3px; flex: none; }
.an-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.an-logo.est-sans, .cl-rail-logo.est-sans, .cl-heros-img.est-sans, .cl-champ-logo.est-sans { background: var(--surface-3); }
.est-sans b { font: 600 13px var(--titre); color: var(--texte-2); }
.an-bulle { position: fixed; left: 0; top: 0; z-index: 400; max-width: 300px; padding: 9px 12px; border-radius: 12px; pointer-events: none;
  background: rgba(6, 12, 32, .96); border: 1px solid var(--ligne-2); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8);
  font-size: 12.5px; color: var(--texte-2); opacity: 0; transition: opacity .15s; }
.an-bulle.est-visible { opacity: 1; }
.an-bulle b { display: block; color: #fff; font-size: 13px; }
.an-bulle span { display: block; }
.an-bulle small { display: block; color: var(--texte-3); }
.an-choix { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.an-choix > span:first-child { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.an-play { width: 10px; height: 10px; fill: currentColor; flex: none; }
.an-terrain { display: block; width: 100%; height: auto; }
.an-t-pelouse { fill: #0f3d22; }
.an-t-bande { fill: rgba(255, 255, 255, .025); }
.an-t-enbut { fill: rgba(255, 255, 255, .05); }
.an-t-cadre { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .3; }
.an-t-lignes line { stroke: rgba(255, 255, 255, .42); stroke-width: .22; }
.an-t-lignes line.fort { stroke: rgba(255, 255, 255, .7); stroke-width: .32; }
.an-t-lignes line.tiret { stroke-dasharray: 1.4 1; }
.an-t-lignes line.pointille { stroke-dasharray: .4 1.2; stroke: rgba(255, 255, 255, .22); }
.an-t-poteau { fill: #fff; }
.an-sens { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }

/* ============================================================
   « PAR CLUB »
   ============================================================ */
.cl-intro p { margin: 0 0 14px; color: var(--texte-2); }
.cl-rail { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 14px; margin: 0 -4px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.cl-rail-club { flex: none; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; padding: 10px 4px 8px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-3); font-size: 10.5px; font-weight: 750; transition: transform .35s var(--ressort), background .25s, border-color .25s, color .25s, box-shadow .35s; }
.cl-rail-club span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-rail-club:hover { color: #fff; transform: translate3d(0, -3px, 0); border-color: var(--ligne-2); }
.cl-rail-club.est-actif { color: #fff; background: linear-gradient(160deg, var(--fond), rgba(4, 8, 22, .9)); border-color: var(--accent); box-shadow: 0 12px 28px -12px var(--accent), inset 0 0 0 1px var(--accent); transform: translate3d(0, -3px, 0) scale(1.04); }
.cl-rail-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; padding: 4px; }
.cl-rail-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.cl-heros { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 26px; align-items: center; padding: 26px 28px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%), linear-gradient(135deg, var(--fond), #050a1c 75%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--accent) 70%, transparent); }
.cl-heros::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%); }
.cl-heros-logo { grid-row: span 2; perspective: 600px; }
.cl-heros-img { display: grid; place-items: center; width: clamp(84px, 9vw, 120px); aspect-ratio: 1; border-radius: 28px; background: #fff; padding: 12px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); animation: cl-pose .7s var(--ressort) both; }
.cl-heros-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes cl-pose { from { transform: rotateY(-70deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.cl-heros-sur { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.cl-heros h2 { margin: 4px 0 0; font: 600 clamp(28px, 3.6vw, 46px)/1 var(--titre); text-transform: uppercase; letter-spacing: .01em; }
.cl-heros p { margin: 6px 0 0; color: var(--texte-2); }
.cl-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 16px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); }
.cl-stat { padding: 14px 16px; background: rgba(4, 8, 22, .72); }
.cl-stat span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--texte-3); }
.cl-stat b { display: block; margin-top: 4px; font: 600 34px/1 var(--titre); font-variant-numeric: tabular-nums; }
.cl-stat small { display: block; margin-top: 4px; color: var(--texte-2); font-size: 12px; }
.cl-stat.est-fort b { color: var(--vert); }
.cl-stat.est-faible b { color: #ff6b72; }

.cl-section { margin-top: 30px; }
.cl-titre { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-titre h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 22px var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.cl-titre-aide { font-size: 12px; color: var(--texte-3); }
.cl-note { margin: -4px 0 14px; color: var(--texte-2); font-size: 13.5px; max-width: 860px; }
.cl-puce { width: 10px; height: 10px; border-radius: 50%; }
.cl-puce.est-fort { background: var(--vert); box-shadow: 0 0 12px var(--vert); }
.cl-puce.est-faible { background: var(--rouge); box-shadow: 0 0 12px var(--rouge); }

/* La carte des rangs */
.cl-rg { padding: 16px 18px 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--ligne); }
.cl-rg-axe, .cl-rg-ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.cl-rg-axe > div { position: relative; height: 20px; }
.cl-rg-axe b { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); white-space: nowrap; }
.cl-rg-axe b:first-child { transform: none; }
.cl-rg-axe b:last-child { transform: translateX(-100%); }
.cl-rg-axe b.cl-rg-seuil { color: rgba(169, 182, 214, .55); }
.cl-rg-ligne { min-height: 46px; border-top: 1px solid var(--ligne); }
.cl-rg-fam { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 750; color: var(--texte-2); }
.cl-rg-fam svg { width: 16px; height: 16px; color: var(--an-accent); flex: none; }
.cl-rg-piste { position: relative; height: 46px; background: linear-gradient(90deg, rgba(54, 210, 122, .1), transparent 30%, transparent 70%, rgba(224, 49, 58, .1)); }
.cl-rg-piste::before { content: ""; position: absolute; left: 2%; right: 2%; top: 50%; height: 1px; background: var(--ligne-2); }
.cl-rg-pt { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; border: 2px solid rgba(4, 8, 22, .9); transform: translate3d(0, calc(var(--k) * -11px), 0) scale(0); transition: transform .6s var(--ressort); cursor: default; }
.cl-rapport.est-anime .cl-rg-pt { transform: translate3d(0, calc(var(--k) * -11px), 0) scale(1); }
.cl-rg-pt:hover { transform: translate3d(0, calc(var(--k) * -11px), 0) scale(1.5) !important; z-index: 2; }
.cl-rg-pt.est-fort, .cl-rg-leg i.est-fort { background: var(--vert); box-shadow: 0 0 10px rgba(54, 210, 122, .7); }
.cl-rg-pt.est-faible, .cl-rg-leg i.est-faible { background: #ff5a63; box-shadow: 0 0 10px rgba(255, 90, 99, .7); }
.cl-rg-pt.est-neutre, .cl-rg-leg i.est-neutre { background: #8a99c2; }
.cl-rg-med, .cl-rg-med-l { position: absolute; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--an-accent); opacity: .75; }
.cl-rg-med-l { position: static; display: inline-block; height: 12px; vertical-align: middle; }
.cl-rg-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: var(--texte-3); }
.cl-rg-leg span { display: inline-flex; align-items: center; gap: 7px; }
.cl-rg-leg i { width: 10px; height: 10px; border-radius: 50%; }

/* Forces / faiblesses */
.cl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.cl-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cl-carte { position: relative; padding: 14px 15px 13px; border-radius: 16px; background: var(--surface); border: 1px solid var(--ligne); overflow: hidden; transition: transform .3s var(--ressort), border-color .3s; }
.cl-carte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.cl-carte.est-fort::before { background: var(--vert); box-shadow: 0 0 14px var(--vert); }
.cl-carte.est-faible::before { background: var(--rouge); box-shadow: 0 0 14px var(--rouge); }
.cl-carte.est-fort { background: linear-gradient(135deg, rgba(54, 210, 122, .1), var(--surface) 60%); }
.cl-carte.est-faible { background: linear-gradient(135deg, rgba(224, 49, 58, .12), var(--surface) 60%); }
.cl-carte:hover { transform: translate3d(0, -3px, 0); border-color: var(--ligne-2); }
.cl-carte-haut { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }
.cl-carte-haut svg { width: 14px; height: 14px; }
.cl-carte-haut .cl-rang { margin-left: auto; }
.cl-carte-nom { margin-top: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.25; min-height: 34px; }
.cl-carte-val { margin-top: 6px; font: 600 30px/1 var(--titre); font-variant-numeric: tabular-nums; }
.cl-carte-val small { margin-left: 5px; font: 700 12px var(--corps); color: var(--texte-3); }
.cl-carte-ecart { margin-top: 6px; font-size: 12px; color: var(--texte-2); }
.cl-rang { display: inline-block; min-width: 38px; padding: 2px 8px; border-radius: 999px; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; background: var(--surface-2); color: var(--texte-2); }
.cl-rang.est-fort { background: rgba(54, 210, 122, .16); color: #6ff0a4; }
.cl-rang.est-faible { background: rgba(224, 49, 58, .18); color: #ff8a90; }

/* Débuts d'action */
.cl-lancements { padding: 6px 18px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--ligne); }
.cl-lanc-tete, .cl-lanc { display: grid; grid-template-columns: minmax(150px, 1.1fr) 52px 64px 64px minmax(0, 2.6fr); gap: 12px; align-items: center; }
.cl-lanc-tete { padding: 10px 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); border-bottom: 1px solid var(--ligne); }
.cl-lanc { padding: 9px 0; border-bottom: 1px solid var(--ligne); }
.cl-lanc-nom { font-weight: 700; font-size: 14px; }
.cl-lanc-nom small { display: block; font-size: 11.5px; font-weight: 600; color: var(--texte-3); }
.cl-lanc-n { font: 600 20px var(--titre); font-variant-numeric: tabular-nums; }
.cl-lanc-pc { font-size: 13.5px; font-weight: 750; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.cl-lanc-pc.est-fort { color: #6ff0a4; }
.cl-lanc-pc.est-faible { color: #ff8a90; }
.cl-lanc-barre { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .04); transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--doux); }
.cl-rapport.est-anime .cl-lanc-barre { transform: none; }
.cl-seg { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); border-right: 1px solid rgba(4, 8, 22, .6); }
.cl-seg.est-essai, .cl-pastille.est-essai { background: #2fbf71; }
.cl-seg.est-penalite, .cl-pastille.est-penalite { background: #e8b23a; }
.cl-seg.est-perdu, .cl-pastille.est-perdu { background: #e0474f; }
.cl-seg.est-pied, .cl-pastille.est-pied { background: #4d7ee8; }
.cl-seg.est-sortie, .cl-pastille.est-sortie { background: #7b86a8; }
.cl-seg.est-autre, .cl-pastille.est-autre { background: #3c4566; }
.cl-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--texte-3); }
.cl-legende span { display: inline-flex; align-items: center; gap: 6px; }
.cl-pastille { width: 10px; height: 10px; border-radius: 3px; }

/* Essais */
.cl-essais { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.cl-essais-total { padding: 20px; border-radius: 20px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, rgba(47, 191, 113, .22), transparent 70%), var(--surface); border: 1px solid var(--ligne); }
.cl-essais-total b { display: block; font: 600 66px/1 var(--titre); font-variant-numeric: tabular-nums; }
.cl-essais-total span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.cl-essais-total em { display: inline-block; margin-top: 10px; font-style: normal; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(224, 49, 58, .16); color: #ff8a90; }
.cl-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cl-mini { padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); }
.cl-mini-titre { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--texte-3); }
.cl-mini-ligne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 26px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.cl-mini-ligne span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte-2); }
.cl-mini-ligne b { text-align: right; font-variant-numeric: tabular-nums; }
.cl-mini-barre { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.cl-mini-barre i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2f8f5a, #4fe08f); transform-origin: 0 50%; transform: scaleX(0); transition: transform .8s var(--doux) calc(var(--k) * 60ms); }
.cl-rapport.est-anime .cl-mini-barre i { transform: none; }

/* Télémétrie */
.cl-blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cl-bloc { padding: 8px 16px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--ligne); }
.cl-bloc-titre { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; font: 600 17px var(--titre); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ligne); }
.cl-bloc-titre svg { width: 18px; height: 18px; color: var(--an-accent); }
.cl-ind { display: grid; grid-template-columns: minmax(0, 1fr) 66px 78px 92px 46px; gap: 10px; align-items: center; padding: 8px 6px; margin: 0 -6px; border-radius: 10px; cursor: pointer; transition: background .2s; }
.cl-ind + .cl-deplie + .cl-ind, .cl-ind:not(:first-of-type) { border-top: 1px solid var(--ligne); }
.cl-ind:hover, .cl-ind.est-ouvert { background: var(--surface-2); }
.cl-ind-nom { font-size: 13px; font-weight: 650; line-height: 1.25; }
.cl-ind-val { text-align: right; font: 600 17px var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-ind-val small { margin-left: 3px; font: 700 10px var(--corps); color: var(--texte-3); }
.cl-ind-moy { font-size: 11.5px; color: var(--texte-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-jauge { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(224, 49, 58, .35), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .06) 60%, rgba(54, 210, 122, .35)); }
.cl-jauge-zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .5); border-radius: 2px; }
.cl-jauge-pt { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #050a1c; transition: left .9s var(--ressort); }
.cl-rapport.est-anime .cl-jauge-pt { left: var(--p); }
.cl-jauge-pt.est-plus { background: var(--vert); box-shadow: 0 0 10px rgba(54, 210, 122, .8); }
.cl-jauge-pt.est-moins { background: #ff5a63; box-shadow: 0 0 10px rgba(255, 90, 99, .8); }
.cl-ind .cl-rang { justify-self: end; }
.cl-deplie:empty { display: none; }

/* Le championnat sur un indicateur */
.cl-champ { padding: 8px 4px 6px; opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity .3s, transform .4s var(--doux); }
.cl-champ.est-vu { opacity: 1; transform: none; }
.cl-champ-axe { position: relative; height: calc(30px + var(--etages) * 26px); margin: 4px 0 2px; }
.cl-champ-axe::before { content: ""; position: absolute; left: 3%; right: 3%; bottom: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .3)); }
.cl-champ-moy { position: absolute; bottom: 4px; top: 0; width: 0; border-left: 1px dashed rgba(255, 255, 255, .45); }
.cl-champ-moy b { position: absolute; top: 0; left: 4px; font-size: 10px; font-weight: 800; color: var(--texte-3); white-space: nowrap; }
.cl-champ-club { position: absolute; bottom: calc(14px + var(--e) * 26px); width: 24px; height: 24px; margin-left: -12px; transition: transform .2s var(--ressort); }
.cl-champ-club:hover { transform: scale(1.35); z-index: 3; }
.cl-champ-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fff; padding: 2px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .8); }
.cl-champ-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-champ-club.est-moi .cl-champ-logo { box-shadow: 0 0 0 2px var(--an-accent), 0 0 16px var(--an-accent); }
.cl-champ-leg { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--texte-3); }

/* ---------------- Téléphone et tablette ---------------- */
@media (max-width: 1180px) {
  .cl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-duo { grid-template-columns: 1fr; }
  .cl-blocs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .an-entete { grid-template-columns: 1fr; padding: 22px 18px 18px; border-radius: 20px; }
  .an-entete-fond { right: -10px; top: 18px; transform: none; }
  .an-entete-fond img { width: 96px; }
  .an-entete-choix { align-items: flex-start; }
  .an-choix-coupe { flex-direction: column; align-items: flex-start; gap: 6px; }
  .an-choix-coupe .segments { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .an-choix-coupe .segments button { padding-left: 10px; padding-right: 10px; }
  .an-onglets { margin-left: -16px; margin-right: -16px; padding-left: 10px; padding-right: 10px; }
  .an-onglets-groupe { display: none; }
  .cl-heros { grid-template-columns: auto minmax(0, 1fr); padding: 18px 16px; gap: 6px 14px; border-radius: 20px; }
  .cl-heros-logo { grid-row: auto; }
  .cl-heros-img { width: 64px; border-radius: 18px; padding: 8px; }
  .cl-heros h2 { font-size: 24px; }
  .cl-heros p { font-size: 13px; }
  .cl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-stat { padding: 11px 12px; }
  .cl-stat b { font-size: 26px; }
  .cl-rg { padding: 12px 10px 6px; }
  .cl-rg-axe, .cl-rg-ligne { grid-template-columns: 1fr; gap: 0; }
  .cl-rg-axe > span { display: none; }
  .cl-rg-fam { padding-top: 8px; }
  .cl-rg-axe b.cl-rg-seuil { display: none; }
  .cl-cartes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cl-carte { padding: 12px; }
  .cl-carte-val { font-size: 24px; }
  .cl-lancements { padding: 4px 12px 12px; }
  .cl-lanc-tete { display: none; }
  .cl-lanc { grid-template-columns: minmax(0, 1fr) 40px 58px 58px; gap: 4px 8px; }
  .cl-lanc-barre { grid-column: 1 / -1; }
  .cl-essais { grid-template-columns: 1fr; }
  .cl-essais-total { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 14px; }
  .cl-essais-total b { display: inline; font-size: 48px; }
  .cl-minis { grid-template-columns: 1fr; }
  .cl-bloc { padding: 6px 10px 8px; }
  .cl-ind { grid-template-columns: minmax(0, 1fr) 58px 40px; gap: 4px 8px; }
  .cl-ind-moy { grid-column: 1; grid-row: 2; }
  .cl-jauge { grid-column: 2 / 4; grid-row: 2; }
  .cl-ind .cl-rang { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .an-entete-fond img, .cl-heros-img { animation: none; }
  .cl-lanc-barre, .cl-mini-barre i, .cl-rg-pt, .cl-jauge-pt { transition: none; }
}
html.allege .an-entete-fond img { animation: none; }