@charset "UTF-8";

@font-face {
    font-family: 'riforma_llbold';
    src: url('./typographie/riformall-bold-webfont.woff2') format('woff2'),
         url('./typographie/riformall-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'riforma_llmedium';
    src: url('./typographie/riformall-medium-webfont.woff2') format('woff2'),
         url('./typographie/riformall-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'riforma_llregular';
    src: url('./typographie/riformall-regular-webfont.woff2') format('woff2'),
         url('./typographie/riformall-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'riforma_llregular';
    src: url('./typographie/riformall-regular-webfont.woff2') format('woff2'),
         url('./typographie/riformall-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.portfolio-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  
  background: white;
  color: red;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid red;
  
  z-index: 9999;
  transition: all 0.2s ease;
}
.portfolio-btn:hover {
  text-decoration: none;
}

.portfolio-btn:hover {
  background: red;
  color: white;
}

/* CSS Document */

.container {
	margin-bottom: 50px;
}

.MenuTelImg {
  display: none;
 }

 .menuTel a {
  display: none;
 }

 .Les5R div:nth-of-type(6) {
  display: none;
 }

 .Les5R div:nth-of-type(7) {
  display: none;
 }

/* navigation */
.navbar {
      background-color: black;
    }

    .navbar-brand {
      margin: 0 auto;
    }

    .navbar-nav {
      margin: auto;
    }


/* -------------  slider -------------- */ 
.slider {
    width: 100%;
    overflow: hidden;
  }

  .carousel {
    display: flex;
    transition: transform 0.5s;
  }

  .slide {
    flex: 0 0 100%;
    margin-right: 25px;
    position: relative;
  }

  .slide img {
    width: 100%;
  }

  .prev,
  .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #ccc;
    cursor: pointer;
    z-index: 1;
  }

  .prev {
    left: 0;
  }

  .next {
    right: 0;
  }



/* ------------------------ head ------------------ */

.myheader {
  width: 100%;
  margin-bottom: 6rem;
  padding-top: 64px;
}

.myheader div {
  display: flex;
}
.imgHome {
  width: 100%;
  margin-top: -3vh;
}

.flechRose  {
  width: 60%;
  
margin: auto;
}

.divFlechRose {
  width: 9.5%;
}
.GifPoubel {
  background-color: black;
  width: 45%;
  height: 15.7rem;
  margin-top: 7px;
  }

.GifPoubel img {
  width: 30%;
  margin: 0px;
  padding:0px;
}

.headerTxt {

  width: 45%;
  font-family: 'riforma_llbold';
  font-size: 2.6rem;
  line-height: 2.7rem;
  margin-top: 0px;
  position: relative;

}

.headerTxt p {
  background-color: white;
  color: black;
  text-transform: uppercase;
}

.traitNoirTxt {
  background-color: black;
  height: 2.36rem;
  width: 5%;
  position: absolute;
  margin-left: 95%;
  margin-top: 0.2rem;
}

.traitNoirTxt:nth-of-type(2) {
  margin-top: 2.8rem;
  width: 7%;
  margin-left: 93%;
}

.traitNoirTxt:nth-of-type(3) {
  margin-top: 5.42rem;
  width: 36%;
  margin-left: 64%;
}

.traitNoirTxt:nth-of-type(4) {
  margin-top: 8.12rem;
  width: 6%;
  margin-left: 94%;
}
.traitNoirTxt:nth-of-type(5) {
  margin-top: 10.82rem;
  width: 11%;
  margin-left: 89%;
}
.traitNoirTxt:nth-of-type(6) {
  margin-top: 13.52rem;
  width: 76%;
  margin-left: 24%;
}


/*------------------ image ------------*/
.customAlerteGreen {
	width: 22rem;
}

.custom3Conseils {
	height: 262px;
	width: 388px;
}





/* --------------------- text ----------------------- */
body {
	font-family: 'riforma_llregular';
	font-size: 22px;
	line-height: 25px;
  position: relative;
  overflow-x: hidden;
}

h2 {
	background-color: black;
	color: white;
	font-family: 'riforma_llbold';
	font-size: 5.4em;
	padding: 7px 0 0 11.5vw;
	line-height: 6.35rem;
	background-position: top;
	margin-bottom: 3rem;
}


.text span {
  font-size: 1.7em;	
  vertical-align: -5px;
	line-height: 22px;
  
}

/*-------------- société tout jetable ------------ */
.societeToutJetable {
	margin: 2rem 11% 6rem 11%;
  display: flex;
}

.societeToutJetable p {
	padding-left: 45px;
	margin-left: 45px;
}


.societeToutJetable img {
	width: 50vw;
	padding: 0 35px 0 10px;	
}
.etToutPlastique {
	margin: 2rem 11% 6rem 11%;
  display: flex;
}

.etToutPlastique p {
	padding-right: 45px;
	margin-right: 45px;
}


.etToutPlastique img {
	width: 55rem;
	padding: 0 10px 0 35px;	
}

/* --------------- 5 alerte green washing -------- */


.flechNoir {
	margin: 55% 50px 0 50px;
	width: 9rem;

}

.flechNoirDroite {
	transform: scaleX(-1);
	margin-left: 3rem;
  margin-top: 45%;
}
.AlertesBgBlack {
	background-color: black;
	color: white;
	border: solid;
	border-color: white;
}

.AlerteGreenRow:nth-of-type(3) {
  width: 93%;
}

.AlertesBgBlack p {
	padding: 10px 10px 0 10px ;
}


.AlertesBgBlack {
  position: relative;
  width: 35%;
  height: 23.2rem;
}

.AlertesBgBlack img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  object-fit: cover;
  transition: transform 0.3s ease;
	padding: 10px;
  transition: transform 0.5s;
  z-index: 2;
}

.AlertesBgBlack:hover img {
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.AlertesBgBlackRight:hover img {
  transform: translateX(+100%);
  transition: transform 0.5s;
}

.AlertesBgBlack .text {
  position: relative;
  z-index: 1;
}

.AlertesBgBlack h3 {
	margin: 26% 0 0 10px;
  font-size: 2rem;
  text-transform: uppercase;
}

.AlertesBgBlack div {
	height: 200px;
}

.AlerteGreen {
 margin: 2rem 11% 6rem 11%;
}

.AlerteGreenRow {
  display: flex;
  flex: nowrap;
}

.AlerteGreenRow:nth-child(1) {

}





/* ----------------------- 3 conseils rassurant ------------------ */

.TroisConseilsTxt {
	background-color: black;
	color: white;
  transition: margin-top 0.5s, height 0.5s;
  margin: 0px 0.5%;
  width: 100%;
  height: max-content;
}

.TroisConseilsTxt:hover {
  height: auto;
  transition: margin-top 0.5s, height 0.5s; /* Ajout de la transition */
}

.TroisConseilsContainer p {
	margin-top: 5px;
  margin: 2% 3% 0%;
}

.TroisConseilsContainer h3 {
  margin: 0 3% 2%;
}
.TroisConseilsContainer {
  display: inline-flex;
  margin: 0px 12% 5%;
}

.TroisConseilsTxt div {
	position: relative;
	margin-top: -220px;
	height: 220px;
	z-index: 1;
  transition: margin-top 0.5s, height 0.5s;
 
}

.TroisConseilsTxt img {
	margin: 2% 3% 0%;
	position: relative;
	z-index: 2;
  width: 95%;
}

.TroisConseilsTxt:hover div {
	margin-top: 0;
  transition: margin-top 0.5s, height 0.5s; /* Ajout de la transition */
}

/* -------------- liste flotante ------------------- */

.divGenListeFlot {
  margin-top: 5px;
  margin-bottom: 40px;
  height: 110rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  background-color: black;
  width: 100vw;
}

.divListeFlot {
  width: 33%;
	background-color: black;
  color: white;
  position: relative;
  height: 600px;

}

.divListeFlot img {
  transition: position 0.5s;
  width: 550px;
  margin: 2.5%;
  position: absolute;
  opacity: 1;
}

.divListeFlot img:hover {
  transition: opacity 0.3s;
  opacity: 0;
}

.divListeFlot p, .divListeFlot h3 {
  padding: 2.5%;
}

.divListeFlot p {
  height: 14.5rem;
  margin-top: 5px;
}
.divListeFlot h3 {

  text-transform: uppercase;
  font-size: 2rem;
}

.listDivTxt {
  height: 435px;
}



.divListeFlot:nth-of-type(1) {

}

.divListeFlot:nth-of-type(2) {
  
}

.divListeFlot:nth-of-type(3) {
}

.divListeFlot:nth-of-type(4) {
  
}

.divListeFlot:nth-of-type(5) {
  
}

.divListeFlot:nth-of-type(6) {
 
}

.divListeFlot:nth-of-type(7) {
  
}

.divListeFlot:nth-of-type(8) {
 
}

.divListeFlot:nth-of-type(9) {
 
}

.divListeFlot:nth-of-type(10) {
 
}

.divListeFlot:nth-of-type(11) {
  
}

.divListeFlot:nth-of-type(12) {
  
}


/* ------------------- slider ------------------- */

.h3Bg {
  background-color: black;
}

.h3Bg h3 {
  color: white;
  font-size: 3.5rem;
  width: 38%;
  font-family: 'riforma_llbold';
  margin: auto;
  line-height: 3.5rem;
}

.ContenuSlider {
  width: 38%;
  margin: auto;
}

.ContenuSlider img {
  width: 100%;
}

.swiffy-slider {
  margin-bottom: 6rem;
}




.slideDiv {
  height: 500px;
}

/* ----------------- nav ------------------ */
nav  a img {
  width: 8rem;
  margin-bottom: 7px;
}

nav {
  background-color: black;
  height :max-content ;
  padding: 10px 10px 0px 10px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

nav div {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

nav a, #popupLink {
  color: white;
  text-decoration: none;
  font-size: 2.5rem;
  text-transform: uppercase;
  margin: auto 0;
  font-family: 'riforma_llbold';
}


nav a:hover, #popupLink:hover {
  color: #f447ff;
  text-decoration: none;
}

nav a img:hover {
  opacity: 0.5;
}

#popupLink {
  margin-left: 3.6vw;
  margin-right: 3.6vw;
}
/* -------   Les 5R menu ------------- */

.closeBtn {
  color: black;
}

.Les5R div {
  border: black;
  border-right-style: solid;
  width: 20%;
  display: flex;
  border-width: 3px;
}

.Les5R {
  display: flex;
  height: 100vh;
  position: fixed;
  width: 100%;
  z-index: 4;
  top: 0px;
  background-color: white;
  padding-top: 70px;
}

.Les5R a {
  margin: auto;
  color: white;
  font-family: 'riforma_llbold';
  font-size: 5rem;
  mix-blend-mode: difference;
}

.Les5R a:hover  {
  text-decoration: none;
}

.Les5R div:nth-of-type(1):hover {
  background-image: url('image/r1.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
.Les5R div:nth-of-type(2):hover {
  background-image: url('image/r2.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
.Les5R div:nth-of-type(3):hover {
  background-image: url('image/r3.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
.Les5R div:nth-of-type(4):hover {
  background-image: url('image/r4.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
.Les5R div:nth-of-type(5):hover {
  background-image: url('image/r5.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

#closeBtn {
  position: absolute;
  width: 60px;
  top: 45px;
  left: 95%;
  opacity: 0.5;
}
#closeBtn:hover {
opacity: 1;
}

#Les5R {
  display: none;
}


/* ------------------------------------------------- Refuse ---------------------- */

#bandIllustrationHead {
  width: 100vw;
  height: 15vw;
  background-color: black;
  background-image: url('image/Refuse\ illu.svg');
  background-size:contain;
  background-position: center;
}

h1 {
 font-family: 'riforma_llbold';
 font-size: 25.17vw;
 color: black;
 text-transform: uppercase;
 margin: -2vh -2vw -6vw -2vw;
 
}






/* -------------------------- Association ------------------ */

#association h1 {
  font-size: 15vw;
  text-transform: uppercase;
  margin: -0vh -2vw -10vh -1.2vw;
  padding-top: 2vh;
}


#association .myheader p {
  margin: 0px 11.5vw;
  width: 38.5vw;
}

#association .myheader {
  margin-bottom: 4vh;
  position: relative;

}

#association .myheader .imgHome {
  margin-top: 5px;
}

.Censure {
  position: absolute;
  top: 840px;
  width: 30vw;
  left: 61vw;
  rotate: 15deg;
}



/* ------------   footer  ---------------- */

.FooterTxt {
  font-family: 'riforma_llbold';
  font-size: 2.5rem;
  line-height: 2.7rem;
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
}

.FooterTxt p {
  background-color: Black;
  color: white;
  text-transform: uppercase;
  padding-left : 12vw;
  width: 45%;
}

footer {
  background-color: black;
  padding-bottom: 20px;
}

footer div div {
  margin-left: auto;
  margin-right: 6vw;
}
footer img {
  width: 15rem;
  height: 13.5rem;
}
footer a img:hover {
  opacity: 0.5;
}

/* ------ contrer media querise ------ */

#RefusePage h1:nth-of-type(2) {
  display: none;
}
/* ------------------------------------------- responsive ------------------------------------- */

@media screen and (max-width: 992px) {
  body {
    font-family: 'riforma_llregular';
	font-size: 16px;
	line-height: 18px;
  position: relative;
  overflow-x: hidden;
  }

  h2 {
 
	font-size: 2.9rem;
	padding: 0px 0 0 2vw;
	line-height: 3rem;
	background-position: top;
	margin-bottom: 3rem;
  }

  .traitNoirTxt {
    background-color: black;
  height: 0;
  width: 0;
  position: absolute;
  margin-left: 0;
  margin-top: 0;
  }

  .GifPoubel {
    background-color: none;
    width: 0;
    height: 0;
    margin-top: 0px;
    display: none;
    }

    .GifPoubel img {
      display: none;
    }

    .flechRose {
      display: none;
    }

    .imgHome{
      display: none;
    } 
    .imgHomeTel {
      height: 117vw;
      rotate: 90deg;
      margin-left: -45vw;
      margin-top: 150px;
    }

    .headerTxt p {
      font-size: 1rem;
      line-height: 1rem;
      margin-left: 30vw;
      margin-top: 0vw;
    }

    .headerTxt {
      width: 74vw;
    }
   /* ----------- et du tout plastique ------------- */
    .societeToutJetable {
      flex-direction: column;
      margin-left: 1vw;
      height: 55vh;
    }

    .societeToutJetable img {
      width: 100vw;
      margin: auto;
      margin-bottom: 10px;
  
    }
    .societeToutJetable div p {
      width: 93vw;
      margin: auto;
      padding-left: 10px;
      margin-bottom: 0px;
    }

    .myheader {
      margin-bottom: 0px;
    }

    /* ------------ tout jetable ------------- */
    .etToutPlastique {
      flex-direction: column;
      margin-left: 1vw;
      height: 55vh;
      margin-top: 0px;
    }

    .etToutPlastique img {
      width: 95vw;
      margin: auto;
      margin-bottom: 10px;
      margin-left: 0px;
      padding-left: 0px;
  
    }
    .etToutPlastique div p {
      width: 100vw;
      margin: auto;
      padding-left: 10px;
      margin-bottom: 15px;
      margin-top: 15px;
      padding-top: 10px;
    }
/* ----------- slider --------- */
    .h3Bg h3 {
      font-size: 2.1rem;
      line-height: 2.2rem;
      margin-left: 13vw;
      width: 80%;
    }

    .h3Bg {
      width: 95vw;
      margin: 0px;
      padding: 0px;
    }
    .slider-container {
      margin: auto;
    }

    .slideDiv p{
      width: 67%;
      margin-left: 13vw;
      margin-top: 5vw;
    }

    .ContenuSlider {
      width: 100vw;
    }
    .swiffy-slider {
      margin-bottom: 0px;
    }

    /* ----- green washing ------- */

    .flechNoir {
      display: none;
    }
    .AlerteGreen {
      flex-direction: column;
      margin-left: 5vw;
      margin-bottom: 10px;
    }

    .AlertesBgBlack {
      width: 90vw;
      height: 350px;
    }
    .AlerteGreenRow {
      flex-direction: column;
    }

    .AlertesBgBlackRight:hover img {
      transform: translateX(-100%);
      transition: transform 0.5s;
    }

    .AlertesBgBlack h3 {
      margin-top: 100px;
      
    }

    /* -------- trois conseil ----------- */
    .TroisConseilsContainer {
      flex-direction: column;
    }


    /* ------- 12 astuce -------*/ 
    .divGenListeFlot {
      flex-direction: column;
      flex-wrap: nowrap;
      height: auto;
    }

    .divGenListeFlot .row {
      flex-direction: column;
    }

    .divListeFlot {
      flex-direction: column;
      width: 200px;
    }

    .divListeFlot {
      width: 100vw;
      height: 50vh;;
    }

    .listDivTxt {
      width: 100vw;
    height: 30vh;
    }

    .divListeFlot img {
      width: 95%;
    }

    .divGenListeFlot h3 {
      margin-top: 5.5vh;
    }

  .FooterTxt div img {
    width: 20vw;
    height: auto;
  }
   .FooterTxt p {
    padding-left: 3vw;
    font-size: 1.3rem;
    line-height: 1.4rem;
   }

   /* ------- nav ------- */
   .MenuTelImg {
    display: block;
    height: 6vh;
    margin: auto;
    margin-bottom: 1vh;
   }

   nav div {
    display: none;
   }
   
   .MenuTel{
    display: initial;
   }
    
   .Les5R {
    flex-direction: column;
    margin-top: 10px;
   }

   .Les5R div {
    border-top: solid 1px black;
    width: 100vw;
    height: 15vh;
   }

   .menuTel a {
    font-size: 3.3rem; 
   }


   #closeBtn {
    display: none;
   }
   .menuTel a {
    display:initial;
    font-family: 'riforma_llbold';
    font-size: 3.3rem;
    line-height: 3.3;
    mix-blend-mode: difference;
    margin-left: 14vw;
   }
   .Les5R div:nth-of-type(6) {
    display: initial;
   }

   .Les5R div:nth-of-type(7) {
    display: initial;
   }
   /* ------------ La solution --------- */

   .myheader .text {
    width: 90vw;
  
   }

   #association .myheader .text {
    margin:1vw;
    width: 98vw;
   }

   #association .imgHomeTel {
    margin-bottom: 13vh;
   }

   .Censure {
   top: 790px;
   left: 50vw;
   }
   #association h1 {
    padding-top: 75px;
    padding-bottom: 20px;
   }


   /* ------------ Refuse -------- */

   #RefusePage .myheader {
    padding-top: 80px;
   }

   #RefusePage h1 {
    margin-top: 10px;
    margin-bottom: 10px;
   }

 

   #RefusePage h1:nth-of-type(1) {
    display: none;
  }


  #RefusePage h1:nth-of-type(2) {
    display: block;
    margin: 0px;
    font-size: 11rem;
    line-height: 10rem;;
    margin-top: 60px;
  }

  h1 span {
    font-size: 23rem;
    margin-left: -17px;
   }










}