* {
    
    box-sizing: border-box;
    
}


body {
       font-family: 'M PLUS 1 Code', sans-serif;
       color: black;
       font-size: 20px;
       height: 3000px;
       background: linear-gradient(180deg, #ffffff 20%, #fff0f1 60%, #fcf5ff 75%);
       text-decoration: none;

   }

    
     }
.grid_6 h3 {
       font-family: 'Lexend Deca', sans-serif;
       text-align: left;
       color: black;
       letter-spacing: 2px;
       text-align: center;
       font-size: 70px;



   }


   .grid_6 h5 {

       margin: 30px;
       color: black;
       text-align: left;
       font-size: 30px;
       font-family: 'M PLUS 1 Code', sans-serif;



   }




   .grid_6 p {

       line-height: 20px;
       font-size: 18px;
       color: black;
       text-align: left;
       line-height: 1.5em;
       margin-bottom: 50px;
      
       


       font-family: 'Lexend Deca', sans-serif;

   }


   .grid_8 p {

       line-height: 20px;
       font-size: 18px;
       color: black;
       text-align: left;
       line-height: 1.5em;
       margin-bottom: 50px;



       font-family: 'Lexend Deca', sans-serif;

   }




   


   .grid_4 p {

      
    
       color: black;
       text-align: left;
       line-height: 1.3em;
       
       font-family: 'M PLUS 1 Code', sans-serif;
       font-size: 25px;

       padding: 35px;
       margin-top: 10px;
       margin-left: 20px;

   }







   .grid_6 .plans img {
       width: 95%;
       margin-right: 90px;
       
       

     


   }

   .grid_6 .plans-2 img {
       width: 90%;


     margin-top: 300px;

   }



   .grid_3 .plans-3 img {
       width: 145%;
       margin-top: 83px;


   }



   .grid_3 .plans-7 img {
       width: 90%;
       margin-top: 83px;
       margin-bottom: 0;


   }


.grid_3 .plans-8 img {
       width: 90%;
    margin-top: -45px;



   }






   .grid_6 .cit p {
       color: black;
       text-align: left;
       line-height: 1.3em;
       
       font-family: 'M PLUS 1 Code', sans-serif;
       font-size: 25px;

       
       margin-top: 10px;
      

   }








   #marge p {

       margin-top: 90px;

   }





   .grid_3 .plans-4 img {
       width: 100%;
       margin-top: 10px;

   }


   .grid_3 figure figcaption {
       font-size: 20px;
       font-family: 'Lexend Deca', sans-serif;

   }



   .grid_9 p {


       font-size: 20px;
       color: black;
       text-align: left;
       line-height: 1.5;
       margin-bottom: 50px;
       


       font-family: 'Lexend Deca', sans-serif;

   }



   .grid_6 figure img {
       width: 99%;
       margin-top: 50px;
       margin-left: 10px;

   }


   .grid_6 figure figcaption {
       font-size: 15px;
       font-family: 'Lexend Deca', sans-serif;
       margin-left: 9px;

   }



   /* je postionne une grid 12 (toute la largeur) pour introduire une ligne de couleur et faire respirer grace au margin*/
   .container_12 .grid_12 {
       border-bottom: 2px solid black;
       margin-bottom: 40px;
   }


   .grid_12 h4 {

       font-size: 22px;
       font-family: 'Lexend Deca', sans-serif;
       margin-top: 40px;
       margin-bottom: 10px;
       margin-left: 80px;
       margin-right: 80px;
       line-height: 1.5em;
       


   }



   .grid_12 p {

       font-size: 20px;
       font-family: 'Lexend Deca', sans-serif;
       margin-top: 00px;
       margin-bottom: 50px;
       margin-left: 80px;
       margin-right: 80px;
       line-height: 1.5em;
      


   }


   .grid_12 h6 {
       font-size: 20px;
       font-family: 'Lexend Deca', sans-serif;
       margin-top: 00px;
       margin-bottom: 50px;
       margin-left: 80px;
       margin-right: 80px;
       line-height: 1.5em;
       


   }



   .grid_12 img {
       width: 30%;
       float: left;
       margin-left: 35px;
       margin-bottom: 90px;

   }


   .grid_12 figure figcaption {
       font-size: 15px;
       font-family: 'Lexend Deca', sans-serif;

   }



#navigation nav {
    
   margin-top: 125px;
    
    
}

   /*traitement de la barre de navigation*/
   #navigation {
       margin-top: 20px;
       


   }



   #navigation li {
       display: inline;
       list-style-type: none;
       
     
   }

   #navigation li a {
       text-decoration: none;
       color: black;
       padding: 0 12px;
       font-family: 'Lexend Deca', sans-serif;
       font-size: 19px;


   }

   #navigation a:hover {
       color: black;
       border-bottom: solid 1px black;
   }















   /*traitement des liens en pied de page*/

   footer nav {
       width: 600px;
       margin: auto;





   }

   footer nav ul {
       list-style-type: none;
       text-align: center;

   }

   footer nav ul li {
       display: inline;


   }

   footer nav ul li a {
       font-family: 'Lexend Deca', sans-serif;
       font-size: 20px;
       color: black;
       text-decoration: none;

   }

   footer nav ul li a:hover {
       color: black;
       border-bottom: solid 1px black;
   }


























































   /*CREATION DU SLIDER POUR PHOTO NE PAS TOUCHER*/
   /* Slideshow container */
   .slideshow-container {
       max-width: 100%;
       position: relative;
       margin: auto;
       border
   }

   /* Next & previous buttons */
   .prev,
   .next {
       cursor: pointer;
       position: absolute;
       top: 50%;
       width: auto;
       padding: 16px;
       margin-top: -22px;
       color: white;
       font-weight: bold;
       font-size: 18px;
       transition: 0.6s ease;
       border-radius: 0 3px 3px 0;
       user-select: none;
   }

   /* Position the "next button" to the right */
   .next {
       right: 0;
       border-radius: 3px 0 0 3px;
   }

   /* On hover, add a black background color with a little bit see-through */
   .prev:hover,
   .next:hover {
       background-color: rgba(0, 0, 0, 0.8);
   }

   /* Caption text */
   .text {
       color: #f2f2f2;
       font-size: 15px;
       padding: 8px 12px;
       position: absolute;
       bottom: 8px;
       width: 100%;
       text-align: center;
   }

   /* Number text (1/3 etc) */
   .numbertext {
       color: #f2f2f2;
       font-size: 12px;
       padding: 8px 12px;
       position: absolute;
       top: 0;
   }

   /* The dots/bullets/indicators */
   .dot {
       cursor: pointer;
       height: 15px;
       width: 15px;
       margin: 0 2px;
       background-color: #bbb;
       border-radius: 50%;
       display: inline-block;
       transition: background-color 0.6s ease;
   }

   .active,
   .dot:hover {
       background-color: #717171;
   }

   /* Fading animation */
   .fade {
       -webkit-animation-name: fade;
       -webkit-animation-duration: 1.5s;
       animation-name: fade;
       animation-duration: 1.5s;
   }

   @-webkit-keyframes fade {
       from {
           opacity: .4
       }

       to {
           opacity: 1
       }
   }

   @keyframes fade {
       from {
           opacity: .4
       }

       to {
           opacity: 1
       }
   }

   /* On smaller screens, decrease text size */
   @media only screen and (max-width: 300px) {

       .prev,
       .next,
       .text {
           font-size: 11px
       }
   }