/* shared/carte-gagnee.css — animation « Nouvelle carte ! » (cartes de partenaires gagnées, Rudolf 02/10/2026).
   Charte noir et or. La carte s'avance (zoom avant, léger 3D), brille (halo or + reflet), feu d'artifice sur canvas,
   texte, puis elle se range. prefers-reduced-motion : simple apparition avec halo. Piloté par shared/carte-gagnee.js. */
.cg-voile {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(34, 25, 6, .94) 0%, rgba(0, 0, 0, .97) 60%);
  opacity: 0; transition: opacity .3s ease;
  perspective: 1100px;
  font-family: inherit;
}
.cg-voile.cg-on { opacity: 1; }
.cg-voile.cg-sortie { opacity: 0; transition: opacity .45s ease .25s; }
.cg-feu { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.cg-scene {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(92vw, 440px); max-height: 100vh; padding: 12px 0;
  box-sizing: border-box;
}
.cg-carte {
  position: relative;
  width: min(56vw, 34vh, 270px);
  transform-style: preserve-3d;
  transform: translateZ(-900px) scale(.18) rotateY(-38deg) rotateX(12deg);
  opacity: 0;
  border-radius: 6%;
}
.cg-carte .tzc { width: 100%; cursor: default; }
.cg-carte .cg-img { display: block; width: 100%; border-radius: 6%; }
.cg-voile.cg-avance .cg-carte {
  animation: cg-avance 1.15s cubic-bezier(.16, .84, .3, 1.06) forwards;
}
@keyframes cg-avance {
  0%   { transform: translateZ(-900px) scale(.18) rotateY(-38deg) rotateX(12deg); opacity: 0; }
  25%  { opacity: 1; }
  70%  { transform: translateZ(60px) scale(1.06) rotateY(6deg) rotateX(-2deg); opacity: 1; }
  100% { transform: translateZ(0) scale(1) rotateY(0) rotateX(0); opacity: 1; }
}
/* Éclat : halo or qui pulse + reflet qui balaie la carte. */
.cg-voile.cg-eclat .cg-carte { animation: cg-avance 0s forwards, cg-halo 1.8s ease-in-out .05s 2 alternate; opacity: 1; transform: none; }
@keyframes cg-halo {
  0%   { box-shadow: 0 0 0 0 rgba(232, 194, 106, 0), 0 0 0 0 rgba(255, 243, 196, 0); }
  100% { box-shadow: 0 0 34px 8px rgba(232, 194, 106, .75), 0 0 90px 24px rgba(255, 215, 0, .28); }
}
.cg-reflet {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; border-radius: 6%;
}
.cg-reflet::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -70%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 246, 210, .75) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-14deg); opacity: 0;
}
.cg-voile.cg-eclat .cg-reflet::before { animation: cg-balaye 1.1s ease-in-out .15s 2; }
@keyframes cg-balaye { 0% { left: -70%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* Texte */
.cg-texte {
  text-align: center; color: #f3e3b3; opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease; max-width: 100%; padding: 0 10px; box-sizing: border-box;
}
.cg-voile.cg-texte-on .cg-texte { opacity: 1; transform: none; }
.cg-titre {
  margin: 0; font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 800; letter-spacing: .04em;
  color: #ffd76a; text-shadow: 0 0 18px rgba(255, 200, 60, .55), 0 2px 0 #5a420c;
}
.cg-nom { margin: 6px 0 2px; font-size: clamp(1rem, 4vw, 1.2rem); font-weight: 700; color: #fff3c4; overflow-wrap: anywhere; }
.cg-sous { margin: 0 0 12px; font-size: .95rem; color: #d9c48f; }
.cg-compte { margin: 0 0 8px; font-size: .8rem; color: #a8925a; }
.cg-voile .cg-btn {   /* deux classes : passe devant button[type="button"] des feuilles de page */
  appearance: none; border: 1px solid #e8c26a; border-radius: 999px; cursor: pointer;
  padding: 10px 26px; min-height: 44px; font: inherit; font-weight: 700; font-size: 1rem;
  color: #1a1204; background: linear-gradient(180deg, #ffe7a0, #d9a93c 55%, #b9851f);
  box-shadow: 0 4px 18px rgba(232, 194, 106, .35); text-shadow: none; transition: filter .15s ease;
}
.cg-voile .cg-btn:hover { filter: brightness(1.08); border-color: #fff3c4; }
.cg-voile .cg-btn:focus-visible { outline: 3px solid #fff3c4; outline-offset: 3px; }

/* Rangement : la carte rétrécit et file vers la collection (cible posée en variables par le script). */
.cg-voile.cg-range .cg-carte {
  animation: none; opacity: 1;
  transition: transform .7s cubic-bezier(.5, 0, .75, .4), opacity .7s ease;
  transform: translate(var(--cg-dx, 40vw), var(--cg-dy, -45vh)) scale(.08) rotate(-12deg);
  opacity: .1;
}
.cg-voile.cg-range .cg-texte { opacity: 0; transition: opacity .25s ease; }

/* Petit écran : la carte laisse la place au texte et au bouton. */
@media (max-height: 560px) { .cg-carte { width: min(40vw, 30vh, 200px); } .cg-sous { margin-bottom: 6px; } }

/* Mouvement réduit : apparition simple, halo fixe, ni zoom ni feu d'artifice ni rangement en vol. */
@media (prefers-reduced-motion: reduce) {
  .cg-voile, .cg-voile.cg-sortie { transition: opacity .2s linear; }
  .cg-carte, .cg-voile.cg-avance .cg-carte, .cg-voile.cg-eclat .cg-carte, .cg-voile.cg-range .cg-carte {
    animation: none; transform: none; opacity: 1; transition: none;
    box-shadow: 0 0 30px 6px rgba(232, 194, 106, .6), 0 0 70px 18px rgba(255, 215, 0, .22);
  }
  .cg-reflet { display: none; }
  .cg-texte { transition: none; opacity: 1; transform: none; }
  .cg-feu { display: none; }
}