/* ==========================================================================
   EXTRAIT DE v4.html PAR scripts/extraire-v4.mjs — NE PAS EDITER ICI.
   Toute retouche visuelle se fait dans le prototype, se valide, puis se
   re-extrait. Les styles propres au site vivent dans site.css.
   ========================================================================== */
/* ==========================================================================
   Carte de collection moderne. La technique holographique suit le pipeline
   de reference (pokemon-cards-css) : le pointeur alimente --pointer-x/y et
   --background-x/y, qui pilotent des degrades en color-dodge / hard-light.
   Concu pour le desktop, decline en tablette et mobile.
   ========================================================================== */
:root{
  /* PALETTE « LENTILLE ».
     Les cartes ont deja une holographie ; l'interface l'ignorait, d'ou le
     decalage. On reprend les couleurs d'un traitement optique — cyan, indigo,
     violet, magenta, ambre — et les surfaces passent en verre depoli. */
  --fond:#07080E; --fond2:#0D0F17; --panneau:#12141D;
  --bord:#FFFFFF14; --txt:#F1F3F9; --gris:#9BA2B8; --gris2:#6C7389;

  --iris-1:#4FE3D0;   /* cyan-menthe   */
  --iris-2:#5AA8FF;   /* bleu optique  */
  --iris-3:#A97BFF;   /* violet        */
  --iris-4:#FF77C4;   /* magenta       */
  --iris-5:#FFC46B;   /* ambre         */
  --iris:linear-gradient(102deg,var(--iris-1),var(--iris-2) 34%,var(--iris-3) 62%,var(--iris-4));
  --acc:var(--iris-2);

  /* Les raretes suivent le spectre : plus la carte monte, plus la longueur
     d'onde derive. Le rang se lit comme une dispersion optique. */
  --r-commun:#8E96AC; --r-peucommun:#3FD6A4; --r-rare:#4FA8FF;
  --r-super:#A97BFF;  --r-ultra:#FF77C4;     --r-legendaire:#FFC46B;

  --t-mammifere:#FFB067; --t-oiseau:#5AA8FF; --t-reptile:#3FD6A4;
  --t-amphibien:#38D3C4; --t-insecte:#E8C55C; --t-poisson:#6E8CFF;
  --t-plante:#8ED96A; --t-disparu:#C9A98A;

  /* verre */
  --verre:rgba(255,255,255,.045);
  --verre-fort:rgba(255,255,255,.075);
  --verre-bord:rgba(255,255,255,.10);

  --entete:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fond);color:var(--txt);
  font-family:Archivo,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Halo de fond : donne de la profondeur sans motif charge */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 82% -12%, #A97BFF2E, transparent 66%),
    radial-gradient(680px 480px at 12% 4%,  #4FE3D024, transparent 66%),
    radial-gradient(720px 520px at 55% 108%,#FF77C41F, transparent 66%),
    radial-gradient(560px 400px at 96% 62%, #5AA8FF1F, transparent 66%);
}
/* Grain de papier sur toute la page. Les cartes en ont un ; sans lui, le fond
   reste un aplat numerique et le decalage se voit. */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* Respecte le reglage systeme : certaines personnes ont besoin de moins
   d'animation, et c'est aussi une exigence d'accessibilite (WCAG 2.3.3). */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* Contour de focus : il etait absent partout. C'est un echec WCAG 2.4.7, et
   l'European Accessibility Act le rend opposable des lors qu'on vend en ligne.
   :focus-visible ne s'affiche qu'au clavier, donc la souris reste propre. */
:focus-visible{outline:2px solid var(--iris-1);outline-offset:3px;border-radius:6px}
.carte:focus-visible,.dos:focus-visible{outline-offset:5px}
/* Lien d'evitement : premiere chose atteinte au clavier. */
.evitement{position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--iris-1);color:#07080E;font-weight:700;padding:12px 20px;
  border-radius:0 0 10px 0}
.evitement:focus{left:0}
/* Le balayage entrait en collision avec la selection native de texte et le
   glisser-deposer d'image. On desactive les deux sur l'interface de jeu, et
   on redonne la selection la ou elle sert vraiment : le texte de la fiche. */
body{-webkit-user-select:none;user-select:none}
.fiche-info,.fiche-info *{-webkit-user-select:text;user-select:text}
img{display:block;-webkit-user-drag:none;user-drag:none}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ---------------- en-tete ---------------- */
header{
  position:sticky;top:0;z-index:600;height:var(--entete);
  background:rgba(10,11,18,.62);backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid var(--verre-bord);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;align-items:center;gap:26px;padding:0 clamp(14px,3vw,34px);
}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo .marque{width:27px;height:27px;color:var(--iris-5);flex:0 0 auto}
.logo .marque svg{width:100%;height:100%;display:block}
.logo .mot{font-weight:800;font-size:21px;letter-spacing:-.005em;line-height:1}
.logo .mot b{font-weight:800;background:var(--iris);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo .mot i{font-style:normal;font-weight:500;font-size:14px;color:var(--gris2);
  letter-spacing:.02em;margin-left:2px}
.logo .marque{width:31px;height:31px}
header nav{display:flex;gap:4px;margin-left:6px}
header nav button{
  padding:8px 15px;border-radius:9px;color:var(--gris);font-weight:600;font-size:14px;
  transition:.16s;
}
header nav button:hover{color:var(--txt);background:var(--verre)}
header nav button.on{color:var(--txt);background:var(--verre-fort);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.compteur{margin-left:auto;display:flex;align-items:center;gap:14px}
.compteur .n{font-size:13px;color:var(--gris)}
.compteur .n b{color:var(--txt);font-weight:700}
.reserve-mini{display:flex;align-items:center;gap:7px;background:var(--verre);
  border:1px solid var(--verre-bord);border-radius:99px;padding:6px 14px;
  font-size:13px;font-weight:700;backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.reserve-mini em{font-style:normal;font-weight:500;font-size:11.5px;color:var(--gris2);
  letter-spacing:.03em}
.reserve-mini .b{width:7px;height:7px;border-radius:50%;background:var(--iris-5);
  box-shadow:0 0 9px var(--iris-5)}

.vue{display:none;padding:0 clamp(14px,3vw,34px) 70px}
.vue.on{display:block}
.large{max-width:1440px;margin:0 auto}

/* ==========================================================================
   LA CARTE — objet central
   ========================================================================== */
.carte{
  position:relative;width:100%;aspect-ratio:734/1024;border-radius:4.6% / 3.3%;
  container-type:inline-size;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#2A2540,#12101E);
  transform-style:preserve-3d;
  box-shadow:0 12px 34px #000A, 0 0 0 1px #FFFFFF14;
  --pointer-x:50%; --pointer-y:50%; --bg-x:50%; --bg-y:50%;
  --rot-x:0deg; --rot-y:0deg; --opa:0;
  transform:perspective(1100px) rotateY(var(--rot-x)) rotateX(var(--rot-y));
  transition:box-shadow .3s;
  will-change:transform;
}
.carte.anime{transition:transform .5s cubic-bezier(.2,.9,.3,1),box-shadow .3s}

/* Bordure interieure : la matiere du cadre dit la rarete */
.carte .liseré{
  position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;
  border:2.4cqw solid transparent;
  background:linear-gradient(145deg,var(--c) 0%,#FFFFFF66 22%,var(--c) 44%,#00000066 66%,var(--c) 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* --- bandeau titre --- */
.carte .titre{
  position:absolute;left:5.2cqw;right:5.2cqw;top:4cqw;z-index:6;
  display:flex;align-items:center;gap:2cqw;
}
.carte .titre h3{
  margin:0;font-size:5.6cqw;font-weight:800;letter-spacing:-.02em;line-height:1.05;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 4px #000B;
}
.carte .jauge{font-family:"JetBrains Mono",monospace;font-size:4.4cqw;font-weight:700;
  color:var(--c);text-shadow:0 1px 4px #000B;white-space:nowrap}
.carte .jauge s{font-size:2.6cqw;text-decoration:none;opacity:.75;margin-right:.4cqw}
.carte .pastille{
  width:8.6cqw;height:8.6cqw;border-radius:50%;display:grid;place-items:center;
  background:var(--t);box-shadow:0 0 0 .5cqw #00000038, 0 2px 6px #0009;color:#0B0A14;
}
.carte .pastille .ic{width:5.6cqw;height:5.6cqw}

/* ---- icones dessinees (jamais d'emoji) ---- */
.ic{display:inline-flex;align-items:center;justify-content:center;
    width:1.15em;height:1.15em;flex:0 0 auto}
.ic svg{width:100%;height:100%;display:block}
.sym-g{display:inline-flex;align-items:center;gap:.18em}
.sym-g svg{width:1em;height:1em;display:block}

/* --- fenetre d'illustration --- */
.carte .vitre{
  position:absolute;left:5.2cqw;right:5.2cqw;top:13.4cqw;height:52cqw;z-index:3;
  border-radius:1.4cqw;overflow:hidden;background:#0B0A14;
  box-shadow:inset 0 0 0 .6cqw #00000055, 0 .8cqw 2cqw #0007;
}
.carte .vitre img{width:100%;height:100%;object-fit:cover}
.carte .vitre::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(#0000 62%,#000000A8 100%);
}
/* Pleine illustration : l'art occupe TOUTE la carte, le texte se pose dessus.
   La hauteur etait exprimee en cqw (% de la LARGEUR) : l'art ne couvrait que
   53% de la hauteur et le bloc de texte chevauchait le titre. */
.carte.pleine .vitre{inset:0;height:100%;border-radius:inherit;box-shadow:none}
.carte.pleine .vitre::after{
  background:linear-gradient(#0000 34%,#0B0A14C4 58%,#0B0A14F5 78%,#0B0A14 92%)}
.carte.pleine .titre{top:auto;bottom:45cqw}
.carte.pleine .titre h3{font-size:6.2cqw}

/* --- corps --- */
.carte .corps{position:absolute;left:5.2cqw;right:5.2cqw;top:68cqw;z-index:6}
.carte.pleine .corps{top:auto;bottom:16cqw}   /* au-dessus du pied (13.7cqw) */
.carte .latin{font-size:3.3cqw;font-style:italic;color:#C9C2E4;margin-bottom:1.6cqw}
.carte .capsule{
  background:#FFFFFF0F;border:.35cqw solid #FFFFFF1A;border-radius:1.4cqw;
  padding:2cqw 2.4cqw;backdrop-filter:blur(3px);
}
.carte .capsule .quoi{font-size:2.7cqw;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c);font-weight:700}
.carte .capsule .val{font-size:3.6cqw;font-weight:600;margin-top:.5cqw;line-height:1.25}
.carte .lignes{display:flex;gap:4cqw;margin-top:2.2cqw;font-size:3cqw}
.carte .lignes div{color:#B9B2D4}
.carte .lignes b{color:#fff;font-weight:700;font-family:"JetBrains Mono",monospace}

/* --- pied --- */
.carte .pied{
  position:absolute;left:5.2cqw;right:5.2cqw;bottom:3.4cqw;z-index:6;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2cqw;
}
.carte .sym{color:var(--c);filter:drop-shadow(0 0 .9cqw var(--c))}
.carte .sym .sym-g svg{width:3.6cqw;height:3.6cqw}
.carte .credit{font-size:2.1cqw;color:#8F88AC;text-align:right;line-height:1.3;
  max-width:60%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.carte .serie{font-family:"JetBrains Mono",monospace;font-size:2.4cqw;color:#8F88AC}

/* ==========================================================================
   LE DOS — diaphragme d'objectif
   L'ancien dos etait un guillochage dore : pauvre, et surtout orphelin depuis
   que la palette est passee a l'irise. Le motif dit desormais quelque chose —
   chaque carte est une observation du reel, le dos est l'optique qui l'a
   captee. Symetrique, comme doit l'etre un dos de carte.
   ========================================================================== */
.dos{
  position:relative;width:100%;aspect-ratio:734/1024;border-radius:4.6% / 3.3%;
  container-type:inline-size;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 78% at 50% 34%, #131A33 0%, #0C1020 46%, #07080E 100%);
  box-shadow:0 12px 34px #000A, 0 0 0 1px rgba(255,255,255,.09);
}
.dos .optique{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);
  width:74cqw;height:74cqw}
.dos .optique svg{width:100%;height:100%;display:block}
/* halo : le verre capte la lumiere */
.dos .halo{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);
  width:96cqw;height:96cqw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(90,168,255,.16) 0%,rgba(169,123,255,.07) 42%,transparent 68%);
  filter:blur(6px)}
/* liseré irisé, meme construction que la face */
.dos .bord{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2.4cqw solid transparent;
  background:linear-gradient(140deg,#4FE3D0 0%,#5AA8FF 28%,#A97BFF 58%,#FF77C4 82%,#4FE3D0 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;
}
.dos .cadre-int{position:absolute;inset:5.4cqw;border:.35cqw solid rgba(255,255,255,.09);
  border-radius:1.8cqw}
.dos .mot{
  position:absolute;left:6cqw;right:6cqw;top:80.5%;text-align:center;
  font-weight:800;font-size:7cqw;letter-spacing:.2em;text-indent:.2em;line-height:1;
  color:#E9EDFA;text-shadow:0 .3cqw 1.4cqw #000A;white-space:nowrap;
}
.dos .mot b{font-weight:800;background:linear-gradient(96deg,#4FE3D0,#A97BFF 55%,#FF77C4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dos .filet{
  position:absolute;left:31%;right:31%;top:88.5%;height:.45cqw;border-radius:1cqw;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
}
/* reperes d'angle : discrets, ils cadrent le motif */
.dos .coins i{position:absolute;width:3.4cqw;height:3.4cqw;
  border:.35cqw solid rgba(255,255,255,.14)}
.dos .coins i:nth-child(1){left:8.4cqw;top:8.4cqw;border-right:0;border-bottom:0}
.dos .coins i:nth-child(2){right:8.4cqw;top:8.4cqw;border-left:0;border-bottom:0}
.dos .coins i:nth-child(3){left:8.4cqw;bottom:8.4cqw;border-right:0;border-top:0}
.dos .coins i:nth-child(4){right:8.4cqw;bottom:8.4cqw;border-left:0;border-top:0}
.dos .micro{
  position:absolute;inset:-30%;transform:rotate(-24deg);opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='26'%3E%3Ctext x='0' y='8' font-family='monospace' font-size='5.4' letter-spacing='1.6' fill='%23ffffff'%3EBENJACORP %C2%B7 COLLEC %C2%B7%3C/text%3E%3Ctext x='36' y='20' font-family='monospace' font-size='5.4' letter-spacing='1.6' fill='%23ffffff'%3ECOLLEC %C2%B7 BENJACORP%3C/text%3E%3C/svg%3E");
  background-size:150px 26px;mix-blend-mode:overlay;
}
.dos .grain{
  position:absolute;inset:0;opacity:.35;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---- retournement ---- */
.pivot{position:relative;width:100%;aspect-ratio:734/1024;perspective:1500px;
  cursor:grab;touch-action:none}
.pivot:active{cursor:grabbing}
/* L'angle est pilote en JS (ressort amorti) : pas de transition CSS, elle
   entrerait en conflit avec l'inertie du relachement. */
.pivot .faces{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.pivot .faces>*{position:absolute;inset:0;backface-visibility:hidden}
.pivot .faces>.dos{transform:rotateY(180deg)}

/* ==========================================================================
   HOLOGRAPHIE — d'apres le pipeline de reference
   ========================================================================== */
/* ---- TEXTURE : papier presse + microtexte de securite ----
   Deux couches qui donnent la matiere d'une carte imprimee et cassent le
   cote "photo posee sur un fond". Le microtexte n'est lisible qu'en zoomant :
   c'est le detail qu'on decouvre en regardant la carte de pres. */
.carte .texture{
  position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:soft-light;opacity:.42;
}
/* Fines stries de pressage, orientees comme le foil */
.carte .texture::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(104deg,
    #FFFFFF00 0 2px,var(--verre-fort) 2px 3px,#FFFFFF00 3px 6px);
  mix-blend-mode:overlay;opacity:.5;
}
.carte .micro{
  position:absolute;inset:-30%;z-index:5;pointer-events:none;
  transform:rotate(-24deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='26'%3E%3Ctext x='0' y='8' font-family='monospace' font-size='5.4' letter-spacing='1.6' fill='%23ffffff'%3EBENJACORP %C2%B7 COLLEC %C2%B7%3C/text%3E%3Ctext x='36' y='20' font-family='monospace' font-size='5.4' letter-spacing='1.6' fill='%23ffffff'%3ECOLLEC %C2%B7 BENJACORP%3C/text%3E%3C/svg%3E");
  background-size:150px 26px;
  mix-blend-mode:overlay;opacity:.10;
}
/* Sur les hautes raretes le microtexte s'accroche davantage a la lumiere */
.carte.r-ultra .micro,.carte.r-legendaire .micro{opacity:.15;mix-blend-mode:color-dodge}

.carte .brillance,.carte .reflet{
  position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .35s;
}
/* MASQUE DE CONTOUR — le point cle.
   Sans lui, l'holographie passe par-dessus l'animal et le rend illisible.
   Sur une vraie carte holo, le foil epargne le sujet : il court sur le fond
   et sur le cadre. Le masque est donc transparent au centre de
   l'illustration et opaque sur les bords. */
.carte .brillance{
  background-image:
    repeating-linear-gradient(110deg,
      #EC4899 0%, #8B5CF6 4%, #3B82F6 8%, #22C55E 12%, #EAB308 16%, #EC4899 20%),
    repeating-linear-gradient(90deg,#5A5A5A 0 1.5px,#0A0A0A 1.5px 3px);
  background-size:400% 400%, auto;
  background-position:
    calc(((50% - var(--bg-x)) * 2.6) + 50%) calc(((50% - var(--bg-y)) * 3.5) + 50%),
    center;
  background-blend-mode:overlay;
  mix-blend-mode:color-dodge;
  filter:brightness(.95) contrast(1.1) saturate(1.25);
  -webkit-mask-image:radial-gradient(ellipse 54% 26% at 50% 28%,
    transparent 34%, rgba(0,0,0,.45) 66%, #000 100%);
  mask-image:radial-gradient(ellipse 54% 26% at 50% 28%,
    transparent 34%, rgba(0,0,0,.45) 66%, #000 100%);
}
/* Pleine illustration : le sujet occupe le haut de la carte, le masque suit. */
.carte.pleine .brillance{
  -webkit-mask-image:radial-gradient(ellipse 58% 30% at 50% 32%,
    transparent 38%, rgba(0,0,0,.4) 70%, #000 100%);
  mask-image:radial-gradient(ellipse 58% 30% at 50% 32%,
    transparent 38%, rgba(0,0,0,.4) 70%, #000 100%);
}
.carte .brillance::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    hsla(0,0%,70%,1) 0 3%, hsla(0,0%,0%,1) 3% 6%);
  background-size:200% 200%;
  background-position:calc(((50% - var(--bg-x)) * 1.6) + 50%) 50%;
  mix-blend-mode:hard-light;filter:brightness(1.15) contrast(1.1);opacity:.45;
}
/* Point chaud : adouci. A contrast(3.4) il brulait completement la photo. */
.carte .brillance::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0,0%,88%,.55) 0%, hsla(0,0%,76%,.08) 30%, hsl(0,0%,0%) 92%);
  mix-blend-mode:luminosity;filter:brightness(.7) contrast(2);opacity:.7;
}
.carte .reflet{
  background:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(190,100%,96%) 4%, hsla(255,20%,60%,.28) 40%, hsla(0,0%,0%,.4) 110%);
  mix-blend-mode:overlay;filter:brightness(.85) contrast(1.6);
  opacity:calc(var(--opa) * .75);
}
/* Dosage par rarete */
/* Dosage revu a la baisse : l'effet doit se voir sur le cadre et le fond,
   pas noyer la photo. */
.carte.r-rare       .brillance{opacity:calc(.14 + var(--opa) * .20)}
.carte.r-super      .brillance{opacity:calc(.18 + var(--opa) * .26)}
.carte.r-ultra      .brillance{opacity:calc(.22 + var(--opa) * .32)}
.carte.r-legendaire .brillance{opacity:calc(.26 + var(--opa) * .38)}
.carte.r-commun .reflet,.carte.r-peucommun .reflet{opacity:calc(var(--opa) * .42)}

/* PAS de mise en page alternative selon la taille.
   Une version « compacte » avait ete ajoutee sous 215px pour garder le texte
   lisible : la carte de la collection ne ressemblait donc plus a celle du
   booster. C'est le contraire de ce qu'on veut. Une vraie carte vue de loin
   a un petit texte illisible — c'est precisement ce qui la fait lire comme
   une carte. Un seul rendu, mis a l'echelle. */
.carte.r-legendaire{box-shadow:0 12px 40px #000A,0 0 28px #FFC46B38,0 0 0 1px #FFC46B50}
.carte.r-ultra{box-shadow:0 12px 38px #000A,0 0 22px #FB923C33,0 0 0 1px #FB923C44}
.carte:hover{box-shadow:0 20px 52px #000C,0 0 0 1px #FFFFFF26}

/* ==========================================================================
   ACCUEIL
   Reproche fonde : la page d'accueil d'un jeu de cartes ne montrait aucune
   carte — juste un rectangle plat dans un grand vide noir. Les cartes sont ce
   qu'on a de meilleur, elles passent devant.
   ========================================================================== */
/* Le hero etait un diptyque : le discours a gauche, les sachets relegues a
   droite dans un grand vide. Le regard n'avait pas de point de chute et le
   bouton d'ouverture vivait a l'oppose de l'objet qu'il ouvre. On empile :
   le texte annonce, la pile de sachets occupe le centre, l'action tombe
   juste dessous, les chiffres ferment la marche. Un seul axe de lecture. */
/* Le budget vertical est serre : sur un portable de 900 px de haut, le sachet
   ET le bouton doivent tenir au-dessus de la ligne de flottaison. Tout ce qui
   suit est calibre pour ca. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(12px,1.8vh,22px);padding:clamp(16px,3vh,36px) 0 clamp(14px,2.4vh,28px)}
.hero-txt{max-width:min(62ch,92vw)}
.surtitre{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2);font-weight:600;margin-bottom:14px}
.pastille-serie{background:var(--verre);border:1px solid var(--verre-bord);
  border-radius:99px;padding:3px 10px;letter-spacing:.1em;backdrop-filter:blur(10px);
  background-image:var(--iris);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.hero h1{font-size:clamp(30px,3.6vw,50px);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;margin:0 0 14px;text-wrap:balance}
.hero h1 em{font-style:normal;background:var(--iris);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--gris);font-size:clamp(13.5px,.95vw,15px);max-width:58ch;
  margin:0 auto;line-height:1.6;text-wrap:pretty}
/* Les chiffres ne sont plus un argument de vente en tete d'affiche : ils
   ferment la page, en une ligne fine, comme une mention de catalogue. */
.hero .chiffres{display:flex;gap:clamp(24px,3vw,44px);flex-wrap:wrap;justify-content:center;
  margin:0;opacity:.82}
.chiffres div b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.chiffres div span{font-size:10px;color:var(--gris2);letter-spacing:.13em;text-transform:uppercase}
.cta{display:inline-flex;align-items:center;gap:11px;
  background:var(--iris);background-size:220% 100%;background-position:0% 50%;
  color:#08090F;font-weight:700;font-size:16px;padding:15px 30px;border-radius:11px;
  letter-spacing:.01em;
  transition:transform .14s,background-position .6s cubic-bezier(.3,.9,.3,1),box-shadow .3s;
  box-shadow:0 10px 30px rgba(90,168,255,.22), inset 0 1px 0 rgba(255,255,255,.35)}
.cta:hover{background-position:100% 50%;box-shadow:0 12px 36px rgba(169,123,255,.32),
  inset 0 1px 0 rgba(255,255,255,.4)}
.cta:active{transform:scale(.975)}
.cta:disabled{background:var(--verre);color:var(--gris2);box-shadow:none;cursor:not-allowed}
.sous-cta{font-size:13px;color:var(--gris2)}

/* ---- l'action, juste sous la pile ---- */
.hero-agir{display:flex;flex-direction:column;align-items:center;gap:11px}

/* ---- LE SOCLE : la reserve se lit sous les sachets ----
   Le compte a rebours vivait en petit texte a l'autre bout de la page. Il
   descend sous la pile, avec une pastille par booster : le joueur voit son
   stock comme un objet, pas comme une phrase, et il voit la case suivante se
   remplir. C'est ce qui donne envie d'attendre — et de revenir. */
.socle{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  font-size:12.5px;color:var(--gris2);letter-spacing:.03em;min-height:16px}
.socle:empty{display:none}
.socle .jauge{display:flex;gap:4px}
.socle .jauge i{width:7px;height:7px;border-radius:50%;background:#FFFFFF1F;
  transition:background .35s,box-shadow .35s}
.socle .jauge i.plein{background:var(--iris-5);box-shadow:0 0 8px #FFC46B66}
.socle .jauge i.charge{animation:socle-charge 1.9s ease-in-out infinite}
@keyframes socle-charge{
  0%,100%{background:#FFFFFF1F;box-shadow:none}
  50%{background:#FFFFFF4D;box-shadow:0 0 8px #5AA8FF88}
}
.socle b{color:var(--txt);font-weight:750}
.socle.gagne{animation:socle-gagne .9s cubic-bezier(.2,.8,.3,1)}
@keyframes socle-gagne{
  0%{color:var(--iris-5);transform:scale(1.06)}
  100%{color:var(--gris2);transform:scale(1)}
}

/* ---- la scene : sachet + eventail de cartes ---- */
.scene{position:relative;display:grid;place-items:center;perspective:1600px;
  width:100%;min-height:clamp(330px,45vh,500px)}
.eventail{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.eventail .carte{position:absolute;width:clamp(122px,11.5vw,168px);
  transform-origin:50% 130%;box-shadow:0 18px 42px #000B;
  animation:pose-ev .9s cubic-bezier(.16,1,.3,1) backwards}
@keyframes pose-ev{from{opacity:0;transform:translateY(34px) rotate(0deg) scale(.88)}}

/* ---- le sachet devient un objet ---- */
.sachet{position:relative;width:clamp(168px,15vw,214px);aspect-ratio:5/7;border-radius:9px;
  cursor:pointer;z-index:5;overflow:hidden;animation:flotte 6s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,1.2,.35,1);
  box-shadow:0 26px 60px #000C, 0 0 0 1px #FFFFFF1A}
@keyframes flotte{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-13px) rotate(3deg)}
}
.sachet:hover{animation-play-state:paused;transform:translateY(-8px) scale(1.03)}
/* stries d'emballage + degrade : ca cesse d'etre un aplat */
.sachet .face{position:absolute;inset:0;
  background:
    repeating-linear-gradient(102deg,#00000026 0 2px,transparent 2px 5px),
    linear-gradient(158deg,#1A1630 0%,#3A2A64 26%,#5B3FA0 44%,#2A1F52 66%,#141026 100%)}
.sachet .foil{position:absolute;inset:-45%;
  background:linear-gradient(100deg,transparent 41%,#FFFFFF4D 47%,#FFFFFF1F 52%,transparent 60%);
  animation:eclair 4.5s linear infinite}
@keyframes eclair{from{transform:translateX(-58%)}to{transform:translateX(58%)}}
.sachet .contenu{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;text-align:center;padding:18px}
.sachet .emb{width:36px;height:36px;color:#E7D9AE;filter:drop-shadow(0 2px 6px #0009)}
.sachet .emb svg{width:100%;height:100%;display:block}
.sachet .g{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.01em;line-height:1}
.sachet .g i{font-style:normal;background:var(--iris);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sachet .zone{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#DCD3FF;
  border-top:1px solid #FFFFFF2E;padding-top:9px;margin-top:2px}
.sachet .cb{font-size:10px;color:#B7ACE0;letter-spacing:.1em}
.sachet .lisere{position:absolute;inset:0;border-radius:9px;pointer-events:none;
  border:1px solid #FFFFFF1F;
  box-shadow:inset 0 1px 0 #FFFFFF33, inset 0 -22px 40px #0000004D}

/* ---- bandeau d'apercu sous le pli ---- */
.bandeau{padding:clamp(22px,4vh,40px) 0 12px;border-top:1px solid var(--bord)}
.bandeau-tete{display:flex;align-items:baseline;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.bandeau-tete h2{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em}
.lien-tout{font-size:13px;color:var(--gris);font-weight:600;margin-left:auto;
  border-bottom:1px solid var(--bord);padding-bottom:2px;transition:.16s}
.lien-tout:hover{color:var(--txt);border-color:var(--iris-5)}
.defile{display:flex;gap:clamp(11px,1.3vw,18px);overflow-x:auto;padding-bottom:12px;
  scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.defile::-webkit-scrollbar{height:6px}
.defile::-webkit-scrollbar-thumb{background:var(--bord);border-radius:3px}
.defile .carte{flex:0 0 clamp(132px,13vw,182px)}

/* ==========================================================================
   OUVERTURE PLEIN ECRAN
   ========================================================================== */
#ouverture{position:fixed;inset:0;z-index:900;background:#06050Cf2;backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:22px;padding:20px}
#ouverture.on{display:flex}
#ouverture .lueur{position:absolute;inset:0;pointer-events:none;transition:background .6s;
  background:radial-gradient(circle at 50% 48%,var(--c)22 0%,transparent 62%)}

/* ==========================================================================
   L'AURA — LE FOND APPARTIENT A LA CARTE DU DESSUS
   Le tirage ne doit pas se lire dans un badge : il doit se SENTIR avant
   d'etre lu. Une intensite unique (--i) commande toutes les couches ; le
   rang la fixe, et le noir s'ouvre progressivement du commun a la
   legendaire. Un commun laisse la scene calme — c'est ce contraste qui rend
   la legendaire spectaculaire, pas la puissance absolue de l'effet.
   ========================================================================== */
.aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* LES PALIERS. Chaque rang est dose a la main, et volontairement PAS sur une
   rampe reguliere : entre commun et rare on ajoute a peine, entre ultra et
   legendaire on ouvre en grand. Une progression lineaire aurait rendu les
   hautes raretes previsibles ; ce sont les sauts qui font l'evenement. */
.rang-0 .aura .a-halo{opacity:.09}
.rang-1 .aura .a-halo{opacity:.13}
.rang-2 .aura .a-halo{opacity:.2}
.rang-3 .aura .a-halo{opacity:.29}
.rang-3 .aura .a-rais{opacity:.14}
.rang-4 .aura .a-halo{opacity:.36}
.rang-4 .aura .a-rais{opacity:.23}
.rang-4 .aura .a-voile{opacity:.17}
.rang-5 .aura .a-halo{opacity:.45}
.rang-5 .aura .a-rais{opacity:.33}
.rang-5 .aura .a-voile{opacity:.3}

/* le halo : la couleur du rang respire derriere la carte */
.aura .a-halo{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;
  border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--c) 0%,transparent 44%);
  opacity:0;filter:blur(24px);
  transition:opacity .7s,background .7s;
  animation:a-respire 7.5s ease-in-out infinite}
@keyframes a-respire{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.13)}
}
/* les rais : ils n'apparaissent qu'a partir des hautes raretes */
.aura .a-rais{position:absolute;left:50%;top:50%;width:210vmax;height:210vmax;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .7s;
  background:repeating-conic-gradient(from 0deg,
    transparent 0deg 9deg,var(--c) 10deg 12.5deg,transparent 13.5deg 22deg);
  -webkit-mask-image:radial-gradient(circle,transparent 8%,#000 26%,transparent 54%);
  mask-image:radial-gradient(circle,transparent 8%,#000 26%,transparent 54%);
  animation:a-tourne 46s linear infinite}
@keyframes a-tourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* le voile : les bords de l'ecran se teintent — l'aura deborde du cadre */
.aura .a-voile{position:absolute;inset:0;mix-blend-mode:screen;
  opacity:0;transition:opacity .7s;
  background:radial-gradient(circle at 50% 50%,transparent 36%,var(--c) 128%)}

/* le coup : la legendaire frappe une fois, tout l'ecran l'encaisse */
#ouverture.coup .aura{animation:aura-coup .8s cubic-bezier(.2,.8,.3,1)}
@keyframes aura-coup{
  0%{filter:brightness(3.4) saturate(1.7)}
  100%{filter:brightness(1) saturate(1)}
}

/* ---- LE SACRE : ce que la carte fait au monde en arrivant ----
   Monte dans le paquet, DERRIERE la carte : la lumiere vient de dessous
   l'objet, elle ne se colle pas par-dessus. Les couches s'ajoutent avec le
   rang — onde, rais, colonne, eclair — puis la scene se nettoie d'elle-meme. */
.sacre{position:absolute;inset:-45%;pointer-events:none;overflow:visible;z-index:0}
.sacre i{position:absolute;left:50%;top:50%;display:block}
.sacre .s-onde{width:34%;height:34%;border-radius:50%;opacity:0;
  border:3px solid var(--c);
  box-shadow:0 0 26px var(--c), inset 0 0 26px var(--c);
  animation:s-onde .95s cubic-bezier(.16,.8,.3,1) forwards}
.sacre .s-onde.d2{animation-delay:.14s}
@keyframes s-onde{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18);border-width:6px}
  16%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.75);border-width:.5px}
}
.sacre .s-rais{width:150%;height:150%;opacity:0;
  background:repeating-conic-gradient(from 0deg,
    transparent 0deg 6deg,var(--c) 7deg 9.5deg,transparent 10.5deg 17deg);
  -webkit-mask-image:radial-gradient(circle,transparent 10%,#000 28%,transparent 58%);
  mask-image:radial-gradient(circle,transparent 10%,#000 28%,transparent 58%);
  animation:s-rais 1.25s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes s-rais{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(0deg)}
  18%{opacity:.6}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.05) rotate(17deg)}
}
.sacre .s-colonne{width:24%;height:180%;opacity:0;filter:blur(20px);
  background:linear-gradient(180deg,transparent,var(--c) 20%,#FFFFFF 50%,var(--c) 80%,transparent);
  animation:s-colonne 1.5s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes s-colonne{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5,.3)}
  22%{opacity:.6}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5,1)}
}
.sacre .s-eclair{width:2px;height:2px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFFFFF 0%,var(--c) 24%,transparent 66%);
  animation:s-eclair .62s cubic-bezier(.1,.9,.3,1) forwards}
@keyframes s-eclair{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  10%{opacity:.85;transform:translate(-50%,-50%) scale(130)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(230)}
}
/* les escarbilles : elles montent de sous la carte et s'eteignent en l'air */
.sacre b{position:absolute;left:var(--sx);top:64%;
  width:var(--st);height:var(--st);border-radius:50%;background:var(--c);
  box-shadow:0 0 8px var(--c), 0 0 20px var(--c);
  animation:s-mote var(--sm) cubic-bezier(.25,.7,.4,1) var(--sd) both}
@keyframes s-mote{
  0%{opacity:0;transform:translateY(0) scale(.4)}
  16%{opacity:1;transform:translateY(-14px) scale(1)}
  100%{opacity:0;transform:translateY(var(--sh)) scale(.2)}
}

/* Sobriete : l'aura garde ses INTENSITES — c'est elle qui dit le rang — mais
   perd tout mouvement perpetuel. Le sacre, lui, ne part meme pas (voir
   `sacrer`) : une salve d'etincelles n'a pas de version immobile acceptable. */
@media(prefers-reduced-motion:reduce){
  .aura .a-halo,.aura .a-rais,#ouverture.coup .aura,
  .rang-mot,.rang-mot.r3,.rang-mot.r4,.rang-mot.r5{animation:none}
}
/* Taille bornee par la HAUTEUR aussi : sinon la carte deborde et se fait
   couper par le conteneur flex sur les ecrans peu hauts. */
.paquet{position:relative;z-index:1;width:min(330px,72vw,48vh);aspect-ratio:734/1024;
  perspective:1400px}

/* Le "slot" porte le GESTE (translation, rotation de balayage, empilement).
   La .carte a l'interieur ne porte que l'INCLINAISON holographique.
   Les deux ecrivaient dans transform sur le meme element : la carte sautait
   et se faisait rogner des qu'on la balayait. */
.slot{position:absolute;inset:0;touch-action:none;cursor:grab;will-change:transform}
.slot:active{cursor:grabbing}
.slot .carte{position:absolute;inset:0}
.slot.dessous1{transform:translateY(12px) scale(.955);filter:brightness(.45)}
.slot.dessous2{transform:translateY(22px) scale(.915);filter:brightness(.26)}
.slot.pose{transition:transform .42s cubic-bezier(.2,1,.3,1),filter .42s}
.slot.arrive{animation:arrive .5s cubic-bezier(.16,1,.3,1) backwards}
@keyframes arrive{from{opacity:0;transform:translateY(56px) scale(.88)}}
.slot.part{transition:transform .32s cubic-bezier(.4,0,1,1),opacity .32s;
  transform:translateX(var(--px,-130%)) rotate(var(--pr,-16deg));opacity:0;
  pointer-events:none}
/* Le ruban vit au-dessus du paquet, pas dans la carte : place en absolu
   dans un conteneur en overflow:hidden, il etait rogne. */
.ruban{
  background:var(--iris-5);color:#0A0B0F;font-size:11.5px;font-weight:700;
  letter-spacing:.11em;padding:5px 15px;border-radius:99px;
  box-shadow:0 6px 18px #FFC46B44;visibility:hidden;
  animation:apparait .4s cubic-bezier(.2,1.5,.4,1) backwards;
}
.ruban.vu{visibility:visible}
@keyframes apparait{from{opacity:0;transform:translateY(9px) scale(.9)}}
.progression{display:flex;gap:5px;width:min(330px,72vw);position:relative;z-index:1}
.progression i{flex:1;height:3px;border-radius:2px;background:#FFFFFF1F;transition:background .3s}
.progression i.vu{background:var(--iris-5)}
.indice{font-size:13px;color:var(--gris2);letter-spacing:.06em;position:relative;z-index:1}

/* ---- LE MOT DU RANG ----
   L'aura donne la sensation ; le mot donne la certitude. Le joueur doit
   pouvoir NOMMER ce qu'il vient de tirer sans aller lire la fiche. Un commun
   se murmure — cerne gris, texte efface ; une legendaire se frappe — pastille
   pleine, couleur du rang, halo qui bat. La difference de traitement EST
   l'information. */
.rang-ligne{display:flex;align-items:center;gap:10px;min-height:27px;
  position:relative;z-index:1}
.rang-mot{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  padding:5px 14px;border-radius:99px;color:var(--c,#8E96AC);
  border:1px solid #FFFFFF26;background:#FFFFFF0A;white-space:nowrap;
  animation:mot-parait .46s cubic-bezier(.2,1.5,.4,1) backwards}
.rang-mot:empty{display:none}
@keyframes mot-parait{from{opacity:0;transform:translateY(8px) scale(.92)}}
.rang-mot.r2{border-color:var(--c);background:#FFFFFF10}
.rang-mot.r3,.rang-mot.r4,.rang-mot.r5{
  color:#07080D;font-weight:800;background:var(--c);border-color:transparent;
  box-shadow:0 0 22px var(--c), 0 6px 20px #0009;
  animation:mot-frappe .6s cubic-bezier(.18,1.5,.35,1) backwards}
@keyframes mot-frappe{
  0%{opacity:0;transform:translateY(10px) scale(.6);filter:brightness(2.4)}
  60%{opacity:1;transform:translateY(0) scale(1.09)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.rang-mot.r5{animation:mot-frappe .6s cubic-bezier(.18,1.5,.35,1) backwards,
  mot-bat 2s ease-in-out .6s infinite}
@keyframes mot-bat{
  0%,100%{box-shadow:0 0 22px var(--c), 0 6px 20px #0009}
  50%{box-shadow:0 0 40px var(--c), 0 0 74px var(--c), 0 6px 20px #0009}
}

/* ---------------- butin ---------------- */
#butin{position:fixed;inset:0;z-index:950;background:#06050Cf7;backdrop-filter:blur(12px);
  display:none;align-items:center;justify-content:center;flex-direction:column;padding:22px}
#butin.on{display:flex}
#butin h2,#butin .st,#butin .rangee,#butin .actions{position:relative;z-index:1}
#butin h2{font-size:clamp(24px,3vw,34px);font-weight:900;margin:0;letter-spacing:-.03em}
/* Le titre porte la meilleure carte du lot : a partir d'ultra il cesse d'etre
   blanc et prend la couleur du rang, halo compris. */
#butin.rang-4 h2,#butin.rang-5 h2{
  background:linear-gradient(96deg,#FFFFFF,var(--c) 48%,#FFFFFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px var(--c))}
#butin .st{color:var(--gris);font-size:14px;margin-top:6px}
.rangee{display:flex;gap:clamp(8px,1.4vw,18px);margin:30px 0;max-width:1180px;width:100%;
  justify-content:center}
.rangee .carte{flex:1 1 0;min-width:0;max-width:212px;
  animation:monte .45s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes monte{from{opacity:0;transform:translateY(30px) scale(.9)}}

/* ---- la barre de fin ----
   Meme matiere que le reste du site : verre depoli, bord fin, pastilles
   rondes ; et la seule action qui relance la boucle porte l'irise du site,
   pas un aplat orange isole du reste. */
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.actions button{padding:13px 25px;border-radius:99px;font-weight:650;font-size:14.5px;
  color:var(--gris);border:1px solid var(--verre-bord);background:var(--verre);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 #FFFFFF12, 0 8px 22px #00000040;
  transition:transform .16s,color .16s,border-color .16s,background .16s,box-shadow .3s}
.actions button:hover{color:var(--txt);background:#FFFFFF16;
  border-color:#FFFFFF38;transform:translateY(-2px)}
.actions button:active{transform:translateY(0) scale(.98)}
.actions button.pri{color:#08090F;font-weight:750;border-color:transparent;
  background:var(--iris);background-size:220% 100%;background-position:0% 50%;
  box-shadow:0 10px 30px rgba(90,168,255,.26), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s,background-position .6s cubic-bezier(.3,.9,.3,1),box-shadow .3s}
.actions button.pri:hover{background-position:100% 50%;transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(169,123,255,.34), inset 0 1px 0 rgba(255,255,255,.42)}
.actions button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.actions button:disabled:hover{transform:none;box-shadow:none}

/* ==========================================================================
   COLLECTION
   ========================================================================== */
.barre-outils{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 20px;position:sticky;top:calc(var(--entete) + 12px);z-index:400;
  margin:14px 0 18px;border-radius:16px;
  background:rgba(13,15,23,.62);backdrop-filter:blur(20px) saturate(165%);
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  border:1px solid var(--verre-bord);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.35)}
.barre-outils h2{font-size:26px;font-weight:800;margin:0;letter-spacing:-.02em}
.progres{flex:1;min-width:180px;max-width:340px}
.progres .rail{height:6px;background:rgba(255,255,255,.07);border-radius:4px;
  overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.progres .rail i{display:block;height:100%;border-radius:4px;transition:width .7s;
  background:linear-gradient(90deg,var(--iris-1),var(--iris-2) 34%,var(--iris-3) 66%,var(--iris-4));
  box-shadow:0 0 12px rgba(90,168,255,.5)}
.progres .lg{display:flex;justify-content:space-between;font-size:12px;color:var(--gris2);
  margin-bottom:5px}
.filtres{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.filtres button{flex:0 0 auto;padding:8px 15px;border-radius:99px;font-size:13px;font-weight:600;
  border:1px solid var(--verre-bord);color:var(--gris);transition:.18s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;background:var(--verre);
  backdrop-filter:blur(10px)}
.filtres button .ic{width:15px;height:15px}
.filtres button:hover{color:var(--txt);border-color:rgba(255,255,255,.22)}
.filtres button.on{color:#08090F;border-color:transparent;
  background:var(--iris);box-shadow:0 4px 16px rgba(90,168,255,.28)}
.filtres button.on em{background:rgba(0,0,0,.18);color:inherit}

/* ---- fil d'Ariane de l'arbre ---- */
.fil{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 12px;font-size:13.5px}
.fil button{color:var(--gris);transition:color .16s}
.fil button:hover{color:var(--txt);text-decoration:underline}
.fil b{font-weight:700}
.fil .sep{color:var(--gris2)}
.filtres button .fleche{color:var(--gris2);font-size:15px;margin-left:-1px}
.filtres button.on .fleche{color:inherit}

/* ---- vitrine : ce qu'on possede, mis en avant ---- */
.etagere{margin-bottom:26px}
.etagere-tete{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.etagere-tete h3{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
.etagere-tete span{font-size:12.5px;color:var(--gris2)}
.piste{display:flex;gap:clamp(10px,1.2vw,18px);overflow-x:auto;padding-bottom:10px;
  scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.piste::-webkit-scrollbar{height:6px}
.piste::-webkit-scrollbar-thumb{background:var(--bord);border-radius:3px}
.piste .case{flex:0 0 clamp(146px,14vw,214px)}

/* ---- reglages de tri ---- */
.reglages{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:4px 0 18px}
.tris{display:flex;gap:4px;background:var(--verre);border:1px solid var(--verre-bord);
  border-radius:11px;padding:3px;backdrop-filter:blur(12px)}
.tris button{padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:600;
  color:var(--gris);transition:.16s}
.tris button:hover{color:var(--txt)}
.tris button.on{background:var(--iris);color:#08090F;
  box-shadow:0 3px 12px rgba(90,168,255,.26)}
.bascule{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gris);
  cursor:pointer;user-select:none}
.bascule input{appearance:none;width:34px;height:19px;border-radius:99px;
  background:#2A2E3A;border:1px solid var(--bord);position:relative;cursor:pointer;
  transition:background .2s}
.bascule input::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:var(--gris);transition:.2s}
.bascule input:checked{background:var(--iris);border-color:transparent;
  box-shadow:0 0 12px rgba(90,168,255,.35)}
.bascule input:checked::after{left:17px;background:#08090F}
.bascule:hover{color:var(--txt)}

/* compteur de possession sur chaque filtre */
.filtres button em{font-style:normal;font-size:11px;font-weight:700;color:var(--gris2);
  background:#FFFFFF0F;border-radius:99px;padding:1px 7px;margin-left:2px}
.filtres button.on em{background:#00000024;color:inherit}

.mult{position:absolute;top:7px;left:7px;z-index:10;background:#0A0B0FDD;
  border:1px solid var(--bord);font-size:11px;font-weight:700;padding:2px 7px;
  border-radius:99px}

#fin-liste{display:flex;justify-content:center;margin-top:26px}
.plus{padding:12px 26px;border-radius:10px;border:1px solid var(--bord);
  font-size:14px;font-weight:600;color:var(--gris);transition:.16s}
.plus:hover{color:var(--txt);border-color:#3B4152;background:var(--verre)}

.classeur{
  display:grid;gap:clamp(10px,1.3vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(146px,15vw,232px),1fr));
}
.case{position:relative;cursor:pointer}
.case .carte{pointer-events:none}
/* Non obtenue : on montre le dos. Un classeur, ce sont des cartes face
   cachee — pas des trous. */
.case.absente{cursor:default}
.case.absente .dos{filter:saturate(.32) brightness(.46);box-shadow:0 8px 22px #0007}
.case.absente::after{
  content:'';position:absolute;inset:0;border-radius:4.6%/3.3%;
  background:rgba(7,8,14,.55);pointer-events:none;
}
.case .etiq{margin-top:7px;font-size:12px;color:var(--gris2);text-align:center;
  font-family:"JetBrains Mono",monospace}

/* ==========================================================================
   FICHE
   ========================================================================== */
#fiche{position:fixed;inset:0;z-index:1000;background:#06050Cf2;backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,40px)}
#fiche.on{display:flex}
.fiche-boite{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,440px);
  gap:clamp(20px,3vw,44px);align-items:center;max-height:92vh}
.fiche-info h2{font-size:clamp(24px,2.6vw,34px);font-weight:900;margin:0;letter-spacing:-.03em}
.fiche-info .lat{font-style:italic;color:var(--gris);margin-top:4px}
.fiche-info .puces{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.puce{padding:6px 13px;border-radius:99px;font-size:12px;font-weight:700;
  border:1px solid var(--c);color:var(--c);display:inline-flex;align-items:center;gap:6px}
.puce .ic{width:14px;height:14px}.puce .sym-g svg{width:11px;height:11px}
.puce.n{border-color:var(--bord);color:var(--gris)}
.fiche-info .tab{border-top:1px solid var(--bord);margin:6px 0 16px}
.fiche-info .tab div{display:flex;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--bord);font-size:14px}
.fiche-info .tab span{color:var(--gris)}
.fiche-info .tab b{font-family:"JetBrains Mono",monospace;font-weight:600}
.fiche-info p{color:#C5BEDE;font-size:14.5px;line-height:1.65}
.fiche-info a{color:var(--iris-2);font-weight:600;text-decoration:none;font-size:14px}
.fiche-info a:hover{text-decoration:underline}
.fiche-info .src{font-size:11.5px;color:var(--gris2);margin-top:16px;line-height:1.5}
.astuce-pivot{text-align:center;font-size:11.5px;color:var(--gris2);margin-top:12px;
  letter-spacing:.04em}
.fermer{position:fixed;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  background:var(--verre-fort);font-size:17px;z-index:5}
.fermer:hover{background:#FFFFFF22}

/* ==========================================================================
   MARCHÉ
   ========================================================================== */
.avis{display:flex;gap:12px;align-items:flex-start;border-radius:14px;
  padding:14px 17px;margin-bottom:18px;font-size:13px;line-height:1.55;
  color:#C6D6EE;background:var(--verre);border:1px solid var(--verre-bord);
  backdrop-filter:blur(14px);position:relative;overflow:hidden}
.avis::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--iris)}
.avis b{color:var(--iris-1)}
.solde{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.solde .gem,.annonce .gem{width:13px;height:13px;transform:rotate(45deg);border-radius:2px;
  background:linear-gradient(135deg,var(--iris-1),var(--iris-2));
  box-shadow:0 0 9px rgba(90,168,255,.6)}

.annonces{display:grid;gap:clamp(10px,1.3vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,15vw,208px),1fr))}
.annonce{background:var(--verre);border:1px solid var(--verre-bord);border-radius:15px;
  padding:11px;display:flex;flex-direction:column;gap:9px;backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.annonce:hover{border-color:rgba(255,255,255,.2);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 14px 34px rgba(0,0,0,.4)}
.annonce .haut{cursor:pointer}
.annonce .qui{font-size:11px;color:var(--gris2);display:flex;justify-content:space-between;
  align-items:center;gap:6px}
.annonce .qui b{color:var(--gris);font-weight:600}
.annonce .prix{display:flex;align-items:center;justify-content:space-between;gap:8px}
.annonce .prix .v{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:15px}
.annonce button{padding:8px 12px;border-radius:9px;font-size:12.5px;font-weight:700;
  background:var(--iris-5);color:#0A0B0F;white-space:nowrap}
.annonce button:disabled{background:#221E36;color:var(--gris2);cursor:not-allowed}

.doublons{display:grid;gap:clamp(10px,1.3vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,14vw,190px),1fr))}
.dbl{position:relative;display:flex;flex-direction:column;gap:8px}
.dbl .nb{position:absolute;top:7px;left:7px;z-index:10;background:#07060DDD;
  border:1px solid var(--bord);color:var(--txt);font-size:11px;font-weight:800;
  padding:3px 8px;border-radius:99px}
.dbl .acts{display:flex;gap:7px}
.dbl .acts button{flex:1;padding:8px 6px;border-radius:9px;font-size:12px;font-weight:700;
  border:1px solid var(--bord);color:var(--gris)}
.dbl .acts button:hover{color:var(--txt);border-color:#3B3555}
.dbl .acts button.pri{background:var(--iris-5);color:#0A0B0F;border:0}

.vide-msg{text-align:center;color:var(--gris2);padding:60px 20px;font-size:14px;
  line-height:1.75;border:1px dashed var(--verre-bord);border-radius:16px;
  background:var(--verre)}

/* ==========================================================================
   SÉRIES
   ========================================================================== */
.bloc-serie{border:1px solid var(--verre-bord);border-radius:22px;
  padding:clamp(18px,2.4vw,30px);margin-bottom:20px;position:relative;overflow:hidden;
  background:var(--verre);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.bloc-serie::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 340px at 88% -14%,var(--acc,#5AA8FF)1F,transparent 70%)}
.bloc-serie .tete{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;position:relative}
.bloc-serie .num{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris2)}
.bloc-serie h3{font-size:clamp(24px,2.8vw,36px);font-weight:900;letter-spacing:-.03em;margin:2px 0 0}
.bloc-serie p{color:var(--gris);max-width:62ch;margin:10px 0 0;font-size:14.5px}
.etat{margin-left:auto;padding:7px 15px;border-radius:99px;font-size:12px;font-weight:800;
  letter-spacing:.06em;white-space:nowrap}
.etat.ok{background:#22C55E1F;color:#4ADE80;border:1px solid #22C55E44}
.etat.bientot{background:#FB923C1F;color:#FDBA74;border:1px solid #FB923C44}
.bloc-serie .chif{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px;position:relative}
.bloc-serie .chif div b{display:block;font-size:23px;font-weight:800}
.bloc-serie .chif div span{font-size:11px;color:var(--gris2);letter-spacing:.1em;text-transform:uppercase}
.date-sortie{font-family:"JetBrains Mono",monospace;font-size:clamp(26px,3.4vw,42px);
  font-weight:700;letter-spacing:.04em;
  color:var(--iris-5)}
.apercu{display:flex;gap:clamp(9px,1.2vw,16px);margin-top:22px;overflow-x:auto;
  padding-bottom:8px;scrollbar-width:none;position:relative}
.apercu::-webkit-scrollbar{display:none}
.apercu .carte{flex:0 0 clamp(126px,13vw,170px)}
/* Verrouillage : on montre la silhouette, pas la carte */
.verrou{position:relative;flex:0 0 clamp(126px,13vw,170px)}
.verrou .carte{filter:saturate(.25) brightness(.5) blur(1.6px);pointer-events:none}
.verrou .cad{position:absolute;inset:0;display:grid;place-items:center;border-radius:5%/3.6%;
  background:#07060D66;backdrop-filter:blur(1px)}
.verrou .cad svg{width:26px;height:26px;color:#CBBFF2;opacity:.85}

/* ==========================================================================
   DOCUMENT LÉGAL
   ========================================================================== */
.etroit{max-width:860px}
.doc section{border-top:1px solid var(--bord);padding:26px 0}
.doc section:first-child{border-top:0;padding-top:6px}
.doc h3{font-size:18px;font-weight:700;margin:0 0 14px;letter-spacing:-.01em}
.doc p{color:var(--gris);font-size:14.5px;line-height:1.7;margin:0 0 12px}
.doc a{color:var(--iris-2);text-decoration:none}
.doc a:hover{text-decoration:underline}
.doc dl{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:9px 22px;margin:0}
.doc dt{font-size:12.5px;color:var(--gris2);letter-spacing:.03em;padding-top:2px}
.doc dd{margin:0;font-size:14.5px;color:var(--txt)}
.doc .rappel{border-left:2px solid var(--bord);padding-left:14px;font-size:13.5px;
  color:var(--gris2);margin-top:14px}
.doc .alerte{border:1px solid #C0703C55;background:#C0703C0F;border-radius:10px;
  padding:15px 17px;font-size:14px;line-height:1.65;color:#E2C7B2;margin-top:18px}
.doc .alerte b{color:#E8A87C}
.doc .maj{font-size:12.5px;color:var(--gris2);border-top:1px solid var(--bord);
  padding-top:18px;margin-top:8px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris2);font-weight:600;padding:0 12px 10px 0;border-bottom:1px solid var(--bord)}
.tbl td{padding:10px 12px 10px 0;border-bottom:1px solid #1A1D25;color:var(--gris)}
.tbl .num{text-align:right;font-family:"JetBrains Mono",monospace;color:var(--txt)}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;
  white-space:nowrap}
.tag.ok{background:#5E9B6E1F;color:#7FBE8D;border:1px solid #5E9B6E44}
.tag.ko{background:#C0703C1F;color:#D9946A;border:1px solid #C0703C44}

/* ---------------- pied de page ---------------- */
.pied-liens{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.pied-liens button,.pied-liens a{font-size:13px;color:var(--gris);text-decoration:none;
  transition:color .16s}
.pied-liens button:hover,.pied-liens a:hover{color:var(--txt)}
.pied-note{font-size:12px;color:var(--gris2);max-width:620px;margin:0 auto;line-height:1.6}

@media(max-width:620px){ .doc dl{grid-template-columns:1fr;gap:2px 0}
  .doc dt{margin-top:10px} .tbl{font-size:12.5px} }

/* ---------------- atlas ---------------- */
/* Globe orthographique : aucune donnee cartographique a charger, et la sphere
   colle a l'identite optique. Les releves de la collection s'y posent, et on
   masque ceux de la face cachee. */
.globe-boite{position:relative;max-width:760px;margin:0 auto;aspect-ratio:1;
  display:grid;place-items:center}
.globe-boite::before{content:'';position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,
    rgba(90,168,255,.16),rgba(169,123,255,.09) 42%,transparent 70%);
  filter:blur(28px)}
#globe{width:100%;height:100%;display:block;cursor:grab;touch-action:none;position:relative}
#globe:active{cursor:grabbing}
.globe-vide{position:absolute;text-align:center;color:var(--gris2);font-size:14px;
  line-height:1.7;pointer-events:none}
.legende{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:18px;
  font-size:12.5px;color:var(--gris)}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}

footer{border-top:1px solid var(--bord);padding:28px clamp(14px,3vw,34px);
  text-align:center;color:var(--gris2);font-size:13px}
footer a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--iris-5);font-weight:600}

.chargement{position:fixed;inset:0;display:grid;place-items:center;background:var(--fond);
  z-index:2000;color:var(--gris2);font-size:13px;letter-spacing:.18em;text-transform:uppercase}

/* ---------------- tablette ---------------- */
@media(max-width:1000px){
  /* Le hero est deja empile et centre : il n'y a plus de diptyque a defaire. */
  .fiche-boite{grid-template-columns:minmax(0,300px);overflow-y:auto;justify-items:center}
  .fiche-info{max-width:520px}
}
/* ---------------- mobile ---------------- */
@media(max-width:620px){
  :root{--entete:56px}
  /* backdrop-filter cree un bloc conteneur : la nav "fixed" se collerait au
     header au lieu du bas de l'ecran. On le retire ici. */
  header{backdrop-filter:none;background:#08070F}
  header nav{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;background:#0A0812f2;
    backdrop-filter:blur(14px);
    border-top:1px solid var(--bord);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index:600}
  header nav button{flex:1;font-size:12px;padding:9px 4px;border-radius:8px;text-align:center}
  .vue{padding-bottom:96px}
  .compteur .n{display:none}
  .reserve-mini em{display:none}
  .logo .mot i{display:none}          /* "· Série 1" mange la largeur */
  .logo{gap:8px} .logo .marque{width:24px;height:24px} .logo .mot{font-size:17px}
  .classeur{grid-template-columns:repeat(2,1fr)}
  .piste .case{flex:0 0 46%}
  .rangee{flex-wrap:wrap;gap:8px}
  .rangee .carte{flex:0 0 calc(33.333% - 6px);max-width:none}
  .barre-outils{top:var(--entete)}
}