/* =============================================================================
   base.css — les fondations communes de phixel.app (refonte « Studio », 25 octobre 2026).
   Maquette C + rapport du DA §3 + touches de modernité de la refonte.
   Ici : police, jetons, typographie, en-tête, pied, pièces du jeu (pastilles, numéro, pièce, carte), boutons, stores,
   grilles, tuiles, tableaux, accordéons, encadrés, sommaire, papier millimétré, mouvement commun.
   Ce qui n'appartient qu'à l'accueil reste dans accueil.css. Le HTML à copier se prend dans une page du site
   (en-tête et pied : phicoins.html ; pied bilingue : legal.html).
   Règles : or = la monnaie seulement ; violet = action et rareté ; dessins sur blanc, pixels nets ; aucun dégradé de
   couleur ; transform et opacity seulement pour le mouvement ; rien d'un autre serveur.
   ============================================================================= */

/* ─── 1. Police : Familjen Grotesk 2.002 réduite (polices/OFL-familjen-grotesk.txt), servie par phixel.app ─────
   Choix de l'owner (25 octobre 2026) : une seule famille pour les titres et le texte, à la place d'Inter.
   Un seul fichier variable (graisses 400 à 700), déclaré deux fois :
   - « Familjen Grotesk », le texte (--sans) : agrandi de 10 % (size-adjust). Ses minuscules font 0,50 em, celles
     d'Inter 0,54 em : agrandi, le texte retrouve la taille d'Inter. C'est le « font-size-adjust:.55 » de l'essai (même
     rendu, mesuré), posé sur la police elle-même. Raison : avec font-size-adjust, Chrome ramène aussi la police de
     repli à cette hauteur d'x et ignore son size-adjust, et le texte sautait d'environ 2 % en largeur à l'arrivée.
   - « Familjen Grotesk titre », les titres et les grands nombres (--titre) : la taille propre de la police.
   Un navigateur sans size-adjust (Safari avant 17) montre le texte un peu plus petit, rien ne casse.
   Hauteurs de ligne réécrites dans le fichier réduit (26 octobre) : hhea et OS/2 « typo » à 1 140 / -360 au lieu de
   1 230 / -270 (winAscent / winDescent gardés, USE_TYPO_METRICS posé). Même hauteur totale (1,25 em : les pages ne
   bougent pas), mais les capitales (0,65 em) tombent au centre de la ligne, comme avec Inter : avant, le texte des
   boutons, de « FR » et des pastilles était 1 px trop bas. Écrit dans le fichier, et non en ascent-override, pour que
   Safari en profite aussi. Le fichier a gardé son nom parce qu'il n'avait jamais été mis en ligne ; après la première
   mise en ligne, toute nouvelle version prend un nouveau nom (Caddy le sert « immutable » un an).
   Les polices de repli sont réglées sur Familjen (méthode capsize : chasse moyenne pondérée par les lettres des pages,
   hauteurs du fichier) : quand la police arrive, le texte ne saute pas. Familjen : 1 200 unités par em, ascendante 1 140,
   descendante 360, interligne 0 ; chasse 0,4179 em en 400, 0,4349 en 600 (texte), 0,4475 en 600 (titres). Arial :
   0,4451 ; Arial Bold : 0,4775 (texte), 0,4906 (titres). Texte 400 : 0,4179 × 1,10 / 0,4451 = 103,29 %, ascent
   0,95 × 1,10 / 1,0329 = 101,17 %, descent 0,30 × 1,10 / 1,0329 = 31,95 %. Texte 600-700 : ramené à Familjen 600
   agrandi (100,18 % ; 104,31 % et 32,94 %). Titres : Arial Bold ramené à Familjen 600 (91,22 % ; 104,14 % et 32,89 %).
   Roboto (Android) prend les mêmes réglages : il n'a pas été mesuré, à vérifier sur un téléphone. φ n'est pas dans
   Familjen : il vient du repli. */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/polices/familjen-grotesk-2.002.woff2) format("woff2");size-adjust:110%}
@font-face{font-family:"Familjen Grotesk titre";font-style:normal;font-weight:400 700;font-display:swap;src:url(/polices/familjen-grotesk-2.002.woff2) format("woff2")}
@font-face{font-family:"Familjen repli";font-weight:400;src:local("Arial"),local("ArialMT"),local("Roboto"),local("Roboto-Regular");size-adjust:103.29%;ascent-override:101.17%;descent-override:31.95%;line-gap-override:0%}
@font-face{font-family:"Familjen repli";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:100.18%;ascent-override:104.31%;descent-override:32.94%;line-gap-override:0%}
@font-face{font-family:"Familjen repli titre";font-weight:400 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:91.22%;ascent-override:104.14%;descent-override:32.89%;line-gap-override:0%}

/* ─── 2. Jetons ───────────────────────────────────────────────────────────────────────────────────────────── */
:root{
  /* Couleurs de l'app (mobile/index.html), mode clair. Fond, papier et filets en blanc cassé neutre, sans lavande
     (choix de l'owner, 26 octobre 2026, le même jour dans l'app : --bg et --line) : le violet ne sert plus qu'aux
     actions et à la rareté. Les textes (--encre, --attenue) et les cartes blanches ne changent pas. */
  --fond:#f7f7f8; --carte:#fff; --encre:#1d1b2e; --attenue:#67637e;
  --trait:#e6e6ea; --trait-fort:#d7d7dd; --voile:rgb(29 27 46/.045);
  --accent:#6c4cf5; --accent-survol:#5a3ae6; --sur-accent:#fff;
  --accent-encre:#4a2fd1; --accent-doux:#ece7ff; --sur-doux:#4a2fd1;
  --or:#f2a900; --or-texte:#8a6100; --or-doux:#fff1c7;
  --rouge:#c62828; --rouge-doux:#fde8e8;
  --passe-partout:#fff; --papier:#f1f1f3; --ligne-papier:#e3e3e7;
  /* Le gris de l'app derrière les dessins bord à bord (cartes Calme ; --mat de mobile/index.html), le même dans les
     deux modes, comme le passe-partout. */
  --mat:#efeef3;
  /* Pastilles de rareté (app : .tag.rarete-* de mobile/index.html ; variantes sombres plus bas). Common n'a pas de
     pastille. Unique : un violet nuit plein, sans dégradé (choix de l'owner, 26 octobre 2026, dans l'app aussi). */
  --rare-texte:#4a2fd1; --rare-lisere:#b9a8fb; --tres-rare-fond:#ece7ff; --tres-rare-texte:#4a2fd1;
  --ultra-fond:#6c4cf5; --unique-fond:#2b1d6e; --unique-texte:#fff; --unique-lisere:rgb(185 168 251/.55);
  /* Matière (touche 5) : ombres en couches avec un filet de 1 px, toutes de la couleur de l'encre. Les grandes couches
     étaient violettes (rgb(40 20 90)) : sur le fond neutre, elles teintaient de lilas le dessous des objets. */
  --ombre-carte:0 0 0 1px rgb(29 27 46/.06),0 1px 2px rgb(29 27 46/.04);
  --ombre-survol:0 0 0 1px rgb(29 27 46/.08),0 2px 4px rgb(29 27 46/.05),0 12px 24px -8px rgb(29 27 46/.14);
  --ombre-objet:0 0 0 1px rgb(29 27 46/.06),0 1px 2px rgb(29 27 46/.05),0 6px 12px -4px rgb(29 27 46/.08),0 24px 48px -16px rgb(29 27 46/.16);
  --store-fond:#1d1b2e; --store-texte:#f7f7f8; --store-ombre:inset 0 1px 0 rgb(255 255 255/.12),0 1px 2px rgb(0 0 0/.16);
  /* La pièce Phicoin, 8 × 8 (mobile/src/ui.ts), affichée à 2 ou 3 px par case. */
  --piece:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAD1BMVEUAAACKWgD/4GbyqQC4eAB00Kz6AAAAAXRSTlMAQObYZgAAACdJREFUeNpjYGBgZGRkZGBgYGBkYmZmZgTTLCwgFiMzTgaIBaZh2gERSAB7S/36OAAAAABJRU5ErkJggg==");
  /* Typographie. --sans : le texte, Familjen à la taille d'Inter (h3, h4, boutons, tableaux compris). --titre : la même
     police à sa taille propre, pour h1, h2, .geant, .stat et .numero.geant ici, et dans les feuilles des pages
     .partie .tete h2 (aide.css), .ouverture-titre, .partie>:is(h2,h3), .fiche-ligne>:is(h2,h3) (lecture.css) et .v-num
     (valeur.css) : chercher « var(--titre) ». --mono : seulement pour <code>. */
  --sans:"Familjen Grotesk","Familjen repli",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titre:"Familjen Grotesk titre","Familjen repli titre",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  /* Espacements de Fibonacci, rayons de l'app. */
  --e-3:3px; --e-5:5px; --e-8:8px; --e-13:13px; --e-21:21px; --e-34:34px; --e-55:55px; --e-89:89px; --e-144:144px;
  --r-s:8px; --r-m:12px; --r-l:16px;
  --gouttiere:max(20px,env(safe-area-inset-left),env(safe-area-inset-right));
  --largeur:1160px; --entete:56px; --section:55px;
  /* Mouvement. --ressort : ressort amorti sans aucun dépassement (touche 4), « ease » là où linear() manque. */
  --d-retour:200ms; --d-entree:600ms; --sortie:cubic-bezier(.2,.7,.2,1); --ressort:ease;
  color-scheme:light dark;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--ressort:linear(0,.049 5%,.156 10%,.283 15%,.408 20%,.522 25%,.62 30%,.769 40%,.864 50%,.922 60%,.956 70%,.976 80%,.987 90%,1)}
}
@media (min-width:600px){:root{--gouttiere:34px;--entete:64px;--section:89px}}
@media (min-width:1280px){:root{--section:144px}}
@media (prefers-color-scheme:dark){
  :root{
    /* Un noir neutre, assorti au blanc cassé du mode clair (26 octobre 2026). Les textes aussi sont des gris neutres :
       lilas, ils se voyaient mauves sur ce noir. Même clarté qu'avant. Le contraste du texte monte partout (--attenue :
       7,4:1 sur le fond, 6,7:1 sur une carte, 6,0:1 sur une ligne du papier ; --encre : 16:1 sur le fond), sauf l'encre
       sur --trait-fort : 9,6:1 au lieu de 9,8:1, toujours très lisible. Seuls les jetons violets (action, rareté) gardent
       leur teinte. */
    --fond:#131314; --carte:#1d1d1f; --encre:#efeff2; --attenue:#a3a3a8;
    --trait:#2f2f32; --trait-fort:#3c3c40; --voile:rgb(255 255 255/.05);
    --accent:#9b85ff; --accent-survol:#ad9bff; --sur-accent:#131314;
    --accent-encre:#c4b5ff; --accent-doux:#2e2660; --sur-doux:#e2dbff;
    --or-texte:#f2c14e; --or-doux:#3a2e10; --rouge:#ff8a80; --rouge-doux:#3a1a22;
    --papier:#171718; --ligne-papier:#262628;
    --rare-texte:#c4b5ff; --rare-lisere:#7d66e0; --tres-rare-fond:#2e2660; --tres-rare-texte:#e2dbff;
    /* Unique en sombre : un violet clair plein, texte violet nuit (choix de l'owner, 26 octobre 2026). Sur ce noir, la
       gamme monte du sombre au clair, et Unique, la plus lumineuse, reste la dernière marche (texte 7,7:1, pastille
       7,4:1 sur une carte). */
    --unique-fond:#b39dff; --unique-texte:#1a1238; --unique-lisere:transparent;
    --ombre-carte:0 0 0 1px rgb(255 255 255/.07),inset 0 1px 0 rgb(255 255 255/.05);
    --ombre-survol:0 0 0 1px rgb(255 255 255/.14),inset 0 1px 0 rgb(255 255 255/.06),0 12px 24px -8px rgb(0 0 0/.5);
    --ombre-objet:0 0 0 1px rgb(255 255 255/.08),0 24px 48px -12px rgb(0 0 0/.6);
    /* Les stores ne deviennent plus des dalles claires : fond de carte, filet de lumière (touche 5). */
    --store-fond:#1d1d1f; --store-texte:#efeff2; --store-ombre:inset 0 0 0 1px rgb(255 255 255/.1),inset 0 1px 0 rgb(255 255 255/.06);
  }
}

/* ─── 3. Socle ────────────────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--entete) + 21px)}
/* Défilement doux seulement après le premier geste (base.js pose html.doux au premier pointerdown ou keydown) :
   arriver sur /terms#fr ou /help#networth saute droit à l'ancre au lieu de faire défiler 10 000 px de texte. */
@media (prefers-reduced-motion:no-preference){html.doux{scroll-behavior:smooth}}
/* Chiffres proportionnels dans le texte, comme ceux d'Inter : ceux de Familjen sont tabulaires par défaut (le « 1 » y
   est aussi large que le « 0 », d'où des trous dans « 13 × 8 » ou « 144 »). Tout ce qui doit s'aligner demande déjà
   tabular-nums (.tab, tableaux, prix, numéros, grands nombres). Attention : font-variant-numeric:normal, comme un
   raccourci « font: » (.btn…), redonne les chiffres tabulaires de la police, pas les proportionnels. */
body{margin:0;overflow-x:clip;background:var(--fond);color:var(--encre);font:400 17px/1.6 var(--sans);font-variant-numeric:proportional-nums;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
img,svg,canvas,video{display:block}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a,button,summary{-webkit-tap-highlight-color:transparent}
p,li,dd,figcaption{text-wrap:pretty}
b,strong{font-weight:600}
sup,sub{font-size:.64em;line-height:0}
code,kbd,samp,pre{font-family:var(--mono);font-size:.9em}
code{color:var(--encre)}
hr{height:0;margin:55px 0;border:0;border-top:1px solid var(--trait)}
::selection{background:var(--accent-doux);color:var(--encre)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* La zone principale reçoit le focus du lien d'évitement (tabindex="-1") : pas de cadre violet autour de la page. */
main[tabindex="-1"]:focus{outline:none}
[hidden]{display:none !important}

/* Liens du texte : violet, soulignés finement, le trait se renforce au survol. */
a{color:var(--accent);text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.22em;transition:text-decoration-color 150ms,color 150ms}
a:hover{text-decoration-color:currentColor}

/* Lecteurs d'écran seulement ; lien d'évitement. */
.sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.evitement{position:absolute;z-index:30;left:var(--gouttiere);top:8px;padding:10px 16px;border-radius:var(--r-m);background:var(--encre);color:var(--fond);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.evitement:focus{transform:none}

/* ─── 4. Typographie (touche 1) : l'échelle du nombre d'or 17 → 27 → 44 → 72, titrage 600 serré ──────────── */
h1,h2,h3,h4{font-weight:600;text-wrap:balance}
h1{font-family:var(--titre);font-size:clamp(40px,5.2vw + 14px,72px);line-height:1;letter-spacing:-.025em}
:lang(fr) h1{line-height:1.05}
h2{font-family:var(--titre);font-size:clamp(30px,3.4vw + 12px,44px);line-height:1.08;letter-spacing:-.018em}
h3{font-size:21px;line-height:1.3;letter-spacing:-.012em}
h4{font-size:17px;line-height:1.45;letter-spacing:-.006em}
.titre-27{font-size:27px;line-height:1.2;letter-spacing:-.018em}
.chapeau{max-width:54ch;font-size:clamp(18px,.9vw + 14px,21px);line-height:1.5;color:var(--attenue)}
.petit{font-size:15px;line-height:1.5}
.note{font-size:13px;line-height:1.5;color:var(--attenue)}
.attenue{color:var(--attenue)}
.tab{font-variant-numeric:tabular-nums}
.insecable{white-space:nowrap}
/* Le repère au-dessus d'un titre : un mot, en 600, gris, jamais violet ; sans numéro « 01 · ». Seulement quand il dit
   autre chose que le titre (« How it works », les parties de l'aide, que lisent son sommaire et sa recherche, « Why a
   target ») ; jamais un mot que le titre redit (choix de l'owner, 26 octobre 2026). */
.repere{display:flex;align-items:center;gap:8px;margin:0 0 13px;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.01em;color:var(--attenue);font-variant-numeric:tabular-nums}
.repere .phi{width:14px;height:18px;color:var(--accent);flex:none}
/* Le grand nombre (touche 6) : 10⁷⁵¹, le nombre de Phicoins gratuits… Décoratif : aria-hidden, le texte le dit. */
.geant{font-family:var(--titre);font-size:clamp(72px,8vw,116px);font-weight:600;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.geant sup{font-size:.42em;letter-spacing:-.02em;vertical-align:1em;line-height:0}

/* ─── 5. Mise en page ─────────────────────────────────────────────────────────────────────────────────────── */
.conteneur{width:min(var(--largeur),100% - 2 * var(--gouttiere));margin-inline:auto}
.conteneur.etroit{--largeur:760px}
/* Une section : pas de filet, l'air seul les sépare (touche 6) : 55 / 89 / 144 px. */
.section{padding-bottom:var(--section)}
.section.serree{padding-bottom:calc(var(--section) * .618)}
/* Tête de section : h2 → 21 → chapeau → 55 → contenu. Le titre ouvre seul la section ; un repère n'y vient que s'il
   apporte autre chose (voir .repere), 13 px au-dessus du h2. */
.tete{margin-bottom:34px}
.tete .chapeau{margin-top:21px}
.tete.centree{text-align:center}
.tete.centree .repere{justify-content:center}
.tete.centree h2,.tete.centree .chapeau{margin-inline:auto}
@media (min-width:600px){.tete{margin-bottom:55px}}
/* Tête d'une page intérieure (Help, Phicoins, Terms…) : le même h1 que l'accueil ; .compacte le ramène à 44 px. */
.tete-page{padding:34px 0 55px}
.tete-page .chapeau{margin-top:21px}
.tete-page.compacte h1{font-size:clamp(30px,3.4vw + 12px,44px);line-height:1.08;letter-spacing:-.025em}
@media (min-width:600px){.tete-page{padding:55px 0 89px}}
/* Grilles : au nombre d'or (texte | objet), à 2 ou 3 colonnes. Une colonne sous 900 px (sous 600 pour .grille-2), qui ne
   s'élargit jamais à son contenu (minmax(0, 1fr) : à 320 px, une ligne insécable débordait de l'écran). */
.grille,.grille-or,.grille-2,.grille-3{display:grid;gap:34px;align-items:start}
.grille-or,.grille-2,.grille-3{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.grille-2,.grille-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){
  .grille-or{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr)}
  .grille-or.inverse{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr)}
  .grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1280px){.grille,.grille-or,.grille-2,.grille-3{gap:55px}}

/* ─── 6. En-tête (64 px, 56 sous 600 px) ──────────────────────────────────────────────────────────────────────
   Transparent en haut de page ; le fond et son filet arrivent sur les 64 premiers px de défilement (timeline CSS, ou
   base.js là où elle manque). Le flou n'existe qu'à partir de 900 px.
   Le même en-tête sur toutes les pages (retouche du 25 octobre) : la marque (l'accueil), « Phicoins », « Help » et la
   langue ; la page en cours porte aria-current="page" (souligné violet). Aucune ancre de page dans l'en-tête. */
.entete{position:sticky;top:0;z-index:10;view-transition-name:entete}
.entete::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fond);box-shadow:inset 0 -1px 0 var(--trait)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){.entete::before{animation:entete-voile linear both;animation-timeline:scroll(root);animation-range:0 64px}}
}
@keyframes entete-voile{from{opacity:0}to{opacity:1}}
html.entete-js .entete::before{opacity:0;transition:opacity var(--d-retour)}
html.entete-js.defile .entete::before{opacity:1}
.entete-in{display:flex;align-items:center;gap:13px;height:var(--entete)}
.marque{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:-6px;padding:0 6px;border-radius:var(--r-s);color:var(--encre);text-decoration:none;flex:none}
.marque .phi{width:21px;height:27px;color:var(--accent);flex:none}
.marque .nom{width:60.4px;height:30.8px;flex:none;fill:currentColor}
.entete .marque{margin-right:auto}
.navigation{display:flex;align-items:center;gap:2px}
.navigation a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-s);font-size:15px;font-weight:500;color:var(--attenue);text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:transparent;text-underline-offset:6px;transition:color 150ms,text-decoration-color 150ms}
.navigation a:hover{color:var(--encre)}
.navigation a[aria-current]{color:var(--encre);text-decoration-color:var(--accent)}
@media (min-width:900px){
  .entete::before{background:color-mix(in srgb,var(--fond) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
}
/* Le choix de langue : « FR » ou « EN », un petit cadre. Cible de 44 px par ::after. */
.langue{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:30px;padding:0 9px;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--trait-fort);font-size:13px;font-weight:600;line-height:1;letter-spacing:.02em;color:var(--encre);text-decoration:none}
.langue::after{content:'';position:absolute;inset:-7px -4px}
.langue:hover{box-shadow:inset 0 0 0 1px var(--attenue)}
.navigation .langue{min-height:30px;margin-left:8px;padding:0 9px;font-size:13px;font-weight:600;color:var(--encre);text-decoration:none}

/* ─── 7. Pied de page : la marque, les liens, la langue, © 2026 Phixel. Sans filet du haut (touche 7). ───── */
.pied{padding:55px 0 89px;font-size:15px;color:var(--attenue)}
.pied-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 34px}
.pied .marque{gap:6px}
.pied .marque .phi{width:14px;height:18px}
.pied .marque .nom{width:40.2px;height:20.5px}
.pied nav{display:flex;flex-wrap:wrap;align-items:center;column-gap:21px}
.pied nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--attenue);text-decoration:none;transition:color 150ms}
.pied nav a:hover,.pied nav a[aria-current]{color:var(--encre)}
.pied nav .langue{min-height:30px;margin-left:4px;color:var(--encre)}
.pied .droits{width:100%;margin-top:8px;font-size:13px}
@media (max-width:899px){.pied .marque{width:100%;margin-bottom:5px}}
@media (min-width:900px){.pied .marque{margin-right:auto}}
/* Pages bilingues (Terms, Privacy…) : la marque, puis une ligne de liens par langue, alignées à gauche. La marque garde
   le -6 px de .marque (sa zone de 6 px) : le φ tombe sur le bord des liens et du ©, comme dans les autres pieds. */
.pied.bilingue .marque{width:100%;margin:0 0 5px -6px}
.pied.bilingue nav{width:100%}
@media (max-width:899px){.pied.bilingue nav+nav{margin-top:21px}}

/* ─── 8. Boutons ──────────────────────────────────────────────────────────────────────────────────────────────
   .btn : l'action secondaire de l'app (lilas, texte violet) ; .btn.primaire : l'action principale (violet plein) ;
   .btn-rond : 44 × 44 (Replay, Pause). Icônes dessinées en carrés (svg.ico, shape-rendering crispEdges). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-m);background:var(--accent-doux);color:var(--sur-doux);font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.btn.primaire{background:var(--accent);color:var(--sur-accent)}
.btn-rond{width:44px;padding:0;border-radius:50%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:default}
@media (hover:hover){
  .btn:not(:disabled):hover{background:color-mix(in srgb,var(--accent-doux) 78%,var(--accent))}
  .btn.primaire:not(:disabled):hover{background:var(--accent-survol)}
}
.ico{width:14px;height:14px;fill:currentColor;flex:none}

/* Les stores : pas des liens tant que l'app n'est pas publiée (pas de survol, pas d'appui). Rayon 12 de l'app. */
.stores{display:flex;flex-wrap:wrap;gap:13px}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-width:176px;min-height:56px;margin:0;padding:10px 20px;border-radius:var(--r-m);background:var(--store-fond);color:var(--store-texte);box-shadow:var(--store-ombre);line-height:1.2;cursor:default}
.store small{font-size:12px;color:color-mix(in srgb,var(--store-texte) 80%,var(--store-fond))}
.store strong{font-size:19px;font-weight:600;letter-spacing:-.01em}
a.store{color:var(--store-texte);text-decoration:none;cursor:pointer}
@media (max-width:599px){.stores{gap:8px}.store{flex:1 1 0;min-width:0;padding-inline:14px}}

/* ─── 9. Les pièces du jeu, redessinées comme dans l'app ───────────────────────────────────────────────────── */
/* Pastilles de rareté (Common n'en a pas : son nom s'écrit en gris, .commun). */
.tag{display:inline-block;padding:2px 7px;border-radius:99px;font-size:11px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag.grand{padding:3px 10px;font-size:12px}
.rarete-rare{color:var(--rare-texte);box-shadow:inset 0 0 0 1px var(--rare-lisere)}
.rarete-tres_rare{background:var(--tres-rare-fond);color:var(--tres-rare-texte)}
.rarete-ultra_rare{background:var(--ultra-fond);color:#fff}
.rarete-unique{background:var(--unique-fond);color:var(--unique-texte);box-shadow:inset 0 0 0 1px var(--unique-lisere)}
.commun{font-weight:600;color:var(--attenue)}
/* Le numéro de création « S3 #12 » : la taille en gris, le numéro en encre. Jamais violet ni or. */
.numero{font-size:15px;font-weight:700;line-height:1.3;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}
.numero .s{font-size:12px;font-weight:600;color:var(--attenue)}
.numero.moyen{font-size:20px}
.numero.moyen .s{font-size:15px}
.numero.geant{font-family:var(--titre);font-size:34px;line-height:1.1;letter-spacing:-.01em}
.numero.geant .s{font-size:21px;letter-spacing:0}
/* La pièce, seulement devant une somme : 16 px (2 px par case) ou 24 px (3 px par case). */
.piece{display:inline-block;flex:none;width:16px;height:16px;background:var(--piece) 0 0 / 100% 100% no-repeat;image-rendering:pixelated;vertical-align:-2px}
.piece.grande{width:24px;height:24px;vertical-align:-4px}
.somme{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Passe-partout et œuvre : l'œuvre à une échelle entière (--k px par pixel), nette, sans rayon ni filtre. */
.cadre{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:var(--r-s);background:var(--passe-partout);box-shadow:inset 0 0 0 1px var(--trait)}
.art-boite{--k:4;position:relative;flex:none;width:calc(var(--w) * var(--k) * 1px);height:calc(var(--h) * var(--k) * 1px)}
.art{display:block;width:100%;height:100%;max-width:none;image-rendering:crisp-edges;image-rendering:pixelated;box-shadow:0 1px 3px rgb(0 0 0/.18)}
/* La carte « Calme » du Market (l'app 1.4 : mobile/src/ui.ts, carteCalme ; GAME-DESIGN §10 ; maquette
   site/_cartes-variantes.html, variante 1), redessinée pour les cartes d'exemple de l'accueil (Rarity) et la carte de
   l'aide (« How do I read a card? »). On ne peut pas la toucher : ni survol, ni ombre qui monte (touche 4) ; son cœur
   est une image, pas un bouton. Le dessin bord à bord dans un cadre au nombre d'or, sur le gris de l'app derrière les
   dessins (--mat), sans passe-partout, sans trait ni ombre : un paysage prend toute la largeur, à une échelle qui n'est
   plus forcément entière, pixels nets (GAME-DESIGN §10). Le cadre arrondit lui-même ses coins du haut : la carte ne
   coupe rien (overflow), et les repères de l'aide débordent à droite. Puis quatre lignes, comme dans l'app : 12 px, une
   hauteur en em, sans retour à la ligne (trop longue, une ligne se coupe par « … ») ; le numéro et le prix en 14 px. */
.carte-calme{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.cadre-calme{display:flex;align-items:center;justify-content:center;aspect-ratio:1.618;overflow:hidden;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--mat)}
.art-calme{display:block;width:100%;height:auto;image-rendering:crisp-edges;image-rendering:pixelated}
.carte-calme .corps{display:flex;flex-direction:column;gap:3px;padding:8px 9px 10px;font-size:12px;line-height:1.4;color:var(--attenue);font-variant-numeric:tabular-nums}
.carte-calme .corps p{position:relative;display:flex;align-items:center;gap:5px;min-height:1.75em;margin:0;white-space:nowrap}
/* 1. « S3 #12 », le même 14 px gras, « S3 » en gris ; le cœur et ses likes à droite, en gris (le nombre abrégé dès
   1 000 : « 1.2K »). */
.carte-calme .l1{justify-content:space-between}
.carte-calme .numero{font-size:14px;line-height:1.4}
.carte-calme .numero .s{font-size:inherit;font-weight:700}
.carte-calme .coeur{display:inline-flex;align-items:center;gap:3px;font-weight:500}
.carte-calme .coeur svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 2. Le titre en encre, puis « · artiste » en gris : le titre se coupe le premier, le nom prend au plus 60 % de la ligne. */
.carte-calme .corps .l2{gap:0}
.carte-calme .l2 .t{flex:0 1000 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--encre)}
.carte-calme .l2 .de{flex:none;padding:0 4px}
.carte-calme .l2 .qui{flex:0 1 auto;min-width:0;max-width:60%;overflow:hidden;text-overflow:ellipsis}
/* 3. La pastille de rareté (rien pour Common), puis la quantité en mots (« 26 of 47 left », « All 13 owned ») : trop
   longue, la quantité se coupe, jamais la pastille. 4. La pièce et le prix. */
.carte-calme .l3 .tag{flex:none}
.carte-calme .l3 .q{min-width:0;overflow:hidden;text-overflow:ellipsis}
.carte-calme .l4 .somme{gap:4px;font-size:14px;color:var(--encre)}

/* ─── 10. Blocs de contenu ─────────────────────────────────────────────────────────────────────────────────── */
/* Tuiles (touche 6) : fond de carte, ombre fine, rayon 16. a.tuile se touche (survol, appui). Plus aucune page publique
   ne s'en sert depuis la liste à filets de l'accueil (26 octobre 2026) : seulement l'exemple du kit (_kit.html). */
.tuiles{display:grid;gap:13px;margin:0;padding:0;list-style:none}
@media (min-width:600px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}.tuiles.deux{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tuile{display:block;height:100%;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte);color:var(--attenue);text-decoration:none}
.tuile h3,.tuile .titre{display:block;margin-bottom:5px;font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.006em;color:var(--encre)}
.tuile strong{color:var(--encre)}
/* L'ombre de survol est une couche à part dont seule l'opacité change (pas d'animation de box-shadow). */
a.tuile{position:relative}
a.tuile::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--ombre-survol);opacity:0;pointer-events:none;transition:opacity var(--d-retour)}
a.tuile .fleche{display:inline-block;margin-left:4px;color:var(--accent);transition:transform var(--d-retour) var(--ressort)}
@media (hover:hover){a.tuile:hover::after{opacity:1}a.tuile:hover .fleche{transform:translateX(3px)}}
/* Liste à puces carrées (un pixel gris) et liste de points séparés par un filet. */
.puces{margin:0;padding:0;list-style:none}
.puces li{position:relative;padding-left:21px}
.puces li+li{margin-top:8px}
.puces li::before{content:'';position:absolute;left:3px;top:calc(.8em - 3px);width:6px;height:6px;background:var(--attenue)}
.points{margin:0;padding:0;list-style:none}
.points li{padding:21px 0;border-top:1px solid var(--trait)}
.points li:first-child{padding-top:0;border-top:0}
.points p{margin-top:5px;color:var(--attenue)}
/* Chiffres clés : grand nombre tabulaire et sa légende, séparés par des filets. Plus aucune page publique ne s'en sert
   depuis le tableau de Phicoins (26 octobre 2026) : seulement l'exemple du kit (_kit.html). */
.stats{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--encre)}
.stat{padding:21px 0;border-bottom:1px solid var(--trait)}
.stat b,.stat .valeur{display:block;min-height:1.05em;font-family:var(--titre);font-size:clamp(34px,2.6vw + 20px,44px);font-weight:600;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span,.stat .legende{display:block;margin-top:8px;font-size:15px;color:var(--attenue)}
@media (min-width:600px){
  .stats{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .stat{padding:21px 21px 0 0;border-bottom:0}
  .stat+.stat{padding-left:21px;border-left:1px solid var(--trait)}
}
/* Encadrés : neutre, important (lilas), alerte (rouge doux, pour une suppression définitive…). */
.encadre{padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.encadre>*+*{margin-top:8px}
.encadre h3,.encadre h4,.encadre .titre{font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.006em}
.encadre p{color:var(--attenue)}
.encadre p.titre{color:var(--encre)}
.encadre.accent{background:var(--accent-doux);box-shadow:none}
.encadre.accent p{color:var(--encre)}
.encadre.alerte{background:var(--rouge-doux);box-shadow:none}
.encadre.alerte p{color:var(--encre)}
.encadre.alerte .titre,.encadre.alerte h3{color:var(--rouge)}
@media (min-width:600px){.encadre{padding:34px}.encadre.compact{padding:21px}}
/* Bloc de formule ou de code (la seule place du monospace). */
.bloc-code{margin:0;padding:13px 21px;overflow-x:auto;border-radius:var(--r-m);background:var(--carte);box-shadow:var(--ombre-carte);font:500 15px/1.7 var(--mono);color:var(--encre);white-space:pre-wrap}

/* Tableaux : filet haut en encre, en-têtes gris 13 px, chiffres tabulaires. td.n / th.n : nombre aligné à droite.
   .tableau : boîte qui défile en largeur sur téléphone (tabindex="0", role="region", aria-label). */
.tableau{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.tableau:focus-visible{outline-offset:-2px}
@media (max-width:599px){.tableau{margin-inline:calc(-1 * var(--gouttiere));padding-inline:var(--gouttiere)}}
.chiffres{width:100%;border-collapse:collapse;border-top:1px solid var(--encre);font-variant-numeric:tabular-nums}
.chiffres caption{padding-bottom:13px;text-align:left;font-size:15px;color:var(--attenue)}
.chiffres th,.chiffres td{padding:13px 13px 13px 0;border-bottom:1px solid var(--trait);text-align:left;vertical-align:top}
.chiffres th{font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.chiffres thead th{vertical-align:bottom}
/* Les noms de ligne en chiffres normaux (le tabular-nums d'Inter élargissait aussi le trait d'union, « X - Large ») :
   avec Familjen, ce sont ses chiffres tabulaires par défaut, sans cet effet, et les numéros de niveau (1 à 10, 3, 25,
   100) restent alignés en colonne. Voulu : pas de proportional-nums ici. */
.chiffres tbody th{font-size:15px;color:var(--encre);font-variant-numeric:normal}
.chiffres td{font-size:15px;line-height:1.5}
.chiffres :is(th,td):last-child{padding-right:0}
.chiffres .n{text-align:right;white-space:nowrap}
.chiffres td small{display:block;font-size:13px;color:var(--attenue)}
/* La ligne en vigueur (le barreau de la semaine…) : un fond neutre (ni action ni rareté : pas de violet), en gras, un
   trait d'encre de 2 px à gauche. Le fond déborde de 13 px par une ombre : les colonnes ne bougent pas. Le dire aussi
   en texte (.sr ou aria-current). */
.chiffres{--en-cours:color-mix(in srgb,var(--encre) 6%,var(--fond))}
.chiffres tr.en-cours>*{background:var(--en-cours);font-weight:600;color:var(--encre)}
.chiffres tr.en-cours>:first-child{box-shadow:-13px 0 0 var(--en-cours),-15px 0 0 var(--encre)}
.chiffres tr.en-cours>:last-child{box-shadow:13px 0 0 var(--en-cours)}
@media (min-width:600px){.chiffres td,.chiffres tbody th{font-size:16px}}

/* Accordéons : <details class="question"><summary>…</summary><div class="reponse">…</div></details>. Accessibles tels
   quels (clavier, lecteur d'écran). Le « + » devient « − » ; l'ouverture glisse là où le navigateur sait le faire. */
.questions{border-bottom:1px solid var(--trait)}
.question{border-top:1px solid var(--trait)}
.question>summary{position:relative;display:flex;align-items:center;min-height:56px;padding:13px 44px 13px 0;border-radius:var(--r-s);font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.006em;cursor:pointer;list-style:none}
.question>summary::-webkit-details-marker{display:none}
.question>summary::before,.question>summary::after{content:'';position:absolute;right:13px;top:50%;width:13px;height:2px;margin-top:-1px;background:var(--attenue);transition:transform 300ms var(--ressort),background-color 150ms}
.question>summary::after{transform:rotate(90deg)}
.question[open]>summary::after{transform:rotate(90deg) scaleX(0)}
@media (hover:hover){.question>summary:hover::before,.question>summary:hover::after{background:var(--encre)}}
.reponse{padding:0 0 21px;color:var(--attenue)}
.reponse>*+*{margin-top:13px}
.reponse strong{color:var(--encre)}
@media (prefers-reduced-motion:no-preference){
  .question{interpolate-size:allow-keywords}
  .question::details-content{block-size:0;overflow:clip;transition:block-size 300ms var(--ressort),content-visibility 300ms allow-discrete}
  .question[open]::details-content{block-size:auto}
}

/* Sommaire d'une page longue (Help…) : la partie en cours est suivie par base.js (aria-current). */
.sommaire{font-size:15px}
.sommaire ol,.sommaire ul{margin:0;padding:0;list-style:none}
.sommaire a{display:block;padding:6px 0 6px 13px;box-shadow:inset 2px 0 0 var(--trait);color:var(--attenue);text-decoration:none;transition:color 150ms}
.sommaire a:hover{color:var(--encre)}
.sommaire a[aria-current]{color:var(--encre);box-shadow:inset 2px 0 0 var(--accent)}

/* Texte suivi (Terms, Privacy, réponses longues) : 68 caractères, titres à 27 px. */
.texte{max-width:68ch}
.texte>*+*{margin-top:1em}
.texte>:first-child{margin-top:0}
.texte>h2{margin-top:55px;font-size:27px;line-height:1.2;letter-spacing:-.018em}
.texte>h3{margin-top:34px;font-size:19px;line-height:1.35}
.texte>:is(h2,h3)+*{margin-top:13px}
.texte ul,.texte ol{padding-left:1.3em}
.texte li+li{margin-top:8px}
.texte li::marker{color:var(--attenue)}

/* Papier millimétré (le style de C). .papier-fond : sur l'élément ; .sur-papier : derrière le contenu, une bande
   droite sur toute la largeur, haut et bas fondus en transparence (touche 5 : mask-image, aucun dégradé de couleur).
   Plus d'ovale derrière les fins de page (choix de l'owner, 26 octobre 2026) : la 404, l'invitation et le Contact de
   l'aide prennent la même bande.
   --attenue-papier : le gris posé sur le papier, un peu plus d'encre, pour rester AA là où il croise une ligne du
   quadrillage (clair : 5,3:1 sur une ligne au lieu de 4,48:1 avec --attenue ; sombre : 6,8:1). À prendre pour tout
   texte gris posé à même le papier (lecture.css : la date des pages bilingues, le repère « Français », la 404 ; aide.css :
   le haut de l'aide et le Contact ; accueil.css : la bande des toiles). */
.papier-fond,.sur-papier::before{background-color:var(--papier);background-image:linear-gradient(var(--ligne-papier) 1px,transparent 1px),linear-gradient(90deg,var(--ligne-papier) 1px,transparent 1px);background-size:21px 21px;background-position:center top}
.sur-papier{position:relative;isolation:isolate;--attenue-papier:color-mix(in srgb,var(--attenue) 85%,var(--encre))}
.sur-papier::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 89px,#000 calc(100% - 89px),transparent);mask-image:linear-gradient(transparent,#000 89px,#000 calc(100% - 89px),transparent)}
.fondu{-webkit-mask-image:linear-gradient(transparent,#000 89px,#000 calc(100% - 89px),transparent);mask-image:linear-gradient(transparent,#000 89px,#000 calc(100% - 89px),transparent)}

/* Scène de fin (touche 7) et φ en pixels : 56 × 72, puis 84 × 108 dès 600 px (tailles permises). Avec data-vu, base.js
   pose .vu à l'entrée dans l'écran et le φ se dessine case par case (délais --t des 23 <rect>, comme l'ouverture). */
.cloture{padding:89px 0 55px;text-align:center}
.cloture .stores{justify-content:center}
.phi-pixels{width:56px;height:72px;margin-inline:auto;color:var(--accent);fill:currentColor}
@media (min-width:600px){.phi-pixels{width:84px;height:108px}}
@keyframes poser{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.js .phi-pixels[data-vu]:not(.vu) rect{opacity:0}
  .phi-pixels.vu rect{animation:poser 1ms var(--t,0ms) both}
}

/* ─── 11. Mouvement commun ─────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* Retour au doigt (touche 4) : le bouton s'enfonce et revient sur le ressort, sans rebond. Pas sur .store. */
  .btn,.langue,.navigation .langue,.pied nav .langue{transition:scale 300ms var(--ressort),background-color 150ms,color 150ms}
  .btn:not(:disabled):active,.langue:active{scale:.96;transition-duration:90ms}
  a.tuile{transition:scale 300ms var(--ressort)}
  a.tuile:active{scale:.985;transition-duration:90ms}
  /* Passages entre les pages sans écran blanc (touche 8) : l'en-tête reste, le contenu se fond. */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms}
}

/* ─── 12. Cas particuliers ─────────────────────────────────────────────────────────────────────────────────── */
@media (forced-colors:active){
  .tag,.langue,.store,.btn{border:1px solid}
  .marque .phi,.phi-pixels{color:LinkText}
}
@media print{
  .entete{position:static}
  .entete::before,.evitement,.stores{display:none}
  body{background:#fff;color:#000}
  a{color:inherit}
}