@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,100;1,200;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:ital,wght@0,100;0,300;0,400;0,500&family=Poppins:ital,wght@0,200;0,300;1,100;1,200;1,300&display=swap');

:root{
      --purple:#873b7c;
      --peru:#cd853f;
      --black:#222;
      --white:#fff;
      --light-black:rgb(49, 46, 49);
      --light-white:#beb9b9;
      --light-bg:#f5f5f5;
      --dark-bg:rgba(44, 43, 43, 0.7);
      --border:.1rem solid rgb(201, 179, 179);
      --box-shadow: 0 .5 1rem rgba(0, 1, 0, .1);

}
*{
      font-family: "Poppins" sans-serif;
      margin: 0.5rem;
      padding: 0.5rem;
      box-sizing: border-box;
      outline: none;
      border: none;
      text-decoration: none;
}
html{
      font-size: 62.5%;
      overflow-x: hidden;
      /*scroll-behavior: smooth;
      scroll-snap-type: y mandatory;*/
      scroll-padding-top: 6rem;
 }
 
html::-webkit-scrollbar{
      width: 1.6rem; 
 }
html::-webkit-scrollbar-track{
  
      background: #222;
 }
html::-webkit-scrollbar-thumb{
      background: var(--purple);
 }
section{
      padding: 5rem 10%;
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      /* height: calc(100vh - 7rem);*/
      /*top:7rem;*/
  }
.mentions{
      width: 100%;
      height: 100vh;
      text-align: left;
  }
a{
      color: rgb(40, 41, 42);
      font-size: 1.3rem;
  }
a:hover{
      color: rgb(82, 158, 61);
      
  }
#home a i{
      color: rgb(40, 41, 42);
      font-size: 1.5rem;
  }
.mentions .titre{
      /*border: 1px solid black;*/
      border-radius: 10px;
      text-align: center;
  }
.mentions h1{
      font-size: 2.5rem;
      color: red;
  }
.mentions p{
      font-size: 1.5rem;
      color: rgb(40, 41, 42);
  }
.mentions article{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: flex-start;
      /*border: 1px solid black;*/
      border-radius: 10px;
      padding-bottom: 1rem;
  }
.mentions article h2{
      font-size: 2rem;
      color: rgb(57, 57, 120);
  }
.mentions article h3{
      font-size: 1.7rem;
      color: rgb(51, 51, 96);
  }
.mentions article p{
      font-size: 1.5rem;
      color: rgb(40, 41, 42);
  }
.mentions article span{
      font-size: 1.5rem;
      margin-left: 2.5rem;
      color: rgb(40, 41, 42);
  }
em{
      font-weight: 700;
  }
  /*.mentions article .données-collectées{
   margin-left: -5px;
  }*/



/********************************************************************************************/
/***************************RESPONSIVE*******************************************************/


/************************************MIN-WIDTH 2560PX**************************/
@media(min-width:2560px){

a{
      font-size: 2.4rem;
  }

.mentions h1{
      font-size: 6rem;
    }
.mentions p{
      font-size: 2.4rem;
    }
.mentions article h2{
      font-size: 4.4rem;   
  }
.mentions article h3{
      font-size: 4rem;   
  }
.mentions article p{
      font-size: 2.4rem;  
  }
.mentions article span{
      font-size: 2.4rem;  
  }
}

  /*******************************MAX WIDTH 2559px*****************/
@media(max-width:2559px){

a{
      font-size: 2.2rem;
  }

.mentions h1{
      font-size: 5.4rem;
    }
.mentions p{
      font-size: 2.2rem;
    }
.mentions article h2{
      font-size: 4rem;
   
  }
.mentions article h3{
      font-size: 3.6rem;  
  }
.mentions article p{
      font-size: 2.2rem;  
  }
.mentions article span{
      font-size: 2.2rem;  
  }
}

/**************************************MAX-WIDTH 1919px****************/  
@media(max-width:2559px){

a{
      font-size: 2rem;
  }
.mentions h1{
      font-size: 5.4rem;
    }
.mentions p{
      font-size: 2.2rem;
    }
.mentions article h2{
      font-size: 4rem;  
  }
.mentions article h3{
      font-size: 3.6rem;  
  }
.mentions article p{
      font-size: 2.2rem;  
  }
.mentions article span{
      font-size: 2.2rem;   
  }
}
/**************************************MAX-WIDTH 1440px****************/  
@media(max-width:1440px){

a{
      font-size: 1.8rem;
  }
.mentions h1{
      font-size: 4.8rem;
    }
.mentions p{
      font-size: 2rem;
    }
.mentions article h2{
      font-size: 3.6rem;  
  }
.mentions article h3{
      font-size: 3.2rem;  
  }
.mentions article p{
      font-size: 2rem;  
  }
.mentions article span{
      font-size: 2rem;   
  }
}
/**************************************MAX-WIDTH 1359px****************/  
@media(max-width:1359px){

a{
      font-size: 1.8rem;
  }
.mentions h1{
      font-size: 4.2rem;
    }
.mentions p{
      font-size: 1.8rem;
    }
.mentions article h2{
      font-size: 3.2rem;  
  }
.mentions article h3{
      font-size: 2.8rem;  
  }
.mentions article p{
      font-size: 1.8rem;  
  }
.mentions article span{
      font-size: 1.8rem;   
  }
}
/**************************************MAX-WIDTH 1024px****************/  
@media(max-width:1024px){

a{
      font-size: 1.6rem;
  }
.mentions h1{
      font-size: 3.6rem;
    }
.mentions p{
      font-size: 1.6rem;
    }
.mentions article h2{
      font-size: 2.8rem;  
  }
.mentions article h3{
      font-size: 2.4rem;  
  }
.mentions article p{
      font-size: 1.6rem;  
  }
.mentions article span{
      font-size: 1.6rem;   
  }
}
/**************************************MAX-WIDTH 768px****************/  
@media(max-width:768px){
a{
      font-size: 1.4rem;
  }
.mentions h1{
      font-size: 3rem;
    }
.mentions p{
      font-size: 1.4rem;
    }
.mentions article h2{
      font-size: 2.4rem;  
  }
.mentions article h3{
      font-size: 2rem;  
  }
.mentions article p{
      font-size: 1.4rem;  
  }
.mentions article span{
      font-size: 1.4rem;   
  }
}
/**************************************MAX-WIDTH 480px****************/  
@media(max-width:480px){
a{
      font-size: 1.2rem;
  }
.mentions h1{
      font-size: 2.4rem;
    }
.mentions p{
      font-size: 1.2rem;
    }
.mentions article h2{
      font-size: 2rem;  
  }
.mentions article h3{
      font-size: 1.6rem;  
  }
.mentions article p{
      font-size: 1.2rem;  
  }
.mentions article span{
      font-size: 1.2rem;   
  }
}