/********** HOME **********/
body {
    background-color: /*#FFFFFF*/ #00a891;
    padding: 0;
    margin: 0;
    color: #00AC8C;  
    font-family: Deberny_Text_Medium;
    font-size: 14pt;
    letter-spacing: 4px;
    text-transform: uppercase;
}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}

@font-face {
    font-family: "Deberny_Text_Medium";
    src: url('fonts/Deberny_Text_Medium.ttf');
}

@font-face {
    font-family: "Deberny_Text_Medium_Italic";
    font-style: italic;
    src: url('fonts/Deberny_Text_Medium_Italic.ttf');
}

em{
    font-family: "Deberny_Text_Medium_Italic";
    font-style: italic;
    src: url('fonts/Deberny_Text_Medium_Italic.ttf');
}

@font-face {
    font-family: "Deberny_Text_Bold";
    font-style: bold;
    src: url('fonts/Deberny_Text_Bold.ttf');
}

strong{
    font-family: "Deberny_Text_Bold";
    font-style: bold;
    src: url('fonts/Deberny_Text_Bold.ttf');
    letter-spacing: 1.5px;
}

a:link { text-decoration: none; color: #00AC8C; }
a:visited { text-decoration: stroke; color: #00AC8C; }
a:hover { text-decoration: underline; color: #00AC8C; }
a:active { text-decoration: none; color: #00AC8C; }

main {
    width:100%;
    height: 100%;
    padding: 0;
    /*border: 1px; border-style: dashed; border-color:#FF0000;*/
    position: absolute;
}

/********** BLOC DE GAUCHE **********/

#blocG {
    background-color: #00a891;
    display: inline-block;
    width: 48%;
    height:100%;
    position: relative;
    text-align:center;
    /*border: 1px; border-style: solid; border-color: yellow;*/
    }

@media (max-width: 1000px){
    #blocG {
        width: 100%;
        height:50%;
        margin-left: 0px;
        margin-right: 0px;
    }
}

#blocG1 {
    display: inline-block;
    text-align:center;
    /*border: 1px; border-style: solid; border-color:#0000FF;*/

    margin-top: 10vh; /* poussé de la moitié de hauteur de viewport */
    transform: translateY(-10%); /* tiré de la moitié de sa propre hauteur */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    }

    @media (max-width: 1000px){
    #blocG1 {
        width: 100%;
        height:25%;
        margin-left: 0px;
        margin-right: 0px;

        margin-top: 10vh; /* poussé de la moitié de hauteur de viewport */
        transform: translateY(-10%);
    }
}

#blocG2 {
    display: inline-block;
    width: 30%;
    text-align:center;
    /*border: 1px; border-style: solid; border-color:#0000FF;*/

    margin-top: 45vh; /* poussé de la moitié de hauteur de viewport */
    transform: translateY(-45%); /* tiré de la moitié de sa propre hauteur */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    }

@media (max-width: 1000px){
    #blocG2 {
        width: 100%;
        height:25%;
        margin-left: 0px;
        margin-right: 0px;

        margin-top: 10vh; /* poussé de la moitié de hauteur de viewport */
        transform: translateY(0); /* tiré de la moitié de sa propre hauteur */
    }
}


/********** BLOC DE DROITE **********/

#blocD {
    background-color: #FFFFFF;
    display: inline-block;
    height:100%;
    position: relative; 
    text-align:center;
    width:49%; 
    float:right;
    /*border: 1px; border-style: solid; border-color: yellow;*/
    }

@media (max-width: 1000px){
    #blocD {
        width: 100%;
        height:50%;
        margin-left: 0px;
        margin-right: 0px;
    }
}

#blocD2 {
    display: inline-block;
    width:48%; 
    text-align:center;
    /*border: 1px; border-style: solid; border-color:#0000FF;*/

    margin-top: 45vh; /* poussé de la moitié de hauteur de viewport */
    transform: translateY(-20%); /* tiré de la moitié de sa propre hauteur */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    }

@media (max-width: 1000px){
    #blocD2 {
        width: 100%;
        height:50%;
        margin-left: 0px;
        margin-right: 0px;

        margin-top: 10vh; /* poussé de la moitié de hauteur de viewport */
        transform: translateY(10%); /* tiré de la moitié de sa propre hauteur */
    }
}


/********** SCROLLBAR **********/
/* scroll behavior on html */
html {
  scroll-behavior: smooth;
}
/* scrollbar styling non-standard version */
html::-webkit-scrollbar {
  width: 2rem;
  background-color: rgba(0,0,0,.15); 
}
html::-webkit-scrollbar-thumb {
    background: #FFFFFF /*#00a891*/; 
}
/* scrollbar styling standard version */
html {
  scrollbar-color: #FFFFFF /*#00a891*/ rgba(0,0,0,.15);
  scrollbar-width: standard;
}