/*
 * Mode sombre du site (demande de l'utilisateur du 2026-10-27). L'en-tête change, en gris très foncé (demande de
 * l'utilisateur du 2026-10-27, avant #16171a, presque noir, comme Abitickets, qui a pris le même gris) ; texte et liens
 * comme ceux d'Abitickets (css/abitickets_sombre.css). Le fond des pages dont le <body> a la classe site-fond-sombre
 * (contact, informations-legales, confidentialite, abidex) passe en noir.
 * Bouton sous les drapeaux sur ordinateur (768 px de large et plus), en haut à gauche du menu de téléphone, sur la
 * ligne de la croix, sous 768 px (demande de l'utilisateur du 2026-10-27 ; avant, ni bouton ni mode sombre sous 768 px).
 * Les règles de couleur dépendent de la classe site-sombre de <html>, posée par themeSiteBalises() d'après le cookie
 * abidex_theme et changée sans rechargement par js/site_theme.js. Les boutons et le logo blanc ont l'attribut hidden :
 * ils restent cachés hors de leur largeur d'écran, ou si ce fichier n'est pas chargé.
 */

html.site-sombre {
  --site-sombre-entete: #2b2d31;
  --site-sombre-cadre: #33363b;
  --site-sombre-surface: #3d4046;
  --site-sombre-bord: #555a62;
  --site-sombre-texte: #e3e5e8;
  --site-sombre-lien: #8ab4f8;
  --site-sombre-bouton-bord: #5f8fd6;
}

/* Bouton, en-tête comme menu de téléphone */
.site-theme-basculer {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  border: 1px solid rgb(0, 56, 136);
  border-radius: 4px;
  color: rgb(0, 56, 136);
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.site-theme-basculer:hover {
  color: #ffffff;
  background-color: rgb(0, 56, 136);
}

.site-theme-basculer svg {
  width: 14px;
  height: 14px;
}

.site-theme-basculer .site-theme-soleil,
html.site-sombre .site-theme-basculer .site-theme-lune {
  display: none;
}

html.site-sombre .site-theme-basculer .site-theme-soleil {
  display: inline;
}

html.site-sombre .site-theme-basculer {
  color: var(--site-sombre-lien);
  background-color: var(--site-sombre-surface);
  border-color: var(--site-sombre-bouton-bord);
}

html.site-sombre .site-theme-basculer:hover {
  color: #ffffff;
  background-color: #1f56b0;
}

/* Bouton sous les drapeaux (getSectionTopbar2()), de leur hauteur et de la largeur de leur rangée (demande de
   l'utilisateur du 2026-10-27, avant à leur gauche) : width 0 et min-width 100 % font prendre au bouton la largeur
   du cadre des drapeaux sans l'élargir */
@media screen and (min-width: 768px) {
  .site-theme-entete[hidden] {
    display: flex;
  }

  .site-theme-entete {
    width: 0;
    min-width: 100%;
    height: 23.4px;
    margin: 4px 0 0 0;
  }
}

/* Ligne du haut du menu de téléphone : bouton à gauche, croix à droite. Placée ici et non dans css/menu.2510.css,
   gardé 30 jours en cache par le navigateur (ce fichier est chargé par assetUrl()) : avec l'ancien CSS, la croix
   passerait à gauche */
.drawer-haut {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.drawer-haut .close {
  align-self: center;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .site-theme-menu[hidden] {
    display: inline-flex;
  }

  .site-theme-menu {
    height: 32px;
    padding: 0 10px;
    gap: 6px;
    font-size: 14px;
  }

  .site-theme-menu svg {
    width: 16px;
    height: 16px;
  }
}

/* Logo : le blanc remplace celui du site (themeSiteLogoSombre()) */
html.site-sombre .site-logo-sombre[hidden] {
  display: block;
}

html.site-sombre .menuImg:not(.site-logo-sombre) {
  display: none;
}

/* En-tête et menu clair sur fond gris très foncé */
html.site-sombre .headerAbidex {
  background-color: var(--site-sombre-entete);
}

html.site-sombre .topnavB {
  color: var(--site-sombre-texte);
  background-color: var(--site-sombre-entete);
}

html.site-sombre .topnavB a {
  color: var(--site-sombre-texte);
}

html.site-sombre .topnavB a.menushop {
  color: rgb(255, 102, 0) !important;
}

html.site-sombre .topnavB a.active,
html.site-sombre .topnavB a:hover {
  color: #ffffff !important;
}

/* Burger et panneau du menu (jusqu'à 1200 px de large) */
html.site-sombre .burger {
  color: var(--site-sombre-texte);
}

html.site-sombre .drawer {
  background: var(--site-sombre-cadre);
}

html.site-sombre .drawer .close {
  color: var(--site-sombre-texte);
}

html.site-sombre .menu a {
  color: var(--site-sombre-texte);
  border-bottom-color: var(--site-sombre-bord);
}

html.site-sombre .menu a:hover {
  color: var(--site-sombre-lien);
}

/* Fond noir sur les côtés du contenu (demande de l'utilisateur du 2026-10-27) : à la place du gris de
   css/cadre_page.css (contact, informations-legales, confidentialite, compte/espace-clients depuis le 2026-10-27) et du blanc de abidex.php ; la bande du titre
   du cadre garde son gris */
html.site-sombre body.site-fond-sombre {
  background: #000000;
}