@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Lato:ital,wght@0,300;0,400;0,700;1,300&display=swap');
:root{--cream:#fff8f2;--ink:#383838;--orange:#ff985d;--active:rgba(224,118,61,.26)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink)}
body{font-family:'Lato',Arial,sans-serif;font-weight:300;font-size:18px;overflow-x:hidden}
a{color:inherit}.top{height:128px;background:url('/assets/media/fond.JPG') center top/cover no-repeat;border-bottom:2px solid rgba(255,255,255,.35)}
.head-inner{width:1180px;height:128px;margin:0 auto;position:relative}.brand{position:absolute;left:0;top:14px;width:245px;height:103px}
.logo{display:block;width:238px;height:auto}.socials{position:absolute;left:0;top:76px;width:238px;height:30px;display:flex;align-items:center;justify-content:center;gap:13px;color:#fff;font-size:23px;font-weight:400}
.socials a{height:27px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}.socials .etsy{font-family:Georgia,serif;font-size:18px;margin-left:-2px;margin-right:-3px}.socials i{font-size:25px}
.nav{position:absolute;left:665px;right:auto;top:80px;height:33px;display:flex;align-items:center;gap:18px;font-family:'Amatic SC',cursive;font-weight:700;font-size:24px;color:#fff;white-space:nowrap}
.nav a{padding:0 27px 3px;text-decoration:none;line-height:29px}.nav a.active{background:var(--active)}
.stage{width:1180px;height:702px;margin:0 auto;position:relative}.heading{font-family:'Amatic SC',cursive;font-weight:400;color:var(--orange);letter-spacing:.22em;margin:0}
.copyright{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;font-family:'Amatic SC',cursive;font-size:22px;color:#f5a171;white-space:nowrap}
.avatar{position:absolute;right:12px;bottom:43px;width:250px;height:auto;object-fit:contain;z-index:1}
/* About */
.about-copy{position:absolute;left:0;top:62px;width:800px;text-align:center;font-size:18px;line-height:1.38}.about-copy .heading{font-size:38px;margin-bottom:33px}.about-copy p{margin:0 0 26px}.about-copy p:nth-of-type(3){margin-bottom:26px}.about-copy p:nth-of-type(4){margin-top:-25px;margin-bottom:27px}.about-copy a{color:#f28b50;text-decoration:underline;font-weight:400}.about-copy strong{font-weight:700}.about .avatar{right:12px;bottom:43px;width:250px}
/* Emotes */
.emotes-grid{position:absolute;left:48px;top:43px;width:552px;height:276px;display:grid;grid-template-columns:repeat(6,90px);grid-template-rows:repeat(3,90px);gap:3px 2px;overflow:hidden}.emotes-grid img{width:90px;height:90px;object-fit:cover;display:block}
.badges-row{position:absolute;left:49px;top:393px;width:550px;height:62px;display:flex;align-items:center;justify-content:space-between}.badges-row img{width:58px;height:58px;object-fit:contain;display:block}
.panels-row{position:absolute;left:49px;top:510px;width:551px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:8px}.panels-row img{width:103px;height:59px;object-fit:contain;display:block}
.prices{position:absolute;left:calc(var(--emotes-menu-center, 845px) - 137.5px);top:92px;width:275px;text-align:center;font-size:18px;line-height:1.35;z-index:2}.prices .heading{font-size:39px;margin-bottom:27px}.prices p{margin:0}.prices .badge-title{margin-top:24px;margin-bottom:27px}.prices .panel-title{margin-top:24px;margin-bottom:28px}.emotes .avatar{right:12px;bottom:43px;width:250px}
/* Overlays */
.scene-grid{position:absolute;left:49px;top:40px;width:600px;display:grid;grid-template-columns:300px 300px;grid-template-rows:170px 170px;gap:3px}.scene-grid video{width:300px;height:170px;object-fit:cover;display:block;background:#ddd}
.portrait-row{position:absolute;left:49px;top:383px;width:600px;height:196px;display:grid;grid-template-columns:repeat(3,200px);gap:3px}.portrait-row img{width:200px;height:196px;object-fit:cover;display:block}
.overlay-copy{position:absolute;left:calc(var(--emotes-menu-center, 845px) - 145px);top:60px;width:290px;text-align:center;font-size:18px;line-height:1.42;z-index:2}.overlay-copy .heading{font-size:39px;margin-bottom:27px}.overlay-copy .fine{font-size:15px;font-style:italic;line-height:1.75;margin-top:27px}.overlay-copy .avatars-title{margin-top:85px;margin-bottom:51px}.overlays .avatar{right:12px;bottom:43px;width:250px}
/* V8 responsive mobile layer — desktop styles above remain unchanged */
@media (max-width:900px){
  html,body{width:100%;overflow-x:hidden}
  body{font-size:17px}
  .top{height:auto;min-height:0;background-position:center top}
  .head-inner{width:100%;height:auto;margin:0;padding:10px 10px 11px;position:relative;transform:none}
  .brand{position:relative;left:auto;top:auto;width:245px;height:105px;margin:0 auto;transform:none}
  .logo{width:238px;margin:0 auto}
  .socials{left:3px;top:73px;width:238px;height:28px;gap:13px;font-size:22px}
  .socials i{font-size:24px}
  .socials .etsy{font-size:18px}
  .nav{position:relative;left:auto;right:auto;top:auto;height:auto;margin:8px auto 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:21px;line-height:1.1;width:100%;white-space:normal}
  .nav a{padding:2px 12px 4px;line-height:28px;text-align:center}

  .stage{width:100%;height:auto;min-height:0;margin:0;padding:30px 14px 16px;position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;transform:none}
  .copyright{position:static;left:auto;bottom:auto;transform:none;margin:10px auto 0;font-size:20px;order:99}
  .avatar,.about .avatar,.emotes .avatar,.overlays .avatar{position:static;right:auto;bottom:auto;transform:none;width:190px;height:auto;margin:4px auto 0;z-index:1}

  /* A propos */
  .about{padding-top:31px;gap:22px}
  .about-copy{position:static;left:auto;top:auto;width:min(100%,680px);text-align:center;font-size:17px;line-height:1.48}
  .about-copy .heading{font-size:36px;margin-bottom:28px}
  .about-copy p{margin:0 0 22px}
  .about-copy p:nth-of-type(3){margin-bottom:22px}
  .about-copy p:nth-of-type(4){margin-top:-16px;margin-bottom:23px}
  .about-copy br{display:none}

  /* Emotes / Badges */
  .emotes{padding-top:26px;gap:28px}
  .emotes-grid{position:static;left:auto;top:auto;transform:none;width:min(94vw,540px);height:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:3px;overflow:visible}
  .emotes-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .badges-row{position:static;left:auto;top:auto;transform:none;width:min(92vw,510px);height:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;align-items:center;justify-items:center}
  .badges-row img{width:min(100%,58px);height:auto;aspect-ratio:1/1;object-fit:contain}
  .panels-row{position:static;left:auto;top:auto;transform:none;width:min(92vw,500px);height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;align-items:center;justify-items:center}
  .panels-row img{width:min(100%,145px);height:auto;object-fit:contain}
  .prices{position:static;left:auto;top:auto;transform:none;width:min(90vw,340px);text-align:center;font-size:17px;line-height:1.4;z-index:auto;margin-top:2px}
  .prices .heading{font-size:38px;margin-bottom:23px}
  .prices .badge-title{margin-top:25px;margin-bottom:22px}
  .prices .panel-title{margin-top:25px;margin-bottom:22px}

  /* Overlays / Avatars */
  .overlays{padding-top:26px;gap:26px}
  .scene-grid{position:static;left:auto;top:auto;transform:none;width:min(94vw,560px);display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:5px}
  .scene-grid video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
  .portrait-row{position:static;left:auto;top:auto;transform:none;width:min(94vw,560px);height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
  .portrait-row img{width:100%;height:auto;aspect-ratio:200/196;object-fit:cover}
  .overlay-copy{position:static;left:auto;top:auto;transform:none;width:min(90vw,430px);text-align:center;font-size:17px;line-height:1.48;z-index:auto;margin-top:4px}
  .overlay-copy .heading{font-size:38px;margin-bottom:23px}
  .overlay-copy .fine{font-size:14px;line-height:1.7;margin-top:24px}
  .overlay-copy .avatars-title{margin-top:44px;margin-bottom:24px}
}

@media (max-width:480px){
  body{font-size:16px}
  .head-inner{padding-left:5px;padding-right:5px}
  .brand{width:220px;height:98px}
  .logo{width:214px}
  .socials{left:0;top:68px;width:220px;gap:12px;font-size:20px}
  .socials i{font-size:22px}
  .socials .etsy{font-size:17px}
  .nav{margin-top:7px;gap:2px 3px;font-size:18px}
  .nav a{padding:2px 7px 3px;line-height:25px}
  .stage{padding-left:10px;padding-right:10px;gap:24px}
  .about-copy{font-size:16px;line-height:1.5}
  .about-copy .heading,.prices .heading,.overlay-copy .heading{font-size:34px}
  .emotes-grid{width:95vw;gap:2px}
  .badges-row{width:93vw;gap:10px 5px}
  .panels-row{width:90vw;gap:12px}
  .prices,.overlay-copy{font-size:16px}
  .scene-grid,.portrait-row{width:95vw}
  .overlay-copy .fine{font-size:13px}
  .avatar,.about .avatar,.emotes .avatar,.overlays .avatar{width:170px}
  .copyright{font-size:19px}
}

/* V7 - light media protection: no layout or visual changes */
img, video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}