:root{
  --bg:#0b0d10;
  --bg-2:#111418;
  --text:#212529;
  --muted:#6c757d;
  --primary:#0d6efd;
  --accent:#4f46e5;
  --radius:1.25rem;
  /* hauteur par défaut de la navbar (peut être mise à jour dynamiquement via JS) */
  --nav-h:64px;
}
@media (min-width: 992px){
  :root{ --nav-h:72px; }
}

[data-theme="dark"]{
  --bg:#0b0d10;
  --bg-2:#0f1220;
  --text:#f1f5f9;
  --muted:#9aa4b2;
}

*{box-sizing:border-box}

body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background-color:#fff;
  scroll-behavior:smooth;
  /* espace réservé pour la navbar fixed-top */
  padding-top: var(--nav-h);
}
[data-theme="dark"] body, [data-theme="dark"]{
  background:#0b0d10;
  color:#e5e7eb;
}

/* Navbar */
.navbar.navbar-shrink{
  background-color:rgba(33,37,41,.92) !important;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  backdrop-filter:saturate(160%) blur(6px);
}
.navbar .logo-mark{
  display:inline-grid; place-items:center;
  width:2rem; height:2rem; margin-right:.35rem;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:.75rem; font-weight:800;
}

/* Hero */
.hero{
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.8)), url('assets/images/banner.jpg') center/cover fixed no-repeat;
  position:relative;
  overflow:hidden;
}
.scroll-indicator .mouse{
  display:block; width:24px; height:36px; border:2px solid #fff; border-radius:16px;
  margin:2rem auto 0; position:relative;
}
.scroll-indicator .mouse::after{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; background:#fff; border-radius:2px; opacity:.9;
  animation:wheel 1.6s infinite;
}
@keyframes wheel{0%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}100%{transform:translate(-50%,0)}}

/* Stats */
.stat-card{
  background:var(--bg-2); color:#fff; padding:2rem; border-radius:var(--radius); text-align:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.stat-number{ font-size:2.6rem; font-weight:800; letter-spacing:-1px; }
.stat-label{ opacity:.85 }

/* Features */
.feature-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:1.5rem;
  transition:transform .4s ease, box-shadow .4s ease; will-change:transform;
}
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.08) }
.icon-circle{ width:48px; height:48px; border-radius:1rem; background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid; place-items:center; color:#fff; margin-bottom:1rem; }

/* Page headers */
.page-header{
  background: linear-gradient(135deg, rgba(13,110,253,.9), rgba(79,70,229,.9));
  padding-top: calc(0.1rem + var(--nav-h)); /* réduit l’espace */
  padding-bottom: 2rem;
}
.gradient-1{ background: linear-gradient(135deg, #1d4ed8, #6d28d9); }
.gradient-2{ background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.gradient-3{ background: linear-gradient(135deg, #3143ff, #0ea5e9); }

/* Copy */
.prose p{ line-height:1.9 }
.blockquote{ background:rgba(13,110,253,.08); border-left:4px solid var(--primary) }

/* Sticky side card */
.sticky-card{ position:sticky; top:6rem; background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(0,0,0,.06) }

/* Timeline */
.timeline{ position:relative; margin:2rem 0; }
.timeline::before{
  content:""; position:absolute; left:24px; top:0; bottom:0; width:4px; background:linear-gradient(#0d6efd,#9333ea); border-radius:2px;
}
.timeline-item{ position:relative; padding-left:72px; margin-bottom:2rem; }
.timeline-dot{
  position:absolute; left:16px; top:.5rem; width:16px; height:16px; border-radius:50%;
  background:#fff; border:4px solid var(--primary); box-shadow:0 0 0 4px rgba(13,110,253,.2);
  animation:pulse 2.5s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 4px rgba(13,110,253,.25)}70%{box-shadow:0 0 0 16px rgba(13,110,253,0)}100%{box-shadow:0 0 0 4px rgba(13,110,253,.25)}}
.timeline-content{ background:#fff; border-radius:1rem; padding:1rem 1.25rem; border:1px solid rgba(0,0,0,.06); }
[data-theme="dark"] .timeline-content{ background:#111418; border-color:#1f2937 }

/* Reveal animation */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease }
.reveal.in-view{ opacity:1; transform:none }
.delay-1{ transition-delay:.12s } .delay-2{ transition-delay:.24s } .delay-3{ transition-delay:.36s } .delay-4{ transition-delay:.48s }

/* Cards lift */
.lift{ transition: transform .35s ease, box-shadow .35s ease; }
.lift:hover{ transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.12); }

/* Typewriter */
.typewriter::after{
  content:""; display:inline-block; width:2px; height:1em; background:#fff; margin-left:6px; animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* Bouton retour en haut */
#toTop{
  position:fixed; right:18px; bottom:18px; z-index:1000; display:none;
}

/* Effet image parallax  */
.parallax{ will-change: transform; }

/* Utilities */
.rounded-4{ border-radius:1.25rem !important }
.shadow-lg{ box-shadow:0 20px 60px rgba(0,0,0,.25) !important }

/* Logo carré dans la navbar */
.logo-square {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px; /* optionnel */
}

/* Empêche les sections ciblées par #ancre d'être masquées sous la navbar */
[id]::before{
  content:"";
  display:block;
  height:var(--nav-h);
  margin-top:calc(-1 * var(--nav-h));
  visibility:hidden;
}