/* JEUBERCY2026_LANDING_OFFICIAL_ARTIST_POSTER_V4 */

:root{
  --poster-bg:#050301;
  --focus:#3749eb;
}

html{
  min-height:100%;
  background:var(--poster-bg);
}

body{
  margin:0 !important;
  min-width:320px;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% 15%,#241208 0,#0b0603 34rem,#050301 70%) !important;
}

.poster-page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:18px 0 42px;
  background:transparent;
}

.poster-stage{
  position:relative;
  width:min(1024px,100vw);
  margin:0 auto;
  line-height:0;
  overflow:hidden;
  background:#050301;
  box-shadow:
    0 0 100px rgba(233,145,8,.12),
    0 32px 100px rgba(0,0,0,.78);
}

.poster-stage__image{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Portrait officiel V7.
   Le shell recouvre intégralement le portrait généré dans le poster.
   Le vrai crop officiel est volontairement plus petit et plus à gauche,
   afin de libérer BERCY 2026, la baseline et le CTA. */
.artist-portrait{
  position:absolute;
  z-index:4;
  left:6.8%;
  top:14.0%;
  width:28.5%;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:clamp(1px,.16vw,2px) solid #f5bd26;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,#603a10 0%,#2f1807 44%,#100804 78%,#070402 100%);
  box-shadow:
    0 0 0 4px rgba(250,195,47,.10),
    0 0 34px rgba(250,171,22,.28),
    inset 0 0 38px rgba(255,183,30,.12);
}

.artist-portrait::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,188,39,.18),transparent 62%);
  pointer-events:none;
}

.artist-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 45%,transparent 0 57%,rgba(9,4,2,.30) 82%,rgba(5,3,2,.52) 100%);
  pointer-events:none;
}

.artist-portrait img{
  position:relative;
  z-index:1;
  width:80%;
  height:80%;
  object-fit:cover;
  object-position:center 46%;
  border:1px solid rgba(255,221,104,.62);
  border-radius:50%;
  filter:saturate(.96) contrast(1.035) brightness(.99);
  box-shadow:
    0 0 0 4px rgba(247,190,47,.08),
    0 0 24px rgba(247,190,47,.23);
}

/* Masque la mention LONASE dessinée sous le CTA dans le poster.
   La seule mention visible reste après le bloc 18+. */
.poster-patch--upper-lonase{
  position:absolute;
  z-index:4;
  left:28.7%;
  top:40.45%;
  width:48.5%;
  height:4.9%;
  border-radius:999px;
  background:
    radial-gradient(ellipse at center,rgba(18,9,4,.99),rgba(6,3,2,.995) 75%);
  box-shadow:
    0 -9px 20px rgba(6,3,2,.92),
    0  9px 20px rgba(6,3,2,.92);
  pointer-events:none;
}

/* Hotspots HTML proportionnels au poster 1024x1536. */

.poster-hotspot--cta{
  left:37.2%;
  top:34.0%;
  width:52.6%;
  height:6.35%;
  overflow:hidden;
  border-radius:999px;
}

/* Animated shine drawn over the single button already embedded in the PNG. */
.poster-hotspot--cta::before{
  content:"";
  position:absolute;
  z-index:2;
  top:-25%;
  bottom:-25%;
  left:-25%;
  width:17%;
  transform:skewX(-18deg);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.05) 15%,
      rgba(255,255,255,.76) 50%,
      rgba(255,255,255,.08) 84%,
      transparent 100%);
  filter:blur(1px);
  animation:v7CtaShine 3.7s ease-in-out infinite;
  pointer-events:none;
}

/* Subtle lateral premium glow without redrawing a second button. */
.poster-hotspot--cta::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:-4% -7%;
  border-radius:999px;
  box-shadow:
    -38px 0 34px -24px rgba(255,187,13,.78),
     38px 0 34px -24px rgba(255,187,13,.78),
    0 0 20px rgba(255,210,70,.18);
  pointer-events:none;
}

@keyframes v7CtaShine{
  0%,52%{left:-25%;opacity:0;}
  58%{opacity:1;}
  76%{left:111%;opacity:.95;}
  82%,100%{left:111%;opacity:0;}
}


.poster-hotspot{
  position:absolute;
  z-index:6;
  display:block;
  margin:0;
  padding:0;
  border:0;
  color:transparent;
  background:transparent;
  cursor:pointer;
  font:inherit;
  line-height:normal;
  -webkit-tap-highlight-color:transparent;
}

.poster-hotspot:hover{
  background:rgba(255,218,94,.035);
  box-shadow:inset 0 0 0 2px rgba(255,226,125,.14);
}

.poster-hotspot:focus-visible{
  outline:4px solid var(--focus);
  outline-offset:3px;
  background:rgba(55,73,235,.10);
}

.poster-hotspot--rules{
  left:5.2%;
  top:93.0%;
  width:29.0%;
  height:4.1%;
}

.poster-hotspot--terms{
  left:35.2%;
  top:93.0%;
  width:29.5%;
  height:4.1%;
}

.poster-hotspot--privacy{
  left:66.0%;
  top:93.0%;
  width:29.0%;
  height:4.1%;
}

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media(max-width:600px){
  .poster-cta{
    left:18.8%;
    width:62.4%;
    top:34.20%;
    height:7.25%;
    gap:2.8%;
  }

  .poster-cta::before{
    inset:-3%;
    box-shadow:
      -8vw 0 6vw -4.5vw rgba(255,191,16,.90),
       8vw 0 6vw -4.5vw rgba(255,191,16,.90),
      0 0 2.3vw rgba(255,227,128,.48);
  }

  .poster-cta::after{
    left:-14%;
    right:-14%;
    filter:blur(1.35vw);
  }

  .poster-cta__gift{
    font-size:clamp(18px,5.4vw,30px);
  }

  .poster-cta__label{
    font-size:clamp(14px,4.15vw,23px);
  }

  .poster-cta__flare{
    width:11%;
  }
}

@media(max-width:600px){
  .poster-page{
    padding:0 0 28px;
  }

  .poster-stage{
    width:100vw;
    box-shadow:none;
  }


  .artist-portrait{
    left:5.8%;
    top:14.2%;
    width:27.4%;
  }

  .artist-portrait img{
    width:79%;
    height:79%;
  }

  .poster-hotspot--cta{
    left:36.8%;
    top:34.0%;
    width:53.2%;
    height:6.45%;
  }

  .artist-portrait{
    border-width:1.5px;
  }

  .poster-hotspot:focus-visible{
    outline-width:3px;
  }
}

@media(prefers-reduced-motion:reduce){
  .poster-hotspot,
  .poster-cta{
    transition:none !important;
  }

  .poster-hotspot--cta::before{
    animation:none !important;
  }
}