/* Réduction de tous les éléments de 20% (à 80% de leur taille originale) */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: transparent;
    padding: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    font-size: 12.8px; /* Réduit de 16px à 12.8px (80% de 16px) */
}

.container {
    max-width: 960px; /* Réduit de 1200px à 960px (80% de 1200px) */
    margin: 0 auto;
    background-color: #fff;
    padding: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    padding-top: 12px; /* Réduire le padding supérieur */
    border-radius: 4px; /* Réduit de 5px à 4px (80% de 5px) */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Réduit de 10px à 8px (80% de 10px) */
}

h1 {
    text-align: center;
    margin-bottom: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    color: #333;
    font-size: 22.4px; /* Réduit de 28px à 22.4px (80% de 28px) */
}

h2 {
    font-size: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    margin-bottom: 8px; /* Réduit de 10px à 8px (80% de 10px) */
    color: #333;
    padding-bottom: 6.4px; /* Réduit de 8px à 6.4px (80% de 8px) */
    border-bottom: 0.8px solid #ddd; /* Réduit de 1px à 0.8px (80% de 1px) */
}

.search-container {
    position: relative;
    margin-bottom: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    margin-top: 0; /* Supprimer la marge supérieure si elle existe */
    background-color: #f5f5f5;
    padding: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    border-radius: 3.2px; /* Réduit de 4px à 3.2px (80% de 4px) */
    box-shadow: 0 0.8px 2.4px rgba(0, 0, 0, 0.1); /* Réduit de 0 1px 3px à 0 0.8px 2.4px */
}

#communeSearch {
    width: 96%;
    padding: 9.6px; /* Réduit de 12px à 9.6px (80% de 12px) */
    font-size: 12.8px; /* Réduit de 16px à 12.8px (80% de 16px) */
    border: 0.8px solid #ddd; /* Réduit de 1px à 0.8px (80% de 1px) */
    border-radius: 3.2px; /* Réduit de 4px à 3.2px (80% de 4px) */
}

#communeSearch:focus {
    outline: none;
    border-color: #0a71a0;
    box-shadow: 0 0 0 1.6px rgba(10, 113, 160, 0.2); /* Réduit de 2px à 1.6px (80% de 2px) */
}

.commune-list {
    position: absolute;
    width: 100%;
    max-height: 240px; /* Réduit de 300px à 240px (80% de 300px) */
    overflow-y: auto;
    list-style-type: none;
    background-color: #fff;
    border: 0.8px solid #ddd; /* Réduit de 1px à 0.8px (80% de 1px) */
    border-top: none;
    border-radius: 0 0 3.2px 3.2px; /* Réduit de 4px à 3.2px (80% de 4px) */
    display: none;
    z-index: 10;
    box-shadow: 0 3.2px 6.4px rgba(0, 0, 0, 0.1); /* Réduit de 4px 8px à 3.2px 6.4px */
}

.commune-list li {
    padding: 9.6px 12px; /* Réduit de 12px 15px à 9.6px 12px */
    cursor: pointer;
    border-bottom: 0.8px solid #eee; /* Réduit de 1px à 0.8px (80% de 1px) */
    transition: background-color 0.2s;
}

.commune-list li:hover, .commune-list li.active {
    background-color: #f5f5f5;
}

.selected-commune {
    background-color: #f5f5f5;
    border-radius: 3.2px; /* Réduit de 4px à 3.2px (80% de 4px) */
    padding: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    padding-top: 12px; /* Réduire le padding supérieur si nécessaire */
    margin-top: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    box-shadow: 0 0.8px 2.4px rgba(0, 0, 0, 0.1); /* Réduit de 0 1px 3px à 0 0.8px 2.4px */
}

.highlight {
    font-weight: bold;
    color: #0a71a0;
}

.zone-info {
    margin-top: 12px; /* Réduit de 15px à 12px (80% de 15px) */
    padding: 4px; /* Réduit de 5px à 4px (80% de 5px) */
}

.zone-badge {
    display: inline-block;
    padding: 3.2px 6.4px; /* Réduit de 4px 8px à 3.2px 6.4px */
    border-radius: 2.4px; /* Réduit de 3px à 2.4px (80% de 3px) */
    margin-right: 4px; /* Réduit de 5px à 4px (80% de 5px) */
    font-size: 11.2px; /* Réduit de 14px à 11.2px (80% de 14px) */
    font-weight: bold;
    color: white;
}

.zone-1 { background-color: #4CAF50; }
.zone-2 { background-color: #2196F3; }
.zone-3 { background-color: #FF9800; }
.zone-4 { background-color: #F44336; }

#selectedCommune {
    margin-top: 0; /* Supprimer la marge supérieure si elle existe */
}

/* Responsive design - également réduit de 20% */
@media (max-width: 614.4px) { /* Réduit de 768px à 614.4px (80% de 768px) */
    .container {
        padding: 12px; /* Réduit de 15px à 12px (80% de 15px) */
    }
    
    h1 {
        font-size: 19.2px; /* Réduit de 24px à 19.2px (80% de 24px) */
    }
    
    #communeSearch {
        padding: 8px; /* Réduit de 10px à 8px (80% de 10px) */
    }
    
    .commune-list {
        max-height: 200px; /* Réduit de 250px à 200px (80% de 250px) */
    }
}

@media (max-width: 384px) { /* Réduit de 480px à 384px (80% de 480px) */
    .container {
        padding: 8px; /* Réduit de 10px à 8px (80% de 10px) */
    }
    
    h1 {
        font-size: 16px; /* Réduit de 20px à 16px (80% de 20px) */
    }
}

/* Style pour le canton dans les résultats de recherche */
.canton {
    color: #666;
    font-size: 0.96em; /* Réduit de 1em à 0.96em (80% de 1em) */
    font-weight: normal;
}