*{
margin: 0;
padding: 0;
}

.header-section{
    /* background-color: steelblue; */
    height: 50px;
    position: absolute;
    top: 0px;
}

.footer-section{
    /* background-color: steelblue; */
    /* height: 50px;
    position: absolute; */
    bottom: 0px !important;
    border: 1px solid #dcdcdc;
    width: 83.5% !important;
    float: right !important;
    margin-top: 10px;
    
    
   
    
}

.timeline {
    display:flex;
    /* background-color:#eee; */
    flex-wrap: nowrap

 
}
.timeline a{
    text-decoration: none;
    margin: 2px;
    color: #000;
    font-size: 18px;
    
}
.colonne {
    background:teal;
    width:auto;
    margin-right:10px;
    position: relative;
    padding: 3px;
    border-radius: 15px;
    /* border-radius: 15px 50px 30px; */
    
   
}
.colonne:last-child {
    margin:0;
}
.colonne > div {
    margin:10px;
    height:30px;
    background:#ddd;
    display:flex;
   
    align-items:center;
    justify-content:center;
    padding: 5px;
    border-radius: 5px;
}
.colonne > div:nth-child(2) {
    border-radius:50%;
    height:100px;
    width:100px;
    
}
.choisir{
    background:#ddd;
    border-radius:50%;
    height:90px;
    width:90px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.colonne > div:nth-child(2):not(.last):after  {
    content: '\2014\2014';
    color: red;
    left:  60px;
    position: absolute;
    z-index: 10;
}



.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 1px;
    border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-container a {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 5em; height: 5em;
    margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; } /* 12em = half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }
.deg180 { transform: translate(-12em);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }
.deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }
.deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }
.deg100 { transform: rotate(100deg) translate(12em) rotate(-100deg);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }
.deg150 { transform: rotate(140deg) translate(12em) rotate(-140deg);border:2px solid grey;border-radius: 100px;background: grey;padding: 5px; }


.circle-container a{
    text-decoration: none;
    color: #000;
}

  .input_form{
    padding: "5px ";                                                 
    border: "1px solid #dcdcdc";
  }

  #formFile::before {
    content: "Change file";
    position: absolute;
    z-index: 2;
    display: block;
    background-color: #eee;
    width: 80px;
  }





  .drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #555;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
  }
  
  .drop-container:hover {
    background: #eee;
    border-color: #111;
  }
  
  .drop-container:hover .drop-title {
    color: #222;
  }
  
  .drop-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
  }
  
  /* .data-label{
    box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color:#fff;
  } */


  legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:1px;
}

/* body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
} */

/* .content {
  flex: 1;
}

.footer {
  margin-top: auto;
  background: teal;
  padding: 1rem 0;
  text-align: center;
} */


html, body {
  height: 100% !important; /* Le corps et la page occupent toujours toute la hauteur */
  margin: 0 !important;    /* Éliminer les marges par défaut */
}

.min-vh-100 {
  min-height: 100vh !important; /* La page occupe toute la hauteur de la fenêtre */
}

.bg-teal {
  background-color: teal !important;
  margin-top: 50px !important;
  height: auto !important;
  
}

.footer {
  position: relative !important; /* Position normale pour éviter des chevauchements */
  width: 100% !important;        /* Le footer prend toute la largeur */
  text-align: center !important;


}