/* =================================================================================================== *\
	© Ylan ROUSSELLE tous droits reservés. Aucune reproduction, même partielle,
	autres que celles prévues à l'article L 122-5 du code de la propriété intellectuelle,
	ne peut être faite de ce site sans l'autorisation expresse de l'auteur.
\* =================================================================================================== */

@font-face { font-family: "JosefinSans-Bold"; src: url("font/josefin/JosefinSans-Bold.ttf"); }
@font-face { font-family: "JosefinSans-BoldItalic"; src: url("font/josefin/JosefinSans-BoldItalic.ttf"); }
@font-face { font-family: "JosefinSans-ExtraLight"; src: url("font/josefin/JosefinSans-ExtraLight.ttf"); }
@font-face { font-family: "JosefinSans-ExtraLightItalic"; src: url("font/josefin/JosefinSans-ExtraLightItalic.ttf"); }
@font-face { font-family: "JosefinSans-Italic-VariableFont_wght"; src: url("font/josefin/JosefinSans-Italic-VariableFont_wght.ttf"); }
@font-face { font-family: "JosefinSans-Italic"; src: url("font/josefin/JosefinSans-Italic.ttf"); }
@font-face { font-family: "JosefinSans-Light"; src: url("font/josefin/JosefinSans-Light.ttf"); }
@font-face { font-family: "JosefinSans-LightItalic"; src: url("font/josefin/JosefinSans-LightItalic.ttf"); }
@font-face { font-family: "JosefinSans-Medium"; src: url("font/josefin/JosefinSans-Medium.ttf"); }
@font-face { font-family: "JosefinSans-MediumItalic"; src: url("font/josefin/JosefinSans-MediumItalic.ttf"); }
@font-face { font-family: "JosefinSans-Regular"; src: url("font/josefin/JosefinSans-Regular.ttf"); }
@font-face { font-family: "JosefinSans-SemiBold"; src: url("font/josefin/JosefinSans-SemiBold.ttf"); }
@font-face { font-family: "JosefinSans-SemiBoldItalic"; src: url("font/josefin/JosefinSans-SemiBoldItalic.ttf"); }
@font-face { font-family: "JosefinSans-Thin"; src: url("font/josefin/JosefinSans-Thin.ttf"); }
@font-face { font-family: "JosefinSans-ThinItalic"; src: url("font/josefin/JosefinSans-ThinItalic.ttf"); }
@font-face { font-family: "JosefinSans-VariableFont_wght"; src: url("font/josefin/JosefinSans-VariableFont_wght.ttf"); }
@font-face { font-family: "Roboto-Black"; src: url("font/roboto/Roboto-Black.ttf"); }
@font-face { font-family: "Roboto-BlackItalic"; src: url("font/roboto/Roboto-BlackItalic.ttf"); }
@font-face { font-family: "Roboto-Bold"; src: url("font/roboto/Roboto-Bold.ttf"); }
@font-face { font-family: "Roboto-BoldItalic"; src: url("font/roboto/Roboto-BoldItalic.ttf"); }
@font-face { font-family: "Roboto-Italic"; src: url("font/roboto/Roboto-Italic.ttf"); }
@font-face { font-family: "Roboto-Light"; src: url("font/roboto/Roboto-Light.ttf"); }
@font-face { font-family: "Roboto-LightItalic"; src: url("font/roboto/Roboto-LightItalic.ttf"); }
@font-face { font-family: "Roboto-Medium"; src: url("font/roboto/Roboto-Medium.ttf"); }
@font-face { font-family: "Roboto-MediumItalic"; src: url("font/roboto/Roboto-MediumItalic.ttf"); }
@font-face { font-family: "Roboto-Regular"; src: url("font/roboto/Roboto-Regular.ttf"); }
@font-face { font-family: "Roboto-Thin"; src: url("font/roboto/Roboto-Thin.ttf"); }
@font-face { font-family: "Roboto-ThinItalic"; src: url("font/roboto/Roboto-ThinItalic.ttf"); }
:root {
    --glabeGreen:     22, 53, 58;    /* #16353A */
    --indigoDye:      20, 69, 104;   /* #144568 */
    --SN1:            33, 89, 146;   /* #215992 */
    --Mulberry:       70, 140, 189;  /* #468CBD */
    --moderateBlue:   86, 164, 205;  /* #56A4CD */ 
    --SN2:            130, 197, 159; /* #82C59F */
    --relaxationGreen:166, 209, 160; /* #A6D1A0 */
    --coconut:        253, 253, 253; /* #FDFDFD */
}

body, html {
    margin: 0;
    padding: 45px 0 0 0;
    overflow-x: hidden;
    font-family: "Roboto-Regular", Arial, sans-serif;
    background-color: rgb(var(--coconut));
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v126/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

@font-face {
    font-family: 'JosefinSans-SemiBold';
    src: url('font/josefin/JosefinSans-SemiBold.ttf');
}

* {
    box-sizing: border-box;
}

h1, h2, h3 {
    font-family: "JosefinSans-SemiBold";
}

.txtwhite{
    color:white;
}

.txtblack{
    color:#343434;
}

.h1V1{
    position: relative;
    z-index: 2;
    color:white;
    text-decoration: underline 4px rgb(var(--relaxationGreen)); 
    line-height: 1.5;
    text-underline-offset: 7px;
    font-size:3.183023872679045vh;
    /* white-space: nowrap; */
    text-transform: uppercase;
}

.h1V2{
    position: relative;
    z-index: 2;
    color:black;
    text-decoration: underline 4px rgb(var(--relaxationGreen)); 
    line-height: 1.5;
    text-underline-offset: 7px;
    font-size:3.183023872679045vh;
    /* white-space: nowrap; */
    text-transform: uppercase;
}


.h2V1{
    position: relative;
    z-index: 2;
    color:black;
    text-decoration: underline 4px rgb(var(--relaxationGreen)); 
    line-height: 1.5;
    text-underline-offset: 7px;
    font-size:2.5198vh;
    /* white-space: nowrap; */
    text-transform: uppercase;
}

.h2V2{
    position: relative;
    z-index: 2;
    color:black;
    text-decoration: underline 4px rgb(var(--coconut)); 
    line-height: 1.5;
    text-underline-offset: 7px;
    font-size:2.5198vh;
    /* white-space: nowrap; */
    text-transform: uppercase;
}



/* ___ HEADER ___ */

header {
    user-select: none;
    position: fixed;
    top: 0;
    z-index: 10000;

    width: 100%;
    height: 90px;
    
    background-color: rgba(var(--glabeGreen), 0.7);
    color: rgb(var(--coconut));

    
    font-family: JoseFinSans-SemiBold;
}

nav {
    line-height: 80px;
    text-align: center;
    position: relative;
    right: 0;
    padding: 0 15px 0 0;
}

a>img {
    height: 45px;
    float: left;
    margin: 22.50px 0px 22.50px 30px;
}

.naviguation{
    pointer-events:none;
}

.naviguation>*{
    pointer-events: auto;
}

nav a, div.deroulant > span {
    font-size: 18px;
    text-transform: uppercase;

    color: rgb(var(--coconut));
    text-decoration: none;
    margin: 0 21px 0 0;

    border-bottom: 5px solid rgba(var(--coconut), 0);
    transition-duration: 0.1s;
    
}
 nav a:hover {
    /* text-decoration: underline; */
    border-bottom: 5px solid rgb(var(--coconut));
 }

 nav a:visited {
    color: rgb(var(--coconut));
 }

 nav a#active {
    border-bottom: 5px solid rgb(var(--SN2));
 }

/* === déroulant === */

div.deroulant {
    display: inline;
}

div.deroulant > div {

    transform: translateX(-100%);

    background-color: rgba(var(--indigoDye), 0.8);
    display: inline;

    position: absolute;
    top: 90px;
}

div.deroulant > span::after {
    font-family: "Material Icons";
    font-size: 1.3em;
    position: relative;
    top: 5px;
}

div.deroulant > span::after {
    content: "\e315 ";
}

div.deroulant > span.activate::after {
    content: "\e313 ";
}

div.deroulant > div ul {
    padding: 0;
    margin: 0;
}

div.deroulant > div ul li {
    line-height: 30px;
    display: block;
    word-wrap: break-word;
    padding: 10px;

    text-transform: uppercase;
    text-align: left;
}





/* ___ FOOTER ___ */

footer {
    background-color: rgba(var(--glabeGreen), 0.7);
    color: rgb(var(--coconut));
    padding: 10px;
    /* max-height: calc(67vh - 80px);
    min-height: calc(415px);*/
    position:relative;
    bottom:0;
    z-index:5;
    
}

footer > p {
    margin: 40px 0 40px 0;
    text-align: center;
}

footer div.flex {
    display: flex;
    flex-wrap: wrap;
}

footer div.flex div {
    flex: 1 1 33%;
    padding: 10px 10px 0 10px;
    max-height: calc(50vh);
}

footer div.flex div:nth-child(2),footer div.flex div:nth-child(3) {
    padding-top: 5%;
}

.footnav{
    padding-top: 45px;
}

footer div.flex div > h3  {
    text-transform: uppercase;
    margin: 19px auto 0 0px;
    border-bottom: 5px solid rgb(var(--moderateBlue));
    display: inline-block;
    
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

footer div.flex div > a, footer div.flex div > p a {
    color: rgb(var(--coconut));
    text-decoration: none;
}

footer div.flex div > a h4 {
    text-transform: uppercase;
    text-align: center;
}

footer div.flex div > a[target=_blank] h4::after {
    font-family: 'Material Icons';
    content: " \E895";
    position: relative;
    top: 2px;
    color: lightgray;

}

footer div.flex div img {
    width: 55%;
    height: auto;
    margin: auto 33% auto -5%;
    margin-left:8%;
    margin-top:8%;
    margin-bottom:3%;

    
}

footer div.flex div p {
    margin-left:8%;
    
    
}

footer div.flex div p img{
    width: 25px;
    float: left;
    margin: 0 0 0 -5px;
    
}

@media only screen AND (max-width: 1030px) {
    body, html {
        margin: 0;
        padding: 35px 0 0 0;
        overflow-x: hidden;
        font-family: "Roboto-Regular", Arial, sans-serif;
        background-color: rgb(var(--coconut));
    
    }

    /* ========= MENU ET NAV ============ */
    
    header {
        position: fixed;
    
        height: 70px;
        background-color: rgba(var(--glabeGreen), 0.7);
    }
    
    
    a>img {
        height: 50%;
        margin: 10px;
        margin-top:20px;
    }
    
    nav {
        background-color: rgb(var(--glabeGreen));
        position: fixed;
        bottom: 0;
        left: 100%;
        width: 100%;
        height: calc(100% - 70px);

        transition: left 0.3s ease-out;
        left: 101%;
    }
    nav > a {
        display: block;
        margin: 0;
        
    }
     nav > a:hover {
        border-bottom: 5px solid rgba(var(--coconut), 0);
    }
    
    nav > a:visited {
        color: rgb(var(--coconut));
    }
    
    nav > a#active {
        border-bottom: none;
    }

    header nav.show {
        left: 0;
    }

    /* ========== menu hamburger ===== */

    div#menu {
        position: fixed;
        top: 0px;
        right: 0px;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 10px 10px 10px auto;
    }

    div#menu span{
        border-top: 5px solid rgb(var(--coconut));
        border-bottom: 5px solid rgb(var(--coconut));
        border-radius: 5px;
        display: block;
        position: relative;
        background-color: rgb(var(--coconut));
        transition-duration: 0.3s;
    }

    div#menu span:nth-child(1) {
        top: 0%;
        transform: translateY(0%);
    }

    div#menu span:nth-child(2) {
        top: calc(50% - 10px);
        transform: translateY(-50%);
    }

    
    div#menu span:nth-child(3) {
        top: calc(100% - 10px);
        transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -o-transform: translateY(-200%);
}
    
    /* === menu activate === */
    div#menu.activate span:nth-child(1) {
        top: 17%;
        transform: rotate(30deg);
    }

    div#menu.activate span:nth-child(2) {
        border-top: 0px solid rgb(var(--coconut));
        border-bottom: 0px solid rgb(var(--coconut));
    }

    div#menu.activate span:nth-child(3) {
        top: calc(62% - 10px);
        transform: rotate(-30deg);
    }

    /* === menu déroulant === */ 

    div.deroulant > div {

        transform: translateX(0%);
    }

     /* === déroulant === */


     div.deroulant > div {

        background-color: rgb(var(--glabeGreen));
        display: block;

        position: static;
    }
    div.deroulant > div ul li {
        text-align: center;
    }



    /* === nav === */
    footer div.flex div:nth-child(2) {
        display:none;
      }

    

}

@media only screen AND (max-width: 400px) {

    footer div.flex div:nth-child(3) {
        display:none;
    }

    footer div.flex div img {

        margin-left:22.5%;
 
    }

}