/* ============ LA RESERVE VIDE (DECISIONS §100) ============
   L'ecran « Gagner des boosters » : une scene du jeu, pas une fenetre.
   Le prochain sachet au centre d'un cadran (une case par place de reserve),
   la main de cartes en bas, ce qui fait revenir, et sur Steam les DLC.
   Prefixe rv- : aucune collision avec .voile .panneau, .bq-*, .mag-*, .vue.
   Telephone d'abord ; le client Steam ensuite (.client-steam), SANS barre de
   defilement a partir de 1100 x 600. Mode sobre : seul html.sobre decide (§52).
   Aucune couleur ne descend d'une chaine de HTML (CSP) : --p, --n, --i,
   --cols, --rv-r et --rv-univers sont poses par le CSSOM. */

#gagner.rv-voile{display:none;padding:0;background:#07070d;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
#gagner.rv-voile.on{display:block}
#gagner.rv-voile::-webkit-scrollbar{width:8px}
#gagner.rv-voile::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.rv-scene{position:relative;min-height:100%;display:flex;flex-direction:column;isolation:isolate;--rv-gut:16px;
  padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.rv-fond{position:absolute;left:0;right:0;top:0;height:560px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#07070d55 0%,#07070dcc 55%,#07070d 100%),var(--rv-univers,none) center 35%/cover no-repeat;
  opacity:.55}
.rv-fond::after{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 55% at 50% 28%,color-mix(in srgb,var(--sa,#A97BFF) 26%,transparent),transparent 70%)}

/* ---- la barre : retour, titre, solde ---- */
.rv-barre{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--rv-gut) 10px;
  background:linear-gradient(#07070df2,#07070dcc 70%,#07070d00)}
.rv-retour{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px 0 8px;border-radius:99px;
  border:1px solid var(--verre-bord);background:var(--verre);color:var(--txt);font:700 13.5px Archivo,system-ui,sans-serif;cursor:pointer}
.rv-retour .rv-ic{width:20px;height:20px}
@media (max-width:600px){
  .rv-retour{width:40px;padding:0;justify-content:center}
  .rv-retour span:not(.rv-ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.rv-titre{margin:0;flex:1;min-width:0;font:900 18px/1.1 Archivo,system-ui,sans-serif;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-solde{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:var(--verre);
  border:1px solid var(--verre-bord);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.rv-solde .gem{width:12px;height:12px}
.rv-ic{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 auto}
.rv-ic svg{width:100%;height:100%}
.rv-ic.petit{width:15px;height:15px}
.rv-ic.grand{width:42px;height:42px;padding:10px;border-radius:12px;background:#ffffff0d;border:1px solid var(--verre-bord);color:var(--iris-1)}
.rv-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.rv-h{margin:0 0 10px;font:700 11.5px/1.2 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--gris1)}

.rv-grille{display:flex;flex-direction:column;gap:24px;padding:2px var(--rv-gut) 0;min-width:0}
.rv-grille>*{min-width:0}

/* ---- le heros : le sachet qui se fabrique, dans son cadran ---- */
.rv-heros{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:12px}
.rv-cadran{position:relative;display:grid;place-items:center;width:calc(var(--rayon) * 2 + 30px);aspect-ratio:1;--rayon:104px}
.rv-cadran::before{content:'';position:absolute;inset:16px;border-radius:50%;border:1px solid #ffffff14;
  background:radial-gradient(circle,color-mix(in srgb,var(--sa,#A97BFF) 18%,transparent) 0 45%,transparent 70%)}
.rv-sachet{position:relative;width:100px;aspect-ratio:5/8;isolation:isolate;--p:0;
  animation:rv-flotte 6s ease-in-out infinite;filter:drop-shadow(0 18px 28px #000c)}
.rv-sachet .booster-etal{position:absolute;inset:0;width:100%;height:100%;transform:none;transition:none;
  pointer-events:none;animation:none}
.rv-s-gris,.rv-s-ombre{position:absolute;left:0;right:0;top:0;height:calc((1 - var(--p)) * 100%);
  pointer-events:none;border-radius:6px 6px 0 0;transition:height .9s linear}
.rv-s-gris{background:#808080;mix-blend-mode:saturation}
.rv-s-ombre{background:#04050bb8}
.rv-s-ligne{position:absolute;left:-6%;right:-6%;top:calc((1 - var(--p)) * 100%);height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);
  box-shadow:0 0 14px 3px color-mix(in srgb,var(--sa,#A97BFF) 75%,#fff);transition:top .9s linear;pointer-events:none}
.rv-scene.pret .rv-s-ligne{opacity:0}
.rv-sachet.arrive{animation:rv-arrive .9s cubic-bezier(.2,1.4,.35,1),rv-flotte 6s ease-in-out .9s infinite}
@keyframes rv-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rv-arrive{0%{transform:scale(.92);filter:brightness(2.2) drop-shadow(0 0 30px #fff)}
  100%{transform:scale(1);filter:drop-shadow(0 18px 28px #000c)}}

/* le cadran : les cases sur un cercle autour du sachet, comme les reperes du
   podium de l'accueil ; chaque case est un petit sachet */
.rv-presentoir{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2}
.rv-case{position:absolute;left:0;top:0;display:block;width:12px;aspect-ratio:5/8;margin:-9.6px 0 0 -6px;border-radius:2px;
  background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff40;
  transform:rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--rayon) * -1))}
.rv-case::before,.rv-case::after{content:'';position:absolute;left:1px;right:1px;height:1.5px;
  background:repeating-linear-gradient(90deg,#ffffff2a 0 2px,transparent 2px 4px)}
.rv-case::before{top:1.5px}.rv-case::after{bottom:1.5px}
.rv-case.plein{background:linear-gradient(158deg,var(--s1,#141026),var(--s3,#5B3FA0) 48%,var(--s2,#3A2A64));
  box-shadow:inset 0 0 0 1px #ffffff40,0 0 10px color-mix(in srgb,var(--sa,#A97BFF) 60%,transparent)}
.rv-case.charge{background:linear-gradient(0deg,var(--s3,#5B3FA0) 0 calc(var(--p) * 100%),#ffffff07 calc(var(--p) * 100%));
  box-shadow:inset 0 0 0 1px var(--sa,#A97BFF),0 0 14px color-mix(in srgb,var(--sa,#A97BFF) 55%,transparent);
  animation:rv-pouls 2s ease-in-out infinite}
@keyframes rv-pouls{50%{box-shadow:inset 0 0 0 1px #fff,0 0 20px color-mix(in srgb,var(--sa,#A97BFF) 80%,transparent)}}

.rv-temps{min-width:0}
.rv-sur{margin:0 0 4px;font:700 11px/1.2 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--iris-1)}
.rv-chrono{margin:0;font:800 58px/1 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  color:#fff;text-shadow:0 0 30px color-mix(in srgb,var(--sa,#5AA8FF) 55%,transparent)}
.rv-c-sep{opacity:.45;margin:0 .02em}
.rv-c-pret{font-family:Archivo,system-ui,sans-serif;letter-spacing:-.01em;color:#9FF0DF}
.rv-sous{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--gris)}
.rv-reserve{display:flex;flex-direction:column;align-items:center;gap:8px}
.rv-pres-dit{margin:0;font-size:13px;color:var(--gris);text-align:center}
.rv-pres-dit b{color:var(--txt);font-weight:800}

/* obtenir maintenant, agrandir la reserve */
.rv-achat,.rv-agrandir{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.rv-bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:99px;
  border:1px solid var(--verre-bord);background:var(--verre-fort);color:var(--txt);font:800 14.5px Archivo,system-ui,sans-serif;
  cursor:pointer;white-space:nowrap;max-width:100%}
.rv-bouton.principal{background:var(--iris);color:#08090F;border-color:transparent;box-shadow:0 10px 30px #5AA8FF3d}
.rv-bouton.principal .gem{background:#08090F;box-shadow:none}
.rv-bouton.petit{min-height:36px;padding:0 14px;font-size:13px;gap:7px}
.rv-bouton:disabled{opacity:.5;cursor:default}
.rv-agrandir .rv-bouton{background:transparent;border-style:dashed}
.rv-prix{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.rv-prix .gem{width:11px;height:11px}
.rv-manque-l{flex-basis:100%;display:flex;flex-direction:column;align-items:center;gap:7px}
.rv-manque{margin:0;font-size:13px;color:var(--iris-5);text-align:center}
.rv-rail{display:block;width:min(300px,100%);height:6px;border-radius:99px;background:#ffffff12;overflow:hidden}
.rv-rail i{display:block;height:100%;border-radius:inherit;background:var(--iris)}
.rv-lien{align-self:flex-start;background:none;border:0;padding:2px 0;color:var(--iris-2);font:700 12.5px Archivo,system-ui,sans-serif;cursor:pointer}
.rv-retour:focus-visible,.rv-bouton:focus-visible,.rv-t-aller:focus-visible,.rv-t-second:focus-visible,.rv-lien:focus-visible{
  outline:2px solid var(--iris-1);outline-offset:3px}

/* ---- en attendant : la main, une carte a jouer par destination ---- */
.rv-tuiles{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--rv-gut) * -1);
  padding:6px var(--rv-gut) 12px;scrollbar-width:none}
.rv-tuiles::-webkit-scrollbar{display:none}
.rv-tuile{position:relative;flex:0 0 150px;min-width:0;scroll-snap-align:center}
.rv-t-aller{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;aspect-ratio:5/7;padding:7px;
  border-radius:12px;color:var(--txt);text-align:left;font:inherit;cursor:pointer;
  background:linear-gradient(160deg,#ffffff14,#ffffff05 40%),#0e1020;border:1.5px solid color-mix(in srgb,var(--sa,#A97BFF) 55%,#ffffff20);
  box-shadow:0 14px 30px #000a,inset 0 1px #ffffff1a}
.rv-visuel{position:relative;display:block;flex:1;min-height:0;border-radius:8px;overflow:hidden;
  background:radial-gradient(110% 90% at 50% 110%,color-mix(in srgb,var(--sa,#5AA8FF) 30%,transparent),transparent 65%),#0b0c17}
.rv-carte{position:absolute;left:50%;top:50%;width:54px;aspect-ratio:5/7;margin:-38px 0 0 -27px;border-radius:5px;overflow:hidden;
  background:#0b0c17;box-shadow:0 10px 20px #000b,0 0 0 1.5px var(--rv-r,#ffffff30)}
.rv-carte .dos{position:absolute;inset:0;width:100%;height:100%}
.rv-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.rv-carte.rv-vu img{opacity:1}
.rv-v-collection .rv-c0{z-index:2}
.rv-v-collection .rv-c1{transform:translateX(-62%) rotate(-12deg) scale(.9)}
.rv-v-collection .rv-c2{transform:translateX(62%) rotate(12deg) scale(.9)}
.rv-v-amis .rv-c0{transform:translateX(-34%) rotate(-8deg)}
.rv-v-amis .rv-c1{transform:translateX(34%) rotate(8deg) translateY(6px)}
.rv-v-duels .rv-c0{transform:translateX(-58%) rotate(-10deg)}
.rv-v-duels .rv-c1{transform:translateX(58%) rotate(10deg)}
.rv-v-duels::after{content:'VS';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skewX(-8deg);z-index:3;
  font:900 20px/1 Archivo,system-ui,sans-serif;color:#fff;text-shadow:0 0 12px #FF77C4,0 2px 0 #000}
.rv-v-encheres .rv-c0{transform:rotate(-6deg)}
.rv-badge{position:absolute;right:14%;bottom:12%;z-index:3;width:32px;height:32px;padding:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF1C9,#FFC46B 55%,#B57718);color:#2a1702;box-shadow:0 4px 12px #000a}
.rv-badge.centre{left:50%;top:50%;right:auto;bottom:auto;margin:-16px 0 0 -16px;background:var(--iris);color:#08090F}
.rv-v-ecrin .rv-carte{box-shadow:0 0 0 4px #ffffff14,0 0 0 5px #ffffff38,0 12px 26px #000c,0 0 0 1.5px var(--rv-r,#ffffff30)}
.rv-v-ecrin::before{content:'';position:absolute;left:50%;top:50%;width:66px;height:94px;margin:-47px 0 0 -33px;border-radius:7px;z-index:3;
  background:linear-gradient(125deg,#ffffff38 0 18%,transparent 34% 60%,#ffffff1a 72%,transparent 86%);pointer-events:none}
.rv-t-nom{display:flex;align-items:center;gap:7px;font:800 14px/1.2 Archivo,system-ui,sans-serif}
.rv-t-nom .rv-ic{width:18px;height:18px;color:var(--iris-1)}
.rv-t-dit{font-size:11.5px;line-height:1.4;color:var(--gris);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-t-second{position:absolute;top:12px;right:12px;z-index:4;min-height:30px;padding:0 11px;border-radius:99px;border:1px solid #ffffff3a;
  background:#08090fd9;color:var(--txt);font:800 12.5px Archivo,system-ui,sans-serif;cursor:pointer}

/* ---- ce qui fait revenir ---- */
.rv-modules{display:grid;gap:10px}
.rv-mod{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--verre);border:1px solid var(--verre-bord);min-width:0}
.rv-mod-c{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;flex:1}
.rv-mod-c>b{font:800 14.5px/1.2 Archivo,system-ui,sans-serif}
.rv-mod-c>b small{font:600 12.5px Archivo,system-ui,sans-serif;color:var(--gris)}
.rv-mod-dit{font-size:12.5px;line-height:1.45;color:var(--gris)}
.rv-pastille{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ffffff0d;
  border:1px solid var(--verre-bord);font:800 14px "JetBrains Mono",monospace;color:var(--txt)}
.rv-fournee.offerte .rv-pastille{background:var(--iris);color:#08090F;border-color:transparent}
.rv-pastille .gem{width:14px;height:14px}
/* la carte de fidelite : une vraie carte, ses sceaux d'or (.fid-carte du jeu) */
.rv-carnet{padding:16px;border-radius:18px;background:linear-gradient(135deg,#2a1d08,#120d05 70%);border-color:#FFC46B70;
  box-shadow:0 18px 40px #0009,inset 0 1px #FFE7B240}
.rv-carnet .rv-mod-c>b small{color:#FFD79A}
.rv-sceaux{justify-content:flex-start;gap:10px}
.rv-sceaux i{width:28px;height:28px}
.rv-sceaux i.rv-gp{box-shadow:inset 0 2px 5px #000C,0 0 0 1.5px #FFC46B90,0 0 12px #FFC46B40}
.rv-sceaux i.rv-gp:not(.pose)::before{content:'GP';position:absolute;inset:0;display:grid;place-items:center;
  font:800 8.5px/1 "JetBrains Mono",monospace;color:#FFC46B;letter-spacing:.02em}

/* ---- le site : les boosters offerts ---- */
.rv-gratuit{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,#8FE38818,#8FE38806);border:1px solid #8FE38840}
.rv-gratuit .rv-ic.grand{color:#8FE388}

/* ---- Steam : les DLC ---- */
.rv-steam-dit{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--gris)}
.rv-dlcs{display:flex;flex-direction:column;gap:9px}
.rv-dlc{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-areas:"img c" "pied pied";gap:8px 12px;align-items:center;
  padding:8px;border-radius:12px;background:var(--verre);border:1px solid var(--verre-bord)}
.rv-dlc-img{grid-area:img;display:block;border-radius:7px;overflow:hidden;aspect-ratio:460/215;background:#0b0c17}
.rv-dlc-img img{display:block;width:100%;height:100%;object-fit:cover}
.rv-dlc-c{grid-area:c;display:flex;flex-direction:column;gap:2px;min-width:0}
.rv-dlc-pied{grid-area:pied;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.rv-dlc-c b{font:800 14px/1.2 Archivo,system-ui,sans-serif}
.rv-dlc-dit{font-size:11.5px;line-height:1.35;color:var(--gris)}
.rv-dlc-prix{font:800 13px Archivo,system-ui,sans-serif;color:#FFD79A;white-space:nowrap}
.rv-dlc-a{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#9FF0DF}
.rv-souhait{min-height:32px;flex:0 0 auto}
.rv-souhait .rv-ic{color:#FF77C4}
.rv-regle{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--gris)}

/* ---- le site sur grand ecran : une colonne centree ---- */
@media (min-width:900px){
  html:not(.client-steam) .rv-barre,html:not(.client-steam) .rv-grille{width:min(760px,100%);margin:0 auto}
  html:not(.client-steam) .rv-tuiles{margin:0;padding-inline:0;justify-content:safe center}
  html:not(.client-steam) .rv-tuile{flex:1 1 0;max-width:150px}
}

/* =======================================================================
   LE CLIENT STEAM : une scene plein ecran, sans defilement
   ======================================================================= */
.client-steam #gagner.rv-voile{padding:0;backdrop-filter:none;overflow:hidden;background:#07080e}
.client-steam .rv-scene{height:100%;min-height:0;padding:0;--rv-gut:28px}
.client-steam .rv-fond{height:100%;opacity:.42;
  background:linear-gradient(90deg,#07080e 0%,#07080ecc 35%,#07080e88 100%),var(--rv-univers,none) center/cover no-repeat}
.client-steam .rv-barre{position:relative;padding:16px var(--rv-gut) 8px;background:none}
.client-steam .rv-titre{font-size:24px}
.client-steam .rv-grille{flex:1;min-height:0;display:grid;padding:6px var(--rv-gut) 30px;
  grid-template-columns:minmax(260px,.9fr) minmax(360px,1.2fr) minmax(250px,.9fr);
  grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"demain heros steam" "attente attente attente";gap:14px 26px}
.client-steam .rv-grille .rv-h{margin-bottom:8px}
.client-steam .rv-heros{grid-area:heros;align-content:center;gap:6px}
.client-steam .rv-cadran{--rayon:clamp(90px,12.6vh,136px)}
.client-steam .rv-sachet{width:clamp(80px,11.5vh,124px)}
.client-steam .rv-chrono{font-size:clamp(44px,6.8vh,64px)}
.client-steam .rv-attente{grid-area:attente}
.client-steam .rv-attente .rv-h{text-align:center}
.client-steam .rv-demain{grid-area:demain;align-self:center}
.client-steam .rv-mod{padding:10px 12px}
.client-steam .rv-steam,.client-steam .rv-gratuit{grid-area:steam;align-self:start}
.client-steam .rv-steam{display:flex;flex-direction:column;padding:16px;border-radius:18px;
  background:linear-gradient(180deg,#1b2838cc,#0f1620cc);border:1px solid #66c0f433}
.client-steam .rv-steam .rv-h{color:#66c0f4}
.client-steam .rv-dlc-dit{display:none}
/* la main : cinq cartes en eventail ; le survol souleve, il ne choisit rien */
.client-steam .rv-tuiles{overflow:visible;justify-content:center;margin:0;padding:0;gap:16px}
.client-steam .rv-tuile{flex:0 0 clamp(104px,13.6vh,140px)}
.client-steam .rv-tuile:nth-child(1){transform:rotate(-5deg) translateY(10px)}
.client-steam .rv-tuile:nth-child(2){transform:rotate(-2.5deg) translateY(2px)}
.client-steam .rv-tuile:nth-child(4){transform:rotate(2.5deg) translateY(2px)}
.client-steam .rv-tuile:nth-child(5){transform:rotate(5deg) translateY(10px)}
.client-steam .rv-t-aller{transition:transform .2s cubic-bezier(.2,1,.35,1),box-shadow .2s}
.client-steam .rv-t-aller:hover,.client-steam .rv-t-aller:focus-visible{transform:translateY(-14px);
  box-shadow:0 24px 40px #000c,0 0 0 1.5px var(--iris-1)}

/* Fenetre etroite (moins de 1100 px) : la scene se replie et defile, avec la
   barre fine de la maison, plutot que de couper ce qu'elle dit. */
@media (max-width:1100px),(max-height:600px){
  .client-steam #gagner.rv-voile{overflow-y:auto}
  .client-steam .rv-scene{height:auto;min-height:100%}
  .client-steam .rv-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"heros heros" "attente attente" "demain steam"}
}

html.sobre .rv-sachet,html.sobre .rv-sachet.arrive,html.sobre .rv-case.charge{animation:none}
html.sobre .rv-s-gris,html.sobre .rv-s-ombre,html.sobre .rv-s-ligne,html.sobre .client-steam .rv-t-aller{transition:none}