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

:root {          

    /* COLORS */
    --color-red: #f00;
    --color-green: #1aaf0b; 
    --color-font: #252525;
    --color-title: #000;
    --color-0: #fff;
    --color-1: #000;
    --color-2: #606060;
    --color-3: #858585;
    --color-theme-1: #172744;;
    --color-theme-2: #243e69;

    --color-lululanantelle: #ede24d;
    --color-lanantelle: #e66366;
    --color-amel: #24586d;

    
    

    /* HEADER */
    --header-height: 1rem;
    --header-logo-height : 50px;
    --header-logo-color: #fff;
    --header-border-bottom-color: #172744;
    --header-background-color: #243e69;
    --header-isTop-background-color: #243e69;

    /* FOOTER */
    --footer-bg: #444;
    --footer-color: #fff;
    --footer-color-a: #ddd;
    --footer-color-a-hover: #aaa;


    /* MENU DESKTOP */
    --menu-desktop-color: #fff;
    --menu-desktop-color-active: #fff;
    --menu-desktop-color-hover: #ccc;

    /* MENU MOBILE */
    --menu-mobile-color: #fff;
    --menu-mobile-color-active: #fff;
    --menu-mobile-color-hover: #ccc;

    --menu-mobile-contact-color: #fff;
    --menu-mobile-fa-color: #fff;
    --menu-mobile-fa-go-color: #fff;

    --menu-mobile-fa-rs-color: #fff;

    /* MENU BTN */
    --header-menuBtn-bg: transparent;
    --header-menuBtn-color: #fff;

    /* BODY */
    --font-family-1: 'Poppins', sans-serif;
    --font-size-1: .85rem;

    /* COOKIE */
    --cookie-bg: rgba(20,20,20,0.95);
    --cookie-color: #fff;
    --cookie-a-color: #fff;



}




body {
    margin: 0;
    font-family: var(--font-family-1);
    font-size: var(--font-size-1);    
    color: var(--color-font);
    line-height: 1.5;
    letter-spacing: 0.05rem;
    font-weight: 300;
}

html {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Works on Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: transparent;
}

/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar {
  width: 8px;
    height: 0;
}

::-webkit-scrollbar-track {
  background: #252525;
}

::-webkit-scrollbar-thumb {
    background-color: #444;
    border: 0;
    border-radius: 0.2rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-title);
}

.container {
    margin-top: var(--header-height);
}


.red {
    color: var(--color-red);
}

.green {
    color: var(--color-green);
}


/*------------------ BOUTONS ------------------*/

.btn1 {
    display: inline-flex;
    cursor: pointer;
    background: var( --color-theme-1);
    color: var( --color-0);
    padding: 1rem 1.5rem;
}

.btn1:hover, .btn1:focus {
    background: var( --color-theme-2);
}






/*------------------ FOOTER ------------------*/

#footer {
    position: relative;
    background: var(--footer-bg);
    color: var(--footer-color);
    font-size: .85em;
}

.footerWrapper {
}



#footer .infoslegales {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#footer .infoslegales a {
    color: var(--footer-color-a);
    text-decoration: none;
}

#footer .infoslegales a:hover {
    color: var(--footer-color-a-hover);
}




/*------------------ MARGES ------------------*/

.ctn {
    /*padding-right: 5.3vw;
    padding-left: 5.3vw;
    */
}


@media screen and (min-width: 768px) {

    .ctn {
        padding-right: 7.42vw;
        padding-left: 7.42vw;
    }
    
}

@media screen and (min-width: 961px) {

    .ctn {
        padding-right: 13vw;
        padding-left: 13vw;
    }
    
}

@media only screen and (min-width: 1921px) {

    .ctn {
        margin-right: auto;
        margin-left: auto;
        max-width: 961px;
        padding-right: 0;
        padding-left: 0;
    }

}