#Contenu
{
    /*border:solid 1px rgb(32, 32, 32);*/
    /*background-color:white;*/
    width:85%;
    margin:20px auto 20px auto;
    /*border:1px solid rgb(8, 0, 85);*/
    padding-top:20px;
}
h2 {
    font-size:40px;
    text-align:center;
    color:#06080d;
    width:70%; /* % de la largeur de .portail_bloc_texte */
    margin:25px auto 25px auto;
}
h3 {
    font-size:35px;
    text-align:center;
    color:#06080d;
    width:70%; /* % de la largeur de .portail_bloc_texte */
    margin:25px auto 25px auto;

}
div .small_text {

  font-size:10px;
  line-height:1;

}
div.portail_bloc_texte {
    display:block;
    /*width:800px;*/
    width:50%;
    margin: 50px auto 40px auto;
    /*border:solid 1px grey;*/
    /*background-color:rgb(233, 233, 233);*/
    padding:3px;
    border-radius:5px;
}
div.portail_bloc_texte p {

  font-size:25px;
  width:70%; /* % de la largeur de .portail_bloc_texte */
  margin:auto;

}
div.portail_bloc_texte li {

    font-size:25px;
    width:70%;
    margin:auto;

}

a.portail_link_etape {
    display:block;
    width:50%;
    /*height:70px;*/
    border:solid 1px #82b7f1;
    background-color:#82b7f1;
    margin:20px auto 50px auto;
    /*padding-top:40px;
    border-radius:40px;
    vertical-align:middle;*/
    text-align:center;
    text-decoration:none;
    font-size:50px;
    color:white;
    border-radius:15px;
}
a:hover.portail_link_etape {
    color:black;
    /*background-color:rgb(2
    13, 213, 244);*/
}
a.portail_link_etape_sousmenu {
    display:block;
    width:30%;
    border:solid 1px #82b7f1;
    background-color:#256ab3;
    margin:20px auto 50px auto;
    text-align:center;
    text-decoration:none;
    font-size:25px;
    color:white;
    border-radius:10px;
}
a:hover.portail_link_etape_sousmenu {
    color:black;
    background-color:#82b7f1;;
}




a.portail_link_gros_bouton {
    display:block;
    width:80%;
    /*height:70px;*/
    border:solid 1px #82b7f1;
    background-color:#82b7f1;
    margin:20px auto 50px auto;
    /*padding-top:40px;
    border-radius:40px;
    vertical-align:middle;*/
    text-align:center;
    text-decoration:none;
    font-size:50px;
    color:white;
    border-radius:15px;
}
a:hover.portail_link_gros_bouton {
    color:black;
    /*background-color:rgb(2
    13, 213, 244);*/
}

a.portail_link_etape_reserved {
  display:block;
  width:50%;
  height:70px;
  /*border:solid 1px blue;*/
  /*background-color:rgb(251, 251, 251);*/
  margin:20px auto 50px auto;
  /*padding-top:40px;
  border-radius:40px;
  vertical-align:middle;*/
  text-align:center;
  text-decoration:none;
  font-size:30px;
  color:rgb(80, 80, 80);
  font-size:15px;
}

a:hover.portail_link_etape_reserved {
  color:black;
  /*background-color:rgb(244, 213, 213);*/
  text-decoration:underline;
}
a.portail_link_normal {
    color:red;
    font-size:40px;
}
a.portail_link_petit {
    display:block;
    color:red;
    font-size:16px;
    text-align:center;
    margin-top:15px;
}

/* GROS MENU SPLIT SUR PAGE RACINE CNR ARBO */
div.menu_split {
  display:flex;
}
a.menu_split {
  flex: 1;
  width:40%;
  /*height:430px;*/
  color:black;
  /*border: solid 1px red;*/
  text-align:center;
  font-size:25px;
}
a.menu_split:hover {

  /*border:solid 1px red;*/
  cursor:pointer;
}
a.menu_split img {
  width:75%;

}
/* END SPLIT MENU */
/* TIPS */
div.tips {

  width:20%;
  position:absolute;
  left:10px;
  background-color:rgb(253, 253, 181);
  padding:5px;
  padding-bottom:15px;
  font-size:23px;
  border-radius:15px;

}
/* END */

/* FORMULAIRE  */
#utils_form_portail {
  width:100%;
  margin:auto;
}
.utils_form_portail fieldset{
  font-size:28px;
  font-weight:bold;
  background-color:rgb(235, 235, 251);
  border:solid 1px grey;
}
.utils_form_portail span{
    font-size:20px;
    font-weight:normal;
  }
.utils_form_portail input {
  font-size:18px;
  width:90%;
  height:30px;
  display:block;
  margin-bottom:10px;
}
.utils_form_portail textarea {

  width:100%;

}
.utils_form_portail input[type="submit"]{
  font-size:40px;
  height:100px;
  margin:10px auto 10px auto;
  border-radius:10px;
  cursor:pointer;
}
.utils_form_portail input:hover[type="submit"]{
    font-size:40px;
    height:100px;
    color:rgb(0, 0, 121);
    background-color:rgba(247, 167, 86, 0.466);
    cursor:pointer;
  }
  
.add{
  margin:10px auto 20px auto;
  font-size:25px;
  height:50px;
  color:rgb(0, 0, 0);
  /*background-color:rgb(247, 166, 86);*/
}
div.sample {

  border:solid 1px rgb(0, 0, 0);
  background-color:rgb(226, 226, 226);
  padding:2px;
  margin-top:20px;
}

/* ========================================================== */
/* Sample n°x, après l'injection automatique des samples en plus */
/*
#formfield label {
  /* Style du label du select/inputdate dynamique (sample) */
  /*
  display:block;
  height:30px;
  /*width:100%;*//*
  float:left;
  margin-right:5px;
  color:red;
}
#formfield select {
  float:left;
  color:green;
}*/
/* ========================================================== */
/* Sample n°1, avant l'injection automatique des samples en plus */
.sample_row  { /*label + SELECT */
  display:block;
  /*height:30px;*/
  /*width:100%;*/
  float:left;
  margin-right:5px;
  /*color:rgb(128, 0, 100);*/
  /*border:solid 1px red;*/
}
#sample_row_date  {
  /*height:35px;*/
  font-size:25px;
  display:inline;
  width:200px;
  }
/* ========================================================== */
.utils_form_portail label {
    font-size:22px;
    /*height:100px;*/
    font-weight:normal;
    display:inline;

  }
.utils_form_portail select {
  font-size:26px;
  display:block;
  width:250px;
  /*float:left;*/
}
.utils_form_portail input[type="checkbox"] {
  font-size:60px;
  display:inline;
  height:25px;
  width:20px;
  height:20px;
  margin-bottom:0px;
}

/* CASE RADIO POUR DIAG NORMAL */
.yesnot {
  display: flex;
  gap: 0px; /* Espacement entre les éléments */
  height:50px;
  font-size:24px;
  
}
.yesnot input[type="radio"] {
    margin: 0 0px 0 0; /* Réduit l'espacement autour du bouton radio */
    transform: scale(1); /* Ajuste la taille du bouton radio */
    width:50px;;
}
.yesnot label {
    margin-right: 1px; /* Espacement après le texte */
    cursor: pointer;
    
}
/* CASE RADIO POUR EFS */
.yesnotefs {
  display: flex;
  flex-wrap: wrap; /* Permet les retours à la ligne */
  gap: 10px; /* Espacement entre les cases */
  
}
.yesnotefs input[type="radio"] {
    margin: 0 0px 0 0; /* Réduit l'espacement autour du bouton radio */
    transform: scale(1); /* Ajuste la taille du bouton radio */
    width:100px;;
}



/*
.radio {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  cursor: pointer;
  
}
.radio label {
  position: relative;

  cursor: pointer;
}



.utils_form_portail input[type="radio"] {
    height:20px;
    border:solid 1px red;
    color:red;
  }*/

.utils_form_portail input[type="date"] {
    height:35px;
    font-size:25px;
    display:inline;
    width:200px;

  }
#etiquette {
  width:400px;
  margin:20px auto 20px auto;
  border:dashed 1px red;
  padding:20px;
  text-align:center;
}
#etiquette p {
  font-weight:bold;
}

#voyages_en_plus {
  display:block;
  position:relative;
  font-size:25px;
  height:30px;
  color:black;
  font-weight:bold;
}

/* Label texte dans un form, quand ajouté manuellement */
.label_form {
  display:block;
  position:relative;
  font-size:25px;
  height:30px;
  color:black;
  font-weight:bold;
  margin-top:5px;
}











/* ==== */









#Top
{
    border-top:Solid 3px blue;
    border-bottom: solid 3px blue;
    height:50px;
    margin-bottom:6px;
}

h3.titre
{
    color:rgb(0, 0, 129);
    text-align:center;
}
#Menu
{
    /*border:solid 1px red;*/
    width:14%;
    float:left;
}


a.menu_link
{
    color:red;
    display:block;
    width:100%;
    height:50px;
    text-align:center;
}
a.menu_link:hover
{
    color:blue;
    background-color:rgb(201, 201, 201);
}

#utils_form
{
    border: solid 2px black;
    width:400px;
    padding:2px;
    display:block;
    margin:20px auto 100px auto;
}
#type
{
    width:20px;
    display:inline;
}

/* ====== FORM =======================*/
/*
form{
    color:rgb(29, 29, 29);
    border:solid 1px green;
}
form fieldset{
    color:rgb(29, 29, 29);
    font-weight:bold;

}

form label{
    font-weight:normal;
    text-align:center;
    margin-right:5px;
    border-color:solid 1px red;
    float:left;
    color:rgb(29, 29, 29);
}

form input{
    color:rgb(29, 29, 29);
    display:block;
    /*margin:10px auto 10px auto;
    margin:10px auto 10px 10px;
    border:solid 1px red;
}
*/


/* Style the form - display items horizontally */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  
  /* Add some margins for each label */
  .form-inline label {
    margin: 5px 10px 5px 0;
    
  }
  
  /* Style the input fields */
  .form-inline input {
    vertical-align: middle;
    margin: 5px 10px 5px 0;
    padding: 10px;
    background-color: rgb(215, 178, 178);
    border: 1px solid #ddd;
  }
  
  /* Style the submit button */
  .form-inline button {
    padding: 10px 20px;
    background-color: dodgerblue;
    border: 1px solid #ddd;
    color: white;
  }

/* Style the submit button */
.form-inline input[type=submit] {
    padding: 10px 20px;
    background-color: rgb(169, 174, 179);
    border: 1px solid #343232;
    color: white;
    }

  .form-inline button:hover {
    background-color: royalblue;
  }
  
  /* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
  @media (max-width: 800px) {
    .form-inline input {
      margin: 10px 0;
    }
  
    .form-inline {
      flex-direction: column;
      align-items: stretch;
    }
  }





div.Sport-box {
    margin: 100px auto 0px auto;
    
}
div.Sport-box span{
    font-weight:bold;
    color:orange;
}


#etiquette-1 {
    display:block;
    width:200px;
    height:50px;
    text-align:center;
    background-color:coral;
}
div.etiquette-2 {
    display:block;
    width:200px;
    height:50px;
    text-align:center;
    background-color:rgb(92, 80, 255);
}
div.etiquette-3 {
    display:block;
    width:200px;
    height:50px;
    text-align:center;
    background-color:rgb(110, 155, 102);
}






/* ======================== PORTAIL ======= */





#etiquette_a_imprimer {
    display:block;
    width:800px;
    margin:40px auto 40px auto;
    border:dashed 3px black;
    padding:20px;
}
#etiquette_a_imprimer  img {
    display:block;
    margin:5px auto 5px auto;
    width:400px;
}
#etiquette_a_imprimer p {
    border-bottom:dashed 3px black;
    height:400px;
}



#texte {
    width:800px;
    font-size:25px;
    margin:10px auto 10px auto;
}


/* ======================== ARBO-QUAL ======= */
span.error {

    display:block;
    width: 100%;
    height:20px;
    background-color:rgb(247, 41, 41);

}
span.success {

    display:block;
    width: 100%;
    height:20px;
    background-color:rgb(62, 90, 233);

}


/* ======================== PROGRESS BAR ======= */
.progress-bar {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 500px;
    justify-content: space-between;
    margin:auto;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    z-index: 1;
}

.step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-bottom: 5px;
    transition: background-color 0.3s;
    font-size:25px;
}

.step-label {
    font-size: 25px;
    color: #666;
    text-align:center;
}

.step :hover {
    font-size: 25px;
    color: #dd2929;
    text-align:center;
    cursor:pointer;
}

.step.active .step-number {
    background-color: #007BFF;
    color: white;
}

.step.active .step-label {
    color: #007BFF;
    font-weight: bold;
}

.progress-line {
    position: absolute;
    top: 30px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #ddd;
    z-index: 0;
}

.progress-fill {
    height: 100%;
    background-color: #007BFF;
    width: 0%;
    transition: width 0.3s;
}


/* ======================== */
/* Div contenant les liens LABM */
/* ======================== */
/*
#hidden-div {
  width:40%;
  margin:auto;
  padding: 1rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
}
*/