/*Font-family : "Oswald", "Lato", "Great Vibes"


/*General style*/

body, h1, h2 {
    margin: 0;                                                     /*Reset des styles par défaut du body et des titres*/
}

.content {
    width: 1120px;                                                 /*Définition de la largeur maximale du contenu de la page*/
    margin: auto;                                                  /*Centrage du contenu de la page*/
}

a {                                                                /*Reset des styles par défaut des liens*/
    text-decoration: none;
    color: #dbd3d3;
}

hr {
    color: #00000066;                                           /*Changement de la transparence des hr*/
    margin: 20px 0;                                               /*Augmentation de l'espacement vertical autour des hr*/
}

nav ul li a:hover, main a:hover, footer a:hover {                 /*Sous-lignage de tous les liens au survol de la souris, excepté le lien du logo*/
    text-decoration: underline;
}

.clear {
    clear: both;                                                   /*Définition de la classe clear, pour permettre de nettoyer les différentes positions, ou les float, et ainsi reprendre un flux classique de page*/
}

/*Header*/

header {
    position: relative;                                           /*Changement de la position du header en relative, comme ça, je peux positionner les enfants en absolu par rapport au header même*/
}

header.main_header {
    background: linear-gradient(to right, #d70808 0%, #d70808 25%,
                                          #ffd801 25%, #ffd801 50%,
                                          #0abc0a 50%, #0abc0a 75%,
                                          #4444e4 75%, #4444e4 100%);   /*Background en gradient pour pouvoir avoir plusieurs couleurs différentes en fond*/
    padding: 25px 0;                                              /*Changement du padding du header, pour étendre un peu le background au delà des éléments enfants*/
}

header.header_red {                                               /*Changement de la couleur du fond pour les header de chaque page, avec leur couleur respective*/
    background-color: #d70808;
    padding: 25px 0;
}

header.header_yellow {
    background-color: #ffd801;
    padding: 25px 0;
}

header.header_green {
    background-color: #0abc0a;
    padding: 25px 0;
}

header.header_blue {
    background-color: #4444e4;
    padding: 25px 0;
}

.logo a {                                                           /*Changement de la couleur du logo (AA correspond à une légère transparence*/
    color: #000000AA;
}

h1 {
    font-family: "Great Vibes", serif;                            /*Changement de police du titre principal*/
    font-size: 50px;                                            
    line-height: 40px;                                            /*Changement de l'espacement entre les lignes et entre les lettres pour que les différentes parties du logo soient bien alignées*/
    letter-spacing: 3px;             
}

h1::first-letter {
    text-transform: capitalize;                                   /*Majuscule uniquement pour la première lettre du titre principal*/
}

h1 span {
    text-transform: uppercase;                                    /*Majuscules sur toute la partie du titre comprise dans une span*/
    font-family: "Oswald", sans-serif;                            /*Changement de police sur la partie du titre dans la span*/
    letter-spacing: 2.5px;                                        /*Augmentation de l'espace entre les lettres pour que les deux parties du logo tombent justes*/
}

nav {
    text-transform: capitalize;                                   /*Majuscule sur les premières lettres de chacun de mes liens*/
}

nav ul {
    list-style: none;                                             /*Désactive le style par défaut de la liste*/
    float: right;                                                 /*Position en float pour que ma navbar se colle à la droite du header*/
    position: relative;                                           /*Initialise la position de la liste en relative par rapport au header pour pouvoir changer la position top de la navbar*/
    top: -85px;                                                   /*Alignement de la navbar sur le titre*/
}

nav ul li {
    display: inline;                                              /*Change la disposition de la liste de block vers inline*/
    margin-left: 60px;                                            /*Change l'espace entre les différents liens*/
}

nav ul li a {
    font-size: 20px;
    font-family: "Oswald", sans-serif;                            /*Changement de police et de couleurs pour les liens de la navbar*/
}

header.header_yellow nav ul li a {                                /*Changement de couleur des liens sur le header avec fond jaune, pour améliorer le contraste*/
    color: #000000
}

/*Main*/

.main_img_page {                                                  /*Ajout d'un margin aux grosses images de mes pages pour éviter que les paragraphes n'y soient collés*/
    margin: 20px 0;
}

h2 {
    font-family: "Oswald", sans-serif;                            /*Changement de la police du h2*/
    font-size: 30px;                                              /*Changement de la taille de police du h2*/
    letter-spacing: 5px;                                          /*Changement de l'espacement entre les lettres du h2*/
    text-align: center;                                           /*Alignement des h2 sur le centre de la page*/
    margin: 20px;                                                 /*Définition d'une marge pour le titre principal de ma page*/
}

h2::first-letter {
    text-transform: capitalize;                                   /*Première lettre du h2 en majuscule*/
}

h3 {
    font-family: "Oswald", sans-serif;                            /*Changement de la police du h3*/
    font-size: 26px;                                              /*Changement de la taille de police du h3*/
    margin: 0 0 20px 0;                                           /*Changement du margin pour qu'il soit équivalent à celui du h2*/
    display: inline-block;                                        /*Pour faire en sorte que mes h3 associés à un lien sur la page index ne soit clicable que sur le titre, et pas sur toute la longueur de la div col*/
    color: #000000;
}

h3::first-letter {
    text-transform: capitalize;                                   /*Première lettre du h3 en majuscule*/
}

p {
    font-family: "Lato", sans-serif;                              /*Changement de police pour les paragraphes*/
}

a.external_link_red {                                             /*Modification du style des liens externes pour chaque page*/
    color: #d70808;
    text-transform: uppercase;
}

a.external_link_yellow {
    color: #ffd801;
    text-transform: uppercase;
}

a.external_link_green {
    color: #0abc0a;
    text-transform: uppercase;
}

a.external_link_blue {
    color: #4444e4;
    text-transform: uppercase;
}

/*Tableau de couleurs*/

table {
    border-collapse: collapse;                                    /*Evite les espacements entre les cellules de mon tableau*/
}

td {
    text-align: center;                                           /*Alignement du texte dans les cellules du tableau au centre*/
    font-family: "Oswald", sans-serif;                            /*Changement de la police du texte dans les cellules*/
    text-transform: uppercase;                                    /*Changement en majuscule des textes dans les cellules du tableau*/
    width: 167px;                                                 /*Définition de la taille des cellules de base pour avoir des carrés*/
    height: 167px;
}

thead td {                          
    height: 70px;                                                 /*Définit la hauteur des cellules composant l'en-tête de mon tableau avec le nom des couleurs le composant*/      
}

.light_red_cell {                                                 /*Définition de la couleur de chacune des cellules du tableau*/
    background-color: #ee7575;
}

.light_yellow_cell {
    background-color: #eded7d;
}

.light_green_cell {
    background-color: #80e780;
}

.light_blue_cell {
    background-color: #8d8df2;
}

.middle_red_cell {
    background-color: #ed1818;
}

.middle_yellow_cell {
    background-color: #e2e209;
}

.middle_green_cell {
    background-color: #2bcd2b;
}

.middle_blue_cell {
    background-color: #3066ef;
}

.dark_red_cell {
    background-color: #9f0404;
}

.dark_yellow_cell {
    background-color: #9c9c0f;
}

.dark_green_cell {
    background-color: #158115;
}

.dark_blue_cell {
    background-color: #223a78;
}

/*Colonnes*/
/*Largeur d'une colonne : 75px Gouttière : 20px*/

.col {
    float: left;                                                  /*Disposition en float des colonnes, pour casser le flux classique de la page et avoir une disposition horizontale des différentes colonnes*/
    margin: 0 20px 0 0;                                           /*Définition de la marge pour avoir la gouttière de 20px après chaque div col*/
}

.col_3_12 {                                                       /*Définition de la largeur de la classe col_3_12*/
    width: 265px;                   
}

.col_4_12 {                                                       /*Définition de la largeur de la classe col_4_12*/
    width: 360px;
}

.col_5_12 {                                                       /*Définition de la largeur de la classe col_5_12*/
    width: 455px;
}

.col_6_12 {                                                       /*Définition de la largeur de la classe col_6_12*/
    width: 550px;
}

.col_7_12 {                                                       /*Définition de la largeur de la classe col_7_12*/
    width: 645px;
}

.col_8_12 {                                                       /*Définition de la largeur de la classe col_8_12*/
    width: 740px;
}

.col_9_12 {                                                       /*Définition de la largeur de la classe col_9_12*/
    width: 835px;
}

.last {                                                           /*Remise à zéro de la marge pour les blocs colonnes en bout de page, pour supprimer la gouttière et donc rentrer dans la limite de width de 1120px*/ 
    margin: 0;
}

/*Footer*/

footer {                                                          /*Définition de la hauteur de tous les footer, indépendamment de leur couleur*/
    height: 50px;
    position: relative;                                           /*Position relative pour pouvoir positionner mes références de bas de page correctement avec une position absolute*/
}

footer p {
    position: absolute;                                           /*Permet de bien centrer mes références*/
    color: #dbd3d3;
    left: 50%;
    transform: translate(-50%, 0);                                /*Permet de bien centrer la ligne, le left 50% générant un décalage si on ajoute pas la translation*/
}

footer p span {                                                   /*Span pour mettre le mot PDF en majuscules*/
    text-transform: uppercase;
}

footer.main_footer {                                              /*Coloration du footer de l'index en dégradé, comme pour le header*/
    background: linear-gradient(to right, #d70808 0%, #d70808 25%,
                                          #ffd801 25%, #ffd801 50%,
                                          #0abc0a 50%, #0abc0a 75%,
                                          #4444e4 75%, #4444e4 100%);
}

footer.main_footer p, footer.main_footer a {                      /*Changement de contraste pour éviter l'illisibilité des références quand elles passent sur la partie jaune du footer*/
    color: #000000;
}

footer.red_footer {                                               /*Changement de la couleur pour les footers de chaque page, en fonction de leur couleur respective*/
    background-color: #d70808;
}

footer.yellow_footer {
    background-color: #ffd801;
}

footer.yellow_footer p, footer.yellow_footer a {                  /*Changement de couleur pour le contraste sur fond jaune*/
    color: #000000;
}

footer.green_footer {
    background-color: #0abc0a;
}

footer.blue_footer {
    background-color: #4444e4;
}