/* Modifier la taille du logo de l'en-tête */
.navbar-brand img {
    width: 400px !important;  /* Modifiez cette valeur (ex: 150px, 300px) selon la largeur voulue */
    height: auto !important;   /* Conserve les proportions de l'image pour éviter de la déformer */
}


.container-header {
    background-color: transparent !important; /* Rend le fond transparent */
    background-image: none !important;        /* Supprime le dégradé bleu natif */
    box-shadow: none !important;              /* Optionnel : retire l'ombre portée */
}


/* Dégradé horizontal du bleu clair (gauche) vers le bleu foncé (droite) */
.footer {
    background-color: #0A5EA6 !important; /* Couleur de secours */
    background-image: linear-gradient(90deg, #7EC0E0 0%, #0A5EA6 100%) !important; /* Dégradé horizontal */
    color: #ffffff !important; /* Texte en blanc */
}

/* Liens du footer en blanc */
.footer a {
    color: #ffffff !important;
}

/* Centrer verticalement le menu par rapport au logo */
.container-nav {
    display: flex !important;
    align-items: center !important; /* Aligne le menu sur l'axe vertical central */
    height: auto !important;
}

/* Optionnel : Supprime une marge supérieure qui peut pousser le menu */
.container-nav .mod-menu {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Décale le menu vers la droite sans toucher à la position du logo */
.container-nav .mod-menu {
    padding-left: 60px !important; /* Ajustez ce chiffre pour éloigner le menu du logo */
}

/* Descendre légèrement le menu par rapport au logo */
.container-nav .mod-menu {
    transform: translateY(30px) !important; /* Pousse le menu vers le bas de 8 pixels */
}

/* Grossir le texte des liens du menu principal */
.container-nav .mod-menu a {
    font-size: 1.50rem !important; /* Augmente la taille du texte */
    font-weight: 600 !important;   /* Optionnel : rend le texte un peu plus épais / semi-gras */
}


/* Couleur du texte du menu par défaut (ex: noir) */
.container-header .mod-menu a {
    color: #7EC0E0 !important;
}

/* Couleur du texte du menu au survol de la souris (ex: votre bleu foncé #0A5EA6) */
.container-header .mod-menu a:hover, 
.container-header .mod-menu a:focus {
    color: #0A5EA6 !important;
}

/* Couleur de la page active (la page sur laquelle se trouve l'internaute) */
.container-header .mod-menu .active > a,
.container-header .mod-menu .current > a {
    color: #0A5EA6 !important;
    font-weight: bold; /* Optionnel : met le texte en gras */
}



/* Supprime toutes les flèches générées via les pseudo-éléments ::after et ::before dans les menus */
.mod-menu .parent::after,
.mod-menu .parent > a::after,
.mod-menu .parent > button::after,
.mod-menu .dropdown-toggle::after,
.mod-menu .mm-toggler::after,
.metismenu .has-arrow::after {
    display: none !important;
    content: none !important;
    background: none !important;
}


/* =======================================================
   CORRECTION STRICTE MOBILE (Écrans inférieurs à 992px)
   ======================================================= */
@media (max-width: 991.98px) {
  /* On réinitialise et prépare les sous-menus sur mobile */
  .mod-menu .parent > ul, 
  .mod-menu .metismenu-item .mm-collapse {
    position: relative !important;
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    transition: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  /* Force l'affichage immédiat du bloc lorsque le script applique la classe */
  .mod-menu .metismenu-item.js-mobile-open > ul,
  .mod-menu .metismenu-item.js-mobile-open .mm-collapse {
    display: block !important;
  }
}


  /* Force l'apparition en bloc sous le mot Actualités */
  .mod-menu .metismenu-item .mm-collapse.mm-show,
  .mod-menu .parent.active > ul {
    display: block !important;
  }
}


/* =======================================================
   1. ORDINATEUR UNIQUEMENT (Écrans de 992px et plus)
   ======================================================= */
@media (min-width: 992px) {
  /* Supprime le fond blanc, les bordures et l'ombre du sous-menu */
  .mod-menu ul.metismenu-item,
  .mod-menu .parent ul {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Étape A : On prépare le sous-menu en mode invisible mais prêt à s'animer */
  .container-header .mod-menu .dropdown > .dropdown-menu,
  .navbar-nav .dropdown > .dropdown-menu,
  .mod-menu .parent > ul,
  .mod-menu .metismenu-item .mm-collapse {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    margin-top: 10px !important; /* Léger décalage vers le bas au départ */
    transition: opacity 0.3s ease, margin-top 0.3s ease, visibility 0.3s ease !important; /* Durée du fondu : 0.3 seconde */
  }

  /* Étape B : Déclenchement de l'animation au passage de la souris */
  .container-header .mod-menu .dropdown:hover > .dropdown-menu,
  .navbar-nav .dropdown:hover > .dropdown-menu,
  .mod-menu .parent:hover > ul,
  .mod-menu .metismenu-item:hover .mm-collapse {
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important; /* Le menu remonte doucement à sa place */
  }
}

/* =======================================================
   2. TÉLÉPHONE UNIQUEMENT (Écrans inférieurs à 992px)
   ======================================================= */
@media (max-width: 991.98px) {
  /* Supprime l'affichage forcé en "absolute" hérité de l'ordinateur */
  .mod-menu .parent > ul, 
  .mod-menu .metismenu-item .mm-collapse {
    position: relative !important;
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    transition: none !important;
    height: auto !important;
  }

  /* Force l'affichage et pousse le contenu du site vers le bas quand Joomla l'active */
  .mod-menu .metismenu-item .mm-collapse.mm-show,
  .mod-menu .parent.mm-show > ul,
  .mod-menu .parent.active > ul {
    display: block !important;
  }
  
  /* Style des sous-liens pour qu'ils soient lisibles sur le fond mobile */
  .mod-menu .parent.mm-show > ul a,
  .mod-menu .parent.active > ul a {
    padding-left: 20px !important;
    display: block !important;
  }
}


/* Aligne le module de connexion et son contenu vers la droite du footer */
footer .mod-login form,
footer [id^="login-form"] {
  justify-content: flex-end !important; /* Pousse les champs vers la droite */
  text-align: right !important;         /* Oriente le texte à droite */
  margin-left: auto !important;          /* Force le bloc à se caler à droite */
  margin-right: 0 !important;
}