/* Importation des polices Google */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* Réinitialisation des marges, des rembourrages et des bordures pour tous les éléments */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Styles de base pour le corps de la page */
body {
    width: 1120px; /* Largeur de la page */
    margin: 0 auto; /* Centrage horizontal de la page */
    color: #595959; /* Couleur du texte par défaut */
    font-family: 'Lato', sans-serif; /* Police de caractère principale */
    text-align: justify; /* Mise en page du texte en justifié */
}

/* Classe pour effacer les flottants */
.clear {
    clear: both;
}

/* Styles pour l'en-tête */
header {
    overflow: auto; /* Gérer les flottants à l'intérieur */
    margin-bottom: 20px; /* Marge en bas */
    background-color: #ff6e6e; /* Couleur de fond */
}

/* Styles pour le conteneur du logo */
.logo-container {
    float: left; /* Flottant à gauche */
    margin: 20px 0 0 0; /* Marge en haut */
    position: relative; /* Position relative pour le conteneur */
}

/* Styles pour les liens dans le conteneur du logo */
.logo-container a {
    text-decoration: none; /* Suppression de la décoration de texte */
    position: relative; /* Position relative pour le lien */
    display: inline-block; /* Assurer que le lien englobe les deux éléments correctement */
}

/* Styles pour le logo */
.logo {
    font-size: 60px; /* Taille de la police */
    font-family: 'Great Vibes', cursive; /* Police de caractère spéciale pour le logo */
    margin: 0 0 -34px 0; /* Marge négative pour ajuster la position */
    color: #f7d87d; /* Couleur du logo */
    position: relative; /* Position relative pour respecter le z-index */
    z-index: 1; /* Positionnement en avant */
}

/* Styles pour les éléments span */
span {
    font-size: 57px; /* Taille de la police */
    text-transform: uppercase; /* Transformation du texte en majuscules */
    font-family: 'Oswald', sans-serif; /* Police de caractère */
    color: #000000; /* Couleur du texte */
    position: relative; /* Position relative pour respecter le z-index */
    z-index: 0; /* Positionnement en arrière */
}

/* Styles pour le conteneur de navigation */
.nav-container {
    float: right; /* Flottant à droite */
    padding: 50px 0 0 0; /* Remplissage en haut */
}

/* Styles pour la liste de navigation */
nav ul {
    list-style: none; /* Suppression des puces de liste */
}

/* Styles pour les éléments de la liste de navigation */
nav ul li {
    display: inline; /* Affichage en ligne des éléments */
    margin-right: 20px; /* Marge à droite */
}

/* Suppression de la marge pour le dernier élément de la liste */
nav ul li:last-child {
    margin-right: 0;
}

/* Styles pour les liens de navigation */
nav ul li a {
    color: inherit; /* Héritage de la couleur du texte */
    text-decoration: none; /* Suppression de la décoration de texte */
    transition: color 0.3s ease-in-out; /* Transition douce pour le changement de couleur */
}

/* Changement de couleur des liens de navigation au survol */
nav ul li a:hover {
    color: #f8d38c; /* Couleur au survol */
}

/* Styles pour les titres h1 */
h1 {
    font-size: 28px; /* Taille de la police */
    margin: 0 0 40px 0; /* Marge en bas */
    font-family: 'Oswald', sans-serif; /* Police de caractère */
}

/* Styles pour les titres h2 */
h2 {
    font-size: 25px; /* Taille de la police */
    margin: 0 0 40px 0; /* Marge en bas */
    font-family: 'Oswald', sans-serif; /* Police de caractère */
}

/* Styles pour les titres h3 */
h3 {
    font-size: 22px; /* Taille de la police */
    margin: 0 0 40px 0; /* Marge en bas */
    font-family: 'Oswald', sans-serif; /* Police de caractère */
}

/* Styles pour les titres h4 */
h4 {
    font-size: 18px; /* Taille de la police */
    margin: 0 0 40px 0; /* Marge en bas */
    font-family: 'Oswald', sans-serif; /* Police de caractère */
}

/* Styles pour les paragraphes */
p {
    font-size: 15px; /* Taille de la police */
    font-family: 'Lato', sans-serif; /* Police de caractère */
}

/* Styles pour les lettrines (initiales) */
.drop-cap {
    font-size: 30px; /* Taille de la police */
    float: left; /* Flottant à gauche */
    padding-top: 0; /* Remplissage en haut */
    margin-top: 0; /* Marge en haut */
    padding-right: 5px; /* Remplissage à droite */
    font-weight: bold; /* Texte en gras */
    font-family: "Oswald", sans-serif; /* Police de caractère */
    text-transform: uppercase; /* Transformation en majuscules */
    vertical-align: top; /* Alignement vertical en haut */
}

/* Styles pour les colonnes */
.col {
    float: left; /* Flottant à gauche */
    box-sizing: border-box; /* Inclusion du rembourrage et de la bordure dans la largeur totale */
    min-height: 150px; /* Hauteur minimale */
    margin-right: 20px; /* Marge à droite */
    margin-bottom: 20px; /* Marge en bas */
}

/* Suppression de la marge en bas pour la dernière rangée */
.col.last-row {
    margin-bottom: 0;
}

/* Suppression de la marge à droite pour la dernière colonne */
.col.last {
    margin-right: 0;
}

/* Largeurs spécifiques pour les colonnes */
.col_6_12 {
    width: 550px;
}

.col_4_12 {
    width: 360px;
}

.col_3_12 {
    width: 265px;
}

.col_2_12 {
    width: 170px;
}

.col_1_12 {
    width: 75px;
}

.col_11_12 {
    width: 1025px;
}

.col_10_12 {
    width: 920px;
}

.col_9_12 {
    width: 835px;
}

.col_8_12 {
    width: 740px;
}

.col_7_12 {
    width: 645px;
}

.col_5_12 {
    width: 455px;
}

/* Styles pour les liens colorés */
.blue-link {
    color: #4682B4; /* Couleur bleu */
    text-decoration: none; /* Suppression de la décoration de texte */
    font-weight: bold; /* Texte en gras */
}

.yellow-link {
    color: #FFD700; /* Couleur jaune */
    text-decoration: none; /* Suppression de la décoration de texte */
    font-weight: bold; /* Texte en gras */
}

.red-link {
    color: #CD5C5C; /* Couleur rouge */
    text-decoration: none; /* Suppression de la décoration de texte */
    font-weight: bold; /* Texte en gras */
}

.green-link {
    color: #228B22; /* Couleur verte */
    text-decoration: none; /* Suppression de la décoration de texte */
    font-weight: bold; /* Texte en gras */
}

.black-link {
    color: #000000; /* Couleur noire */
    text-decoration: none; /* Suppression de la décoration de texte */
    font-weight: bold; /* Texte en gras */
}

/* Conteneur centré pour le tableau */
.center-container {
    text-align: center; /* Alignement du contenu au centre */
    margin-top: 20px; /* Marge de 20 pixels en haut pour espacer du contenu précédent */
    color: #000; /* Couleur du texte */
}

/* Styles pour le tableau des couleurs */
.color-table {
    display: inline-block; /* Affichage en tant que bloc inline */
    border-collapse: collapse; /* Effondrement des bordures de cellules */
    margin-left: -100px; /* Marge de -100 pixels à gauche pour centrer le tableau */
    margin-right: auto; /* Marge automatique à droite pour centrer le tableau */
}

/* Styles pour les cellules du tableau */
.color-table th,
.color-table td {
    padding: 8px; /* Remplissage de 8 pixels pour les cellules */
    text-align: center; /* Alignement du texte au centre */
}

/* Alignement du texte à gauche pour la première colonne */
.color-table th:first-child {
    text-align: left;
}

/* Styles pour les cellules du tableau */
.color-table td {
    width: 80px; /* Largeur de 80 pixels pour les cellules */
    height: 80px; /* Hauteur de 80 pixels pour les cellules */
    vertical-align: middle; /* Alignement vertical au centre */
    font-size: 14px; /* Taille de police de 14 pixels */
    font-weight: bold; /* Texte en gras */
}

/* Styles pour le contenu des cellules */
.color-table td span {
    display: inline-block; /* Affichage en tant que bloc inline */
    width: 100%; /* Largeur de 100% pour centrer le contenu */
    text-align: center; /* Alignement du texte au centre */
}

/* Styles pour les couleurs claires */
.light-blue {
    background-color: #afdbe9; /* Couleur de fond bleu clair */
}

.light-yellow {
    background-color: #f7f7cc; /* Couleur de fond jaune clair */
}

.light-red {
    background-color: #ff6e6e; /* Couleur de fond rouge clair */
}

.light-green {
    background-color: #9ef29e; /* Couleur de fond verte claire */
}

/* Styles pour les couleurs moyennes */
.medium-blue {
    background-color: #5084b4; /* Couleur de fond bleu moyen */
}

.medium-yellow {
    background-color: #dfc853; /* Couleur de fond jaune moyen */
}

.medium-red {
    background-color: #ca5f5f; /* Couleur de fond rouge moyen */
}

.medium-green {
    background-color: #2a872a; /* Couleur de fond verte moyenne */
}

/* Styles pour les couleurs foncées */
.dark-blue {
    background-color: #0b0b80; /* Couleur de fond bleu foncé */
}

.dark-yellow {
    background-color: #929201; /* Couleur de fond jaune foncé */
}

.dark-red {
    background-color: #760101; /* Couleur de fond rouge foncé */
}

.dark-green {
    background-color: #004700; /* Couleur de fond verte foncée */
}

/* Styles pour le pied de page */
footer {
    background-color: #ff6e6e; /* Couleur de fond */
    color: white; /* Couleur du texte */
    text-align: center; /* Alignement du texte au centre */
    padding: 20px 0 20px 0; /* Rembourrage en haut et en bas */
    margin-bottom: 15px; /* Marge en bas */
    width: 100%; /* Largeur de 100% */
    bottom: 0; /* Position en bas */
    font-family: "Oswald", sans-serif; /* Police de caractère */
    margin-right: 0; /* Suppression de la marge à droite */
}

/* Styles pour les liens dans le pied de page */
footer a {
    color: white; /* Couleur des liens */
    text-decoration: none; /* Suppression de la décoration de texte */
    font-weight: bold; /* Texte en gras */
}

/* Changement de la décoration des liens au survol dans le pied de page */
footer a:hover {
    text-decoration: underline; /* Soulignement au survol */
}