/*================= FONTS AND VARIABLES =================*/
@import url("https://fonts.googleapis.com/css?family=Dosis:400,700");

@font-face {
  font-family: 'Mouser';
  src: url('font/mouser.woff2') format('woff2'),
       url('font/mouser.woff') format('woff'),
       url('font/mouser.ttf') format('truetype'); /* Optionnel, si vous avez le TTF */
  font-weight: normal;
  font-style: normal;
}

/*================= HEADER =================*/
.top-banner {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 45px;
  padding: 5px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between; /* Répartir le logo à gauche et le titre au centre */
  align-items: center;
  padding: 0 10px; /* Ajoutez un peu de padding pour que le contenu ne touche pas les bords */
  z-index: 1;
}

#site-logo {
  width: 80px;
  height: auto; /* Conserve le ratio d'aspect */
  margin-left: 10px; /* Un peu d'espace à gauche */
}

.top-banner h1 {
  flex-grow: 1; /* Le titre prend l'espace disponible */
  text-align: center; /* Centrer le texte dans l'espace restant */
  margin: 0;
  font-size: clamp(32px, 5vw, 70px);
  font-family: 'Mouser', sans-serif;
  color: var(--main-black-color);
}

/* Ajuster le titre et le logo sur les petits écrans */
@media screen and (max-width: 768px) {
  .top-banner h1 {
    font-size: clamp(24px, 4vw, 50px); /* Réduire la taille du texte */
    white-space: nowrap; /* Empêche le retour à la ligne du titre */
  }

  #site-logo {
    width: 60px; /* Réduit la taille du logo */
    height: auto; /* Garde le ratio du logo */
  }
}

/* Sur les très petits écrans (ex. téléphones) */
@media screen and (max-width: 480px) {
  .top-banner h1 {
    font-size: clamp(20px, 3.5vw, 40px); /* Réduire encore plus la taille du texte */
  }

  #site-logo {
    width: 50px; /* Réduit davantage le logo */
    height: auto; /* Garde le ratio du logo */
  }
}

/*================= BURGER MENU =================*/
.dropdown {
  position: absolute; /* Position absolue par rapport à .top-banner */
  right: 20px; /* Positionne le menu burger à 20 pixels du bord droit */
  top: 50%; /* Centre verticalement le menu burger */
  transform: translateY(-50%); /* Ajuste pour le centrer parfaitement */
}

.dropdown-btn {
  background-color: white;
  border: none;
  cursor: pointer;
  padding: 5px;
  font-size: 24px; /* Ajustez cette taille si nécessaire */
}

.dropdown-btn .material-icons {
  font-size: 30px; /* Taille de l'icône burger */
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  font-family: 'Dosis', sans-serif;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  display: block;           /* Assure que toute la zone est cliquable */
  padding: 10px;
  text-decoration: none;
  color: black;
  white-space: nowrap;      /* Empêche le texte de se couper sur plusieurs lignes */
  min-width: 100px;         /* Largeur minimale ajustable */
}

.dropdown-content a img {
  margin-right: 10px;       /* Un peu d'espace entre l'image et le texte */
}

.dropdown-content a:hover {
  background-color: #ddd;   /* Style au survol */
}

.dropdown-content.show {
  display: block;
}

.dropdown:hover .dropdown-btn {
  background-color: #ddd;
}

@media screen and (min-width: 768px) {
  /* Survol pour les grands écrans (PC) */
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown-btn {
    cursor: pointer;
  }
}

/*================= FOOTER =================*/
.page-footer {  
  width: 100%;             /* Le footer prend toute la largeur de la page */
  box-sizing: border-box;
  background-color: #fff;   /* Fond blanc */
  padding: 5px;            /* Ajuster le padding */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Ombre pour démarquer le footer */
  text-align: left;         /* Contenu aligné à gauche */
  font-family: 'Dosis', sans-serif; /* Police Dosis */
  font-size: 14px;
  flex-shrink: 0;          /* Assure que le footer ne se rétrécit pas */
}

.page-footer * {
  line-height: normal; /* Réinitialise la hauteur de ligne */
}

.page-footer small {
  margin-left: 5px;        /* Espace entre le texte et le bord gauche */
  color: var(--main-black-color); /* Couleur noire principale */
}