/* ==========================================================================
   CLASSEMENT — refonte du 17/09/2026 (rejet du tableau par Mathias).
   Ce fichier NE TOUCHE PAS à style.css (un autre designer y travaille) : il se
   charge après lui (functions.php charge css-parts/*.css en dernier) et ne
   fait QUE des classes préfixées .mca- propres au classement + quelques
   surcharges ciblées de règles déjà posées par style.css pour LA SEULE zone
   du classement (jamais le header, le pied, les autres gabarits).

   Sommaire :
     1. Jetons locaux (médailles) — dérivés de la palette DA, aucune couleur neuve
     2. La CARTE-LIGNE : rang pixel + médaille, identité, jetons de mode colorés,
        badge de version, état en direct, micro-courbe, jauge de remplissage
     3. Le PODIUM « socle de blocs » + la mascotte qui pointe le vainqueur
     4. La barre de filtres — un peu plus vivante (CSS seul, structure gardée)
     5. Mobile 390px
   ========================================================================== */

/* ---------- 1. JETONS LOCAUX -------------------------------------------- */
:root{
  /* Argent et bronze ne sont pas dans la DA (qui ne prévoit que l'or) : on les
     DÉRIVE des teintes déjà en place plutôt que d'inventer une couleur — l'argent
     est un blanc-diamant, le bronze un mélange lave/or. Zéro teinte étrangère. */
  --argent: color-mix(in srgb, #ffffff 60%, var(--diamant) 40%);
  --bronze: color-mix(in srgb, var(--lave) 62%, var(--or) 38%);
}

/* ---------- 2. LA CARTE-LIGNE -------------------------------------------- */

/* Le rang en gros chiffre pixel (Silkscreen), pas en mono */
.mca-rang-nb--pixel{
  font-family:var(--affiche);font-weight:400;font-size:22px;line-height:1;
  color:var(--texte);font-variant-numeric:tabular-nums;
}
.mca-rang-bloc--or .mca-rang-nb--pixel{color:var(--or);text-shadow:0 0 14px color-mix(in srgb,var(--or) 55%,transparent)}
.mca-rang-bloc--argent .mca-rang-nb--pixel{color:var(--argent);text-shadow:0 0 12px color-mix(in srgb,var(--argent) 50%,transparent)}
.mca-rang-bloc--bronze .mca-rang-nb--pixel{color:var(--bronze);text-shadow:0 0 12px color-mix(in srgb,var(--bronze) 50%,transparent)}

/* La carte entière porte un très léger liseré de sa couleur de médaille */
.mca-carte-serveur--or{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or) 45%,var(--trait))}
.mca-carte-serveur--argent{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--argent) 40%,var(--trait))}
.mca-carte-serveur--bronze{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bronze) 40%,var(--trait))}

/* Identité : nom + adresse copiable groupés (DA §5/§9 : l'adresse vit avec le nom) */
.mca-carte-identite{margin-top:.35rem;display:flex;flex-wrap:wrap;gap:.5rem}
.mca-carte-identite .mca-puce-adresse{max-width:220px}

/* Jetons de mode : teinte STABLE dérivée du slug (hash md5 côté PHP, posé en --teinte-mode).
   Sans variable (repli), on retombe sur le violet de marque — jamais un jeton nu. */
.mca-mode-pill{
  background:hsl(var(--teinte-mode,262) 52% 24%);
  color:hsl(var(--teinte-mode,262) 78% 84%);
  border-color:hsl(var(--teinte-mode,262) 55% 55% / .4);
}
.mca-mode-pill--reste{background:var(--ardoise-haute);color:var(--texte-bas);border-color:var(--trait)}

/* Badge de version — JetBrains Mono, accent diamant (DA §3 : le diamant sert aux
   données techniques) */
.mca-badge-version{
  display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);
  font-size:11.5px;font-weight:700;color:var(--diamant);
  background:color-mix(in srgb,var(--diamant) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--diamant) 38%,transparent);
  border-radius:999px;padding:.32rem .6rem;white-space:nowrap;
}
.mca-badge-version--vide{color:var(--texte-bas);background:transparent;border-color:var(--trait)}
.mca-badge-version--podium{font-size:10.5px;padding:.26rem .5rem}

/* État en direct : pastille + « vu il y a X ». Rouge ÉTEINT (pas grisé) hors ligne,
   conformément à la DA (--redstone = « hors ligne, erreur »). */
.mca-carte-etat{
  display:flex;align-items:center;gap:.35rem;margin-top:.4rem;
  font-size:11px;color:var(--texte-bas);white-space:nowrap;
}
.mca-carte-etat .mca-pastille{width:7px;height:7px}
.mca-carte-etat-vu{opacity:.85}
.mca-carte-etat .mca-pastille.est-hors-ligne,
.mca-podium-sous .mca-pastille.est-hors-ligne{background:var(--redstone);opacity:1}

/* Micro-courbe : rendu net façon voxel (le tracé de mca_sparkline() est déjà fait de
   segments droits ; on l'épaissit et on retire l'anticrénelage pour l'effet blocky,
   sur une trame quadrillée discrète en fond). */
.mca-carte-spark{
  position:relative;display:inline-block;padding:2px;border-radius:4px;
  background-image:
    linear-gradient(90deg,color-mix(in srgb,var(--diamant) 8%,transparent) 1px,transparent 1px),
    linear-gradient(0deg,color-mix(in srgb,var(--diamant) 8%,transparent) 1px,transparent 1px);
  background-size:6px 6px;
}
.mca-carte-spark svg{shape-rendering:crispEdges}
.mca-carte-spark svg path{stroke-width:2.1px;stroke-linecap:square;stroke-linejoin:miter}

/* La jauge de remplissage joueurs/max — colorée selon le taux, animée à l'apparition
   en réutilisant l'observateur générique .mca-reveal déjà posé par app.js (aucune
   ligne de JS ajoutée). On n'anime que `transform` (règle DA §6, jamais `width`). */
.mca-carte-mesure{display:flex;flex-direction:column;gap:.35rem;min-width:96px}
.mca-jauge{display:block;flex:1 1 auto;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease}
.mca-jauge.est-visible{opacity:1;transform:none}
.mca-jauge-piste{
  display:block;height:6px;border-radius:999px;background:var(--nuit);
  border:1px solid var(--trait);overflow:hidden;
}
.mca-jauge-barre{
  display:block;height:100%;width:100%;border-radius:999px;
  transform-origin:left center;transform:scaleX(0);
  transition:transform .85s cubic-bezier(.16,1,.3,1) .05s;
  background:var(--herbe);
}
.mca-jauge.est-visible .mca-jauge-barre{transform:scaleX(var(--taux,0))}
.mca-jauge--or .mca-jauge-barre{background:var(--or)}
.mca-jauge--lave .mca-jauge-barre{background:var(--lave)}
.mca-jauge--eteinte .mca-jauge-barre{background:var(--texte-bas)}

/* Survol de la carte : elle se soulève, la bannière prend un liseré dégradé */
.mca-ligne:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px rgba(0,0,0,.55)}
.mca-ligne-banniere{isolation:isolate}
.mca-ligne-banniere img,.mca-ligne-banniere svg{transition:transform .32s ease}
.mca-ligne:hover .mca-ligne-banniere img,.mca-ligne:hover .mca-ligne-banniere svg{transform:scale(1.045)}
.mca-ligne:hover .mca-ligne-banniere::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:2;
  background:var(--degrade-marque);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---------- 3. LE PODIUM — SOCLE DE BLOCS -------------------------------- */
.mca-podium-socle{position:relative}
.mca-podium-carte--socle{position:relative;overflow:visible}
.mca-podium-carte--socle::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;
  border-radius:0 0 var(--rayon-s) var(--rayon-s);
  background:repeating-linear-gradient(90deg,var(--trait) 0 10px,var(--ardoise-haute) 10px 11px);
}
.mca-podium-carte--or::after{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--or) 55%,var(--trait)) 0 10px,var(--ardoise-haute) 10px 11px)}
.mca-podium-carte--argent::after{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--argent) 55%,var(--trait)) 0 10px,var(--ardoise-haute) 10px 11px)}
.mca-podium-carte--bronze::after{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--bronze) 55%,var(--trait)) 0 10px,var(--ardoise-haute) 10px 11px)}

.mca-podium-rang--or{color:var(--or)}
.mca-podium-rang--argent{color:var(--argent)}
.mca-podium-rang--bronze{color:var(--bronze)}
.mca-podium-rang--gris{color:var(--texte-bas)}

.mca-podium-sous{display:flex;align-items:center;gap:.35rem;font-size:11.5px;color:var(--texte-bas);margin-top:.3rem;flex-wrap:wrap}
.mca-podium-note{color:var(--or);font-weight:700;margin-left:.15rem}
.mca-podium-jauge-bloc{display:flex;flex-direction:column;gap:.45rem;margin-top:.5rem}
.mca-podium-jauge-bloc .mca-jauge{width:100%}

.mca-podium-carte:hover .mca-podium-banniere{box-shadow:0 0 0 2px var(--violet)}
.mca-podium-banniere img,.mca-podium-banniere svg{transition:transform .32s ease}
.mca-podium-carte:hover .mca-podium-banniere img,.mca-podium-carte:hover .mca-podium-banniere svg{transform:scale(1.04)}

/* La mascotte Pioche pointe le vainqueur — posée uniquement sur la carte de rang 1,
   qui est déjà `position:relative` (style.css) : pas de wrapper à ajouter. */
.mca-podium-mascotte{
  position:absolute;top:-56px;right:10%;z-index:3;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));
  animation:mca-podium-montre 3.6s ease-in-out infinite;
}
.mca-podium-mascotte svg{transform:rotate(-8deg)}
@keyframes mca-podium-montre{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}

/* ---------- 4. FILTRES — un peu plus vivants (structure inchangée) ------- */
.mca-filtre-pill{transition:border-color .14s ease,color .14s ease,background-color .14s ease,transform .14s ease}
.mca-filtre-pill:hover{transform:translateY(-1px)}
.mca-filtre-pill.est-actif{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--violet) 70%,transparent)}
.mca-filtres select{transition:border-color .14s ease}
.mca-filtres select:hover{border-color:var(--violet)}
.mca-filtres-resultats{color:var(--diamant)}

/* ---------- 5. MOBILE 390px ---------------------------------------------- */
@media (max-width:760px){
  /* La carte de mobile (DA §11) garde le badge de version et l'état en direct :
     ils sont réintroduits dans le flux (base : display:none au-delà de 760px). */
  .mca-ligne .mca-col-version,.mca-ligne .mca-col-spark{display:block;margin:.25rem 0}
  .mca-ligne .mca-col-spark{display:flex;flex-direction:column;gap:.3rem}
  .mca-carte-mesure{width:100%}
  .mca-ligne .mca-col-actions{flex-direction:column;align-items:stretch}
  .mca-ligne .mca-col-actions .mca-voter{width:100%;justify-content:center}
  .mca-carte-identite .mca-puce-adresse{max-width:none;flex:1 1 auto}
  .mca-podium-mascotte{right:auto;left:50%;transform:translateX(-50%);top:-48px}
  .mca-podium-mascotte svg{transform:rotate(0)}
  @keyframes mca-podium-montre{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
}

/* prefers-reduced-motion : couvert par la règle universelle déjà posée dans
   style.css (`*,*::before,*::after{animation-duration:.001ms!important;...}`),
   qui s'applique aussi à .mca-jauge-barre, .mca-podium-mascotte et aux survols
   de cette feuille — aucune règle supplémentaire n'est nécessaire ici. */

/* ---------- Correctif 17/09/2026 — badge de version tronqué ------------------
   `.mca-col-version{flex:0 0 72px}` (style.css §…) coupait « Velocity 1.7.2-1.21.10 »
   en « Velocity ». On rend la colonne élastique et on borne le texte proprement. */
.mca-ligne .mca-col-version{flex:0 1 auto;min-width:0;max-width:190px}
.mca-badge-version{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;
  white-space:nowrap;vertical-align:middle}