/* ============================================================
   Menu mobile - www.fionalequec.fr
   Le menu du haut (nav) n'est visible qu'a partir de la taille
   tablette (classe Tailwind "hidden md:flex" deja presente sur le
   site). Ce fichier ajoute un bouton menu + un panneau deroulant
   pour les ecrans plus petits, sans toucher au code de l'application.
   ============================================================ */

.fionalequec-mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #2f3b2e;
  cursor: pointer;
  border-radius: 0.5rem;
}

.fionalequec-mobile-menu-btn:hover {
  background: rgba(107, 142, 111, 0.12);
}

.fionalequec-mobile-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-bottom: 1px solid #e7ddc9;
  box-shadow: 0 4px 10px rgba(47, 59, 46, 0.08);
  padding: 0.5rem 1.25rem 1rem;
}

.fionalequec-mobile-panel a {
  padding: 0.85rem 0;
  border-bottom: 1px solid #f2ede0;
  color: #3a362e;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
}

.fionalequec-mobile-panel a:last-child {
  border-bottom: none;
}

.fionalequec-mobile-panel a:active,
.fionalequec-mobile-panel a:hover {
  color: #c1633b;
}

/* Le bouton et le panneau ne servent que sous la taille tablette :
   au-dessus, le menu horizontal habituel du site est deja visible. */
@media (min-width: 768px) {
  .fionalequec-mobile-menu-btn {
    display: none !important;
  }
  .fionalequec-mobile-panel {
    display: none !important;
  }
}