/* Nouvel An — design simple, festif, lisible */
:root{
  --bg1:#070A1A;
  --bg2:#1A0B2E;
  --card:#0E132Bcc;
  --stroke:#FFFFFF22;
  --text:#F4F6FF;
  --muted:#C9D0FFcc;
  --accent:#FFD36A;
  --accent2:#7BE7FF;
  --danger:#FF6B6B;
  --ok:#4CFFB5;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, #1E2A6B 0%, transparent 60%),
              radial-gradient(900px 700px at 80% 20%, #6B1E5A 0%, transparent 55%),
              linear-gradient(140deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

.bg{position:fixed; inset:0; pointer-events:none; overflow:hidden}
.snow{
  position:absolute; inset:-200px 0 0 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.7) 40%, transparent 45%),
    radial-gradient(2px 2px at 140px 80px, rgba(255,255,255,.55) 40%, transparent 45%),
    radial-gradient(1px 1px at 60px 120px, rgba(255,255,255,.5) 40%, transparent 45%),
    radial-gradient(2px 2px at 220px 40px, rgba(255,255,255,.65) 40%, transparent 45%),
    radial-gradient(1px 1px at 260px 140px, rgba(255,255,255,.45) 40%, transparent 45%),
    radial-gradient(2px 2px at 320px 100px, rgba(255,255,255,.6) 40%, transparent 45%);
  background-size: 360px 220px;
  animation: snowFall 10s linear infinite;
  opacity:.7;
  filter: blur(.15px);
}
.snow2{animation-duration:14s; opacity:.55; transform:scale(1.15)}
.snow3{animation-duration:18s; opacity:.4; transform:scale(1.35)}
@keyframes snowFall{
  from{transform:translateY(0)}
  to{transform:translateY(700px)}
}

.wrap{
  max-width: 980px;
  margin: 36px auto 80px;
  padding: 0 18px;
  position:relative;
}

.hero{
  text-align:center;
  margin-bottom: 18px;
}
.badge{
  display:inline-block;
  padding: 10px 14px;
  border:1px solid var(--stroke);
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight:700;
  letter-spacing:.3px;
}
h1{
  margin: 18px 0 10px;
  font-family: Pacifico, cursive;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
  text-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.subtitle{
  margin:0 auto;
  max-width: 680px;
  color: var(--muted);
  line-height: 1.5;
}


.logo{
  width: min(520px, 92vw);
  height: auto;
  display: block;
  margin: 16px auto 10px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  background: rgba(255,255,255,.04);
}


.eventInfo{
  margin: 14px auto 0;
  max-width: 720px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(90deg, rgba(255,211,106,.10), rgba(123,231,255,.08));
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.eventTitle{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 4px;
}
.eventBody{
  color: var(--muted);
  line-height: 1.45;
}

.card, 
.counterCard{
  margin-top: 18px;
  padding: 16px 18px;
  text-align:center;
  background: rgba(14,19,43,.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.counterLabel{
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 12px;
  color: #FFFFFFdd;
}
.counterValue{
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 900;
  margin: 6px 0 2px;
  background: linear-gradient(90deg, rgba(255,211,106,.95), rgba(123,231,255,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.counterHint{
  color: var(--muted);
  font-size: 12px;
}

.miniCard{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.card{ padding: 18px; }
.miniCard{
  margin-top: 18px;
  padding: 16px 18px;
}
.miniCard h2{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing:.2px;
}
.miniCard p{ margin:0; color:var(--muted); line-height:1.55 }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field{ display:flex; flex-direction:column; gap: 7px; }
.field span{
  font-weight:700;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: #FFFFFFdd;
}
.field em{ color: var(--accent); font-style: normal; }
.field input{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
  transition: transform .06s ease, border-color .2s ease, background .2s ease;
}
.field input::placeholder{ color: rgba(255,255,255,.5) }
.field input:focus{
  border-color: rgba(255,211,106,.6);
  background: rgba(255,255,255,.08);
}
.full{ grid-column: 1 / -1; }

.radioRow{ display:flex; gap: 14px; flex-wrap:wrap; justify-content:center }
.radio{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--stroke);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.radio input{ transform: scale(1.05); }
.radio span{ font-weight:700; font-size: 13px; text-transform:none; letter-spacing:0; color:var(--text); }

.sigWrap{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  overflow:hidden;
}
#sigCanvas{
  width: 100%;
  height: 220px;
  display:block;
  background: #ffffff; /* fond blanc pour signature */
  touch-action: none;
  cursor: crosshair;
}
.sigActions{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 10px 12px;
  border-top:1px solid var(--stroke);
}
.hint{ color:var(--muted); font-size: 12px; }

.actions{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap:wrap;
}
.btn{
  border:none;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px); }
.primary{
  background: linear-gradient(90deg, rgba(255,211,106,.95), rgba(123,231,255,.85));
  color:#101224;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: var(--text);
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.status{
  white-space: pre-line;
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
}
.status.ok{ color: var(--ok); }
.status.err{ color: var(--danger); }

.fineprint{
  margin-top: 12px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  line-height:1.4;
}

@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
  .sigActions{ flex-direction:column; align-items:flex-start; }
}


.hidden{ display:none; }

.cityLogo{
  width: min(420px, 92vw);
  height: auto;
  display:block;
  margin: 10px auto 0;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  background: rgba(255,255,255,.90);
  padding: 10px 12px;
}

.cityLogo.small{
  width: min(260px, 70vw);
  margin: 8px 0 0;
}

.confirmBrand{
  width: 100%;
}

.siteFooter{
  margin-top: 18px;
  padding: 14px 0 0;
  text-align:center;
}


/* Bouton — finition */
#submitBtn{
  min-width: min(420px, 92vw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 16px;
}

.primary:hover{
  filter: brightness(1.02);
}

.primary{
  position: relative;
}

.primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,211,106,.55), rgba(123,231,255,.45));
  opacity: 0;
  filter: blur(10px);
  z-index: -1;
  transition: opacity .2s ease;
}

.primary:hover::after{
  opacity: .55;
}

.btnSpinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(16,18,36,.35);
  border-top-color: rgba(16,18,36,.9);
  display: none;
  animation: spin 0.8s linear infinite;
}

#submitBtn.loading .btnSpinner{
  display: inline-block;
}

@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.sendHint{
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,.60);
  font-size: 12px;
  margin-top: 6px;
}

.inviteWrap{
  margin-top: 10px;
  padding: 12px 12px 2px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
}

/* Clôture inscriptions */
.deadlineNotice{
  margin: 12px auto 0;
  max-width: 720px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,107,107,.35);
  background: rgba(255,107,107,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  color: #FFFFFFee;
  line-height: 1.45;
}
}

/* Formulaire fermé */
.formClosed{
  opacity: .75;
  filter: grayscale(.1);
}
.closedBanner{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,211,106,.45);
  background: rgba(255,211,106,.12);
  color: #FFFFFFee;
  text-align:center;
}

/* Select (services) */
select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
  outline: none;
  font-size: 14px;
}
select:focus{
  border-color: rgba(123,231,255,.55);
  box-shadow: 0 0 0 3px rgba(123,231,255,.18);
}
select option{
  color: #111;
}

/* Toast (popup) */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 280px;
  max-width: min(720px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  color: rgba(255,255,255,.97);
  font-weight: 800;
  letter-spacing: .2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: auto;
}
.toast.success{
  background: rgba(46, 204, 113, .22);
  border-color: rgba(46, 204, 113, .60);
}
.toast.error{
  background: rgba(231, 76, 60, .22);
  border-color: rgba(231, 76, 60, .60);
}
.toast.hidden{ display:none; }

/* Encadré information inscription */
.info-box {
  margin: 20px auto;
  padding: 16px 18px;
  max-width: 700px;
  background: #fff3cd;
  border-left: 6px solid #ff9800;
  color: #4a3b00;
  border-radius: 8px;
  font-size: 0.95rem;
}