/* cartes/jeu.css — le site de Philo TCG.
   Net et contemporain : un fond uni (presque noir, ou blanc cassé), UNE police
   (Geist), de grands titres serrés, des panneaux à peine détachés du fond, et
   une seule fantaisie — l'irisé du logo et du booster. Les cartes font la
   couleur ; le site ne leur dispute rien.

   La direction « librairie » (bois, ardoise, écriture à la main) a été
   essayée et refusée : ne pas y revenir. Pas de skeuomorphisme, pas de police
   manuscrite, pas de serif sur le site.

   Deux modes sur <html data-mode> : « sombre » et « clair ». L'ouverture d'un
   booster et la fiche d'une carte sont sombres dans les deux. */

:root{
  --bg:#faf9f7; --bg2:#ffffff; --panel:#ffffff; --survol:rgba(12,12,16,.05);
  --txt:#0c0c10; --doux:#5d5c66; --bord:rgba(12,12,16,.1); --bord2:rgba(12,12,16,.28);
  --ombre:0 1px 2px rgba(12,12,16,.05), 0 12px 32px -16px rgba(12,12,16,.18);
  --aurore:.55;
  --holo:linear-gradient(120deg,#8ea2ff,#d7a6ff 24%,#ffb3c7 44%,#ffd9a0 62%,#a8f0c6 80%,#8fd3ff);
  --vif:linear-gradient(100deg,#4f5dff,#a63dff 38%,#ff3d86 70%,#ff7a2f);
  --f:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --courbe:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
html[data-mode="sombre"]{
  --bg:#0b0b0e; --bg2:#141419; --panel:rgba(255,255,255,.045); --survol:rgba(255,255,255,.07);
  --txt:#f4f3ef; --doux:#a5a4af; --bord:rgba(255,255,255,.1); --bord2:rgba(255,255,255,.28);
  --ombre:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.8);
  --aurore:.5;
  --vif:linear-gradient(100deg,#8c96ff,#c98bff 38%,#ff7fae 70%,#ffa56b);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
/* Le corps est TRANSPARENT : le fond de la page est celui de <html>, et le canevas (z-index -1) passe entre les deux. */
body{margin:0; background:transparent; color:var(--txt); font:400 16px/1.5 var(--f); -webkit-font-smoothing:antialiased; min-height:100dvh; overflow-x:clip}
/* LE FOND : un canevas de nappes irisées qui dérivent et suivent la souris
   (jeu.js, fond()). Dessiné tout petit puis flouté : c'est ce qui le rend doux. */
#fond{position:fixed; inset:-8%; width:116%; height:116%; z-index:-1; pointer-events:none; filter:blur(60px) saturate(1.25); opacity:var(--aurore)}
h1,h2,p,ul{margin:0} ul{padding:0; list-style:none}
button,input,select{font:inherit; color:inherit}
a{color:inherit}
::selection{background:#a63dff; color:#fff}
:focus-visible{outline:2px solid var(--txt); outline-offset:3px; border-radius:6px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.evit{position:absolute; left:12px; top:-60px; background:var(--txt); color:var(--bg); padding:8px 14px; border-radius:8px; z-index:50; font-weight:600}
.evit:focus{top:10px}
[hidden]{display:none !important}

/* ---------------------------------------------------------------- la tête */
.tete{position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:12px clamp(16px,4vw,44px); background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--bord)}
.marque{display:inline-flex; align-items:center; gap:10px; text-decoration:none; min-height:40px; justify-self:start}
/* Le logo : la pièce à la chouette. Au survol elle fait un tour sur elle-même, en vraie 3D. */
.marque{perspective:500px}
.logo{display:block; width:44px; height:44px; flex:none; transition:transform 1s var(--courbe)}
.marque:hover .logo{transform:rotateY(360deg)}
.marque b{font-weight:800; font-size:1.22rem; letter-spacing:-.045em; display:inline-flex; align-items:center; gap:.42em}
.marque i{font-style:normal; font-weight:700; font-size:.58em; letter-spacing:.06em; padding:.3em .55em; border-radius:.55em; background:var(--txt); color:var(--bg)}
.onglets{display:flex; gap:2px; padding:4px; border-radius:999px; background:var(--panel); border:1px solid var(--bord)}
.onglets a{display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; text-decoration:none;
  font-weight:500; font-size:.9rem; color:var(--doux); transition:background .18s,color .18s}
.onglets svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.onglets a:hover{color:var(--txt)}
.onglets a[aria-current]{color:var(--bg); background:var(--txt)}
.tete-d{display:flex; align-items:center; gap:8px; justify-self:end}
.mode,.cpt{display:flex; align-items:center; gap:8px; min-height:40px; border-radius:999px; border:1px solid var(--bord); background:var(--panel); cursor:pointer;
  font-weight:500; font-size:.88rem; transition:border-color .18s}
.mode{width:40px; justify-content:center; padding:0} .cpt{padding:8px 15px; max-width:220px}
.mode:hover,.cpt:hover{border-color:var(--bord2)}
.mode svg,.cpt svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.m-soir{display:none} html[data-mode="sombre"] .m-soir{display:block} html[data-mode="sombre"] .m-jour{display:none}
.cpt span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

main{padding:clamp(28px,5vw,64px) clamp(16px,4vw,44px) 110px; max-width:1280px; margin:0 auto}
.js .vue:not(.on){display:none}
.vue + .vue{margin-top:80px} .js .vue + .vue{margin-top:0}
h1{font-weight:800; font-size:clamp(2.2rem,5vw,3.4rem); line-height:.98; letter-spacing:-.05em}
h2{font-weight:700; font-size:1.25rem; line-height:1.1; letter-spacing:-.03em}
.vue-t{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.vue-c{color:var(--doux); font-variant-numeric:tabular-nums}
.vue-c b{color:var(--txt); font-weight:700; font-size:1.2rem}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 22px; border-radius:999px;
  border:1px solid var(--bord2); background:transparent; color:var(--txt); font-weight:600; font-size:.94rem; letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s}
.btn:hover{background:var(--survol); border-color:var(--txt)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--txt); border-color:var(--txt); color:var(--bg)}
.btn.pri:hover{background:var(--txt); filter:brightness(1.12)}
html:not([data-mode="sombre"]) .btn.pri:hover{filter:brightness(1.6)}
.btn.gros{min-height:56px; padding:14px 34px; font-size:1.05rem; position:relative}
/* le halo irisé sous le bouton principal */
.btn.gros::before{content:""; position:absolute; inset:6px -4px -10px; z-index:-1; border-radius:999px; background:var(--vif); filter:blur(18px); opacity:.6; transition:opacity .25s}
.btn.gros:hover::before{opacity:.95}
.btn[disabled]{opacity:.4; cursor:default; pointer-events:none}
.btn[disabled]::before{display:none}
.lien{border:0; background:none; padding:0; cursor:pointer; color:var(--txt); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* les pastilles de rareté, hors des cartes */
.pips{display:inline-flex; gap:4px; vertical-align:middle}
.pips i{width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; opacity:.45}
.pips i.on{background:currentColor; opacity:1}
.etoile{display:inline-block; width:15px; height:15px; vertical-align:-2px;
  background:conic-gradient(from 0deg,#ff5d8f,#ffd166,#5ee6a8,#4cc9f0,#b388ff,#ff5d8f);
  clip-path:polygon(50% 0,61% 36%,98% 36%,68% 58%,79% 94%,50% 72%,21% 94%,32% 58%,2% 36%,39% 36%)}
/* l'échantillon de papier d'un rang */
.pap{display:inline-block; width:18px; height:25px; border-radius:4px; background:#ece5d6; box-shadow:0 0 0 1px rgba(12,12,16,.16) inset; flex:none}
.pap.r1{background:#a9c9dd} .pap.r2{background:#9fc3a2} .pap.r3{background:#e2583c}
.pap.r4{background:#151310; box-shadow:0 0 0 1.5px #e6c477 inset}

/* -------------------------------------------------------------- le booster */
/* Un sachet métallisé : deux sertissages crantés, un corps irisé, un reflet
   qui passe. Tout se dimensionne sur --bo-l (sa largeur). */
.bo{--bo-l:230px; position:relative; display:flex; flex-direction:column; width:var(--bo-l); aspect-ratio:5/8; font-size:calc(var(--bo-l) / 10); color:#0c0c10;
  filter:drop-shadow(0 .5em .5em rgba(0,0,0,.35)) drop-shadow(0 1.8em 2.2em rgba(60,20,120,.4))}
.bo-crimp{flex:none; height:6.6%; background:
  repeating-linear-gradient(90deg,rgba(12,12,16,.22) 0 .09em,rgba(255,255,255,.5) .09em .2em),var(--holo); background-size:auto,220% 100%}
.bo-haut{-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/.34em 100% repeat-x; mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/.34em 100% repeat-x;
  transition:transform .55s cubic-bezier(.5,0,.75,.3),opacity .4s .15s; transform-origin:100% 100%}
.bo-pied{-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/.34em 100% repeat-x; mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/.34em 100% repeat-x}
.bo-corps{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:.9em .8em .8em; overflow:hidden;
  background:
    linear-gradient(90deg,rgba(12,12,16,.2),rgba(255,255,255,.34) 9%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 72%,rgba(255,255,255,.3) 90%,rgba(12,12,16,.24)),
    repeating-linear-gradient(118deg,rgba(255,255,255,.16) 0 .1em,transparent .1em .36em),
    var(--holo);
  background-size:auto,auto,240% 240%; animation:bo-iris 9s ease-in-out infinite alternate}
@keyframes bo-iris{from{background-position:0 0,0 0,0% 20%}to{background-position:0 0,0 0,100% 80%}}
.bo-tag{align-self:flex-start; padding:.28em .7em; border-radius:999px; background:#0c0c10; color:#fff; font-weight:600; font-size:.52em; letter-spacing:.14em; text-transform:uppercase}
/* la pièce sur le sachet : elle se balance doucement sur son axe */
.bo-corps{perspective:40em}
.bo-phi{display:block; width:6.4em; animation:piece 7s ease-in-out infinite; filter:drop-shadow(0 .3em .5em rgba(40,20,90,.35))}
@keyframes piece{0%,100%{transform:rotateY(-24deg) rotateX(6deg)}50%{transform:rotateY(24deg) rotateX(-4deg)}}
.bo-nom{font-weight:900; font-size:2.25em; line-height:.84; letter-spacing:-.06em; text-transform:uppercase; text-align:center}
.bo-pied-t{align-self:stretch; display:flex; justify-content:space-between; align-items:flex-end; gap:.6em; font-weight:600; font-size:.44em; letter-spacing:.1em; text-transform:uppercase; line-height:1.25;
  border-top:.14em solid #0c0c10; padding-top:.7em}
.bo-pied-t span:last-child{text-align:right; max-width:13em; font-weight:500}
/* le reflet qui traverse */
.bo-reflet{position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.95) 48%,transparent 62%); background-size:260% 100%; animation:bo-reflet 5.5s ease-in-out infinite}
@keyframes bo-reflet{0%,55%{background-position:140% 0}100%{background-position:-60% 0}}

/* ----------------------------------------------------------------- l'accueil */
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(24px,4vw,56px); min-height:min(680px,calc(100dvh - 150px))}
.sur{font-weight:500; font-size:.86rem; color:var(--doux); margin-bottom:18px; display:inline-flex; align-items:center; gap:10px}
.sur::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--vif)}
.hero h1{font-size:clamp(2.5rem,6vw,4.7rem); line-height:.96; letter-spacing:-.06em; font-weight:800}
/* La seconde ligne est SURLIGNÉE à l'irisé, comme au feutre : pas de texte en dégradé. */
.hero h1 span{display:inline-block; margin:.08em 0 0 -.1em; padding:.02em .16em .09em; border-radius:.16em; rotate:-1.6deg; color:#0c0c10;
  background:var(--holo); background-size:220% 220%; animation:bo-iris 8s ease-in-out infinite alternate; box-shadow:0 .12em .5em -.15em rgba(166,61,255,.5)}
.hero-p{margin-top:22px; font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.5; color:var(--doux); max-width:34em}
.hero-p b{color:var(--txt); font-weight:600; font-variant-numeric:tabular-nums}
.hero-a{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:32px}
.pq-dit{font-size:.95rem; color:var(--doux)}
.pq-dit b{color:var(--txt); font-weight:700; font-variant-numeric:tabular-nums}
.pq-jetons{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:20px; min-height:12px}
.pq-jetons i{width:12px; height:6px; border-radius:3px; background:var(--bord)}
.pq-jetons i:nth-child(5n):not(:last-child){margin-right:6px}
.pq-jetons i.on{background:var(--txt)}
.pq-jetons i.res.on{background:var(--vif); width:26px}
.pq-jetons em{font-style:normal; font-size:.82rem; color:var(--doux); margin-left:4px}
.pq-deja{margin-top:16px; font-size:.92rem; color:var(--doux)}
.btn.auto svg{width:15px; height:15px; fill:currentColor}
.cp-offre{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:14px; background:var(--holo); color:#0c0c10}
.cp-offre b{font-weight:800; font-size:1.15rem; letter-spacing:-.02em}
.cp-offre span{font-size:.86rem}
.pq-min{display:flex; align-items:baseline; gap:12px; margin-top:18px; flex-wrap:wrap}
.pq-min span{font-size:.9rem; color:var(--doux)}
.pq-min b{font-weight:700; font-size:1.6rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums}

/* LA SCÈNE 3D : le booster et deux cartes derrière lui, dans une vraie
   perspective. La scène tourne vers la souris (--rx, --ry posés par jeu.js) et
   pivote un peu avec le défilement (--sc). */
.hero-b{position:relative; display:grid; place-items:center; min-height:520px; perspective:1300px}
.hero-lueur{position:absolute; width:86%; aspect-ratio:1; border-radius:50%; background:var(--vif); filter:blur(80px); opacity:.36; animation:lueur 9s ease-in-out infinite alternate}
@keyframes lueur{from{scale:.9; rotate:0deg}to{scale:1.1; rotate:40deg}}
.hero-3d{position:relative; display:grid; place-items:center; transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx,0deg) + var(--sc,0) * 14deg)) rotateY(calc(var(--ry,0deg) - var(--sc,0) * 26deg)) translateY(calc(var(--sc,0) * -40px));
  transition:transform .25s ease-out}
.hero-fan{position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none}
.hero-fan .ct{--ct-l:clamp(150px,16vw,200px); position:absolute; left:50%; top:50%; margin:calc(var(--ct-l) * -.7) 0 0 calc(var(--ct-l) * -.5)}
.hero-fan .ct:nth-child(1){transform:translate3d(-78%,-4%,-90px) rotate(-16deg); animation:fan-a 7s ease-in-out infinite}
.hero-fan .ct:nth-child(2){transform:translate3d(80%,6%,-60px) rotate(14deg); animation:fan-b 8s ease-in-out infinite}
.hero-fan .ct:nth-child(3){transform:translate3d(6%,-34%,-150px) rotate(4deg); animation:fan-c 9s ease-in-out infinite}
@keyframes fan-a{50%{transform:translate3d(-82%,-9%,-90px) rotate(-19deg)}}
@keyframes fan-b{50%{transform:translate3d(84%,1%,-60px) rotate(17deg)}}
@keyframes fan-c{50%{transform:translate3d(6%,-39%,-150px) rotate(1deg)}}
.paquet{position:relative; padding:0; border:0; background:none; cursor:pointer; transform:translateZ(70px) rotate(5deg); transition:transform .6s var(--courbe); animation:pq-flotte 6s ease-in-out infinite}
.paquet .bo{--bo-l:clamp(200px,21vw,262px)}
.paquet:hover{transform:translateZ(110px) rotate(1deg) scale(1.03)}
.paquet[disabled]{cursor:default; filter:grayscale(.55) opacity(.75); animation:none}
@keyframes pq-flotte{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* le bilan : un panneau, le compte à gauche, les cinq raretés à droite */
.bilan{display:grid; grid-template-columns:minmax(220px,.5fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:center; margin-top:clamp(28px,4vw,56px);
  padding:clamp(20px,3vw,32px); border-radius:24px; background:var(--panel); border:1px solid var(--bord); box-shadow:var(--ombre)}
.bil-g{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.bil-g h2{font-weight:500; font-size:.9rem; color:var(--doux); letter-spacing:0}
.bil-n{display:flex; align-items:baseline; gap:8px}
.bil-n b{font-weight:800; font-size:3.2rem; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.bil-n span{color:var(--doux); font-size:.95rem}
.barre{align-self:stretch; height:6px; border-radius:3px; background:var(--bord); overflow:hidden}
.barre i{display:block; height:100%; width:0; background:var(--vif); border-radius:3px; transition:width .8s var(--courbe)}
.bil-rangs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
.bil-rangs li{display:flex; flex-direction:column; gap:10px; padding:14px 14px 13px; border-radius:16px; background:var(--bg); border:1px solid var(--bord); position:relative; overflow:hidden; font-variant-numeric:tabular-nums}
.bil-rangs li::before{content:""; height:30px; width:22px; border-radius:4px; background:#ece5d6; box-shadow:0 0 0 1px rgba(12,12,16,.14) inset}
.bil-rangs .r1::before{background:#a9c9dd} .bil-rangs .r2::before{background:#9fc3a2} .bil-rangs .r3::before{background:#e2583c}
.bil-rangs .r4::before{background:#151310; box-shadow:0 0 0 1.5px #e6c477 inset}
.bil-rangs li > span:last-child{color:var(--doux); font-size:.84rem; white-space:nowrap}
.bil-rangs b{color:var(--txt); font-weight:700; font-size:1.25rem; letter-spacing:-.03em}

.invite{margin-top:22px; color:var(--doux); font-size:.94rem; max-width:70ch}
.dern{margin-top:clamp(36px,5vw,64px)}
.dern h2{margin-bottom:18px}
.dern-r{display:flex; gap:18px; overflow-x:auto; padding:10px 4px 26px; margin:0 -4px; scrollbar-width:thin; scrollbar-color:var(--bord2) transparent}
.dern-r .ct{--ct-l:168px}
.c-b{position:relative; padding:0; border:0; background:none; cursor:pointer; flex:none; display:block; border-radius:8px; text-align:left;
  transition:transform .4s var(--courbe)}
.c-b:hover{transform:translateY(-8px)}
.c-n{position:absolute; right:-7px; top:-7px; z-index:3; min-width:26px; height:26px; padding:0 8px; border-radius:13px; background:var(--txt); color:var(--bg);
  font-weight:700; font-size:.76rem; line-height:26px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.3); font-variant-numeric:tabular-nums}
.c-neuf{position:absolute; left:50%; bottom:-11px; translate:-50% 0; z-index:3; padding:4px 11px; border-radius:999px; background:#fff; color:#0c0c10;
  font-weight:700; font-size:.72rem; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* ------------------------------------------------------------ la collection */
.rayons{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; margin:0 -2px 8px; scrollbar-width:none}
.rayons::-webkit-scrollbar{display:none}
.rayons button{flex:none; display:flex; align-items:baseline; gap:8px; padding:9px 16px; min-height:40px; border-radius:999px; border:1px solid var(--bord); background:var(--panel); cursor:pointer;
  transition:border-color .18s}
.rayons button:hover{border-color:var(--bord2)}
.rayons b{font-weight:600; font-size:.92rem; white-space:nowrap}
.rayons small{font-size:.76rem; color:var(--doux); font-variant-numeric:tabular-nums; white-space:nowrap}
.rayons button[aria-pressed="true"]{background:var(--txt); border-color:var(--txt); color:var(--bg)}
.rayons button[aria-pressed="true"] small{color:inherit; opacity:.7}

.filtres{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.seg{display:flex; padding:4px; border-radius:999px; background:var(--panel); border:1px solid var(--bord)}
.seg button{border:0; background:none; padding:8px 16px; border-radius:999px; cursor:pointer; font-weight:500; font-size:.88rem; color:var(--doux); min-height:36px}
.seg button[aria-pressed="true"]{background:var(--txt); color:var(--bg)}
.champ{flex:1 1 220px}
.champ input,.sel select{width:100%; min-height:46px; padding:8px 18px; border-radius:999px; border:1px solid var(--bord); background-color:var(--panel); font-size:1rem}
.champ input::placeholder{color:var(--doux)}
.sel select{appearance:none; padding-right:38px; font-size:.9rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238d8c96' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:11px}
.champ input:hover,.sel select:hover{border-color:var(--bord2)}
.tri2{display:flex; gap:10px 16px; flex-wrap:wrap; align-items:center; margin-top:12px}
.rangs{display:flex; gap:6px; flex-wrap:wrap}
.rangs button{display:flex; align-items:center; gap:9px; padding:6px 13px 6px 8px; border-radius:12px; border:1px solid var(--bord); background:var(--panel); cursor:pointer; text-align:left;
  transition:border-color .18s}
.rangs button:hover{border-color:var(--bord2)}
.rangs button[aria-pressed="true"]{border-color:var(--txt); box-shadow:0 0 0 1px var(--txt)}
.rangs button > span{display:flex; flex-direction:column; gap:4px; min-width:0}
.rangs .pips i{width:6px; height:6px}
.rangs em{font-style:normal; font-size:.74rem; color:var(--doux); font-variant-numeric:tabular-nums; white-space:nowrap}
.rangs em b{color:var(--txt); font-weight:600}
.fams{display:flex; gap:6px; flex-wrap:wrap}
.fams button{border:1px solid var(--bord); background:none; padding:7px 14px; border-radius:999px; cursor:pointer; font-size:.84rem; font-weight:500; color:var(--doux); min-height:36px;
  font-variant-numeric:tabular-nums}
.fams button small{margin-left:6px; font-size:.86em; opacity:.8}
.fams button:hover{color:var(--txt); border-color:var(--bord2)}
.fams button[aria-pressed="true"]{color:var(--bg); background:var(--txt); border-color:var(--txt)}
.col-res{margin:26px 0 16px; color:var(--doux); font-size:.9rem; min-height:1.4em}

.grille{--g:178px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--g),1fr)); gap:30px 22px}
.alb-c{position:relative; animation:alb-in .55s var(--courbe) both; animation-delay:calc(var(--k,0) * 26ms)}
@keyframes alb-in{from{opacity:0; transform:translateY(26px) scale(.94)}}
.alb-in{container-type:inline-size; width:100%}
.alb-c .ct{--ct-l:100cqw}
.alb-c .c-b{width:100%}
.alb-v{aspect-ratio:5/7; border-radius:10px; border:1px dashed var(--bord2); background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--doux); font-weight:600; font-size:.82rem; letter-spacing:.04em; font-variant-numeric:tabular-nums}
.alb-v .pips i{width:6px; height:6px}
.vide{margin-top:8px; padding:64px 20px; text-align:center; border:1px dashed var(--bord2); border-radius:24px; display:flex; flex-direction:column; align-items:center; gap:18px}
.vide p{font-size:1.15rem; color:var(--doux); max-width:34ch}

/* ---------------------------------------------------------------- les règles */
#v-regles{max-width:860px}
#v-regles h2{margin:52px 0 14px}
.tuiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.tuiles li{padding:22px 20px; border-radius:20px; background:var(--panel); border:1px solid var(--bord); box-shadow:var(--ombre); display:flex; flex-direction:column; gap:8px}
.tuiles b{font-weight:800; font-size:2.7rem; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.tuiles span{color:var(--doux); font-size:.9rem; line-height:1.3}
.rg-p{font-size:1.04rem; line-height:1.6; color:var(--doux); max-width:64ch}
.rg-p b{color:var(--txt); font-weight:600}
.rg-p + .rg-t,.rg-t + .rg-p{margin-top:18px}
.rg-t{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.rg-t th{font-weight:500; font-size:.8rem; color:var(--doux); text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--bord2)}
.rg-t td{padding:14px 12px 14px 0; border-bottom:1px solid var(--bord); vertical-align:middle}
.rg-t td:nth-child(2){display:flex; align-items:center; gap:12px}
.rg-t td:nth-child(n+3),.rg-t th:nth-child(n+3){text-align:right; padding-right:0; padding-left:12px}
.faq details{border-bottom:1px solid var(--bord)}
.faq summary{cursor:pointer; padding:18px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:400; font-size:1.4rem; line-height:1; color:var(--doux); transition:rotate .25s}
.faq details[open] summary::after{rotate:45deg}
.faq p{font-size:1rem; line-height:1.6; color:var(--doux); padding:0 0 20px; max-width:62ch}

/* ---------------------------------------------------------- l'ouverture */
/* Toujours sombre : c'est une scène, les cartes y prennent la lumière.
   Reprise de l'ouverture de Marx TCG (cartes/jeu.js, ouvrirBooster) : un sachet
   qu'on déchire, une pile de dos, la carte qui se retourne au centre, la rangée. */
dialog{border:0; padding:0; color:var(--txt); background:transparent; max-width:none; max-height:none}
dialog::backdrop{background:rgba(6,6,9,.86); backdrop-filter:blur(6px)}
.ouv{--txt:#f4f3ef; --doux:#a5a4af; --bord:rgba(255,255,255,.14); --bord2:rgba(255,255,255,.3); --survol:rgba(255,255,255,.08); --bg:#0b0b0e;
  width:100vw; height:100dvh; color:#f4f3ef; overflow:hidden;
  background:radial-gradient(60% 46% at 50% 38%,rgba(140,110,255,.3),transparent 70%),radial-gradient(50% 40% at 50% 100%,rgba(255,110,150,.16),transparent 70%),#08080b}
.ouv-x{position:absolute; right:14px; top:12px; width:44px; height:44px; border-radius:50%; border:1px solid var(--bord2); background:rgba(127,127,127,.12); color:inherit; cursor:pointer;
  font-weight:300; font-size:1.6rem; line-height:1; z-index:8}
.ouv-x:hover{background:rgba(127,127,127,.28)}
.ouv-noir,.ouv-fx{position:absolute; inset:0; pointer-events:none}
.ouv-noir{background:#030305; opacity:0; transition:opacity .55s; z-index:1}
.ouv.dim .ouv-noir{opacity:.86}
.ouv-fx{width:100%; height:100%; z-index:1}
.ouv-eclair{position:fixed; inset:0; pointer-events:none; z-index:7; opacity:0; background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.97),rgba(215,166,255,.32) 40%,transparent 72%)}
.ouv-eclair.go{animation:eclair 1.1s ease-out}
@keyframes eclair{0%{opacity:0}9%{opacity:1}100%{opacity:0}}
.ouv-in{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,2vh,20px); padding:58px 16px 20px}
.ouv-in.secousse{animation:secousse .38s linear}
@keyframes secousse{0%,100%{translate:0 0}15%{translate:-5px 2px}30%{translate:5px -3px}48%{translate:-3px -2px}66%{translate:3px 2px}84%{translate:-1px 1px}}
.ouv-titre{font-weight:800; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.1; letter-spacing:-.045em; text-align:center; min-height:1.2em}
.ouv-titre.eclat{animation:ouv-titre .6s var(--courbe) both}
@keyframes ouv-titre{from{opacity:0; scale:1.25; filter:blur(6px)}to{opacity:1; scale:1; filter:blur(0)}}
.ouv-aide{font-size:.95rem; color:var(--doux); text-align:center; min-height:1.5em; display:flex; gap:6px 12px; align-items:center; justify-content:center; flex-wrap:wrap}
.ouv-aide b{color:var(--txt); font-weight:700; font-size:1.08rem; letter-spacing:-.02em}
.ouv-aide .pips{color:var(--txt)}
.ouv-scene{position:relative; display:flex; align-items:center; justify-content:center; width:100%}
.ouv-jeu{display:flex; flex-direction:column; align-items:center; gap:clamp(22px,3.6vh,36px); width:100%;
  --big:min(280px,62vw,calc(48dvh * .714)); --sm:min(92px,calc((100vw - 64px) / 5.6))}
.ouv-table{position:relative; width:var(--big); aspect-ratio:5/7}

/* le sachet : il arrive, il flotte, il penche vers la main */
.ouv-paquet{--pw:calc(var(--big) * 1.07); position:absolute; left:calc(var(--big) * -.035); top:calc(var(--big) * -.156); width:var(--pw); z-index:6; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; outline:0;
  transform:perspective(60em) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .2s ease-out;
  animation:ouv-arrive .85s var(--courbe) both, ouv-flotte 4.2s ease-in-out .85s infinite}
.ouv-paquet .bo{--bo-l:var(--pw)}
.ouv-paquet.tient{animation-play-state:paused; cursor:grabbing}
.ouv.clavier .ouv-paquet:focus-visible{outline:2px solid #f4f3ef; outline-offset:10px; border-radius:.3em}
@keyframes ouv-arrive{from{translate:0 70vh; rotate:-10deg; scale:.8; opacity:0}to{translate:0 0; rotate:0deg; scale:1; opacity:1}}
@keyframes ouv-flotte{0%,100%{translate:0 0; rotate:-.7deg}50%{translate:0 -9px; rotate:.7deg}}
/* La déchirure : --tear va de 0 à 1 et suit le doigt. Le sertissage du haut est
   en deux morceaux : ce qui tient encore, et ce qui est arraché et se soulève.
   Dessous, la bouche du sachet et la lumière des cartes. Déchiré de droite à
   gauche, tout est retourné. */
.bo-cale{visibility:hidden}
.dech{position:absolute; left:0; right:0; top:0; height:6.6%; z-index:3; --tear:0}
.ouv-paquet.sens-g .dech{transform:scaleX(-1)}
.dech .bo-crimp{position:absolute; inset:0; height:auto; transition:none; transform:none; opacity:1}
.dech-reste{clip-path:inset(-1em 0 -1em calc(var(--tear) * 100%))}
.dech .dech-arrache{clip-path:inset(-3em calc(100% - var(--tear) * 100%) -1em 0); translate:0 calc(var(--tear) * -.4em); rotate:calc(var(--tear) * -2.5deg); transform-origin:0 100%}
.dech-bouche{position:absolute; left:0; top:86%; height:62%; width:calc(var(--tear) * 100%);
  background:linear-gradient(#08080b 55%,#2b1f52); box-shadow:inset 0 -.1em .2em rgba(215,166,255,.95),0 .12em 1.1em rgba(215,166,255,.75)}
.dech-invite{position:absolute; left:0; top:86%; width:100%; height:.55em; overflow:hidden; pointer-events:none}
.dech-invite::before{content:""; position:absolute; left:-3em; top:0; width:3em; height:100%; background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent); animation:dech-invite 1.9s cubic-bezier(.5,0,.5,1) 1s infinite}
@keyframes dech-invite{0%{translate:0 0; opacity:0}12%{opacity:1}80%{opacity:1}100%{translate:calc(var(--pw) + 3em) 0; opacity:0}}
.ouv-paquet.tient .dech-invite{display:none}

/* la pile : des dos, tous pareils */
.ouv-pile{position:absolute; inset:0; z-index:2; border:0; padding:0; background:none; cursor:pointer; border-radius:12px; outline:0}
.ouv-pile.cachee{display:none}
.ouv.clavier .ouv-pile:focus-visible,.ouv.clavier .ouv-vue:focus-visible{outline:3px solid #d7a6ff; outline-offset:8px}
.ouv-pile .ct{--ct-l:var(--big); position:absolute; inset:0; transition:translate .35s var(--courbe)}
.ouv-pile .ct:nth-last-of-type(2){transform:translate(.35%,.5%) rotate(1.4deg)}
.ouv-pile .ct:nth-last-of-type(3){transform:translate(-.6%,1%) rotate(-1.8deg)}
.ouv-pile .ct:nth-last-of-type(4){transform:translate(.8%,1.5%) rotate(2.4deg)}
.ouv-pile .ct:nth-last-of-type(5){transform:translate(-.9%,2%) rotate(-2.8deg)}
@media (hover:hover){.ouv-pile:hover .ct:last-of-type{translate:0 -8px}}

/* la carte au centre */
.ouv-vue{position:absolute; inset:0; z-index:4; border:0; padding:0; background:none; border-radius:12px; cursor:pointer; touch-action:none; outline:0}
.ouv-vue .ct{--ct-l:var(--big)}
.ouv-vue .ct .ct-face,.ouv-vue .ct .ct-in{transition:none}
.ouv-vue.pose .ct-in{transition:transform .14s ease-out}
.ouv-vue.relache{transition:translate .32s var(--courbe),rotate .32s var(--courbe)}
/* la rare : elle se soulève, et la secousse GRANDIT */
.ouv-vue.leve{animation:ouv-leve 1.15s cubic-bezier(.4,0,.2,1) both}
@keyframes ouv-leve{0%{transform:none}24%{transform:translateY(-3%) scale(1.04)}36%{transform:translateY(-3%) scale(1.04) rotate(-.6deg)}46%{transform:translateY(-3%) scale(1.05) rotate(.8deg)}56%{transform:translateY(-4%) scale(1.05) rotate(-1.2deg)}66%{transform:translateY(-4%) scale(1.06) rotate(1.5deg)}76%{transform:translateY(-4%) scale(1.07) rotate(-1.9deg)}86%{transform:translateY(-5%) scale(1.08) rotate(2.2deg)}94%{transform:translateY(-5%) scale(1.1) rotate(-2.4deg)}100%{transform:translateY(-5%) scale(1.1)}}
/* la lumière qui fuit par ses bords est blanche pour toutes : elle ne dit pas laquelle */
.ouv-vue.leve .ct-dos{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 40px 8px rgba(255,255,255,.8),0 0 110px 26px rgba(215,166,255,.5); transition:box-shadow 1s}
.ouv-vue.rare{scale:1.06; transition:scale .7s var(--courbe)}
.ouv-onde{position:absolute; left:50%; top:50%; width:var(--big); aspect-ratio:1; border-radius:50%; translate:-50% -50%; z-index:1; pointer-events:none; opacity:0; border:2px solid var(--onde,#fff)}
.ouv-onde.on{animation:ouv-onde .8s var(--courbe)}
@keyframes ouv-onde{from{scale:.4; opacity:.95}to{scale:3.4; opacity:0}}
.ouv-rayons{position:absolute; left:50%; top:50%; width:calc(var(--big) * 3); aspect-ratio:1; translate:-50% -50%; z-index:1; pointer-events:none; opacity:0; border-radius:50%;
  -webkit-mask:radial-gradient(closest-side,#000 22%,transparent 88%); mask:radial-gradient(closest-side,#000 22%,transparent 88%);
  background:repeating-conic-gradient(from 0deg,var(--ray,rgba(255,255,255,.3)) 0 4deg,transparent 4deg 15deg); transition:opacity .6s}
.ouv-rayons.on{opacity:1; animation:ouv-tourne 24s linear infinite}
@keyframes ouv-tourne{to{rotate:360deg}}
.ouv-rayons[data-r="3"]{--ray:rgba(240,110,80,.42)}
.ouv-rayons[data-r="4"]{background:repeating-conic-gradient(from 0deg,rgba(230,196,119,.4) 0 3deg,transparent 3deg 10deg,rgba(255,243,196,.26) 10deg 12deg,transparent 12deg 18deg)}
.ouv-rayons[data-r="t"]{background:repeating-conic-gradient(from 0deg,rgba(142,162,255,.5) 0 4deg,transparent 4deg 9deg,rgba(215,166,255,.5) 9deg 13deg,transparent 13deg 18deg,rgba(255,179,199,.5) 18deg 22deg,transparent 22deg 27deg,rgba(168,240,198,.45) 27deg 31deg,transparent 31deg 36deg)}
.ouv-rang{position:absolute; left:50%; bottom:-1.1em; translate:-50% 0; z-index:12; white-space:nowrap; padding:8px 16px; border-radius:999px; font-weight:700; font-size:.76rem; line-height:1; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; scale:.6; transition:opacity .4s .25s,scale .6s cubic-bezier(.34,1.56,.64,1) .25s; box-shadow:0 6px 18px rgba(0,0,0,.5)}
.ouv-rang.on{opacity:1; scale:1}
.ouv-rang.r3{background:#e2583c; color:#1f0a05}
.ouv-rang.r4{background:#151310; color:#e6c477; box-shadow:0 0 0 1.5px #e6c477,0 6px 18px rgba(0,0,0,.6)}
.ouv-rang.iris{background:var(--holo); color:#0c0c10}

/* la rangée : cinq emplacements en creux, où chaque carte se range une fois vue */
.ouv-rangee{display:flex; gap:8px; justify-content:center; opacity:0; transition:opacity .5s .1s}
.ouv-jeu.pret .ouv-rangee{opacity:1}
.ouv-slot{position:relative; width:var(--sm); aspect-ratio:5/7; border-radius:6px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); flex:none}
.ouv-slot.plein{background:none; box-shadow:none}
.ouv-slot .c-b{width:100%}
.ouv-slot .ct{--ct-l:var(--sm)}
.ouv-slot.arrive .ct{animation:ouv-depose .34s cubic-bezier(.2,.9,.25,1)}
@keyframes ouv-depose{from{scale:1.14}to{scale:1}}
.ouv-slot .c-neuf{bottom:auto; top:-9px; padding:3px 8px; font-size:.6rem}
/* la fin : la table s'efface, la rangée devient la scène, en éventail */
.ouv-jeu.fini .ouv-table{display:none}
.ouv-jeu.fini .ouv-rangee{--sm:clamp(104px,15vw,196px); flex-wrap:wrap; gap:clamp(10px,1.6vw,18px)}
.ouv-jeu.fini .ouv-slot{--a:0deg; --y:0px; rotate:var(--a); translate:0 var(--y); transition:translate .3s var(--courbe),rotate .3s var(--courbe); animation:ouv-etale .7s var(--courbe) calc(var(--k,0) * 70ms) backwards}
@keyframes ouv-etale{from{opacity:0; scale:.72; translate:0 34px}}
.ouv-jeu.fini .ouv-slot .c-neuf{top:-13px; padding:5px 11px; font-size:.7rem}
.ouv-jeu.fini .ouv-slot.eclat::before{content:""; position:absolute; inset:-35%; z-index:-1; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side,rgba(215,166,255,.45),transparent)}
@media (min-width:760px){
  .ouv-jeu.fini .ouv-slot:nth-child(1){--a:-5deg; --y:16px}
  .ouv-jeu.fini .ouv-slot:nth-child(2){--a:-2.5deg; --y:4px}
  .ouv-jeu.fini .ouv-slot:nth-child(4){--a:2.5deg; --y:4px}
  .ouv-jeu.fini .ouv-slot:nth-child(5){--a:5deg; --y:16px}
  .ouv-jeu.fini .ouv-slot:hover{--a:0deg; --y:-12px; z-index:4}
}
@media (max-width:759px){ .ouv-jeu.fini .ouv-rangee{--sm:clamp(88px,27vw,150px); max-width:calc(var(--sm) * 3 + 44px)} }
.ouv-acts{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; min-height:46px}
/* le bouton du mode automatique : un voyant, allumé quand il tourne */
.bascule i{width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.35}
.bascule[aria-pressed="true"]{background:var(--holo); border-color:transparent; color:#0c0c10}
.bascule[aria-pressed="true"] i{opacity:1; animation:voyant 1.1s ease-in-out infinite}
@keyframes voyant{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .ouv-paquet,.dech-invite::before,.ouv-pile .ct,.ouv-vue,.ouv-rang,.ouv-rayons,.ouv-in,.ouv-titre,.ouv-onde,.ouv-slot,.ouv-slot .ct,.ouv-noir,.bascule i{transition:none !important; animation:none !important}
  .ouv-eclair{display:none}
}

/* --------------------------------------------------------------- la fiche */
.fiche{--txt:#f4f3ef; --doux:#a5a4af; --bord2:rgba(255,255,255,.3); --survol:rgba(255,255,255,.08); --bg:#0b0b0e; color:#f4f3ef}
.fiche[open]{display:flex; flex-direction:column; align-items:center; gap:16px; padding:60px 16px 24px; width:100vw; height:100dvh; justify-content:center; overflow:auto}
.fiche-c{flex:none; cursor:pointer}
.fiche-c .ct{--ct-l:min(360px,86vw,calc((100dvh - 230px) * .714))}
.fiche-i{color:var(--doux); font-size:.92rem; text-align:center; display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; min-height:1.5em}
.fiche-i .pips{color:var(--txt)}

/* -------------------------------------------------------------- le compte */
.compte{width:min(420px,calc(100vw - 24px)); border-radius:24px; background:var(--bg2); border:1px solid var(--bord2); box-shadow:0 30px 80px -20px #000}
.compte .ouv-x{color:var(--txt); top:12px; right:12px; width:40px; height:40px; border-color:var(--bord)}
.compte-in{display:flex; flex-direction:column; gap:18px; padding:30px 26px 26px}
.compte h2{font-size:1.5rem}
.compte .seg{align-self:flex-start; background:var(--bg)}
.compte form{display:flex; flex-direction:column; gap:14px}
.compte label{display:flex; flex-direction:column; gap:6px; font-size:.86rem; font-weight:500; color:var(--doux)}
.compte input{min-height:48px; padding:10px 14px; border-radius:12px; border:1px solid var(--bord2); background:var(--bg); font-size:1rem; color:var(--txt)}
.compte input:focus-visible{outline-offset:1px}
.cp-msg{min-height:1.3em; font-size:.9rem; color:#d63a1f} html[data-mode="sombre"] .cp-msg{color:#ff8a70}
.cp-msg.ok{color:#1c7a3e} html[data-mode="sombre"] .cp-msg.ok{color:#8fe0a8}
.cp-note{font-size:.84rem; color:var(--doux)}
.cp-mail{font-weight:700; font-size:1.1rem; overflow-wrap:anywhere}
.compte .btn{align-self:flex-start}

/* --------------------------------------------------- ce qui anime la page */
/* Une carte qu'on survole prend un reflet là où est la souris. */
.c-b .ct-recto::after{content:""; position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0; transition:opacity .3s; mix-blend-mode:soft-light;
  background:radial-gradient(70% 55% at var(--mx,50%) var(--my,30%),rgba(255,255,255,.85),transparent 70%)}
.c-b:hover .ct-recto::after{opacity:1}
.c-b:hover{z-index:2}
/* L'apparition au défilement : .rv attend, .in arrive. Sans script, tout est là. */
.js .rv{opacity:0; transform:translateY(34px); transition:opacity .9s var(--courbe),transform .9s var(--courbe); transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1; transform:none}
/* Le projecteur : un panneau .lum s'éclaire sous la souris (--mx, --my). */
.lum{position:relative; isolation:isolate}
.lum::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .35s; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(190,110,255,.28),rgba(255,120,170,.14) 45%,transparent 70%)}
.lum:hover::before{opacity:1}

/* le bandeau de noms qui défile */
.defile{margin:clamp(30px,5vw,70px) calc(clamp(16px,4vw,44px) * -1) 0; overflow:hidden; padding:14px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.defile-in{display:flex; gap:0; width:max-content; animation:defile 70s linear infinite; font-weight:800; font-size:clamp(2.2rem,5.5vw,4.4rem); letter-spacing:-.05em; line-height:1; white-space:nowrap}
.defile:hover .defile-in{animation-play-state:paused}
.defile-in span{padding:0 .34em; display:inline-flex; align-items:center; gap:.68em}
.defile-in span::after{content:""; width:.2em; height:.2em; border-radius:50%; background:var(--vif); flex:none}
.defile-in span:nth-child(even){color:transparent; -webkit-text-stroke:1.5px var(--txt)}
@keyframes defile{to{transform:translateX(-50%)}}

.bloc{margin-top:clamp(80px,12vw,170px)}
.bloc-t{max-width:760px; margin-bottom:clamp(30px,5vw,58px)}
.bloc-t h2{font-weight:800; font-size:clamp(2.3rem,6vw,4.6rem); line-height:.94; letter-spacing:-.055em}
/* dans les sections, la seconde ligne est au TRAIT : le contour seul */
.bloc-t h2 span{color:transparent; -webkit-text-stroke:1.6px var(--txt); display:inline-block; padding-bottom:.08em}
.bloc-t h2 b{font-weight:800; font-variant-numeric:tabular-nums}
.bloc-t > p:last-child{margin-top:18px; font-size:clamp(1rem,1.4vw,1.18rem); color:var(--doux); max-width:34em}

/* les cinq raretés : cinq cartes en éventail, qui se redressent au survol */
.rar{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,2vw,26px); align-items:end; perspective:1400px}
.rar-c{display:flex; flex-direction:column; align-items:center; gap:18px; container-type:inline-size}
.rar-c .c-b{width:100%; transform:rotate(var(--r,0deg)) translateY(var(--y,0)); transition:transform .6s var(--courbe)}
.rar-c .c-b:hover{transform:rotate(0) translateY(-18px) scale(1.05); z-index:2}
.rar-c .ct{--ct-l:100cqw}
.rar-c:nth-child(1){--r:-7deg; --y:26px} .rar-c:nth-child(2){--r:-3.5deg; --y:8px} .rar-c:nth-child(4){--r:3.5deg; --y:8px} .rar-c:nth-child(5){--r:7deg; --y:26px}
.rar-l{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.rar-l b{font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.rar-l small{font-size:.82rem; color:var(--doux)}

/* les disciplines : des tuiles qui s'éclairent */
/* onze disciplines : quatre colonnes, la première tuile en prend deux, et les trois rangées sont pleines */
.discs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.disc:first-child{grid-column:span 2; background:var(--holo); background-size:220% 220%; border-color:transparent; color:#0c0c10; animation:bo-iris 9s ease-in-out infinite alternate}
.disc:first-child small{color:rgba(12,12,16,.7)}
.disc{display:flex; flex-direction:column; justify-content:space-between; gap:34px; min-height:150px; padding:20px 22px; border-radius:22px; text-decoration:none; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--bord); box-shadow:var(--ombre); transition:transform .5s var(--courbe),border-color .3s}
.disc:hover{transform:translateY(-6px); border-color:var(--bord2)}
.disc b{font-weight:700; font-size:1.3rem; letter-spacing:-.035em; display:flex; justify-content:space-between; align-items:center; gap:10px}
.disc b::after{content:"→"; font-weight:400; opacity:0; translate:-8px 0; transition:opacity .3s,translate .4s var(--courbe)}
.disc:hover b::after{opacity:1; translate:0 0}
.disc span{font-weight:800; font-size:2.4rem; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.disc small{display:block; font-weight:400; font-size:.84rem; letter-spacing:0; color:var(--doux); margin-top:6px}

/* LE MUR : trois rangées de cartes, couchées dans la perspective, qui glissent
   en sens contraires avec le défilement (--p, posé par jeu.js). */
.bloc--mur .bloc-t{margin-bottom:0}
.mur{margin:0 calc(clamp(16px,4vw,44px) * -1); height:clamp(430px,56vw,660px); overflow:hidden; perspective:1500px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent); mask:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent)}
.mur-in{display:flex; flex-direction:column; gap:22px; transform:rotateX(34deg) rotateZ(-9deg) translateY(-6%) scale(1.18); transform-origin:50% 30%}
.mur-r{display:flex; gap:22px; width:max-content; will-change:transform; transform:translateX(calc(-18% + (var(--p,.5) - .5) * var(--dir,1) * 46%))}
.mur-r:nth-child(even){--dir:-1}
.mur-r .ct{--ct-l:clamp(120px,13vw,172px)}

/* les trois gestes */
.pas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; list-style:none; padding:0; margin:0}
.pas li{padding:28px 26px 30px; border-radius:26px; background:var(--panel); border:1px solid var(--bord); box-shadow:var(--ombre); display:flex; flex-direction:column; gap:10px}
.pas b{font-weight:800; font-size:.9rem; letter-spacing:.04em; background:var(--vif); -webkit-background-clip:text; background-clip:text; color:transparent; align-self:flex-start}
.pas h3{margin:26px 0 0; font-weight:800; font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.05em; line-height:1}
.pas p{color:var(--doux); line-height:1.5}

/* l'appel final : un grand panneau irisé */
.final{margin-top:clamp(70px,10vw,140px); padding:clamp(48px,9vw,120px) 24px; border-radius:36px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:34px; color:#0c0c10;
  background:var(--holo); background-size:240% 240%; animation:bo-iris 10s ease-in-out infinite alternate; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(118deg,rgba(255,255,255,.22) 0 2px,transparent 2px 9px); pointer-events:none}
.final h2{position:relative; font-weight:800; font-size:clamp(2.2rem,6.4vw,5rem); line-height:.94; letter-spacing:-.055em}
.final .btn.pri{position:relative; background:#0c0c10; border-color:#0c0c10; color:#fff}
.final .btn.gros::before{display:none}

.pied{max-width:1280px; margin:0 auto; padding:34px clamp(16px,4vw,44px) 130px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--bord)}
.pied p{font-size:.84rem; color:var(--doux); max-width:60ch}

/* ------------------------------------------------------------ le téléphone */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:0; gap:8px}
  .hero-b{min-height:0; padding:30px 0 40px}
  .paquet .bo{--bo-l:min(190px,46vw)}
  .hero-fan .ct{--ct-l:min(130px,32vw)}
  .pas{grid-template-columns:1fr}
  .bilan{grid-template-columns:1fr}
}
@media (max-width:720px){
  /* Ni filtre ni transform sur la tête : la barre fixée en bas s'y calerait. */
  .tete{display:flex; justify-content:space-between; padding:10px 14px; backdrop-filter:none; background:var(--bg)}
  .cpt{padding:8px 12px} .cpt span{max-width:92px}
  .onglets{position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:30; justify-content:space-around; gap:0; padding:5px;
    background:color-mix(in srgb,var(--bg2) 88%,transparent); backdrop-filter:blur(16px); border:1px solid var(--bord2); box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
  .onglets a{flex:1; flex-direction:column; gap:2px; padding:7px 4px; font-size:.7rem; min-height:48px; justify-content:center}
  .onglets svg{width:21px; height:21px}
  main{padding-bottom:120px}
  .hero-a{flex-direction:column; align-items:stretch; gap:14px}
  .hero-a .btn{width:100%}
  .bil-rangs{grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
  .bil-rangs li{padding:10px 8px; border-radius:12px; gap:7px}
  .bil-rangs .pips{display:none}
  .bil-rangs li > span:last-child{font-size:.7rem; white-space:normal; line-height:1.2}
  .bil-rangs b{display:block; font-size:1.05rem}
  .grille{--g:140px; gap:22px 14px}
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* sur téléphone les cinq raretés se feuillettent de côté : à cinq de front, les cartes seraient illisibles */
  .rar{display:flex; gap:16px; overflow-x:auto; margin:0 -16px; padding:26px 16px 14px; scroll-snap-type:x mandatory; scrollbar-width:none}
  .rar::-webkit-scrollbar{display:none}
  .rar-c{flex:0 0 46vw; scroll-snap-align:center; --r:0deg !important; --y:0 !important}
  .discs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .disc:first-child{grid-column:span 2}
  .disc{min-height:120px; padding:16px; gap:20px} .disc span{font-size:1.8rem} .disc b{font-size:1.05rem}
  .pied{padding-bottom:120px}
  .sel{flex:1 1 150px}
  .seg{width:100%} .seg button{flex:1; padding:8px 6px}
  .compte .seg{width:auto}
  .rg-t th:nth-child(2),.rg-t td:nth-child(2) em{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js .rv{opacity:1; transform:none}
  .hero-3d{transform:none}
}
.compte .seg button{white-space:nowrap}