.body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color:white;
        color: #333;
        height: 100%; /* Assurez-vous que le html et le body prennent toute la hauteur de la fenêtre */
        
      
    }
    /* Assurez-vous que tous les liens n'ont pas de soulignement */
    a {
        text-decoration: none; /* Supprimer la surlignure pour tous les liens */
    }
    
    /* Styles pour le titre */
    .works_soustitre {
        display: fixed;
        font-size: 1.5em; /* Taille de police moyenne */
        margin: 20px 0; /* Marge en haut et en bas réduite */
        color: black;
        font-weight: bold; /* Mettre le texte en gras */
        text-decoration: none; /* Supprimer la surlignure */
        position: absolute; /* Positionner absolument par rapport à la page */
        top: 0px; /* Positionner plus haut sur la page */
        left: 95px; /* Positionner à gauche de la page */
    }
    
    /* Styles pour le sous-titre */
    .Sous_titre {
        display: fixed;
        font-size: 1.2em; /* Taille de police légèrement plus petite */
        margin: 10px 0; /* Marge en haut et en bas réduite */
        color: black;
        font-weight: normal; /* Texte normal */
        text-decoration: none; /* Supprimer la surlignure */
        position: absolute; /* Positionner absolument par rapport à la page */
        top: 40px; /* Positionner plus haut sur la page, en dessous du titre */
        left: 95px; /* Positionner à gauche de la page */
    }
    
           /* Styles pour le menu hamburger */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 20px; /* Hauteur totale des trois barres */
        cursor: pointer; /* Ajouter un curseur de pointeur */
        position: fixed; /* Positionner le menu en haut à droite de la page */
        top: 40px; /* Ajuster la position du haut */
        right: 100px; /* Ajuster la position de droite */
    }
    
    .bar {
        width: 30px; /* Largeur des barres */
        height: 3px; /* Hauteur des barres */
        background-color: #444; /* Couleur des barres */
    }
    
    /* Styles pour le menu */
    .menu {
        display: none; /* Masquer le menu par défaut */
        list-style: none;
        padding: 0;
        margin: 0;
        position: fixed; /* Positionner le menu en haut à droite de la page */
        top: 30px; /* Ajuster la position du haut pour être en dessous du hamburger */
        right: 20px; /* Ajuster la position de droite */
         z-index: 1000; /* Assurer que le menu est au-dessus des autres éléments */
    }
    
    .menu.active {
        display: block; /* Afficher le menu lorsqu'il est actif */
    }
    
    .menu li {
        margin: 10px; /* Espacement entre les éléments du menu */
    }
    
    .menu a {
        text-decoration: none;
        color: #333;
        font-size: 1em;
        display: block; background-color: #f0f0f0; /* Changer la couleur de fond au survol */
    }
    /* Styles pour .suite */
    .suite {
        display: none; /* Masquer par défaut */
        font-size: 14px;
        margin-top: 10px;
        color: black; /* Texte en noir */
        text-align: justify;
        border: none; /* Aucune bordure */
        box-shadow: none; /* Supprimer les ombres */
        outline: none; /* Supprimer les contours */
    }
    
    /* Styles pour .mon-bouton */
    .mon-bouton {
        display: inline-block;
        padding: 10px 10px;
        font-size: 14px;
        color: black; /* Texte en noir */
    
        background-color: white;/* Fond transparent **/
        border: none; /* Aucune bordure */
        cursor: pointer;
        text-align: justify;
        text-decoration: none; /* Supprimer la décoration de texte */
        box-shadow: none; /* Supprimer les ombres */
        outline: none; /* Supprimer les contours */
    }
        
    
    /* Styles pour le sélecteur de langue */
    .language-selector {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #f9f9f9;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .language-selector a {
        margin: 0 5px;
        text-decoration: none;
        color: #333;
        font-weight: bold;
    }
    /* css selecteur de langue*/
    
    .language-selector {
        position: absolute;
        bottom: -15px; /* Ajuster cette valeur pour la distance du bas */
        right: 100px; /* Ajuster cette valeur pour la distance de la droite */
        font-size: 8px;
        top: 780px;
        margin: 0; /* Supprimer les marges */
        padding: 0; /* Supprimer les padding */
        display: flex; /* Utiliser flexbox pour aligner les liens */
        justify-content: flex-end; /* Aligner les liens à droite */
        align-items: center; /* Centrer verticalement les liens */
    }
    
    
    .language-selector a {
        color: black; /* Texte noir pour les liens */
        text-decoration: none; /* Supprimer le soulignement des liens */
        margin-left: 10px; /* Espacement entre les liens */
        font-size: 10px;
    }
    
    .language-selector a:hover {
        text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
    }
    /* Styles pour le conteneur du carrousel */
    
    
    .carousel {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 90%; /* Largeur de 60% */
        height: 90%; /* Hauteur de 60% */
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110px; /* Ajuster cette valeur pour abaisser le carrousel */
        left: 5%; /* Ajuster cette valeur pour déplacer le carrousel vers la droite */
    }
    
    
    
    
    
    .carousel img {
        display: flex; /* Supprime l'espace blanc causé par inline-block */
        max-width: 60%; /* Assurer que l'image prend toute la largeur du carrousel */
        max-height: 60%; /* Assurer que l'image prend toute la hauteur du carrousel */
        object-fit: cover; /* Recadre l'image pour remplir tout l'espace */
    }
    
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: 35px;
        color: black;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        user-select: none;
    }
    
    .prev {
        left: 250px; /* Positionner à gauche du conteneur */
        border-radius: 0 3px 3px 0;
    }
    
    .next {
        right: 250px; /* Positionner à droite du conteneur */
        border-radius: 3px 0 0 3px;
    }
    
    .prev:hover, .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .photo-caption {
        font-size: 0.8em; /* Taille de police */
        color: #666; /* Couleur du texte */
        display: inline-block; /* Afficher en ligne */
        margin-right:-450px; /* Espacement à gauche de la photo */
        vertical-align: top; /* Aligner en haut */
        white-space: nowrap; /* Empêcher le texte de se déplacer en dessous */
       
    }
    
    
 /*page works  */
   
 .gallery-container {
    flex: 3;
    display: flex;
    justify-content: center;
    margin-top: 200px; /* Ajouter une marge supérieure pour abaisser les images */
   margin-left: 110px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Réduire l'espace entre les images */
    width: 1000px; /* Largeur fixe pour la galerie (3 images de 200px + 2 gaps de 10px) */
    padding: 10px; /* Ajouter du padding */
}

.gallery img {
    width: 300px; /* Largeur fixe pour chaque image */
    height: 250px; /* Hauteur fixe pour les images */
    object-fit: cover; /* Conserver les proportions et remplir le conteneur */
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s;
    margin-top: 1%;
}

.gallery img:hover {
    transform: scale(1.05);
}

.gallery img:hover {
    transform: scale(1.05);
}
 
.Works{
    position: absolute;
    margin-top: 95px;
    left:5.5% ;
    transform: translateY(-50%); /* Centrer verticalement */
}
.Works ul {
    list-style-type: none; /* Supprimer les points */
    padding: 0;
    color: black; /* Texte noir */
}

.Works ul li {
    margin-bottom: 10px;
    color: black; /* Texte noir */
}

.Works ul li a {
    color: black; /* Texte noir pour les liens */
    text-decoration: none; /* Supprimer le soulignement des liens */
    outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:hover {
    color: black; /* Texte noir pour les liens au survol */
    text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
    outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:focus {
    outline: none; /* Supprimer l'encadrement en pointillé jaune */
}

  
/* Styles pour .conteneur2 */
.conteneur2 {
    position: absolute;
    top: calc(50% + 100px); /* Positionner en dessous de .Works-UNTITLED */
    left: -8px; /* Positionner à gauche */
    width: 200px; /* Ajuster la largeur selon vos besoins */
    padding: 10px; /* Ajouter du padding */
    text-align: justify;
   
}

.texte3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.texte4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.texte1 {
    font-size: 14px;
    margin-bottom: 10px;
}



.gallery_2-container{
    text-align: center;
    margin: 210px;
    padding: 20px;
    border-radius: 10px;
    /* Pour déplacer le conteneur plus à droite */
    margin-left: auto;
    margin-right:600px;
    width: 600px; /* Réduire la largeur du conteneur */
}
.gallery_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.photo{
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    /* Pour rendre les images plus petites, ajustez la largeur maximale */
    max-width: 600px;
}
.photo-untitled {
    width: 150%; /* Prendre toute la largeur disponible */
    max-width: 300px; /* Limiter la largeur maximale de l'image */
    height: auto; /* Ajuster la hauteur automatiquement */
}
    .copyright {
        font-size: 12px;
        color: #666;
        margin-top: 10px;
       margin-left: 650px;
    }
    
    .audio-container {
        display: flex;
        justify-content: center; /* Centrer horizontalement */
        align-items: center; /* Centrer verticalement */
        margin-top: 10px; /* Ajouter une marge supérieure pour espacer du contenu précédent */
        width: 100%; /* Prendre toute la largeur disponible */
    }
    
    .audio-container audio {
        width: 300px; /* Ajuster la largeur de la barre de son */
        height: 30px; /* Ajuster la hauteur de la barre de son */
    }
    
        
    
    /*Page About*/
    .bio-container {
        display: flex;
        align-items: flex-start; /* Aligner les éléments en haut */
        gap: 20px; /* Espace entre la photo et le texte */
        margin: 220px auto; /* Ajouter une marge autour du conteneur et centrer horizontalement */
        width: 80%; /* Réduire la largeur du conteneur */
        max-width: 800px; /* Limiter la largeur maximale */
    }
    
    .bio-container img {
        max-width: 300px; /* Ajuster la largeur maximale de la photo */
        height: auto; /* Ajuster la hauteur automatiquement */
        margin-top: 55px;
        
    }
    
    .text-content {
        flex: 1; /* Prendre tout l'espace disponible */
        text-align: justify; /* Justifier le texte */
    }
    
    .italique {
        font-style: italic; /* Texte en italique */
    }
    
    .text-content2 {
        font-size: 0.9em; /* Taille de police légèrement plus grande */
       top: 420px;
       font-style: italic; /* Texte en italique */
    }
    .contact-container {
        text-align: center; /* Centrer le texte à l'intérieur du conteneur */
        padding: 20px;
    margin-top: 350px;
       
    
    }
    
    .contacts_gras {
        font-weight: bold; /* Mettre le texte en gras */
    }
   
   @media  (max-width: 1600px) 
   {
    .body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color:white;
        color: #333;
        height: 100%; /* Assurez-vous que le html et le body prennent toute la hauteur de la fenêtre */
        
      
    }
    /* Assurez-vous que tous les liens n'ont pas de soulignement */
   .a {
        text-decoration: none; /* Supprimer la surlignure pour tous les liens */
    }
    
    /* Styles pour le titre */
    .works_soustitre {
        display: fixed;
        font-size: 1.5em; /* Taille de police moyenne */
        margin: 20px 0; /* Marge en haut et en bas réduite */
        color: black;
        font-weight: bold; /* Mettre le texte en gras */
        text-decoration: none; /* Supprimer la surlignure */
        position: absolute; /* Positionner absolument par rapport à la page */
        top: 0px; /* Positionner plus haut sur la page */
        left: 65px; /* Positionner à gauche de la page */
    }
    
    /* Styles pour le sous-titre */
    .Sous_titre {
        display: fixed;
        font-size: 1.2em; /* Taille de police légèrement plus petite */
        margin: 10px 0; /* Marge en haut et en bas réduite */
        color: black;
        font-weight: normal; /* Texte normal */
        text-decoration: none; /* Supprimer la surlignure */
        position: absolute; /* Positionner absolument par rapport à la page */
        top: 40px; /* Positionner plus haut sur la page, en dessous du titre */
        left: 65px; /* Positionner à gauche de la page */
    }
    
        /* Styles pour le menu hamburger */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 20px; /* Hauteur totale des trois barres */
        cursor: pointer; /* Ajouter un curseur de pointeur */
        position: fixed; /* Positionner le menu en haut à droite de la page */
        top: 40px; /* Ajuster la position du haut */
        right: 100px; /* Ajuster la position de droite */
    }
    
    .bar {
        width: 30px; /* Largeur des barres */
        height: 3px; /* Hauteur des barres */
        background-color: #444; /* Couleur des barres */
    }
    
    /* Styles pour le menu */
    .menu {
        display: none; /* Masquer le menu par défaut */
        list-style: none;
        padding: 0;
        margin: 0;
        position: fixed; /* Positionner le menu en haut à droite de la page */
        top: 30px; /* Ajuster la position du haut pour être en dessous du hamburger */
        right: 20px; /* Ajuster la position de droite */
         z-index: 1000; /* Assurer que le menu est au-dessus des autres éléments */
    }
    
    .menu.active {
        display: block; /* Afficher le menu lorsqu'il est actif */
    }
    
    .menu li {
        margin: 10px; /* Espacement entre les éléments du menu */
    }
    
    .menu a {
        text-decoration: none;
        color: #333;
        font-size: 1em;
        display: block; background-color: #f0f0f0; /* Changer la couleur de fond au survol */
    }
    /* Styles pour .suite */
    .suite {
        display: none; /* Masquer par défaut */
        font-size: 14px;
        margin-top: 10px;
        color: black; /* Texte en noir */
        text-align: justify;
        border: none; /* Aucune bordure */
        box-shadow: none; /* Supprimer les ombres */
        outline: none; /* Supprimer les contours */
    }
    
    /* Styles pour .mon-bouton */
    .mon-bouton {
        display: inline-block;
        padding: 10px 10px;
        font-size: 14px;
        color: black; /* Texte en noir */
    
        background-color: white;/* Fond transparent **/
        border: none; /* Aucune bordure */
        cursor: pointer;
        text-align: justify;
        text-decoration: none; /* Supprimer la décoration de texte */
        box-shadow: none; /* Supprimer les ombres */
        outline: none; /* Supprimer les contours */
    }
        
    
    /* Styles pour le sélecteur de langue */
    .language-selector {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #f9f9f9;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .language-selector a {
        margin: 0 5px;
        text-decoration: none;
        color: #333;
        font-weight: bold;
    }
    /* css selecteur de langue*/
    
    .language-selector {
        position: absolute;
        bottom: -15px; /* Ajuster cette valeur pour la distance du bas */
        right: 100px; /* Ajuster cette valeur pour la distance de la droite */
        font-size: 8px;
        top: 780px;
        margin: 0; /* Supprimer les marges */
        padding: 0; /* Supprimer les padding */
        display: flex; /* Utiliser flexbox pour aligner les liens */
        justify-content: flex-end; /* Aligner les liens à droite */
        align-items: center; /* Centrer verticalement les liens */
    }
    
    
    .language-selector a {
        color: black; /* Texte noir pour les liens */
        text-decoration: none; /* Supprimer le soulignement des liens */
        margin-left: 10px; /* Espacement entre les liens */
        font-size: 10px;
    }
    
    .language-selector a:hover {
        text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
    }
    /* Styles pour le conteneur du carrousel */
    
    
    .carousel {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 90%; /* Largeur de 60% */
        height: 90%; /* Hauteur de 60% */
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110px; /* Ajuster cette valeur pour abaisser le carrousel */
        left: 5%; /* Ajuster cette valeur pour déplacer le carrousel vers la droite */
    }
    
    
    
    
    
    .carousel img {
        display: flex; /* Supprime l'espace blanc causé par inline-block */
        max-width: 60%; /* Assurer que l'image prend toute la largeur du carrousel */
        max-height: 60%; /* Assurer que l'image prend toute la hauteur du carrousel */
        object-fit: cover; /* Recadre l'image pour remplir tout l'espace */
    }
    
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: 35px;
        color: black;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        user-select: none;
    }
    
    .prev {
        left: 250px; /* Positionner à gauche du conteneur */
        border-radius: 0 3px 3px 0;
    }
    
    .next {
        right: 250px; /* Positionner à droite du conteneur */
        border-radius: 3px 0 0 3px;
    }
    
    .prev:hover, .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .photo-caption {
        font-size: 0.8em; /* Taille de police */
        color: #666; /* Couleur du texte */
        display: inline-block; /* Afficher en ligne */
        margin-right:-450px; /* Espacement à gauche de la photo */
        vertical-align: top; /* Aligner en haut */
        white-space: nowrap; /* Empêcher le texte de se déplacer en dessous */
       
    }
    
    
 /*page works  */
   
 .gallery-container {
    flex: 3;
    display: flex;
    justify-content: center;
    margin-top: 200px; /* Ajouter une marge supérieure pour abaisser les images */
   margin-left: 120px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Réduire l'espace entre les images */
    width: 780px; /* Largeur fixe pour la galerie (3 images de 200px + 2 gaps de 10px) */
    padding: 10px; /* Ajouter du padding */
}

.gallery img {
    width: 230px; /* Largeur fixe pour chaque image */
    height: 180px; /* Hauteur fixe pour les images */
    object-fit: cover; /* Conserver les proportions et remplir le conteneur */
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s;
    margin-top: 1%;
}

.gallery img:hover {
    transform: scale(1.05);
}

.gallery img:hover {
    transform: scale(1.05);
}
 
.Works{
    position: absolute;
    margin-top: 100px;
    left: 5%;
    transform: translateY(-50%); /* Centrer verticalement */
}
.Works ul {
    list-style-type: none; /* Supprimer les points */
    padding: 0;
    color: black; /* Texte noir */
}

.Works ul li {
    margin-bottom: 10px;
    color: black; /* Texte noir */
}

.Works ul li a {
    color: black; /* Texte noir pour les liens */
    text-decoration: none; /* Supprimer le soulignement des liens */
    outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:hover {
    color: black; /* Texte noir pour les liens au survol */
    text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
    outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:focus {
    outline: none; /* Supprimer l'encadrement en pointillé jaune */
}

  
/* Styles pour .conteneur2 */
.conteneur2 {
    position: absolute;
    top: calc(50% + 100px); /* Positionner en dessous de .Works-UNTITLED */
    left: -8px; /* Positionner à gauche */
    width: 200px; /* Ajuster la largeur selon vos besoins */
    padding: 10px; /* Ajouter du padding */
    text-align: justify;
   
}

.texte3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.texte4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.texte1 {
    font-size: 14px;
    margin-bottom: 10px;
}



.gallery_2-container{
    text-align: center;
    margin: 210px;
    padding: 20px;
    border-radius: 10px;
    /* Pour déplacer le conteneur plus à droite */
    margin-left: auto;
    margin-right:550px;
    width: 200px; /* Réduire la largeur du conteneur */
}
.gallery_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.photo{
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    /* Pour rendre les images plus petites, ajustez la largeur maximale */
    max-width: 600px;
}
.photo-untitled {
    width: 150%; /* Prendre toute la largeur disponible */
    max-width: 300px; /* Limiter la largeur maximale de l'image */
    height: auto; /* Ajuster la hauteur automatiquement */
}
    .copyright {
        font-size: 12px;
        color: #666;
        margin-top: 10px;
       margin-left: 650px;
    }
    
    .audio-container {
        display: flex;
        justify-content: center; /* Centrer horizontalement */
        align-items: center; /* Centrer verticalement */
        margin-top: 10px; /* Ajouter une marge supérieure pour espacer du contenu précédent */
        width: 100%; /* Prendre toute la largeur disponible */
    }
    
    .audio-container audio {
        width: 300px; /* Ajuster la largeur de la barre de son */
        height: 30px; /* Ajuster la hauteur de la barre de son */
    }
    
        
    
    /*Page About*/
    .bio-container {
        display: flex;
        align-items: flex-start; /* Aligner les éléments en haut */
        gap: 20px; /* Espace entre la photo et le texte */
        margin: 220px auto; /* Ajouter une marge autour du conteneur et centrer horizontalement */
        width: 80%; /* Réduire la largeur du conteneur */
        max-width: 800px; /* Limiter la largeur maximale */
    }
    
    .bio-container img {
        max-width: 300px; /* Ajuster la largeur maximale de la photo */
        height: auto; /* Ajuster la hauteur automatiquement */
        margin-top: 55px;
        
    }
    
    .text-content {
        flex: 1; /* Prendre tout l'espace disponible */
        text-align: justify; /* Justifier le texte */
    }
    
    .italique {
        font-style: italic; /* Texte en italique */
    }
    
    .text-content2 {
        font-size: 0.9em; /* Taille de police légèrement plus grande */
       top: 420px;
       font-style: italic; /* Texte en italique */
    }
    .contact-container {
        text-align: center; /* Centrer le texte à l'intérieur du conteneur */
        padding: 20px;
    margin-top: 350px;
       
    
    }
    
    .contacts_gras {
        font-weight: bold; /* Mettre le texte en gras */
    }
}
@media  (max-width: 1381px) 
{
.body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
     background-color:white;
     color: #333;
     height: 100%; /* Assurez-vous que le html et le body prennent toute la hauteur de la fenêtre */
     
   
 }
 /* Assurez-vous que tous les liens n'ont pas de soulignement */
 .a {
     text-decoration: none; /* Supprimer la surlignure pour tous les liens */
 }
 
 /* Styles pour le titre */
 .works_soustitre {
     display: fixed;
     font-size: 1.5em; /* Taille de police moyenne */
     margin: 20px 0; /* Marge en haut et en bas réduite */
     color: black;
     font-weight: bold; /* Mettre le texte en gras */
     text-decoration: none; /* Supprimer la surlignure */
     position: absolute; /* Positionner absolument par rapport à la page */
     top: 0px; /* Positionner plus haut sur la page */
     left: 65px; /* Positionner à gauche de la page */
 }
 
 /* Styles pour le sous-titre */
 .Sous_titre {
     display: fixed;
     font-size: 1.2em; /* Taille de police légèrement plus petite */
     margin: 10px 0; /* Marge en haut et en bas réduite */
     color: black;
     font-weight: normal; /* Texte normal */
     text-decoration: none; /* Supprimer la surlignure */
     position: absolute; /* Positionner absolument par rapport à la page */
     top: 40px; /* Positionner plus haut sur la page, en dessous du titre */
     left: 65px; /* Positionner à gauche de la page */
 }
 
     /* Styles pour le menu hamburger */
 .hamburger-menu {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 20px; /* Hauteur totale des trois barres */
     cursor: pointer; /* Ajouter un curseur de pointeur */
     position: fixed; /* Positionner le menu en haut à droite de la page */
     top: 40px; /* Ajuster la position du haut */
     right: 100px; /* Ajuster la position de droite */
 }
 
 .bar {
     width: 30px; /* Largeur des barres */
     height: 3px; /* Hauteur des barres */
     background-color: #444; /* Couleur des barres */
 }
 
 /* Styles pour le menu */
 .menu {
     display: none; /* Masquer le menu par défaut */
     list-style: none;
     padding: 0;
     margin: 0;
     position: fixed; /* Positionner le menu en haut à droite de la page */
     top: 30px; /* Ajuster la position du haut pour être en dessous du hamburger */
     right: 20px; /* Ajuster la position de droite */
      z-index: 1000; /* Assurer que le menu est au-dessus des autres éléments */
 }
 
 .menu.active {
     display: block; /* Afficher le menu lorsqu'il est actif */
 }
 
 .menu li {
     margin: 10px; /* Espacement entre les éléments du menu */
 }
 
 .menu a {
     text-decoration: none;
     color: #333;
     font-size: 1em;
     display: block; background-color: #f0f0f0; /* Changer la couleur de fond au survol */
 }
 /* Styles pour .suite */
 .suite {
     display: none; /* Masquer par défaut */
     font-size: 14px;
     margin-top: 10px;
     color: black; /* Texte en noir */
     text-align: justify;
     border: none; /* Aucune bordure */
     box-shadow: none; /* Supprimer les ombres */
     outline: none; /* Supprimer les contours */
 }
 
 /* Styles pour .mon-bouton */
 .mon-bouton {
     display: inline-block;
     padding: 10px 10px;
     font-size: 14px;
     color: black; /* Texte en noir */
 
     background-color: white;/* Fond transparent **/
     border: none; /* Aucune bordure */
     cursor: pointer;
     text-align: justify;
     text-decoration: none; /* Supprimer la décoration de texte */
     box-shadow: none; /* Supprimer les ombres */
     outline: none; /* Supprimer les contours */
 }
     
 
 /* Styles pour le sélecteur de langue */
 .language-selector {
     position: absolute;
     top: 10px;
     right: 10px;
     background-color: #f9f9f9;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .language-selector a {
     margin: 0 5px;
     text-decoration: none;
     color: #333;
     font-weight: bold;
 }
 /* css selecteur de langue*/
 
 .language-selector {
     position: absolute;
     bottom: -15px; /* Ajuster cette valeur pour la distance du bas */
     right: 100px; /* Ajuster cette valeur pour la distance de la droite */
     font-size: 8px;
     top: 780px;
     margin: 0; /* Supprimer les marges */
     padding: 0; /* Supprimer les padding */
     display: flex; /* Utiliser flexbox pour aligner les liens */
     justify-content: flex-end; /* Aligner les liens à droite */
     align-items: center; /* Centrer verticalement les liens */
 }
 
 
 .language-selector a {
     color: black; /* Texte noir pour les liens */
     text-decoration: none; /* Supprimer le soulignement des liens */
     margin-left: 10px; /* Espacement entre les liens */
     font-size: 10px;
 }
 
 .language-selector a:hover {
     text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
 }
 /* Styles pour le conteneur du carrousel */
 
 
 .carousel {
     display: flex;
     transition: transform 0.5s ease-in-out;
     width: 90%; /* Largeur de 60% */
     height: 90%; /* Hauteur de 60% */
     justify-content: center;
     align-items: center;
     position: absolute;
     top: 110px; /* Ajuster cette valeur pour abaisser le carrousel */
     left: 5%; /* Ajuster cette valeur pour déplacer le carrousel vers la droite */
 }
 
 
 
 
 
 .carousel img {
     display: flex; /* Supprime l'espace blanc causé par inline-block */
     max-width: 60%; /* Assurer que l'image prend toute la largeur du carrousel */
     max-height: 60%; /* Assurer que l'image prend toute la hauteur du carrousel */
     object-fit: cover; /* Recadre l'image pour remplir tout l'espace */
 }
 
 .prev, .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     padding: 16px;
     margin-top: 35px;
     color: black;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     user-select: none;
 }
 
 .prev {
     left: 250px; /* Positionner à gauche du conteneur */
     border-radius: 0 3px 3px 0;
 }
 
 .next {
     right: 250px; /* Positionner à droite du conteneur */
     border-radius: 3px 0 0 3px;
 }
 
 .prev:hover, .next:hover {
     background-color: rgba(0, 0, 0, 0.8);
 }
 
 .photo-caption {
     font-size: 0.8em; /* Taille de police */
     color: #666; /* Couleur du texte */
     display: inline-block; /* Afficher en ligne */
     margin-right:-450px; /* Espacement à gauche de la photo */
     vertical-align: top; /* Aligner en haut */
     white-space: nowrap; /* Empêcher le texte de se déplacer en dessous */
    
 }
 
 
/*page works  */

.gallery-container {
 flex: 3;
 display: flex;
 justify-content: center;
 margin-top: 200px; /* Ajouter une marge supérieure pour abaisser les images */
margin-left: 120px;
}

.gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px; /* Réduire l'espace entre les images */
 width: 680px; /* Largeur fixe pour la galerie (3 images de 200px + 2 gaps de 10px) */
 padding: 10px; /* Ajouter du padding */
}

.gallery img {
 width: 200px; /* Largeur fixe pour chaque image */
 height: 130px; /* Hauteur fixe pour les images */
 object-fit: cover; /* Conserver les proportions et remplir le conteneur */
 cursor: pointer;
 border: 2px solid #ddd;
 border-radius: 5px;
 transition: transform 0.3s;
 margin-top: 1%;
}

.gallery img:hover {
 transform: scale(1.05);
}

.gallery img:hover {
 transform: scale(1.05);
}

.Works{
 position: absolute;
 margin-top: 100px;
 left: 5%;
 transform: translateY(-50%); /* Centrer verticalement */
}
.Works ul {
 list-style-type: none; /* Supprimer les points */
 padding: 0;
 color: black; /* Texte noir */
}

.Works ul li {
 margin-bottom: 10px;
 color: black; /* Texte noir */
}

.Works ul li a {
 color: black; /* Texte noir pour les liens */
 text-decoration: none; /* Supprimer le soulignement des liens */
 outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:hover {
 color: black; /* Texte noir pour les liens au survol */
 text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
 outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:focus {
 outline: none; /* Supprimer l'encadrement en pointillé jaune */
}


/* Styles pour .conteneur2 */
.conteneur2 {
 position: absolute;
 top: calc(50% + 100px); /* Positionner en dessous de .Works-UNTITLED */
 left: -8px; /* Positionner à gauche */
 width: 200px; /* Ajuster la largeur selon vos besoins */
 padding: 10px; /* Ajouter du padding */
 text-align: justify;

}

.texte3 {
 font-size: 14px;
 font-weight: bold;
 margin-bottom: 10px;
}

.texte4 {
 font-size: 14px;
 margin-bottom: 5px;
}

.texte1 {
 font-size: 14px;
 margin-bottom: 10px;
}



.gallery_2-container{
 text-align: center;
 display: flex;
 justify-content: center;
 margin: 210px;
 padding: 20px;
 border-radius: 10px;
 /* Pour déplacer le conteneur plus à droite */
 margin-left: auto;
 margin-right:450px;
 width: 200px; /* Réduire la largeur du conteneur */
}
.gallery_2 {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}


.photo{
 max-width: 100%;
 height: auto;
 margin-bottom: 10px;
 /* Pour rendre les images plus petites, ajustez la largeur maximale */
 max-width: 600px;
}
.photo-untitled {
 width: 150%; /* Prendre toute la largeur disponible */
 max-width: 300px; /* Limiter la largeur maximale de l'image */
 height: auto; /* Ajuster la hauteur automatiquement */
}
 .copyright {
     font-size: 12px;
     color: #666;
     margin-top: 10px;
    margin-left: 650px;
 }
 
 .audio-container {
     display: flex;
     justify-content: center; /* Centrer horizontalement */
     align-items: center; /* Centrer verticalement */
     margin-top: 10px; /* Ajouter une marge supérieure pour espacer du contenu précédent */
     width: 100%; /* Prendre toute la largeur disponible */
 }
 
 .audio-container audio {
     width: 300px; /* Ajuster la largeur de la barre de son */
     height: 30px; /* Ajuster la hauteur de la barre de son */
 }
 
     
 
 /*Page About*/
 .bio-container {
     display: flex;
     align-items: flex-start; /* Aligner les éléments en haut */
     gap: 20px; /* Espace entre la photo et le texte */
     margin: 220px auto; /* Ajouter une marge autour du conteneur et centrer horizontalement */
     width: 80%; /* Réduire la largeur du conteneur */
     max-width: 800px; /* Limiter la largeur maximale */
 }
 
 .bio-container img {
     max-width: 300px; /* Ajuster la largeur maximale de la photo */
     height: auto; /* Ajuster la hauteur automatiquement */
     margin-top: 55px;
     
 }
 
 .text-content {
     flex: 1; /* Prendre tout l'espace disponible */
     text-align: justify; /* Justifier le texte */
 }
 
 .italique {
     font-style: italic; /* Texte en italique */
 }
 
 .text-content2 {
     font-size: 0.9em; /* Taille de police légèrement plus grande */
    top: 420px;
    font-style: italic; /* Texte en italique */
 }
 .contact-container {
     text-align: center; /* Centrer le texte à l'intérieur du conteneur */
     padding: 20px;
 margin-top: 350px;
    
 
 }
 
 .contacts_gras {
     font-weight: bold; /* Mettre le texte en gras */
 }
}
@media  (max-width: 1200px) {

 .body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
     background-color:white;
     color: #333;
     height: 100%; /* Assurez-vous que le html et le body prennent toute la hauteur de la fenêtre */
     
   
 }
 /* Assurez-vous que tous les liens n'ont pas de soulignement */
 .a {
     text-decoration: none; /* Supprimer la surlignure pour tous les liens */
 }
 
 /* Styles pour le titre */
 .works_soustitre {
     display: fixed;
     font-size: 1.5em; /* Taille de police moyenne */
     margin: 20px 0; /* Marge en haut et en bas réduite */
     color: black;
     font-weight: bold; /* Mettre le texte en gras */
     text-decoration: none; /* Supprimer la surlignure */
     position: absolute; /* Positionner absolument par rapport à la page */
     top: 0px; /* Positionner plus haut sur la page */
     left: 65px; /* Positionner à gauche de la page */
 }
 
 /* Styles pour le sous-titre */
 .Sous_titre {
     display: fixed;
     font-size: 1.2em; /* Taille de police légèrement plus petite */
     margin: 10px 0; /* Marge en haut et en bas réduite */
     color: black;
     font-weight: normal; /* Texte normal */
     text-decoration: none; /* Supprimer la surlignure */
     position: absolute; /* Positionner absolument par rapport à la page */
     top: 40px; /* Positionner plus haut sur la page, en dessous du titre */
     left: 65px; /* Positionner à gauche de la page */
 }
 
     /* Styles pour le menu hamburger */
 .hamburger-menu {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 20px; /* Hauteur totale des trois barres */
     cursor: pointer; /* Ajouter un curseur de pointeur */
     position: fixed; /* Positionner le menu en haut à droite de la page */
     top: 40px; /* Ajuster la position du haut */
     right: 100px; /* Ajuster la position de droite */
 }
 
 .bar {
     width: 30px; /* Largeur des barres */
     height: 3px; /* Hauteur des barres */
     background-color: #444; /* Couleur des barres */
 }
 
 /* Styles pour le menu */
 .menu {
     display: none; /* Masquer le menu par défaut */
     list-style: none;
     padding: 0;
     margin: 0;
     position: fixed; /* Positionner le menu en haut à droite de la page */
     top: 30px; /* Ajuster la position du haut pour être en dessous du hamburger */
     right: 20px; /* Ajuster la position de droite */
      z-index: 1000; /* Assurer que le menu est au-dessus des autres éléments */
 }
 
 .menu.active {
     display: block; /* Afficher le menu lorsqu'il est actif */
 }
 
 .menu li {
     margin: 0; /* Espacement entre les éléments du menu */
 }
 
 .menu a {
     text-decoration: none;
     color: #333;
     font-size: 1em;
     display: block; background-color: #f0f0f0; /* Changer la couleur de fond au survol */
 }
 /* Styles pour .suite */
 .suite {
     display: none; /* Masquer par défaut */
     font-size: 14px;
     margin-top: 10px;
     color: black; /* Texte en noir */
     text-align: justify;
     border: none; /* Aucune bordure */
     box-shadow: none; /* Supprimer les ombres */
     outline: none; /* Supprimer les contours */
 }
 
 /* Styles pour .mon-bouton */
 .mon-bouton {
     display: inline-block;
     padding: 10px 10px;
     font-size: 14px;
     color: black; /* Texte en noir */
 
     background-color: white;/* Fond transparent **/
     border: none; /* Aucune bordure */
     cursor: pointer;
     text-align: justify;
     text-decoration: none; /* Supprimer la décoration de texte */
     box-shadow: none; /* Supprimer les ombres */
     outline: none; /* Supprimer les contours */
 }
     
 
 /* Styles pour le sélecteur de langue */
 .language-selector {
     position: absolute;
     top: 10px;
     right: 10px;
     background-color: #f9f9f9;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .language-selector a {
     margin: 0 5px;
     text-decoration: none;
     color: #333;
     font-weight: bold;
 }
 /* css selecteur de langue*/
 
 .language-selector {
     position: absolute;
     bottom: -15px; /* Ajuster cette valeur pour la distance du bas */
     right: 100px; /* Ajuster cette valeur pour la distance de la droite */
     font-size: 8px;
     top: 780px;
     margin: 0; /* Supprimer les marges */
     padding: 0; /* Supprimer les padding */
     display: flex; /* Utiliser flexbox pour aligner les liens */
     justify-content: flex-end; /* Aligner les liens à droite */
     align-items: center; /* Centrer verticalement les liens */
 }
 
 
 .language-selector a {
     color: black; /* Texte noir pour les liens */
     text-decoration: none; /* Supprimer le soulignement des liens */
     margin-left: 10px; /* Espacement entre les liens */
     font-size: 10px;
 }
 
 .language-selector a:hover {
     text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
 }
 /* Styles pour le conteneur du carrousel */
 
 
 .carousel {
     display: flex;
     transition: transform 0.5s ease-in-out;
     width: 90%; /* Largeur de 60% */
     height: 90%; /* Hauteur de 60% */
     justify-content: center;
     align-items: center;
     position: absolute;
     top: 110px; /* Ajuster cette valeur pour abaisser le carrousel */
     left: 5%; /* Ajuster cette valeur pour déplacer le carrousel vers la droite */
 }
 
 
 
 
 
 .carousel img {
     display: flex; /* Supprime l'espace blanc causé par inline-block */
     max-width: 60%; /* Assurer que l'image prend toute la largeur du carrousel */
     max-height: 60%; /* Assurer que l'image prend toute la hauteur du carrousel */
     object-fit: cover; /* Recadre l'image pour remplir tout l'espace */
 }
 
 .prev, .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     padding: 16px;
     margin-top: 35px;
     color: black;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     user-select: none;
 }
 
 .prev {
     left: 250px; /* Positionner à gauche du conteneur */
     border-radius: 0 3px 3px 0;
 }
 
 .next {
     right: 250px; /* Positionner à droite du conteneur */
     border-radius: 3px 0 0 3px;
 }
 
 .prev:hover, .next:hover {
     background-color: rgba(0, 0, 0, 0.8);
 }
 
 .photo-caption {
     font-size: 0.8em; /* Taille de police */
     color: #666; /* Couleur du texte */
     display: inline-block; /* Afficher en ligne */
     margin-right:-450px; /* Espacement à gauche de la photo */
     vertical-align: top; /* Aligner en haut */
     white-space: nowrap; /* Empêcher le texte de se déplacer en dessous */
    
 }
 
 
/*page works  */

.gallery-container {
 flex: 3;
 display: flex;
 justify-content: center;
 margin-top: 200px; /* Ajouter une marge supérieure pour abaisser les images */
margin-left: 120px;
}

.gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px; /* Réduire l'espace entre les images */
 width: 680px; /* Largeur fixe pour la galerie (3 images de 200px + 2 gaps de 10px) */
 padding: 10px; /* Ajouter du padding */
}

.gallery img {
 width: 200px; /* Largeur fixe pour chaque image */
 height: 130px; /* Hauteur fixe pour les images */
 object-fit: cover; /* Conserver les proportions et remplir le conteneur */
 cursor: pointer;
 border: 2px solid #ddd;
 border-radius: 5px;
 transition: transform 0.3s;
 margin-top: 1%;
}

.gallery img:hover {
 transform: scale(1.05);
}

.gallery img:hover {
 transform: scale(1.05);
}

.Works{
 position: absolute;
 margin-top: 100px;
 left: 5.5%;
 transform: translateY(-50%); /* Centrer verticalement */
}
.Works ul {
 list-style-type: none; /* Supprimer les points */
 padding: 0;
 color: black; /* Texte noir */
}

.Works ul li {
 margin-bottom: 10px;
 color: black; /* Texte noir */
}

.Works ul li a {
 color: black; /* Texte noir pour les liens */
 text-decoration: none; /* Supprimer le soulignement des liens */
 outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:hover {
 color: black; /* Texte noir pour les liens au survol */
 text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
 outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:focus {
 outline: none; /* Supprimer l'encadrement en pointillé jaune */
}


/* Styles pour .conteneur2 */
.conteneur2 {
 position: absolute;
 top: calc(50% + 100px); /* Positionner en dessous de .Works-UNTITLED */
 left: -8px; /* Positionner à gauche */
 width: 200px; /* Ajuster la largeur selon vos besoins */
 padding: 10px; /* Ajouter du padding */
 text-align: justify;

}

.texte3 {
 font-size: 14px;
 font-weight: bold;
 margin-bottom: 10px;
}

.texte4 {
 font-size: 14px;
 margin-bottom: 5px;
}

.texte1 {
 font-size: 14px;
 margin-bottom: 10px;
}



.gallery_2-container{
 text-align: center;
 display: flex;
 justify-content: center;
 margin: 210px;
 padding: 20px;
 border-radius: 10px;
 /* Pour déplacer le conteneur plus à droite */
 margin-left: auto;
 margin-right:350px;
 width: 200px; /* Réduire la largeur du conteneur */
}
.gallery_2 {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}


.photo{
 max-width: 90%;
 height: auto;
 margin-bottom: 10px;
 /* Pour rendre les images plus petites, ajustez la largeur maximale */
 max-width: 500px;
}
.photo-untitled {
 width: 150%; /* Prendre toute la largeur disponible */
 max-width: 300px; /* Limiter la largeur maximale de l'image */
 height: auto; /* Ajuster la hauteur automatiquement */
}
 .copyright {
     font-size: 12px;
     color: #666;
     margin-top: 10px;
    margin-left: 650px;
 }
 
 .audio-container {
     display: flex;
     justify-content: center; /* Centrer horizontalement */
     align-items: center; /* Centrer verticalement */
     margin-top: 10px; /* Ajouter une marge supérieure pour espacer du contenu précédent */
     width: 100%; /* Prendre toute la largeur disponible */
 }
 
 .audio-container audio {
     width: 300px; /* Ajuster la largeur de la barre de son */
     height: 30px; /* Ajuster la hauteur de la barre de son */
 }
 
     
 
 /*Page About*/
 .bio-container {
     display: flex;
     align-items: flex-start; /* Aligner les éléments en haut */
     gap: 20px; /* Espace entre la photo et le texte */
     margin: 220px auto; /* Ajouter une marge autour du conteneur et centrer horizontalement */
     width: 80%; /* Réduire la largeur du conteneur */
     max-width: 800px; /* Limiter la largeur maximale */
 }
 
 .bio-container img {
     max-width: 300px; /* Ajuster la largeur maximale de la photo */
     height: auto; /* Ajuster la hauteur automatiquement */
     margin-top: 55px;
     
 }
 
 .text-content {
     flex: 1; /* Prendre tout l'espace disponible */
     text-align: justify; /* Justifier le texte */
 }
 
 .italique {
     font-style: italic; /* Texte en italique */
 }
 
 .text-content2 {
     font-size: 0.9em; /* Taille de police légèrement plus grande */
    top: 420px;
    font-style: italic; /* Texte en italique */
 }
 .contact-container {
     text-align: center; /* Centrer le texte à l'intérieur du conteneur */
     padding: 20px;
 margin-top: 350px;
    
 
 }
 
 .contacts_gras {
     font-weight: bold; /* Mettre le texte en gras */
 }

 }
 @media  (max-width: 1100px) {

    .gallery_2-container{
        text-align: center;
        display: flex;
        justify-content: center;
        margin: 210px;
        padding: 20px;
        border-radius: 10px;
        /* Pour déplacer le conteneur plus à droite */
        margin-left: auto;
        margin-right:350px;
        width: 200px; /* Réduire la largeur du conteneur */
       }
       .gallery_2 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
       }
       .photo{
        max-width: 80%;
        height: auto;
        margin-bottom: 10px;
        /* Pour rendre les images plus petites, ajustez la largeur maximale */
        max-width: 400px;
       }
    }
 @media  (max-width: 931px) {
     
        .gallery_2-container{
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 210px;
            padding: 20px;
            border-radius: 10px;
            /* Pour déplacer le conteneur plus à droite */
            margin-left: auto;
            margin-right:250px;
            width: 200px; /* Réduire la largeur du conteneur */
           }
           .gallery_2 {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
           }
           .photo{
            max-width: 80%;
            height: auto;
            margin-bottom: 10px;
            /* Pour rendre les images plus petites, ajustez la largeur maximale */
            max-width: 300px;
           }
        }
@media (max-width: 763px) {
    .body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color: white;
        color: #333;
        height: 100%; /* Assurez-vous que le html et le body prennent toute la hauteur de la fenêtre */
    }

    /* Assurez-vous que tous les liens n'ont pas de soulignement */
    .a {
        text-decoration: none; /* Supprimer la surlignure pour tous les liens */
    }

    /* Styles pour le titre */
    .works_soustitre {
        display: block;
        font-size: 1em; /* Taille de police réduite pour téléphones */
        margin: 20px 0; /* Marge en haut et en bas réduite */
        color: black;
        font-weight: bold; /* Mettre le texte en gras */
        text-decoration: none; /* Supprimer la surlignure */
        position: absolute; /* Positionner absolument par rapport à la page */
        top: 0px; /* Positionner plus haut sur la page */
        left: 20px; /* Positionner à gauche de la page */
    }

    /* Styles pour le sous-titre */
    .Sous_titre {
        display: block;
        font-size: 0.8em; /* Taille de police légèrement plus petite */
        margin: 10px 0; /* Marge en haut et en bas réduite */
        color: black;
        font-weight: normal; /* Texte normal */
        text-decoration: none; /* Supprimer la surlignure */
        position: absolute; /* Positionner absolument par rapport à la page */
        top: 40px; /* Positionner plus haut sur la page, en dessous du titre */
        left: 20px; /* Positionner à gauche de la page */
    }

    .hamburger-menu {
        display: none; /* Masquer le menu hamburger sur les smartphones */
    }

    .menu {
     
        
        position: absolute; /* Positionner absolument par rapport à la page */
        left: 200px; /* Positionner à gauche de la page */
       
        display: flex; /* Afficher le menu en ligne sur les smartphones */
        top: 20px; /* Ajuster la position du haut pour descendre le menu */

        width: 50%; /* Occuper toute la largeur de la page */
     
        z-index: 1001; /* Assurer que le menu est au-dessus des autres éléments */
    }
    .menu li {
        margin: 0 5px; /* Réduire l'espace entre les éléments du menu */
    }
    .menu ul {
        display: flex; /* Afficher les éléments en ligne */
        justify-content: space-around; /* Espacer les liens */
        width: 100%; /* Occuper toute la largeur de la page */
        padding: 0; /* Supprimer le padding par défaut */
        margin: 0; /* Supprimer la marge par défaut */
    }

   

    .menu a {
      
        color: #333;
        font-size: 0.8em;
        font-weight: bold; /* Rendre le texte en gras */
      
    }

   

/* Styles pour le conteneur des images */
.gallery_2-container {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    width: 100%; /* Prendre toute la largeur disponible */
}

.gallery_2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligner les images à gauche */
    margin: -70px 0; /* Ajouter une marge supérieure pour remonter */
    padding-left: 130px; /* Ajouter un padding à gauche pour décaler les images */
   
}

.photo {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    /* Pour rendre les images plus petites, ajustez la largeur maximale */
    max-width: 200px;
}
.language-selector
{ font-size: 0.3em;
    top: 800px;
}
.carousel {
    display: flex;
    justify-content: center; /* Centrer le carrousel horizontalement */
    align-items: center; /* Centrer le carrousel verticalement */
    margin: 0 auto; /* Centrer le carrousel horizontalement */
    width: 110%; /* Ajuster la largeur du carrousel */
    height: auto; /* Ajuster la hauteur automatiquement */
    overflow: hidden; /* Masquer les parties des images qui débordent */
    position: relative; /* Positionner le carrousel relativement pour les éléments enfants */
    top: 210px;
    left: -20px;
}

.carousel img {
    display: none; /* Masquer toutes les images par défaut */
    width: 100%; /* Prendre toute la largeur disponible */
    height: auto; /* Ajuster la hauteur automatiquement */
    object-fit: cover; /* Conserver les proportions et remplir le conteneur */
}

.carousel img.active {
    display: block; /* Afficher l'image active */
}
.prev, .next {
    display: none; /* Masquer les flèches de navigation */
}
.gallery-container {
    display: flex;
    justify-content: flex-start; /* Aligner la galerie à gauche */
    margin-top: 150px; /* Ajouter une marge supérieure pour abaisser les images */
    margin-left: 150px; /* Décaler la galerie vers la droite */
}

.gallery {
    display: flex;
    flex-wrap: wrap; /* Permettre aux images de se répartir sur plusieurs lignes */
    justify-content: flex-start; /* Aligner les images à gauche */
    gap: 10px; /* Ajouter un espace entre les images */
    width: 100%; /* Prendre toute la largeur disponible */
}

.gallery img {
    width: 100%; /* Prendre toute la largeur disponible */
    max-width: 300px; /* Limiter la largeur maximale des images */
    height: auto; /* Ajuster la hauteur automatiquement */
    object-fit: cover; /* Conserver les proportions et remplir le conteneur */
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s;
}
.photo-untitled {
    width: 100%; /* Prendre toute la largeur disponible */
    max-width: 150px; /* Limiter la largeur maximale de l'image */
    height: auto; /* Ajuster la hauteur automatiquement */
}
.gallery img:hover {
    transform: scale(1.05);
}

.gallery img:hover {
    transform: scale(1.05);
}
/* Styles pour le menu "Works" */
.Works {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligner les éléments à gauche */
    margin-top: -20px; /* Ajuster la marge supérieure pour aligner avec la première photo */
    width: 200px; /* Ajuster la largeur selon vos besoins */
    text-align: left; /* Aligner le texte à gauche */
    position: absolute; /* Positionner absolument */
    top: 240px; /* Ajuster la position verticale pour aligner avec la première photo */
    left: 20px; /* Positionner à gauche */
    font-size: 0.5em; /* Taille de police réduite pour téléphones */
}

.Works ul {
    list-style-type: none; /* Supprimer les points */
    padding: 0;
    color: black; /* Texte noir */
}

.Works ul li {
    margin-bottom: 10px;
    color: black; /* Texte noir */
}

.Works ul li a {
    color: black; /* Texte noir pour les liens */
    text-decoration: none; /* Supprimer le soulignement des liens */
    outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:hover {
    color: black; /* Texte noir pour les liens au survol */
    text-decoration: underline; /* Ajouter un soulignement au survol si souhaité */
    outline: none; /* Supprimer l'encadrement en pointillé */
}

.Works ul li a:focus {
    outline: none; /* Supprimer l'encadrement en pointillé jaune */
}

.photo-caption {
    font-size: 0.3em;
}

/* Styles pour .conteneur2 */
.conteneur2 {
    width: 50%; /* Prendre toute la largeur disponible */
    padding: 20px; /* Ajouter du padding */
    position: absolute; /* Positionner absolument */
    top: 120px; /* Ajuster la position verticale pour remonter */
    left: -20px; /* Positionner à gauche */
    text-align: justify;
}

.texte3, .texte4, .texte1 {
    font-size: 0.8em; /* Taille de police réduite pour téléphones */
    margin-bottom: 10px;
}

.suite {
    display: none;
    font-size: 0.8em;
    margin-top: 10px;
    color: black;
}

.mon-bouton {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.8em;
    color: black;
    background-color: #f4f4f4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
    .copyright {
        font-size: 12px;
        color: #666;
        margin-top: 10px;
        text-align: center;
    }

    /* Page About */
    .bio-container {
        display: flex;
        flex-direction: column; /* Aligner les éléments en colonne */
        align-items: center; /* Centrer les éléments horizontalement */
        gap: 20px; /* Espace entre la photo et le texte */
        margin: 20px auto; /* Ajouter une marge autour du conteneur et centrer horizontalement */
        width: 90%; /* Prendre presque toute la largeur disponible */
    }

    .bio-container img {
        max-width: 150px; /* Ajuster la largeur maximale de la photo */
        height: auto; /* Ajuster la hauteur automatiquement */
        margin-top: 130px; /* Réduire la marge supérieure */
    }

    .text-content {
        width: 100%; /* Prendre toute la largeur disponible */
        text-align: justify; /* Justifier le texte */
        margin-top: 20px; /* Ajouter une marge supérieure */
        font-size: 0.8em; /* Taille de police légèrement plus grande */
    }

    .italique {
        font-style: italic; /* Texte en italique */
    }

    .text-content2 {
        font-size: 1em; /* Taille de police légèrement plus grande */
        top: 120px;
        font-style: italic; /* Texte en italique */
    }
    .audio-container {
        display: flex;
        justify-content: flex-end; /* Aligner le conteneur audio à droite */
        align-items: center;
        width: 100%; /* Prendre toute la largeur disponible */
        position: absolute; /* Permettre l'utilisation de top et right pour ajuster la position */
        top: 450px; /* Remonter le conteneur audio */
        right: 80px;; /* Décaler le conteneur audio vers la droite */
        margin-top: 20px; /* Ajouter une marge supérieure */

    }
    
    .audio-container audio {
        width: 100px; /* Ajuster la largeur de la barre de son */
        height: 20px; /* Ajuster la hauteur de la barre de son */
    }
    .contacts_gras {
        font-weight: bold; /* Mettre le texte en gras */
        top: 20px;
    }
  
    
}