:root{
  --bg:#0f1720; /* très foncé */
  --card:#1f2a36; /* bleu-gris foncé */
  --muted:#9aa6b2;
  --accent:#2b6b9a;
  --text:#e6eef6;
  --max-width:1000px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
.container{max-width:var(--max-width);margin:0 auto;padding:20px;}

.site-header{
  border-bottom:1px solid rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  z-index: 1000;          /* ✅ la garde au-dessus du main */
  backdrop-filter:saturate(120%) blur(6px);
  background:rgba(15,23,32,0.7);
  transition:box-shadow .3s ease;
}

.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;}
.logo{height:40px;object-fit:contain;}
.top-nav a{color:var(--muted);text-decoration:none;margin-left:16px;font-size:0.95rem;}
.top-nav a:hover{color:var(--text);}

.hero{text-align:center;padding:28px 0;}
.hero h2{margin:8px 0 18px;color:var(--accent);letter-spacing:1px;}
.hero-img{max-width:30%;height:auto;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.6);}

.card{background:var(--card);padding:18px;border-radius:10px;margin:18px 0;box-shadow:0 6px 18px rgba(0,0,0,0.5);}
.contact-card a{color:var(--accent);}

.site-footer{padding:14px 0;text-align:center;color:var(--muted);}
@media(max-width:700px){
  .top-nav{display:none;}
  .site-header .container{justify-content:center;}
}

section {
  scroll-margin-top: 85px; /* ajuste selon la hauteur réelle de ta navbar */
}


/* --- Améliorations visuelles & animations --- */
.site-header{position:sticky;top:0;backdrop-filter:saturate(120%) blur(6px);background:rgba(15,23,32,0.7);transition:box-shadow .3s ease;}
.site-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,0.35);}

.hero{position:relative;overflow:hidden;padding:40px 0 28px;}
.hero-sub{color:var(--muted);margin:-6px 0 14px;font-size:1rem;}
.hero-bg{
  position:absolute;inset:-20% -10% auto -10%;
  height:260px; 
  background:
    radial-gradient(1200px 300px at 50% 0%, rgba(43,107,154,0.25), transparent 60%),
    linear-gradient(180deg, rgba(43,107,154,0.18), transparent 60%);
  pointer-events:none;
}
.btn{
  display:inline-block;padding:10px 16px;border-radius:999px;
  background:linear-gradient(180deg, var(--accent), #1d4b6b);
  color:white;text-decoration:none;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,0.4);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,0.5);}
.btn:active{transform:translateY(0);opacity:.9}

.card{
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,0.55);
}

/* reveal on scroll */
.reveal{
  opacity:0; transform:translateY(14px); 
  transition:opacity .5s ease, transform .5s ease;
}
.reveal.visible{
  opacity:1; transform:none;
}

/* liens textes */
a{transition:opacity .15s ease;border-bottom:1px dashed transparent}
a:hover{opacity:.85;border-bottom-color:rgba(255,255,255,0.15)}


.hero-slogan {
  background: linear-gradient(180deg, #aee8ff 0%, #58b3ff 60%, #0f5a89 100%);
  background-clip: text;          
  -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(88,179,255,0.3);
  
  font-size: 2.2rem;     /* ← ajuster ici (2rem = ~32 px) */
  font-weight: 700;      /* texte plus épais */
  text-align: center;    /* centré horizontalement */
  margin: 20px 0 10px;   /* espace au-dessus et en dessous */
  letter-spacing: 0.5px; /* écart léger entre les lettres */
  
}

.logo-text {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #e6eef6;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 4px; /* espace entre les éléments */
}

.x-part {
  color: #4da6ff;
  text-shadow: 0 0 6px rgba(77,166,255,0.4);
}

.arrow {
  color: #4da6ff;
  font-size: 2.2rem;
  transform: translateY(-1px);
}