diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..262712e
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,1510 @@
+@charset "UTF-8";
+/* CSS Document */
+
+
+/******************************************************************
+******************************************************************
+NE PAS MODIFIER / CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
+AUTOMATIQUEMENT PAR LE FICHIER NORMALIZE.CSS
+******************************************************************
+******************************************************************/
+
+/*retire les padding et margin */
+aside, section, article, footer, header, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li, figure { padding:0; margin:0; }
+
+/******************************************************************
+******************************************************************
+CSS PRÉDÉFINIES
+******************************************************************
+******************************************************************/
+
+/* les images ne seront jamais plus grandes que le contenant <figure> qui les contient */
+img { max-width:100%; height: auto;}
+
+/* ajoutez cette classe si il n'y a qu'une seule image */
+/* dans le <figure> et qu'un espace fin apparait sous l'image */
+/* par exemple <img class="no-border-down" src="..." */
+/* img.no-border-down { display:block;} */
+
+/* dans le cas où le float est requis */
+div.pousse { clear:both; width:0; height:0; overflow:hidden;}
+
+/* polices par défaut */
+body { font-family: Helvetica, Arial, sans-serif; }
+
+/* retire le gras par défaut des titres */
+h1, h2, h3, h4, h5, h6 { font-weight: 400;}
+
+@font-face {
+    font-family: 'candicebold_expanded';
+    src:url('src/fonts/candice/candice-boldexpanded-webfont.woff2') format('woff2'),;
+    font-weight: normal;
+    font-style: normal;
+
+}  /* CANDICE */
+
+@font-face {
+    font-family: 'mazius_displaybold';
+    src: url('src/fonts/mazius/maziusdisplay-bold_copy-webfont.woff2') format('woff2'),
+         url('src/fonts/mazius/maziusdisplay-bold_copy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}  /* MAZIUS */
+
+@font-face {
+    font-family: 'mazius_displayextra_italic';
+    src: url('src/fonts/mazius/maziusdisplay-extraitalic_copy-webfont.woff2') format('woff2'),
+         url('src/fonts/mazius/maziusdisplay-extraitalic_copy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'mazius_displayXItBd';
+    src: url('src/fonts/mazius/maziusdisplay-extraitalicbold_copy-webfont.woff2') format('woff2'),
+         url('src/fonts/mazius/maziusdisplay-extraitalicbold_copy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'mazius_displayregular';
+    src: url('src/fonts/mazius/maziusdisplay-regular_copy-webfont.woff2') format('woff2'),
+         url('src/fonts/mazius/maziusdisplay-regular_copy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'mazius_review_20.09XIt';
+    src: url('src/fonts/mazius/maziusreview20.09-extraitalic_copy-webfont.woff2') format('woff2'),
+         url('src/fonts/mazius/maziusreview20.09-extraitalic_copy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'mazius_review_20.09italic';
+    src: url('src/fonts/mazius/maziusreview20.09-italic_copy-webfont.woff2') format('woff2'),
+         url('src/fonts/mazius/maziusreview20.09-italic_copy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'mazius_review_20.09regular';
+    src: url('src/fonts/mazius/maziusreview20.09-regular_copy-webfont.woff2') format('woff2'),
+         url('src/fonts/mazius/maziusreview20.09-regular_copy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+/************************************************************************************************************************************
+/************************************************************************************************************************************
+PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
+PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
+PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
+PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
+PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
+/************************************************************************************************************************************
+************************************************************************************************************************************/
+
+/***************** BODY  *****************************/
+
+body {background-color: #EBEBEB;
+      font-family: "mazius_displayregular", 'serif';
+       font-style: normal;
+      font-size: 2vw;
+    font-style: normal;   
+    width: 100vw;
+    overflow-x: scroll;
+    
+
+    } 
+
+
+h1 {
+    font-family: 'Candice', 'sans-serif';
+    font-size: 4em;
+
+}
+
+
+h2 {
+    font-family: "mazius_displayregular", 'serif';
+    font-style: normal;
+    font-size: 5vw;
+}
+
+h3 {
+    font-family: "mazius_displayregular", 'serif';
+    font-style: normal;
+    font-size: 6vw;
+    
+}
+
+h4 {
+    font-family: 'Candice', 'sans-serif';
+    font-size: 2vw;
+}
+
+h5 {
+    font-family: "mazius_displayregular", 'serif';
+    font-style: normal;
+    font-size: 2.5vw;
+}
+
+h6 {
+    font-family: 'Candice', 'sans-serif';
+    font-size: 1.5vw;
+}
+
+p {
+    font-family: "mazius_displayregular", 'serif';
+    font-style: normal;
+    font-size: 1.5vw;
+    line-height: 2vw;
+    margin: 0 auto;
+}
+
+span {
+    color: #ACA9F8;
+}
+
+a {
+    text-decoration: none;
+}
+
+
+
+/***************** OPENER  *****************************/
+
+.opener {
+    background-color: white;
+    width: 100%;
+    margin: auto;
+    text-align: center;
+    height: 80vh;
+    padding: 20vh 0 0 0;
+
+
+}
+
+
+
+/***************** HOME  *****************************/
+
+.home {
+   
+    display: flex;
+      flex-basis: 50%;
+    justify-content: space-between;
+
+    height: 100%;
+    height: 100vh;
+
+
+}
+
+div.homeone {
+    flex-basis: 50%;
+    width: 50%;
+    margin: auto;
+    padding: 25vh 0 0 0;
+    text-align: center;
+   
+}
+
+.login {
+    margin:;
+    color: #EBEBEB;
+    background-color: black;
+    margin: 12vh auto 10vh auto;
+    width: 28%;
+    border-radius: 25px;
+    padding: 12px;
+
+}
+
+.login a {
+    color:white;
+}
+
+.login:hover {
+    width: 32%;
+    cursor:pointer;
+    
+}
+
+div.hometwo {
+     flex-basis: 50%;
+     background-image: url(src/img/chris-ried-79NfyK85Ahc-unsplash.jpg);
+    background-position: center;
+    height: 100vh 0;
+    text-align: center;
+    padding: 40vh 0;
+    color: white;
+}
+
+div.hometwo h1{
+   
+}
+
+.join {    
+    background-color: #EBEBEB;
+
+    text-align: center;
+     margin: 25vh auto 0 auto;
+    width: 28%;
+    color: black;
+    padding: 12px;
+     border-radius: 25px;
+}
+
+.join:hover {
+        width: 32%;
+    cursor:pointer;
+}
+
+.language {
+    position: fixed;
+    top: 15px;
+    right:15px;
+    
+}
+
+/***************** COOP  *****************************/
+
+.coop {
+    display: flex;
+    flex-basis: 50%;
+    justify-content: space-between;
+    background-color:;
+    height: 100vh;
+
+}
+ 
+.one {
+    flex-basis: 50%;
+    background-color: black;
+    height: 65vh;
+    padding: 35vh 0 0 0 ;
+    
+}
+.one h5{
+    color: white;
+    padding: 0 7vw;
+}
+
+
+/***************** FLOAT LOGO TO ARRANGE***************************/
+
+.one h1{
+    color: white;
+    text-align: left;
+    padding: 0 7vw;
+}
+
+.one img {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    
+}
+
+.two {
+    flex-basis: 50%;
+    height: 100vh;
+    width:50vw;
+    text-align: left;
+    padding: 15vh 0;
+    
+    
+    
+    
+}
+
+.two p {
+    padding: 0 7vw;
+    line-height: 200%;
+}
+
+
+/***************** SERVICES  *****************************/
+
+div.services {
+        display: flex;
+    background-color:;
+    height: 100vh;
+
+}
+
+.services .left  {
+       flex-basis: 50%;
+     height: 100vh;
+    text-align: center;
+    padding: 45vh 0;
+}
+
+.services .left h5{ 
+    text-align: left;
+    padding: 0 0 0 30px ;
+}
+
+div.services .right {
+       flex-basis: 50%;
+    background-color: black;
+    color: white;
+     height: 80vh;
+    text-align: center;
+    padding: 20vh 0 0 0;
+
+}
+
+.menu {
+    padding: 1.7vw 0;
+    display: flex;
+    justify-content: center;
+    
+
+}
+
+.menu button {
+    background-color: black;
+    border: none;
+    position: relative;
+    left: 3vw;
+    
+}
+
+.menu button:hover {
+    cursor: pointer;
+    position: relative;
+    left: 5vw;
+     transition:0.5s;
+    
+}
+.menu h3:hover {
+    cursor: pointer;
+    transition: 1s;
+    font-family: "mazius_displayextra_italic", 'serif';
+    
+}
+
+
+/***************** CLOUD  *************************/
+
+.cloud{ 
+    position: fixed;
+    left: 3vh;
+    top: 20vh;
+    width: 40%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 60%;
+    
+    display:none;
+    
+}
+
+
+.cloud .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.cloud i {
+    color: white;
+    padding: 3vh;
+}
+
+.cloud p {
+    color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 3.5vh;
+    
+}
+
+.cloud button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** AGORA  *************************/
+
+.agora { 
+    position: fixed;
+    left: 3vh;
+    top: 20vh;
+    width: 40%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 60%;
+    
+    
+    display:none;
+}
+
+
+.agora i {
+    color: white;
+    padding: 3vh;
+}
+
+.agora .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.agora p {
+    color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 3.5vh;
+    
+}
+
+.agora button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** WIKI  *************************/
+
+.wiki{ 
+    position: fixed;
+    left: 3vh;
+    top: 20vh;
+    width: 40%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 60%;
+    
+    display:none;
+    
+}
+
+.wiki i {
+    color: white;
+    padding: 3vh;
+}
+
+.wiki .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.wiki p {
+    color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 3.5vh;
+    
+}
+
+.wiki button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** LAB  *************************/
+
+.lab{ 
+    position: fixed;
+    left: 3vh;
+    top: 20vh;
+    width: 40%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 60%;
+    
+    display:none;
+    
+}
+
+.lab i {
+    color: white;
+    padding: 3vh;
+}
+
+.lab .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.lab p {
+    color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 3.5vh;
+    
+}
+
+.lab button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+.lab a {
+    color: white;
+}
+
+
+/***************** + AUX + *************************/
+
+.aux{ 
+    position: fixed;
+    left: 3vh;
+    top: 20vh;
+    width: 40%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 60%;
+    
+    display:none;
+    
+}
+
+.aux i {
+    color: white;
+    padding: 3vh;
+}
+
+.aux .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.aux p {
+    color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 3.5vh;
+    
+}
+
+.aux button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** SUPPORT  *****************************/
+
+.support{
+        display: flex;
+      flex-basis: 50%;
+    justify-content: space-between;
+    background-color:;
+    height: 100vh;
+
+}
+
+.support .left  {
+       flex-basis: 50%;
+        background-color: black;
+    color: white;
+    text-align: center;
+    padding: 45vh 0;
+}
+
+.support .left h5{
+    text-align: left;
+    padding: 0 0 0 30px ;
+}
+.support .left h1{
+    
+}
+
+.right h4 {
+    color: white;
+    text-align: center;
+    padding: 0 0 3vh 0 ;
+    
+}
+
+div.support .right {
+       flex-basis: 50%;
+    align-items: center;
+      position: relative;
+
+    
+}
+
+form {
+    height: 70vh;
+    width: 70%;
+    text-align: end;
+    background-color: black;
+    border-radius: 25px;
+    
+    padding: 5vw;
+    color: white;
+      margin: 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -ms-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+    
+}
+
+form input{
+    height: 20px;
+    width: 100%;
+    border-radius: 20px;
+    padding: 1vh;
+    margin: ;
+    font-family: "mazius_displayregular";
+    font-size: 1.5vw;
+    
+}
+form textarea{
+    height: 150px;
+    width: 100%;
+    border-radius: 25px;
+    padding: 1vh;
+ 
+    font-family: "mazius_displayregular";
+    font-size: 1.5vw;
+    
+}
+
+
+form label {
+    color: #767676;
+    position: relative;
+    top: 2vw;
+    font-size: 1vw;
+ 
+}
+
+input supportterms {
+    background-color: aqua;
+}
+
+input[id="robot"]:hover {
+    
+}
+/*
+input[type="checkbox"] {
+    border-radius: 50px;
+    width:3vw;
+    height: 3vw;
+    appearance:none;
+    display: inline-block;
+    background-color: white;
+    margin: 10px;
+    display: block;
+    border: 3px grey;
+}
+
+input[type="checkbox"]:hover {
+    background-color:grey;
+    cursor: pointer;
+}
+
+input[type="checkbox"]:active{
+   box-shadow: 0 2px 4px 0 white;
+}
+    
+input[type="checkbox"]:checked{
+    color:black;
+    border: 3px white;
+    
+}
+
+input[type="checkbox"]:checked:after {
+   content:'\25CF';
+    font-size: 10vw;
+    position: relative;
+    
+*/
+div.box {
+    display: flex;
+    margin:1vw;
+}
+
+input[type="checkbox"] {
+ 
+    display: block;
+    margin; 3vw;
+   
+}
+label a {
+    color: #ACA9F8;
+}
+
+label[id='terms']{
+    color: white;
+    position: relative;
+    top: 10px;
+    
+}
+
+input[type='submit']{
+    text-decoration: none;
+    width: 30%;
+    height:7%;
+    font-family: 'candicebold_expanded', 'serif';
+    margin: 2vh 0;
+}
+
+/***************** FOOTER  *****************************/
+
+
+
+footer {
+    display: flex;
+    justify-content: space-between;
+    margin: 3vh auto;
+}
+
+footer h6 {
+    flex-grow: 1;
+    width: 15vw;
+}
+
+footer button {
+    height: 50px;
+    width: 50px;
+    background-color: none;
+    border: none;
+    flex-grow: 2;
+    padding: 0 0 0 9vw;
+}
+
+footer i {
+       height: 100%;
+}
+
+footer span {
+    font-size: 1.3vw;
+    text-align: right;
+    padding: 2px;
+    color:black;
+        flex-grow: 1;
+
+}
+
+/****************************************/
+/* SCÉNARI0 JQUERY
+/* SCÉNARI0 JQUERY
+/* SCÉNARI0 JQUERY
+/****************************************/
+
+/* réglage de l'apparence initiale des objets avant le script jQuery */
+
+
+
+
+
+
+/**************************************************************
+CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
+*************************************************************/
+
+
+@media screen and (max-width: 680px) { 
+    
+    /* ne pas modifier */
+    body { font-size:16px; } 
+    h1 { font-size:48px; }
+    h2 { font-size:36px; }
+    h3 { font-size:24px; }
+    h4 { font-size:20px; }
+    h5 { font-size:18px; }
+    h6 { font-size:16px; }
+    /* ne pas modifier */
+    
+    /* CSS ENTRE CES LIGNES */
+    /* CSS ENTRE CES LIGNES */
+
+    body {
+       
+    }
+
+    /***************** HOME  *****************************/
+
+.home {
+   
+    display: block;
+    height: 90%;
+    
+}
+
+div.homeone {
+    height: 20vh;
+    text-align: center;
+    padding: 3vh;
+    background-color: white;
+    width: 100%;
+    margin: auto;
+}
+    
+.homeone img {
+    position: relative;
+    top: 1vh 0 0 0 ;
+    width: 25%;
+}
+
+.login {
+    color: #EBEBEB;
+    background-color: black;
+    margin: 2vh auto 0 auto;
+    width: 30%;
+    border-radius: 25px;
+    padding: 12px;
+    
+
+}
+
+
+div.hometwo {
+    background-image: url(src/img/chris-ried-79NfyK85Ahc-unsplash.jpg);
+    background-position: center;
+    height: 30vh;
+    text-align: center;
+    padding: 20vh 0;
+    color: white; 
+}
+
+    
+div.hometwo h2 {
+      font-size:300%;
+    }
+div.hometwo h1 {
+        font-size: 450%;
+    }
+    
+div.hometwo h5 {
+        font-size: 150%;
+
+    }
+
+    
+.join {    
+    background-color: #EBEBEB;
+
+    text-align: center;
+     margin: 25vh auto 0 auto;
+    width: 28%;
+    color: black;
+    padding: 12px;
+     border-radius: 25px;
+}
+
+.join:hover {
+        width: 32%;
+    cursor:pointer;
+}
+
+.language {
+    position: absolute;
+    top: 15px;
+    right:15px;
+    
+}
+
+/***************** COOP  *****************************/
+
+.coop {
+    display: block;
+    justify-content:center;
+    background-color:;
+    height: 100vh;
+
+}
+ 
+.one {
+    background-color: black;
+    height: 10vh;
+    padding: 4vh 25vw 0 25vw ;
+    width: 50%;
+    margin: auto;
+}
+
+    .one h5{
+    color: white;
+    padding: 0 7vw;
+}
+
+
+
+.two {
+    height: 100vh;
+    width: 90vw;
+    text-align: left;
+    padding: 5vh 0;
+    
+    
+    
+}
+
+.two p {
+    font-size: 118%;
+    padding: 0 7vw;
+    line-height: 170%;
+    text-align: left;
+    }
+
+/***************** FLOAT LOGO TO ARRANGE***************************/
+
+.one h1{
+    color: white;
+    text-align: left;
+    padding: 0 7vw;
+}
+
+.one img {
+    display: none;
+    position: none;
+    top: 15px;
+    left: 15px;
+    
+}
+
+    /***************** FLOAT LOGO TO ARRANGE***************************/
+/***************** SERVICES  *****************************/
+
+div.services {
+    display: block;
+    justify-content:center;
+    background-color:;
+    height: 100vh;
+
+}
+
+.services .left  {
+    height: 10vh;
+    padding: 4vh 25vw 0 25vw ;
+    width: 50%;
+    margin: auto;
+}
+
+.services .left h5{ 
+    text-align: left;
+      color: black;
+    padding: 0 2vw;
+}
+
+    
+div.services .right {
+    background-color: black;
+    color: white;
+     height: 90vh;
+    text-align: center;
+    padding: 20vh 0 0 0;
+
+}
+
+.menu {
+    padding: 3vw 0;
+
+    display: flex;
+    justify-content: center;
+}
+    
+    .menu h3 {
+        
+        font-size: 400%;
+    }
+
+.menu button {
+    background-color: black;
+    border: none;
+    position: relative;
+    left: 3vw;
+    
+}
+.menu h3:hover {
+    cursor: pointer;
+    font-family: "mazius_displayextra_italic", 'serif';
+    
+}
+
+
+/***************** CLOUD  *************************/
+
+.cloud{ 
+    position:relative;
+    left: 2vh;
+    top: -80vh;
+    width: 75%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 70%;
+    
+    display:none;
+    
+}
+
+
+.cloud .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.cloud i {
+    color: white;
+    font-size: 300%;
+    padding: 3vh;
+}
+
+.cloud p {
+    color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 5vh;
+    font-size: 150%;
+}
+
+.cloud button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** AGORA  *************************/
+
+.agora { 
+    position:relative;
+    left: 2vh;
+    top: -80vh;
+    width: 75%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 70%;
+    
+    display:none;
+}
+
+
+.agora i {
+    color: white;
+    padding: 3vh;
+    font-size: 300%;
+}
+
+.agora .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.agora p {
+      color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 5vh;
+    font-size: 150%;
+    
+}
+
+.agora button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** WIKI  *************************/
+
+.wiki{ 
+   
+    position:relative;
+    left: 2vh;
+    top: -80vh;
+    width: 75%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 70%;
+    
+    display:none;
+    
+}
+
+.wiki i {
+      color: white;
+    font-size: 300%;
+    padding: 3vh;
+}
+
+.wiki .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.wiki p {
+     color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 5vh;
+    font-size: 150%;
+}
+
+.wiki button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** LAB  *************************/
+
+.lab{ 
+    position:relative;
+    left: 2vh;
+    top: -80vh;
+    width: 75%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 70%;
+    
+    display:none;
+}
+
+.lab i {
+       color: white;
+    font-size: 300%;
+    padding: 3vh;
+}
+
+.lab .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+
+.lab p {
+       color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 5vh;
+    font-size: 150%;
+}
+
+.lab button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+
+/***************** + AUX + *************************/
+
+.aux{ 
+    position:relative;
+    left: 2vh;
+    top: -80vh;
+    width: 75%;
+    background-color: black;
+    padding: 5vh;
+    border-radius: 25px;
+    height: 70%;
+    
+    display:none;
+    
+}
+
+.aux i {
+        color: white;
+    font-size: 300%;
+    padding: 3vh;
+}
+
+.aux .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 2vh 0;
+    
+}
+    .aux .header p {
+        margin: 4vh 0 0 0;
+        font-family: 'mazius_displayextra_italic';
+    }
+
+.aux p {
+       color: #D0D0D0;
+    padding: 0 0 5vh 0;
+    line-height: 5vh;
+    font-size: 150%;
+    
+}
+
+.aux button {
+    position: absolute;
+    right: 1vh;
+    bottom: 1vh;
+}
+
+/***************** SUPPORT  *****************************/
+
+.support{
+    display: block;
+    background-color:white;
+    height: 100vh;
+
+}
+
+.support .left  {
+    background-color: black;
+    height: 10vh;
+    padding: 4vh 25vw 0 25vw ;
+    width: 50%;
+    margin: auto;
+}
+
+.support .left h5{
+    text-align: left;
+    padding: 0 0 0 30px ;
+}
+.support .left h1{
+    
+}
+
+.right h4 {
+    color: white;
+    text-align: center;
+    padding: 0 0 3vh 0 ;
+    
+}
+
+div.support .right {
+    
+    align-items: center;
+      
+    
+}
+
+form {
+    height: 70vh;
+    width: 80%;
+    text-align: end;
+    background-color: black;
+    border-radius: 25px;
+    position: relative;
+    right: 2vh;
+    top: 40vh;
+    padding: 5vw;
+    color: white;
+    margin: 0;
+
+
+}
+
+form input{
+    height: 20px;
+    width: 90%;
+    border-radius: 20px;
+    padding: 1vh;
+    margin: ;
+    font-family: "mazius_displayregular";
+    font-size: 100%;
+    
+}
+    
+form textarea{
+    height: 150px;
+    width: 90%;
+    border-radius: 25px;
+    padding: 1vh;
+ 
+    font-family: "mazius_displayregular";
+    font-size: 100%;
+    
+}
+
+
+form label {
+    color: #767676;
+    position: relative;
+    top: 6vw;
+    right: 3vw;
+    font-size: 100%;
+ 
+}
+
+input supportterms {
+    background-color: aqua;
+}
+
+
+/*
+input[type="checkbox"] {
+    border-radius: 50px;
+    width:3vw;
+    height: 3vw;
+    appearance:none;
+    display: inline-block;
+    background-color: white;
+    margin: 10px;
+    display: block;
+    border: 3px grey;
+}
+
+input[type="checkbox"]:hover {
+    background-color:grey;
+    cursor: pointer;
+}
+
+input[type="checkbox"]:active{
+   box-shadow: 0 2px 4px 0 white;
+}
+    
+input[type="checkbox"]:checked{
+    color:black;
+    border: 3px white;
+    
+}
+
+input[type="checkbox"]:checked:after {
+   content:'\25CF';
+    font-size: 10vw;
+    position: relative;
+    
+*/
+div.box {
+    display: flex;
+    margin:1vw;
+}
+
+input[type="checkbox"] {
+ 
+    display: block;
+    margin; 3vw;
+   
+}
+label a {
+    color: #ACA9F8;
+}
+
+label[id='terms']{
+    color: white;
+    position: relative;
+    top: 10px;
+    
+}
+
+input[type='submit']{
+    text-decoration: none;
+    width: 30%;
+    height:7%;
+    font-family: 'candicebold_expanded', 'serif';
+    margin: 2vh 0;
+    font-size: 90%;
+}
+
+/***************** FOOTER  *****************************/
+
+
+
+footer {
+    display: block;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    width: 50%;
+    
+}
+
+footer h6 {
+    width: 15vw;
+      margin: auto;
+    width: 50%;
+    font-size: 300%;
+    padding: 2vh 0 3vh;
+}
+
+footer button {
+    height: 50px;
+    width: 50px;
+    background-color: none;
+    border: none;
+    position: relative;
+    left: 5vh;
+    
+    
+    }
+
+footer i {
+       height: 100%;
+}
+
+footer span {
+    font-size: 100%;
+    text-align: center;
+    padding: 5vh;
+    color:black;
+    display: inline-block;
+    
+
+}
+
+	/* CSS ENTRE CES LIGNES */
+    /* CSS ENTRE CES LIGNES */
+}
+
+
+
+/******************************************************************
+******************************************************************
+CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
+CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
+******************************************************************
+******************************************************************/
+
+
+@media screen and (min-width:681px) and (max-width: 1024px) { 
+    
+    /* CSS ENTRE CES LIGNES */
+    /* CSS ENTRE CES LIGNES */
+
+    body {
+        
+    }
+    
+    
+	/* CSS ENTRE CES LIGNES */
+    /* CSS ENTRE CES LIGNES */
+}
+
+