/*Fond du site*/

/* Style de base */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Section Parallax */
.parallax-section {
    position: relative;
    min-height: 100vh; /* Chaque section occupe la hauteur de l'écran */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /*font-size: 2rem;*/
    text-align: center;
    overflow: hidden;
}

.parallax-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effet parallax */
    z-index: -1;
}

/* Personnalisez vos sections */
.section-1::before {
    background-image: url('../images/7cf14012909ebeb439ee7d7d78e68848.jpg'); /* Remplacez par votre image */
}

.section-2::before {
    background-image: url('../images/1267107.jpg'); /* Remplacez par votre image */
}

.section-3::before{
    background-image: url('../images/1316855.jpeg'); /* Remplacez par votre image */
}

.section-3-contact::before {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url('../images/1316855.jpeg'); /* Remplacez par votre image */
}

.section-4::before {
    background-image: url('../images/chronologie/Skyward Sword.png'); /* Remplacez par votre image */
}

.section-5::before {
    background-image: url('../images/chronologie/The MInish Cap.jpg'); /* Remplacez par votre image */
}

.section-6::before {
    background-image: url('../images/chronologie/Ocarina of Time.jpg'); /* Remplacez par votre image */
}

.section-7::before {
    background-image: url('../images/chronologie/A Link to the Past.jpg'); /* Remplacez par votre image */
}

.section-8::before {
    background-image: url("../images/chronologie/Link's Awakening.jpg"); /* Remplacez par votre image */
}

.section-9::before {
    background-image: url("../images/chronologie/Oracles Seasons - Ages.jpg"); /* Remplacez par votre image */
}

.section-10::before {
    background-image: url("../images/chronologie/TLOZ.jpg"); /* Remplacez par votre image */
}

.section-11::before {
    background-image: url("../images/chronologie/TAOL.jpg"); /* Remplacez par votre image */
}

.section-12::before {
    background-image: url("../images/chronologie/Wind Waker.jpg"); /* Remplacez par votre image */
}

.section-13::before {
    background-image: url("../images/chronologie/Phantom Hourglass.jpg"); /* Remplacez par votre image */
}

.section-14::before {
    background-image: url("../images/chronologie/Phantom Hourglass.jpg"); /* Remplacez par votre image */
}

.section-15::before {
    background-image: url("../images/chronologie/Twilight Princess.jpg"); /* Remplacez par votre image */
}

.section-16::before {
    background-image: url("../images/chronologie/Majora.png"); /* Remplacez par votre image */
}

.section-17::before {
    background-image: url("../images/chronologie/Spirit.jpg"); /* Remplacez par votre image */
}

.section-18::before {
    background-image: url("../images/chronologie/Fours Swords.jpg"); /* Remplacez par votre image */
}

/* Section normale sans parallax */
.normal-section-1 {
    /*min-height: 50vh;*/
    padding: 1vh;
    background-color: #8cb662;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #333;
}


.normal-section-2 {
    padding: 20px;
    background-color: #c6bec3;
    display:block;
    color: #333;
    overflow-y: auto;
}

.normal-section-3 {
    /*min-height: 50vh;*/
    padding: 1vh;
    min-height: 130vh;
    background-color: #4fa5ef;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.normal-section-4 {
    /*min-height: 50vh;*/
    padding: 1vh;
    background-color: rgb(205, 205, 205);
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #333;
}


span#go-top{
    opacity: 0;
    position: fixed;
    bottom: 35px;
    right: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background-color: black;
    font-size: 2.5vw;
}

span.visible#go-top{
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}


.plus-grand-section{
    min-height: 130vh;
}

.img-cote{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.normal-section-4 {
    padding: 20px;
    background-color: #ffffff;
    display:block;
    color: #333;
    min-height: 175vh;
}

.Twilight{
    min-height: 115vh;
}

@media (max-width: 768px) {
    /* Adapter la taille de la police pour les écrans plus petits */
    .parallax-section, .normal-section {
        font-size: 1.2rem;
    }
}

/*Header*/

.titre{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-family: Oswald, italic;
    background-color: black;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
}

.menu-partenaires{
    padding: 3vh;
}

header{
    height: auto;
    width: auto;
    font-size: 1.5vw;
}

header nav ul{
    display:flex;
    align-items:center;
    justify-content: space-evenly;
    padding-right: 5vw;
    padding-left: 5vw;
}

header nav ul li a{
    text-decoration: none;
    color: white;
    transition: font-size 0.3s ease;
}

header nav ul li a:hover{
    text-decoration: none;
    font-size: 1.8vw;
    color: #72c2b5;
    transition: font-size 0.3s ease;
}

header nav ul li{
    list-style: none;
    padding-right: 1vw;
    padding-left: 1vw;
    border-radius: 8px;
}

.titre img{
    width: 6.5vw;
    height: auto;
    margin-top: 2.5vh;
}

.navbar a.active {
    background-color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
    border-radius: 0.5vw;
    padding: 0.2vw;
    
}
.navbar a.active:hover {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.4vw;
    border-radius: 0.7vw;
}

#accueil-hover:hover{
    color: #3f437a;
}

#donnees-hover:hover{
    color: #c6bec3;
}

#galerie-hover:hover{
    color: #4fa5ef;
}

#contact-hover:hover{
    color: #f2b35a;
}

#chronologie-hover:hover{
    color: #4f64ef;
}

/*Footer*/

footer{
    background-color: #000000;
    text-align: center;
    padding: 1rem;
}

footer p{
    text-align: center;
    color: rgb(255, 0, 0);
    font-family: Oswald, italic;
}

footer a{
    text-decoration: none;
    font-family: Quicksand, bold;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.4vw;
    border-radius: 0.7vw;
    transition: all 0.3s ease;
}

footer a:hover{
    font-size: 1.2vw;
    padding: 0.6vw;
    transition: all 0.3s ease;
}

.transition-smooth{
    transition: all 165ms ease-in-out;
}

main{
    display: flex;
    flex: 1; /* Prend tout l'espace disponible entre le header et le footer */
    max-width: 1080px;
    /* overflow-y: auto; */
    margin: auto;
}

.form-contact{
    flex-direction: column;
}

.tab{
    align-items: last baseline;
    margin-left: 17%;
}

/* Tableau page de Données */

.table-classe {
    flex: 1;
    border-collapse:separate;
    font-family: Kanit, sans-serif;
    text-align: center;
}

.table-classe thead tr th, 
.table-classe tbody tr td {
    border: 1px solid #757575;
    padding: 12px;
    text-align: left;
}

.table-classe thead tr th {
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 1em;
    transition: font-size 0.3s ease;
}

.table-classe thead tr th:hover {
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    transition: font-size 0.3s ease;
}

.table-classe thead tr:nth-child(even), 
.table-classe tbody tr:nth-child(even) {
    background-color: rgb(183, 183, 183);
    font-size: 1em;
    transition: font-size 0.3s ease;
}

.table-classe thead tr:nth-child(odd), 
.table-classe tbody tr:nth-child(odd) {
    background-color: white;
}


.table-classe thead tr:hover, 
.table-classe tbody tr:hover {
    background-color: #dbdbdb;
    font-size: 1.2em;
    transition: font-size 0.3s ease;
}

.table-classe tbody tr td {
    color: #333;
}


/*#background-datas{
    background-color: ;
}*/

.dataTables_length, .dataTables_filter, .dataTables_info, 
.dataTables_paginate{
    font-family: Quicksand, bold;
}

.dataTables_wrapper{
    margin-left: 10%;
    margin-right: 10%;
}

.dataTables_length{
    margin-bottom: 1%;
}

.dataTables_info, .dataTables_paginate{
    margin-top: 1%;
}

.table-container {
    flex: 1; /* S'étend pour occuper l'espace restant */
    overflow-y: auto; /* Ajoute un défilement interne si nécessaire */
    padding: 20px;
}

/*Accueil*/

#shi-moto{
    margin-left: 3%;
    width: auto;
    height: 50vh;
    border-radius: 1vw;
    transition: height 0.3s ease;
}

#shi-moto:hover{
    width: auto;
    height: 51vh;
    border-radius: 1vw;
    transition: height 0.3s ease;
}

#licence{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(132, 136, 198, 0.85);
    border-radius: 8px;
    padding: 15px;
    font-family: Quicksand, sans-serif;
}

#histoire-licence{
    border: 0.3vw double #72c2b5;
    border-radius: 8px;
    padding: 1%;
    text-align: justify;
    font-size: 2vh;
}

.gros-titre{
    font-family: Staatliches, sans-serif;
    font-size: 8vw;
    margin-top: 50vh;
    color: white;
    width: 1080px;
}

#link-ex{
    width: auto;
    height: 50vh;
    border-radius: 1vw;
    transition: height 0.3s ease;
}

#link-ex:hover{
    width: auto;
    height: 51vh;
    border-radius: 1vw;
    transition: height 0.3s ease;
}

.concept{
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: #333;
    padding: 15px;
    font-family: Quicksand, sans-serif;
    border: 0.3vw double #72c2b5;
    text-align: justify;
    font-size: 2vh;
    margin-left: 3%;
}


.concept h1 {
    text-align: left;
}


/*Personnages iconiques présentation*/

/* Conteneur global */
.character-container {
    max-width: 1080px;
    margin: 0 auto; /* Centre tout horizontalement */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacement entre chaque carte */
    font-family: Quicksand, sans-serif;
  }
  
  /* Structure de base des cartes */
  .character-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Image */
  .character-image img {
    width: 100%;
    height: auto;
    max-width: 200px; /* Limite la taille des images */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    filter: grayscale(100%);
    transition: transform 0.3s ease, filter 0.3s ease;
    /*margin-left: 2.5vw;*/
  }
  
  .character-image img:hover {
    transform: scale(1.05);
    filter: grayscale(0%);
  }
  
  /* Description */
  .character-description {
    width: 100%;
    max-width: 1080px;
    background: rgb(242,179,90, 0.8);
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Apparition au survol */
  .character-card:hover .character-description {
    opacity: 1;
    transform: translateY(0);
  }

  
  @media (max-width: 600px) {
    .character-description {
      font-size: 14px; /* Texte plus petit */
      padding: 15px;
    }
  
    .character-image img {
      max-width: 150px;
    }
  }


.character-ecart{
    padding-top: 2vh;
    padding-bottom: 2vh;
}



/*Contact*/

.form-container {
    padding: 1.5vw;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 20vw;
    margin: auto;
    font-family: Quicksand, sans-serif;
    color: #000000;
    background-color: rgb(242,179,90, 0.75);
}

#prenom, #nom{
    width: 75%;
    height: auto;
}
 #email, #message{
    width: 90%;
 }

.form-group {
    margin-bottom: 2vh;
    margin-right: auto;
}

.name-group {
    display: flex;
    justify-content: space-between;
}

.name-group div {
    flex: 1;
}

.label {
    font-weight: bold;
    display: block;
    margin-bottom: 1vh;
    margin-right: auto;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 2vh;
    min-height: 5vh;
    max-height: 20vh;
}

textarea {
    resize: vertical;
    height: 100px;
}

button {
    width: 100%;
    padding: 10px;
    background: #51c2af;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 2vh;
    cursor: pointer;
    font-family: Quicksand, sans-serif;
    transition: font-size 0.3s ease;
}

button:hover {
    background: #32786d;
    font-size: 2.4vh;
    transition: font-size 0.3s ease;
}

.name-group div:first-child {
    margin-right: 20px;
}

/*Galerie*/

.telechargement{
    background-color: rgb(79,165,239, 0.75);
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5vw;
    border-radius: 8px;
    font-family: Quicksand, bold;
}

#telecharger, #fichier, #file-upload-button{
    font-family: Quicksand, sans-serif;
    cursor: pointer;
}

#telecharger{
    margin-top: 1vh;
    width: auto;
}

#fichier, #image{
    margin-top: 2vh;
}

#fichier{
    font-size: 3vh;
}

/*Images de la Galerie*/

.img-galerie{
    filter: brightness(0.5);
    transition: width 0.5s ease, height 0.5s ease, brightness 0.5s ease;
}

.img-galerie:hover{
    height: 85%;
    filter: brightness(1);
    transition: width 0.5s ease, height 0.5s ease, brightness 0.5s ease;
}

/* Largeur de la barre de défilement */
::-webkit-scrollbar {
    width: 0.5vw;
}

/* Couleur et style du fond de la barre */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);  /* Gris clair */
    border-radius: 5px;
}


::-webkit-scrollbar-thumb {
    background-color: #32786d; /* Dégradé orange */
    border-radius: 5px;
}

/* Effet au survol */
::-webkit-scrollbar-thumb:hover {
    background-color: #52c2b1;
}

/*Scrollbar pour les autres navigateur*/

* {
    scrollbar-width: 0.5vw;
    scrollbar-color: linear-gradient(45deg, rgb(79,165,239), #32786d);
}

/*Carroussel*/


/* Définition d'un container pour gérer l'affichage */
.container-carrousel {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
    padding-top: 2vh;
    border: black dashed;
}
/* Définition du carousel */
.carousel {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 100vh;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
}
/* Définition des diapositives */
.slide {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide img {
    width: auto;
    /* Largeur de l'image est de 100% */
    height: 80%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
    margin: auto;
    border-radius: 1vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}
/* Définition des boutons de contrôle du carousel */
.carousel-controls {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: 5;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle */
.carousel-controls button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: aquamarine;
    /* Arrière-plan en aquamarine */
}
/* Définition des points de contrôle */
.carousel-dots {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 5;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: 10%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots .dot {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin: 5px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots .active {
    /* Border de 10px pour le point actif */
    border: 10px solid #761530 !important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots .inactive {
    /* Border de 10px pour les points inactifs */
    border: 10px solid #2596be;
}


/*Classe Messsage-contact*/

.message-contact{
    font-family: Quicksand, sans-serif;
    border-radius: 8px;
    padding: 1vw;
}

/*Classe titre-form*/

.titre-form{
    font-size: 4vh;
    font-family: Quicksand, sans-serif;
}


.img-scrollbar{
    flex-direction: column;
}

.titre-galerie{
    font-size: 8vh;
}

/*Chronologie*/

.chrono-zelda{
    margin: auto;
    height: 95vh;
    width: auto;
    border-radius: 1vw;
}

.flex-timeline{
    flex-direction: column;
}

.font-timeline{
   font-family: Staatliches, sans-serif;
}

.intro-timeline-1{
    font-size: large;
    font-family: Quicksand, sans-serif;
    padding-bottom: 1vh;
}

.font-noir{
    color: #000000;
}

.background-text{
    background-color: rgba(132, 136, 198, 0.85);
    border-radius: 1vw;
}

.large{
    font-size: 2vw;
}

/*Partenaires*/

.font-normal{
    text-align: justify;
}

/*Crédits*/

.background-credits{
    background-color: #75cc76
}

.credits-img{
    flex-direction: column;
    margin: auto;
}

.credits-img div{
    flex-direction: row;
    justify-content: space-around;
    padding: 3vh;
    margin: auto;
}

.credits-img div a img{
    height: auto;
    width: 33%;
    border-radius: 1vw;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    margin: auto;
    margin-bottom: 1vh;
    filter: brightness(0.5);
}

.credits-img div a img:hover{
    height: auto;
    width: 33%;
    border-radius: 1vw;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    filter: brightness(1);
}