@font-face {
    font-family: 'ITC_AvantGarde_Gothic_Medium';
    src: url('fonts/ITC_Avant_Garde_Gothic_Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
} /*pour avoir une police du studio ghibli */

/* parce que ma petite soeur n'aime pas la police normale :*/
@font-face {
    font-family: 'Glober';
    src: url('fonts/Glober SemiBold Free.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


.btn {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.icone {
    width: 50px;
    cursor: pointer;
}

.titre {
    position: relative; /* Nécessaire pour que .logo en position absolue fonctionne */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Changement d'image en mode sombre */
@media (prefers-color-scheme: dark) {
    #theme-logo {
        content: url('totoro_titre_dark.png');
        position: relative;
        width: 250px; /* Ajuste la taille selon tes besoins */
        height: auto;
        transform: translate(-140%, 7%);
        z-index: 4; /* Derrière le texte */
    }
}

.logo {
    position: relative;
    width: 500px; /* Ajuste la taille selon tes besoins */
    height: auto;
    transform: translate(-60%, 7%);
    z-index: 4; /* Derrière le texte */
}


h1 {
    font-family: 'ITC_AvantGarde_Gothic_Medium', sans-serif; /*police studio ghibli */
    font-size: 500%; /* Ajuste la taille du titre */
    text-align: center; /* Centre le texte horizontalement */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -5%);
    z-index: 5; /* Assure que le texte reste visible */
}

h2 {
    font-family: 'ITC_AvantGarde_Gothic_Medium', sans-serif; /*police studio ghibli */
    text-align: center;
    font-style: italic;
    font-size: 200%;
    margin-top: 30px;
}

.presentation {
    padding-left: 20px;
    font-family: 'ITC_AvantGarde_Gothic_Medium', sans-serif; /*police studio ghibli */
    margin-top: 50px;
    font-size: 30px;
}

.a_savoir {
    font-style: italic;
    padding-left: 100px;
    font-family: 'ITC_AvantGarde_Gothic_Medium', sans-serif; /*police studio ghibli */
    margin-top: 50px;
    font-size: 30px;
}


p {
    line-height: 30px; /*Espacement entre les lignes d'une même balise p pour une meilleure lisibilité.*/
    font-family: 'Glober';
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 15px;
    font-size: 17px;
    text-align: justify;
}

.image_aligne {
    display: flex;
    justify-content: center;
    gap: 150px; /* espace entre les images */
    
}

.image_aligne > img {
    max-width: 25%; /* S'assure que les images ne dépassent pas leur conteneur */
    height: auto; /* Maintient les proportions */
}

.image {
    display: block; /* TP 8.5 de Monsieur Herr */
    margin-left: auto;
    margin-right: auto;
    width: 25%;
    height: auto;
    object-fit: contain; /* image est redimensionnée proportionnellement pour tenir dans son conteneur sans être étirée.*/
}

.texte {
    display: flex; 
    justify-content: center;
    justify-content: space-around;  /* TP 8.5 de Monsieur Herr */
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 50px;
    padding-top: 50px;
    width: 1200px;
}

.texte-image {
    width: 70%;  /* TP 8.5 de Monsieur Herr */
}

.texte-image > img {
    object-fit: contain;  /* TP 8.5 de Monsieur Herr */
    height: auto;
 }

.banderole {
    margin-top: 40px;
    display: flex;
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.banderole-contenu {
    display: flex;
    width: max-content; /* Ajuste la largeur automatiquement */
    animation: scrollBanner 88s linear infinite; /* Ajuste la durée pour un défilement fluide */
}

.image-container {
    position: relative; /* Permet à l'overlay de se superposer correctement */
    width: 250px; /* Ajuste selon la taille souhaitée */
    height: 100%;
    overflow: hidden; /* Évite que l'image dépasse */
}

.image-container div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-left: 12px solid black; /* pour créer des bandes noires entre chaque image de la banderole */
    border-right: 12px solid black;
    
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('overlay_4.png'); /* image pélicule à placer sur les images */
    background-size: cover; /* Assure que l'image couvre toute la div */
    background-position: center;
    pointer-events: none; /* Empêche l'interaction avec l'overlay */
    filter: contrast(5); /* Augmente le contraste pour que les bandes entre images soient bien noires en mode*/

}

/* Animation de la banderole */
@keyframes scrollBanner {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* Crée une boucle fluide */
    }
}



 /* Style du menu */
 ul {
    text-align: center;
    list-style-type: none; /* pas de puce */
    margin: 0;
    padding: 0; /* pas d'espace avec les bords */
    background-color: #333;
}

li {
    font-family: 'ITC_AvantGarde_Gothic_Medium', sans-serif; /* police studio ghibli */
    display: inline-block; /* pour aligner les éléments sur une même ligne */
    position: relative;
    margin-right: 70px ; /* espacement entre les titres du menu déroulant */
}

a {
    color: white;
    padding: 14px 20px; /* espace entre contenu et ses bords : premier pour vertical et l'autre horizontal */
    text-decoration: none;
    display: block;
}

/* Change la couleur du lien au survol */
li:hover > a {
    background-color: #575757;
}

/* Style du sous-menu */
.deroule-contenu {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    z-index: 1; /* sinon le menu passe derrière la banderole */
}

.deroule-contenu a {
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    color: white;
}

/* Change la couleur des éléments du sous-menu au survol */
.deroule-contenu a:hover {
    background-color: #575757;
}

/* Affiche le sous-menu uniquement lorsque le titre est survolé */
.deroule:hover .deroule-contenu {
    display: block;
}