/* GENERAL */
@font-face {font-family: 'baksa_sapi';src: url('../font/BaksoSapi.otf');}
/* bleu: rgb(78,136,143), pour contrastes: 50,91,98; gris: rgb(64,64,64)*/
* {margin: 0;padding: 0;font-size: 14px;font-family: sans-serif; scroll-behavior: smooth;}
body {position: relative;}
h1,h2,h3 {font-family: 'baksa_sapi';}
.prix{font-weight: bold; color:rgb(50,91,98); font-size: 1.8rem;}
.prixPetit{font-weight: bold; color:rgb(50,91,98);}
.bold{font-weight: bold;}

/* NAV */
nav {box-shadow:0px 2px 10px grey;}
nav ul li {list-style: none;}
#logoimage {width: 80px;height: 80px; margin-left: 20px; transition:.6s ease;}
#logotexte {width: 120px;height: 80px; transition:.6s ease;}
.regular a{color: black;font-size: 12px;
  font-family: 'baksa_sapi';}
.linkcolor a {color: rgb(50,91,98);font-size: 12px;font-family: 'baksa_sapi';}
.rightmenu {margin-right: 100px;margin-top: 12px;}
.rightmenu li a {transition: .5s;}
.rightmenu li a:hover {color: rgb(50,91,98);transition: .5s;}
#interventions {background-color: rgb(64,64,64); color: white; border: solid 1px rgb(50,91,98);border-radius: 5px;}
#interventions:hover{opacity: 0.5;transition: .5s;}
.active {border: solid 1px rgb(50,91,98);border-radius: 5px;}
  /* hamburger */
  .navbar-toggler {border: none;}
  #nav-icon3 {
  width: 25px;height: 25px;position: relative;margin: 20px auto;
  -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;}
  #nav-icon3 span {
    display: block;position: absolute;height: 4px;width: 100%;
    background: #2E2E2E;border-radius: 9px;opacity: 1;left: 0;
    -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
  #nav-icon3 span:nth-child(1) {top: 0px;}
  #nav-icon3 span:nth-child(3) {background-color: rgb(50,91,98);}
  #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {top: 8px;}
  #nav-icon3 span:nth-child(4) {top: 16px;}
  #nav-icon3.open span:nth-child(1) {top: 8px;width: 0%;left: 50%;}
  #nav-icon3.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);transform: rotate(45deg);}
  #nav-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);transform: rotate(-45deg);}
  #nav-icon3.open span:nth-child(4) {top: 18px;width: 0%;left: 50%;}

/* ACCUEIL */
.accueil {
  background: url(../img/accueil4.jpg) fixed;background-repeat:no-repeat;background-size:cover;
  height: 500px; color: white;border-radius: 0 0 80px 0;padding-top: 80px;}
.accueilcontenu {background-color: rgba(0,0,0,0.65);padding: 80px 0;text-align: center;}
.accueil h1 {font-weight: bold;font-size: 26px; color: white;}
.accueil .btn {border: 1px solid white;color: white;padding: 15px 30px;
  transition: .5s;font-size: 22px;background-color: rgba(50,91,98,1);font-family: 'baksa_sapi';}
.accueil .btn:hover {background-color: rgba(50,91,98,0.5);}

/* SERVICES */
.services {padding-top: 100px;background:white; background-size: cover;}
.services .topcol {margin-bottom: 50px;}
.services p {line-height: 22px;padding-right: 15px;}
.services .faicon {color: rgb(50,91,98);float: left;height: 100%;margin-right: 30px;}
.services {padding-bottom: 100px;}
.services img {max-width: 150px;transition: .8s;cursor: pointer;}
.services .colpresta:hover img {transform: rotate(360deg) scaleY(1.2) scaleX(1.2);}
.services .colpresta:hover h5 {color: rgb(50,91,98);}

/* A PROPOS */
.surapropos {background: url(../img/apropos1.jpg) fixed; background-repeat:no-repeat; background-size: cover;
   border-radius: 0 100px 0 100px;}
.apropos {background-color: rgba(50,91,98,.85);color: white;padding-top: 100px;padding-bottom: 100px;border-radius: 0 100px 0 100px;}
.apropos h2 { color: white;}
.apropos img {height: 300px; width: 340px;max-width: 100%;height: 240px;}
.apropos .trait {height: 1px;background-color: white;margin-bottom: 20px;}
.apropos p {line-height: 28px;}
.apropos .col-md-5 p {text-align: justify;}

/* ATOUTS */
.atouts {padding-top: 100px;padding-bottom: 100px;}
.atouts h5 {font-weight: bold;font-size: 24px;padding: 25px 10px 5px 10px;}
.atouts p {line-height: 25px;padding: 0 5px;}
.atouts img {width: 230px;height: 70px;}

/* CONTACT */
.contact {background-color: rgba(0,0,0,.9);padding: 25px;}
.contact .fa {color: rgb(50,91,98);padding-bottom: 10px;}
.contact p {margin: 0; color: white;}

/* FORMULAIRE */
.progress {height: 20px;}
/* FORMULAIRE ETAPE 1 */
.typeIntervention {padding-bottom: 25px;}
.typeIntervention img {width:70px;}
.typeIntervention a {color: rgb(78,136,143); text-decoration: none;}
/* FORMULAIRE DISPONIBILITES */
*{box-sizing:border-box}
.containerDisponibilites .card{background:#fff;border-radius:14px;padding:30px;box-shadow:0 5px 25px rgba(0,0,0,.08)}
h1{margin-top:0;margin-bottom:10px;color:#111827}
.intro{color:#6b7280;line-height:1.6;margin-bottom:25px}
.selection{display:flex;gap:10px;margin-bottom:25px;flex-wrap:wrap}
.priority{padding:10px 16px;border-radius:8px;background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db;font-size:14px}
.priority.active{background:rgb(78,136,143);color:#fff;border-color:rgb(78,136,143);font-weight:bold}
.week{margin-bottom:40px}
.week-title{background:rgb(64,64,64);color:#fff;padding:15px 18px;border-radius:8px 8px 0 0;font-size:18px;font-weight:bold}
.days{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #e5e7eb;border-top:none}
.day{border-right:1px solid #e5e7eb;min-width:0}
.day:last-child{border-right:none}
.day-header{padding:14px 8px;background:#f9fafb;text-align:center;border-bottom:1px solid #e5e7eb}
.day-name{display:block;font-weight:bold;margin-bottom:4px}
.day-date{display:block;color:#6b7280;font-size:12px}
.slots{padding:10px}
.slot{display:block;cursor:pointer;margin-bottom:7px}
.slot:last-child{margin-bottom:0}
.slot input{display:none}
.slot span{display:block;padding:9px 5px;text-align:center;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;font-size:13px;transition:.2s}
.slot:hover span{background:#f0f7f8;border-color:rgb(78,136,143)}
.slot.priority-1 span{background:rgba(78,136,143,1);border-color:rgba(78,136,143,1);color:#fff;font-weight:bold;box-shadow:0 2px 5px rgba(78,136,143,.25)}
.slot.priority-2 span{background:rgba(78,136,143,.70);border-color:rgba(78,136,143,.70);color:#fff;font-weight:bold;box-shadow:0 2px 5px rgba(78,136,143,.20)}
.slot.priority-3 span{background:rgba(78,136,143,.40);border-color:rgba(78,136,143,.40);color:#1f2937;font-weight:bold;box-shadow:0 2px 5px rgba(78,136,143,.15)}
.saturday{margin-top:15px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
.saturday-header{padding:12px 15px;background:#f9fafb;font-weight:bold}
.saturday-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:15px}
.legend{margin-top:20px;color:#6b7280;font-size:14px;text-align:center}
.submit-container{margin-top:30px;text-align:center}
.containerDisponibilites button{border:none;background:rgb(78,136,143);color:#fff;padding:14px 35px;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;transition:.2s}
.containerDisponibilites button:hover{background:rgb(64,117,124);transform:translateY(-1px)}
.message{padding:15px 20px;border-radius:8px;margin-bottom:25px;text-align:center}
.message.success{background:#e3f0f1;color:rgb(54,98,103);border:1px solid rgb(143,185,190)}
.message.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.week.collapsed .days,.week.collapsed .saturday {display: none;}
.week-title {cursor: pointer;}
.week-title {cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
.week-arrow {transition: transform 0.3s ease;}
.week.collapsed .week-arrow {transform: rotate(-90deg);}

/* FOOTER */
.footer {padding-top: 30px;padding-bottom: 30px; text-align: center;}
.footer .fa {margin: 0 10px;}
.footer a {text-decoration: none;color: black;}
.buttonCredits {border: none; background-color: white;}


/* SLIDEIN */
.slideanim {visibility:hidden;}
.slide {
  /* The name of the animation */animation-name: slide;-webkit-animation-name: slide;
  /* The duration of the animation */animation-duration: 1s;-webkit-animation-duration: 1s;
  /* Make the element visible */visibility: visible;}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
  0% {opacity: 0;transform: translateY(70%);}
  100% {opacity: 1;transform: translateY(0%);}}

/*DEVICE ADAPT*/
@-webkit-keyframes slide {
  0% {opacity: 0;-webkit-transform: translateY(70%);}
  100% {opacity: 1;-webkit-transform: translateY(0%);}}
@media only screen and (min-width: 990px) and (max-width: 1060px) {}
@media only screen and (max-width: 990px){ 
  .rightmenu {margin: auto;}
  .rightmenu li {width: 100%;text-align: center;}
  .myBtn {display: none;}
  .slideanim {visibility:visible;}
  .slide {animation-name: none;}
  .accueil p {padding: 0 50px;}
  .accueil {background: url(../img/accueilResponsive.jpg) fixed;background-repeat:no-repeat;background-size:cover;
  height: 500px; color: white;border-radius: 0 ;padding:0;}
  .accueilcontenu {background-color: rgba(0,0,0,0.65);text-align: center;border-radius: 0;height: 500px;padding-top: 130px}
  .services .faicon {float: none;height: 50px;margin-right: 0px;}
  .services {text-align: center;}
  .topcol {padding-bottom: 50px;}
  .apropos h3 {padding-top: 25px;}
  .apropos .col-md-5 p {padding: 0 25px;}
  .clients .col-md-3,.chiffres .col-md-3,.contact .col-md-3 {margin-bottom: 50px;}
  .footer {text-align: center;}
  .surapropos, .surclients, .surcontact {background: none;}
}
@media(max-width:800px){/* Disponibilités */
    .card{padding:20px}
    .days{grid-template-columns:1fr}
    .day{border-right:none;border-bottom:1px solid #e5e7eb}
    .day:last-child{border-bottom:none}
    .slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .slot{margin-bottom:0}
    .saturday-slots{grid-template-columns:1fr}
}