/* =============================================================================
   accueil.css — ce qui n'appartient qu'à l'accueil (index.html, fr.html), par-dessus base.css.
   Refonte « Studio » (25 octobre 2026) : maquette C, greffes du rapport du DA (§3 : téléphone collant de B, bande des
   8 positions et φ en pixels de A), corrections (pastilles avec la carte, toile du héros jamais vide sur téléphone,
   cadre de la Mini en sombre) et les touches de modernité de la refonte.
   Ne redéfinit rien de base.css (jetons, en-tête, pied, boutons, stores, pastilles, numéro, pièce, cadre, carte,
   tableaux, repère, chapeau, note, section) : seulement les scènes de la page.
   ============================================================================= */

/* ─── 0. Jetons propres à l'accueil ─────────────────────────────────────────────────────────────────────────── */
/* Gris neutres, comme le fond et les traits de base.css (26 octobre 2026) : les anciens gris lilas (#9690b3, #6f6890,
   #6e6890, #0b0a12) sont passés au gris de même clarté ; la grille d'une toile (avant rgb(40 30 90)) prend celle de
   l'éditeur de l'app, du noir à 12 %. Le violet ne reste qu'aux actions et à la rareté. */
:root{
  --case:8px;                                 /* une case du grand φ de l'ouverture : 8 px, 12 dès 600 px */
  --ligne-art:rgb(0 0 0/.12);                 /* la grille fine posée sur une toile (toujours sur blanc) */
  --contour:#94949b;                          /* contour des toiles de la spirale (The canvases) */
  --bord-sw:rgb(29 27 46/.28);                /* liseré des pastilles de couleur du chevalet */
  --cadre-tel:#1d1b2e;                        /* le cadre du téléphone */
  --filet-tel:rgb(255 255 255/.08);
}
@media (min-width:600px){:root{--case:12px}}
@media (prefers-color-scheme:dark){
  :root{--contour:#6d6d72;--bord-sw:#6d6d72;--cadre-tel:#0b0b0c;--filet-tel:var(--trait-fort)}
}

/* ─── 1. L'ouverture : le φ se dessine case par case, puis vole se poser dans l'en-tête ─────────────────────── */
.ouverture{display:none}
html.intro .ouverture{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;animation:fin 1ms 2.2s forwards}
.voile{position:absolute;inset:0;background:var(--fond)}
.scene-phi{position:absolute;left:var(--ox,calc(50% - 3.5 * var(--case)));top:var(--oy,calc(50% - 4.5 * var(--case)));width:calc(7 * var(--case));height:calc(9 * var(--case))}
.scene-phi svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.grille-phi{fill:none;stroke:var(--trait-fort);stroke-width:1px;animation:effacer 150ms 690ms forwards}
.grille-phi path{vector-effect:non-scaling-stroke}
.phi-grand{color:var(--accent)}
.phi-grand rect{animation:poser 1ms var(--t) both}
/* Le carré de sélection de l'app avance de case en case devant la pose. */
.curseur{position:absolute;left:0;top:0;width:var(--case);height:var(--case);outline:2px solid var(--accent);outline-offset:2px;animation:curseur 710ms step-end both}
@keyframes effacer{to{opacity:0}}
@keyframes fin{to{opacity:0;visibility:hidden}}
@keyframes montrer{to{visibility:visible}}
@keyframes montrer-nom{to{opacity:1}}
@keyframes curseur{
  0%{transform:translate(var(--case),calc(2 * var(--case)))}
  3.66%{transform:translate(calc(2 * var(--case)),calc(2 * var(--case)))}
  7.32%{transform:translate(calc(3 * var(--case)),calc(2 * var(--case)))}
  10.99%{transform:translate(calc(4 * var(--case)),calc(2 * var(--case)))}
  14.65%{transform:translate(calc(5 * var(--case)),calc(2 * var(--case)))}
  18.31%{transform:translate(calc(6 * var(--case)),calc(3 * var(--case)))}
  21.97%{transform:translate(calc(6 * var(--case)),calc(4 * var(--case)))}
  25.63%{transform:translate(calc(6 * var(--case)),calc(5 * var(--case)))}
  29.3%{transform:translate(calc(5 * var(--case)),calc(6 * var(--case)))}
  32.96%{transform:translate(calc(4 * var(--case)),calc(6 * var(--case)))}
  36.62%{transform:translate(calc(3 * var(--case)),calc(6 * var(--case)))}
  40.28%{transform:translate(calc(2 * var(--case)),calc(6 * var(--case)))}
  43.94%{transform:translate(var(--case),calc(6 * var(--case)))}
  47.61%{transform:translate(0,calc(5 * var(--case)))}
  51.27%{transform:translate(0,calc(4 * var(--case)))}
  54.93%{transform:translate(0,calc(3 * var(--case)))}
  70.42%{transform:translate(calc(3 * var(--case)),0)}
  74.65%{transform:translate(calc(3 * var(--case)),var(--case))}
  78.87%{transform:translate(calc(3 * var(--case)),calc(3 * var(--case)))}
  83.1%{transform:translate(calc(3 * var(--case)),calc(4 * var(--case)))}
  87.32%{transform:translate(calc(3 * var(--case)),calc(5 * var(--case)))}
  91.55%{transform:translate(calc(3 * var(--case)),calc(7 * var(--case)));opacity:1}
  95.77%{transform:translate(calc(3 * var(--case)),calc(8 * var(--case)));opacity:1}
  100%{transform:translate(calc(3 * var(--case)),calc(8 * var(--case)));opacity:0}
}
/* Le φ de l'en-tête garde sa place pendant l'ouverture (aucun saut), puis s'affiche ; le nom arrive après. */
html.intro .entete .phi{visibility:hidden;animation:montrer 1ms 2.2s forwards}
html.intro.intro-pose .entete .phi{visibility:visible}
html.intro .entete .nom{opacity:0;animation:montrer-nom 1ms 2.2s forwards}
@media (prefers-reduced-motion:reduce){
  .ouverture{display:none !important}
  html.intro .entete .phi{visibility:visible}
  html.intro .entete .nom{opacity:1}
}

/* ─── 2. Pièces communes à plusieurs scènes ─────────────────────────────────────────────────────────────────── */
/* La grille fine d'une toile (le papier de l'éditeur de l'app), posée sur l'œuvre. */
.grille-art{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ligne-art);stroke-width:1px;pointer-events:none}
.grille-art path{vector-effect:non-scaling-stroke}
/* Le carré visé (loupe, chevalet) : le cadre de l'outil choisi dans l'app. */
.curseur-case{position:absolute;left:0;top:0;width:var(--c,8px);height:var(--c,8px);box-shadow:0 0 0 1px var(--passe-partout),0 0 0 3px var(--accent),0 0 0 4px var(--passe-partout);opacity:0;pointer-events:none}
.curseur-case.vise{opacity:1}
/* Lecture / Pause dessinées en carrés. */
.i{width:10px;height:14px;fill:currentColor;flex:none}
.i-pause,[data-etat="pause"] .i-lecture{display:none}
[data-etat="pause"] .i-pause{display:inline}
.btn-rond[data-etat="attente"]{visibility:hidden}
html:not(.js) .btn-film{display:none}
/* Une rangée qui défile (téléphone) : focalisable au clavier quand elle défile vraiment (accueil.js). */
[data-defile]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Le téléphone, dessiné en CSS : aucune photo d'iPhone, aucune encoche. Sa largeur vient de son conteneur. */
.telephone{width:100%;padding:8px;border-radius:34px;background:var(--cadre-tel);box-shadow:inset 0 0 0 1px var(--filet-tel),var(--ombre-objet)}
.ecran{position:relative;aspect-ratio:1170 / 2532;overflow:hidden;border-radius:26px;background:var(--passe-partout)}
.ecran img{width:100%;height:100%}
@supports (padding:1cqi){
  .telephone{padding:3.2cqi;border-radius:13cqi}
  .ecran{border-radius:9.8cqi}
}
/* Les entrées au défilement : par paliers (steps), comme des pixels posés ; les blocs sur le ressort sans rebond.
   L'état caché n'existe que sous html.anime (script présent, mouvement permis). */
html.anime .apparait:not(.vu){opacity:0;transform:translateY(12px)}
html.anime .apparait.vu{animation:poser-pas 240ms steps(3,end) calc(var(--i,0) * 80ms) backwards}
html.anime .apparait.fixe:not(.vu){transform:none}
html.anime .apparait.fixe.vu{animation-name:poser-fixe}
html.anime .apparait.bloc:not(.vu){transform:translateY(16px)}
html.anime .apparait.bloc.vu{animation:entrer var(--d-entree) var(--ressort) calc(var(--i,0) * 80ms) backwards}
html.anime .apparait.deja{animation:none}
@keyframes poser-pas{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes poser-fixe{from{opacity:0}to{opacity:1}}
@keyframes entrer{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ─── 3. L'accroche : le titre et l'action, puis la grande toile au centre (touche 2) ───────────────────────── */
.accroche{padding:34px 0 55px}
/* Une colonne qui ne s'élargit jamais à son contenu (à 320 px, le titre et l'édition débordaient de 1 à 3 px). */
.accroche-grille{display:grid;grid-template-columns:minmax(0,1fr)}
.accroche h1 .l{display:block}
.accroche .chapeau{margin-top:21px}
.accroche .stores{margin-top:34px}
.promesse{margin-top:21px;font-size:15px;color:var(--attenue)}
.accroche-objet{margin-top:34px}
/* Sous 900 px : le titre, puis la toile vivante et son cartel (son bouton Pause dans le premier écran, WCAG 2.2.2),
   puis le texte et les stores. L'ordre du document ne change pas (le bouton est le seul élément focalisable). */
@media (max-width:899px){
  .accroche-objet{order:1;margin-top:21px}
  .accroche-texte{order:2;margin-top:34px}
  .accroche .chapeau{margin-top:0}
}
.atelier{width:fit-content;max-width:100%;margin:0}
.atelier-info{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px 13px;min-height:34px;margin-bottom:13px}
.format{font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue);font-variant-numeric:tabular-nums;white-space:nowrap}
.edition{display:inline-flex;align-items:baseline;gap:6px}
.ed-nombre{display:inline-block;min-width:3ch;text-align:right;font-family:var(--sans);font-size:21px;font-weight:700;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--accent)}
.ed-nombre span{display:inline-block;transform-origin:50% 60%}
.ed-unite{font-size:15px;font-weight:600;color:var(--attenue)}
.edition .tag{align-self:center}
/* La toile : le passe-partout blanc (aussi en sombre), l'ombre « objet posé » ; l'œuvre à --k px par pixel sans
   script (accueil.js prend ensuite le plus grand multiple entier qui tient, à la résolution de l'écran). */
.cadre-heros{width:fit-content;max-width:100%;padding:13px;box-shadow:inset 0 0 0 1px var(--trait),var(--ombre-objet)}
.cadre-heros .art-boite{--k:5}
.cartel{display:block;margin-top:21px}
.cartel-ligne{display:flex;align-items:center;gap:13px}
.cartel-titre{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;line-height:1.35}
.cartel-titre span{color:var(--attenue);font-weight:400}
.cartel .note{display:block;margin-top:8px}
/* La séquence, dans l'ordre de l'app (édition tirée à la validation, 25 octobre 2026) : la toile blanche montre sa
   grille, le film peint l'œuvre (pas encore d'édition : sa ligne est cachée, sa place gardée), la grille s'efface, puis
   l'édition descend depuis 100 et arrive en violet avec sa pastille. Sans script ou en mouvement réduit : l'image
   finale, l'édition et la pastille. La largeur du nombre est celle de « 100 » : rien ne bouge pendant le compte. */
.atelier .grille-art{opacity:0;transition:opacity 300ms}
.atelier.quadrille .grille-art{opacity:1}
.atelier .edition .tag{transition:opacity 250ms}
html.anime .atelier .edition{transition:opacity 200ms}
html.anime .atelier.avant-tirage .edition{visibility:hidden;opacity:0}
html.anime .atelier.pret:not(.arrivee) .ed-nombre{color:var(--attenue)}
html.anime .atelier.pret:not(.arrivee) .edition .tag{opacity:0}
html.anime .atelier.eclat .ed-nombre span{animation:arrivee 450ms ease-out}
@keyframes arrivee{35%{transform:scale(1.12)}}
/* Avant que le script prenne la toile : ni l'image finale ni l'édition (pas d'éclair) ; filet de sécurité à 3 s. */
@media (prefers-reduced-motion:no-preference){
  html.js .atelier:not(.pret) .ed-nombre,html.js .atelier:not(.pret) .art-boite>img{visibility:hidden;animation:montrer 1ms 3s forwards}
}
@media (max-width:599px){
  .accroche .store{min-height:48px;padding-block:6px}
  .ed-nombre{font-size:19px}
  .format{font-size:12px}
}
@media (min-width:600px){
  .accroche{padding:55px 0 89px}
  .cadre-heros{padding:21px}
  .cadre-heros .art-boite{--k:8}
  .ed-nombre{font-size:27px}
}
@media (min-width:768px){.cadre-heros .art-boite{--k:11}}
@media (min-width:900px){
  .accroche{padding:21px 0 55px}
  .accroche-grille{grid-template-columns:minmax(0,1fr) minmax(300px,410px);grid-template-areas:"titre texte" "objet objet";column-gap:55px;row-gap:34px;align-items:end}
  .accroche-titre{grid-area:titre}
  .accroche-texte{grid-area:texte}
  .accroche-objet{grid-area:objet;display:flex;justify-content:center;margin-top:0}
  /* Le titre remplit sa colonne : « Draw pixel art, sell it » (8,2 em) tient sur une ligne, « in limited editions. »
     (7,5 em) sur la suivante ; en français, « Dessine du pixel art » (8,1 em), « et vends-le » et « en édition
     limitée. » (7,3 em) ont chacun leur ligne (trois lignes). Mesuré le 25 octobre 2026, après la passe sur le ton. */
  .accroche-titre{container-type:inline-size}
  .accroche h1{font-size:clamp(40px,min(100cqi / 8.75,8.4svh),72px)}
  :lang(fr) .accroche h1{font-size:clamp(40px,min(100cqi / 11,7.2svh),64px)}
  .accroche h1 .l:nth-child(-n+2){display:inline-block}
  .accroche .chapeau{margin-top:0;font-size:clamp(17px,.5vw + 12px,19px)}
  .accroche .stores{margin-top:21px}
  .accroche .promesse{margin-top:13px}
  .cadre-heros .art-boite{--k:9}
}
@media (min-width:900px) and (max-height:820px){.accroche{padding-top:13px}.accroche-grille{row-gap:13px}.cartel{margin-top:13px}}
@media (min-width:1280px) and (min-height:860px){.cadre-heros .art-boite{--k:12}}
@media (max-width:899px){.atelier,.cadre-heros{width:auto}}
/* Français (textes plus longs), et toutes les langues sous 380 px : l'édition (« 34 exemplaires Rare ») passe sous la
   taille de la toile quand la ligne est trop courte ; sous 380 px, le titre français passe à 38 px : « Dessine du pixel
   art » (8,1 em, 309 px) tient d'un trait à partir d'environ 350 px de large, et le titre fait quatre lignes à 320 px
   (trois à 390 px, à 40 px) ; les chances (« 1 sur 10 000 000 ») peuvent passer à la ligne sous 400 px. */
:lang(fr) .atelier-info{flex-wrap:wrap}
:lang(fr) .atelier-info .edition{margin-left:auto}
@media (max-width:379px){.atelier-info{flex-wrap:wrap}.atelier-info .edition{margin-left:auto}}
@media (max-width:379px){:lang(fr) .accroche h1{font-size:38px}}

/* ─── 4. How it works (touche 3) ──────────────────────────────────────────────────────────────────────────────
   Par défaut (téléphone, sans script, fenêtre basse) : les trois étapes, puis la rangée des quatre écrans sur une
   bande de papier. html.recit (900 × 640 au moins, avec script) : les blocs à gauche, le téléphone collant à droite. */
.etapes{display:grid;gap:34px;margin:0;padding:0;list-style:none}
.etape p{max-width:48ch;margin-top:8px;color:var(--attenue)}
.temps+.temps .phrase{margin-top:8px}
.tel-collant{display:none}
.banc{margin-top:21px;padding-block:34px}
.rangee{display:grid;grid-auto-flow:column;grid-auto-columns:min(64vw,260px);gap:21px;margin:0;padding:21px var(--gouttiere);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:var(--gouttiere);scrollbar-width:none}
.rangee::-webkit-scrollbar{display:none}
.rangee li{scroll-snap-align:start;min-width:0}
.rangee figure{margin:0;container-type:inline-size}
.rangee figcaption{margin-top:13px;font-size:15px;font-weight:600;text-align:center}
.note-rangee .note{margin-top:13px}
@media (min-width:900px){
  .etapes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rangee{width:min(var(--largeur),100% - 2 * var(--gouttiere));margin-inline:auto;padding-inline:0;grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
}
@media (min-width:1280px){.etapes,.rangee{gap:55px}}

/* La scène collante (retouches du 25 octobre : un vrai défilement par étape, comme la maquette B, et le texte de
   l'étape reste à côté du téléphone pendant toute l'étape).
   --tel : largeur du téléphone, 320 px, jusqu'à 380 px sur les grands écrans, jamais plus large que sa colonne ;
   --fig : hauteur de la figure (téléphone 2,09 × sa largeur, plus le rail et la légende) ; --haut : sa position,
   centrée sous l'en-tête pendant que les blocs défilent.
   --pas : la hauteur d'une étape, 90 % de la zone sous l'en-tête, entre 520 et 760 px (752 px à 1440 × 900, 590 px à
   1280 × 720, 760 px sur les grands écrans) : environ un écran de défilement entre deux écrans du téléphone.
   --milieu : le milieu de la zone sous l'en-tête. Le texte d'une étape (.temps-in) est collant, centré sur ce milieu
   (--h-texte : sa hauteur, mesurée par accueil.js) : il reste à côté du téléphone tant que son étape est à l'écran,
   puis le texte suivant arrive par le bas et l'emmène. L'écran change quand le centre du texte suivant monte au-dessus
   de 56 % de la zone (ligne de bascule à 62 %, moins une marge de 6 %), un peu avant que ce texte se pose au milieu ; il
   revient quand ce centre redescend sous 68 % (la marge, de l'autre côté : jamais de va-et-vient). Voir choisir() dans
   accueil.js. Le bas de la colonne de texte (--h-fin : la hauteur du dernier texte) fait partir le dernier texte et le
   téléphone ensemble. */
html.recit .scene{--tel:min(380px,(100svh - var(--entete) - 150px) / 2.09,(min(var(--largeur),100vw - 2 * var(--gouttiere)) - 55px) / 2.618);--fig:calc(var(--tel) * 2.09 + 104px);--haut:max(var(--entete) + 13px,(100svh + var(--entete) - var(--fig)) / 2);--pas:max(520px,min((100svh - var(--entete)) * .9,760px));--milieu:calc(var(--entete) + (100svh - var(--entete)) / 2);display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);column-gap:55px}
html.recit .scene-texte{grid-column:1;grid-row:1;padding-bottom:max(0px,var(--haut) + var(--fig) - var(--milieu) - 34px - var(--h-fin,160px) / 2)}
html.recit .tel-collant{display:block;container-type:inline-size;grid-column:2;grid-row:1;align-self:start;justify-self:center;position:sticky;top:var(--haut);width:var(--tel);margin:0}
html.recit .how{padding-bottom:var(--e-89)}
html.recit .banc,html.recit .note-rangee{display:none}
html.recit .scene .tete{margin-bottom:0;padding-bottom:21px}
html.recit .etapes{display:block}
html.recit .temps{min-height:var(--pas);padding-block:34px}
html.recit .temps-in{position:sticky;top:calc(var(--milieu) - var(--h-texte,160px) / 2);padding:3px 0 3px 21px}
html.recit .temps-in::before,html.recit .temps-in::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:1px;background:var(--trait)}
html.recit .temps-in::after{background:var(--encre);transform:scaleY(0);transform-origin:50% 0}
html.recit .temps.actif .temps-in::after{transform:none}
html.recit .temps h3{font-size:27px;line-height:1.2;letter-spacing:-.018em;color:var(--attenue)}
html.recit .temps.actif h3,html.recit .temps.actif .phrase{color:var(--encre)}
html.recit .temps p{max-width:34em;font-size:clamp(18px,.9vw + 14px,21px);line-height:1.5}
/* La phrase seule d'une étape (« Then you set your price… ») : un cran au-dessus du texte des étapes (24 px, poids
   500, lignes équilibrées), en encre quand son écran est montré. Le téléphone porte l'étape. */
html.recit .temps .phrase{margin-top:0;font-size:24px;font-weight:500;line-height:1.4;letter-spacing:-.01em;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  html.recit .temps h3,html.recit .temps .phrase{transition:color var(--d-retour)}
  html.recit .temps-in::after{transition:transform 450ms var(--ressort)}
}
@media (min-width:1280px){html.recit .scene{column-gap:89px}}
/* Les écrans empilés : un seul visible. Le canvas .pose reçoit le nouvel écran case par case, puis s'efface. */
.tel-collant .ecran img{position:absolute;inset:0;opacity:0}
.tel-collant .ecran img.vu{opacity:1}
.pose{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
/* Le rail : Draw · Sell · Collect, sous un trait de 2 px ; l'étape en cours en encre. */
.rail{display:flex;gap:8px;margin:21px 0 0;padding:0;list-style:none;font-size:13px;font-weight:600;line-height:18px;color:var(--attenue);text-align:center}
.rail li{position:relative;flex:1;padding-top:10px}
.rail li::before,.rail li::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:1px;background:var(--trait)}
.rail li::after{background:var(--encre);opacity:0}
.rail li.actif{color:var(--encre)}
.rail li.actif::after{opacity:1}
@media (prefers-reduced-motion:no-preference){.rail li{transition:color var(--d-retour)}.rail li::after{transition:opacity var(--d-retour)}}
.tel-collant .note{margin-top:13px;text-align:center}

/* ─── 5. One of a kind : le spécimen sur papier millimétré, sa loupe, ses 8 positions ─────────────────────────── */
.unique-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:55px}
/* Le papier : une case = un pixel de l'œuvre (--c, posé par accueil.js), la feuille blanche alignée sur la grille. */
.papier{--c:5px;position:relative;height:calc((var(--h) + 6) * var(--c));border-radius:var(--r-l);overflow:hidden;background-size:var(--c) var(--c);background-position:0 0;box-shadow:inset 0 0 0 1px var(--trait)}
.specimen .papier{--w:55;--h:34}
.papier .feuille{position:absolute;top:calc(2 * var(--c));left:calc(2 * var(--c));left:calc(round(down,(100% - (var(--w) + 2) * var(--c)) / 2,var(--c)));padding:var(--c);background:var(--passe-partout);box-shadow:var(--ombre-objet)}
.papier .art-boite{width:calc(var(--w) * var(--c));height:calc(var(--h) * var(--c));outline:none}
.papier .art{box-shadow:none}
.papier .art-boite:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.lecture{display:flex;align-items:center;gap:8px;min-height:34px;margin-top:13px;font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue);font-variant-numeric:tabular-nums}
.lecture .pastille-couleur{flex:none;width:13px;height:13px;box-shadow:inset 0 0 0 1px rgb(0 0 0/.18)}
.lecture b{font-weight:700;color:var(--encre)}
.lecture sup{font-size:.72em;vertical-align:.42em;line-height:0}
html:not(.js) .lecture{display:none}
.specimen-pied{display:grid;gap:21px;align-items:end;margin-top:21px}
.specimen-cartel{display:grid;gap:5px}
.specimen-cartel .titre{font-size:17px;font-weight:600}
.specimen-cartel .titre span{font-weight:400;color:var(--attenue)}
.specimen-cartel .ligne{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--attenue);font-variant-numeric:tabular-nums}
/* Les 8 positions (greffe de A) : un sprite à échelle entière, chaque case à un décalage entier : pixels nets. */
.positions-bloc{margin:0}
.positions{--s:55px;display:grid;grid-template-columns:repeat(4,var(--s));gap:8px;width:fit-content;padding:8px;border-radius:var(--r-s);background:var(--passe-partout);box-shadow:inset 0 0 0 1px var(--trait)}
.positions i{display:block;width:var(--s);height:var(--s);background:var(--positions) calc(var(--i) * var(--s) * -1) 0 / calc(8 * var(--s)) var(--s) no-repeat;image-rendering:crisp-edges;image-rendering:pixelated}
.positions-bloc .note{margin-top:8px}
@media (min-width:600px){.papier{--c:8px}.specimen-pied{grid-template-columns:minmax(0,1fr) auto}}
/* Les quatre faits, numérotés comme les parties du spécimen. */
.faits{margin:0;padding:0;list-style:none}
.faits li{display:grid;grid-template-columns:34px minmax(0,1fr);padding:21px 0;border-top:1px solid var(--trait)}
.faits li:first-child{padding-top:0;border-top:0}
.faits .n{display:grid;place-items:center;width:21px;height:21px;margin-top:3px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--trait-fort);font-size:12px;font-weight:600;line-height:1;color:var(--encre);font-variant-numeric:tabular-nums}
.faits p{margin-top:5px;color:var(--attenue)}
.faits strong{font-weight:600;color:var(--encre)}
@media (min-width:900px){.unique-grille{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:34px;align-items:start}}
@media (min-width:1280px){.unique-grille{gap:55px}.papier{--c:11px}}

/* ─── 6. The film : deux étoiles, puis le chevalet ─────────────────────────────────────────────────────────── */
/* Une colonne qui ne s'élargit jamais à son contenu : à 320 px, le chevalet (posé à --k:19 avant le script) débordait. */
.film-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:55px;align-items:start}
.etoiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 21px;width:100%;max-width:720px;margin:0 auto}
.etoiles figure{margin:0}
.etoiles .cadre{padding:13px}
.etoiles .art-boite{--k:5}
.etoiles figcaption{margin-top:13px;font-size:15px;font-weight:600}
.etoiles-actions{grid-column:1 / -1;display:flex;justify-content:center;margin-top:8px}
.chevalet{display:none;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
html.js .chevalet{display:block}
.chevalet>p{margin-top:8px;color:var(--attenue)}
.chevalet .cadre{width:fit-content;max-width:100%;margin-top:21px;padding:13px}
.chevalet .art-boite{--k:19;touch-action:none;cursor:crosshair}
.chevalet canvas{outline:none}
.chevalet .art-boite:has(canvas:focus-visible){outline:2px solid var(--accent);outline-offset:6px}
@supports not selector(:has(*)){.chevalet canvas:focus-visible{outline:2px solid var(--accent);outline-offset:4px}}
.chevalet .grille-art{stroke:rgb(0 0 0/.09)}
.chevalet-outils{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:21px;margin-top:21px}
.nuancier{display:grid;grid-template-columns:repeat(4,44px);gap:8px}
.sw{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--bord-sw);cursor:pointer;touch-action:manipulation}
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--bord-sw),0 0 0 2px var(--carte),0 0 0 5px var(--accent)}
.sw:focus-visible{outline:2px solid var(--encre);outline-offset:7px}
.chevalet-actions{display:flex;gap:8px}
.chevalet .note{margin-top:13px}
/* En sombre, la Mini reste blanche (c'est la toile), mais son passe-partout devient un cadre sombre : le blanc ne
   déborde plus de la toile (rapport du DA). */
@media (prefers-color-scheme:dark){
  .chevalet .cadre{background:var(--fond);box-shadow:inset 0 0 0 1px var(--trait-fort)}
}
@media (prefers-reduced-motion:no-preference){
  .sw{transition:scale 300ms var(--ressort)}
  .sw:active{scale:.92;transition-duration:90ms}
}
@media (min-width:600px){
  .etoiles .art-boite{--k:10}
  .chevalet{max-width:560px;padding:34px}
  .chevalet .art-boite{--k:24}
  .nuancier{grid-template-columns:repeat(8,36px)}
  .sw{width:36px;height:36px}
  .sw::after{content:'';position:absolute;inset:-4px}
}
@media (min-width:900px){
  html.js .film-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:34px}
  html.js .etoiles{grid-template-columns:minmax(0,1fr);gap:0;justify-items:start;margin:0}
  html.js .etoiles figure+figure{margin-top:21px}
  html.js .etoiles .art-boite{--k:13}
  html.js .etoiles-actions{justify-content:flex-start;margin-top:21px}
  .chevalet{max-width:none}
  .chevalet .art-boite{--k:28}
}
@media (min-width:1280px){
  html.js .film-grille{gap:55px}
  .etoiles .art-boite{--k:14}
  .chevalet .art-boite{--k:36}
  .nuancier{grid-template-columns:repeat(8,40px)}
  .sw{width:40px;height:40px}
}

/* ─── 7. Rarity : les cinq cartes sur une bande de papier, le tableau des chances aligné, Rarity is protected. ── */
.gamme{--etiq:0px;position:relative}
.gamme-papier{padding-block:21px}
.gamme-etiq{display:none}
.cartes{display:grid;grid-auto-flow:column;grid-auto-columns:min(68%,260px);gap:13px;margin:0 calc(-1 * var(--gouttiere));padding:34px var(--gouttiere);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:var(--gouttiere);scrollbar-width:none}
.cartes::-webkit-scrollbar{display:none}
.cartes>li{scroll-snap-align:start;display:flex}
/* Les cartes Calme de l'app 1.4 (base.css) : chacune prend toute sa colonne, le dessin bord à bord. */
.cartes .carte-calme{flex:1}
.gamme-tableau{margin-top:21px}
.chances{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:13px;width:100%;border-top:1px solid var(--encre);border-collapse:collapse;font-variant-numeric:tabular-nums}
.chances thead,.chances tbody,.chances tr{display:contents}
.chances th,.chances td{display:flex;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid var(--trait);text-align:left;font-size:15px}
.chances thead th{font-weight:600}
.chances tbody th,.gamme-etiq{font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.chances td{font-weight:600}
.chances-notes{display:grid;gap:8px;margin-top:21px}
.chances-notes p{max-width:64ch;font-size:15px;color:var(--attenue)}
.garde{margin-top:89px}
.garde ul{display:grid;margin:21px 0 0;padding:0;list-style:none}
.garde li{padding:21px 0;border-top:1px solid var(--trait);color:var(--attenue)}
.garde strong{display:block;margin-bottom:5px;font-size:17px;font-weight:600;color:var(--encre)}
@media (max-width:599px){.chances th,.chances td{font-size:14px}.chances tbody tr:nth-child(2) td{white-space:nowrap}}
@media (max-width:399px){:lang(fr) .chances tbody tr:nth-child(2) td{white-space:normal}}
@media (min-width:600px){
  .garde ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px}
}
@media (min-width:1180px){
  .gamme{--etiq:120px}
  .gamme-etiq{display:block;position:absolute;z-index:1;left:0;top:34px;width:var(--etiq);margin:0}
  .cartes{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:var(--etiq) repeat(5,minmax(0,1fr));margin:0;padding:34px 0;overflow:visible}
  .cartes>li{grid-row:1}
  .cartes>li:nth-child(1){grid-column:2}
  .cartes>li:nth-child(2){grid-column:3}
  .cartes>li:nth-child(3){grid-column:4}
  .cartes>li:nth-child(4){grid-column:5}
  .cartes>li:nth-child(5){grid-column:6}
  .chances{grid-template-columns:var(--etiq) repeat(5,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}
}
@media (min-width:1280px){.garde ul{column-gap:55px}}

/* ─── 8. The numbers : le grand 10⁷⁵¹ (touche 6), le calcul, le tableau (la spirale des toiles : 8 bis) ───────── */
.calcul{display:grid;gap:21px;color:var(--attenue)}
/* Les chiffres de Familjen sont plus bas que ceux d'Inter : 11 % de plus ici, pour retrouver 85 px (le « 100 » de Phicoins ne bouge pas). */
.calcul .geant{color:var(--encre);font-size:clamp(80px,8.9vw,128px)}
.calcul p:not(.geant){max-width:64ch}
.calcul strong{font-weight:600;color:var(--encre)}
.calcul code{font-weight:400;color:var(--encre)}
.tableau-nombres{margin-top:34px}
.tableau-nombres .chiffres tbody th{font-weight:600}
.tableau-nombres .chiffres th small{display:block;font-size:13px;font-weight:400;color:var(--attenue)}
.tableau-nombres .chiffres td{font-weight:600;font-variant-numeric:tabular-nums}
@media (min-width:900px){
  .calcul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:21px;align-items:start}
  .calcul .geant{grid-column:1 / -1}
  .tableau-nombres{margin-top:55px}
}
@media (min-width:1280px){.calcul{column-gap:55px}}

/* ─── 8 bis. The canvases : la spirale d'or des sept toiles (maquette B, au style Studio) et leur tableau ──────────
   Chaque toile est la précédente plus un carré (Mini 13 × 8 → Monumental 233 × 144), en alternant paysage et portrait.
   La spirale est décorative (aria-hidden) : le tableau dit tout (nom, taille, prix avec la pièce, niveau).
   Échelle : accueil.js pose une taille entière en pixels de l'écran (k pixels par pixel de toile, 3 px CSS au plus)
   quand elle ne coûte pas plus de 15 % de la place ; sinon (téléphones), toute la largeur : les traits sont
   vectoriels. Sans script, 100 % de la largeur, 699 px au plus. Filets de 1 px nets (crispEdges), arcs lissés.
   Le titre (.tete) est dans la scène, sur le papier : sur ordinateur, il reste à l'écran pendant le dessin.
   Dessin au défilement (html.js, mouvement permis : .spirale.dessin posée par accueil.js) : de la Mini à la Monumental,
   l'arc de chaque carré se trace, la toile apparaît, et sa ligne du tableau est marquée (.en-cours, comme la ligne en
   vigueur des autres tableaux, sans changer de graisse : rien ne bouge). Sans script ou en mouvement réduit :
   complète, immobile, aucune ligne marquée.
   À partir de 1200 × 640 (titre et spirale à gauche, tableau à droite) : la scène reste à l'écran le temps d'une
   course de 960 à 1 200 px (110 % de la hauteur de fenêtre) ; la spirale est finie aux quatre cinquièmes, puis reste
   complète et immobile avant de partir. */
.spirale-zone{padding-block:55px}
/* Les gris posés à même le papier (le chapeau, les deux notes, les en-têtes et les codes S1… du tableau) : le gris du
   papier de base.css (--attenue-papier), AA là où il croise une ligne du quadrillage. */
.spirale-zone :is(.chapeau,.note,.chiffres thead th,.toiles .s){color:var(--attenue-papier)}
.spirale-scene{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center}
.spirale-scene .tete{margin-bottom:0}
.spirale-fig{margin:0;min-width:0}
.spirale{position:relative;width:100%;max-width:699px;aspect-ratio:233 / 144;margin-inline:auto;container-type:inline-size}
.spirale svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.spirale .fantome{fill:none;stroke:var(--trait-fort);stroke-width:1px}
.spirale .fantome rect,.spirale .toile{vector-effect:non-scaling-stroke}
.spirale .toile{fill:var(--carte);stroke:var(--contour);stroke-width:1px}
.spirale .arc{fill:none;stroke:var(--encre);stroke-width:1.5px;stroke-linecap:butt;vector-effect:non-scaling-stroke}
/* Les étiquettes : le nom et le code (S1 à S7), dans le coin de leur carré que l'arc ne touche pas (maquette B). Jamais
   les dimensions : une toile en portrait les inverserait (elles sont dans le tableau). */
.spirale .et{position:absolute;display:flex;flex-direction:column;margin:3px;padding:3px 6px;border-radius:4px;background:var(--carte);line-height:1.3;white-space:nowrap;pointer-events:none}
.spirale .et.droite{align-items:flex-end;text-align:right}
.spirale .et b{font-size:13px;font-weight:600;color:var(--encre)}
.spirale .et span{font-size:11px;font-weight:600;color:var(--attenue);font-variant-numeric:tabular-nums}
.spirale .et.code{margin:2px;padding:1px 3px}
.spirale .et.code b{font-size:11px;color:var(--attenue);font-variant-numeric:tabular-nums}
/* Selon la place (la largeur de la spirale) : 699 px (×3) tout (S1 et S2 en code seul ; la Standard, la toile offerte à
   tous, nommée sur une ligne) ; 466 px (×2) sans S1, S2 ni le code de Medium, la Standard en code (S3) ; téléphone :
   Monumental, X-Large et Large, sans code ; sous 300 px, sans Monumental (son étiquette couperait l'arc ; le tableau
   la nomme). */
.spirale .et.code .long{color:var(--encre)}
.spirale .et-3 .court{display:none}
@container (max-width:680px){
  .spirale .et-1,.spirale .et-2{display:none}
  .spirale .et-4 span{display:none}
  .spirale .et-3 .long{display:none}
  .spirale .et-3 .court{display:block}
}
@container (max-width:440px){
  .spirale .et-3,.spirale .et-4{display:none}
  .spirale .et{margin:2px;padding:2px 4px}
  .spirale .et b{font-size:12px}
  .spirale .et span{display:none}
}
@container (max-width:299px){.spirale .et-7{display:none}}
.spirale-fig figcaption{margin-top:13px;text-align:center}
.spirale-infos{width:100%;min-width:0;max-width:560px;margin-inline:auto}
.spirale-infos .note{margin-top:13px}
/* Le tableau des toiles : le code (S1…) sous le nom, « 13 × 8 » d'un tenant, la pièce devant chaque prix. Trop
   étroit (320 px, zoom à 200 %), il défile dans sa région (data-defile : joignable au clavier). */
.toiles .s{display:block;font-size:13px;font-weight:500;color:var(--attenue)}
.toiles .sep{display:none}
.toiles td{white-space:nowrap}
.toiles th,.toiles td{padding-block:9px}
.toiles thead th{padding-top:13px}
@media (max-width:599px){.toiles :is(th,td){padding-right:8px}.toiles .somme{gap:4px}}
@media (max-width:359px){.toiles :is(th,td){padding-right:6px}.toiles :is(tbody th,td){font-size:13px}.toiles .somme{gap:3px}}
/* La toile qui se dessine : sa ligne marquée comme la ligne en vigueur (base.css), sans changer de graisse. La place du
   filet (15 px à gauche, 13 à droite) est gardée dans la région qui défile. */
.toiles tr.en-cours>td{font-weight:inherit}
@media (min-width:600px){.spirale-infos .tableau{margin-inline:-15px;padding-inline:15px}}
@media (prefers-reduced-motion:no-preference){.toiles tbody :is(th,td){transition:background-color 150ms,box-shadow 150ms}}
/* À partir de 1200 px : le titre puis la spirale à gauche, le tableau à droite, posés sur la même ligne du bas. */
@media (min-width:1200px){
  .spirale-scene{grid-template-columns:minmax(0,1fr) minmax(300px,340px);grid-template-areas:"tete infos" "fig infos";column-gap:55px;align-items:end}
  .spirale-scene .tete{grid-area:tete;align-self:start}
  .spirale-fig{grid-area:fig}
  .spirale-infos{grid-area:infos}
  .spirale{margin:0}
  .spirale-fig figcaption{text-align:left}
}
/* Le dessin au défilement : tout part caché, accueil.js montre chaque toile et trace son arc (pathLength = 1). L'arc
   prend alors une épaisseur en unités de la spirale (--arc, 1,5 px à l'écran), car les tirets suivent ces unités. */
.spirale.dessin .toile,.spirale.dessin .arc,.spirale.dessin .et{opacity:0}
.spirale.dessin .arc{vector-effect:none;stroke-width:var(--arc,.5);stroke-dasharray:1 1;stroke-dashoffset:1}
.spirale.dessin .vu{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .spirale.dessin .toile,.spirale.dessin .et{transition:opacity 240ms var(--sortie)}
}
@media (min-width:1200px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  html.js .spirale-piste{--course:clamp(960px,110svh,1200px);height:calc(var(--h-scene,640px) + var(--course))}
  html.js .spirale-scene{position:sticky;top:max(var(--entete) + 21px,(100svh + var(--entete) - var(--h-scene,640px)) / 2)}
}

/* ─── 9. Good to know : six points séparés par un filet (.points de base.css), puis la ligne vers l'aide ───────── */
/* Une seule colonne, à la largeur d'une ligne qui se lit bien (36em, environ 75 signes), sous le titre. */
.savoir{max-width:36em}
/* Le lien du point Phicoins vers « How Phicoins keep their value » (/phicoins, /valeur), comme .lien-suite de l'aide. */
.savoir .suite{display:block;width:fit-content;margin-top:5px;padding-block:8px;font-weight:600;text-decoration:none}
.savoir .suite span{display:inline-block;margin-left:4px}
@media (hover:hover){.savoir .suite:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.savoir .suite span{transition:transform var(--d-retour) var(--ressort)}.savoir .suite:hover span{transform:translateX(3px)}}
.regles{margin-top:34px;color:var(--attenue)}

/* ─── 10. La scène de fin (touche 7) : le grand φ, le titre repris, l'action, à gauche comme l'accroche ─────── */
/* Sans papier derrière elle, la fin est une section comme les autres : #know garde son air (--section : 55, 89 ou
   144 px), et le φ part du haut de la scène, sans marge de plus (avant : 55 + 144 px sur ordinateur, un trou de 200 px). */
.cloture{padding-top:0;text-align:left}
.cloture .phi-pixels{margin-inline:0}
.cloture h2{margin-top:34px}
.cloture h2 .l{display:inline-block}
@media (min-width:600px){.cloture h2 .l:last-child{display:block}}
.cloture .stores{justify-content:flex-start;margin-top:34px}
.cloture .promesse{margin-top:21px}
@media (min-width:600px){.cloture{padding-bottom:89px}}
/* Dès 900 px, la grille de l'accroche : le titre à gauche, les stores à droite, alignés en bas. */
@media (min-width:900px){
  .cloture .conteneur{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);column-gap:55px;align-items:end}
  .cloture .phi-pixels{grid-column:1/-1}
  .cloture .stores{margin-top:0}
  .cloture .promesse{margin-top:13px}
}

/* ─── 11. Cas particuliers ─────────────────────────────────────────────────────────────────────────────────── */
@media print{
  .ouverture,.tel-collant,.chevalet,.btn-film{display:none !important}
  html.anime .apparait{opacity:1 !important;transform:none !important}
  .spirale.dessin :is(.toile,.arc,.et){opacity:1 !important}
  .spirale.dessin .arc{stroke-dashoffset:0 !important}
  .toiles tr.en-cours>*{background:none !important;box-shadow:none !important}
}