@font-face {
    font-family: 'Anurati';
    src: url('/../assets/fonts/Anurati-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Style général du corps de la page */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #13232f;
	color: #333;
    display: block; /* Supprimer le flex qui pose problème */
	z-index: 10
}

body::before {
    content: '';
    display: block;
    height: 60px; /* Hauteur du header */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}


/* 🎆 Canvas en fond */
.particlesCanvas {
    position: fixed; /* ✅ Fixe le canvas en arrière-plan */
    top: 0;
    left: 0;
    width: 100vw; /* ✅ Prend toute la largeur de l'écran */
    height: 100vh; /* ✅ Prend toute la hauteur de l'écran */
    z-index: -1; /* ✅ Met le canvas derrière le contenu */
    pointer-events: none; /* ✅ Empêche le canvas d'interférer avec les clics */
}


/**************************************************************************/

#load-more-trigger-2 {
    background-color: rgba(255, 0, 0, 0); /* 🔴 Visible en rouge transparent */
    border: 2px dashed red; /* 🔴 Contour pour le repérer */
    text-align: center;
    line-height: 50px; /* Centrer le texte */
    font-weight: bold;
    color: white;
}
#bubbles-container-2 {
    min-height: 300px; /* Pour voir la zone */
    border: 2px dashed red; /* Contour visible */
}



/**************************PAGE ACCUEIL**********************************/

/* Conteneur principal avec CSS Grid */
.container-accueil {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.container-accueil h1{
	color: #234357;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Anurati', sans-serif;
	z-index: 100
}

.container-accueil p {
	color: #9bc6de;
    font-size: 14px;
    font-weight: 100;
	text-align: center;
    margin-bottom: 5px;
}


/*********************************Fin Accueil**************************************/
/**************************PAGE ACCUEIL**********************************/
/**************************PAGE ACCUEIL**********************************/

.bubble {
    position: absolute;
    width: var(--bubble-size, 140px);
    height: var(--bubble-size, 140px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);*/
    /*transition: transform 0.3s ease, opacity 0.5s ease;*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 10;
}

.bubble {
    transition: opacity 1s ease-out, transform 5.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}



.bubble-image-container {
    filter: grayscale(1%);
	position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble-image-container:hover {
    filter: grayscale(100%);
}

.bubble-image {
   
	width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bubble-title {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 4px;
    border-radius: 5px;
    width: 85%;
    text-align: center;
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.2;
}

.bubble-text-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    z-index: 10;
    order: 1;
}

.bubble-text {
    font-size: 0.8em;
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: center;
    z-index: 20;
    order: 2;
}

.bubble-date {
    font-size: 0.7em;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
	position : relative;
	margin-top: 5px;
    order: 3;
}

.views-counter {
    font-size: 0.8em;
    color: #fff;
    position : relative;
	margin-top: -6px; /* Ajuste la valeur négative selon le besoin */
    font-weight: bold;
    order: 4;
}

/* Animations et effets */
.pulse-effect {
    /*animation: pulse var(--pulse-duration, 4s) infinite alternate;*/
}

.zoom-on-hover:hover {
    z-index: 100;
    transform: scale(1.1) !important;
    /*box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);*/
}

.blur-back {
    filter: blur(2px);
    opacity: 0.7;
}

.bubble-clicked {
    /*animation: bubble-click 0.6s forwards;*/
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    width: 100%;
    height: 100%;
    transform: scale(0);
    animation: ripple 0.6s linear;
}

.futuristic-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 40px;
}

.futuristic-loader span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    /*animation: loader 1.5s infinite ease-in-out;*/
}

.futuristic-loader span:nth-child(2) {
    /*animation-delay: 0.2s;*/
}

.futuristic-loader span:nth-child(3) {
    /*animation-delay: 0.4s;*/
}


@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/***************************************************/

/* Conteneur principal - EN HAUT À DROITE */

#messages-container {
    position: fixed;
    top: 80px;
    right: 10px;
    width: 300px;
    height: 1200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    perspective: 1200px;
	 z-index: 1000;
	 
}

/* Messages individuels */
.message-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 2s ease-in-out, transform 10s linear;
    transform: translateY(50px);
    position: relative;
}

/* Animation d'apparition fluide */
.message-item.visible {
    opacity: 1;
    transform: translateY(0px); /* On garde l'élément bien en place */
    transition: opacity 1s ease-in-out, transform 1s ease-out;
}

/* Animation de disparition douce */
.message-item.fade-out {
    opacity: 0;
    transform: translateY(-30px) scale(0.9); /* Légère réduction et déplacement fluide */
    transition: opacity 1.5s ease-out, transform 1.5s ease-in-out;
}



/* Image centrée */
.message-item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

/* Texte centré sous l'image */
.message-text {
    font-size: 14px;
    color: white;
    font-weight: normal;
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
    width: 100%;
    max-width: 250px;
    line-height: 1.4;
}

.message-item {
    /* Vos styles existants */
    margin-bottom: 20px; /* Ajouter cette ligne pour espacer les messages */
}





/**********************************************************************************/
/********************************** CONNEXTION ************************************/
.connexion-card {
    background: #ffffffdb; /* Fond blanc */
    padding: 20px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
    display: flex; /* Mise en page flexible */
    flex-direction: column; /* Organisation en colonne */
    align-items: center; /* Alignement horizontal au centre */
    justify-content: center; /* Alignement vertical au centre */
	width: 60%;
	margin-left: auto;
    margin-right: auto;
	
}*

/* Effet au survol des cartes */
.connexion-card:hover {
   transform: scale(1.03); /* Agrandit légèrement la carte de 3% lorsqu'on la survole */
	
}

.connexion-card h1 {
    color: #234357;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Anurati', sans-serif;
	z-index: 100
}
/************************************* FIN CONNEXION *********************************/


/**********************************************************************************/
/********************************* INSCRIPTION************************************/
.inscription-card {
    background: #ffffffdb; /* Fond blanc */
    padding: 20px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
    display: flex; /* Mise en page flexible */
    flex-direction: column; /* Organisation en colonne */
    align-items: center; /* Alignement horizontal au centre */
    justify-content: center; /* Alignement vertical au centre */
	width: 60%;
	margin-left: auto;
    margin-right: auto;
	
}*

/* Effet au survol des cartes */
.inscription-card:hover {
   transform: scale(1.03); /* Agrandit légèrement la carte de 3% lorsqu'on la survole */
	
}

.inscription-card h1 {
    color: #234357;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Anurati', sans-serif;
	z-index: 100
}
/*************************************** FIN INSCRIPTION ***************************************/


/***********************************************************************************/
/**************************** EFFET ETOILE *****************************************/
.background-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
}

.background-stars svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.star {
    animation: twinkle 20s infinite;
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}
	
/*************************** FIN EFFET ETOILE *****************************************/

	
/**************************************************************/	
/******************************** BANDEAU  ********************/

/* Styles du header */
.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: #254e67;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-nav-left {
    display: flex;
    align-items: center;
}

.header-logo {
    font-family: 'Anurati', sans-serif;
    color: white;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

.header-nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Style du menu de navigation */
.header-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
    align-items: center;
}

.header-nav-item {
    display: flex;
    align-items: center;
    margin: 0 5px;
}

.header-nav-link {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #307299;
    transition: background-color 0.3s ease;
}

.header-nav-link:hover {
    background-color: #428eb5;
}

/* Style des boutons de navigation */
.header-nav-button {
    display: inline-block;
	width: auto; /* Largeur fixe pour tous les boutons */
    padding: 10px 20px; /* Plus d'espace intérieur */
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #307299;
    color: white;
    text-decoration: none;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

.header-nav-button:hover {
    background-color: #428eb5;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Variante bouton primaire */
.header-nav-button-primary {
    background-color: #65a9cb;
}

.header-nav-button-primary:hover {
    background-color: #9bc6de;
}

/* Style du texte de bienvenue */
.header-welcome {
    color: white;
    padding: 8px;
    font-weight: 500;
}

.header-burger {
    display: none;
    cursor: pointer;
    z-index: 500;
}

.header-burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

/* Animation du burger quand actif */
.header-burger.active div:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.header-burger.active div:nth-child(2) {
    opacity: 0;
}

.header-burger.active div:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}




/***************************************************************************/
/****************************** FORMULAIRE GENERAL  ********************/

/* Centrage des champs de formulaire */
form {
    display: flex; /* Mise en page flexible */
    flex-direction: column; /* Organisation en colonne */
    align-items: center; /* Alignement au centre */
    width: 80%; /* Largeur totale */
	margin-left: auto;
    margin-right: auto;
}

/* Styles des champs de formulaire et des boutons */
form input, form button {
    width: 80%; /* Largeur de 80% du conteneur */
    padding: 9px; /* Espacement interne */
    margin: 1px 0; /* Marge autour des éléments */
    font-size: 16px; /* Taille du texte */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
    background-color: white; /* Fond blanc */
    color: #333; /* Couleur du texte */
    appearance: none; /* Suppression des styles par défaut */
    -webkit-appearance: none; /* Suppression pour les navigateurs Webkit */
    -moz-appearance: none; /* Suppression pour Firefox */
}

/* Style spécifique pour les listes déroulantes */
form select {
    width: 85%; /* Largeur de 85% du conteneur */
    min-width: 100px; /* Largeur minimale */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    margin: 5px 0; /* Marge autour */
	
}

form textarea {
    width: 80%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
    margin: 0px 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
	
}

/* Style des labels */

/* Boutons du formulaire */
form button {
    background-color: #234357; /* Bleu foncé */
    color: white; /* Texte blanc */
    cursor: pointer; /* Curseur interactif */
    border: none; /* Suppression de la bordure */
    transition: background 0.3s ease-in-out; /* Animation fluide */
    font-size: 16px;
	margin: 15px;
}

/* Effet au survol du bouton */
form button:hover {
    background-color: #307299; /* Changement de couleur */
}

form .p {
    margin: 0;
    padding: 0;
}

form .char-counter {
	font-size: 12px;
    color: #307299 !important;
    margin: 0; /* Supprime toute marge */
    text-align: left;
    width: 85%;
    align-self: flex-start;
	margin-left: 7.5%;
}

form .char-counter.warning {
	font-size: 12px !important;
    color: #ff0000 !important;
}


/* Bouton personnalisé de couleur grise */
form .custom-bouton-label {
    display: inline-block; /* Permet au bouton de rester en ligne */
    padding: 5px; /* Ajoute un espacement intérieur de 5px */
    background-color: #e7f1f7; /* Définit un fond gris clair */
    border: 1px solid #ccc; /* Ajoute une bordure grise */
    border-radius: 3px; /* Arrondit les coins du bouton */
    cursor: pointer; /* Change le curseur en pointeur pour indiquer qu'il est cliquable */
    color: #13232f; /* Définit la couleur du texte en noir */
    text-decoration: none; /* Supprime le soulignement du texte */
}

/* Styles pour les liens à l'intérieur du bouton personnalisé */
form .custom-bouton-label a {
    color: #13232f; /* Définit la couleur du texte en noir */
    text-decoration: none; /* Supprime le soulignement du texte */
}

form .custom-bouton-label a:hover {
    color: #428eb5; /* Bleu moyen (niveau 500) pour un bel effet au survol */
    text-decoration: none; /* Supprime le soulignement au survol */
}

form .custom-bouton-label:hover {
    background-color: #f4f8fb; /* Bleu clair (200) pour un effet subtil au survol */
    color: #13232f; /* Assure que la couleur du texte reste la même */
}


form .custom-file-input {
	position: relative;
	overflow: hidden;
	display: inline-block;
	cursor: pointer;
	background-color: #f0f0f0;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	color: #333;
}

form .custom-file-input {
    width: 80%;
    margin: 10px 0;
}	

form .custom-file-input:hover {
	background-color: #e6e6e6;
}
form .custom-file-input input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
}

form .image-preview {
    width: 85%;
    margin: 20px 0;
    text-align: center;
}

form .image-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-top: 10px;
}
/*****************************FIN FORMULAIRE GENERAL***********************/


/*************************************************************************/
/****************** BOUTON FILTRE CREER UN MESSAGE **********************/
.filters button {
    background-color: #428eb5;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
    font-size: 14px;
    transition: background-color 0.2s;
}

.filters button:hover {
    background-color: #9bc6de;
}

.filters delete-btn {
    background-color: #9bc6de;
}

.filters delete-btn:hover {
    background-color: #9bc6de;
}
/******************************** FIN Bouton Filtre****************************************/

/*******************************************************************************************/
/* 🌟 Groupe des boutons futuristes */
.filter-buttons .button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 0;
}

/* 🌌 Style de base pour tous les boutons futuristes */
.filter-buttons button {
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1); /* Fond légèrement transparent */
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2);
}

/* 🟢 Style pour le bouton "visible" */
.filter-buttons button[value="visible"] {
    border-color: #00ff00;
    box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}

.filter-buttons button[value="visible"]:hover {
    background-color: rgba(0, 255, 0, 0.3);
    box-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00;
}

/* 🟠 Style pour le bouton "moderation_en_cours" */
.filter-buttons button[value="moderation_en_cours"] {
    border-color: #ffcc00;
    box-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00;
}

.filter-buttons button[value="moderation_en_cours"]:hover {
    background-color: rgba(255, 204, 0, 0.3);
    box-shadow: 0 0 15px #ffcc00, 0 0 30px #ffcc00;
}

/* 🔵 Style pour le bouton "approuve" */
.filter-buttons button[value="approuve"] {
    border-color: #0099ff;
    box-shadow: 0 0 10px #0099ff, 0 0 20px #0099ff;
}

.filter-buttons button[value="approuve"]:hover {
    background-color: rgba(0, 153, 255, 0.3);
    box-shadow: 0 0 15px #0099ff, 0 0 30px #0099ff;
}

/* 🔴 Style pour le bouton "refuse" */
.filter-buttons button[value="refuse"] {
    border-color: #ff0033;
    box-shadow: 0 0 10px #ff0033, 0 0 20px #ff0033;
}

.filter-buttons button[value="refuse"]:hover {
    background-color: rgba(255, 0, 51, 0.3);
    box-shadow: 0 0 15px #ff0033, 0 0 30px #ff0033;
}

/* ✨ Ajout d'un effet pulsation futuriste */
@keyframes neonGlow {
    0% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
    100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
}

.filter-buttons button {
    animation: neonGlow 2s infinite alternate;
}



/*************************************************************************



/************************************************************************
/* ****************************** ADMIN sur 3 collones*********************************/


.ADMIN-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}


.ADMIN-container h1 {
	color: #234357;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Anurati', sans-serif;
	z-index: 100
}
/* Organisation des éléments d’un message */
.ADMIN-flex-layout {
    display: flex;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-height: 160px;
    padding: 10px;
    width: 70%; /* Réduction à 60% */
    margin-left: auto; /* Centre le layout */
    margin-right: auto; /* Centre le layout */
    box-sizing: border-box;
}

/* Colonne de l'image */
.ADMIN-flex-layout .image {
    flex: 0 0 150px;  /* Réduit de 300px à 200px */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.ADMIN-flex-layout .image img {
    max-width: 100%;
    height: 100%;  /* Hauteur fixe de 150px */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 5px;
}

.ADMIN-flex-layout .image-caption {
    width: 100%;
    text-align: left;
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

.ADMIN-flex-layout .image-caption p {
    margin: 2px 0;
    line-height: 1.1;
}

.ADMIN-flex-layout .image-caption p:first-child {
    margin-bottom: 0;
}

.ADMIN-flex-layout .image-caption p:last-child {
    margin-top: 0;
}

/* Colonne du texte */
.ADMIN-flex-layout .text {
    flex: 1;
    padding: 8px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
	line-height: 0.8;
    font-size: 12px;
}

/* Style pour les cartes dans liste_messages */
.ADMIN-flex-layout .map {
    flex: 0 0 250px;
    padding: 5px;
    overflow: hidden;  /* Remis à hidden */
    position: relative;
    width: 250px;     /* Largeur fixe */
    min-height: 180px; /* Hauteur minimale */
}

/* Style spécifique pour le div contenant la carte Leaflet */
.ADMIN-flex-layout .map div[id^="map-"] {
    width: 100%;
    height: 180px !important;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
    z-index: 10;
}

/* Style pour les contrôles Leaflet */
.ADMIN-flex-layout .map .leaflet-control-container {
    z-index: 20;
}

/* Style pour les tuiles Leaflet */
.ADMIN-flex-layout .map .leaflet-tile-pane {
    z-index: 30;
}

/* Style des paragraphes dans la section texte */
.ADMIN-flex-layout .text p {
    margin: 4px 0;
	line-height: 1.1;
    font-size: 14px;
}

/* Style des titres */
.ADMIN-flex-layout .text strong {
    color: #333;
    font-weight: 600;
	line-height: 1.1;
    font-size: 14px;
}


/* Textarea auto-redimensionnable */
.ADMIN-flex-layout .auto-resize-textarea {
    width: 95%;
    min-height: 40px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    margin: 5px 0;
	line-height: 1.1;
    font-size: 14px;
}

/* Style des hashtags */
.ADMIN-flex-layout .hashtag {
    display: inline-block;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
    margin: 2px;
    color: #666;
	line-height: 1.1;
    font-size: 14px;
}

/* Conteneur principal avec CSS Grid */
.ADMIN-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Messages container */
.ADMIN-messages-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espace entre les messages */
}

.moderation-text {
    width: calc(100% - 20px); /* Évite que le textarea touche les bords */
    height: 40px;
    margin-top: 10px; /* Ajoute un espace au-dessus */
    margin-bottom: 15px; /* Ajoute un espace en dessous */
    padding: 10px; /* Ajoute un espace intérieur pour éviter que le texte touche la bordure */
    border: 1px solid #ccc; /* Ajoute une bordure plus douce */
    border-radius: 5px; /* Arrondi les coins */
    background-color: #f9f9f9; /* Améliore la lisibilité */
    resize: vertical; /* Permet de redimensionner uniquement verticalement */
    display: block; /* Force le textarea à être sur une ligne distincte */
}

.moderation-history {
    width: calc(100% - 20px); /* Même correction que pour le champ de texte */
    height: auto;
    min-height: 50px; /* Définit une hauteur minimale */
	max-height: 120px; /* ⬅️ Empêche une hauteur excessive */
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
    border: 1px solid #aaa; /* Légèrement plus foncé pour distinguer */
    background-color: #fff; /* Fond blanc pour l'historique */
    white-space: pre-line; /* ✅ Corrige l'affichage des sauts de ligne et tabulations */
    overflow-y: auto; /* Permet un défilement si trop de contenu */
}
/************************************FIN ADMIN******************************/


/***************************************************************************/
/**************************** LISTE MESSAGE **********************************/

/* S'assurer que .card a une position relative pour contenir l'avatar */
.liste-message-card-avatar {
    position: relative; /* ✅ Permet à .image-avatar de rester dans .card */
    display: block; /* ✅ Supprime tout effet `flex` qui poserait problème */
    padding-top: 80px; /* ✅ Ajuste l'espace pour l'avatar si nécessaire */
	/*background: #ffffffdb; /* Fond blanc */
    
    /*border-radius: 8px; /* Coins arrondis */
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
    flex-direction: column; /* Organisation en colonne */
    align-items: center; /* Alignement horizontal au centre */
    justify-content: center; /* Alignement vertical au centre */
	width: 60%;
	margin-left: auto;
    margin-right: auto;
	z-index: 11;
	 
}


.liste-message-card-avatar h1 {
    color: #234357;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Anurati', sans-serif;
	z-index: 101
}



.liste-message-card-avatar.message-categorie {
    text-align: left; /* Aligne le texte à gauche */
    margin-left: 0; /* Assure qu'il commence bien à gauche */
    width: 100%; /* S'assure qu'il occupe toute la largeur disponible */
    display: block; /* Évite les comportements inline non souhaités */
}


/* Positionner l'avatar à l'intérieur de .card */
.liste-message-image-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px;
    z-index: 12;
    border-radius: 50%;
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
}

/* Ajustement de la prévisualisation de l'image */
.liste-message-image-preview-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none; /* ✅ Désactive tous les clics sur cet élément */
}


/* Style de l'image */
.liste-message-image-preview-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
	z-index: 13;
}



@keyframes color-glow {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Jaune Or */
    25% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.7); } /* Bleu Violet */
    50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.8); } /* Magenta */
    75% { box-shadow: 0 0 20px rgba(75, 0, 130, 0.7); } /* Indigo */
    100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Retour au Jaune Or */
}

/* Effet de scintillement aléatoire */
@keyframes flicker {
    0% { opacity: 1; }
    20% { opacity: 0.9; }
    40% { opacity: 1; }
    60% { opacity: 0.8; }
    80% { opacity: 1; }
    100% { opacity: 0.9; }
}
/***********************************************************************************************/

/***********************************************************************************************/
/* ************************************* LISTE MESSAGES Message sur 3 colonnes *****************/
/* Organisation des éléments d’un message */
/* Conteneur principal des messages */
.liste-message-flex-layout {
    display: flex;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 5px;
    height: auto;
    padding: 0px;
	box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
}

/* CORRECTION DES STYLES POUR LES IMAGES DANS LE LAYOUT 3 COLONNES */

.liste-message-flex-layout .image {
    flex: 0 0 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: auto;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    position: relative;
    border-radius: 0 ; /* Supprime l'arrondi au niveau du conteneur */
	z-index: 14;
	
}

.liste-message-flex-layout .image .image-caption {
    width: 100%;
	font-size: 12px;
    color: white; /* ✅ Texte en blanc */
    text-align: left; /* ✅ Alignement à gauche */
    position: absolute;
    top: -13px; /* ✅ Ajuste la distance par rapport au haut */
    left: 0px; /* ✅ Positionne le texte à 5px du bord gauche */
    right: 0px; /* ✅ Ajoute une marge de 5px à droite */
    background: rgba(0, 0, 0, 0.5); /* ✅ Fond semi-transparent pour lisibilité */
    padding: 10px 10px;
    border-radius: 0px; /* Optionnel : arrondi du fond */
    z-index: 200;
}


.liste-message-flex-layout .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	transform: scale(1.1);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 !important;; /* Supprime l'arrondi au niveau de l'image */
}


/* Colonne du texte */
.liste-message-flex-layout .text {
    flex: 1;
    padding: 8px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    line-height: 1.2;
    font-size: 14px;
}

/* 🗺️ Conteneur de la carte */
.liste-message-flex-layout .map {
    flex: 0 0 200px; /* Largeur définie */
    width: 200px; /* Assure une taille uniforme */
    height: auto; /* Assure une hauteur identique à celle de l’image */
    margin: 0;
    overflow: hidden; /* Empêche toute déformation */
    position: relative;
    z-index: 15;
    border-radius: 0; /* ❌ Suppression des arrondis */
}

/* 🎯 Forcer la carte Leaflet à occuper toute la div */
.liste-message-flex-layout .map div[id^="map-"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0; /* ❌ Suppression des arrondis */
}

.liste-message-flex-layout.leaflet-container {
    z-index: 15;
}


/* Style des paragraphes dans la section texte */
.liste-message-flex-layout .text p {
    margin: 4px 0;
	line-height: 1.1;
    font-size: 14px;
}

/* Style des titres */
.liste-message-flex-layout .text strong {
    color: #333;
    font-weight: 600;
	line-height: 1.1;
    font-size: 14px;
}




/* Textarea auto-redimensionnable */
.liste-message-flex-layout .auto-resize-textarea {
    width: 95%;
    min-height: 40px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    margin: 5px 0;
	line-height: 1.1;
    font-size: 14px;
	background: #f9f9f9;
	outline: none;
}

.styled-textarea {
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        resize: none;
        outline: none;
    }


/* Style des hashtags */
.liste-message-flex-layout .hashtag {
    display: inline-block;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
    margin: 2px;
    color: #666;
	line-height: 1.1;
    font-size: 14px;
}

.liste-message-flex-layout button {
    background-color: #234357;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px;
    font-size: 14px;
    transition: background-color 0.2s;
}

.liste-message-flex-layout button:hover {
    background-color: #dce0e2;
    color: black;
}


.liste-message-flex-layout a {
    text-decoration: none; /* ✅ Supprime le soulignement */
}

.liste-message-flex-layout .view-url {
    padding: 5px 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-weight: 200;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1); /* Fond légèrement transparent */
    border-color: #00ff00;
   
	color: black;
}

.liste-message-flex-layout .view-url:hover {
    background-color: rgba(0, 255, 0, 0.3);
    
}


/* ************************************* FIN  LISTE MESSAGE sur 3 colonnes USER ********************** */


/**************************************************************************
/**************************** CREER UN MESSAGE ****************************

/* S'assurer que .card a une position relative pour contenir l'avatar */
.creer-message-card-avatar {
    position: relative; /* ✅ Permet à .image-avatar de rester dans .card */
    display: block; /* ✅ Supprime tout effet `flex` qui poserait problème */
    padding-top: 80px; /* ✅ Ajuste l'espace pour l'avatar si nécessaire */
	background: #ffffffdb; /* Fond blanc */
    
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
    flex-direction: column; /* Organisation en colonne */
    align-items: center; /* Alignement horizontal au centre */
    justify-content: center; /* Alignement vertical au centre */
	width: 60%;
	margin-left: auto;
    margin-right: auto;
	z-index: 16;
	box-shadow: 0 0 100px rgba(0, 255, 255, 0.8);
}


.creer-message-card-avatar.message-categorie {
    text-align: left; /* Aligne le texte à gauche */
    margin-left: 0; /* Assure qu'il commence bien à gauche */
    width: 100%; /* S'assure qu'il occupe toute la largeur disponible */
    display: block; /* Évite les comportements inline non souhaités */
}


/* Positionner l'avatar à l'intérieur de .card */
.creer-message-image-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px;
    z-index: 17;
    border-radius: 50%;
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
}

/* Ajustement de la prévisualisation de l'image */
.creer-message-image-preview-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
	pointer-events: none;
}

/* Style de l'image */
.creer-message-image-preview-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
}

@keyframes color-glow {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Jaune Or */
    25% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.7); } /* Bleu Violet */
    50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.8); } /* Magenta */
    75% { box-shadow: 0 0 20px rgba(75, 0, 130, 0.7); } /* Indigo */
    100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Retour au Jaune Or */
}

/* Effet de scintillement aléatoire */
@keyframes flicker {
    0% { opacity: 1; }
    20% { opacity: 0.9; }
    40% { opacity: 1; }
    60% { opacity: 0.8; }
    80% { opacity: 1; }
    100% { opacity: 0.9; }
}

/* Style pour la carte */
.creer-message-card-avatar #map {
    width: 85%;
    height: 400px;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 18;
}

.creer-message-image-preview-avatar.leaflet-container {
    z-index: 19;
}


/**************************************************************************
/**************************** MODIFIER UN MESSAGE ****************************

/* S'assurer que .card a une position relative pour contenir l'avatar */
.modifier-message-card-avatar {
    position: relative; /* ✅ Permet à .image-avatar de rester dans .card */
    display: block; /* ✅ Supprime tout effet `flex` qui poserait problème */
    padding-top: 80px; /* ✅ Ajuste l'espace pour l'avatar si nécessaire */
	background: #ffffffdb; /* Fond blanc */
    
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
    flex-direction: column; /* Organisation en colonne */
    align-items: center; /* Alignement horizontal au centre */
    justify-content: center; /* Alignement vertical au centre */
	width: 60%;
	margin-left: auto;
    margin-right: auto;
	z-index: 20
}

.modifier-message-card-avatar h1 {
    color: #234357;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Anurati', sans-serif;
	z-index: 100
}


.modifier-message-card-avatar.message-categorie {
    text-align: left; /* Aligne le texte à gauche */
    margin-left: 0; /* Assure qu'il commence bien à gauche */
    width: 100%; /* S'assure qu'il occupe toute la largeur disponible */
    display: block; /* Évite les comportements inline non souhaités */
}


/* Positionner l'avatar à l'intérieur de .card */
.modifier-message-image-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px;
    z-index: 21;
    border-radius: 50%;
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
}

/* Ajustement de la prévisualisation de l'image */
.modifier-message-image-preview-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
	pointer-events: none;
}

/* Style de l'image */
.modifier-message-image-preview-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
}

@keyframes color-glow {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Jaune Or */
    25% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.7); } /* Bleu Violet */
    50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.8); } /* Magenta */
    75% { box-shadow: 0 0 20px rgba(75, 0, 130, 0.7); } /* Indigo */
    100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Retour au Jaune Or */
}

/* Effet de scintillement aléatoire */
@keyframes flicker {
    0% { opacity: 1; }
    20% { opacity: 0.9; }
    40% { opacity: 1; }
    60% { opacity: 0.8; }
    80% { opacity: 1; }
    100% { opacity: 0.9; }
}

/* Style pour la carte */
.modifier-message-card-avatar #map {
    width: 85%;
    height: 400px;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1;
}

.modifier-message-image-preview-avatar.leaflet-container {
    z-index: 1;
}

/*************************************************************************/
/********************** NOUVEAU PROFIL COMPLET ***************************/

/* S'assurer que .card a une position relative pour contenir l'avatar */
.profil-card-avatar {
    position: relative; /* ✅ Permet à .image-avatar de rester dans .card */
    display: block; /* ✅ Supprime tout effet `flex` qui poserait problème */
    padding-top: 80px; /* ✅ Ajuste l'espace pour l'avatar si nécessaire */
	background: #ffffffdb; /* Fond blanc */
    
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
    flex-direction: column; /* Organisation en colonne */
    align-items: center; /* Alignement horizontal au centre */
    justify-content: center; /* Alignement vertical au centre */
	width: 60%;
	margin-left: auto;
    margin-right: auto;
	z-index: 10;
	box-shadow: 0 0 100px rgba(0, 255, 255, 0.8);
}

.profil-card-avatar h1 {
    color: #234357;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Anurati', sans-serif;
	z-index: 100
}

.profil-card-avatar.message-categorie {
    text-align: left; /* Aligne le texte à gauche */
    margin-left: 0; /* Assure qu'il commence bien à gauche */
    width: 100%; /* S'assure qu'il occupe toute la largeur disponible */
    display: block; /* Évite les comportements inline non souhaités */
}


/* Positionner l'avatar à l'intérieur de .card */
.profil-image-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px;
    z-index: 5;
    border-radius: 50%;
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
}

/* Ajustement de la prévisualisation de l'image */
.profil-image-preview-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

/* Style de l'image */
.profil-image-preview-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: color-glow 4s infinite alternate ease-in-out, flicker 3s infinite ease-in-out;
}

@keyframes color-glow {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Jaune Or */
    25% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.7); } /* Bleu Violet */
    50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.8); } /* Magenta */
    75% { box-shadow: 0 0 20px rgba(75, 0, 130, 0.7); } /* Indigo */
    100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } /* Retour au Jaune Or */
}

/* Effet de scintillement aléatoire */
@keyframes flicker {
    0% { opacity: 1; }
    20% { opacity: 0.9; }
    40% { opacity: 1; }
    60% { opacity: 0.8; }
    80% { opacity: 1; }
    100% { opacity: 0.9; }
}

/************************************************************************/	
/******************************* MESSAGES Public ***********************/	




/*******************************************************************************************/
/**************************************** GSM ***********************************************/	
/* Applique ces styles uniquement lorsque la largeur de l'écran est de 768px ou moins */
@media (max-width: 1024px) {


/*******************Bandeau GSM***********************/	
  .header-burger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 5px;
    }

    .header-nav-menu {
        display: none;
        position: fixed;
        top: 60px;
        right: 0;
        width: 250px;
        background-color: #254e67;
        padding: 20px;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 999;
    }

    .header-nav-menu.active {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .header-nav-item {
        margin: 10px 0;
        width: 100%;
    }

    .header-nav-button {
        width: 100%;
        margin: 5px 0;
        box-sizing: border-box;
    }

    /* Ajustement pour la transition */
    .header-nav-menu {
        transition: transform 0.3s ease-in-out;
        transform: translateX(100%);
    }

    .header-nav-menu.active {
        transform: translateX(0);
    }
/*******************FIN Bandeau GSM***********************/	

	
/****************************************************************/	
/********************** SUITE ************************************/	

    /* 📌 Convertir l'affichage en 1 colonne */
    .liste-message-flex-layout {
        flex-direction: column; /* Passe en colonne */
        align-items: center; /* Centre les éléments */
        text-align: center; /* Centre le texte */
        height: auto;
        padding: 10px;
    }

    /* 📸 Ajustement de l’image */
    .liste-message-flex-layout .image {
        width: 100%; /* Pleine largeur */
        height: auto; /* Hauteur ajustable */
        flex: none; /* Supprime la largeur fixe */
    }

    .liste-message-flex-layout .image img {
        width: 100%;
        height: auto; /* Permet d’éviter la distorsion */
        position: static; /* Supprime le positionnement absolu */
        transform: none; /* Enlève le zoom sur mobile */
    }

/* 🗺️ Ajustement de la carte */
    .liste-message-flex-layout .map {
        width: 100%;
        height: 200px; /* Hauteur ajustée pour mobile */
        flex: none;
    }

	
}