/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION — RAFFINEMENT V3 (2026-06-03) — couche PAGE
   ───────────────────────────────────────────────────────────────────────────
   Reskin néo-brut V3 du CONTENU de la page Collection : page shell (sections,
   toolbar, recherche), grille de cartes migrée sur le cadre DLPCard, et passes
   légères sur les stats + le modal verso (refonte complète en Phases 2 & 3).
   Le CHROME (titre + navbars + grille de fond) est géré par `css/chrome-v3.css`
   (partagé, identique à l'index) — PAS ici.
   Le contrat de classes avec le <script> de rendu est INCHANGÉ : on restyle.
   Chargé APRÈS style.css, le <style> inline, ET chrome-v3.css. (cf. spec §15)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Corps + mono en Space Mono (cohérent jeu V3) ; --font-display (Archivo Black)
   conservé pour les noms / labels de cartes. */
:root {
  --font-body: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
}
/* Laisse la grille bleue du chrome transparaître derrière le contenu. */
.app { background: transparent !important; }

/* ════════════════════════════════════════════════════════════════════════
   TITRES DE SECTION (Statistiques / Polidex) — tag noir tilté, langage V3
   ════════════════════════════════════════════════════════════════════════ */
.section-title {
  font-family: var(--font-display);
  position: relative;
  z-index: 1;
}
/* Ouvert : le libellé devient un tag ink penché ; la barre suit. */
.section-title:not(.collapsed) > :first-child,
.section-title:not(.collapsed)::first-line { /* no-op de sécurité */ }
.section-title.section-toggle:not(.collapsed) {
  /* Le texte nu reste, mais on lui donne le poids V3 via taille + tracking. */
  font-size: clamp(24px, 3.6vw, 34px);
  letter-spacing: -0.02em;
}
/* Fermé : bouton néo-brut V3 tilté (invite au clic). */
.section-toggle.collapsed {
  transform: rotate(-0.6deg);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  font-size: clamp(18px, 2.4vw, 24px);
}
html.dlp-can-hover .section-toggle.collapsed:hover {
  transform: rotate(-0.6deg) translate(-2px, -2px);
  box-shadow: 9px 9px 0 0 var(--ink);
}

/* ════════════════════════════════════════════════════════════════════════
   TOOLBAR — recherche néo-brut + tri en TOGGLE SEGMENTÉ tilté (cf. Succès)
   ════════════════════════════════════════════════════════════════════════ */
.toolbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 14px !important;
  align-items: center;
}
/* Champ de recherche : cadre épais ink + ombre dure, tilt léger. */
.search-wrap {
  flex: 1 1 260px;   /* desktop : recherche sur la MÊME ligne que le tri (cf. RP) */
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  background: var(--paper);
  transform: rotate(-0.5deg);
}
/* Mobile : la recherche reprend sa propre ligne pleine largeur. */
@media (max-width: 700px) { .search-wrap { flex: 1 1 100%; } }
.search-input {
  background: transparent;
  border: none;
  padding: 12px 14px 12px 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
}
.search-input::placeholder { opacity: 0.5; }
.search-input:focus { background: transparent; outline: none; }
.search-wrap .ico { left: 13px; }
/* Label « Trier » SORTI de .filters (frère direct dans .toolbar), centré
   verticalement (toolbar align-items:center) — langage unifié avec la page Succès. */
.toolbar .sort-label,
.filters .sort-label {
  font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.6; flex: 0 0 auto;
}
/* Tri = UN contrôle SEGMENTÉ (cf. page Succès) : une seule boîte bordée + ombre
   dure, légèrement tiltée ; pills jointes, séparées par un trait ; active remplie
   en encre. (Avant : des pills isolées, chacune bordée/tiltée — incohérent.) */
.filters {
  display: inline-flex !important; gap: 0 !important;
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  align-items: stretch;
  border: var(--border-thick); box-shadow: var(--sh-md); background: var(--paper);
  transform: rotate(-0.8deg);
  /* scroll horizontal interne dès que les 5 pills dépassent la place dispo
     (peu importe la largeur) → jamais de pill coupée hors écran. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter-pill {
  font-family: var(--font-display); font-size: 11.5px;
  letter-spacing: 0.04em; text-transform: uppercase; flex: 0 0 auto;
  border: none !important; box-shadow: none !important; background: transparent !important;
  color: var(--ink) !important; padding: 9px 16px !important; margin: 0 !important;
  transform: none !important;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.filter-pill + .filter-pill { border-left: var(--border-thick) !important; }
html.dlp-can-hover .filter-pill:hover {
  background: var(--paper-2) !important; color: var(--ink) !important;
  transform: none !important; box-shadow: none !important;
}
.filter-pill.active { background: var(--ink) !important; color: var(--paper) !important; }
/* « Trier » = 1er segment-LABEL intégré DANS la pilule (déplacé hors de .toolbar) :
   même cadre que les boutons, look atténué (fond paper-2, mono opacifié, non
   cliquable) → on comprend que c'est un label. Cohérent avec les Classements. */
.filters > .sort-label {
  display: flex; align-items: center; flex: 0 0 auto; cursor: default; margin: 0;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 14px; background: var(--paper-2); color: var(--ink); opacity: 0.5;
}
.filters > .sort-label + .filter-pill { border-left: var(--border-thick) !important; }

/* ════════════════════════════════════════════════════════════════════════
   GRILLE DE CARTES — migration vers le cadre DLPCard
   ───────────────────────────────────────────────────────────────────────────
   La carte n'a PLUS de bordure/ombre propre : le cadre SVG DLPCard EST la
   carte (avec son ring noir + son drop-shadow). Le `.dcard` redevient un simple
   conteneur transparent (cadre + légende). overflow VISIBLE pour ne pas couper
   le drop-shadow du cadre.
   ════════════════════════════════════════════════════════════════════════ */
.grid { gap: 6px 12px; margin-top: var(--space-4); }
/* NOMBRE DE COLONNES piloté par l'ASPECT-RATIO (comme tout le chrome V3 / le
   cadre de jeu) : dès que le viewport passe en PORTRAIT → 3 colonnes, quelle
   que soit la largeur en px. minmax(0,1fr) → colonnes réellement égales (cf.
   fix grid-blowout). Charge APRÈS la règle inline `repeat(2,1fr)` → la bat. */
@media (max-aspect-ratio: 1/1) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  /* Portrait = compact : on masque la localisation (on ne garde que la
     fonction). Elle réapparaît en paysage/desktop. */
  .dcard .meta-loc { display: none; }
}
/* TUNING TAILLE séparé, piloté par la LARGEUR (vrais petits écrans) : à ~114px
   de carte, ombre + polices réduites proportionnellement. Le contour, lui, est
   déjà scalé via vector-effect:none (cf. plus bas). */
@media (max-width: 480px) {
  .dcard-frame .card-svg { filter: drop-shadow(4px 4px 0 var(--ink)); }
  html.dlp-can-hover .dcard:hover .dcard-frame .card-svg { filter: drop-shadow(7px 7px 0 var(--ink)); }
  .dcard .name { font-size: 11px; }
  .dcard .mvt-chip { font-size: 9px; padding: 3px 6px; }
  .dcard .meta-role { font-size: 8px; padding: 3px 6px; }
}

.dcard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Anti grid-blowout : autorise l'item grid à rétrécir sous son contenu
     (sinon une localisation longue en nowrap gonfle sa colonne → colonnes
     inégales sur mobile). cf. spec §15. */
  min-width: 0;
}
/* Filtres d'état conservés (locked grisé, review atténué). */
.dcard.locked { filter: grayscale(1) brightness(0.78); }
.dcard.review { filter: grayscale(0.7) brightness(0.95); opacity: 0.9; }

/* Hover : SEUL LE CADRE s'anime — la légende (nom/mvt/méta) reste fixe sous le
   cadre (retour user). On neutralise donc le transform/ombre que l'inline posait
   sur la tuile entière. z-index monte la carte au-dessus de ses voisines. */
html.dlp-can-hover .dcard:hover,
html.dlp-can-hover .dcard:nth-child(2n of .dcard):hover {
  transform: none !important;
  box-shadow: none !important;
  z-index: 5;
}

/* Hôte du cadre DLPCard : occupe toute la largeur, hauteur dérivée du SVG.
   Il porte : la rotation de repos randomisée (--card-rot), le lift de survol,
   et le marqueur de proximité. */
.dcard-frame {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: visible;
  transform: rotate(var(--card-rot, 0deg));
  /* Timing CALQUÉ SUR LES BOUTONS (chrome-v3) : var(--dur-fast)/var(--ease-out). */
  transition: transform var(--dur-fast) var(--ease-out);
}
/* Lift de survol calqué sur les boutons : translate(-2px,-2px), MAIS la rotation
   est randomisée par carte (--card-rot-hv) au lieu de se redresser à 0°. */
html.dlp-can-hover .dcard:hover .dcard-frame {
  transform: translate(-2px, -2px) rotate(var(--card-rot-hv, 0deg));
}
.dcard-frame .card {
  width: 100%;
  height: auto;
  display: block;
  transform: none;            /* la rotation de repos est portée par le cadre */
}
/* Ombre = MÊME LANGAGE QUE LES BOUTONS : drop-shadow 7px (≈ --sh) au repos,
   10px (≈ --sh-hover) au survol, animée au même rythme. Couplé au translate
   (-2,-2), la carte « décolle » de son ombre au lieu de glisser avec
   (retour user : anim carte/ombre pas uniforme). */
.dcard-frame .card-svg {
  height: auto;
  filter: drop-shadow(var(--sh-off, 7px) var(--sh-off, 7px) 0 var(--ink));
  transition: filter var(--dur-fast) var(--ease-out);
}
html.dlp-can-hover .dcard:hover .dcard-frame .card-svg {
  filter: drop-shadow(10px 10px 0 var(--ink));
}
/* Contour du cadre SCALÉ avec la carte (≠ jeu, où il est non-scaling = 4px écran
   fixe). À petite taille, deux traits fixes de 4px (anneau + découpe photo)
   mangeaient toute la bande du cadre → on rend l'épaisseur PROPORTIONNELLE
   (stroke-width:4 en unités viewBox 200 → ≈2,3px à 114px, ≈4px à 200px,
   ≈5px en desktop). Retour user : « à très petite taille le contour est trop
   épais, on ne voit plus l'intérieur de l'anneau ». */
.dcard .card-frame-stroke,
.dcard .card-bg-stroke {
  vector-effect: none;
}

/* Perf : ~100 cartes à l'écran → on PAUSE shiny/holo par défaut, ils ne jouent
   qu'au survol (comportement identique à l'ancienne collection). */
.dcard .card-shine-bg .shine-sweep,
.dcard .card-shine-frame .shine-sweep,
.dcard .holo-stripes,
.dcard .card--holo .card-frame-fill {
  animation-play-state: paused;
}
html.dlp-can-hover .dcard:hover .card-shine-bg .shine-sweep,
html.dlp-can-hover .dcard:hover .card-shine-frame .shine-sweep,
html.dlp-can-hover .dcard:hover .holo-stripes,
html.dlp-can-hover .dcard:hover .card--holo .card-frame-fill {
  animation-play-state: running;
}

/* ── Légende sous le cadre ─────────────────────────────────────────────── */
.dcard-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Le cadre SVG a ~8,3 % de marge transparente en bas et ~6,5 % à G/D
     (silhouette centrée). On REMONTE la légende dans cette zone (margin-top
     négative en calc px-%, robuste quelle que soit la largeur) → interligne
     serré cadre→nom, et on l'INSET de ~6,5 % → bornée à la largeur visible
     de la carte (plus de débord G/D). cf. spec §15. */
  /* Silhouette désormais bottom-alignée à ~3,3% du bas de la boîte (cf.
     hydrateCards) → l'interligne se calcule sur 5% (et non 12%). +13px ≈ gap
     constant ~13px (un poil plus, retour user). */
  margin-top: calc(13px - 5%);
  padding: 0 6.5%;
  flex: 1;
  min-width: 0;
}
/* Nom = TOUJOURS deux lignes (prénom ligne 1, nom ligne 2). Conteneur flex en
   colonne ; chaque ligne s'adapte à la largeur dispo (ellipsis si elle dépasse)
   — retour user. */
.dcard .name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
}
.dcard .name .nf,
.dcard .name .nl {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nom de famille (ligne 2) légèrement appuyé → hiérarchie de lecture. */
.dcard .name .nf { opacity: 0.72; font-size: 0.84em; }
/* Sticker mouvement : ANCRÉ SUR LA CARTE, bandeau centré en bas (retour user).
   Overlay absolu dans .dcard-frame → se déplace avec la carte au survol. Posé
   juste au-dessus du bas de la silhouette (bottom-alignée à ~3,3%). */
.dcard .mvt-chip {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 5;
  max-width: 92%;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  padding: 4px 8px;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translateX(-50%) rotate(-1.4deg);
  /* Plus de troncature : le nom entier ; les mouvements en 2 mots passent sur 2
     lignes (wrap entre mots seulement, jamais mid-mot). Retour user. */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  text-align: center;
}
/* Fonction = sticker assorti au chip mouvement, mais neutre (paper) →
   secondaire. Sous le nom (la pilule mouvement a migré sur la carte, cf.
   plus haut). Bornée à la largeur de carte (ellipsis). */
.dcard .meta-role {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 7px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(1deg);
}
/* Ligne 2 : sticker fonction + localisation. La loc n'apparaît qu'en PAYSAGE
   (desktop) — masquée en portrait (cf. media query aspect-ratio plus bas).
   Le sticker fonction garde sa taille ; la loc remplit le reste avec ellipsis. */
.dcard .dcard-fl {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}
.dcard .meta-loc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* ── Badge de rang : sticker tilté qui chevauche le coin haut-droit du cadre ─ */
/* Badge de rang : ancré sur le VRAI coin haut-droit de la silhouette via
   --sil-top (posé en JS) → ne flotte pas dans la marge transparente, malgré le
   bottom-align qui décale le haut selon le rôle. translateY straddle le bord. */
.dcard .badge {
  position: absolute;
  top: var(--sil-top, 8%);
  right: 4%;
  z-index: 6;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translateY(-55%) rotate(3.5deg);
  background: var(--paper);
}
.dcard .badge .n { font-size: 12px; }
.dcard.locked .badge {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-55%) rotate(3.5deg);
}

/* ════════════════════════════════════════════════════════════════════════
   SÉPARATEURS DE SECTION (tris groupés : mouvements / fonctions)
   ════════════════════════════════════════════════════════════════════════ */
.grid-sep .pill {
  font-family: var(--font-display);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-0.8deg);
}
.grid-sep .grp-acc {
  font-family: var(--font-display);
  box-shadow: 2px 2px 0 var(--ink);
}
.grid-sep .count { font-family: var(--font-body); font-weight: 700; }
.grid-sep .rule { border-bottom: var(--border-thick); }

/* ── Bouton « Charger plus » (global + par section) ──────────────────────── */
.load-more-btn,
.grid-section-more-btn {
  font-family: var(--font-display);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  transform: rotate(-0.6deg);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
html.dlp-can-hover .load-more-btn:hover,
html.dlp-can-hover .grid-section-more-btn:hover {
  transform: rotate(-0.6deg) translate(-2px, -2px);
  box-shadow: 9px 9px 0 0 var(--ink);
}
.load-more-info,
.grid-section-more-count { font-family: var(--font-body); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   MODAL VERSO — REFONTE V3 (Phase 2)
   ───────────────────────────────────────────────────────────────────────────
   Le cadre DLPCard devient la photo héros ; nom Syne italic 2 lignes ;
   stickers mouvement/camp tiltés ; faits en liste mono ; 3 tuiles de stats
   néo-brut. Le mécanisme de flip (.modal / .flipping) reste inchangé.
   ════════════════════════════════════════════════════════════════════════ */
/* Le verso « Dossier » est riche → peut dépasser l'écran : scroll interne.
   Élargi sur desktop pour loger Parcours | Profil idéologique côte à côte. */
.modal { background: var(--paper); max-height: 92vh; overflow-y: auto; max-width: 660px; }

/* Parcours (gauche) | Profil idéologique = radar + légende (droite), côte à côte.
   align-items:start → les deux intitulés de section restent alignés en haut. */
.cm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
.cm-col { min-width: 0; }

/* Bandeau de rang — IDENTITÉ LÉGÈRE : prend la couleur politique du RP (--accent,
   posée en JS). Repli sur le dégradé métallique du tier si pas d'accent (carte
   verrouillée). Le nom de rang en Syne italic. */
.rank-head {
  font-family: var(--font-display);
  background: var(--accent, var(--tier-bg, var(--paper-2))) !important;
  color: var(--accent-fg, var(--tier-fg, var(--ink))) !important;
}
.rank-head .rtier { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; }
.rank-head .rlabel,
.rank-head .rnext { font-family: 'Space Mono', monospace; }

/* ── Héros : cadre DLPCard + identité ───────────────────────────────────── */
.cm-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  background: var(--paper-2);
  border-bottom: var(--border-thick);
}
/* Ligne du haut : photo | identité. L'identité est centrée verticalement face
   à la photo (retour user). */
.cm-hero-top { display: flex; gap: 16px; align-items: center; }
.cm-card { flex: 0 0 auto; width: 138px; }
.cm-card .card { width: 100%; height: auto; transform: rotate(-2.5deg); }
.cm-card .card-svg { height: auto; filter: drop-shadow(6px 6px 0 var(--ink)); }
.cm-card--locked { filter: grayscale(1) brightness(0.8); }

/* Photo avec la pastille de FONCTION posée en POST-IT sur le bas de la photo
   (absolue, légèrement penchée, débordant un poil). La pastille reprend la
   couleur de carte du rôle (posée inline via --fn-color). */
.cm-heropic { flex: 0 0 auto; position: relative; }
.cm-fonction-pill {
  position: absolute; left: 50%; bottom: 8px; z-index: 2;
  font-family: 'Archivo Black', sans-serif; font-size: 9.5px; text-transform: uppercase;
  line-height: 1.12; text-align: center; color: var(--ink);
  background: var(--fn-color, var(--paper-2)); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  padding: 4px 9px 5px; transform: translateX(-50%) rotate(-2deg); max-width: 132px;
}

/* Identité « passeport » : nom, stickers, puis faits en 2 colonnes qui
   remplissent la largeur ET la hauteur à côté de la photo (plus de grand blanc). */
.cm-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.cm-name {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cm-name .nf { font-size: clamp(15px, 2.2vw, 19px); opacity: 0.65; }
/* B3.1 — jamais de césure en plein mot (« BONHOMM/E ») : wrap entre mots
   uniquement (pattern .mvt-chip / .cm-conf-pill) ; un nom trop long est
   réduit par l'auto-fit JS d'openModal (stats.html). */
.cm-name .nl { font-size: clamp(24px, 4vw, 34px); overflow-wrap: normal; word-break: keep-all; hyphens: none; }

.cm-stickers { display: flex; flex-wrap: wrap; gap: 7px; }
.cm-mvt {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  border: var(--border-thick);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.cm-bord {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 8px;
  border: var(--border-thick);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(1deg);
}
.cm-bord::before {
  content: '';
  width: 9px; height: 9px;
  border: 2px solid var(--ink);
  background: var(--bord-color, #888);
}

/* Faits dans le héros : grille 2 colonnes, libellé AU-DESSUS de la valeur →
   remplit la largeur à côté de la photo, aligné, valeurs longues qui wrappent. */
.cm-facts { margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.cm-facts > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-facts dt {
  margin: 0; font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5;
}
.cm-facts dd {
  margin: 0; font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 11px; line-height: 1.25; min-width: 0; word-wrap: break-word;
}

/* ── Bio héros : 3 lignes (âge / naissance / métier « ancien »), façon Modal 3 ── */
.cm-bio { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.cm-bio-l { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px; line-height: 1.3; opacity: 0.82; }
.cm-bio-l b { opacity: 1; }

/* ── Carte d'identité : bandeau de petits BLOCS COLORÉS sous le héros ──────────
   Pastels de carte (--fb posé inline), bordés/ombrés, légèrement penchés. */
.cm-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cm-fiche-block {
  background: var(--fb, var(--paper)); color: var(--fg, var(--ink));
  border: 2.5px solid var(--ink); box-shadow: 2.5px 2.5px 0 var(--ink);
  padding: 6px 10px 7px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cm-fiche-block:nth-child(odd)  { transform: rotate(-0.5deg); }
.cm-fiche-block:nth-child(even) { transform: rotate(0.5deg); }
.cm-fiche-k { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.cm-fiche-v { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px; line-height: 1.2; overflow-wrap: break-word; }
/* Bloc Parti : nom en Archivo Black AGRANDI, EN CAPITALES (fond = vraie couleur du parti). */
.cm-fiche-block--parti .cm-fiche-v { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: clamp(13px, 3.6vw, 15px); line-height: 1.12; text-transform: uppercase; }
/* Non-encarté : pas de label « Parti » → on centre verticalement la valeur. */
.cm-fiche-block--nolabel { justify-content: center; }

/* ── TEASER : carte non débloquée (review / locked) ───────────────────────────
   Le cadre + un message « trouve-le en jeu ». Pas de fiche ni de dossier. */
.cm-teaser { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 26px 22px 30px; background: var(--paper); }
.cm-teaser-card { width: 150px; }
.cm-teaser-card .card { width: 100%; height: auto; transform: rotate(-2deg); }
.cm-teaser-card .card-svg { height: auto; filter: drop-shadow(6px 6px 0 var(--ink)); }
.cm-teaser--locked .cm-teaser-card { filter: grayscale(1) brightness(0.82); }
.cm-teaser-body { display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 330px; }
.cm-teaser-name { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; display: flex; flex-direction: column; }
.cm-teaser-name .nf { font-size: 14px; opacity: 0.6; }
.cm-teaser-name .nl { font-size: 24px; }
.cm-teaser-tag { font-family: 'Archivo Black', sans-serif; font-size: 11px; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 2.5px solid var(--ink); box-shadow: var(--sh-sm); padding: 5px 11px; transform: rotate(-1deg); }
.cm-teaser-msg { margin: 2px 0 0; font-family: 'Space Mono', monospace; font-size: 12.5px; line-height: 1.6; }
.cm-teaser-msg b { font-weight: 700; background: var(--yellow); padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cm-teaser-hint { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; }

/* ── Corps du verso : courants + parcours + anecdote + stats ────────────── */
.cm-body { padding: 16px 22px 20px; background: var(--paper); }
/* Air généreux entre les éléments du corps : les blocs tiltés/ombrés au-dessus
   (anecdote, tuiles, chapitres) ne doivent jamais recouvrir le titre suivant. */
.cm-body > * + * { margin-top: 26px; }
/* Sections REPLIÉES qui s'enchaînent → interligne resserré (en-têtes en liste
   compacte). Dès que la section du dessus est ouverte, l'air généreux revient. */
.cm-body > .cm-coll:not([open]) + .cm-coll { margin-top: 11px; }

/* Intertitre de section */
.cm-sec {
  margin: 0 0 10px;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55;
  display: flex; align-items: center; gap: 9px;
}
.cm-sec::after { content: ''; flex: 1; border-bottom: 2px dashed; border-bottom-color: color-mix(in srgb, var(--accent, #000) 40%, transparent); }

/* (.cm-two / .cm-col définis plus haut — Parcours étroit | Profil large.) */

/* Courants pondérés — barres horizontales (couleur du mouvement) */
.cm-cour { display: flex; flex-direction: column; gap: 7px; }
.cm-cour-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.cm-cour-n { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cour-p { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 10px; opacity: 0.65; }
.cm-cour-bar { grid-column: 1 / -1; height: 11px; border: 2.5px solid var(--ink); background: var(--paper-2); overflow: hidden; }
.cm-cour-bar > i { display: block; height: 100%; }

/* Profil idéologique — RADAR avec le NOM de chaque courant posé sur son sommet
   d'axe (plus de légende latérale). Le radar est centré dans la section, son
   viewBox est large pour loger les étiquettes (cf. renderCourantsRadar). */
/* Bloc (pas flex) : en contexte flex, un <svg> en width:100% retombe sur une
   taille intrinsèque dégénérée (bug connu flexbox + SVG %). En bloc, width:100%
   se résout proprement contre le parent et height:auto suit le viewBox. */
.cm-radar { display: block; }
.cm-radar-svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.cm-radar-lbl { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px; fill: var(--ink); }

/* Parcours & Affiliations — CHEMIN de pastilles reliées par des flèches.
   Parcours : couleur par institution. Affiliations : couleur réelle du parti. */
.cm-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-pchip {
  font-family: var(--font-display); font-size: 11px; text-transform: uppercase;
  line-height: 1; padding: 5px 9px; border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
}
.cm-pchip small {
  display: block; margin-top: 2px; font-family: 'Space Mono', monospace;
  font-size: 7.5px; font-weight: 700; opacity: 0.8; letter-spacing: 0.02em;
}
.cm-parrow { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; opacity: 0.45; }

/* ── Section REPLIABLE (<details>) ──────────────────────────────────────────
   Le <summary> EST l'intertitre : titre à gauche, filet pointillé qui pousse le
   compteur + chevron à droite. Le chevron pivote à l'ouverture. */
/* (pas de reset margin sur .cm-coll : il écraserait le `.cm-body > * + *` qui
   donne l'air au-dessus de chaque titre — cf. recouvrement signalé.) */
/* En-tête de section repliable — langage « page Succès » : chevron + titre dans
   une PUCE NOIRE inversée (tiltée, bordée, ombrée) + compteur à droite. Lisible
   comme clairement cliquable/repliable. */
.cm-coll-sum {
  display: flex; align-items: center; gap: 10px; margin: 0 0 13px; cursor: pointer;
  list-style: none; user-select: none;
}
.cm-coll-sum::-webkit-details-marker { display: none; }
.cm-coll-chev {
  font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1;
  width: 14px; text-align: center; flex: 0 0 auto;
  transition: transform 180ms var(--ease-out, ease);
}
.cm-coll:not([open]) .cm-coll-chev { transform: rotate(-90deg); }
/* Filet pointillé (leader dots) entre la pastille de titre et le compteur : le
   regard suit jusqu'à la mention (« 1 rencontre », « 3 mandats »…). Élastique,
   se réduit à un petit segment si la place manque. */
.cm-coll-line {
  flex: 1 1 auto; align-self: center; min-width: 14px;
  border-bottom: 2px dotted; border-bottom-color: color-mix(in srgb, var(--accent, var(--ink)) 50%, transparent);
}
.cm-coll-title {
  flex: 0 0 auto;   /* le titre reste entier ; c'est le compteur qui cède s'il manque de place */
  font-family: var(--font-display, 'Syne'), sans-serif; font-weight: 800; font-style: normal;
  font-size: clamp(11px, 2.9vw, 13.5px); line-height: 1; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.01em;
  background: var(--ink); color: var(--paper);
  padding: 4px 9px 5px; border: 2.5px solid var(--ink); box-shadow: 2.5px 2.5px 0 var(--ink);
  transform: rotate(-1deg);
}
.cm-coll-count {
  font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.65; text-align: right;
  /* (plus de margin-left:auto : c'est le filet pointillé qui pousse le compteur à droite) */
  /* élastique + ellipsis : ne déborde jamais, se tronque proprement si trop tassé. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.dlp-can-hover .cm-coll-sum:hover .cm-coll-title { transform: rotate(-1deg) translate(-1px, -1px); }

/* ── Parcours « parti par parti » (présentation Modal 3) ─────────────────────
   Chaque passage de parti = un chapitre à liseré coloré (couleur réelle du
   parti) ; les mandats exercés sous ces couleurs sont nichés dessous, avec un
   filet d'institution à gauche. */
.cmc-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cmc-chapter { position: relative; border: 3px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); padding-left: 12px; overflow: hidden; }
.cmc-chapter::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--pc, #888); border-right: 3px solid var(--ink); }
.cmc-ch-head { display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 12px; }
.cmc-has-mandates .cmc-ch-head { border-bottom: 2.5px dashed rgba(0, 0, 0, 0.22); }
.cmc-ch-sigle { flex: 0 0 auto; font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: -0.01em; border: 2.5px solid var(--ink); box-shadow: 2.5px 2.5px 0 var(--ink); padding: 4px 9px; line-height: 1; transform: rotate(-2deg); min-width: 42px; text-align: center; }
.cmc-ch-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cmc-ch-meta b { font-family: 'Archivo Black', sans-serif; font-size: 11px; line-height: 1.12; text-transform: uppercase; letter-spacing: -0.01em; }
.cmc-ch-years { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9.5px; letter-spacing: 0.04em; opacity: 0.62; }
.cmc-ch-years em { font-style: normal; background: var(--yellow); color: var(--ink); border: 1.5px solid var(--ink); padding: 0 4px; margin-left: 3px; text-transform: uppercase; font-size: 8px; letter-spacing: 0.06em; }
.cmc-ch-empty { font-family: 'Space Mono', monospace; font-size: 10px; font-style: italic; opacity: 0.62; padding: 0 14px 11px 12px; }

.cmc-mandates { list-style: none; margin: 0; padding: 12px 14px 13px 12px; display: flex; flex-direction: column; gap: 9px; }
.cmc-flat { border: 3px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.cmc-mandate {
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  padding: 7px 10px 8px;
}
/* Léger tilt alterné → rendu un peu vivant (retour user). */
.cmc-mandate:nth-child(odd)  { transform: rotate(-0.8deg); }
.cmc-mandate:nth-child(even) { transform: rotate(0.7deg); }
.cmc-md-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Fonction dans un carré coloré à la couleur de carte du rôle (fond posé inline). */
.cmc-md-fn {
  font-family: 'Archivo Black', sans-serif; font-size: 10px; text-transform: uppercase;
  line-height: 1.12; color: var(--ink);
  background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 1.5px 1.5px 0 var(--ink);
  padding: 3px 7px;
}
.cmc-md-yr { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9.5px; white-space: nowrap; flex: 0 0 auto; }
.cmc-md-now .cmc-md-yr { background: var(--yellow); border: 1.5px solid var(--ink); padding: 0 4px; }
/* Sous-titre « mandature » (ville/région/circo/portefeuille) dérivé du label. */
.cmc-md-sub { margin-top: 6px; font-family: 'Space Mono', monospace; font-size: 9px; line-height: 1.4; opacity: 0.72; }

/* Anecdote « Le saviez-vous ? » (touche de B) */
.cm-ff { background: var(--yellow); border: var(--border-thick); box-shadow: 3px 3px 0 var(--ink); padding: 13px 15px; transform: rotate(-0.7deg); }
.cm-ff-h { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 15px; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.cm-ff-star { font-style: normal; }
.cm-ff-t { font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1.5; }

/* ── Rubrique E : Portrait (bio + anecdotes), infobox justifs ──────────────── */
/* Section « Portrait » (sous le Dossier joueur·euse) : bio + anecdotes en
   collage uniforme — deux encarts jumeaux, mêmes bords/ombres, tilts opposés
   (bio papier +0.5°, post-it jaune -0.7°). */
.cm-portrait-body { display: flex; flex-direction: column; gap: 12px; }
.cm-bio-card {
  background: var(--paper-2);
  border: var(--border-thick);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 13px 15px;
  transform: rotate(0.5deg);
  /* Interligne aéré : la bio est un pavé de ~10 lignes d'un seul tenant. */
  font-family: 'Space Mono', monospace; font-size: 12px; line-height: 1.62;
}
/* Post-it cliquable quand plusieurs anecdotes : compteur « 1/5 » à droite de
   l'en-tête + lift au survol (même langage que les autres hovers du modal). */
.cm-ff--multi { cursor: pointer; user-select: none; -webkit-user-select: none; }
html.dlp-can-hover .cm-ff--multi:hover { transform: rotate(-0.7deg) translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cm-ff--multi:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cm-ff-count { margin-left: auto; font-family: 'Space Mono', monospace; font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; opacity: 0.6; }
@keyframes cmFfSwap {
  0%   { opacity: 0.3; transform: rotate(-0.7deg) scale(0.985); }
  100% { opacity: 1;   transform: rotate(-0.7deg) scale(1); }
}
.cm-ff-swap { animation: cmFfSwap 220ms ease-out; }
/* Ancres d'infobox justification — pas de soulignement (décision user
   2026-06-11 : l'affordance visuelle n'est pas nécessaire). cursor:pointer
   conservé impérativement (PAS help) : iOS Safari ne délivre les click
   qu'aux éléments « cliquables » — cursor:pointer en fait partie. */
.cm-mvt.cm-has-info { cursor: pointer; }
.cm-mvt.cm-has-info:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cm-cour-n.cm-has-info { cursor: pointer; }
text.cm-radar-lbl.cm-has-info { cursor: pointer; }
.cm-cour-n.cm-has-info:focus-visible, text.cm-radar-lbl.cm-has-info:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Infobox : hérite du squelette .gloss-tooltip (style.css) ; variante un peu
   plus large (justifications de 300-500 caractères) au-dessus du backdrop
   modal (z-index 100). */
.cm-infobox { max-width: min(440px, calc(100% - 24px)); z-index: 1200; }
.cm-infobox .gloss-tip-def { font-family: 'Space Mono', monospace; font-size: 11.5px; line-height: 1.5; }

.cm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cm-stat {
  border: var(--border-thick);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  min-width: 0;
}
.cm-stat[data-k="precision"] { background: #cfe0ff; transform: rotate(-1deg); }
.cm-stat[data-k="time"]      { background: #ffdcaa; transform: rotate(0.6deg); }
.cm-stat[data-k="confused"]  { background: #ffd1d1; transform: rotate(-0.5deg); }
.cm-stat-label {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.3vw, 15px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.cm-stat-big {
  font-family: 'Syne', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 30px;
  line-height: 0.95;
  margin-top: auto;
  letter-spacing: -0.02em;
}
.cm-stat-big span { font-size: 0.45em; opacity: 0.55; font-style: normal; }
.cm-stat-sub {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 5px;
  line-height: 1.35;
}
.cm-stat-conf { margin-top: auto; }
.cm-conf-pill {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.15;
  padding: 5px 9px;
  border: var(--border-thick);
  box-shadow: 2px 2px 0 var(--ink);
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  /* Nom de mouvement EN ENTIER mais SANS couper les mots : le retour à la ligne
     ne se fait QU'entre les mots → 1 ligne, 2 lignes max si le nom est en
     plusieurs mots (retour user : interdire la troncature mid-mot). */
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* « Aucune erreur 🎉 » : toujours sur une seule ligne (retour user). */
.cm-stat-sub--1l { white-space: nowrap; }

@media (max-width: 480px) {
  /* Héros : on GARDE les 2 colonnes (photo | identité) — pas d'empilement
     (retour user). Photo réduite, éléments compactés, pastilles mvt/camp qui
     s'empilent si besoin (flex-wrap). */
  .cm-hero { gap: 12px; padding: 13px; }
  .cm-hero-top { gap: 12px; }
  .cm-card { width: 100px; }
  .cm-fonction-pill { font-size: 8px; padding: 3px 6px 4px; max-width: 110px; bottom: 6px; }
  .cm-name .nf { font-size: clamp(12px, 3.4vw, 15px); }
  .cm-name .nl { font-size: clamp(18px, 5.6vw, 24px); }
  .cm-mvt { font-size: 9.5px; padding: 4px 7px; }
  .cm-bord { font-size: 9px; padding: 4px 6px; }
  .cm-bio-l { font-size: 10px; }
  /* Blocs carte d'identité : compactés (gap + valeur un poil réduits). */
  .cm-fiche { gap: 7px; }
  .cm-fiche-v { font-size: 10px; }
  .cm-body { padding: 14px; }
  /* Radar pleine largeur : svg + légende restent côte à côte (la place suffit). */
  .cm-radar-leg { grid-template-columns: 1fr; gap: 4px; }
  /* Dossier : les 3 tuiles EN LIGNE (retour user). */
  .cm-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cm-stat { min-height: 0; padding: 8px 8px 10px; }
  .cm-stat-label { font-size: 9px; }
  .cm-stat-big { font-size: 18px; margin-top: 6px; }
  .cm-stat-sub { font-size: 7.5px; }
  .cm-conf-pill { font-size: 8.5px; padding: 3px 5px; }
  /* Chapitres-par-parti : ombres et sigle un poil réduits à 340px. */
  .cmc-chapter { box-shadow: 4px 4px 0 var(--ink); }
  .cmc-ch-sigle { font-size: 15px; min-width: 38px; }
  .cmc-ch-meta b { font-size: 10.5px; }
  /* En-têtes repliables : compactés pour que titre + compteur tiennent à 360px. */
  .cm-coll-sum { gap: 8px; }
  .cm-coll-title { font-size: 11px; padding: 3px 8px 4px; }
  .cm-coll-count { font-size: 8px; letter-spacing: 0.03em; }
  /* Segment de tri : trop large pour 360px → scroll horizontal dans la boîte
     (on garde l'aspect segmenté ; bat le `overflow:hidden` de base). */
  .filters { overflow-x: auto; overflow-y: hidden; max-width: 100%; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION « STATISTIQUES » — couche de polish V3, alignée sur le modal.
   Surcharge les styles inline de stats.html (charge après) : sous-titres en
   puces noires, ombres/tilts/typo unifiés, diagnostics 2×2 raffinés.
   ════════════════════════════════════════════════════════════════════════ */
/* Sous-titres = puces noires tiltées (même langage que les sections du modal). */
.stats-sub { margin: 24px 0 12px; }
.stats-sub:first-child { margin-top: 16px; }
.stats-sub-chip {
  display: inline-block;
  font-family: var(--font-display, 'Syne'), sans-serif; font-weight: 800; font-style: normal;
  font-size: 13px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  background: var(--ink); color: var(--paper);
  padding: 5px 12px 6px; border: 2.5px solid var(--ink); box-shadow: var(--sh-sm);
  transform: rotate(-1deg);
}
/* Chiffres = Syne italique (cohérent avec les tuiles du modal) ; ombres -sm ;
   léger tilt alterné ; labels Archivo Black.
   B5.1 — minmax(0, 1fr) : `1fr` seul ne descend pas sous le min-content du
   contenu (« 959/1264 » insécable) → à 390px les 3 pistes gelaient à ~404px
   et « PRÉCISION GLOBALE » sortait de l'écran. */
.coll-banner { gap: 9px; margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coll-stat { box-shadow: var(--sh-sm); padding: 11px 13px 12px; min-width: 0; }
/* Opportunité de césure entre « 959 » et « /1264 » : sur écran étroit le
   « /total » passe à la ligne au lieu de geler la piste de grille. */
.coll-stat .val .small { display: inline-block; }
.coll-stat:nth-child(odd)  { transform: rotate(-0.5deg); }
.coll-stat:nth-child(even) { transform: rotate(0.5deg); }
.coll-stat .label { font-family: 'Archivo Black', sans-serif; font-size: clamp(10px, 1.2vw, 13px); line-height: 1.1; }
.coll-stat .val { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em; margin-top: 5px; }
.coll-stat .sub { font-size: 8.5px; margin-top: 7px; }
.coll-stat .pbar { height: 9px; border-width: 2px; margin-top: 9px; }

.bord-grid { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 0; }
.bord-card { box-shadow: var(--sh-sm); padding: 11px 13px 13px; }
.bord-card:nth-child(odd)  { transform: rotate(-0.5deg); }
.bord-card:nth-child(even) { transform: rotate(0.5deg); }
.bord-card .bord-name { font-family: 'Archivo Black', sans-serif; font-size: clamp(11px, 1.3vw, 14px); }
.bord-card .bord-acc { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.02em; margin-top: 3px; }
.bord-card .bord-sub { font-size: 9px; }

.diag-grid { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 0; }
.diag-card { box-shadow: var(--sh-sm); padding: 12px 13px; gap: 9px; }
.diag-card:nth-child(odd)  { transform: rotate(-0.5deg); }
.diag-card:nth-child(even) { transform: rotate(0.5deg); }
.diag-card .dlabel { font-family: 'Archivo Black', sans-serif; font-size: clamp(11px, 1.3vw, 14px); }
/* Némésis : photo dans un cadre type carte (bord épais + ombre). */
.diag-nem .photo { width: 50px; height: 67px; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.diag-nem .nname { font-family: 'Archivo Black', sans-serif; font-size: clamp(12px, 1.5vw, 15px); }
/* Pastilles mvt (confusion / best / worst) : bord épais + ombre + léger tilt. */
.diag-pill, .diag-party .pname { border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); transform: rotate(-1deg); }
.diag-party .ppct { font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800; letter-spacing: -0.02em; }

/* Responsive : on GARDE la rangée de 3 (progression) + 2 colonnes (camps,
   diagnostics) à toutes les largeurs — bat les règles inline qui empilaient. */
@media (max-width: 760px) {
  .coll-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bord-grid   { grid-template-columns: 1fr 1fr; }
  .diag-grid   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .coll-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .coll-stat { padding: 8px 9px 9px; }
  .coll-stat .val { font-size: clamp(18px, 6.4vw, 28px); }
  .coll-stat .label { font-size: 9px; }
  .coll-stat .sub { font-size: 7px; letter-spacing: 0.02em; }
  .bord-grid { gap: 6px; }
  .bord-card .bord-acc { font-size: clamp(26px, 9vw, 40px); }
  .diag-grid { gap: 6px; }
  .stats-sub-chip { font-size: 12px; padding: 4px 10px 5px; }
}

/* ════════════════════════════════════════════════════════════════════════
   GRANDES SECTIONS (STATISTIQUES / POLIDEX) — titres + comportement de repli.
   Titre en Syne italique (cohérent avec le grand titre COLLECTION) + chevron
   qui pivote (langage du modal / page Succès). État replié = bouton néo-brut.
   ════════════════════════════════════════════════════════════════════════ */
.section-title {
  font-family: 'Syne', sans-serif; font-style: italic; font-weight: 800;
  gap: 13px; align-items: center;
}
.sec-label { flex: 0 0 auto; }
/* Trait après le nom = ONDE SINUSOÏDALE fine (SVG répété en X), au lieu d'un
   gros border-bottom droit (retour user). */
.section-title::after {
  border-bottom: none;
  align-self: center;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 5 Q7 0 14 5 T28 5' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
  opacity: 0.85;
}
.sec-chev {
  flex: 0 0 auto; font-style: normal; font-family: 'Space Mono', monospace;
  font-size: 0.72em; line-height: 1; opacity: 0.75;
  transition: transform 200ms var(--ease-out, ease), opacity 200ms var(--ease-out, ease);
}
.section-toggle.collapsed .sec-chev { transform: rotate(-90deg); }
/* Survol : chevron juste un peu plus marqué (pas de translate → ne contrarie pas
   la rotation à l'état replié). */
html.dlp-can-hover .section-toggle:hover .sec-chev { opacity: 1; }
/* REPLIÉ = MÊME look qu'ouvert (titre Syne + trait), seul le chevron pivote.
   On neutralise complètement l'ancien état « bouton » (fond/cadre/ombre/padding)
   qui changeait la taille et l'aspect au repli (retour user). */
.section-toggle.collapsed {
  display: flex; align-items: center; gap: 13px;
  background: transparent; border: none; box-shadow: none; padding: 0;
  /* MÊME taille de police qu'ouvert (le chrome partagé réduisait le titre replié
     à clamp(18px,2.4vw,24px) → le nom rapetissait au repli, retour user). */
  font-size: clamp(24px, 3.6vw, 34px);
}
.section-toggle.collapsed::after { display: block; }
.section-toggle.collapsed .sec-label { font-size: 1em; }
html.dlp-can-hover .section-toggle.collapsed:hover { transform: none; box-shadow: none; }
.section-toggle.collapsed:focus-visible { transform: none; box-shadow: none; }