@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body, html {
  width: 100%;
  overflow-x: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #ffffff;
}

table {
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}

strong {
  font-weight: bold;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
  color: #444;
}

q:before, q:after {
  content: '';
}

abbr, acronym {
  border: 0;
}

/* Custom CSS
 * --------------------------------------- */

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

body, html {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: 16px;
  background: #FFFFFF;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}


h1 {
  font-size: 6em;
}

p {
  font-size: 2em;
}

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px;
  height: 90px;
  visibility: hidden; 
}
.outil a{
  display: block;
}

header {  
  height: 150px;
  width: 100%;
  position: absolute;
  z-index: 200;
  background: #ffffff;
  top: 0;
}

header .logo{
  position: absolute;
  left: 5%;
  top: 27px;
  width: 272px;
  height: 92px;
}

.navbar{
  position: absolute;
  right: 5%;
  top: 60px;
}

.navbar a{
  color: #004621;
  float: left;
}

.navbar span{
  background: #004621;
  width: 4px;
  height: 4px;
  display: block;
  float: left;
  border-radius: 50%;
  margin: 10px 16px 0;
}

.navbar span.spcelang{
  background: inherit;
  width: 4px;
  height: 4px;
  margin: 10px 25px 0;
}
.navbar .switchlang{
  background: #DCF5E1;
  width: 60px;
  height: 32px;
  margin: -4px 0 0 0;
  text-align: center;
  line-height: 32px;
  display: flex;
  border-radius: 4px;
}
.navbar a p{
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #004621;
  font-size: 16px;
}
.navbar-mobile{
  position: absolute;
  width: 100%;
  z-index: 100;
  opacity: 0;
  display: none;
  top: 30px;
}
.navbar-mobile li{
  width: 90%;
  padding: 0 5%;
  height: 204px;
  background: #004621;
  display: flex;
}
.navbar-mobile li .nav-content{
  width: 90%;
  margin: auto 0;
}
.navbar-mobile li:nth-child(2),.navbar-mobile li:nth-child(4){
  background: #ffffff;
  color: #004621;
}

.navbar-mobile li:nth-child(2) a,.navbar-mobile li:nth-child(4) a{
  color: #004621;
}
.navbar-mobile li:nth-child(1) a,.navbar-mobile li:nth-child(3) a{
  color: #ffffff;
}
.navbar-mobile .nbr, .navbar-mobile .rub{
  float: left;
}
.navbar-mobile .nbr{
  font-size: 24px;
  margin-right: 15px;
}
.navbar-mobile .rub{
  font-size: 24px;
  font-weight: 600;
  position: relative;
}
.navbar-mobile .rub span{
  position: absolute;
  right: -35px;
  top: 3px;
}
.navbar-mobile .ssnav{
  margin: auto 0;
  width: 50%;
  float: right;
}
.navbar-mobile .ssnav a{
  display: block;
  margin-bottom: 15px;
}
.navbar-mobile .ssnav a:last-child{
  margin-bottom: 0px;
}
.navbar-mobile .ssnav a span{
  margin-left: 10px;
}
.navbar-mobile .switchlang{
  height: 60px;
  background: #DCF5E1;
  line-height: 60px;
  display: flex;
  padding: 0 5%;
}
.navbar-mobile a p{
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #004621;
  font-size: 15px;
}
header .menu-mobile, header .close-mobile{
  display: none;
  cursor: pointer;
}

footer{
  width: 100%;
  height: 482px;
  
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #004621;
  position: relative;
}
footer .navbar{
  position: relative;
  right: unset;
  top: unset;
  margin-top: 20px;
  margin-left: 5%;
}
footer .navbar a{
  color: #ffffff;
}
footer .navbar span{
  background: #33804D;
}
footer .navbar .switchlang{
  background: #FFF;
  margin: -4px 5% 0 0;
  float: right;
}
footer .ligne1{
  padding-top: 56px;
}

footer .logo{
  position: relative;
  margin-left: 5%;
  width: 182px;
  height: 62px;
  float: left;
  margin-right: 128px;
}

footer .ligne2{
  width: 90%;
  padding: 0 5%;
  display: inline-block;
}

footer .ligne2 div{
  float: left;
  padding-top: 48px;
}

footer .ligne2 div:nth-child(1){
  width: 40%;
}
footer .ligne2 div:nth-child(2){
  width: 10%;
}
footer .ligne2 div:nth-child(3){
  width: 50%;
}

footer .ligne2 div:nth-child(2) span{
  display: block;
  width: 1px;
  height: 180px;
  background: #ffffff;
  margin: 0 auto;
}

footer .eco{
  font-size: 15px;
  font-weight: 400;
  background: #ffffff;
  color: #367E50;
  padding: 10px 16px;
  display: table;
  margin-top: 16px;
}

footer .eco strong{
  font-weight: 600;
  color: #004621;
}

footer .sep{
  display: block;
  width: 90%;
  height: 1px;
  margin: 40px 5% 0;
  background: #ffffff;
}

footer .ligne3{
  padding-right: 5%;
  padding-top: 30px;
}

footer .ligne3 a, footer .ligne3 p{
  font-size: 15px;
  color: #ffffff;
  float: right;
}

footer .ligne3 a{
  text-decoration: underline;
}
footer .ligne3 p {
  margin: 0 10px;
}

footer .ligne2 a{
  font-size: 20px;
  color: #ffffff;
  font-weight: 600;
}

footer .sep-mobile{
  display: none;
  height: 1px;
  width: 90%;
  margin: 32px 5%;
  background: #367E50;
}
.container{
  margin-top: 150px;
}

.full{
  width: 100%;
  display: inline-block;
}

.full.grey{
  background: rgba(220, 245, 225, 0.40);
}

.bandeau-home{
  width: 100%;
  height: 479px;
  background: url(../img/home-header.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  position: relative;
}

.bandeau-home div{
  width: 60%;
  max-width: 730px;
  position: absolute;
  top: 50%;
  left: 35%;
  transform:translate(-50%,-50%);
}

.bandeau-home div p{
  width: 80%;
}

.bandeau-home div .bulle{
  position: absolute;
  right: 0;
  top: -30px;
}
.bandeau-home .bulle-mobile {
    display: none;
}


.content-home{
  max-width: 1086px;
  width: 90%;
  padding: 0 5%;
  margin: 65px auto 104px;
  overflow: hidden;
}

.gi-index{
  width: 45%;
  margin-bottom: 64px;
  height: fit-content;
  padding-top: 15px;
}

.colonne-2{
  width: 100%;
  overflow: hidden;
}
.colonne-2 div{
  width: 47%;
  float: left;
}

.colonne-2 div:first-child{
  margin-right: 6%;
}

.colonne-2.small div:nth-child(1){
  width: 40%
}
.colonne-2.small div:nth-child(2){
  width: 45%;
  padding-right: 9%;
}

.colonne-2 .illu{
  width: 100%;
  margin-bottom: 80px;
}
.colonne-2 .illu svg{
  border-radius: 8px;
  background: #DCF5E1;

}
.colonne-2 .liste{
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 56px;
  float: inherit;
}

.colonne-2 .liste li p{
  margin-bottom: 24px;
}
.colonne-2 .liste li:last-child p{
  margin-bottom: 0px;
}

.colonne-2 .c-top{
  width: 100%;
  margin-bottom: 30px;
  display: flex;
}
.colonne-2 .c-top .picto{
  width: 60px;
  margin-right: 5%;
}
.colonne-2 .c-top .legende{
  display: grid;
  width: auto;
}

.colonne-2 .c-top .legende p{
  margin: auto 0;
  font-size: 22px;

  font-weight: 600;
}

.ambition .colonne-2 .illu-txt{
  min-height: 160px;
  margin-bottom: 26px;
}

.colonne-3{
  width: 100%;
  margin-bottom: 104px;
  overflow: hidden;
}
.colonne-3 div{
  width: 30%;
  float: left;
}
.colonne-3 div:nth-child(1){
  margin-right: 5%;
}
.colonne-3 div:nth-child(2){
  margin-right: 2.5%;
  width: 27%;
}
.colonne-3 div:nth-child(3){
  width: 33%;
}

.sep-v{
  display: block;
  height: 400px;
  width: 1px;
  background: #A6CD79;
  float: left;
  margin-right: 10%;
}
.colonne-3 .picto{
  width: 40px!important;
  height: 40px;
  float: left;
  margin-right: 16px!important;
  margin-top: 3px;
}
.colonne-3 .legende{
  width: auto!important;
  
  margin-right: 0px!important;
  margin: auto 0;
}
.colonne-3 .legende p{
  margin-bottom: 0!important;
}

.colonne-3 ul{
  display: grid;
}
.colonne-3 ul li{
  margin-bottom: 9px;
  display: flex;
}
.colonne-3 ul li:nth-child(3){
  opacity: 1;
}
.colonne-3 ul li:nth-child(4){
  opacity: 1;
}
.colonne-3 ul li:nth-child(5){
  opacity: 1;
}
.colonne-3 ul li:nth-child(6){
  opacity: 1;
}


.page-rub{
  display: flex;
}

.name-rub{
  width: 13%;
  float: left;
  position: relative;
}
.name-rub p{
  font-size: 20px;
    top: 220px;
    left: 0%;
    transform-origin: center right;
    transform: translate(-50%, -0%) rotate(-90deg);
    position: sticky;
    white-space: nowrap;
}

.pro .name-rub, .outil .name-rub, .autres .name-rub{
  background: #367E50;
}
.pro .name-rub p, .outil .name-rub p, .autres .name-rub p{
  color: #DCF5E1;
}

.content-rub{
  width: 87%;
  padding: 80px 20% 104px 10%;
}

.sep-h{
  display: block;
  height: 1px;
  width: 100%;
  background: #367E50;
  float: left;
  margin-bottom: 56px;
  margin-top: 56px;
}


.ambition .name-rub, .about .name-rub{
 background: #DCF5E1;
}
.ambition .name-rub p, .about .name-rub p{
  color: #004621;
}

.ambition .content-rub, .about .content-rub{
 background: #004621;
}

.link-popup{
  
  cursor: pointer;
  display: flex!important;
  
}

.link-popup div{
  float: left;
  margin-right: 16px;
  margin: auto 16px auto 0;
  width: 56px;
  height: 56px;

}
.link-popup p{
  display: block;
  max-width: 400px;
  margin: auto 0 auto!important;
}

.marques{
  width: 100%;
  font-size: 0;
  margin: 24px 0 48px -3%;
}

.marques li{
  width: 18%;
    margin-left: 3%;
    display: inline-block;
    background: #ffffff;
    padding: 4% 2%;
    border-radius: 8px;
    margin-top: 24px;
    height: 100px;
}

.about .colonne-2{
  margin-bottom: 40px;
}

.etapes li{
  width: 100%;
  margin-bottom: 40px;
  display: flex;
}

.etapes .picto{
  width: 70px;
  margin: auto 5% auto 0;
  min-width: 70px;
}
.etapes .legende{
  display: grid;
  width: auto;
}

.etapes .legende p{
  margin: auto 0;
  
}

.etapes .legende span, .slides .legende span{
  display: block;
  background: #004621;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  float: left;
  margin: 10px 10px 0;
}
.slides .legende span.norme{
  opacity: 0;
}
 .slides .legende p{
  display: table;
}

.outil .notes{
  display: flex;
  margin-bottom: 40px;
  overflow: hidden;
}

.outil .notes .eco {
    font-size: 15px;
    font-weight: 400;
    background: #DCF5E1;
    color: #004621;
    padding: 10px 16px;
    display: table;
    display: inline-block;
    margin: auto 13px auto 0;
    float: left;
}

.outil .notes .eco:nth-child(1) {
    background: #5BB571;
    color: #FFFFFF;
}

.outil .notes .eco:nth-child(3) {
    background: #004621;
    color: #FFFFFF;
}
.outil .notes .gi {
    width: 30%;
    display: inline-block;
    min-width: 140px;
    float: left;
}

.outil .tab {
  width: 100%;
  margin: 40px 0;
}
.outil .tabmobile {
  width: 100%;
  margin: 24px 0;
  display: none;
}
.outil .colonne-2 li {
  width: 100%!important;
  display: table;
  margin-bottom: 20px;
}
.outil .colonne-2 .picto {
    width: 13%;
    
    margin-right: 2%!important;
}
.outil .colonne-2 .legende {
    width: 85%;
}

.outil .colonne-2 .legende .lite{
    margin-bottom: 0!important;
}

.slider{
  width: 100%;
  margin-bottom: 56px;
  position: relative;
}

.slider .content-slider{
  width: 80%;
  overflow: hidden;
  margin: 0 auto;
}
.slider .content-slider .slides {
  width: 500%;

}
.slider .content-slider .slides li{
  width: 20%;
  float: left;
}
.slider .content-slider .slides li .colonne-2:nth-child(1) div:nth-child(1) svg {
    height: 230px;
  }
.slider .content-slider .slides li .colonne-2:nth-child(1) div:nth-child(2) svg {
    max-width: 250px;
  }
  .slider .content-slider .slides li .colonne-2:nth-child(1) {
    margin-bottom: 30px;
  }
.slider .content-slider ul li:nth-child(2){
  
}
.slider .content-slider ul li:nth-child(3){
  
}
.slider .content-slider ul li:nth-child(4){
  
}
.slider .content-slider ul li:nth-child(5){
  
}

.slider .content-slider ul li .texte{
  font-size: 2vw;
  margin-bottom: 20px;
}

.slider .content-slider ul li .texte.titrecolonne{
  font-size: 20px;
  margin-bottom: 20px;
}



.slider .prev, .slider .next{
  position: absolute;
  top: 200px;
  width: 8%;
  transform: translate(0, -50%);
  max-width: 56px;
  max-height: 56px;
  cursor: pointer;
}
.slider .prev{
  
}
.slider .next{
  right: 0;
}
.slider .navslider{
  margin: 32px auto 0;
  display: table;

}

.slider .navslider span{
  display: block;
  margin-right: 16px;
  background: #DCF5E1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  float: left;
}
.slider .navslider span.actif{
  
  background: #367E50;
 
}
.slider .navslider span:nth-child(5){
  
  margin-right: 0px;

}
.outil a{
  display: block;
}

.nomarge{
  margin-bottom: 0!important;
}
/**************  TEXTES ********************/

.big{
  font-size: 45px;
  font-weight: 600;
  line-height: 59px; 
}

.extra{
  font-size: 152px;
  font-weight: 600;
  line-height: 122px; 
}

.titre{
  font-size: 32px;
  font-weight: 600;
  line-height: 40px; 
}

.texte{
  font-size: 20px;
}

.lite{
  font-size: 15px;
}


em {
  font-style: italic;
}
strong {
  font-weight: 600;
}

.home .titre, .home .texte, .home .lite{
  color: #004621;
  margin-bottom: 64px;
}

.ambition .titre, .ambition .texte, .ambition .lite, .ambition .big{
  margin-bottom: 56px;
}
.ambition .titre{
  color: #A6CD79;
}
.outil .titre{
  color: #367E50;
  margin-bottom: 80px;
}
.autres .titre{
  color: #367E50;
  margin-bottom: 40px;
}
.autres .lite{
  color: #004621;
}

.about .big{
  margin-bottom: 80px;
}

.pro .big, .pro .lite, .pro .texte{
  margin-bottom: 48px;
  color: #004621;
}
.outil .big, .outil .lite, .outil .texte, .autres .big{
  margin-bottom: 80px;
  color: #004621;
}

.outil .colonne-2 .lite{
  margin-bottom: 0px;
}
.outil .link-popup {
  margin-top: 40px;
}
.outil .link-popup .lite{
  margin-bottom: auto;
}

.outil .colonne-2 div:nth-child(2) .lite{
  margin-bottom: 30px;
}

.pro a{
  color: #004621;
}

.lite.title{
  margin-bottom: 24px;
}

.lite a{
  color: #ffffff;
}

.colonne-3 .texte{
  color: #004621;
  margin-bottom: 35px;
}

.bandeau-home .titre, .bandeau-home .texte{
  color: #ffffff;
  margin-bottom: 34px;
}

footer .texte{
  color: #ffffff!important;
  margin-bottom: 0px!important;
}

.popin{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 300;
  opacity: 0;
  display: none;
}

.popin .content-pop{
  width: 80%;
  padding: 100px 10%;
}

.popin .close{
  position: absolute;
  top: 100px;
  left: 3%;
  cursor: pointer;
}

.popin .content-pop .big, .popin .content-pop .lite{
  color: #004621;
}

.popin .content-pop .index{
  margin-bottom: 40px;
}

.popin .content-pop .index li{
  font-size: 15px;
  display: inline-block;
  margin-right: 16px;
  color: #004621;
}

.popin .content-pop .liste{
  margin-top: 16px;
  margin-bottom: 40px;
}

.popin .content-pop .liste li{
  border-top: 1px solid #012d1521;
  height: 32px;
  padding: 12px 0 2px;
  

}
.popin .content-pop .liste li:nth-child(2){
  border-top: none;

}
.popin .content-pop .liste li.filtre{
  border-top: none;
  border-bottom: 1px solid #012D15;
  
}
.popin .content-pop .liste li.filtre .marque,.popin .content-pop .liste li.filtre .categorie{
  cursor: pointer;

}
.popin .content-pop .liste li.filtre .marque svg,.popin .content-pop .liste li.filtre .categorie svg{
  margin-left: 12px;
  
}
.popin .content-pop .liste li.filtre .marque.desc svg{
  transform: rotate(180deg);
  
}
.popin .content-pop .liste li p, .popin .content-pop .liste li span{
  display: inline-block;
}

.popin .content-pop .categorie .categories-liste{
  position: absolute;
  border-radius: 8px;
background: #FFF;
padding: 10px;
box-shadow: 0 4px 33px 0 rgba(0, 0, 0, 0.25);
z-index: 100;
  top: 34px;
  width: 120%;
  left: -35px;
  display: none;
  opacity: 0;
}

.popin .content-pop .categories-liste div{
  border-top: none;
  border-bottom: none;
  padding: 8px 10px;
  color: #012D15;
  cursor: pointer;
}
.popin .content-pop .categories-liste div.selected{
  border-radius: 81px;
background: #DCF5E1;
}

.popin .content-pop .liste li .marque{
  width: 20%;
   -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    float: left;
}
.popin .content-pop .liste li .groupe, .popin .content-pop .liste li .categorie{
   -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    float: left;
}
.popin .content-pop .liste li span{
  width: 1px;
  height: 11px;
  margin: 5px 40px 0;
  background: #000000;
  float: left;
}
.popin .content-pop .liste li .groupe{
  color: #A6CD79;

}

.popin .content-pop .liste li .categorie{
  color: #367E50;
  width: 20%;
  position: relative;
  overflow: initial;
}

.popin .content-pop .liste li .lien{
  color: #012D15;
  float: right;
  font-size: 12px;
  text-decoration: underline;
}

.popin .content-pop .liste li.filtre .mobile  {
    display: none;
  }

.popin .content-pop .liste li.filtre .mobile .categories-liste {
    position: absolute;
    border-radius: 0px;
    background: #FFF;
    padding: 10px;
    box-shadow: none;
    z-index: 100;
    top: 25px;
    width: 105%;
    left: -5%;
    display: none;
    opacity: 0;
  }

  .popin .content-pop .liste li.filtre .mobile .ecran {

    position: absolute;
    background: #0708087d;
    width: 109%;
    left: -5%;
    display: none;
    opacity: 0;
  }

  .popin .content-pop .categories-liste div svg{
    display: none;
  }
  .popin .content-pop .categories-liste div.selected svg{
    display: initial;
  }

  .popin .content-pop .categories-liste div svg{
    transform: rotate(0deg)!important;
  }
  .popin .content-pop .categories-liste div.desc svg{
    transform: rotate(180deg)!important;
  }

  .popin .content-pop .categorie .categories-liste div.desc svg, .popin .content-pop .categorie .categories-liste div svg {
    display: none!important;
  }



  


/**********************************/






@media only screen and (min-width: 2000px) {

  
 
}

@media only screen and (max-width: 1200px) {

  header .logo {
    width: 180px;
  }
  .navbar a {
    font-size: 15px;
  }
  .navbar a p {
    font-size: 15px;
  }
  .navbar span {
    margin: 10px 14px 0;
  }

  .extra{
  font-size: 12vw;
  
}
 
}
@media only screen and (max-width: 990px){
 
  header{
    height: 80px;
  }
  header .logo {
    width: 147px;
    height: 50px;
    top: 15px;
  }
  .navbar {
    display: none;
  }
  header .menu-mobile{
    display: block;
    position: absolute;
    right: 5%;
    top: 10px;
  }
  header .close-mobile{
    display: none;
    position: absolute;
    right: 5%;
    top: 10px;
  }
  footer  {
    height: 575px;
  }
  footer .navbar {
    margin: 36px auto 0;
    display: table;
  }
  footer .navbar .switchlang {
    margin: -4px 0 0 32px;
  }
  footer .logo {
    margin: 0 auto;
    float: initial;
  }
  footer .sep-mobile{
    display: block;
  }
  footer .ligne2 div:nth-child(1), footer .ligne2 div:nth-child(2),footer .ligne2 div:nth-child(3) {
    float: initial;
    padding-top: 0px;
    width: 100%;
  }
  footer .ligne2 p, footer .ligne2 a {
    text-align: center;
    display: block;
  }
  footer .ligne2 div:nth-child(2) span{
    display: none;
  }
  footer .eco {
    display: table!important;
    margin: 16px auto 0;
  }
  p.center{
    text-align: center;
  }

  .big {
    font-size: 36px;
    font-weight: 600;
    line-height: 50px;
  }
  .container{
    margin-top: 80px;
  }

  .bandeau-home{
    width: 100%;
    height: 584px;
    background: url(../img/home-header-mobile.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
  }

  .bandeau-home div {
    width: 90%;
    max-width: 730px;
    position: absolute;
    top: 10%;
    left: 5%;
    transform: translate(-0%,-0%);
  }

  .bandeau-home .bulle {
    display: none;
  }

  .bandeau-home div .bulle-mobile{
      position: absolute;
      display: block;
  }

  .bandeau-home div p {
    width: 100%;
  }

  .colonne-3 {
    margin-bottom: 48px;
  }
  .colonne-3 div, .colonne-3 div:nth-child(1), .colonne-3 div, .colonne-3 div:nth-child(2), .colonne-3 div, .colonne-3 div:nth-child(3){
    width: 100%;
    margin-bottom: 24px;
  }

  .colonne-3 div:nth-child(1) svg, .colonne-3 div:nth-child(2) svg{
    margin: 0 auto;
    display: block;
  }
  .sep-v{
    display: none;
  }
  .colonne-3 ul {
    display: table;
    margin: 0 auto;
  }

  .colonne-3 .picto {
    margin-top: 0px; 
    margin-bottom: 0px!important; 
  }
  .colonne-3 .legende {
    margin: auto 0!important;
  }

  .colonne-2.small div:nth-child(1),.colonne-2.small div:nth-child(2),.about .colonne-2 div:nth-child(1), .about .colonne-2 div:nth-child(2) {
    width: 100%;
  }
  .colonne-2.small div:nth-child(2), .about .colonne-2 div:nth-child(2)  {
    margin-top: 24px;
  }
  .about .colonne-2 div svg{
    max-width: 300px;
  }
  .content-rub {
    width: 67%;
    padding: 80px 10% 104px 10%;
  }

  .ambition .colonne-2 div {
    width: 100%;
    float: initial;
  }
  .marques li {
    width: 26%;
  }

  .extra {
    font-size: 152px;
  }
  .navbar-mobile li .nav-content {
    width: 100%;
  }
  
  .ambition .colonne-2 .illu-txt {
    min-height: auto;
    margin-bottom: 26px;
  }
  .outil .colonne-2 div:first-child {
    margin-right: 0%;
  }
  .outil .colonne-2 div{
    width: 100%;
  }
  .outil .notes {
    display: block;
  }
  .outil .notes .eco {
   margin-bottom: 12px;
  }
  .slider .content-slider ul li .texte {
    margin-top: 50px;
  }
  
  .slider .content-slider ul li .colonne-2 div:nth-child(2) svg {
    display: block;
    margin: 0 auto;
  }
  .popin .content-pop .liste li span{
  
  margin: 5px 20px 0;
 
  }
  .popin .content-pop .liste li .categorie {
    
    width: 30%;
   
  }
  .popin .content-pop {
    width: 90%;
    padding: 100px 5%;
  }
  .popin .close {
    right: 5%;
    left: initial;
    
  }


}

@media only screen and (max-width: 768px){
 
  .etapes li {
    display: block;
  } 
  .etapes li .picto{
    width: 100%;
  } 
  .etapes li .picto svg{
    width: 54px;
    margin: 0 auto 24px;
    display: block;
  } 
  .navbar-mobile .nbr {
    float: initial;
  }
  .navbar-mobile .ssnav {
    width: 100%;
    margin-top: 20px;
  }
  .navbar-mobile li:nth-child(2){
    height: 240px;
  }

  footer .ligne1 {
    padding-top: 1px;
  }
  footer .navbar span, footer .navbar a {
    float: initial;
    text-align: center;
    display: block;
    margin: 16px auto;
  }
  footer .navbar .switchlang {
    float: inherit;
    margin: 36px 0 0 47px;
  }
  footer {
    height: 785px;
  }

  .popin .content-pop .liste li .marque, .popin .content-pop .liste li .groupe, .popin .content-pop .liste li .lien, .popin .content-pop .liste li .categorie {
    float: initial;
  }

  .popin .content-pop .liste li span{
    display: none;
  }
  .popin .content-pop .liste li {

    height: auto;
    padding: 20px 0;
  
  }
  .popin .content-pop {
    padding: 66px 5%;
  }
  .popin .content-pop .big {
    font-size: 24px;
    margin-bottom: 16px;
    width: 70%;
  }
  .popin .close {
    top: 55px;
  }
  .popin .content-pop .liste li.filtre .categorie, .popin .content-pop .liste li.filtre .groupe, .popin .content-pop .liste li.filtre .marque{
    display: none;
  }
  .popin .content-pop .liste li.filtre .mobile svg {
    transform: rotate(180deg);
    margin-left: 12px;
  }

  .popin .content-pop .liste li.filtre .mobile.desc svg {
    transform: rotate(0deg);
    margin-left: 12px;
  }
  
  .popin .content-pop .liste li.filtre .mobile  {
    display: block;
    position: relative;
  }

  .popin .content-pop .liste li .marque, .popin .content-pop .liste li .groupe,.popin .content-pop .liste li .categorie {
    width: 100%;
  }
}


@media only screen and (max-width: 480px){

  .titre {
    font-size: 24px;
    line-height: 31px
  }

  .big {
    font-size: 24px;
    line-height: 31px
  }

  .texte {
    font-size: 15px;
  }

  .home .titre, .home .texte, .home .lite {
    margin-bottom: 24px;
  }
  .ambition .titre, .ambition .texte, .ambition .lite, .ambition .big {
    margin-bottom: 24px;
  }
  .ambition .titre{
    font-size: 20px;
  }
  .name-rub {
    display: none;
  }
  .content-rub {
    width: 80%;
    padding: 36px 10% 48px 10%;
  }

  .navbar-mobile li {
    height: 191px;
  }
  .navbar-mobile li:nth-child(2) {
    height: 225px;
  }
  .navbar-mobile .nbr {
    float: initial;
  }

  .navbar-mobile .ssnav {
    width: 100%;
    margin-top: 20px;
  }
  .navbar-mobile .ssnav a {
    font-size: 14px;
  }

  .content-home {
    margin: 36px auto 48px;
  }

  .colonne-2 div {
    width: 100%;
    float: initial;
  }

  .colonne-2 div:first-child {
    margin-right: 0%;
  }

  .colonne-2 .illu {
    margin-bottom: 40px;
  }


  .gi-index {
    width: 90%;
    margin: 0 auto 24px;
    display: block;
  }

  .colonne-3 div:nth-child(1) svg{
    max-width: 180px!important;
  }

  footer  {
    height: 810px;
  }
  footer .navbar span, footer .navbar a {
    float: initial;
    text-align: center;
    display: block;
    margin: 16px auto;
  }
  footer .ligne2 a {
    font-size: 15px;
  }
  .marques {
    margin: 0px 0 24px -3%;
  }
  .marques li {
    width: 43%;
    height: 70px;
  }
  .about .big, .autres .big {
    margin-bottom: 36px;
  }
  .about .colonne-2 {
    margin-bottom: 48px;
  }
  .link-popup svg{
    width: 40px;
    height: 40px;
  }
  .pro .big, .pro .lite, .pro .texte{
    margin-bottom: 24px;
    color: #004621;
  }

  .popin .content-pop .liste li .marque, .popin .content-pop .liste li .groupe,.popin .content-pop .liste li .categorie {
    width: 100%;
  }

  .popin .content-pop .liste li span {
    margin: 6px 5%;
  }
  .popin .close {
    /*top: 35px;*/
  }
  .link-popup div {
   
    width: 40px;
    height: 40px;
  }

  .outil .big, .outil .lite, .outil .texte, .outil .titre {
    margin-bottom: 24px;

  }
  .outil .colonne-2 .legende, .outil .colonne-2 .picto {
    float: left;
  }

  .slider .content-slider ul li .texte {
    font-size: 20px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  .slider .prev, .slider .next {
    width: 14%;
    top: 150px;
    cursor: pointer;
  }
  .slider .prev {
    left: -10%;
  }
  .slider .next {
    right: -10%;
  }
  .slider .content-slider {
    width: 85%;
  }
  .slider{
    margin-bottom: 24px;
  }
  .slider .content-slider .slides li .colonne-2:nth-child(1) {
    margin-bottom: 32px;
  }
  .slider .content-slider .slides li .colonne-2:nth-child(1) div:nth-child(1) svg  {
    height: 120px;
  }
  .outil .colonne-2 li {
    
    margin-bottom: 24px;
  }
  .sep-h {
   
    margin-bottom: 48px;
    margin-top: 48px;
  }
  .outil .tab {
    display: none;
  }
  .outil .tabmobile {
    display: block;
  }
  .slider .navslider{
    margin: 24px auto 0;
  
  }

  footer .ligne3 a, footer .ligne3 p {
    float: inherit;
    display: block;
    text-align: center;
  }
  footer .ligne3 p {
    display: none;
  }
 
}

 
  


#onetrust-consent-sdk:before {
  height: 0px !important;
}