/* Définition des différentes polices */
/*font-family: 'Great Vibes', cursive;
  font-family: 'Lato', sans-serif;
  font-family: 'Oswald', sans-serif;*/

/**********
   FONT
**********/

/* Styles généraux pour le corps du document */
body {
    background-image: url("./images/index/wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Classe pour un fond rouge */
.red-background {
    background-image: url("./images/red/wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Classe pour un fond bleu */
.blue-background {
    background-image: url("./images/blue/wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Classe pour un fond jaune */
.yellow-background {
    background-image: url("./images/yellow/wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Classe pour un fond vert */
.green-background {
    background-image: url("./images/green/wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Classe pour une superposition (overlay) */
.overlay {
    /* Styles pour le fond semi-transparent */
    /* From https://css.glass */
    background: rgba(136, 130, 130, 0.4);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(103, 96, 96, 0.1);
    backdrop-filter: blur(8.8px);
    -webkit-backdrop-filter: blur(8.8px);
    padding-bottom: 5px;
    width: 1120px;
    margin: 0 auto;
}

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

/* Classe avec la police "Lato" */
.lato {
    font-family: 'Lato', sans-serif;
}

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

/**********
  GENERAL
**********/

/* Classe pour le nettoyage des flottants */
.clear {
    clear: both;
}

/* Classe pour un séparateur avec une bordure inférieure */
.separator {
    border-bottom: 1px solid #000000;
    margin: 20px 0;
}

/* Styles pour les éléments h1, h2 et h3 */
h1, h2, h3 {
    margin: 0;
    padding: 0;
}

/* Styles pour l'élément main */
main {
    width: 1120px;
    margin: 0 auto !important;
}

/* Classe pour mettre le texte en majuscules */
.uppercase {
    text-transform: uppercase;
}

/***********
   HEADER
***********/

/* Styles pour l'en-tête */
header {
    margin-bottom: 20px;
    position: relative;
    /* Couleur de fond */
}

/* Styles pour le titre principal de l'en-tête */
header h1 {
    z-index: auto;
    position: relative;
    font-size: 69px;
    color: #95aab4;
    padding-top: 20px;
}

/* Styles pour les liens dans le titre principal de l'en-tête */
header h1 a {
    color: #116e6e;
}

/* Styles pour le sous-titre de l'en-tête */
header h2 {
    font-size: 63px;
    margin-top: -39px;
    text-transform: uppercase;
}

/* Styles pour les liens dans le sous-titre de l'en-tête */
header h2 a {
    font-weight: 700 !important;
    color: #941515;
}

/**********
    NAV
**********/

/* Styles pour les liens */
a {
    text-decoration: none;
    font-weight: 300;
}

/* Styles pour le lien actuel dans la navigation */
.current a {
    font-size: 27px;
    font-weight: 700;
}

/* Styles pour les éléments de liste dans la navigation */
header nav ul li {
    font-size: 23px;
}

/* Styles pour la navigation */
nav {
    position: absolute;
    right: 151px;
    top: 48px;
    font-weight: 700;
}

/* Styles pour les listes à puces */
ul {
    list-style: none;
}

/* Styles pour les éléments de liste dans la navigation */
nav ul li {
    display: inline;
    padding-left: 30px;
}

/* Styles pour les liens dans la navigation */
nav ul li a {
    color: #03ffec;
}

/************
   SECTION
************/

/* Styles pour les sections */
section {
    margin-top: 0;
}

/* Styles pour les titres de section */
section h2 {
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
}

/* Styles pour les titres de niveau 3 */
h3 {
    font-size: 36px;
    text-align: center;
    /* Permet de centrer le texte */
    margin: 20px 0 10px;
}

/* Styles pour la description de titre */
.title-description {
    font-size: 20px;
    text-align: center;
    line-height: 140%;
    margin-bottom: 20px;
}

/* Styles pour un texte avec un lien */
.text-with-link {
    text-align: center;
    margin-top: 20px;
    font-size: 25px;
}

/* Styles pour les liens dans un texte avec lien */
.text-with-link a {
    color: #0000FF;
}

/* Styles pour un texte explicatif */
.explanatory-text {

}

/* Styles pour les paragraphes dans un texte explicatif */
.explanatory-text p {
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
    font-size: 18px;
    color: #000000;
}

/* Styles pour les images dans un texte explicatif */
.explanatory-text img {
    border-radius: 20px;
}

/* Styles pour le conteneur du tableau */
.center-container p {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

/* Styles pour le conteneur centré */
.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 */
}

/* 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 en-têtes de colonnes et les cellules du tableau des couleurs */
.color-table th,
.color-table td {
    padding: 8px; /* Remplissage de 8 pixels pour les cellules */
    text-align: center; /* Alignement du texte au centre */
}

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

/* Styles pour les cellules du tableau des couleurs */
.color-table td {
    width: 60px; /* Largeur de 60 pixels pour les cellules */
    height: 60px; /* Hauteur de 60 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 centré dans les cellules du tableau des couleurs */
.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 */
}

/**********
  FOOTER
**********/

/* Styles pour le pied de page */
footer {
    text-align: center;
    font-size: 20px;
    text-decoration: none;
}

/* Styles pour les liens dans le pied de page */
footer a {
    color: #000000;
    text-decoration: none;
    font-weight: 700;
}

/***********
   COLUMN
***********/

/* Styles pour les colonnes */
.col {
    float: left;
    margin-right: 20px;
    margin-bottom: 16px;
}

/* Styles pour la dernière colonne */
.last {
    margin-right: 0 !important;
}

/* Styles pour les colonnes avec différentes largeurs */

.col-1-12 {
    width: 75px;
}

.col-2-12 {
    width: 170px;
}

.col-3-12 {
    width: 265px;
}

.col-4-12 {
    width: 360px;
}

.col-5-12 {
    width: 455px;
}

.col-6-12 {
    width: 550px;
}

.col-7-12 {
    width: 645px;
}

.col-8-12 {
    width: 740px;
}

.col-9-12 {
    width: 835px;
}

.col-10-12 {
    width: 930px;
}

.col-11-12 {
    width: 1025px;
}

.col-12-12 {
    width: 1120px;
}

/**********
   COLOR
**********/

/* Styles pour les couleurs dans la navigation */
.navblue {
    color: #0000FF;
}

.navgreen {
    color: #7FFF00;
}

.navyellow {
    color: #FFFF00;
}

.navred {
    color: #FF2400;
}

/* Styles pour les couleurs profondes */
.deep-blue {
    color: #000080;
}

.deep-red {
    color: #8B0000;
}

.deep-yellow {
    color: #FFD700;
}

.deep-green {
    color: #006400;
}

/*********************
   COLOR du tableau
**********************/

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

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

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

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

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

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

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

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

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

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

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

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