@import url('typo.css');
:root
{
--color_back: #A7E6D6;
--color_main: #ffd853;
--color_second: #0aaeb8;
--color_text: #515056;
}

/* INIT */
html,body {
  font-size: 20px;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  color: var(--color_text);

  font-family: "Josefin Sans", Arial, Helvetica, var(--bs-body-font-family);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

a{
  text-decoration: none;
}

h1, h2, h3, h4{
  font-weight: bold;
}
h1, h2{ text-transform: uppercase;}
h2{
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
h3{
  font-size: 1.25rem;
  margin-bottom: 1rem;
}


.cl-main{
  color: var(--color_main) !important;
}

.cl-second{
  color: var(--color_second) !important;
}

header{ box-shadow: 0 0 10px rgba(0,0,0,.5); z-index: 900; position: relative;}
header nav ul{ display: block; padding: 15px 0; margin-bottom: 0;}
header nav ul li{ display: inline-block; list-style: none;}
header nav ul li a{
  font-size: 1rem; display: inline-block; padding: 5px 18px; color: var(--color_main); border-radius: 15px;
  transition: color 300ms, background-color 500ms;
}

header nav ul li.active a,
header nav ul li a:hover
{
  background-color: var(--color_second);
  color: white;
  transition: color 300ms, background-color 500ms;
}

footer{
  padding-top: 3rem;
  padding-bottom: 1rem;
  background-color: #5a595f;
  color: white;
}


footer a{
  color: var(--color_main);
}

footer a:hover{
  color: var(--color_second);
}

footer h2{
  text-transform: none;
  font-size: 2rem;
}

.btn-form{
  background-color: var(--color_main);
  padding: .5rem 2rem;
  transition: background-color 300ms, color 100ms 50ms;
}

.btn-form:hover,
.btn-form:active,
.btn-form:focus
{
  color: white;
  background-color: var(--color_second);
  transition: background-color 300ms, color 100ms 50ms;
}

.btn-contact{
  background-color: var(--color_main);
  padding: .5rem 2rem;
  transform: scale(1);
  transition: transform 300ms, background-color 300ms, color 100ms;
  font-size: .8rem;
}

.btn-contact:hover{
  color: white;
  background-color: var(--color_second);
  transform: scale(1.2);
  transition: transform 300ms, background-color 300ms, color 100ms;
}

.btn-contact.btn-contact-big{
  font-size: 1rem;
}


div.jumbo{
  height: 800px;
  background-image: url(../data/johner-service-chauffage.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  color: white;
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}

div.jumbo .voile{
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left:0;
  background-color: #2D2C2F;
  z-index: 1;
  opacity: .3;
}

div.jumbo .content{
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left:0;
  z-index: 2;
}


div.jumbo.entretien{
  height: 400px;
  background-image: url(../data/illustration-entretien.jpg);
  color: white;
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}
div.jumbo.entretien .voile{
  opacity: .8;
}
div.jumbo.entretien .content{
  padding-top: 3rem;
}

div.jumbo.intro .content .logo{
  padding: 100px 0 50px 0;
}
div.jumbo.intro .content h1{
  font-size: 4rem;
}


div.jumbo.intro .content h4{
  font-size: 2rem;
}

#presentation{
  background-color: #f9f9f9;
  padding: 80px 0 350px 0;
}

#avantages{
  margin-top: -300px;
}

#maintenance{
  margin-top: 120px;
}
#services{
  margin-top: 80px;
}
#travaux{
  margin-top: 80px;
}
#partenaires{
  margin-top: 80px;
  padding: 80px 0;
  background-color: #f9f9f9;
}

#contact{
  margin-top: 80px;
  padding: 80px 0;
  background-color: #f9f9f9;
}

div.thumbnail-legend{
  background-color: var(--color_second);
  color: white;
  margin: -68px 28px 28px 28px;
  position: relative;
  padding: 1rem 1rem .5rem 1rem;
  border-radius: 8px;
}
div.deco-thumb-cont{
  position: relative;
  margin-bottom: 150px;
  padding-left: 10px;
}
div.deco-thumb{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 60%;
  margin-bottom: -80px;
  border: 15px solid white;
  border-radius: 5px;

}

div.deco-info{
  position: absolute;
  bottom: 0;
  right: 65%;
  left: 0;
  margin-bottom: -65px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  background-color: white;
  text-align: center;
  padding-top: 15px;
}
div.deco-info .small{
  font-size: .7rem;
}

div.box{
    background-color: white;
    border-radius: 8px;
    padding: 25px 50px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 5px 8px rgba(0,0,0,.25);
    transition: color 300ms, background-color 500ms;
}

div.box p{
  color: #898a8b;
  font-size: .9rem;
  transition: color 300ms;
}

div.box .picto{
  font-size: 3rem;
  color: var(--color_second);
  padding: 1rem 0;
  transition: color 300ms;
}

div.box:hover{
  color: white;
  background-color: var(--color_second);
  transition: color 300ms, background-color 500ms;
}
div.box:hover p,
div.box:hover .picto
{
color: white;
transition: color 300ms;
}

.galerie-item{display: flex;position: relative;}
.galerie-item .img{}
.galerie-item .img img{border-radius: 5px;}
.galerie-item .voile{
  position: absolute;
  background-color: var(--color_second);
  top:0;
  left:0;
  right:0;
  bottom:100%;
  opacity: .7;
  z-index: 5;
  border-radius: 5px;
  transition: bottom 100ms 200ms;
}

.galerie-item:hover .voile{
  bottom: 0;
  transition: bottom 200ms;
}

.galerie-item .info{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: center;
  color: white;
  text-align: center;
  opacity: 0;
  transition-delay: 200ms;
  transition: opacity 100ms;
}
.galerie-item:hover .info{
  opacity: 1;
  transition: opacity 200ms 100ms;
}
.galerie-item .info h2{
  color: var(--color_main);
}

.form-control::placeholder {
  opacity: 0.4;
  color: #5d5d5d;
}



@media (max-width: 576px) {
  html,body {
    font-size: 18px;
  }
  h2{
    font-size: 2rem;
  }
  div.jumbo.intro .content h1{
    font-size: 3rem;
  }


  div.jumbo.intro .content h4{
    font-size: 1.75rem;
  }
}

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

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

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