:root {
    --primary: #0070f3; /* Bleu "Action" propre manger jai faim jai faim  */
    --bg-page: #ffffff; /* Fond blanc pur */
    --bg-card: #f8f9fa; /* Gris très pâle pour les sections */
    --text-main: #1a1a1a; /* Noir doux pour la lecture */
    --text-muted: #666666; /* Gris pour les infos secondaires */
    --alert-red: #e00; 
    --success-green: #0070f3; /* On utilise le bleu ou vert pour le positif */
    --border: #eaeaea; /* Bordures fines et discrètes */
}
html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.5;
}

ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #00315d;
  border: 5px solid #00315d;
  border-radius:20px;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding:16px 16px;
  text-decoration: none;
   border: 1px solid #00315d;
  border-radius:20px;
	transition: width 2s, height 1s, background-color 0.5s;
  
  
}

ul li a:hover {
  background-color: #0070f3;

}

.menulien {
	
	color:white;
}



.map-toolbar {
    display: flex;
    flex-direction: row; 
    gap: 10px;
}


/* =========================================
   1. L'ÉTAT NORMAL DE LA CARTE (LA FORTERESSE)
   ========================================= */
.map-view {
    position: relative; /* Enferme le menu, naturellement */
    overflow: hidden;   /* Coupe ce qui dépasse */
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 10px; /* Les jolis coins ronds quand elle est petite */
}
/* 🚨 L'ASTUCE UX : On nettoie la petite carte d'aperçu pour tous les écrans ! */
.map-view:not(.map-fullscreen) .map-top-controls,
.map-view:not(.map-fullscreen) .btn-sidebar-toggle,
.map-view:not(.map-fullscreen) .map-live-gadget {
    display: none !important;
}




/* La taille normale de la carte */
#map {
    width: 100%;
    height: 500px; /* Ajuste cette hauteur selon ce que tu avais avant */
    margin: 0;
    padding: 0;
    border: none;
}
.map-actions {
    position: relative; 
    display: flex; 
    justify-content: center; 
    gap: 15px;
    margin-top: -25px; 
    z-index: 1001 !important; /* TRÈS IMPORTANT : C'est ce qui rend le clic possible par-dessus la carte */
    pointer-events: auto;
}

/* =========================================
   BOUTONS D'ACTION SUR LA CARTE (Version "Mordant")
   ========================================= */
.btn-action {
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700; /* Texte plus gras */
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0, 49, 93, 0.15); /* Ombre plus assumée */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animation super fluide */
    display: flex;
    align-items: center;
    gap: 8px; /* Bel espace entre l'emoji et le texte */
}

/* Le bouton "Me localiser" (Blanc) */
#btn-locate {
    background-color: #ffffff;
    color: #00315d;
    border: 3px solid #d1d9e6; /* Bordure nette pour le détacher du fond */
}

#btn-locate:hover {
    border-color: #0070f3; /* La bordure s'allume en bleu vif au survol */
    color: #0070f3;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 112, 243, 0.15);
}


.badge-live {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1000;
}


/* Le bouton de déclenchement */
.accordion-trigger {
    width: 100%;
    background: white;
    border: 1px solid var(--border);
    padding: 15px 25px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Le bouton qui contrôle l'espace vide */
.btn-toggle-extra {
    background: none;
    border: 1px dashed var(--primary); /* Pointillé pour montrer que c'est une zone en dev */
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.btn-toggle-extra:hover {
    background: #eef6ff;
}

/* La zone vide qui se compresse  jai faimmmmmmmmmm */
.extra-content {
    max-height: 0; /* Fermé par défaut */
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s;
    opacity: 0;
    width: 90%;
    max-width: 1200px;
}

/* Quand on clique, on déploie */
.extra-content.open {
    max-height: 300px; /* On lui donne de la place */
    opacity: 1;
    margin-top: 20px;
}

.placeholder-stats {
    background: white;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
}

.accordion-trigger:hover {
    background: #f8f9fa;
    border-color: var(--primary);
}

/* L'accordéon lui-même */
.accordion-content {
    max-height: 0; /* COMPRESSÉ PAR DÉFAUT */
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease;
    opacity: 0;
}

/* État quand l'accordéon est ouvert */
.accordion-content.is-open {
    max-height: 2000px; /* Une valeur assez grande pour tout montrer */
    opacity: 1;
    margin-top: 20px;
}

/* Rotation de la flèche */
.accordion-trigger .arrow {
    transition: transform 0.3s;
}
.accordion-trigger.is-active .arrow {
    transform: rotate(180deg);
}

#map-search-input {
    border: none;
    background: transparent;
    padding: 8px 15px;
    flex-grow: 1;
    font-size: 0.9rem;
    outline: none;
}

#btn-search-go {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: transform 0.2s;
}

#btn-search-go:hover { transform: scale(1.1); 

}



/* Alignement des coordonnées sur une seule ligne */
.coord-inputs {
    display: flex;
    gap: 10px;
}

.coord-inputs input {
    flex: 1;
    background: #f0f0f0; /* Gris pour indiquer que c'est automatique */
    cursor: not-allowed;
}

/* Style pour le texte d'aide sous les coordonnées */
.helper-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 5px;
    font-style: italic;
	
}

/* --- BANDEAU LÉGAL (Micro-banner discret) --- */
.top-banner {
    background-color: #f4f7f9; /* Un gris-bleu très doux, presque invisible */
    color: #888; /* Un texte gris clair, pas agressif */
    text-align: center;
    padding: 6px 15px; /* Très fin, juste assez pour lire */
    font-size: 0.75rem; /* Tout petit texte */
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eaeaea; /* Petite ligne pour séparer du menu */
}

/* Enlève la marge par défaut du paragraphe pour gagner de la place */
.top-banner p {
    margin: 0;
}

/* =========================================
   NAVIGATION (NAVBAR MODERNE)
   ========================================= */

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%; /* 10px au lieu de 15px pour l'amincir ! */
    background: rgba(255, 255, 255, 0.90); /* Légèrement transparent */
    backdrop-filter: blur(10px); /* Effet verre givré (Glassmorphism) */
	
    position: sticky;
    top: 0;
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10); /* Ombre très douce */
}
/* --- LE LOGO --- */
.logo {
    font-weight: 900; /* Très gras */
    color: var(--primary);
    font-size: 1.6rem; /* Plus gros ! */
	text-decoration:none;
    letter-spacing: -0.5px; /* Rapproche un peu les lettres pour faire "Logo" */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Optionnel : un petit effet quand on passe la souris sur le logo ! */
.logo:hover {
    opacity: 0.8; /* Rend le logo légèrement transparent au survol pour montrer qu'il est cliquable */
}

/* --- LES LIENS --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 30px; /* Espace aéré entre les liens */
}
/* =========================================
   LIENS DU MENU (Effet Ligne Animée)
   ========================================= */
.nav-item {
    position: relative; /* Nécessaire pour l'animation */
    text-decoration: none !important; /* On enlève le vieux souligné */
    color: #00315d; /* Ton beau bleu foncé institutionnel */
    font-weight: 600;
    font-size: 1.05rem;
    padding: 5px 0;
    transition: color 0.3s ease;
}

/* L'astuce : On crée une ligne invisible sous le texte */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Juste en dessous du texte */
    left: 50%; /* On la place au centre */
    transform: translateX(-50%); /* Ajustement parfait au centre */
    width: 0; /* Invisible au départ ! */
    height: 3px; /* Épaisseur de la ligne */
    background-color: var(--primary); /* Ton bleu vif */
    border-radius: 5px; /* Bouts ronds */
    transition: width 0.3s ease; /* L'animation fluide */
}

/* L'effet au survol de la souris */
.nav-item:hover {
    color: var(--primary); /* Le texte devient bleu vif */
}

/* La ligne grandit de 0% à 100% ! */
.nav-item:hover::after {
    width: 100%;
}


/* =========================================
   LE GROS BOUTON ROUGE (Un peu plus petit !)
   ========================================= */
.nav-btn-report {
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 20px; /* Un peu moins rond */
    padding: 8px 18px; /* Plus petit ! (était 12px 24px) */
    font-size: 0.9rem; /* Texte légèrement plus petit */
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* 3D réduite à 4px au lieu de 6px */
    box-shadow: 
        inset 0px 1px 0px rgba(255,255,255,0.4), 
        0px 4px 0px #c0392b,                     
        0px 6px 8px rgba(0,0,0,0.3);            
        
    transition: all 0.1s ease;
    align-self: center; 
    margin-top: -2px; /* Ajusté pour la nouvelle épaisseur */
}

.nav-btn-report:hover {
    background-color: #ff5e4d;
}

.nav-btn-report:active {
    transform: translateY(3px); /* Descend un peu moins profond */
    box-shadow: 
        inset 0px 1px 0px rgba(255,255,255,0.4), 
        0px 1px 0px #c0392b,                     
        0px 2px 3px rgba(0,0,0,0.2);             
}

.dashboard-container {
    padding: 15px 8% 40px 8%; /* 15px en haut au lieu de 40px ! */
    max-width: 1400px;
    margin: 0 auto;
}
#map {
    height: 625px; /* OU la hauteur que tu veux */
    width: 100%;
    border-radius: 12px;
    position: relative; /* Très important pour Leaflet */
}

/* Carte Layout (Le look "Apple Maps") */
.map-placeholder {
    background-color: #fdfdfd;
    background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
    background-size: 20px 20px; /* Petit quadrillage de fond */
    border: 1px dashed #ccc; /* Bordure pointillée pour montrer que c'est une zone à remplir */
    min-height: 400px;
}

/* Le petit bouton X en haut de la carte */
.map-control-x {
    background: white;
    color: #333;
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.badge-live {
    background: white;
    color: var(--text-main);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center; 
	margin-bottom: 20px;
}

.section-header h2 { /*criss de titre en haut des carte d'article */
    margin: 0;
    color: var(--primary); 
}


/*   grille d'info en un deuxième îlot */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    margin-top: 40px;
    background: white; /* Fond blanc comme la carte */
    padding: 30px;
    border-radius: 30px; /* Même arrondi que la map ! */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--border);
}

/* On stylise les cochonerie internes */
.news-column, .alerts-column {
    padding: 10px;
}
h1, h2, h3 {
    color: #1a1a1a;
    font-weight: 800; 
    letter-spacing: -0.03em; /* Rapproche les lettres pour un look compact */
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 1.8rem; /* Plus gros que la normale */
    
    padding-left: 15px;
}

/* Cartes Actualités & Alertes */
.card, .alert-item {
    background: white;
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: transform 0.2s ease;
}

/* Animation douce pour tout le site */
* {
    transition: all 0.2s ease-in-out;
}

/* Effet de "soulèvement" quand on survole une nouvelle ou un avis */
.card:hover, .alert-item:hover, .msg-bubble:hover {
    transform: translateY(-3px); /* Ça lève un petit peu */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Ombre plus profonde */
    border-color: var(--primary); /* La bordure devient bleue */
}

.alert-item {
    display: flex;
    gap: 15px;
    background: var(--bg-card);
    border: none;
}

.alert-item.high {
    background: #fff5f5;
    border: 1px solid #feb2b2;
}

.alert-item.high .status { color: var(--alert-red); }

/* Boutons "Fintech" jai effacer .btn-action si ca chier cest pt icic lol ...  */
  .btn-report {
    padding: 14px 24px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-main);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

/* Le bouton "Soumettre" (Bleu) */
.btn-action.primary {
    /* Un magnifique dégradé bleu pour donner du relief */
    background: linear-gradient(135deg, #0070f3 0%, #005bb5 100%);
    color: white;
    border: 2px solid transparent;
}

.btn-action.primary:hover {
    box-shadow: 0 8px 25px rgba(0, 112, 243, 0.3);
	border: 2px solid white;
    transform: translateY(-3px);
}

/* Animation "Radar" quand il cherche la position ! */
@keyframes radar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 112, 243, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 112, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 112, 243, 0); }
}

.btn-action.is-searching {
    border-color: #0070f3 !important;
    color: #0070f3 !important;
    animation: radar-pulse 1.5s infinite; /* Fait pulser le bouton */
}

/* Le bouton d'alerte (Jaune) */
.btn-warning {
    background-color: #ffcc00; /* Jaune signalisation */
    color: #332b00; /* Texte foncé pour le contraste */
    border: none;
    font-weight: bold;
    box-shadow: 0 4px 14px rgba(255, 204, 0, 0.4);
    transition: transform 0.2s;
}

.btn-warning:hover {
    transform: scale(1.05); /* Petit effet de zoom au survol */
    background-color: #ffdb4d;
}

/* Le bouton de validation (Bleu) */
.btn-submit {
    background-color: #0070f3; /* Ton bleu pro */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
/* Le bouton Signaler (Jaune d'avertissement) */
.btn-report.warning {
    background-color: #ffcc00;
    color: #332b00;
    border: none;
    padding: 16px;
    font-weight: 700;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.2);
    transition: transform 0.2s;
}

.btn-report.warning:hover {
    transform: translateY(-2px);
    background-color: #ffdb4d;
}


/* =========================================
   WIDGETS DE LA COLONNE DE DROITE
   ========================================= */

.widget-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.widget-header h3 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Indicateur d'état (Le petit point clignotant) */
.status-indicator {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.green {
    background-color: var(--success-green, #2ecc71);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Liste de liens rapides */
.widget-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-links li {
    border-bottom: 1px solid #f0f0f0;
}

.widget-links li:last-child {
    border-bottom: none;
}

.widget-links a {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text-muted);
    padding: 12px 0;
    font-size: 0.9rem;
    transition: color 0.2s, padding-left 0.2s;
}

.widget-links a:hover {
    color: var(--primary);
    padding-left: 5px; /* Petit effet de glissement au survol */
}

.widget-links a span {
    color: #ccc;
    font-size: 0.8rem;
}








/* La fenêtre Modale (L'arrière-plan flou) */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px); 
    z-index: 9999; /* BAM ! Le formulaire passe au-dessus de tout le reste */
    justify-content: center;
    align-items: center;
}

/* Le contenu du formulaire */
.modal-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    width: 100%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.close-modal {
    position: absolute;
    top: 20px; right: 20px;
    background: none; border: none; font-size: 1.2rem; cursor: pointer;
}

/* Style des champs du formulaire */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #f9f9f9;
    font-family: inherit;
}

.btn-submit {
    background: #0070f3; /* Ton bleu */
    color: white;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.community-feed {
    margin-top: 30px;
    border-top: 1px solid #eaeaea;
    padding-top: 20px;
}

.community-feed h3 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.msg-bubble {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}

.msg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.user-name { font-weight: bold; color: #333; }
.msg-time { color: #999; font-size: 0.75rem; }

.verified-tag {
    display: block;
    margin-top: 8px;
    color: #0070f3; /* Ton bleu */
    font-size: 0.7rem;
    font-weight: bold;
}

.main-footer {
    background: #f9f9f9;
    border-top: 1px solid #eaeaea;
    padding: 60px 8% 30px;
    margin-top: 60px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.footer-logo {
    font-weight: 800;
    color: var(--primary);
}

.footer-logo span {
    display: block;
    font-size: 0.75rem;
    color: #999;
    font-weight: 400;
}

.footer-links a {
    text-decoration: none;
    color: #666;
    margin-left: 20px;
    font-size: 0.9rem;
}

.footer-bottom {
    text-align: center;
    font-size: 0.8rem;
    color: #bbb;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

#filter-city {
    appearance: none; 
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 10px 40px 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    transition: all 0.2s ease;
}

#filter-city:hover {
    border-color: var(--primary);
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* =========================================
   SECTION ACTUALITÉS (CARTES DE BLOGUE)
   ========================================= */

/* Grille pour que les articles se placent côte à côte s'il y a de la place */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 25px;
}

/* Le design de la carte (Effet Verre Givré) */
.news-card {
    background: rgba(255, 255, 255, 0.70); /* Blanc semi-transparent */
    backdrop-filter: blur(12px); /* L'effet flou magique */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9); /* Contour lumineux */
    border-radius: 20px;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Ombre très douce */
}

/* L'effet magique au survol de la souris */
.news-card:hover {
    transform: translateY(-8px); /* La carte se soulève */
    background: rgba(255, 255, 255, 0.90); /* Devient un peu moins transparente */
    box-shadow: 0 15px 30px rgba(0, 112, 243, 0.15); /* Ombre bleutée plus forte */
    border: 1px solid rgba(0, 112, 243, 0.3); /* Le contour prend une teinte bleue */
}

/* Les "fausses images" en attendant d'en mettre des vraies */
.news-image {
    height: 180px;
    width: 100%;
}
.img-infra { background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%); }
.img-sante { background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); }

/* Le contenu texte */
.news-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pousse le lien "Lire la suite" vers le bas */
}

/* Les petites étiquettes (Tags) en haut du titre */
.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.8rem;
}

.news-tag {
    background: #eef2f5;
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-tag.alert {
    background: #ffe5e5;
    color: #d32f2f; /* Rouge alerte */
}

.news-date {
    color: var(--text-muted);
    font-weight: 500;
}

/* Typographie de la carte */
.news-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    color: var(--text-main);
    line-height: 1.4;
}

.news-card p {
    margin: 0 0 20px 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Le lien "Lire la suite" */
.read-more {
    margin-top: auto; /* S'assure de toujours rester en bas de la carte */
    text-decoration: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.read-more:hover {
    color: #005bb5;
}

/* Le bouton "Voir tous les articles" en bas de la colonne */
.btn-view-all {
    display: block;
    text-align: center;
    padding: 15px;
    background: #f4f7f9;
    color: var(--text-main);
    text-decoration: none;
    border-radius: 15px;
    font-weight: 700;
    transition: background 0.3s, color 0.3s;
}

.btn-view-all:hover {
    background: var(--primary);
    color: white;
}

/* =========================================
   ICÔNES DE CARTE (100% LOCAL & CSS)
   ========================================= */

/* La base du cercle pour nos icônes */
.custom-pin {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: 3px solid white; /* Contour blanc style Apple Maps */
}

/* Couleurs selon le type */
.pin-abreuvoir { background-color: var(--primary); }
.pin-bouteille { background-color: var(--success-green, #2ecc71); }
.pin-alerte { 
    background-color: var(--alert-red); 
    animation: alert-pulse 1.5s infinite; /* Fait clignoter l'alerte ! */
}

/* Animation de pulsation pour les alertes */
@keyframes alert-pulse {
    0% { box-shadow: 0 0 0 0 rgba(238, 0, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(238, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(238, 0, 0, 0); }
}

/* =========================================
   NOUVEAU STYLE DES POP-UPS (Style "Carte Partenaire")
   ========================================= */

/* 1. La bulle principale (On enlève TOUTES les bordures de Leaflet) */
.leaflet-popup-content-wrapper {
    background: transparent !important; /* On met le fond transparent */
    box-shadow: none !important; /* On enlève l'ombre de base */
    padding: 0 !important; 
    border: none !important; 
    border-radius: 0 !important;
}

/* On enlève les marges de Leaflet */
.leaflet-popup-content {
    margin: 0 !important;
    width: 240px !important; 
}

/* 2. NOTRE vraie bulle personnalisée avec les bordures de couleurs ! */
.custom-popup {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 49, 93, 0.15);
    overflow: hidden;
    border-top: 5px solid var(--primary); /* BLEU PAR DÉFAUT (Fontaines) */
}

/* 🟢 Le thème Vert (Commerces Participants) */
.custom-popup.theme-commerce {
    border-top-color: #218838;
}

/* ⚪ Le thème Gris (Commodités/Toilettes) */
.custom-popup.theme-toilette {
    border-top-color: #607d8b; 
}

/* 🔴 Le thème Rouge (Alertes) */
.custom-popup.theme-alerte {
    border-top-color: #dc3545; 
    background-color: #fff9fa; /* Garde le fond légèrement rosé */
}

/* 🟡 Le thème Jaune (Travaux / Avertissements) */
.custom-popup.theme-travaux {
    border-top: 5px solid #ffc107 !important;
    background-color: #fffdf5; /* Un fond très très légèrement jaune */
}

/* 2. Le petit triangle en bas */
.leaflet-popup-tip {
    background: #ffffff !important;
    box-shadow: none !important;
}

/* 3. Croix de fermeture (Style App avec Cercle) */
.leaflet-popup-close-button {
    color: #ffffff !important; /* Le petit X en blanc */
    background-color: #00315d !important; /* Le fond du cercle en bleu */
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important; /* Centre parfaitement le X verticalement */
    text-align: center !important;
    border-radius: 50% !important; /* Fait un cercle parfait */
    padding: 0 !important; /* On efface le vieux padding */
    top: 10px !important; /* On le descend de 10px du plafond */
    right: 10px !important; /* On l'éloigne de 10px du mur droit */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; /* Petite ombre de relief */
    font-size: 16px !important;
    font-weight: bold !important;
    z-index: 10 !important; /* S'assure qu'il passe par-dessus les étiquettes */
    transition: background-color 0.2s, transform 0.2s !important;
}

/* Le petit effet wow quand on passe la souris */
.leaflet-popup-close-button:hover {
    background-color: #e74c3c !important; /* Devient rouge alerte ! */
    transform: scale(1.1);
}

/* --- L'intérieur de notre nouvelle bulle --- */
.custom-popup-header {
    background-color: #f8fafd;
    padding: 15px 35px 10px 15px;
    border-bottom: 1px solid #eef2f6;
    text-align: center;
}

.popup-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.partner-badge { background-color: #e8f0fe; color: #00315d; border: 1px solid #d2e3fc; }
.water-badge { background-color: #e6f4ea; color: #1e8e3e; border: 1px solid #ceead6; }

.custom-popup-title {
    color: #00315d;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.popup-stars {
    color: #ffc107;
    font-size: 0.95rem;
    margin-top: 5px;
}
.popup-stars span { color: #666; font-size: 0.8rem; margin-left: 3px; font-weight: bold; }

.custom-popup-body {
    padding: 15px;
    text-align: center;
}

.popup-description {
    color: #555;
    font-size: 0.85rem;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

/* --- Les boutons dans le popup --- */
.popup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.popup-btn {
    display: block;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}

.itinerary-btn {
    background-color: #f0f0f0;
    color: #333 !important;
    border: 1px solid #d1d1d1;
}
.itinerary-btn:hover { background-color: #e0e0e0; transform: translateY(-1px); }

.review-btn {
    background-color: #00315d;
    color: white !important;
}
.review-btn:hover { background-color: #004a8c; transform: translateY(-1px); }

/* Bouton de signalement d'un bris dans le popup */
.warning-btn {
    background-color: #ffffff;
    color: #dc3545 !important;
    border: 1px solid #dc3545;
    margin-top: 5px;
}

.warning-btn:hover {
    background-color: #fff5f5;
    transform: translateY(-1px);
}




/* =========================================
   TITRE D'ACCROCHE (HERO) - Version amincie
   ========================================= */
.hero-section {
    text-align: center;
    margin-bottom: 10px; /* On réduit l'espace sous le texte */
    padding: 0; /* On enlève le padding vertical inutile */
}

.hero-section h1 {
    font-size: 2.2rem;   /* Un poil plus petit (optionnel) */
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 5px 0;   /* Réduit l'espace sous le titre de 10px à 5px */
    letter-spacing: -1px;
}

.hero-section .highlight {
    color: var(--primary); /* Le mot "en temps réel" en bleu ! */
}

.hero-section p {
    font-size: 1.05rem;  /* Légèrement réduit */
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* =========================================
   PIED DE PAGE (FOOTER)
   ========================================= */
.main-footer {
    background-color: white;
    border-top: 1px solid var(--border);
    padding: 60px 5% 20px;
    margin-top: 60px; /* Sépare bien le footer du reste du site */
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 10px;
}

.footer-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 20px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid var(--border);
    padding-top: 20px;
    color: #999;
    font-size: 0.85rem;
}

/* =========================================
   STYLE DES CLUSTERS (REMPLACEMENT DES COULEURS PAR DÉFAUT)
   ========================================= */

/* 1. Petits groupes (Moins de 10 fontaines) - Bleu très clair */
.marker-cluster-small {
    background-color: rgba(100, 160, 255, 0.4) !important;
}
.marker-cluster-small div {
    background-color: rgba(0, 112, 243, 0.8) !important; /* Ton var(--primary) */
    color: white !important;
    font-weight: bold;
}

/* 2. Groupes moyens (10 à 99 fontaines) - Bleu moyen */
.marker-cluster-medium {
    background-color: rgba(0, 112, 243, 0.4) !important;
}
.marker-cluster-medium div {
    background-color: rgba(0, 80, 180, 0.9) !important; 
    color: white !important;
    font-weight: bold;
}

/* 3. Grands groupes (100+ fontaines) - Bleu marin intense */
.marker-cluster-large {
    background-color: rgba(0, 60, 140, 0.4) !important;
}
.marker-cluster-large div {
    background-color: rgba(0, 40, 100, 0.9) !important; 
    color: white !important;
    font-weight: bold;
}

/* S'assurer que le texte est bien centré dans toutes les bulles */
.marker-cluster div {
    font-family: inherit;
    border-radius: 50%;
}
/* =========================================
   LA BARRE DE MENU SUPÉRIEURE (Intégrée)
   ========================================= */
.map-top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	
	margin-bottom: 8px; /* 8px au lieu de 15px */
    gap: 15px;
    padding: 0 10px; /* Laisse respirer les boutons sur les côtés */
    box-sizing: border-box;
}

/* =========================================
   LA BARRE DE RECHERCHE (Effet Lueur)
   ========================================= */
.map-search-container {
    display: flex;
    background: #ffffff;
    padding: 6px 6px 6px 20px; 
    border-radius: 30px;
	width: calc(100% - 140px) !important; 
        margin-left: auto !important; /* Pousse la barre à droite */
        margin-right: 20px !important; /* Petite marge de sécurité */
        box-sizing: border-box;
	
    
    /* Ombre externe subtile + Ombre interne légère pour la profondeur */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03), inset 0 2px 4px rgba(0,0,0,0.02); 
    border: 1px solid #eaeaea;
    
    transition: all 0.3s ease;
}

/* Le petit détail pro : Quand on clique dans la recherche, la boîte s'allume en bleu ! */
.map-search-container:focus-within {
    border-color: #0070f3; /* Ton bleu */
    box-shadow: 0 4px 20px rgba(0, 112, 243, 0.15); 
    transform: translateY(-1px);
}


/* =========================================
   BOUTONS DE FILTRES : EFFET "FLOTTANT DOUX"
   ========================================= */

/* État inactif (Désélectionné) : Blanc, propre, belle ombre */
.tool-btn {
    background-color: #ffffff;
    color: #666666; /* Gris foncé doux */
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Voici la belle ombre qui donne l'effet flottant sur la carte */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    transition: all 0.3s ease;
}

/* L'animation quand on passe la souris */
.tool-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px); /* Se soulève doucement */
}

/* 2. La petite case VIDE par défaut */
.tool-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid #cbd5e1; /* Belle bordure grise */
    border-radius: 4px;
    background-color: white;
    transition: all 0.2s ease; /* Animation douce */
}

/* 3. La case COCHÉE quand le bouton a la classe .active ! */
.tool-btn.active::before {
    content: '✔'; /* Le petit crochet */
    background-color: var(--primary); /* Ton bleu officiel */
    border-color: var(--primary);
    color: white;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
}

/* =========================================
   ÉTATS ACTIFS (Le fameux "Soft Tint")
   ========================================= */

/* Bleu pour Abreuvoir - Fond bleuté très pâle, texte bleu vif */
.tool-btn.active[data-type="Abreuvoir"] {
    background-color: #e8f0fe; 
    color: #1a73e8; 
    border: 1px solid #d2e3fc;
}

/* Vert pour Bouteille/Commerces - Fond menthe , texte vert */
.tool-btn.active[data-type="Bouteille"] {
    background-color: #e6f4ea; 
    color: #1e8e3e; 
    border: 1px solid #ceead6;
}

/* Rouge doux pour Alerte/Avis - Fond rosé pâle, texte rouge */
.tool-btn.active[data-type="Alerte"] {
    background-color: #fce8e6; 
    color: #d93025; 
    border: 1px solid #fad2cf;
}

/* =========================================
   ANIMATIONS DES BOUTONS DE FILTRES
   ========================================= */

/* 1. Effet de clic physique (Le bouton s'écrase légèrement) */
.tool-btn:active {
    transform: scale(0.95) translateY(0) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* 2. On prépare l'icône (l'emoji) pour l'animation */
.tool-btn i {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Courbe de rebond mathématique */
}

/* 3. Le petit bond de l'emoji quand on passe la souris sur le bouton ! */
.tool-btn:hover i {
    transform: scale(1.2) rotate(-8deg); /* Grossit et penche un peu */
}

/* 4. Animation pour la barre de recherche au survol */
.map-search-container:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}






/* =========================================
   BOUTON DE CONFIRMATION GPS (Intelligent)
   ========================================= */
#btn-confirm-location {
    background-color: #95a5a6; /* Gris par défaut (désactivé) */
    color: white;
    cursor: not-allowed; /* Le curseur montre qu'on ne peut pas cliquer */
    transition: all 0.3s ease;
	display:none;
}

/* La classe qui sera ajoutée par JavaScript quand le point est placé ! */
#btn-confirm-location.ready {
    background-color: #28a745; /* Vert fluo ! */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); /* Petit effet de lueur verte */
    transform: scale(1.02); /* Grossit très légèrement pour attirer l'attention */
}

/* =========================================
   PASTILLES DE STATUT (Vert, Jaune, Rouge)
   ========================================= */
.pastille-statut {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%; /* Fait un cercle parfait */
    margin-right: 8px; /* Laisse un petit espace avec le texte à côté */
    vertical-align: middle; /* Aligne bien avec le texte */
    position: relative;
    top: -1px; /* Petit ajustement optique */
}

/* 🟢 Statut : Fonctionnelle / Potable */
.pastille-verte {
    background-color: #2ecc71; 
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5); /* Effet de brillance verte */
}

/* 🟡 Statut : Hors service / En réparation */
.pastille-jaune {
    background-color: #f1c40f; 
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
}

/* 🔴 Statut : Avis d'ébullition / Non potable */
.pastille-rouge {
    background-color: #e74c3c; 
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
}

/* =========================================
   PAGE CHARTE / PARTENAIRES
   ========================================= */
.charter-section {
    
  
    display: flex;
    justify-content: center;
	max-width: 800px; /* Plus étroit pour faciliter la lecture du texte */
    margin: 40px auto;
    padding: 10px 20px;
	background-color: #EDFBFF;
	border-radius: 15px;
	border: 3px double #D7F3FC;
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.40);
}

.charter-content {
    max-width: 800px; /* Essentiel : Empêche le texte d'être trop large sur ordinateur */
    color: var(--text-main);
}

.charter-content h2 {
    color: #00315d;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

.charter-content .intro {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Les 3 blocs de la charte */
.pillar {
    background-color: white;
    border-left: 5px solid #00315d; /* Ligne bleue sur le côté */
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Petite ombre légère */
    border-radius: 0 8px 8px 0;
}

.pillar h3 {
    margin-top: 0;
    color: #00315d;
    font-size: 1.2rem;
}

/* La boîte des options en bleu très pâle */
.bonus-box {
    background-color: #FFFFFF; 
    border: 1px solid #cce0ff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
}

.bonus-box h4 {
    margin-top: 0;
    color: #00315d;
}

/* Le gros bouton d'action */
.cta-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

.btn-join {
    background-color: #00315d;
    color: white;
    font-size: 1.2rem;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 49, 93, 0.3);
    transition: transform 0.2s, background-color 0.2s;
}

.btn-join:hover {
    background-color: #004a8c;
    transform: scale(1.05); /* Grossit quand on passe la souris */
}

/* =========================================
   STYLE DU POP-UP PARTENAIRE (MODAL)
   ========================================= */
.modal-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 49, 93, 0.6); /* Fond bleu foncé semi-transparent */
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px); /* Effet flou sur la charte en arrière-plan */
}

.modal-box {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto; /* Permet de scroller si l'écran est petit */
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	overscroll-behavior: none;
}

.close-modal {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.close-modal:hover { color: #e00; }

.modal-box h2 {
    color: #00315d;
    margin-top: 0; margin-bottom: 5px;
}

.modal-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

#form-partenaire fieldset {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #fafafa;
}

#form-partenaire legend {
    font-weight: bold;
    color: #00315d;
    background: white;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid #eaeaea;
}

#form-partenaire label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9rem;
}

#form-partenaire input[type="text"],
#form-partenaire input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
}

.checkbox-group input { margin-right: 10px; }

.note-pichet {
    display: block;
    color: #d35400;
    font-size: 0.8rem;
    margin-top: 5px;
    margin-left: 25px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    font-size: 0.85rem !important;
    margin-top: 15px !important;
}

.consent-label input { margin-right: 10px; margin-top: 3px; }

.btn-submit {
    width: 100%;
    background-color: #00315d;
    color: white;
    padding: 12px;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-submit:hover { background-color: #004a8c; }

/* =========================================
   STYLE DE L'INTRODUCTION PARTENAIRE
   ========================================= */
.partner-intro h1 {
    color: #00315d;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 20px;
}

.partner-intro p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: center;
}

.benefits-box {
    background-color: white;
    border: 2px double #E6E6E6; 
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 20px 30px;
    margin: 30px 0;
	
}

.benefits-box h3 {
    color: #00315d;
    margin-top: 0;
    text-align: center;
	font-size: 1.50rem;
}




.benefits-box ul {
    list-style-type: none; /* Enlève les puces par défaut */
    padding: 0;
    margin: 0;
	color:white;
	
}




.overul{
	
	

	background-color: #F2F2F2;
	border-radius: 10px;
	border: 2px  double #F2F2F2;
	box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.15);
	
	
	
}

.benefits-box li {
    font-size: 1.12rem;
    margin-bottom: 15px;
    line-height: 1.6;
	color:black;
	
}

.charter-separator {
    border: 0;
    height: 1px;
    background: #ccc; /* Ligne grise subtile */
    margin: 40px auto;
    width: 50%;
}


/* Style spécifique pour les items du guide */
.guide-content {
    margin-top: 20px;
    text-align: left;
}

.guide-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

.guide-icon {
    font-size: 1.5rem;
    background: #f0f7ff;
    padding: 10px;
    border-radius: 50%;
}

.guide-item h4 {
    margin: 0 0 5px 0;
    color: #00315d;
}

.guide-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #444;
}

.user-intro {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #00315d;
    text-align: left;
}

.user-intro p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #333;
}

.sticker-hint {
    background: #eef6ff;
    padding: 8px;
    border-radius: 5px;
    font-size: 0.9rem !important;
}

.mini-separator {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 20px 0;
}

#actualites-section {
    scroll-margin-top: 100px; /* À ajuster selon la hauteur de ton menu  de drop de l'Ancre */
}

/* =========================================
   LAYOUT 3/4 - 1/4 (PAGE PARTENAIRES)
   ========================================= */
.directory-layout {
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px; /* On ajoute un peu de padding interne */
    background-color: #f4f7fa; /* LE SECRET EST ICI : Un fond gris-bleu doux */
    border-radius: 20px; /* Des beaux coins ronds */
}

.directory-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Colonne de gauche (75%) */
.partners-list {
    flex: 3; /* Prend 3 parts d'espace */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Colonne de droite (25%) */
.directory-sidebar {
    flex: 1; /* Prend 1 part d'espace */
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px; /* La barre suit l'écran quand on descend ! */
}

/* =========================================
   NOUVEAU DESIGN : CARTE PARTENAIRE
   ========================================= */
.partner-row-card {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 49, 93, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.partner-row-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 49, 93, 0.1);
}

/* 1. L'Avatar (Cercle parfait) */
/* Le nouveau conteneur pour empiler l'avatar et le texte */
.partner-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    width: 140px; /* Fixe la largeur de la première colonne */
}

/* Section Fidélité (Sous l'avatar) */
.loyalty-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* Espace entre le texte et les gouttes */
}

/* Les fameuses gouttes ! */
.loyalty-drops {
    font-size: 0.9rem;
    letter-spacing: 2px; /* Ajoute un bel espace entre chaque goutte */
    /* Petite animation au survol pour le côté ludique */
    transition: transform 0.2s;
    cursor: default;
}

.loyalty-drops:hover {
    transform: scale(1.1);
}

/* Le texte "Membre depuis" qu'on avait déjà */
.member-since {
    font-size: 0.75rem;
    color: #888;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.partner-avatar {
    flex-shrink: 0; 
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: #e8f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    overflow: hidden;
}

.partner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Le Centre (Textes et Tags) AVEC LES BARRES VERTICALES */
.partner-info {
    flex-grow: 1;
    padding: 0 25px; /* De l'espace à gauche et à droite pour respirer */
    border-left: 1px solid #eaeaea;  /* LIGNE VERTICALE GAUCHE */
    border-right: 1px solid #eaeaea; /* LIGNE VERTICALE DROITE */
}

.card-title {
    margin: 0 0 5px 0;
    color: #00315d;
    font-size: 1.4rem;
}

/* =========================================
   LES ÉTOILES ET NOTES (Cartes Partenaires)
   ========================================= */
.partner-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px; /* Pousse l'adresse un petit peu plus bas */
}

.stars {
    color: #ffb400; /* Un beau jaune/or de confiance */
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.star-empty {
    color: #e0e0e0; /* L'étoile vide en gris pâle */
}

.rating-number {
    font-weight: 800;
    color: #333;
    font-size: 0.9rem;
}

.review-count {
    color: #888;
    font-size: 0.85rem;
    text-decoration: underline; /* Laisse deviner qu'on pourrait cliquer pour lire les avis */
    cursor: pointer;
}

.partner-address {
    margin: 0 0 8px 0;
    color: #555;
    font-weight: 600;
    font-size: 0.95rem;
}

.partner-desc {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Les Tags d'Excellence */
.partner-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tag {
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-ice { background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.tag-filter { background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.tag-self { background-color: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; }

/* 3. Les Boutons à droite */
.partner-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 180px;
}

.btn-review, .btn-share {
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn-review {
    background-color: #00315d;
    color: white;
}
.btn-review:hover { background-color: #004a8c; transform: translateY(-1px); }

.btn-share {
    background-color: #f8f9fa;
    color: #00315d;
    border: 1px solid #dcdcdc;
}
.btn-share:hover { background-color: #e2e8f0; transform: translateY(-1px); }


/* Boutons d'action */
.btn-review {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    color: #333;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s;
}
.btn-review:hover { background-color: #f0f0f0; }

.btn-map-link {
    background-color: #e8f0fe;
    color: #1a73e8;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

/* =========================================
   BARRE LATÉRALE (SIDEBAR WIDGETS)
   ========================================= */
.sidebar-widget {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.sidebar-widget h3 { margin-top: 0; color: #00315d; font-size: 1.1rem; }
.sidebar-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
.btn-promo {
    display: block;
    background: #00315d;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
}

/* =========================================
   STYLE DU MODAL D'ÉVALUATION
   ========================================= */
.review-modal {
    text-align: center;
    max-width: 450px;
}

#review-partner-name {
    color: #1a73e8;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    background: #e8f0fe;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
}

/* Le conteneur des grosses étoiles */
.star-rating-container {
    font-size: 3rem;
    color: #e0e0e0; /* Étoiles grises par défaut */
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* L'animation de couleur */
.rate-star {
    transition: color 0.2s, transform 0.2s;
}

.rate-star:hover {
    transform: scale(1.1); /* Grossit un peu au survol */
}

/* La classe ajoutée par le Javascript quand on clique/survole */
.rate-star.selected {
    color: #ffc107; /* Jaune doré */
}

/* La zone de commentaire */
#feedback-form-container {
    margin-top: 20px;
    text-align: left;
}

.feedback-prompt {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 10px;
    font-weight: 500;
}

#feedback-text {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.success-text {
    color: #218838; /* Vert de succès */
    font-weight: bold;
    font-size: 1.1rem;
    margin: 20px 0;
}

/* =========================================
   SECTION TEASER PARTENAIRES (VERSION COMPACTE)
   ========================================= */
.partners-teaser {
    background-color: #f8fafd;
    padding: 30px 15px; /* Beaucoup moins d'espace vide en haut et en bas */
    text-align: center;
}

.teaser-header h2 {
    color: #00315d;
    font-size: 1.6rem; /* Plus petit */
    margin-bottom: 5px;
    line-height: 1.2;
}

.teaser-header p {
    color: #555;
    font-size: 0.95rem; /* Plus petit */
    margin-bottom: 25px; /* Plus près des cartes */
}

/* La grille des mini-cartes */
.teaser-grid {
    display: flex;
    justify-content: center;
    gap: 15px; /* Cartes plus rapprochées */
    max-width: 900px;
    margin: 0 auto 25px auto;
    flex-wrap: wrap;
}

/* Les mini-cartes (Format réduit) */
.teaser-card {
    background: #ffffff;
    padding: 15px; /* Moins de vide à l'intérieur */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 49, 93, 0.06); /* Ombre plus subtile */
    border-top: 3px solid #00315d; /* Ligne plus fine */
    width: 100%;
    max-width: 220px; /* Cartes beaucoup moins larges */
    transition: transform 0.2s ease;
    text-align: left;
}

.teaser-card:hover {
    transform: translateY(-3px); /* Soulèvement plus délicat */
}

.teaser-badge {
    color: #1a73e8;
    font-size: 0.7rem; /* Plus petit */
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.teaser-card h3 {
    color: #00315d;
    margin: 0 0 10px 0;
    font-size: 1.1rem; /* Titre plus petit */
}

.teaser-address {
    color: #666;
    font-size: 0.8rem; /* Plus petit */
    margin: 0;
    background-color: #f9f9f9;
    padding: 6px;
    border-radius: 6px;
    display: inline-block;
}

/* Le bouton central rapetissé */
.btn-view-all {
    display: inline-block;
    background-color: #00315d;
    color: #ffffff !important;
    padding: 10px 25px; /* Bouton moins massif */
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.btn-view-all:hover {
    background-color: #004a8c;
}

/* =========================================
   ICÔNES DE CARTE SVG (CUSTOM MARKERS)
   ========================================= */
.custom-map-marker {
    background: transparent;
    border: none;
}

/* La forme de la punaise (goutte inversée) */
.marker-pin {
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 0; /* Forme de goutte */
    position: absolute;
    transform: rotate(-45deg); /* Pointe vers le bas */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); /* Ombre pro */
    border: 2px solid white; /* Bordure blanche propre */
}

/* Remettre l'icône droite (car on a tourné la punaise !) */
.marker-pin svg {
    transform: rotate(45deg);
}

/* Les 4 couleurs de nos punaises */
.blue-pin { background-color: #1a73e8; }  /* Points publics */
.green-pin { background-color: #218838; } /* Partenaires */
.red-pin { background-color: #dc3545; }   /* Alertes/Bris */
.grey-pin { background-color: #607d8b; } /* 🚨 NOUVEAU : Gris-Bleu pour les commodités */
/* =========================================
   PAGE À PROPOS
   ========================================= */
.about-page {
    max-width: 800px; /* Plus étroit pour faciliter la lecture du texte */
    margin: 40px auto;
    padding: 10px 20px;
	background-color: #EDFBFF;
	border-radius: 15px;
	border: 3px double #D7F3FC;
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.40);
}

.about-header {
    text-align: center;
    margin-bottom: 40px;
}

.about-header h1 {
    color: #00315d;
    font-size: 2.8rem;
    margin-bottom: 10px;
}

.about-header p {
    color: #555;
    font-size: 1.3rem;
    font-style: italic;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Les cartes de texte */
.about-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 49, 93, 0.15);
    border-left: 5px solid #1a73e8; /* Ligne bleue sur le côté */
}

.about-card h2 {
    color: #00315d;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-card p {
    line-height: 1.6;
    color: #444;
    margin-bottom: 0;
}


.privacy-card {
    border-left-color: #218838; /* Ligne verte  */
    background-color: #f8fff9; /* Fond vert */
}

.privacy-list {
    margin-top: 15px;
    padding-left: 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: block; 
}

.privacy-list li {
    float: none; 
    margin-bottom: 10px;
    line-height: 1.5;
    color: #444;
}

/* Section de contact dans l'osti de bas */
.about-contact {
    text-align: center;
    margin-top: 20px;
    padding: 40px 30px;
    background-color: #f8fafd;
    border-radius: 12px;
    border: 1px solid #b6cdec;
}

.about-contact h2 {
    color: #00315d;
    margin-top: 0;
    font-size: 1.4rem;
}

.btn-contact {
    display: inline-block;
    margin-top: 20px;
    background-color: #00315d;
    color: white !important;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background 0.2s, transform 0.2s;
}

.btn-contact:hover {
    background-color: #004a8c;
    transform: translateY(-2px);
}

/* =========================================
   STYLE DU MODAL PARTENAIRE (OPTIMISÉ)
   ========================================= */
.partner-modal {
    max-width: 750px; /* Un peu plus large pour que le texte respire côte à côte */
    padding: 30px 40px;
    max-height: 90vh; /* Empêche le modal de dépasser l'écran */
    overflow-y: auto; /* Ajoute une barre de défilement JUSTE si l'écran est minuscule */
}

/* Les fameuses boîtes de sections (Fieldsets) */
.partner-modal fieldset {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #fafbfc;
}

.partner-modal legend {
    background-color: #00315d;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* La grille magique */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-row.align-center {
    align-items: center; /* Aligne le bouton fichier et la case à cocher sur la même ligne */
}

.input-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

/* Les cases à cocher en ligne */
.compact-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.compact-checkboxes label {
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.note-pichet {
    display: block;
    color: #888;
    font-style: italic;
    font-size: 0.8rem;
}

.consent-group {
    background-color: #e8f0fe;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #d2e3fc;
}

.consent-label {
    font-size: 0.85rem !important;
    color: #00315d !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Bouton d'envoi */
.btn-submit-partner {
    width: 100%;
    background-color: #00315d;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.btn-submit-partner:hover {
    background-color: #004a8c;
}



/* Étiquette de statut (Badge) pour les fontaines */
.status-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Variante Verte (En fonction) */
.status-active {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* On pourrait faire d'autres couleurs plus tard (ex: status-broken pour rouge) */


/* =========================================
   BOUTON VOIR SUR LA CARTE (Style Fantôme)
   ========================================= */
.btn-map {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 12px 15px;
    border: 2px solid #00315d; /* Bordure bleue */
    background-color: transparent; /* Fond transparent ! */
    color: #00315d;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box; /* Empêche le bouton de déborder */
}

.btn-map:hover {
    background-color: #f0f4f8; /* Devient gris bleuté au survol */
    transform: translateY(-1px);
}

/* =========================================
   RELOOKING COLONNE DE DROITE (SIDEBAR)
   ========================================= */
.sidebar-widget {
    background: #ffffff; /* Boîtes blanches comme les cartes */
    padding: 22px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 49, 93, 0.05); /* Même ombre douce */
}

.sidebar-widget h3 {
    margin-top: 0;
    color: #00315d;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

/* Le champ de recherche */
.sidebar-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #f8fafd;
    transition: all 0.3s;
}

.sidebar-input:focus {
    outline: none;
    border-color: #0070f3;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1); /* Lueur de focus */
}

/* Le bouton promo bleu */
.btn-promo {
    display: block;
    text-align: center;
    background-color: #0070f3;
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.2s;
    margin-top: 15px;
}

.btn-promo:hover {
    background-color: #005bb5;
}

/* =========================================
   MENU DÉROULANT DES FILTRES (L'ENTONNOIR)
   ========================================= */
.filter-widget summary {
    font-weight: bold;
    color: #00315d;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none; /* Cache la flèche de base du navigateur */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Petite flèche personnalisée qui tourne quand on ouvre */
.filter-widget summary::after {
    content: '▼';
    font-size: 0.8rem;
    color: #888;
}

.filter-widget[open] summary::after {
    content: '▲';
}

/* Les cases à cocher à l'intérieur */
.filter-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eaeaea;
}

.filter-options label {
    font-size: 0.95rem;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================
   STYLE UNIVERSEL DES CHAMPS DE FORMULAIRE
   ========================================= */

/* Donne de l'espace (de l'air) entre chaque question */
.input-group {
    margin-bottom: 18px;
}

/* La classe magique qui rend tout beau */
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d1d9e6;
    border-radius: 8px;
    background-color: #f8fafd;
    font-family: inherit;
    font-size: 0.95rem;
    color: #333;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* L'effet "Focus" : lueur bleue quand on clique dedans */
.form-control:focus {
    outline: none;
    border-color: #0070f3;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15);
}

/* =========================================
   CORRECTIONS SPÉCIFIQUES (Menu & Zone de texte)
   ========================================= */

/* 1. Le menu déroulant (On remplace la vieille flèche de Windows/Mac par une flèche pro) */
select.form-control {
    appearance: none; /* Cache la laideur par défaut */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* On dessine une belle petite flèche bleue personnalisée */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300315d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
    padding-right: 40px; /* Laisse de la place pour la flèche */
}

/* 2. La grosse zone de texte (Précisions) */
textarea.form-control {
    resize: vertical; /* Empêche l'utilisateur d'étirer la boîte de gauche à droite et de casser ton design */
    min-height: 80px; /* Hauteur de base correcte */
}

/* ==========================================
   PANNEAU LATÉRAL COULISSANT (Cure d'amincissement 10%)
   ========================================== */
.side-panel {
    position: fixed;
    top: 0;
    right: -450px;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.side-panel.open { right: 0; }
.panel-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9998;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.panel-overlay.open { opacity: 1; visibility: visible; }
.close-panel-btn {
    position: absolute; top: 15px; right: 15px; background: #fff;
    border: none; font-size: 24px; width: 35px; height: 35px;
    border-radius: 50%; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 1. On amincit l'image (Était 220px, maintenant 160px) */
.panel-header img { width: 100%; height: 160px; object-fit: cover; }

/* 2. On réduit l'espace vide autour du texte (Était 25px, maintenant 18px) */
.panel-content { padding: 18px 20px; }

/* 3. On rapetisse légèrement la police et l'interligne */
.panel-desc { font-size: 0.9rem; line-height: 1.4; color: #444; }

/* 4. On rapetisse le titre pour sauver de l'espace */
#panel-title { font-size: 1.35rem; margin-bottom: 5px; }

/* 5. Ajustements chirurgicaux pour les boutons et badges du panneau */
#side-panel .badges-container { margin-top: 10px; margin-bottom: 10px; }
#side-panel .badge-feature { padding: 4px 8px; font-size: 0.75rem; margin: 0 5px 5px 0; }
#side-panel .text-photo-help { font-size: 0.7rem; line-height: 1.2; margin-top: 8px; }
#side-panel .btn-photo { padding: 10px; font-size: 0.95rem; }

/* Boutons propres AU PANNEAU SEULEMENT */
#panel-actions button {
    width: 100%; padding: 10px; background-color: var(--primary); 
    color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
}
/* ==========================================
   CLASSES SÉCURISÉES (CSP COMPATIBLE)
   ========================================== */

/* 1. Le petit texte "Point d'eau public" */
.texte-point-eau {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
    font-weight: bold;
}

/* 2. Le beau badge vert "En fonction" */
.badge-en-fonction {
    display: inline-block;
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid #c8e6c9;
    margin-bottom: 12px;
}

/* 3. Le bouton gris "Plus d'infos" (Bouton secondaire) */
.btn-secondaire {
    background-color: #e9ecef !important;
    color: #333 !important;
}
.btn-secondaire:hover {
    background-color: #d1d6db !important;
}

/* ==========================================
   SÉCURITÉ CSP - CLASSES DE REMPLACEMENT
   ========================================== */

/* 1. Pour les sources de données (Villes) */
.edq-source-info {
    color: #7f8c8d;
    font-size: 0.85rem;
    font-style: italic;
    display: block;
    margin-top: 15px;
}

/* 2. Le message de succès du formulaire */
#success-msg-point {
    display: none; 
    color: #00315d; 
    font-weight: bold; 
    margin-top: 15px; 
    text-align: center; 
    background: #e6f0fd; 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid #cce0ff;
}

/* 3. Les champs de coordonnées grisés */
.input-readonly {
    background-color: #f5f5f5 !important;
    color: #888 !important;
    font-size: 0.9rem !important;
}

/* 4. Utilitaires rapides d'espacement (Pour ton index.html) */
.d-none { display: none !important; }
.m-0 { margin: 0 !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }


/* ==========================================
   STYLE DU PANNEAU PREMIUM (CSP Safe)
   ========================================== */

/* Conteneur pour espacer les badges */
.badges-container {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Le design des petits badges de caractéristiques */
.badge-feature {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 8px 8px 0;
    background-color: #f0f4f8;
    border: 1px solid #d9e2ec;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #334e68;
    font-weight: 500;
}

/* Le design du lien vers l'extérieur */
.lien-externe-panneau {
    display: inline-block;
    margin-top: 10px;
    color: var(--primary);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
}

.lien-externe-panneau:hover {
    text-decoration: underline;
    color: #005bb5;
}

/* =========================================
   BOUTON PILULE DE CENTRAGE MAGNÉTIQUE
   ========================================= */
.btn-center-map {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 30px; /* Ça donne la forme de pilule ronde */
    cursor: pointer;
    display: inline-flex; /* Parfait pour aligner l'icône et le texte */
    align-items: center;
    gap: 10px;
    margin: 25px auto 0 auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Petite ombre douce */
    transition: all 0.3s ease;
    animation: float-bounce 2.5s infinite ease-in-out;
}

/* L'effet quand on passe la souris dessus */
.btn-center-map:hover {
    color: var(--primary); 
    border-color: var(--primary);
    box-shadow: 0 6px 15px rgba(0, 112, 243, 0.15); /* L'ombre devient bleue et plus grande */
    animation-play-state: paused; /* Arrête de rebondir */
    transform: translateY(-2px); /* Se soulève légèrement vers le doigt */
}

/* On s'assure que la flèche a l'air bien intégrée */
.btn-center-map .arrow-down {
    font-size: 1.1rem;
}

/* L'animation (on garde la même) */
@keyframes float-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* =========================================
   MODALE D'ÉVALUATION (CSP SAFE)
   ========================================= */
.eval-partner-title {
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 20px;
}

.star-rating-container {
    font-size: 2.5rem;
    cursor: pointer;
    text-align: center;
    margin-bottom: 20px;
}

/* Les étoiles par défaut (grises) */
.rate-star {
    color: #cbd5e1;
    transition: color 0.2s ease;
}

/* La classe que le Javascript va ajouter pour allumer l'étoile (jaune) */
.rate-star.active {
    color: #f59e0b; 
}

.success-msg-box {
    color: #00315d;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
    background: #e6f0fd;
    padding: 12px;
    border-radius: 8px;
}

/* =========================================
   CASES À COCHER POUR LES FILTRES
   ========================================= */

/* 1. On s'assure que le texte et la case sont bien alignés */
.btn-filtre {
    display: inline-flex;
    align-items: center;
}

/* 2. La petite case VIDE par défaut */
.btn-filtre::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid #cbd5e1; /* Une belle bordure grise */
    border-radius: 4px;
    background-color: white;
    transition: all 0.2s ease; /* Animation douce */
}

/* 3. La case COCHÉE quand le bouton est actif ! */
.btn-filtre.active::before {
    content: '✔'; /* Le petit crochet */
    background-color: var(--primary); /* Ton bleu Eau du Québec */
    border-color: var(--primary);
    color: white;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
}


/* =========================================
   BOUTON AVIS (CSP SAFE)
   ========================================= */
.btn-avis-eval {
    width: 100%;
    margin-top: 15px;
}

/* =========================================
   BOUTON AJOUTER UNE PHOTO (CSP SAFE)
   ========================================= */
.btn-photo {
    background-color: #f39c12 !important; /* Beau orange visible */
    color: white !important;
    text-decoration: none;
    justify-content: center;
	margin-top: 15px;
}

.btn-photo:hover {
    background-color: #d68910 !important; /* Un peu plus foncé quand on passe la souris */
}

.text-photo-help {
    font-size: 0.75rem;
    color: #888;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}

/* =========================================
   LE MODE CINÉMA (PLEIN ÉCRAN FORCÉ ABSOLU)
   ========================================= */
.map-view.map-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0; /* On casse les coins ronds */
    z-index: 9999;
	border-radius: 0 !important;
}

/* La carte prend toute la place sans chialer */
.map-view.map-fullscreen #map {
    height: 100vh;
    width: 100vw;
	border-radius: 0 !important;
}

/* On fait flotter la barre de recherche et les filtres EN HAUT de l'écran */
.map-fullscreen .map-top-controls {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100% !important; /* Prend toute la largeur */
    justify-content: center !important; /* 🚨 Centre la recherche et les filtres */
    z-index: 10000;
}

/* 🚨 ASTUCE : On descend les boutons + et - de Leaflet pour ne pas cacher les filtres ! */
.map-fullscreen .leaflet-top {
    top: 60px !important; 
	z-index: 9900 !important;
}
/* 🚨 Rétrograder les boutons natifs de Leaflet (Zoom) pour protéger le menu ! */
.leaflet-control-container {
    z-index: 900 !important; /* Leaflet est normalement à 1000. On le descend à 900. */
}

/* On fait flotter tes boutons d'action EN BAS de l'écran */
.map-fullscreen .map-actions {
    position: absolute;
    bottom: 30px; /* 🚨 On les descend à 30px au lieu de 75px puisqu'il n'y a plus de bouton rouge en dessous ! */
    left: 0;
    width: 100% !important; 
    display: flex !important;
    justify-content: center !important; 
    z-index: 10000 !important; 
    margin-top: 0;
}

/* Le bouton flottant pour fermer le plein écran */
.btn-close-fullscreen {
    position: fixed;
    bottom: 8px; 
    left: 55px; /* 🚨 On le met en bas à gauche ! */
    transform: none; /* Plus besoin de forcer le centre */
    z-index: 10001; 
    
    /* Le nouveau look aminci et chic */
    background-color: rgba(255, 255, 255, 0.95); /* Fond blanc légèrement transparent */
    color: var(--alert-red); /* Texte rouge */
    border: 2px solid var(--alert-red); /* Bordure rouge */
    padding: 8px 18px; /* Plus fin et élégant */
    border-radius: 30px;
    font-size: 0.95rem; /* Texte un peu plus petit */
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Ombre très douce */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* L'effet au survol : Il devient rouge vif ! */
.btn-close-fullscreen:hover {
    background-color: var(--alert-red);
    color: white;
    transform: translateY(-2px); /* Petit bond au lieu de s'étirer */
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.3);
}

/* Cache le défilement du site en arrière-plan (POUR LE PLEIN ÉCRAN SEULEMENT) */
body.no-scroll {
    overflow: hidden !important;
    position: fixed; 
    width: 100%;
}
/* =========================================
   LÉGENDE DE LA CARTE (100% CSP SAFE)
   ========================================= */
.map-legend-container {
    background-color: white;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.map-legend-toggle {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color 0.2s ease;
    background-color: white;
}

/* La classe qu'on ajoute quand la légende est ouverte */
.map-legend-toggle.active {
    background-color: #f0f0f0;
}

.map-legend-content {
    display: none; /* Caché par défaut */
    padding: 10px 15px;
    font-size: 0.95rem;
    color: #333;
    border-top: 1px solid #ccc;
    background: #fdfdfd;
    min-width: 220px;
	box-shadow: 0px -4px 10px rgba(0,0,0,0.1); /* Ajoute une petite ombre portée au-dessus */
}

/* La classe qu'on ajoute pour afficher le texte */
.map-legend-content.show {
    display: block;
}

.legend-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px; /* Un bel espace entre l'émoji et le texte */
}

.legend-item:last-child {
    margin-bottom: 0;
}

/* =========================================
   LE HACK HOUDINI (ÉVASION DE LA LÉGENDE)
   ========================================= */
.map-fullscreen .map-legend-content {
    position: fixed !important; /* 🚨 Brise les murs de la carte ! */
    bottom: 55px !important; /* Flotte juste au-dessus du bouton ℹ️ */
    left: 15px !important;
    z-index: 99999 !important; /* Devient le roi absolu de l'écran */
    
    /* On lui donne un look de "bulle volante" puisqu'il est détaché */
    border: 1px solid #ccc !important; 
    border-radius: 8px !important; 
    box-shadow: 0px 5px 20px rgba(0,0,0,0.3) !important;
}

/* =========================================
   STYLES DU PANNEAU LATÉRAL (CSP SAFE)
   ========================================= */
.sidebar-title {
    margin-top: 0;
    color: var(--primary);
}

.sidebar-divider {
    margin: 10px 0;
    border: 0;
    border-top: 1px solid #ccc;
}

.sidebar-empty-text {
    font-size: 0.9rem;
    color: #666;
}

/* ==========================================
   🎯 ACCORDÉON DES FILTRES
   ========================================== */

/* La barre cliquable */
.filter-accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 10px;
}

/* On s'assure que le titre ne prend pas de marge extra */
.filter-accordion-header .sidebar-title {
    margin: 0 !important;
}

/* La petite flèche (tournée vers la gauche par défaut) */
.filter-chevron {
    transition: transform 0.3s ease;
    font-size: 14px;
    color: var(--primary);
    transform: rotate(-90deg); 
}

/* Animation de l'accordéon des filtres */
.filter-content {
    max-height: 400px; /* Assez grand pour contenir les 4 boutons */
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 1;
}

/* Quand on clique pour fermer le menu */
.filter-content.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none; /* Empêche de cliquer sur les boutons invisibles */
}



/* =========================================
   LE PANNEAU LATÉRAL (GÉOPORTAIL)
   ========================================= */
.btn-sidebar-toggle {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10010; /* Flotte toujours au-dessus de la carte */
    background-color: white;
    color: #333;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}

.btn-sidebar-toggle:hover {
    background-color: #f4f7fa;
}

.map-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px; /* Largeur du menu */
    height: 100%;
    background-color: white;
    z-index: 10005 !important; /* 🚨 LA REINE : Passe par-dessus le bouton rouge, mais sous le bouton Menu ! */
    box-shadow: 2px 0 15px rgba(0,0,0,0.3);
    
    /* La magie de la porte coulissante */
    transform: translateX(-100%); /* Caché à gauche par défaut */
    transition: transform 0.3s ease;
    overscroll-behavior: none;
    padding: 70px 20px 20px 20px; /* Espace en haut pour le bouton menu */
    box-sizing: border-box;
    overflow-y: auto;
}




/* La classe qu'on ajoute pour ouvrir le tiroir */
.map-sidebar.open {
    transform: translateX(0); 
}


/* =========================================
   NETTOYAGE DES FILTRES DU MENU LATÉRAL (PROPRE)
   ========================================= */

/* 1. On DÉTRUIT les vieilles cases à cocher (ce qui va replacer ton texte à gauche !) */
#map-sidebar .sidebar-filters .tool-btn::before {
    display: none; 
}

/* 2. On écrase les gros fonds (bleu/vert/rouge) et on remet le texte foncé */
#map-sidebar .sidebar-filters .tool-btn.active {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    color: var(--text-main); /* 🚨 Remet le texte d'une belle couleur unie ! */
}

/* 3. On amincit les boutons et on enlève le look 3D */
#map-sidebar .sidebar-filters .tool-btn {
    padding: 12px 5px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    box-shadow: none;
}

.sidebar-version {
    text-align: center;
    font-size: 0.75rem; /* Très petit, comme les crédits photos ! */
    color: var(--text-muted); /* Ton gris discret */
    padding: 10px 0 10px 0;
    margin-top: auto; /* Magie : pousse le texte complètement dans le bas du menu ! */
    font-family: monospace; /* Donne un petit look "code informatique" très cool */
    letter-spacing: 0.5px;
	cursor: pointer;
}

/* -----------------------------------------
   LA MÉCANIQUE DE LA SWITCH (Style iOS)
   ----------------------------------------- */
/* La piste (le fond gris) */
.toggle-track {
    width: 44px;
    height: 24px;
    background-color: #d1d5db; /* Gris quand c'est inactif */
    border-radius: 24px;
    position: relative;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Empêche la switch de s'écraser si le texte est long */
}

/* Le bouton rond (le piton blanc) */
.toggle-knob {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Petite ombre pour donner du relief */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Animation super fluide */
}

/* 🚨 LA MAGIE : Quand le bouton a la classe .active (géré par ton JS) */
.sidebar-filters .tool-btn.active .toggle-track {
    background-color: #34c759; /* Le vrai Vert iOS (ou mets var(--primary) si tu préfères bleu) */
}

.sidebar-filters .tool-btn.active .toggle-knob {
    transform: translateX(20px); /* On glisse le piton vers la droite ! */
}

/* =========================================
   L'INTERCEPTEUR DE CARTE (LA VITRE)
   ========================================= */
.map-interceptor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10015; /* Passe au-dessus de la carte Leaflet, mais sous tes boutons ! */
    background-color: rgba(0, 49, 93, 0.0); /* Transparent par défaut */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Au survol de la petite carte, on foncit un peu et on montre le texte */
.map-interceptor:hover {
    background-color: rgba(0, 49, 93, 0.6); /* Le beau bleu de ton site, semi-transparent */
    backdrop-filter: blur(2px); /* Petit effet de flou super pro */
}

/* Le texte et l'icône au centre de la vitre */
.interceptor-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0; /* Caché par défaut */
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* On fait monter le texte au survol */
.map-interceptor:hover .interceptor-content {
    opacity: 1;
    transform: translateY(0);
}

/* 🚨 TRÈS IMPORTANT : Quand on est en mode plein écran, la vitre DOIT disparaître ! */
.map-fullscreen .map-interceptor {
    display: none !important;
}



/* =========================================
   LE POPUP DE BIENVENUE (ONBOARDING)
   ========================================= */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 49, 93, 0.85); /* Ton bleu officiel, semi-transparent ! */
    backdrop-filter: blur(5px); /* Le bel effet de vitre givrée */
    z-index: 99999; /* 🚨 AU-DESSUS DE LA BÂTISSE AU COMPLET */
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
    overscroll-behavior: none; /* Bloque le rebond classique */
}
/* FIN DE LA BOÎTE OVERLAY - ON GARDE ÇA PROPRE ! */
	
	

/* =========================================
   LE POPUP DE BIENVENUE (ONBOARDING) - RÉPARÉ
   ========================================= */

.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 49, 93, 0.85); /* Ton bleu officiel, semi-transparent ! */
    backdrop-filter: blur(5px); /* Le bel effet de vitre givrée */
    z-index: 99999; /* 🚨 AU-DESSUS DE LA BÂTISSE AU COMPLET */
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
    overscroll-behavior: none; /* Bouclier anti-rebond #1 */
}

.welcome-modal {
    background: white;
    padding: 15px;
    border-radius: 12px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
    transform: translateY(0);
    transition: transform 0.4s ease;
    
    /* 🚨 LA STRUCTURE MAGIQUE POUR TOUS LES ÉCRANS : */
    max-height: 85vh; 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Interdit à la grosse boîte de scroller */
}

/* 🚨 LES DEUX ROUAGES DU SCROLL 🚨 */
.welcome-modal .tab-content {
    flex-grow: 1; 
    overflow-y: auto; /* Active le vrai scroll ici ! */
    padding-right: 5px; 
    margin-bottom: 15px;
    overscroll-behavior: contain; /* Bouclier anti-rebond #2 (protège la carte en arrière-plan) */
}

#btn-close-welcome {
    flex-shrink: 0; 
    margin-top: auto;
}

/* ==========================================
   TA DÉCORATION INTACTE
   ========================================== */
.welcome-modal h2 {
    margin-top: 0;
    color: var(--primary);
}

.welcome-rules {
    text-align: left;
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa; /* Petit fond gris doux */
    border-radius: 8px;
}

.welcome-rules li {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* Les classes magiques pour faire fondre le popup quand on clique ! */
.welcome-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.welcome-overlay.hidden .welcome-modal {
    transform: translateY(-30px); /* Le petit bonhomme monte en disparaissant */
}

/* =========================================
   LE LOGO FLOTTANT SUR LA CARTE (FILIGRANE)
   ========================================= */
.map-logo-watermark {
    position: absolute;
    top: 25px;
    left: 50%; /* On le place en plein centre en haut */
    transform: translateX(-50%);
    z-index: 10000;
    font-weight: 900;
    font-size: 2.0rem;
    color: rgba(0, 49, 93, 0.80); /* Ton bleu foncé, légèrement transparent */
  
    
    text-shadow: 
        /* Ombre 1 (Halo) : Douce et large pour le "glow" */
        0 0 10px rgba(255, 255, 255, 1),
        
        /* Ombre 2 (Le Contour "Coche de blanc") : Dure et nette pour le contraste ! */
        0 0 3px rgba(255, 255, 255, 1);
    pointer-events: none; /* 🚨 MAGIE : L'utilisateur peut cliquer sur la carte AU TRAVERS du logo ! */
    letter-spacing: 1px;
    display: none; /* Caché par défaut */
}

/* On l'affiche UNIQUEMENT en mode Plein Écran */
.map-fullscreen .map-logo-watermark {
    display: block;
}

/* =========================================
   ON MET LA BARRE DE RECHERCHE AU RÉGIME
   ========================================= */
.map-search-container {
    max-width: 350px; /* 🚨 Fini la barre de 2 kilomètres ! Elle arrêtera de grandir ici. */
}

/* =========================================
   LE CENTRE DE CONTRÔLE EN DIRECT (HORLOGE)
   ========================================= */
.sidebar-live-status {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #f8f9fa; /* Petit fond gris doux */
    border-radius: 8px;
	border:2px double #CFCFCF;
    border-left: 4px solid #34c759; /* Ligne verte "Système en ligne" */
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	
	
	/* 🚨 LA CURE MINCEUR : */
    padding: 4px 15px; /* Aminci de 5px en haut et en bas */
    margin-bottom: 15px; /* On sauve 10px de vide en dessous (était 25px) */
}

/* Le petit point vert qui clignote (Battement de coeur) */
.status-indicator {
    width: 14px;
    height: 14px;
    background-color: #34c759;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.6);
    animation: pulse 2s infinite; /* 🚨 La magie du clignotement ! */
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

.status-text {
    display: flex;
    flex-direction: column;
}

.status-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

.status-time {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-main);
}

/* =========================================
   LE TÉLÉPORTEUR (SÉLECTEUR DE VILLE RAPIDE)
   ========================================= */
.sidebar-teleporter {
    margin-bottom: 15px;
}

.jump-select {
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #eef2f6;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 49, 93, 0.04);
    transition: all 0.3s ease;
    
    /* On change la petite flèche standard pour faire plus pro */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%230070f3' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.jump-select:hover {
    border-color: #cce0ff;
    box-shadow: 0 6px 15px rgba(0, 112, 243, 0.1);
    transform: translateY(-1px);
}

.jump-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* =========================================
   LE COMPTEUR DYNAMIQUE (DANS L'HORLOGE)
   ========================================= */
.status-stats {
    margin-left: auto; /* Pousse le compteur complètement à droite ! */
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stats-number {
    font-size: 1.4rem; /* Un beau gros chiffre */
    font-weight: 900;
    color: var(--primary); /* Ton bleu officiel */
    line-height: 1.1;
    font-family: monospace; /* Police style ordinateur pour le chiffre */
}

.stats-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

/* =========================================
   LE GADGET RADAR FLOTTANT (V2 - ULTRA FIN)
   ========================================= */
.map-live-gadget {
    position: absolute;
    bottom: 30px; /* 🚨 On le déménage en BAS à droite pour l'ordinateur ! */
    right: 15px;
    top: auto; /* Annule l'ancienne position du haut */
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    padding: 4px 10px; /* Beaucoup plus mince ! */
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 49, 93, 0.1); /* Ombre plus douce */
    z-index: 10000; 
    display: none; 
    align-items: center;
    gap: 8px; /* Les éléments sont plus collés */
    border: 1px solid rgba(0, 112, 243, 0.15);
    transition: all 0.3s ease;
}

.map-fullscreen .map-live-gadget {
    display: flex;
}

/* Le texte aminci */
.gadget-number {
    font-size: 0.95rem; /* Plus petit */
    font-weight: 800;
    color: var(--primary);
    font-family: monospace;
}

.gadget-label {
    font-size: 0.65rem; /* Plus petit */
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* 🚨 NOUVEAU : Le micro-point vert SPÉCIFIQUE à ce gadget */
.map-live-gadget .status-indicator {
    width: 8px !important; 
    height: 8px !important;
    min-width: 8px !important; /* Empêche la boîte de s'écraser */
    padding: 0 !important; /* 🚨 LA LIPOSUCCION : On tue le padding fantôme ! */
    margin: 0 !important;
    margin-top: 1px !important; /* Le pousse d'un poil vers le bas pour le centrer avec le texte */
    border-radius: 50% !important; /* Force le cercle parfait */
    background-color: #34c759 !important; /* Vert fluo pur */
    box-shadow: 0 0 5px rgba(52, 199, 89, 0.5) !important;
    animation: pulse-mini 2s infinite !important; 
}

/* La nouvelle animation avec un halo très fin */
@keyframes pulse-mini {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); }
    70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(52, 199, 89, 0); } /* Halo de 4px au lieu de 8px */
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}


/* =========================================
   STYLE POUR LES PHOTOS CITOYENNES (UGC)
   ========================================= */
.sidebar-photo {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover; /* Recadre joliment sans écraser l'image */
    border-radius: 8px;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Petite ombre chic */
    border: 1px solid var(--border);
}

.photo-credit {
    font-size: 0.75rem;
    color: var(--text-muted); /* Ton gris secondaire */
    font-style: italic;
    text-align: right; /* Aligné à droite pour faire comme un vrai crédit photo */
    margin-top: 5px; /* 🚨 Exactement 10px en dessous de la photo ! */
	margin-right:5px;
    margin-bottom: 15px;
}

/* =========================================
   AVERTISSEMENT VIE PRIVÉE (FORMULAIRE)
   ========================================= */
.privacy-warning-box {
    margin: 15px 0;
    background-color: var(--bg-card); /* Ton gris très pâle */
    padding: 10px;
    border-radius: 8px;
    border-left: 4px solid var(--primary); /* La belle ligne bleue sur le côté */
}

.privacy-warning-text {
    font-size: 0.8rem;
    color: #444;
    margin-top: 0;
    margin-bottom: 8px;
}

.privacy-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.privacy-checkbox-group input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
}

.privacy-checkbox-label {
    font-size: 0.8rem;
    color: var(--text-muted); /* Ton gris secondaire */
    line-height: 1.4;
    cursor: pointer;
}

/* =========================================
   ÉTIQUETTE AU SURVOL (TOOLTIP LEAFLET)
   ========================================= */
.hover-etiquette {
    background-color: var(--text-main); /* On utilise ton noir doux */
    color: white; /* Texte en blanc pour le contraste */
    border: none !important; /* On enlève la bordure grise moche de Leaflet */
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    white-space: nowrap; /* Empêche le texte de se couper sur 2 lignes */
}

/* On change la couleur de la petite flèche en bas de l'étiquette pour qu'elle soit noire aussi */
.hover-etiquette::before {
    border-top-color: var(--text-main) !important;
}

/* =========================================
   BADGES DE VÉRIFICATION (POPUPS)
   ========================================= */
.badge-verification {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    margin-left: 24px; /* Pour l'aligner avec le titre sous la puce */
}

.badge-non-verifie {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.badge-verifie {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* =========================================
   THÈME : POPUP D'ALERTE MAJEURE 🚨
   ========================================= */
.custom-popup.theme-alerte {
    border-top: 5px solid var(--alert-red, #dc3545); /* Grosse barre rouge */
    background-color: #fff9fa; /* Fond très légèrement rosé */
}

.custom-popup.theme-alerte .custom-popup-title {
    color: #dc3545; /* Titre en rouge */
    font-size: 1.1rem;
}

.custom-popup.theme-alerte .popup-description {
    font-weight: bold;
    color: #333;
}

/* =========================================
   MARQUEUR SPÉCIAL D'ALERTE ⚠️ (Sur la carte)
   ========================================= */
.marker-alerte {
    background: #dc3545; /* Rouge alerte */
    border-radius: 50% 50% 50% 0; /* Forme de goutte d'eau inversée */
    width: 30px !important;
    height: 30px !important;
    position: relative;
    transform: rotate(-45deg); /* Tourne pour donner la pointe */
    left: -15px; /* Centre horizontalement */
    top: -30px; /* Centre verticalement sur la pointe */
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* On remet l'emoji à l'endroit (car le parent a tourné) */
.marker-alerte span {
    transform: rotate(45deg); 
    font-size: 1.1rem;
    margin-top: -3px; /* Petit ajustement visuel */
}

/* =========================================
   BOUTONS DE VOTE (POPUP ALERTE)
   ========================================= */
.vote-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
}

.btn-vote {
    padding: 8px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
}

.btn-vote-vert { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.btn-vote-vert:hover { background-color: #c3e6cb; }

.btn-vote-rouge { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.btn-vote-rouge:hover { background-color: #f5c6cb; }

.vote-merci {
    text-align: center;
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: bold;
    padding: 10px;
    background: #e9f5ff;
    border-radius: 5px;
}

/* =========================================
   STYLE DU PANNEAU D'ALERTE (CSP SAFE)
   ========================================= */
.badge-alerte-majeure {
    background-color: #fce8e6;
    color: #d93025;
    border: 1px solid #fad2cf;
}

.alerte-titre-rouge {
    font-weight: bold;
    color: #d93025;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 10px;
}

.alerte-texte-standard {
    margin-bottom: 15px;
    line-height: 1.4;
    color: #444;
}

.alerte-boite-jaune {
    background-color: #fff3cd;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #856404;
}

.alerte-boite-jaune b {
    display: block;
    margin-bottom: 5px;
}

.alerte-texte-footer {
    font-size: 0.85rem;
    font-style: italic;
    color: #666;
    margin-bottom: 0; /* On enlève la marge du bas pour ne pas étirer le panneau ! */
}

/* =========================================
   BADGES DE STATUT (FONTAINES JAUNES/ROUGES)
   ========================================= */
.badge-jaune-verif {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.badge-rouge-confirme {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Texte rouge pour les erreurs de formulaire Web3Forms */
.texte-erreur-vote {
    color: #dc3545 !important;
}

/* Petit utilitaire d'espace pour aérer les boutons */
.mt-10 { margin-top: 10px !important; }

/* =========================================
   ESPACEMENT DES FILTRES (SIDEBAR)
   ========================================= */
.sidebar-filter-btn {
    display: flex;
    justify-content: space-between; /* 🚨 MAGIE : Pousse le texte à gauche et la switch à droite ! */
    align-items: center;
    width: 100%;
    padding: 12px 5px !important; 
}

.sidebar-filter-btn .filter-label {
    display: flex;
    align-items: center;
    gap: 12px; /* Un bel espace propre entre l'emoji et le mot */
    font-size: 0.95rem;
}

/* =========================================
   SECTION OUTILS (SIDEBAR)
   ========================================= */
.sidebar-tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 5px; /* S'aligne avec les filtres */
	
}

.sidebar-tool-action {
    background-color: #f8fafd;
    border: 1px solid #eaeaea;
    color: #00315d;
    padding: 9px 15px;
    border-radius: 8px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
	text-decoration: none;
}

.sidebar-tool-action:hover {
    background-color: #e8f0fe;
    border-color: #cce0ff;
    color: #1a73e8;
    transform: translateX(5px); /* 🚨 Petit effet pro : le bouton glisse vers la droite au survol ! */
}

/* =========================================
   MODE SNIPER (AJOUT DE POINT D'EAU)
   ========================================= */
.banniere-ajout {
    position: absolute;
    top: 80px; /* Juste en dessous du menu principal */
    left: 50%;
    transform: translateX(-50%);
    background-color: #00315d;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 9999; /* Par-dessus la carte */
    font-size: 0.95rem;
    animation: glissementBas 0.3s ease-out;
}

.banniere-ajout.d-none { display: none !important; }

.btn-annuler-sniper {
    background-color: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.btn-annuler-sniper:hover { background-color: rgba(255,255,255,0.4); }

.pulse-icon { animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes glissementBas { from { top: 50px; opacity: 0; } to { top: 80px; opacity: 1; } }

/* 🚨 LA MAGIE : Change le curseur sur toute la carte ! */
.carte-mode-sniper { cursor: crosshair !important; }

/* =========================================
   ONGLETS DU MODAL D'ACCUEIL
   ========================================= */
.modal-tabs {
    display: flex;
    border-bottom: 2px solid #eaeaea;
    margin-bottom: 15px;
}
.tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 10px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.tab-btn:hover { color: #00315d; background-color: #f8fafd; }
.tab-btn.active {
    color: #00315d;
    border-bottom-color: #00315d;
}
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   STYLE DU CONTENU DU GUIDE (MODAL)
   ========================================= */
.guide-intro {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.guide-separator {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.guide-subtitle {
    font-weight: bold;
    font-size: 0.9rem;
    color: #00315d;
    margin-bottom: 10px;
}

.guide-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.guide-icon {
    font-size: 1.5rem;
}

.guide-text h4 {
    margin: 0 0 3px 0;
    font-size: 0.95rem;
}

.guide-text p {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
}

/* =========================================
   CARTES DU GUIDE D'UTILISATION (MODAL)
   ========================================= */
.guide-card {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.guide-card h4 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
}

.guide-card p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #444;
}

/* On protège la liste contre le vieux CSS global du menu */
ul.guide-list {
    background: transparent !important;
    border: none !important;
    padding-left: 20px !important;
    margin: 0 !important;
    list-style-type: disc !important; /* Vraies puces rondes */
    overflow: visible !important;
}

ul.guide-list li {
    float: none !important;
    color: #444 !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    border: none !important;
}

/* Thème Standard (Bleu) */
.guide-card.standard {
    border-left: 4px solid var(--primary);
    background: #f8fafd;
}
.guide-card.standard h4 { color: var(--primary); }

/* Thème Urgent (Rouge) */
.guide-card.urgent {
    border-left: 4px solid var(--alert-red);
    background: #fef5f5;
}
.guide-card.urgent h4 { color: var(--alert-red); }






/* =========================================================================
   📱 LE GRAND BLOC RESPONSIVE UNIFIÉ V6 (BUNKER MOBILE 3D)
   (Cette section s'active UNIQUEMENT sur téléphone)
   ========================================================================= */
@media screen and (max-width: 768px) {
    
    /* ---------------------------------------------------
       1. RÉPARATION DE LA STRUCTURE ET DE L'EN-TÊTE
       --------------------------------------------------- */
    html, body { overflow-x: hidden; width: 100%; }
    
    /* Le Menu Principal : On empile proprement, SANS CHEVAUCHEMENT */
    .main-nav { 
        flex-direction: column !important; 
        padding: 10px 15px !important; 
        gap: 10px !important; 
	
    }
    .logo { font-size: 1.4rem !important; text-align: center; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 8px 12px; width: 100%; }
    .nav-item { font-size: 0.90rem !important; }
    
    /* Le gros bouton rouge de signalement en haut : On le mince ! */
    .nav-btn-report { 
        display: block; 
        width: auto !important; /* Ne prend plus toute la largeur */
        margin: 5px auto 0 auto !important; /* Centré */
        padding: 6px 15px !important; /* Très mince */
        font-size: 0.80rem !important; /* Texte petit */
    }

    /* ---------------------------------------------------
       2. RÉPARATION DES CONTRÔLES DE CARTE (Haut de l'écran)
       --------------------------------------------------- */
    
    /* A. Le Bouton Menu : Bien ancré en haut à gauche */
    .map-fullscreen .btn-sidebar-toggle {
        top: 15px !important;
        left: 10px !important;
        z-index: 10010 !important;
        padding: 8px 12px !important; /* Un peu plus compact */
    }
    
    /* B. La Barre de Recherche : Placée sur la MÊME ligne, à droite du Menu ! */
    .map-fullscreen .map-top-controls { 
        position: absolute !important; 
        top: 15px !important; 
        left: 0 !important;
        width: 100% !important;
        padding-left: 115px !important; /* 🚨 J'ai ajouté 10px d'air ici pour décoller du Menu ! */
        padding-right: 15px !important;
        box-sizing: border-box !important;
        flex-direction: row !important; 
    }
    
   .map-search-container { 
        width: 100% !important; 
        max-width: 100% !important;
        margin: 0 !important; 
    }
    
    /* C. Cache le logo filigrane pour aérer */
    .map-logo-watermark { display: none !important; }
    
    /* D. Fix barre d'adresse iOS/Android */
    .map-view.map-fullscreen, .map-view.map-fullscreen #map { height: 100dvh !important; }

    /* E. 🚨 LE GADGET COMPTEUR (EN HAUT) */
    .map-live-gadget { 
        top: 75px !important; /* 🚨 Il prend la place du haut ! */
        right: 10px !important; 
        bottom: auto !important; 
        
        /* 🚨 LA CURE MINCEUR EST ICI : On force un height et un padding minuscule ! */
        height: 28px !important; /* Hauteur fixe très mince */
        padding: 0 10px !important; /* Zéro padding en haut/bas, juste sur les côtés */
        
        transform: scale(0.85) !important; 
        transform-origin: top right !important; 
    }

    /* F. 🚨 SÉPARATION DES BOUTONS LEAFLET (+/- vs Calques) */
    .map-fullscreen .leaflet-top.leaflet-left {
        top: 70px !important; /* Les boutons + et - restent en haut à gauche */
    }
    
    .map-fullscreen .leaflet-top.leaflet-right {
        top: 120px !important; /* 🚨 Le bouton des calques descend SOUS le gadget ! */
    }

    

    /* ---------------------------------------------------
       3. 🚨 LA TOOLBAR UNIFIÉE 3D (Les 3 Mousquetaires) 🚨
       --------------------------------------------------- */
    
    /* La Coquille Flottante (La "Dock") - LOOK 3D SURÉLEVÉ */
    .map-fullscreen .map-actions {
        position: fixed !important; 
        bottom: 20px !important; /* Flotte au-dessus du bas */
        left: 5% !important; 
        width: 90% !important;
        display: flex !important; 
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        
        /* Tes demandes esthétiques V6 : */
        background: rgba(255, 255, 255, 0.98) !important; /* Blanc presque opaque */
        backdrop-filter: blur(3px) !important;
        padding: 5px !important; /* 🚨 Padding MINUSCULE (Slimmer !) */
        border-radius: 25px !important; /* Bords très ronds */
        
        /* L'Effet 3D Surélevé 🚀 */
        border: 3px solid #bdc3c7 !important; /* 🚨 Grosse bordure grise solide (effet coquille) */
        box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important; /* 🚨 Grosse ombre portée vers le bas pour l'altitude */
        
        z-index: 10001 !important; 
        box-sizing: border-box !important; 
        margin-top: 0 !important;
        transform: none !important; /* Désactive les anciens centitages */
    }

    /* Les deux boutons bleus de la Toolbar */
    #btn-locate, #btn-start-submit {
        flex: 1 !important; /* Partagent l'espace à gauche */
        margin: 0 3px !important; /* Marges réduites */
        padding: 8px 3px !important; /* Plus mince */
        font-size: 0.80rem !important; /* Texte petit */
        border-radius: 12px !important; 
        display: flex !important; 
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important; 
        height: 50px !important; /* Hauteur mince unifiée */
        width: auto !important;
    }

 /* Le Bouton Vert de Confirmation (S'adapte aussi !) */
    #btn-confirm-location {
        flex: 1 !important;
        margin: 0 3px !important;
        padding: 8px 3px !important;
        font-size: 0.80rem !important; 
        border-radius: 12px !important;
        
        /* 🚨 J'AI ENLEVÉ LE "display: flex !important;" ICI POUR QU'IL RESTE CACHÉ ! */
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
        height: 50px !important;
        width: auto !important;
    }
	
	/* 🚨 LA MAGIE : Quand ton Javascript décide de l'afficher, le CSS embarque pour le mettre beau ! */
    #btn-confirm-location[style*="display: block"] {
        display: flex !important;
    }
	
    /* Le Rond Tamisé avec le "X" pour Fermer (RE-CALIBRÉ) */
    .btn-close-fullscreen {
        /* 🚨 LA CORRECTION CRITIQUE V6 : */
        position: static !important; /* 🚨 Annule le position absolute/fixed qui le faisait planer au-dessus ! */
        transform: none !important; 
        order: 3 !important; /* Le pousse à droite de la flexbox */
        
        /* Look Rond Tamisé */
        width: 45px !important; /* Un peu plus petit pour entrer dans la coquille mince */
        height: 45px !important; 
        min-width: 45px !important; 
        margin-left: 5px !important; /* Marge réduite */
        padding: 0 !important;
        border-radius: 50% !important; 
        background-color: #f0f3f6 !important; /* Gris tamisé */
        color: #7f8c8d !important; 
        border: 2px solid #bdc3c7 !important;
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        box-shadow: none !important;
        z-index: 10002 !important;
    }

    /* Esthétique du X */
    .close-text-mobile { display: none !important; }
    .close-icon-x { font-size: 2rem !important; line-height: 1 !important; margin-top: -3px !important; font-weight: bold; }
    
    /* Effet quand on clique sur le X */
    .btn-close-fullscreen:active { 
        background-color: #fce8e6 !important; 
        border-color: #fad2cf !important; 
        color: var(--alert-red) !important; 
    }


/* ===================================================
       RÉPARATION DE LA PAGE PARTENAIRES (MOBILE)
       =================================================== */
    .partner-row-card {
        flex-direction: column !important; /* On empile de haut en bas */
        text-align: center !important;
        padding: 20px 15px !important;
        gap: 15px !important;
    }
    
    .partner-avatar-container {
        width: 100% !important; /* Pour bien centrer le logo */
    }

    .partner-info {
        border-left: none !important; /* On enlève les murs sur les côtés */
        border-right: none !important;
        padding: 15px 0 !important;
        border-top: 1px solid #eaeaea !important; /* On met des planchers/plafonds */
        border-bottom: 1px solid #eaeaea !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .partner-actions {
        width: 100% !important;
        min-width: unset !important;
    }
    
    .partner-rating {
        justify-content: center !important; /* Centre les étoiles jaunes ! */
    }
    
    .partner-tags {
        justify-content: center !important; /* Centre les petits badges bleus/verts ! */
    }
	
	/* 🚨 Ajustement du bouton des calques (Layers) de Leaflet */
    .leaflet-control-layers {
        transform: translateY(-25px) !important; /* Le remonte de 5 pixels ! */
    }

	


}