/* Importation de la police Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* === STYLES GÉNÉRAUX === */
html, body {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  background-color: #1B4332; /* Fond vert foncé pour un look moderne */
  margin: 0;
  color: white; /* Texte par défaut en blanc */
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* --- Le contenu s'ajuste en hauteur sans dépasser le footer --- */
.container {
  flex: 1; 
  display: flex;
  justify-content: center;  /* Centre horizontalement */
  align-items: center;  /* Centre verticalement */
}

/* === TITRES === */
.special-title {
  margin-top: -50px;
  padding: 0;
  text-align: center;
}

/* === FORMULAIRES === */
input, select, textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  box-sizing: border-box;
}

/* === FOOTER === */
footer {
  background-color: #081C15; /* Un vert encore plus foncé */
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
}

/* === TABLEAUX === */
tbody {
  flex-grow: 0; /* Ne grandit pas inutilement */
}

.table-container-entete {
  align-items: flex-start; /* Colle en haut si la table est petite */
  display: flex;
  flex-direction: column;
  width: 75%;
  margin: 0 auto;
  max-height: calc(100vh - 200px); /* réserve la place du header et du footer */
}

.table-container {
  align-items: flex-start; /* Colle en haut si la table est petite */
  flex: 1; /* Permet à la table de prendre tout l'espace vertical */
  display: flex;
  flex-direction: column;
  overflow: auto; /* Active le scroll si nécessaire */
  width: 75%;
  margin: 0 auto;
  scrollbar-color: black white;
  max-height: calc(100vh - 200px); /* réserve la place du header et du footer */
}

table.blueTable {
    flex: 1;
    background-color: #D8E2DC;
    color: black;
    width: 100%;
    text-align: left;
    border-style: solid;
    border-color: #000000;
    margin: 0 auto;
    padding: 0;
    border-spacing: 0;
    /*height: 100%;*/
    border-collapse: collapse;
    flex-grow: 0; /* Ne force pas la table à grandir, elle reste en haut */
}

table.blueTable thead {
  position: sticky;
  top: 0;
   z-index: 100;
}

table.blueTable th {
  background-color: #2D6A4F; /* Vert profond */
  color: white;
  font-weight: bold;
  padding: 5px;
  border-color: white;
}

/* === Contenu du tableau === */
table.blueTable td {
  font-size: 12px; /* Réduction de la police */
  padding: 3px 5px; /* Ajustement du padding */
}

table.blueTable tr:nth-child(even) {
  background: white;
  color: black;
}

table.blueTable tr:hover {
  background-color: #FFC107; /* Jaune moutarde pour bien voir le survol */
  cursor: pointer;
  color: black;
}

/* Style des commentaires utilisateur (non "System") */
/* Alterner les couleurs des lignes "commentaire-user" */
table.blueTable tr.commentaire-user:nth-child(even) {
  background: rgb(230, 90, 90); /* Rouge plus foncé */
}

.commentaire-user {
  background-color: red;
  color: white;
}


/* Styles des boutons */
.myButton {
  box-shadow: 0px 10px 14px -7px #474747;
  background: linear-gradient(to bottom, white 5%, rgb(185, 185, 185) 100%);
  background-color: white;
  border-radius: 34px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: black;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px;
  text-decoration: none;
  text-shadow: -40px 1px 20px #cccccc;
  width: 110px;
  min-width: 20px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.myButton.thin {
  width: 40px !important;
}

.myButton.large {
  width: 200px;
}


.myButton:hover {
  background: linear-gradient(to bottom, #efefef 5%, #afafaf 100%);
  background-color: #cccccc;
  transform: translateY(-2px);
}

.myButton:active {
  position: relative;
  top: 1px;
  transform: translateY(1px);
}

.myButton.current-page {
  box-shadow: 0px 10px 14px -7px black;
  background: linear-gradient(to bottom, black 5%, black 100%);
  background-color: white;
  color: white;
  cursor: default;
}

.myButton:disabled {
  background: linear-gradient(to bottom, #d3d3d3 5%, #a9a9a9 100%);
  background-color: #d3d3d3;
  color: #666; /* Texte grisé */
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  text-shadow: none;
}


/* === HEADER & MENU === */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 20px;
  background-color: #081C15; /* 🌿 Vert très sombre */
  color: white;
  padding: 10px 10px 0 10px;
  z-index: 1000;
  text-align: center;
}

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

header nav a, 
.dropdown-title {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

header nav a:hover, 
.dropdown-title:hover {
  color: black;
  background-color: #FFC107; /* Jaune moutarde au survol */
}

/* === MENU DÉROULANT === */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  min-width: 180px;
  background-color: #2D6A4F; /* Vert profond */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  border-radius: 5px;
  overflow: hidden;
}

.dropdown-content a {
  display: block;
  color: white;
  padding: 8px 10px;
  text-decoration: none;
  text-align: left;
  height: 20px;
  font-size: 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a:hover {
  background-color: #FFC107; /* Jaune moutarde au survol */
  color: black;
}


/* === AUTRES AJUSTEMENTS === */
/* Bande en haut */
.header-top-bar {
  width: 100%;
  height: 10px;
  background-color: black;
}

.nav-container {
  flex: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

/* Première option de menu toujours visible en gris foncé */
.dropdown-content a:first-child {
  background-color: #2D6A4F;
  color: white;
  transition: background 0.3s ease, color 0.3s ease;
}

.dropdown-content a:first-child:hover {
  background-color: #FFC107;
  color: black;
}

/* Style pour un séparateur avec une ligne de chaque côté du texte */
div.séparateur {
  display: flex;
  align-items: center; /* Centrage vertical */
  gap: 10px; /* Espacement entre les éléments */
  margin-bottom: 15px;
}

/* Style pour aligner à droite les colonnes numériques */
.numeric-column {
  text-align: right;
}

/* Un type qui cache un élément */
.hidden {
  display: none;
}

.contacts-table {
  width: 100%;
  border-collapse: collapse;
  color: black;
  font-size: 12px;
  /* border: 1px solid #8d8d8d; */
}

.with-loupe {
  background: url("../img/search-icon.png") no-repeat right 10px center;
  background-size: 16px 16px; /* à adapter selon la taille de ton icône */
  padding-right: 35px; /* laisse de la marge pour le texte à droite */
}

.search-box {
  background-color: white;
  width: 350px;
}

.flex-container {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}


/* Assure que toute la page prend la hauteur de l'écran */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Le contenu principal prend toute la place restante */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Footer collé en bas */
footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  margin-top: auto; /* Ce qui force le footer à rester en bas */
}

    /* Conteneur pour aligner l’input et l’icône */
.password-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Champ de mot de passe */
.password-container input {
    width: 100%;
    padding-right: 40px !important;
    /* Espace pour l’icône */
    height: 30px;
    /* Hauteur uniforme */
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
  }

  /* Icône pour afficher/masquer le mot de passe */
.password-toggle {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer;
    font-size: 18px;
    color: #666;
  }

  /* Effet au survol de l'icône */
  .password-toggle:hover {
      color: #333;
  }

  .input-container {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.input-container div {
    display: table-row;
}

.input-container input {
    display: table-cell;
    width: 100%;  /* Chaque input prendra la largeur exacte de la colonne */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: right;
}