/* IMPORTANT : Les variables CSS sont dans variables.css */
/* Ce fichier doit être chargé APRÈS variables.css */

body {
    font-family: var(--font-family-fallback);
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    color: var(--text-primary);
}

header {
    background-color: var(--text-primary);
    color: var(--bg-card);
    padding: 1rem 0;
    text-align: center;
}

h1, h2 {
    color: var(--text-primary);
}

main {
    padding: var(--spacing-lg);
    width: 90%;
    max-width: var(--width-container-3xl);
    margin: var(--spacing-lg) auto;
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--text-primary);
    color: var(--bg-card);
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: var(--spacing-lg);
}

/* Description and Photos */
.description {
    font-size: 1.1em;
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
}

.photos-container {
    display: flex;
    justify-content: center;
    gap: var(--gap-md);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

.photos-container img {
    max-width: 100%;
    height: var(--height-card-image);
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* Generic Item List for Regions, Departments, and Cities */
.item-list {
    list-style: none;
    padding: 0;
    max-width: var(--width-container-md);
    margin: var(--spacing-lg) auto;
}

.item-list li {
    background-color: var(--bg-muted);
    border: var(--border-width) solid var(--border-color-light);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-slow);
}

.item-list li a {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    color: var(--color-primary-hover);
    font-size: 1.2em;
}

.item-list li:hover {
    background-color: var(--bg-form-header);
}

/* Horizontal Item List */
.horizontal-item-list {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    justify-content: center; /* Center items horizontally */
    gap: var(--gap-sm); /* Space between items */
    max-width: 100%; /* Ensure it doesn't overflow */
}

.horizontal-item-list li {
    flex: 0 0 auto; /* Don't grow, don't shrink, base size auto */
    margin-bottom: 0; /* Remove vertical margin */
}

.horizontal-item-list li a {
    padding: var(--spacing-sm) var(--spacing-md); /* Adjust padding for smaller horizontal items */
    font-size: 1em; /* Adjust font size */
}

/* Search and Autocomplete */
.search-block {
    position: relative;
    width: 100%;
    max-width: var(--width-container-sm);
    margin: var(--spacing-lg) auto;
}

#city-search-input {
    width: 100%;
    padding: var(--spacing-sm);
    border: var(--border-width) solid var(--border-color-input);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-size: 1em;
}

.autocomplete-results-dropdown {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: var(--border-width) solid var(--border-color-input);
    border-top: none;
    background-color: var(--bg-card);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
    display: none; /* Hidden by default */
}

.autocomplete-item {
    padding: var(--spacing-sm);
    cursor: pointer;
    text-align: left;
}

.autocomplete-item:hover {
    background-color: var(--bg-form-header);
}

/* Alphabetical filter */
.alphabetical-filter {
    text-align: center;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.alpha-letter {
    /* Reset button default styles */
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 2px;
    border: var(--border-width) solid var(--border-color-input);
    border-radius: 4px;
    background-color: var(--color-alpha-bg);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.alpha-letter:hover {
    background-color: var(--color-alpha-hover);
}

.alpha-letter.active {
    background-color: var(--color-alpha-active-bg);
    color: var(--color-alpha-active-text);
    border-color: var(--color-alpha-active-bg);
}

/* Back links */