﻿/* %%% BALISES GLOBALES %%% */

.spartan {
    font-family: Spartan,sans-serif;
}

.fw-800 {
    font-weight: 800;
}

.fw-700 {
    font-weight: 700;
}

.fw-600 {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.fw-400 {
    font-weight: 400;
}

.ls-half {
    letter-spacing: -.5px;
}

.ls-one {
    letter-spacing: -1px;
}

.ls-two {
    letter-spacing: -2px;
}

/* ATTENTION -> h1 est important pour le référencement. Ce code CSS change la mise en forme des sous-titres sur chacune des pages du site (Solutions,Pricing,About,Events,Contact) */

img:not([src]) {
    visibility: hidden;
}

.h1_title_page {
    font-family: 'Spartan', sans-serif;
    color: white;
    font-size: 32px;
    letter-spacing: -0.5px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: 2px 2px 8px darkgray;
}

.h2_subtitle_page {
    font-family: 'Spartan', sans-serif;
    line-height: 24px;
    color: white;
    font-size: 16px;
    letter-spacing: -0.5px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: 2px 2px 8px darkgray;
}

.h1_news_page {
    font-weight: 700;
    font-family: 'Spartan', sans-serif;
    letter-spacing: -0.5px;
    color: #484848;
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 0;
}

.h2_news_content_page {
    font-family: 'Spartan', sans-serif;
    color: black;
    letter-spacing: -0.5px;
    line-height: 28px;
    font-weight: 400;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 0;
}

.mainContent {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-width: 1240px;
    text-align: center;
}

/* Mise en forme de la bannière pour acceptation des cookies */
.topContentCookiesAlert {
    z-index: 15;
    text-align: center;
    padding: 30px;
    font-size: 14px;
    line-height: 20px;
    color: white;
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    width: auto;
    height: auto;
    background-color: gray;
    border-radius: 10px;
    color: white;
}

/* Mise en forme bouton de la bannière des cookies */
.masterBtnCookie {
    border: none;
    font-size: 14px;
    color: #494949;
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px 10px 8px 10px;
    width: auto;
}

    .masterBtnCookie:hover {
        transition: ease .5s;
        cursor: pointer;
        background-color: lightgray;
    }

    /* %%% MENU %%% */

.menu-container {
    width: 100%;
    min-width: 1240px;
    margin: 0 auto;
}

/* %%% BARRE DE CONNEXION AU DESSUS DU MENU %%% */

.master-first-content {
    position: fixed;
    top: 0px;
    float: right;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    text-align: center;
    transition: 0.2s;
    display: grid;
    grid-template-columns: auto max-content max-content max-content;
    grid-template-rows: auto;
    background-color: #606060;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    width: 100%;
    min-width: 1240px;
    z-index: 1001;
}

.first-content-phone {
    font-size: 12px;
    position: relative;
    top: 8px;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}

.first-content-mail {
    font-size: 12px;
    position: relative;
    top: 8px;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
}

.first-content-login {
    padding: 0px 10px;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
}

/* %%% BARRE DE NAVIGATION %%% */

#id_menu_content {
    padding-top: 30px;
    transition: 0.2s;
    /*background-color: #34A4E3;*/
    background-color: transparent;
    font-family: Arial;
    font-size: 14px;
    position: fixed;
    top: 0px;
    width: 100%;
    min-width: 1240px;
    z-index: 1000;
}

.master-menu-content {
    display: grid;
    grid-template-columns: max-content auto max-content;
    grid-template-rows: auto;
}

.menu-logo {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    padding: 0px 5px;
    text-align: left;
}

.img-logo {
    transition: 0.2s;
    height: 35px;
    padding: 15px 0px 10px 25px;
}

.menu-nav {
    padding: 10px 30px;
    text-align: right;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}

/* On laisse la couleur de base lorsque le lien a été visité */
    .menu-nav ul li a {
        background-color: transparent;
        color: white;
        text-align: center;
        font-family: 'Spartan', sans-serif;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -0.5px;
    }

/* On laisse la couleur de base lorsque le lien a été visité */
    .menu-nav li a:visited {
        color: white;
    }

/* On active le changement de couleur au passage de la souris */
    /*.menu-nav li a:hover {
        border-bottom: 3px solid white;
        text-shadow: 0 0 1px white, 0 0 1px white;
        transition: ease 0.2s;
    }*/

    .menu-nav li a:link, positionMenu li a:visited {
        outline-width: 0;
    }

    .menu-nav li a:after{
        content: "";
        display: block;
    }

    .menu-nav li a:after {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0%;
        height: 3px;
        background-color: white;
        transform: translateX( -50% );
        -webkit-transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        -o-transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .menu-nav li a:hover:after {
        width: 100%;
    }

    .menu-language {
        padding: 15px 50px;
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 3;
        grid-column-end: 4;
    }


/* Mise en forme dropdownlist choix language */
.language-ddl {
    margin-left: 5px;
    padding: 5px;
    width: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: gray;
    background-color: whitesmoke;
    border-width: 0px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 10px;
}

/* --- MENU ---*/

/* Mise en forme du menu */

/* Design du menu : on enlève les bullets de la liste*/
.topContentTable ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
/* Éléments de la liste positionnés les uns à côté des autres*/
.topContentTable li {
    float: left;
}

    /* On regroupe les éléments de la liste en un bloc*/
    .topContentTable li a {
        display: block;
        padding: 15px;
        background-color: white;
    }

        /* On désactive le soulignement des liens */
        .topContentTable li a:link {
            text-decoration: none;
            color: white;
        }

/* Propriétés du login */
.loginStyle {
    text-align: right;
    padding-right: 15px;
    font-family: Calibri;
    color: white;
    font-weight: 100;
}


/* Propriétés du login Name */
.loginStyleName {
    text-align: right;
    color: white;
    font-weight: 100;
}

    .loginStyleName a:visited {
        color: #49AAD8;
    }

/* Propriété bouton Login */
.loginButton:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
    margin-right: 10px;
}

.loginButton {
    font-family: 'Spartan', sans-serif;
    font-weight: 500;
    letter-spacing: -0.5px;
    font-size: 12px;
    padding: 12px 20px 8px 20px;
    background-color: #8CC63E;
    color: white;
    border-width: 0px;
    text-decoration: none;
    cursor: pointer;
    margin-right: 40px;
    line-height: 28px;
    position: relative;
}

    /* Propriété bouton Login */
    .loginButton:hover {
        background-color: #7fb535;
    }

.launchappButton {
    font-size: 12px;
    padding: 1px 20px 2px 20px;
    background-color: #3A88AC;
    color: white;
    border-width: 0px;
    text-decoration: none;
    cursor: pointer;
    margin-right: -4px;
    line-height: 28px;
}

    .launchappButton:hover {
        background-color: #337797;
    }

/* Mise en forme du nom d'utilisateur */
.loginNameStyle {
    text-decoration: none;
    font-family: Calibri;
    padding: 10px 10px 0px 10px;
    font-size: 12px;
    color: #49AAD8;
}

/* Mise en forme de l'information pour obtenir les accès si utilisateur non identifié */
.loginInfoStyle {
    color: #49AAD8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 100;
    margin-right: 15px;
}

#LoginView a:visited {
    color: #49AAD8;
}

.loginViewStyle {
    font-family: Calibri;
    font-size: 12px;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    background-color: #8CC63E;
    color: white;
    border-width: 0px;
    text-decoration: none;
}

    .loginViewStyle:hover {
        background-color: #72a331;
    }

    .loginViewStyle:link {
        color: white;
    }

    .loginViewStyle:visited {
        color: white;
    }

/* Mise en forme image de l'utilisateur connecté */
.imgLoginView {
    position: relative;
    top: 5px;
    right: 0px;
    height: 18px;
}
/* Propriété bouton Login passage souris */
/*.loginButton:hover{
    padding:10px;
    border-radius: 10px;
    background-color: #38B1C6;
    color: white;
    cursor:pointer;
}*/

/* --- PRÉ PIED DE PAGE --- */

/* Mise en forme bande avant pied de page */
#subFooter {
    background-color: #302f30;
    height: 40px;
    width: 100%;
    min-width: 1240px;
}

/* Mise en forme du tableau contenant les logos */
.tableSubFooter {
    text-align: center;
    width: 1240px;
    height: 70px;
    padding-top: 7px;
}

    /* Mise en forme de la liste contenant les logos */
    .tableSubFooter ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    /* Éléments de la liste positionnés les uns à côté des autres*/
    .tableSubFooter li {
        padding: 10px;
        display: inline;
    }

/* Mise en forme logos réseaux sociaux */
.socialMedia {
    height: 20px;
    margin-right: 24px;
}

/* --- PIED DE PAGE --- */

/* Mise en forme du pied de page */
#footerContent {
    background-color: #302f30;
    width: 100%;
    min-width: 1240px;
    height: 350px;
}

.homeFooterTable {
    padding-top: 20px;
    padding-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

.homeFooterAboutText {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #A0A0A0;
}

.footerCopyright {
    text-decoration: none;
    color: gray;
}


.footerPrivacy {
    text-decoration: none;
    color: gray;
    margin-right: 40px;
}

.footerTermsOfUse {
    text-decoration: none;
    color: gray;
}

/* Mise en forme lors du survol de Privacy Policy */
.footerPrivacy:hover {
    cursor: pointer;
    color: white;
}

/* Mise en forme lors du survol de Terms Of Use */
.footerTermsOfUse:hover {
    cursor: pointer;
    color: white;
}


.homeFooterButtonMore {
    border: none;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: white;
    text-decoration: underline;
}

    .homeFooterButtonMore:hover {
        cursor: pointer;
        color: #49AAD8;
        transition: ease 0.2s;
    }

/* Copyright */
.tableCopyright {
    background-color: #302f30;
    height: 45px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: gray;
}


/* --- SOUS PIED DE PAGE --- */

#underFooter {
    width: 100%;
    min-width: 1240px;
    background-color: #505050;
    height: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
}


.homeUnderFooterTable {
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
}
