.noir {background-color: #000000;}
#pg-category-box {background-color: #000000;}
.pg-category-box {background-color: #000000;}

.course {
  background-image: url('/templates/cassiopeia_extended/css/bandeau.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;       /* Permet à l'image de s'adapter au conteneur */
  Alt"Monts de Blond Nature"; width: 1000px; height: 400px; fetchpriority=high;
  }   

/* 1. Réduire l'espace interne (horizontal) à gauche et à droite de chaque lien */
.dj-megamenu li.dj-item .title {
  padding-left: 12px !important;  /* Ajustez ces valeurs (ex: 8px ou 15px) selon vos besoins */
  padding-right: 12px !important;
}
/* 2. Empêcher les éléments du menu de s'étirer de force sur toute la largeur */
.dj-megamenu {
  justify-content: flex-start !important; /* Aligne les éléments au début (à gauche) au lieu de les disperser */
}
.dj-megamenu li.dj-item {
  flex-grow: 0 !important; /* Interdit aux boutons de grandir pour boucher les trous */
  width: auto !important;   /* Force chaque bouton à ne prendre que la place de son texte */
}

/* 1. Nettoyage et positionnement propre du menu */
#dj-megamenu119 {
  position: absolute !important;
  top: 360px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important; /* Force le menu à rester au-dessus du reste */
  color: #FFF000 !important; 
  font-weight: bold !important;
  margin-top: 0 !important; /* On supprime la marge qui poussait le contenu */
}
/* 2. Suppression définitive des bandes grises et des espaces inutiles de Joomla */
.container-topbar,
.container-header {
  background: none !important;      /* Supprime la couleur grise d'arrière-plan */
  background-color: transparent !important;
  box-shadow: none !important;      /* Supprime d'éventuelles ombres grises */
  padding-top: 0 !important;        /* Supprime les espaces vides internes */
  padding-bottom: 0 !important;
  margin-top: 0 !important;         /* Plus besoin de marge négative instable */
}
/* On s'assure que le conteneur de Cassiopeia ne bloque pas le positionnement */
.container-header {
  position: relative !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ==========================================
   1. GESTION DU POSITIONNEMENT (ORDINATEUR / PAYSAGE)
   ========================================== */
@media (min-width: 576px) {
  #dj-megamenu119 {
    position: absolute !important;
    top: 360px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    margin-top: 0 !important;
  }
}
/* ==========================================
   2. GESTION DU POSITIONNEMENT (SMARTPHONE PORTRAIT)
   ========================================== */
@media (max-width: 575px) {
  #dj-megamenu119 {
    position: relative !important;
    top: 0 !important;
    margin-top: 10px !important;
    width: 100% !important;
    height: auto !important;
  }
  .container-header {
    position: relative !important;
    height: auto !important;
  }
}
/* ==========================================
   3. SUPPRESSION DES BANDES GRISES DE JOOMLA
   ========================================== */
.container-topbar,
.container-header {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
/* ==========================================
   4. DESIGN DES BOUTONS (COULEURS ET ESPACEMENT ÉCRANS LARGES)
   ========================================== */
#dj-megamenu119 {
  color: #FFF000 !important; 
  font-weight: bold !important;
}
.title {
  background-color: #000000 !important; 
  color: #fff000 !important; 
  cursor: pointer;
}
/* Au survol global */
.title:hover {
  background-color: orange !important; 
  color: black !important;
}
/* Page active global */
li.dj-active .title, li.active .title, .dj-active > .title, .active > .title {
  background-color: green !important; 
  color: white !important;
}
/* ⚠️ ON APPLIQUE L'ESPACEMENT DES ITEMS ET LA LARGEUR AUTO UNIQUEMENT SUR ORDINATEUR/PAYSAGE */
@media (min-width: 576px) {
  .dj-megamenu li.dj-item .title {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .dj-megamenu {
    justify-content: flex-start !important;
  }
  .dj-megamenu li.dj-item {
    flex-grow: 0 !important;
    width: auto !important;
  }
}
/* ==========================================
   5. CORRECTIF UNIQUE POUR LE SMARTPHONE EN PORTRAIT (ÉCRANS ÉTROITS)
   ========================================== */
@media (max-width: 575px) {
  /* On force le conteneur du menu à reprendre 100% de la largeur pour éviter les 2 lignes */
  .dj-megamenu, 
  .dj-megamenu li.dj-item,
  .dj-megamenu li.dj-item .title {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  /* Correction du fond blanc : on force le fond noir d'origine du menu sur mobile */
  #dj-megamenu119,
  .dj-megamenu-container {
    background-color: #000000 !important; 
  }
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://mdbn.fr/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2?v=4a6591
') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://mdbn.fr/media/system/css/joomla-fontawesome.min.css?da56cb') format('woff2');
}

/* 1. Configuration de base pour l'activation de l'animation */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration, 1s);
  animation-duration: var(--animate-duration, 1s);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* 2. Les étapes de l'effet de fondu (Keyframes) */
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  to { opacity: 1; }
}

/* 3. La classe à appliquer sur vos éléments Joomla */
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* 4. Respect du choix de l'utilisateur (Accessibilité) */
@media (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}