:root{
  --bg:#f3f6fb;
  --hero-bg:#e8f0ff;
  --card:#ffffff;
  --accent:#2563eb;
  --text:#0f172a;
  --muted:#64748b;
  --radius:16px;
  --shadow:0 10px 25px rgba(15,23,42,0.10);
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* HERO */
.hero{
  position:relative;
  background:var(--hero-bg);
  padding:20px 16px 28px;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.hero-inner{
  max-width:960px;
  margin:auto;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:24px;
  row-gap:10px;
  align-items:center;
}

.hero-brand{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:14px;
}

.hero-logo{
  width:64px;
  height:auto;
  flex-shrink:0;
}

.hero-text{
  line-height:1.2;
}

.hero-title{
  font-size:2.2rem;
  font-weight:800;
  letter-spacing:0.05em;
}

.hero-sub{
  font-size:0.95rem;
  color:var(--accent);
  font-weight:600;
}

.hero-tagline{
  margin-top:12px;
  max-width:520px;
  font-size:1rem;
  color:#1e293b;
}

.hero-tagline strong{
  font-size:1.3rem;
  color:var(--accent);
  font-weight:700;
}

.hero-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
}

.btn-primary{
  background:#0f172a;
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

.btn-ghost{
  background:#e0edff;
  color:#1e293b;
  border-color:#c7dbff;
}

.hero-meta{
  margin-top:10px;
  font-size:0.8rem;
  color:var(--muted);
}

@keyframes pulse{
  0%   { opacity:1; }
  50%  { opacity:0.55; }
  100% { opacity:1; }
}

.badge-dev{
  font-size:0.85rem;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  background:#fff3cd;
  color:#92400e;
  border:1px solid #fde68a;
  white-space:nowrap;
  animation:pulse 1.6s ease-in-out infinite;
}

/* HERO ORB VIDEO */
.hero-content{
  grid-column:2;
  grid-row:2;
}

.hero-orb{
  grid-column:1;
  width:220px;
  height:220px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,0.25);
  background:#000;
}

.hero-orb video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-content.card{
  padding:14px;
}

/* Liens légaux sous le carré blanc du hero (couleurs d'origine) */
.hero-legal{
  grid-column:2;
  margin-top:6px;

  display:flex;
  align-items:center;
  gap:8px;

  font-size:0.75rem;
  font-weight:500;
}

.hero-legal a{
  color:var(--accent);
  text-decoration:none;
  white-space:nowrap;
}

.hero-legal a:hover{
  text-decoration:underline;
}

.hero-legal .sep{
  color:var(--muted);
}

/* LAYOUT */
.shell{
  max-width:960px;
  margin:auto;
  padding:22px 16px 40px;
}

main{
  max-width:960px;
  margin:24px auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

/* CARDS */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(148,163,184,0.3);
}

.card h3{
  font-size:1.05rem;
  margin-bottom:6px;
}

.card-title-with-logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.card-logo{
  width:34px;
  height:auto;
  flex-shrink:0;
}

.card p{
  font-size:0.9rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:12px;
}

.card ul{
  margin-top:8px;
  padding-left:18px;
  color:var(--muted);
  font-size:0.9rem;
  line-height:1.6;
}

.card li{margin:4px 0;}

.card-actions{
  margin-top:10px;
}

/* SUPPORT */
.support{
  background:linear-gradient(145deg,#ffffff,#e0edff);
  border-left:4px solid var(--accent);
  max-width:100%;
}

details{
  margin-top:8px;
  font-size:0.85rem;
  background:#eef3ff;
  padding:8px;
  border-radius:10px;
}

/* FOOTER */
.footer-row{
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:0.8rem;
  color:var(--muted);
}

footer{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,0.6);
  font-size:0.75rem;
  color:var(--muted);
}

/* RESPONSIVE */
@media (max-width:700px){
  main{grid-template-columns:1fr;}
  .hero{padding:18px 14px 22px;}
  .hero-title{font-size:1.8rem;}
  .hero-tagline{max-width:100%;}

  /* Mobile hero: MP4 above the white box */
  .hero-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    row-gap:12px;
    justify-items:center;
  }

  .hero-brand{grid-column:1; grid-row:1;}

  .hero-orb{
    grid-column:1;
    grid-row:2;
    width: clamp(140px, 45vw, 180px);
    height: clamp(140px, 45vw, 180px);
    margin:0 auto;
  }

  .hero-content,
  .hero-content.card{
    grid-column:1;
    grid-row:3;
    width:100%;
    max-width:560px;
    justify-self:center;
  }

  .hero-legal{
    grid-column:1;
    grid-row:4;
    justify-content:center;
    flex-wrap:wrap;
  }

  main{ gap:14px; }
  .card{ padding:14px; }
  .support{ justify-self:stretch; }
}

@media (max-width:600px){
  .hero-orb{ width:150px; height:150px; }
}

/* iOS Safari layout fixes (hero orb + white card alignment) */
.hero-inner{ grid-auto-rows:auto; }

.hero-orb{
  justify-self:center;
  align-self:center;
}

.hero-content{
  align-self:center;
  min-width:0; /* prevents grid overflow/squeezing on iOS */
}

/* iPhone notch / safe-area friendly padding */
.hero{
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}

.hero-orb,
.hero-orb video {
  pointer-events: none;
}