/* 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}}
/* Logo v2 (18/10/2026, `_logo.html`, jeu d'images de `boutique.marque`) : DANS LA BOÎTE des barres et
   du nom. Le symbole seul, 44 px de haut (la hauteur de la boîte), là où le logo horizontal tomberait
   sous le minimum de la charte (180 px de large) : au téléphone (la boîte n'a que 44 px de haut : 138 px
   de large) et de 768 à 879 px (la barre d'ordinateur n'y laisse que 122 à 178 px au logo, mesuré). À
   partir de 880 px : le logo horizontal à 180 px de large (57 px de haut, dans la barre de 72 px dont la
   hauteur est fixe). `object-fit` : une image serrée se réduit, jamais déformée. */
.logo__horizontal,.logo__symbole{display:block;flex:none;width:auto;object-fit:contain;object-position:left center}
.logo__horizontal{display:none;height:57.4px}
.logo__symbole{height:44px}
@media (min-width:768px){.logo--image .logo__nom{display:none}}
@media (min-width:880px){.logo__horizontal{display:block}.logo__symbole{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}
/* Intégration v0.2.13.13 (pages magasins) : « Voir la page du magasin », hors d une phrase, dans la liste des
   magasins de « Contact » et des pages de contenu — une cible tactile de 44 px (brief § 7), comme les liens textes. */
a[data-lien="page-magasin"]{display:inline-flex;align-items:center;min-height:44px}
@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}

/* ───────────────────────────── visuel à venir (décision du fondateur du 18/10/2026, option A) ───────────────────────────── */
/* Une carte du catalogue SANS visuel servi (`_visuel_a_venir.html`) : à la place de la surface tramée et du
   « Pas d'image », un cadre propre AU FORMAT CARTE (63 × 88) qui écrit son nom, son extension, la mention
   « Visuel à venir » et son numéro. Le même composant sert la liste « Tout le catalogue » (vignette de ~170 px
   à 390 px), la page de la carte (320 px) et ses versions (96 / 140 px) : ses textes se mesurent sur SA largeur
   (unités de conteneur `cqi`, bornées par `clamp`), se replient et se coupent DANS le cadre (`overflow-wrap`,
   lignes bornées) — un nom de carte long ne le fait jamais déborder. Le rembourrage en % se lit sur la largeur
   du bloc qui le contient (la sienne : il l'occupe en entier). Aucune trame, aucune couleur écrite : jetons --u-*. */
.visuel-a-venir{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;width:100%;aspect-ratio:63/88;padding:8%;overflow:hidden;container-type:inline-size;border-radius:inherit;background:var(--u-surface-2);border:1px solid var(--u-line);color:var(--u-ink);text-align:left}
.visuel-a-venir__nom{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;min-width:0;overflow-wrap:anywhere;font-weight:700;font-size:clamp(9px,9.5cqi,22px);line-height:1.15}
.visuel-a-venir__extension{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-width:0;overflow-wrap:anywhere;font-size:clamp(8px,7cqi,15px);line-height:1.2;color:var(--u-muted)}
.visuel-a-venir__mention{display:block;margin-top:auto;min-width:0;overflow-wrap:anywhere;font-family:var(--f-data);font-size:clamp(8px,6.5cqi,13px);line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--u-muted)}
.visuel-a-venir__numero{display:block;min-width:0;overflow-wrap:anywhere;font-family:var(--f-data);font-size:clamp(8px,7cqi,16px);font-weight:700;line-height:1.2;color:var(--u-ink)}
/* Posé DANS une boîte qui a déjà sa forme (vignette de la grille, visuel d'une version) : il l'occupe en entier. */
.vignette__media>.visuel-a-venir,.version__visuel>.visuel-a-venir{position:absolute;inset:0;aspect-ratio:auto}

/* ───────────────────────────── 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}
/* 18/10/2026 (banc « visuel à venir » à 390 px) : un nom de carte d'un seul long mot (« Asmoranomardicadaistinaculdacar »,
   31 lettres) sortait de sa colonne de ~170 px et faisait défiler la page de côté ; il se coupe désormais dans la vignette. */
.vignette--grille .vignette__nom,.vignette--grille .vignette__sous-titre{overflow-wrap:anywhere}
.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)}
/* 17/10/2026 : la vidéo et sa légende « Vidéo générée par IA » (une vidéo générée par IA, validée au Comptoir) */
.medias__figure{margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
.medias__legende-ia{padding:6px 0 2px;font-family:var(--f-data);font-size:12px;color:var(--u-muted);text-align:center}
.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}
}