/* RESET DE BASE (À placer tout en haut de ton fichier CSS) */
body,
html {
  margin: 0;
  /* SUPPRIME TOUTES LES MARGES EXTÉRIEURES PAR DÉFAUT (Haut, droite, bas, gauche) */
  padding: 0;
  /* SUPPRIME TOUT PADDING INTÉRIEUR PAR DÉFAUT */
  width: 100%;
  /* S'assure que le contenu prend bien 100% de la fenêtre */
  min-height: 100%;
}

/* Assurez-vous que le body n'a pas de marges par défaut */
body {
  margin: 0;
  padding: 0;
  /* Optionnel : couleur de fond pour distinguer le cadre du fond de la page */
  background-color: black;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
}

/* Le conteneur principal qui forme le cadre */
#partners {
  /* 1. Centrage et Dimension */
  max-width: 1200px;
  /* Largeur maximale pour les grands écrans */
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

#dashboard {
  /* 1. Centrage et Dimension */
  max-width: 1200px;
  /* Largeur maximale pour les grands écrans */
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  text-align: center;

}

#adminTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

#adminTable th {
  /* Remplacez 'left' par 'center' pour centrer le texte */
  text-align: center;
  padding: 10px 10px;
}


#collectsTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}


#collectsTable th {
  /* Remplacez 'left' par 'center' pour centrer le texte */
  text-align: center;
  padding: 10px 10px;
}

#newCollectForm h2 {
  text-align: center;
  padding: 10px 10px;
}

#newVolunteerForm {
  max-width: 1200px;
  /* Largeur maximale pour les grands écrans */
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  border-collapse: collapse;
  text-align: center;
}

#newCollectFormElem {
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  text-align: center;
}

#newCollectFormElem label {
  display: inline-block;
  margin-right: 10px;
  /* espace entre label et champ */
}

#newCollectFormElem select,
#newCollectFormElem input[type="date"] {
  margin-bottom: 20px;
  /* espace vertical entre les deux champs */
}

#newCollectFormElem button {
  margin-bottom: 30px;
  /* espace vertical entre les deux champs */
}

/* Cibler le conteneur principal de tous les éléments de déchet */
#trashButtonsContainer {
  /*Si vous voulez que chaque ligne de déchet soit centrée dans le formulaire */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cibler le conteneur de chaque ligne de déchet (Hypothèse : .trash-item) */
.trash-item {
  display: flex;
  /* Active l'alignement horizontal pour chaque ligne */
  align-items: center;
  /* Aligne verticalement les éléments de la ligne (icône, texte, boutons) */
  justify-content: center;
  /* Centre la ligne de déchet dans le conteneur */
  margin-bottom: 20px;
  /* Ajoute de l'espace entre chaque ligne de déchet */
}

/* Cibler le conteneur spécifique des boutons et du compteur */
.quantity-control {
  display: flex;
  /* Active Flexbox pour aligner `-`, `0`, et `+` horizontalement */
  align-items: center;
  /* Alignement vertical au milieu de l'élément */
  margin-left: 20px;
  /* Ajoute un espace pour séparer de l'icône/nom du déchet */
}

/* Espacement du compteur */
.quantity-control .count {
  margin: 0 10px;
  /* Ajoute de l'espace de chaque côté du chiffre (0) */
  font-size: 1.2em;
}

/* Optionnel : Ajuster la taille des boutons pour un meilleur look */
.quantity-control button {
  width: 30px;
  height: 30px;
  line-height: 1;
  /* S'assure que le texte du bouton est centré verticalement */
}

header {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: none;
}


#homeIcon {
  display: flex;
  justify-self: center;
  font-size: 48px;

  font-family: "BBH Sans Bartle", sans-serif;
  font-weight: 400;
  font-style: normal;

  align-items: center;
  color: var(--header-color, rgb(249, 3, 3));
  border-bottom: none !important;
  /* Supprime toute bordure inférieure du h1 */
  box-shadow: none !important;
  /* Supprime toute ombre du h1 */
  margin-bottom: 0 !important;
  /* Assure qu'il n'y a pas de marge basse qui ressemble à un espace */
  padding-bottom: 0 !important;
  /* Assure qu'il n'y a pas de padding bas qui contribue */

  /* Ajustement de la hauteur de ligne pour le texte */
  line-height: 1.1;
  /* Peut être 1, 1.2, etc. - joue avec cette valeur */
  overflow: hidden;
  /* Cache tout ce qui dépasse des limites de l'élément */
}

#homeIcon a {
  text-decoration: none !important;
  text-decoration-line: none !important;

  /* FORCER LA COULEUR DE LA LIGNE À ÊTRE BLANCHE */
  text-decoration-color: white !important;
  /* Utiliser la couleur du fond de la page */

  border-bottom: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}


/* Cibler le SPAN qui contient la partie bleue du texte */
#homeIcon .enceColor {
  border-bottom: none !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  color: white
}



/*INDEX.HTML - PARTNERS SECTION CSS*/
/* Le conteneur principal qui forme le cadre */
#partners {
  /* 1. Centrage et Dimension */
  max-width: 1200px;
  /* Largeur maximale pour les grands écrans */
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.logo-association {
  /* Définit une hauteur fixe pour tous les logos (ajustez cette valeur) */
  height: 40px;
  width: auto;
  /* Maintient les proportions de l'image automatiquement */

  /* Optionnel : pour aligner verticalement l'image avec le texte si elle est dans un <h2> */
  vertical-align: middle;

  /* Optionnel : ajoute un peu d'espace à droite du logo pour le séparer du texte */
  margin-right: 10px;
}

/* Volonteer HTML */

#dashboard {
  /* 1. Centrage et Dimension */
  max-width: 1200px;
  /* Largeur maximale pour les grands écrans */
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  text-align: center;

}

#collectsTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}


#collectsTable th {
  /* Remplacez 'left' par 'center' pour centrer le texte */
  text-align: center;
  padding: 10px 10px;
}

#newVolunteerForm {
  max-width: 1200px;
  /* Largeur maximale pour les grands écrans */
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  border-collapse: collapse;
  text-align: center;
}

#newCollectForm h2 {
  text-align: center;
  padding: 10px 10px;
}

#newCollectFormElem {
  width: 90%;
  /* Prend 90% de la largeur du viewport sur les petits écrans */
  margin: 30px auto;
  /* Centre horizontalement (auto) et ajoute de l'espace au-dessus et en dessous (30px) */

  /* 2. Style du Cadre */
  background-color: white;
  /* Assurez-vous que l'intérieur est blanc (ou la couleur de votre choix) */
  border: 1px solid #ddd;
  /* Bordure fine et discrète (gris clair) */

  /* 3. Optionnel : Espace intérieur (pour ne pas coller le contenu à la bordure) */
  padding: 20px 40px;
  /* Padding de 20px en haut/bas et 40px gauche/droite */

  /* 4. Optionnel : Coins arrondis et ombre pour un look moderne */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  text-align: center;
}

#newCollectFormElem label {
  display: inline-block;
  margin-right: 10px;
  /* espace entre label et champ */
}

#newCollectFormElem select,
#newCollectFormElem input[type="date"] {
  margin-bottom: 20px;
  /* espace vertical entre les deux champs */
}

#newCollectFormElem button {
  margin-bottom: 30px;
  /* espace vertical entre les deux champs */
}


/*ADMIN HTML*/
#adminTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

#adminTable th {
  /* Remplacez 'left' par 'center' pour centrer le texte */
  text-align: center;
  padding: 10px 10px;
}

/* Cibler le formulaire qui contient la liste déroulante et le bouton */
#userForm {
  /* Ajoute une marge au bas du formulaire pour le décoller du footer */
  margin-bottom: 50px;
  /* Tu peux ajuster cette valeur (ex: 80px) pour plus d'espace */
  /* Centrage des éléments "inline" (comme la liste déroulante et le bouton) */
  text-align: center;

  margin-bottom: 50px;
  /* Conserver la marge pour l'espace avec le footer */
}



/* Cibler le conteneur principal de tous les éléments de déchet */
#trashButtonsContainer {
  /*Si vous voulez que chaque ligne de déchet soit centrée dans le formulaire */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cibler le conteneur de chaque ligne de déchet (Hypothèse : .trash-item) */
.trash-item {
  display: flex;
  /* Active l'alignement horizontal pour chaque ligne */
  align-items: center;
  /* Aligne verticalement les éléments de la ligne (icône, texte, boutons) */
  justify-content: center;
  /* Centre la ligne de déchet dans le conteneur */
  margin-bottom: 20px;
  /* Ajoute de l'espace entre chaque ligne de déchet */
}

/* Cibler le conteneur spécifique des boutons et du compteur */
.quantity-control {
  display: flex;
  /* Active Flexbox pour aligner `-`, `0`, et `+` horizontalement */
  align-items: center;
  /* Alignement vertical au milieu de l'élément */
  margin-left: 20px;
  /* Ajoute un espace pour séparer de l'icône/nom du déchet */
}

/* Espacement du compteur */
.quantity-control .count {
  margin: 0 10px;
  /* Ajoute de l'espace de chaque côté du chiffre (0) */
  font-size: 1.2em;
}

/* Optionnel : Ajuster la taille des boutons pour un meilleur look */
.quantity-control button {
  width: 30px;
  height: 30px;
  line-height: 1;
  /* S'assure que le texte du bouton est centré verticalement */
}


#end {
  background-color: red;
  /* Couleur de fond bleu foncé de ton image */
  /* width: 100%; */
  color: white;
  display: flex;
  /* Active Flexbox */
  flex-wrap: wrap;
  /* Permet aux colonnes de passer à la ligne sur mobile */
  gap: 40px;
  /* Ajoute un espace entre les colonnes */
  align-items: flex-start;
  /* Aligne le contenu en haut des colonnes */
  padding: 20px;
}

#end a:-webkit-any-link {
  color: white
}

#end h1 {
  color: var(--header-color, rgb(255, 254, 252));
  display: flex;
  width: 100%;
  align-items: center;
}

#end h4 {
  color: var(--header-color, rgb(255, 254, 252));
  display: flex;
  width: 100%;
}

#end h5 {
  color: var(--primary-color);
  display: flex;
  width: 100%;

}

#end p {
  color: var(--primary-color);
  display: flex;
  width: 100%;
}

#end h6 {
  color: var(--primary-color);
  display: inline-flexbox;
  width: 100%;

}

.footer-colonne {
  /* Ceci garantit que les colonnes se répartissent l'espace */
  flex: 1 1 250px;

  display: flex;
  flex-direction: column;
}

.footer-copyright {
  flex-basis: 100%;
  order: 99;
  margin-top: 30px;
  text-align: center;
  font-size: 0.8em;
  padding-top: 15px;
  /* Ligne de séparation visuelle (optionnel) */
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-copyright h6 {
  margin: 5px 0;
  font-weight: normal;
}

@media screen and (max-width: 720px) {
  .gallery_column {
    display: flex;
    flex-direction: column;

  }
}


.divAdopt {
  height: 100px;
  width: 100px;
}

/* DASHBOARD CSS A ETE COLLE ICI */

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid #ccc;
}

th,
td {
  text-align: center;
  padding: 10px 10px;
}

th:last-child {
  text-align: center;
}

#newCollectForm {
  display: none;
  flex-direction: column;
}

#addANumber {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.plus .minus {
  margin: 0 10px;
}