/* styles css*/
body{
  /* background-repeat: repeat; */
  background-color: #CCE4F4;  
}

/* positionnement des blocs */
/* level 0 */
.container{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

@media (min-width: 576px){
  .container{
    max-width: 560px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 740px;
  }
}

@media (min-width: 992px){
  .container{
    max-width: 980px;
  }
}

@media (min-width: 1200px){
  .container{
    max-width: 1180px;
  }
}

/* level 1 */
.bandeau {
  background-color: rgb(49,140,231);
  width: 100%;
  display: flex;
}

/* level 1.1 */
.logo {
  align-items: center;
  background-color: #FFF;
  width: 50px;
}

/* level 1.2 */
.entite{
  font-size: 24px;
  text-align: left;
  color: white;
  padding-left: 10px;
  flex-grow: 1;
}

/* level 1.3 */
.utilisateur{
  width: 290px;
  color: white;
  font-size: 20px;
  text-align: right;
}

/* level 2 */
.principal{
  width: 100%;
  display: flex;
  flex: 1;
}

/* level 2.1 */
.menuV {
  flex: 1 0 auto; /* grow shrink basis */
}

/* level 2.1.2 */
#menu-content {
/*  position: absolute;*/
  top: 100%;
  left: 0;
  /*box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);*/
  z-index: 1;
}

.menu-icon {
   display: none;
}
  
@media (max-width: 768px) {
  #menu-content {
    display: none;
  }

  #menu-content.show {
    display: block;
  }

  .menu-icon {
    display: block;
 }

  .menuV + .conteneur #menu-icon {
    display: flex; /* Affiche le toggle lorsque le menu est masqué */
   }
}

/* level 2.2 */
.conteneur{
  width: 100%;
  flex-grow: 1;
}


/* level 2.2.1 */
.menu-icon-filariane{
  width: 100%;
  display: flex;
  align-items: center; /* Centre les éléments verticalement */
  justify-content: flex-start; /* Aligne les éléments à gauche */
}

/* level 2.2.1.1 */
.menu-icon {
  font-size: 24px;
  cursor: pointer;
}

/* level 2.2.1.2 */
.filariane{
  align-items: left;
  text-align: left;
  font-size: 20px;
  padding: 10px 10px;
}

/* level 2.2.2 */
.onglets{
  padding-bottom: 10px;
  text-align: center;
  align-items: center;
  display: flex; /* Utilise flexbox pour disposer les onglets */
  flex-direction: row; /* Assure l'alignement horizontal des onglets */
  justify-content: center;
}

/* levels 2.2.3 à 2.2.5*/
.filtres,
.buttonsGroup,
.erreurs {
  width: 100%;
  text-align: center;
  align-items: center;
}

/* level 2.2.6 */
.contenu{
  width: 100%;
  /* display: flex; le contenu ne prend plus 100% */
}

legend {
  font-size: 14px;
  font-family: Arial, Helvetica, Verdana;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

.entite a, .utilisateur a {
  color: rgb(255,255,255);
}

.entite a:hover, .utilisateur a:hover{
  color: rgb(0,0,0);
}

/* élèments entête désactivé le 23/01/25
.menu{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: end;
  padding-bottom: 10px;
}

.menu{
  flex-grow: 1;
}*/

.erreur, .dt-empty{
  /* messages d'erreur
     dt-empty pour dataTables vide
  */
  color: red;
  font-weight: bold;
}

.info {
  /* message d'attention */
  color: rgb(0,0,255);
  font-weight: bold;
}

dt, dd{
  height: 30px;
}

/* styles pour les options du menu */
dt{
  width: 160px;
  background-color: green;
  font-size: 24px;
}

dd{
  width: 155px;
  background-color: rgb(49,140,231);
  margin-left: 5px;
  font-size: 18px;
}

dt a, dd a, dt a:hover, dd a:hover {
  text-decoration: none;
  color: #FFF;
}

.item-courant{
  background-color: #FFF;
}

.item-courant a{
  color: #000;
}

dt a:hover, dd a:hover{
  color: red;
}

/* styles généraux */
.a_droite, .nombre{
  /* alignement à droite : cas des nombres*/
  text-align: right !important;
}

.au_centre{
  /* alignement au centre : contenu de même longueur, textes d'information ...*/
  text-align: center !important;
}

.gras {
  font-weight: bold;
}