:root{
  --bg:#0b1020;
  --panel:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#22c55e;
  --accent:#38bdf8;
  --ring: rgba(56,189,248,.35);

  /* ===== NAV + LOGO (ajuste ici) ===== */
  --nav-h: 72px;        /* hauteur du header */
  --logo-scale: 3;    /* 2.2 = 220% d’agrandissement */
  --logo-trim-x: 0px;   /* recadrage horizontal (gauche) */
  --logo-trim-y: 0px;   /* recadrage vertical (haut) */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(56,189,248,.12) 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 120%, rgba(34,197,94,.12) 0%, transparent 60%),
    var(--bg);
}
.wrap{width:min(1160px,92%); margin-inline:auto}

/* =========================
   HEADER + LOGO (clean)
   ========================= */
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(150%) blur(10px);
  background:linear-gradient(to bottom, rgba(15,23,42,.7), rgba(15,23,42,.2));
  border-bottom:1px solid rgba(148,163,184,.15);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--nav-h);
  padding: 8px 0;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--text);
  line-height:0;
  height: var(--nav-h);
  overflow: visible; /* <— plus de coupe, le logo peut déborder */
}
.brand img{
  height:100%;
  width:auto;
  display:block;
  object-fit:contain;

  /* agrandit visuellement */
  transform: scale(var(--logo-scale));
  transform-origin: left center;

  /* petits décalages si besoin pour “manger” la marge transparente du PNG */
  margin-left: calc(-1 * var(--logo-trim-x));
  margin-top:  calc(-1 * var(--logo-trim-y));
}

.ig{color:var(--muted); text-decoration:none}
.ig:hover{color:var(--text)}

/* ====== Switch FR/EN (remis en bas à droite) ====== */
.lang-switch{
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(2,6,23,.6);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.lang-switch button{
  appearance:none; border:0; border-radius:999px; padding:8px 12px;
  color:var(--text); background:transparent; cursor:pointer; font-weight:700; font-size:12px;
  transition:.18s;
}
.lang-switch button.is-active{
  background:linear-gradient(135deg,var(--accent),var(--primary));
  color:#0b1020;
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative; isolation:isolate;
  padding: clamp(56px, 8vw, 96px) 0 48px;
  overflow:hidden;
}
.grid-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(transparent 90%, rgba(56,189,248,.35) 95%),
    linear-gradient(90deg, transparent 90%, rgba(56,189,248,.35) 95%);
  background-size:26px 26px;
  mask-image:radial-gradient(80% 60% at 50% 0%, black 40%, transparent 90%);
  opacity:.18;
}
.hero-inner{text-align:center}
.headline{
  font-size:clamp(28px, 5.5vw, 54px);
  line-height:1.05; letter-spacing:.2px; font-weight:800;
  text-shadow:0 8px 40px rgba(56,189,248,.25);
}
.subtitle{
  margin:14px auto 24px; max-width:780px;
  color:var(--muted); font-size:clamp(15px,2.5vw,18px);
}

/* --- Icône Instagram dans le header --- */
.ig{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  text-decoration:none;
}
.ig:hover{ color:var(--text); }
.ig .ig-icon{
  width:18px;
  height:18px;
  display:block;
}

/* --- Bloc "Donner votre avis" (duplique le style de waitlist) --- */
.feedback-cta{
  margin: 14px auto 0;
  max-width: 720px;
}
.feedback-cta .field{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 8px;
}
.feedback-cta .msg{
  flex: 1;
  padding: 12px 14px;
  color: var(--text);
  font-size: 16px;
  opacity: .95;
}

/* Même responsive que la waitlist */
@media (max-width: 600px){
  .feedback-cta .field{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .feedback-cta .msg{
    padding: 10px 8px 0;
    text-align: left;
  }
}

/* bouton secondaire (même famille que btn-primary) */
.btn-secondary{
  display:inline-block;
  border:0;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  font-weight:800;
  color:#081220;
  background:linear-gradient(135deg, #fca5a5, #60a5fa); /* rose -> bleu */
  box-shadow:0 8px 30px rgba(96,165,250,.25);
  text-decoration:none;
  white-space:nowrap;
}
.btn-secondary:hover{ transform: translateY(-1px); }
.btn-secondary:active{ transform: translateY(0); }

/* Responsive: pile les éléments sur mobile */
@media (max-width:600px){
  .feedback-cta .field{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .btn-secondary{
    width:100%;
    text-align:center;
  }
}


/* =========================
   WAITLIST
   ========================= */
.waitlist{margin:28px auto 8px; max-width:720px}
.waitlist .field{
  display:flex; gap:10px; align-items:center;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px; padding:8px;
  box-shadow:inset 0 0 0 1px transparent;
}
.waitlist input{
  flex:1; min-width:160px;
  background:transparent; border:0; color:var(--text); font-size:16px;
  padding:12px 14px; outline:none;
}
.waitlist input::placeholder{color:#94a3b8}
.waitlist input:focus{box-shadow:0 0 0 3px var(--ring); border-radius:12px}
.btn-primary{
  border:0; border-radius:12px; padding:12px 16px; cursor:pointer;
  color:#081220; font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  box-shadow:0 8px 30px rgba(56,189,248,.25);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.waitlist .foot{color:var(--muted); font-size:13px; margin:8px 4px 0}
.wl-done{margin-top:10px; min-height:20px; font-weight:600}

/* =========================
   KPI + CARDS
   ========================= */
.kpis{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin:28px auto 0; max-width:820px;
}
.kpi{
  background:rgba(2,6,23,.45);
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px; padding:16px;
}
.kpi-n{font-weight:800; font-size:22px}
.kpi-l{color:var(--muted); margin-top:4px}

.highlights{padding:36px 0 64px}
.cards{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.card{
  background:linear-gradient(180deg, rgba(2,6,23,.48), rgba(2,6,23,.28));
  border:1px solid rgba(148,163,184,.16);
  border-radius:16px; padding:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.card h3{margin:0 0 8px}
.card p{color:var(--muted); margin:0}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  border-top:1px solid rgba(148,163,184,.15);
  background:rgba(2,6,23,.35);
  padding:22px 0; color:var(--muted);
}
.site-footer .wrap{
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.foot-links a{color:var(--muted); text-decoration:none; margin-left:10px}
.foot-links a:hover{color:var(--text)}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:900px){
  :root{
    --nav-h: 64px;       /* barre un peu moins haute sur mobile */
    --logo-scale: 1.8;   /* logo légèrement moins gros */
  }
  .kpis{grid-template-columns:1fr; max-width:560px}
  .cards{grid-template-columns:1fr}
}