/* ========================= */
/* Canevas global de l’index */
/* ========================= */
/* Styles globaux */
body {
    display: flex;
    margin: 0; /* Supprimez les marges par défaut */
    padding: 0; /* Supprimez les paddings par défaut */
    background-color: black;
    background-image: url('/etc/pattern.jpg'); /* Image de fond */
    background-size: 150px 150px; /* Taille de l'image de fond */
    background-repeat: repeat; /* Répète l'image de fond */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
}

#container {
    display: flex;
    flex-direction: column; /* Colonne pour le frame_menu en haut */
    height: 100%; /* Hauteur de la page */
    width: 1040px;
    opacity: 0; /* Opacité initiale */
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out; /* Transition douce */
    transition: opacity 1s ease-in-out, visibility 1s 
}

#container.fade-in {
    opacity: 1; /* Opacité finale */
    visibility: visible;
}

#frame_menu {
    flex: 0 0 80px; /* Hauteur de frame_menu */
    /* border: 1px solid red; */
    box-sizing: border-box;
}

#bottom-container {
    display: flex; /* Ligne pour les frames du bas */
    flex: 1; /* Prend le reste de l'espace */
    height: calc(100% - 80px); /* Ajustez la hauteur pour tenir compte de frame_menu */
}

#frame_sidebar {
    flex: 0 0 280px; /* Largeur de frame_sidebar */
    /* border: 1px solid green; */
    box-sizing: border-box;
    overflow-y: auto; /* Ajoute le défilement vertical */
    height: 100%; /* Prend toute la hauteur disponible */
}

#frame_contenu {
    flex: 0 0 760px; /* Largeur de frame_contenu */
    /* border: 1px solid yellow; */
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto; /* Ajoute le défilement vertical */
    height: 100%; /* Prend toute la hauteur disponible */
}

/* ============================= */
/* Définition de la mise en page */
/* ============================= */

/* Contenus                */ 
.container {
    display: grid;
    grid-template-columns: 1fr 760px 270px 1fr;
    grid-template-rows: auto 1fr; /* Ajout d'une ligne pour le contenu */
    height: 100vh;
}

#header_top {
    margin: 0 auto; /* Centre le conteneur dans son parent */
    grid-column: 2; /* Positionne dans la colonne 2 */
    grid-row: 1; /* Positionne dans la première ligne */
}

.content {
    grid-column: 2; /* Positionne dans la colonne 2 */
    grid-row: 2; /* Positionne dans la deuxième ligne */
}

.aside {
    grid-column: 3; /* Positionne dans la colonne 3 */
    grid-row: 2; /* S'étend sur la deuxième ligne */
}

.nav-container {
    display: flex; /* Utilise flexbox pour centrer les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
    width: 100%; /* Prend toute la largeur du conteneur */
}

nav {
    display: flex; /* Utilise flexbox pour aligner les éléments */
    justify-content: space-between; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    height: 80px; /* Hauteur du conteneur */
    width: 100%; /* Prend toute la largeur de la page */
    position: fixed; /* Reste en haut de la page */
    top: 0; /* Positionné en haut */
    left: 0; /* Positionné à gauche */
    z-index: 1000; /* Assure que le conteneur est au-dessus des autres éléments */
    padding: 3px 0 0 0; /* Ajoute un peu de padding à gauche et à droite */
}

nav ul {
    list-style: none; /* Supprime les puces de la liste */
    padding: 6px; /* Supprime le padding de la liste */
    margin: 0; /* Supprime la marge de la liste */
    display: flex; /* Utilise flexbox pour aligner les éléments de la liste */
}

nav ul li {
    margin: 0 6px; /* Espace entre les boutons */
}

.nav-button {
    background-color: blue; /* Couleur de fond bleue */
    background-image: url('/etc/fond-bouton.jpg');
    background-size: cover; /* Ajuste l'image de fond pour couvrir le bouton */
    width: 190px; /* Largeur fixe */
    height: 57px; /* Hauteur fixe */
    font-family: 'Chelsea Market', sans-serif; /* Police de caractères */
    font-size: 150%;
    font-weight: bolder;
    color: white; /* Couleur du texte blanche */
    padding: 0; /* Pas d'espacement intérieur pour garder la taille fixe */
    text-decoration: none; /* Supprime le soulignement du lien */
    border-radius: 5px; /* Coins arrondis */
    border: 2px solid lightblue; /* Cadre bleu */
    transition: background-color 0.3s; /* Transition pour l'effet au survol */
    margin: 1px; /* Marge autour du bouton */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la taille totale */
    display: flex; /* Utilise flexbox pour centrer le texte */
    align-items: center; /* Centre verticalement le texte */
    justify-content: center; /* Centre horizontalement le texte */
}

.nav-button:hover {
    color: black; /* Couleur du texte au survol */
    border: 2px solid blue; /* Cadre bleu au survol */
    background-color: lightblue;
    background-image: none;
    transform: scale(1.12); /* Zoom au survol */
    transition: transform 0.3s; /* Transition pour l'effet de zoom */
}

/* ========================= */
/* Barre latérale            */
/* ========================= */
ul.navbar {
    font-family: 'Love Ya Like A Sister', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 150%; /* Taille de la police */
    color: white; /* Couleur du texte */
    list-style-type: circle;  /* disc (défaut), circle, square, none */
    line-height: 1.5 /* Hauteur de l’interligne */
}

ul.navbar li a {
    color: white; /* Couleur du texte */
    text-decoration: none; /* Enlève le soulignement */
}

ul.navbar li a:hover {
    color: lightblue /* Change la couleur au survol */
}

.nav_blue {
    font-family: 'Love Ya Like A Sister', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 95%; /* Taille de la police */
    color: lightblue; /* Couleur bleue */
    line-height: 1; /* Pour hériter de la hauteur de ligne du parent */
    list-style-type: none; /* Enlève le point des listes */
}

.custom-bullet {
    list-style-type: disc; /* disc (défaut), circle, square, none */
}

.no-bullet {
    list-style-type: none; /* Enlève le point des listes */
}

.date {
    text-align: center; /* Centre le texte */
    margin: 0; /* Supprime la marge */
}

/* ========================= */
/* Les Titres                */
/* ========================= */
h1 {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 150%; /* Taille de la police */
    text-align: center; /* Centre le texte */
}

.h1-large {
    font-size: 200%; /* Taille augmentée pour les titres h1 */
}

h2 {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 125%; /* Taille de la police */
    text-align: center; /* Centre le texte */
}

.h2-large {
    font-size: 150%; /* Taille augmentée pour les titres h2 */
}

hr {
    border: none; /* Supprime la bordure par défaut */
    height: 3px; /* Hauteur de la ligne */
    background-color: #4B4B4E; /* Couleur de fond de la ligne */
    width: 95%; /* Largeur de la ligne */
    margin: 1em auto; /* Marges : haut/bas, centré horizontalement */
    text-align: center; /* Centre le texte */
}

/* ========================= */
/* Les Paragraphes           */
/* ========================= */
.text {
    font-family: 'Love Ya Like A Sister', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 150%; /* Taille de la police */
    text-align: justify; /* Justifie le texte */
    padding: 20px; /* Espace intérieur pour éviter que le texte touche les bords */
    color: white; /* Couleur du texte */
}

.text-small {
    font-size: 120%; /* Taille ajustée pour le texte plus petit */
}

.text-big {
    font-size: 200%; /* Taille ajustée pour le texte plus petit */
}

.text2 {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 100%; /* Taille de la police */
    text-align: justify; /* Justifie le texte */
    padding: 20px; /* Espace intérieur pour éviter que le texte touche les bords */
}

.center {
    text-align: center; /* Centre le texte */
}

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

.black {
    color: black; /* Couleur noire */
}

.white {
    color: #ffffff; /* Couleur blanche */
}

.courriel {
    color: navy; /* Couleur bleue */
}
.image-center {
    text-align: center; /* Centre les images */
    margin: 0.5em 0; /* Marges verticales */
}

/* ========================= */
/* EO (Éléments spécifiques) */
/* ========================= */
p.eo_fr {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 100%; /* Taille de la police */
    color: white; /* Couleur du texte */
    text-align: center; /* Centre le texte */
}

p.eo_en {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 100%; /* Taille de la police */
    color: lightblue; /* Couleur du texte */
    text-align: center; /* Centre le texte */
}

/* ========================= */
/* Les Tables                */
/* ========================= */
table {
    border: 2px solid #4B4B4E; /* Bordure de la table */
    margin: 0 auto; /* Centre la table */
    border-collapse: collapse; /* Fusionne les bordures */
}

td {
    padding: 0; /* Supprime le remplissage des cellules */
    line-height: 0; /* Élimine l'espace vertical */
    border: 2px solid #4B4B4E; /* Bordure intérieure des cellules */
    margin: 0; /* Supprime la marge des cellules */
    text-align: center; /* Centre le contenu horizontalement */
}

td.img {
    display: block; /* Évite les espaces indésirables */
}

/* Cibler uniquement les images dans les cellules de la table */
table img {
    cursor: pointer; /* Change le curseur au survol */
    transition: transform 0.3s; /* Transition pour l'effet de zoom */
}

table img:hover {
    transform: scale(1.05); /* Zoom au survol */
}

img.no-scale {
    cursor: default; /* Curseur par défaut pour les images sans zoom */
    transition: none; /* Désactive la transition */
}

img.no-scale:hover {
    transform: none; /* Désactive le grossissement */
}

/* Styles pour les tables sans bordure */
table.no-border {
    border: none; /* Pas de bordure pour la table */
}

table.no-border td {
    border: none; /* Pas de bordure pour les cellules */
}

/* ========================= */
/* Les Liens Surlignés       */
/* ========================= */
a {
    color: navy; /* Couleur des liens */
    text-decoration: underline; /* Assure que le lien est souligné */
}

a:hover {
    color: lightblue; /* Change la couleur au survol */
}

img {
    transition: transform 0.3s; /* Transition pour l'effet de zoom sur les images */
}

.link-image {
    cursor: pointer; /* Pointeur uniquement pour les images avec la classe link-image */
}

.link-image:hover {
    transform: scale(1.10); /* Zoom au survol des images */
}

/* ========================= */
/* Copyright                 */
/* ========================= */
.footer {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    font-size: 80%; /* Taille de la police */
    color: #2A2E32; /* Couleur du texte */
    text-align: center; /* Centre le texte */
}

/* ========================= */
/* Diaporama                 */
/* ========================= */
.diaporama {
    width: 100vh; /* Largeur du diaporama */
    height: 100vh; /* Hauteur du diaporama */
    background-image: url('pattern.jpg'); /* Image de fond */
    background-size: 150px 150px; /* Taille de l'image de fond */
    background-repeat: repeat; /* Répète l'image de fond */
    text-align: center; /* Centre le texte */
}

/* ========================= */
/* Lightbox                  */
/* ========================= */
.lightbox {
    display: none; /* Masque la lightbox par défaut */
    position: fixed; /* Position fixe pour couvrir tout l'écran */
    z-index: 1000; /* Assure que la lightbox est au-dessus des autres éléments */
    left: 0; /* Positionne à gauche */
    top: 0; /* Positionne en haut */
    width: 100%; /* Prend toute la largeur de l'écran */
    height: 100%; /* Prend toute la hauteur de l'écran */
    background-image: url('pattern.jpg'); /* Image de fond */
    background-repeat: repeat; /* Répète l'image de fond */
    overflow: auto; /* Permet le défilement si nécessaire */
}

.lightbox-content {
    display: flex; /* Utilise flexbox pour centrer le contenu */
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    justify-content: center; /* Centre verticalement */
    height: 100%; /* Prend toute la hauteur de la lightbox */
    padding: 20px; /* Espace intérieur */
}

.lightbox-img {
    max-width: 90vw; /* Largeur maximale de l'image */
    max-height: 80vh; /* Hauteur maximale de l'image */
    object-fit: contain; /* Ajuste l'image sans déformer */
}

.lightbox-nav {
    display: flex; /* Utilise flexbox pour la navigation */
    justify-content: center; /* Centre horizontalement */
    gap: 20px; /* Espace entre les boutons de navigation */
    width: 90%; /* Largeur de la navigation */
    margin-bottom: 20px; /* Marge en bas */
    position: absolute; /* Positionnement absolu */
    top: 20px; /* Position depuis le haut */
    left: 50%; /* Centre horizontalement */
    transform: translateX(-50%); /* Ajustement précis du centrage */
    z-index: 1001; /* Assure qu'il est au-dessus de l'image */
}

.lightbox-btn {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    color: white; /* Couleur du texte */
    font-size: 1.2rem; /* Taille de la police */
    cursor: pointer; /* Curseur en forme de main */
    padding: 10px 20px; /* Espace intérieur */
    background: grey; /* Couleur de fond */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    min-width: 120px; /* Largeur minimale */
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.2); /* Change la couleur de fond au survol */
}

.caption {
    font-family: 'Chelsea Market', 'Comic Sans MS', sans-serif; /* Police de caractères */
    color: white; /* Couleur du texte */
    text-align: center; /* Centre le texte */
    margin-top: 55px; /* Marge en haut */
    font-size: 1.2rem; /* Taille de la police */
}

/* ========================= */
/* Polices importées         */
/* ========================= */
@font-face {
    font-family: 'Love Ya Like A Sister'; /* Nom de la police */
    font-style: normal; /* Style normal */
    font-weight: bold; /* Poids de la police */
    src: url('/etc/fonts/Love_Ya_Like_A_Sister.woff2') format('woff2'); /* Chemin vers la police */
}

@font-face {
    font-family: 'Chelsea Market'; /* Nom de la police */
    font-style: normal; /* Style normal */
    font-weight: bold; /* Poids de la police */
    src: url('/etc/fonts/Chelsea_Market.woff2') format('woff2'); /* Chemin vers la police */
}

/* ========================== */
/* Fin de la feuille de style */
/* ========================== */