/* ---------- Header topbar (tel) ---------- */
/* Si possible, remplace "header p" par une classe .header-topbar dans ton HTML.
   Pour compat, on garde header p. */
header p{
  background-color:#c7dff0;
  min-height:40px;
  margin:0;
  padding:8px 12px;
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
  color:var(--blue-800);
}

/* ---------- Navbar ---------- */
/* Tu utilises Bootstrap : on évite de tout écraser, on ajuste proprement. */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  padding:10px 20px;
}

/* Centre les liens dans #navbarNav */
#navbarNav{
  justify-content:center;
  font-size:15px;
  font-weight:700;
}

.navbar .navbar-nav{
  margin:0;
  gap:18px;
}

/* Liens : underline animée */
.navbar .navbar-nav .nav-link{
  position:relative;
  padding:14px 10px;
}

.navbar .navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:#1d4ed8;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}

.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link:focus-visible::after,
.navbar .navbar-nav .nav-link.active::after,
.navbar .navbar-nav .nav-link[aria-current="page"]::after{
  transform:scaleX(1);
}

/* Espace menu -> bouton (si tu as un .d-flex dans navbarNav) */
#navbarNav .d-flex{ margin-left:12px; }

/* Un peu plus d’air dans le container navbar (si Bootstrap) */
.navbar > .container{
  padding-left:24px;
  padding-right:24px;
}

@media (max-width: 991.98px){
  #navbarNav .d-flex{
    margin-left:0;
    margin-top:12px;
  }
  #navbarNav .btn,
  .navbar .btn{
    width:100%;
    margin-top:12px;
  }
}