/* Ajoutez ce code à votre fichier CSS principal (ex: app.css) */

/* 1. Style initial du menu mobile : il est caché sur la droite */
.mobile-menu-custom {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

/* 2. Quand la checkbox est cochée, le menu apparaît (il glisse depuis la droite) */
#nav-check:checked ~ .mobile-menu-custom {
    transform: translateX(0);
}

/* 3. Style initial de l'overlay : il est invisible et non cliquable */
.mobile-menu-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

/* 4. Quand la checkbox est cochée, l'overlay devient visible et cliquable */
#nav-check:checked ~ .mobile-menu-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* 5. (Bonus) Animation du bouton hamburger en croix de fermeture */
#nav-check:checked ~ nav .hamburger-custom span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

#nav-check:checked ~ nav .hamburger-custom span:nth-child(2) {
    opacity: 0;
}

#nav-check:checked ~ nav .hamburger-custom span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.hamburger-custom span {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* supprimer ► sur safari */
summary::-webkit-details-marker {
  display: none;
}

/* Style pour les résultats de recherche de ville */
#city-results .result-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

#city-results .result-item:last-child {
    border-bottom: none;
}

#city-results .result-item:hover {
    background-color: #eff6ff; /* blue-50 */
}

#city-results .result-item .city-name {
    font-weight: 600; /* semibold */
    color: #1f2937; /* gray-800 */
}

#city-results .result-item .postal-code {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* gray-500 */
    margin-left: 8px;
}