:root{color-scheme:dark;--poster-max:820px}
*{box-sizing:border-box}
html{background:#05020e;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:#05020e;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 15% 18%,#251064 0,transparent 34%),radial-gradient(circle at 85% 64%,#55103f 0,transparent 34%),linear-gradient(#05020e,#020106)}
.ambient{position:fixed;inset:0;z-index:-2;opacity:.28;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.3px);background-size:43px 43px;mask-image:linear-gradient(to bottom,#000,transparent 95%)}

/* V2 conservée sans étirement. Sur un écran 1920x1080, le poster tient dans les 1080px de haut. */
.poster{position:relative;width:min(100vw,calc(100dvh * 2 / 3));margin:0 auto;line-height:0;box-shadow:0 0 100px #5d21c638,0 0 180px #ff2cb51f}
.art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

.hot{position:absolute;display:block;z-index:3;outline:0;text-decoration:none;transform:translateZ(0);transition:box-shadow .18s ease,filter .18s ease,transform .18s ease}
.hot:active{transform:scale(.997)}

/* Petites icônes du haut : aucune forme ajoutée au survol.
   On affiche uniquement une lueur diffuse de la couleur du réseau. */
.social{top:33.40%;height:3.72%;border-radius:22%;background:transparent!important;border:0!important;outline:0!important;filter:none!important;box-shadow:none!important;overflow:visible;isolation:isolate}
.tiktok-top{left:30.96%;width:6.35%;--glow:rgba(37,244,238,.88);--glow2:rgba(254,44,85,.42)}
.twitch-top{left:38.87%;width:6.35%;--glow:rgba(145,70,255,.92);--glow2:rgba(145,70,255,.45)}
.youtube-top{left:46.78%;width:6.35%;--glow:rgba(255,45,65,.92);--glow2:rgba(255,45,65,.44)}
.instagram-top{left:54.88%;width:6.35%;--glow:rgba(255,55,170,.92);--glow2:rgba(135,70,255,.44)}
.discord-top{left:62.60%;width:6.55%;--glow:rgba(88,101,242,.92);--glow2:rgba(88,101,242,.44)}

/* Petites icônes : uniquement une ombre EXTERNE, comme les grands boutons.
   Le calque est totalement transparent : aucun carré, aucun fond, aucune bordure visible. */
.social::before{content:"";position:absolute;pointer-events:none;z-index:-1;inset:4%;border-radius:22%;background:transparent!important;border:0!important;opacity:0;box-shadow:0 0 0 transparent;transition:opacity .16s ease,box-shadow .16s ease}
.social::after{content:none!important;display:none!important}
.social:hover,.social:focus-visible{transform:none!important;filter:none!important;background:transparent!important;box-shadow:none!important}
.social:hover::before,.social:focus-visible::before{opacity:1;box-shadow:0 0 8px var(--glow),0 0 18px var(--glow),0 0 30px var(--glow2)}

/* Grandes cartes : coordonnées propres à CHAQUE bouton, pas de formule/espacement automatique. */
.card{left:8.01%;width:84.08%;border-radius:16px}
.card.tiktok{top:38.41%;height:6.51%}
.card.twitch{top:45.70%;height:6.25%}
.card.youtube{top:52.7995%;height:5.8594%}
.card.instagram{top:59.5703%;height:5.9896%}
.card.discord{top:66.41%;height:6.12%}
.card.support{top:73.57%;height:8.40%}
.card.setup{top:82.8776%;height:6.5104%}

.card:hover,.card:focus-visible{transform:none;filter:brightness(1.055)}
.card.tiktok:hover,.card.tiktok:focus-visible{transform:none}
.card.tiktok:hover,.card.tiktok:focus-visible{box-shadow:0 0 7px rgba(255,255,255,.42),0 0 18px rgba(33,220,255,.72),0 0 34px rgba(255,45,157,.28)}
.card.twitch:hover,.card.twitch:focus-visible{box-shadow:0 0 7px rgba(255,255,255,.4),0 0 18px rgba(153,69,255,.78),0 0 34px rgba(153,69,255,.3)}
.card.youtube:hover,.card.youtube:focus-visible{box-shadow:0 0 7px rgba(255,255,255,.38),0 0 18px rgba(255,48,82,.72),0 0 34px rgba(255,48,82,.26)}
.card.instagram:hover,.card.instagram:focus-visible{box-shadow:0 0 7px rgba(255,255,255,.4),0 0 18px rgba(239,65,255,.74),0 0 34px rgba(255,93,181,.28)}
.card.discord:hover,.card.discord:focus-visible{box-shadow:0 0 7px rgba(255,255,255,.4),0 0 18px rgba(61,177,255,.76),0 0 34px rgba(83,108,255,.3)}
.card.support:hover,.card.support:focus-visible{box-shadow:0 0 8px rgba(255,255,255,.45),0 0 22px rgba(255,47,203,.82),0 0 42px rgba(255,77,150,.34)}
.card.setup:hover,.card.setup:focus-visible{box-shadow:0 0 7px rgba(255,255,255,.38),0 0 18px rgba(48,190,255,.7),0 0 34px rgba(89,88,255,.25)}

/* Les deux points sont imprimés dans l'art V2 : masque discret, limité à leur zone. */
.poster:after{content:"";position:absolute;z-index:2;left:47.2%;top:90.72%;width:5.6%;height:1.5%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(7,4,24,.96) 0 45%,rgba(7,4,24,.72) 62%,transparent 78%);filter:blur(.3px)}

@media(max-width:600px){
  .poster{width:100vw;max-width:none;margin:0}
  .card{border-radius:3.2vw}.social{border-radius:3vw}
  /* Sur tactile, pas d'ombre persistante après un tap. */
  .hot:hover{transform:none;filter:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.hot{transition:none}}

/* V5.4 mobile: preserve the original 2:3 artwork ratio. Never stretch it.
   On tall phones, the remaining viewport below the poster is filled by a
   continuation using the same artwork as a background, not by resizing art. */
@media (max-width:600px){
  html,body{min-height:100%;background:#05020e}
  body{position:relative;min-height:100svh}
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background-image:url("assets/vizy-page.webp.png");
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
    filter:blur(18px) brightness(.42) saturate(1.15);
    transform:scale(1.06);
    pointer-events:none;
  }
  .poster{width:100vw!important;height:auto!important;min-height:0!important;max-width:none!important;aspect-ratio:auto!important;overflow:visible!important}
  .art{display:block!important;width:100%!important;height:auto!important;min-height:0!important;object-fit:contain!important;aspect-ratio:auto!important}
}


/* V5.13 — MOBILE VERROUILLE SUR LE RENDU DE REFERENCE FOURNI PAR VIZY.
   Desktop = V5.8 intact. Mobile <=600px = ancien rendu plein écran V5.3 exact. */
@media (max-width:600px){
  html,body{margin:0;padding:0;min-height:100%;background:#05020e}
  body{min-height:100dvh}
  body::after{content:none!important;display:none!important}
  .poster{
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0 auto!important;
    overflow:hidden!important;
    aspect-ratio:auto!important;
  }
  .poster .art{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    object-fit:fill!important;
    aspect-ratio:auto!important;
  }
  .poster::before{content:none!important;display:none!important}
}