/* PrixCarte : système de design (cahier § 7). Un seul fichier : jetons, base, composants, pages.
   Idée directrice : l'étiquette de prix. Dans une boutique de cartes, chaque carte rangée en pochette porte son
   étiquette ; ici, chaque vignette porte la sienne, et la fiche montre « la cote » en grand. Le reste reste sobre.
   Couleurs : le rouge franc de PrixCarte, l'encre bleu marine du dos des cartes, un papier froid. Mode sombre automatique.
   Police : Archivo, hébergée par le site ; la LARGEUR fait la hiérarchie (titres et prix élargis, texte normal).
   Session 22 : piste A « Étiquette » égayée (choix du propriétaire, 18/10/2026, sur maquettes) : l'étiquette devient
   jaune soleil, poinçonnée, coin coupé ; titres à pleine largeur ; pastilles de couleur ; filet rouge sous l'en-tête ;
   en-tête intelligent et méga menu. Sources des maquettes : docs/maquettes-s22/. */

/* ── Police ──────────────────────────────────────────────────────────────────────────────────────────── */
/* « optional » + préchargement (layout.php, session 22) : préchargée, Archivo arrive presque toujours avant le 1er affichage ;
   en retard (machine chargée), la police de secours reste pour cette page : jamais de décalage. « swap » faisait bouger
   toute la page (titres élargis à 125 % recalés : CLS 0,68 sur le Pokédex sous charge, essai 32, 18/10/2026). */
@font-face {
  font-family: "Archivo";
  src: url("../polices/archivo-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: optional;
}
/* Police de secours aux mêmes mesures : rien ne bouge si Archivo arrive en retard. */
@font-face {
  font-family: "Archivo secours";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 101%;
  ascent-override: 88%;
  descent-override: 21%;
}

/* ── Jetons ──────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --papier: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #e9edf4;
  --encre: #172036;
  --encre-2: #4e5870;
  --trait: #d9deea;
  --rouge: #d3001b;
  --rouge-fonce: #a80016;
  --rouge-texte: #c2001a;
  --sur-rouge: #ffffff;
  --hausse: #0a7a4f;
  --baisse: #b0102a;
  /* L'étiquette jaune soleil (session 22) : encre marine dessus, 12,4:1 ; la même en sombre. */
  --soleil: #ffd23a;
  --soleil-bord: #c99a00;
  /* Viseur du scanner (18/10/2026, toujours sur fond noir) : cadre vert vif, conseil blanc sur vert foncé 6,6:1. */
  --viseur-bon: #3ddc84;
  --viseur-bon-fond: #0a6b45;
  --etiquette: var(--soleil);
  --etiquette-encre: #172036;
  --trait-fort: #b3bccd;
  --pastille-fond: #fff1c2;
  --pastille-encre: #7a4b00;
  --focus: #1d4ed8;
  --boutique: #1f5fbf;
  --ombre-carte: 0 1px 2px rgb(23 32 54 / .18), 0 6px 16px -8px rgb(23 32 54 / .35);
  --ombre-panneau: 0 18px 40px -16px rgb(23 32 54 / .4);

  --police: "Archivo", "Archivo secours", system-ui, sans-serif;
  --large: 118%;
  --tres-large: 125%;

  --t-xs: .8125rem;
  --t-s: .875rem;
  --t-m: 1rem;
  --t-l: 1.1875rem;
  --t-xl: 1.4375rem;
  --t-2xl: 1.8125rem;
  --t-3xl: 2.25rem;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;

  --rayon: 14px;
  --rayon-petit: 10px;
  /* Coins d'une vraie carte : 3 mm sur 63 × 88 mm. */
  --coin-carte: 4.8% / 3.4%;
  --rayon-pastille: 999px;
  --cadre: 1200px;
  --barre-bas: 64px;
  --entete-h: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #0d1426;
    --surface: #151e35;
    --surface-2: #1c2741;
    --encre: #eef1f8;
    --encre-2: #a9b2c8;
    --trait: #273250;
    --rouge-texte: #ff6b7d;
    --hausse: #45d39b;
    --baisse: #ff8597;
    --etiquette: var(--soleil);
    --trait-fort: #3a4766;
    --pastille-fond: #3a3112;
    --pastille-encre: #ffd23a;
    --ombre-panneau: 0 18px 40px -16px rgb(0 0 0 / .7);
    --focus: #8fb4ff;
  --boutique: #7fa8ff;
    --boutique: #7fa8ff;
    --ombre-carte: 0 1px 2px rgb(0 0 0 / .5), 0 8px 20px -8px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #0d1426;
  --surface: #151e35;
  --surface-2: #1c2741;
  --encre: #eef1f8;
  --encre-2: #a9b2c8;
  --trait: #273250;
  --rouge-texte: #ff6b7d;
  --hausse: #45d39b;
  --baisse: #ff8597;
  --etiquette: var(--soleil);
  --trait-fort: #3a4766;
  --pastille-fond: #3a3112;
  --pastille-encre: #ffd23a;
  --ombre-panneau: 0 18px 40px -16px rgb(0 0 0 / .7);
  --focus: #8fb4ff;
  --boutique: #7fa8ff;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / .5), 0 8px 20px -8px rgb(0 0 0 / .7);
}

/* ── Base ────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--encre);
  background: var(--papier);
  font-variant-numeric: lining-nums;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-stretch: var(--tres-large); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
p { margin: 0; }
p + p { margin-top: var(--e-3); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cache-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chiffres { font-variant-numeric: tabular-nums lining-nums; }
.cadre { width: 100%; max-width: var(--cadre); margin-inline: auto; padding-inline: var(--e-4); }
.aller-contenu { position: absolute; left: var(--e-2); top: -60px; z-index: 50; padding: var(--e-2) var(--e-3); background: var(--encre); color: var(--papier); border-radius: var(--rayon-petit); }
.aller-contenu:focus { top: var(--e-2); }

/* ── Bandeau de maintenance ──────────────────────────────────────────────────────────────────────────── */
.bandeau-maintenance { margin: 0; padding: 6px var(--e-4); background: var(--encre); color: var(--papier); text-align: center; font-size: var(--t-s); font-weight: 600; }

/* ── En-tête intelligent (session 22) ────────────────────────────────────────────────────────────────── */
/* Collé en haut ; site.js (section 18) le cache en descendant (.entete--cache) et le rend dès qu'on remonte. Le filet
   rouge du bas est le bord de l'étiquette. Sans JavaScript, il reste simplement collé en haut. */
.entete { position: sticky; top: 0; z-index: 35; background: var(--surface); box-shadow: inset 0 -3px 0 var(--rouge);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.entete--cache { transform: translateY(-100%); }
.entete__ligne { display: flex; align-items: center; gap: 6px; min-height: var(--entete-h); padding-bottom: 3px; }
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-right: auto; text-decoration: none; color: var(--encre); }
.bouton-loupe { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 44px; height: 44px; padding: 0 10px; border: 0;
  border-radius: var(--rayon-pastille); background: var(--surface-2); color: var(--encre); cursor: pointer; text-decoration: none; font-weight: 700; font-size: var(--t-s); }
.bouton-loupe:hover { background: var(--trait); }
.bouton-loupe .ic { width: 22px; height: 22px; }
.bouton-scan__texte, .entete__mega, .entete__recherche, .entete__compte { display: none; }

/* Méga menu (ordinateur) : un panneau par groupe, sous l'en-tête, sur toute la largeur. */
.mega { position: absolute; inset: 100% 0 auto; padding-block: var(--e-5) var(--e-6); background: var(--surface); color: var(--encre);
  border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-panneau); }
.mega[hidden] { display: none; }
.mega__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.mega__grille--trois { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 260px; }
.mega__liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px var(--e-4); margin: 0; padding: 0; list-style: none; align-content: start; }
.mega__liens a { display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: 8px 10px; border-radius: var(--rayon-petit); color: var(--encre); text-decoration: none; }
.mega__liens a:hover, .mega__liens a[aria-current="page"] { background: var(--surface-2); }
.mega__ic, .menu-liste .ic { flex: none; }
.mega__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pastille-fond); color: var(--pastille-encre); }
.mega__nom { display: block; font-weight: 700; }
.mega__aide { display: block; font-size: var(--t-s); color: var(--encre-2); }
.mega__titre { display: block; margin: 0 0 var(--e-2); font-size: var(--t-s); font-weight: 700; color: var(--encre-2); }
.mega__series ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--e-4); }
.mega__series a { display: flex; align-items: center; min-height: 36px; font-size: var(--t-s); font-weight: 600; color: var(--encre); text-decoration: none; break-inside: avoid; }
.mega__series a:hover { color: var(--rouge-texte); text-decoration: underline; }
.mega__marche { display: flex; flex-direction: column; gap: 4px; padding: var(--e-4); border-radius: var(--rayon); background: var(--pastille-fond); color: var(--encre); text-decoration: none; align-self: start; }
.mega__indice { font-size: 2rem; font-weight: 800; font-stretch: var(--tres-large); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mega__marche .courbe-mini { margin-top: var(--e-2); }

/* Petite courbe (méga menu, accueil). */
.courbe-mini { width: 100%; height: 64px; overflow: visible; }
.courbe-mini__ligne { fill: none; stroke: var(--rouge-texte); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.courbe-mini__aire { fill: var(--rouge-texte); opacity: .12; }

/* ── Barre du bas (téléphone) : Scanner au centre ───────────────────────────────────────────────────── */
.barre-bas {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--barre-bas) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--trait);
}
.barre-bas a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; text-decoration: none; color: var(--encre-2); font-size: .75rem; font-weight: 600; }
.barre-bas a[aria-current="page"] { color: var(--rouge-texte); }
.barre-bas a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--rouge); }
.barre-bas .ic { width: 23px; height: 23px; }
.barre-bas a.barre-bas__scan { color: var(--encre); }
.barre-bas__scan .ic { width: 48px; height: 48px; margin-top: -20px; padding: 12px; border-radius: 50%; background: var(--rouge); color: var(--sur-rouge); box-shadow: 0 0 0 4px var(--surface), 0 4px 10px -2px rgb(23 32 54 / .45); }
.barre-bas .compteur { position: absolute; top: 4px; left: calc(50% + 6px); }
body { padding-bottom: calc(var(--barre-bas) + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
  :root { --entete-h: 68px; }
  .barre-bas { display: none; }
  body { padding-bottom: 0; }
  h1 { font-size: var(--t-3xl); }
  .entete__compte { display: inline-flex; }
  .bouton-scan { padding: 0 14px; background: var(--rouge); color: var(--sur-rouge); }
  .bouton-scan:hover { background: var(--rouge-fonce); }
  .bouton-scan__texte { display: inline; }
}
@media (min-width: 1024px) {
  .logo { margin-right: var(--e-4); }
  .entete__mega { display: flex; gap: 2px; margin-right: auto; }
  .entete__onglet { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--rayon-pastille); background: none;
    color: var(--encre); font: inherit; font-size: var(--t-s); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
  .entete__onglet:hover, .entete__onglet[aria-expanded="true"] { background: var(--surface-2); }
  .entete__chevron { width: 16px; height: 16px; transition: transform .2s; }
  .entete__onglet[aria-expanded="true"] .entete__chevron { transform: rotate(180deg); }
}
@media (min-width: 1200px) {
  /* Le champ de recherche prend la place de la loupe : on cherche sans rien ouvrir. */
  .entete__recherche { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; min-width: 200px; height: 44px; padding: 0 8px 0 14px;
    border-radius: var(--rayon-pastille); background: var(--surface-2); border: 1.5px solid transparent; color: var(--encre-2); }
  .entete__recherche:focus-within { border-color: var(--focus); background: var(--surface); }
  .entete__recherche input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: var(--encre); font: inherit; outline: none; }
  .entete__recherche input::placeholder { color: var(--encre-2); opacity: 1; }
  .entete__touche { font: inherit; font-size: var(--t-xs); padding: 1px 7px; border-radius: 6px; border: 1px solid var(--trait-fort); color: var(--encre-2); }
  .entete__ligne > .bouton-loupe[data-loupe] { display: none; }
}

/* ── Contenu ─────────────────────────────────────────────────────────────────────────────────────────── */
main { display: block; padding-block: var(--e-4) var(--e-7); }
.section { margin-top: var(--e-7); }
.section__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.section__tete a { font-weight: 600; font-size: var(--t-s); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.intro { color: var(--encre-2); margin-top: var(--e-2); max-width: 62ch; }
.texte { max-width: 68ch; }
.texte p + p { margin-top: var(--e-3); }

/* Fil d'Ariane : une ligne, coupée proprement sur téléphone. */
.fil { margin: calc(var(--e-2) * -1) 0 var(--e-2); font-size: var(--t-s); color: var(--encre-2); }
.fil ol { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.fil li { display: flex; align-items: center; gap: 6px; flex: none; }
.fil li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.fil li:last-child span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) { .fil li:not(:nth-last-child(-n+3)) { display: none; } }
.fil li + li::before { content: "›"; color: var(--trait); font-weight: 700; }
.fil a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* ── Boutons ─────────────────────────────────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-5); border: 0; border-radius: var(--rayon-petit);
  background: var(--rouge); color: var(--sur-rouge); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--rouge-fonce); }
.bouton--doux { background: var(--surface-2); color: var(--encre); }
.bouton--doux:hover { background: var(--trait); }
.bouton--plein { width: 100%; }

/* ── Champ de recherche ──────────────────────────────────────────────────────────────────────────────── */
.recherche-champ { position: relative; display: flex; align-items: center; }
.recherche-champ .ic { position: absolute; left: 14px; color: var(--encre-2); pointer-events: none; }
.recherche-champ input {
  width: 100%; min-height: 52px; padding: 0 var(--e-4) 0 46px;
  border: 2px solid var(--trait); border-radius: var(--rayon); background: var(--surface); color: var(--encre);
  font: inherit; font-size: 1.0625rem;
}
.recherche-champ input::placeholder { color: var(--encre-2); opacity: 1; }
.recherche-champ input:focus { outline: none; border-color: var(--focus); }
.loupe-ouverte, .loupe-ouverte body { overflow: hidden; }

/* ── Vignette d'une carte (cahier § 7.3) : toute la vignette est un lien ; le « + » garde sa propre action. ── */
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5) 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); } }
@media (min-width: 900px) { .grille { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vignette { position: relative; display: flex; flex-direction: column; min-width: 0; }
.vignette__lien { color: inherit; text-decoration: none; display: flex; flex-direction: column; min-width: 0; }
.vignette__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vignette__lien:focus-visible { outline: none; }
.vignette__lien:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.vignette__image { position: relative; display: block; aspect-ratio: 5 / 7; }
.carte-image {
  display: block; width: 100%; height: 100%; aspect-ratio: 5 / 7; object-fit: cover;
  border-radius: var(--coin-carte); background: var(--surface-2); box-shadow: var(--ombre-carte);
}
.carte-image--vide { display: flex; align-items: center; justify-content: center; padding: 12%; text-align: center; color: var(--encre-2); font-size: var(--t-xs); line-height: 1.3; border: 1px dashed var(--trait); box-shadow: none; }
.vignette__nom { margin-top: 10px; font-size: var(--t-s); font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vignette__ligne { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 2px; font-size: var(--t-xs); color: var(--encre-2); }
.vignette__num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vignette__ext { margin-top: 1px; font-size: var(--t-xs); color: var(--encre-2); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vignette:hover .carte-image { box-shadow: 0 0 0 2px var(--rouge), var(--ombre-carte); }

/* L'étiquette de prix (session 22, piste A) : jaune soleil, coin coupé à gauche et trou de poinçon, collée en bas à
   droite de la carte, à cheval sur le bord. Encre marine sur jaune : 12,4:1, en clair comme en sombre. */
.etiquette {
  position: absolute; right: -4px; bottom: -10px; z-index: 0;
  display: inline-flex; align-items: center;
  padding: 3px 8px 3px 15px; border-radius: 3px 7px 7px 3px;
  background: radial-gradient(circle at 7.5px 50%, var(--papier) 2.4px, transparent 2.9px), var(--etiquette); color: var(--etiquette-encre);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
  box-shadow: inset 0 -2px 0 rgb(23 32 54 / .2);
  font-size: .8125rem; font-weight: 800; font-stretch: var(--large); line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.etiquette--vide { background: radial-gradient(circle at 7.5px 50%, var(--papier) 2.4px, transparent 2.9px), var(--surface-2); font-weight: 600; font-stretch: 100%; color: var(--encre-2); }
.ajout {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgb(255 255 255 / .94); color: #172036; box-shadow: 0 1px 4px rgb(0 0 0 / .3);
  text-decoration: none; cursor: pointer;
}
.ajout::before { content: ""; position: absolute; inset: -6px; }
.ajout .ic { width: 18px; height: 18px; stroke-width: 2.5; }
.ajout:hover { background: var(--rouge); color: #fff; }

/* Variation : jamais la couleur seule (cahier § 7.2) — une flèche et un texte la doublent. */
.var { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.var .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.var--hausse { color: var(--hausse); }
.var--baisse { color: var(--baisse); }
.var--stable { color: var(--encre-2); font-weight: 600; }

/* Rangée qui défile au doigt (accueil, autres cartes du Pokémon). */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 31%); gap: var(--e-4); margin: 0 calc(var(--e-4) * -1); padding: 2px var(--e-4) 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; list-style: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; }
@media (min-width: 900px) { .rail { grid-auto-columns: calc((100% - 5 * var(--e-4)) / 6); margin: 0; padding-inline: 0; } }

/* ── Accueil ─────────────────────────────────────────────────────────────────────────────────────────── */
.une { padding-block: var(--e-5) var(--e-2); }
.une h1 { font-size: clamp(2.125rem, 9.6vw, 3.5rem); font-stretch: var(--tres-large); line-height: 1.02; letter-spacing: -.02em; max-width: 14ch; }
.une .recherche-champ { margin-top: var(--e-5); max-width: 560px; }
.une__faits { margin-top: var(--e-3); font-size: var(--t-s); color: var(--encre-2); }
/* Raccourcis de l'accueil (session 22, piste A) : 4 tuiles au doigt, chaque icône dans sa pastille de couleur ; aussi
   sur ordinateur (le méga menu ne remplace pas un geste direct depuis la recherche). */
.raccourcis { margin-top: var(--e-4); }
.raccourcis ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); margin: 0; padding: 0; list-style: none; max-width: 560px; }
.raccourcis a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: var(--e-2) 4px;
  border-radius: var(--rayon); background: var(--surface); border: 1.5px solid var(--trait); color: var(--encre); font-size: var(--t-xs); font-weight: 700;
  text-align: center; line-height: 1.2; text-decoration: none; }
.raccourcis a:hover { border-color: var(--trait-fort); }
.raccourcis .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; }
.raccourcis li:nth-child(1) .ic { background: #ffe1e5; color: #a80016; }
.raccourcis li:nth-child(2) .ic { background: #dcebff; color: #1a5aa8; }
.raccourcis li:nth-child(3) .ic { background: var(--pastille-fond); color: var(--pastille-encre); }
.raccourcis li:nth-child(4) .ic { background: #d6f3e6; color: #08623f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .raccourcis li:nth-child(1) .ic { background: #4a1621; color: #ff9aa6; }
  :root:not([data-theme="light"]) .raccourcis li:nth-child(2) .ic { background: #16304f; color: #9cc7ff; }
  :root:not([data-theme="light"]) .raccourcis li:nth-child(4) .ic { background: #123b2c; color: #6fe3b2; }
}
:root[data-theme="dark"] .raccourcis li:nth-child(1) .ic { background: #4a1621; color: #ff9aa6; }
:root[data-theme="dark"] .raccourcis li:nth-child(2) .ic { background: #16304f; color: #9cc7ff; }
:root[data-theme="dark"] .raccourcis li:nth-child(4) .ic { background: #123b2c; color: #6fe3b2; }
/* Le marché en un coup d'œil (accueil, session 22). */
.marche-resume { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px var(--e-3); padding: var(--e-4); border-radius: var(--rayon);
  background: var(--surface); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.marche-resume:hover { border-color: var(--trait-fort); }
.marche-resume__titre { grid-column: 1 / -1; font-size: var(--t-s); font-weight: 700; color: var(--encre-2); }
.marche-resume__valeur { font-size: 2.25rem; font-weight: 800; font-stretch: var(--tres-large); line-height: 1; font-variant-numeric: tabular-nums; }
.marche-resume .courbe-mini { grid-column: 1 / -1; margin-top: var(--e-2); }
.classement { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--rayon); border: 1px solid var(--trait); }
.classement li + li { border-top: 1px solid var(--trait); }
.classement a { display: grid; grid-template-columns: 1.6rem 44px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); min-height: 72px; padding: var(--e-2) var(--e-4); text-decoration: none; }
.classement__rang { font-weight: 800; font-stretch: var(--large); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.classement img { width: 44px; height: auto; aspect-ratio: 5 / 7; border-radius: var(--coin-carte); background: var(--surface-2); }
/* Nom en entier, sur plusieurs lignes si besoin (session 9 : coupé au téléphone, « Dracaufe… », illisible). */
.classement__nom { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.classement__ext { display: block; font-size: var(--t-xs); color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classement__prix { font-weight: 800; font-stretch: var(--large); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Marché des cartes (session 21) : la source et la date des prix sous la carte ; la variation sous le prix. */
.classement__source { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--encre-2); line-height: 1.35; }
.classement__prix .var { display: inline-flex; margin-top: 2px; font-size: var(--t-xs); }
.tableau-marche a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.tableau-prix.tableau-marche th, .tableau-prix.tableau-marche td { padding: 0; }
.tableau-marche th[scope="row"] { color: var(--encre); }
.tableau-marche tr[aria-current] > * { background: var(--surface-2); }
.tableau-marche td .var { justify-content: flex-end; }
.marche__indice { margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--encre-2); }
.marche__valeur { font-size: var(--t-3xl); font-weight: 800; font-stretch: var(--large); font-variant-numeric: tabular-nums; color: var(--encre); line-height: 1.1; }
.chiffres-cles.chiffres-cles--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: var(--e-3); }
.chiffres-cles.chiffres-cles--trois > div { padding: var(--e-2) var(--e-3); }
.chiffres-cles.chiffres-cles--trois dd { font-size: var(--t-s); }
.extensions-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .extensions-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); } }
.ext-tuile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-3); height: 100%; min-height: 132px; padding: var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); text-decoration: none; }
.ext-tuile:hover { border-color: var(--encre-2); }
.ext-tuile__logo { display: flex; align-items: center; height: 56px; }
.ext-tuile__logo img { max-height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.ext-tuile__nom { font-weight: 700; line-height: 1.2; }
.ext-tuile__infos { font-size: var(--t-xs); color: var(--encre-2); }
.encart { margin-top: var(--e-7); padding: var(--e-5); border-radius: var(--rayon); background: var(--encre); color: var(--papier); }
.encart h2 { color: inherit; }
.encart p { margin-top: var(--e-3); color: inherit; opacity: .86; max-width: 52ch; }
.encart .bouton { margin-top: var(--e-4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .encart { background: var(--surface-2); color: var(--encre); } }
:root[data-theme="dark"] .encart { background: var(--surface-2); color: var(--encre); }

/* ── Fiche carte ─────────────────────────────────────────────────────────────────────────────────────── */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.fiche__image { width: min(78%, 330px); margin-inline: auto; }
.fiche__image .carte-image { box-shadow: 0 2px 4px rgb(23 32 54 / .2), 0 18px 40px -16px rgb(23 32 54 / .55); }
.fiche__titre h1 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); }
/* Fiche au téléphone (session 9, choix du propriétaire) : image à gauche, titre à droite, le prix visible dès l'ouverture. */
@media (max-width: 899px) {
  .fiche { grid-template-columns: 40% minmax(0, 1fr); column-gap: var(--e-4); }
  .fiche__image { width: 100%; margin: 0; }
  .fiche__titre { align-self: center; }
  .fiche__titre h1 { font-size: clamp(1.375rem, 6vw, 1.75rem); overflow-wrap: anywhere; }
  .fiche > :not(.fiche__image):not(.fiche__titre) { grid-column: 1 / -1; }
}
.fiche__titre h1 .chiffres { font-stretch: 100%; font-weight: 700; color: var(--encre-2); white-space: nowrap; }
.fiche__sous { margin-top: var(--e-2); color: var(--encre-2); }
.fiche__sous a { font-weight: 600; color: var(--encre); }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.puces li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); font-size: var(--t-xs); font-weight: 600; }
.puces a { text-decoration: none; }

.cote { padding: var(--e-5) var(--e-4) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.cote h2 { font-size: var(--t-m); font-stretch: 100%; font-weight: 700; color: var(--encre-2); letter-spacing: 0; }
.cote__prix { margin-top: var(--e-2); font-size: clamp(2.75rem, 13vw, 4rem); font-weight: 800; font-stretch: var(--tres-large); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
/* La cote de la fiche dans une grande étiquette (session 22) : même coin coupé, même trou de poinçon. */
.cote__prix { display: inline-block; max-width: 100%; padding: 6px 18px 8px 36px; border-radius: 6px 14px 14px 6px; color: #172036;
  background: radial-gradient(circle at 17px 50%, var(--surface) 5px, transparent 5.6px), var(--soleil);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); font-size: clamp(2.25rem, 11vw, 3.5rem); }
.cote__variations { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin-top: var(--e-3); font-size: var(--t-s); }
.cote__source { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--trait); font-size: var(--t-s); color: var(--encre-2); }
.cote__source a { color: var(--encre); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.cote__source .ic { width: 15px; height: 15px; }
.cote__note { margin-top: var(--e-3); padding: var(--e-3); border-radius: var(--rayon-petit); background: var(--surface-2); font-size: var(--t-s); }
.cote__vide { margin-top: var(--e-2); font-size: var(--t-l); font-weight: 700; }
.tableau-prix { width: 100%; margin-top: var(--e-3); border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.tableau-prix caption { text-align: left; font-weight: 700; padding-bottom: var(--e-2); }
.tableau-prix th, .tableau-prix td { padding: 9px 0; border-bottom: 1px solid var(--trait); text-align: right; }
.tableau-prix th:first-child { text-align: left; font-weight: 500; color: var(--encre-2); }
.tableau-prix thead th { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.tableau-prix tr:last-child > * { border-bottom: 0; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.actions .bouton:first-child { grid-column: 1 / -1; }
.courbe { padding: var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.courbe h2 { font-size: var(--t-l); }
.courbe__svg { width: 100%; height: auto; margin-top: var(--e-3); overflow: visible; touch-action: pan-y; }
.courbe__ligne { fill: none; stroke: var(--rouge-texte); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.courbe__aire { fill: var(--rouge-texte); opacity: .09; }
.courbe__grille { stroke: var(--trait); stroke-width: 1; vector-effect: non-scaling-stroke; }
.courbe__curseur { stroke: var(--encre); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
/* Prix haut et bas de l'échelle, écrits sur le bord gauche (session 9 : une courbe sans échelle exagérait les petits écarts). */
.courbe__cadre { position: relative; margin-top: var(--e-3); }
.courbe__cadre .courbe__svg { margin-top: 0; }
.courbe__echelle { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;
  font-size: var(--t-xs); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.courbe__echelle span { padding: 0 4px; background: var(--surface); border-radius: 4px; line-height: 1.4; }
.courbe__axes { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--t-xs); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.courbe__lecture { min-height: 1.5em; margin-top: var(--e-2); font-size: var(--t-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.courbe__resume { margin-top: var(--e-2); font-size: var(--t-s); color: var(--encre-2); }
.voisines { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.voisines a { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); text-decoration: none; font-size: var(--t-s); }
.voisines a:last-child { text-align: right; align-items: flex-end; }
.voisines span { color: var(--encre-2); font-size: var(--t-xs); display: inline-flex; align-items: center; gap: 2px; }
.voisines span .ic { width: 14px; height: 14px; }
.voisines strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.attaque { padding: var(--e-3) 0; border-bottom: 1px solid var(--trait); }
.attaque:last-child { border-bottom: 0; }
.attaque__tete { display: flex; justify-content: space-between; gap: var(--e-3); font-weight: 700; }
.attaque p { margin-top: 4px; color: var(--encre-2); font-size: var(--t-s); }
.signaler { font-size: var(--t-s); color: var(--encre-2); }
.signaler a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .fiche { grid-template-columns: 340px minmax(0, 1fr); column-gap: var(--e-7); align-items: start; }
  .fiche__image { width: 100%; position: sticky; top: calc(var(--entete-h) + var(--e-5)); grid-row: span 6; }
}

/* ── Extension ───────────────────────────────────────────────────────────────────────────────────────── */
.ext-tete { display: grid; gap: var(--e-4); }
.ext-tete__logo img { max-height: 72px; width: auto; max-width: 240px; }
.ext-tete__infos { margin-top: var(--e-2); color: var(--encre-2); }
.chiffres-cles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: var(--e-5) 0 0; }
.chiffres-cles > div { padding: var(--e-3) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); min-width: 0; }
.chiffres-cles dt { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.chiffres-cles dd { margin: 2px 0 0; font-size: var(--t-xl); font-weight: 800; font-stretch: var(--large); font-variant-numeric: tabular-nums; line-height: 1.15; }
.chiffres-cles dd small { display: block; font-size: var(--t-xs); font-weight: 600; font-stretch: 100%; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chiffres-cles a { text-decoration: none; }
.barre-outils { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin: var(--e-6) 0 var(--e-4); }
.tri { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.tri a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: var(--t-s); font-weight: 600; color: var(--encre-2); }
.tri a[aria-current="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 3px rgb(23 32 54 / .2); }
.source-prix { font-size: var(--t-xs); color: var(--encre-2); }

/* ── Pied ────────────────────────────────────────────────────────────────────────────────────────────── */
.pied { padding-block: var(--e-6) var(--e-7); border-top: 1px solid var(--trait); background: var(--surface); color: var(--encre-2); font-size: var(--t-s); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); margin: 0 0 var(--e-4); padding: 0; list-style: none; }
.pied__liens a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--encre); }
.pied p + p { margin-top: var(--e-2); }

/* ── Pages d'attente, erreurs, maintenance ───────────────────────────────────────────────────────────── */
.message { padding-block: var(--e-7); max-width: 40rem; }
.message h1 { font-stretch: var(--tres-large); }
.message p { margin-top: var(--e-3); color: var(--encre-2); }
.message .bouton { margin-top: var(--e-5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto; }
}

/* ── Pokédex, classements, pages simples (session 4) ─────────────────────────────────────────────────── */
.section-courte { margin-top: var(--e-5); }
.pokedex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) 10px; margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .pokedex { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pokedex { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.pokedex a { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.pokedex .carte-image { width: 100%; height: auto; }
.pokedex__num { margin-top: 8px; font-size: var(--t-xs); color: var(--encre-2); }
.pokedex__nom { font-weight: 700; font-size: var(--t-s); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pokedex__n { font-size: var(--t-xs); color: var(--encre-2); }
.pokedex li[hidden] { display: none; }
.puces--filtres { margin-top: var(--e-4); }
.puces--filtres a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.puces--filtres li { padding: 0 12px; }
.puces--filtres li:has(a[aria-current]) { background: var(--encre); color: var(--papier); }
.prochainement { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 0; }
.prochainement main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--e-7); }
.prochainement .logo { margin-bottom: var(--e-6); }
.prochainement h1 { font-size: clamp(2.25rem, 10vw, 3.75rem); font-stretch: var(--tres-large); line-height: 1.02; letter-spacing: -.02em; max-width: 13ch; }
.prochainement p { margin-top: var(--e-4); max-width: 34rem; color: var(--encre-2); font-size: var(--t-l); }
.pied--nu { padding: var(--e-5) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom)); text-align: center; font-size: var(--t-s); color: var(--encre-2); }
.pied--nu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-2); color: var(--encre); }

/* ── Recherche : filtres en tiroir (marche sans JavaScript), loupe ───────────────────────────────────── */
.tiroir { margin-top: var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.tiroir summary { display: flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-4); font-weight: 700; cursor: pointer; list-style: none; }
.tiroir summary::-webkit-details-marker { display: none; }
.tiroir__corps { display: grid; gap: var(--e-3); padding: 0 var(--e-4) var(--e-4); }
@media (min-width: 900px) { .tiroir__corps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiroir__corps .bouton { grid-column: 1 / -1; } }
.champ { display: grid; gap: 4px; font-size: var(--t-s); font-weight: 600; min-width: 0; }
.champ select, .champ input { width: 100%; min-height: 48px; padding: 0 var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--papier); color: var(--encre); font: inherit; font-weight: 400; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.ic--petite { width: 14px; height: 14px; margin-left: 6px; }
.resultats-nombre { margin-top: var(--e-5); font-weight: 700; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-6); }
.pagination a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); text-decoration: none; font-weight: 600; }
.loupe-panneau { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--papier); }
.loupe-panneau[hidden] { display: none; }
.loupe-panneau__tete { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4); background: var(--surface); border-bottom: 1px solid var(--trait); }
.loupe-panneau__tete .recherche-champ { flex: 1; }
.loupe-panneau__fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--encre); cursor: pointer; }
.loupe-panneau__liste { flex: 1; overflow-y: auto; margin: 0; padding: var(--e-2) 0; list-style: none; }
.loupe-panneau__liste a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); min-height: 64px; padding: var(--e-2) var(--e-4); text-decoration: none; }
.loupe-panneau__liste a:hover, .loupe-panneau__liste a:focus-visible { background: var(--surface-2); }
.loupe-panneau__liste img, .loupe-panneau__liste .vide { width: 40px; aspect-ratio: 5 / 7; border-radius: var(--coin-carte); background: var(--surface-2); }
.loupe-panneau__liste strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loupe-panneau__liste small { display: block; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loupe-panneau__liste .prix { font-weight: 800; font-stretch: var(--large); font-variant-numeric: tabular-nums; white-space: nowrap; }
.loupe-panneau__message { padding: var(--e-4); color: var(--encre-2); }

/* ── Comptes : connexion, formulaires, messages (session 5) ──────────────────────────────────────────────── */
.connexion { max-width: 30rem; padding-block: var(--e-5) var(--e-6); }
.connexion h1 { font-stretch: var(--tres-large); }
.connexion .intro { margin-top: var(--e-3); }
.connexion__icone .ic { width: 44px; height: 44px; color: var(--rouge-texte); stroke-width: 1.6; margin-bottom: var(--e-4); }
.formulaire { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.formulaire .champ input, .formulaire .champ select { background: var(--surface); font-size: var(--t-m); }
.formulaire .champ input:focus, .formulaire .champ select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.formulaire h2, .formulaire h3 { margin: 0; }
.formulaire h3 small { font-weight: 600; font-stretch: 100%; font-size: var(--t-s); color: var(--encre-2); }
.encadre { padding: var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.ou { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-4) 0; color: var(--encre-2); font-size: var(--t-s); }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.bouton .ic { width: 20px; height: 20px; }
.bouton--google { background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.bouton--google:hover { background: var(--surface-2); }
.bouton--danger { background: var(--baisse); color: #fff; }
.bouton--danger:hover { background: var(--rouge-fonce); }
.bouton--icone { width: 48px; padding: 0; flex: none; }
.petit { margin-top: var(--e-4); font-size: var(--t-s); color: var(--encre-2); }
.petit a { color: var(--encre); font-weight: 600; }
.avis { display: flex; align-items: flex-start; gap: var(--e-2); margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--rayon-petit);
  background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--hausse); font-size: var(--t-s); font-weight: 600; }
.avis--erreur { border-left-color: var(--baisse); }
.avis--info { border-left-color: var(--encre-2); font-weight: 500; }
.avis .ic { margin-top: 1px; }
.avis a { font-weight: 700; }
.liste-conseils { margin: var(--e-4) 0 var(--e-5); padding-left: 1.2em; color: var(--encre-2); }
.liste-conseils li + li { margin-top: var(--e-2); }
.choix { margin: 0; padding: 0; border: 0; display: grid; gap: var(--e-1); }
.choix legend { padding: 0; margin-bottom: var(--e-2); font-weight: 700; font-size: var(--t-s); }
.case { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; font-size: var(--t-s); cursor: pointer; }
.case input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--rouge); }
/* Formules (session 6) : deux cartes l'une sous l'autre au téléphone, côte à côte dès 720 px. */
.formules { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.formule { display: grid; align-content: start; gap: var(--e-2); padding: var(--e-5) var(--e-4) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.formule--forte { border: 2px solid var(--rouge); }
.formule h2 { font-size: var(--t-l); }
.formule__prix { font-size: var(--t-3xl); font-weight: 800; font-stretch: var(--tres-large); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.formule__prix small { font-size: var(--t-m); font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--encre-2); }
.formule__sous { font-size: var(--t-s); color: var(--encre-2); }
.formule .liste-conseils { margin: var(--e-2) 0 var(--e-3); }
.formule__actions { display: grid; gap: var(--e-2); }
@media (min-width: 720px) { .formules { grid-template-columns: 1fr 1fr; } }
.tableau-defile { overflow-x: auto; margin-top: var(--e-3); }
.tableau-formules { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tableau-formules th, .tableau-formules td { padding: 10px var(--e-2) 10px 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau-formules thead th { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.tableau-formules tbody th { font-weight: 500; color: var(--encre-2); width: 38%; }
.tableau-formules td:last-child { font-weight: 600; }
.case--cycle { align-items: flex-start; padding: var(--e-3) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); }
.case--cycle:has(input:checked) { border-color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
.case--cycle span { display: grid; gap: 2px; }
.case--cycle strong { font-size: var(--t-m); }
.case--cycle small { color: var(--encre-2); }
.case--accord { align-items: flex-start; }
.case--cycle input, .case--accord input { margin-top: 2px; }
.actions--deux .bouton:first-child { grid-column: auto; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.liste-attente { max-width: 30rem; }
.prochainement .liste-attente__nombre { font-size: var(--t-s); font-weight: 600; }
.prochainement .avis { max-width: 30rem; font-size: var(--t-s); color: var(--encre); }

/* ── Comptes : pages du membre ───────────────────────────────────────────────────────────────────────── */
/* Les 5 onglets tiennent à 360 px ; plus étroit (police agrandie), ils défilent au doigt. */
.onglets { display: flex; gap: 0; margin: var(--e-4) calc(var(--e-4) * -1) 0; padding: 0 var(--e-3) 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--trait); }
.onglets::-webkit-scrollbar { display: none; }
.onglets a { flex: 1 0 auto; justify-content: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none; font-weight: 600; font-size: var(--t-s); color: var(--encre-2); border-bottom: 3px solid transparent; margin-bottom: -3px; }
.onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--rouge); }
.vide-etat { color: var(--encre-2); }
.vide-etat--grand { margin-top: var(--e-6); padding: var(--e-6) var(--e-4); text-align: center; background: var(--surface); border: 1px dashed var(--trait); border-radius: var(--rayon); }
.vide-etat--grand h2 { color: var(--encre); }
.vide-etat--grand p { margin: var(--e-3) auto 0; max-width: 40ch; }
.vide-etat__icone .ic { width: 40px; height: 40px; margin: 0 auto var(--e-3); color: var(--rouge-texte); stroke-width: 1.6; }
.actions-vide { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-5); }
.cote--album { margin-top: var(--e-5); }
.cote__prix--moyen { font-size: var(--t-2xl); }
.progression { display: block; width: 100%; height: 8px; margin-top: var(--e-3); border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); appearance: none; -webkit-appearance: none; }
.progression::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.progression::-webkit-progress-value { background: var(--rouge); border-radius: 999px; }
.progression::-moz-progress-bar { background: var(--rouge); border-radius: 999px; }
.progression-extensions { display: grid; gap: var(--e-2); margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.progression-extensions a { display: grid; gap: 2px; min-height: 64px; padding: var(--e-3) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); text-decoration: none; }
.progression-extensions a:hover { border-color: var(--encre-2); }
.progression-extensions__nom { font-weight: 700; }
.progression-extensions__chiffres { font-size: var(--t-xs); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.progression-extensions .progression { margin-top: var(--e-2); height: 6px; }
@media (min-width: 900px) { .progression-extensions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.liste-cartes { margin: var(--e-4) 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.liste-cartes > li + li { border-top: 1px solid var(--trait); }
.liste-cartes a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); min-height: 72px; padding: var(--e-2) var(--e-4); text-decoration: none; }
.liste-cartes img, .liste-cartes .vide { width: 44px; height: auto; aspect-ratio: 5 / 7; border-radius: var(--coin-carte); background: var(--surface-2); }
.liste-cartes .classement__ext { white-space: normal; overflow: visible; }
.liste-cartes .classement__prix small { display: block; text-align: right; font-size: var(--t-xs); color: var(--encre-2); font-stretch: 100%; }
.liste-cartes--formulaires > li { padding-bottom: var(--e-3); }
.ligne-formulaire { display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-4); }
.ligne-formulaire label { font-size: var(--t-xs); font-weight: 600; color: var(--encre-2); white-space: nowrap; }
.ligne-formulaire input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--papier); color: var(--encre); font: inherit; }
.ligne-formulaire .bouton { min-height: 44px; padding: 0 var(--e-3); }
.ligne-formulaire .bouton--icone { width: 44px; padding: 0; }
.bonne-affaire .classement__ext { color: var(--hausse); font-weight: 700; }
.eteinte a { opacity: .62; }
.notifications { margin: var(--e-4) 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.notifications li + li { border-top: 1px solid var(--trait); }
.notifications a { display: grid; gap: 2px; min-height: 56px; padding: var(--e-3) var(--e-4); text-decoration: none; font-size: var(--t-s); }
.notifications small { color: var(--encre-2); font-size: var(--t-xs); }
.notifications .non-lue a { font-weight: 700; }
.pastille { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--rouge); color: var(--sur-rouge); font-size: .6875rem; font-weight: 800; vertical-align: 1px; }
.menu-compte { margin: var(--e-4) 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.menu-compte li + li { border-top: 1px solid var(--trait); }
.menu-compte a { display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: 0 var(--e-4); text-decoration: none; font-weight: 600; }
.carte-compte { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--e-4); align-items: start; margin-top: var(--e-5); }
.carte-compte h1 { font-size: var(--t-xl); }
.carte-compte h1 .chiffres { font-stretch: 100%; color: var(--encre-2); font-weight: 700; }
.carte-compte__prix { margin-top: var(--e-3); font-size: var(--t-2xl); font-weight: 800; font-stretch: var(--tres-large); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lien-fleche { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; font-size: var(--t-s); }
.lien-fleche .ic { width: 16px; height: 16px; }
.exemplaire { padding: var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.exemplaire .actions .bouton:first-child { grid-column: auto; }
.tiroir--danger summary { color: var(--baisse); }
.tiroir--danger .formulaire { margin-top: 0; }

/* ── Vignettes : quantité, version, « dans ton album » (marques posées par site.js), bulle de confirmation ── */
.quantite { position: absolute; left: -4px; bottom: -9px; z-index: 0; padding: 3px 7px; border-radius: 6px; background: var(--encre); color: var(--papier); font-size: .75rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vignette__variante { flex: none; font-weight: 700; color: var(--encre); }
.vignette--album .ajout { background: var(--hausse); color: #fff; }
.vignette--album .vignette__image::after { content: "Dans ton album"; position: absolute; left: 6px; top: 6px; z-index: 0; padding: 2px 6px; border-radius: 5px; background: var(--hausse); color: #fff; font-size: .6875rem; font-weight: 800; }
.bulle { position: fixed; left: 50%; bottom: calc(var(--barre-bas) + env(safe-area-inset-bottom) + 12px); z-index: 70; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  padding: var(--e-3) var(--e-4); border-radius: var(--rayon-petit); background: var(--encre); color: var(--papier); font-size: var(--t-s); font-weight: 600; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .5); }
.bulle[hidden] { display: none; }
.bulle--erreur { background: var(--baisse); color: #fff; }
.bulle a { color: inherit; font-weight: 800; }
.compteur { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rouge); color: var(--sur-rouge); font-size: .6875rem; font-weight: 800; line-height: 18px; text-align: center; }
.barre-bas a, .entete__liens a { position: relative; }
.entete__liens .compteur { top: 2px; left: auto; right: 0; }
@media (min-width: 900px) { .bulle { bottom: var(--e-5); } }

/* ── Appli installable (session 7) ───────────────────────────────────────────────────────────────────── */
.installer { margin-top: var(--e-5); max-width: 420px; }
.etapes ol { margin: var(--e-3) 0 0; padding-left: 1.4em; display: grid; gap: var(--e-2); }
.etapes li { padding-left: var(--e-1); }
.etapes__icone { display: inline-flex; vertical-align: -4px; padding: 2px; border-radius: 6px; background: var(--surface-2); }
.etapes__icone .ic { width: 18px; height: 18px; }
.avis-hors-ligne { margin-top: 0; margin-bottom: var(--e-4); }

/* ── Ouverture de l'appli installée (session 7, PrixCarte depuis la session 23 bis) ─────────────────────────
   Règle du propriétaire : au lancement, seulement l'animation (module commun lancement-invisible). Socle commun ici
   (calque plein écran, scène centrée, fondu de fin) ; l'animation PrixCarte elle-même est dans le dernier bloc
   (« Identité PrixCarte »). Transform et opacity seulement, sur des calques à part. */
.ouverture { display: none; }
html.ouverture-joue .ouverture {
  display: block; position: fixed; inset: 0; z-index: 2147483646; background: #172036; will-change: opacity;
  animation: ouverture-fin .38s cubic-bezier(.4, 0, .2, 1) 1.02s both;
}
.ouverture__scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translateY(var(--ouverture-decalage, 0px)); }
@keyframes ouverture-fin { to { opacity: 0; visibility: hidden; } }

/* ── Petite admin (session 7) ────────────────────────────────────────────────────────────────────────── */
.admin-menu { display: flex; gap: var(--e-2); margin: var(--e-4) calc(-1 * var(--e-4)) 0; padding: 0 var(--e-4) var(--e-2); overflow-x: auto; scrollbar-width: thin; }
.admin-menu a { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 var(--e-3); border-radius: 999px;
  background: var(--surface-2); color: var(--encre); font-size: var(--t-s); font-weight: 600; text-decoration: none; white-space: nowrap; }
.admin-menu a[aria-current="page"] { background: var(--encre); color: var(--surface); }
.admin-menu .ic { width: 18px; height: 18px; }
.admin-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3); margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.admin-chiffres li { display: flex; flex-direction: column; gap: 2px; padding: var(--e-3) var(--e-4); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.admin-chiffres__nombre { font-size: var(--t-xl); font-weight: 800; font-stretch: var(--large); font-variant-numeric: tabular-nums; }
.admin-petit { display: block; font-size: var(--t-xs); color: var(--encre-2); font-weight: 400; }
span.admin-petit:not(:first-child) { margin-top: 2px; }
.admin-rouge { color: var(--baisse); }
.badge-test { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #ffde92; color: #3b2a00; font-size: var(--t-xs); font-weight: 700; vertical-align: 1px; }
.admin-liste { margin: var(--e-3) 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.admin-liste > li + li { border-top: 1px solid var(--trait); }
.admin-liste--texte > li { display: flex; flex-direction: column; gap: 4px; padding: var(--e-3) var(--e-4); overflow-wrap: anywhere; }
.admin-liste__lien { display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: var(--e-2) var(--e-4); color: var(--encre); text-decoration: none; }
.admin-liste__lien > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.admin-etiquette { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: var(--t-xs); font-weight: 700; }
.admin-etiquette--rouge { background: var(--baisse); color: #fff; }
.admin-etiquette--gris { color: var(--encre-2); }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.admin-actions .bouton { min-height: 44px; }
.admin-actions input[type="text"] { flex: 1 1 100%; }
.admin-ligne { display: flex; gap: var(--e-2); align-items: stretch; }
.admin-ligne input { flex: 1; min-width: 0; }
.admin-ligne .bouton { flex: none; }
.admin-fiche { margin-top: var(--e-4); padding: var(--e-4); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.admin-fiche > form + form { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.admin-fiche__image { width: 160px; margin: var(--e-3) 0; }
.admin-fiche__image img { width: 100%; height: auto; border-radius: var(--coin-carte); }
.admin-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--e-4); margin: var(--e-4) 0 0; }
.admin-details dt { font-size: var(--t-xs); color: var(--encre-2); margin-top: var(--e-2); }
.admin-details dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .admin-details { grid-template-columns: 12rem minmax(0, 1fr); }
  .admin-details dt { margin-top: 0; }
}
.admin-choix { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: var(--e-3) 0 0; padding: 0; border: 0; }
.admin-choix legend { font-weight: 600; margin-bottom: var(--e-2); }
.admin-choix label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.admin-choix input { width: 22px; height: 22px; }
.choix-photo { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.choix-photo .bouton { cursor: pointer; }
@media (pointer: fine) { .choix-photo__appareil { display: none; } }
.admin-form > label, .admin-form .admin-ligne + label { display: block; margin-top: var(--e-3); font-size: var(--t-s); font-weight: 600; }
.admin-form input[type="text"], .admin-form input[type="search"] { width: 100%; min-height: 48px; padding: 0 var(--e-3); border: 1px solid var(--trait);
  border-radius: var(--rayon-petit); background: var(--surface); color: var(--encre); font: inherit; font-size: var(--t-m); }
.admin-form input[type="text"]:focus, .admin-form input[type="search"]:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.admin-form > .bouton, .admin-form > .choix-photo + p + label { margin-top: var(--e-3); }
.admin-form .admin-ligne { margin-top: var(--e-2); }

/* ── Guides et pages légales (session 8) ─────────────────────────────────────────────────────────────────
   Même design « Étiquette », pensé pour lire au pouce : colonne de 68 caractères, sommaire en pastilles qui défilent
   au doigt sur téléphone (cibles de 44 px) et qui reste à côté du texte sur ordinateur ; étapes numérotées comme une
   étiquette de prix ; questions dépliables avec un signe + / − ; ancres qui ne se cachent pas sous le haut de l'écran. */
.guide { display: grid; grid-template-columns: minmax(0, 1fr); }
.guide__tete .recherche-champ { margin-top: var(--e-4); }
.guide__maj { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--encre-2); }
.guide__sommaire { margin: var(--e-5) calc(var(--e-4) * -1) 0; }
.guide__sommaire h2 { padding: 0 var(--e-4); font-size: var(--t-s); font-stretch: 100%; color: var(--encre-2); letter-spacing: 0; }
.guide__sommaire ol { display: flex; gap: var(--e-2); margin: var(--e-2) 0 0; padding: 0 var(--e-4) var(--e-1); list-style: none; scroll-padding-inline: var(--e-4);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.guide__sommaire ol::-webkit-scrollbar { display: none; }
.guide__sommaire li { flex: none; scroll-snap-align: start; }
.guide__sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-4); border-radius: 999px;
  background: var(--surface); border: 1px solid var(--trait); font-size: var(--t-s); font-weight: 600; text-decoration: none; color: var(--encre); white-space: nowrap; }
.guide__sommaire a:hover { border-color: var(--encre-2); }
.guide__corps { min-width: 0; max-width: 68ch; }
.guide__corps > h2, .guide__corps > section > h2 { margin-top: var(--e-7); scroll-margin-top: var(--e-5); }
.guide__corps > h2 + p, .guide__corps > h2 + ul, .guide__corps > h3 + p { margin-top: var(--e-3); }
.guide__corps > h3 { margin-top: var(--e-5); font-size: var(--t-m); }
.guide__corps > p + p, .guide__corps > ul + p, .guide__corps > p + ul { margin-top: var(--e-3); }
.guide__corps > p, .guide__corps > ul, .guide__corps > ol { line-height: 1.6; }
.guide__corps > ul, .guide__corps > ol { padding-left: 1.2em; }
.guide__corps li + li { margin-top: var(--e-2); }
.guide__corps .liste-conseils { color: var(--encre); }
.guide__corps .encadre { margin-top: var(--e-4); line-height: 1.55; }
.guide__corps .tiroir__corps { display: block; line-height: 1.6; }
.guide__num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; margin-right: var(--e-2);
  padding: 0 .3em; border-radius: 6px; background: var(--rouge); color: var(--sur-rouge); font-size: .8em; font-variant-numeric: tabular-nums; vertical-align: .08em; }
.guide__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.tiroir summary::after { content: "+"; margin-left: auto; font-size: 1.4em; font-weight: 600; line-height: 1; color: var(--encre-2); }
.tiroir[open] summary::after { content: "\2212"; }
.tiroir summary { padding-block: var(--e-2); }
.tiroir summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--rayon); }
@media (min-width: 900px) {
  .guide { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--e-7); align-items: start; }
  .guide__tete { grid-column: 1 / -1; max-width: 68ch; }
  .guide__sommaire { position: sticky; top: calc(var(--entete-h) + var(--e-5)); margin: var(--e-7) 0 0; }
  .guide__sommaire h2 { padding: 0; }
  .guide__sommaire ol { flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
  .guide__sommaire a { display: flex; white-space: normal; min-height: 40px; border: 0; background: none; padding: 0 var(--e-3); border-radius: var(--rayon-petit); }
  .guide__sommaire a:hover { background: var(--surface-2); }
}

/* Pages légales : bandeau « brouillon à valider » tant qu'un juriste ne les a pas relues. */
.brouillon { display: flex; gap: var(--e-2); align-items: flex-start; margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--rayon-petit);
  background: var(--surface); border: 1px dashed var(--rouge); font-size: var(--t-s); font-weight: 600; }
.legal-identite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--e-4); margin: var(--e-3) 0 0; }
.legal-identite dt { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--encre-2); }
.legal-identite dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .legal-identite { grid-template-columns: 13rem minmax(0, 1fr); } .legal-identite dt { margin-top: 0; } }

/* « Signaler une erreur » sur la fiche (session 8) : un tiroir en bas de la fiche, sans compte. */
.signalement { margin-top: var(--e-5); }
.signalement .formulaire { margin-top: var(--e-2); }
.signalement textarea, .champ textarea { width: 100%; min-height: 104px; padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--encre); font: inherit; font-size: var(--t-m); resize: vertical; }
.signalement textarea:focus, .champ textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.signalement__merci { margin-top: var(--e-2); }
/* Une réponse de questions (un seul paragraphe) prend toute la largeur, même là où le tiroir range des filtres en 3 colonnes. */
.tiroir__corps > p:only-child { grid-column: 1 / -1; max-width: 68ch; line-height: 1.6; }
.signalement .tiroir__corps { display: block; }
.signalement summary { font-weight: 600; color: var(--encre-2); }
.signalement summary .ic { width: 18px; height: 18px; }
.signalement .choix { margin-top: var(--e-2); }
.signalement .formulaire > .bouton { justify-self: start; }
/* Fil d'Ariane au doigt (session 8) : chaque lien a une zone touchable de 44 px de haut ; la ligne garde sa place. */
.fil { margin: calc(var(--e-4) * -1) 0 calc(var(--e-1) * -1); }
.fil a, .fil [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Menu rapide (session 11) ────────────────────────────────────────────────────────────────────────── */
/* Bouton de l'en-tête (lien vers /plan/ sans JavaScript) et panneau <dialog> qui glisse depuis la gauche. */
.bouton-menu { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-right: 0; margin-left: -10px;
  border-radius: 50%; color: var(--encre); text-decoration: none; }
.bouton-menu:hover { background: var(--surface-2); }
.bouton-menu .ic { width: 24px; height: 24px; }
.menu-ouvert, .menu-ouvert body { overflow: hidden; }
.menu-rapide { position: fixed; inset: 0 auto 0 0; width: min(86vw, 360px); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; border-right: 1px solid var(--trait); background: var(--surface); color: var(--encre); box-shadow: 0 0 40px rgb(13 20 38 / .3); overscroll-behavior: contain; }
.menu-rapide[open] { display: flex; flex-direction: column; animation: menu-entre .24s cubic-bezier(.2, .8, .2, 1); }
.menu-rapide::backdrop { background: rgb(13 20 38 / .5); animation: menu-voile .24s ease-out; }
@keyframes menu-entre { from { transform: translateX(-100%); } }
@keyframes menu-voile { from { opacity: 0; } }
.menu-rapide__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 60px;
  padding: max(var(--e-2), env(safe-area-inset-top)) var(--e-3) var(--e-2) var(--e-4); border-bottom: 1px solid var(--trait); }
.menu-rapide__titre { margin: 0; font-size: var(--t-l); font-weight: 800; font-stretch: var(--tres-large); }
.menu-rapide__fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--encre); cursor: pointer; }
.menu-rapide__corps { flex: 1; overflow-y: auto; padding: var(--e-3) 0 calc(var(--e-6) + env(safe-area-inset-bottom)); }
.menu-rapide__recherche { display: flex; align-items: center; gap: var(--e-3); min-height: 48px; margin: 0 var(--e-4) var(--e-2); padding: 0 var(--e-4);
  border: 1px solid var(--trait); border-radius: 999px; background: var(--papier); color: var(--encre-2); font-weight: 600; text-decoration: none; }
.menu-groupe { margin-top: var(--e-3); }
.menu-groupe__titre { margin: 0; padding: var(--e-2) var(--e-4) var(--e-1); color: var(--encre-2); font-size: var(--t-s); font-weight: 700; }
.menu-liste { margin: 0; padding: 0; list-style: none; }
.menu-liste a, .menu-plier > summary { position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 48px; padding: 0 var(--e-4);
  color: var(--encre); font-weight: 600; text-decoration: none; cursor: pointer; }
.menu-liste a:hover, .menu-plier > summary:hover { background: var(--surface-2); }
.menu-liste a[aria-current="page"] { color: var(--rouge-texte); background: var(--surface-2); box-shadow: inset 4px 0 0 var(--rouge); }
.menu-liste .ic, .menu-plier > summary .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--pastille-fond); color: var(--pastille-encre); }
.menu-plier > summary .menu-chevron { padding: 0; background: none; color: var(--encre-2); }
.menu-liste a[aria-current="page"] .ic { background: var(--rouge); color: var(--sur-rouge); }
.menu-liste .compteur { position: static; margin-left: auto; }
.menu-liste--sous a { min-height: 44px; padding-left: calc(var(--e-4) + 36px + var(--e-3)); font-weight: 500; }
.menu-plier > summary { list-style: none; }
.menu-plier > summary::-webkit-details-marker { display: none; }
.menu-plier > summary .menu-chevron { width: 18px; height: 18px; margin-left: var(--e-1); transition: transform .2s; }
.menu-plier[open] > summary .menu-chevron { transform: rotate(90deg); }
.menu-nombre { margin-left: auto; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); font-size: var(--t-xs); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.menu-bientot { margin-top: var(--e-4); border-top: 1px solid var(--trait); padding-top: var(--e-2); }
.menu-bientot__texte { margin: 0; padding: 0 var(--e-4) var(--e-2) calc(var(--e-4) + 36px + var(--e-3)); color: var(--encre-2); font-size: var(--t-s); }
.menu-bientot__theme { margin: var(--e-2) 0 0; padding: 0 var(--e-4) 0 calc(var(--e-4) + 36px + var(--e-3)); font-size: var(--t-s); font-weight: 700; color: var(--encre-2); }
.menu-bientot__liste { margin: 0; padding: 0; list-style: none; }
.menu-bientot__liste li { display: flex; align-items: center; min-height: 34px; padding: 0 var(--e-4) 0 calc(var(--e-4) + 36px + var(--e-3)); color: var(--encre-2); font-size: var(--t-s); }
/* Page /plan/ : les mêmes liens, en colonnes sur ordinateur. */
.plan { margin-top: var(--e-4); }
.plan .menu-groupe__titre { padding-inline: 0; }
.plan .menu-liste a, .plan .menu-plier > summary { padding-inline: 0; }
.plan .menu-liste a[aria-current="page"] { box-shadow: none; }
.plan .menu-bientot__texte, .plan .menu-bientot__theme, .plan .menu-bientot__liste li, .plan .menu-liste--sous a { padding-left: calc(36px + var(--e-3)); }
@media (min-width: 900px) {
  .plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--e-6); align-items: start; }
  .plan .menu-bientot { grid-column: 1 / -1; }
  .plan .menu-bientot > ul { display: inline-block; vertical-align: top; }
}

/* ── Bouton « Scanner » de l'en-tête et page /scan/ en attendant le scanner V2 (session 11) ─────────────── */
.scan-bientot__icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--e-4);
  border-radius: 18px; background: var(--rouge); color: var(--sur-rouge); }
.scan-bientot__icone .ic { width: 34px; height: 34px; }
.scan-bientot .bouton { gap: var(--e-2); }

/* ── Fiche Pokédex (session 13, piste A choisie le 17/10/2026) ─────────────────────────────────────────── */
.pkd-tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: center; margin-top: var(--e-3); }
.pkd-tete:has(.pkd-tete__image) { grid-template-columns: 96px minmax(0, 1fr); }
.pkd-tete__image { display: block; }
.pkd-tete__image .carte-image { width: 96px; height: auto; box-shadow: var(--ombre-carte); }
.pkd-num { font-size: var(--t-s); font-weight: 700; color: var(--encre-2); }
.pkd-tete h1 { font-size: clamp(1.625rem, 7vw, 2.25rem); line-height: 1.1; overflow-wrap: anywhere; }
.pkd-cat { margin-top: 2px; color: var(--encre-2); font-size: var(--t-s); }
.pkd-types { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.pkd-types li { padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 800; color: #fff; background: #555555; }
/* Couleurs des types, assombries pour un texte blanc lisible (contraste de 5,1 à 12,6). */
:is(.pkd-types li, .point).t-normal { background: #686850; } :is(.pkd-types li, .point).t-fire { background: #c0390b; } :is(.pkd-types li, .point).t-water { background: #1f5fcf; }
:is(.pkd-types li, .point).t-grass { background: #2c7a30; } :is(.pkd-types li, .point).t-electric { background: #806300; } :is(.pkd-types li, .point).t-ice { background: #16737f; }
:is(.pkd-types li, .point).t-fighting { background: #a8261e; } :is(.pkd-types li, .point).t-poison { background: #86308b; } :is(.pkd-types li, .point).t-ground { background: #82601f; }
:is(.pkd-types li, .point).t-flying { background: #4f63b3; } :is(.pkd-types li, .point).t-psychic { background: #c0185a; } :is(.pkd-types li, .point).t-bug { background: #5a7710; }
:is(.pkd-types li, .point).t-rock { background: #76662a; } :is(.pkd-types li, .point).t-ghost { background: #5a3f8c; } :is(.pkd-types li, .point).t-dragon { background: #4b2fc2; }
:is(.pkd-types li, .point).t-dark { background: #4a3b33; } :is(.pkd-types li, .point).t-steel { background: #4e6274; } :is(.pkd-types li, .point).t-fairy { background: #ad2f7c; }
:is(.pkd-types li, .point).t-stellar { background: #28698a; }
.pkd-aller { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--e-4); padding: 0 18px; border-radius: 999px; background: var(--encre); color: var(--papier); font-weight: 700; font-size: var(--t-s); text-decoration: none; }
.pkd-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--e-4) 0 0; }
.pkd-cases > div { padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); min-width: 0; }
.pkd-cases dt { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.pkd-cases dd { margin: 0; font-size: var(--t-l); font-weight: 800; font-stretch: var(--large); font-variant-numeric: tabular-nums; }
.pkd-cases dd small { display: block; font-size: var(--t-xs); font-weight: 600; font-stretch: 100%; color: var(--encre-2); }
.pkd-bloc { margin-top: var(--e-6); }
section.pkd-bloc h2 { font-size: var(--t-l); margin-bottom: var(--e-3); }
.pkd-stats { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pkd-stats li { display: grid; grid-template-columns: 7.2em 2.4em minmax(0, 1fr); align-items: center; gap: 8px; font-size: var(--t-s); }
.pkd-stats b { text-align: right; }
.pkd-barre { display: block; width: 100%; height: 10px; border-radius: 99px; background: var(--surface-2); }
.pkd-barre rect { fill: var(--rouge); }
.pkd-total { margin-top: var(--e-2); font-size: var(--t-s); color: var(--encre-2); }
.pkd-talents { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pkd-talents li { padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); font-size: var(--t-s); color: var(--encre-2); }
.pkd-talents strong { display: block; font-size: var(--t-m); color: var(--encre); }
.pkd-talents em { font-style: normal; font-size: var(--t-xs); font-weight: 700; color: var(--rouge-texte); margin-left: 6px; }
.pkd-evo { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 22px; }
.pkd-evo > li { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.pkd-evo > li + li::before { content: "›"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: var(--encre-2); font-weight: 800; font-size: var(--t-l); }
.pkd-evo > li.pkd-evo__plusieurs { flex-basis: 100%; }
.pkd-evo > li.pkd-evo__plusieurs::before { content: none; }
.pkd-evo a, .pkd-evo span { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px 12px; border-radius: var(--rayon-petit); background: var(--surface); border: 1px solid var(--trait); font-weight: 700; font-size: var(--t-s); text-decoration: none; line-height: 1.2; }
.pkd-evo small { font-weight: 600; font-size: var(--t-xs); color: var(--encre-2); }
.pkd-evo .pkd-evo__ici { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.pkd-evo .pkd-evo__ici small { color: inherit; opacity: .85; }
.pkd-formes { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pkd-formes a, .pkd-formes span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); font-size: var(--t-s); font-weight: 600; text-decoration: none; }
.pkd-formes span { color: var(--encre-2); font-weight: 500; }
.pkd-source { margin-top: var(--e-5); font-size: var(--t-xs); color: var(--encre-2); }
@media (min-width: 900px) {
  .pkd-tete:has(.pkd-tete__image) { grid-template-columns: 140px minmax(0, 1fr); }
  .pkd-tete__image .carte-image { width: 140px; }
  .pkd-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; }
  .pkd-stats, .pkd-talents { max-width: 760px; }
}

/* ── Illustrateurs et aide (session 13) ──────────────────────────────────────────────────────────────── */
.h2-petit { font-size: var(--t-l); }
.illustrateurs { margin: var(--e-4) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 640px) { .illustrateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .illustrateurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.illustrateurs a { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 48px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); text-decoration: none; font-weight: 600; }
.illustrateurs a span { flex: none; font-size: var(--t-xs); font-weight: 600; color: var(--encre-2); font-variant-numeric: tabular-nums; }
/* « Déjà dans mon album » sur la fiche (session 13, site.js d'après /compte/etat). */
.bouton.bouton--fait { background: var(--hausse); color: #fff; }
/* Caché sans JavaScript, mais sa place est gardée : rien ne bouge quand site.js le montre (CLS). */
.bouton-partager[hidden] { display: inline-flex; visibility: hidden; }
.actions .bouton-partager { grid-column: 1 / -1; }
.aide { margin-top: var(--e-4); }
.aide__theme { margin-top: var(--e-5); }
.aide [hidden], #illustrateurs [hidden] { display: none; }
.aide .tiroir__corps a { font-weight: 600; }
/* Illustrations officielles des Pokémon (session 13, comme sur l'ancien site) : sur un disque clair, fond transparent. */
.pkd-tete__image--illus { display: block; width: 112px; aspect-ratio: 1; border-radius: 50%; background: var(--surface); border: 1px solid var(--trait); }
.pkd-tete:has(.pkd-tete__image--illus) { grid-template-columns: 112px minmax(0, 1fr); }
.pkd-tete__image--illus img { display: block; width: 100%; height: auto; }
.pokedex__illus { display: block; aspect-ratio: 1; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--trait); }
.pokedex__illus img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .pkd-tete:has(.pkd-tete__image--illus) { grid-template-columns: 180px minmax(0, 1fr); }
  .pkd-tete__image--illus { width: 180px; }
}

/* Longues listes par paquets de 50 (session 13 bis) : compteur annoncé et bouton « Voir plus » sous la liste (site.js
   section 12), repère « éléments 51 à 100 » en haut d'une page 2+. La boîte a une hauteur fixe : rien ne bouge quand
   son texte change. */
.paquets { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); min-height: 112px; margin-top: var(--e-5); text-align: center; }
.paquets__etat { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.paquets__plus { min-width: 160px; }
.paquets__plus[aria-disabled="true"] { opacity: .7; cursor: progress; }
.pagination[hidden] { display: none; }
.paquet-avant { color: var(--encre-2); font-size: var(--t-s); }
.paquet-avant a { color: var(--encre); font-weight: 600; }

/* ── Profils, PrixID, amis, niveau (session 14) ─────────────────────────────────────────────────────────────── */
.champ textarea { width: 100%; min-height: 112px; padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--encre); font: inherit; font-size: var(--t-m); font-weight: 400; resize: vertical; }
.champ textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.champ label small { font-weight: 400; color: var(--encre-2); }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; background: var(--surface-2); color: var(--encre); font-weight: 800; font-size: var(--t-m); }
.avatar--grand { width: 96px; height: 96px; font-size: 2.5rem; border: 4px solid var(--papier); }
.profil-tete { margin-top: var(--e-4); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); overflow: hidden; }
.profil-tete__banniere { aspect-ratio: 3 / 1; background: linear-gradient(135deg, var(--rouge), var(--rouge-fonce)); }
.profil-tete__banniere img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profil-tete__corps { display: flex; align-items: flex-start; gap: var(--e-3); padding: 0 var(--e-4) var(--e-4); margin-top: -48px; }
/* Seule la photo chevauche la bannière : le nom commence sous elle (lisible sur le fond clair). */
.profil-tete__nom { min-width: 0; padding-top: 54px; }
.chiffres-cles--texte dd { font-size: var(--t-m); font-stretch: 100%; overflow-wrap: anywhere; }
.profil-tete__pseudo { margin: 0; font-size: var(--t-xl); font-weight: 800; font-stretch: var(--large); line-height: 1.15; overflow-wrap: anywhere; }
.profil-tete__titre { margin: 2px 0 0; font-size: var(--t-s); color: var(--encre-2); }
.profil-tete__rang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; font-size: var(--t-s); font-weight: 700; }
.profil-tete__rang .chiffres { font-weight: 600; color: var(--encre-2); }
.profil-presentation { margin: var(--e-4) 0 0; font-size: var(--t-m); overflow-wrap: anywhere; }
.liste-points { display: grid; gap: 0; margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.liste-points li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 44px; padding: var(--e-2) 0; border-bottom: 1px solid var(--trait); font-size: var(--t-s); }
.liste-points li strong { font-variant-numeric: tabular-nums; }
.liste-rangs li > span:first-child { display: grid; gap: 2px; }
.liste-rangs small { color: var(--encre-2); }
.liste-rangs li[aria-current] { color: var(--rouge); }
.carte-eureid__corps, .carte-eureid--visite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin-top: var(--e-3);
  padding: var(--e-4); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.carte-eureid__corps > div { flex: 1 1 12rem; min-width: 0; }
.qr { display: block; width: 168px; height: 168px; flex: none; border-radius: var(--rayon-petit); }
.carte-eureid__code { margin: 2px 0 var(--e-2); font-size: var(--t-xl); font-weight: 800; letter-spacing: .04em; overflow-wrap: anywhere; }
.ligne-ajout { grid-template-columns: minmax(0, 1fr); margin-top: var(--e-3); }
.liste-amis { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.liste-amis li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.liste-amis__nom { display: grid; flex: 1 1 8rem; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.liste-amis__nom a { min-height: 44px; display: inline-flex; align-items: center; }
.liste-amis__nom small { font-weight: 400; font-size: var(--t-xs); color: var(--encre-2); }
.liste-amis__actions { display: flex; gap: var(--e-2); }
[data-fichier-choisi].erreur { color: var(--baisse); font-weight: 600; }
/* Onglets du compte : un mot court (« Amis ») doit garder une cible de 44 px au moins (essai 11, session 14). */
.onglets a { min-width: 48px; }
/* Avec JavaScript, la photo part dès qu'elle est choisie : le bouton « Enregistrer » (sans JavaScript) se cache. */
[data-sans-js][hidden] { display: none; }
/* Un formulaire « actions » commence par ses champs cachés : son bouton prend toute la largeur (carte PrixID). */
form.actions { margin-top: var(--e-4); }
form.actions > .bouton { grid-column: 1 / -1; }

/* ── Annuaire, carte des collectionneurs, cartes recherchées près de toi (session 17) ─────────────────────────── */
.actions-ligne { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.champ-ligne { display: flex; gap: var(--e-2); align-items: stretch; }
.champ-ligne input { flex: 1; min-width: 0; }
.liste-lieux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.liste-lieux a { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 44px; padding: 0 var(--e-3);
  border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); font-weight: 600; text-decoration: none; }
.liste-lieux a span:first-child { min-width: 0; overflow-wrap: anywhere; }
.liste-lieux a .chiffres { flex: none; color: var(--rouge-texte); }
.liste-lieux a.vide { font-weight: 400; color: var(--encre-2); }
.liste-lieux a.vide .chiffres { color: var(--encre-2); }
.liste-membres { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.membre-ligne { display: flex; align-items: center; gap: var(--e-3); min-height: 64px; padding: var(--e-2) var(--e-3); border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--surface); text-decoration: none; color: var(--encre); }
.membre-ligne:hover { border-color: var(--rouge); }
.membre-ligne__nom { display: grid; flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.membre-ligne__nom small { font-weight: 400; font-size: var(--t-xs); color: var(--encre-2); }
.membre-ligne > .ic { flex: none; color: var(--encre-2); }
.carte-geo { margin: var(--e-4) 0 0; }
.carte-geo__cadre { position: relative; height: min(62vh, 520px); min-height: 300px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface-2); overflow: hidden; z-index: 0; }
.carte-geo__attente { display: grid; place-content: center; justify-items: center; gap: var(--e-3); height: 100%; margin: 0; padding: var(--e-4); text-align: center; color: var(--encre-2); font-size: var(--t-s); }
.carte-geo__attente p { margin: 0; }
.carte-geo figcaption { margin-top: var(--e-2); }
.carte-geo .leaflet-container { font: inherit; font-size: var(--t-xs); background: var(--surface-2); }
.carte-geo .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: 1.25rem; }
.carte-geo .leaflet-tooltip { font-weight: 700; }
.carte-geo .carte-point-cadre { background: none; border: 0; }
.carte-point { display: grid; place-items: center; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; background: var(--rouge);
  color: var(--sur-rouge); font-weight: 800; font-size: var(--t-s); line-height: 1; box-shadow: 0 2px 6px -1px rgb(23 32 54 / .5); cursor: pointer; }
.carte-geo .leaflet-marker-icon:focus-visible .carte-point { outline: 3px solid var(--encre); outline-offset: 2px; }
.carte-geo .carte-point-nom { padding: 2px 6px; border: 0; border-radius: 4px; background: var(--surface); color: var(--encre); box-shadow: 0 1px 3px rgb(23 32 54 / .35); }
.carte-geo .carte-point-nom::before { display: none; }
.carte-villes { display: grid; gap: var(--e-5); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.carte-villes > li { scroll-margin-top: 80px; }
.carte-villes h3 { margin: 0; font-size: var(--t-l); }
.carte-villes h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.carte-villes h3 small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--encre-2); font-stretch: 100%; }
.ma-ville { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-3) 0 0; padding: var(--e-3); border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--surface); }
.ma-ville > .ic { width: 28px; height: 28px; flex: none; color: var(--rouge-texte); }
.ma-ville span { display: grid; min-width: 0; }
.ma-ville small, .choix-ville small { font-size: var(--t-xs); color: var(--encre-2); }
.liste-villes { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.choix-ville { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 56px; padding: var(--e-2) var(--e-3); border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--surface); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.choix-ville:hover, .choix-ville:focus-visible { border-color: var(--rouge); }
.choix-ville > .ic { flex: none; color: var(--rouge-texte); }
.choix-ville span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.pastilles-choix { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pastilles-choix label { position: relative; }
.pastilles-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastilles-choix span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 72px; padding: 0 var(--e-4);
  border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); font-weight: 700; cursor: pointer; }
.pastilles-choix input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.pastilles-choix input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.proche-note { display: flex; align-items: center; gap: 4px; margin: var(--e-1) 0 0; font-size: var(--t-xs); color: var(--encre-2); }
.proche-note .ic { width: 14px; height: 14px; flex: none; color: var(--rouge-texte); }
/* Boutiques (session 18) : lignes de liste, fiche, légende de la carte. Bleu = boutique (le rouge = collectionneurs). */
.boutique-ligne { display: flex; align-items: center; gap: var(--e-3); min-height: 64px; padding: var(--e-2) var(--e-3); border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--surface); text-decoration: none; color: var(--encre); }
.boutique-ligne:hover { border-color: var(--boutique); }
.boutique-ligne__icone { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--boutique); }
.boutique-ligne__nom { display: grid; flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.boutique-ligne__nom small { font-weight: 400; font-size: var(--t-xs); color: var(--encre-2); }
.boutique-ligne > .ic { flex: none; color: var(--encre-2); }
.carte-boutique { scroll-margin-top: 80px; }
.boutique-fiche__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: var(--e-4); border-radius: var(--rayon); object-fit: cover; background: var(--surface-2); }
.boutique-infos { display: grid; gap: var(--e-2); margin: var(--e-4) 0 0; }
.boutique-infos > div { padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.boutique-infos dt { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--encre-2); }
.boutique-infos dt .ic { width: 16px; height: 16px; color: var(--boutique); }
.boutique-infos dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.boutique-infos dd a { display: inline-flex; align-items: center; min-height: 44px; }
.boutique-atouts { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.boutique-atouts li { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 36px; padding: 0 var(--e-3); border: 1px solid var(--trait);
  border-radius: 999px; background: var(--surface); font-size: var(--t-s); font-weight: 600; }
.boutique-atouts .ic { width: 16px; height: 16px; color: var(--boutique); }
.boutique-fiche__texte { max-width: 62ch; overflow-wrap: anywhere; }
.carte-legende { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: var(--e-2) 0 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--encre-2); }
.carte-legende li { display: inline-flex; align-items: center; gap: var(--e-2); }
.carte-legende__point { width: 14px; height: 14px; flex: none; border: 2px solid var(--surface); border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 1px var(--trait); }
.carte-legende__point--boutique { width: 12px; height: 12px; background: var(--boutique); }
@media (max-width: 400px) { .boutique-fiche .champ-double, form[data-boutique-envoi] .champ-double { grid-template-columns: minmax(0, 1fr); } }
.avis[hidden] { display: none; }
/* Notifications sur le téléphone (session 19) */
.telephone .formulaire { margin-top: var(--e-4); }
.telephone__etat { font-weight: 700; margin: var(--e-2) 0; }
.telephone__etat:empty { display: none; }
.telephone__boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.telephone__boutons form { margin: 0; }
.telephone__boutons [hidden] { display: none; }
.telephone .case { align-items: flex-start; padding: var(--e-1) 0; }
.telephone .case span { display: grid; gap: 2px; }
.telephone .case small { color: var(--encre-2); }
.notifications__texte { color: var(--encre-2); }
.diffusion-apercu { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--e-3); align-items: start; max-width: 420px; padding: var(--e-3) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); }
.diffusion-apercu img { width: 40px; height: 40px; border-radius: 8px; }
.diffusion-apercu strong { display: block; }
.diffusion-apercu p { margin: 2px 0 0; font-size: var(--t-s); color: var(--encre-2); overflow-wrap: anywhere; }

/* ── Scanner (session 20) : choix du mode, file de photos d'une rafale, résultats à confirmer ─────────────────── */
.avis--ok { border-left-color: var(--hausse); }
.scan__modes { display: grid; gap: var(--e-2); margin: 0; padding: 0; border: 0; }
.scan__modes legend { margin-bottom: var(--e-2); font-weight: 700; }
.scan__mode { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: var(--e-2) var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); cursor: pointer; }
.scan__mode:has(input:checked) { border-color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
.scan__mode input { width: 20px; height: 20px; accent-color: var(--rouge); flex: none; }
.scan__mode span { display: grid; }
.scan__mode small { color: var(--encre-2); font-size: var(--t-s); }
.scan__boutons { margin-top: var(--e-4); }
.scan__boutons .bouton { flex: 1 1 100%; min-height: 48px; justify-content: center; }
[data-scan-etat]:empty { display: none; }
.scan__file { margin-top: var(--e-3); }
.scan__vignettes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.scan__vignettes img { display: block; width: 72px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait); }
.scan__conseils ul { margin: 0; padding: 0 var(--e-4) var(--e-4) calc(var(--e-4) + 1.2em); }
.scan-resultats h2 { margin-bottom: var(--e-3); }
.scan-tout { margin-bottom: var(--e-3); }
.scan-valeur { margin: 0 0 var(--e-3); font-size: var(--t-m); }
.scan-valeur small { color: var(--encre-2); font-size: var(--t-xs); }
.scan-derniers { margin-top: var(--e-4); }
.scan-liste { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.scan-carte { padding: var(--e-3) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); border-left: 4px solid var(--hausse); }
.scan-carte--choix { border-left-color: var(--boutique); }
.scan-carte--introuvable, .scan-carte--illisible, .scan-carte--pas-carte, .scan-carte--erreur, .scan-carte--plafond, .scan-carte--quota { border-left-color: var(--baisse); }
.scan-carte__place { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.scan-carte__statut { margin: 0 0 var(--e-3); font-weight: 600; }
.scan-carte__trouvee { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.scan-carte__image { display: block; }
.scan-carte__image .carte-image { width: 112px; height: auto; border-radius: 6px; box-shadow: var(--ombre-carte); }
.scan-carte__nom { margin: 0; font-size: var(--t-l); font-weight: 700; }
.scan-carte__nom a { color: inherit; text-decoration: none; }
.scan-carte__deja { display: inline-flex; align-items: center; gap: var(--e-1); margin: var(--e-2) 0 0; padding: 2px var(--e-2); font-size: var(--t-xs); font-weight: 700; color: var(--boutique); background: var(--surface-2); border-radius: 999px; }
.scan-carte__deja .ic { width: 14px; height: 14px; }
.scan-suite { margin-top: var(--e-3); }
.scan-suite .bouton { flex: 1 1 100%; min-height: 52px; justify-content: center; }
.scan-attente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: var(--e-4) 0; padding: var(--e-3) var(--e-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.scan-attente img { width: 54px; height: 75px; object-fit: cover; border-radius: 4px; border: 1px solid var(--trait); }
.scan-attente p { flex: 1 1 100%; margin: 0; font-weight: 700; }
.scan-attente p::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: var(--e-2); vertical-align: -2px; border: 2px solid var(--trait); border-top-color: var(--rouge); border-radius: 50%; animation: scan-tourne .8s linear infinite; }
@keyframes scan-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scan-attente p::after { animation: none; } }

/* ── Viseur du scanner (18/10/2026) : plein écran, cadre à la forme d'une carte (63 × 88), conseils en direct ── */
html.viseur-ouvert { overflow: hidden; }
.viseur [hidden] { display: none !important; }
.viseur { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #000; color: #fff; }
.viseur::backdrop { background: #000; }
.viseur__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.viseur__cadre { position: absolute; left: 50%; top: 46%; width: min(80vw, calc(60dvh * 63 / 88)); aspect-ratio: 63 / 88; transform: translate(-50%, -50%); border-radius: 4.5% / 3.2%; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .5); outline: 2px solid rgb(255 255 255 / .55); transition: outline-color .2s; }
.viseur--page .viseur__cadre { width: min(92vw, calc(64dvh * 63 / 88)); border-radius: 2%;
  background: linear-gradient(90deg, transparent calc(33.33% - 1px), rgb(255 255 255 / .45) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), rgb(255 255 255 / .45) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(transparent calc(33.33% - 1px), rgb(255 255 255 / .45) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), rgb(255 255 255 / .45) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px)); }
.viseur__coin { position: absolute; width: 18%; height: 13%; border: 0 solid #fff; transition: border-color .2s; }
.viseur__coin--1 { top: -3px; left: -3px; border-top-width: 5px; border-left-width: 5px; border-top-left-radius: 14px; }
.viseur__coin--2 { top: -3px; right: -3px; border-top-width: 5px; border-right-width: 5px; border-top-right-radius: 14px; }
.viseur__coin--3 { bottom: -3px; left: -3px; border-bottom-width: 5px; border-left-width: 5px; border-bottom-left-radius: 14px; }
.viseur__coin--4 { bottom: -3px; right: -3px; border-bottom-width: 5px; border-right-width: 5px; border-bottom-right-radius: 14px; }
.viseur--bon .viseur__cadre { outline-color: var(--viseur-bon); }
.viseur--bon .viseur__coin { border-color: var(--viseur-bon); }
.viseur--attention .viseur__coin { border-color: var(--soleil); }
.viseur__haut { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--e-3); padding: max(var(--e-3), env(safe-area-inset-top)) var(--e-4) var(--e-3); background: linear-gradient(rgb(0 0 0 / .65), transparent); }
.viseur__titre { flex: 1; margin: 0; font-size: var(--t-m); font-weight: 700; color: #fff; }
.viseur__rond { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; cursor: pointer; }
.viseur__rond .ic { width: 24px; height: 24px; }
.viseur__rond[aria-pressed="true"] { background: var(--soleil); color: #172036; }
.viseur__rond:focus-visible, .viseur__declencheur:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; }
.viseur__conseil { position: absolute; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: var(--e-2) var(--e-4); border-radius: 999px; background: rgb(0 0 0 / .72); color: #fff; font-size: var(--t-m); font-weight: 700; text-align: center; }
.viseur--bon .viseur__conseil { background: var(--viseur-bon-fond); }
.viseur__conseil:empty { display: none; }
.viseur__bas { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-4) max(var(--e-4), env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / .7)); }
.viseur__compte { margin: 0; font-size: var(--t-s); font-weight: 700; color: #fff; }
.viseur__declencheur { width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.viseur__declencheur svg { display: block; width: 100%; height: 100%; }
.viseur__fond-anneau { fill: none; stroke: rgb(255 255 255 / .45); stroke-width: 6; }
.viseur__anneau { fill: none; stroke: var(--viseur-bon); stroke-width: 6; stroke-linecap: round; }
.viseur__bouton { fill: #fff; transition: transform .12s; transform-origin: 40px 40px; }
.viseur__declencheur:active .viseur__bouton { transform: scale(.9); }
.viseur__droite { display: flex; justify-content: flex-end; align-items: center; gap: var(--e-2); }
.viseur__fini { min-height: 48px; padding: 0 var(--e-3); }
.viseur--clic .viseur__video { animation: viseur-clic .25s ease-out; }
@keyframes viseur-clic { from { opacity: .25; } to { opacity: 1; } }
.viseur__repli { position: absolute; inset: auto var(--e-4) calc(var(--e-6, 32px) + env(safe-area-inset-bottom)) var(--e-4); display: grid; gap: var(--e-3); padding: var(--e-4); border-radius: var(--rayon); background: var(--surface); color: var(--encre); }
.viseur__repli p { margin: 0; }
.viseur__repli .bouton { min-height: 48px; justify-content: center; }
.viseur--repli .viseur__cadre, .viseur--repli .viseur__bas, .viseur--repli .viseur__conseil { display: none; }
@media (prefers-reduced-motion: reduce) { .viseur--clic .viseur__video { animation: none; } .viseur__cadre, .viseur__coin, .viseur__bouton { transition: none; } }
.scan-carte__prix { margin: var(--e-2) 0 0; font-size: var(--t-l); font-weight: 700; }
.scan-carte__prix small { font-size: var(--t-xs); font-weight: 500; color: var(--encre-2); }
.scan-confirmer { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-2); margin-top: var(--e-3); }
.scan-confirmer > .bouton { flex: 1 1 210px; justify-content: center; white-space: nowrap; }
.scan-autres .scan-confirmer { margin-top: 0; flex: none; }
.scan-autres .scan-confirmer > .bouton { flex: none; }
.scan-confirmer__variante { display: grid; gap: 2px; font-size: var(--t-xs); color: var(--encre-2); }
.scan-confirmer__variante select { min-height: 44px; padding: 0 var(--e-2); font: inherit; font-size: var(--t-m); color: var(--encre); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); }
.scan-autres { display: grid; gap: var(--e-2); margin: 0; padding: 0 var(--e-4) var(--e-3); list-style: none; }
.scan-autres li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-2); border-top: 1px solid var(--trait); }
.scan-autres__carte { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.scan-autres__carte .carte-image { width: 48px; height: auto; border-radius: 4px; flex: none; }
.scan-autres__carte span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.scan-autres__carte small { color: var(--encre-2); font-size: var(--t-xs); }
.scan-chercher { display: grid; gap: var(--e-1); padding: 0 var(--e-4) var(--e-4); }
.scan-chercher label { font-size: var(--t-s); font-weight: 600; }
.scan-chercher__ligne { display: flex; gap: var(--e-2); }
.scan-chercher__ligne input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--e-3); font: inherit; color: var(--encre); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit); }
.scan-carte__autres .petit { padding: 0 var(--e-4) var(--e-3); }
@media (max-width: 380px) { .scan-carte__trouvee { grid-template-columns: 88px minmax(0, 1fr); gap: var(--e-3); } .scan-carte__image .carte-image { width: 88px; } }

/* ── Session 22 : en-tête intelligent, suite ─────────────────────────────────────────────────────────── */
/* Une ancre (#…) ne se cache jamais sous l'en-tête collé ; la colonne collée de la fiche et le sommaire des guides
   remontent quand l'en-tête se cache. « Moins de mouvement » : l'en-tête apparaît et disparaît sans glisser. */
html { scroll-padding-top: calc(var(--entete-h) + var(--e-4)); }
.entete-cachee .fiche__image, .entete-cachee .guide__sommaire { top: var(--e-5); }
.entete__compte { position: relative; }
.entete__compte .compteur { top: -2px; left: auto; right: -2px; }
@media (prefers-reduced-motion: reduce) { .entete, .entete__chevron { transition: none; } }
/* L’indice du marché dans la même étiquette que la cote d’une carte (session 22) : les grands chiffres se ressemblent. */
.marche__valeur { display: inline-block; margin-right: var(--e-2); padding: 4px 14px 6px 28px; border-radius: 5px 12px 12px 5px; color: #172036; font-stretch: var(--tres-large);
  background: radial-gradient(circle at 13px 50%, var(--surface) 4px, transparent 4.6px), var(--soleil); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }

/* Scanner sans bouton « Analyser » (18/10/2026) : deux choix côte à côte, barre flottante au-dessus de la barre du bas. */
.scan__modes { grid-template-columns: 1fr 1fr; }
.scan__mode { min-height: 48px; padding: var(--e-2); gap: var(--e-2); }
.scan__mode small { font-size: var(--t-xs); }
.scan__boutons { margin-top: var(--e-3); }
.scan-zone:empty { display: none; }
.scan-zone .scan-resultats + .scan-resultats { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px dashed var(--trait); }
.scan-apres { margin-top: var(--e-4); }
.scan-flottant { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(var(--barre-bas) + env(safe-area-inset-bottom) + 36px);
  display: flex; flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 32px); gap: var(--e-2); margin: 0; padding: 6px;
  border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); box-shadow: 0 6px 18px -6px rgb(23 32 54 / .45); }
.scan-flottant[hidden] { display: none; }
.scan-flottant .bouton { flex: none; width: auto; min-height: 48px; margin: 0; padding: 0 var(--e-4); border-radius: 999px; white-space: nowrap; }
@media (min-width: 900px) { .scan-flottant { bottom: 16px; } }

/* Retirer un résultat ou une ligne de « Tes derniers scans » (18/10/2026). */
.scan-carte { position: relative; }
.scan-carte__retirer { position: absolute; top: 4px; right: 4px; margin: 0; }
.scan-carte .scan-carte__statut, .scan-carte .scan-carte__place { padding-right: 44px; }
.bouton-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--encre-2); cursor: pointer; }
.bouton-icone:hover, .bouton-icone:focus-visible { background: var(--surface-2); color: var(--encre); }
.bouton-icone .ic { width: 20px; height: 20px; }
.scan-derniers__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.scan-derniers__tete h2 { margin: 0; }
.scan-derniers__tete .bouton { min-height: 44px; width: auto; }
.scan-derniers__liste { margin-top: var(--e-3); }
.scan-derniers__ligne { display: flex; align-items: center; gap: var(--e-1); }
.scan-derniers__ligne > a { flex: 1; min-width: 0; }
.scan-derniers__ligne form { margin: 0; flex: none; }
/* La barre flottante ne cache jamais la fin de la page du scanner. */
body:has([data-scan-flottant]) main { padding-bottom: 88px; }
/* ── Session 22 bis : barre d'outils et filtres des listes ───────────────────────────────────────────────── */
/* Barre collée sous l'en-tête intelligent (remonte quand il se cache) ; au téléphone, « Filtres » prend la place, le tri
   est une icône qui ouvre la liste du téléphone ; le nombre de résultats passe sous la barre. Filtres : tiroir qui monte
   du bas (téléphone et tablette), colonne collée à gauche (1 024 px et plus). Cibles de 44 px. */
.liste-filtree { margin-top: var(--e-5); }
.liste-filtree__corps { min-width: 0; }
.outils { position: sticky; top: var(--entete-h); z-index: 20; display: flex; align-items: center; gap: var(--e-2);
  margin: 0 calc(var(--e-4) * -1); padding: var(--e-2) var(--e-4); background: var(--papier); border-bottom: 1px solid var(--trait);
  transition: top .28s cubic-bezier(.2, .7, .2, 1); }
.entete-cachee .outils { top: 0; }
.outils__compte { margin: 0 auto 0 0; font-size: var(--t-s); font-weight: 700; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.outils__resume { margin: var(--e-2) 0 0; font-size: var(--t-s); font-weight: 600; color: var(--encre-2); }
.outil { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-pastille); background: var(--surface); color: var(--encre);
  font: inherit; font-size: var(--t-s); font-weight: 700; text-decoration: none; cursor: pointer; }
.outil:hover { border-color: var(--encre-2); }
.outil .ic { width: 20px; height: 20px; flex: none; }
.outils__tri { display: contents; }
.outil--tri select { appearance: none; -webkit-appearance: none; max-width: 10.5em; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
  text-overflow: ellipsis; }
.outil--tri select:focus-visible { outline: none; }
.outil--tri:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.outil__nb { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rouge); color: var(--sur-rouge); font-size: var(--t-xs); font-weight: 800; }
.outil-groupe { display: inline-flex; flex: none; border: 1px solid var(--trait-fort); border-radius: var(--rayon-pastille); overflow: hidden; background: var(--surface); }
.outil-groupe .outil { border: 0; border-radius: 0; }
.outil-groupe .outil[aria-pressed="true"], .outil-groupe .outil[aria-current="true"] { background: var(--encre); color: var(--surface); }
.outil-groupe a.outil { padding: 0 12px; }
.js [data-sans-js], html:not(.js) [data-avec-js] { display: none; }
.puces-actives { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.puces-actives a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 14px; border-radius: var(--rayon-pastille);
  background: var(--encre); color: var(--surface); font-size: var(--t-s); font-weight: 700; text-decoration: none; }
.puces-actives a .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.puces-actives__tout a { background: none; color: var(--rouge-texte); padding: 0 8px; text-decoration: underline; text-underline-offset: .2em; }
.liste-filtree__corps > .grille, .liste-filtree__corps > .pokedex, .liste-filtree__corps > .illustrateurs, .liste-filtree__corps > .classement,
.liste-filtree__corps > .liste-cartes, .liste-filtree__corps > .vide-etat, .liste-filtree__corps > .paquet-avant { margin-top: var(--e-4); }

/* Tiroir des filtres (téléphone et tablette) : ouvert par #filtres sans JavaScript (:target), par site.js sinon. */
.filtres { position: fixed; inset: auto 0 0; z-index: 60; display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh;
  background: var(--surface); color: var(--encre); border-radius: var(--rayon) var(--rayon) 0 0; box-shadow: var(--ombre-panneau);
  transform: translateY(100%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s .3s; }
.filtres:target, .filtres--ouvert { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.filtres-voile { display: none; position: fixed; inset: 0; z-index: 55; background: rgb(10 14 26 / .5); }
.filtres:target + .filtres-voile, .filtres--ouvert + .filtres-voile { display: block; }
.filtres-ouverts { overflow: hidden; }
.filtres__form { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.filtres__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-bottom: 1px solid var(--trait); }
.filtres__titre { font-size: var(--t-l); }
.filtres__titre:focus { outline: none; }
.filtres__fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--encre); }
.filtres__fermer:hover { background: var(--surface-2); }
.filtres__fermer .ic { width: 22px; height: 22px; }
.filtres__corps { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--e-4) var(--e-4); }
.filtres__pied { display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); }
.filtres__pied .bouton { flex: 1 1 auto; padding-inline: 14px; }
.filtres__pied .bouton:first-child { flex: 0 1 auto; }
.filtre { margin: 0; padding: var(--e-4) 0 var(--e-1); border: 0; min-width: 0; }
.filtre + .filtre { border-top: 1px solid var(--trait); }
.filtre__titre { display: block; float: left; width: 100%; padding: 0; margin-bottom: var(--e-3); font-size: var(--t-m); font-weight: 800; }
.filtre > :not(legend) { clear: both; }
.filtre__aide { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--encre-2); }
.filtre__choix { width: 100%; min-height: 44px; padding: 0 var(--e-3); border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--surface); color: var(--encre); font: inherit; }
.f-pastilles, .segments { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.f-pastille, .segment { position: relative; }
.f-pastille input, .segment input, .case input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.f-pastille > span, .segment > span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 14px;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-pastille); background: var(--surface); color: var(--encre); font-size: var(--t-s); font-weight: 700; cursor: pointer; }
.f-pastille input:checked + span, .segment input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.f-pastille input:focus-visible + span, .segment input:focus-visible + span, .case input:focus-visible + span::before { outline: 3px solid var(--focus); outline-offset: 2px; }
.point { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.cases { margin: 0; padding: 0; list-style: none; }
.case { display: flex; align-items: center; gap: var(--e-2); min-height: 44px; font-weight: 600; cursor: pointer; }
.case span { flex: 1; min-width: 0; }
.case span::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; border: 2px solid var(--encre-2); border-radius: 6px; background: var(--surface); }
.case input:checked + span::before { border-color: var(--rouge); background: var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.case small { color: var(--encre-2); font-size: var(--t-xs); font-weight: 600; }
.cases__plus summary { display: flex; align-items: center; min-height: 44px; color: var(--rouge-texte); font-weight: 700; cursor: pointer; list-style: none; }
.cases__plus summary::-webkit-details-marker { display: none; }
.cases__plus[open] summary { display: none; }

/* Affichage en liste d'une grille de cartes (bouton « En liste », choix gardé dans le navigateur) : une ligne par carte,
   image à gauche, prix à droite ; tout reste un lien vers la fiche. */
.grille--liste { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.grille--liste > li + li { border-top: 1px solid var(--trait); }
.grille--liste .vignette__lien { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: var(--e-3); align-items: center;
  min-height: 76px; padding: var(--e-2) 56px var(--e-2) var(--e-3); }
.grille--liste .vignette__image { display: contents; }
.grille--liste .carte-image { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: auto; box-shadow: none; }
.grille--liste .etiquette { position: static; grid-column: 3; grid-row: 1 / span 3; }
.grille--liste .vignette__nom { grid-column: 2; margin-top: 0; }
.grille--liste .vignette__ligne, .grille--liste .vignette__ext { grid-column: 2; }
.grille--liste .vignette__ligne { justify-content: flex-start; gap: var(--e-2); }
.grille--liste .ajout { top: 50%; right: var(--e-2); transform: translateY(-50%); }
.grille--liste .vignette--album .vignette__image::after { display: none; }

@media (max-width: 599px) {
  .outils__compte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .outils__filtres { flex: 1 1 auto; }
  .outil--tri { width: 44px; padding: 0; }
  .outil--tri select { position: absolute; inset: 0; width: 100%; max-width: none; opacity: 0; }
}
@media (min-width: 600px) { .outils__resume { display: none; } }
@media (min-width: 1024px) {
  .liste-filtree:has(.filtres) { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--e-6); align-items: start; }
  .outils { margin-inline: 0; padding-inline: 0; }
  .outils__filtres, .filtres__fermer, .filtres-voile { display: none !important; }
  .filtres { position: sticky; top: calc(var(--entete-h) + var(--e-4)); inset: auto; z-index: 1; max-height: calc(100vh - var(--entete-h) - var(--e-6));
    transform: none; visibility: visible; transition: top .28s cubic-bezier(.2, .7, .2, 1); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: none; }
  .entete-cachee .filtres { top: var(--e-4); }
  .filtres__pied { padding-bottom: var(--e-3); }
  .js [data-filtres-voir] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .outils, .filtres, .filtres:target, .filtres--ouvert { transition: none; } }

/* Coche d'une carte déjà dans l'album et sa feuille (session 22 bis) : au téléphone, la feuille monte du bas ; sur
   ordinateur, elle s'ouvre au centre. Choix de 48 px, « Retirer » en rouge, « Annuler » dans la bulle pendant 5 s. */
.feuille { width: min(100% - 24px, 420px); max-width: none; margin: auto auto 12px; padding: var(--e-3); border: 0; border-radius: var(--rayon);
  background: var(--surface); color: var(--encre); box-shadow: var(--ombre-panneau); }
.feuille::backdrop { background: rgb(10 14 26 / .5); }
.feuille__titre { margin: var(--e-1) var(--e-2) var(--e-3); font-weight: 800; font-size: var(--t-l); }
.feuille__choix { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 48px; padding: 0 var(--e-3); border: 0; border-radius: var(--rayon-petit);
  background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.feuille__choix:hover { background: var(--surface-2); }
.feuille__choix .ic { width: 22px; height: 22px; flex: none; }
.feuille__choix--danger { color: var(--rouge-texte); }
.feuille__choix--doux { color: var(--encre-2); border-top: 1px solid var(--trait); border-radius: 0; margin-top: var(--e-2); }
.bulle__action { min-height: 44px; margin-left: var(--e-2); padding: 0 var(--e-3); border: 0; border-radius: var(--rayon-pastille); background: var(--surface); color: var(--encre);
  font: inherit; font-weight: 800; cursor: pointer; }
@media (min-width: 600px) { .feuille { margin: auto; } }
/* Liste qui change sans recharger (session 22 ter) : pendant le chargement, la liste s'estompe, après 0,1 s seulement
   (une réponse du cache, 40 à 100 ms, ne fait rien clignoter) ; la barre d'outils reste nette. Rien avec « moins de
   mouvement ». Seule l'opacité change : rien ne bouge. */
@media (prefers-reduced-motion: no-preference) {
  .liste-filtree--charge .liste-filtree__corps > :not(.outils):not(.outils__resume):not(.puces-actives) { opacity: .45; transition: opacity .2s ease .1s; }
}

/* ── Identité PrixCarte (session 23) : logo de l'en-tête et animation d'ouverture ───────────────────────────────
   Fabriqué par outils/identite/prixcarte.py et recopié ici tel quel (branché en session 23 bis par
   outils/identite/brancher-prixcarte.php : partiels logo-prixcarte et ouverture-prixcarte). Couleurs : jetons du site. */
.logo-pc { display: block; width: auto; height: 28px; overflow: visible; }
.logo-pc__p { fill: var(--rouge); }
.logo-pc__ficelle { stroke: var(--encre); }
.logo-pc__mot { fill: var(--encre); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-pc__p { fill: var(--soleil); }
  :root:not([data-theme="light"]) .logo-pc__ficelle { stroke: var(--rouge-texte); }
}
:root[data-theme="dark"] .logo-pc__p { fill: var(--soleil); }
:root[data-theme="dark"] .logo-pc__ficelle { stroke: var(--rouge-texte); }
@media (min-width: 900px) { .logo-pc { height: 32px; } }
.prochainement .logo-pc { height: 40px; }
/* Salut discret au 1er affichage d'une visite (classe posée par lancement-pont.js) : l'étiquette se balance une fois
   sur sa ficelle. Ni taille ni place qui changent (aucun décalage), rien après 0,9 s. */
.logo-pc__etiquette { transform-box: view-box; transform-origin: 9.32px 4.96px; }
html.logo-salut .logo-pc__etiquette { animation: logo-pc-salut .9s cubic-bezier(.3, .6, .4, 1) .25s both; }
@keyframes logo-pc-salut { 0% { transform: none; } 25% { transform: rotate(9deg); } 55% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } 100% { transform: none; } }

/* Ouverture de l'appli (1re image = écran de démarrage d'Android, fond marine du manifeste ; 2,3 s en tout ;
   éventail de cartes depuis la session 23 bis). */
html.ouverture-joue .ouverture--pc { background: #172036; animation: ouverture-fin .35s cubic-bezier(.4, 0, .2, 1) 1.95s both; }
.opc__p { position: absolute; left: -137.15px; top: -137.15px; width: 274.29px; height: 274.29px; will-change: transform;
  animation: opc-file .5s cubic-bezier(.6, 0, .2, 1) .95s both; }
.opc__balance { width: 100%; height: 100%; transform-origin: 31.1% 28.65%; will-change: transform;
  animation: opc-balance .68s cubic-bezier(.3, .6, .4, 1) .12s both; }
.opc__p svg, .opc__mot svg, .opc__carte svg { display: block; width: 100%; height: 100%; max-width: none; }
/* Éventail (session 23 bis) : chaque carte tourne autour du milieu de son bord bas, derrière l'étiquette. */
.opc__carte { position: absolute; left: -41.79px; top: -87.79px; width: 90px; height: 126px;
  transform-origin: 50% 100%; opacity: 0; will-change: transform, opacity; animation: .9s cubic-bezier(.3, .7, .3, 1) .12s both; }
.opc__carte--1 { animation-name: opc-carte-1; }
.opc__carte--2 { animation-name: opc-carte-2; }
.opc__carte--3 { animation-name: opc-carte-3; }
.opc__carte--4 { animation-name: opc-carte-4; }
.opc__carte--5 { animation-name: opc-carte-5; }
@keyframes opc-carte-1 { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; } 45%, 78% { opacity: 1; transform: translateY(-62px) rotate(-40deg); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes opc-carte-2 { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; } 45%, 78% { opacity: 1; transform: translateY(-62px) rotate(-20deg); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes opc-carte-3 { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; } 45%, 78% { opacity: 1; transform: translateY(-62px) rotate(0deg); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes opc-carte-4 { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; } 45%, 78% { opacity: 1; transform: translateY(-62px) rotate(20deg); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes opc-carte-5 { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; } 45%, 78% { opacity: 1; transform: translateY(-62px) rotate(40deg); } 100% { opacity: 0; transform: scale(.6); } }
.opc__scan { position: absolute; left: -81.79px; top: 0; width: 170px; height: 3px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 14px 3px rgb(255 210 58 / .55); opacity: 0; will-change: transform, opacity;
  animation: opc-scan .45s cubic-bezier(.4, 0, .6, 1) .5s both; }
.opc__mot { position: absolute; left: -101.68px; top: -20.09px; width: 244.23px; height: 39.56px; overflow: hidden; }
.opc__mot-glisse { width: 100%; height: 100%; will-change: transform, opacity; animation: opc-mot .42s cubic-bezier(.2, .7, .2, 1) 1.25s both; }
@keyframes opc-balance { 0% { transform: none; } 30% { transform: rotate(10deg); } 62% { transform: rotate(-6deg); } 85% { transform: rotate(2deg); } 100% { transform: none; } }
@keyframes opc-scan { 0% { opacity: 0; transform: translateY(-159.79px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(84.47px); } }
@keyframes opc-file { from { transform: none; } to { transform: translate(-122.83px, -5.5px) scale(0.3); } }
@keyframes opc-mot { from { opacity: 0; transform: translateX(-60%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .opc__p, .opc__balance, .opc__scan, .opc__mot-glisse, html.logo-salut .logo-pc__etiquette { animation: none; }
  .opc__eventail { display: none; }
  .opc__p { transform: translate(-122.83px, -5.5px) scale(0.3); }
  html.ouverture-joue .ouverture--pc { animation-delay: .5s; }
}