:root{
  --bg: #f6f8ff;         /* indigo nuit (fond) */
  --panel: #ffffff;      /* panneau sombre */
  --text: #0b1220;       /* texte principal */
  --muted: #4f5a6d;      /* texte atténué */
  --primary: #2563eb;    /* bleu rassurant (CTA) */
  --primary-600:#4a78e6;
  --accent: #5bf2c9;     /* accent doux (détails) */
  --stroke: #233056;     /* bordures */
  --card: #ffffff;       /* cartes */
  --grad1:#6ea8ff;
  --grad2:#7af0d6;
}

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

.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}

/* Nav */
.nav{position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);background:var(#f6f8ff);border-bottom:1px solid var(--stroke);z-index:50}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700;letter-spacing:.2px}
.nav__links a{margin-left:16px;text-decoration:none;color:#fff;opacity:.9}
.nav__links .btn{margin-left:16px}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;border:1px solid transparent;transition:.2s all}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-600)}
.btn--ghost{border-color:var(--stroke);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--text)}
.btn--lg{padding:14px 22px;font-weight:600}
.btn--block{display:block;text-align:center;width:100%}

/* Hero */
.hero{padding:72px 0;background:
  radial-gradient(1000px 500px at 80% -10%, rgba(91,140,255,.25), transparent 60%),
  radial-gradient(800px 400px at 20% -20%, rgba(122,240,214,.18), transparent 60%)}
.hero__inner{text-align:center}
.badge{display:inline-block;background:var(--grad1);color:var(--grad1);border:1px solid rgba(91,242,201,.35);padding:6px 10px;border-radius:999px;font-size:.9rem;margin-bottom:14px}
.hero h1{font-size:2.2rem;line-height:1.2;margin:0}
.grad{background:linear-gradient(90deg,var(--grad1),var(--grad2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:14px auto 8px;max-width:760px;color:var(--muted);font-size:1.05rem}
.cta-row{margin-top:18px}
.note{color:var(--muted);font-size:.95rem;margin-top:8px}
.hero__illus{margin-top:28px}

/* === OVERRIDES HERO VIDEO — remplit 100% du cadre sans bandes === */

/* Conteneur du visuel */
.hero__illus{
  margin-top: 28px;
  display: grid;
  justify-items: center;
  gap: 8px;
}

/* Si la vidéo porte directement la classe .device-frame (ton cas) */
.hero__illus > video.device-frame{
  width: min(100%, 860px);     /* responsive + limite desktop */
  aspect-ratio: 16 / 9;        /* cadre 16:9 propre */
  height: auto;                /* laissé à auto, aspect-ratio calcule la hauteur */
  display: block;
  border-radius: 16px;
  overflow: hidden;            /* masque ce qui dépasse (utile si ratio diffère) */
  box-shadow: var(--shadow);
  object-fit: cover;           /* REMPLIT le cadre (peut rogner un peu) */
  object-position: center;
  background: transparent;     /* pas de fond noir */
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Si un jour tu utilises un wrapper .device-frame + <video> interne */
.hero__illus .device-frame:not(video){
  width: min(100%, 860px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.hero__illus .device-frame:not(video) > video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: transparent;

}

/* Légende optionnelle sous la vidéo */
.hero__illus .caption{
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}



.mockup{border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));padding:32px;border-radius:16px}
.br-hide-sm{display:none}
@media(min-width:768px){.hero h1{font-size:3rem}.br-hide-sm{display:inline}}

/* Proof */
.proof{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.01)}
.proof__inner{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;padding:16px 0}
.proof__item{opacity:.9}
.proof__sep{width:1px;height:18px;background:var(--stroke)}

/* Features */
.features{padding:64px 0}
.features h2{text-align:center;margin:0 0 6px}
.section-lead{text-align:center;color:var(--muted);margin:0 0 28px}
.grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border-radius:16px;padding:18px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);}
.card h3{margin:0 0 8px}

/* Beta */
.beta{padding:56px 0;background:linear-gradient(180deg,rgba(91,140,255,.08),rgba(11,16,32,0))}
.beta__inner{text-align:center}
.beta__form{margin:16px auto 6px;display:flex;gap:10px;justify-content:center;max-width:520px}
.beta__form input{flex:1;min-width:0;border:1px solid var(--stroke);background:#0c132b;color:var(--text);padding:12px 14px;border-radius:12px;outline:none}
.beta__form button{white-space:nowrap}

/* Pricing */
.pricing{padding:64px 0}
.pricing__grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
@media(min-width:860px){.pricing__grid{grid-template-columns:repeat(2,1fr)}}
.price-card{background:var(--card);border-radius:16px;padding:18px;display:flex;flex-direction:column;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);}
.price-card--focus{outline:2px solid rgba(91,140,255,.35)}
.price-card__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.price{font-weight:100; font-size:22px}
.price-list{list-style:none;padding:0;margin:8px 0 16px 0}
.price-list li{margin:8px 0;color:var(--text)}

/* FAQ */
.faq{padding:64px 0;border-top:1px solid var(--stroke)}
.faq__list details{background:var(--panel);border-radius:12px;padding:14px;margin-bottom:10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);}
.faq__list summary{cursor:pointer;font-weight:600}

/* Footer */
.footer{border-top:1px solid var(--stroke);margin-top:24px;padding:24px 0;background:}
.footer__inner{display:flex;gap:28px;justify-content:space-between;align-items:flex-start}
.foot__links a{display:block;color:var(--text);opacity:.85;text-decoration:none;margin:6px 0}
.footer__legal{display:flex;justify-content:space-between;gap:18px;margin-top:8px}
.muted{color:var(--muted)}