:root {
  --primary: #E099F7;
  --secondary: #124A9c;
  --dark: #111;
  --gray: #f4f4f4;
  --text: #333;
  --success: #52b788;
  --danger: #D7263D;
  --warning: #124A9c;
  --border-radius: 14px;
  --font-main: "Segoe UI", Roboto, Arial, sans-serif;
}
/* Utilitaire: */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-primary { background: var(--primary) !important; }
.bg-secondary { background: var(--secondary) !important; }
.btn-primary, .btn-warning { background: var(--primary); border: none; color: #fff; }
h1, h2, h3, h4, h5 { font-family: var(--font-main); }

body {
  background: linear-gradient(180deg, #000A7A 0%, #E099F7 100%) !important;
  margin: 0;
  padding: 0;
}

/* Header/Navbar transparent overlay et texte lisible */
header, nav, .navbar {
  background: transparent !important;
  box-shadow: none !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  z-index: 20;
  /* Optionnel pour confort de lecture du menu sur image très claire
  &:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.23);  // tu montes ou diminues l'opacité
    z-index: 1;
    pointer-events: none;
  }
  */
}
.header-nav .navbar-brand,
.header-nav .navbar-nav .nav-link,
.header-nav .btn,
.header-nav .btn-warning {
  color: #fff !important;
}
.header-nav .navbar-brand img { filter: none; }

.header-nav .navbar-toggler {
  filter: invert(100%);
  border: none !important;
  z-index: 30;
}
.header-nav .navbar-toggler:focus { outline: none; }
.header-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.header-nav .navbar-collapse,
.header-nav .navbar-nav .nav-link,
.header-nav .btn {
  z-index: 22;
}

.header-links .nav-link {
  color: #fff !important;
}

.header-nav .btn-warning {
  color: #fff !important;
  background: var(--primary) !important;
  border: none;
}

/* Optionnel : fondu shadow bas pour le header si tu veux renforcer la lecture sur photo claire */
.header-nav {
  /* box-shadow: 0 6px 16px rgba(0,0,0,0.09); */
}

/* Pour le cas où menu mobile est long : fond noir derrière sur mobile */
@media (max-width: 991px) {
  .header-nav .navbar-collapse {
    background: rgba(10,20,50,0.52) !important;
    padding: 14px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }
}

@media (max-width: 600px) {
   header, nav, .navbar {
    position: static !important;
    background: rgba(10,20,50,0.82) !important; /* pour garder lisibilité sur imagettes */
    width: 100%;
    z-index: 20;
    margin-bottom: 10px;
  }
}