/* ============================================================
   HEADER
============================================================ */

header {
  background-color: #0080ff;
  color: #ffffff;
}

/* -------------------------------
   MENU DE NAVIGATION
------------------------------- */

header ul#liste-categories {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

/* Chaque élément de menu */
header ul#liste-categories li {
  display: flex;
  align-items: stretch;
  height: 50px; /* ← Hauteur explicite nécessaire */
border-right:1px solid #bbb;
}

/* Le bouton Recommandation à droite */
header ul#liste-categories li:last-child {
  margin-left: auto;
}

/* Tous les liens de menu */
header ul#liste-categories li a {
  display: flex;
  align-items: center;     /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  padding: 0 16px;
  color: white;
  text-decoration: none;
  width: 100%;
  height: 100%; /* ← Le lien remplit la hauteur du <li> */
}

/* Effet de survol (sauf pour boutons verts) */
header ul#liste-categories li a:hover:not(.tout):not(.recomendation) {
  background-color: #111;
}

/* Boutons spéciaux (verts) */
header ul#liste-categories li a.tout,
header ul#liste-categories li a.recomendation {
  background-color: #04AA6D;
}

/* Hover spécifique pour les verts */
header ul#liste-categories li a.tout:hover,
header ul#liste-categories li a.recomendation:hover {
  background-color: #037a56;
}

/* -------------------------------
   image
------------------------------- */
header .logo {
  margin-left: 5px; /* espace de 10px à gauche */
  vertical-align: middle
}


/* -------------------------------
   TITRES
------------------------------- */

header .entete {
  color: white;
}


/* .entete centré verticalement et avec largeur flexible */
header .entete {
  flex: 1;                     /* prend tout l’espace entre logo et bouton */
  text-align: center;          /* centre le texte horizontalement */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centre verticalement le contenu dans .entete */
}

/* Pour que le <p> dans .entete ne casse pas la mise en page */
header .entete p.subtitle {
  margin-top: 0px;
  margin-bottom: 0;
}

header h1 {
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

header .subtitle {
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

header table {
  margin-right: auto;
  width: 80%;
}

/* -------------------------------
   CONTACT
------------------------------- */

 header .contact {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 15px;
}

header .contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: underline;
  border-radius: 21px;
  transition: all 0.5s ease-in-out;
  padding-left: 10px;
}

header .contact a:hover {
  color: #005999;
  text-decoration: none;
  border-radius: 60px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

 header .contact a img {
  border-radius: 21px;
  transition: all 0.5s ease-in-out;
  box-shadow: none;
}

header .contact a:hover img {
  background-color: #f2f4f8;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 1);
}

/* ================================
   Bouton de langue
================================ */

.lang-button {
  background-color: #0080ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  margin-left: auto; /* pousse à droite si dans un flex */
  display: block;
}

/* Survol (mode clair) */
.lang-button:hover {
  background-color: #005999;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Mode sombre */
body.mode-sombre .lang-button {
  background-color: #444;
  color: #eee;
  border: 1px solid #555;
}

body.mode-sombre .lang-button:hover {
  background-color: #666;
  color: white;
  box-shadow: 0 3px 6px rgba(147, 197, 253, 0.4); /* ombre bleu clair */
}

/* ================================
   Positionnement dans le header
================================ */

#lang-switch {
  margin-left: auto;
}

/* Si tu veux le forcer à droite dans un <td>, tu peux faire : */
td:last-child {
  text-align: right;
}




/*
============================================================
        modesombre
============================================================
*/
body.mode-sombre header {
  background-color: #1f2937;
  color: #e5e7eb;
}

body.mode-sombre header ul {
  background-color: #111;
}

body.mode-sombre header li a {
  color: #e5e7eb;
}

body.mode-sombre header li a:hover:not(.active),
body.mode-sombre header .active {
  background-color: #374151;
}