:root { --main: #2c3e50; --blue: #3498db; --bg: #f8f9fa; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; color: #333; line-height: 1.5; }

/* Nouveau style du Header avec image */
header { 
    background: white; 
    text-align: center; 
    padding: 0; /* On enlève le padding pour que l'image touche les bords */
    margin-top: 40px; /* Conserve votre espace en haut */
    width: 100%; /* Force le conteneur à prendre toute la largeur */
}

.header-banner {
    width: 100%; /* L'image s'étire sur 100% de la largeur disponible */
    max-width: 100%; /* On retire toute limite de pixels (comme le 800px précédent) */
    height: auto; /* Garde les proportions de l'image */
    display: block; /* Supprime l'espace vide sous l'image */
    margin: 0;
}

/* Cache visuellement le texte tout en restant lisible par Google */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#intro {
    padding-bottom: 10px; /* Réduit l'espace en bas de la section d'introduction */
}
#pourquoi {
    padding-top: 0; /* Enlève l'espace en haut de la section "Pourquoi" */
}
section { padding: 3rem 10%; }
.bg-light { background: var(--bg); }
h2 { color: var(--main); border-bottom: 2px solid var(--blue); display: inline-block; margin-bottom: 20px; }


#quand-mediation {
    padding-top: 0; /* Aligne parfaitement la section sous la précédente */
}
/* --- Styles de l'intro --- */
.titre-tension {
    font-family: 'Bradley Hand', 'Apple Chancery', cursive;
    font-size: 24px;
    display: block;
    margin-bottom: 15px;
    color: var(--main);
}

.intro-text p {
    font-family: 'Avenir', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
}

/* --- Section Démarche (comme sur la capture) --- */
.fond-bleu-clair {
    background-color: #e5edf5; /* Le fond bleu très clair de l'image */
    padding: 40px 10%;
    margin-bottom: 40px;
}

.liste-demarche {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espace entre chaque ligne */
    margin-top: 30px;
}

.demarche-item {
    display: flex;
    align-items: center; /* Aligne le texte au centre par rapport à l'icône */
    gap: 20px; /* Espace entre l'icône et le texte */
}

.demarche-item p {
    font-family: 'Avenir', sans-serif;
    font-size: 16px;
    color: #000;
    margin: 0; /* Enlève la marge par défaut pour un alignement parfait */
}

/* Base pour toutes les icônes */
.icone {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 35px;
    flex-shrink: 0; /* Empêche l'icône de s'écraser si le texte est long */
}

/* Couleurs et styles spécifiques pour imiter vos icônes */
.icone-info {
    background-color: #2e86ab; /* Bleu foncé */
    color: white;
    border-radius: 60%; /* Fait un rond */
    font-family: Georgia, serif;
    font-weight: bold;
    font-size: 26px;
    font-style: italic;
}

.icone-horloge {
    color: #e67e22; /* Orange */
}

.icone-balance {
    color: #d81b60; /* Rose fuschia */
}

.icone-euro {
    color: #003366; /* Bleu très sombre */
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    font-size: 45px;
}

/* --- Carte --- */

#trouver-service {
    padding: 40px 10%;
    background-color: white;
}

.map-container {
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden; /* Pour que les bords de l'iframe soient arrondis */
}

/* On s'assure que grid-assos est bien défini pour la liste */
.grid-assos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
#map { 
    height: 450px; 
    width: 100%; 
    border-radius: 12px; 
    margin: 30px 0; 
    border: 1px solid #ddd; 
    z-index: 1; /* Évite que la carte passe par-dessus d'autres éléments */
}
/* --- Styles pour les marqueurs numérotés sur la carte --- */
.custom-number-icon {
    background: transparent;
    border: none;
}

.number-marker {
    background-color: var(--blue); /* Utilise votre couleur bleue */
    color: white;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    text-align: center;
    line-height: 26px; /* Centre le texte verticalement */
    font-weight: bold;
    font-size: 14px;
    width: 30px;
    height: 30px;
    display: block;
}

/* Petit style pour le numéro dans la liste en dessous */
.asso-num {
    background-color: var(--blue);
    color: white;
    border-radius: 50%;
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    margin-right: 8px;
}

/* --- Section Partenaires Institutionnels --- */
#partenaires-institutionnels {
    text-align: center;
    padding: 40px 10%;
    background-color: white; /* S'assure que le fond met bien en valeur les logos */
    margin-bottom: 20px;
}

.logos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet aux logos de passer à la ligne sur les téléphones */
    gap: 50px; /* Espace entre chaque logo */
    margin-top: 30px;
}

.logos-grid a {
    display: inline-block;
    transition: transform 0.3s ease; /* Prépare l'animation fluide */
}

/* Effet de zoom léger au survol de la souris */
.logos-grid a:hover {
    transform: scale(1.1);
}

.logos-grid img {
    height: 70px; /* Hauteur fixe pour uniformiser les tailles. Ajustez si besoin ! */
    width: auto;
    max-width: 150px; /* Évite qu'un logo très large prenne trop de place */
    object-fit: contain;
}

/* --- Footer avec image pleine largeur --- */
footer {
    background: white; 
    text-align: center;
    padding: 0; 
    margin-top: 40px; 
    width: 100%; /* S'assure que le conteneur prend tout l'écran */
}

footer a {
    display: block; /* Permet au lien de prendre toute la largeur aussi */
}

.footer-banner {
    width: 100%; /* Force l'image à toucher les bords gauche et droit */
    max-width: 100%; /* On retire la limite de 800px */
    height: auto; /* Garde les bonnes proportions de l'image pour ne pas l'écraser */
    display: block;
    margin: 0; 
    transition: opacity 0.3s ease;
}

/* Léger effet au survol */
footer a:hover .footer-banner {
    opacity: 0.9;
}


/* --- Nouvelle Liste de Situations --- */
.situation-list {
    list-style: none; /* Enlève les puces par défaut */
    padding: 0;
    margin: 30px 0;
}

.situation-list li {
    margin-bottom: 20px;
    padding-left: 20px;
    border-left: 3px solid var(--blue); /* Petite barre colorée sur le côté pour le style */
}

.situation-title {
    font-family: 'Avenir', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--main);
    display: block;
}

.situation-list p {
    font-family: 'Avenir', sans-serif;
    font-size: 14px; /* Un peu plus petit pour la description */
    margin: 5px 0 0 0;
    color: #555;
}

/* Grilles */
.grid-cards, .grid-assos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.card, .asso-item { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.asso-item h4 { margin: 0; color: var(--blue); }

/* Liste */
.check-list { list-style: none; padding: 0; }
.check-list li::before { content: "✓ "; color: var(--blue); font-weight: bold; }

.logos img { height: 50px; margin: 20px; filter: grayscale(100%); transition: 0.3s; }
.logos img:hover { filter: grayscale(0); }

/* --- Style du Filtre Arrondissement --- */
.filter-box {
    background-color: var(--bg);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #ddd;
}

.filter-box label {
    margin-right: 15px;
    font-family: 'Avenir', sans-serif;
    color: var(--main);
}

.filter-box select {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid var(--blue);
    background-color: white;
    cursor: pointer;
    font-family: 'Avenir', sans-serif;
    outline: none;
}

.filter-box select:hover {
    border-color: var(--main);
}