:root {
  --primary-color: #073332;
  --secondary-color: #1f4a49;
  --accent-color: #9b9c28;
  --bg-color: #073332;
  --text-color: #ffffff;
}

body.dark-mode {
  --bg-color: #073332;
  --text-color: #ffffff;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.top-nav {
  display: none;
}

.header {
  position: relative;
  height: 230px !important; /* Augmentée pour faire descendre l'image plus bas */
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  width: 100vw; /* Prend toute la largeur de l'écran */
  left: 50%; /* Centrage */
  transform: translateX(-50%); /* Compensation pour le centrage */
  overflow: hidden; /* Cache tout débordement */
  border: none !important; /* Supprime toutes les bordures */
}

@media (max-width: 600px) {
  .header {
    height: 150px; /* Réduit la hauteur sur mobile */
  }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.logo {
  width: 50px;
  height: auto;
}

.settings {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.settings i {
  font-size: 24px;
}

.ad-banner {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.ad-text {
  max-width: 100%;
  overflow: hidden;
}

.banner-text {
  font-family: 'Times New Roman', Times, serif;
}

.ad-text h2 {
  margin: 0;
  font-size: 18px;
  text-align: left;
}

.ad-text p {
  margin: 5px 0 0;
  font-size: 14px;
  text-align: left;
  line-height: 1.4;
}

.image-card {
  width: 95%; /* Prend 90% de la largeur parente (laisse 5% de marge de chaque côté) */
  max-width: 300px !importan; /* Largeur maximale (ajustable) */
  height: 300px !important; /* Hauteur fixe = largeur pour un carré parfait */
  margin: 20px auto; /* Espacement vertical + centrage horizontal */
  border: 2px solid #000;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--secondary-color); /* Fond uni si l'image ne couvre pas tout */
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Couvre tout l'espace sans déformation */
}

.association-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--primary-color); /* Fond #073332, comme Boîte de réception */
  border: 2px solid var(--accent-color); /* Contour jaune #9b9c28 */
  border-radius: 10px;
  margin: 10px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  width: calc(100% - 40px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre comme Boîte de réception */
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 10px;
}


.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: var(--secondary-color);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  color: white;
    width: calc(100% - 40px);
    margin: 10px;


}
.item:nth-child(-n+3) {
  width: 30px; /* Largeur fixe pour le cercle */
  height: 30px; /* Hauteur égale à la largeur pour former un cercle */
  border-radius: 50%; /* Rend l'élément rond */
  display: inline-flex; /* Alignement horizontal */
  margin: 0 10px; /* Espacement entre les cercles */
}
/* Ajustement pour l'icône et le texte dans les cercles */
.item:nth-child(-n+3) .icon {
  font-size: 1em;
  margin-bottom: 0;
}

/* Nouveau style pour les cercles + texte en dessous */
.item:nth-child(-n+3) {
  width: 70px; 
  height: 70px;
  border-radius: 50%;
  display: flex; /* Changé de inline-flex à flex */
  flex-direction: column; /* Empile verticalement */
  align-items: center; /* Centre horizontalement */
  margin: 0 10px 25px; /* Ajout de marge en bas pour le texte */
  position: relative; /* Nécessaire pour le positionnement absolu du texte */
} 

/* Style pour le texte sous les cercles */
.item.circle-item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 1% 25px; /* 1% d'espace entre les boutons */
  position: relative;
  padding: 0; /* Retire le padding pour un cercle parfait */
}
.item.circle-item .item-text {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  width: 100%;
  text-align: center;
  font-size: 0.8em;
  white-space: nowrap;
}
/* Ajustement de l'icône */
.item.circle-item .icon {
  font-size: 1.5em;
  margin-bottom: 0;
}
.item-text {
  font-size: 16px;
}

.icon {
  font-size: 20px;
  color: white;
}

main {
  margin-bottom: 80px;
  padding: 1rem;
  min-height: calc(100vh - 80px);
}

.page {
  display: none;
}

.page.active {
  display: block;
}

#personal {
  font-family: 'Open Sans', sans-serif !important;
}

/* Styles spécifiques pour la page personnelle */
#personal .main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
}

#personal .top-section {
  height: 250px;
  background-color: var(--accent-color); /* Section verte */
  position: relative;
  border-bottom: 3px solid var(--secondary-color); /* Contour inférieur */
}

#personal .profile-container {
  position: absolute;
  bottom: -155px !important; /* Forcé pour centrer l'icône */
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center;
  z-index: 10 !important; /* Assure que l'icône est au-dessus */
}

#personal .profile-icon {
  width: 150px; /* Changé de 120px */
  height: 150px; /* Changé de 120px */
  border-radius: 50%;
  border: 4px solid var(--secondary-color);
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#personal .profile-icon svg {
  width: 100px; /* Changé de 80px */
  height: 100px; /* Changé de 80px */
}

#personal .user-name {
  color: var(--text-color);
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
}

#personal .bottom-section {
  flex: 1;
  background-color: transparent !important;
  padding-top: 125px !important; /* Forcé pour aligner la frontière */
}

#personal .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

#personal h1 {
  color: var(--accent-color);
  font-size: 2rem; /* Changé de 1.6rem */
  text-align: center;
  margin-bottom: 15px;
}

#personal h2 {
  color: var(--accent-color);
  font-size: 1.6rem; /* Changé de 1.3rem */
  text-align: center;
  margin-bottom: 10px;
}

#personal .section {
  background-color: #2a4d45; /* Fond légèrement plus clair que secondary-color */
  border: 2px solid var(--accent-color); /* Contour visible autour des sections */
  border-radius: 10px;
  padding: 15px;
  margin: 0 10px 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

#personal .info-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 10px;
}

#personal .info-card {
  background-color: #3a5f56; /* Fond des cartes d'info */
  border: 2px solid var(--accent-color); /* Contour visible autour des infos */
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

#personal .info-card p {
  margin: 5px 0;
  font-size: 0.9rem;
  color: var(--text-color);
}

#personal .info-card strong {
  color: #a8e6cf; /* Couleur claire pour les labels */
  display: block;
  font-size: 0.85rem;
}

#personal .cotisations-section {
  margin-bottom: 20px;
}

#personal .year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

#personal .month {
  background-color: #3a5f56;
  border: 2px solid var(--accent-color); /* Contour visible autour des mois */
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-color);
}

#personal .month.paid::after {
  content: '✔️';
  color: #a8e6cf;
  margin-left: 5px;
}

#personal .month.unpaid::after {
  content: '✖️';
  color: #ff6b6b;
  margin-left: 5px;
}

#personal .global-cotisations {
  background-color: #3a5f56;
  border: 2px solid var(--accent-color); /* Contour autour des cotisations globales */
  border-radius: 8px;
  padding: 10px;
  margin-top: 15px;
}

#personal .global-cotisations p {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin: 5px 0;
  color: var(--text-color);
}

#personal .payment-methods {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

#personal .payment-btn {
  background-color: #a8e6cf;
  color: var(--primary-color);
  padding: 10px 20px;
  border: 2px solid var(--accent-color); /* Contour autour des boutons */
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#personal .payment-btn:hover {
  background-color: #8cc7a1;
}

#personal .suggestions-section {
  margin-bottom: 20px;
}

#personal .suggestions-section textarea {
  width: calc(100% - 30px);
  padding: 10px;
  border: 2px solid var(--accent-color); /* Contour autour du textarea */
  border-radius: 8px;
  background-color: #3a5f56;
  color: var(--text-color);
  resize: vertical;
  font-size: 0.9rem;
  margin-bottom: 10px;
  
}

#personal .suggestions-section button {
  background-color: #a8e6cf;
  color: var(--primary-color);
  padding: 10px 20px;
  border: 2px solid var(--accent-color); /* Contour autour du bouton */
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#personal .suggestions-section button:hover {
  background-color: #8cc7a1;
}

#personal .logout-btn {
  display: block;
  margin: 30px auto;
  background-color: #ff6b6b;
  color: var(--text-color);
  padding: 10px 20px;
  border: 2px solid var(--accent-color); /* Contour autour du bouton de déconnexion */
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#personal .logout-btn:hover {
  background-color: #e55a5a;
}

#personal .user-role {
  color: var(--accent-color); /* Même couleur que les titres pour cohérence */
  font-size: 1.2rem;
  margin: 5px 0 20px;
  text-align: center;
}

@media (max-width: 600px) {
  #personal .top-section {
    height: 200px;
  }

  #personal .profile-icon {
  width: 120px; /* Réduit pour mobile */
  height: 120px;
}

#personal .profile-icon svg {
  width: 80px;
  height: 80px;
}

#personal .profile-container {
  bottom: -110px; /* Ajusté pour mobile */
}

  #personal .user-name {
    font-size: 1.4rem;
  }

  #personal .info-section {
    grid-template-columns: 1fr;
  }

  #personal .year-grid {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }

  #personal .section {
    margin: 0 5px 15px;
    padding: 10px;
  }

  #personal h1 {
    font-size: 1.8rem;
  }

  #personal h2 {
    font-size: 1.4rem;
  }
  /* Ligne à ajouter */
  #personal .bottom-section {
    padding-top: 90px; /* Ajouté pour aligner la frontière au centre de l'icône sur mobile */
  }
}

/* Styles pour les autres sections (inchangés) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: var(--primary-color);
  padding: 10px 0;
  border-top: 1px solid #ccc;
  z-index: 1000;
}

.nav-item {
  background: transparent !important; /* Supprime le fond */
  border: none !important; /* Supprime les bordures */
  box-shadow: none !important; /* Supprime les ombres éventuelles */
  cursor: pointer;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  font-family: 'Open Sans', sans-serif;
  padding: 8px;
  border-radius: 5px;
}

.nav-item.active {
  color: var(--accent-color);
}

.nav-icon i {
  font-size: 20px;
  color: white;
}

/* Styles pour le bouton du chatbot */
.chatbot-button {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background: var(--accent-color);
  border-radius: 50%;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1000; /* Assure que le bouton reste au-dessus */
}

/* Conteneur du champ secret */
#secret-entry {
  display: none;
  position: relative; /* Position relative au conteneur parent */
  width: 90%; /* Largeur réduite pour rester dans le cadre */
  max-width: 1000px; /* Largeur maximale */
  margin: 5px auto; /* Centrage horizontal */
  padding: 15px;
  background-color: var(--secondary-color);
  border-radius: 8px;
  box-sizing: border-box; /* Inclut padding dans le calcul de la largeur */
  text-align: center;
}

/* Quand il est visible */
#secret-entry.visible {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* Champ de saisie */
#secret-password {
  width: calc(100% - 30px); /* Largeur adaptative avec padding */
  padding: 12px 15px;
  margin: 0 auto 10px; /* Centrage */
  background-color: var(--bg-color);
  border: 2px solid var(--accent-color);
  border-radius: 5px;
  color: white;
  font-size: 16px;
  display: block; /* Pour que margin auto fonctionne */
}

/* Bouton de validation */
#secret-entry button {
  background-color: var(--accent-color);
  color: var(--primary-color);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.chatbot-button:hover {
  transform: scale(1.1);
}

/* Styles pour la fenêtre du chatbot */
/* Styles pour la fenêtre du chatbot */
/* Styles pour la fenêtre du chatbot */
.chatbot-container {
  position: fixed;
  bottom: 90px; /* Décalé en bas */
  right: 20px; /* Décalé à droite */
  width: 80vw; /* 80% de la largeur de l'écran */
  height: 80vh; /* 80% de la hauteur de l'écran */
  background: url('chatbot-bg.jpg') no-repeat center center;
  background-size: cover; /* L'image couvre tout l'espace sans zoom ni coupure */
  border: 2px solid var(--accent-color); /* Contour jaune #9b9c28 */
  border-radius: 10px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre légère */
  z-index: 1000; /* Au-dessus du contenu */
  display: none; /* Caché par défaut */
  overflow: hidden; /* Empêche le débordement global */
  display: flex; /* Utilise flexbox pour organiser les enfants */
  flex-direction: column; /* Organise les enfants verticalement */
}
/* Assure que la fenêtre est visible quand ouverte */
.chatbot-container.active {
  display: block;
}

/* Styles pour l'en-tête du chatbot */
.chatbot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--primary-color);
  color: white;
  border-bottom: 2px solid var(--accent-color); /* Bordure pour séparation */
}

/* Styles pour la zone des messages */


/* Styles pour la zone des messages */
/* Styles pour la zone des messages */
.chatbot-messages {
  flex: 1; /* Prend tout l'espace disponible au-dessus des contrôles et du formulaire */
  max-height: calc(80vh - 190px) !important; /* Ajuste pour l'en-tête (~50px), contrôles (~40px), et formulaire (~50px) */
  overflow-y: auto; /* Défilement vertical pour les messages */
  padding: 1rem;
  background: rgba(42, 77, 69, 0.9); /* Vert sombre #2a4d45 avec opacité */
}

* Styles pour les messages envoyés (utilisateur) */
#chatbot-messages .chat-message.user {
  background: #a8e6cf !important; /* Vert clair pour contraste */
  color: #073332 !important; /* Texte sombre pour lisibilité */
  margin-left: auto !important; /* Aligné à droite */
  margin-right: 1rem !important; /* Marge à droite pour espacement */
  border: 2px solid var(--primary-color) !important; /* Bordure #073332 */
  border-radius: 12px 12px 0 12px !important; /* Coin inférieur droit non arrondi */
  display: block !important; /* Forcer l'affichage en bloc */
}

/* Styles pour les messages reçus (bot) */
.chat-message.bot {
  align-self: flex-start;
  background-color: #ffffff; /* Fond blanc */
  border-color: #e5e5ea; /* Bordure grise */
  color: #000; /* Texte noir */
  border-top-left-radius: 5px; /* Coin gauche supérieur moins arrondi */
}

#chatbot-controls {
  position: absolute;
  bottom: 78px; /* Position au-dessus du formulaire */
  left: 10px; /* Ajouté pour aligner à gauche */
  right: auto; /* Annule le right: 0 précédent */
  padding: 10px;
background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}



.chat-message strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.8em;
}
.chatbot-message {
  margin: 0.5rem 1rem !important; /* Marge autour de chaque message pour espacement */
  padding: 0.8rem 1.2rem !important; /* Padding interne pour effet "bulle" */
  border-radius: 12px !important; /* Coins arrondis pour effet palette */
  font-size: 1rem !important;
  line-height: 1.5 !important;
  max-width: 70% !important; /* Limite la largeur pour éviter que les messages soient trop larges */
  word-wrap: break-word !important; /* Gère les longs mots */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Ombre pour effet de bulle */
}

/* Styles pour les contrôles du chatbot (bouton Effacer) */
.chatbot-controls {
  padding: 0.5rem 1rem; /* Espacement interne */
  background: rgba(42, 77, 69, 0.9); /* Même fond que le formulaire */
  border-top: 2px solid var(--accent-color); /* Bordure pour séparation */
  text-align: right; /* Bouton à droite */
}

/* Styles pour les messages envoyés */
.sent {
  background: #a8e6cf !important; /* Vert clair pour meilleur contraste (au lieu de #9b9c28) */
  color: #073332 !important; /* Texte sombre pour lisibilité */
  margin-left: auto !important; /* Aligné à droite */
  border: 2px solid var(--primary-color) !important; /* Bordure #073332 */
  border-radius: 12px 12px 0 12px !important; /* Coin inférieur droit non arrondi pour style bulle */
}

/* Styles pour les messages reçus */
.received {
  background: #3a5f56 !important; /* Vert moyen pour contraste (au lieu de #1f4a49) */
  color: white !important; /* Texte blanc pour lisibilité */
  margin-right: auto !important; /* Aligné à gauche */
  border: 2px solid var(--accent-color) !important; /* Bordure jaune #9b9c28 */
  border-radius: 12px 12px 12px 0 !important; /* Coin inférieur gauche non arrondi pour style bulle */
}


/* Styles pour le formulaire du chatbot */
/* Styles pour le formulaire du chatbot */
/* Styles pour le formulaire du chatbot */
#chatbot-form {
  display: flex;
  padding: 1rem;
  background: rgba(42, 77, 69, 0.9); /* Vert sombre #2a4d45 avec opacité */
  position: absolute; /* Fixe le formulaire en bas */
  bottom: 0; /* Collé au bas de la fenêtre */
  left: 0; /* Aligné à gauche */
  right: 0; /* S'étend sur toute la largeur */
  border-top: 2px solid var(--accent-color); /* Bordure pour séparation */
}


#chatbot-input {
  flex-grow: 1;
  margin-right: 0.5rem;
  background: var(--secondary-color);
  color: white;
  border: 2px solid var(--accent-color); /* Bordure cohérente */
  border-radius: 8px;
  padding: 0.8rem;
  font-size: 1rem;
}


#secret-entry input {
  background: var(--secondary-color);
  color: white;
  border: 2px solid var(--accent-color); /* Bordure cohérente */
  border-radius: 8px;
  padding: 0.8rem;
  font-size: 1rem;
}

#chatbot-form button, #secret-entry button {
  background: var(--accent-color);
  color: white;
  padding: 0.8rem 1.2rem;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chat-message {
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 15px;
  margin: 5px 0;
  position: relative;
  word-wrap: break-word;
  border: 1px solid;
}

.chat-message.user {
  align-self: flex-end;
  background-color: #dcf8c6; /* Fond vert clair */
  border-color: #b3e6a1; /* Bordure verte */
  color: #000; /* Texte noir */
  border-top-right-radius: 5px; /* Coin droit supérieur moins arrondi */
}

#chatbot-messages {
  padding: 10px;
  overflow-y: auto;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#chatbot-form button:hover, #secret-entry button:hover {
  background: #8cc7a1; /* Couleur au survol pour cohérence */
}

/* Styles pour le bouton de suppression de l'historique */
.chatbot-controls {
  background: #ff6b6b;
  color: white;
  padding: 0.8rem 1.2rem;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin: 0.5rem 1rem;
}

#chatbot-messages {
  padding-bottom: 50px; /* Espace pour le bouton fixe */
}

.clear-history {
  background: none !important;
  color: var(--accent-color) !important;
    margin-right: auto !important; /* Pousse le bouton à gauche */

  border: none !important;
  padding: 8px 15px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}


.chatbot-controls .clear-history:hover {
  background: #e55a5a;
}

input, textarea, select {
  padding: 0.8rem;
  background: var(--secondary-color);
  color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.cta-button {
  background: var(--secondary-color);
  color: white;
  padding: 0.8rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
}

.cta-button:hover {
  background: var(--accent-color);
}

.search-bar {
  width: 100%;
  max-width: 400px;
  margin: 1rem auto;
  display: block;
  background: var(--secondary-color);
  color: white;
  border: 1px solid #ccc;
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}

.gallery-item {
  flex: 0 0 calc(33.333% - 15px); /* 3 colonnes avec espace */
  max-width: calc(33.333% - 15px);
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Centre le contenu de chaque item */
}

#home-gallery.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centre les éléments horizontalement */
  gap: 15px;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1200px;
}

.gallery-image {
  width: 100%;
  max-width: 100%; /* Empêche les images de déborder */
  height: auto;
  border-radius: 8px;
  display: block;
}

.member-card, .contribution-card, .event-card, .suggestion-card, .note-card, .file-card {
  background: var(--secondary-color);
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 10px;
  margin: 0.5rem 0;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab-button {
  padding: 0.5rem 1rem;
  background: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
}

.tab-button.active {
  background: var(--accent-color);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

canvas {
  max-width: 100%;
  margin: 1rem 0;
}

#video-call-container where-by {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.links-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.link-button {
  display: block;
  padding: 1rem;
  background: var(--secondary-color);
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: transform 0.3s ease;
  font-family: 'Open Sans', sans-serif;
}

.link-button:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  main {
    padding: 0.5rem;
  }

  .header {
    height: 150px;
  }

  .chatbot-container {
    width: 90%;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .image-card {
    width: 90%;
    height: 150px;
  }

  .gallery-image {
    max-width: 90%;
  }
}

#personal .info-section p {
  background-color: #3a5f56;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  padding: 10px;
  margin: 5px 0;
  font-size: 0.9rem;
  color: var(--text-color);
  text-align: left;
}

#personal .cotisations-section p {
  background-color: #3a5f56;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0;
  font-size: 0.9rem;
  color: var(--text-color);
}


/* Styles pour la page de connexion personnelle */
#personal-login .main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color); /* #073332 */
  margin: 0 !important; /* Supprime toute marge */
  padding: 0 !important; /* Supprime tout padding */
  width: 100vw; /* Couvre toute la largeur */
}

#personal-login .top-section {
  height: 250px;
  background-color: var(--accent-color); /* Vert #9b9c28 */
  position: relative;
  border-bottom: 3px solid var(--secondary-color); /* Contour inférieur */
}

#personal-login .profile-container {
  position: absolute;
  bottom: -170px !important; /* Forcé, même valeur que #personal-content */
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center;
  z-index: 10 !important;
}



#personal-login .profile-icon {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50%;
  border: 4px solid var(--secondary-color); /* Contour bleu #1f4a49 */
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#personal-login .profile-icon svg {
  width: 100px;
  height: 100px;
}

#personal-login .bottom-section {
  flex: 1;
  background-color: transparent !important; /* Bleu #1f4a49 */
  padding-top: 140px !important; /* Forcé, même valeur que #personal-content */
}

#personal-login .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

#personal-login .login-section {
  background-color: #2a4d45; /* Fond comme #personal .section */
  border: 2px solid var(--accent-color); /* Contour vert #9b9c28 */
  border-radius: 10px;
  padding: 15px;
  margin: 0 10px 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

#personal-login .login-section label {
  color: var(--text-color);
  font-size: 1rem;
  margin-bottom: 5px;
  display: block;
}

#personal-login .login-section input {
  width: calc(100% - 30px); /* Compense padding */
  margin: 5px 15px 10px 15px;
  box-sizing: border-box;
}

#personal-login .login-section button {
  background-color: #a8e6cf;
  color: var(--primary-color);
  padding: 10px 20px;
  border: 2px solid var(--accent-color); /* Contour vert */
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: auto;
  margin: 10px auto;
  display: block;
}

#personal-login .login-section button:hover {
  background-color: #8cc7a1;
}

#personal-login h2 {
  font-family: 'Open Sans', sans-serif !important;
  color: var(--accent-color);
  font-size: 1.6rem;
  text-align: center;
  margin-top: 20px; /* Ajoute espace au-dessus du titre */
  margin-bottom: 30px; /* Augmente pour plus d'espace sous le titre */
}

/* Responsive pour mobile */
@media (max-width: 600px) {
#personal-login .top-section {
  height: 200px;
  width: 100vw; /* Couvre toute la largeur */
  margin: 0 !important;
}

  #personal-login .profile-icon {
    width: 120px;
    height: 120px;
  }

  #personal-login .profile-icon svg {
    width: 80px;
    height: 80px;
  }

  #personal-login .profile-container {
    bottom: -108px !important; /* Forcé pour mobile */
  }

  #personal-login .bottom-section {
    padding-top: 120px !important; /* Forcé pour mobile */
  }

  #personal-login .login-section {
    margin: 0 5px 15px;
    padding: 10px;
  }

  #personal-login .login-section input {
    width: calc(100% - 20px); /* Compense padding mobile */
    margin: 5px 10px 10px 10px;
  }

#personal-login h2 {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 1.4rem;
  margin-top: 15px; /* Espace au-dessus pour mobile */
  margin-bottom: 25px; /* Espace en dessous pour mobile */
}
}

.gallery-title {
  text-align: center;
  width: 100%;
  margin: 20px 0 10px;
  font-size: 1.5rem;
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .gallery-item {
    flex: 0 0 calc(50% - 15px); /* 2 colonnes sur tablette */
    max-width: calc(50% - 15px);
  }
}

@media (max-width: 480px) {
  .gallery-item {
    flex: 0 0 100%; /* 1 colonne sur mobile */
    max-width: 100%;
  }
}

/* Styles pour la page des messages */
 /* Styles pour la page des messages */
/* Styles pour la page des messages */
#messages.page {
  background-color: var(--bg-color); /* Fond #073332 */
  min-height: calc(100vh - 80px);
  padding: 10px 5px; /* Réduit l'espacement latéral */

}

.messages-header-container {
max-width: 100%; /* Augmentez ce pourcentage */
  margin: 20px auto 10px; /* Réduisez les marges latérales */
  padding: 0 5px; /* Réduisez le padding */
  background: var(--primary-color); /* Fond #073332 */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

.messages-header {
  text-align: center;
  padding: 15px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-color); /* Texte #ffffff */
}

.messages-list-container {
  max-width: 92%; /* Pleine largeur */
  margin: 0 auto;
  padding: 0;
}
.messages-list .message-card {
  padding: 15px;
  border-radius: 8px;
  margin: 0 auto; /* Centrage */
background-color: #002e2d; /* Nouveau fond gris foncé pour chaque message */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre légère pour effet de bloc */
    width: 100%; /* Prend toute la largeur disponible */

}

.messages-list .message-card .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  color: #fbffb7 !important; /* Texte #ffffff */
}

.messages-list .message-card .title img {
  width: 40px; /* Taille fixe d'environ 1 cm */
  height: 40px;
  border-radius: 50%; /* Forme ronde */
  margin-right: 8px;
  object-fit: cover; /* S'assure que l'image est bien ajustée */
}

.messages-list .message-card .message {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
  color: #ffffff !important; /* Texte #ffffff */
  font-family: 'Montserrat', Arial, sans-serif;
}

.messages-list .message-card .separator {
  border-top: 1px solid var(--accent-color); /* Trait horizontal #9b9c28 */
  margin: 10px 0;
}

.messages-list .message-card .date {
  font-size: 16px !important; /* Même taille que le titre */
  color: #d8d9c2 !important; /* Gris clair pour la date */
  text-align: right !important;
  margin-top: 0;
}

/* Responsive pour mobile */
@media (max-width: 600px) {
  .messages-header-container {
    margin: 10px;
    padding: 10px;
  }

  .messages-header {
    font-size: 18px;
    padding: 10px;
  }

  .messages-list-container {
    margin: 0 5px;
  }

  .messages-list .message-card {
    margin: 10px 5px; /* Espacement réduit pour mobile */
    padding: 10px;
  }

  .messages-list .message-card .title {
    font-size: 14px;
  }

  .messages-list .message-card .title img {
    width: 32px; /* Légèrement plus petit sur mobile */
    height: 32px;
  }

  .messages-list .message-card .message {
    font-size: 13px;
  }

  .messages-list .message-card .date {
    font-size: 14px !important; /* Même taille que le titre sur mobile */
  }

  .messages-list .message-card .separator {
    margin: 8px 0; /* Ajustement pour mobile */
  }
}

#members h2 {
  max-width: 90%; /* Aligné avec .messages-header-container */
  margin: 20px auto;
  background: var(--primary-color); /* Fond #073332 */
  border: 2px solid var(--accent-color); /* Contour jaune #9b9c28 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre comme Boîte de réception */
  text-align: center;
  padding: 15px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-color); /* Texte #ffffff */
}

.event-countdown {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
  margin: 20px auto;
  padding: 15px;
  background-color: var(--primary-color);
  border: 2px solid var(--accent-color);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  font-family: 'Open Sans', sans-serif;
}

/* Style pour la bibliothèque */
.book-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.book-cover {
  cursor: pointer;
  width: 120px;
  height: 160px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.book-cover:hover {
  transform: scale(1.05);
}

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

.book-info {
  flex: 1;
}

.privacy-policy-link {
    margin-top: 20px;
    font-size: 0.9em;
    text-align: center;
    color: #666;
}

.privacy-policy-link a {
    color: #3498db;
    text-decoration: none;
}

.privacy-policy-link a:hover {
    text-decoration: underline;
}

/* Style pour l'icône dans le header */
.header-icons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.social-icon {
  cursor: pointer;
  color: #fff;
  background-color: #3498db;
  border-radius: 50%;
  padding: 5px;
  font-size: 24px;
  transition: transform 0.3s;
}

.social-icon:hover {
  transform: scale(1.1);
}

/* Style pour la page des réseaux sociaux */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.social-link {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: transform 0.3s, box-shadow 0.3s;
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.social-link i {
  font-size: 24px;
  margin-right: 15px;
  width: 30px;
  text-align: center;
}

 /* Styles réseaux sociaux */
.social-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 0 auto 20px;
}

.social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #555;
  font-size: 18px;
  transition: all 0.3s ease;
}

.social-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Couleurs spécifiques par réseau */
.social-item:nth-child(1) { color: #1877f2; } /* Facebook */
.social-item:nth-child(2) { color: #1da1f2; } /* Twitter */
.social-item:nth-child(3) { color: #e4405f; } /* Instagram */
.social-item:nth-child(4) { color: #ff0000; } /* YouTube */
.social-item:nth-child(5) { color: #25d366; } /* WhatsApp */

/* Mode sombre */
.dark-mode .social-item {
  background: rgba(255,255,255,0.1);
}

.dark-mode .social-item:hover {
  background: rgba(255,255,255,0.2);
}

.settings-icon.fa-users {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

.social-item:nth-child(1) { /* TikTok */
  color: #000000; /* Noir pour TikTok */
}

.social-item:nth-child(7) { /* Snapchat */
  color: #FFFC00; /* Jaune Snapchat */
}

/* Style pour les messages motivationnels */
.motivation-card {
  background: rgba(31, 74, 73, 0.8); /* var(--secondary-color) avec transparence */
  border-left: 4px solid var(--accent-color);
  padding: 15px;
  margin: 20px 10px;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#add-motivation-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--primary-color) !important; /* Fond plus foncé pour la zone de texte */
  color: white !important;
  border: 1px solid var(--accent-color) !important;
}

#current-motivation {
  margin-top: 20px;
  padding: 15px;
  background: var(--secondary-color);
  border-radius: 8px;
}

#motivation-text {
  background-color: var(--primary-color) !important;
  color: white !important;
  border: 2px solid var(--accent-color) !important;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  min-height: 100px;
  margin-bottom: 10px;
}

.global-contribution-note {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
  max-width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#global-cotisations-content small {
  display: block;
  margin-top: 5px;
  color: #555;
}

#treasurer-global-manage {
  padding: 20px;
}

#global-contribution-members {
  margin-top: 20px;
}

.member-card {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.global-contribution-checkbox,
.global-contribution-note {
  margin-top: 5px;
}

.global-contribution-note {
  padding: 5px;
  width: 100%;
  max-width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#save-contributions {
  margin: 10px 0;
}

.cta-button {
  padding: 10px 20px;
  background-color: #9b9b22;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cta-button:hover {
  background-color: #9b9b22;
}

.back-button {
  background-color: #555;
}

.back-button:hover {
  background-color: #444;
}

/* Styles Ansar Projet */
.projet-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Changé de center à flex-start pour aligner en haut */
  align-items: center;
  min-height: auto; /* Supprime min-height: 100vh pour éviter l'espace forcé */
}

.projet-header {
  text-align: center;
  margin-bottom: 30px;
}

.projet-header h1 {
  color: #c3bf42;
  font-size: 2rem;
}

.projet-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.projet-btn {
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}

.projet-btn:hover {
  transform: translateY(-3px);
}

.projet-btn i {
  margin-right: 8px;
}

.bg-blue { background-color: #F59E0B; }
.bg-green { background-color: #EC4899; }
.bg-purple { background-color: #8B5CF6; }

.projet-form {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.projet-form.hidden {
  display: none;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.submit-btn {
  background-color: #4299e1;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.admin-link {
  color: #718096;
  text-decoration: underline;
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.business-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hidden-section {
    display: none;
}

.business-card {
    background-color: #1b544f6f; /* Fond gris clair */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.business-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.business-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.business-card h3 {
    color: #fdff8b; /* Bleu foncé pour le métier */
    margin: 10px 0;
}
.business-card p {
    color: #ffdb79; /* Bleu foncé pour le nom */
    margin: 5px 0;
}
.business-card button {
    background-color: #2f766b; /* Rose vif */
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}
.business-card button:hover {
    background-color: #346b18; /* Rose plus foncé au survol */
}
.business-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.business-modal-content {
    background-color: #0d2f2c; /* Fond vert */
    border: 2px solid #aca72b; /* Bordure jaune moutarde */
    border-radius: 8px;
    max-width: 80%;
    width: 600px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0; /* Supprime le padding pour l'image */
    position: relative;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
}

.business-modal-content img {
    width: 100%; /* Occupe toute la largeur du modal */
    height: auto; /* Hauteur automatique pour maintenir le rapport */
    aspect-ratio: 5 / 4; /* Force le rapport largeur = 2 × hauteur */
    object-fit: cover; /* Remplit sans déformation */
    border-radius: 0; /* Pas de coins arrondis */
    position: absolute; /* Collé en haut */
    top: 0; /* Collé au bord supérieur */
    left: 0; /* Collé à gauche */
    right: 0; /* Collé à droite */
    margin: 0; /* Zéro marge */
    display: block; /* Évite les marges parasites */
}

.business-modal-content #modal-content {
    margin-top: 6cm; /* Espace fixe de 3 cm */
    padding: 20px; /* Restaure le padding pour le texte */
}

@media (max-width: 640px) {
    .business-modal-content #modal-content {
        padding: 15px; /* Padding réduit pour gagner de l'espace */
    }
}
.business-modal-content p {
    margin: 10px 0;
    color: #928d34; /* Gris très foncé pour lisibilité */
}
.business-modal-content button {
    background-color: #2f766b; /* Bleu vif */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
.business-modal-content button:hover {
    background-color: #ff0000; /* Bleu plus foncé au survol */
}
.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #93963c;
    cursor: pointer;
    z-index: 2001; /* Plus élevé que le modal */
    background: rgba(255, 255, 255, 0.8);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ombre pour meilleure visibilité */

}


.hidden-section {
    display: none !important;
}
#modal-title {
    color: #0f3733; /* Gris très foncé pour le titre */
}

/* Style général du conteneur du formulaire */
/* Style général du conteneur du formulaire */
.form-container {
    background-color: #1a5251; /* Fond vert foncé */
    border: 1px solid #aca72b; /* Bordure jaune moutarde */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(172, 167, 43, 0.2); /* Ombre externe + halo subtil */
    padding: 24px; /* Espacement intérieur */
    margin: 0 0 2rem 0; /* Pas de marges latérales, seulement en bas */
    max-width: 100%; /* S'adapte au conteneur parent */
    box-sizing: border-box; /* Inclut bordure et padding dans la largeur */
}

/* Style spécifique pour le formulaire Financement (réduire marges latérales) */
#financement-form.form-container {
    margin: 0 4px 2rem 4px; /* Marges latérales de ~0.3cm (4px) */
}

/* Style du titre du formulaire */
#promotion-form h2,
#financement-form h2 {
    color: #ffffff; /* Blanc pour contraste sur fond sombre */
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Style du texte descriptif */
#promotion-form p,
#financement-form p {
    color: #d1d5db; /* Gris clair pour lisibilité */
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Style du bouton Retour */
#promotion-form button.text-red-600,
#financement-form button.text-red-600 {
    display: flex;
    align-items: center;
    color: #f3f4f6; /* Gris clair pour contraste */
    font-weight: 600;
    padding: 8px 16px;
    background-color: #2a6a6a; /* Vert légèrement plus clair que le fond */
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
#promotion-form button.text-red-600:hover,
#financement-form button.text-red-600:hover {
    background-color: #aca72b; /* Jaune moutarde au survol */
    color: #1a5251; /* Texte vert foncé */
}

/* Style des labels */
#promotion-form .text-gray-700,
#financement-form .text-gray-700 {
    color: #ffffff; /* Blanc pour contraste */
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Style des champs de saisie (input, textarea, select) */
#promotion-form input,
#promotion-form textarea,
#promotion-form select,
#financement-form input,
#financement-form textarea,
#financement-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #aca72b; /* Bordure jaune moutarde */
    border-radius: 8px;
    font-size: 1rem;
    background-color: #1a5251; /* Même couleur que le fond */
    color: #ffffff; /* Texte blanc pour contraste */
    box-sizing: border-box; /* Empêche de dépasser la bordure */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#promotion-form input:focus,
#promotion-form textarea:focus,
#promotion-form select:focus,
#financement-form input:focus,
#financement-form textarea:focus,
#financement-form select:focus {
    outline: none;
    border-color: #ffffff; /* Bordure blanche au focus */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); /* Halo blanc */
}

/* Style des radio buttons et checkboxes */
#promotion-form input[type="radio"],
#promotion-form input[type="checkbox"],
#financement-form input[type="radio"],
#financement-form input[type="checkbox"] {
    accent-color: #aca72b; /* Jaune moutarde */
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    background-color: #1a5251; /* Fond assorti */
    border: 1px solid #aca72b; /* Bordure assortie */
}

/* Style des labels des radio/checkbox */
#promotion-form .inline-flex span,
#financement-form .inline-flex span {
    color: #d1d5db; /* Gris clair pour contraste */
    font-size: 0.95rem;
}

/* Style du bouton Envoyer */
#promotion-form button.bg-blue-600,
#financement-form button.bg-green-600 {
    background-color: #aca72b; /* Jaune moutarde */
    color: #1a5251; /* Texte vert foncé pour contraste */
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#promotion-form button.bg-blue-600:hover,
#financement-form button.bg-green-600:hover {
    background-color: #d4d04e; /* Jaune plus clair au survol */
    transform: translateY(-2px);
}

/* Media query pour portables (écrans jusqu'à 640px) */
@media (max-width: 640px) {
    .form-container {
        padding: 16px;
        margin: 0 4px 2rem 4px; /* Marges latérales de ~0.3cm */
    }
    #promotion-form h2,
    #financement-form h2 {
        font-size: 1.5rem;
    }
    #promotion-form input,
    #promotion-form textarea,
    #promotion-form select,
    #financement-form input,
    #financement-form textarea,
    #financement-form select {
        padding: 10px;
        font-size: 0.95rem;
    }
    #promotion-form button.bg-blue-600,
    #financement-form button.bg-green-600 {
        padding: 10px 20px;
        width: 100%;
    }
    #promotion-form button.text-red-600,
    #financement-form button.text-red-600 {
        padding: 6px 12px;
    }
}


/* Style du lien "Espace réservé aux membres" */
.admin-link {
    color: #aca72b; /* Jaune moutarde pour cohérence */
    text-decoration: none; /* Supprime le soulignement */
    font-weight: 600;
    font-size: 1.1rem;
    display: block; /* Permet le centrage */
    text-align: center; /* Centre le texte */
    margin: 1rem 0; /* Espace vertical */
    transition: color 0.3s ease;
}
.admin-link:hover {
    color: #d4d04e; /* Jaune plus clair au survol */
}

/* Style du conteneur du formulaire admin */
#admin-section {
    background-color: #1a5251; /* Fond vert foncé, cohérent avec autres formulaires */
    border: 1px solid #aca72b; /* Bordure jaune moutarde */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(172, 167, 43, 0.2); /* Ombre + halo */
    padding: 24px; /* Espacement intérieur */
    max-width: 400px; /* Largeur plus étroite pour un look compact */
    width: 100%;
    box-sizing: border-box;
}

/* Style du titre du formulaire admin */
#admin-section h2 {
    color: #ffffff; /* Blanc pour contraste */
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Style des labels */
#admin-section .text-gray-700 {
    color: #ffffff; /* Blanc pour contraste */
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Style des champs de saisie (input) */
#admin-section input {
    width: 100%;
    padding: 12px;
    border: 1px solid #aca72b; /* Bordure jaune moutarde */
    border-radius: 8px;
    font-size: 1rem;
    background-color: #2a6a6a; /* Vert légèrement plus clair pour contraste */
    color: #ffffff; /* Texte blanc */
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#admin-section input:focus {
    outline: none;
    border-color: #ffffff; /* Bordure blanche au focus */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); /* Halo blanc */
}

/* Style des boutons (Annuler et Valider) */
#admin-section button.bg-gray-500,
#admin-section button.bg-indigo-600 {
    background-color: #aca72b; /* Jaune moutarde */
    color: #1a5251; /* Texte vert foncé */
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#admin-section button.bg-gray-500:hover,
#admin-section button.bg-indigo-600:hover {
    background-color: #d4d04e; /* Jaune plus clair au survol */
    transform: translateY(-2px);
}

/* Ajustement de l'espacement entre les boutons */
#admin-section .pt-4 {
    display: flex;
    gap: 1rem; /* Espace entre Annuler et Valider */
    justify-content: center; /* Centre les boutons */
}

/* Media query pour portables (écrans jusqu'à 640px) */
@media (max-width: 640px) {
    #admin-section {
        padding: 16px; /* Padding réduit */
        margin: 0 4px; /* Marges latérales de ~0.3cm */
    }
    #admin-section h2 {
        font-size: 1.5rem; /* Titre plus petit */
    }
    #admin-section input {
        padding: 10px;
        font-size: 0.95rem;
    }
    #admin-section button.bg-gray-500,
    #admin-section button.bg-indigo-600 {
        padding: 8px 16px;
        width: 100%; /* Pleine largeur pour chaque bouton */
    }
    #admin-section .pt-4 {
        flex-direction: column; /* Boutons en colonne sur portable */
        gap: 0.5rem;
    }
}

/* Style des boutons du tableau de bord admin */
#admin-dashboard .flex button {
    background-color: #aca72b; /* Jaune moutarde */
    color: #1a5251; /* Texte vert foncé */
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espace entre icône et texte */
}
#admin-dashboard .flex button:hover {
    background-color: #d4d04e; /* Jaune plus clair au survol */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
#admin-dashboard .flex button.bg-blue-600 {
    background-color: #aca72b; /* Uniformise avec jaune moutarde */
}
#admin-dashboard .flex button.bg-green-600 {
    background-color: #aca72b;
}
#admin-dashboard .flex button.bg-purple-600 {
    background-color: #aca72b;
}
#admin-dashboard .flex button.bg-teal-600 {
    background-color: #aca72b;
}
#admin-dashboard .flex button:hover.bg-blue-700,
#admin-dashboard .flex button:hover.bg-green-700,
#admin-dashboard .flex button:hover.bg-purple-700,
#admin-dashboard .flex button:hover.bg-teal-700 {
    background-color: #d4d04e; /* Jaune plus clair au survol */
}

/* Style du conteneur des boutons */
#admin-dashboard .flex {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne */
    gap: 1rem; /* Espacement entre boutons */
    justify-content: center; /* Centre les boutons */
    padding: 0 1rem;
    margin-bottom: 2rem;
}

/* Style des listes Gérer Business et Gérer Projets */
#admin-business-list,
#admin-project-list {
    background-color: #1a5251; /* Fond vert foncé */
    border: 1px solid #aca72b; /* Bordure jaune moutarde */
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    padding: 24px;
    margin-bottom: 2rem;
}

/* Style du titre des listes */
#admin-business-list h2,
#admin-project-list h2 {
    color: #ffffff; /* Blanc pour contraste */
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Supprime le style de table horizontal */
#admin-business-list table,
#admin-project-list table {
    display: block; /* Passe en bloc pour disposition verticale */
    width: 100%;
}

/* Style des lignes (chaque métier/projet) */
#admin-business-list tbody tr,
#admin-project-list tbody tr {
    display: block; /* Chaque entrée en bloc vertical */
    background-color: #2a6a6a; /* Vert légèrement plus clair */
    border: 1px solid #aca72b; /* Bordure jaune moutarde */
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 1rem; /* Espace entre entrées */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Style des cellules (informations) */
#admin-business-list td,
#admin-project-list td {
    display: block; /* Chaque info sur une nouvelle ligne */
    color: #d1d5db; /* Gris clair pour lisibilité */
    font-size: 0.95rem;
    padding: 4px 0; /* Espacement vertical */
    text-align: left;
}
#admin-business-list td:before,
#admin-project-list td:before {
    content: attr(data-label); /* Ajoute un label avant chaque info */
    font-weight: 600;
    color: #ffffff; /* Blanc pour contraste */
    margin-right: 0.5rem;
}

/* Style des boutons d'action (Éditer, Supprimer) */
#admin-business-list td:last-child,
#admin-project-list td:last-child {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 8px;
}
#admin-business-list button,
#admin-project-list button {
    background-color: #aca72b; /* Jaune moutarde */
    color: #1a5251; /* Texte vert foncé */
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#admin-business-list button:hover,
#admin-project-list button:hover {
    background-color: #d4d04e; /* Jaune plus clair */
    transform: translateY(-2px);
}
#admin-business-list button.text-blue-600,
#admin-project-list button.text-blue-600 {
    color: #1a5251; /* Texte vert foncé */
}
#admin-business-list button.text-red-600,
#admin-project-list button.text-red-600 {
    color: #1a5251;
}

/* Attribuer des labels pour chaque cellule */
#admin-business-list td:nth-child(1):before { content: "Nom: "; }
#admin-business-list td:nth-child(2):before { content: "Métier: "; }
#admin-business-list td:nth-child(3):before { content: "Expérience: "; }
#admin-business-list td:nth-child(4):before { content: "Localisation: "; }
#admin-business-list td:nth-child(5):before { content: "Actions: "; }
#admin-project-list td:nth-child(1):before { content: "Nom: "; }
#admin-project-list td:nth-child(2):before { content: "Titre du projet: "; }
#admin-project-list td:nth-child(3):before { content: "Budget: "; }
#admin-project-list td:nth-child(4):before { content: "Délai: "; }
#admin-project-list td:nth-child(5):before { content: "Actions: "; }

/* Media query pour portables (écrans jusqu'à 640px) */
@media (max-width: 640px) {
    #admin-dashboard .flex {
        flex-direction: column; /* Boutons en colonne */
        gap: 0.5rem;
    }
    #admin-dashboard .flex button {
        width: 100%; /* Pleine largeur */
        padding: 10px 16px;
        font-size: 0.95rem;
    }
    #admin-business-list,
    #admin-project-list {
        padding: 16px;
        margin: 0 4px 2rem 4px; /* Marges latérales ~0.3cm */
    }
    #admin-business-list h2,
    #admin-project-list h2 {
        font-size: 1.5rem;
    }
    #admin-business-list tbody tr,
    #admin-project-list tbody tr {
        padding: 12px;
    }
    #admin-business-list td,
    #admin-project-list td {
        font-size: 0.9rem;
    }
}

/* Forcer les liens Site Web et Portfolio à être blancs dans le modal */
#business-modal #modal-content .flex.items-center a {
    color: #ffffff !important; /* Blanc forcé */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}
#business-modal #modal-content .flex.items-center a:hover {
    color: #d1d5db !important; /* Gris clair au survol */
}
#business-modal #modal-content .flex.items-center {
    margin-bottom: 0.5rem; /* Espacement entre les lignes */
}

/* Forcer l'affichage de la section business */
#business-section:not(.hidden-section) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* S'assurer que les cartes sont visibles */
#business-cards {
    display: grid !important; /* Ou flex, selon ton layout */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Style de hidden-section pour confirmer qu'il masque correctement */
.hidden-section {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Style du bouton Retour dans business-section */
#business-section button[onclick="showMainInterface()"] {
    background: transparent !important; /* Fond transparent */
    color: #ffffff !important; /* Texte blanc */
    border: 1px solid #ffffff !important; /* Bordure blanche pour visibilité */
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 5px; /* Coins arrondis, comme les autres boutons */
    cursor: pointer;
    transition: all 0.3s ease;
}

#business-section button[onclick="showMainInterface()"]:hover {
    color: #d1d5db !important; /* Texte gris clair au survol */
    border-color: #d1d5db !important; /* Bordure gris clair au survol */
}
/* Style du bouton Retour dans business-section pour imiter le titre Nos Professionnels */
#business-section button[onclick="showMainInterface()"] {
    background: transparent !important; /* Fond transparent */
    color: #c3bf42 !important; /* Couleur jaune moutarde, comme le titre */
    border: 1px solid #c3bf42 !important; /* Bordure jaune moutarde */
    font-size: 0.9rem; /* Taille proche de 2rem, adaptée pour un bouton */
    font-weight: 700; /* Gras, comme un titre */
    padding: 10px 20px;
    border-radius: 5px; /* Coins arrondis, comme les autres boutons */
    cursor: pointer;
    text-align: center; /* Texte centré */
    display: block; /* Permet le centrage horizontal */
    margin: 20px auto; /* Centre le bouton horizontalement, avec marge verticale */
    transition: all 0.3s ease;
}

#business-section button[onclick="showMainInterface()"]:hover {
    color: #d4d04e !important; /* Jaune plus clair au survol */
    border-color: #d4d04e !important; /* Bordure plus claire au survol */
}

/* Variables pour cohérence */
:root {
  --primary-color: #073332;
  --text-color: #ffffff;
  --light-accent: #d8d9c2;
}

/* Style de la barre de navigation */
.top-nav-bar {
    background-color: var(--primary-color);
    color: var(--text-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000; /* Élevé pour être au-dessus de tout */
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8); /* Ombre en bas */
}

/* Conteneur du titre */
.top-nav-bar .title-container {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
}

/* Titre principal */
.top-nav-bar .title-container h1 {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

/* Sous-titre */
.top-nav-bar .title-container p {
    font-size: 0.75rem;
    color: var(--light-accent);
    margin: 2px 0 0;
    font-family: 'Open Sans', sans-serif;
}

/* Logo */
.top-nav-bar .logo {
    width: 48px;
    height: auto;
    margin-right: 15px;
}

/* Par défaut, masquer la barre */
.top-nav-bar {
    display: none;
}

/* Afficher la barre uniquement sur les pages spécifiées */
#members .top-nav-bar,
#events .top-nav-bar,
#library .top-nav-bar,
#projet .top-nav-bar,
#secret .top-nav-bar,
#treasurer .top-nav-bar,
#president .top-nav-bar,
#secretary .top-nav-bar,
#settings .top-nav-bar,
#coran .top-nav-bar,
#hadith .top-nav-bar,
#quibla .top-nav-bar,
#priere .top-nav-bar,
#quizz .top-nav-bar,
#tasbih .top-nav-bar,

#admin-dashboard .top-nav-bar {
    display: flex;
}

/* Ajuster le contenu pour éviter le chevauchement */
#members,
#events,
#library,
#projet,
#secret,
#treasurer,
#president,
#secretary,
#settings,
#hadith,
#quibla,
#quizz,
#tasbih,
#priere,

#coran,
#admin-dashboard {
    padding-top: 100px !important; /* Hauteur estimée de la barre (~60px) + marge */
}

/* S'assurer que les titres ne sont pas masqués */
#members h2,
#events .association-title,
#library .messages-header-container,
#projet .projet-header,
#secret h2,
#treasurer h2,
#president h2,
#secretary h2,
#hadith h2,
#quibla h2,
#quizz h2,
#tasbih h2,
#priere h2,

#coran h2,
#settings .association-title,
#admin-dashboard h2 {
    margin-top: 0;
}

/* Responsive pour mobile */
@media (max-width: 600px) {
    .top-nav-bar .title-container h1 {
        font-size: 1.1rem;
    }
    .top-nav-bar .title-container p {
        font-size: 0.65rem;
    }
    .top-nav-bar .logo {
        width: 40px;
    }
    .top-nav-bar {
        padding: 10px 0;
    }
    #members,
    #events,
    #library,
    #projet,
    #secret,
    #treasurer,
    #president,
    #secretary,
    #settings,
    #hadith,
      #quibla,
    #quizz,
    #tasbih,
    #priere,

    #coran,
    #admin-dashboard {
        padding-top: 70px; /* Réduit pour mobile */
    }
}

/* Masquer la barre par défaut sur #home */
#home .top-nav-bar {
    display: none;
}

/* Classe pour afficher la barre quand elle est activée */
#home .top-nav-bar.active {
    display: flex;
}

/* S'assurer que le contenu de #home est décalé pour éviter le chevauchement */
/* Styles pour les modales de succès */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Au-dessus de tout */
  visibility: hidden; /* Caché par défaut */
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s ease;
}

.modal:not(.hidden-section) {
  visibility: visible;
  opacity: 1;
}

.modal-content {
  background-color: var(--primary-color); /* #073332 */
  border: 2px solid var(--accent-color); /* Bordure jaune moutarde #9b9c28 */
  border-radius: 12px;
  padding: 24px;
  max-width: 90%;
  width: 400px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.modal-content h2 {
  color: var(--text-color); /* Blanc #ffffff */
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.modal-content p {
  color: var(--light-accent); /* Gris clair #d8d9c2 */
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.modal-content button {
  background-color: var(--accent-color); /* Jaune moutarde #9b9c28 */
  color: var(--primary-color); /* Vert foncé #073332 */
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.modal-content button:hover {
  background-color: #d4d04e; /* Jaune plus clair */
  transform: translateY(-2px);
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: var(--text-color); /* Blanc #ffffff */
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-modal:hover {
  color: var(--accent-color); /* Jaune moutarde #9b9c28 */
}

/* Responsive pour mobile */
@media (max-width: 600px) {
  .modal-content {
    width: 90%;
    padding: 16px;
  }
  .modal-content h2 {
    font-size: 1.5rem;
  }
  .modal-content p {
    font-size: 0.95rem;
  }
  .modal-content button {
    padding: 8px 16px;
    width: 100%;
  }
}

/* Cacher les éléments de la section projet quand admin-dashboard est affiché */
#admin-dashboard:not(.hidden-section) ~ .projet-header,
#admin-dashboard:not(.hidden-section) ~ .projet-buttons,
#admin-dashboard:not(.hidden-section) ~ .admin-link {
  display: none !important;
}

/* Forcer admin-dashboard à apparaître en haut */
#admin-dashboard:not(.hidden-section) {
    background-color: #073332; /* Fond vert foncé, assorti à --primary-color */
  position: absolute;
  top: 100px; /* Juste en dessous de la top-nav-bar */
  left: 0;
  width: 100%;
  margin-top: 0 !important;
  padding-top: 10px !important;
  z-index: 1000; 
}

/* Ajuster l'espacement interne */
#admin-dashboard h2 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

#admin-dashboard .flex.flex-nowrap {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}


/* Supprime l'outline sur le clic */
* {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Pour les boutons spécifiquement */
button, a, .item, .circle-item, .nav-item, .social-icon, .settings-icon {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Pour les inputs */
input, textarea, select {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Supprime la sélection de texte au clic */
*:focus {
    outline: none !important;
}


/* Supprime tous les effets de focus/clic */
button:focus, button:active,
a:focus, a:active,
input:focus, input:active,
textarea:focus, textarea:active,
select:focus, select:active {
    outline: none !important;
    box-shadow: none !important;
}



/* Styles pour le modal du Règlement Intérieur */
.reglement-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
}

.reglement-modal.hidden-section {
  display: none;
}

.reglement-modal-content {
  background-color: var(--bg-color);
  margin: 5% auto;
  padding: 20px;
  border-radius: 10px;
  max-width: 90%;
  width: 600px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  font-family: 'Open Sans', sans-serif;
  color: var(--text-color);
}

.reglement-modal .close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-color);
}

.reglement-modal .container {
  max-width: 100%;
  padding: 0 20px;
}

.reglement-modal header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--text-color);
  padding: 20px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  margin-bottom: 20px;
}

.reglement-modal h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.reglement-modal .subtitle {
  font-weight: 300;
  font-size: 1rem;
  opacity: 0.9;
}

.reglement-modal .article {
  background: var(--secondary-color);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid var(--accent-color);
  animation: fadeIn 0.6s ease forwards;
  opacity: 0;
}

.reglement-modal .article:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.reglement-modal .article-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.reglement-modal .article-title i {
  margin-right: 10px;
  color: var(--accent-color);
}

.reglement-modal .article-content {
  font-size: 0.95rem;
  color: var(--text-color);
}

.reglement-modal ul {
  padding-left: 20px;
  margin: 10px 0;
}

.reglement-modal li {
  margin-bottom: 8px;
  position: relative;
  list-style-type: none;
  padding-left: 25px;
}

.reglement-modal li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background-color: var(--accent-color);
  border-radius: 50%;
}

.reglement-modal .adoption-date {
  background: var(--primary-color);
  color: var(--text-color);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin: 20px auto;
  max-width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.reglement-modal .footer {
  text-align: center;
  padding: 20px 0;
  color: var(--text-color);
  font-size: 0.9rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reglement-modal .article:nth-child(1) { animation-delay: 0.1s; }
.reglement-modal .article:nth-child(2) { animation-delay: 0.2s; }
.reglement-modal .article:nth-child(3) { animation-delay: 0.3s; }
.reglement-modal .article:nth-child(4) { animation-delay: 0.4s; }
.reglement-modal .article:nth-child(5) { animation-delay: 0.5s; }
.reglement-modal .article:nth-child(6) { animation-delay: 0.6s; }
.reglement-modal .article:nth-child(7) { animation-delay: 0.7s; }
.reglement-modal .article:nth-child(8) { animation-delay: 0.8s; }
.reglement-modal .article:nth-child(9) { animation-delay: 0.9s; }
.reglement-modal .article:nth-child(10) { animation-delay: 1.0s; }
.reglement-modal .article:nth-child(11) { animation-delay: 1.1s; }
.reglement-modal .article:nth-child(12) { animation-delay: 1.2s; }
.reglement-modal .article:nth-child(13) { animation-delay: 1.3s; }
.reglement-modal .article:nth-child(14) { animation-delay: 1.4s; }
.reglement-modal .article:nth-child(15) { animation-delay: 1.5s; }
.reglement-modal .article:nth-child(16) { animation-delay: 1.6s; }
.reglement-modal .article:nth-child(17) { animation-delay: 1.7s; }
.reglement-modal .article:nth-child(18) { animation-delay: 1.8s; }
.reglement-modal .article:nth-child(19) { animation-delay: 1.9s; }
.reglement-modal .article:nth-child(20) { animation-delay: 2.0s; }
.reglement-modal .article:nth-child(21) { animation-delay: 2.1s; }
.reglement-modal .article:nth-child(22) { animation-delay: 2.2s; }

/* Responsive */
@media (max-width: 480px) {
  .reglement-modal-content {
    width: 95%;
    margin: 10% auto;
  }

  .reglement-modal h1 {
    font-size: 1.5rem;
  }

  .reglement-modal .subtitle {
    font-size: 0.9rem;
  }

  .reglement-modal .article {
    padding: 10px;
  }

  .reglement-modal .article-title {
    font-size: 1rem;
  }

  .reglement-modal .article-content {
    font-size: 0.9rem;
  }
}

/* Scrollbar */
.reglement-modal ::-webkit-scrollbar {
  width: 6px;
}

.reglement-modal ::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.reglement-modal ::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 3px;
}

/* Modal Règlement Intérieur */
.reglement-modal {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 600px;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px 0 0 0;
    box-shadow: -5px 0 25px rgba(7, 51, 50, 0.3);
    z-index: 1000;
    overflow-y: auto;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
}

.reglement-modal.active {
    right: 0;
}

.reglement-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 1.5rem;
    border-radius: 20px 0 0 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative; /* À ajouter */
  top: -15px; /* Soulève la barre */
  margin-bottom: -30px; /* Compense l'élévation */
  padding-top: 30px; /* Agrandit la zone cliquable */
  z-index: 10; /* Maintient au-dessus */
}

.reglement-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-color);
}

.reglement-title {
    display: flex;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.reglement-title i {
    margin-right: 15px;
    font-size: 1.8rem;
    color: var(--accent-color);
}

.reglement-content {
  padding: 2rem 0.5rem 2rem; /* Réduit l'espace latéral à 1rem */
    flex: 1;
    overflow-y: auto;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.reglement-article {
    margin-bottom: 2rem;
    background: #2c5148;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--accent-color);
    transition: transform 0.3s ease;

}

.reglement-article:hover {
    transform: translateY(-3px);
}

.article-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}

.article-title i {
    margin-right: 10px;
    color: var(--accent-color);
}

.article-content {
    color: #333;
    line-height: 1.6;
    font-size: 0.95rem;
}

.article-content ul {
    padding-left: 20px;
}

.article-content li {
    margin-bottom: 8px;
}

.reglement-footer {
    padding: 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.close-reglement {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(7, 51, 50, 0.2);
    display: inline-flex;
    align-items: center;
}

 .reglement-header {
  display: flex;               
  justify-content: space-between;  
  align-items: center;
   
}

.reglement-title {
  margin: 0;  
}

.close-reglement {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* Animation d'entrée */
@keyframes slideIn {
    from { right: -100%; }
    to { right: 0; }
}

/* Animation de sortie */
@keyframes slideOut {
    from { right: 0; }
    to { right: -100%; }
}

/* Overlay */
.reglement-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 51, 50, 0.7);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.reglement-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.reglement-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
}
 



/* Overlay */
.reglement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 51, 50, 0.8);
  z-index: 999;
  display: none;
}

/* Modal */
.reglement-modal {
  position: fixed;
  top: 105px;  
  right: -100%;
  width: 100%;
  max-width: 600px; 
    border-radius: 25px 25px 0 0; 

  height: 100vh;
  background: #73730a;
  z-index: 1000;
  overflow-y: auto;
  transition: right 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  display: flex;
  flex-direction: column;
}

.reglement-modal.active {
  right: 0;
}

.reglement-footer {
  margin-top: auto;
  padding: 20px;
  text-align: center;
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid #eee;
}







.gallery-item img {
  width: 100%;       /* Prend 100% de la largeur du conteneur */
  max-width: 300px;  /* Largeur maximale */
  height: auto;      /* Hauteur proportionnelle */
  object-fit: cover; /* Couvre la zone sans déformation */
  border-radius: 8px; /* Conserve les coins arrondis */
}

.icon-ia {
  width: 27px;   /* ajuste la taille, 24px est la taille standard des icônes */
  height: 27px;
  object-fit: contain; /* garde les proportions sans déformation */
  vertical-align: middle; /* aligne au centre comme les autres icônes */
}
.bottom-nav .nav-item {
  text-decoration: none; /* supprime le trait (soulignement) */
  color: inherit;        /* garde la couleur du parent */
}