:root{
  --bg:#f3f7fb;
  --text:#0b1b2f;
  --muted:#dce8ff;

  --nav1:#0f3a85;
  --nav2:#1c6fd6;

  --heroL:#2fd2c6;
  --heroM:#2b74d7;
  --heroR:#174fb6;

  --btnGreen1:#42c85d;
  --btnGreen2:#2aa846;

  --shadow: 0 18px 44px rgba(5,24,52,.18);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
}

.wrap{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}

/* ========= NAVBAR (comme capture) ========= */
.top-nav{
  position:sticky;
  top:0;
  z-index:50;
  background: linear-gradient(90deg, var(--nav1), var(--nav2));
  box-shadow: 0 10px 26px rgba(3,22,50,.18);
}
.top-nav-inner{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:16px;
}

.top-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}
.brand-mark{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:8px;
  background: rgba(255,255,255,.10);
  padding:6px;
}
.brand-name{
  font-family:"Space Grotesk",sans-serif;
  font-size:15px;
}

.top-links{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto;
  margin-right:auto;
  flex-wrap:wrap;
}
.top-link{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.92);
  font-family:"Manrope",sans-serif;
  font-size:13px;
  font-weight:800;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
}
.top-link:hover{
  background: rgba(255,255,255,.12);
}

.pay-cta{
  margin-left:auto;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;
  font-weight:900;
  font-size:13px;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.pay-cta:hover{ background: rgba(255,255,255,.24); }

/* ========= HERO (comme capture) ========= */
.hero{
  padding: 26px 0 10px;
}
.hero-box{
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  box-shadow: var(--shadow);
  min-height: 360px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  background:
    radial-gradient(900px 520px at 0% 40%, rgba(47,210,198,.68), transparent 62%),
    radial-gradient(900px 520px at 55% 35%, rgba(43,116,215,.72), transparent 62%),
    radial-gradient(900px 520px at 100% 30%, rgba(23,79,182,.78), transparent 62%),
    linear-gradient(90deg, rgba(47,210,198,.75), rgba(28,111,214,.88));
}

/* Vagues bas (effet maquette) */
.hero-box::after{
  content:"";
  position:absolute;
  left:-120px;
  right:-120px;
  bottom:-120px;
  height:260px;
  background:
    radial-gradient(900px 190px at 25% 0%, rgba(255,255,255,.12), transparent 70%),
    radial-gradient(900px 210px at 55% 18%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(900px 220px at 75% 32%, rgba(255,255,255,.08), transparent 70%);
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  padding: 44px 44px;
  color:#fff;
}
.hero-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 6px;
}
.hero-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:10px;
  background: rgba(255,255,255,.14);
  padding:7px;
}
.eyebrow{
  margin:0;
  font-family:"Space Grotesk",sans-serif;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
}
#heroTitle{
  margin: 12px 0 10px;
  font-family:"Space Grotesk",sans-serif;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.hero-desc{
  margin:0;
  max-width: 560px;
  font-size: 15px;
  line-height:1.55;
  opacity:.95;
}

.cta-row{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.btn{
  border:0;
  border-radius:10px;
  padding: 12px 18px;
  font-family:"Manrope",sans-serif;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn-rdv{
  background: linear-gradient(180deg, var(--btnGreen1), var(--btnGreen2));
  color:#fff;
}
.btn-light{
  background:#fff;
  color:#0f3a85;
}
.btn-dark{
  background: rgba(10,31,68,.40);
  color:#fff;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.live-status{
  margin-top: 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.live-pill{
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight:900;
}
.live-status-note{
  color: rgba(255,255,255,.88);
  font-size: 13px;
}

/* Image à droite */
.hero-media{
  position:relative;
  z-index:2;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
}
.hero-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.02) contrast(1.03);
}

/* ========= Responsive ========= */
@media (max-width: 980px){
  .top-links{ gap:10px; }
  .hero-box{ grid-template-columns: 1fr; }
  .hero-content{ padding: 28px 22px; }
  .hero-media{ min-height: 260px; }
}
@media (max-width: 640px){
  .wrap{ width:min(1120px, calc(100% - 18px)); }
  .btn{ width:100%; justify-content:center; }
  .top-links{ display:none; }
}