/* Page Vitrine du Pack Aulit : complète commun/style.css et accueil.css (boutons, nav-action). Les .va-/.vc-/.vs-/.ve- reprennent le style des overlays. */

.vitrine main { max-width: 74rem; }
.bouton.petit { min-height: 44px; padding: .3rem .9rem; font-size: .72rem; }

.barre-vitrine { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin: 1rem 0 0; padding: .75rem 0; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); }
@media (min-width: 60rem) { .barre-vitrine { position: sticky; top: 0; z-index: 5; } }
.barre-vitrine ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.barre-vitrine a { color: var(--white); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.barre-vitrine a:hover { border-bottom-color: var(--magenta); }
.vitrine h2 { scroll-margin-top: 6rem; }
.vitrine .chapeau { margin-bottom: 1rem; }

.grille-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; }
.demo { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.demo h3 { margin: 0; font-size: .95rem; }
.demo-desc { margin: 0; color: var(--dim); font-size: 1.05rem; line-height: 1.4; flex: 1; }
.demo-pied { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.demo-lien { font-weight: 600; font-size: 1.02rem; }

/* Cadre : fond de scène sombre ; la toile garde sa taille logique et est réduite par transform (scale posé par vitrine.js). */
.cadre { position: relative; overflow: hidden; width: 100%; border-radius: 4px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--violet) 22%, var(--bg)), var(--bg) 70%); }
.toile { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cadre[data-vivant="off"]::after { content: "Aperçu à l’arrêt : appuyez sur « Lancer »"; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; color: var(--dim); font-size: .95rem; }
.cadre iframe { border: 0; background: transparent; display: block; }

/* Alertes (700 × 230) */
.va-scene { position: absolute; inset: 0; }
.va-scene canvas { position: absolute; inset: 0; pointer-events: none; }
.va-scene .va-trace { width: 700px; height: 230px; }
.va-carte { position: absolute; left: 70px; top: 40px; width: 560px; height: 150px; display: flex; align-items: center; gap: 22px; padding: 0 28px; box-sizing: border-box;
  border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--violet) 14%, var(--bg)));
  border: 2px solid var(--c); box-shadow: 0 0 28px -4px var(--c), inset 0 0 30px -12px var(--c); overflow: hidden; }
.va-icone { flex: 0 0 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--c2), var(--c)); box-shadow: 0 0 22px var(--c); color: var(--bg); }
.va-icone svg { width: 54px; height: 54px; fill: currentColor; }
.va-texte { flex: 1; min-width: 0; color: var(--white); }
.va-etiq { font-family: var(--font-titre); font-size: 14px; font-weight: 800; letter-spacing: .2em; color: var(--c); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-nom { font-size: 48px; font-weight: 700; line-height: 1.1; white-space: nowrap; text-shadow: 0 0 14px var(--c); padding-bottom: 2px; }
.va-nom span { display: inline-block; white-space: pre; }
.va-detail { font-size: 20px; font-weight: 600; line-height: 1.2; max-height: 48px; overflow: hidden; }
.va-flash { position: absolute; inset: 0; background: var(--c); opacity: 0; pointer-events: none; mix-blend-mode: screen; }

/* Chat (420 × 120) */
.vc-msg { --c: var(--dim); position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 8px 12px 9px 16px; border-radius: 4px 14px 14px 4px; overflow: hidden; transform-origin: left center;
  background: linear-gradient(100deg, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 72%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); animation: var(--entree) .6s cubic-bezier(.2,.9,.25,1.15) both; }
.vc-msg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.vc-tete { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 19px; line-height: 1.2; margin-bottom: 2px; }
.vc-nom { text-shadow: 0 0 8px currentColor; }
.vc-role { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; color: #06080d; background: var(--c); font-weight: 800; }
.vc-texte { font-size: 21px; font-weight: 600; line-height: 1.35; }
.vc-viewer { --entree: vc-glisse; }
@keyframes vc-glisse { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.vc-abonne { --c: var(--violet); --entree: vc-ressort; }
@keyframes vc-ressort { 0% { opacity: 0; transform: translateX(-60px) scaleX(.7); } 55% { opacity: 1; transform: translateX(8px) scaleX(1.04); } 78% { transform: translateX(-3px); } 100% { transform: none; } }
.vc-modo { --c: var(--cyan); --entree: vc-chute; }
@keyframes vc-chute { 0% { opacity: 0; transform: translateY(-90px) rotate(-3deg); } 60% { opacity: 1; transform: translateY(6px) rotate(.8deg); } 100% { transform: none; } }
.vc-vip { --c: var(--magenta); --entree: vc-retourne; }
@keyframes vc-retourne { from { opacity: 0; transform: perspective(500px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
.vc-vip::after, .vc-premier::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: vc-balai 2.4s .5s 2 ease-in-out; }
@keyframes vc-balai { to { left: 120%; } }
.vc-diffuseur { --c: var(--cyan); --entree: vc-zoom; border-color: var(--white);
  background: linear-gradient(100deg, color-mix(in srgb, var(--violet) 40%, var(--bg)), color-mix(in srgb, var(--magenta) 35%, var(--bg)));
  box-shadow: 0 0 22px var(--cyan), 0 0 40px color-mix(in srgb, var(--magenta) 50%, transparent); }
@keyframes vc-zoom { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.07); } 100% { transform: none; } }
.vc-premier { --c: var(--magenta); border-width: 2px; border-color: var(--white);
  background: linear-gradient(100deg, color-mix(in srgb, var(--magenta) 38%, var(--bg)), color-mix(in srgb, var(--violet) 30%, var(--bg)));
  animation: vc-explose .9s cubic-bezier(.2,.9,.25,1.15) both, vc-pulse 1.4s .9s 4 ease-in-out; }
@keyframes vc-explose { 0% { opacity: 0; transform: scale(.2) rotate(-8deg); filter: brightness(3); } 35% { opacity: 1; transform: scale(1.18) rotate(2deg); } 50% { transform: scale(.96) translateX(-5px); } 62% { transform: scale(1.03) translateX(5px); } 78% { transform: translateX(-2px); } 100% { transform: none; filter: none; } }
@keyframes vc-pulse { 50% { box-shadow: 0 0 30px var(--magenta), 0 0 60px var(--violet); } }
.vc-sort { animation: vc-sortie .45s ease-in forwards !important; }
@keyframes vc-sortie { to { opacity: 0; transform: translateX(50px); } }

/* Transitions (640 × 360) : deux scènes factices, la transition passe de A à B au point de coupe. */
.vs-fond { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-titre); font-weight: 800; font-size: 44px; letter-spacing: .2em; text-transform: uppercase; }
.vs-fond span { grid-area: 1 / 1; }
.vs-a { color: var(--cyan); text-shadow: 0 0 18px var(--cyan); }
.vs-b { color: var(--magenta); text-shadow: 0 0 18px var(--magenta); display: none; }
.vs-fond[data-etat="b"] .vs-a { display: none; }
.vs-fond[data-etat="b"] .vs-b { display: block; }
.toile > canvas { position: absolute; inset: 0; }

/* Emotes (660 × 150) */
.cadre .toile:has(.ve-img) { display: flex; align-items: center; justify-content: space-around; padding: 0 12px; }
.ve-img { image-rendering: pixelated; }

@media (prefers-reduced-motion: reduce) {
  .vc-msg, .vc-vip::after, .vc-premier::after { animation: none !important; }
}