/* =============================================================================
   aide.css — la page d'aide (help.html, aide.html), posée sur base.css (refonte « Studio », 25 octobre 2026).
   Un en-tête court sur le papier millimétré avec une recherche dans la page, huit sujets (téléphone et tablette), puis
   les parties : leurs questions sur une feuille blanche, toujours visibles (les liens de l'app tombent sur du texte,
   même sans JavaScript).
   Sur ordinateur, la colonne « On this page » reste à l'écran et souligne la partie en cours (base.js) ; sur téléphone
   et tablette, la même liste est dans une barre collante sous l'en-tête.
   Règles de base.css : jetons seulement, or = la pièce devant une somme ou la monnaie, violet = action et rareté,
   transform et opacity pour le mouvement, rien en mouvement réduit.
   ============================================================================= */

/* ─── Icônes de l'app (mobile/index.html) : traits de 2 px, couleur du texte ───────────────────────────────── */
.ico-app{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Dans une phrase : le cœur, le drapeau, ⊘ et ⓘ de l'app (ⓘ n'est pas dans la police : il est dessiné). */
.ico-texte{display:inline-block;width:1.06em;height:1.06em;margin:0 .06em;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Les mots de l'app (Market, Buy, Collection → Owned…) : <b class="mot">, droits, un peu plus appuyés que le texte. */
.aide .mot{font-weight:500;color:var(--encre)}
.aide var{font-style:normal;font-weight:600}

/* Arrivée sur une ancre (les liens de l'app vers /help#networth…) : le saut est immédiat, pas un défilement doux de
   9 000 px. Le défilement doux de base.css revient après le chargement (aide.js pose html.lisse) pour les liens proches. */
html:not(.lisse){scroll-behavior:auto}
/* Sous 1100 px, la barre « On this page » (48 px) s'ajoute à l'en-tête : une ancre tombe 21 px sous elle. */
@media (max-width:1099px){html{scroll-padding-top:calc(var(--entete) + 48px + 21px)}}

/* ─── 1. En-tête : papier millimétré fondu, titre, recherche ──────────────────────────────────────────────── */
.aide-tete{padding-bottom:34px}
@media (min-width:600px){.aide-tete{padding-bottom:55px}}

/* La recherche n'existe qu'avec JavaScript (html.js est posé dans le <head>, avant le premier rendu : rien ne bouge
   quand le script arrive, et une ancre ouverte depuis l'app reste à sa place). */
.recherche{display:none;position:relative;max-width:620px;margin-top:34px}
html.js .recherche{display:block}
.recherche input{display:block;width:100%;height:56px;margin:0;padding:0 56px 0 52px;border:0;border-radius:var(--r-m);background:var(--carte);box-shadow:var(--ombre-objet);font-size:17px;line-height:56px;color:var(--encre);-webkit-appearance:none;appearance:none}
.recherche input::placeholder{color:var(--attenue);opacity:1}
.recherche input::-webkit-search-cancel-button,.recherche input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.recherche input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.recherche .loupe{position:absolute;left:17px;top:17px;color:var(--attenue);pointer-events:none}
.recherche:focus-within .loupe{color:var(--encre)}
/* La touche « / » : seulement avec un clavier et une souris, et tant que le champ est vide. */
.touche{position:absolute;right:16px;top:16px;display:none;min-width:24px;height:24px;padding:0 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--trait-fort);font:600 13px/24px var(--sans);text-align:center;color:var(--attenue);pointer-events:none}
@media (hover:hover) and (pointer:fine){.touche{display:block}}
.recherche:has(input:not(:placeholder-shown)) .touche,.recherche:focus-within .touche{display:none}
.vider{position:absolute;right:6px;top:6px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--attenue);cursor:pointer}
.vider .ico-app{width:18px;height:18px}
.vider:hover{color:var(--encre)}
/* Le nombre de réponses (annoncé aux lecteurs d'écran). Vide, il ne prend pas de place. */
.resultat{margin-top:13px;font-size:15px;line-height:1.5;color:var(--attenue);font-variant-numeric:tabular-nums}
.resultat:empty{margin:0}
/* Sans réponse, la boîte « No answer » le dit : la ligne reste pour les lecteurs d'écran seulement. */
html.vide .resultat{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Le gris posé à même le papier (la phrase et le nombre de réponses ici, le repère « Contact » en bas) : le gris du
   papier de base.css (--attenue-papier), AA là où il croise une ligne du quadrillage. */
.aide-tete .chapeau,.resultat,.aide-fin .repere{color:var(--attenue-papier)}
.q h3:focus-visible{outline-offset:4px;border-radius:4px}

/* ─── 2. Les huit sujets ──────────────────────────────────────────────────────────────────────────────────────
   Téléphone : une liste groupée sur une carte (titre, ligne grise, chevron), comme les réglages d'un téléphone.
   Dès 600 px : des tuiles, 2 par rangée, puis 4 dès 900 px. Pas d'icône : le titre suffit.
   Sur ordinateur (dès 1100 px), la colonne « On this page » suffit : la liste ne revient que sous la boîte
   « No answer » d'une recherche sans réponse (html.vide, aide.js). */
.sujets-nav{margin-bottom:55px}
@media (min-width:600px){.sujets-nav{margin-bottom:89px}}
@media (min-width:1100px){html:not(.vide) .sujets-nav{display:none}}
.sujets{display:grid;margin:0;padding:0;list-style:none;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte);overflow:hidden}
.sujets li{min-width:0}
.sujet{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 10px;grid-template-areas:"titre fleche" "ligne fleche";column-gap:13px;align-items:center;min-height:68px;padding:12px 18px;color:var(--encre);text-decoration:none}
.sujets li+li .sujet::before{content:'';position:absolute;top:0;left:18px;right:0;height:1px;background:var(--trait)}
.sujet::after{content:'';grid-area:fleche;width:7px;height:7px;border-top:2px solid var(--attenue);border-right:2px solid var(--attenue);rotate:45deg;justify-self:start}
.sujet:focus-visible{outline-offset:-2px}
.sujet strong{grid-area:titre;align-self:end;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.006em}
.sujet-ligne{grid-area:ligne;align-self:start;margin-top:1px;font-size:14px;line-height:1.4;color:var(--attenue)}
@media (max-width:599px) and (hover:hover){.sujet:hover{background:var(--voile)}}
/* Tablette : des tuiles séparées (deux par rangée, sans trop de hauteur). L'ombre du survol est une couche (::after)
   dont seule l'opacité change : on n'anime pas box-shadow. */
@media (min-width:600px){
  .sujets{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .sujet{height:100%;padding:16px 18px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte);grid-template-columns:minmax(0,1fr);grid-template-areas:"titre" "ligne"}
  .sujets li+li .sujet::before{content:none}
  .sujet::after{position:absolute;inset:0;grid-area:auto;width:auto;height:auto;border:0;border-radius:inherit;rotate:none;justify-self:auto;box-shadow:var(--ombre-survol);opacity:0;pointer-events:none}
  .sujet:focus-visible{outline-offset:2px}
}
@media (min-width:600px) and (hover:hover){.sujet:hover::after{opacity:1}}
/* De 900 à 1099 px (et sous « No answer » au-delà) : quatre tuiles par rangée. */
@media (min-width:900px){
  .sujets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sujet{display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:21px}
  .sujet strong{align-self:auto;font-size:17px}
  .sujet-ligne{align-self:auto;margin-top:5px;font-size:15px;line-height:1.5}
}

/* ─── 3. Corps : la colonne « On this page » (dès 1100 px), la barre (dessous), les parties ────────────────── */
.aide-sommaire{display:none}
@media (min-width:1100px){
  .aide-corps{display:grid;grid-template-columns:188px minmax(0,1fr);column-gap:55px;align-items:start}
  .aide-sommaire{display:block;position:sticky;top:calc(var(--entete) + 34px);max-height:calc(100vh - var(--entete) - 55px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
}
.sommaire-titre{margin:0 0 13px;font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.aide-sommaire a{padding-block:7px;line-height:1.4}
/* La colonne coupe ce qui dépasse (overflow) : le contour du focus est dessiné dedans. */
.aide-sommaire a:focus-visible{outline-offset:-2px;border-radius:6px}

/* La barre « On this page » (moins de 1100 px) : sous l'en-tête, de bord à bord ; le nom de la partie en cours, et la
   liste des neuf parties qui s'ouvre dessous (un <details> : clavier et lecteurs d'écran sans script). */
.aide-volet{position:sticky;top:var(--entete);z-index:9;margin:0 calc(-1 * var(--gouttiere)) 34px}
@media (min-width:600px){.aide-volet{margin-bottom:55px}}
@media (min-width:1100px){.aide-volet{display:none}}
.aide-volet>summary{display:flex;align-items:center;gap:8px;height:48px;padding:0 var(--gouttiere);background:var(--fond);box-shadow:inset 0 -1px 0 var(--trait);font-size:15px;line-height:1.3;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.aide-volet>summary::-webkit-details-marker{display:none}
.aide-volet>summary::after{content:'';flex:none;width:7px;height:7px;margin:-3px 3px 0 auto;border-right:2px solid var(--attenue);border-bottom:2px solid var(--attenue);rotate:45deg}
.aide-volet[open]>summary::after{rotate:225deg;translate:0 4px}
.aide-volet>summary:focus-visible{outline-offset:-3px}
@media (min-width:900px){.aide-volet>summary{background:color-mix(in srgb,var(--fond) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}}
.volet-titre{flex:none;font-size:13px;font-weight:600;color:var(--attenue)}
.volet-ici{min-width:0;overflow:hidden;font-weight:600;color:var(--encre);text-overflow:ellipsis;white-space:nowrap}
.volet-liste{position:absolute;top:calc(100% + 8px);left:var(--gouttiere);right:var(--gouttiere);max-height:calc(100vh - var(--entete) - 89px);max-height:calc(100dvh - var(--entete) - 89px);padding:8px;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-objet)}
@media (min-width:600px){.volet-liste{right:auto;width:320px}}
.volet-liste a{display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:var(--r-s);box-shadow:none;color:var(--encre)}
.volet-liste a[aria-current]{background:var(--voile);box-shadow:inset 2px 0 0 var(--accent);font-weight:600}
.volet-liste a:focus-visible{outline-offset:-2px}
@media (hover:hover){.volet-liste a:hover{background:var(--voile)}}

.partie{padding-bottom:55px}
@media (min-width:600px){.partie{padding-bottom:89px}}
.partie .tete{margin-bottom:21px}
.partie .tete .chapeau{margin-top:13px}
@media (min-width:600px){.partie .tete{margin-bottom:34px}}
/* Titres des parties : une page de référence, pas une page d'accueil (27 → 34 px ; Contact, la fin, garde 44 px). */
.partie .tete h2{font-size:clamp(27px,1.6vw + 14px,34px);line-height:1.15;letter-spacing:-.018em}

/* La feuille : les questions d'une partie sur une carte blanche, séparées par un filet. */
.feuille{--pad:21px;display:flow-root;padding:0 var(--pad);border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
@media (min-width:600px){.feuille{--pad:34px}}
@media (min-width:1280px){.feuille{--pad:55px}}
.q{--q-y:28px;position:relative;padding:var(--q-y) 0}
@media (min-width:600px){.q{--q-y:34px}}
/* Un filet au-dessus de chaque question visible qui en suit une autre visible (la recherche en cache). */
.q:not([hidden])~.q{border-top:1px solid var(--trait)}
.q h3{position:relative;font-size:19px;line-height:1.3}
@media (min-width:600px){.q h3{font-size:21px}}
/* L'ancre ouverte depuis l'app : un trait violet au bord de la feuille, devant la question (orientation, pas décor). */
.q h3:target::before{content:'';position:absolute;left:calc(-1 * var(--pad));top:.1em;bottom:.1em;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
/* Le lien « # » de chaque question (aide.js) : dans la marge de la feuille, sur la ligne du titre ; au survol de la
   question et au focus. Il copie l'adresse : « Link copied » apparaît dessous (au-dessus, l'en-tête le couvrirait). */
.lien-q{position:absolute;left:calc(var(--pad) / -2 - min(var(--pad), 32px) / 2);top:var(--q-y);display:flex;align-items:center;justify-content:center;width:min(var(--pad), 32px);height:calc(19px * 1.3);border-radius:6px;font-size:17px;font-weight:600;line-height:1;color:var(--attenue);text-decoration:none;opacity:0}
@media (min-width:600px){.lien-q{height:calc(21px * 1.3)}}
.lien-q::before{content:'#'}
.lien-q:focus-visible,.lien-q.copie{opacity:1}
.lien-q:focus-visible{outline-offset:-2px}
@media (hover:hover){.q:hover .lien-q{opacity:1}.lien-q:hover{color:var(--accent)}}
.lien-q.copie{color:var(--accent)}
.lien-q.copie::after{content:attr(data-copie);position:absolute;z-index:2;left:0;top:calc(100% + 5px);padding:3px 8px;border-radius:6px;background:var(--encre);color:var(--carte);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;pointer-events:none}
.r{margin-top:13px;color:var(--encre)}
.r>*+*{margin-top:13px}
.r p,.r li{max-width:68ch}
.r .tableau,.r .exemple-carte,.r .parts{margin-top:21px}
.r .tableau+*,.r .parts+*{margin-top:21px}
.r .puces li+li{margin-top:5px}
.sous-tableau{font-size:15px;line-height:1.55;color:var(--attenue)}
.sous-tableau .mot{color:inherit}

/* « Bon à savoir » : une boîte dans la feuille, du gris du fond de la page (un peu plus sombre que la feuille, en clair
   comme en sombre). Seule réponse d'une recherche, elle garde sa marge en haut. */
.bon{padding:13px 18px;border-radius:var(--r-m);background:var(--fond);font-size:16px;line-height:1.55}
.q.savoir{margin:var(--pad) 0;padding:21px;border-radius:var(--r-m);background:var(--fond)}
.q:not([hidden])~.q.savoir{margin-top:0}
.q.savoir,.q:not([hidden])~.q.savoir{border-top:0}
.savoir-titre{margin-bottom:5px;font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.savoir p:not(.savoir-titre){max-width:68ch;color:var(--encre)}

/* Termes : Last, Value, Floor, Sold. */
.termes{margin:0;padding:0;list-style:none}
.termes li{padding:13px 0;border-top:1px solid var(--trait)}
.termes li:first-child{border-top:0;padding-top:5px}
.termes li:last-child{padding-bottom:0}
.termes strong{font-weight:600}
/* Points de « Why we ask for your number » : le terme, puis son texte, sous un filet. */
.r .points li{padding:18px 0}
.r .points li:first-child{padding-top:5px}
.r .points li:last-child{padding-bottom:0}
.r .points strong{font-weight:600}
.r .points p{margin-top:5px;color:var(--encre)}

/* ─── 4. Tableaux (base.css .chiffres), lisibles dès 360 px ────────────────────────────────────────────────── */
/* Une boîte qui défile a le focus (aide.js) : le contour est dessiné hors de la boîte, la colonne figée ne le couvre pas. */
.aide .tableau:focus-visible{outline-offset:2px}
.feuille .chiffres th,.feuille .chiffres td{padding-block:11px}
.feuille .chiffres td small,.chiffres .s{color:var(--attenue);font-weight:500}
.chiffres .rien{color:var(--attenue)}
.chiffres thead .tag{vertical-align:1px}
.chiffres tbody th .tag{vertical-align:1px}
.chiffres .commun{font-size:13px}
.niveaux,.raretes,.toiles{max-width:560px}
.niveaux :is(th,td):first-child{width:48px}
.niveaux td.n{width:80px;padding-right:21px}
@media (min-width:600px){.niveaux :is(th,td):first-child{width:72px}.niveaux td.n{width:96px;padding-right:34px}}
.raretes td.n{white-space:nowrap}
/* Les toiles : « 13 × 8 » d'un tenant ; sur téléphone, « S1 » passe sous le nom. */
.toiles td{white-space:nowrap}
@media (max-width:599px){
  .toiles .s{display:block;font-size:13px}
  .toiles .sep{display:none}
  .toiles tbody th,.toiles td{font-size:14px}
  .feuille .toiles :is(th,td){padding-right:8px}
  .toiles .somme{gap:4px}
}
/* Sur téléphone, un tableau va d'un bord à l'autre de la feuille (ses filets aussi) ; la marge passe dans la première et
   la dernière colonne, pour que la colonne figée des chances garde la sienne quand on fait défiler. Pas pour le tableau
   de la modération, présenté en cartes. */
@media (max-width:599px){
  .feuille .tableau:not(.tableau-cartes){margin-inline:calc(-1 * var(--pad));padding-inline:0}
  .feuille .tableau:not(.tableau-cartes) .chiffres :is(th,td):first-child{padding-left:var(--pad)}
  .feuille .tableau:not(.tableau-cartes) .chiffres :is(th,td):last-child{padding-right:var(--pad)}
  .feuille .tableau:not(.tableau-cartes) .chiffres caption{padding-inline:var(--pad)}
}
/* Sous 380 px (« Monumental · 233 × 144 · 50 000 · Niveau ») : la marge des bords se resserre pour ce seul tableau. */
@media (max-width:379px){
  .feuille .tableau:not(.tableau-cartes) table.toiles :is(th,td):first-child{padding-left:13px}
  .feuille .tableau:not(.tableau-cartes) table.toiles :is(th,td):last-child{padding-right:13px}
}
/* Les chances : « 1 in » en gris, le nombre en encre ; la colonne Level reste visible quand on fait défiler. */
.chances{min-width:640px;border-collapse:separate;border-spacing:0}
.chances .un{color:var(--attenue)}
.chances th,.chances td{font-size:15px}
.chances thead th{padding-bottom:13px}
.chances :is(th,td):first-child{position:sticky;left:0;z-index:1;width:56px;padding-right:13px;background:var(--carte)}
@media (max-width:599px){
  .chances :is(th,td):first-child{width:auto;min-width:calc(var(--pad) + 52px);box-shadow:1px 0 0 var(--trait)}
  .chances{min-width:600px}
  .chances th,.chances td{font-size:14px}
}
/* Les parts d'une vente : la boutique, puis la revente (l'ordre du texte) ; côte à côte dès 700 px. */
.parts{display:grid;gap:34px}
@media (min-width:700px){.parts{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:34px}}
.parts .tableau{margin-top:0}
.parts caption{font-size:14px;line-height:1.45}
@media (min-width:700px){.parts caption{height:calc(2.9em + 13px)}}
.parts .chiffres tbody th .somme{font-weight:600}
/* Modération : un vrai tableau dès 700 px ; dessous, une carte par décision, l'en-tête repris devant chaque case. */
.moderation tbody th{font-size:15px;font-weight:600;min-width:150px}
@media (max-width:699px){
  .tableau-cartes{overflow:visible;margin-inline:0 !important;padding-inline:0 !important}
  .moderation,.moderation tbody,.moderation tr,.moderation th,.moderation td{display:block;width:auto}
  .moderation thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .moderation tr{padding:13px 0;border-bottom:1px solid var(--trait)}
  .feuille .moderation tbody th,.feuille .moderation td{padding:0;border:0}
  .moderation tbody th{min-width:0;margin-bottom:8px;font-size:16px}
  .moderation td+td{margin-top:8px}
  .moderation td::before{content:attr(data-l);display:block;font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
}

/* ─── 4 bis. La courbe du tirage (#odds, courbe.js) ───────────────────────────────────────────────────────────
   Sous le tableau des chances : on choisit un niveau, la courbe montre la chance d'avoir N exemplaires ou moins (de
   1 exemplaire au maximum, 100 aujourd'hui ; de presque 0 à 100 %), l'aire sous la courbe et un rail fin marquent les
   cinq raretés, un pointillé la moitié des éditions, et les chances de chaque rareté pour ce niveau sont écrites
   dessous (c'est aussi la légende du rail : mêmes pastilles, même ordre).
   Violet = rareté seulement : le niveau choisi est en encre, la courbe aussi. Rien ne bouge en hauteur quand on change
   de niveau ou quand la bulle paraît : les niveaux, la boîte du dessin et les chances ont des hauteurs fixes, et la
   bulle flotte.
   La figure ne paraît que quand courbe.js tourne (il pose html.courbe-ok) : sans lui (pas de JavaScript, fichier
   bloqué, vieux navigateur), pas de cadre vide, le tableau au-dessus dit tout. Elle est loin sous l'ancre #odds : son
   arrivée ne bouge pas ce qu'on lit. Les largeurs viennent de la figure elle-même (container query) : 238 px à 320,
   308 px à 390, 807 px à 1440. */
.courbe{display:none;margin-top:34px;container-type:inline-size}
html.courbe-ok .courbe{display:block}
.courbe-titre{font-size:17px;font-weight:600;line-height:1.45;letter-spacing:-.006em;color:var(--encre)}
.courbe .courbe-aide{margin-top:3px;font-size:15px;line-height:1.5;color:var(--attenue)}
/* Les niveaux : une seule barre de dix cases à toutes les tailles (un cadre de 1 px, des cases de 44 px de haut, un
   filet court entre deux) ; la case choisie en encre. Sous 260 px de large (téléphone de 320 px), la barre prend 8 px
   de chaque côté dans la marge de la feuille, comme la ligne marquée des chances : 25 px par case, au-dessus des 24 px
   de WCAG 2.5.8. */
.courbe-niveaux{min-width:0;margin:21px 0 0;padding:0;border:0}
.courbe-niveaux legend{float:left;width:100%;margin:0 0 8px;padding:0;font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.courbe-boutons{clear:both;display:flex;height:46px;max-width:460px;padding:1px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--trait-fort)}
@container (max-width:259px){.courbe-boutons{margin-inline:-8px}}
/* Sans container query (Safari avant 16) : la même chose d'après la fenêtre (la figure y a 82 px de moins). */
@supports not (container-type:inline-size){@media (max-width:341px){.courbe-boutons{margin-inline:-8px}}}
.courbe-niv{position:relative;display:block;flex:1 1 0;min-width:0}
.courbe-niv+.courbe-niv::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--trait)}
.courbe-niv:has(input:checked)::before,.courbe-niv:has(input:checked)+.courbe-niv::before{visibility:hidden}
.courbe-niv input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.courbe-niv span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:9px;font-size:14px;font-weight:600;line-height:1;color:var(--encre);font-variant-numeric:tabular-nums}
.courbe-niv input:checked+span{background:var(--encre);color:var(--carte)}
.courbe-niv input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.courbe-niv input:not(:checked):hover+span{background:var(--voile)}}
/* La boîte du dessin : 250 px de haut (290 dès 520 px de large), dont 54 px en bas pour le rail et l'axe. Le doigt
   glisse de côté pour suivre la courbe ; vers le haut ou le bas, la page défile. */
.courbe-trace{position:relative;height:250px;margin-top:21px;border-radius:var(--r-s);outline-offset:6px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
@container (min-width:520px){.courbe-trace{height:290px}}
.courbe-trace svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.courbe-trace text{font:400 12px/1 var(--sans);fill:var(--attenue);font-variant-numeric:tabular-nums}
.courbe-trace .courbe-axe-titre{font-weight:600}
/* La moitié des éditions (82 au niveau 1) : un pointillé gris de la courbe à la ligne de base, son nombre en encre et
   en gras sur l'axe, pour qu'il ne passe pas pour une limite de rareté (en gris, avec leur trait). */
.courbe-trace .courbe-axe-moitie{font-weight:600;fill:var(--encre)}
.courbe-moitie{stroke:var(--attenue);stroke-width:1;stroke-dasharray:2 3;shape-rendering:crispEdges}
.courbe-grille{stroke:var(--trait);stroke-width:1;shape-rendering:crispEdges}
/* La ligne de base et le bout de chaque rareté (5, 20, 50) en gris de texte, 5,7:1 en clair et 6,7:1 en sombre sur la
   feuille : les limites se lisent sans la couleur des zones, trop pâles pour 3:1. */
.courbe-base,.courbe-borne{stroke:var(--attenue);stroke-width:1;shape-rendering:crispEdges}
.courbe-ligne{fill:none;stroke:var(--encre);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* L'aire sous la courbe et le rail : une rareté, une couleur, la même aux deux endroits. Rare, le liseré de sa pastille
   éclairci ; Very rare, Ultra rare et Unique, le fond de leur pastille. Common n'a pas de pastille : un gris très clair
   dans l'aire (la courbe en encre garde la forme), le gris des traits dans le rail pour qu'il se voie. Les mélanges
   sont dans @supports, plus bas : un color-mix() qui contient var() n'est refusé qu'au calcul de la valeur, trop tard
   pour que la déclaration d'avant reste, et sans color-mix() (Safari avant 16.2, Firefox avant 113) le remplissage
   devenait noir. Sans lui, Common prend le gris des traits, Rare son liseré plein. */
.courbe-aire,.courbe-seg{fill:var(--trait)}
.courbe-aire-rare,.courbe-seg-rare{fill:var(--rare-lisere)}
.courbe-aire-tres_rare,.courbe-seg-tres_rare{fill:var(--tres-rare-fond)}
.courbe-aire-ultra_rare,.courbe-seg-ultra_rare{fill:var(--ultra-fond)}
.courbe-aire-unique,.courbe-seg-unique{fill:var(--unique-fond)}
/* Un morceau du rail élargi à 3 px (Unique sur téléphone) passe devant son voisin, détouré d'1 px couleur de feuille. */
.courbe-seg-mini{stroke:var(--carte);stroke-width:2px;paint-order:stroke}
.courbe-viseur{stroke:var(--attenue);stroke-width:1;shape-rendering:crispEdges}
.courbe-point{fill:var(--encre);stroke:var(--carte);stroke-width:2}
/* La bulle (celle des graphiques de valeur.css) : en haut de la boîte, au-dessus de la ligne des 100 % (courbe.js lui
   laisse 42 px), centrée sur le viseur et déplacée par transform ; elle peut prendre la marge de la feuille, jamais
   au-delà (courbe.js). Une ligne : le libellé en 400, la chance en 600. */
.courbe .courbe-bulle{position:absolute;top:0;left:0;z-index:2;width:max-content;max-width:100%;margin:0;padding:6px 10px;border-radius:var(--r-s);background:var(--encre);color:var(--fond);font-size:13px;font-weight:400;line-height:1.4;font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 4px 12px -4px rgb(0 0 0/.3)}
.courbe-bulle b{font-weight:600}
/* Les chances du niveau : une rangée de cinq dès 700 px de large (la pastille, puis la chance) ; dessous, cinq lignes,
   pas plus larges que 340 px (sur une tablette, la chance ne part pas à 500 px de sa pastille). Les raretés que la
   bulle compte en entier (« 5 copies or fewer » : Unique et Ultra rare) sont marquées comme la ligne en vigueur des
   tableaux (base.css, tr.en-cours) : un fond neutre, un trait d'encre de 2 px à gauche, la chance en gras. Celle du
   doigt, quand elle n'est comptée qu'en partie (« 71 copies or fewer » : Common), le trait seul ; sur téléphone, il
   continue celui des lignes du dessus. */
.courbe .courbe-chances-titre{margin-top:21px;font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.courbe-chances{display:grid;grid-auto-rows:30px;height:150px;max-width:356px;margin:5px -8px 0;padding:0;list-style:none}
.courbe-chance{display:flex;align-items:center;justify-content:space-between;gap:13px;min-width:0;padding:0 8px}
.courbe-chance.comptee{background:var(--voile);box-shadow:inset 2px 0 0 var(--encre)}
.courbe-chance.comptee .courbe-val{font-weight:600}
.courbe-chance.en-partie{box-shadow:inset 2px 0 0 var(--encre)}
.courbe-chance .commun{font-size:13px}
.courbe-val{font-size:15px;line-height:1.4;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}
.courbe-val .un{color:var(--attenue)}
@container (min-width:700px){
  .courbe-chances{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:60px;height:60px;max-width:none;column-gap:5px}
  .courbe-chance{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
}
/* Les mélanges de couleurs, seulement là où color-mix() existe (pourquoi : plus haut, l'aire et le rail). Avant les cas
   particuliers (§ 10) : les couleurs forcées passent toujours devant. */
@supports (color:color-mix(in srgb,red 50%,blue)){
  .courbe-aire-commune{fill:color-mix(in srgb,var(--encre) 6%,var(--carte))}
  .courbe-aire-rare,.courbe-seg-rare{fill:color-mix(in srgb,var(--rare-lisere) 50%,var(--carte))}
  /* Mêlé à la feuille, pas au fond de la page : en sombre, --fond est plus foncé que la feuille et le fond disparaissait. */
  .courbe-chance.comptee{background:color-mix(in srgb,var(--encre) 8%,var(--carte))}
}

/* ─── 5. La carte d'exemple (Reading a card) ─────────────────────────────────────────────────────────────────
   La carte « Calme » du Market de l'app (1.4 ; GAME-DESIGN §10, maquette site/_cartes-variantes.html, variante 1),
   redessinée ; les repères 1 à 4 à sa droite. La carte elle-même (.carte-calme, .cadre-calme, ses quatre lignes) est
   dans base.css, la même que les cartes d'exemple de l'accueil ; ici, sa largeur, son ombre et ses repères. */
.exemple-carte{display:grid;grid-template-columns:minmax(0,1fr);gap:21px 34px;align-items:start}
@media (min-width:760px){.exemple-carte{grid-template-columns:auto minmax(0,1fr)}}
/* Le plateau : le papier millimétré du site (base.css .papier-fond), la carte posée dessus, ses repères à droite. Sous
   380 px, il prend aussi les marges de la feuille (il ne dépasse plus de la feuille blanche) ; sous 340 px, ses marges
   intérieures se resserrent (264 px : moins que la feuille à 320 px). */
.exemple-carte figure{justify-self:center;width:280px;padding:21px 55px 13px 21px;border-radius:var(--r-m)}
@media (min-width:760px){.exemple-carte figure{justify-self:start}}
@media (max-width:379px){.exemple-carte figure{margin-inline:calc(-1 * var(--pad))}}
@media (max-width:339px){.exemple-carte figure{width:264px;padding:13px 47px 13px 13px}}
/* 204 px de large : le dessin de 34 × 21 y est bord à bord à 6 px par pixel, une échelle entière (l'app, elle, remplit
   sa colonne). Posée seule sur le papier : l'ombre des objets, plus marquée que celle des cartes de l'accueil. */
.exemple-carte .carte-calme{width:204px;box-shadow:var(--ombre-objet)}
.exemple-carte .carte-calme [data-n]::after{content:attr(data-n);content:attr(data-n) / "";position:absolute;right:-43px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--encre);color:var(--carte);font:700 12px/22px var(--sans);text-align:center}
/* La légende est posée sur le papier : en encre (le gris passerait sous AA là où une ligne du papier la croise). */
.exemple-carte figcaption{width:204px;margin-top:8px;text-align:center;color:var(--encre)}
.reperes{margin:13px 0 0;padding:0;list-style:none;counter-reset:repere}
.reperes li{position:relative;padding-left:34px;counter-increment:repere}
.reperes li+li{margin-top:13px}
.reperes li::before{content:counter(repere);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--encre);color:var(--carte);font:700 12px/22px var(--sans);text-align:center}

/* ─── 6. Safe trades : cinq garanties en tuiles, puis la garantie de valeur ─────────────────────────────────
   Ordinateur : 3 tuiles, puis 2 plus larges, puis la valeur sur toute la largeur. Tablette : 2 par rangée. */
.garanties{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.garanties>li{min-width:0;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
@media (min-width:600px){
  .garanties{grid-template-columns:repeat(2,minmax(0,1fr))}
  .garanties>li:nth-child(5),.garanties>li.garantie-valeur{grid-column:1 / -1}
}
@media (min-width:900px){
  .garanties{grid-template-columns:repeat(6,minmax(0,1fr))}
  .garanties>li{grid-column:span 2}
  .garanties>li:nth-child(4),.garanties>li:nth-child(5){grid-column:span 3}
  .garanties>li.garantie-valeur{grid-column:1 / -1}
}
.garanties h3{font-size:17px;line-height:1.4;letter-spacing:-.006em}
.garanties>li>p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--encre)}
/* La garantie de valeur : la pièce, le titre et la phrase de la page Phicoins ; à droite, ce qui la tient (peu donnés,
   beaucoup détruits, une règle publique) ; le lien vers les chiffres de chaque lundi. */
.garanties>li.garantie-valeur{display:grid;gap:21px 55px;padding:21px}
@media (min-width:600px){.garanties>li.garantie-valeur{padding:34px}}
@media (min-width:900px){
  .garanties>li.garantie-valeur{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);grid-template-rows:auto 1fr;grid-template-areas:"tete points" "lien points";row-gap:21px}
  .valeur-tete{grid-area:tete}
  .valeur-points{grid-area:points}
  .valeur-lien{grid-area:lien;align-self:end}
}
@media (min-width:1280px){.garanties>li.garantie-valeur{padding:55px}}
.valeur-piece{display:block;width:48px;height:48px;margin-bottom:21px}
.valeur-tete h3{font-family:var(--titre);font-size:27px;line-height:1.2;letter-spacing:-.018em}
.valeur-tete p{margin-top:13px;max-width:44ch;font-size:16px;line-height:1.55;color:var(--encre)}
.valeur-points{margin:0;padding:0;list-style:none}
.valeur-points li{padding:18px 0;border-top:1px solid var(--trait)}
.valeur-points li:last-child{padding-bottom:0}
@media (min-width:900px){.valeur-points li:first-child{padding-top:0;border-top:0}}
.valeur-points h4{font-size:17px;line-height:1.4}
.valeur-points p{margin-top:5px;max-width:62ch;font-size:15px;line-height:1.55;color:var(--encre)}
.lien-suite{display:inline-block;padding-block:11px;font-size:15px;font-weight:600;line-height:1.45;color:var(--accent);text-decoration:none}
.lien-suite span{display:inline-block;margin-left:4px}
.valeur-lien{margin-block:-11px}
@media (hover:hover){
  .lien-suite:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.lien-suite:hover span{transform:translateX(3px)}}

/* ─── 7. Fin de page : Contact, le φ qui se dessine, sur le papier fondu en haut et en bas ────────────────────
   Une bande droite, comme les autres papiers du site. Dans la colonne du texte (la colonne « On this page » reste à
   l'écran jusqu'au bout) ; de bord à bord sous 1100 px. */
.aide-fin{padding:55px 0 34px}
@media (min-width:600px){.aide-fin{padding:89px 0 55px}}
@media (max-width:1099px){.aide-fin{margin-inline:calc(-1 * var(--gouttiere));padding-inline:var(--gouttiere)}}
.aide-fin .phi-pixels{margin-bottom:34px}
.aide-fin .repere{justify-content:center}
.aide-fin h2{margin-inline:auto}
.aide-fin .chapeau{margin:21px auto 0;max-width:46ch;color:var(--encre)}
/* Ses liens, posés à même le papier : le violet d'encre (--accent-encre), AA là où une ligne du quadrillage les croise
   (clair : 6,3:1 sur une ligne et 7,1:1 sur le papier, au lieu de 4,1:1 et 4,7:1 avec --accent ; sombre : 8,2:1 et
   9,7:1). Le soulignement se renforce toujours au survol, le contour du focus reste celui de base.css. Le lien du
   médiateur, sur sa carte blanche, garde --accent (5,3:1 en clair). */
.aide-fin .chapeau a{color:var(--accent-encre)}
/* Le médiateur : un petit encadré blanc, aligné à gauche (six lignes centrées se lisent mal, et le gris sur le papier
   passerait sous AA). */
.aide-fin .mediateur{max-width:62ch;margin:34px auto 0;padding:13px 18px;border-radius:var(--r-m);background:var(--carte);box-shadow:var(--ombre-carte);font-size:15px;line-height:1.55;color:var(--attenue);text-align:left}
@media (min-width:600px){.aide-fin .mediateur{padding:18px 21px}}
.aide-fin .mediateur strong{color:var(--encre)}

/* ─── 8. La recherche en cours ───────────────────────────────────────────────────────────────────────────────
   aide.js pose html.cherche : les sujets se cachent, les questions sans le mot aussi (hidden), et les mots trouvés
   sont surlignés sans toucher au texte (CSS Custom Highlight API, là où elle existe). Sans réponse (html.vide) : la
   boîte « No answer », puis les sujets ; la colonne et la barre se taisent. */
html.cherche .sujets-nav{display:none}
html.cherche.vide .sujets-nav{display:block}
html.vide .aide-sommaire{display:none}
html.vide .aide-volet{display:none}
html.cherche .aide-tete{padding-bottom:34px}
::highlight(aide){background-color:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--encre);text-decoration:underline 2px var(--accent)}
.aucun{margin-bottom:34px;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
@media (min-width:600px){.aucun{padding:34px}}
.aucun-titre{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.aucun p+p{margin-top:8px;color:var(--attenue)}

/* ─── 9. Mouvement (jamais en mouvement réduit) ────────────────────────────────────────────────────────────── */
@keyframes volet-entree{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:no-preference){
  .sujet{transition:scale 300ms var(--ressort),background-color 150ms}
  .sujet::after{transition:opacity var(--d-retour)}
  .sujet:active{scale:.985;transition-duration:90ms}
  .lien-suite span{transition:transform var(--d-retour) var(--ressort)}
  .lien-q{transition:opacity 150ms,color 150ms}
  .aide-volet>summary::after{transition:rotate 200ms var(--ressort),translate 200ms var(--ressort)}
  .aide-volet[open] .volet-liste{animation:volet-entree 160ms var(--sortie)}
  /* La courbe ne s'anime jamais (changer de niveau la redessine d'un coup) ; seuls ses boutons répondent au doigt. */
  .courbe-niv span{transition:scale 300ms var(--ressort),background-color 150ms}
  .courbe-niv input:active+span{scale:.96;transition-duration:90ms}
}

/* ─── 10. Cas particuliers ─────────────────────────────────────────────────────────────────────────────────── */
@media (forced-colors:active){
  .feuille,.sujet,.garanties>li,.recherche input,.aucun,.volet-liste,.aide-fin .mediateur{border:1px solid}
  .aide-volet>summary{border-bottom:1px solid}
  .q h3:target::before{background:Highlight}
  /* La courbe : des traits et des contours, sans couleur ; le niveau choisi en Highlight. */
  .courbe-boutons{outline:1px solid;outline-offset:-1px}
  .courbe-niv span{border:1px solid}
  .courbe-niv input:checked+span{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .courbe-aire,.courbe-seg,.courbe-seg-mini{fill:Canvas;stroke:CanvasText;stroke-width:1}
  .courbe-ligne,.courbe-viseur,.courbe-base,.courbe-borne,.courbe-moitie{stroke:CanvasText}
  .courbe-point{fill:CanvasText}
  .courbe-trace text{fill:CanvasText}
  .courbe .courbe-bulle,.courbe-chance.comptee{border:1px solid}
  .courbe-chance.en-partie{border:1px dashed}
}
@media print{
  .courbe{display:none !important}
  .recherche,.resultat,.sujets-nav,.aide-sommaire,.aide-volet,.lien-q,.phi-pixels{display:none}
  .feuille,.garanties>li{box-shadow:none;padding-inline:0}
}