/* ═══════════════════════════════════════════════════════════════════════════
   SUCCÈS — RAFFINEMENT V3 (Bloc B, 2026-06-03) — couche PAGE
   ───────────────────────────────────────────────────────────────────────────
   Reskin néo-brut V3 du CONTENU de la page Succès (hero, cartes, sections,
   toolbar, glossaire). Le CHROME (titre + navbars + grille) 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 ET chrome-v3.css. (cf. spec §15)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Corps + mono en Space Mono (cohérent jeu V3) ; --font-display (Archivo Black)
   conservé pour les noms de succès / titres. */
:root {
  --font-body: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
}
.app { background: transparent !important; }

/* ════════════════════════════════════════════════════════════════════════
   HERO — compact, UNE LIGNE, gros chiffre Syne + ANNEAU (pas de barre)
   ════════════════════════════════════════════════════════════════════════ */
.ach-banner {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  gap: var(--space-4);
  background: var(--yellow);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  transform: rotate(-0.6deg);
  padding: 14px 22px !important;
}
.ach-banner > div:first-child {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  flex: 1 1 auto;
  min-width: 0;
}
.ach-banner .big {
  font-family: 'Syne', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.ach-banner .big .denom { opacity: 0.4; font-weight: 800; }
.ach-banner .sub {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0;
}
/* On a choisi l'ANNEAU → la barre du hero est masquée (pas les deux). */
.ach-banner .progress-bar { display: none !important; }

/* Anneau de progression (signature du prototype V3), compact, à droite.
   conic-gradient piloté par --ach-pct (posé en JS, 0–100). */
.ach-ring {
  --ach-pct: 0;
  position: relative;
  flex-shrink: 0;
  width: clamp(74px, 13vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: var(--sh-sm);
  transform: rotate(2.4deg);
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ink) calc(var(--ach-pct) * 1%), rgba(10, 10, 10, 0.14) 0);
  transition: background 800ms var(--ease-out);
}
.ach-ring::before {
  content: '';
  position: absolute;
  inset: 11px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.ach-ring-pct {
  position: relative;
  z-index: 1;
  font-family: 'Syne', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(19px, 4vw, 26px);
  line-height: 1;
  color: var(--ink);
  /* Stroke fin couleur du fond du bloc (jaune) DERRIÈRE le texte → le « % » se
     détache nettement de l'arc d'anneau ink (retour user). */
  -webkit-text-stroke: 4px var(--yellow);
  paint-order: stroke fill;
}

/* ── Bandeau glossaire : sticker paper léger tilté ───────────────────────── */
.ach-glossary {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  transform: rotate(0.4deg);
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   TOOLBAR DE TRI — REDESIGN V3 (retour user) : plus la grosse boîte, mais un
   TOGGLE SEGMENTÉ tilté. Les 2 options sont COLLÉES dans un seul cadre néo-brut
   (séparées par un trait ink), l'active est REMPLIE en ink ; label « Trier » à côté.
   ════════════════════════════════════════════════════════════════════════ */
.ach-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* « Trier » = 1er segment-LABEL intégré DANS la pilule (fond paper-2, mono
   opacifié, non cliquable) + séparateur vers la 1re option. Cohérent avec la
   Collection et les Classements (.lb-filter-cap). */
.ach-toolbar .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: 10px 14px; background: var(--paper-2); color: var(--ink); opacity: 0.5;
}
.ach-toolbar .filters > .sort-label + .filter-pill { border-left: var(--border-thick) !important; }
/* Le groupe = UN contrôle segmenté bordé, légèrement tilté, ombre dure. */
.ach-toolbar .filters {
  display: inline-flex !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;       /* clippe le fill ink aux coins du cadre */
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  background: var(--paper);
  transform: rotate(-0.8deg);
}
.ach-toolbar .filter-pill {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.ach-toolbar .filter-pill + .filter-pill { border-left: var(--border-thick) !important; }
html.dlp-can-hover .ach-toolbar .filter-pill:hover { background: var(--paper-2) !important; color: var(--ink) !important; }
.ach-toolbar .filter-pill.active { background: var(--ink) !important; color: var(--paper) !important; }

/* ════════════════════════════════════════════════════════════════════════
   TITRES DE SECTION — icône avant le titre (PAS de carré de couleur)
   ════════════════════════════════════════════════════════════════════════ */
.cat-head {
  border-bottom: none;
  align-items: center;
  gap: 9px;
  padding-bottom: 0;
}
.cat-head .cat-dot { display: none !important; }   /* carré de couleur RETIRÉ (retour user) */
/* Icône de catégorie, dans un petit carré penché néo-brut (langage badge V3). */
.cat-head .cat-ico {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-3deg);
}
.cat-head .cat-ico .ico { width: 18px; height: 18px; }

/* COULEUR PAR CATÉGORIE (retour user) : le fond de l'icône de section = la couleur
   de fond des cartes débloquées de cette catégorie. Une seule source ici → les deux
   restent toujours raccord. */
.ach-card.unlocked[data-cat="decouverte"],   .cat-section[data-cat="decouverte"]   .cat-ico { background: #c4e3f0; }
.ach-card.unlocked[data-cat="collection"],   .cat-section[data-cat="collection"]   .cat-ico { background: #c4e6cc; }
.ach-card.unlocked[data-cat="deputes"],      .cat-section[data-cat="deputes"]      .cat-ico { background: #c9def2; }
.ach-card.unlocked[data-cat="senateurs"],    .cat-section[data-cat="senateurs"]    .cat-ico { background: #dfd3f2; }
.ach-card.unlocked[data-cat="ministres"],    .cat-section[data-cat="ministres"]    .cat-ico { background: #f0caca; }
.ach-card.unlocked[data-cat="regions_pres"], .cat-section[data-cat="regions_pres"] .cat-ico { background: #c9e3cb; }
.ach-card.unlocked[data-cat="maires"],       .cat-section[data-cat="maires"]       .cat-ico { background: #f2d8b8; }
.ach-card.unlocked[data-cat="performance"],  .cat-section[data-cat="performance"]  .cat-ico { background: #fce9a8; }
.ach-card.unlocked[data-cat="spe"],          .cat-section[data-cat="spe"]          .cat-ico { background: #dccdf0; }
.ach-card.unlocked[data-cat="confusions"],   .cat-section[data-cat="confusions"]   .cat-ico { background: #fcd0d8; }
.ach-card.unlocked[data-cat="modes"],        .cat-section[data-cat="modes"]        .cat-ico { background: #ffdcba; }
.ach-card.unlocked[data-cat="region"],       .cat-section[data-cat="region"]       .cat-ico { background: #b8e0d8; }
.ach-card.unlocked[data-cat="profession"],   .cat-section[data-cat="profession"]   .cat-ico { background: #e8d4b0; }
.ach-card.unlocked[data-cat="politique"],    .cat-section[data-cat="politique"]    .cat-ico { background: #ffe066; }
.ach-card.unlocked[data-cat="temporel"],     .cat-section[data-cat="temporel"]     .cat-ico { background: #c4cef0; }
.ach-card.unlocked[data-cat="cartes"],       .cat-section[data-cat="cartes"]       .cat-ico { background: #ddc6f0; }
.ach-card.unlocked[data-cat="meta"],         .cat-section[data-cat="meta"]         .cat-ico { background: #dad6c2; }
.cat-head h2 {
  background: var(--ink);
  color: var(--paper);
  padding: 5px 12px 6px;
  border: 3px solid var(--ink);
  box-shadow: var(--sh-sm);
  transform: rotate(-1deg);
  font-size: clamp(13px, 1.7vw, 17px);
}
html.dlp-can-hover .cat-head:hover { background: transparent; }
html.dlp-can-hover .cat-head:hover h2 { transform: rotate(-1deg) translate(-1px, -1px); }
.cat-head .cat-count {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  opacity: 0.7;
}
.cat-head .cat-chev { font-family: 'Space Mono', monospace; opacity: 0.6; }

/* ════════════════════════════════════════════════════════════════════════
   CARTES SUCCÈS — proche du prototype : cadre carré PENCHÉ à gauche
   ════════════════════════════════════════════════════════════════════════ */
.ach-icon {
  width: 54px; height: 54px;
  border: var(--border-thick);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);          /* le petit cadre carré « un peu penché » (retour user) */
  background: var(--paper);
  transition: transform var(--dur-fast) var(--ease-out);
}
/* Fond du CADRE D'ICÔNE = RANG du succès (retour user) ; glyphe ink dessus.
   bronze < silver < gold < platinum. */
.ach-card.unlocked .ach-icon { color: var(--ink); }
.ach-card.unlocked[data-tier="bronze"]   .ach-icon { background: #cd8b5e; }
.ach-card.unlocked[data-tier="silver"]   .ach-icon { background: #c2c8d0; }
.ach-card.unlocked[data-tier="gold"]     .ach-icon { background: #f3c52e; }
.ach-card.unlocked[data-tier="platinum"] .ach-icon { background: #9bd6e8; }
.ach-card.locked .ach-icon {
  background: var(--paper);
  border-color: rgba(10, 10, 10, 0.3);
  box-shadow: 3px 3px 0 rgba(10, 10, 10, 0.18);
}
html.dlp-can-hover .ach-card.unlocked:hover .ach-icon { transform: rotate(-3deg) scale(1.04); }
.ach-icon .ico { width: 26px; height: 26px; }

.ach-meta-name { letter-spacing: 0.01em; }
.ach-meta-desc { font-family: 'Space Mono', monospace; opacity: 0.9; }
.ach-date { font-family: 'Space Mono', monospace; }
.ach-card .ach-pcount { font-family: 'Space Mono', monospace; }
/* Tampon ✓ débloqué : pastille néo-brut tiltée */
.ach-check {
  transform: rotate(6deg);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ── Bouton « Charger plus » ─────────────────────────────────────────────── */
.ach-section-more { font-family: 'Space Mono', monospace; }
.ach-section-more-btn { font-family: var(--font-display); }

/* ── Mobile : hero garde sa ligne (number + ring), wrap propre ───────────── */
@media (max-width: 520px) {
  .ach-banner { padding: 12px 16px !important; }
  .ach-banner .big { font-size: clamp(30px, 11vw, 46px); }
}