/* =================================================================
   CORRECTIF POUR ÉVITER LA SUPERPOSITION DU WIDGET ET DE L'EN-TÊTE
   ================================================================= */

/* Réinitialisation des styles critiques */
.nav-meteo-heure {
  position: relative !important;
  width: 100% !important;
  max-width: 1350px !important;
  margin: 0 auto !important;
  padding: 5px 15px !important;
  background-color: transparent !important; background: linear-gradient(135deg, #2c3e50, #4a6491); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  text-align: center !important;
  z-index: 999 !important; /* Réduit pour être sous les étiquettes */
}

/* Widget caché */
.nav-meteo-heure--cache {
  display: none !important;
}

/* Widget visible - Règle SIMPLIFIÉE */
.nav-meteo-heure:not(.nav-meteo-heure--cache) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Assurer la visibilité du contenu du widget */
.widget-meteo-heure,
.ligne-meteo-heure,
.ligne-actualites,
.widget-meteo,
.widget-date-heure,
#icone-meteo,
#info-meteo,
#date-actuelle,
#heure-actuelle,
.widget-actualites,
#fil-actualites {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Styles spécifiques pour les éléments flex */
.widget-meteo,
.ligne-meteo-heure,
.widget-date-heure,
.nav-meteo-heure:not(.nav-meteo-heure--cache) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Espacement pour éviter que le contenu soit caché sous l'en-tête */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Style pour garantir que les actualités défilent correctement */
.ligne-actualites,
.widget-actualites,
#fil-actualites {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* S'assurer que le marquee fonctionne correctement */
#fil-actualites,
marquee#fil-actualites {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Centrer le conteneur principal du widget */
.widget-meteo-heure {
  max-width: 1350px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Centrer la ligne avec météo et heure */
.ligne-meteo-heure {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1350px !important;
  margin: 0 auto !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
}

/* Garantir que le widget météo et les infos sont bien centrés */
.widget-meteo, .widget-date-heure {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 5px !important;
}

/* Style du bouton toggle global - style BASE qui s'applique toujours */
.bouton-toggle-widget {
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  z-index: 1051 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  outline: none !important; /* Supprime le contour de focus */
}

/* Supprimer TOUS les cercles possibles du bouton toggle - super spécifique */
.bouton-toggle-widget,
.bouton-toggle-widget:before,
.bouton-toggle-widget:after,
button.bouton-toggle-widget,
#bouton-toggle-widget,
.barre-bleue-widget .bouton-toggle-widget,
.nav-meteo-heure ~ .bouton-toggle-widget,
.en-tete .bouton-toggle-widget,
.conteneur-widget-temps .bouton-toggle-widget,
header .bouton-toggle-widget,
.nav-meteo-heure + .bouton-toggle-widget,
button#bouton-toggle-widget {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
}

/* Assurer que les styles importants sont appliqués partout */
*[class*="bouton-toggle"] {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
}

/* Icône du bouton toggle */
.bouton-toggle-widget i {
  color: #ffffff !important;
  display: block !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* CORRECTIF SPÉCIFIQUE POUR LE POSITIONNEMENT MOBILE DU WIDGET MÉTÉO */
@media (max-width: 768px) {
  /* Variables CSS pour le widget météo */
  :root {
    --widget-meteo-top-margin: 0px;
    --widget-meteo-height: auto;
  }

  /* Barre bleue en haut qui défile avec la page */
  .barre-bleue-widget {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 40px !important;
    width: 100% !important;
    /* background-color: #ffffff !important; */
    position: relative !important;
    text-align: center !important;
    line-height: normal !important;
    z-index: 1050 !important;
    transition: transform 0.3s ease-out !important;
    will-change: transform !important;
  }

  /* Suppression du pseudo-élément before qui causait des problèmes */
  body::before {
    display: none !important;
    content: none !important;
  }

  /* Bouton toggle sur mobile - PARFAITEMENT CENTRÉ dans la barre bleue */
  .bouton-toggle-widget {
    width: 24px !important;
    height: 24px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important; /* Réduit pour être sous les étiquettes */
    transition: transform 0.3s ease-out !important;
    will-change: transform !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Position du widget lorsqu'il est ouvert */
  .nav-meteo-heure:not(.nav-meteo-heure--cache) {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 5px 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    background-color: white !important;
  }

  /* Style des éléments du widget sur mobile */
  #icone-meteo {
    margin-right: 5px !important;
    margin-left: 5px !important;
    order: 1 !important;
    display: inline-block !important;
    font-size: 18px !important;
  }

  #info-meteo {
    order: 2 !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: inline-block !important;
    font-size: 14px !important;
  }

  /* Réduire la taille du texte pour économiser de l'espace */
  .widget-date,
  .widget-heure,
  .widget-actualites,
  .ville-pays {
    font-size: 14px !important;
  }

  /* Masquer le séparateur pour économiser de l'espace */
  .separateur {
    display: none !important;
  }

  /* S'assurer que date et heure sont centrés */
  #date-actuelle,
  #heure-actuelle {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }

  /* Ajustement pour l'en-tête */
  .en-tete {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    z-index: 1000 !important;
  }
}

/* Masquer le widget temps dans la navigation secondaire mobile */
.navigation-secondaire.mobile-only.widget-cache .nav-meteo-heure,
.navigation-secondaire.mobile-only.widget-cache #bouton-toggle-widget,
.navigation-secondaire.mobile-only.widget-cache .widget-meteo-heure,
.navigation-secondaire.mobile-only.widget-cache .barre-bleue-widget,
.navigation-secondaire.mobile-only.active .nav-meteo-heure,
.navigation-secondaire.mobile-only.active #bouton-toggle-widget,
.navigation-secondaire.mobile-only.active .widget-meteo-heure,
.navigation-secondaire.mobile-only.active .barre-bleue-widget,
.navigation-secondaire.mobile-only.active ~ .nav-meteo-heure,
.navigation-secondaire.mobile-only.active ~ #bouton-toggle-widget,
.navigation-secondaire.mobile-only.active ~ .widget-meteo-heure,
.navigation-secondaire.mobile-only.active ~ .barre-bleue-widget {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Sélecteurs plus spécifiques pour le mobile */
@media (max-width: 768px) {
  /* Assurer que le menu mobile a un z-index élevé */
  .navigation-secondaire.mobile-only.active,
  .navigation-secondaire.mobile-only.active * {
    z-index: 9999 !important;
  }

  /* Masquer tous les éléments du widget quand le menu mobile est ouvert */
  .navigation-secondaire.mobile-only.active ~ .barre-bleue-widget,
  .navigation-secondaire.mobile-only.active ~ .bouton-toggle-widget,
  .navigation-secondaire.mobile-only.active ~ .nav-meteo-heure {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Quand la navigation mobile est active, cacher le bouton toggle global */
  body:has(.navigation-secondaire.mobile-only.active) .bouton-toggle-widget,
  body:has(.navigation-secondaire.mobile-only.active) .barre-bleue-widget,
  body:has(.navigation-secondaire.mobile-only.active) .nav-meteo-heure {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Assurer qu'il n'y a qu'un seul bouton toggle visible à la fois */
  .bouton-toggle-widget:nth-of-type(n+2) {
    display: none !important;
  }
}

/* Style pour gérer l'affichage du widget au début */
.nav-meteo-heure--cache {
  display: none !important;
}

/* Définit l'espace pour l'en-tête */
.en-tete {
  position: relative !important;
  width: 100% !important;
  max-width: 1350px !important;
  margin: 0 auto !important;
  background-color: white !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 999 !important; /* Réduit pour être sous les étiquettes */
}

/* Positionnement de la barre bleue pour desktop */
@media (min-width: 769px) {
  /* Conteneur pour la barre bleue et le widget */
  .conteneur-widget-temps {
    position: relative !important;
    width: 100% !important;
    max-width: 1350px !important;
    margin: 0 auto !important;
    z-index: 999 !important; /* Réduit pour être sous les étiquettes */
  }

  /* Barre bleue spécifiquement sur desktop (conserve son nom pour la cohérence du code) */
  .barre-bleue-widget {
    display: flex !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 1350px !important;
    /* background-color: #ffffff !important; */ /* Couleur blanche maintenue */
    position: relative !important;
    text-align: center !important;
    justify-content: center !important; /* Centrer horizontalement le contenu */
    align-items: center !important; /* Centrer verticalement le contenu */
    margin: 0 auto !important;
    z-index: 999 !important; /* Réduit pour être sous les étiquettes */
    box-shadow: none !important; /* Suppression de l'ombre */
    border-radius: 0 !important; /* Suppression des bordures arrondies en bas */
    border-bottom: none !important; /* Suppression de la bordure en bas */
    border-left: 1px solid #e5e5e5 !important; /* Bordure fine à gauche maintenue */
    border-right: 1px solid #e5e5e5 !important; /* Bordure fine à droite maintenue */
  }

  /* Position du bouton toggle pour desktop - PARFAITEMENT CENTRÉ */
  .bouton-toggle-widget {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Centrage parfait */
    width: 30px !important;
    height: 30px !important;
    z-index: 1000 !important; /* Réduit pour être sous les étiquettes */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Assurer que l'icône est également centrée */
  .bouton-toggle-widget i {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Navigation primaire positionnée après la barre bleue */
  .barre-bleue-widget + .navigation-principale,
  .barre-bleue-widget ~ .navigation-principale {
    margin-top: 5px !important;
  }

  /* Réorganisation de l'ordre des éléments dans l'en-tête pour desktop */
  .en-tete {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Si le widget est fermé, s'assurer que la barre bleue est visible */
  .nav-meteo-heure--cache ~ .barre-bleue-widget,
  .nav-meteo-heure--cache + .barre-bleue-widget,
  .nav-meteo-heure.nav-meteo-heure--cache ~ .barre-bleue-widget {
    display: block !important;
  }

  /* Styles généraux pour s'assurer que la barre bleue reste visible quand le widget est fermé */
  .nav-meteo-heure--cache ~ .barre-bleue-widget,
  .nav-meteo-heure--cache + .barre-bleue-widget,
  .nav-meteo-heure.nav-meteo-heure--cache ~ .barre-bleue-widget,
  .nav-meteo-heure.nav-meteo-heure--cache + .barre-bleue-widget,
  .nav-meteo-heure--cache ~ .en-tete .barre-bleue-widget,
  .nav-meteo-heure--cache + .en-tete .barre-bleue-widget,
  .en-tete .barre-bleue-widget {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Forcer l'affichage de la barre bleue dans tous les cas sur desktop */
  .navigation-principale ~ .barre-bleue-widget,
  .navigation-principale + .barre-bleue-widget,
  .barre-bleue-widget:not(.nav-meteo-heure--cache .barre-bleue-widget),
  .barre-bleue-widget:not([style*="display: none"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Pour les cas où la barre bleue est à l'intérieur de l'en-tête */
  .en-tete > .barre-bleue-widget,
  header > .barre-bleue-widget,
  header .barre-bleue-widget,
  .en-tete .barre-bleue-widget {
    order: -2 !important;
    position: relative !important;
    z-index: 1052 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Correction de l'ordre d'affichage pour toutes les pages, pas seulement page-test.php */
  .en-tete {
    flex-direction: column !important;
  }

  .en-tete > *:not(.barre-bleue-widget):not(.nav-meteo-heure):not(.navigation-principale) {
    order: 2 !important;
  }
}

/* Styles spécifiques pour page-test.php */
body:has(.page-test) .en-tete,
#page-test .en-tete,
.page-test .en-tete {
  display: flex !important;
  flex-direction: column !important;
}

/* Placement spécifique de la barre bleue avant la navigation principale dans page-test.php */
body:has(.page-test) .barre-bleue-widget,
#page-test .barre-bleue-widget,
.page-test .barre-bleue-widget {
  order: -1 !important;
  position: relative !important;
  z-index: 1050 !important;
}

/* Placement de la navigation principale après la barre bleue dans page-test.php */
body:has(.page-test) .navigation-principale,
#page-test .navigation-principale,
.page-test .navigation-principale {
  order: 1 !important;
  margin-top: 5px !important;
}

/* Structure spécifique pour page-test.php */
@media (min-width: 769px) {
  /* Forcer l'ordre d'affichage dans l'en-tête pour desktop */
  .en-tete {
    flex-direction: column !important;
  }

  /* Assurez-vous que la barre bleue apparaît en premier dans page-test.php */
  .en-tete > .barre-bleue-widget {
    order: -2 !important;
  }

  /* Ensuite le widget météo */
  .en-tete > .nav-meteo-heure {
    order: -1 !important;
  }

  /* Finalement la navigation principale */
  .en-tete > .navigation-principale {
    order: 1 !important;
  }

  /* CSS pour page-test.php qui contredit tout style antérieur */
  body[id*="test"],
  body[class*="test"],
  body:has(main[id*="test"]),
  body:has(.page-test) {
    --order-bleu-bar: -2;
    --order-nav-meteo: -1;
    --order-nav-principale: 1;
  }

  body[id*="test"] .barre-bleue-widget,
  body[class*="test"] .barre-bleue-widget,
  body:has(main[id*="test"]) .barre-bleue-widget,
  body:has(.page-test) .barre-bleue-widget {
    order: var(--order-bleu-bar) !important;
  }

  body[id*="test"] .nav-meteo-heure,
  body[class*="test"] .nav-meteo-heure,
  body:has(main[id*="test"]) .nav-meteo-heure,
  body:has(.page-test) .nav-meteo-heure {
    order: var(--order-nav-meteo) !important;
  }

  body[id*="test"] .navigation-principale,
  body[class*="test"] .navigation-principale,
  body:has(main[id*="test"]) .navigation-principale,
  body:has(.page-test) .navigation-principale {
    order: var(--order-nav-principale) !important;
  }
}

/* STYLES SPÉCIFIQUES POUR PAGE-TEST.PHP SUR DESKTOP */
@media (min-width: 769px) {
  /* Styles pour page-test.php */
  body[id*="test"] .barre-bleue-widget,
  body[class*="test"] .barre-bleue-widget,
  body[id="page-test"] .barre-bleue-widget,
  body:has(main[id*="test"]) .barre-bleue-widget,
  body:has(.page-test) .barre-bleue-widget {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 1350px !important;
    background-color: #ffffff !important; /* Couleur blanche maintenue */
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: normal !important;
    order: -2 !important;
    z-index: 1052 !important;
    box-shadow: none !important; /* Suppression de l'ombre */
    border-radius: 0 !important; /* Suppression des bordures arrondies en bas */
    border-bottom: none !important; /* Suppression de la bordure en bas */
    border-left: 1px solid #e5e5e5 !important; /* Bordure fine à gauche maintenue */
    border-right: 1px solid #e5e5e5 !important; /* Bordure fine à droite maintenue */
  }

  /* Centrage parfait du bouton toggle dans la barre bleue sur page-test.php */
  body[id*="test"] .bouton-toggle-widget,
  body[class*="test"] .bouton-toggle-widget,
  body[id="page-test"] .bouton-toggle-widget,
  body:has(main[id*="test"]) .bouton-toggle-widget,
  body:has(.page-test) .bouton-toggle-widget,
  #page-test .bouton-toggle-widget,
  .page-test .bouton-toggle-widget {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background-color: white !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    z-index: 1053 !important;
  }

  /* Centrage parfait de l'icône dans le bouton sur page-test.php */
  body[id*="test"] .bouton-toggle-widget i,
  body[class*="test"] .bouton-toggle-widget i,
  body[id="page-test"] .bouton-toggle-widget i,
  body:has(main[id*="test"]) .bouton-toggle-widget i,
  body:has(.page-test) .bouton-toggle-widget i,
  #page-test .bouton-toggle-widget i,
  .page-test .bouton-toggle-widget i {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #007bff !important;
  }
}

/* Supprimer l'espace sous le footer pour page-test.php sur desktop */
@media (min-width: 769px) {
  /* Ciblage très spécifique pour page-test.php */
  body[id*="test"] footer,
  body[class*="test"] footer,
  body[id="page-test"] footer,
  body:has(main[id*="test"]) footer,
  body:has(.page-test) footer,
  #page-test footer,
  .page-test footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    bottom: 0 !important;
  }

  /* Supprimer les marges au niveau de body et html pour page-test.php */
  body[id*="test"],
  body[class*="test"],
  body[id="page-test"],
  body:has(main[id*="test"]),
  body:has(.page-test),
  html:has(body[id*="test"]),
  html:has(body[class*="test"]),
  html:has(body[id="page-test"]),
  html:has(body:has(main[id*="test"])),
  html:has(body:has(.page-test)) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-y: auto !important; /* Une seule barre de défilement */
    overflow-x: hidden !important;
  }

  /* Correction spécifique pour HTML et BODY */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  /* S'assurer que le contenu principal ne dépasse pas */
  .conteneur-principal,
  main,
  #page-test,
  .page-test {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Fix pour le footer */
  body[id*="test"] footer,
  body[class*="test"] footer,
  body[id="page-test"] footer,
  body:has(main[id*="test"]) footer,
  body:has(.page-test) footer,
  #page-test footer,
  .page-test footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    bottom: 0 !important;
  }

  /* Assurer que tous les conteneurs se terminent correctement sans marge */
  body[id*="test"] .conteneur-principal,
  body[class*="test"] .conteneur-principal,
  body[id="page-test"] .conteneur-principal,
  body:has(main[id*="test"]) .conteneur-principal,
  body:has(.page-test) .conteneur-principal,
  #page-test .conteneur-principal,
  .page-test .conteneur-principal,
  body[id*="test"] main,
  body[class*="test"] main,
  body[id="page-test"] main,
  body:has(main[id*="test"]) main,
  body:has(.page-test) main,
  #page-test main,
  .page-test main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Règles globales pour corriger les problèmes de défilement */
html, body {
  scroll-behavior: smooth !important;
  max-height: 100% !important;
}

/* Correction explicite du problème de double barre de défilement */
html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body {
  overflow: visible !important;
  min-height: 100vh !important;
  max-height: none !important;
  position: relative !important;
}

/* S'assurer que la section des styles pour page-test.php est plus prioritaire */
@media (min-width: 769px) {
  /* Styles pour page-test.php */
  body[id*="test"] .barre-bleue-widget,
  body[class*="test"] .barre-bleue-widget,
  body[id="page-test"] .barre-bleue-widget,
  body:has(main[id*="test"]) .barre-bleue-widget,
  body:has(.page-test) .barre-bleue-widget,
  #page-test .barre-bleue-widget,
  .page-test .barre-bleue-widget {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 1350px !important;
    background-color: #ffffff !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: normal !important;
    order: -2 !important;
    z-index: 1052 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-left: 1px solid #e5e5e5 !important;
    border-right: 1px solid #e5e5e5 !important;
  }
}

/* Fix explicite pour page-test.php */
body.page-test,
body#page-test,
html:has(body.page-test),
html:has(body#page-test) {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.page-test #footer,
body#page-test #footer,
body.page-test footer,
body#page-test footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
}

/* Styles SUPER SPÉCIFIQUES pour cibler entete.php et page-test.php */
.barre-bleue-widget > .bouton-toggle-widget,
button#bouton-toggle-widget,
body:has(#page-test) .bouton-toggle-widget,
body:has([class*="page-test"]) .bouton-toggle-widget,
body:has([id*="page-test"]) .bouton-toggle-widget,
body:has(.entete) .bouton-toggle-widget,
body:has(header) .bouton-toggle-widget,
body:has(header) .barre-bleue-widget .bouton-toggle-widget,
body:has(.en-tete) .barre-bleue-widget .bouton-toggle-widget,
body:has(header.en-tete) .barre-bleue-widget .bouton-toggle-widget {
  /* Suppression TOTALE des styles du cercle */
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Styles spécifiques pour mobile */
@media (max-width: 768px) {
  .barre-bleue-widget .bouton-toggle-widget,
  button.bouton-toggle-widget,
  #bouton-toggle-widget,
  button#bouton-toggle-widget {
    width: 30px !important;
    height: 30px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Seulement l'icône est visible */
  .bouton-toggle-widget i {
    color: #007bff !important;
    font-size: 18px !important;
  }
}