/*
Theme Name: Collectionniste
Description: Thème sur mesure de Collectionniste. Design system maison, zéro dépendance, zéro Gutenberg.
Author: Clément Quatravaux
Version: 2.0.0
Text Domain: pokeguide

=============================================================================
  CHARTE GRAPHIQUE — SOMMAIRE
=============================================================================
  01. Jetons : couleurs           (noir + une seule couleur, l'écarlate)
  02. Jetons : espacement         (échelle stricte de 8 px)
  03. Jetons : rayons et traits   (8 px partout, sans exception)
  04. Jetons : typographie        (échelle modulaire, deux familles)
  05. Jetons : élévation et mouvement
  06. Réinitialisation et base
  07. Mise en page
  08. Typographie appliquée
  09. Navigation
  10. Héros et chiffres clés
  11. Boutons et liens
  12. Étiquettes et badges
  13. Cartes Pokémon (grilles)
  14. Fiche carte
  15. Indicateurs de cote
  16. Blocs de prix
  17. Graphiques
  18. Produits scellés
  19. Listes, tableaux, sommaires
  20. Formulaires
  21. Pied de page
  22. Utilitaires et nuancier
=============================================================================
*/

/* ==========================================================================
   01. JETONS — COULEURS
   Règle absolue : du noir, du blanc, et UNE couleur (l'écarlate) déclinée.
   Aucune autre teinte n'entre dans le système. Les états (hausse, baisse,
   mise en avant) se distinguent par la valeur — plein, voilé, contour —
   jamais par l'ajout d'une couleur.
   ========================================================================== */
:root {
  /* L'unique couleur : un indigo profond, du plus clair au plus sombre */
  --c-50:  #f2f4fb;
  --c-100: #e3e8f6;
  --c-200: #c5cfec;
  --c-300: #9aabdd;
  --c-400: #5c72c0;
  --c-500: #23347a;  /* teinte de marque */
  --c-600: #1c2a66;
  --c-700: #162152;
  --c-800: #10183c;
  --c-900: #0a1028;

  /* Neutres froids : aucun blanc pur, jamais */
  --n-0:   #fdfdfe;  /* surface la plus claire */
  --n-25:  #fafbfd;
  --n-50:  #f5f6f8;  /* fond de page */
  --n-100: #eceef3;
  --n-200: #dde1e9;
  --n-300: #c2c8d5;
  --n-400: #838b9c;
  --n-500: #5f6879;
  --n-600: #4d5565;
  --n-700: #353c49;
  --n-800: #20242e;
  --n-900: #12151b;  /* ardoise, jamais le noir pur */

  /* Rôles sémantiques : les composants ne référencent QUE ceux-ci */
  --page:          var(--n-50);
  --fond:          var(--n-0);
  --fond-doux:     var(--n-100);
  --fond-appuye:   var(--n-100);
  --encre:         var(--n-900);
  --encre-douce:   var(--n-600);
  --encre-tenue:   var(--n-500);  /* le palier 400 ne tenait pas le 4,5:1 sur les fonds voilés */
  --trait:         var(--n-200);
  --trait-fort:    var(--n-900);
  --accent:        var(--c-500);
  --accent-sombre: var(--c-700);
  --accent-clair:  var(--c-200);
  --accent-voile:  var(--c-50);
}

/* ==========================================================================
   02. JETONS — ESPACEMENT
   Une seule échelle, multiple de 8. Le 4 px sert uniquement aux
   ajustements optiques internes des petits composants.
   ========================================================================== */
:root {
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 16px;
  --e-4: 24px;
  --e-5: 32px;
  --e-6: 48px;
  --e-7: 64px;
  --e-8: 96px;
}

/* ==========================================================================
   03. JETONS — RAYONS ET TRAITS
   Un seul rayon : 8 px. Sur toute l'interface, sans exception, y compris
   les badges et les images. C'est la signature de forme du site.
   ========================================================================== */
:root {
  --rayon: 8px;
  --trait-fin: 1px solid var(--trait);
  --trait-appuye: 2px solid var(--trait-fort);
}

/* ==========================================================================
   04. JETONS — TYPOGRAPHIE
   Une seule famille, deux tailles de dessin : Inter Tight pour les titres
   (graisses hautes, approche resserrée) et Inter pour tout le reste.
   Les chiffres utilisent les mêmes fontes en chasse tabulaire, pour que
   les prix s'alignent en colonne. Échelle modulaire de raison 1,25.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
}

:root {
  --f-titre: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-chiffre: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-2xs: 0.6875rem; /* 11 px — mentions, unités */
  --t-xs:  0.75rem;   /* 12 px — étiquettes, surtitres */
  --t-sm:  0.875rem;  /* 14 px — texte secondaire */
  --t-md:  1rem;      /* 16 px — texte courant */
  --t-lg:  1.125rem;  /* 18 px — chapô */
  --t-xl:  1.375rem;  /* 22 px — titre de bloc */
  --t-2xl: 1.75rem;   /* 28 px — titre de section */
  --t-3xl: 2.25rem;   /* 36 px — titre de page */
  --t-4xl: 3rem;      /* 48 px — titre de héros */

  --i-serre:   1.1;   /* titres */
  --i-normal:  1.45;  /* interface */
  --i-lecture: 1.65;  /* paragraphes */

  --lettre-titre: -0.025em;
  --lettre-etiquette: 0.08em;
}

/* ==========================================================================
   05. JETONS — ÉLÉVATION ET MOUVEMENT
   Le relief vient des traits, pas des ombres. Une seule ombre discrète,
   réservée au survol des éléments cliquables.
   ========================================================================== */
:root {
  --ombre-survol: 0 4px 16px -8px rgb(16 16 16 / 35%);
  --duree: 0.16s;
  --courbe: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   06. RÉINITIALISATION ET BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--e-8); -webkit-text-size-adjust: 100%; }

body {
  background: var(--page);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-md);
  line-height: var(--i-lecture);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
img { border-radius: var(--rayon); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-sombre); }

:focus-visible { outline: var(--trait-appuye); outline-offset: 2px; border-radius: var(--rayon); }
::selection { background: var(--accent-clair); color: var(--encre); }

/* ==========================================================================
   07. MISE EN PAGE
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(var(--e-3), 4vw, var(--e-5));
}

.section { padding-block: clamp(var(--e-5), 6vw, var(--e-7)); }
.section > .wrap > h2 { margin-bottom: var(--e-2); }
.sous-titre { color: var(--encre-douce); max-width: 60ch; margin-bottom: var(--e-4); }

/* ==========================================================================
   08. TYPOGRAPHIE APPLIQUÉE
   ========================================================================== */
h1, h2, h3, .brand, .ext-nom {
  font-family: var(--f-titre);
  line-height: var(--i-serre);
  letter-spacing: var(--lettre-titre);
  text-wrap: balance;
}

h1 { font-weight: 800; font-size: clamp(var(--t-3xl), 5.5vw, var(--t-4xl)); }
h2 { font-weight: 700; font-size: clamp(var(--t-xl), 3vw, var(--t-2xl)); }
h3 { font-weight: 650; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -0.015em; }

.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--e-3); }
.prose h2 { margin: var(--e-5) 0 var(--e-2); }
.prose a { color: var(--accent-sombre); }

.mono { font-family: var(--f-chiffre); font-size: 0.9em; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.kicker {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--e-2);
}

.lede { font-size: var(--t-lg); color: var(--encre-douce); max-width: 60ch; margin-top: var(--e-3); }

/* ==========================================================================
   09. NAVIGATION
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--trait-fin);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-2);
  min-height: 56px;
}

.brand { font-weight: 900; font-size: var(--t-xl); text-decoration: none; }
.brand b { color: var(--accent); font-weight: inherit; }

.nav { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-sm); font-weight: 600; flex-wrap: wrap; }

.nav a {
  text-decoration: none;
  color: var(--encre-douce);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--rayon);
  border: 1px solid transparent;
}

.nav a:hover { color: var(--encre); background: var(--fond-appuye); }
.nav a[aria-current] { color: var(--encre); border-color: var(--trait); }

.maj-badge {
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--accent-sombre);
  background: var(--accent-voile);
  border: 1px solid var(--accent-clair);
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-2);
  white-space: nowrap;
}

.fil { font-size: var(--t-sm); color: var(--encre-tenue); }
.fil a { color: var(--encre-douce); }

/* ==========================================================================
   10. HÉROS ET CHIFFRES CLÉS
   ========================================================================== */
.hero { padding-block: clamp(var(--e-5), 7vw, var(--e-8)) clamp(var(--e-4), 4vw, var(--e-6)); }

.chiffres { border-block: var(--trait-fin); background: var(--fond-doux); }

.chiffres .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--e-3);
  padding-block: var(--e-4);
  text-align: center;
}

.chiffres strong {
  display: block;
  font-family: var(--f-titre);
  font-weight: 750;
  font-size: var(--t-2xl);
  line-height: 1.1;
}

.chiffres span { font-size: var(--t-xs); color: var(--encre-douce); text-transform: uppercase; letter-spacing: var(--lettre-etiquette); }

/* ==========================================================================
   11. BOUTONS ET LIENS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
  background: var(--encre);
  color: var(--fond);
  text-decoration: none;
  font-weight: 650;
  font-size: var(--t-sm);
  padding: var(--e-2) var(--e-4);
  min-height: 44px;
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.btn:hover { background: var(--accent-sombre); border-color: var(--accent-sombre); color: var(--fond); }

.btn.secondaire { background: transparent; color: var(--encre); border-color: var(--trait); }
.btn.secondaire:hover { background: var(--fond-appuye); color: var(--encre); border-color: var(--encre); }

.btn-acheter {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  background: var(--accent);
  color: var(--n-0);
  font-weight: 700;
  font-size: var(--t-md);
  text-decoration: none;
  padding: var(--e-3) var(--e-4);
  min-height: 52px;
  border-top: var(--trait-fin);
  transition: background var(--duree) var(--courbe);
}

.btn-acheter:hover { background: var(--accent-sombre); color: var(--n-0); }

.lien-cm { display: inline-block; margin-top: var(--e-3); font-weight: 650; color: var(--accent-sombre); }

/* ==========================================================================
   12. ÉTIQUETTES ET BADGES
   Tous en rayon 8 px, tous en noir ou en écarlate.
   ========================================================================== */
.etiquette, .stat-tete, .produit-prix-duo dt, .details span {
  font-size: var(--t-xs);
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--encre-douce);
}

.badge-pct, .pastille-boosters, .pastille-sortie, .drapeau, .ecart, .type-badge {
  display: inline-block;
  font-size: var(--t-2xs);
  font-weight: 700;
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-2);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.3;
}

/* Hausse : accent plein. Baisse : accent voilé. Jamais de vert ni d'orange. */
.badge-pct.up { color: var(--n-0); background: var(--accent); }
.badge-pct.down { color: var(--accent-sombre); background: var(--accent-voile); border-color: var(--accent-clair); }

.pastille-boosters { color: var(--accent-sombre); background: var(--accent-voile); border-color: var(--accent-clair); }
.pastille-sortie, .type-badge { color: var(--encre-douce); background: var(--fond-appuye); border-color: var(--trait); }
.drapeau { color: var(--n-0); background: var(--encre); font-family: var(--f-chiffre); }
.ecart { color: var(--n-0); background: var(--encre); margin-left: var(--e-2); }

/* ==========================================================================
   13. CARTES POKÉMON (GRILLES)
   ========================================================================== */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--e-3);
}

.carte-cell {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-2);
  transition: border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.carte-cell:hover {
  border-color: var(--encre);
  transform: translateY(-2px);
  box-shadow: var(--ombre-survol);
  color: inherit;
}

.carte-cell img { width: 100%; }
.carte-cell .numero { display: block; margin-top: var(--e-2); font-size: var(--t-2xs); color: var(--encre-tenue); }
.carte-cell .nom { display: block; font-weight: 650; font-size: var(--t-sm); line-height: 1.25; }
.carte-cell .prix { display: block; margin-top: var(--e-1); font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   14. FICHE CARTE
   ========================================================================== */
.fiche-hero { background: var(--fond-doux); border-bottom: var(--trait-fin); }

.fiche-hero-grille {
  display: grid;
  gap: clamp(var(--e-4), 4vw, var(--e-6));
  padding-block: clamp(var(--e-4), 4vw, var(--e-6));
  align-items: center;
}

@media (min-width: 45rem) { .fiche-hero-grille { grid-template-columns: minmax(14rem, 20rem) 1fr; } }

.fiche-hero .visuel img {
  border: var(--trait-fin);
  margin-inline: auto;
  max-width: 20rem;
  transition: transform var(--duree) var(--courbe);
}

.fiche-hero .visuel img:hover { transform: translateY(-4px); }
.fiche-hero .fil { margin-bottom: var(--e-3); }

.fiche-corps { max-width: 56rem; padding-bottom: var(--e-6); }

.h1-numero {
  display: inline-block;
  font-family: var(--f-chiffre);
  font-size: 0.34em;
  font-weight: 600;
  color: var(--encre-douce);
  background: var(--fond-appuye);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: 0.3em 0.6em;
  vertical-align: 0.5em;
}

.nom-en { color: var(--encre-douce); font-size: var(--t-sm); margin-top: var(--e-2); }

.h2-fiche {
  font-size: var(--t-xl);
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: var(--trait-fin);
}

.analyse { margin-top: var(--e-3); }

.voisines {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-5);
  padding-top: var(--e-3);
  border-top: var(--trait-fin);
  font-size: var(--t-sm);
  font-weight: 650;
}

.voisines a { text-decoration: none; }
.voisines .droite { text-align: right; margin-left: auto; }

.pokedex {
  margin-top: var(--e-4);
  font-weight: 450;
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--encre-douce);
  border-left: 2px solid var(--accent);
  padding-left: var(--e-3);
}

/* ==========================================================================
   15. INDICATEURS DE COTE
   ========================================================================== */
.cote-bar {
  margin-top: var(--e-3);
  display: flex;
  flex-wrap: wrap;
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  overflow: hidden;
}

.cote-bar .stat {
  flex: 1 1 8rem;
  min-width: 7.5rem;
  padding: var(--e-3);
  border-right: var(--trait-fin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-2);
}

.cote-bar .stat:last-of-type { border-right: 0; }
.cote-bar .stat strong { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }

.cote-bar .stat.principale { background: var(--fond-appuye); }
.cote-bar .stat.principale strong { font-family: var(--f-titre); font-weight: 780; font-size: var(--t-2xl); color: var(--accent-sombre); }
.cote-bar .stat.principale .badge-pct { align-self: flex-start; }

.stat-tete { display: inline-flex; align-items: center; gap: var(--e-1); font-weight: 650; line-height: 1.25; }
.icone { width: 0.95rem; height: 0.95rem; flex: none; }

.cote-note { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--encre-tenue); }
.cote-note a { color: var(--encre-douce); }

/* ==========================================================================
   16. BLOCS DE PRIX
   ========================================================================== */
.cotes { display: grid; gap: var(--e-3); margin-top: var(--e-4); }

.prix-bloc {
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-3);
}

.prix-bloc h3 { font-size: var(--t-md); margin-bottom: var(--e-2); display: flex; align-items: center; gap: var(--e-2); }
.prix-bloc.fr { border-color: var(--encre); }
.prix-bloc.estimation { border-style: dashed; }

.grand { font-family: var(--f-titre); font-weight: 780; font-size: var(--t-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.grand-duo { display: flex; gap: var(--e-5); flex-wrap: wrap; }
.maj { font-size: var(--t-xs); color: var(--encre-tenue); margin-top: var(--e-2); }

.details { display: flex; gap: var(--e-4); margin-top: var(--e-3); flex-wrap: wrap; font-size: var(--t-sm); font-weight: 650; }
.details span { display: block; font-weight: 400; }

.offres-fr { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-3); }

.offre-fr {
  background: var(--fond-appuye);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-2);
  font-size: var(--t-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.offre-fr small { color: var(--encre-tenue); font-weight: 500; margin-left: var(--e-1); }

.legende { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--encre-douce); }
.legende summary { cursor: pointer; font-weight: 650; color: var(--encre); }
.legende ul { margin: var(--e-2) 0 0 var(--e-3); display: grid; gap: var(--e-1); }

/* ==========================================================================
   17. GRAPHIQUES
   Série principale en écarlate, série secondaire en noir. Rien d'autre.
   ========================================================================== */
.graphe-bloc, .courbe-bloc {
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-4);
}

.courbe { width: 100%; height: auto; }
.courbe-legende { font-size: 11px; fill: var(--encre-tenue); font-family: var(--f-chiffre); }
.legende-series { display: flex; gap: var(--e-4); margin-top: var(--e-2); font-size: var(--t-xs); color: var(--encre-douce); }
.legende-series i { display: inline-block; width: 1em; height: 2px; margin-right: var(--e-1); vertical-align: middle; }

/* ==========================================================================
   18. PRODUITS SCELLÉS
   ========================================================================== */
.produits-grille {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: var(--e-3);
}

.produit {
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.produit:hover { border-color: var(--encre); transform: translateY(-2px); box-shadow: var(--ombre-survol); }
.produit img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; background: var(--fond-appuye); }
.produit-corps { padding: var(--e-3); display: flex; flex-direction: column; flex: 1; }
.produit-corps h3 { min-height: 2.4em; }
.produit-meta { display: flex; align-items: center; gap: var(--e-1); margin-top: var(--e-2); flex-wrap: wrap; min-height: 1.8rem; }

.produit-prix-duo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1) var(--e-3);
  align-items: baseline;
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: var(--trait-fin);
}

.produit-prix-duo dt { white-space: nowrap; }
.produit-prix-duo dd { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--t-sm); white-space: nowrap; text-align: right; }
.produit-prix-duo dd.revente { color: var(--accent-sombre); font-size: var(--t-md); }
.produit-contenu { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--encre-douce); }
.produits-suite-lien { margin-top: var(--e-3); }
.produits-suite-lien .btn { margin-top: 0; }

/* ==========================================================================
   19. LISTES, TABLEAUX, SOMMAIRES
   ========================================================================== */
.infos { margin-top: var(--e-3); border-top: var(--trait-fin); }

.infos div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-2);
  border-bottom: var(--trait-fin);
  font-size: var(--t-sm);
}

.infos dt { color: var(--encre-douce); }
.infos dd { font-weight: 650; text-align: right; }
.lexique dd { max-width: 48ch; font-weight: 400; }
.lexique div { align-items: start; }

/* Rangée de liens d'extensions (page 404). */
.liens-extensions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.liens-extensions .btn { margin-top: 0; }

/* Une définition qui fait plusieurs lignes se lit alignée à gauche : le drapeau
   à droite hache la lecture. Les valeurs courtes des fiches gardent leur fer à
   droite, qui sert à comparer d'une ligne à l'autre. */
.prose .infos dd { text-align: left; font-weight: 400; flex: 1 1 auto; }
.prose .infos div { align-items: start; }
.prose .infos dt { flex: 0 0 auto; min-width: 12ch; }

.attaques { list-style: none; margin-top: var(--e-2); }

.attaques li {
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-2) var(--e-3);
}

.attaques li + li { margin-top: var(--e-2); }
.attaque-tete { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.attaque-tete .cout { display: inline-flex; gap: var(--e-1); }
.attaque-tete .degats { margin-left: auto; font-weight: 750; font-family: var(--f-chiffre); }
.attaques .effet { margin-top: var(--e-1); font-size: var(--t-sm); color: var(--encre-douce); }

.movers { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .movers { grid-template-columns: 1fr 1fr; } }
.movers h3 { margin-bottom: var(--e-2); }
.movers ul { list-style: none; }
.movers li + li { margin-top: var(--e-1); }

.movers a {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-2) var(--e-3);
  text-decoration: none;
  transition: border-color var(--duree) var(--courbe);
}

.movers a:hover { border-color: var(--encre); }
.movers .nom { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
.movers .prix { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }

.extensions { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.extension {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  background: var(--fond);
  border: var(--trait-fin);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: var(--e-3);
  text-decoration: none;
  transition: border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}

.extension:hover { transform: translateX(2px); border-color: var(--encre); border-left-color: var(--accent); }
.ext-nom { font-weight: 750; font-size: var(--t-md); }
.ext-meta { font-size: var(--t-xs); color: var(--encre-douce); }

.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: var(--e-3) 0 var(--e-2);
  position: sticky;
  top: 56px;
  z-index: 30;
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  backdrop-filter: blur(8px);
  padding-block: var(--e-2);
}

.sommaire a {
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 650;
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-2);
}

.sommaire a:hover { border-color: var(--encre); color: var(--encre); }

/* ==========================================================================
   20. FORMULAIRES
   ========================================================================== */
.filtre-libelle { display: block; font-size: var(--t-sm); font-weight: 650; color: var(--encre-douce); margin: var(--e-4) 0 var(--e-1); }

.filtre-cartes, input[type="search"], input[type="text"], input[type="number"], select {
  width: 100%;
  max-width: 28rem;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--encre);
  background: var(--fond);
  border: var(--trait-fin);
  border-radius: var(--rayon);
  padding: var(--e-2) var(--e-3);
  min-height: 44px;
}

.filtre-cartes:focus, input:focus, select:focus { outline: none; border-color: var(--encre); }
.filtre-cartes::placeholder { color: var(--encre-tenue); }

/* ==========================================================================
   21. PIED DE PAGE
   ========================================================================== */
.colophon {
  margin-top: clamp(var(--e-6), 8vw, var(--e-8));
  border-top: var(--trait-fin);
  background: var(--fond-doux);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.colophon .wrap { padding-block: var(--e-5); display: grid; gap: var(--e-2); }
.colophon a { color: var(--encre-douce); }

/* ==========================================================================
   22. UTILITAIRES ET NUANCIER
   ========================================================================== */
.visuel-absent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--encre-tenue);
  background: var(--fond-appuye);
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: var(--e-2);
  aspect-ratio: 63 / 88;
}

.pastille {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 2px;
  background: var(--encre);
  vertical-align: -0.05em;
}

/* Nuancier vivant de la charte (page /charte-graphique/) */
.nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--e-2); margin-top: var(--e-3); }
.nuance { border: var(--trait-fin); border-radius: var(--rayon); overflow: hidden; }
.nuance b { display: block; height: 3.5rem; }
.nuance span { display: block; padding: var(--e-1) var(--e-2); font-family: var(--f-chiffre); font-size: var(--t-2xs); color: var(--encre-douce); }
.demo { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-top: var(--e-3); }
.demo-bloc { border: var(--trait-fin); border-radius: var(--rayon); padding: var(--e-4); margin-top: var(--e-3); }
.echelle-demo { display: flex; align-items: flex-end; gap: var(--e-2); margin-top: var(--e-3); }
.echelle-demo i { display: block; background: var(--accent); border-radius: var(--rayon); width: var(--e-4); }
.echelle-typo > * { margin-top: var(--e-2); }

/* Logos d'extension */
.logo-set { max-width: min(20rem, 70%); height: auto; margin-bottom: var(--e-3); border-radius: 0; }
.logo-set.petit { max-width: 9rem; margin-bottom: var(--e-2); }
.logo-set-lien { display: inline-block; }
.ext-logo { max-width: 7.5rem; height: auto; margin-bottom: var(--e-1); border-radius: 0; }

/* Badges de légalité en tournoi */
.badge-legal {
  display: inline-block;
  font-size: var(--t-2xs);
  font-weight: 700;
  border-radius: var(--rayon);
  padding: var(--e-1) var(--e-2);
  margin-left: var(--e-1);
  border: 1px solid var(--trait);
  background: var(--fond-appuye);
  color: var(--encre-tenue);
}
.badge-legal.oui { border-color: var(--accent-clair); background: var(--accent-voile); color: var(--accent-sombre); }

/* Le héros de fiche et les bandeaux reposent sur le fond de page */
.fiche-hero, .chiffres, .colophon { background: var(--fond-doux); }
.masthead { background: color-mix(in srgb, var(--page) 92%, transparent); }
.sommaire { background: color-mix(in srgb, var(--page) 94%, transparent); }