/* Ajoutez le style pour l'arrière-plan flou */
body {
  background-image: url('../../assets/imgs/imagefond.jpg'); /* Remplacez 'votre-image-de-fond.jpg' par le chemin de votre image */
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0; /* Supprime les marges par défaut du body */
  padding: 0; /* Supprime les marges internes par défaut du body */
  min-height: 100vh; /* Assure que le contenu occupe au moins 100% de la hauteur de la vue */
  display: flex;
  flex-direction: column;
}

/* Centrez le formulaire et ajustez la largeur */
.container-formulaire {
  background-color: rgba(255, 255, 255, 0.8); /* Couleur d'arrière-plan semi-transparente pour le contenu */
  padding: 20px;
  margin-top: 50px;
  margin-bottom: 50px; /* Ajoutez une marge en bas de 20px (ou la valeur de votre choix) */
  border-radius: 30px; /* Augmentez le rayon de bordure pour des coins plus arrondis */
  max-width: 455px; /* Ajustez la largeur maximale selon vos besoins */
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Centrez le contenu à l'intérieur de la div */
}

/* Centrez le formulaire-suivi et ajustez la largeur */
.container-suivi {
  background-color: rgba(255, 255, 255, 0.8); /* Couleur d'arrière-plan semi-transparente pour le contenu */
  padding: 20px;
  margin-top: 85px;
  margin-bottom: 50px; /* Ajoutez une marge en bas de 20px (ou la valeur de votre choix) */
  border-radius: 30px; /* Augmentez le rayon de bordure pour des coins plus arrondis */
  max-width: 455px; /* Ajustez la largeur maximale selon vos besoins */
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Centrez le contenu à l'intérieur de la div */
}

/* Centrez le slider-alertes et ajustez la largeur */
.container-alertes {
  background-color: rgba(255, 255, 255, 0.8); /* Couleur d'arrière-plan semi-transparente pour le contenu */
  padding: 20px;
  margin-top: 85px;
  margin-bottom: 70px; /* Ajoutez une marge en bas de 20px (ou la valeur de votre choix) */
  border-radius: 30px; /* Augmentez le rayon de bordure pour des coins plus arrondis */
  max-width: 400px; /* Ajustez la largeur maximale selon vos besoins */
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Centrez le contenu à l'intérieur de la div */
}

.carousel-inner img {
  width: 100%; /* Utilisez la largeur maximale disponible dans le conteneur */
  height: 100%; /* Utilisez la hauteur maximale disponible dans le conteneur */
  object-fit: cover; /* Ajustez l'image en conservant les proportions et en coupant l'excédent si nécessaire */
}

/* Style pour le texte de la légende du slider */
.carousel-caption {
  background-color: rgba(0, 0, 0, 0.6); /* Couleur de fond semi-transparente pour la légende */
  border-radius: 0 0 10px 10px; /* Coins arrondis uniquement en bas */
  padding: 10px; /* Espace intérieur de la légende */
}

/* Arrondir les bords du formulaire */
.form-group {
border-radius: 20px; /* Augmentez le rayon de bordure pour des coins plus arrondis */
}
/* Arrondir les coins des champs de formulaire */
.form-control.rounded {
border-radius: 20px !important; /* Important pour annuler toute autre règle CSS qui pourrait interférer */
}
.custom-file-control::before {
border-radius: 20px; /* Coins arrondis */
}

/* Style pour le bouton "Envoyer le signalement" */
button[type="submit"] {
border-radius: 20px; /* Coins arrondis pour le bouton */
padding: 10px 20px; /* Espacement à l'intérieur du bouton */
background-color: #4978dd; /* Couleur de fond du bouton */
color: #fff; /* Couleur du texte du bouton */
border: none; /* Supprimez la bordure du bouton */
font-weight: bold;
margin-top: 20px; /* Espace au-dessus du bouton */
}

/* Style pour le bouton "Envoyer le signalement" au survol */
button[type="submit"]:hover {
background-color: #345fa0; /* Couleur de fond au survol du bouton */
color: #fff; /* Couleur du texte au survol du bouton */
}

/* Changez la couleur du header en bleu ciel avec une barre transparente */
.navbar {
  background-color: rgba(73, 120, 221, 0.7) !important; /* Bleu ciel avec opacité */
}

/* Redimensionnez les logos */
.navbar-brand img {
  width: 70px; /* Ajustez la largeur selon vos besoins */
  height: 70px; /* Ajustez la hauteur selon vos besoins */
}

/* Ajoutez un footer transparent avec de l'espace en haut */
footer {
  background-color: rgba(73, 120, 221, 0.7); /* Couleur de fond du footer avec opacité */
  padding: 10px;
  text-align: center;
  margin-top: auto; /* Place le footer au bas de la page */
}

 /* Animation de UNION-DISCIPLINE-TRAVAIL*/
 .orange {
  color: orange;
}

.white {
  color: white;
}

.green {
  color: green;
}

.flashing {
  animation: flashing 2s alternate infinite;
}

@keyframes flashing {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(10px);
  }
}
/* Styles pour le formulaire de contact */
    #contact {
      background-color: #f0f0f0;
      padding: 40px 0;
    }
  
    #contact h2 {
      color: #333;
      font-size: 32px;
      margin-bottom: 20px;
    }
  
    #contact form {
      background-color: #fff;
      padding: 30px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  
    #contact form label {
      font-weight: bold;
    }
  
    #contact form .form-control {
      border: 1px solid #ccc;
      border-radius: 3px;
      padding-right: 20px;
    }
  
    #contact form .form-control:focus {
      border-color: #007bff;
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
    }
  
    #contact form textarea.form-control {
      resize: vertical;
    }
  
    #contact form button.btn-primary {
      background-color: #007bff;
      border: none;
      border-radius: 3px;
      color: #fff;
    }
  
    #contact form button.btn-primary:hover {
      background-color: #0056b3;
    }


/* Ajoutez les styles ci-dessous dans une media query pour les écrans de taille moyenne et plus grands */
@media (min-width: 768px) {
  .container-formulaire {
    max-width: 600px; /* Ajustez la largeur maximale pour les écrans de taille moyenne */
  }

  .container-suivi {
    max-width: 600px; /* Ajustez la largeur maximale pour les écrans de taille moyenne */
  }

  .container-alertes {
    max-width: 500px; /* Ajustez la largeur maximale pour les écrans de taille moyenne */
  }

  /* Ajoutez d'autres styles spécifiques aux écrans de taille moyenne et plus grands si nécessaire */
}

/* Ajoutez les styles ci-dessous dans une media query pour les écrans de petite taille (mobile) */
@media (max-width: 767px) {
  .container-formulaire {
    max-width: 90%; /* Ajustez la largeur maximale pour les écrans de petite taille (mobile) */
  }

  .container-suivi {
    max-width: 90%; /* Ajustez la largeur maximale pour les écrans de petite taille (mobile) */
  }

  .container-alertes {
    max-width: 90%; /* Ajustez la largeur maximale pour les écrans de petite taille (mobile) */
  }

  /* Ajoutez d'autres styles spécifiques aux écrans de petite taille si nécessaire */
  
}
/* Ajoutez ces styles dans la media query pour les écrans de petite taille (mobile) */
@media (max-width: 767px) {
  /* Ajustez la largeur de la barre de navigation pour qu'elle remplisse la largeur de l'image de fond */
  .navbar {
    width: 100%;
    max-width: none;
    left: 0;
  }

  /* Ajustez la largeur du footer pour qu'il remplisse la largeur de l'image de fond */
  footer {
    width: 100%;
    max-width: none;
    left: 0;
  }

  /* Assurez-vous que d'autres styles ne limitent pas la largeur des éléments */
  .navbar-brand img {
    width: auto;
    max-width: 100%;
  }
  
  .custom-menu {
    max-width: 90%;
    top: calc(50% + 100px); /* Augmentez la valeur pour faire descendre le menu */
    transform: translate(-50%, -50%);
}

 
  /* Ajoutez d'autres styles spécifiques aux écrans de petite taille si nécessaire */
}


 /* Style des indication en haut des champs Lieu de l'incident et Description*/
.field-description {
  border: 1px solid #f39ac4; /* Couleur rose */
  border-radius: 10px; /* Coins arrondis */
  padding: 8px;
  margin-top: 10px; /* Espace en haut du cadre */
  margin-bottom: 10px; /* Espace en bas du cadre */
  position: relative;
}

.pink-background {
  background-color: #fce4ec; /* Couleur de fond rose plus clair */
}

.form-control {
  margin-bottom: 10px; /* Espace en bas du champ de saisie */
}

.field-description i {
  position: absolute;
  top: -10px;
  right: 10px;
  color: #f39ac4; /* Couleur rose */
  font-size: 20px;
}
.formm-description {
  font-style: italic;
  color: #888;
  margin-top: 5px;
}

.carousel-inner img {
  width: 100%;
  height: 400px; /* hauteur fixe */
  object-fit: cover; /* ajuste l'image sans la déformer */
}