body {
    padding: 0;
    margin: 0;
    background: #ffffff;
}

.navbar {
    background-color: rgb(34, 34, 34);
    height: 6%;
    min-height: 50px; /* Hauteur minimum pour éviter l'écrasement */
    display: flex;
    align-items: center; /* Centre verticalement les éléments */
    justify-content: space-between; /* Distribue l'espace entre les éléments */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 15px; /* Ajoute un peu d'espace sur les côtés */
    box-sizing: border-box;
}

.bouton_menu {
    flex-shrink: 0; /* Empêche le rétrécissement */
    display: flex;
    align-items: center;
}

.menu {
    width: 30px; /* Taille fixe pour l'icône */
    height: auto;
}

.titre {
    color: #ffffff;
    font-family: "Pacifico", serif;
    font-size: 1.5em;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centre parfaitement le titre */
    transition-property: opacity;
    transition-duration: 2s;
    white-space: nowrap; /* Empêche le retour à la ligne */
}

.bouton_translate {
    background-color: rgb(34, 34, 34);
    border: 1px solid #fdfdfd;
    color: #fff;
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap; /* Empêche le texte de se couper */
    flex-shrink: 0; /* Empêche le rétrécissement */
}

/* Cache l'icône par défaut sur les grands écrans */
.icon-translate {
    display: none; 
}

/* Affiche le texte du bouton par défaut sur les grands écrans */
.text-translate {
    display: inline-block; 
}
        
.menu:hover {
    height: 2%;
    width: 6%;
}

.header {
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.overlay {
    position: absolute;
    min-height: 70%;
    min-width: 80%;
    left:5%;
    top : 15%;
    right: 5%;
    background-color : rgba(0, 0, 0, 0.7);
}

#title_publications {
    /* MODIFIÉ : Taille de police augmentée pour être un titre principal */
    font-size: clamp(1.8rem, 4vw, 2.2rem); 
    margin-bottom: 2vh;
    color: white;
}

.publications-content {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.section-title {
    /* MODIFIÉ : Taille de police augmentée pour être un sous-titre */
    font-size: clamp(1.4rem, 3vw, 1.8rem); 
    margin-bottom: 1vh;
    color: #f0f0f0;
    border-bottom: 1px solid #555;
    padding-bottom: 0.5vh;
}

.publications-list, .interests-list, .responsibilities-list, .membership-list {
    list-style-type: none;
    padding-left: 0;
}

.publication-item, .interest-item, .responsibility-item, .membership-item {
    margin-bottom: 1.5vh;
    padding-left: 1vw;
    line-height: 1.4;
}

.publication-item {
    display: flex;
    flex-direction: column;
}

.publication-title {
    font-weight: bold;
    margin-bottom: 0.5vh;
    /* MODIFIÉ : Ajout d'une taille pour la hiérarchie */
    font-size: 1.1rem; 
}

.publication-details {
    font-style: italic;
    color: #ccc;
    /* MODIFIÉ : Ajout d'une taille pour la hiérarchie */
    font-size: 1.0rem; 
}

.publication-reference {
    color: #ccc;
    font-style: italic;
    margin-left: 1vw;
}

.description {
    display: flex;
    flex-direction: row;
    text-align: justify;
    margin-left: 2%;
    margin-top: 2%;
    margin-right: 2%;
}

.P_para_ouvrage{
    flex : 2;
    text-align: justify;
    margin-left: 2%;
    margin-right: 2%;
    overflow-y: auto;
    max-height: 70vh;
    box-sizing: border-box;
}

#title_home, #title_home2,#title_home3,#title_home4 {
    color: #c5963e;
    text-align: center;
    margin-top: 2%;
}

.description p {
    color: #fff;
    /* MODIFIÉ : Taille de police réduite pour devenir le texte de base */
    font-size: 1.1rem; 
    line-height: 1.5;
    margin-left: 2%;
}
.description li {
    color: #fff;
    /* MODIFIÉ : Taille de police réduite pour correspondre au texte de base */
    font-size: 1.1rem; 
    line-height: 1.5;
    font-style: italic;
}

.features {
    margin: 4em auto;
    padding: 1em;
    position: relative;
}

.features img {
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    margin-bottom: 16px;
}

.page-footer {
    background-color: #222;
    color: #ccc;
    padding: 60px 0 30px;
}

.footer-copyright {
    color: #666;
    padding: 40px 0;
}

.sidebar {
    height: 100%;
    width: 20%;
    position: fixed;
    top: 6%;
    left: -500px;
    background-color: #333;
    color: #fff;
    transition: left 1s;
    z-index: 999;
}

.sidebar.open {
    left: 0;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    margin-left: 15%;
    margin-top: 15%;
    font-size: 1.5em;
}

.texte {
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

.visible {
    opacity: 1;
    color: #fff;
}

.sidebar ul li a {
    color: #e0d3d3;
    text-decoration: none;
}
.photo-container {
    position: sticky;
    top: 20px; /* Reste collé en haut quand on défile */
    flex-shrink: 0;
    width: 300px; /* Largeur fixe pour la photo */
}
.maman_img {
    margin-top: 40%;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.img-fluid {
    transition: transform 0.3s ease; /* animation fluide */
}

.img-fluid:hover {
    transform: scale(1.05); /* zoom léger à 105% */
    cursor: pointer;
}

/* Sélecteur simplifié (j'ai retiré .titre_livre_article7 et .titre_livre_article8) */
.titre_livre_article, .titre_livre_article9 {
    text-align: center;
    color: #c5963e;
    margin-top: 2%;
    font-size: 2em;
}

.monograph {
    display: flex;
    justify-content: center;
    gap: 40px; /* Espacement entre les colonnes */
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 15%;
}

.monograph1, .monograph2 {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Important pour le positionnement */
}

.monograph img {
    width: 50%;
    max-width: 300px;
    cursor: pointer;
    margin-bottom: 15px;
}

.feature-title {
    color: #333;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    text-align: center;
}

.fade-text {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    width: 100%;
    position: relative; 
    text-align: justify;
}

.fade-text.visible{
    opacity: 1;
    max-height: 1000px; 
    margin-top: 15px;
    color: #000000;
    text-align: justify
}
.Co-editor-Special-Issue {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 2%;
    flex-wrap: nowrap; /* pour le responsive */
    width : 95%;
    align-items: center;
}
    
/* ///////////////////    TABLEAU    /////////////////// */
.Peer-reviewed-Journals {
    justify-content: center;
    gap: 20px;
    margin-left: 7%;
    width : 93%;
    align-items: center;
}

table {
    width: 92%;
    border-collapse: collapse;
    background-color: #e1e2e1;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

th, td {
    padding: 1em;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

th {
    background-color: #999797;
    color: white;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.05em;
}

tr:hover {
    background-color:rgb(238, 237, 220);
}

a {
    color: #1a0dab;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ///////////////////   PARTIE CONFERENCE  ///////////////////// */
.titre_Conference_paper{
    color: #474747;
    font-size: 1.7rem;
    line-height: 1.7;
}

.conference_section{
    margin-top : 5%;
    margin-left : 5%;
    margin-right: 5%;
    border : 1px solid #ccc;
    padding: 2%;
    border-radius: 10px;
}

.barre{
    border : 1px solid #d3d1d1;
    margin-left: 5%;
    margin-right: 5%;
}


/* ================================= 
   SECTION RESPONSIVE POUR MOBILES
   ================================= */
@media (max-width: 768px) {
    
    /* ******************************************* */
    /* NOUVELLE CONFIGURATION POUR LA NAVBAR MOBILE */
    /* ******************************************* */
    .navbar {
        height: 60px; /* Hauteur fixe pour la navbar sur mobile */
        flex-wrap: nowrap; /* Empêche le retour à la ligne des éléments de la navbar */
        justify-content: space-between; /* Distribue l'espace */
        padding: 0 10px; /* Espacement latéral réduit */
    }

    .bouton_menu {
        /* Garde la position à gauche, pas besoin de 'order' car nowrap */
        flex-shrink: 0;
    }

    .titre {
        font-size: clamp(1.2em, 5vw, 1.8em); /* Taille de police fluide */
        position: absolute; /* De retour au positionnement absolu pour centrer */
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap; /* Empêche le titre de se couper */
        width: auto; /* Laisse la largeur s'adapter au contenu */
        margin-top: 0; /* Pas de marge supérieure */
        order: initial; /* Annule l'ordre pour revenir à l'ordre naturel ou absolu */
    }

    .bouton_translate {
        /* Met le bouton à droite */
        flex-shrink: 0;
        padding: 0; /* Supprime le padding pour que l'icône prenne toute la place */
        width: 40px; /* Largeur fixe pour le bouton icône */
        height: 40px; /* Hauteur fixe pour le bouton icône */
        border: none; /* Supprime la bordure par défaut */
        background-color: transparent; /* Fond transparent */
        display: flex; /* Utilise flexbox pour centrer l'icône */
        justify-content: center;
        align-items: center;
    }

    .bouton_translate .text-translate {
        display: none; /* Masque le texte sur mobile */
    }

    .bouton_translate .icon-translate {
        display: block; /* Affiche l'icône sur mobile */
        width: 80%; /* L'icône prend 80% de la taille du bouton */
        height: 80%;
        object-fit: contain; /* S'assure que l'icône est bien contenue */
        filter: invert(1); /* Rend l'icône blanche si elle est noire */
    }
    /* ******************************************* */
    /* FIN NOUVELLE CONFIGURATION NAVBAR MOBILE */
    /* ******************************************* */


    /* Corrections pour le débordement de texte (inchangées) */
    .header {

        min-height: 100vh; 
        display: flex; 
        flex-direction: column;
        justify-content: flex-start; 
        padding-top: 70px; /* 60px pour la navbar + 10px d'espace */
        box-sizing: border-box;
    }

    .overlay {
        position: static; 
        min-height: auto; 
        min-width: auto;
        left: auto;
        top: auto;
        right: auto;
        padding: 20px 15px; 
        margin: 0 5%; 
        box-sizing: border-box;
    }

    .description {
        margin-top: 20px; 
        margin-left: 0;
        margin-right: 0;
    }

    .P_para_ouvrage {
        max-height: none; 
        overflow-y: visible; 
        margin-left: 0;
        margin-right: 0;
        overflow-y: auto;
        max-height:45vh;
        box-sizing: border-box;

    }

    .maman_img {
        margin-top: 0; 
    }


    /* Agencement principal (Bio) (inchangé) */
    .description {
        flex-direction: column; 
        align-items: center;    
    }

    /* Conteneur Photo (inchangé) */
    .photo-container {
        width: 80%;        
        max-width: 300px;  
        top: 5px;          
        position: static;  /* Annule l'effet "sticky" */
        margin-bottom: 20px;
    }
    
    /* Section Monographes (Livres) (inchangé) */
    .monograph {
        flex-direction: column; 
        padding: 0 5%;        
    }

    /* Section Co-Editor (inchangé) */
    .Co-editor-Special-Issue {
        flex-direction: column; 
        text-align: center;
        width: 100%; 
        margin-left: 0;
        padding: 5%;
        box-sizing: border-box; 
    }

    .Co-editor-Special-Issue img {
        margin-bottom: 15px; 
    }

    /* Menu Sidebar (inchangé) */
    .sidebar {
        width: 80%;     
        left: -80%;     
    }
    
    /* Vos styles de tableau (déjà présents) (inchangés) */
    td, th {
        display: block;
        width: 100%;
    }

    td {
        border-bottom: none;
    }

    tr {
        margin-bottom: 1em;
        display: block;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
    }

    table {
        box-shadow: none;
        width: 98%; 
        margin-left: 1%;
    }
    
    .Peer-reviewed-Journals {
        width: 100%;
        margin-left: 0;
    }
}