@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* Importation des polices Google Fonts */

/* Styles généraux pour réinitialiser les marges et les remplissages par défaut */
html,
body,
div,
header,
#global,
footer,
h1,
h2,
h3 {
	margin: 0;
	padding: 0;
}

/* Liens */
a{
    text-decoration: none;/* Pour enlever le surlignement des lien*/
    color: #000;/* Met la couleur en noir*/
}

/* Style pour la police "Great Vibes" */
.great-vibes-regular {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
}

/* Style pour la police "Oswald" */
.oswald {
    font-family : 'Oswald', sans-serif;
    font-weight : 700;
    font-style : normal;
}

/* Style pour la police "Lato" */
.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Conteneur global */
#global{
    width: 1120px;/* Largeur du contenu*/
    font-size: 0px; /* Pour éviter les espaces blancs entre les éléments en ligne */
    margin: 0 auto; /* Centrer le conteneur */
}

/* Différents arrière-plans en dégradé des pages */
#blue-background{
    background: linear-gradient(to bottom right, #b3e5fc, #4fc3f7, #0288d1, #01579b);/*dégradé page bleu*/
}
#index-background{
    background: linear-gradient(to bottom right, #add8e6, #ffffe0, #ffb6c1, #98fb98);/*dégradé page d'accueil*/
}
#yellow-background{
    background: linear-gradient(to bottom right, #ffffcc, #ffffb3, #ffff99, #ffff80);/*dégradé page jaune*/
}
#red-background{
    background: linear-gradient(to bottom right, #ffcccc, #ff9999, #ff6666, #ff3333);/*dégradé page rouge*/
}
#green-background{
    background: linear-gradient(to bottom right, #ccffcc, #99ff99, #66ff66, #33ff33);/*dégradé page verte*/
}

/* Tailles des titres */
h3{
    font-size: 30px;
}
h2{
    font-size: 44px;
}
h1{
     font-size: 51px;
}

/* Style pour les lignes horizontales */
hr{
    margin: 20px 0px;
}

/* Liens externes avec une couleur spécifique */
.external-link{
    color: #D473D4;
}

/* Styles pour l'en-tête */
.logo{
    margin: 20px 0 0 20px;
}
.logo h2{
    line-height: 10px;/*Ecart entre les ecriture*/
    color: #000;
}
.logo h1{
    position: relative;
    z-index: 25;/*Augmentation du z-index pour afficher l element au dessus des autres*/
    color: #e82c2c;
}

/* Styles pour la navigation */
nav{
   position: relative;
   top: -35px;/*remonte la barre de navigation*/
   left: 500px;/*decale de la gauche la barre de navigation*/
}
nav ul{
    list-style: none;/*Enleve le style de base des ul*/
    margin: 0px;
}
nav ul li{
    display: inline;/*Permet d aligner les liens*/
    padding-left: 30px;/*ecart entre les lien dans la nav*/
    font-size: 30px;
}

/* Effets au survol pour les liens de navigation */
.a-blue:hover{
    color: #01579b;/*Couleur bleu au passage de la souris*/
}
.a-red:hover{
    color: #e82c2c;/*Couleur rouge au passage de la souris*/
}
.a-yellow:hover{
    color: #E3CD8B;/*Couleur jaune au passage de la souris*/
}
.a-green:hover{
    color: #7AA95C;/*Couleur verte au passage de la souris*/
}

/* Classe pour définir une taille de police de 20px */
.font-size-20 {
    font-size: 20px;
}

/* Styles pour les sections */
section h2{
    text-align: center;/*aligne au centre le texte titre des section*/
    margin: 20px  0px;/*Met une margin de 20 px au dessus et en dessous*/
}

/* Conteneur avec une superposition */
.container{
    position: relative;
    width: 100%;
    height: 100%;
}
/*  overlay servant a afficher le texte dans la grande image*/
.overlay{
    position: absolute;
    background-color: rgba(128, 128, 128, 0.8);/*Couleur en background*/
    overflow: hidden;/*n affiche pas ce qui depasse*/
    display: none;/*Permet de ne pas l afficher*/
}
.container:hover .overlay{
    height: 100%;/*Met la longueur a 100% du contenant*/
    bottom: 0;
    display: block;/*Active en visuel les propriete de overlay*/
}

/* Styles pour les colonnes */
.col{
    display: inline-block;
    margin: 0 20px 20px 0;/* margin a gauche et en dessous de 20px*/
}
.col-3-12{
    width: 265px;
}
.col-4-12{
    width: 360px;
}
.col-6-12{
    width: 550px;
}
.col-8-12{
    width: 740px;
}
.col-9-12{
    width: 835px;
}
.last{
    margin: 0px;
}

/* Styles pour les tables */
table{
    width: 1000px;/*largeur du tableau
    height: 880px;/*longueur du tableaux*/
    border-collapse: collapse;/*Permet de coller les differente bordure des case*/
    margin: 0 auto;/* centre le tableau*/
}
thead td{
    height: 80px;/*longeur de l en tete du tableau*/
    background-color: #ffffff;/*Couleur du  background de l en tete du tableau*/
}
td{
    text-align: center;/*centre le texte dans la case*/
    text-transform: uppercase;/*Met le texte en majuscule*/
    width: 200px;/*Tlargeur d une case*/
    height: 200px;/*longueur d une case*/
}

/* Couleurs de fond pour les cellules de table */
.index-1{
    background-color: #add8e6;
}
.index-2{
    background-color: #ffffe0;
}
.index-3{
    background-color: #ffb6c1;
}
.index-4{
    background-color: #98fb98;
}
.blue-1{
    background-color: #b3e5fc;
}
.blue-2{
    background-color: #4fc3f7;
}
.blue-3{
    background-color: #0288d1;
}
.blue-4{
    background-color: #01579b;
}
.yellow-1{
    background-color: #ffffcc;
}
.yellow-2{
    background-color: #ffffb3;
}
.yellow-3{
    background-color: #ffff99;
}
.yellow-4{
    background-color: #ffff80;
}
.red-1{
    background-color: #ffcccc;
}
.red-2{
    background-color: #ff9999;
}
.red-3{
    background-color: #ff6666;
}
.red-4{
    background-color: #ff3333;
}
.green-1{
    background-color: #ccffcc;
}
.green-2{
    background-color: #99ff99;
}
.green-3{
    background-color: #66ff66;
}
.green-4{
    background-color: #33ff33;
}

/* Styles pour le pied de page */
footer{
    background-color: lightgray;/*Couleur de fond du footer*/
    margin: 20px 0;/*margin haut et bas de 20pixel*/
    padding: 10px 0;/*Padding haut et bas de 10pixel*/
    height: 30px;/*Longueur du footer*/
}
footer p{
    display: inline-block;/*Affichage des elements du footer en block en ligne*/
    margin: 0px 35px;/*Ecart gauche et droite entre les elements du footer*/
}