/* ============================================================
   POSTES DANS LE MONDE · STATS AIA (js/pages/monde-stats.js)
   ============================================================
   Les cinq joueurs comparés gardent chacun leur couleur (--c) partout :
   classement, dock, cartes, tableau, radar, courbes et barres. */

.sa { --or: #f5c451; }
.sa-sur { font-size: 10.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--texte-3); }
.sa-attente { display: grid; place-items: center; gap: 8px; min-height: 40vh; color: var(--texte-3); }

/* ---------------- Le bandeau ---------------- */
.sa-heros {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px;
  margin: 8px 0 18px; padding: clamp(22px, 3.4vw, 40px); border-radius: 28px; border: 1px solid var(--ligne-2);
  background: linear-gradient(160deg, #0c1a46, #050b22 70%); box-shadow: 0 40px 100px -60px rgba(47, 107, 255, .8);
}
.sa-heros::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: repeating-linear-gradient(90deg, rgba(143, 179, 255, .05) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(143, 179, 255, .05) 0 1px, transparent 1px 64px); }
.sa-heros-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sa-heros-fond i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; animation: sa-derive 20s ease-in-out infinite alternate; }
.sa-heros-fond i:nth-child(1) { left: -12%; top: -60%; background: radial-gradient(circle, rgba(74, 131, 255, .32), transparent 62%); }
.sa-heros-fond i:nth-child(2) { right: 10%; top: -70%; background: radial-gradient(circle, rgba(245, 196, 81, .18), transparent 62%); animation-duration: 26s; }
.sa-heros-fond i:nth-child(3) { right: -14%; bottom: -70%; background: radial-gradient(circle, rgba(54, 210, 122, .16), transparent 62%); animation-direction: alternate-reverse; }
@keyframes sa-derive { to { transform: translate3d(10%, 10%, 0) scale(1.1); } }
.sa-heros-t { max-width: 640px; }
.sa-heros h1 { margin: 6px 0 8px; font: 600 clamp(42px, 5.6vw, 76px)/.9 var(--titre); text-transform: uppercase; }
.sa-heros h1 em { font-style: normal; background: linear-gradient(90deg, #ffe29a, #f5c451 40%, #ff9a5a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sa-heros p { margin: 0; color: var(--texte-2); font-size: 14px; line-height: 1.55; }
.sa-heros-chiffres { display: grid; grid-template-columns: repeat(4, auto); gap: 1px; overflow: hidden; border-radius: 18px; border: 1px solid var(--ligne-2); background: var(--ligne-2); }
.sa-heros-chiffres > div { padding: 12px 18px; background: rgba(5, 12, 34, .82); text-align: center; }
.sa-heros-chiffres b { display: block; font: 600 30px/1 var(--titre); }
.sa-heros-chiffres span { display: block; margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }

/* ---------------- Les filtres ---------------- */
.sa-filtres { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px 18px; border-radius: 22px; border: 1px solid var(--ligne); background: var(--surface); }
.sa-f-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sa-f-lib { width: 92px; flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.sa-comps, .sa-saisons, .sa-postes { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-comp, .sa-saison, .sa-poste {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 750; color: var(--texte-2);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--ligne); transition: color .2s, background .2s, border-color .2s, transform .25s var(--ressort);
}
.sa-comp:hover, .sa-saison:hover, .sa-poste:hover { color: #fff; transform: translate3d(0, -1px, 0); }
.sa-comp { padding: 4px 12px 4px 4px; }
.sa-comp img { width: 26px; height: 26px; padding: 3px; border-radius: 50%; object-fit: contain; background: #fff; }
.sa-comp:not(.est-actif) img { filter: grayscale(1); opacity: .55; }
.sa-comp.est-actif, .sa-poste.est-actif { color: #fff; background: rgba(47, 107, 255, .2); border-color: rgba(143, 179, 255, .55); }
.sa-saison.est-actif { color: #ffe3a3; background: rgba(245, 196, 81, .14); border-color: rgba(245, 196, 81, .5); }
.sa-poste b { font: 600 11px var(--titre); padding: 1px 6px; border-radius: 6px; color: #0b3d1e; background: rgba(255, 255, 255, .85); }
.sa-f-ligne.est-reglages { gap: 12px 18px; padding-top: 10px; border-top: 1px solid var(--ligne); }
.sa-min { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--texte-2); }
.sa-min input { width: 140px; accent-color: var(--bleu); }
.sa-min b { min-width: 22px; font: 600 16px var(--titre); color: #fff; }
.sa-cherche input { width: 200px; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--texte); background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne); }
.sa-cherche input:focus { outline: none; border-color: rgba(143, 179, 255, .55); }

/* ---------------- Classement et dock ---------------- */
.sa-corps { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.sa-classement { min-width: 0; }
.sa-cl-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.sa-cl-tete h2 { margin: 4px 0 0; font: 600 34px/1 var(--titre); text-transform: uppercase; }
.sa-cl-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-cl-choix select { min-width: 230px; }
.sa-sens { padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 750; color: var(--texte-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne); }
.sa-sens:hover { color: #fff; border-color: rgba(143, 179, 255, .45); }

.sa-av { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, rgba(74, 131, 255, .35), rgba(5, 12, 34, .9)); font: 600 13px var(--titre); color: rgba(255, 255, 255, .8); }
/* La photo couvre les initiales (elles restent si la photo ne se charge pas). */
.sa-av img, .sa-pod-av img, .sa-carte-av img { z-index: 1; background: #0e1d44; }
.sa-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.sa-av i { font-style: normal; }
.sa-palier { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px;
  color: var(--texte-2); background: rgba(255, 255, 255, .08); }
.sa-palier.est-or { color: #0b1d48; background: var(--or); }
.sa-palier.est-bleu { color: #fff; background: var(--bleu); }
.sa-palier.est-vert { color: #06301a; background: #6ff0a6; }

/* Le podium de la statistique classée. */
.sa-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 0 0 14px; }
.sa-pod {
  --t: #8fb3ff; position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 12px 14px; border-radius: 22px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 18%, transparent), rgba(6, 14, 38, .92) 55%); border: 1px solid color-mix(in srgb, var(--t) 35%, transparent);
}
.sa-pod.est-1 { --t: #f5c451; order: 2; padding-top: 28px; box-shadow: 0 30px 60px -34px rgba(245, 196, 81, .7); }
.sa-pod.est-2 { --t: #d6e0f0; order: 1; }
.sa-pod.est-3 { --t: #e6985c; order: 3; }
.sa-pod-r { position: absolute; left: 12px; top: 10px; font: 600 26px var(--titre); color: var(--t); }
.sa-pod-av { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 3px solid var(--t);
  background: linear-gradient(160deg, rgba(74, 131, 255, .35), rgba(5, 12, 34, .9)); font: 600 22px var(--titre); box-shadow: 0 14px 30px -14px var(--t); }
.sa-pod.est-1 .sa-pod-av { width: 92px; height: 92px; }
.sa-pod-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.sa-pod-av i { font-style: normal; }
.sa-pod > b { max-width: 100%; margin-top: 6px; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-pod > small { max-width: 100%; font-size: 11.5px; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-pod strong { margin: 4px 0 6px; font: 600 34px/1 var(--titre); color: var(--t); text-shadow: 0 0 24px color-mix(in srgb, var(--t) 50%, transparent); }
.sa-pod .sa-plus { width: auto; height: auto; padding: 6px 12px; font-size: 12px; }

.sa-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sa-ligne {
  display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) 64px 84px 128px 36px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .03); border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.sa-ligne:hover { background: rgba(47, 107, 255, .1); }
.sa-ligne.est-choisi { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sa-rang { font: 600 17px var(--titre); color: var(--texte-3); text-align: center; }
.sa-qui { min-width: 0; }
.sa-qui > b { font-size: 14px; font-weight: 800; }
.sa-qui > b[data-joueur] { cursor: pointer; }
.sa-qui > b[data-joueur]:hover { color: #8fb3ff; }
.sa-qui small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-m { display: grid; font-size: 11px; text-align: right; color: var(--texte-3); }
.sa-spark { width: 84px; height: 26px; overflow: visible; }
.sa-spark polyline { fill: none; stroke: #8fb3ff; stroke-width: 1.8; stroke-linejoin: round; }
.sa-spark circle { fill: var(--or); }
.sa-val { display: grid; gap: 4px; justify-items: end; }
.sa-val b { font: 600 19px/1 var(--titre); }
.sa-val i { width: 100%; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .08) calc(100% - var(--p) * 100%), #4a83ff calc(100% - var(--p) * 100%), #36d27a); }
.sa-plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 18px var(--titre); color: #fff; background: rgba(47, 107, 255, .18);
  border: 1px solid rgba(143, 179, 255, .4); transition: transform .25s var(--ressort), background .2s; }
.sa-plus:hover { transform: scale(1.1); background: var(--bleu); }
.sa-plus.est-actif { background: var(--c, #36d27a); border-color: transparent; color: #061226; }
.sa-plus:disabled { opacity: .3; pointer-events: none; }
.sa-voir { display: block; margin: 12px auto 0; padding: 10px 20px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #fff; background: rgba(47, 107, 255, .2); border: 1px solid rgba(143, 179, 255, .4); }
.sa-voir small { margin-left: 6px; font-weight: 600; color: var(--texte-3); }

.sa-dock { position: sticky; top: calc(var(--barre-h, 64px) + 14px); }
.sa-dock-in { padding: 16px; border-radius: 22px; border: 1px solid var(--ligne-2); background: linear-gradient(170deg, rgba(14, 28, 70, .9), rgba(5, 11, 30, .95)); box-shadow: var(--ombre); }
.sa-dock h3 { margin: 4px 0 12px; font: 600 22px var(--titre); text-transform: uppercase; }
.sa-cases { display: grid; gap: 8px; }
.sa-case { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 34px 6px 6px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sa-case::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--c); }
.sa-case b { min-width: 0; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-case button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--texte-2); background: rgba(255, 255, 255, .08); }
.sa-case button:hover { color: #fff; background: var(--rouge); }
.sa-case.est-vide { justify-content: flex-start; gap: 10px; padding: 6px 10px; border-style: dashed; background: transparent; }
.sa-case.est-vide span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 14px var(--titre); color: var(--c); border: 1px dashed var(--c); }
.sa-case.est-vide small { font-size: 11.5px; color: var(--texte-3); }
.sa-comparer { width: 100%; margin-top: 12px; padding: 11px; border-radius: 999px; font-weight: 800; color: #061226; background: linear-gradient(90deg, #f5c451, #ffe29a); box-shadow: 0 14px 30px -14px rgba(245, 196, 81, .8); }

/* ---------------- Le comparatif ---------------- */
.sa-comparatif:not(:empty) { margin: 30px 0 10px; padding: clamp(18px, 3vw, 32px); border-radius: 28px; border: 1px solid var(--ligne-2);
  background: radial-gradient(70% 60% at 50% 0%, rgba(245, 196, 81, .1), transparent 70%), linear-gradient(170deg, #0b1740, #050b22 70%); scroll-margin-top: 80px; }
.sa-cp-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 18px; }
.sa-cp-tete h2 { margin: 4px 0 6px; font: 600 clamp(34px, 4vw, 52px)/1 var(--titre); text-transform: uppercase; }
.sa-cp-tete p { margin: 0; max-width: 720px; font-size: 13px; color: var(--texte-2); }

.sa-cartes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.sa-carte { position: relative; display: grid; justify-items: center; gap: 4px; padding: 20px 12px 14px; border-radius: 22px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(6, 14, 38, .92) 60%); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.sa-carte::before { content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); box-shadow: 0 0 16px var(--c); }
.sa-carte-x { position: absolute; z-index: 2; right: 10px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--texte-2); background: rgba(255, 255, 255, .08); }
.sa-carte-x:hover { color: #fff; background: var(--rouge); }
.sa-carte-av { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c);
  background: linear-gradient(160deg, rgba(74, 131, 255, .35), rgba(5, 12, 34, .9)); font: 600 24px var(--titre); box-shadow: 0 16px 34px -14px var(--c); }
.sa-carte-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.sa-carte-av i { font-style: normal; }
.sa-carte > b { max-width: 100%; margin-top: 6px; font: 600 18px/1.1 var(--titre); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-carte > b[data-joueur] { cursor: pointer; }
.sa-carte > small { max-width: 100%; font-size: 11.5px; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-carte-ch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ligne); }
.sa-carte-ch span { display: grid; font-size: 9.5px; font-weight: 700; color: var(--texte-3); }
.sa-carte-ch b { font: 600 16px var(--titre); color: #fff; }

/* Le tableau. */
.sa-tab-defile { overflow-x: auto; border-radius: 18px; border: 1px solid var(--ligne); }
.sa-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sa-tab thead th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: #081230; border-bottom: 2px solid var(--c, var(--ligne)); }
.sa-tab-j { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sa-tab-j .sa-av { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.sa-tab tbody th { padding: 8px 14px; text-align: left; font-size: 13px; font-weight: 650; color: var(--texte-2); white-space: nowrap; }
.sa-tab-fam th { padding: 14px 14px 6px !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .2em; text-transform: uppercase; color: var(--or) !important; }
.sa-tab td { padding: 8px 12px; text-align: center; border-top: 1px solid var(--ligne); }
.sa-tab td b { display: block; font: 600 17px var(--titre); }
.sa-tab td.est-meilleur { background: color-mix(in srgb, var(--c) 16%, transparent); }
.sa-tab td.est-meilleur b { color: var(--c); text-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); }
.sa-tab td.est-meilleur b::after { content: " ★"; font-size: 11px; }
.sa-ct { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.sa-ct i { width: 44px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--c) calc(var(--p) * 100%), rgba(255, 255, 255, .1) calc(var(--p) * 100%)); }
.sa-ct em { min-width: 18px; font-size: 10.5px; font-style: normal; font-weight: 800; color: var(--texte-3); }
.sa-note { margin: 10px 4px 0; font-size: 12px; color: var(--texte-3); }

/* Les graphiques. */
.sa-gr-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sa-gr { margin: 0; padding: 16px; border-radius: 22px; border: 1px solid var(--ligne); background: rgba(4, 9, 26, .5); }
.sa-gr.est-large { margin-top: 16px; }
.sa-gr figcaption { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.sa-gr h3 { margin: 4px 0 0; font: 600 22px var(--titre); text-transform: uppercase; }
.sa-profils { display: flex; flex-wrap: wrap; gap: 5px; }
.sa-profil { padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; color: var(--texte-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne); }
.sa-profil.est-actif { color: #061226; background: var(--or); border-color: transparent; }
.sa-radar { display: block; width: 100%; height: auto; overflow: visible; }
.sa-r-g { fill: none; stroke: rgba(255, 255, 255, .1); }
.sa-r-g.est-mi { stroke: rgba(245, 196, 81, .3); stroke-dasharray: 4 4; }
.sa-r-lib { font-size: 11px; font-weight: 700; fill: var(--texte-2); }
.sa-r-p { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; transform-origin: 170px 170px;
  animation: sa-r-entre .9s var(--ressort) both; animation-delay: calc(var(--k) * .12s); }
@keyframes sa-r-entre { from { transform: scale(0); opacity: 0; } }
.sa-r-pt { fill: var(--c); stroke: #050b22; stroke-width: 1.5; }
.sa-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--texte-2); }
.sa-leg span { display: inline-flex; align-items: center; gap: 7px; }
.sa-leg i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.sa-evo { display: block; width: 100%; height: auto; overflow: visible; }
.sa-e-g { stroke: rgba(255, 255, 255, .07); }
.sa-e-t { font-size: 11px; fill: var(--texte-3); }
.sa-e-l { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--c) 50%, transparent));
  stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: sa-trace 1.4s var(--doux) forwards; animation-delay: calc(var(--k) * .12s); }
@keyframes sa-trace { to { stroke-dashoffset: 0; } }
.sa-e-pt { fill: #050b22; stroke: var(--c); stroke-width: 2.6; }
.sa-barres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px 22px; }
.sa-barre-g { display: grid; gap: 5px; }
.sa-barre-lib { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); }
.sa-barre-l { display: grid; gap: 4px; }
.sa-barre { display: grid; grid-template-columns: minmax(0, 1fr) 62px; align-items: center; gap: 8px; }
.sa-barre i { height: 10px; border-radius: 5px; background: var(--c); width: calc(var(--p) * 100%); min-width: 3px; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
  transform-origin: left; animation: sa-barre 1s var(--doux) both; animation-delay: calc(var(--k) * .07s); }
@keyframes sa-barre { from { transform: scaleX(0); } }
.sa-barre b { font: 600 14px var(--titre); text-align: right; }

@media (max-width: 1180px) {
  .sa-corps { grid-template-columns: minmax(0, 1fr); }
  .sa-dock { position: static; }
  .sa-cases { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .sa-ligne { grid-template-columns: 30px 40px minmax(0, 1fr) 58px 84px 110px 34px; gap: 10px; }
}
@media (max-width: 900px) {
  .sa-gr-grille { grid-template-columns: minmax(0, 1fr); }
  .sa-cartes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sa-heros-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 640px) {
  .sa-f-lib { width: 100%; }
  .sa-ligne { grid-template-columns: 26px 38px minmax(0, 1fr) 92px 34px; }
  .sa-m, .sa-spark { display: none; }
  .sa-podium { grid-template-columns: minmax(0, 1fr); }
  .sa-pod { order: 0 !important; }
  .sa-cherche input, .sa-min input { width: 100%; }
}