@import url('https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');

* {
   margin: 0;
   padding: 0;
}

html, body {
   min-height: 100%;
   background-color: rgb(29, 29, 29);
}

.miseEnPlace {
   border-color: aliceblue;
   height: 100%;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 5fr 2fr;
   grid-template-areas:
   "haut"
   "milieu"
   "bas"
}

.hautDePage {
   grid-area: haut;
   font-family: 'Teko', sans-serif;
   font-size: 5rem;
   color: rgb(255, 255, 255);
   background-color: rgb(69, 69, 69);
   width: 100%;
   height: 100%;

   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr ;
   grid-template-areas:
   "titreHelium rien info info"
   /* 69 */
}

.titre {
   grid-area: titreHelium;
   margin: auto 100px;  
}

.sousTitre {
   grid-area: info;

   font-size: 3rem;
   margin: auto 0;
   margin-left: 300px;

   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr ;
   grid-template-areas:
   "motCinq motMine motUse"
}

.cinqG {
   grid-area: motCinq;
}

.mine{
   grid-area: motMine;
}

.use {
   grid-area: motUse;
}

.content {
   background-color: rgb(29, 29, 29);
   grid-area: milieu;
   font-family: 'Inter', sans-serif;
   width: 100%;
   height: 100%;

   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr ;
   grid-template-rows: 1fr 1fr 1fr 1fr ;
   grid-template-areas:
   "texteSurLeProduit texteSurLeProduit image image"
   "texteSurLeProduit texteSurLeProduit image image"
   "texteSurLeProduit texteSurLeProduit image image"
   "texteSurLeProduit texteSurLeProduit image image"
}

.présentationProduit {
   grid-area: texteSurLeProduit;

   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 4fr 2fr 3fr 4fr ;
   row-gap: 2px;
   grid-template-areas:
   "rien titrePr titrePr"
   "rien éno éno"
   "rien descr descr"
   "rien bt vide"
}

.titreDuProduit {
   grid-area: titrePr;
   padding-top: 90px;
   font-size: 8rem;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   color: rgb(241, 241, 241);
}

.énoncé {
   grid-area: éno;
   padding-top: 10px;
   padding-top: 0px;
   padding-bottom: 0px;
   /* background-color: rgb(9, 255, 0); */
   font-size: 2.8rem;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   color: #888888;
}

.description {
   grid-area: descr;
   padding-top: 10px;
   /* background-color: rgb(255, 0, 0); */
   font-size: 1.4rem;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   color: #FFFFFF;
}

.divBouton {
   grid-area: bt;
}

.button {
   background-color: rgb(71, 77, 255);
   border: 0;
   border-radius: 7px;
   color: #FFFFFF;
   cursor: pointer;
   display: inline-block;
   font-family: -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
   font-size: 16px;
   font-weight: 500;
   line-height: 2.5;
   outline: transparent;
   padding: 0 1rem;
   text-align: center;
   text-decoration: none;
   transition: box-shadow .2s ease-in-out;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
 }
 
 .button:not([disabled]):focus {
   box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(71, 82, 239, 0.5), .125rem .125rem 1rem rgba(0, 0, 255, 0.5);
 }
 
 .button:not([disabled]):hover {
   box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(71, 82, 239, 0.5), .125rem .125rem 1rem rgba(4, 0, 255, 0.5);
 }

.imageMineur {
   grid-area: image;
   /* background-color: rgb(29, 29, 29); */
   top: -100px;
   left: -30px;
   margin-bottom: -100px;
   padding-left: 30px;
   position: relative;
}

.imageProduit {
   height: 800px;
}

.basDePage {
   grid-area: bas;
   background-color: rgb(0, 0, 0);
   padding-top: 20px;
   padding-bottom: 20px;
   width: 100%;
   height: 100%;

   display: grid;
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-rows: 1.8fr 0.3fr ;
   grid-template-areas:
   "rien mentL vide"
   "rien logoHelium vide"
}

.mentionsLégales {
   grid-area: mentL;
   font-family: 'Inter', sans-serif;
   color: #FFFFFF;
   font-size: 0.8rem;

   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr ;
   row-gap: 0px;
   grid-template-areas:
   "apprendre informé media"
   /* 858585 */
}

.learn {
   grid-area: apprendre;
   margin: 0 auto;
}

.involved {
   grid-area: informé;
   margin: 0 auto;
}

.social {
   grid-area: media;
   margin: 0 auto;
}

h1 {
   font-size: 1rem;
}

p {
   color: rgb(170, 170, 170);
   font-size: 1rem;
}

hr{
   height: 2px;
   background-color: #848484;
   border: none;
}

.logo {
   grid-area: logoHelium;
   margin-top: 10px;
}

.logoHel {
   height: 60px;
   margin-left: 50px;
}