/* =========================
   THEME & RESET
   Palette: #344D59, #137C8B, #709CA7
   ========================= */
:root{
  --deep:#344D59; --teal:#137C8B; --sky:#709CA7; --bg:#0b1a1f; --fg:#eef3f5; --muted:#c9d6db;
  --glass:rgba(255,255,255,0.08); --glass-stroke:rgba(255,255,255,0.25);
  --shadow:0 10px 30px rgba(0,0,0,0.35); --radius:24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(19,124,139,.35), transparent 70%),
    radial-gradient(800px 800px at 120% 10%, rgba(52,77,89,.35), transparent 60%),
    linear-gradient(160deg,#0a171b 0%,#0f1f25 100%);
}

/* Floating artistic blobs */
.blob{position:fixed; filter:blur(40px); opacity:.4; z-index:0}
.blob.one{ width:380px; height:380px; background:#137C8B; top:-80px; left:-80px; border-radius:50%; animation:float 18s ease-in-out infinite;}
.blob.two{ width:300px; height:300px; background:#709CA7; bottom:-60px; right:10%; border-radius:50%; animation:float 22s ease-in-out infinite reverse;}
.blob.thr{ width:260px; height:260px; background:#344D59; top:20%; right:-80px; border-radius:50%; animation:float 26s ease-in-out infinite;}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(10px,-20px) scale(1.05)}100%{transform:translate(0,0) scale(1)}}

/* Layout */
.wrap{ position:relative; z-index:1; min-height:100dvh; display:grid; place-items:center; padding:32px; }
.card{
  width:min(980px,92vw);
  background:var(--glass);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  padding:clamp(24px,4vw,40px);
}

/* Brand */
.brand{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.brand-mark{ width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,var(--teal),var(--sky)); display:grid; place-items:center; font-weight:700; letter-spacing:.5px; }
.brand-mark img{ width:60px; height:40px; object-fit:contain; }
.brand-title{ font-family:'Dancing Script',cursive; font-style:italic !important; font-weight:700; line-height:1; letter-spacing:.5px; font-size:clamp(28px,4.6vw,44px); }
.tagline{ margin:6px 0 0; font-size:14px; color:var(--muted); min-height:20px; }
.type-caret{ border-right:2px solid var(--muted); animation:caret 1s steps(1) infinite; }
@keyframes caret{50%{border-color:transparent}}

/* Content */
.grid{ display:grid; gap:22px; }
.headline{ font-size:clamp(24px,3.8vw,34px); margin:0; }
.lead{ color:var(--muted); margin:4px 0 10px; font-size:clamp(14px,1.8vw,16px); }

/* Countdown (si utilisé ailleurs) */
.countdown{ display:grid; grid-template-columns:repeat(4,minmax(70px,1fr)); gap:12px; margin-top:12px; }
.timebox{ text-align:center; padding:14px; border-radius:16px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); }
.num{ font-size:clamp(22px,4.4vw,32px); font-weight:700; font-variant-numeric:tabular-nums; }
.lbl{ display:block; margin-top:2px; font-size:12px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; }

/* Form */
form.notify{ display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:18px; }
.input{
  width:100%; padding:14px 16px; border-radius:14px; outline:none;
  border:1px solid rgba(255,255,255,0.2); background:rgba(0,0,0,0.2); color:var(--fg);
  grid-column:1;
}
.btn{
  padding:14px 18px; border-radius:14px; border:1px solid transparent; cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--sky)); color:#fff; font-weight:600;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
  grid-column:2; white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(19,124,139,0.35); }
.btn.outline{ background:transparent; border-color:rgba(255,255,255,0.25); }

/* Actions */
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.tiny{ font-size:12px; color:var(--muted); }

/* Language switch */
.lang{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.chip{ border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.06); padding:8px 12px; border-radius:999px; font-size:12px; cursor:pointer; color:aliceblue; }
.chip.active{ border-color:var(--sky); background:rgba(112,156,167,0.18); }

/* Socials */
.socials{ display:flex; gap:10px; margin-top:14px; }
.socials a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  text-decoration:none; position:relative; overflow:hidden; transition:all .3s ease;
}
.socials a::before{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity:0; transform:scale(.5); transition:transform .5s ease, opacity .3s ease;
}
.socials a:hover::before{ opacity:1; transform:scale(1); }
.socials a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3);
  box-shadow:0 0 15px rgba(112,156,167,.4), inset 0 0 20px rgba(255,255,255,.1); transform:translateY(-2px);
}
.socials svg{ width:18px; height:18px; fill:var(--fg); opacity:.9; transition:all .3s ease; position:relative; z-index:1; }
.socials a:hover svg{ opacity:1; transform:scale(1.1); filter:drop-shadow(0 0 3px rgba(255,255,255,.5)); }

/* Effet hover spécifique (facultatif) */
.socials a:nth-child(1):hover{ box-shadow:0 0 15px rgb(225,48,107), inset 0 0 20px rgba(178,21,21,.72); }
.socials a:nth-child(2):hover{ box-shadow:0 0 15px rgb(59,88,152), inset 0 0 20px rgb(30,113,185); }
.socials a:nth-child(3):hover{ box-shadow:0 0 15px rgb(0,181,57), inset 0 0 20px rgb(2,154,38); }
.socials a:nth-child(4):hover{ box-shadow:0 0 15px rgb(181,0,0), inset 0 0 20px rgb(147,17,2); }

/* Footer */
footer{ text-align:center; margin-top:18px; color:var(--muted); font-size:12px; }

/* Progress */
.progress-container{ margin-top:20px; }
#progress-label{ font-size:14px; margin-bottom:8px; color:var(--muted); }
.loader{ position:relative; background:rgba(255,255,255,.15); border-radius:12px; height:22px; overflow:hidden; }
.bar{ background:linear-gradient(90deg,var(--teal),var(--sky)); height:100%; width:34%; border-radius:12px; transition:width .5s ease; }
.percent{ margin-top:8px; font-weight:700; text-align:center; font-size:14px; }

/* SweetAlert sizing tweaks (optionnel) */
.swal2-title{ font-size:1.2em !important; }
.swal2-html-container{ font-size:.9em !important; }

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* XS phones (<=360px) */
@media (max-width:360px){
  .wrap{ padding:16px; }
  .card{ width:100%; border-radius:16px; padding:16px; }
  .brand{ gap:10px; }
  .brand-mark{ width:48px; height:48px; border-radius:12px; }
  .brand-title{ font-size:24px; }
  .headline{ font-size:22px; }
  .lead{ font-size:13px; }
  form.notify{ grid-template-columns:1fr; gap:8px; }
  .input,.btn{ padding:12px 14px; }
  .btn{ font-size:14px; }
  .socials{ gap:8px; }
  .socials a{ width:36px; height:36px; }
  .loader{ height:18px; }
  .percent{ font-size:13px; }
  .blob.one{ width:240px; height:240px; top:-60px; left:-60px; filter:blur(30px); }
  .blob.two{ width:200px; height:200px; bottom:-40px; right:5%; }
  .blob.thr{ width:180px; height:180px; right:-60px; }
}

/* Small phones (361–480px) */
@media (min-width:361px) and (max-width:480px){
  .wrap{ padding:20px; }
  .card{ width:100%; border-radius:18px; padding:20px; }
  .brand-title{ font-size:28px; }
  .headline{ font-size:24px; }
  .lead{ font-size:14px; }
  form.notify{ grid-template-columns:1fr; }
  .input,.btn{ padding:12px 16px; }
  .socials a{ width:38px; height:38px; }
  .loader{ height:20px; }
  .blob.one{ width:280px; height:280px; }
  .blob.two{ width:230px; height:230px; }
  .blob.thr{ width:200px; height:200px; }
}

/* Large phones / phablets (481–640px) */
@media (min-width:481px) and (max-width:640px){
  .card{ width:min(560px,94vw); padding:24px; }
  .brand-title{ font-size:32px; }
  form.notify{ grid-template-columns:1fr auto; }
  .input{ min-width:0; }
  .btn{ padding:12px 18px; }
  .socials a{ width:40px; height:40px; }
}

/* Tablets portrait (641–768px) */
@media (min-width:641px) and (max-width:768px){
  .card{ width:min(680px,92vw); padding:28px; }
  .headline{ font-size:28px; }
  .lead{ font-size:15px; }
  .loader{ height:20px; }
}

/* Tablets landscape / small laptops (769–1024px) */
@media (min-width:769px) and (max-width:1024px){
  .card{ width:min(820px,90vw); padding:32px; }
  .headline{ font-size:30px; }
  .lead{ font-size:16px; }
}

/* Desktops (>=1025px) */
@media (min-width:1025px){
  .card{ width:min(980px,86vw); }
}

/* Ultra-wide screens (>=1440px) */
@media (min-width:1440px){
  .wrap{ padding:48px; }
  .card{ width:min(1100px,70vw); padding:40px; }
  .blob.one{ width:460px; height:460px; }
  .blob.two{ width:380px; height:380px; }
  .blob.thr{ width:340px; height:340px; }
}

/* Landscape phones with small height */
@media (max-height:680px) and (orientation:landscape){
  .wrap{ align-items:start; padding-top:24px; }
  .card{ padding:20px; }
}

/* Safe areas (iPhone notches) */
@supports (padding: max(0px)){
  .wrap{ padding-left:max(32px, env(safe-area-inset-left)); padding-right:max(32px, env(safe-area-inset-right)); padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:max(24px, env(safe-area-inset-bottom)); }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .blob{ animation:none }
  .btn:hover{ transform:none; box-shadow:none }
}