/* 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:26px; height:6px; border-radius:3px; background:var(--bord)}
.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-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. */
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; --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% 36%,rgba(140,110,255,.3),transparent 70%),radial-gradient(50% 40% at 50% 100%,rgba(255,110,150,.16),transparent 70%),#08080b}
.ouv[open]{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:56px 16px 22px}
.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:5}
.ouv-x:hover{background:rgba(127,127,127,.28)}
.ouv-scene{--ct-l:min(300px,66vw,calc((100dvh - 372px) * .714)); position:relative; width:var(--ct-l); aspect-ratio:5/7; flex:none}
.ouv-carte{position:absolute; inset:0; padding:0; border:0; background:none; cursor:pointer; border-radius:10px; display:block; z-index:1}
.ouv-carte .ct{--ct-l:min(300px,66vw,calc((100dvh - 372px) * .714))}
.ouv-carte::before,.ouv-carte::after{content:""; position:absolute; inset:0; border-radius:8px; background:#16161c; z-index:-1;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; transition:opacity .3s,transform .4s var(--courbe)}
.ouv-carte::before{transform:translate(12px,10px) rotate(3deg)}
.ouv-carte::after{transform:translate(6px,5px) rotate(1.5deg)}
.ouv-scene[data-reste="1"] .ouv-carte::before,.ouv-scene[data-reste="0"] .ouv-carte::before,.ouv-scene[data-reste="0"] .ouv-carte::after{opacity:0; transform:none}
.ouv-carte.entre .ct{animation:ouv-entre .45s var(--courbe)}
@keyframes ouv-entre{from{opacity:0; transform:translateY(14px) scale(.96)}}
.ouv-fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4}
.ouv-eclair{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:6}
.ouv-eclair.go{animation:eclair .55s ease-out}
@keyframes eclair{0%{opacity:.85}100%{opacity:0}}
/* les rayons qui tournent derrière une carte rare */
.ouv-rayons{position:absolute; inset:-95%; border-radius:50%; opacity:0; pointer-events:none; transition:opacity .6s;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.2) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 78%); mask:radial-gradient(closest-side,#000 18%,transparent 78%); animation:rayons 22s linear infinite}
.ouv-scene.rare .ouv-rayons{opacity:1}
@keyframes rayons{to{rotate:360deg}}
/* Le booster recouvre la pile ; on le touche, il tremble, le haut s'arrache, le sachet tombe.
   Avant cela, il se tourne vers la souris (--rx, --ry). */
.ouv-bo{position:absolute; left:50%; top:50%; z-index:3; translate:-50% -50%; pointer-events:none; perspective:900px; animation:ouv-bo 2.6s ease-in-out infinite}
.ouv-bo .bo{--bo-l:calc(var(--ct-l) * 1.14); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out}
.ouv-bo.secoue{animation:secoue .3s linear}
@keyframes secoue{0%,100%{translate:-50% -50%; rotate:0deg}20%{translate:-52% -50%; rotate:-4deg}40%{translate:-48% -51%; rotate:4deg}60%{translate:-51% -49%; rotate:-3deg}80%{translate:-49% -50%; rotate:3deg}}
.ouv-bo.dechire .bo{transition:transform .6s .3s cubic-bezier(.5,0,.8,.4),opacity .35s .55s}
@keyframes ouv-bo{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}
.ouv-bo.dechire{animation:none}
.ouv-bo.dechire .bo-haut{transform:translate(46%,-190%) rotate(34deg); opacity:0}
.ouv-bo.dechire .bo{transform:translateY(125%); opacity:0}
/* la lumière d'une carte rare : la couleur de son papier */
.ouv-halo{position:absolute; inset:-46%; border-radius:50%; opacity:0; pointer-events:none; transition:opacity .5s}
.ouv-scene.rare .ouv-halo{opacity:1; animation:ouv-halo 1.1s var(--courbe)}
.ouv-scene.h3 .ouv-halo{background:radial-gradient(closest-side,rgba(226,88,60,.62),rgba(226,88,60,0) 72%)}
.ouv-scene.h4 .ouv-halo{background:radial-gradient(closest-side,rgba(230,196,119,.62),rgba(230,196,119,0) 72%)}
.ouv-scene.ht .ouv-halo{background:conic-gradient(from 0deg,#ff5d8f,#ffd166,#5ee6a8,#4cc9f0,#b388ff,#ff5d8f); filter:blur(46px); inset:-12%; opacity:.65}
@keyframes ouv-halo{from{transform:scale(.4); opacity:0}}
.ouv-scene.rare .ouv-carte .ct{animation:ouv-rare .7s var(--courbe)}
@keyframes ouv-rare{0%{scale:1}40%{scale:1.07}100%{scale:1}}
.ouv-dit{min-height:2.9em; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:700; font-size:1.15rem; line-height:1.15; letter-spacing:-.02em}
.ouv-dit small{font-weight:400; font-size:.86rem; letter-spacing:0; color:var(--doux)}
.ouv-dit .pips i{width:10px; height:10px}
.ouv-rangee{display:flex; gap:10px; justify-content:center; flex:none}
.ouv-rangee > *{--ct-l:min(92px,16.5vw); width:var(--ct-l); aspect-ratio:5/7; border-radius:6px; flex:none}
.ouv-rangee .ct{--ct-l:min(92px,16.5vw)}
.ouv-rangee .trou{border:1px dashed rgba(255,255,255,.28)}
.ouv-rangee .c-b{animation:ouv-pose .4s var(--courbe)}
@keyframes ouv-pose{from{opacity:0; transform:translateY(-26px) scale(1.25)}}
.ouv-fin{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.ouv.fini .ouv-scene,.ouv.fini .ouv-dit{display:none}
.ouv.fini .ouv-rangee{gap:18px; flex-wrap:wrap; margin-bottom:24px}
.ouv.fini .ouv-rangee > *,.ouv.fini .ouv-rangee .ct{--ct-l:min(200px,40vw,calc((100vw - 140px) / 5))}

/* --------------------------------------------------------------- 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}
  .ouv.fini .ouv-rangee > *,.ouv.fini .ouv-rangee .ct{--ct-l:min(150px,29vw)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js .rv{opacity:1; transform:none}
  .hero-3d{transform:none}
}