body{
  min-height:100vh;
  background:
    linear-gradient(180deg,rgba(3,13,19,.16),rgba(3,13,19,.70) 58%,#071722 100%),
    url("../mervent-soiree.png") center/cover fixed no-repeat;
}
main{min-height:100vh;display:grid;place-items:center;padding:35px 18px}
.card{
  width:min(760px,94vw);
  text-align:center;
  padding:clamp(30px,7vw,65px);
  border-radius:28px;
  background:rgba(6,24,34,.86);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 25px 80px rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.bean{
  width:54px;height:78px;margin:0 auto 20px;
  border-radius:55% 45% 60% 40% / 42% 60% 40% 58%;
  background:linear-gradient(145deg,#fffdf1,#e8dcc2 62%,#c6b48e);
  transform:rotate(20deg);
  position:relative;
  box-shadow:inset -7px -8px 12px rgba(80,58,31,.22),inset 6px 5px 9px rgba(255,255,255,.7),0 6px 18px rgba(0,0,0,.25)
}
.bean:after{
  content:"";position:absolute;left:14px;top:13px;width:25px;height:43px;
  border:3px solid rgba(110,84,46,.28);border-right-color:transparent;border-radius:50%;transform:rotate(16deg)
}
.kicker{color:var(--gold);font-weight:850;letter-spacing:.12em;text-transform:uppercase}
h1{font:800 clamp(3.8rem,14vw,8.5rem)/.88 Georgia,serif;margin:.16em 0;color:var(--cream);text-shadow:0 4px 24px #000}
h2{font:700 clamp(1.8rem,5vw,3rem) Georgia,serif;margin:.2em 0 18px}
p{font-size:clamp(1.05rem,2.7vw,1.35rem);color:#e2e9e9;max-width:590px;margin:0 auto 26px}
.actions{
  margin-top:8px;
}
.back{
  display:inline-block;text-decoration:none;color:#1d130a;background:var(--fire);
  font-weight:900;padding:13px 20px;border-radius:999px
}
.back.retro{
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
}
.back:hover{filter:brightness(1.06)}
.programme-wrap{margin:18px auto 28px;max-width:640px;position:relative}
.programme-img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 35px rgba(0,0,0,.3)}
.fire-secret{
  position:absolute;
  left:29%;
  bottom:1%;
  width:50%;
  height:28%;
  border-radius:50%;
  cursor:pointer;
  text-decoration:none;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.fire-secret:focus-visible{
  outline:2px dashed rgba(243,194,109,.8);
  outline-offset:3px;
}
.fire-secret::after{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  box-shadow:0 0 0 rgba(231,139,50,0);
  transition:box-shadow .25s ease;
}
.fire-secret:hover::after{
  box-shadow:0 0 28px rgba(231,139,50,.30);
}

/* Deuxième secret : le groupe d'amis dans la photo */
.friends-secret{
  position:absolute;
  left:3%;
  top:13%;
  width:39%;
  height:24%;
  border-radius:24px;
  cursor:pointer;
  text-decoration:none;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.friends-secret:focus-visible{
  outline:2px dashed rgba(243,194,109,.8);
  outline-offset:3px;
}
.friends-secret::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:24px;
  box-shadow:0 0 0 rgba(231,139,50,0);
  transition:box-shadow .25s ease;
}
.friends-secret:hover::after{
  box-shadow:0 0 30px rgba(231,139,50,.28);
}

/* Troisième secret : la guitare sur la droite de la photo */
.guitar-secret{
  position:absolute;
  right:0%;
  top:48%;
  width:16%;
  height:29%;
  border-radius:20px;
  cursor:pointer;
  text-decoration:none;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.guitar-secret:focus-visible{
  outline:2px dashed rgba(243,194,109,.8);
  outline-offset:3px;
}
.guitar-secret::after{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:18px;
  box-shadow:0 0 0 rgba(231,139,50,0);
  transition:box-shadow .25s ease;
}
.guitar-secret:hover::after{
  box-shadow:0 0 30px rgba(231,139,50,.30);
}

.small{margin-top:20px;font-size:.86rem;color:#aebdc0}

/* Petits pamplemousses cachés dans le décor */
.float-fruits{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.pamp-link{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:50%;
  pointer-events:auto;
  opacity:.20;
  text-decoration:none;
  background:
    radial-gradient(circle at center,#fff3df 0 10%,transparent 11%),
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.52) 0 2deg,transparent 2deg 44deg),
    radial-gradient(circle at center,#ff9f8f 0 68%,#ffe4bd 69% 82%,#eca354 83%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:opacity .2s ease, transform .2s ease;
}
.pamp-link:hover,.pamp-link:focus{
  opacity:.72;
  transform:scale(1.12) rotate(8deg);
  outline:none;
}

.pamp-c{left:8%;bottom:13%;transform:rotate(5deg)}

.card{position:relative;z-index:2}

@media(max-width:700px){
  .pamp-link{width:34px;height:34px}
  .pamp-c{left:3%;bottom:10%}
}