/* styles.css */

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    margin: 0;
    /* Supprime les marges par défaut autour du contenu de la page */
    
    font-family: "neue-haas-unica", sans-serif;
font-weight: 400;
font-style: normal;
    flex: 1;
    /* Permet à la zone de contenu de s'étendre pour occuper tout l'espace disponible */
padding-top: 30px; /* pour pas que le header masque le contenu en haut de la page lorsque tu scrolles */
padding-bottom: 40px;
}

* {
    margin: 0; /* Supprime toutes les marges */
    padding: 0; /* Supprime tous les paddings */
    box-sizing: border-box; /* Assure une gestion cohérente des dimensions */
}

img, a, button {
  border: none;
  outline: none;
}


                                                                          
/* 

88                                            88                          
88                                            88                          
88                                            88                          
88,dPPYba,    ,adPPYba,  ,adPPYYba,   ,adPPYb,88   ,adPPYba,  8b,dPPYba,  
88P'    "8a  a8P_____88  ""     `Y8  a8"    `Y88  a8P_____88  88P'   "Y8  
88       88  8PP"""""""  ,adPPPPP88  8b       88  8PP"""""""  88          
88       88  "8b,   ,aa  88,    ,88  "8a,   ,d88  "8b,   ,aa  88          
88       88   `"Ybbd8"'  `"8bbdP"Y8   `"8bbdP"Y8   `"Ybbd8"'  88 */

/* ===== HEADER GLOBAL ===== */
header {
  font-family: "neue-haas-unica", sans-serif;
  position: fixed;           /* Le header reste toujours visible en haut */
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;    /* Fond blanc pour masquer le contenu derrière */
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 18px;
  padding-right: 9px;
  height: 42px;
  
}



/* ===== CONTENEUR PRINCIPAL ===== */


.header-container {
  display: flex;              /* Aligne tout sur une seule ligne */
  justify-content: flex-start; /* Espace entre la partie gauche et droite */
  align-items: center;        /* Centre verticalement tous les éléments */
  margin-bottom: 1px;
  gap: 20vw;
}
/* ===== PARTIE GAUCHE : nom + navigation ===== */

/* ===== NOM ===== */
.name {

  font-size: 0.9rem;
  font-weight: normal;
  white-space: nowrap;
  max-width: 14vw;
}

.left {

  display: flex;
  align-items: center;
  gap: 30px;                  /* Espacement entre chaque lien du menu gauche */
  
}

/* ===== PARTIE DROITE : "A propos" + langues ===== */
.right {
  display: flex;                 /* aligne horizontalement A propos + langues */
  align-items: center;           /* centre verticalement */
  gap: 12px;                     /* espace entre A propos et langues */
  width: max-content;             /* largeur minimale pour contenir le contenu uniquement */
  justify-content: flex-end;      /* pousse le contenu à droite à l’intérieur de .right */


}


/* ===== SWITCH LANGUE ===== */
.lang-switch {

  display: flex;
  align-items: center;
  gap: 10px;                  /* Espacement entre EN et FR */
  border: none;               /* Retire la bordure inutile */
  margin: 0;                  /* Évite tout décalage vertical ou horizontal */
  padding: 0;
}

/* Lien de langue (EN / FR) */
.lang-option {
  
  display: flex;
  align-items: center;
  gap: 4px;                   /* Petit espace entre le rond et le texte */
  cursor: pointer;
  text-decoration: none;
  color: black;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* Rond vide */
.lang-option .circle {
  width: 12px;
  height: 12px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

/* Rond plein quand actif */
.lang-option.active .circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centre le rond plein */
  width: 6px;   /* taille du rond intérieur */
  height: 6px;
  background: black;
  border-radius: 50%;
}



/* ===== LIENS DU HEADER ===== */

.header-titles {

  font-size: 0.9rem;
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.012rem;
  border: none;               /* Supprime ta bordure verte de débogage */
}

/* ===== LIENS GÉNÉRAUX ===== */
.link, .header-titles {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}

/* Ajoute une bordure pour visualiser la zone "A propos" */
.about {
  
  padding: 2px 4px;      /* un petit padding pour que le texte ne touche pas la bordure */
}

.header-titles_about {
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* ===== ABOUT PAGE ===== */
.about-page {
  display: flex;
}


/*
                                                                                                                     
88  88               88                               88                                                             
88  ""               88                               88                                                             
88                   88                               88                                                             
88  88  8b,dPPYba,   88   ,d8   ,adPPYba,     888     88,dPPYba,    ,adPPYba,   8b       d8   ,adPPYba,  8b,dPPYba,  
88  88  88P'   `"8a  88 ,a8"    I8[    ""     888     88P'    "8a  a8"     "8a  `8b     d8'  a8P_____88  88P'   "Y8  
88  88  88       88  8888[       `"Y8ba,              88       88  8b       d8   `8b   d8'   8PP"""""""  88          
88  88  88       88  88`"Yba,   aa    ]8I     888     88       88  "8a,   ,a8"    `8b,d8'    "8b,   ,aa  88          
88  88  88       88  88   `Y8a  `"YbbdP"'     888     88       88   `"YbbdP"'       "8"       `"Ybbd8"'  88
*/





/* Styles de base pour tous les liens */
.link, .home-link; .header-titles {
    text-decoration: none;
    /* Supprime le soulignement des liens */
    
    
    font-family: sans-serif;
    /* Police de base des liens */
}

/* Style au survol */
.link:hover, .home-link:hover, .name:hover, .about:hover, .header-titles:hover {
    font-style: italic;
    /* Rend le texte en italique */
}

.friends-link {
color: darkgrey;
text-decoration: none;

}

/*
                                                          
88                                                        
88                                                        
88                                                        
88,dPPYba,    ,adPPYba,   88,dPYba,,adPYba,    ,adPPYba,  
88P'    "8a  a8"     "8a  88P'   "88"    "8a  a8P_____88  
88       88  8b       d8  88      88      88  8PP"""""""  
88       88  "8a,   ,a8"  88      88      88  "8b,   ,aa  
88       88   `"YbbdP"'   88      88      88   `"Ybbd8"'*/


/* Texte d'accueil */
.welcome-text {
    font-size: 1.1rem;
    width: 90%; /* Augmente la largeur pour qu'elle prenne presque tout l'écran sur mobile */
    max-width: 600px; /* Limite la largeur sur les écrans plus grands */
    text-align: center; /* Centre le texte horizontalement */
    margin: 3vh auto 7vh; /* Centre verticalement et ajoute un espace en bas */
    padding: 0 10px; /* Ajoute un petit padding interne pour éviter que le texte colle aux bords */
    line-height: 1.5; /* Améliore la lisibilité en augmentant l'interlignage */
    text-transform: uppercase;
}

/* Flèche dans le texte */
.arrow-welcome-text {
    width: 22px;
    margin-right: 8px;
    padding-top: 2px;
    vertical-align: middle; /* Assure l'alignement vertical avec le texte */
}

/* Conteneur du GIF */
.gif-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Prend toute la largeur de l'écran */
    height: auto; /* S'ajuste à la hauteur naturelle du GIF */
    margin: 10vh 0 4vh; /* Ajoute un espace au-dessus et en dessous */
}

/* Style pour le GIF */
.centered-gif {
    max-width: 85%; /* Le GIF ne dépasse jamais la largeur de l'écran */
    max-height: 85%; /* Le GIF ne dépasse jamais la hauteur de son conteneur */
    object-fit: contain; /* Garde les proportions du GIF */
    display: block; /* S'assure que l'image est un élément de bloc */
    margin: 0 auto; /* Centre horizontalement l'image */
}
 


  
/*
                                                        
                                             88         
                                             88         
                                             88         
8b      db      d8   ,adPPYba,   8b,dPPYba,  88   ,d8   
`8b    d88b    d8'  a8"     "8a  88P'   "Y8  88 ,a8"    
 `8b  d8'`8b  d8'   8b       d8  88          8888[      
  `8bd8'  `8bd8'    "8a,   ,a8"  88          88`"Yba,   
    YP      YP       `"YbbdP"'   88          88   `Y8a*/



   /* Conteneur général pour tous les projets */
.work-container {
    
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* gap entre les projets dans la verticale */
    align-items: flex-start;
    overflow: scroll; /* permet de laisser au dessus les bandes header et footer*/
}

/* Boîte mère image + description */
.projects-column {
    
    /* VERT FONCÉ */
    display: flex; /* Flexbox pour organiser l'image et le texte */
    flex-direction: row; /* Aligne l'image et le texte horizontalement */
    width: 99vw;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    margin-left: 10px;
    }


/* Boîte mère flèche + sous titre projet */
.project-description-container {
    
    display: flex;
    list-style: none;
    width: 22vw;
    margin-top: 0.4vh;
}



/* Style pour les images */
.project-image {
    flex:4;
    min-width: 75%;
    width: 75%;
    margin-right: 1rem;
    height: auto;
    object-fit: cover;
    margin-left: 0rem;
}



/* Style Titre du projet */
.project-title {
    
    font-weight: normal;
    width: 23vw;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-top: 0;
    line-height: 0.9;
    margin-bottom: 10px;
}

/* Description projet à droite de la flèche */
.description-text {
    
    text-decoration: none;
    color: black;
    width: 24vw;
    font-size: 1.4rem;
    margin-top: 0.4vh;
    text-align: right;
    margin-right: 10px;
    line-height: 1.2;

}




.project-title a, .description-text a {
    text-decoration: none; /* Retire le soulignement */
    color: inherit; /* Utilise la couleur définie pour le titre */
}


/* Style au survol sur le titre des projets */
.project-title a:hover {
    
    text-decoration: none;
    font-style: italic;

}

.description-text a:hover {
    text-decoration: none;
    font-style: italic;
}


/* Style de l'icône de flèche */
.project-arrow {
    width: 3rem;
    padding-top: 5px;
    height: auto;
    margin-right: 2rem;
    padding-bottom: 1rem;
    transition: transform 0.3s ease; /* Animation fluide */
}



/* Déplacement de la flèche au survol de la description */
.project-description-container:hover .project-arrow,
.project-title:hover ~ .project-description-container .project-arrow {
    transform: translateX(10px); /* Déplace la flèche vers la droite */
}








/*---------------------------------*/



                /* EN DESKTOP : REND INSIVIBLE LES DESCRIPTIONS PROJETS VERSION RESPONSIVE */


                ul.columns-responsive{
                    display: none;
                }

                .left1-responsive{
                    display: none;
                }

                .mobile-line-responsive{
                    display: none;
                }

                .left2-responsive{
                    display: none;
                }

                .left3-responsive {
                    display: none;
                }

                .right-responsive{
                    display: none;
                }

                .description-responsive{
                    display: none;
                }




/*                                                                                 
88                                                                               
88                            ,d                               ,d                
88                            88                               88                
88  8b,dPPYba,   ,adPPYba,  MM88MMM  ,adPPYYba,  8b,dPPYba,  MM88MMM  ,adPPYba,  
88  88P'   `"8a  I8[    ""    88     ""     `Y8  88P'   `"8a   88     I8[    ""  
88  88       88   `"Y8ba,     88     ,adPPPPP88  88       88   88      `"Y8ba,   
88  88       88  aa    ]8I    88,    88,    ,88  88       88   88,    aa    ]8I  
88  88       88  `"YbbdP"'    "Y888  `"8bbdP"Y8  88       88   "Y888  `"YbbdP"'*/



./* Wrapper global */
.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    gap: 1rem;
    overflow: hidden;
}

/* Carrousel au centre */
.Projects_carousel {
    flex: 3; /* Carrousel prend 3 unités de largeur */
    height: calc(100vh - 22vh); /* Ajuste la hauteur si besoin */
    display: flex;
    gap: 8px;
    align-items: center;
    scroll-snap-type: x mandatory;
    overflow-x: auto; /* Activer défilement horizontal */
    overflow-y: hidden; /* Désactiver défilement vertical */
    scroll-behavior: smooth;
    white-space: nowrap;
}

/* Images du carrousel */
.Projects_carousel img {
    height: 100%; /* Toutes les images prennent 100% de la hauteur du carrousel */
    width: auto; /* Maintenir les proportions des images */
    object-fit: cover; /* Ajuste l'image pour qu'elle remplisse l'espace sans déformation */
    scroll-snap-align: start;
}


/* Vidéo intégrée dans le carrousel */
.video-wrapper {
    width: 75%; /* Même largeur que les images */
    height: 100%; /* Même hauteur que les images */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start; /* Aligner comme les images */
    overflow: hidden; /* Assurez-vous que rien ne dépasse */
}

.video-wrapper video {
    width: 100%; /* La vidéo remplit horizontalement l'espace */
    height: 100%; /* La vidéo remplit verticalement l'espace */
    object-fit: cover; /* Assure que la vidéo remplit sans déformer */
    border: none; /* Supprime les bordures par défaut */
}



/* Suppression de la scrollbar */
.Projects_carousel::-webkit-scrollbar {
    display: none;
}


.columns {
    display: flex;
    
    justify-content: space-between;
    display: flex;
    padding: 10px;

}

.left1 {
    width: 12%;
    
    list-style: none;
    font-size: 1rem;
    text-transform: uppercase;
    margin-right: 15px;
    letter-spacing: 0.020rem;
    line-height: 1.1;
    margin-left: 12px;
}

.left2 {
    width: 45%;
    
    list-style: none;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.020rem;
    line-height: 1.1;

}

 .right {
    width: 70%;
    max-height: 60vh;
    
    list-style: none;
    letter-spacing: 0.020rem;
    margin-right: 8px;
}


p.description {
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    min-height: 11vh;
    max-height: 30vh;
    
    text-align: left;
    font-size: 1rem;
    padding-bottom: 0.rem;
    line-height: 1.2;
}

.souligner {
    text-decoration: underline;
    text-underline-offset: 2px; /* Distance entre le texte et le soulignement */
}



/*    
    
}        88                                       ,d        
            88                                       88        
,adPPYYba,  88,dPPYba,    ,adPPYba,   88       88  MM88MMM     
""     `Y8  88P'    "8a  a8"     "8a  88       88    88        
,adPPPPP88  88       d8  8b       d8  88       88    88        
88,    ,88  88b,   ,a8"  "8a,   ,a8"  "8a,   ,a88    88,       
`"8bbdP"Y8  8Y"Ybbd8"'    `"YbbdP"'    `"YbbdP'Y8    "Y888 */

/* ABOUT PAGE */

/* Conteneur principal */
.about-container {
    display: flex;
    flex-direction: column; /* Arrange les éléments en colonne */
    align-items: center; /* Centre horizontalement les enfants */
    justify-content: center; /* Centre verticalement les enfants */
    padding: 20px; /* Ajoute un peu d'espacement autour */
    text-align: center; /* Optionnel : centre tout le contenu textuel */
}


/* Photo d'identité */
.about-photo {
    display: block; /* Permet de manipuler les marges correctement */
    margin: 0 auto; /* Centre l'image horizontalement */
    margin-top: 4vh;
    width: 14vw;
    min-width: 12vw;
    height: auto; /* Maintient le ratio de l'image */
}


/* Titre about */
.about-title {
    font-family: "neue-haas-unica", sans-serif;
    font-size: 1.2rem; /* Taille du texte */
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 1rem; /* Espacement au-dessus du texte */
    text-align: center; /* Centre le texte */
}


.about-text {
    font-family: "neue-haas-unica", sans-serif;
    text-align: center; /* Centre le texte horizontalement */
    font-size: 1rem; /* Ajuste la taille du texte si nécessaire */
    line-height: 1.3; /* Améliore la lisibilité */
    margin: 0 auto; /* Centre les marges */
    text-transform: uppercase;
    font-weight: normal;
    width: 50%;
}


/* Ligne fine au dessus du footer sur la page about */
.about-bottom-text {
    width: 60%;
    font-size: 0.79rem;
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    color: dimgrey;
    text-align: center;
    margin: 0 auto; /* Centre les marges */
    margin-top: 5vh;
}

.friends-link {
    text-decoration: none;
    color: darkgrey;

}

.about-arrow {
        width: 17px;
        height: auto;
    }

.internship-animation {
    display: inline-block; /* Nécessaire pour animer correctement */
    color: black; /* Couleur initiale */
    transition: color 0.3s ease; /* Transition douce pour le survol */
}

/* Animation sur hover */
.internship-animation:hover {
    animation: colorChange 1s infinite; /* Lance l'animation en boucle */
}

/* Définition de l'animation */
@keyframes colorChange {
    0% {
        color: red;
    }
    25% {
        color: steelblue;
    }
    50% {
        color: seagreen;
    }
    75% {
        color: orange;
    }
    100% {
        color: lightpink;
    }
}

}

________________________________________





/*                                                               
   ad88                                                          
  d8"                              ,d                            
  88                               88                            
MM88MMM  ,adPPYba,    ,adPPYba,  MM88MMM  ,adPPYba,  8b,dPPYba,  
  88    a8"     "8a  a8"     "8a   88    a8P_____88  88P'   "Y8  
  88    8b       d8  8b       d8   88    8PP"""""""  88          
  88    "8a,   ,a8"  "8a,   ,a8"   88,   "8b,   ,aa  88          
  88     `"YbbdP"'    `"YbbdP"'    "Y888  `"Ybbd8"'  88 */



/* Assure que body et html occupent toute la hauteur */
html, body {
    height: 100%;
    margin: 0; /* Supprime les marges par défaut */
    display: flex;
    flex-direction: column; /* Permet de structurer en colonnes */
}

/* Footer fixé en bas */
footer {
    width: 100%;
    box-sizing: border-box; /* Assure un dimensionnement correct */
    position: fixed;
    font-size: 0.9rem; /* Taille de police cohérente */
    letter-spacing: 0.022rem;
    padding: 0;
    bottom: 0;
    left: 0;
    width: 100%; /* Prend toute la largeur */
    background-color: #fff; /* Couleur de fond (modifie selon ton design) */
    z-index: 0; /* Niveau bas pour ne pas passer au-dessus des contenus */
}



/* Conteneur principal du footer */
.footer-container {

    display: flex;
    justify-content: space-between; /* Écarte les sections gauche/droite */
    align-items: center; /* Centre verticalement */
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 4px;
    max-width: 100vw;
    margin-bottom: 4px;
}

/* Liens dans le footer */
.link {
    
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Texte gris foncé */
    font-size: 0.9rem; /* Taille de texte cohérente */
    display: flex; /* Aligne l'image et le texte horizontalement */
    align-items: center; /* Centre l'image et le texte verticalement */
    gap: 0.5rem; /* Espacement entre l'image et le texte */
    margin: 0;
}

/* Flèches */
.arrow-left-to-right, .arrow-right-to-left {
    width: 20px; /* Taille fixe pour les flèches */
    height: auto; /* Conserve le ratio d'aspect */
    flex-shrink: 0; /* Empêche les flèches de rétrécir */
}



/*

                                                                                                                  
                                                                                     88                           
                                                                                     ""                           
                                                                                                                  
8b,dPPYba,   ,adPPYba,  ,adPPYba,  8b,dPPYba,    ,adPPYba,   8b,dPPYba,   ,adPPYba,  88  8b       d8   ,adPPYba,  
88P'   "Y8  a8P_____88  I8[    ""  88P'    "8a  a8"     "8a  88P'   `"8a  I8[    ""  88  `8b     d8'  a8P_____88  
88          8PP"""""""   `"Y8ba,   88       d8  8b       d8  88       88   `"Y8ba,   88   `8b   d8'   8PP"""""""  
88          "8b,   ,aa  aa    ]8I  88b,   ,a8"  "8a,   ,a8"  88       88  aa    ]8I  88    `8b,d8'    "8b,   ,aa  
88           `"Ybbd8"'  `"YbbdP"'  88`YbbdP"'    `"YbbdP"'   88       88  `"YbbdP"'  88      "8"       `"Ybbd8"'  
                                   88                                                                             
                                   88


/* RESPONSIVE */


/* Pour les petits écrans > 768px et moins) */
@media screen and (max-width: 768px) {

/* HEADER */

/* ---------- HEADER ---------- */

@media screen and (max-width: 768px) {
  header {
    padding: 0 !important;
  }
}

  header {
  border: 1px solid orangered;
  box-sizing: border-box;
  display: flex;
}
.header-container {
border: 1px solid;
width: 100%;
}

.name {
font-size: 0.8rem; 
display: none;
}

.header-titles {
 font-size: 0.8rem;
}

.left {
border: 1px solid violet;
gap: 24px;
margin-left: 6px;
}

@media screen and (max-width: 768px) {
  header .right {
    padding: 0 !important;
  }
}

header .right {
border: 1px solid pink;
display: flex !important;
white-space: nowrap;     /* texte sur une seule ligne */
font-size: 0.8rem; 
height: 2vh;
padding-bottom: 14px;
}

.lang-option span {
display: none; /* cache "ENGLISH" et "FRENCH" */
font-size: 0.8rem; 
}

.lang-option.english::after {
content: "EN";
font-size: 0.8rem;
}

.lang-option.french::after {
content: "FR";
font-size: 0.8rem;
}

.header-titles_about {
    font-size: 0.8rem;
}




    /* PAGE PRINCIPALE */

    .welcome-text {
       width: 80%;
       font-size: 1.1rem;
       margin-bottom: 2vh;
       margin-top: 6vh;
    }

    .gif-container {
        margin-top: 12vh; /* Supprime la marge supérieure */
        margin-bottom: 0; /* Supprime la marge inférieure */
        height: auto; /* Ajuste la hauteur du conteneur si nécessaire */
    }

    .centered-gif {
        max-width: 85%; /* Le GIF occupe toute la largeur disponible */
        height: auto; /* Ajuste la hauteur automatiquement */
    }

    .content {
        padding: 0; /* Supprime tout padding autour du contenu */
        margin: 0; /* Supprime les marges globales */
    }





    /* PAGE ABOUT */

    .about-text {
        font-size: 1rem;
        margin-bottom: 10px;
        width: 90%;
    }

    .about-bottom-text {
        margin-top: 6vh;
        margin-bottom: 6vh;
        width: 90%;
    }

    .about-title {
        margin-bottom: 0;
    }


    .about-photo {
        width: 30%;
        margin-top: 2vh;
    }

    .about-arrow {
        width: 17px;
    }



    /* PAGE WORK */

    /* Boîte mère image + description */
    .projects-column {
        
        flex-direction: column; /* Passage de la disposition horizontale à verticale */
        
        padding-left: 10px;
        padding-right: 10px;
        margin: 0;
        gap: 0.2rem; /* Ajoute un peu d'espace entre les éléments */
    }

    /* Titre du projet sur une ligne */
    .project-title {
        width: 96vw; /* Occupe toute la largeur */
        text-align: center; /* Centrer le titre */
        font-size: 1rem; /* Taille de texte ajustée pour mobile */
        text-align: left;
        margin-bottom: 2px;
        margin-top: 4px;
    }
    .project-image {
    width: 100%;  /* Prend toute la largeur disponible */
    margin-right: 0; /* Réinitialise la marge à droite */
    margin-left: 0; /* Réinitialise la marge à gauche */
    height: auto;
    object-fit: cover; /* Conserve le ratio de l'image */
    }


    /* Flèche et description en colonnes */
    .project-description-container {
        
        display: flex;
        flex-direction: row; /* Garder une disposition en ligne pour flèche et description */
        width: 96vw;
        height: 4vh;
        justify-content: space-between; /* Espace entre la flèche et la description */
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .project-arrow {
        
        width: 24px; /* Taille de la flèche ajustée */
        margin-bottom: 6px;
        height: auto;
        margin: 0;

    }

    /* Description à droite de la flèche */
    .description-text {
        
        width: 50vh;
        height: 3vh;
        margin-top: 0; /* Évite l'espacement excessif */
        text-align: left; /* Aligne le texte à gauche */
        font-size: 1rem;
        text-align: right;
        line-height: 1.8;
    }



/* PAGES PROJETS */
/* Pages détaillée de chaque projet. A l'intérieur même des mediaqueries pour mobile est intégrée
la version desktop, dont j'ai modifié certains éléments pour qu'ils n'apparaissent pas dans la version mobile */ 


/* VERSION DESKTOP À L'INTÉRIEUR DES MEDIAQUERIES*/
    /* Wrapper global */
    .wrapper {
        flex-direction: column; /* Réorganise en vertical */
        align-items: stretch; /* Prend toute la largeur disponible */
        gap: 1rem;
        height: auto;
    }

    /* Colonnes de texte */
    .columns {
        display: none;
        order: 1;
        display: flex;
        flex-wrap: wrap;
        padding: 2 px;
    }

    .mobile-line {
        display: none;
        height: 1px; /* Épaisseur de la ligne */
        background-color: black; /* Couleur de la ligne */
        width: calc(100% - 0.1rem); /* Largeur ajustée avec une marge */
        margin: 0 auto; /* Centre la ligne horizontalement */
        margin-top: 1rem; /* Ajoute un espace au-dessus si nécessaire */
    }

    .left1 {
        display: none ;
        width: 30%; /* Occupe toute la largeur */
        text-align: left; /* Texte aligné à gauche */
        font-size: 2rem;

    }


    .left2 {
        display: none;
        width: 20%; /* Occupe toute la largeur */
        text-align: left; /* Texte aligné à gauche */
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    .right {
        display: none;
        width: 75%; /* Occupe toute la largeur */
        text-align: right; /* Texte aligné à droite */
        padding-top: 1rem;
    }


    /* Carrousel */
    .Projects_carousel {
        display: flex;
        flex-direction: column; /* Empile les éléments */
        align-items: center; /* Centre les images */
        gap: 0.4rem; /* Espace entre les images/vidéos */
        height: auto;
        overflow: hidden; /* Pas de débordement */
    }

    /* Images et vidéos */
    .Projects_carousel img,
    .Projects_carousel .video-wrapper {
        width: 100%; /* Prend toute la largeur */
        height: auto; /* Conserve les proportions */
    }

    .video-wrapper {
        width: 10vw;

    }

                                                 
    /* PAGES PROJETS, VERSION MOBILE (RESPONSIVE) */

    .columns-responsive {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

/* TITRE PROJETS : INSTANTS */
.left1-responsive {
   
    display: block;
    width: 96%; /* Occupe toute la largeur */
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-top: 3vh;
    margin-bottom: 8px; /* Réduit l'espacement sous le titre */
    margin-right: 7px;
    margin-left: 7px;
    padding: 0;
    line-height: 1;
}


/* LIGNE SOUS LE TITRE */
    .mobile-line-reponsive {
        display: block;
        border-top: 1px solid black;
        margin-left: 8px;
        
        height: auto; /* Épaisseur de la ligne */
        width: calc(100% - 1em); /* Largeur ajustée */
    }

/* TYPE DE PROJET */
    .left2-responsive {
    padding-top: 4px;
    padding-right: 20px;
    font-size: 0.9em;
    display: flex;
    width: width: calc(100% - 1em); /* Largeur ajustée */
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left; /* Texte aligné à gauche */
    list-style: none;
    border-bottom: 1px solid;
    padding-bottom: 5px;
    line-height: 1.2;

    }

/* DATE */
    .left3-responsive {
    padding-top: 3px;
    padding-right: 20px;
    font-size: 0.9em;
    display: flex;
    width: width: calc(100% - 1em); /* Largeur ajustée */
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left; /* Texte aligné à gauche */
    list-style: none;
    border-bottom: 1px solid;
    padding-bottom: 3px;
    line-height: 1.2;

    }

/* DESCRIPTION DU PROJET */
    .right-responsive {
    
    padding-top: 2px;
    display: flex;
    list-style: none;
    }

    .description-responsive {
    display: block;
    font-size: 0.9em;
    text-align: left;
    line-height: 1.2; /* Amélioration de l'interlignage */
    padding-bottom: 12px;
    }

    /* Flèches */
.arrow-left-to-right, .arrow-right-to-left {
    width: 5vw; /* Taille fixe pour les flèches */
    height: auto; /* Conserve le ratio d'aspect */
    flex-shrink: 0; /* Empêche les flèches de rétrécir */
}



/* Ajustements responsive (petits écrans) */
@media screen and (max-width: 600px) {
    .footer-container {
        flex-direction: block; /* Affiche les éléments verticalement */
        text-align: center;
        gap: 1rem; /* Espacement entre les sections */
        margin-bottom: 4px;
        padding-left: 9px;
    padding-right: 9px;

    
    }




    .arrow-right-to-left, .arrow-left-to-right {
        display: none;
    }

    .link {
    
    font-size: 0.8rem; /* Taille de texte cohérente */

}
}