@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;
}



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

h1 a {
    color: inherit; /* Hérite de la couleur du h1 */
    text-decoration: none; /* Supprime le soulignement (optionnel) */
}

h2 {
    font-family: 'ITC_AvantGarde_Gothic_Medium', sans-serif; /*police studio ghibli */
    text-align: center;
    font-style: italic;
    font-size: 200%;
    margin-top: 110px;
}
.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 {
    font-family: 'Glober';
    line-height: 30px; /*Espacement entre les lignes d'une même balise p pour une meilleure lisibilité.*/
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 15px;
    font-size: 17px;
    text-align: justify;
}

.image_titre {
    margin-top: 50px;
    display: block; /* TP 8.5 de Monsieur Herr */
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
}

.image_aligne {
    display: flex;
    justify-content: center;
    gap: 40px; /* 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 */
    object-fit: contain;
}

.image {
    display: block; /* TP 8.5 de Monsieur Herr */
    margin-left: auto;
    margin-right: auto;
    width: 35%;
    height: auto;
    object-fit: contain;
}

.image_2 {
    display: block; /* TP 8.5 de Monsieur Herr */
    margin-left: auto;
    margin-right: auto;
    width: 15%;
    height: auto;
}

.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: 100px;
    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;
 }

.analyse {
    padding: 20px;
    margin: 20px auto;
    width: 75%;
    border: 4px solid #4d4747;
    border-radius: 12px;
    background: #fff;
    position: relative;
}

.analyse::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 3px dashed #999;
    border-radius: 8px;
    pointer-events: none;
}

.analyse p { 
    font-family: 'Glober';
    margin: 15px 0; /*Espacement entre les paragraphes pour une meilleure lisibilité.*/
    text-align: center;
    text-align: justify;
}

@media (prefers-color-scheme: dark) {
    #logo_prof {
        content: url('logo_rubrique_prof.png');
    }
}

/*logo de Madame Didelon */
.logo {
    height: auto;
    width: 5%;
}

/* aligner le logo avec la review*/

.review {
    display: flex; /* met les éléments en ligne */
    align-items: center; /* Aligne verticalement le h3 et l'image */
    gap: 40px;
}


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