/* Vitrine · composants du site (mission 05) — fichier À NOUS, jamais celui du design.
   ⚠ Aucune couleur écrite en dur : toute couleur, durée, courbe et inclinaison se
   lit dans les variables --u-* de univers.css (banc B-THEME). Les tailles, rayons,
   marges et graisses sont RECOPIÉS des maquettes (Vitrine - Ecrans / Ordinateur,
   26/09) ; un cas que la maquette ne montre pas prend le comportement le plus
   neutre, et part au rapport. Organisé par composant, dans l'ordre des lots.
   Les ombres noires des maquettes (noir à 45-60 % d opacité) sont traduites en
   --u-bg mélangé au transparent : univers.css ne porte pas de noir. */

/* ───────────────────────────── base ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--u-bg)}
body{margin:0;min-height:100vh;background:var(--u-bg);color:var(--u-ink);font-family:var(--f-text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
main{flex:1 0 auto;outline:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saut{position:absolute;left:8px;top:-60px;z-index:100;height:44px;padding:0 16px;border-radius:22px;background:var(--u-a1);color:var(--u-on);display:flex;align-items:center}
.saut:focus{top:8px}
.donnee{font-family:var(--f-data)}
/* Étiquette de section (« NOUVEAUTÉS », « SON HISTOIRE », « OUTILS ») — D2, D6, M4 */
.etiquette-section{font-family:var(--f-data);font-size:12px;letter-spacing:.12em;color:var(--u-muted);text-transform:uppercase}
@media (max-width:767px){.etiquette-section{font-size:11px}}
/* Motif de trame des surfaces vides (placeholders des maquettes) : silhouette neutre d'une image absente */
.trame{position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(var(--u-line) 1.2px,transparent 1.8px);background-size:6px 6px;pointer-events:none}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}*{scroll-behavior:auto!important}}

/* ───────────────────────────── médias ───────────────────────────── */
.media{position:relative;overflow:hidden;background:var(--u-surface-2);border-radius:inherit}
.media picture,.media img{width:100%;height:100%}
.media img{object-fit:cover}
.media--contenu img{object-fit:contain}
.media--absent{display:flex;align-items:flex-end;justify-content:flex-start;padding:12px}
.media__note{position:relative;font-family:var(--f-data);font-size:10px;color:var(--u-muted)}

/* ───────────────────────────── logo ───────────────────────────── */
.logo{display:flex;align-items:center;gap:10px;min-height:44px}
.logo__barres{display:flex;gap:3px}
.logo__barre{width:10px;height:22px;border-radius:4px;background:var(--u-a1)}
.logo__barre--2{background:var(--u-a2)}
.logo__barre--3{background:var(--u-a3)}
.logo__nom{font-weight:700;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.logo__rayon{color:var(--u-muted);font-weight:500}
/* Téléphone (T1) : les barres prennent les trois accents de l'univers de la page,
   et le nom porte « / rayon ». Ordinateur (D2) : toujours les trois rayons. */
.logo__barres--univers{display:none}
@media (max-width:767px){.logo:has(.logo__barres--univers) .logo__barres--rayons{display:none}.logo__barres--univers{display:flex}}
@media (min-width:768px){.logo__nom{font-size:22px}.logo__rayon{display:none}}

/* ───────────────────────────── barre (D1 · D2 · TB1 · M1 · T1) ───────────────────────────── */
.barre{border-bottom:1px solid var(--u-line);position:relative;z-index:20;background:var(--u-bg)}
.barre__dedans{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px var(--marge) 14px}
.barre__menu{width:44px;height:44px;border-radius:14px;background:var(--u-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none}
.barre__trait{width:18px;height:2px;background:var(--u-ink);border-radius:1px}
.barre__rayons{display:none}
.barre__rayon{height:40px;padding:0 14px;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;white-space:nowrap;color:var(--u-ink)}
.barre__rayon[aria-current="page"]{background:var(--u-surface-2)}
.barre__point{width:8px;height:8px;border-radius:50%;background:var(--u-a1)}
.rond-loupe{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--u-muted);flex:none}
.barre__recherche{display:none;position:relative}
.barre__recherche input{flex:1 1 0%;min-width:0;height:100%;border:0;background:transparent;font-size:14px;outline:none}
.barre__recherche input::placeholder{color:var(--u-muted);opacity:1}
.barre__raccourci{font-family:var(--f-data);font-size:11px;padding:3px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--u-muted);color:var(--u-muted)}
.barre__loupe{display:none;margin-left:auto;width:44px;height:44px;border-radius:14px;background:var(--u-surface);align-items:center;justify-content:center;flex:none}
.barre__compte{display:none;height:44px;padding:0 14px;border-radius:22px;align-items:center;font-size:14px}
.barre__panier{margin-left:auto;height:44px;padding:0 14px;border-radius:22px;background:var(--u-surface);display:flex;align-items:center;font-size:14px;flex:none}
.barre__compteur{font-family:var(--f-data);margin-left:6px}
.barre__compteur:empty{display:none}
@media (min-width:768px){
  .barre__dedans{height:var(--nav-h);gap:18px;padding:0 var(--marge)}
  .barre__menu{display:none}
  .barre__rayons{display:flex;gap:4px;margin-left:12px}
  .barre__loupe{display:flex}
  .barre__compte{display:flex}
  .barre__panier{margin-left:0;padding:0 16px}
}
@media (min-width:1280px){
  .barre__loupe{display:none}
  .barre__recherche{display:flex;flex:1 1 0%;max-width:420px;margin-left:auto;height:44px;border-radius:14px;background:var(--u-surface);align-items:center;gap:10px;padding:0 14px}
}

/* Recherche instantanée (M2), sous le champ de la barre ou de l'accueil */
.instantane{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30}
.instantane:empty{display:none}
.instantane__panneau{border-radius:var(--r-m);background:var(--u-bg);box-shadow:0 20px 60px color-mix(in oklch,var(--u-bg) 70%,transparent),inset 0 0 0 1px var(--u-line);padding:10px;display:flex;flex-direction:column;gap:var(--gap);max-height:70vh;overflow-y:auto}

/* ───────────────────────────── menu mobile (M4) ───────────────────────────── */
.menu{display:none}
.menu:target,.menu[data-ouvert]{display:block;position:fixed;inset:0;z-index:60;background:var(--u-bg);overflow-y:auto;padding:0 14px 40px}
.menu__tete{display:flex;align-items:center;justify-content:space-between;padding:10px 4px 18px}
.menu__tete .logo__nom{display:none}
.menu__fermer{height:44px;padding:0 16px;border-radius:22px;background:var(--u-surface);display:flex;align-items:center;font-size:14px}
.menu__corps{display:flex;flex-direction:column;gap:var(--gap)}
.menu__rayon{min-height:96px;border-radius:var(--r-l);background:var(--u-surface);padding:0 20px;display:flex;align-items:center;gap:16px;box-shadow:inset 4px 0 0 var(--u-a1);color:var(--u-ink)}
.menu__rayon-texte{flex:1 1 0%;display:flex;flex-direction:column}
.menu__rayon-nom{font-weight:700;font-size:24px}
.menu__rayon-accroche{font-size:13px;color:var(--u-muted)}
.menu__fleche{font-size:24px;color:var(--u-a1)}
.menu__corps .etiquette-section{padding:10px 4px 0;font-size:11px}
.menu__outil{height:56px;border-radius:var(--r-m);background:var(--u-surface);display:flex;align-items:center;padding:0 18px;font-size:16px}
.liens-textes{display:flex;gap:16px;padding:14px 4px;font-size:14px;color:var(--u-muted);flex-wrap:wrap}
.liens-textes a{min-height:44px;display:flex;align-items:center}
@media (min-width:768px){.menu:target{display:none}}

/* ───────────────────────────── pied (non dessiné : la rangée de liens de M4) ───────────────────────────── */
.pied{width:100%;padding-top:24px;padding-bottom:24px}

/* ───────────────────────────── tiroir du panier (M3 · D10) ───────────────────────────── */
.tiroir-fond{position:fixed;inset:0;z-index:70;background:color-mix(in oklch,var(--u-bg) 60%,transparent)}
.tiroir{z-index:80;background:var(--u-bg);box-shadow:0 -20px 60px color-mix(in oklch,var(--u-bg) 50%,transparent);padding:10px 14px 24px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.tiroir__poignee{width:44px;height:5px;border-radius:3px;background:var(--u-surface-2);align-self:center;margin-bottom:6px;flex:none}
.tiroir__contenu{display:flex;flex-direction:column;gap:10px;flex:1 0 auto}
@media (min-width:768px){.tiroir{padding:24px 24px 28px}.tiroir__poignee{display:none}}

/* ───────────────────────────── boutons (hauteurs et rayons des maquettes) ───────────────────────────── */
.bouton{min-height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;font-weight:700;font-size:15px;border:0;background:var(--u-surface-2);color:var(--u-ink);text-align:center}
.bouton--accent{background:var(--u-a1);color:var(--u-on)}
.bouton--grand{min-height:56px;border-radius:18px}
.bouton--plein{width:100%}
.bouton[disabled],.bouton[aria-disabled="true"]{background:var(--u-surface-2);color:var(--u-muted);cursor:not-allowed}
.lien-souligne{font-size:12px;color:var(--u-muted);text-decoration:underline;background:none;border:0;padding:0;min-height:24px}

/* ───────────────────────────── états : erreur, 404 (E4) ───────────────────────────── */
.etat-page{padding-top:40px;padding-bottom:40px;max-width:640px}
.bloc-erreur{margin-top:18px;border-radius:var(--r-m);background:var(--u-surface-2);padding:16px;display:flex;flex-direction:column;gap:10px}
.bloc-erreur__titre{font-weight:700;font-size:18px}
.bloc-erreur__texte{font-size:14px;color:var(--u-muted);line-height:1.45}
.bloc-erreur .bouton{min-height:56px;border-radius:18px}

/* ───────────────────────────── images ───────────────────────────── */
.image{display:block;width:100%;height:100%}
.image img{width:100%;height:100%;object-fit:cover}
.image--absente{position:relative;background:var(--u-surface-2);min-height:100%;border-radius:inherit}

/* ───────────────────────────── panier (M3 · D10), tiroir et page ───────────────────────────── */
.panier{display:flex;flex-direction:column;gap:10px}
.page-panier{padding-top:24px;padding-bottom:40px;max-width:560px}
.panier__tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 4px}
.panier__titre{font-weight:700;font-size:24px}
.panier__nb{font-family:var(--f-data);font-size:13px;color:var(--u-muted);margin-left:auto}
.panier__fermer{display:none;height:44px;padding:0 14px;border-radius:22px;background:var(--u-surface);align-items:center;gap:8px;font-size:14px;align-self:center}
.panier__fermer .barre__raccourci{color:var(--u-ink)}
.tiroir .panier__fermer{display:flex}
.tiroir .panier__nb{display:none}
.panier__lignes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ligne-panier{border-radius:var(--r-m);background:var(--u-surface);padding:10px;display:flex;align-items:center;gap:12px}
.ligne-panier__vignette{width:60px;height:72px;border-radius:12px;background:var(--u-surface-2);position:relative;overflow:hidden;box-shadow:inset 3px 0 0 var(--u-a1);flex:none}
.ligne-panier__vignette .image{border-radius:inherit}
.ligne-panier__texte{flex:1 1 0%;min-width:0}
.ligne-panier__nom{font-size:14px;font-weight:600;display:block}
.ligne-panier__detail{font-family:var(--f-data);font-size:11px;color:var(--u-muted)}
.ligne-panier__message{font-size:12px;color:var(--u-muted);margin-top:4px}
.ligne-panier__droite{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ligne-panier__prix{font-family:var(--f-data);font-size:15px;font-weight:800;white-space:nowrap}
.panier__vide{color:var(--u-muted);padding:12px 4px}
.panier__annonce,.panier__erreur{font-size:13px;padding:0 4px}
.panier__erreur{color:var(--u-ink)}
.panier__pied{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:10px}
.panier__total{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px;color:var(--u-muted)}
.panier__montant{font-family:var(--f-data);font-size:22px;font-weight:800;color:var(--u-ink)}
.panier__message{font-size:13px;color:var(--u-muted);text-align:center}
.tiroir .panier__titre{font-size:24px}
@media (min-width:768px){.tiroir .panier__titre{font-size:26px}.tiroir .panier__tete{align-items:center}}

/* ───────────────────────────── vignette (T2 · K2 · F2 · grille D5 · T3) ───────────────────────────── */
/* Ce qui change d'un univers à l'autre, lu dans ses accents (maquettes T2, K2, F2). */
.vignette{--vig-media:var(--u-surface-2);--vig-marche:var(--u-a3);--vig-bouton:var(--u-a1);--vig-bouton-rayon:14px;
  position:relative;display:flex;flex-direction:column;gap:12px;color:var(--u-ink);transition:transform var(--u-dur) var(--u-ease);touch-action:pan-y}
[data-univers="kawaii"].vignette{--vig-media:var(--u-a2);--vig-marche:var(--u-a2);--vig-bouton-rayon:24px}
[data-univers="figurines"].vignette{--vig-media:var(--u-bg);--vig-marche:var(--u-a1);--vig-bouton:var(--u-a3);--vig-bouton-rayon:16px}
.vignette--tuile{width:100%;border-radius:var(--r-l);background:var(--u-surface);padding:12px;transform-style:preserve-3d;box-shadow:0 24px 50px color-mix(in oklch,var(--u-bg) 45%,transparent),inset 0 0 0 1px var(--u-line)}
.vignette__media{position:relative;display:block;border-radius:var(--r-m);overflow:hidden;background:var(--vig-media)}
/* Rapport fixe, comme la maquette (relu dans le source : `aspect-ratio:4/5` sur T2/K2/F2,
   `aspect-ratio:63/88` sur la grille D5/T3, même valeur que .squelette__image) — question 9
   de RAPPORT_MISSION_05 tranchée par la maquette (fondateur, 05/10) : recadrer, pas garder
   le ratio natif du média. */
.vignette--tuile .vignette__media{transform:translateZ(40px);aspect-ratio:4/5}
.vignette--grille .vignette__media{aspect-ratio:63/88}
.vignette__media .image{border-radius:inherit}
.vignette__media .image img{object-fit:cover}
.vignette__survol{position:absolute;inset:0;opacity:0;transition:opacity var(--u-dur) var(--u-ease)}
.vignette:hover .vignette__survol,.vignette:focus-within .vignette__survol{opacity:1}
/* Reflet holo (cartes) : calque qui suit le pointeur, intensité --u-holo */
.vignette__holo{position:absolute;inset:0;border-radius:inherit;opacity:var(--u-holo);mix-blend-mode:color-dodge;pointer-events:none;background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 30%),var(--u-a1) calc(var(--mx,50%) - 10%),var(--u-a2) var(--mx,50%),var(--u-a3) calc(var(--mx,50%) + 10%),transparent calc(var(--mx,50%) + 30%))}
[data-univers="kawaii"] .vignette__holo{mix-blend-mode:soft-light;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),var(--u-ink),transparent 45%)}
/* Projecteur et chrome (figurines) : --u-spot et --u-chrome valent 0 ailleurs */
.vignette__projecteur{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--u-spot);background:radial-gradient(circle at var(--mx,50%) var(--my,38%),color-mix(in oklch,var(--u-a1) 75%,transparent),color-mix(in oklch,var(--u-a2) 45%,transparent) 28%,transparent 62%)}
.vignette__chrome{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--u-chrome);mix-blend-mode:overlay;background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 28%),var(--u-a3) calc(var(--mx,50%) - 5%),var(--u-muted) var(--mx,50%),var(--u-a3) calc(var(--mx,50%) + 6%),transparent calc(var(--mx,50%) + 28%))}
@media (prefers-reduced-motion:reduce){.vignette__projecteur{--mx:50%;--my:38%}}
.vignette__badges{position:absolute;top:10px;right:10px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.badge{font-family:var(--f-data);font-size:10px;font-weight:800;padding:4px 6px;border-radius:6px;background:var(--u-a1);color:var(--u-on);text-transform:uppercase}
.badge--1{background:var(--u-a3)}
[data-univers="kawaii"] .badge{font-family:var(--f-text);font-size:12px;font-weight:600;padding:5px 10px;border-radius:12px;text-transform:none;background:var(--u-a1)}
[data-univers="figurines"] .badge{font-size:11px;font-weight:600;padding:5px 8px}
[data-univers="figurines"] .vignette__badges{right:auto;left:12px;top:12px;justify-content:flex-start}
.vignette__nom{font-size:17px;font-weight:700;margin:0}
.vignette__sous-titre{font-family:var(--f-data);font-size:11px;color:var(--u-muted)}
.vignette__rarete{margin:0;font-family:var(--f-data);font-size:11px;font-weight:700;color:inherit}
.vignette--grille .vignette__rarete{font-size:10px}
.vignette__prix-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.vignette__prix-bloc{display:flex;flex-direction:column}
.vignette__prix{font-family:var(--f-data);font-size:24px;font-weight:800}
.vignette__marche{font-family:var(--f-data);font-size:11px;color:var(--vig-marche)}
.vignette__fictive{color:var(--u-muted)}
.mini-courbe{flex:none;width:80px;height:28px;overflow:visible}
.mini-courbe polyline{stroke:var(--vig-marche);stroke-width:1.6;vector-effect:non-scaling-stroke}
.vignette__form{display:flex}
.vignette__action{width:100%;min-height:48px;border-radius:var(--vig-bouton-rayon);background:var(--vig-bouton);color:var(--u-on)}
span.vignette__action{background:var(--u-surface-2);color:var(--u-muted)}
/* Grille (D5 · T3) : compacte, sans bouton */
.vignette--grille{gap:6px}
.vignette--grille .vignette__media{border-radius:10px}
.vignette--grille .vignette__badges{right:auto;left:6px;top:6px;gap:3px;justify-content:flex-start}
.vignette--grille .badge{font-size:9px;padding:3px 5px;border-radius:5px}
.vignette--grille .vignette__nom{font-size:13px;font-weight:600;line-height:1.2}
.vignette--grille .vignette__sous-titre{font-size:10px}
.vignette--grille .vignette__prix-bloc{flex-direction:row;gap:6px;align-items:baseline;font-family:var(--f-data)}
.vignette--grille .vignette__prix{font-size:15px}

/* ───────────────────────────── bento et tuiles (M1 · D1 · TB1 · D0 · T1 · D2-D4) ───────────────────────────── */
/* Portées des tuiles, par les variables de layout.css (--s mobile, --s-t tablette, --s-d ordinateur, --r-d rangs) */
.page-accueil,.page-univers{padding-top:10px;padding-bottom:40px;display:flex;flex-direction:column;gap:24px}
@media (min-width:768px){.page-accueil,.page-univers{padding-top:20px}}
@media (min-width:1280px){.page-accueil,.page-univers{padding-top:32px}}
.tuile--recit{--s:2;--s-t:8;--s-d:8;--r-t:2;--r-d:2}
.tuile--chasser{--s:2;--s-t:8;--s-d:4}
.tuile--rayon{--s:1;--s-t:4;--s-d:4}
.tuile--rayon-3{--s:2}
.tuile--arrivage,.tuile--serie,.tuile--chiffre{--s:2;--s-t:4;--s-d:4}
.tuile--deck,.tuile--collection{--s:1;--s-t:4;--s-d:2}
.tuile--chasse{--s:2;--s-t:8;--s-d:4}
/* ⚠ D-6 : une tuile absente ne laisse pas de trou — la dernière tuile va jusqu'au bout de sa rangée */
.bento > :last-child{grid-column-end:-1}
.tuile{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--u-surface);color:var(--u-ink);display:flex;flex-direction:column;justify-content:space-between;padding:16px;min-height:120px}
@media (min-width:768px){.tuile{padding:24px}}
.tuile__trame{background-size:7px 7px}
.tuile__haut{position:relative;display:flex;justify-content:space-between;align-items:center}
.tuile__barre{width:28px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--u-a1),var(--u-a2),var(--u-a3))}
.tuile__fleche{font-size:22px;display:none}
.tuile__bas{position:relative;display:flex;flex-direction:column}
.tuile__titre{font-weight:700;font-size:20px;letter-spacing:-.02em}
.tuile__sous-titre{font-size:13px;color:var(--u-muted)}
@media (min-width:768px){.tuile__barre{width:36px;height:8px;border-radius:4px}.tuile__fleche{display:block}.tuile__titre{font-size:30px}.tuile__sous-titre{font-size:15px}}
/* Rayons : Cartes (surface et trame), Kawaii (aplat d'accent), Figurines (lueur) — D1, M1.
   Hauteur FIXE (pas un minimum) comme la maquette (160px sur M1) : une accroche réelle plus
   longue que l'exemple de la maquette se tronque (3 lignes), elle ne pousse plus la tuile —
   disposition tranchée par la maquette (fondateur, 05/10). */
.tuile--rayon{height:160px}
.tuile--rayon .tuile__sous-titre{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tuile--rayon[data-univers="kawaii"]{background:var(--u-a1);color:var(--u-on)}
.tuile--rayon[data-univers="kawaii"] .tuile__sous-titre{color:var(--u-on)}
.tuile--rayon[data-univers="kawaii"] .tuile__trame{display:none}
.tuile--rayon[data-univers="figurines"] .tuile__trame{display:none}
.tuile__lueur{position:absolute;inset:0;pointer-events:none;opacity:var(--u-spot);background:radial-gradient(circle at 85% 40%,color-mix(in oklch,var(--u-a1) 60%,transparent),color-mix(in oklch,var(--u-a2) 35%,transparent) 25%,transparent 55%)}
.tuile--rayon[data-univers="tcg"]:hover,.tuile--rayon[data-univers="tcg"]:focus-visible{box-shadow:inset 0 0 0 2px var(--u-a1)}
.tuile--rayon-3{height:120px}
.tuile--rayon-3 .tuile__sous-titre{-webkit-line-clamp:2}
@media (min-width:768px){.tuile--rayon,.tuile--rayon-3{height:auto;min-height:0}.tuile--rayon .tuile__sous-titre,.tuile--rayon-3 .tuile__sous-titre{-webkit-line-clamp:4}}
/* Récit de tête */
.tuile--recit{min-height:380px;padding:0;justify-content:flex-end;transform-style:preserve-3d;transition:transform var(--u-dur) var(--u-ease);touch-action:pan-y;view-transition-name:recit-tete}
@media (min-width:768px){.tuile--recit{min-height:0}}
.tuile__couverture{position:absolute;inset:0}
.tuile__couverture .image img{object-fit:cover}
.tuile__projecteur{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--u-spot);background:radial-gradient(circle at var(--mx,50%) var(--my,38%),color-mix(in oklch,var(--u-a1) 75%,transparent),color-mix(in oklch,var(--u-a2) 45%,transparent) 28%,transparent 62%);z-index:1;mix-blend-mode:screen}
.tuile__voile{position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,var(--u-bg))}
.tuile__texte{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px}
.tuile__surtitre{font-family:var(--f-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--u-a1)}
.tuile__titre-recit{font-weight:700;font-size:30px;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.tuile__meta{font-size:16px;color:var(--u-muted)}
/* M1 ne montre pas la ligne « chapitres · durée » sur téléphone ; T1 et F1 la montrent. */
@media (max-width:767px){.bento--accueil .tuile--recit .tuile__meta{display:none}}
@media (min-width:768px){.tuile__texte{padding:0 36px 34px;gap:12px;max-width:62%}.tuile__surtitre{font-size:12px}.tuile__titre-recit{font-size:52px;line-height:1;letter-spacing:-.03em}}
/* Champ « Chasser » de l'accueil (M1) */
.tuile--chasser{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:56px;height:56px;padding:0 18px;border-radius:var(--r-m);overflow:visible;z-index:5}
.tuile--chasser input{flex:1 1 0%;min-width:0;border:0;background:transparent;font-size:15px;outline:none;height:100%}
.tuile--chasser input::placeholder{color:var(--u-muted);opacity:1}
.rond-loupe--grand{width:16px;height:16px}
@media (min-width:768px){.page-accueil .tuile--chasser{display:none}}
/* Arrivage à venir (D1, proposition du design) */
.tuile--arrivage{box-shadow:inset 0 0 0 1px var(--u-line)}
.tuile__etiquette{position:relative;font-family:var(--f-data);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tuile--arrivage .tuile__etiquette{color:var(--u-a2)}
.tuile__compte{font-family:var(--f-data);font-size:44px;font-weight:800}
/* Nouvelle série (D1) */
.tuile--serie{background:var(--u-a2);color:var(--u-on)}
.tuile--serie .tuile__etiquette{font-weight:600}
.tuile--serie .tuile__titre{line-height:1.05}
.tuile__prix{font-family:var(--f-data);font-size:15px;font-weight:800}
/* Rangée « Nouveautés » (D2, D3, D4, M1) */
.rangee{display:flex;flex-direction:column;gap:16px}
.rangee__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
@media (min-width:768px){.rangee__grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (max-width:767px){.rangee__grille .vignette--tuile{padding:8px;gap:8px}.rangee__grille .vignette__prix{font-size:18px}.rangee__grille .mini-courbe{display:none}.rangee__grille .vignette__nom{font-size:14px}}

/* ───────────────────────────── univers : chasse, deck, collection, chiffres (T1 · D2 · K1 · D3 · F1 · D4) ───────────────────────────── */
.tuile--chasse{justify-content:flex-start;gap:14px;box-shadow:inset 0 0 0 1px var(--u-a1);overflow:visible;z-index:5}
.tuile__etiquette--discrete{color:var(--u-muted)}
.champ-chasse{position:relative;height:52px;border-radius:14px;background:var(--u-bg);display:flex;align-items:center;gap:10px;padding:0 14px}
.champ-chasse__invite{font-family:var(--f-data);color:var(--u-a1)}
.champ-chasse input{flex:1 1 0%;min-width:0;height:100%;border:0;background:transparent;font-size:15px;outline:none}
.champ-chasse input::placeholder{color:var(--u-muted);opacity:1}
[data-univers="kawaii"] .champ-chasse{border-radius:28px}
.puces{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:767px){.puces{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}
.puce{flex:0 0 auto;min-height:40px;padding:0 12px;border-radius:12px;background:var(--u-surface-2);display:flex;align-items:center;gap:8px;font-family:var(--f-data);font-size:12px}
.tuile--deck{background:var(--u-a1);color:var(--u-on);min-height:150px}
.tuile--collection{min-height:150px}
.tuile__chiffre{font-family:var(--f-data);font-size:30px;font-weight:800;line-height:1}
.tuile__legende{font-size:13px;font-weight:500}
@media (min-width:768px){.tuile__chiffre{font-size:44px}.tuile__legende{font-size:15px}}
.tuile--chiffre{min-height:150px}
.tuile--chiffre .tuile__etiquette,.tuile--deck .tuile__etiquette{font-weight:600}
/* T1 (téléphone) écrit « Coller une liste de deck » en titre (700, 19 px) ; D2 (ordinateur) en chiffre. */
@media (max-width:767px){.tuile--deck .tuile__bas{display:block}.tuile--deck .tuile__chiffre,.tuile--deck .tuile__legende{display:inline;font-family:var(--f-text);font-size:19px;font-weight:700;line-height:1.1}.tuile--deck .tuile__chiffre::after{content:" "}}
.tuile--secrete{background:var(--u-a2);color:var(--u-on)}
.tuile--ma-serie{background:var(--u-a3);color:var(--u-on)}
.tuile--precommande{background:var(--u-a1);color:var(--u-on)}
.tuile--chiffre-cle{background:var(--u-a2);color:var(--u-on)}
/* K1, F1 : le champ de recherche est sur téléphone seulement (D3, D4 n'ont pas de tuile de chasse) */
@media (max-width:767px){.tuile--chasse-mobile{box-shadow:none;background:transparent;padding:0;min-height:0}.tuile--chasse-mobile .tuile__etiquette{display:none}.tuile--chasse-mobile .champ-chasse{background:var(--u-surface);height:56px}}
@media (min-width:768px){.tuile--chasse-mobile{display:none}}

/* ───────────────────────────── chasse : facettes et grille (T3 · T3b · D5 · E1) ───────────────────────────── */
.page-chasse{padding-top:14px;padding-bottom:110px;display:flex;flex-direction:column;gap:10px}
@media (min-width:1280px){.page-chasse{padding-top:28px;padding-bottom:40px}}
.champ-chasse--page{background:var(--u-surface);border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--u-a1)}
@media (min-width:1280px){.champ-chasse--page{display:none}}
.chasse{position:relative}
/* Facettes : tiroir (#filtres, bas de l'écran) sous 1280, colonne fixe dès 1280 (layout.css) */
.facettes{display:none}
.facettes:target{display:block;position:fixed;inset:auto 0 0 0;max-height:85vh;overflow-y:auto;z-index:60;background:var(--u-bg);border-radius:32px 32px 0 0;box-shadow:0 -20px 60px color-mix(in oklch,var(--u-bg) 50%,transparent);padding:10px 14px 24px}
@media (min-width:1280px){.facettes,.facettes:target{display:block;position:sticky;top:calc(var(--nav-h) + 24px);inset:auto;max-height:none;overflow:visible;z-index:auto;box-shadow:none;border-radius:var(--r-l);background:var(--u-surface);padding:20px}}
#form-filtres{display:flex;flex-direction:column;gap:18px}
@media (min-width:1280px){#form-filtres{gap:22px}}
.facettes__tete{display:flex;justify-content:space-between;align-items:baseline}
.facettes__titre{font-weight:700;font-size:24px}
.facettes__effacer{font-size:14px;color:var(--u-muted);text-decoration:underline;min-height:44px;display:flex;align-items:center}
@media (min-width:1280px){.facettes__titre{font-size:20px}.facettes__effacer{font-size:13px;min-height:24px}}
.facette{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.estimation{max-width:720px;margin:0 auto;padding:24px 16px 64px;display:flex;flex-direction:column;gap:20px}
.estimation__choix{display:flex;flex-direction:column;gap:8px}
.estimation__choix .option{height:auto;min-height:48px;padding:10px 14px}
.estimation__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.estimation__liste li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.estimation__carte{display:flex;gap:12px;align-items:center}
.estimation__carte img{width:64px;height:auto;border-radius:8px}
.estimation__detail,.estimation__mention{font-size:14px;color:var(--u-muted)}
.estimation__resultat{font-size:22px;font-weight:700;line-height:1.3}
.estimation__actions{display:flex;gap:12px;flex-wrap:wrap}
.facette--sous{margin-top:4px;padding-left:12px;border-left:2px solid var(--u-line)}
.facette__titre{font-family:var(--f-data);font-size:11px;letter-spacing:.1em;color:var(--u-muted);text-transform:uppercase;padding:0}
@media (min-width:1280px){.facette__titre{font-size:12px;letter-spacing:.12em}}
.facette__titre.facette__titre--sous{text-transform:none;letter-spacing:0;font-size:12px}
.facette__valeurs{display:flex;gap:6px;flex-wrap:wrap}
@media (min-width:1280px){.facette__valeurs{flex-direction:column;gap:0}}
/* Une option : puce sous 1280 (T3b), case à cocher dès 1280 (D5) — la MÊME case HTML */
.option{position:relative;min-height:40px;padding:0 12px;border-radius:12px;background:var(--u-surface);display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.option input{position:absolute;opacity:0;width:1px;height:1px}
.option__case{display:none}
.option__nb{font-family:var(--f-data);font-size:11px;color:var(--u-muted)}
.option--choisie,.option:has(input:checked){background:var(--u-a1);color:var(--u-on);font-weight:600}
.option--choisie .option__nb,.option:has(input:checked) .option__nb{color:var(--u-on)}
.option:has(input:focus-visible){outline:2px solid var(--u-a1);outline-offset:3px}
@media (min-width:1280px){
  .option{min-height:32px;padding:0;background:none;border-radius:0;gap:10px}
  .option--choisie,.option:has(input:checked){background:none;color:var(--u-ink);font-weight:400}
  .option__case{display:flex;flex:0 0 auto;width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--u-muted);align-items:center;justify-content:center;color:var(--u-on);font-size:13px;font-weight:800}
  .option--choisie .option__case,.option:has(input:checked) .option__case{background:var(--u-a1);box-shadow:none}
  .option--choisie .option__case::after,.option:has(input:checked) .option__case::after{content:"✓"}
  .option__libelle{flex:1 1 0%}
  .option__nb,.option--choisie .option__nb,.option:has(input:checked) .option__nb{font-size:12px;color:var(--u-muted)}
}
.facettes__pied{position:sticky;bottom:0;padding-top:6px;background:var(--u-bg)}
@media (min-width:1280px){.facettes__pied{display:none}}
/* Résultats */
.resultats{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:1280px){.resultats{gap:18px}}
.resultats__tete{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.resultats__titre{font-weight:700;font-size:28px;letter-spacing:-.02em;margin-right:8px;display:none}
@media (min-width:1280px){.resultats__titre{display:block}.resultats__tete{gap:10px}}
.puce--active{background:var(--u-a1);color:var(--u-on);font-weight:600;min-height:36px;padding:0 10px 0 12px;border-radius:10px}
@media (min-width:1280px){.puce--active{min-height:40px;padding:0 12px;border-radius:12px}}
.resultats__nb{margin-left:auto;font-family:var(--f-data);font-size:13px;color:var(--u-muted)}
.resultats__tri{min-height:40px;padding:0 14px;border-radius:12px;background:var(--u-surface);border:0;font-size:14px;color:var(--u-ink)}
@media (max-width:1279px){.resultats__tri{position:absolute;opacity:0;pointer-events:none;width:1px}}
.grille{align-items:start}
@media (min-width:1280px){.grille{row-gap:22px}}
.suite{grid-column:1 / -1;display:flex;justify-content:center;padding:6px 0;font-family:var(--f-data);font-size:12px;color:var(--u-muted);min-height:44px;align-items:center;text-decoration:underline}
/* v0.1.16 : pendant le chargement de la suite, le lien (son propre indicateur, `_suite.html`)
   s'estompe ; la grille reste affichée — les squelettes ci-dessous ne valent que pour un
   changement de filtre (requête de `#chasse`). */
.suite.htmx-request{opacity:.5;text-decoration:none;cursor:progress;pointer-events:none}
/* Barre du bas (T3) : Filtres et Trier, sous 1280 */
.barre-chasse{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 14px 24px;background:var(--u-bg);box-shadow:0 -1px 0 var(--u-line);display:flex;gap:8px}
.barre-chasse__bouton{flex:1 1 0%;background:var(--u-surface-2);min-height:56px;border-radius:18px}
.barre-chasse__nb{font-family:var(--f-data);margin-left:8px;color:var(--u-a1)}
@media (min-width:1280px){.barre-chasse{display:none}}
/* Zéro résultat (E1) */
.zero{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.zero__titre{font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1.1;padding:0 4px 8px}
.zero__texte{font-size:15px;color:var(--u-muted);padding:0 4px 10px}
.zero__liste{display:flex;flex-direction:column;gap:8px}
.zero__ligne{min-height:56px;border-radius:var(--r-s);background:var(--u-surface);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px}
.zero__action{font-size:15px;font-weight:600}
.zero__nb{font-family:var(--f-data);font-size:13px;color:var(--u-a3)}
.zero__partout{min-height:52px;border-radius:16px;font-weight:600;margin-top:6px}
@media (min-width:1280px){.zero{max-width:640px}}
/* Chargement (E4, squelettes) : visibles pendant une requête HTMX, mêmes rapports d'aspect */
.squelettes{display:none;grid-template-columns:1fr 1fr;gap:14px 10px;opacity:.5}
.htmx-request .squelettes{display:grid}
.htmx-request .grille,.htmx-request .zero{display:none}
.squelette{display:flex;flex-direction:column;gap:6px}
.squelette__image{aspect-ratio:63 / 88;border-radius:10px;background:var(--u-surface)}
.squelette__barre{height:12px;width:70%;border-radius:6px;background:var(--u-surface)}
.squelette__barre--courte{width:40%}
@media (min-width:768px){.squelettes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.squelettes{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Reflet holo visible au repos (intensité --u-holo), comme la maquette le dessine —
   question 3 de RAPPORT_MISSION_05 tranchée par la maquette (fondateur, 05/10) : la règle
   `.vignette__holo{opacity:var(--u-holo)}` (ligne ~184) s'applique donc sans être remise à
   zéro ici (l'ancienne règle « survol seulement » est retirée). */

/* ───────────────────────────── fiche (T4 · D6 · TB2 · K5 · F3 · D7 · K3 · D8 · E2) ───────────────────────────── */
/* ⚠ B-BARRE : sur téléphone, la barre d achat est fixe en bas ; la page réserve sa
   hauteur (bouton 56 + 12 + 24 de marges) PLUS la zone sûre : rien n est masqué. */
:root{--barre-achat:calc(56px + 12px + 24px + env(safe-area-inset-bottom,0px))}
.page-fiche{padding-top:14px;padding-bottom:calc(var(--barre-achat) + 24px)}
@media (min-width:768px){.page-fiche{padding-top:28px;padding-bottom:48px}}
.fiche__medias,.fiche__achat{min-width:0}
.fiche__achat{display:flex;flex-direction:column;gap:var(--gutter)}
@media (min-width:768px){.fiche__achat{gap:12px}}
/* Médias */
.medias{position:relative;display:flex;flex-direction:column;gap:12px}
.medias__choix{position:absolute;opacity:0;width:1px;height:1px}
.medias__photos{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.medias__vignettes{display:none}
@media (min-width:1280px){.medias__photos:has(.medias__vignettes){grid-template-columns:96px minmax(0,1fr)}.medias__vignettes{display:flex;flex-direction:column;gap:10px}}
.medias__vignette{position:relative;display:block;aspect-ratio:63 / 88;border-radius:10px;background:var(--u-surface-2);overflow:hidden;cursor:pointer}
.medias__vignette .image img{object-fit:cover}
.medias__legende{position:absolute;left:6px;bottom:6px;font-family:var(--f-data);font-size:9px;color:var(--u-muted)}
.medias__scene{position:relative;border-radius:var(--r-l);background:var(--u-surface);display:flex;align-items:center;justify-content:center;padding:16px;min-height:290px;overflow:hidden}
@media (min-width:1280px){.medias__scene{min-height:560px;padding:50px}}
.medias__scene .trame{background-size:7px 7px}
.medias__vue{display:none;position:relative;max-width:100%;border-radius:12px;overflow:hidden;box-shadow:0 20px 36px color-mix(in oklch,var(--u-bg) 50%,transparent);transition:transform var(--u-dur) var(--u-ease);touch-action:pan-y}
@media (min-width:1280px){.medias__vue{border-radius:18px;box-shadow:0 30px 60px color-mix(in oklch,var(--u-bg) 50%,transparent)}}
.medias__vue .image img{width:auto;max-width:100%;max-height:60vh;height:auto;object-fit:contain}
@media (min-width:1280px){.medias__vue .image img{max-height:620px}}
/* T4 (375 px) : relevé dans l'outerHTML du cadre « T4 Fiche carte » — la carte occupe une
   boîte FIXE (height:258px;aspect-ratio:63/88), PAS la règle générique ci-dessus
   (max-height:60vh ≈ 468px à cette largeur, bien plus grande — c'est elle qui gonflait
   toute la scène et poussait « VALEUR DE MARCHÉ »/ÉTAT/VARIANTE hors du cadre de mesure).
   `.medias__vue--carte` existe déjà dans `_fiche_medias.html` (posé par `est_carte`, pour
   CE cas précisément) mais n'avait encore AUCUNE règle CSS. Même ratio que les vignettes
   grille (D5/T3, déjà porté) — étendu ici à la scène de la fiche carte. Desktop (D6, grille
   `96px/1fr`, `aspect-ratio:63/88` SANS hauteur fixe) non touché : mécanisme différent, hors
   mandat de cette passe. */
@media (max-width:767.98px){
  .medias__vue--carte{height:258px;aspect-ratio:63/88}
  .medias__vue--carte .image img{width:100%;height:100%;max-height:none;object-fit:cover}
}
.medias__vue--1{display:block}
.medias__photos:has(.medias__choix:checked) .medias__vue{display:none}
#photo-1:checked ~ .medias__scene .medias__vue--1,#photo-2:checked ~ .medias__scene .medias__vue--2,#photo-3:checked ~ .medias__scene .medias__vue--3,#photo-4:checked ~ .medias__scene .medias__vue--4,#photo-5:checked ~ .medias__scene .medias__vue--5,#photo-6:checked ~ .medias__scene .medias__vue--6,#photo-7:checked ~ .medias__scene .medias__vue--7,#photo-8:checked ~ .medias__scene .medias__vue--8{display:block}
#photo-1:checked ~ .medias__vignettes [for="photo-1"],#photo-2:checked ~ .medias__vignettes [for="photo-2"],#photo-3:checked ~ .medias__vignettes [for="photo-3"],#photo-4:checked ~ .medias__vignettes [for="photo-4"],#photo-5:checked ~ .medias__vignettes [for="photo-5"],#photo-6:checked ~ .medias__vignettes [for="photo-6"],#photo-7:checked ~ .medias__vignettes [for="photo-7"],#photo-8:checked ~ .medias__vignettes [for="photo-8"]{outline:2px solid var(--u-a1);outline-offset:3px}
.medias__photos:has(.medias__choix:focus-visible) .medias__scene{outline:2px solid var(--u-a1);outline-offset:3px}
.fiche__holo{position:absolute;inset:0;border-radius:inherit;opacity:var(--u-holo);mix-blend-mode:color-dodge;pointer-events:none;background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 30%),var(--u-a1) calc(var(--mx,50%) - 10%),var(--u-a2) var(--mx,50%),var(--u-a3) calc(var(--mx,50%) + 10%),transparent calc(var(--mx,50%) + 30%))}
.medias__points{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:6px}
/* K5 (relevé dans l'outerHTML du cadre « K5 Fiche article kawaii ») : le mécanisme
   actif/inactif est LARGEUR + OPACITÉ, jamais un changement de couleur (point actif 20px
   opacité 1, les autres 8px opacité .35, MÊME couleur dans les deux états) — généralisé
   ici à tous les univers. La COULEUR, elle, reste `--u-ink` par défaut (visible sur le
   fond neutre `--u-surface` par défaut de la scène) ; K5 lit `--u-on` (sombre) parce que
   SA scène est un aplat d'accent VIF (`--u-a2`, § genere-vitrine.css) où `--u-ink` clair
   serait illisible — contraste inversé selon le fond, pas une préférence arbitraire :
   l'override `--u-on` est donc scopé à kawaii, à côté de l'aplat d'accent lui-même,
   jamais ici en général (romprait le contraste des fiches à fond neutre). */
.medias__point{width:8px;height:8px;border-radius:4px;background:var(--u-ink);opacity:.35;cursor:pointer;transition:width var(--u-dur) var(--u-ease),opacity var(--u-dur) var(--u-ease)}
@media (min-width:1280px){.medias__points{display:none}}
#photo-1:checked ~ .medias__scene [for="photo-1"],#photo-2:checked ~ .medias__scene [for="photo-2"],#photo-3:checked ~ .medias__scene [for="photo-3"],#photo-4:checked ~ .medias__scene [for="photo-4"],#photo-5:checked ~ .medias__scene [for="photo-5"],#photo-6:checked ~ .medias__scene [for="photo-6"],#photo-7:checked ~ .medias__scene [for="photo-7"],#photo-8:checked ~ .medias__scene [for="photo-8"]{width:20px;opacity:1}
/* Onglets 3D / 360 / vidéo / photos (F3 · D7) */
.medias__stage{border-radius:var(--r-l);background:var(--u-surface);min-height:290px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
@media (min-width:1280px){.medias__stage{min-height:560px}}
.modele3d,.sequence{position:relative;width:100%;height:100%;min-height:290px;display:flex;align-items:center;justify-content:center}
@media (min-width:1280px){.modele3d,.sequence{min-height:560px}}
.modele3d .image{position:absolute;inset:0}
.modele3d .image img{object-fit:contain}
.modele3d__visionneuse{position:absolute;inset:0;width:100%;height:100%;background:var(--u-surface)}
.sequence{cursor:grab;touch-action:pan-y}
.sequence__vue img{max-height:60vh;width:auto}
.video{width:100%;max-height:70vh;display:block;background:var(--u-bg)}
.medias__onglets{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-family:var(--f-data);font-size:13px}
.onglet{min-height:44px;padding:0 16px;border-radius:12px;background:var(--u-surface-2);border:0;font-family:var(--f-data);font-size:13px;color:var(--u-ink)}
.onglet[aria-pressed="true"]{background:var(--u-a1);color:var(--u-on);font-weight:600}
.medias__aide{margin-left:auto;color:var(--u-muted);font-size:12px}
/* Achat : en-tête */
.fiche__entete{display:flex;flex-direction:column;gap:6px;border-radius:var(--r-m);background:var(--u-surface);padding:14px 16px}
@media (min-width:768px){.fiche__entete{background:none;padding:0}}
.fiche__titre{font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1.1}
@media (min-width:768px){.fiche__titre{font-size:40px;letter-spacing:-.02em;line-height:1}}
.fiche__sous-titre{font-family:var(--f-data);font-size:11px;color:var(--u-muted);text-transform:uppercase}
@media (min-width:768px){.fiche__sous-titre{font-size:13px}}
.fiche__badges{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
/* Précommande (D7 : aplat --u-a2) */
.precommande{border-radius:var(--r-m);background:var(--u-a2);color:var(--u-on);padding:18px;display:flex;flex-direction:column;gap:4px}
.precommande__etiquette{font-family:var(--f-data);font-size:11px;font-weight:600;text-transform:uppercase}
.precommande__date{font-size:24px;font-weight:700}
/* Valeur de marché */
.valeur{border-radius:var(--r-m);background:var(--u-surface);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.valeur__tete{display:flex;justify-content:space-between;align-items:center}
.valeur__periodes{display:flex;gap:4px;font-family:var(--f-data);font-size:11px}
.valeur__periode{padding:6px 10px;border-radius:8px;background:var(--u-surface-2);color:var(--u-muted);cursor:pointer;min-height:24px}
.valeur__choix:checked + .valeur__periode{background:var(--u-a1);color:var(--u-on);font-weight:600}
.valeur__choix:focus-visible + .valeur__periode{outline:2px solid var(--u-a1);outline-offset:3px}
.valeur__ligne{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.valeur__montant{font-family:var(--f-data);font-size:28px;font-weight:800;color:var(--u-a3)}
.valeur__variation{font-family:var(--f-data);font-size:13px;color:var(--u-a3)}
.valeur__prix{font-family:var(--f-data);font-size:13px;color:var(--u-muted);margin-left:auto}
.valeur__courbe{width:100%;height:40px;overflow:visible}
.valeur__courbe polyline{stroke:var(--u-a1);stroke-width:1.6;vector-effect:non-scaling-stroke}
.valeur__courbe--90{display:none}
.valeur:has(#periode-90:checked) .valeur__courbe--90{display:block}
.valeur:has(#periode-90:checked) .valeur__courbe--30{display:none}
.valeur__source{font-family:var(--f-data);font-size:11px;color:var(--u-muted)}
[data-univers="kawaii"] .valeur__montant,[data-univers="kawaii"] .valeur__variation{color:var(--u-a2)}
[data-univers="figurines"] .valeur__montant,[data-univers="figurines"] .valeur__variation{color:var(--u-a1)}
/* Tuiles État / Variante / Chance / Ma collection */
.fiche__tuiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fiche__tuiles:empty{display:none}
.fiche-tuile{min-height:84px;border-radius:var(--r-m);background:var(--u-surface);color:var(--u-ink);padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.fiche-tuile--large{grid-column:span 2}
.fiche-tuile__etiquette{font-family:var(--f-data);font-size:10px;font-weight:600;text-transform:uppercase;display:block}
.fiche-tuile__valeur{font-size:17px;font-weight:700;line-height:1.15}
.fiche-tuile--etat{background:var(--u-a3);color:var(--u-on)}
.fiche-tuile--variante{background:var(--u-a2);color:var(--u-on)}
.fiche-tuile--chance{background:var(--u-a3);color:var(--u-on)}
.fiche-tuile--collection .fiche-tuile__etiquette{color:var(--u-muted)}
/* Bloc d achat : prix, stock, bouton ; barre fixe sur téléphone */
.achat{border-radius:var(--r-m);background:var(--u-surface);padding:18px;display:flex;flex-direction:column;gap:12px}
.achat__ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.achat__prix{font-family:var(--f-data);font-size:36px;font-weight:800}
.achat__stock{font-size:14px;color:var(--u-muted);text-align:right}
[data-univers="kawaii"] .achat__stock{color:var(--u-a2)}
.achat__bouton{background:var(--u-a1);color:var(--u-on);justify-content:center}
[data-univers="figurines"] .achat__bouton{background:var(--u-a3)}
span.achat__bouton{background:var(--u-surface-2);color:var(--u-muted)}
.achat__prix-barre{display:none;font-family:var(--f-data);font-weight:800}
.achat__promesse{font-size:13px;color:var(--u-muted)}
@media (max-width:767px){
  .achat__barre{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 14px calc(24px + env(safe-area-inset-bottom,0px));background:var(--u-bg);box-shadow:0 -1px 0 var(--u-line)}
  .achat__bouton{justify-content:space-between;padding:0 20px}
  .achat__prix-barre{display:inline}
  .achat{background:none;padding:0}
  .achat__ligne{display:none}
}
/* Boîte surprise : offres (D8) */
.offres{border:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border-radius:var(--r-m);background:var(--u-surface)}
.offre{border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.offre:has(input:checked){background:var(--u-a1);color:var(--u-on)}
.offre:has(input:focus-visible){outline:2px solid var(--u-a1);outline-offset:3px}
.offre__nom{font-weight:700;font-size:17px}
.offre__detail{font-family:var(--f-data);font-size:15px;color:var(--u-muted)}
.offre:has(input:checked) .offre__detail{font-weight:800;color:var(--u-on)}
.offre--epuisee{cursor:not-allowed;opacity:.6}
.achat--boite{background:none;padding:0}
@media (min-width:768px){.achat--boite .achat__ligne,.achat--boite .achat__barre{background:var(--u-surface)}.achat--boite .achat__ligne{border-radius:var(--r-m) var(--r-m) 0 0;padding:18px 18px 0}.achat--boite .achat__barre{border-radius:0 0 var(--r-m) var(--r-m);padding:12px 18px 18px;margin-top:-12px}}
/* La scène de la boîte (K3 · D8) : couvercle et corps de la maquette */
.boite{position:relative;height:250px;border-radius:var(--r-l);background:var(--u-surface-2);overflow:hidden}
@media (min-width:768px){.boite{height:600px}}
.boite .trame{background-size:10px 10px}
.boite__corps{position:absolute;left:50%;top:44%;width:160px;height:120px;margin-left:-80px;border-radius:0 0 24px 24px;background:var(--u-a1);overflow:hidden;box-shadow:0 20px 30px color-mix(in oklch,var(--u-bg) 30%,transparent)}
.boite__corps .image{opacity:.9}
.boite__couvercle{position:absolute;left:50%;top:calc(44% - 20px);width:174px;height:30px;margin-left:-87px;border-radius:14px;background:var(--u-a1);filter:brightness(1.08);transform-origin:10% 100%;transition:transform var(--u-dur) var(--u-ease)}
.boite__figurine{position:absolute;left:50%;top:calc(44% - 70px);width:84px;height:100px;margin-left:-42px;border-radius:42px 42px 16px 16px;background:var(--u-a2);opacity:0;transform:translateY(10px) scale(.6);transition:transform var(--u-dur) var(--u-ease),opacity var(--u-dur) var(--u-ease)}
.boite[data-ouverte="true"] .boite__couvercle{transform:translateY(-70px) rotate(-14deg)}
.boite[data-ouverte="true"] .boite__figurine{opacity:1;transform:translateY(-30px) scale(1)}
@media (min-width:768px){.boite__corps{width:280px;height:190px;margin-left:-140px;border-radius:0 0 36px 36px}.boite__couvercle{width:300px;height:48px;margin-left:-150px;border-radius:20px;top:calc(44% - 34px)}.boite__figurine{width:130px;height:160px;margin-left:-65px;border-radius:65px 65px 22px 22px;top:calc(44% - 110px)}}
.boite__lottie{position:absolute;inset:0}
.boite__pied{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
@media (min-width:768px){.boite__pied{left:20px;right:20px;bottom:20px}}
.boite__aide{font-family:var(--f-data);font-size:11px;color:var(--u-muted)}
@media (max-width:767px){.boite__aide{display:none}}
.boite__bouton{min-height:48px;padding:0 20px;border-radius:24px;background:var(--u-bg);border:0;font-size:15px;font-weight:600;color:var(--u-ink);margin-left:auto}
/* Réassort annoncé (E2 : aplat --u-a3) */
.fiche__reassort{border-radius:var(--r-m);background:var(--u-a3);color:var(--u-on);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.fiche__reassort-texte{font-size:18px;font-weight:700}
.fiche__reassort-date{font-size:15px;font-weight:600}
.fiche__reassort-avert{font-size:13px}
/* Son histoire (D6 · D7 · K5) */
.fiche__histoire{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.histoire{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
@media (min-width:768px){.histoire{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}}
.histoire__tuile{min-height:110px;border-radius:var(--r-m);background:var(--u-surface);color:var(--u-ink);padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;margin:0}
@media (min-width:768px){.histoire__tuile{min-height:200px;border-radius:var(--r-l);padding:24px;grid-column:span 4}}
.histoire__tuile--portrait{flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:18px}
@media (min-width:768px){.histoire__tuile--portrait{grid-column:span 5}.histoire__tuile--extension{grid-column:span 4}.histoire__tuile--provenance{grid-column:span 3}.histoire__tuile--citation{grid-column:span 7}.histoire__tuile--description{grid-column:span 12;min-height:0}}
@media (max-width:767px){.histoire__tuile--citation,.histoire__tuile--description{grid-column:span 2}}
.histoire__avatar{width:72px;height:72px;border-radius:50%;background:var(--u-surface-2);overflow:hidden;flex:none;display:none}
@media (min-width:768px){.histoire__avatar{display:block}}
.histoire__nom{font-size:17px;font-weight:700;line-height:1.15;display:block}
@media (min-width:768px){.histoire__nom{font-size:22px}}
.histoire__chiffre{font-family:var(--f-data);font-size:30px;font-weight:800;line-height:1;display:block}
@media (min-width:768px){.histoire__chiffre{font-size:44px}}
.histoire__legende{font-size:15px;font-weight:500;color:var(--u-muted)}
.histoire__tuile--extension .histoire__legende{color:var(--u-ink)}
.histoire__citation{margin:0;font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
@media (min-width:768px){.histoire__citation{font-size:28px}}
.histoire__tuile--rarete{background:var(--u-a3);color:var(--u-on)}
.histoire__tuile--description{justify-content:flex-start;font-size:15px;line-height:1.5;color:var(--u-muted)}
/* La série complète (D8 : douze pastilles carrées) */
.serie-complete{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media (min-width:1280px){.serie-complete{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}}
.serie-complete__figurine{display:flex;flex-direction:column;gap:6px;align-items:center}
.serie-complete__visuel{width:100%;aspect-ratio:1 / 1;border-radius:12px;background:var(--u-a1);overflow:hidden;position:relative}
/* K3 (375 px) : radius 12 ; D8 (1280 px) : radius 18 — relevé dans l'outerHTML des deux
   cadres, pas la même valeur (ni le même espacement de grille, § règle ci-dessus). */
@media (min-width:1280px){.serie-complete__visuel{border-radius:18px}}
.serie-complete__figurine:nth-child(3n+2) .serie-complete__visuel{background:var(--u-a2)}
.serie-complete__figurine:nth-child(3n) .serie-complete__visuel{background:var(--u-a3)}
.serie-complete__figurine--secrete .serie-complete__visuel{background:var(--u-surface-2)}
.serie-complete__silhouette{position:absolute;left:30%;right:30%;top:22%;bottom:18%;border-radius:40% 40% 12px 12px;background:var(--u-bg)}
.serie-complete__nom{font-size:12px;color:var(--u-muted);text-align:center}
@media (max-width:1279.98px){.serie-complete__nom{font-size:10px}}
.serie-complete__figurine--secrete .serie-complete__nom{color:var(--u-a1);font-weight:600}

/* Recherche instantanée (M2) : groupes, produits en carrés, bouton vers la grille */
.instantane__groupe{display:flex;flex-direction:column;gap:var(--gap)}
.instantane__titre{padding:8px 4px 4px;font-size:11px}
.instantane__produits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.instantane__lien{display:flex;flex-direction:column;gap:6px}
.instantane__image{display:block;aspect-ratio:1 / 1;border-radius:14px;background:var(--u-surface-2);overflow:hidden;position:relative}
.instantane__image .image img{object-fit:cover}
.instantane__nom{font-size:12px;font-weight:600}
.instantane__prix{font-family:var(--f-data);font-size:12px;font-weight:800}
.instantane__tout{min-height:56px;border-radius:var(--r-m);font-weight:600;margin-top:6px}
.instantane__vide{color:var(--u-muted);padding:10px 4px}

/* ───────────────────────────── corrections du lot D ───────────────────────────── */
/* La barre ne déborde jamais : le nom (et « / rayon ») se tronque avant le panier. */
.barre__dedans .logo{min-width:0;flex:0 1 auto}
.logo__nom{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* K1 : les tuiles-chiffres vont par deux sur téléphone (150 px) */
@media (max-width:767px){.tuile--chiffre{--s:1}}
/* K3 : sur téléphone, la série complète suit le titre (dans la zone d achat) ;
   sur ordinateur (D8), elle est pleine largeur sous les deux colonnes. */
.serie-mobile{display:flex;flex-direction:column;gap:10px}
@media (min-width:768px){.serie-mobile{display:none}}
@media (max-width:767px){.fiche__histoire .serie-bloc{display:none}}
.serie-bloc{display:flex;flex-direction:column;gap:16px}

/* ───────────────────────────── récit ouvert (T5 · K4 · F4 · D9) ───────────────────────────── */
/* ⚠ B-BARRE : la bande d achat est fixe en bas ; le récit réserve sa hauteur
   (72 à 80 px de bande + 24 de marge + zone sûre) : le dernier bloc reste visible. */
:root{--bande-recit:calc(80px + 24px + 24px + env(safe-area-inset-bottom,0px))}
.corps-recit main{padding:0}
.recit{min-height:100vh;background:var(--u-bg)}
.corps-recit--bande .recit__corps{padding-bottom:var(--bande-recit)}
.recit__scene{position:relative;height:62vh;min-height:360px;background:var(--u-surface);overflow:hidden;touch-action:pan-y}
@media (min-width:1280px){.recit__scene{height:100vh}}
.recit__projecteur{position:absolute;inset:0;pointer-events:none;opacity:var(--u-spot);background:radial-gradient(circle at var(--mx,50%) var(--my,45%),color-mix(in oklch,var(--u-a1) 75%,transparent),color-mix(in oklch,var(--u-a2) 45%,transparent) 28%,transparent 62%);z-index:1;mix-blend-mode:screen}
.recit__objet{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.recit__objet .image img{object-fit:cover}
@media (min-width:1280px){.recit__objet{inset:120px 80px 180px}.recit__objet .image img{object-fit:contain}}
.recit__voile{position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(transparent,var(--u-bg))}
@media (min-width:1280px){.recit__voile{display:none}}
/* ⚠ top:50px (pas 16px) — relevé dans l'outerHTML de DEUX cadres récit mobiles
   indépendants (T5 ET F4, même valeur exacte sur les deux, § PROGRESSION.md) : la
   ligne qui porte « Fermer » est la MÊME ligne que la barre de progression des
   chapitres (toutes deux dans un seul conteneur flex à top:50), jamais 16px —
   16px ne correspond à aucune des deux références. Desktop non touché (sa propre
   référence D9 n'a pas ce décalage, override ci-dessous inchangé). */
.recit__fermer{position:absolute;right:16px;top:50px;z-index:3;min-height:44px;padding:0 16px;border-radius:22px;background:var(--u-surface-2);display:flex;align-items:center;gap:10px;font-size:14px}
@media (min-width:1280px){.recit__fermer{right:auto;left:28px;top:24px}}
.recit__etiquettes{position:absolute;left:20px;bottom:20px;z-index:3;display:flex;gap:8px}
@media (min-width:1280px){.recit__etiquettes{left:28px;bottom:120px}}
.recit__etiquette{min-height:36px;padding:0 12px;border-radius:12px;background:var(--u-surface-2);display:inline-flex;align-items:center;gap:8px;font-size:13px}
.recit__corps{position:relative;padding:24px 20px 40px;display:flex;flex-direction:column;gap:44px;max-width:720px}
@media (min-width:1280px){.recit__corps{padding:60px 64px 140px;max-width:none}}
.recit__progression{position:sticky;top:0;z-index:5;display:flex;gap:4px;padding:12px 0;background:var(--u-bg)}
@media (min-width:1280px){.recit__progression{display:none}}
.recit__trait{flex:1;height:3px;border-radius:2px;background:var(--u-line)}
.recit__trait[aria-current]{background:var(--u-a1)}
.recit__entete{display:flex;flex-direction:column;gap:12px}
.recit__surtitre{font-family:var(--f-data);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--u-a1)}
.recit__titre{font-weight:700;font-size:32px;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
@media (min-width:1280px){.recit__titre{font-size:52px;letter-spacing:-.03em}}
.recit__chapeau{font-size:16px;line-height:1.5;color:var(--u-muted);max-width:480px}
@media (min-width:1280px){.recit__chapeau{font-size:18px;line-height:1.6}}
.recit__couverture{border-radius:var(--r-m);overflow:hidden}
.recit__reperes{position:fixed;right:24px;top:50%;display:none;flex-direction:column;gap:6px;z-index:5}
@media (min-width:1280px){.recit__reperes{display:flex}}
.recit__repere{display:block;width:4px;height:18px;border-radius:2px;background:var(--u-line)}
.recit__repere[aria-current]{height:36px;background:var(--u-a1)}
.recit__repere:focus-visible{outline:2px solid var(--u-a1);outline-offset:3px}
/* Blocs */
.bloc{display:flex;flex-direction:column;gap:12px;margin:0;scroll-margin-top:48px}
.bloc__surtitre{font-family:var(--f-data);font-size:11px;letter-spacing:.12em;color:var(--u-a2);text-transform:uppercase}
@media (min-width:1280px){.bloc__surtitre{font-size:12px;color:var(--u-a1)}}
/* ⚠ 32px, pas 30 : DEUX références sur trois (F4 ET K4, toutes deux cette reprise)
   dessinent 32px pour le titre de chapitre mobile — seule T5 (tcg) dessinait 30, une
   majorité à 2 contre 1 sur les trois seules données disponibles pour cette classe. */
.bloc__titre{font-weight:700;font-size:32px;line-height:1.02;letter-spacing:-.02em}
@media (min-width:1280px){.bloc__titre{font-size:44px}}
.bloc__texte{font-size:16px;line-height:1.5;color:var(--u-muted);max-width:480px;display:flex;flex-direction:column;gap:10px}
@media (min-width:1280px){.bloc__texte{font-size:18px;line-height:1.6}}
.bloc__texte a{color:var(--u-ink);text-decoration:underline}
.bloc__texte strong{color:var(--u-ink)}
.bloc__texte--discret{font-size:14px}
.bloc__media{border-radius:var(--r-m);overflow:hidden;background:var(--u-surface)}
.bloc--portrait{flex-direction:row;align-items:flex-start;gap:18px}
.bloc__avatar{display:block}
.bloc--chiffre{border-radius:var(--r-m);background:var(--u-surface-2);padding:12px;gap:4px;max-width:240px}
.bloc__chiffre-libelle{font-family:var(--f-data);font-size:10px;color:var(--u-muted);text-transform:uppercase}
.bloc__chiffre{font-family:var(--f-data);font-size:20px;font-weight:800;color:var(--u-a1)}
@media (min-width:1280px){.bloc__chiffre{font-size:44px}}
.bloc__unite,.tuile__unite{font-size:.5em}
.tuile__chiffre{overflow-wrap:break-word;min-width:0}
.frise{list-style:none;margin:0;padding:0 0 0 14px;display:flex;flex-direction:column;gap:14px;box-shadow:inset 2px 0 0 var(--u-line)}
.frise__etape{display:flex;flex-direction:column;gap:2px}
.frise__date{font-family:var(--f-data);font-size:12px;color:var(--u-a1)}
.frise__titre{font-weight:700;font-size:17px}
.frise__texte{font-size:15px;color:var(--u-muted);line-height:1.5}
.bloc-objet{display:flex;gap:14px;align-items:center;border-radius:var(--r-m);background:var(--u-surface);padding:10px;max-width:480px}
.bloc-objet__image{width:96px;flex:none;border-radius:12px;overflow:hidden;background:var(--u-surface-2)}
.bloc-objet__texte{display:flex;flex-direction:column;gap:4px}
.bloc-objet__nom{font-weight:600;font-size:15px}
.bloc-objet__detail{font-family:var(--f-data);font-size:12px;color:var(--u-a1)}
.dans-la-boite{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.dans-la-boite__element{display:flex;flex-direction:column;gap:6px}
.dans-la-boite__image{position:relative;display:block;aspect-ratio:1 / 1;border-radius:14px;background:var(--u-surface);overflow:hidden}
.dans-la-boite__nom{font-size:13px;font-weight:600}
.dans-la-boite__qte{font-family:var(--f-data);font-size:12px;color:var(--u-muted)}
.bloc--citation{max-width:560px}
.bande-produits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:560px}
.bande-produit{display:flex;align-items:center;gap:12px;border-radius:var(--r-m);background:var(--u-surface-2);padding:8px 10px}
/* La bande d achat fixe (T5 · D9) */
.bande{position:fixed;left:12px;right:12px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;min-height:72px;border-radius:var(--r-m);background:var(--u-surface-2);display:flex;align-items:center;gap:10px;padding:0 10px;box-shadow:0 20px 40px color-mix(in oklch,var(--u-bg) 40%,transparent),inset 0 0 0 1px var(--u-line)}
@media (min-width:1280px){.bande{left:50%;right:auto;transform:translateX(-50%);width:720px;min-height:80px;gap:14px;padding:0 12px}}
.bande__vignette{width:52px;height:52px;border-radius:12px;background:var(--u-surface);overflow:hidden;flex:none}
@media (min-width:1280px){.bande__vignette{width:56px;height:56px;border-radius:14px}}
.bande__vignette .image img{object-fit:cover}
.bande__texte{flex:1 1 0%;min-width:0;display:flex;flex-direction:column}
.bande__nom{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bande__detail{font-family:var(--f-data);font-size:12px;color:var(--u-a1)}
.bande__aide{display:none;font-size:12px;color:var(--u-muted);gap:6px;align-items:center}
@media (min-width:1280px){.bande__aide{display:flex}}
.bande__fleche{background:none;border:0;cursor:pointer;min-width:24px;min-height:24px;color:var(--u-ink)}
.bande__action{min-height:52px;padding:0 20px;border-radius:14px;background:var(--u-a1);color:var(--u-on)}
[data-univers="figurines"] .bande__action{background:var(--u-a3)}
/* D9 : les chapitres non actifs s'estompent — seulement quand le script suit le défilement */
@media (min-width:1280px){
  .recit--suivi .bloc--chapitre{transition:opacity var(--u-dur) var(--u-ease)}
  .recit--suivi .bloc--chapitre:not([data-actif]){opacity:.38}
}

/* ───────────────────────────── collage de liste (T6 · D11 · E3) ───────────────────────────── */
.page-deck{padding-top:14px;padding-bottom:calc(var(--barre-achat) + 24px);display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:1280px){.page-deck{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;padding-top:28px;padding-bottom:48px;align-items:start}}
.deck__saisie{display:flex;flex-direction:column;gap:12px}
/* ⚠ T6 ET D11 (port-vitrine, 05/10), deux références indépendantes (mobile ET
   desktop) accordées dans le MÊME sens : 26px contre 28 posés, 36px contre 40 — la
   maquette dessine systématiquement plus petit que le code à chaque largeur. */
.deck__titre{font-weight:700;font-size:26px;letter-spacing:-.02em}
@media (min-width:1280px){.deck__titre{font-size:36px}}
/* ⚠ T6 ET D11 (port-vitrine, 05/10) s'accordent : le texte collé résout en
   `--u-muted`, jamais `--u-ink` — un ton plus sourd que le texte normal, cohérent
   avec la police monospace déjà posée (`--f-data`), confirmé sur les deux
   références. */
.deck__texte{min-height:180px;border-radius:var(--r-m);background:var(--u-surface);border:0;box-shadow:inset 0 0 0 1px var(--u-a1);padding:14px 16px;font-family:var(--f-data);font-size:13px;line-height:1.8;color:var(--u-muted);resize:vertical}
@media (min-width:1280px){.deck__texte{min-height:520px;padding:24px;font-size:14px;line-height:1.9}}
.deck__texte::placeholder{color:var(--u-muted);opacity:1}
.deck__aide{font-size:13px;color:var(--u-muted)}
.deck__verifier{align-self:flex-start}
.deck__resultats{display:flex;flex-direction:column;gap:12px}
.deck__stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap)}
.deck__stat{border-radius:var(--r-s);background:var(--u-surface);padding:10px;display:flex;flex-direction:column}
@media (min-width:1280px){.deck__stat{border-radius:var(--r-m);padding:16px}}
.deck__stat-libelle{font-family:var(--f-data);font-size:10px;color:var(--u-muted)}
.deck__stat-valeur{font-family:var(--f-data);font-size:20px;font-weight:800}
@media (min-width:1280px){.deck__stat-valeur{font-size:28px}}
.deck__stat-valeur--trouvees{color:var(--u-a3)}
.deck__stat-valeur--partielles{color:var(--u-a2)}
.deck__lignes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.deck-ligne{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:var(--r-s);background:var(--u-surface)}
.deck-ligne__qte{font-family:var(--f-data);font-size:13px;width:28px;flex:none}
.deck-ligne__texte{flex:1 1 0%;min-width:0;display:flex;flex-direction:column}
.deck-ligne__nom{font-size:14px;font-weight:600}
.deck-ligne__brut{font-family:var(--f-data);font-size:13px}
.deck-ligne__detail{font-family:var(--f-data);font-size:11px;color:var(--u-muted)}
.deck-ligne--inconnue .deck-ligne__detail{font-family:var(--f-text);font-size:12px}
.deck-ligne--absente .deck-ligne__nom{color:var(--u-muted)}
.deck-ligne__prix{display:none;font-family:var(--f-data);font-size:14px}
@media (min-width:1280px){.deck-ligne__prix{display:block}}
.deck-ligne__statut{font-family:var(--f-data);font-size:11px;padding:5px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--u-muted);color:var(--u-muted);font-weight:600}
.deck-ligne__statut--complet{background:var(--u-a3);color:var(--u-on);box-shadow:none}
.deck-ligne__statut--partiel{background:var(--u-a2);color:var(--u-on);box-shadow:none}
.deck-ligne__chercher{min-height:40px;padding:0 12px;border-radius:10px;background:var(--u-surface-2);display:flex;align-items:center;font-size:13px}
.deck__aucune{border-radius:var(--r-m);background:var(--u-surface-2);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.deck__exemple{font-family:var(--f-data);font-size:13px;color:var(--u-ink)}
.deck__ajout{display:flex;align-items:center;justify-content:space-between;gap:12px}
.deck__total{display:none;font-family:var(--f-data);font-size:24px;font-weight:800}
.deck__bouton{background:var(--u-a1);color:var(--u-on);border-radius:18px;padding:0 20px;justify-content:space-between;gap:16px}
span.deck__bouton{background:var(--u-surface-2);color:var(--u-muted)}
.deck__bouton-long{display:none}
@media (max-width:1279px){.deck__ajout{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 14px calc(24px + env(safe-area-inset-bottom,0px));background:var(--u-bg);box-shadow:0 -1px 0 var(--u-line)}.deck__bouton{width:100%}}
@media (min-width:1280px){.deck__total{display:block}.deck__bouton-long{display:inline}.deck__bouton-court,.deck__bouton-prix{display:none}}

/* ───────────────────────────── compte (C1 · C2 · D13) ───────────────────────────── */
.page-compte{padding-top:14px;padding-bottom:40px}
@media (min-width:1280px){.page-compte{padding-top:40px}}
.compte-bento{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1280px){.compte-bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:300px}}
.compte-tuile{display:none;position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--u-surface);padding:28px;align-items:flex-end}
@media (min-width:1280px){.compte-tuile{display:flex;grid-column:span 4}}
.compte-tuile--series{background:var(--u-a1);color:var(--u-on);grid-row:1}
.compte-tuile--precommandes{grid-row:2}
.compte-tuile--sets{grid-column:10 / span 3;grid-row:1}
.compte-tuile--donnees{background:var(--u-surface-2);color:var(--u-muted);font-size:15px;line-height:1.5}
@media (min-width:1280px){.compte-tuile--series,.compte-tuile--precommandes{grid-column:1 / span 4}.compte-tuile--sets,.compte-tuile--donnees{grid-column:10 / span 3}.compte-tuile--donnees{grid-row:2}}
.compte-tuile__texte{position:relative;font-size:16px;font-weight:500}
.compte-tuile__texte--fort{font-weight:700;font-size:24px}
.compte-panneau{display:flex;flex-direction:column;gap:14px}
@media (min-width:1280px){.compte-panneau{grid-column:5 / span 5;grid-row:1 / span 2;border-radius:var(--r-l);background:var(--u-surface);padding:40px;gap:18px}}
section.compte-panneau:only-child{max-width:520px}
.compte__titre{font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.05}
@media (min-width:1280px){.compte__titre{font-size:36px}}
.compte__texte{font-size:15px;color:var(--u-muted)}
.compte__onglets{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:var(--u-surface)}
@media (min-width:1280px){.compte__onglets{background:var(--u-bg)}}
.compte__onglet{min-height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px}
.compte__onglet[aria-current="page"]{background:var(--u-a1);color:var(--u-on);font-weight:600}
.compte__oublie{font-size:14px;color:var(--u-muted)}
.compte__donnees{font-size:14px;color:var(--u-muted)}
.formulaire{display:flex;flex-direction:column;gap:14px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ__etiquette{font-size:14px;font-weight:500}
.champ__saisie{height:56px;border-radius:16px;background:var(--u-surface);border:0;box-shadow:inset 0 0 0 1px var(--u-line);padding:0 16px;font-size:16px;color:var(--u-ink)}
@media (min-width:1280px){.champ__saisie{background:var(--u-bg)}}
.champ__saisie::placeholder{color:var(--u-muted);opacity:1}
.champ--erreur .champ__saisie{box-shadow:inset 0 0 0 2px var(--u-ink)}
.champ__erreur{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--u-surface-2);font-size:14px;line-height:1.4;margin:0}
.champ__signe{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--u-a1);color:var(--u-on);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.case{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--u-muted);line-height:1.4;cursor:pointer;min-height:44px}
.case input{position:absolute;opacity:0;width:1px;height:1px}
.case__boite{flex:0 0 auto;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 2px var(--u-muted);display:flex;align-items:center;justify-content:center;color:var(--u-on);font-weight:800}
.case:has(input:checked) .case__boite{background:var(--u-a1);box-shadow:none}
.case:has(input:checked) .case__boite::after{content:"✓"}
.case:has(input:focus-visible) .case__boite{outline:2px solid var(--u-a1);outline-offset:3px}

/* ───────────────────────────── collection (M5 · D12) ───────────────────────────── */
.page-collection{padding-top:14px;padding-bottom:40px;display:flex;flex-direction:column;gap:12px}
@media (min-width:1280px){.page-collection{padding-top:32px;gap:24px}}
.collection__tete{display:flex;justify-content:space-between;align-items:center}
.collection__titre{font-weight:700;font-size:26px;letter-spacing:-.02em}
@media (min-width:1280px){.collection__titre{font-size:36px}}
.collection__onglets{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:1280px){.collection__onglets{margin-top:-68px;align-self:flex-end}}
.collection__onglet{min-height:44px;padding:0 18px;border-radius:22px;background:var(--u-surface);display:flex;align-items:center;font-size:14px;cursor:pointer}
/* ⚠ M5 ET D12 (port-vitrine, 05/10), DEUX références indépendantes d'accord à
   l'identique : l'onglet actif résout en `--u-a1`/`--u-on`, jamais `--u-ink`/`--u-bg`
   (la teinte neutre de texte sur fond, qui ne dépend pas de l'univers — ici l'onglet
   doit prendre la couleur d'ACCENT de la boutique, visible aussi bien en clair qu'en
   sombre selon l'univers actif). */
#vue-tout:checked ~ .collection__onglets [for="vue-tout"],#vue-series:checked ~ .collection__onglets [for="vue-series"],#vue-cartes:checked ~ .collection__onglets [for="vue-cartes"],#vue-figurines:checked ~ .collection__onglets [for="vue-figurines"]{background:var(--u-a1);color:var(--u-on);font-weight:600}
.collection__choix:focus-visible ~ .collection__onglets{outline:2px solid var(--u-a1);outline-offset:3px;border-radius:22px}
#vue-series:checked ~ .collection__grille .suivi:not(.suivi--serie):not(.suivi--ajout),#vue-cartes:checked ~ .collection__grille .suivi:not(.suivi--set):not(.suivi--ajout),#vue-figurines:checked ~ .collection__grille .suivi:not(.suivi--figurines):not(.suivi--ajout){display:none}
.collection__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gutter)}
@media (min-width:768px){.collection__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.collection__grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.collection__vide{color:var(--u-muted)}
.suivi{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--u-surface);padding:16px;display:flex;flex-direction:column;gap:12px}
@media (min-width:1280px){.suivi{padding:22px}}
.suivi__tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.suivi__nom{font-weight:700;font-size:18px}
@media (min-width:1280px){.suivi__nom{font-size:20px}}
.suivi__compte{font-family:var(--f-data);font-size:15px;font-weight:800;color:var(--u-a1)}
.suivi--set .suivi__compte{color:var(--u-a3)}
.suivi__figurines{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.suivi__case{aspect-ratio:1 / 1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--f-data);font-weight:800;color:var(--u-muted)}
.suivi__case--pleine{background:var(--u-a1)}
.suivi__case--pleine:nth-child(3n+2){background:var(--u-a2)}
.suivi__case--pleine:nth-child(3n){background:var(--u-a3)}
.suivi__case--manque{box-shadow:inset 0 0 0 1px var(--u-muted);background:repeating-linear-gradient(90deg,transparent 0 4px,transparent 4px 8px)}
.suivi__case--secrete{background:var(--u-surface-2)}
.suivi__legende{font-size:13px;color:var(--u-muted);line-height:1.4}
.suivi__action{min-height:52px;border-radius:26px;background:var(--u-a1);color:var(--u-on);font-weight:600;font-size:14px}
.suivi__barre{appearance:none;-webkit-appearance:none;width:100%;height:12px;border:0;border-radius:6px;background:var(--u-surface-2);overflow:hidden}
.suivi__barre::-webkit-progress-bar{background:var(--u-surface-2);border-radius:6px}
.suivi__barre::-webkit-progress-value{background:linear-gradient(90deg,var(--u-a1),var(--u-a3));border-radius:6px}
.suivi__barre::-moz-progress-bar{background:linear-gradient(90deg,var(--u-a1),var(--u-a3));border-radius:6px}
.suivi__pied{display:flex;justify-content:space-between;font-family:var(--f-data);font-size:12px;color:var(--u-muted)}
.suivi--figurines{flex-direction:row;align-items:center;justify-content:space-between}
.suivi__texte{position:relative;display:flex;flex-direction:column}
.suivi__sous{font-size:13px;color:var(--u-muted)}
.suivi__voir{position:relative;min-height:44px;border-radius:12px;background:var(--u-a1);color:var(--u-on);font-family:var(--f-data);font-size:13px}
.suivi--ajout{align-items:center;justify-content:center;min-height:160px;background:none;box-shadow:inset 0 0 0 1px var(--u-muted);border:0;color:var(--u-muted);font-size:15px;text-align:center}
[x-cloak]{display:none!important}
/* ⚠ B-BARRE : la réserve de hauteur est posée sur le CORPS (et non sur la page) —
   le pied de page, lui aussi, doit rester au-dessus des barres fixes. */
@media (max-width:767px){.corps-fiche,.corps-deck{padding-bottom:var(--barre-achat)}.page-fiche,.page-deck{padding-bottom:24px}}
@media (max-width:1279px){.corps-chasse{padding-bottom:var(--barre-achat)}.page-chasse{padding-bottom:24px}}
@media (min-width:768px) and (max-width:1279px){.corps-deck{padding-bottom:var(--barre-achat)}}
/* ⚠ Trouvé par B-SANS-JS : la colonne de facettes est collante (layout.css) et plus haute
   que l écran ; sans défilement propre, ses dernières options restaient hors d atteinte. */
@media (min-width:1280px){.facettes,.facettes:target{max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto;overscroll-behavior:contain}}

/* ───────────────────────────── cibles tactiles ≥ 44 px sur téléphone (brief § 7) ─────────────────────────────
   Mesuré à 375 px sur les 30 écrans : les liens de nom (36 px), les puces (36 à 40 px,
   hauteur DESSINÉE par la maquette T3), le choix 30 / 90 j (26 px), « Chercher » (40 px).
   ⚠ Le dessin ne change pas : la zone de toucher s'étend par un pseudo-élément, et le
   lien du nom d'une vignette s'étire sur toute la tuile (ses boutons passent au-dessus). */
.vignette__nom a::after,.bande__nom::after,.bloc-objet__nom::after{content:"";position:absolute;inset:0;z-index:1}
/* ⚠ Trouvé en lisant T5 (port-vitrine, 05/10) : `.bande` était DANS cette liste —
   `position:relative` écrasait son PROPRE `position:fixed` (ligne ~714, cible du
   touché agrandi étant déjà établie par `fixed`, pas besoin de `relative`) et la
   bande d'achat du récit n'était plus jamais épinglée en bas de l'écran (elle
   suivait le flux normal, invisible hors du cadre tant qu'on n'avait pas défilé
   jusqu'au bout) — `--bande-recit` (ligne ~640, le padding réservé sous le corps du
   récit) n'a de sens QUE si la bande est fixe, confirmant qu'elle n'aurait jamais dû
   être ici. Retirée ; `.bande-produit`/`.bloc-objet` seuls gardent `relative` (ils
   n'ont aucune autre règle de position, à la différence de `.bande`). */
.bande-produit,.bloc-objet{position:relative}
.vignette__form,.vignette__action,.bande form,.bande__aide,.bande__action,.bande-produit form{position:relative;z-index:2}
@media (max-width:767px){
  .puce,.puce--active,.valeur__periode,.deck-ligne__chercher,.lien-souligne{position:relative}
  .puce::after,.puce--active::after,.deck-ligne__chercher::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px}
  .valeur__periode::after{content:"";position:absolute;left:-2px;right:-2px;top:calc(50% - 22px);height:44px}
  .lien-souligne::after{content:"";position:absolute;left:-8px;right:-8px;top:calc(50% - 22px);height:44px}
}