/*FONTES*/
/*VOIR: https://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html
"Dite comme ça, la définition est un peu abrupte. Ce qu'il faut en retenir, c'est qu'en écrivant font-size: Xem on ne demande pas une taille de texte fixe et absolue, mais une taille de texte proportionnelle à la taille de texte de l'élément parent. La valeur demandée, en em, est un coefficient multiplicateur. Concrètement, un paragraphe dont la taille du texte serait 2em aura un texte deux fois plus haut que le texte de l'élément qui contient ce paragraphe."*/
/*Les valeurs exprimées en pourcentages (type <percentage>) ou en em sont proportionnelles à la taille de fonte de l'élément parent que j'ai mis dans body.*/

/*le min-width est inclusif mais le max-width est exclusif*/

.fonte1 {
    font-family: D3Euronism, Agency, Arial, Helvetica, sans-serif;
    font-size: 2.0em;
    letter-spacing: 0.1em;
    word-spacing: 0.8em;
}

@media (max-width:1700px) {
    .fonte1 {
        font-size: 2.0em;
        word-spacing: 0.9em;
    }
}
@media (max-width:1600px) {
    .fonte1 {
        font-size: 2.1em;
        word-spacing: 0.8em;
    }
}
@media (max-width:1500px) {
    .fonte1 {
        font-size: 2.0em;
        word-spacing: 0.8em;
    }
}
@media (max-width:1400px) {
    .fonte1 {
        font-size: 1.8em;
        word-spacing: 0.8em;
    }
}
@media (max-width:1300px) {
    .fonte1 {
        font-size: 1.7em;
        word-spacing: 0.8em;
    }
}
@media (max-width:1200px) {
    .fonte1 {
        font-size: 1.5em;
        word-spacing: 0.8em;
    }
}
@media (max-width:1100px) {
    .fonte1 {
        font-size: 1.5em;
        word-spacing: 0.8em;
    }
}
@media (max-width:1000px) {
    .fonte1 {
        font-size: 1.4em;
        word-spacing: 0.8em;
    }
}
@media (max-width:900px) {
    .fonte1 {
        font-size: 1.2em;
        word-spacing: 0.8em;
    }
}
@media (max-width:800px) {
    .fonte1 {
        font-size: 1.0em;
        word-spacing: 0.8em;
    }
}
@media (max-width:700px) {
    .fonte1 {
        font-size: 0.80em;
        word-spacing: 0.8em;
    }
}
@media (max-width:600px) {
    .fonte1 {
        font-size: 0.75em;
        word-spacing: 0.7em;
    }
}
@media (max-width:500px) {
    .fonte1 {
        font-size: 0.75em;
        word-spacing: 0.5em;
    }
}
@media (max-width:400px) {
    .fonte1 {
        font-size: 0.7em;
        word-spacing: 0.4em;
    }
}

/*FONTE 2*/

.fonte2 {
    font-family: D3Euronism, Agency, Arial, Helvetica, sans-serif;
    font-size: 2.0em;
    letter-spacing: 0.3mm;
    word-spacing: 0.9mm;
    /*color: #fff;*/
}

@media (max-width: 1199px) {
    .fonte2 {
        font-size: 1.8em;
    }
}

@media (max-width: 979px) {
    .fonte2 {
        font-size: 1.6em;
    }
}

@media (max-width: 767px) {
    .fonte2 {
        font-size: 1.6em;
    }
}

@media (max-width: 480px) {
    .fonte2 {
        font-size: 1.6em;
    }
}

/* FONTE3*/

.fonte3 {
    font-family: D3Euronism, Agency, Arial, Helvetica, sans-serif;
    font-size: 50px;
    letter-spacing: 0.3mm;
    word-spacing: 0.9mm;
    /*color: #fff*/
}

@media (max-width: 1199px) {
    .fonte3 {
        font-size: 45px;
    }
}

@media (max-width: 979px) {
    .fonte3 {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .fonte3 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .fonte3 {
        font-size: 32px;
    }
}

/* FONTE4 pour options2*/

.fonte4 {
    font-family: D3Euronism, Agency, Arial, Helvetica, sans-serif;
    font-size: 2.0em;
    letter-spacing: 0.3mm;
    word-spacing: 0.9mm;
    /*color: #fff*/
}

@media (max-width: 1199px) {
    .fonte4 {
        font-size: 1.8em;
    }
}

@media (max-width: 979px) {
    .fonte4 {
        font-size: 1.6em;
    }
}

@media (max-width: 767px) {
    .fonte4 {
        font-size: 1.4em;
    }
}

@media (max-width: 480px) {
    .fonte4 {
        font-size: 1.4em;
    }
}

/* FONTE5*/

.fonte5 {
    /*Arial d'abord*/
    font-family: Arial, Agency, Helvetica, sans-serif;
    /*font-size: 1.8em; */
    font-size: 200%;
    /*L'element parent des fontes est dans body*/
    letter-spacing: 0.3mm;
    word-spacing: 0.9mm;
/*    color: #fff*/
}

/*
@media (min-width:2200px) and (max-width:2400px) {
    .fonte5 {
        font-size: 220%;
        letter-spacing: 0.3mm;
        word-spacing: 6.0mm
    }
}*/

/*
@media (min-width: 1300px) {
    .fonte5 {
        font-size: 1.6em;
    }
}*/

@media (min-width: 2000px) {
    /* and (max-width: 2000px) {*/
    .fonte5 {
        font-size: 2.2em;
    }
}

@media (min-width: 1900px) and (max-width: 2000px) {
    .fonte5 {
        font-size: 2.0em;
    }
}

@media (min-width: 1800px) and (max-width: 1900px) {
    .fonte5 {
        font-size: 2.0em;
    }
}

@media (min-width: 1700px) and (max-width: 1800px) {
    .fonte5 {
        font-size: 1.8em;
    }
}

@media (min-width: 1600px) and (max-width: 1700px) {
    .fonte5 {
        font-size: 1.7em;
    }
}

@media (min-width: 1500px) and (max-width: 1600px) {
    .fonte5 {
        font-size: 1.6em;
    }
}

@media (min-width: 1400px) and (max-width: 1500px) {
    .fonte5 {
        font-size: 1.5em;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    .fonte5 {
        font-size: 1.5em;
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    .fonte5 {
        font-size: 1.5em;
    }
}

@media (min-width: 1100px) and (max-width: 1200px) {
    .fonte5 {
        font-size: 1.4em;
    }
}

@media (min-width: 900px) and (max-width: 1100px) {
    .fonte5 {
        font-size: 1.4em;
    }
}

@media (min-width: 700px) and (max-width: 900px) {
    .fonte5 {
        font-size: 1.3em;
    }
}

@media (min-width: 500px) and (max-width: 700px) {
    .fonte5 {
        font-size: 1.2em;
    }
}

@media (max-width: 500px) {
    .fonte5 {
        font-size: 1.0em;
    }
}

/* FONTE6*/

.fonte6 {
    font-family: Agency, Arial, Helvetica, sans-serif;
    font-size: 3.6em;
    letter-spacing: 0.3mm;
    word-spacing: 0.9mm;
    /*color: #ffffff*/
}

@media (max-width: 1199px) {
    .fonte6 {
        font-size: 3.4em;
    }
}

@media (max-width: 979px) {
    .fonte6 {
        font-size: 3.0em;
    }
}

@media (max-width: 767px) {
    .fonte6 {
        font-size: 2.6em;
    }
}

@media (max-width: 480px) {
    .fonte6 {
        font-size: 2.0em;
    }
}

/*FONTE 7 PIED DE PAGE COPYRIGHT*/
.fonte7 {
	font-family: D3Euronism, Agency, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    word-spacing: 0.8em;
}

@media (max-width: 1199px) {
    .fonte7 {
        font-size: 0.9em;
    }
}

@media (max-width: 979px) {
    .fonte7 {
        font-size: 0.8em;
    }
}

@media (max-width: 767px) {
    .fonte7 {
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    .fonte7 {
        font-size: 0.8em;
    }
}

/*FONTE 8*/

.fonte8 {
    font-family: D3Euronism, Agency, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    letter-spacing: 0.5mm;
    word-spacing: 0.9.mm
}

@media (max-width: 1199px) {
    .fonte8 {
        font-size: 1.2em;
    }
}

@media (max-width: 979px) {
    .fonte8 {
        font-size: -.9em;
    }
}

@media (max-width: 767px) {
    .fonte8 {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .fonte8 {
        font-size: 0.9em;
    }
}

/* FIN DES FONTES*/