/* Cela assure que le titre n'est pas caché par la barre de navigation fixe lors du scroll */
section {
    scroll-margin-top: 80px; /* Ajustez selon la hauteur de votre barre de navigation */
  }

/* --- STYLE DU FORMULAIRE DE CONTACT --- */

/* Conteneur principal du formulaire */
.formulaire-contact {
  max-width: 600px; /* Limite la largeur pour une meilleure lecture */
  margin: 20px auto; /* Centre le formulaire sur la page horizontalement */
  padding: 20px;
  border: 1px solid #ddd; /* Ajoute une bordure légère */
  border-radius: 8px; /* Coins arrondis */
  background-color: #f9f9f9; /* Arrière-plan légèrement gris */
}

/* Espacement et alignement des groupes (Label + Champ) */
.form-groupe {
  margin-bottom: 20px; /* Ajoute un espace sous chaque champ */
}

.form-groupe label {
  display: block; /* Force le label à prendre sa propre ligne (pour alignement vertical) */
  margin-bottom: 5px;
  font-weight: 600; /* Texte en gras pour les labels */
  color: #333;
}

/* Style des champs de saisie (input et textarea) */
.form-groupe input[type="text"],
.form-groupe input[type="email"],
.form-groupe input[type="tel"],
.form-groupe textarea {
  width: 100%; /* Les champs remplissent toute la largeur du formulaire */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px; /* Coins légèrement arrondis */
  box-sizing: border-box; /* IMPORTANT: Inclut le padding dans la largeur totale */
  font-size: 16px;
}

.form-groupe textarea {
  resize: vertical; /* Permet à l'utilisateur de redimensionner uniquement verticalement */
}

/* Style pour l'astérisque obligatoire */
.requis {
  color: #dc3545; /* Rouge pour le symbole d'obligation */
  font-size: 1.1em;
}

/* Style du bouton d'envoi */
.btn-submit {
  display: block; /* Pour que le bouton prenne toute la largeur (optionnel) */
  width: 100%;
  padding: 12px;
  background-color: rgba(90,90,90); /* Couleur primaire (Bleu) */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s ease; /* Ajoute une transition douce */
}

.btn-submit:hover {
  background-color: #0056b3; /* Assombrit la couleur au survol */
}

/* --- STYLE DE LA MODAL DE CONFIDENTIALITÉ --- */

/* Le conteneur de la modal (positionné au-dessus de tout) */
.modal {
  display: none; /* Caché par défaut */
  position: fixed; /* Reste en place même au scroll */
  z-index: 1000; /* Assure que la modal est au-dessus des autres éléments */
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; /* Permet le scroll si le contenu est trop grand */
  background-color: rgba(0,0,0,0.4); /* Arrière-plan sombre et transparent */
}

/* La boîte de contenu de la modal */
.modal-contenu {
  background-color: #fefefe;
  margin: 15% auto; /* 15% du haut et centré horizontalement */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Largeur sur les grands écrans */
  max-width: 600px; /* Limite la largeur max */
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  position: relative; /* Nécessaire pour positionner le bouton de fermeture */
}

/* Le bouton de fermeture (x) */
.modal-close {
  color: #aaa;
  /* float: right; <-- ON ENLÈVE LE FLOAT */
  
  /* NOUVELLE POSITION ABSOLUE POUR CORRIGER LE CLIC */
  position: absolute;
  top: 10px; /* Petit espace depuis le haut */
  right: 15px; /* Petit espace depuis la droite */
  
  font-size: 28px;
  font-weight: bold;
  line-height: 20px; /* Aide à la hauteur de la zone de clic */
  cursor: pointer; /* Confirme visuellement que c'est cliquable */
}

.modal-close:hover,
.modal-close:focus {
  color: #333;
  text-decoration: none;
}

/* Style interne pour le contenu de la modal */
.modal-contenu h3 {
    margin-top: 0;
    color: rgba(90,90,90); /* Couleur bleue */
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.modal-contenu ul {
    padding-left: 20px;
}

/* --- Styles spécifiques pour Mobile (écrans de 600px ou moins) --- */
@media (max-width: 800px) {
    
  /* 1. Réduire le padding/la marge générale pour maximiser l'espace */
  body {
      padding: 0 10px; 
  }

  /* 2. Rendre les titres plus petits (moins agressifs) */
  h2 {
      font-size: 1.5rem; 
  }
  
  /* 3. Ajuster la modal pour qu'elle prenne plus de place sur un petit écran */
  .modal-contenu {
      margin: 5% auto; /* La remonter sur l'écran */
      width: 95%;     /* Prendre presque toute la largeur */
  }

  /* 4. S'assurer que les listes ne sont pas trop serrées */
  ul li {
      margin-bottom: 10px;
  }

  .navbar-brand img {
    display: none !important; 
}
}