@charset "UTF-8";
/*
Theme Name: Elément Terre
Theme URI: https://www.element-terre.solutions
Author: Conseils et Préférence
Author URI: https://conseilspreference.com
Description: Thème du site Elément Terre
Requires at least: WordPress 6.6.2
Version: 1.0
*/
html {
  --black: #0C262E;
  --light-green: #D4E9E9;
  --green: #79AE96;
  --dark-green: #264E51;
  --yellow: #F9E8A5;
  --salmon: #FF7F6A;
  --light: #F6F6F6;
}
/* TYPO */
html body{
  color: var(--black);
}
body h1,
body h2,
body h3:not(.wp-block-heading){
  font-weight: 700;
}
h2.wp-block-heading{
  padding-top: 2rem;
  padding-bottom: 1rem;
}
h3.wp-block-heading{
  padding-bottom: .5rem;
}
body a{
  color: unset;
}
body a:hover,
body a:active,
body a:focus{
  color: var(--dark-green);
}
.text-yellow{
  color: var(--yellow);
}
body .badge{
  color: var(--green);
  background-color: var(--light-green);
  font-weight: 500;
  border-radius: 0;
}
body .cats .badge:not(:last-of-type){
  margin-right: 10px;
}
figcaption{
  text-align: center;
  color: rgba(12, 38, 46, .5);
}
@media (min-width: 1200px){
  body h1{
    font-size: 3rem;
  }
}
/* NAV */
header{
  /* background-color: white; */
}
ul:not(#menu-footer) a.nav-link{
  font-weight: 500;
}
.navbar-brand img,
footer .logo{
  width: 8.5rem;
}
#menu-principal li:not(:last-of-type){
  margin-right: 1rem;
}
body .navbar-toggler:focus{
  box-shadow: unset;
}
#header-menus{
  width: 100%;
}
#mainnav-content{
  background-color: white;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  box-shadow: 2px 8px 10px 3px rgba(0,0,0,0.19);
  -webkit-box-shadow: 2px 8px 10px 3px rgba(0,0,0,0.19);
  -moz-box-shadow: 2px 8px 10px 3px rgba(0,0,0,0.19);
}
.current_page_item a,
.current-menu-item a{
  color: var(--black);
}
#breadcrumbs{
  font-size: small;
  color: var(--dark-green);
}
@media (min-width: 992px){
  #header-menus{
    width: auto;
  }
  #menu-principal{
    text-align: center;
  }
  #mainnav-content{
    background-color: unset;
    box-shadow: unset;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
  }
}
@media (min-width: 1200px){
  #menu-principal li:not(:last-of-type){
    margin-right: 2.5rem;
  }
}
/* BTN */
a.btn,
span.btn,
body button.btn,
#menu-principal li:last-of-type a,
a.wp-block-button__link.wp-element-button{
  padding: 10px 27px;
  border-radius: 5px;
  border-style: none;
}
a.wp-block-button__link.wp-element-button{
  margin-bottom: 1rem;
}
a.btn.btn-primary,
button.btn.btn-primary,
span.btn.btn-primary,
#menu-principal li:last-of-type a{
  background-color: var(--salmon);
  color: white;
  display: inline-block;
}
a.btn-secondary,
a.wp-block-button__link.wp-element-button{
  background-color: var(--green);
  color: white;
}
a.btn.btn-tertiary,
span.btn.btn-tertiary{
  padding: 0;
  padding-right: 2.4rem;
  background-image: url('img/arrow-black.png');
  background-repeat: no-repeat;
  background-position: right 57%;
  font-weight: 700;
}

.bg-dark a.btn.btn-tertiary,
.bg-dark span.btn.btn-tertiary{
  color: white;
  background-image: url('img/arrow-white.png');
}
span.btn.btn-primary:hover,
#menu-principal li:last-of-type a:hover,
#menu-principal li:last-of-type a:active,
#menu-principal li:last-of-type a:focus,
button.btn.btn-primary:hover,
button.btn.btn-primary:active,
button.btn.btn-primary:focus,
span.btn.btn-primary:active,
span.btn.btn-primary:focus,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:active{
  background-color: var(--dark-green);
  color: white;
}

.bg-dark:not(#realisations) .btn:hover{
  color: var(--dark-green);
  background-color: var(--light-green);
}
.bg-dark .a:hover,
.bg-dark a.btn.btn-tertiary:hover,
.bg-dark span.btn.btn-tertiary:hover,
.bg-dark .a:active,
.bg-dark a.btn.btn-tertiary:active,
.bg-dark span.btn.btn-tertiary:active,
.bg-dark .a:focus,
.bg-dark a.btn.btn-tertiary:focus,
.bg-dark span.btn.btn-tertiary:focus{
  color: var(--green);
  background-color: unset;
}
a.btn.btn-tertiary:hover,
a.btn.btn-tertiary:active,
a.btn.btn-tertiary:focus,
span.btn.btn-tertiary:hover,
span.btn.btn-tertiary:active,
span.btn.btn-tertiary:focus{
  background-image: url('img/arrow-green.png');
}
/* STRUCTURE */
/* #page-head{
  background-image: url('img/landscape.png');
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: 100%;
  margin-bottom: -1px;
  min-height: 11rem;
}
#page-head h1{
  margin-bottom: 5rem;
} */
#page-body{
  background-color: var(--light-green);
  /* background-image: url('img/undergroud.png');
  background-repeat: no-repeat;
  background-position-y: top;
  background-size: 100%;
  padding-top: 13rem; */
}
.bg-green{
  color: var(--bla
  ck);
  background-color: var(--green);
  border-radius: 10px;
  padding: 1rem;
}
.bg-lightgreen{
  background-color: var(--light-green);
}
body .bg-dark{
  background-color: var(--black) !important;
  margin-top: -1px;
  margin-bottom: -1px;
}
.container{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
body .card{
  border-style: none;
  box-shadow: 2px 8px 10px 3px rgba(0,0,0,0.19);
  -webkit-box-shadow: 2px 8px 10px 3px rgba(0,0,0,0.19);
  -moz-box-shadow: 2px 8px 10px 3px rgba(0,0,0,0.19);
}
.card.real .circle-img{
  max-width: 78px;
  max-height: 78px;
  background-color: white;
  border-radius: 100%;
  padding: 4px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  top: -2.5rem;
  align-self: center;
}
.card .card-img-top{
  height: 164px;
  object-position: center;
}
.card.real .card-body{
  padding: 30px 35px;
  display: flex;
  flex-direction: column;
}
.card.actu h3{
  font-size: 18px;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.card.real h3{
  text-align: center;
  font-size: 14px;
  font-weight: unset;
  margin-bottom: 1rem;
}
.card a,
footer a,
#breadcrumbs a,
#recent-posts a,
#copyright a{
  text-decoration: unset;
}
footer a:hover,
footer .nav-link:hover{
  color: var(--light-green);
}
.card span.btn.btn-tertiary{
  color: var(--green);
  background-image: url('img/arrow-green.png');
  align-self: center;
}
/* @media (min-width: 576px) {
  #page-head{
    padding-bottom: 4rem;
  }
}
@media (min-width: 576px) {
  #page-head{
    padding-bottom: 7rem;
  }
} */
@media (min-width: 768px) {
  .container{ 
    padding-top: 5rem;
    padding-bottom: 0;
  }
  main > .container-fluid:last-of-type,
  main > .container:last-of-type{
    padding-bottom: 6rem;
  }
  .bg-dark > .container,
  .bg-lightgreen > .container{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  /* #page-head{
    padding-bottom: 11rem;
  }
  #page-head h1{
    margin-bottom: 3rem;
  } */
}
@media (min-width: 992px) {
  .container{ 
    padding-top: 7rem;
    padding-bottom: 4rem;
  }
  /* #page-head{
    padding-top: 2rem;
    padding-bottom: 14rem;
  }
  #page-head h1{
    margin-bottom: 2rem;
  } */
}
@media (min-width: 1200px) {
  .bg-green{
    padding: 28px 16px 28px 50px;
  }
  /* #page-head{
    padding-bottom: 14rem;
  }
  #page-head h1{
    margin-bottom: 6rem;
  } */
}
@media (min-width: 1500px) {
  .bg-green{
    padding: 28px 16px 28px 50px;
  }
  /* #page-head h1{
    margin-bottom: 17rem;
  } */
}
/* Footer */
body footer{
  background-color: var(--black);
  color: white;
}
footer{
  font-size: 14px;
  background-color: white;
}
footer .row:first-of-type .col-6{
  font-weight: 700;
}
footer .col-12:last-of-type img{
  max-width: 9rem;
}
#menu-copyright li:not(:last-of-type){
  margin-right: 10px;
}
/* HP */
#hero{
  background-image: url('img/illustration-depollution-terre-sm.png');
  background-color: white;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 5rem;
  padding-top: 1rem;
  margin-bottom: -1px;
}
#page-body{
  background-image: url('img/landscape.png');
  background-size: 100%;
  background-position-y: bottom;
  background-repeat: no-repeat;
  padding-bottom: 8rem;
  /* padding-top: 1rem; */
  margin-bottom: -1px;
}
#hero .container{
  padding-top: 0;
}
#hero p{
  padding-bottom: 1rem;
}
#missions img{
  width: 5rem;
  height: fit-content;
  margin-right: 1rem;
}
.mission{
  padding: 33px 0;
}
.missions-row .col-12:nth-of-type(3) .mission{
  background-color: var(--dark-green);
  padding: 1rem;
  border-radius: 10px;
}
#realisations{
  margin-bottom: -14rem;
}
#realisations a{
  text-decoration: unset;
}
#economy{
  padding-top: 14rem;
}
#actualites a{
  text-decoration: unset;
}
#certifications img{
  max-width: 8rem;
}
#certifications .col-6:last-of-type::after{
  content: "ATTES-ALUR, ATTES-SECUR, ATTES-MEMOIRE, ATTES-TRAVAUX, ATTES-EOLIEN";
  font-size: .65rem;
  display: inline-block;
  margin-top: .25rem;
}
@media (min-width: 480px) {
  #hero{
    background-image: url('img/illustration-depollution-terre.png');
  }
  #hero .container{
    padding-top: 4rem;
  }
}
@media (min-width: 576px) {
  #hero{
    padding-bottom: 7rem;
    padding-top: 2rem;
  }
  .missions-row .col-12:nth-of-type(3) .mission{
    padding-left: 26px;
    padding-right: 26px;
  }
  #atouts{
    background-image: url('img/tuyau.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    padding-bottom: 4rem;
  }
  #economy{
    padding-top: 16rem;
  }
  #realisations{
    margin-bottom: -16rem;
  }
  #page-body{
    padding-bottom: 12rem;
  }
}
@media (min-width: 768px) {
  #hero{
    padding-bottom: 9rem;
  }
  #missions{
    background-image: url('img/tonneau.png');
    background-repeat: no-repeat;
    background-position: 89% 0;
    background-size: 6rem;
  }
  #missions img{
    width: 7.5rem;
  }  
  #realisations{
    margin-bottom: -16rem;
  }
  #realisations .container{
    background-image: url(img/racines.png), url(img/racines.png);
    background-repeat: no-repeat;
    background-position: 0 84%, right bottom;
    z-index: 1;
    position: relative;
  }
  #page-body{
    padding-bottom: 19rem;
  }
}
@media (min-width: 992px) {
  #hero{
    background-size: 136%;
    /* padding-top: 6rem; */
    padding-bottom: 5rem;
  }
  #missions{
    background-position: 89% 5rem;
  }
  #economy{
    padding-top: 15rem;
  }
}
@media (min-width: 1200px) {
  #hero{
    background-size: 141%;
    /* padding-top: 9rem; */
    padding-bottom: 11rem;
  }
  #hero p{
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  #hero{
    background-size: cover;
    /* padding-top: 5rem; */
    padding-bottom: 5rem;
  }
  #page-body{
    padding-bottom: 27rem;
  }
}
@media (min-width: 1700px) {
  #page-body{
    padding-bottom: 30rem;
  }
}

/* SINGLE */
@media (min-width: 768px) {
    .single_hero{
    background-image: var(--background-image);
    height: 10rem;
    background-size: cover;
    background-position: center;
  }
} 
@media (min-width: 992px) {
  .single_hero{
    height: 15rem;
  }
}
@media (min-width: 1200px) {
  .single_hero{
    height: 25rem;
  }
}

/* ARCHIVE */
.navigation.pagination .nav-links{
  margin-left: auto;
  margin-right: auto;
}
.pagination .nav-links a{
  margin-left: .5rem;
  margin-right: .5rem;
}
.pagination .nav-links span{
  font-weight: 600;
}
a:hover .card{
  box-shadow: unset;
  transition: box-shadow .25s;
}
.logos—gr img{
  filter: grayscale(1);
  max-width: 7rem;
  max-height: 5rem;
  margin-bottom: 1rem;
}

/* FORM */
body .form-check-input:checked{
  background-color: var(--dark-green);
  border-color: var(--dark-green);
}