body {
  background-color: #ffffff;
  background: #eaeaea;
  margin: 0;
  font-family: "Arial", sans-serif;
  
  font-optical-sizing: auto;
  font-size: larger;
  font-style: normal;
}

.hidden {
  display: none !important;
}

#head {
  width: 100%;
  background: #5b809f;
  box-shadow: 1px -1px 6px 7px rgba(0, 0, 0, 0.30);
  position: relative;
  z-index: 99;
  margin:0;
}

#head img {
  /* height: 7vw; */
  margin:auto;
}

#head h1 {
  display: inline-block;
  font-size: x-large;
  margin: 0;
  vertical-align: top;
  color: #ffffff;
}
#disclaimer, .compiler{
    background-color: aliceblue;
    text-align: justify;
    padding: 25px 0;
    width: 50%;
    padding: 41px 25%;
}

.compiler pre{
  margin: 10px auto;
  display: block;
  position: relative;
  width: 45%;
}

#formulaire,
#Consulte {
  /* top: -60px; */
  z-index: 9;
  min-height: 53vh;
  position: relative;
  width: 100%;
  vertical-align: bottom;
  padding-top: 20px;
  padding-bottom: 25px;
}
.success {
     position: relative;
    z-index: 999;
    display: block;
    background-color: #1da844;
    height: 0px;
    /* top: 31px; */
    margin: 50px auto;
    width: 50%;
}
#formulaire form {
  width: 80%;
  margin: auto;
  padding: 0% 5% 4% 5%;
}

#formulaire  input[type='text'] {
  border-radius: 5px;
  height: 4vh;
  font-size: large;
  /* margin: 0 auto; */
  display: inline-block;
  width: 100%;
  border-radius: 0;
}

#formulaire .Case input[type='text'] {

  width: 100%;
  position: relative;
  float: left;
  text-align: left;
}

#formulaire table{
margin: 0 auto;
    padding: 32px;
    border-radius: 30px;
    background: #ccd7e1;
    box-shadow: 2px 7px 6px 7px #0000001f;
}
#formulaire table tr, #formulaire table td {
       padding: 10px;
}
#formulaire table td{
  width: 126px;
  text-align: center;
}

#formulaire h2{
      text-align: center;
}
input[type='checkbox'] {
  height: 2vh !important;
  display: inline-block;
  margin: 0 !important;
}
.trigger{
  text-align: right;
}
input[type='submit'] {
  background-color: #86b1d7;
  color: white;
  margin: 15px auto 5% auto;
  display: block;
  height: 5vh;
  font-size: large;
  padding: 0 12px;
  font-weight: 800;
  border: none;
  top: 25px;
  position: relative;
}

#formulaire p {
  padding: 15px 5%;
  margin: 0 auto 0 5vw;
  width: 80%;
}

.even {
  background-color: aliceblue;
}

.odd {
  background-color: rgb(164 186 205);
}

#Consulte table {
  width: 85%;
  border-collapse: collapse;
  margin: auto;
}

#Consulte th,
#Consulte td {
  padding: 15px;
  text-align: center;
  border: 1px solid #148aff;
  border-collapse: collapse;
}

#Consulte form {
  margin: auto;
  height: 5vh;
  width: 8vw;
}

.Case {
  text-align: center;
  width: 48.5%;
  display: inline-block;
  height: 9vh;
  vertical-align: top;
  margin-bottom: 34px;
}

.Case2 {
    width: 100%;
    height: fit-content;
    vertical-align: top;
}



.Case3 {
  vertical-align: bottom;
  background: white;
      line-height: 26px;
      position: relative;
      top: 19px;
      width: 100%;
      min-height: 30vh;
      border: solid 1px black;
      margin: 0 .5vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      
  }

  .Case3 img {
  width: 30px;
  display: inline-block;
  position: relative;
  top: 10px;
  right: 16px;
}

.Case3 titre {
  display: inline-block;
  margin-bottom: 17px;
}

.Case3 input[type='checkbox'] {    margin: 15px 0px 15px 15px !important;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* ou une hauteur fixe */
  padding: 20px;
}
.centered {
    width: fit-content;
    margin: auto;
    padding: 10px;
    margin: 10px auto;
    text-align: center;
}
.top {
  text-wrap: nowrap;
}
/* milieu */
.middle {
  font-size: medium;
  flex: 1; /* prend tout l'espace restant */
  display: flex;
  align-items: center;       /* centre verticalement */
  justify-content: center;   /* centre horizontalement (optionnel) */
  text-align: center;
  padding: 15px 0;
}

.bottom{
    position: relative;
}

.Case4 {
  margin: 25px auto;
  display: grid;
  grid-auto-flow: row;
  justify-content: start;
  grid-template-columns: repeat(4, 1fr);
}
.Case4 input[type='text']{
  width: 93% !important;
  margin-top: 34px;
}
/* Par défaut (desktop) → en ligne */
#flex_case3{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Tablette */
@media  (min-width: 769px) and (max-width: 1024px) {
  #flex_case3 {
      grid-template-columns: repeat(2, 1fr);
     
  }
  .Case3 {
    min-height: 23vh;
}
  .middle{
  padding-bottom: 15px;
}
.bottom{
  bottom: 0px;
}
.Case4 {
  grid-template-columns: repeat(2, 1fr);
 
}
}


/* Mobile */
@media (max-width: 768px) {
  #flex_case3 {
      grid-template-columns: 1fr;
  }
  .Case4{
    grid-template-columns: 1fr;
  }
  .Case3 {
    
    min-height: 26vh;
  }
  .bottom{
    bottom:0px;
  }
  body{
    font-size: unset;
  }
}

.handed{
  cursor:pointer;
}
input[type='submit']:hover {
  background-color: #2f73af;
}

label {
  display: block;
  text-align: left;
  margin-bottom: 15px;
  margin-top: 40px;
}


.pop_up {
  text-align: center;
  background: #3498db;
  padding: 3% 0;
  width: 100%;
  margin: 38px 0;
  position: relative;
  z-index: 999;
}
.note{
  color:#ff3333;
  font-size: small;
}
input:required {
  background-color: #ffe6e68c; /* rose clair */
}