/* ============================================================ Vœux Premium — expérience plein écran d'ouverture de vœux ============================================================ Un seul composant superposé au reste du dashboard (jamais une page à part) : le choix de la quantité (×1/×3/×5/×10) se fait AVANT cet overlay, via le menu déroulant du bouton "Utiliser un vœu" (.vp-dropdown, tout en bas de ce fichier). L'overlay lui-même ne montre plus que : booster + révélations progressives → Cover Flow des cartes obtenues. Thématisation (voir §"Thème" plus bas) : toutes les couleurs qui doivent changer pour un événement (Halloween, Noël, anniversaire...) sont des variables CSS portées par .vp-theme-*. Ajouter un thème = ajouter un bloc .vp-theme-xxx { --vp-...: ...; } + activer la classe correspondante en JS (voir VP_THEME dans script.js) — aucune logique à toucher. */ .vp-overlay { --vp-accent: #d4a5d4; --vp-bg-a: rgba(20, 10, 30, .97); --vp-bg-b: rgba(6, 4, 10, .99); /* Dos de carte par défaut. Un thème événementiel n'a besoin que de redéfinir cette variable (chemin relatif à ce fichier CSS) — voir modules/voeux-premium/assets/. */ --vp-card-back: url('assets/dos.png'); position: fixed; inset: 0; /* Valeur volontairement très haute : cet overlay est déplacé en enfant direct de à l'ouverture (voir vpOpenOverlay() dans script.js) précisément pour échapper au contexte d'empilement isolé de .tcg-page-shell — sans ce déplacement, aucun z-index ici ne suffirait à passer au-dessus de la barre de navigation fixe du site. */ z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; background: radial-gradient(120% 100% at 50% 0%, var(--vp-bg-a), var(--vp-bg-b)); opacity: 0; transition: opacity var(--tcg-duration-seuil, 320ms) var(--tcg-ease-out, ease); } .vp-overlay.vp-open { opacity: 1; } /* Thème par défaut (aucun override nécessaire, sert de référence). Les thèmes événementiels futurs ne redéfinissent que ces variables. */ .vp-theme-default { } .vp-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.6); font-size: .95rem; transition: background .2s, color .2s; z-index: 2; } .vp-close:hover { background: rgba(255,255,255,.14); color: white; } /* Pendant la séquence, la seule fermeture possible est le bouton "Fermer" du bloc d'actions (voir .vp-sequence-actions) — la croix ne réapparaît qu'une fois le Cover Flow atteint. Classe posée/retirée par script.js. */ #voeux-premium-overlay.vp-in-sequence .vp-close { display: none; } .vp-screen { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 1; transform: none; transition: opacity 320ms var(--tcg-ease-out, ease), transform 320ms var(--tcg-ease-out, ease); } .vp-screen.vp-leaving { opacity: 0; transform: translateY(-8px) scale(.98); } .vp-screen.vp-entering { opacity: 0; transform: translateY(8px) scale(.98); } /* Un écran masqué doit RÉELLEMENT disparaître (display:none), jamais rester en flux : sans ce doublon de spécificité, un utilitaire .hidden générique chargé plus tôt dans la page peut perdre face à .vp-screen{display:flex} au même niveau de spécificité — et un écran "masqué" restait alors visible, empilé sous l'autre (c'était la cause du Cover Flow visible pendant la séquence, et de la composition anormalement haute). */ .vp-screen.hidden { display: none !important; } /* Un seul bloc composé (carte + infos + navigation), centré comme un tout — pas de hauteur artificielle : c'est .vp-overlay qui centre l'ensemble verticalement dans le viewport, ce bloc ne doit occuper que sa hauteur réelle pour que le centrage soit fidèle à ce qu'on voit. */ .vp-stage-click { width: 100%; display: flex; flex-direction: column; align-items: center; cursor: pointer; } /* ── Carte unique : booster ET chaque carte tour à tour ────────────────────── Une seule carte est jamais animée à la fois : #vp-card-frame est le booster au départ (dos affiché), puis reprend ce même rôle pour chaque carte de la séquence (pop → anticipation → flip → retrait avant la suivante). Il n'existe jamais deux cartes visibles simultanément. Ratio : 2/3, le ratio RÉEL des cartes du TCG (vérifié sur les fichiers sources — /assets/discord/cards/.../rareteN/NNN.png font 600×900, tout comme assets/dos.png) — pas le 5:7 utilisé ailleurs pour des vignettes recadrées. Une seule dimension (width) est fixée ; la hauteur découle de aspect-ratio, jamais les deux indépendamment. */ #vp-card-stage { position: relative; width: 220px; aspect-ratio: 2 / 3; margin: 0 auto; perspective: 1200px; } /* Halo : diffusion elliptique (plus large que haute, comme une lumière ambiante naturelle) — pas plus lumineux, la courbe du dégradé (0%→70%→transparent) reste identique, seule sa forme change. */ .vp-card-glow { position: absolute; inset: -50px -95px; border-radius: 50%; background: radial-gradient(circle, var(--vp-glow, rgba(212,165,212,.5)) 0%, transparent 70%); opacity: 0; pointer-events: none; } #vp-card-stage.vp-anticipating .vp-card-glow { opacity: .5; animation: vpGlowPulse 1.1s ease-in-out infinite; } #vp-card-stage.vp-revealed .vp-card-glow { opacity: 1; animation: vpGlowBurst .7s cubic-bezier(.16,1,.3,1) both; } #vp-card-stage.vp-revealed.rarity-4 .vp-card-glow { inset: -70px -125px; } /* Carte "vivante" une fois révélée : lévitation qu'on ressent plus qu'on ne la voit (cycle lent, amplitude minime). Portée par la scène (pas par le cadre, déjà occupé par le flip/pop/retrait) pour ne jamais interférer avec ces transformations. */ #vp-card-stage.vp-revealed { animation: vpCardLevitate 7s ease-in-out infinite; } @keyframes vpCardLevitate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes vpGlowPulse { 0%, 100% { transform: scale(.85); opacity: .3; } 50% { transform: scale(1.05); opacity: .65; } } @keyframes vpGlowBurst { 0% { transform: scale(.35); opacity: 0; } 40% { transform: scale(1.3); opacity: .95; } 100% { transform: scale(1); opacity: .35; } } .vp-card-frame { position: absolute; inset: 0; border-radius: 14px; transform-style: preserve-3d; opacity: 0; transform: scale(.88) rotateY(0deg); } .vp-card-face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; border: 2px solid rgba(255,255,255,.2); box-shadow: 0 20px 50px rgba(0,0,0,.5); } .vp-card-back { transform: rotateY(0deg); } .vp-card-back-art { width: 100%; height: 100%; background-image: var(--vp-card-back); background-size: cover; background-position: center; } .vp-card-front { transform: rotateY(180deg); } .vp-card-front-img { width: 100%; height: 100%; object-fit: cover; display: block; } #vp-card-stage.vp-revealed .vp-card-face { box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px 2px var(--vp-glow, rgba(212,165,212,.5)); } /* Animations (une classe = un mouvement précis, jouées l'une après l'autre, jamais superposées) : apparition → respiration → ouverture → [par carte : pop → flip] → retrait. Chaque étape est déclenchée et chronométrée depuis script.js, qui fige aussi l'état final via un style inline entre deux animations pour garantir qu'il n'y a jamais de saut visuel. */ .vp-card-frame.vp-appear { animation: vpCardAppear 480ms var(--tcg-ease-out, ease) both; } @keyframes vpCardAppear { 0% { opacity: 0; transform: scale(.88) rotateY(0deg); } 100% { opacity: 1; transform: scale(1) rotateY(0deg); } } .vp-card-frame.vp-preparing { animation: vpCardBreathe 1.1s ease-in-out infinite; } @keyframes vpCardBreathe { 0%, 100% { transform: scale(1) rotateY(0deg); } 50% { transform: scale(1.035) rotateY(0deg); } } .vp-card-frame.vp-cracking { animation: vpCardCrack 300ms var(--tcg-ease-inout, ease) both; } @keyframes vpCardCrack { 0% { transform: scale(1) rotateY(0deg); } 40% { transform: scale(1.08) rotateY(0deg); } 100% { transform: scale(1) rotateY(0deg); } } /* La carte "sort du booster et avance légèrement vers le joueur" — avant le flip, jamais en même temps. */ .vp-card-frame.vp-popping { animation: vpCardPop 220ms var(--tcg-ease-out, ease) both; } @keyframes vpCardPop { 0% { transform: scale(1) translateY(0) rotateY(0deg); } 100% { transform: scale(1.08) translateY(-8px) rotateY(0deg); } } .vp-card-frame.vp-flipping { animation: vpCardFlip var(--vp-flip-duration, 480ms) cubic-bezier(.4,0,.2,1) both; } @keyframes vpCardFlip { 0% { transform: scale(1.08) translateY(-8px) rotateY(0deg); } 70% { transform: scale(calc(1.08 + var(--vp-overshoot, 0))) translateY(-8px) rotateY(180deg); } 100% { transform: scale(1.08) translateY(-8px) rotateY(180deg); } } /* Légendaire : léger zoom supplémentaire une fois la face avant visible — un signal de rythme, pas un effet en plus. */ #vp-card-stage.rarity-4 .vp-card-frame.vp-legendary-zoom { animation: vpLegendaryZoom .5s ease-out both; } @keyframes vpLegendaryZoom { 0% { transform: scale(1.08) translateY(-8px) rotateY(180deg); } 45% { transform: scale(1.14) translateY(-8px) rotateY(180deg); } 100% { transform: scale(1.08) translateY(-8px) rotateY(180deg); } } .vp-card-frame.vp-retreat { animation: vpCardRetreat 260ms var(--tcg-ease-out, ease) both; } @keyframes vpCardRetreat { 0% { opacity: 1; transform: scale(1.08) translateY(-8px) rotateY(180deg); } 100% { opacity: 0; transform: scale(.92) translateY(0) rotateY(180deg); } } /* Rare : balayage holographique unique au moment de la révélation. */ #vp-card-stage.vp-revealed.rarity-3 .vp-card-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 40%, rgba(147,197,253,.5) 50%, transparent 60%); background-size: 250% 250%; background-position: -40% -40%; animation: wishSweep .9s ease-out .1s both; } /* Légendaire : cadre doré spécifique + poussières d'ambiance. */ #vp-card-stage.vp-revealed.rarity-4 .vp-card-face { border-color: rgba(253,230,138,.75); } #vp-card-stage.vp-revealed.rarity-4::before { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #fde68a; box-shadow: 0 0 8px 2px rgba(253,230,138,.9), -70px -76px 6px 1px rgba(253,230,138,.85), 64px -50px 6px 1px rgba(253,230,138,.8), -54px 66px 6px 1px rgba(253,230,138,.75), 74px 58px 6px 1px rgba(253,230,138,.8); opacity: 0; animation: vpSpark 2.2s ease-in-out .5s infinite; pointer-events: none; z-index: 3; } @keyframes vpSpark { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } } /* Bloc compact : carte → infos → progression → boutons, rapprochés pour se lire comme un seul ensemble (plus d'espace mort entre les éléments). */ .vp-reveal-info { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; margin-top: 10px; } .vp-reveal-info.vp-in { opacity: 1; transform: translateY(0); } /* Hiérarchie : nom nettement dominant, collection et rareté au même niveau (la couleur suffit à distinguer la rareté, pas besoin d'une taille à part). */ .vp-reveal-name { font-family: 'Playfair Display', serif; color: white; font-weight: 700; font-size: 1.7rem; line-height: 1.15; } .vp-reveal-col { color: rgba(255,255,255,.45); font-size: .95rem; margin-top: 6px; } .vp-reveal-rarity { font-size: .95rem; margin-top: 4px; font-weight: 700; } /* Progression (×3/×5/×10) : simple repère de position, pas une décoration. */ .vp-sequence-progress { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; justify-content: center; max-width: 320px; } .vp-progress-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background .2s, transform .2s; } .vp-progress-dot.vp-done { background: rgba(255,255,255,.5); } .vp-progress-dot.vp-current { background: var(--vp-accent); transform: scale(1.3); } .vp-sequence-actions { display: flex; gap: 12px; margin-top: 14px; } .vp-btn-ghost { padding: 9px 18px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.7); font-size: .85rem; transition: background .2s, color .2s; } .vp-btn-ghost:hover { background: rgba(255,255,255,.12); color: white; } /* ── Cover Flow ──────────────────────────────────────────────────────────── */ /* Inchangé pour l'instant (voir la demande) — conserve son propre ratio de vignette existant, non concerné par cette correction. */ .vp-coverflow-title { color: rgba(255,255,255,.4); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; } .vp-coverflow { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; } .vp-cf-track { position: relative; height: 260px; flex: 1; max-width: 480px; perspective: 1100px; } .vp-cf-card { position: absolute; top: 0; left: 50%; width: 150px; height: 210px; margin-left: -75px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255,255,255,.18); box-shadow: 0 16px 40px rgba(0,0,0,.5); cursor: pointer; transition: transform 320ms var(--tcg-ease-out, ease), opacity 320ms ease, box-shadow 320ms ease; will-change: transform; } .vp-cf-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .vp-cf-card.vp-cf-active { border-color: var(--vp-accent); box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px 2px var(--vp-glow, rgba(212,165,212,.4)); } .vp-cf-card.rarity-4.vp-cf-active { border-color: rgba(253,230,138,.85); } .vp-cf-nav { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.6); font-size: 1.3rem; line-height: 1; flex-shrink: 0; transition: background .2s, color .2s; } .vp-cf-nav:hover:not(:disabled) { background: rgba(255,255,255,.14); color: white; } .vp-cf-nav:disabled { opacity: .25; cursor: default; } .vp-cf-nav.hidden { visibility: hidden; } .vp-cf-detail { margin-top: 18px; min-height: 60px; } .vp-cf-detail .vp-reveal-name { font-size: 1rem; } .vp-summary { margin-top: 10px; color: rgba(255,255,255,.5); font-size: .85rem; } .vp-btn-close { margin-top: 20px; } @media (prefers-reduced-motion: reduce) { .vp-overlay, .vp-screen { transition: none; } .vp-card-frame.vp-appear, .vp-card-frame.vp-preparing, .vp-card-frame.vp-cracking, .vp-card-frame.vp-popping, .vp-card-frame.vp-flipping, .vp-card-frame.vp-legendary-zoom, .vp-card-frame.vp-retreat, #vp-card-stage.vp-revealed { animation: none; } #vp-card-stage.vp-anticipating .vp-card-glow, #vp-card-stage.vp-revealed .vp-card-glow { animation: none; opacity: .4; } #vp-card-stage.vp-revealed.rarity-3 .vp-card-front::after, #vp-card-stage.vp-revealed.rarity-4::before { animation: none !important; opacity: 0 !important; } .vp-reveal-info { opacity: 1; transform: none; transition: none; } .vp-cf-card { transition: none; } } @media (max-width: 640px) { .vp-stage-click { min-height: 280px; } #vp-card-stage { width: 170px; } .vp-cf-track { height: 210px; } .vp-cf-card { width: 120px; height: 168px; margin-left: -60px; } .vp-cf-nav { width: 32px; height: 32px; font-size: 1.1rem; } } /* ── Menu déroulant "Utiliser un vœu" ──────────────────────────────────────── Rendu au départ dans modules/profil/index.php (à côté du bouton), mais déplacé en enfant direct de à l'ouverture par vpPositionDropdown() (script.js) : #profil-panel porte overflow:hidden (nécessaire au repli mobile du Profil), qui rognerait ce menu dès qu'il dépasse le panneau. Le vrai problème est ce rognage, pas un empilement — augmenter un z-index n'y aurait rien changé. top/left sont posés en JS (position réelle du bouton) ; ce fichier ne fixe donc plus de coordonnées par défaut. */ .vp-dropdown { position: fixed; min-width: 200px; background: linear-gradient(135deg, #2d1b3d, #1a0a1f); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px; z-index: 60; transform-origin: top; transform: scaleY(.85) translateY(-4px); opacity: 0; pointer-events: none; transition: transform 160ms var(--tcg-ease-out, ease), opacity 160ms ease; } .vp-dropdown.vp-dropdown-open { transform: scaleY(1) translateY(0); opacity: 1; pointer-events: auto; } .vp-dropdown-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; background: none; border: none; color: rgba(255,255,255,.85); font-size: .85rem; transition: background .15s; } .vp-dropdown-item:hover { background: rgba(255,255,255,.1); } .vp-dropdown-empty, .vp-dropdown-loading { padding: 10px 12px; color: rgba(255,255,255,.4); font-size: .82rem; } @media (prefers-reduced-motion: reduce) { .vp-dropdown { transition: none; } }