.d-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100svh; /* Prend toute la hauteur de l'écran */
}
.annonce-item {
  box-shadow: 0 1px 4px black;
}

.table-cont{
  max-height: 400px;
  overflow: auto;
}

.ombre-texte {
  text-shadow: 1px 1px 2px black;
}

.ombre-texte-blanc {
  text-shadow: 0 1px 4px white;
}

.ombre-cadre {
  box-shadow: 0 1px 4px black ;
}

.vh-100 {
  min-height: 100vh;
}

.police-arial-black {
  font-family: arial black
}

.cursor-pointe {
  cursor: pointer;
}
.taille-texte-9 {
  font-size: 9px;
}
.taille-texte-10 {
  font-size: 10px;
}

.taille-texte-11 {
  font-size: 11px;
}

.taille-texte-12 {
  font-size: 12px;
}

.taille-texte-13 {
  font-size: 13px;
}

.taille-texte-14 {
  font-size: 14px;
}

.taille-texte-15 {
  font-size: 15px;
}

.taille-texte-16 {
  font-size: 16px;
}

.taille-texte-17 {
  font-size: 17px;
}

.taille-texte-18 {
  font-size: 18px;
}

.taille-texte-19 {
  font-size: 19px;
}

.taille-texte-20 {
  font-size: 20px;
}

.taille-texte-21 {
  font-size: 21px;
}

.taille-texte-22 {
  font-size: 22px;
}

.taille-texte-23 {
  font-size: 23px;
}

.taille-texte-24 {
  font-size: 24px;
}

.taille-texte-25 {
  font-size: 25px;
}

.taille-texte-26 {
  font-size: 26px;
}

.taille-texte-27 {
  font-size: 27px;
}

.taille-texte-28 {
  font-size: 28px;
}

.taille-texte-29 {
  font-size: 29px;
}

.taille-texte-30 {
  font-size: 30px;
}

.taille-texte-35 {
  font-size: 35px;
}

.taille-texte-36 {
  font-size: 36px;
}

.taille-texte-37 {
  font-size: 37px;
}

.taille-texte-40 {
  font-size: 40px;
}

.taille-texte-53 {
  font-size: 53px;
}

.taille-texte-60 {
  font-size: 60px;
}

.fs-10{
  font-size: 10pt;
}

.fs-12{
  font-size: 12pt;
}

.fs-14{
  font-size: 14pt;
}
.container {
    position: relative;
  }

  .top-left {
  position: absolute;
  top: 8px;
  right: 16px;
  color:white;
  font-weight: bold; 
  background-color: black;
  padding: 2px
}

fieldset {
  background-color: #eeeeee;
}

legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
  .modal.modal-fullscreen .modal-dialog {
    width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    max-width:none;
  }
 
.modal.modal-fullscreen .modal-content {
    height:auto;
    height:100vh;
    border-radius:0;
    border:none;
  }
 
.modal.modal-fullscreen .modal-body {
  overflow-y:auto;
}

 .modal-dialog-bottom {
      position: fixed !important;
      bottom: 0 !important;
      left: 0% !important;
      right: 0% !important;
      margin-bottom: 0 !important;
          
    } 

    .modal-content-bottom {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      
    }

.footer-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #3388ff;
    display: flex;
    overflow-x: auto;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
    color: #3388ff;
    background-color: #F5F0E6;
}

.nav__link--active {
    color: #3388ff;
    background-color: #F5F0E6;
}

.nav__icon {
    font-size: 18px;
}
.vertical-line{
  border-left: 2px solid white;
  display: inline-block;
  height: 1.5cm;
}

.element-avec-gradient {
  background: linear-gradient(to bottom, #F5F0E6, /* Couleur de départ (haut) */ white); /* Couleur de fin (bas) - vous pouvez changer 'white' pour une autre couleur */
}

.bg-marron{
  background-color: #3388ff;
  color:#fff;
  border-color:#F5F0E6;
}

.btn-marron{
  background-color: #3388ff;
  color:#fff;
  border-color:#3388ff;
}

.btn-marron:hover{
  background-color: #914C3B;
  color:#fff;
  border-color:#733D2A;
}

.bg-belge{
  background-color: #F5F0E6;
}

.fixed-header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa; /* Assurez-vous que la couleur de fond correspond à votre design */
  z-index: 1; /* Pour s'assurer qu'il reste au-dessus du contenu défilant */
}

.fixed-column {
  position: sticky;
  left: 0;
  background-color: #f8f9fa; /* Assurez-vous que la couleur de fond correspond à votre design */
  z-index: 2; /* Pour s'assurer qu'il reste au-dessus du contenu défilant et potentiellement de l'en-tête fixe */
}

/* Ajustement pour que l'en-tête fixe recouvre la bordure de la première colonne */
thead th.fixed-column {
  border-bottom: 2px solid #dee2e6; /* Recrée la bordure inférieure de l'en-tête */
}

/* Ajustement pour la bordure droite de la colonne fixe */
tbody th.fixed-column {
  border-right: 2px solid #dee2e6; /* Recrée la bordure droite de la colonne */
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: 10px; /* Espacement entre les boutons */
  scrollbar-width: thin; /* Barre de défilement fine */
      -webkit-overflow-scrolling: touch; /* Meilleure expérience sur mobile */
}

.nav { 
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin; /* Contrôle l’apparence du scroll */
}

.nav-item {
    flex: 0 0 auto; /* Empêche la réduction des boutons */
}

.footer-mobile {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 10px 0;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}

.footer-mobile .row {
    display: flex;
    justify-content: space-evenly;
}

.footer-link {
    text-decoration: none;
    color: #333;
    font-size: 9pt;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-link i {
    font-size: 20px;
    margin-bottom: 3px;
}

.footer-link:hover {
    color: #3388ff;
}

.footer-link--active {
    color: #3388ff;
    font-weight: bold;
}

.padding-3mm{
  padding-bottom: 3mm;
  padding-top: 3mm;
}
.padding-5mm{
  padding-bottom: 5mm;
  padding-top: 5mm;
}