/* Design-systeme - mobile first */



/* Style général - optmisation */

* {
    box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, a, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--couleur-black);
    background-color: var(--couleur-white);
}

ul, ol, li {
    list-style-type: none;
}



/********** Style textuel ***GENERAL*** pour ***TELEPHONE***, supérieur ou égal à 320px **********/
/* Titres */
h1 {
    font-weight: 700;
    font-size: 36px;
    line-height: 54px;
}
h2 {
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
}
h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}
/* Sous-titres - PHONE */
.st {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
/* Paragraphes - PHONE */
p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
/* Liens - PHONE */
a {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-decoration-line: underline;
    color: var(--couleur-primary-50);
}
/* Icons - PHONE */
.icon {
    width: 64px;
    height: auto;
}

/********** Style textuel pour ***TABLETTE***, supérieur ou égal à 768px **********/
@media screen and (min-width: 768px) {
    /* Titres */
    h1 {
        font-size: 48px;
        line-height: 72px;
    }
    h2 {
        font-size: 40px;
        line-height: 60px;
    }
    h3 {
        font-size: 32px;
        line-height: 48px;
    }
    /* Sous-titres */
    .st {
        font-size: 24px;
        line-height: 36px;
    }
    /* Paragraphes */
    p {
        font-size: 16px;
        line-height: 24px;
    }
    /* Liens */
    a {
        font-size: 16px;
        line-height: 24px;
        text-decoration-line: underline;
    }
}

/********** Style textuel pour ***ORDINATEUR PORTABLE***, supérieur ou égal à 1024px **********/
@media screen and (min-width: 1024px) {
    /* Titres */
    h1 {
        font-size: 60px;
        line-height: 90px;
    }
    h2 {
        font-size: 48px;
        line-height: 72px;
    }
    h3 {
        font-size: 40px;
        line-height: 60px;
    }
    /* Sous-titres */
    .st {
        font-size: 30px;
        line-height: 45px;
    }
    /* Paragraphes */
    p {
        font-size: 20px;
        line-height: 30px;
    }
    /* Liens */
    a {
        font-size: 20px;
        line-height: 30px;
        text-decoration-line: underline;
    }
}

/********** Style textuel pour ***ORDINATEUR FIXE***, supérieur ou égal à 1440px **********/
@media screen and (min-width: 1440px) {
    /* Titres */
    h1 {
        font-size: 72px;
        line-height: 108px;
    }
    h2 {
        font-size: 60px;
        line-height: 90px;
    }
    h3 {
        font-size: 48px;
        line-height: 72px;
    }
    /* Sous-titres */
    .st {
        font-size: 30px;
        line-height: 45px;
    }
    /* Paragraphes */
    p {
        font-size: 20px;
        line-height: 30px;
    }
    /* Liens */
    a {
        font-size: 20px;
        line-height: 30px;
        text-decoration-line: underline;
    }
}



/* Les images */
img {
    display: block;
}



/********** VARIABLES CSS - couleurs et box-shadows **********/
:root {
    /* Couleurs */
    --couleur-black: #000000;
    --couleur-white: #FFFFFF;

    --couleur-primary-10: #000933;
    --couleur-primary-50: #0028FF;
    --couleur-primary-90: #CCD4FF;

    --couleur-grey-10: #1A1A1A;
    --couleur-grey-20: #333333;
    --couleur-grey-30: #4D4D4D;
    --couleur-grey-40: #666666;
    --couleur-grey-50: #808080;
    --couleur-grey-60: #999999;
    --couleur-grey-70: #B3B3B3;
    --couleur-grey-80: #CCCCCC;
    --couleur-grey-90: #E6E6E6;

    /* Box-shadows */
    --shadow-nav-bar: 0px 4px 8px rgba(0, 0, 0, 0.16);
}