#container_calendar {
  width: 200%;
  display: flex;
  transition: transform 0.6s ease;
}

/* CHAQUE PANNEAU = 50% */
.panel {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

/* contenu interne */
.calendar {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 30px;
}

#schedul_div {
  height: auto;
}
#containerschedul{
  height: 85%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.time-slot {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.time-slot:hover {
  background: #f2f2f2;
}

.time-slot.selected {
  background: #437693;
  color: white;
}

#container_inputs{
  width: 95%;
  margin-left: 2.5%;
}


#take_rdv{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.returning{
  width: fit-content;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid rgb(70, 70, 70);
  padding: 1% ;
}
#date_selected{
  text-align: center;
}
.confirm{
  background-color: rgb(10, 60, 200);
  color:white;
}




/* slide */
.go_to_sched {
  transform: translateX(-50%);
}
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cal-header button {
  cursor: pointer;
  padding: 5px 10px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
}

.day-name {
  font-weight: bold;
  font-size: 12px;
}

.day {
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.day:hover {
  background: #f0f0f0;
}

.other-month {
  opacity: 0.3;
}

.selected{
  background: rgb(10, 60, 200);
  color: white;
  border-radius: 6px;
}
.selected_time{
  background: rgb(10, 60, 200);
  color: white;
  border-radius: 6px;
}

.container_contact{
  overflow: hidden;
}
.hidden{
  display: none;
}










#container_acrroche_titre_contact{
  width: 70%;
  margin-left: 15%;
  padding-top: 10%;
  position: relative;
  z-index: 2;
  height:auto;
}
.container_text{
  width: 100%;
}
#container_contact{
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.container_contact{
  width: 50%;
  height: auto;
  position: relative;
}
#logo_contact{
  position: absolute;
  bottom: 25%;
  left:40%;
  transform: translateX(-60%);
  width: 50%;
  opacity: 1;
}
label{
position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
input{
  width: 100%;
  border-radius: 5px;
  border: 1px solid rgb(88, 88, 88);
  background-color: transparent;
  font-size: clamp(15px, 1.1vw, 30px);
  padding: 1%;
}

input:focus{
  outline: none;
  box-shadow: none;
}
textarea{
  width: 100%;
  height:50vh;
  border-radius: 5px;
  border: 1px solid black;
  background-color: transparent;
  font-size: clamp(15px, 1.2vw, 30px);
  padding: 2%;
  min-height: 350px;
}
textarea:focus{
  outline: none;
  box-shadow: none;
}
  #container_btn_contact{
    text-align: center;
  }



.custom_input,
.custom_select{
  width: 100%;
  padding: 2%;
  border-radius: 5px;
  border: 1px solid black;
  outline: none;
  font-size: clamp(15px, 1.1vw, 30px);
}

/* select arrow */
.select_wrap{
  position: relative;
}

.select_wrap::after{
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  pointer-events: none;
}
.coord_line{
  display: flex;
  gap:1%;
  width: fit-content;
  align-items: center;
}

.ic_coord{
  width: 4%;
  height: 4%;
  min-width: 20px;
  min-height: 20px;
}




@media (max-width: 1280px) and (max-height:1024px){
  textarea{
    height:40vh;
  }
  input{
  font-size: clamp(15px, 1.3vw, 30px);
}
textarea{
  font-size: clamp(15px, 1.4vw, 30px);
}
.custom_input,
.custom_select{
  font-size: clamp(15px, 1.3vw, 30px);
}

}


@media (max-width: 1280px) and (max-height:800px){
  textarea{
    height:50vh;
  }

}
@media (max-width: 1176px){

  input{
    font-size: clamp(15px, 1.1vw, 30px);
  }
  textarea{
    font-size: clamp(15px, 1.2vw, 30px);
  }
  .custom_input,
  .custom_select{
    font-size: clamp(15px, 1.1vw, 30px);
  }
  #take_rdv{
    flex-direction: column;
    gap:10px;
    align-items: start;
  }
}






@media (max-width: 900px){
  #container_acrroche_titre_contact{
    width: 90%;
    margin-left: 5%;
    padding-top: 20%;
  }
  #container_inputs{
    margin-left: 2%;
    width: 96%;
  }
  #logo_contact{
    display: none;
  }
  #container_contact{
    flex-direction: column-reverse;
    align-items: center;
  }
  .container_contact{
    width: 70%;
    margin-top: 5%;
  }
  .container_contact{
    width: 90%;
    margin-top: 5%;
  }
}

@media (max-width: 800px){
 .are_first{
  margin-top: 8%!important;
 }
}
@media (max-width: 1000px){
  .cal-grid{
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 500px){
  #acrroche{
    margin-top: 80vh!important;
  }
  .calendar{
    padding: 10px;
  }
  .container_contact{
    width: 100%;
  }
}
@media (max-width: 350px){
  .cal-grid{
    grid-template-columns: repeat(5, 1fr);
  }
}