/*******************************************************
                     RESET CSS
********************************************************/
/* Réinitialisation des marges, paddings et de la boîte de modèle pour tous les éléments */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*******************************************************
                     TYPOGRAPHIE
********************************************************/
/* Police de base pour le corps du document */
body {
    font-family: 'Lato', sans-serif;
}

/* Police pour les titres h2 à h6 */
h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase; /* Transforme le texte en majuscules */
}

/* Police "Great Vibes" pour les éléments avec la classe .great-vibes */
.great-vibes {
    font-family: 'Great Vibes', cursive;
}

/* Police "Oswald" pour les éléments avec la classe .oswald */
.oswald {
    font-family: 'Oswald', sans-serif;
}

/*******************************************************
                     GLOBAL
********************************************************/
/* Conteneur global centré avec une largeur fixe */
.global {
    width: 1120px;
    margin: 0 auto; /* Centre horizontalement */
}

/*******************************************************
                     HEADER
********************************************************/
/* Logo */
/* Style du logo avec positionnement relatif pour superposer les éléments */
h1.logo {
    position: relative;
    float: left; /* Flotte à gauche */
}

/* Style du texte "La vie est en" avec police "Great Vibes" */
h1.logo .great-vibes {
    font-family: 'Great Vibes', cursive;
    font-size: 2.3em;
    font-weight: 100;
    color: #e63946; /* Rouge */
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap; /* Empêche le saut de ligne */
    z-index: 1; /* Au-dessus du texte noir */
}

/* Style du texte "Couleurs" avec police "Oswald" */
h1.logo .oswald {
    font-family: 'Oswald', sans-serif;
    font-size: 2em;
    text-transform: uppercase; /* Texte en majuscules */
    color: #000; /* Noir */
    position: absolute;
    top: 55px; /* Ajustement de la position */
    left: 0;
    z-index: 0; /* En dessous du texte rouge */
}

/* Effet de survol pour le texte "Couleurs" */
h1.logo .oswald:hover ,.colors-nav.active{
    background-image: linear-gradient(to left, #43A047, #E53935, #FDD835, #3B5998);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Saut de ligne pour le logo */
.logo br {
    height: 0;
}

/* En-tête avec centrage du texte et un certain padding */
header {
    text-align: center;
    padding: 20px 0;
    height: 60px; /* Hauteur de l'en-tête */
}

/* Navigation */
/* Style de la navigation flottant à droite */
nav {
    float: right;
}

/* Style de la liste non ordonnée des éléments de navigation */
nav ul {
    list-style: none;
    font-size: 1.8em;
}

/* Dernier élément de la liste sans marges à droite */
nav ul :last-child {
    margin-right: 0;
    padding-right: 0;
}

/* Éléments de la liste en ligne avec un espacement à droite */
nav ul li {
    display: inline;
    padding: 0 15px 0 0;
}

/* Liens dans la navigation avec police "Oswald", sans soulignement et couleur grise par défaut */
nav ul li a {
    font-family: 'Oswald';
    text-decoration: none;
    color: #707070;
}

/* Effet de survol sur les liens */
nav ul li a:hover {
    color: #007BFF; /* Bleu */
}

/*******************************************************
                     MAIN
********************************************************/
/* Contenu principal avec un padding */
main {
    padding: 20px 0;
}

/* Section sur les couleurs avec centrage du texte et marge inférieure */
.color-section {
    text-align: center;
    margin-bottom: 20px;
}

/* Titre de la section avec marges supérieure et inférieure et taille de police */
.color-section h2 {
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 28px;
}

/* Styles pour les colonnes et le système de grille */
.row {
    overflow: hidden;
    height: 550px; /* Hauteur fixe pour les rangées */
    margin-bottom: 20px;
}

/* Styles pour les colonnes flottantes */
.col {
    float: left;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}

/* Classes pour définir la largeur des colonnes */
.col_3_12 {
    width: 265px;
    margin-right: 20px;
}

.col_4_12 {
    width: 360px;
    margin-right: 20px;
}

.col_6_12 {
    width: 550px;
    margin-right: 20px;
}

.col_8_12 {
    width: 740px;
    margin-right: 20px;
}

.col_9_12 {
    width: 835px;
    margin-right: 20px;
}

.last_col {
    margin-right: 0; /* Aucune marge à droite pour le dernier élément de la ligne */
}

/* Conteneur d'image avec position relative */
.image-container {
    position: relative;
    max-height: 550px;
}

/* Images dans le conteneur d'image avec largeur de 100% */
.image-container img {
    width: 100%;
    height: 550px; /* Hauteur fixe pour les images */
}

/* Effet de superposition sur les images avec fond semi-transparent */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fond semi-transparent noir */
    color: #fff; /* Texte en blanc */
    opacity: 0; /* Invisible par défaut */
    transition: opacity 0.3s ease-in-out; /* Transition douce de l'opacité */
    padding-top: 230px; /* Espacement en haut */
    padding-bottom: 275px; /* Espacement en bas */
}

/* Style du texte dans l'effet de superposition */
.hover-overlay p {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.5em;
}

/* Affichage de l'effet de superposition lors du survol */
.image-container:hover .hover-overlay {
    opacity: 1; /* Visible au survol */
}

/* Style de la citation avec grande taille de police et police "Great Vibes" */
.quote {
    margin-top: 40px;
    font-size: 35px;
    font-family: 'Great Vibes';
    font-style: normal;
}

/*******************************************************
                     COULEURS
********************************************************/
/* Styles pour les sections de couleurs avec fond et couleur de texte correspondants */
.red {
    background-color: #E53935; /* Rouge */
}

.yellow {
    background-color: #FDD835; /* Jaune */
    color: #000; /* Noir */
}

.green {
    background-color: #43A047; /* Vert */
}

.blue {
    background-color: #3B5998; /* Bleu */
}

.grey {
    background-color: #707070; /* Gris */
}

/* Effets de survol sur les liens de navigation pour les couleurs */
.colors-nav:hover {
    background-image: linear-gradient(to left, #43A047, #E53935, #FDD835, #3B5998);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blue-nav:hover , .blue-nav.active {
    color: #3B5998; /* Bleu */
}

.yellow-nav:hover , .yellow-nav.active {
    color: #FDD835; /* Jaune */
}

.red-nav:hover , .red-nav.active {
    color: #E53935; /* Rouge */
}

.green-nav:hover , .green-nav.active {
    color: #43A047; /* Vert */
}

/* Arrière-plans semi-transparents pour les couleurs */
.over-red {
    background-color: rgba(173, 60, 40, 0.3); /* Rouge semi-transparent */
}

.over-yellow {
    background-color: rgba(82, 70, 6, 0.3); /* Jaune semi-transparent */
}

.over-green {
    background-color: rgba(20, 94, 31, 0.3); /* Vert semi-transparent */
}

.over-blue {
    background-color: rgba(22, 63, 102, 0.3); /* Bleu semi-transparent */
}

/*******************************************************
                     FOOTER
********************************************************/
/* Pied de page avec centrage du texte, fond blanc, bordure supérieure et marge */
footer {
    text-align: center;
    margin: 20px;
    background-color: #fff; /* Fond blanc */
    border-top: 1px solid #ccc; /* Bordure supérieure grise */
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    width: 1120px; /* Largeur fixe */
    max-height: 30px; /* Hauteur maximale */
}

/* Liens dans le pied de page avec police "Lato", sans soulignement, couleur grise par défaut */
footer a {
    font-family: 'Lato';
    text-decoration: none;
    color: #707070; /* Gris */
}

/*******************************************************
                     PAGES COULEURS
********************************************************/

/* Styles spécifiques pour les tuiles d'images */
/* Tailles spécifiques pour différentes tuiles d'images */
.tile-1120 {
    height: 590px; /* Hauteur pour tuile de 1120px */
}

.tile-360 {
    height: 261px; /* Hauteur pour tuile de 360px */
}

.tile-260 {
    height: 265px; /* Hauteur pour tuile de 260px */
}

.tile-835 {
    height: 600px; /* Hauteur pour tuile de 835px */
}

/* Classe pour les tuiles vides */
.empty {
    height: 300px; /* Hauteur pour tuile vide */
}

/* Citation colorée */
/* Styles pour la citation avec largeur de colonne spécifique et police "Great Vibes" */
.color-quote.col_8_12 {
    height: 261px;
    font-size: 35px;
    font-family: 'Great Vibes';
    font-style: normal;
    padding-top: 40px;
}

/*******************************************************
                     TABLEAU
********************************************************/

/* Titre du tableau flottant à gauche avec marges */
.table h2{
    float: left;
    margin-top: 60px;
}

/* Styles pour le tableau avec largeur, centrage du texte, espacement des bordures et couleur du texte */
table {
    width: 100%;
    height: 112px;
    text-align: center;
    border-spacing: 0px;
    color: #ffffff; /* Blanc */
    margin: auto;
}

/* Styles pour les cellules du tableau avec marge inférieure */
table, td {
    margin-bottom: 30px;
}