/* stats-page.css — bloc <style> migré depuis stats.html (audit Ultracode 2026-06-05).
   Rendu identique : règles relocalisées à la même position de cascade. */

html,body{overflow:visible;height:auto;min-height:100%}
.app{height:auto;min-height:100dvh;padding-bottom:60px;max-width:1180px}

/* ─── Sections collapsibles ───────────────────────────────────── */
/* Titre ouvert : aspect normal (juste un titre).
   Titre fermé : prend l'aspect d'un bouton néobrut, pour inviter au clic. */
.section-toggle {
  cursor: pointer;
  user-select: none;
}
.section-toggle.collapsed {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  padding: 10px 16px;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.section-toggle.collapsed:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
html.dlp-can-hover .section-toggle.collapsed:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
/* Section collapse smooth : grid-template-rows 1fr ↔ 0fr trick. Le wrapper
   .section-body utilise grid pour avoir UN row qu'on anime entre 0fr et 1fr.
   Le contenu effectif (html ajouté en JS) est wrappé dans .section-body-inner
   qui sert d'item grid avec min-height:0 + overflow:hidden pour pouvoir
   collapse à 0 sans débord visible. */
.section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms cubic-bezier(.4, 0, .2, 1);
}
.section-body[data-collapsed="true"] {
  grid-template-rows: 0fr;
}
.section-body-inner {
  min-height: 0;
  overflow: hidden;
}

/* ─── Banner overview : 3 blocs colorés (au lieu du fond noir hachuré) ── */
.coll-banner{
  margin-top:var(--space-4);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-3);
}
.coll-stat{
  position:relative;
  border:var(--border-thick);
  box-shadow:var(--sh-md);
  padding:var(--space-3);
  color:var(--ink);
}
.coll-stat[data-k="rencontres"] { background: var(--yellow); }
.coll-stat[data-k="obtenus"]    { background: #b8e8c4; }   /* vert pastel */
.coll-stat[data-k="precision"]  { background: #f4b6b6; }   /* rouge pastel */
/* Titre du bloc : style identique aux .section-title du jeu */
.coll-stat .label{
  font-family:var(--font-display);
  font-size:clamp(13px, 1.4vw, 18px);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.coll-stat .val{
  font-family:var(--font-display);font-size:clamp(36px,5vw,56px);line-height:1;
  margin-top:8px;
  color:var(--ink);
}
.coll-stat .val .small{font-size:.45em;opacity:.55;font-weight:normal}
.coll-stat .sub{
  font-family:var(--font-mono);font-size:10px;margin-top:8px;
  letter-spacing:.06em;text-transform:uppercase;opacity:.75;
}
.coll-stat .pbar{
  height:8px;background:rgba(10,10,10,0.12);
  border:1.5px solid var(--ink);margin-top:10px;
  position:relative;overflow:hidden
}
.coll-stat .pbar>div{height:100%;background:var(--ink);transition:width .4s ease}

/* ─── Bord cards (gauche/droite/facho) ──────────────────────── */
.bord-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-3)}
.bord-card{
  border:var(--border-thick);box-shadow:var(--sh-md);
  padding:var(--space-3);position:relative;overflow:hidden;
  color:var(--paper);
}
.bord-card[data-bord="gauche"]{background:#e63946}
.bord-card[data-bord="droite"]{background:#2a4dff}
.bord-card[data-bord="facho"]{background:#1a1a1a}
/* Titre aligné sur .coll-stat .label de la ligne au-dessus pour cohérence */
.bord-card .bord-name{
  font-family:var(--font-display);
  font-size:clamp(13px, 1.4vw, 18px);
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
.bord-card .bord-acc{font-family:var(--font-display);font-size:56px;line-height:1;margin-top:4px}
.bord-card .bord-acc .small{font-size:.45em;opacity:.6}
.bord-card .bord-sub{font-family:var(--font-mono);font-size:11px;opacity:.85;margin-top:4px;letter-spacing:.06em}
.bord-card .bord-bar{
  position:absolute;bottom:0;left:0;right:0;height:6px;
  background:rgba(255,255,255,0.15)
}
.bord-card .bord-bar>div{height:100%;background:var(--paper)}

/* ─── Diagnostic row ───────────────────────────────────────── */
.diag-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);
  margin-top:var(--space-3);
}
.diag-card{
  background:var(--paper);border:var(--border-thick);box-shadow:var(--sh-md);
  padding:var(--space-3);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
}
.diag-card .dlabel{
  font-family:var(--font-display);
  font-size:clamp(13px, 1.4vw, 18px);
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.diag-card .dlabel .acc{color:var(--red);font-family:var(--font-mono);font-size:.7em;letter-spacing:.06em;}
.diag-card .dval{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(22px, 2.4vw, 32px);
}
.diag-card .dsub{
  font-family:var(--font-mono);font-size:11px;opacity:.75;
  letter-spacing:.04em;line-height:1.4;
}
.diag-card.empty-state{justify-content:center;align-items:center;text-align:center;color:var(--ink);opacity:.45;gap:6px}
.diag-card.empty-state .dlabel{opacity:.55}
.diag-card.empty-state .dval{font-size:14px;letter-spacing:.04em}

.diag-nem{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center}
.diag-nem .photo{
  width:54px;height:72px;background-size:cover;background-position:top center;
  border:var(--border-thin);
}
.diag-nem .nname{font-family:var(--font-display);font-size:clamp(15px, 1.6vw, 19px);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em}
.diag-nem .ngrp{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;opacity:.7;margin-top:3px;text-transform:uppercase}

.diag-conf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.diag-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-display);font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;padding:6px 10px;
  border:2px solid var(--ink);line-height:1;
}
.diag-arrow{font-family:var(--font-display);font-size:18px;opacity:.7}

.diag-party{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.diag-party .pname{
  display:inline-block;font-family:var(--font-display);
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border:2px solid var(--ink);line-height:1;
}
.diag-party .ppct{font-family:var(--font-display);font-size:clamp(28px, 3.2vw, 42px);line-height:1}
.diag-party .ppct .small{font-size:.45em;opacity:.55}
.diag-card[data-k="best"] .diag-party .ppct{color:var(--green-2)}
.diag-card[data-k="worst"] .diag-party .ppct{color:var(--red)}
.diag-card .pstrip{
  position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--paper-2);
}
.diag-card .pstrip>div{height:100%}

/* ─── Toolbar ───────────────────────────────────────────────── */
.toolbar{
  display:flex;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;align-items:center;
  background:var(--paper);border:var(--border-thick);box-shadow:var(--sh-md);
  padding:var(--space-3);
}
.search-wrap{flex:1;min-width:200px;position:relative}
.search-input{
  width:100%;background:var(--paper-2);border:var(--border-thin);
  padding:10px 14px 10px 38px;
  font-family:var(--font-body);font-size:14px;color:var(--ink)
}
.search-input:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.search-wrap .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Mobile : pills sur 1 ligne défilable. */
@media (max-width: 860px){
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter-pill{flex-shrink:0;white-space:nowrap}
}
.filters .sort-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-right:2px}
.filter-pill{
  font-family:var(--font-display);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;background:var(--paper-2);border:var(--border-thin);
  padding:8px 13px;cursor:pointer;color:var(--ink);
  display:inline-flex;gap:6px;align-items:center;
  /* Bascule active/inactive smooth (avant : instantanée). Le pulse au clic
     est géré par pills-anim.js (.just-activated → keyframe pillActivateRing). */
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.filter-pill.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ─── Grid ──────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);margin-top:var(--space-4)}
/* Mobile : force 2 colonnes (sinon avec minmax 180px on tombe à 1 col en ≤390px) */
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.grid-sep{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;
  margin-top:var(--space-3);
  /* TOUT sur UNE ligne (décision user 2026-06-11) : min-width:0 casse le
     plancher min-content hérité de la grille parente, et chaque encart se
     compresse jusqu'à son mot le plus long (le texte wrappe À L'INTÉRIEUR de
     la pilule / du badge, jamais hors écran) ; le filet .rule s'écrase en
     dernier. Pas de flex-wrap : les éléments restent alignés. */
  min-width:0;
}
.grid-sep .pill{flex:0 1 auto;}
.grid-sep .count{flex:0 1 auto;}
.grid-sep .grp-acc{flex:0 1 auto;text-align:center;}
.grid-sep .rule{min-width:0;}
.grid-sep:first-child{margin-top:0}
.grid-sep .pill{
  font-family:var(--font-display);font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;padding:6px 12px;
  border:var(--border-thick);line-height:1;
}
.grid-sep .count{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;opacity:.55;text-transform:uppercase
}
.grid-sep .grp-acc{
  font-family:var(--font-display);font-size:13px;letter-spacing:.02em;
  text-transform:uppercase;padding:4px 9px;
  background:var(--paper);border:2px solid var(--ink);line-height:1;
}
.grid-sep .grp-acc-empty{opacity:.5;font-style:normal}
.grid-sep .rule{flex:1;border-bottom:var(--border-thick)}
.grid-sep{cursor:pointer;user-select:none;}
html.dlp-can-hover .grid-sep:hover{background:var(--paper-2);}
html.dlp-can-hover .grid-sep:hover .rule{border-bottom-color:var(--ink);}
html.dlp-can-hover .grid-sep--empty:hover{background:transparent}
/* Section vide (aucun représentant public après filtre) : visuel atténué pour distinguer
   d'une section pleine, mais on garde le bandeau pour stabilité visuelle. */
.grid-sep--empty{opacity:.55;cursor:default}
.grid-sep--empty .sep-arrow{opacity:.3}
.grid-sep .sep-arrow{
  font-family:var(--font-mono);font-size:14px;line-height:1;
  display:inline-block;width:14px;text-align:center;opacity:.65;
}
.grid-sep.collapsed{opacity:.7}
.grid-sep .pill-role{
  background:var(--ink);color:var(--paper);
}
/* Mobile : éléments du header compressés (moins de wrap nécessaire). */
@media(max-width:760px){
  .grid-sep{gap:8px;}
  .grid-sep .pill{font-size:11.5px;padding:5px 9px;}
  .grid-sep .grp-acc{font-size:10.5px;padding:3px 7px;}
  .grid-sep .count{font-size:9.5px;letter-spacing:.04em;}
}
/* Très petits écrans (≤360px) : le mot « indépendantistes » (16 lettres,
   insécable) fixait un plancher de ~331px de min-content cumulé > 288px
   utiles à 320px → le badge précision sortait de l'écran. Compression
   supplémentaire + césure française automatique sur la pilule en dernier
   recours (hyphens suit les règles de césure, <html lang="fr">). */
@media(max-width:360px){
  .grid-sep{gap:6px;}
  .grid-sep .pill{font-size:10px;padding:4px 7px;hyphens:auto;overflow-wrap:break-word;min-width:0;}
  .grid-sep .grp-acc{font-size:9.5px;padding:3px 6px;}
  .grid-sep .count{font-size:8.5px;}
}
.dcard.sec-collapsed{display:none}
.dcard{
  background:var(--paper);border:var(--border-thick);box-shadow:var(--sh-md);
  padding:8px 8px 10px;position:relative;overflow:hidden;
  transition:transform var(--dur-fast),box-shadow var(--dur-fast);
  cursor:pointer;
  display:flex;flex-direction:column
}
/* Hover sweep : la carte se SOULÈVE avec scale + tilt alterné +/-2deg.
   transition cubic-bezier overshoot (.34, 1.4) pour un sweep "punch".
   Tilt alterné via :nth-child(2n of .dcard) pour variation visuelle entre
   cartes adjacentes. z-index: 5 pour passer au-dessus des cartes voisines.*/
.dcard {
  transition: transform 240ms cubic-bezier(.34, 1.4, .64, 1),
              box-shadow 240ms cubic-bezier(.34, 1.4, .64, 1);
}
html.dlp-can-hover .dcard:hover {
  transform: translate(-4px, -8px) scale(1.06) rotate(2deg);
  box-shadow: var(--sh-lg);
  z-index: 5;
}
html.dlp-can-hover .dcard:nth-child(2n of .dcard):hover {
  transform: translate(-4px, -8px) scale(1.06) rotate(-2deg);
}
.dcard.locked{filter:grayscale(1) brightness(0.7)}
.dcard.review{filter:grayscale(0.85) brightness(0.92);opacity:.85}
/* Wrapper photo-block : porte les dimensions, contient .photo + .grp-strip
   en positionnement absolu. Permet d'avoir grp-strip OUTSIDE du clip-path. */
.dcard .photo-block{
  width:100%;aspect-ratio:2/3;position:relative
}
.dcard .photo{
  position:absolute;inset:0;
  background:var(--paper-2) center/cover;
  border:var(--border-thin);
  /* Inner glow clair : aligné sur la carte de jeu (photo-wrap). */
  box-shadow: inset 0 0 60px 12px rgba(255,255,255,0.58);
}
/* Effets photo combo collection : overlay couleur chaude + scan lines
   espacées (6 px de période, vs 4 px en jeu) à opacité réduite (0.045 vs
   0.10 en jeu). Pas de stippling — trop bruyant sur les vignettes. */
.dcard .photo::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 5px, rgba(0,0,0,0.045) 5px 6px),
    linear-gradient(rgba(245,195,110,0.24), rgba(245,195,110,0.24));
  background-size: 100% 6px, 100% 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Cartes shiny / holo : pas de scan lines (l'iridescence doit ressortir
   sans striure). Seul l'overlay tint warm reste. */
.dcard.shiny .photo::before,
.dcard.holo  .photo::before{
  background-image: linear-gradient(rgba(245,195,110,0.24), rgba(245,195,110,0.24));
  background-size: 100% 100%;
}
.dcard .photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,0.65) 100%);
  pointer-events:none
}
.dcard.locked .photo{background:repeating-linear-gradient(45deg,var(--paper-2) 0 8px, #ddd 8px 10px)}
/* grp-strip : enfant du photo-block (PAS de .photo) → non clippé par la
   forme du masque. z-index élevé pour passer au-dessus du stroke SVG. */
.dcard .photo-block .grp-strip{
  position:absolute;bottom:6px;left:6px;right:6px;z-index:5;
  font-family:var(--font-display);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 6px;
  border:2px solid var(--ink);
  text-align:center;line-height:1
}
.dcard .name{
  font-family:var(--font-display);font-size:13px;line-height:1.1;
  text-transform:uppercase;margin-top:8px;
}
.dcard .meta{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;
  opacity:.7;
  /* Ancrage en bas via flex auto-margin : .meta colle au bas de la carte
     même quand .name s'étend sur 2 lignes (cartes étirées par la grid). Le
     padding-top assure l'espacement minimal (4 px) quand la carte est à
     hauteur naturelle, sans excédent de hauteur à absorber. */
  margin-top:auto;padding-top:4px
}
.dcard .badge{
  position:absolute;top:6px;right:6px;z-index:2;
  font-family:var(--font-display);font-size:10px;letter-spacing:.06em;
  padding:3px 7px;text-transform:uppercase;
  border:2px solid var(--ink);background:var(--paper);
  display:inline-flex;align-items:center;gap:5px;line-height:1;
}
.dcard .badge .n{font-size:13px;letter-spacing:0}
.dcard .badge .sep{opacity:.45;margin:0 1px}
.dcard.locked .badge{background:var(--ink);color:var(--paper)}
.dcard .badge.tier-base   {background:var(--paper-2)}
.dcard .badge.tier-bronze {
  background:linear-gradient(135deg,#7a3f12 0%,#c87a35 35%,#f3c98a 50%,#a85e22 65%,#6a3410 100%);
  color:#fff4e3;border-color:var(--ink);
  text-shadow:0 1px 0 rgba(0,0,0,.35)
}
.dcard .badge.tier-argent {
  background:linear-gradient(135deg,#6e6e6e 0%,#c9c9c9 35%,#ffffff 50%,#b8b8b8 65%,#5e5e5e 100%);
  color:var(--ink)
}
.dcard .badge.tier-or     {
  background:linear-gradient(135deg,#8a6508 0%,#e8b015 35%,#fff2a8 50%,#d49a0c 65%,#704f06 100%);
  color:#3a2a00;
  text-shadow:0 1px 0 rgba(255,240,180,.5)
}
.dcard .badge.tier-platine{
  background:linear-gradient(135deg,#6c8794 0%,#b8d8e6 35%,#f4fbfd 50%,#9cc4d6 65%,#5b7682 100%);
  color:#1a2a33
}
.dcard .badge.tier-diamant{
  background:linear-gradient(135deg,#a5e9ff 0%,#fff 45%,#c8a5ff 100%);
  box-shadow:0 0 0 2px var(--ink), 0 0 12px rgba(165,233,255,0.6);
  border-color:var(--ink);
}

.empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  font-family:var(--font-mono);font-size:13px;opacity:.6
}

/* ─── Section title strip ───────────────────────────────────── */
.section-title{
  font-family:var(--font-display);font-size:clamp(22px,3.5vw,32px);
  text-transform:uppercase;letter-spacing:-.02em;
  margin:var(--space-4) 0 var(--space-3);
  display:flex;align-items:center;gap:12px
}
.section-title::after{content:'';flex:1;border-bottom:var(--border-thick)}

/* ─── Modal stats individuelles ─────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(10,10,10,0);
  display:none;align-items:center;justify-content:center;
  z-index:100;padding:20px;perspective:1800px;
  transition:background-color .35s ease;
}
.modal-backdrop.show{display:flex;background:rgba(10,10,10,0.7)}
.modal{
  background:var(--paper);border:var(--border-thick);box-shadow:8px 8px 0 0 var(--ink);
  max-width:600px;width:100%;
  position:relative;
  transform-style:preserve-3d;backface-visibility:hidden;
}
.modal-backdrop.show .modal{animation:modalFlipIn .55s cubic-bezier(.3,1.15,.5,1) .18s both}
.modal-backdrop.closing .modal{animation:modalFlipOut .25s cubic-bezier(.4,0,.7,1) both}
@keyframes modalFlipIn{
  0%   {transform:scale(.35) rotateY(-180deg);opacity:0}
  35%  {opacity:1}
  100% {transform:scale(1) rotateY(0);opacity:1}
}
@keyframes modalFlipOut{
  from {transform:scale(1) rotateY(0);opacity:1}
  to   {transform:scale(.7) rotateY(90deg);opacity:0}
}
/* IMPORTANT : selector ".grid > .dcard.flipping" (specificity 0,0,3) au
   lieu de ".dcard.flipping" (0,0,2) pour BATTRE la règle ".grid > .dcard"
   qui set animation:dlp-pop-in. */
.grid > .dcard.flipping,
.grid > .dcard.unflipping{
  z-index:50;pointer-events:none;
  backface-visibility:hidden;
}
.grid > .dcard.flipping{
  animation:cardGrowFlip .42s cubic-bezier(.5,0,.5,1) forwards !important;
}
.grid > .dcard.unflipping{
  animation:cardUnflip .42s cubic-bezier(.5,0,.5,1) forwards !important;
}
/* Perspective INLINE dans le transform (perspective(1200px) en première
   position) : applique le contexte 3D directement à l'élément qui rotate,
   ne dépend pas d'une déclaration `perspective:` sur un parent (où
   display: grid ou autre containing context peut casser). + fiable. */
@keyframes cardGrowFlip{
  /* OUVERTURE : carte rotate 0 → 180° + grow modeste 1 → 1.08. Backface
     hidden masque la carte après 90°. Modal prend le relais via
     modalFlipIn delay 180ms. */
  0%   {transform:perspective(1200px) scale(1)    rotateY(0deg);    opacity:1}
  50%  {transform:perspective(1200px) scale(1.05) rotateY(90deg);   opacity:.5}
  100% {transform:perspective(1200px) scale(1.08) rotateY(180deg);  opacity:0}
}
@keyframes cardUnflip{
  /* FERMETURE : reverse de cardGrowFlip. Carte revient de rotateY 180° vers
     0° en shrinkant. Synchronisé avec modalFlipOut. */
  0%   {transform:perspective(1200px) scale(1.08) rotateY(180deg); opacity:0}
  50%  {transform:perspective(1200px) scale(1.05) rotateY(90deg);  opacity:.5}
  100% {transform:perspective(1200px) scale(1)    rotateY(0deg);   opacity:1}
}
/* (Le bouton de fermeture explicite a été retiré : un clic n'importe où sur
   le verso/backdrop ferme la carte.) */

/* ── Rank header (top band) ──────────────────────────────── */
.rank-head{
  background:var(--tier-bg, var(--paper-2));color:var(--tier-fg, var(--ink));
  padding:9px 18px;border-bottom:var(--border-thick);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;line-height:1;
}
.rank-head .rblock{display:flex;align-items:baseline;gap:10px;min-width:0}
.rank-head .rlabel{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;font-weight:700;opacity:.6}
.rank-head .rtier{font-size:17px;letter-spacing:-.005em}
.rank-head .rnext{font-family:var(--font-mono);font-size:10px;font-weight:600;opacity:.78;letter-spacing:.02em;text-align:right;text-transform:none}
.rank-head .rnext b{font-weight:700;border-bottom:1.5px solid currentColor;text-transform:uppercase;letter-spacing:.04em}
.rank-head.tier-base   {--tier-bg:#ecdfb8;--tier-fg:#3a2f1a}
.rank-head.tier-bronze {--tier-bg:linear-gradient(135deg,#7a3f12 0%,#c87a35 35%,#f3c98a 50%,#a85e22 65%,#6a3410 100%);--tier-fg:#fff4e3}
.rank-head.tier-argent {--tier-bg:linear-gradient(135deg,#6e6e6e 0%,#c9c9c9 35%,#ffffff 50%,#b8b8b8 65%,#5e5e5e 100%);--tier-fg:var(--ink)}
.rank-head.tier-or     {--tier-bg:linear-gradient(135deg,#8a6508 0%,#e8b015 35%,#fff2a8 50%,#d49a0c 65%,#704f06 100%);--tier-fg:#3a2a00}
.rank-head.tier-platine{--tier-bg:linear-gradient(135deg,#6c8794 0%,#b8d8e6 35%,#f4fbfd 50%,#9cc4d6 65%,#5b7682 100%);--tier-fg:#1a2a33}
.rank-head.tier-diamant{--tier-bg:linear-gradient(135deg,#a5e9ff 0%,#fff 45%,#c8a5ff 100%);--tier-fg:var(--ink)}

/* ── Passport body ───────────────────────────────────────── */
.psp-body{
  background:var(--paper-2);padding:18px 22px;
  border-bottom:var(--border-thick);
  display:grid;grid-template-columns:108px 1fr;gap:22px;align-items:center;
}
.psp-photo{
  width:108px;aspect-ratio:2/3;background-size:cover;background-position:top center;
  border:var(--border-thick);box-shadow:5px 5px 0 0 var(--ink);
  transform:rotate(-3.5deg);background-color:var(--paper);
}
.psp-fields{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:6px}
.psp-name{
  font-family:var(--font-display);font-size:clamp(20px,3.2vw,26px);
  line-height:.95;text-transform:uppercase;letter-spacing:-.02em;
  margin:0;word-wrap:break-word;
}
.psp-tag-row{display:flex;gap:6px;flex-wrap:wrap}
.psp-grp{
  display:inline-block;font-family:var(--font-display);font-size:11.5px;
  padding:5px 9px;text-transform:uppercase;letter-spacing:.04em;
  border:var(--border-thick);line-height:1;
}
.psp-bord{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  padding:5px 8px;text-transform:uppercase;letter-spacing:.1em;
  border:var(--border-thick);line-height:1;background:var(--paper);color:var(--ink);
}
.psp-bord::before{content:'';width:8px;height:8px;border:1.5px solid var(--ink);background:var(--bord-color,#888)}
.psp-rows{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.psp-rows .r{display:grid;grid-template-columns:54px 1fr;gap:10px;font-family:var(--font-mono);font-size:11px;line-height:1.3;padding:1px 0}
.psp-rows .r .k{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;font-weight:700;align-self:center}
.psp-rows .r .v{font-weight:600}

/* ── Player dossier section ──────────────────────────────── */
.dossier{padding:16px 18px 20px;background:var(--paper)}
.dossier-title{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.55;margin:0 0 12px;
  display:flex;align-items:center;gap:10px;font-weight:700;
}
.dossier-title::after{content:'';flex:1;border-bottom:2px dashed rgba(0,0,0,.25)}

.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sblock{
  background:var(--sb-bg, #f3eedd);
  border:var(--border-thick);box-shadow:4px 4px 0 0 var(--ink);
  padding:12px 13px 14px;display:flex;flex-direction:column;min-height:124px;
}
.sblock .label{
  font-family:var(--font-display);
  font-size:clamp(13px, 1.3vw, 17px);
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;align-items:center;gap:6px;
}
.sblock .label svg{flex-shrink:0;opacity:.75}
.sblock .big{
  font-family:var(--font-display);font-size:30px;line-height:.95;
  text-transform:uppercase;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:0;margin-top:auto;overflow:hidden;
}
.sblock .big.gnam{font-size:20px;line-height:1;display:block;overflow:hidden}
.sblock .big.gnam .pill{
  display:inline-block;padding:5px 9px;border:var(--border-thick);line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sblock .big .small{font-size:.42em;opacity:.55;margin-left:2px;letter-spacing:0}
.sblock .sub{font-family:var(--font-mono);font-size:10.5px;opacity:.7;letter-spacing:.01em;line-height:1.35;font-weight:600;margin-top:5px}
.sblock.b-precision{--sb-bg:#cfe0ff}
.sblock.b-time     {--sb-bg:#ffdcaa}
.sblock.b-confused {--sb-bg:#ffd1d1}

.locked-msg{padding:var(--space-4);text-align:center;font-family:var(--font-mono);font-size:13px;opacity:.6}

@media (max-width:760px){
  .coll-banner{grid-template-columns:1fr;gap:var(--space-3)}
  .bord-grid{grid-template-columns:1fr}
  .diag-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .coll-banner{grid-template-columns:1fr}
  .psp-body{grid-template-columns:88px 1fr;padding:14px;gap:14px}
  .psp-photo{width:88px}
  .psp-name{font-size:18px}
  .stats3{grid-template-columns:1fr;gap:8px}
  .sblock{min-height:0;padding:10px 12px}
  .sblock .big{margin-top:4px;font-size:22px}
  .sblock .big.gnam{font-size:18px}
}

/* ── Animations d'apparition staggered (cohérent Classements) ──────────── */
@keyframes dlp-pop-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.coll-banner,
.bord-card,
.diag-card,
.toolbar {
  animation: dlp-pop-in 400ms var(--ease-out) backwards;
}
.coll-banner                       { animation-delay: 0ms; }
.bord-grid .bord-card:nth-child(1) { animation-delay: 90ms; }
.bord-grid .bord-card:nth-child(2) { animation-delay: 130ms; }
.bord-grid .bord-card:nth-child(3) { animation-delay: 170ms; }
.diag-grid .diag-card:nth-child(1) { animation-delay: 220ms; }
.diag-grid .diag-card:nth-child(2) { animation-delay: 260ms; }
.diag-grid .diag-card:nth-child(3) { animation-delay: 300ms; }
.diag-grid .diag-card:nth-child(4) { animation-delay: 340ms; }
.toolbar                           { animation-delay: 400ms; }
/* Animation d'arrivée wave pour TOUTES les cartes du grid.
   IMPORTANT : la règle s'applique inconditionnellement (PAS de filtre
   `:not(.sec-collapsed)`). Sinon le sélecteur matche/unmatch quand on
   toggle .sec-collapsed → la propriété `animation` est appliquée/retirée
   → spec CSS force le restart de l'animation depuis 0 = flash visible.
   Custom property `--card-i` injectée par JS au render (ordre dans la
   séquence visible). Cap à 40 pour limiter le stagger à ~720ms. */
/* :not(.was-flipped) : exclut les cartes qui ont fait un cycle flip+unflip
   complet. Sinon le retrait de .unflipping (cf. closeModal) provoquait un
   re-trigger du dlp-pop-in (animation property change → browser replay)
   → carte disparaissait à opacity 0 (delay 460ms+) puis pop-in.
   .was-flipped est posée AVANT le retrait des classes flip/unflip dans
   closeModal pour court-circuiter ce replay. */
.grid > .dcard:not(.was-flipped) {
  animation: dlp-pop-in 320ms var(--ease-out) backwards;
  animation-delay: calc(460ms + var(--card-i, 0) * 18ms);
}
.grid > .dcard.sec-collapsed {
  display: none;
}
.grid > .grid-sep {
  animation: dlp-pop-in 320ms var(--ease-out) backwards;
  animation-delay: calc(420ms + var(--sep-i, 0) * 30ms);
}
/* Bouton "Charger plus" par section : néobrut compact, centré, gap correct. */
.grid-section-more {
  grid-column: 1 / -1;
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.85;
}
.grid-section-more-btn {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
  border: var(--border-thick); box-shadow: var(--sh-sm);
  padding: 8px 14px; cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
html.dlp-can-hover .grid-section-more-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.grid-section-more-count { opacity: 0.6; }
.grid-section-more.sec-collapsed { display: none; }

.reduce-motion .coll-banner,
.reduce-motion .bord-card,
.reduce-motion .diag-card,
.reduce-motion .toolbar,
.reduce-motion .grid > * { animation: none !important; }