/* Le conteneur global */
#global {
    width: 1120px;
    margin: 40px auto 0;
}


/* styles pour certain lien hypertexte */
a {
    text-decoration: none;
    color: rgb(3, 186, 247);
}

a:hover {
    color: orange;
}

.current a {
    color: #09b097;
}

.clear {
    clear: both;
}

.separator {
    height: 16px;
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

/* Styles pour les titres */
h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
}

/* Styles pour l'en-tête */
header {
    position: relative;
    background-image: linear-gradient(to right, rgb(3, 78, 98), rgb(5, 183, 233)); /* Effet de dégradé */
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-bottom: 10px;
}

header h1 a, header h2 a {
    cursor: pointer;
    color: goldenrod;
}

header h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 60px;
    margin: 0 0 -35px 0;
    font-weight: 300;
}

header h2 {
    text-transform: uppercase;
    font-size: 55px;
    margin: 0 0 15px 0;
}

/* Styles pour la barre de navigation */
nav ul {
    list-style: none;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    position: absolute;
    top: 30px;
    bottom: 0px;
    right: 70px;
}

nav ul li {
    display: inline;
    margin: 25px;
}

/* Styles pour les liens de la barre de navigation */
ul li:nth-child(1) a {
    color: rgb(211, 211, 211); /* Couleur pour le premier lien */
}

ul li:nth-child(1).active a {
    color: rgb(173, 173, 173); /* Couleur pour le premier lien actif */
}

ul li:nth-child(1) a:hover {
    color: rgb(50, 50, 50); /* Couleur au survol du premier lien */
}

ul li:nth-child(2) a {
    color: rgb(173, 216, 230); /* Couleur pour le deuxième lien */
}

ul li:nth-child(2).active a {
    color: rgb(74, 74, 164); /* Couleur pour le deuxième lien actif */
}

ul li:nth-child(2) a:hover {
    color: rgb(0, 0, 128); /* Couleur au survol du deuxième lien */
}

ul li:nth-child(3) a {
    color: rgb(255, 255, 165); /* Couleur pour le troisième lien */
}

ul li:nth-child(3).active a {
    color: rgb(255, 215, 0); /* Couleur pour le troisième lien actif */
}

ul li:nth-child(3) a:hover {
    color: rgb(204, 204, 0); /* Couleur au survol du troisième lien */
}

ul li:nth-child(4) a {
    color: rgb(255, 102, 102); /* Couleur pour le quatrième lien */
}

ul li:nth-child(4).active a {
    color: rgb(205, 92, 92); /* Couleur pour le quatrième lien actif */
}

ul li:nth-child(4) a:hover {
    color: rgb(139, 0, 0); /* Couleur au survol du quatrième lien */
}

ul li:nth-child(5) a {
    color: rgb(144, 238, 144); /* Couleur pour le cinquième lien */
}

ul li:nth-child(5).active a {
    color: rgb(34, 139, 34); /* Couleur pour le cinquième lien actif */
}

ul li:nth-child(5) a:hover {
    color: rgb(0, 100, 0); /* Couleur au survol du cinquième lien */
}

/* Styles pour les conteneurs */
.container {
    position: relative; /* Position relative pour les éléments enfants absolus */
    width: 50%; /* Largeur de 50% du conteneur parent */
}

.container a {
    text-decoration: none; /* Pas de soulignement pour les liens */
    color: coral; /* Couleur du texte pour les liens */
    font-weight: bold; /* Texte en gras pour les liens */
}

.container a:hover {
    color: orangered; /* Couleur du texte au survol des liens */
}

.overlay {
    position: absolute; /* Position absolue pour la superposition */
    top: 0; /* Position en haut */
    bottom: 0; /* Position en bas */
    left: 0; /* Position à gauche */
    right: 0; /* Position à droite */
    height: 99%; /* Hauteur de 99% du conteneur parent */
    width: 100%; /* Largeur de 100% du conteneur parent */
    opacity: 0; /* Opacité initiale de 0 (invisible) */
    transition: 0.3s ease; /* Transition de 0.3 seconde avec une fonction d'accélération */
    background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond semi-transparente */
}

.container:hover .overlay {
    opacity: 1; /* Opacité de 1 (visible) au survol du conteneur */
}

.text {
    color: white; /* Couleur du texte */
    font-size: 20px; /* Taille de police de 20 pixels */
    position: absolute; /* Position absolue pour centrer le texte */
    top: 50%; /* Position au milieu verticalement */
    left: 50%; /* Position au milieu horizontalement */
    transform: translate(-50%, -50%); /* Décalage de -50% en X et en Y pour centrer le texte */
    transform: translate(-50%, -50%); /* Pour une compatibilité avec Internet Explorer */
}

.text a {
    color: white; /* Couleur du texte pour les liens */
    text-decoration: none; /* Pas de soulignement pour les liens */
    cursor: pointer; /* Curseur de type pointeur pour les liens */
}

/* Styles pour les colonnes */
.col {
    float: left; /* Flottant à gauche pour créer des colonnes */
    margin-right: 20px; /* Marge de 20 pixels à droite pour espacer les colonnes */
}

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

.col-3-12 {
    width: 265px; /* Largeur de la colonne correspondant à 3/12 */
}

.col-4-12 {
    width: 360px; /* Largeur de la colonne correspondant à 4/12 */
}

.col-6-12 {
    width: 550px; /* Largeur de la colonne correspondant à 6/12 */
}

.col-8-12 {
    width: 733.33px; /* Largeur de la colonne correspondant à 8/12 */
}

.col-9-12 {
    width: 825px; /* Largeur de la colonne correspondant à 9/12 */
}

/* Styles pour la ligne horizontale */

.hr-lines {
    position: relative; /* Position relative pour contenir les éléments :before et :after */
    display: flex; /* Affichage en tant que flexbox */
    justify-content: center; /* Centrer horizontalement les éléments enfants */
    align-items: center; /* Centrer verticalement les éléments enfants */
    text-align: center; /* Alignement du texte au centre */
}

.hr-lines:before, .hr-lines:after {
    content: " "; /* Contenu vide pour les pseudos-éléments */
    display: block; /* Affichage en tant que bloc */
    height: 2px; /* Hauteur de 2 pixels pour la ligne */
    width: 280px; /* Largeur de 280 pixels pour la ligne */
    position: absolute; /* Position absolue pour les lignes */
    top: 50%; /* Position au milieu verticalement */
    background: #73582f; /* Couleur de fond pour les lignes */
}

.hr-lines:before {
    left: 0; /* Position à gauche pour la première ligne */
}

.hr-lines:after {
    right: 0; /* Position à droite pour la deuxième ligne */
}

/*Lettrine*/

.dropcap {
    font-family: 'Oswald', sans-serif; /* Police de caractères Oswald */
    font-size: 30px; /* Taille de police de 30 pixels */
    font-weight: 300; /* Épaisseur de police normale */
    font-variant: small-caps; /* En petites majuscules */
    float: left; /* Flottant à gauche pour la première lettre */
    margin-bottom: -10px; /* Marge négative de 10 pixels en bas pour décaler la lettre */
    margin-top: -10px; /* Marge négative de 10 pixels en haut pour décaler la lettre */
    margin-right: 10px; /* Marge de 10 pixels à droite pour espacer la lettre */
}

.blue {
    color: blue; /* Couleur bleue */
}

.yellow {
    color: rgb(255, 213, 0); /* Couleur jaune */
}

.red {
    color: red; /* Couleur rouge */
}

.green {
    color: green; /* Couleur verte */
}

/* container 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 */
}

/* 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 */
}

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

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

.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 */
}

.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 */
.blue-light {
    background-color: #A9D8E6; /* Couleur de fond bleu clair */
}

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

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

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

/* 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: #000080; /* Couleur de fond bleu foncé */
}

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

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

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

/* styles pour le contenu du footer */

.informations {
    text-align: center; /* Alignement du contenu au centre */
    background-color: rgb(3, 87, 134); /* Couleur de fond */
    color: #119ea3; /* Couleur du texte */
    margin-top: 15px; /* Marge de 15 pixels en haut pour espacer du contenu précédent */
    margin-bottom: 25px; /* Marge de 25 pixels en bas pour espacer du contenu suivant */
    padding-top: 6px; /* Remplissage de 6 pixels en haut */
    padding-bottom: 2px; /* Remplissage de 2 pixels en bas */
}

.email .a {
    font-weight: bold; /* Texte en gras pour les liens d'e-mail */
}

.email:hover {
    color: #f8dfa6; /* Couleur du texte au survol des liens d'e-mail */
}