body{
  background:var(--night);
  line-height:1.55;
  overflow-x:hidden;
}
section{padding:72px 0;position:relative;z-index:2}

/* HERO */
.hero{
  min-height:92vh;display:grid;place-items:end center;position:relative;
  background:
    linear-gradient(180deg,rgba(3,13,19,.05),rgba(3,13,19,.28) 52%,#071722 100%),
    url("../mervent-soiree.png") center/cover no-repeat;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 78%,rgba(231,139,50,.18),transparent 35%);
}
.hero-box{
  width:min(920px,92%);text-align:center;position:relative;z-index:2;
  padding:65px 20px 92px;text-shadow:0 4px 22px #000
}
.hero h1{
  font:800 clamp(3.2rem,8vw,6.8rem)/.92 Georgia,serif;
  margin:.18em 0
}
.hero p{font-size:clamp(1.1rem,2.5vw,1.45rem);color:var(--cream);margin:16px auto 24px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--fire);
  color:#21150a;
  border:none;
  padding:14px 21px;
  box-shadow:0 9px 28px #0002;
  transition:.2s transform,.2s box-shadow;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 11px 34px #0004}
.btn.light{background:#fff8e9;color:#5e391d;border:1px solid #d4bb92}

/* CONTENT */
.intro{text-align:center}
.title{
  margin:0 0 15px;
}
.lead{
  max-width:790px;
  font-size:1.12rem;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.card{
  background:linear-gradient(145deg,#123341,#0b202a);
  border:1px solid #ffffff18;border-radius:20px;padding:25px
}
.card .ico{font-size:2rem}
.card h3{color:var(--gold);margin:8px 0}

/* INVITATION */
.paper{background:var(--paper);color:var(--ink)}
.invite{
  max-width:860px;margin:auto;background:#fff8e9;border-radius:24px;
  padding:clamp(26px,5vw,50px);box-shadow:0 20px 55px #0003
}
.invite h2{text-align:center;color:#70421f}
.rules{margin:24px 0;padding:0;list-style:none}
.rules li{padding:12px 0;border-bottom:1px dashed #cbb48e}
.note{
  background:#e78b3220;border-left:5px solid var(--fire);
  padding:16px;border-radius:8px;margin-top:24px
}

/* CALENDAR */
.calendar{background:linear-gradient(135deg,#0e2c38,#091c26)}
.calbox{
  max-width:900px;margin:auto;text-align:center;border:1px solid #ffffff1b;
  border-radius:22px;padding:32px;background:#ffffff08
}
.cal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.small{font-size:.92rem;color:#c6d2d4}

/* FORM */
.signup{background:#f5ead4;color:#21180f}
.formwrap{max-width:850px;margin:auto}
.signup .lead{}
form{
  margin-top:28px;background:#fffaf0;border-radius:24px;
  padding:clamp(24px,4vw,38px);box-shadow:0 18px 48px #0002
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.full{grid-column:1/-1}
label{display:block;font-weight:750}
input,select,textarea{
  width:100%;margin-top:6px;padding:12px 13px;
  border:1px solid #ccb99c;border-radius:10px;background:white;font:inherit;color:#2a2118
}
textarea{min-height:100px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:650}
.check input{width:auto;margin-top:4px}
.form-note{
  margin-top:18px;padding:14px 16px;background:#f5d8a8;
  border-radius:12px;font-size:.93rem
}

/* FLOATING DECOR */
.float-decor{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.pamp{
  position:absolute;width:34px;height:34px;border-radius:50%;
  opacity:.13;
  background:
    radial-gradient(circle at center,#fff3df 0 10%,transparent 11%),
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 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);
  animation:floaty 18s ease-in-out infinite
}
.guitar{
  position:absolute;font-size:30px;opacity:.10;
  filter:grayscale(1);animation:floaty 22s ease-in-out infinite reverse
}
.p1{left:5%;top:22%;animation-delay:-3s}.p2{right:8%;top:48%;animation-delay:-9s}.p3{left:16%;top:78%;animation-delay:-14s}
.g1{right:14%;top:18%;animation-delay:-5s}.g2{left:8%;top:60%;animation-delay:-12s}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%{transform:translate3d(20px,-28px,0) rotate(8deg)}
}
@media(prefers-reduced-motion:reduce){.pamp,.guitar{animation:none}}

/* COUNTDOWN */
.countdown-wrap{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:min(760px,92%);z-index:5;text-align:center;
}
.countdown-panel{
  display:inline-block;background:rgba(5,20,29,.78);
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;padding:12px 18px 14px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:0 10px 35px rgba(0,0,0,.25);
}
.countdown-title{
  color:var(--gold);font-weight:850;letter-spacing:.09em;
  text-transform:uppercase;font-size:.78rem;margin-bottom:8px;
}
.countdown{
  display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;
}
.countdown .unit{
  min-width:76px;padding:6px 8px 5px;border-radius:12px;
  background:rgba(255,255,255,.06);
}
.countdown .num{
  display:block;font:800 clamp(1.35rem,3vw,2.05rem)/1 Georgia,serif;
  color:#fff3dc;
}
.countdown .lab{
  display:block;margin-top:4px;color:#d5e0e1;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
}
.countdown-open{
  display:none;color:#fff3dc;font-weight:900;font-size:1.15rem;
}
@media(max-width:520px){
  .countdown-wrap{top:10px}
  .countdown-panel{padding:9px 10px 11px;border-radius:16px}
  .countdown{gap:5px}
  .countdown .unit{min-width:61px;padding:5px 4px}
  .countdown-title{font-size:.68rem}
  .countdown .lab{font-size:.58rem}
}

/* PETIT EASTER EGG : LA MOGETTE CACHÉE */
.mogette-anchor{
  position:absolute;
  width:42px;
  height:58px;
  z-index:7;
  pointer-events:none;
}
.secret-mogette{
  position:relative;
  width:31px;
  height:46px;
  display:none;
  pointer-events:auto;
  opacity:.28;
  transform:rotate(24deg);
  border-radius:55% 45% 60% 40% / 42% 60% 40% 58%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.95) 0 6%, transparent 7%),
    linear-gradient(145deg,#fffdf1 0%,#e9dec6 58%,#c9b994 100%);
  box-shadow:
    inset -5px -7px 8px rgba(72,52,28,.20),
    inset 4px 4px 8px rgba(255,255,255,.65),
    0 4px 10px rgba(0,0,0,.18);
  transition:opacity .2s ease, transform .2s ease;
}
.mogette-anchor.active .secret-mogette{display:block}
.secret-mogette::after{
  content:"";
  position:absolute;
  left:8px;top:8px;
  width:15px;height:28px;
  border:2px solid rgba(107,83,48,.30);
  border-right-color:transparent;
  border-radius:50%;
  transform:rotate(18deg);
}
.secret-mogette:hover,
.secret-mogette:focus{
  opacity:.72;
  transform:rotate(18deg) scale(1.08);
  outline:none;
}

/* Emplacements prédéfinis : toujours sur les bords, jamais au centre */
.mspot-hero-left{left:3%;bottom:15%}
.mspot-hero-right{right:3%;top:31%}
.mspot-intro-left{left:2%;top:24%}
.mspot-intro-right{right:2%;bottom:17%}
.mspot-paper-left{left:2.5%;top:14%}
.mspot-paper-right{right:2.5%;bottom:13%}
.mspot-calendar-left{left:3%;bottom:18%}
.mspot-calendar-right{right:3%;top:18%}
.mspot-signup-left{left:2%;top:22%}
.mspot-signup-right{right:2%;bottom:17%}
.mspot-footer-left{left:4%;top:18%}
.mspot-footer-right{right:4%;bottom:14%}

@media(max-width:760px){
  .mogette-anchor{width:36px;height:50px}
  .secret-mogette{width:27px;height:40px}
  .secret-mogette::after{left:7px;top:7px;width:13px;height:24px}
  .mspot-hero-left,.mspot-intro-left,.mspot-paper-left,.mspot-calendar-left,.mspot-signup-left{left:1.5%}
  .mspot-hero-right,.mspot-intro-right,.mspot-paper-right,.mspot-calendar-right,.mspot-signup-right{right:1.5%}
}

footer{text-align:center;padding:45px 15px;color:#b9c7c9;border-top:1px solid #ffffff17}
@media(max-width:760px){
  .cards,.grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  section{padding:52px 0}
  .hero{min-height:78vh}
  .pamp{width:26px;height:26px}.guitar{font-size:24px}
}