/* ═══════════════ SALLE D'OUVERTURE ═══════════════
   Trois paquets, et une révélation d'autant plus longue que la carte est rare.
   Tout est isolé sous « .ouv » et vit dans sa propre feuille : rien ne
   peut fuir vers la grille, l'impression ou l'export en images. */
/* SANS cette ligne, le display:flex ci-dessous l'emporte sur l'attribut
   [hidden] de la balise (une règle d'auteur bat toujours celle du
   navigateur) : le voile reste affiché en permanence par-dessus la page,
   qui paraît alors vide et noire. Constaté le 2026-09-03 — c'est ce qui
   rendait la collection inutilisable, et non l'animation. */
.ouv[hidden]{ display:none !important; }

.ouv{
  position:fixed; inset:0; z-index:150; overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#2E2456 0%,#17102F 55%,#0B0719 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:"Fredoka",system-ui,sans-serif; color:#fff;
}
.ouv::before{                       /* un ciel d'étoiles qui dérive très lentement */
  content:""; position:absolute; inset:-25%; pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(255,236,170,.55) 0 1.4px,transparent 2px);
  background-size:120px 120px,190px 190px; background-position:0 0,60px 40px;
  opacity:.45; animation:ouvCiel 120s linear infinite;
}
@keyframes ouvCiel{to{transform:translate3d(-120px,-190px,0)}}

/* Deux couches de particules : celles qui se rassemblent passent derrière la
   carte, celles de l'explosion passent devant. */
.grains{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
#ouvGrainsFond{z-index:3}
#ouvGrainsAvant{z-index:9}

.ouv__fermer{
  position:absolute; top:18px; right:20px; z-index:20; width:44px; height:44px;
  border:0; border-radius:50%; cursor:pointer; font-size:22px; line-height:1;
  background:rgba(255,255,255,.14); color:#fff;
}
.ouv__fermer:hover{background:rgba(255,255,255,.32)}

.ouv__scene{
  position:relative; z-index:5; display:flex; flex-direction:column;
  align-items:center; gap:20px; text-align:center; max-width:min(94vw,1120px);
  perspective:1500px;
}
.ouv__titre{font-family:"Baloo 2",sans-serif; font-size:clamp(24px,4vw,40px); color:var(--jaune); line-height:1.1}
.ouv__sous{font-size:15px; opacity:.78; max-width:540px; line-height:1.6}
.astuce{font-size:13px; opacity:.6; animation:astucePulse 2s ease-in-out infinite}
.astuce[hidden]{display:none !important}
@keyframes astucePulse{50%{opacity:1}}

/* ─────────── Le choix du paquet ─────────── */
.ouv__choix{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.ouvType{
  width:212px; padding:22px 18px 20px; border:0; border-radius:20px; cursor:pointer;
  color:#fff; font-family:inherit; background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 16px 34px rgba(0,0,0,.42);
  display:flex; flex-direction:column; align-items:center; gap:11px;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.ouvType:hover{
  transform:translateY(-8px) scale(1.03); background:rgba(255,255,255,.13);
  box-shadow:0 0 0 1.5px var(--jaune),0 22px 44px rgba(0,0,0,.5);
}
.ouvType b{font-family:"Baloo 2",sans-serif; font-size:18px}
.ouvType span{font-size:12.5px; opacity:.72; line-height:1.5}
.ouvType__n{color:var(--jaune); font-weight:600; opacity:1 !important}
.vignette{width:96px; height:130px; position:relative}

/* ─────────── Les trois paquets ─────────── */
.pack{position:relative; width:232px; height:322px; cursor:pointer;
      transition:transform .25s; animation:packFlotte 3.4s ease-in-out infinite}
.pack:hover{transform:scale(1.05)}
@keyframes packFlotte{50%{transform:translateY(-14px)}}
.pack.vign{width:96px; height:130px; animation:none; cursor:inherit}
.pack.vign:hover{transform:none}

/* Sachet métallisé */
.pack--sachet .corps{
  position:absolute; inset:0; border-radius:10px; overflow:hidden;
  background:
    linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 44%,transparent 52%),
    linear-gradient(160deg,#6B3FA0,#164A8A 45%,#8B33C7 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.22);
}
.pack--sachet .corps::after{           /* la trame de fleurs du dos des cartes */
  content:""; position:absolute; inset:0; background-size:44px 44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23FFFFFF' fill-opacity='.09'%3E%3Ccircle cx='20' cy='9.5' r='5.2'/%3E%3Ccircle cx='29.4' cy='16.3' r='5.2'/%3E%3Ccircle cx='25.8' cy='27.4' r='5.2'/%3E%3Ccircle cx='14.2' cy='27.4' r='5.2'/%3E%3Ccircle cx='10.6' cy='16.3' r='5.2'/%3E%3C/g%3E%3C/svg%3E");
}
.pack--sachet .dentelure{
  position:absolute; left:0; right:0; top:34px; height:12px; z-index:2;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 6px,transparent 6px 12px);
}
/* La lumière qui monte de l'intérieur juste avant la déchirure */
.pack--sachet .fente{
  position:absolute; left:6px; right:6px; top:40px; height:3px; z-index:5;
  background:#fff; border-radius:3px; opacity:0;
  box-shadow:0 0 18px 6px rgba(255,236,170,.9),0 0 46px 14px rgba(255,200,90,.6);
}
.pack__nom{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:3;
  font-family:"Baloo 2",sans-serif; font-size:30px; color:var(--jaune);
  text-shadow:0 3px 10px rgba(0,0,0,.6);
}
.pack__nom small{display:block; font-size:9px; letter-spacing:.28em; color:#fff; opacity:.8}

/* Coffre — des planches cerclées de fer, un couvercle bombé sur charnière.
   Toute la géométrie est en pourcentages : la vignette du menu réutilise le
   même dessin, en réduction. */
.pack--coffre{transform-style:preserve-3d}

.pack--coffre .cuve{
  position:absolute; left:0; right:0; bottom:0; height:54%; z-index:3;
  border-radius:5px 5px 12px 12px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 2px,transparent 2px 11%),
    linear-gradient(180deg,#A46E37,#754825 55%,#4A2C13);
  box-shadow:inset 0 0 0 3px #C9922F, inset 0 -12px 22px rgba(0,0,0,.55),
             0 20px 50px rgba(0,0,0,.55);
}
/* les deux cerclages, rivetés en haut et en bas */
.pack--coffre .cuve::before,
.pack--coffre .cuve::after{
  content:""; position:absolute; top:0; bottom:0; width:9%;
  background-image:
    radial-gradient(circle at 50% 12%,#FFF0B8 0 1.6px,transparent 2.2px),
    radial-gradient(circle at 50% 88%,#FFF0B8 0 1.6px,transparent 2.2px),
    linear-gradient(90deg,#6E5320,#D9AE49 38%,#F2D98A 52%,#8E6C24);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
}
.pack--coffre .cuve::before{left:13%}
.pack--coffre .cuve::after{right:13%}

/* Le noir de l'intérieur, qui s'allume quand le couvercle part en arrière */
.pack--coffre .dedans{
  position:absolute; left:4%; right:4%; top:0; height:13%; z-index:5; opacity:0;
  border-radius:0 0 50% 50%/0 0 100% 100%;
  background:radial-gradient(ellipse at 50% 0%,#FFF6D8 0%,#F6C21C 34%,#2A1608 78%);
  transition:opacity .25s ease-out;
}
.pack--coffre.ouvert .dedans{opacity:1}

.pack--coffre .couvercle{
  position:absolute; left:0; right:0; top:0; height:48%; z-index:4;
  border-radius:50% 50% 4px 4px/76% 76% 4px 4px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px 11%),
    linear-gradient(180deg,#BE8443,#8A5626 58%,#5E3A18);
  box-shadow:inset 0 0 0 3px #C9922F, inset 0 9px 16px rgba(255,220,150,.28);
  transform-origin:bottom center;
  transition:transform .75s cubic-bezier(.2,1.55,.4,1);
}
.pack--coffre .couvercle::before,
.pack--coffre .couvercle::after{
  content:""; position:absolute; top:0; bottom:0; width:9%;
  background:linear-gradient(90deg,#6E5320,#D9AE49 38%,#F2D98A 52%,#8E6C24);
}
.pack--coffre .couvercle::before{left:13%}
.pack--coffre .couvercle::after{right:13%}
.pack--coffre.ouvert .couvercle{transform:rotateX(-132deg)}

.pack--coffre .serrure{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:6;
  width:13%; height:11%; border-radius:4px;
  background:linear-gradient(180deg,#FFE9A8,#F6C21C 45%,#A8760B);
  box-shadow:0 2px 7px rgba(0,0,0,.55),inset 0 0 0 1.5px #7A5406;
}
.pack--coffre .serrure::after{                   /* le trou de serrure */
  content:""; position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  width:22%; height:34%; border-radius:50% 50% 22% 22%; background:#3A2708;
}

/* Le faisceau qui jaillit du coffre ouvert */
.pack--coffre .rai{
  position:absolute; left:50%; bottom:48%; width:170px; height:440px; z-index:1;
  transform:translateX(-50%) scaleY(0); transform-origin:bottom center; opacity:0;
  background:linear-gradient(to top,rgba(255,236,170,.95),rgba(255,214,120,.35) 45%,transparent 85%);
  clip-path:polygon(38% 100%,62% 100%,100% 0,0 0); filter:blur(3px);
}

/* Portail */
.pack--portail .anneau{
  position:absolute; inset:22px 6px; border-radius:50%; border:6px solid transparent;
  background:linear-gradient(#17102F,#17102F) padding-box,
             conic-gradient(from 0deg,#F6C21C,#8B33C7,#1F86D1,#F6C21C) border-box;
  box-shadow:0 0 40px rgba(139,51,199,.7),inset 0 0 40px rgba(31,134,209,.5);
  animation:portailTourne 6s linear infinite;
}
@keyframes portailTourne{to{transform:rotate(360deg)}}
.pack--portail .coeur{
  position:absolute; inset:58px 40px; border-radius:50%; filter:blur(2px); opacity:.85;
  background:radial-gradient(circle,#fff 0%,#C083EE 25%,#6B3FA0 60%,transparent 75%);
  animation:portailPulse 2.4s ease-in-out infinite;
}
@keyframes portailPulse{50%{transform:scale(1.12); opacity:1}}

/* ─────────── L'ouverture, en trois temps ─────────── */
.pack.sOuvre{animation:none; cursor:default; pointer-events:none}

/* Temps 1 : le paquet se charge, il tremble de plus en plus fort. */
.pack.charge{animation:packCharge .9s ease-in both}
@keyframes packCharge{
  0%{transform:none}
  20%{transform:translate(-2px,1px) rotate(-.8deg)}
  40%{transform:translate(3px,-2px) rotate(1.1deg) scale(1.01)}
  60%{transform:translate(-4px,2px) rotate(-1.4deg) scale(1.02)}
  80%{transform:translate(5px,-3px) rotate(1.8deg) scale(1.03)}
  100%{transform:translateY(-6px) scale(1.06)}
}
/* Temps 2 : la lumière filtre. */
.pack--sachet.fend .fente{animation:fenteOuvre .45s ease-out both}
@keyframes fenteOuvre{
  0%{opacity:0; transform:scaleX(.1)}
  40%{opacity:1; transform:scaleX(1)}
  100%{opacity:1; transform:scaleX(1) scaleY(3.5)}
}
/* La serrure vibre pendant la charge, puis saute. */
.pack--coffre.charge .serrure{animation:serrureVibre .11s linear infinite}
@keyframes serrureVibre{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,-50%) rotate(5deg) scale(1.07)}
}
.pack--coffre.fend .serrure{animation:serrureSaute .55s cubic-bezier(.2,.85,.4,1) forwards}
@keyframes serrureSaute{
  0%{transform:translate(-50%,-50%)}
  28%{transform:translate(-46%,-210%) rotate(-34deg) scale(1.18)}
  100%{transform:translate(-40%,-560%) rotate(-200deg) scale(.55); opacity:0}
}
/* Le faisceau s'élargit en même temps qu'il monte. */
.pack--coffre.fend .rai{animation:raiMonte .75s cubic-bezier(.2,.9,.3,1) both}
@keyframes raiMonte{
  0%{opacity:0; transform:translateX(-50%) scaleY(0) scaleX(.25)}
  45%{opacity:1; transform:translateX(-50%) scaleY(.9) scaleX(.7)}
  100%{opacity:1; transform:translateX(-50%) scaleY(1) scaleX(1)}
}
.pack--portail.fend .anneau{animation:portailAspire .7s cubic-bezier(.6,0,.9,.5) both}
@keyframes portailAspire{
  0%{transform:rotate(0) scale(1)}
  70%{transform:rotate(540deg) scale(.62)}
  100%{transform:rotate(760deg) scale(.34)}
}
.pack--portail.fend .coeur{animation:coeurAspire .7s ease-in both}
@keyframes coeurAspire{0%{transform:scale(1)} 100%{transform:scale(.15); opacity:1; filter:blur(0)}}

/* Temps 3 : ça lâche. */
.pack--sachet.creve .corps,
.pack--sachet.creve .dentelure,
.pack--sachet.creve .pack__nom{animation:sachetCreve .7s ease-in forwards}
@keyframes sachetCreve{
  30%{transform:translateY(10px) scale(1.12); filter:brightness(2.4)}
  100%{transform:translateY(70px) scale(.6); opacity:0; filter:blur(9px) brightness(3)}
}
.pack--coffre.creve{animation:coffreCreve .7s ease-out forwards}
@keyframes coffreCreve{
  25%{transform:scale(1.07); filter:brightness(2)}
  100%{transform:scale(.72) translateY(50px); opacity:0; filter:blur(7px) brightness(3)}
}
.pack--portail.creve .anneau{animation:portailCreve .7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes portailCreve{0%{transform:rotate(760deg) scale(.34)}
                        100%{transform:rotate(1080deg) scale(4.2); opacity:0}}
.pack--portail.creve .coeur{animation:coeurCreve .7s ease-out forwards}
@keyframes coeurCreve{0%{transform:scale(.15)} 100%{transform:scale(5.5); opacity:0; filter:blur(40px)}}

.eclat{
  position:fixed; inset:0; z-index:12; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%,#fff 0%,rgba(255,236,170,.6) 22%,transparent 60%);
}
.eclat.actif{animation:eclatFlash .85s ease-out forwards}
.eclat.bref{animation:eclatBref .35s ease-out forwards}
@keyframes eclatFlash{10%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(2.4)}}
@keyframes eclatBref{14%{opacity:.85; transform:scale(.9)} 100%{opacity:0; transform:scale(1.9)}}

/* ─────────── La révélation ─────────── */
.reveal{display:flex; flex-direction:column; align-items:center; gap:16px}
.reveal__carte{
  position:relative; isolation:isolate; cursor:pointer; perspective:1300px;
  width:calc(63mm * var(--rech)); height:calc(88mm * var(--rech));
}
.reveal__compteur{
  font-size:14px; letter-spacing:.04em; background:rgba(255,255,255,.12);
  border-radius:99px; padding:8px 20px;
}
.reveal__compteur b{color:var(--jaune)}
.reveal__compteur em{
  font-style:normal; font-weight:600; margin-left:10px; display:inline-block;
  opacity:0; transform:scale(.6);
}
.reveal__compteur em.dit{animation:sceauPop .6s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes sceauPop{
  0%{opacity:0; transform:scale(.5)}
  55%{opacity:1; transform:scale(1.32)}
  100%{opacity:1; transform:scale(1)}
}

/* Les trois couches empilées : l'entrée anime, l'inclinaison suit la souris,
   le pivot retourne la carte. Chacune son transform, aucune ne se marche
   dessus. */
.entree{position:absolute; inset:0; transform-origin:center center; will-change:transform}
.inclinaison{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .35s ease-out;
}
.inclinaison.suit{transition:transform .08s linear}
.pivot{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateY(180deg);
}
.pivot.retourne{animation:carteRetourne var(--dflip,.55s) cubic-bezier(.5,.05,.3,1) forwards}
@keyframes carteRetourne{from{transform:rotateY(180deg)} to{transform:rotateY(360deg)}}
.face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:calc(4.6mm * var(--rech));
}
.face--dos{transform:rotateY(180deg)}
.face .card{transform:scale(var(--rech)); transform-origin:top left}

/* Le halo coloré, derrière la carte */
.aura{
  position:absolute; left:50%; top:50%; width:200%; height:200%; z-index:-1;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--rc) 55%,transparent) 0%,
                                     color-mix(in srgb,var(--rc) 14%,transparent) 45%,transparent 70%);
  transition:opacity .5s ease-out;
}
.aura.on{opacity:1}
.aura.bat{animation:auraBat 2.6s ease-in-out infinite}
@keyframes auraBat{50%{transform:translate(-50%,-50%) scale(1.14)}}

.rayons{                                  /* réservé aux hautes raretés */
  position:absolute; left:50%; top:50%; width:290%; height:290%; z-index:-2;
  transform:translate(-50%,-50%); pointer-events:none; opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.22) 0deg 5deg,transparent 5deg 19deg);
  -webkit-mask-image:radial-gradient(circle,#000 16%,transparent 64%);
          mask-image:radial-gradient(circle,#000 16%,transparent 64%);
  transition:opacity .7s ease-out;
}
.rayons.on{opacity:.85; animation:rayonsTourne 18s linear infinite}
@keyframes rayonsTourne{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Le reflet holographique, sur les cartes rares et au-dessus. Réservé à
   l'écran : ces fondus ne survivent pas à l'export en image, mais ici
   personne n'exporte. */
.holo{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  border-radius:calc(4.6mm * var(--rech)); overflow:hidden;
  transition:opacity .8s ease-out;
}
.holo.on{opacity:1}
.holo::before{                                   /* l'arc-en-ciel qui glisse */
  content:""; position:absolute; inset:-40%;
  background:repeating-linear-gradient(112deg,
    rgba(255,119,115,.55) 0%,rgba(255,237,95,.55) 7%,rgba(168,255,95,.55) 14%,
    rgba(131,255,247,.55) 21%,rgba(120,148,255,.55) 28%,rgba(216,117,255,.55) 35%,
    rgba(255,119,115,.55) 42%);
  background-size:230% 230%;
  background-position:calc(50% + var(--hx,0%) * 1.4) calc(50% + var(--hy,0%) * 1.4);
  mix-blend-mode:color-dodge; opacity:.3;
}

/* Le trait de lumière qui balaie la carte au moment où elle se montre */
.brillance{
  position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden;
  border-radius:calc(4.6mm * var(--rech));
}
.brillance::before{
  content:""; position:absolute; top:-70%; bottom:-70%; width:46%; left:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);
  filter:blur(7px); mix-blend-mode:overlay; opacity:0; transform:rotate(14deg);
}
.brillance.balaye::before{animation:brilleBalaye 1.1s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes brilleBalaye{
  0%{left:-70%; opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:150%; opacity:0}
}
.brillance.repasse::before{animation:brilleBalaye 1.4s ease-in-out 1.4s infinite}

/* L'accent final, différent pour chaque rareté : c'est la ponctuation. */
.entree.arrive{animation:carteArrive .4s cubic-bezier(.2,.9,.3,1.05) both}
@keyframes carteArrive{
  0%{opacity:0; transform:translateY(90px) scale(.72)}
  100%{opacity:1; transform:none}
}
.entree.tremble{animation:carteTremble .16s linear infinite}
@keyframes carteTremble{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(var(--amp,1.5px),calc(var(--amp,1.5px) * -.6)) rotate(.35deg)}
  75%{transform:translate(calc(var(--amp,1.5px) * -1),calc(var(--amp,1.5px) * .5)) rotate(-.35deg)}
}
.accent-pourtous  {animation:acPourTous .7s cubic-bezier(.2,1.3,.4,1) both}
.accent-commune   {animation:acCommune .55s cubic-bezier(.2,1.3,.4,1) both}
.accent-rare      {animation:acRare .85s cubic-bezier(.2,1.25,.35,1) both}
.accent-epic      {animation:acEpique 1.05s cubic-bezier(.18,1.3,.35,1) both}
.accent-legendaire{animation:acLegendaire 1.5s cubic-bezier(.16,1.2,.3,1) both}

@keyframes acPourTous{0%{transform:scale(1)} 45%{transform:scale(1.05)} 100%{transform:none}}
@keyframes acCommune{0%{transform:scale(1)} 45%{transform:scale(1.04)} 100%{transform:none}}
@keyframes acRare{
  0%{transform:scale(1)} 30%{transform:scale(1.14) rotate(1.6deg)}
  55%{transform:scale(.98) rotate(-1deg)} 100%{transform:none}
}
@keyframes acEpique{
  0%{transform:scale(1)} 22%{transform:scale(1.2) rotate(-2.2deg)}
  45%{transform:scale(.95) rotate(1.4deg)} 68%{transform:scale(1.07) rotate(-.6deg)}
  100%{transform:none}
}
@keyframes acLegendaire{
  0%{transform:scale(1); filter:brightness(2.6)}
  18%{transform:scale(1.3) rotate(2.6deg); filter:brightness(2)}
  38%{transform:scale(.94) rotate(-2deg); filter:brightness(1.35)}
  56%{transform:scale(1.12) rotate(1.2deg); filter:brightness(1.15)}
  74%{transform:scale(.99) rotate(-.5deg)}
  100%{transform:none; filter:none}
}

/* ─────────── Le bilan ─────────── */
.bilan{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-width:940px}
.bilan__c{
  position:relative; width:calc(63mm * .52); height:calc(88mm * .52);
  border-radius:3mm; box-shadow:0 0 0 2px var(--rc),0 8px 22px rgba(0,0,0,.45);
  animation:bilanPose .5s cubic-bezier(.2,1.3,.4,1) both; animation-delay:var(--d,0s);
}
@keyframes bilanPose{from{opacity:0; transform:translateY(26px) scale(.9)} to{opacity:1; transform:none}}
.bilan__c .card{transform:scale(.52); transform-origin:top left}
.ouv__actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px}
.ouvBtn{
  font-family:inherit; font-size:15px; font-weight:600; border:0; border-radius:12px;
  padding:13px 24px; cursor:pointer; background:rgba(255,255,255,.16); color:#fff;
}
.ouvBtn:hover{background:rgba(255,255,255,.32)}
.ouvBtn--go{background:var(--jaune); color:var(--marine)}
.ouvBtn--go:hover{background:#FFD447}
.ouvBtn--fin{font-size:13px; padding:9px 18px; background:rgba(255,255,255,.1)}

@media (max-width:640px){
  .ouvType{width:min(88vw,260px)}
  .bilan__c{width:calc(63mm * .38); height:calc(88mm * .38)}
  .bilan__c .card{transform:scale(.38)}
}
@media (prefers-reduced-motion:reduce){
  .ouv *,.ouv::before{animation-duration:.01ms !important; animation-iteration-count:1 !important}
}