:root {
  --main-noir: #000000;
--main-gris: #5f5e5e;
--main-gris-clair: #f0f0f0;
--main-blanc: #ffffff;
--main-vert: rgb(0, 207, 121);
--main-orange: #EF7B45;
--main-bleu: #0d5aa5;
--main-bleu-clair: #CDEDF7;
--main-or:#D5A752;
--main-rouge:#E30613;
--main-jaune:#ffd910;
}
body{
  font-family: "Red Hat Display", sans-serif;
font-size: 16px;
font-weight: 400;
}
body.post, body.page {
  margin: 0em;
}
.noscroll {
overflow: hidden;
}
#page{
overflow: hidden;
position: relative;
}
/* CONTAINER*/
.container-xxl{
max-width: 1240px;
}

/* Fonts */

.fw-300{
  font-weight: 300;
}
.fw-400{
  font-weight: 400;
}
.fw-700{
  font-weight: 700;
}

/* Colors: */
.noir,
.has-noir-color,
.hover-noir-color:hover,
.hover-noir-color:hover p,
.hover-noir-color:hover path
{
color: var(--main-noir);
fill:var(--main-noir);
}
.bg-noir,
.has-noir-background-color{
background-color: var(--main-noir);
}
.border-noir{
border-color: var(--main-noir) !important;
}

.gris,
.has-gris-color,
.hover-gris-color:hover,
.hover-gris-color:hover p,
.hover-gris-color:hover path
{
color: var(--main-gris);
fill:var(--main-gris);
}
.bg-gris,
.has-gris-background-color{
background-color: var(--main-gris);
}
.border-gris{
border-color: var(--main-gris) !important;
}

.gris-clair,
.has-gris-clair-color,
.hover-gris-clair-color:hover,
.hover-gris-clair-color:hover p,
.hover-gris-clair-color:hover path
{
color: var(--main-gris-clair);
fill:var(--main-gris-clair);
}
.bg-gris-clair,
.has-gris-clair-background-color{
background-color: var(--main-gris-clair);
}
.border-gris-clair{
border-color: var(--main-gris-clair) !important;
}

.blanc,
.blanc p,
.has-blanc-color,
.hover-blanc-color:hover,
.hover-blanc-color:hover p,
.hover-blanc-color:hover path{
color: var(--main-blanc) !important;
fill:var(--main-blanc);
}
.bg-blanc,
.has-blanc-background-color{
background-color: var(--main-blanc);
}
.border-blanc{
border-color: var(--main-blanc) !important;
}

.vert,
.vert p,
.has-vert-color,
.hover-vert-color:hover,
.hover-vert-color:hover p,
.hover-vert-color:hover path{
color: var(--main-vert) !important;
fill:var(--main-vert);
}
.bg-vert,
.has-vert-background-color{
background-color: var(--main-vert);
}
.border-vert{
border-color: var(--main-vert) !important;
}

.orange,
.orange p,
.has-orange-color,
.hover-orange-color:hover,
.hover-orange-color:hover p,
.hover-orange-color:hover path{
color: var(--main-orange) !important;
fill:var(--main-orange);
}
.bg-orange,
.has-orange-background-color{
background-color: var(--main-orange);
}
.border-orange{
border-color: var(--main-orange) !important;
}

.bleu,
.bleu p,
.has-bleu-color,
.hover-bleu-color:hover,
.hover-bleu-color:hover p,
.hover-bleu-color:hover path{
color: var(--main-bleu) !important;
fill:var(--main-bleu);
}
.bg-bleu,
.has-bleu-background-color{
background-color: var(--main-bleu);
}
.border-bleu{
border-color: var(--main-bleu) !important;
}

.bleu-clair,
.bleu-clair p,
.has-bleu-clair-color,
.hover-bleu-clair-color:hover,
.hover-bleu-clair-color:hover p,
.hover-bleu-clair-color:hover path{
color: var(--main-bleu-clair) !important;
fill:var(--main-bleu-clair);
}
.bg-bleu-clair,
.has-bleu-clair-background-color{
background-color: var(--main-bleu-clair);
}
.border-bleu-clair{
border-color: var(--main-bleu-clair) !important;
}

.or,
.or p,
.has-or-color,
.hover-or-color:hover,
.hover-or-color:hover p,
.hover-or-color:hover path{
color: var(--main-or) !important;
fill:var(--main-or);
}
.bg-or,
.has-or-background-color{
background-color: var(--main-or);
}
.border-or{
border-color: var(--main-or) !important;
}

.rouge,
.rouge p,
.has-rouge-color,
.hover-rouge-color:hover,
.hover-rouge-color:hover p,
.hover-rouge-color:hover path{
color: var(--main-rouge) !important;
fill:var(--main-rouge);
}
.bg-rouge,
.has-rouge-background-color{
background-color: var(--main-rouge);
}
.border-rouge{
border-color: var(--main-rouge) !important;
}

.jaune,
.jaune p,
.has-jaune-color,
.hover-jaune-color:hover,
.hover-jaune-color:hover p,
.hover-jaune-color:hover path{
color: var(--main-jaune) !important;
fill:var(--main-jaune);
}
.bg-jaune,
.has-jaune-background-color{
background-color: var(--main-jaune);
}
.border-jaune{
border-color: var(--main-jaune) !important;
}

.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 6px -6px blrgba(0, 0, 0, 0.1);
}

/* TXTURES */


/* SIZE */
.w100{
width: 100%;
}
.w80{
width: 80%;
}
.w60{
width: 60%;
}
.w40{
width: 40%;
}
.w20{
width: 20%;
}

.mw1200{
max-width: 1280px;
}

/* Elements */
body{
font-size: 16px;
}
@media (min-width: 768px){
body{
  font-size: 17px;
}
}
@media (min-width: 1140px){
body{
  font-size: 18px;
}
}

a{
color:  var(--main-jaune);
}

a:hover {
  text-decoration: underline;
}



.h1, h1, .like-h1 {
  font-size: 25px;
  font-weight: 400;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
@media (min-width: 768px){
.h1, h1, .like-h1 {
  font-size: 25px;
}
}
@media (min-width: 1200px){
.h1, h1, .like-h1 {
  font-size: 25px;
}
}

h2{
font-size: 18px;
font-weight: 700;
overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
@media (min-width: 768px){
h2{
  font-size: 24px;
}
}
@media (min-width: 992px){
h2{

}
}
@media (min-width: 1200px){
h2{

}
}



h3{
font-size: 16px;
overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
@media (min-width: 768px){
h3{
  font-size: 16px;
}
}
@media (min-width: 992px){
h3{
  font-size: 16px;
}
}
@media (min-width: 1200px){
h3{
  font-size: 16px;
}
}

h4{
font-size: 14px;
}
@media (min-width: 768px){

}
@media (min-width: 992px){

}
@media (min-width: 1200px){
h4{
  font-size: 14px;
}
}

p,
ul li,
ul ol{
  
  font-weight: 400;
}
@media (min-width: 768px){
  p,
  ul li,
  ul ol{
    
  }
}
@media (min-width: 992px){
p,
ul li,
ul ol{
  
}
}
@media (min-width: 1200px){
p,
ul li,
ul ol{
  
}
}

p img{
height:auto;
}
img.responsive,
img.img-responsive{
width: 100%;
height: auto;
}

strong, b{
  font-weight: bold;
}
.souligne{
text-decoration: underline;
}
/* Boutons / Liens */
a.bouton-vert{
color: var(--main-orange);
background-color: var(--main-vert);
font-family: 'Syne';
font-weight: 400;
font-size: 16px;
line-height:50px;
height: 50px;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
}
@media (min-width: 768px){
a.bouton-vert{
  font-size: 22px;
  line-height: 70px;
  height: 70px;
  padding-left: 40px;
  padding-right: 40px;
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
}
@media (min-width: 992px){
a.bouton-vert{
  font-size: 22px;
  line-height: 50px;
  height: 50px;
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
}
@media (min-width: 1200px){
a.bouton-vert{
  font-size: 18px;
  line-height: 50px;
  height: 50px;
  padding-left: 25px;
  padding-right: 25px;
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
}
a.bouton-vert:hover,
a.bouton-vert:focus,
a.bouton-vert:active,
a.bouton-vert.force-hovered{
color: var(--main-vert);
background-color: var(--main-orange);
padding-left: 35px;
padding-right: 35px;
transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
}
@media (min-width: 768px){
a.bouton-vert:hover,
a.bouton-vert:focus,
a.bouton-vert:active,
a.bouton-vert.force-hovered{
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  padding-left: 45px;
  padding-right: 45px;
}
}


a.bouton-orange{
color: var(--main-vert);
background-color: var(--main-orange);
font-family: 'Syne';
font-weight: 400;
font-size: 16px;
line-height:50px;
height: 50px;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
}
@media (min-width: 768px){
a.bouton-orange{
  font-size: 22px;
  line-height: 70px;
  height: 70px;
  padding-left: 40px;
  padding-right: 40px;
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
}
@media (min-width: 992px){
a.bouton-orange{
  font-size: 22px;
  line-height: 50px;
  height: 50px;
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
}
@media (min-width: 1200px){
a.bouton-orange{
  font-size: 18px;
  line-height: 50px;
  height: 50px;
  padding-left: 25px;
  padding-right: 25px;
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
}
a.bouton-orange:hover,
a.bouton-orange:focus,
a.bouton-orange:active,
a.bouton-orange.force-hovered{
color: var(--main-orange);
background-color: var(--main-vert);
padding-left: 35px;
padding-right: 35px;
transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
}
@media (min-width: 768px){
  a.bouton-orange:hover,
  a.bouton-orange:focus,
  a.bouton-orange:active,
  a.bouton-orange.force-hovered{
    transition: all 250ms ease-in-out;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    padding-left: 45px;
    padding-right: 45px;
    }
}


a.but-orange{
  background-color: var(--main-orange);
  color: var(--main-blanc);
  padding: 10px 6px;
  font-size: 12px;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  border: var(--main-orange) solid 1px;
  
  }
  @media (min-width: 768px){
    a.but-orange{
    padding: 20px 15px;
    font-size: 16px;
  }
  }
  a.but-orange:hover{
  background-color: var(--main-blanc);
  color: var(--main-vert);
  text-decoration: none;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  border: var(--main-orange) solid 1px;
  }
  
  a.but-vert,
  a.edit{
  background-color: var(--main-vert) !important;
  color: var(--main-blanc) !important;
  padding: 10px 6px;
  font-size: 12px;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  border: var(--main-vert) solid 1px;
  }
  @media (min-width: 768px){
    a.but-vert,
  a.edit{
    padding: 20px 15px;
    font-size: 16px;
  }
  }
  a.but-vert:hover,
  a.edit:hover{
  background-color: var(--main-orange) !important;
  color: var(--main-blanc) !important;
  text-decoration: none;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  border: var(--main-vert) solid 1px;
  }

/* Blocs */
.wp-block-quote{
border: none;
padding-left: 0;
}
.wp-block-quote p {
font-size: 30px;
font-weight: 300;
}
.has-drop-cap:not(:focus):first-letter {
  float: left;
  font-size: 7.4em;
  line-height: .68;
  font-weight: 100;
  margin: .05em .1em 0 0;
  text-transform: uppercase;
font-style: normal;
}
@media (min-width: 768px){
.has-drop-cap:not(:focus):first-letter {
  font-size: 7.4em;
}
}
.wp-block-media-text__media img, 
.wp-block-media-text__media video {
height: auto;
}
.wp-block-media-text{
margin-bottom: 2em;
}
.wp-block-media-text.has-media-on-the-right  .wp-block-media-text__content{
padding-left: 0;
}
.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content{
padding-right: 0;
}
/* Styles texts */
.mark, mark {
  padding: .2em;
background-color: var(--main-orange);
color: var(--main-vert);
}


/* Bootstrap */
.btn-primary {
  color: #fff;
  background-color: var(--main-vert);
  border-color: var(--main-vert);
}
.btn-primary.btn-primary-inverse{
background-color: var(--main-orange);
  border-color: var(--main-orange);
}
.btn-primary:hover {
  color: #fff;
  background-color: var(--main-orange);
  border-color: var(--main-orange);
}
.btn-primary.btn-primary-inverse:hover{
background-color: #fff;
border-color: var(--main-vert);
color: var(--main-vert);
cursor: pointer;
}
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle{
color: #fff;
  background-color: var(--main-orange);
  border-color: var(--main-orange);
}
.btn-primary.btn-back{
background-color: var(--main-vert);
  border-color: var(--main-vert);
}
.btn-primary.wpt-form-submit{
color:var(--main-vert);
background-color: var(--main-orange);
  border-color: var(--main-vert);
}
.btn-primary.wpt-form-submit:hover{
color:var(--main-orange);
background-color: var(--main-vert);
  border-color: var(--main-orange);
}
.alert.alert-success {
background-color: var(--main-vert);
}
.btn-goback{
position: absolute;
  z-index: 1;
right: 5px;
left: auto;
  top: 5px;
border: none;
font-size: 15px;
padding: 15px 20px;
font-family: "silne";
font-weight: 700;
}
@media (min-width: 768px){
.btn-goback{
  left: 5px;
  top: 5px;
  right: auto;
}
}
.btn-more{
border: none;
color: var(--main-vert);
padding-left: 30px;
position: relative;
background-color: transparent;
}
.btn-more::before{
width: 25px;
  height: 25px;
  background: url(../img/elements/arrow-vert-to-bottom.svg);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
content: " ";
position: absolute;
left: 0;
top: 13px;
}
.btn-goback:hover,
.btn-goback:active,
.btn-goback:focus,
.btn-more:hover,
.btn-more:active,
.btn-more:focus{
outline: none;
border: none;
}


/* Blocks */
.section-spacer{
height: 20px;
}
@media (min-width: 768px){
.section-spacer{
  height: 40px;
}
}
.wp-block-image img{
height: auto;
}

/* Specific pages */

.entry-header h1{
margin-bottom: 25px;
}
.entry-content h2{
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 20px;
  display: block;
}
.entry-content h3{
  font-weight: 700;
  font-size: 20px;
}
.page .entry-content h4{
  font-weight: 700;
  font-size: 18px;
}
.page .entry-content img.wp-post-image{
  max-width: 320px;
  height: auto;
}
img.attachment-300x300{
width: 100%;
height: auto;
}

/* BORDERS */
.bottom_border_orange{
border-bottom: 4px var(--main-orange) solid;
}
