/*/*___________________________________________________________________________

 _______   ______   .__   __. .___________.    _______.
|   ____| /  __  \  |  \ |  | |           |   /       |
|  |__   |  |  |  | |   \|  | `---|  |----`  |   (----`
|   __|  |  |  |  | |  . `  |     |  |        \   \    
|  |     |  `--'  | |  |\   |     |  |    .----)   |   
|__|      \______/  |__| \__|     |__|    |_______/

*/


@import url('switzer.css');



/*___________________________________________________________________________

.______     ______    _______  ____    ____ 
|   _  \   /  __  \  |       \ \   \  /   / 
|  |_)  | |  |  |  | |  .--.  | \   \/   /  
|   _  <  |  |  |  | |  |  |  |  \_    _/   
|  |_)  | |  `--'  | |  '--'  |    |  |     
|______/   \______/  |_______/     |__|
*/



body {
    width: 100vw;
    height: 100vh; 
    overflow-y: none;
}	

::selection {
  background-color: black;
  color: #FFFDFD;
}

.scroll{
   font-family: 'Switzer-light', sans-serif; 
}
.color_A{
    color: black;
}

.color_A_background{
    background-color: #FFFDFD;
}

.color_B{
    color:#E4F7F5;
}

.color_B_background{
    background-color: black;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: none;
    display: none;
}

/* SCROLLBAR */
::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-track-piece {
    background-color: none;
    display: none;
}





/*___________________________________________________________________________ 
 __  .__   __. .___________..______        ______      .______      ___       _______  _______ 
|  | |  \ |  | |           ||   _  \      /  __  \     |   _  \    /   \     /  _____||   ____|
|  | |   \|  | `---|  |----`|  |_)  |    |  |  |  |    |  |_)  |  /  ^  \   |  |  __  |  |__   
|  | |  . `  |     |  |     |      /     |  |  |  |    |   ___/  /  /_\  \  |  | |_ | |   __|  
|  | |  |\   |     |  |     |  |\  \----.|  `--'  |    |  |     /  _____  \ |  |__| | |  |____ 
|__| |__| \__|     |__|     | _| `._____| \______/     | _|    /__/     \__\ \______| |_______|

*/


.intro {
    z-index: 9999999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 1s ease-in-out;
    box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.3);
}

.intro button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    color: black;
    background: transparent;
    transition: background 0.3s, transform 0.3s;
    animation: arrowLoop 1s infinite ease-in-out; /* Animation en boucle pour la flèche */
}

/* Animation de la flèche : va et vient */
@keyframes arrowLoop {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Effet au hover */
.intro button:hover {
    transform: scale(1.1); /* Augmenter la taille pour donner un effet de survol */
}

.hidden {
    transform: translateY(-100%);
}

#BIG {
    margin-bottom: 3vh;
    font-size: 15vw;
    line-height: 22vh;
    text-align: center;
    font-family: 'Switzer-Bold', sans-serif;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.line {
    display: flex;
    overflow: hidden;
}

.line span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.2);
} 







/*___________________________________________________________________________ 
 _______       ___      .______       __  ___    .___  ___.   ______    _______   _______ 
|       \     /   \     |   _  \     |  |/  /    |   \/   |  /  __  \  |       \ |   ____|
|  .--.  |   /  ^  \    |  |_)  |    |  '  /     |  \  /  | |  |  |  | |  .--.  ||  |__   
|  |  |  |  /  /_\  \   |      /     |    <      |  |\/|  | |  |  |  | |  |  |  ||   __|  
|  '--'  | /  _____  \  |  |\  \----.|  .  \     |  |  |  | |  `--'  | |  '--'  ||  |____ 
|_______/ /__/     \__\ | _| `._____||__|\__\    |__|  |__|  \______/  |_______/ |_______|

*/

button{
    background-color: transparent;
    text-decoration: none;   
}

.dark-mode {
    background-color: black;
    color: white;
}

#toggle-dark-mode{
    transition: 1.2s  ease-out;
    text-decoration: none;
    background-color: none;
    position: fixed;
    left: 24vw;
    top: 1vh;
    font-size: 1.5vw;
    height: auto;
    font-family: switzer-medium ;
    font-weight: 100;
    opacity: 30%;
}

#toggle-dark-mode:hover{
   transform: rotate(180deg) ;
   cursor: pointer;
   opacity: 100%;
}

/* Mode sombre */

.dark-mode button{
    color:white;
}

.dark-mode .color_A {
    color: #FFFFFF; /* Change le texte noir en blanc */
}

.dark-mode .color_A_background {
    background-color: black; /* Fond clair en mode sombre */
}




.dark-mode ::selection {
    background-color: white; /* Fond sombre de la sélection de texte */
    color: black; /* Texte en blanc */
}

.dark-mode ::-webkit-scrollbar-thumb {
    background-color: white;
}

.dark-mode ::-webkit-scrollbar-track-piece {
    background-color: white;
}

.dark-mode .article_work{
   color: white;
}

.dark-mode  ::-webkit-scrollbar-thumb:vertical {
    background-color: red;
}

/* Autres éléments pour le mode sombre */
.dark-mode #ABOUT, .dark-mode #WORK, .dark-mode #CACHE{
    background-color: black; /* Fonds sombres pour les sections */
}






/* ___________________________________________________________________________ 
 __    ______   ______   .__   __.      _______.        ___      .__   __.  __  .___  ___. 
|  |  /      | /  __  \  |  \ |  |     /       |       /   \     |  \ |  | |  | |   \/   | 
|  | |  ,----'|  |  |  | |   \|  |    |   (----`      /  ^  \    |   \|  | |  | |  \  /  | 
|  | |  |     |  |  |  | |  . `  |     \   \         /  /_\  \   |  . `  | |  | |  |\/|  | 
|  | |  `----.|  `--'  | |  |\   | .----)   |       /  _____  \  |  |\   | |  | |  |  |  | 
|__|  \______| \______/  |__| \__| |_______/       /__/     \__\ |__| \__| |__| |__|  |__|

*/

/*Les icones*/
.icon_A{
    display: inline-block;
    transition: transform 0.4s ease-in-out;
}

.icon_B{
    display: inline-block;
    transition: transform 0.9s ease-in-out;
}

.icon_C{
    font-size: 1.1vw;
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

.icon_D{
    display: inline-block;
    transition: transform 0.4s ease-in-out;
}


/*Les animations d'icones*/
a:hover .icon_A {
    transform: rotate(-45deg);
}

a:hover .icon_B {
    transform: rotate(360deg);
}

a:hover .icon_C {
    transform: scale(1.3);
}

a:hover .icon_D {
    transform: rotate(45deg);
}






/* ___________________________________________________________________________ 
     ___      .______      ___      .______       __  .___________. __    ______   .__   __. 
    /   \     |   _  \    /   \     |   _  \     |  | |           ||  |  /  __  \  |  \ |  | 
   /  ^  \    |  |_)  |  /  ^  \    |  |_)  |    |  | `---|  |----`|  | |  |  |  | |   \|  | 
  /  /_\  \   |   ___/  /  /_\  \   |      /     |  |     |  |     |  | |  |  |  | |  . `  | 
 /  _____  \  |  |     /  _____  \  |  |\  \----.|  |     |  |     |  | |  `--'  | |  |\   | 
/__/     \__\ | _|    /__/     \__\ | _| `._____||__|     |__|     |__|  \______/  |__| \__|

*/

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1.5;
    transform: translateY(0);
}
}

.animated-text{
  opacity: 0;
  animation: fadeIn 1s ease-out  forwards;
}







/* ___________________________________________________________________________ 
.______    __   __       __  .__   __.   _______  __    __   _______ 
|   _  \  |  | |  |     |  | |  \ |  |  /  _____||  |  |  | |   ____|
|  |_)  | |  | |  |     |  | |   \|  | |  |  __  |  |  |  | |  |__   
|   _  <  |  | |  |     |  | |  . `  | |  | |_ | |  |  |  | |   __|  
|  |_)  | |  | |  `----.|  | |  |\   | |  |__| | |  `--'  | |  |____ 
|______/  |__| |_______||__| |__| \__|  \______|  \______/  |_______|

*/



.language-switcher {
    padding: 4px;
    position: fixed;
    left: 13vw;
    top: 1vh;
    display: flex;
    gap:0vw;
}

.language-btn {
    background-color: transparent;
    border: none;
    font-size: 1vw;
    font-family: Switzer-Bold;
    cursor: pointer;
    transition: opacity 0.3s ease;
    position: relative;
    padding: 0.2vw 0.6vw; /* Permet d'agrandir la zone cliquable */
}

.language-btn.active {
    opacity: 1;
}

.language-btn:not(.active) {
    opacity: 0.3;
}

.text {
    display: none;
}

.fr-text {

}

/* Nouvelle structure pour éviter le bug */
.language-btn span {
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease;
}

.language-btn span::before,
.language-btn span::after {
    font-weight: bold;
    transition: transform 0.3s ease;
}

.language-btn span::before {
    content: "[";
        margin-right: 0.2vw;
        display: inline-block;
    }

    .language-btn span::after {
        content: "]";
        margin-left: 0.2vw;
        display: inline-block;
    }

    .language-btn:hover span::before {
        transform: translateX(-0.2vw);
    }

    .language-btn:hover span::after {
        transform: translateX(0.2vw);
    }







/*___________________________________________________________________________
 __  .__   __. .___________. _______ .______          ___       ______ .___________. __   _______ 
|  | |  \ |  | |           ||   ____||   _  \        /   \     /      ||           ||  | |   ____|
|  | |   \|  | `---|  |----`|  |__   |  |_)  |      /  ^  \   |  ,----'`---|  |----`|  | |  |__   
|  | |  . `  |     |  |     |   __|  |      /      /  /_\  \  |  |         |  |     |  | |   __|  
|  | |  |\   |     |  |     |  |____ |  |\  \----./  _____  \ |  `----.    |  |     |  | |  |     
|__| |__| \__|     |__|     |_______|| _| `._____/__/     \__\ \______|    |__|     |__| |__|

*/


/* Boîte qui contient le texte interactif */
.container {
    font-family: 'Switzer-Medium', sans-serif;
    font-size: 1vw;
    pointer-events: none;
    position: fixed;
    width: 30vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}



.text2{
     display: inline-block; /* ou block si vous préférez */
    position: relative;    /* nécessaire pour que les transformations fonctionnent correctement */
    transition: transform 0.1s ease; /* Ajoute une transition douce */
}



/*___________________________________________________________________________

 __  .__   __.  _______   ______        _______.   
|  | |  \ |  | |   ____| /  __  \      /       |   
|  | |   \|  | |  |__   |  |  |  |    |   (----`   
|  | |  . `  | |   __|  |  |  |  |     \   \       
|  | |  |\   | |  |     |  `--'  | .----)   |      
|__| |__| \__| |__|      \______/  |_______/

*/

#infos_pratiques {
    position: fixed;
    width: 11vw;
    height: auto;
    text-align: left;
    bottom: 2vh;
    padding-top: 0vh;
    font-family: 'Switzer-Medium', sans-serif;
    font-size: 0.9vw;
    left: 3.5vw;
}

#infos_pratiques_2 {
    position: fixed;
    width: 10vw;
    height: auto;
    text-align: left;
    bottom: 2vh;
    padding-top: 0vh;
    font-family: 'Switzer-Medium', sans-serif;
    font-size: 0.9vw;
    left: 15vw;
}






#IMAGE{
    width: 38vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 2vw;
}

#IMAGE video{
/* width: 100%;
 height: auto;*/
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 height: 100%;
 object-fit: cover; /* Remplit la div sans déformer la vidéo */
}






/*___________________________________________________________________________
     ___      .______     ______    __    __  .___________.
    /   \     |   _  \   /  __  \  |  |  |  | |           |
   /  ^  \    |  |_)  | |  |  |  | |  |  |  | `---|  |----`
  /  /_\  \   |   _  <  |  |  |  | |  |  |  |     |  |     
 /  _____  \  |  |_)  | |  `--'  | |  `--'  |     |  |     
/__/     \__\ |______/   \______/   \______/      |__|

*/


#ABOUT {
    text-align: justify;
    position: fixed;
    width: 30vw;
    height: 100vh;
    right: 0px;
    top: 0px;
}

#article_about_titre {
    vertical-align: baseline;
    margin-left: 1.5vw;
    z-index: 3;
    position: fixed;
    font-family: 'Switzer-Black';
    font-size: 1vw;
    padding-bottom: 2vh;
    padding-top: 2vh;
    height: auto;
    top: 0px;
    margin-bottom: 0px;	
} 

#infos {
    margin-top: 6vh;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    display: inline-block;
    text-align: left;
}

#intro-fr {
    margin-top: 0vh;
    padding-bottom: 2vh;
}

#intro-en {
    margin-top: 0vh;
    padding-bottom: 2vh;
}

.p_about {
    text-indent: 3em;
    width: auto;
    font-family: 'Switzer-Semibold', sans-serif;
    font-size: 1vw;
    display: block;
    line-height: 1.2em;   
}

#mederic {
    font-family: 'Switzer-bold';
    font-style: italic;
}

#link_menu { 
    line-height: 2.2vh;
    font-family: 'Switzer-Medium', sans-serif;
    font-size: 0.9vw;
    width: auto;
    left: 2vw;
    justify-content: space-between;
    text-align: left;
    margin-top: 1vh;	
}

/*Le projet actuellement séléctionné*/
a.projet_on {
    opacity: 100%;
}


a.anim_link_effect {
    transition: all 800ms ease-out;
    opacity: 30%;
}

a.anim_link_effect:hover {
 opacity: 100%;
}

a {
    text-decoration: none;
}

#credits {
    position: fixed;
    width: 15vw;
    height: auto;
    text-align: right;
    bottom: 2vh;
    padding-top: 0vh;
    font-family: 'Switzer-Medium', sans-serif;
    font-size: 0.9vw;
    right: 1.5vw;
}

#CV{
    font-size: 1vw;
}

#bandeau{
	z-index: 9999;
	left: 0vw;
	position: fixed;
	width: 2vw;
	height: 100vh;
	writing-mode: vertical-rl;
    word-spacing: 0.5vw;
    transition: 800ms ease-out;
}

#bandeau p{
    font-family: 'Switzer-Bold', sans-serif;
    font-size:1vw;
    padding-right: 1vh;
    text-align: center;
    width: 2vw;
    margin-top: auto;
}


#bandeau_M{
     position: fixed;
    z-index: 9999;
    left: 0vw;
    width: 2vw;
    height: 100vh;
    writing-mode: vertical-rl;
    transition: 800ms ease-out;
    word-spacing: 0.5vw;
}

#bandeau_M p{
    transform: rotate(-90deg);
    font-family: 'Switzer-Bold', sans-serif;
    font-size:1.2vw;
    text-align: center;
    width: 2vw;
/*    margin-top: auto;*/
}

#bandeau_C{
    z-index: 9999;
    right:0px;
    position: fixed;
    width: 2vw;
    height: 100vh;
    writing-mode: vertical-rl;
    word-spacing: 0.5vw;
    transition: 800ms ease-out;
}

#bandeau_C p{
    transform: rotate(-90deg);
    font-family: 'Switzer-Bold', sans-serif;
    font-size:1.2vw;
    text-align: center;
    width: 2vw;
/*    margin-top: auto;*/
}




/*___________________________________________________________________________

____    __    ____  ______   .______       __  ___ 
\   \  /  \  /   / /  __  \  |   _  \     |  |/  / 
 \   \/    \/   / |  |  |  | |  |_)  |    |  '  /  
  \            /  |  |  |  | |      /     |    <   
   \    /\    /   |  `--'  | |  |\  \----.|  .  \  
    \__/  \__/     \______/  | _| `._____||__|\__\    

*/

#WORK {
/*    overflow-y: scroll;*/
flex-flow: row wrap;
height: 100vh;
width: 40vw;
margin-left: 30vw;
}


#CACHE{
    position: fixed;
    top: 0px;
    z-index: 4;
    width: 38vw;
    height: 6vh;
    background-color: white;
}

/* grille des projets */ 
#grille {
    padding-top: 6.5vh;
    padding-bottom: 1vh;
    padding-left: 1vw;
    padding-right: 1vw;
    display: block;
    width: 38vw;
}


/*WORK - TIRE*/ 
#article_work_titre{
    position: fixed;
    z-index: 5;
    padding-top: 2vh;
    font-family: 'Switzer-Black', sans-serif;
    font-size: 1vw;
    padding-bottom: 2.6vh;
    height: auto;
    top: 0px;
    margin-bottom: 0px;	
    width: 38vw;
} 


/* article qui se constitue des images de projet*/ 
.article_work{
/*    border: 2px solid red;*/
z-index: 2;
font-family: 'Switzer-Regular', sans-serif;
height: auto;
width: 38vw;
display:block;
position:relative;
overflow:hidden;
margin: auto;
margin-bottom: 5vh;
} 

/* Les détails des projets*/ 
.infos-hover{

}

/* NOM DU PROJET*/ 
.article_infos_1{

}

/* TYPE DE PROJET*/ 
.article_infos_2{

}

/* DATE DU PROJET*/
.article_infos_3{

}



/* parametres qui s'appliques à chaques iamges*/ 
img{
	border-radius: 0px;
	width: 100%;
	height: auto;
	display: block;
}


#scroll-trigger{
    margin-left: 1vw;
    padding-bottom: 1.3vw;
    width: 1vw;
    height: 0.5;
}



#scroll-trigger p{
    transition: 0.8s;
    font-size: 1.2vw;
    opacity: 30%;
}

#scroll-trigger p:hover{
    opacity: 100%;
    cursor: pointer;
}


#scroll-trigger_index{
    padding-bottom: 1.3vw;
    width: 1vw;
    height: 0.5;
}


#scroll-trigger_index p{
    transition: 0.8s;
    font-size: 1.2vw;
    opacity: 30%;
}

#scroll-trigger_index p:hover{
    opacity: 100%;
    cursor: pointer;
}


#PHONE{
	display: none;
	width: auto;
}








/*___________________________________________________________________________

.______   .______        ______          __   _______ .___________.    _______.
|   _  \  |   _  \      /  __  \        |  | |   ____||           |   /       |
|  |_)  | |  |_)  |    |  |  |  |       |  | |  |__   `---|  |----`  |   (----`
|   ___/  |      /     |  |  |  | .--.  |  | |   __|      |  |        \   \    
|  |      |  |\  \----.|  `--'  | |  `--'  | |  |____     |  |    .----)   |   
| _|      | _| `._____| \______/   \______/  |_______|    |__|    |_______/   


*/


/* conteneur de la partie infos*/ 
.description_projet{
	z-index: 2;
	opacity: 100%;
	position: fixed;
	padding-left: 3.5vw;
	width: 26.5vw;
	height: 100vh;
	padding-top: 8vh;
}


/* titre du projet*/ 
.h1_projet{
    transition: text-shadow 0.5s ease-in-out;
    margin-top: 5vh;
/*	font-size: 1.5vw;*/
font-size: 2.5vw;
text-transform: uppercase;
font-family: 'Switzer-Bold', sans-serif;
}   


/* date et logiciels*/ 
.h2_projet{
    margin-top: 1vh;
    font-family:'Switzer-Black', sans-serif;
    font-size: 1vw; 
}


/* description du projet*/ 
.p_projet{
	text-indent: 3em;
	text-align: left;
	font-family: 'Switzer-Semibold', sans-serif;
/*	font-size: 0.9vw;*/
font-size: 1vw;
columns: 1;
width: 25vw;
margin-top: 2.5vh;
display: block;
line-height: 1.2em;   
}

.p_projet_b2{
	text-indent: 3em;
	text-align: left;
	font-family: 'Switzer-Semibold', sans-serif;
	font-size: 1vw;
	columns: 1;
	width: 25vw;
	display: block;
	line-height: 1.2em;   
}


.h3_projet {
	display: inline-block;
}


/* citation en lien avec le projet*/ 
.h3_projet a{
    padding: 3px;
    text-align: right;
    text-decoration: none;	
    display: flex;
    font-family: 'Switzer-Medium', sans-serif;
    font-size: 0.9vw;
    margin-top: 2vh;

}


.lien{
  width: auto;
  height: auto;
  text-decoration: none;
  opacity: 100%;
  transition: 0.5s ease-in-out;
}


/*.lien:hover{ 
	opacity: 100%;
 }
*/





/*___________________________________________________________________________
.______       _______ .___________. __    __  .______      .__   __.                    ___       ______   ______  __    __   _______  __   __      
|   _  \     |   ____||           ||  |  |  | |   _  \     |  \ |  |                   /   \     /      | /      ||  |  |  | |   ____||  | |  |     
|  |_)  |    |  |__   `---|  |----`|  |  |  | |  |_)  |    |   \|  |     ______       /  ^  \   |  ,----'|  ,----'|  |  |  | |  |__   |  | |  |     
|      /     |   __|      |  |     |  |  |  | |      /     |  . `  |    |______|     /  /_\  \  |  |     |  |     |  |  |  | |   __|  |  | |  |     
|  |\  \----.|  |____     |  |     |  `--'  | |  |\  \----.|  |\   |                /  _____  \ |  `----.|  `----.|  `--'  | |  |____ |  | |  `----.
| _| `._____||_______|    |__|      \______/  | _| `._____||__| \__|               /__/     \__\ \______| \______| \______/  |_______||__| |_______|

*/




/* Conteneur à gauche (premier bloc) */
header {
    display: flex;
    z-index: 999;
    width: 40vw;
    height: auto;
    margin-left: 0px;
    position: fixed;    
}


/* BOUTON DE RETOUR ACCUEIL */
#HOME{
    width: auto;
    height: 4vh;
    display: flex;
    margin-top: 2vh;
    margin-left: 3.5vw;
}


/* BOUTON ACCUEIL - ANIMATION */
#HEADER:hover #slide {
    margin-left: 1.2vw;
}

#slide {
    margin-left: 0px;
    transition: all 1s;
}



/* BOUTON ACCUEIL - MEDERIC CHAPISEAU */
#article_MEDERICCHAPISEAU_titre {
    position: relative;
    vertical-align: baseline;
    z-index: 9;
    font-family: 'Switzer-Black', sans-serif;
    font-size: 1vw;
    height: auto;
    width: auto;
    top: 0px;
    cursor: pointer; /* Ajouter un curseur pointer pour indiquer que l'élément est cliquable */
}

/* BOUTON ACCUEIL - Fleche qui aparait */
#Return {
    pointer-events: none;
    opacity: 0;
    transform: translateX(-20px); /* La flèche commence à gauche */
    transition: opacity 0.3s ease-in, transform 1s ease; /* La flèche se déplace et devient visible après le déplacement de "CHAPISEAU" */
    position: absolute;
    left: 0;
}

#HOME:hover #Return {
    opacity: 1; /* La flèche devient visible */
    transform: translateX(0); /* La flèche revient à sa position normale */
}

#HOME:hover #slide {
    transform: translateX(20px); /* "CHAPISEAU" se déplace à droite lors du hover */
}








/*___________________________________________________________________________

     _______.____    __    ____  ___      .______                 .______   .______        ______          __   _______ .___________.    _______.
    /       |\   \  /  \  /   / /   \     |   _  \                |   _  \  |   _  \      /  __  \        |  | |   ____||           |   /       |
   |   (----` \   \/    \/   / /  ^  \    |  |_)  |     ______    |  |_)  | |  |_)  |    |  |  |  |       |  | |  |__   `---|  |----`  |   (----`
    \   \      \            / /  /_\  \   |   ___/     |______|   |   ___/  |      /     |  |  |  | .--.  |  | |   __|      |  |        \   \    
.----)   |      \    /\    / /  _____  \  |  |                    |  |      |  |\  \----.|  `--'  | |  `--'  | |  |____     |  |    .----)   |   
|_______/        \__/  \__/ /__/     \__\ | _|                    | _|      | _| `._____| \______/   \______/  |_______|    |__|    |_______/

*/


/* div avec précédent et suivant*/ 
#projet_swap{
	font-family:'Switzer-Medium', sans-serif;
	font-size: 0.9vw;
	display: flex;
	position: fixed;
	z-index:1;
    width: 25vw;
    bottom: 2vh;
    display: flex;
    justify-content: space-between;
}


#projet_num{
    position: fixed;
    bottom: 2vh;
    font-size: 5vw;
    font-family:'Switzer-Medium', sans-serif;
}


#page{
	padding: 3px;
    pointer-events: none; 
}


/* bouton précédent*/
#precedent{
	display: flex;
	padding: 3px;
    opacity: 30%;
    transition:  all 800ms ease-out;
}


.LINK:hover #precedent{
  opacity: 100%;
}


/* bouton suivant*/
#suivant{
	justify-content: space-between;
	padding: 3px;
    opacity: 30%;
    transition:  all 800ms ease-out;
}


.LINK:hover #suivant{
  opacity: 100%;
}



/**___________________________________________________________________________
____    ____  __       _______. __    __   _______  __          _______.              .______   .______        ______          __   _______ .___________.
\   \  /   / |  |     /       ||  |  |  | |   ____||  |        /       |              |   _  \  |   _  \      /  __  \        |  | |   ____||           |
 \   \/   /  |  |    |   (----`|  |  |  | |  |__   |  |       |   (----`    ______    |  |_)  | |  |_)  |    |  |  |  |       |  | |  |__   `---|  |----`
  \      /   |  |     \   \    |  |  |  | |   __|  |  |        \   \       |______|   |   ___/  |      /     |  |  |  | .--.  |  | |   __|      |  |     
   \    /    |  | .----)   |   |  `--'  | |  |____ |  `----.----)   |                 |  |      |  |\  \----.|  `--'  | |  `--'  | |  |____     |  |     
    \__/     |__| |_______/     \______/  |_______||_______|_______/                  | _|      | _| `._____| \______/   \______/  |_______|    |__|

*/

.article_projet_titre{
	position: fixed;
	padding-left: 1vw;
	font-family: 'Switzer-Black', sans-serif;
	font-size: 1vw;
	padding-bottom: 2vh;
	padding-top: 2vh;
	height: auto;
	top: 0px;
  margin-bottom: 0px;	
  width: 57vw;
  z-index:0;
} 

/* conteneur des images de projets)*/
#images_projet{
    top: 0px;
    left: 0px;
    height: 93.5vh;
    padding-top:6.5vh;
    width: 50vw;
    margin-left: 30vw;
}


#images_projet video{
	width: 50vw;
}


#images_projet iframe{
    height: 28vw;
}


/* boites correspondant au images*/
#images_projet figure{
	width: 50vw;
	padding: 0px;
	display: block;
	padding-bottom: 1.5vh;
    margin-left: 1vw;
}



/*.controls{
    border: 2px solid red;
text-align:right;
width: 50vw;
margin-left: 1vw;
}

.controls_boutons{  
    font-family: 'Switzer-Medium', sans-serif;
}*/

.video-container {
    position: relative;
    width: 800px;

}

.controls {
    border: 2px solid red;
    margin-bottom: 3vh;
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.controls_boutons {
    text-align: right;
    font-family: 'Switzer-Medium', sans-serif;;
    color: red;
    font-size:2vw;
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.3s;
}

.controls_boutons:hover {

}

.controls_boutons.active {
    font-weight: bold;
}

.controls_boutons.muted {
    font-size: 2vw;
}

#RisoBoy{
    background-blend-mode: overlay;
    position: fixed;
    width: 12vw;
    height: auto;
    bottom: 2vh;
    right: 13vw;
}




/*___________________________________________________________________________
.__   __.      ___   ____    ____               .______   .______        ______          __   _______ .___________.    _______.
|  \ |  |     /   \  \   \  /   /               |   _  \  |   _  \      /  __  \        |  | |   ____||           |   /       |
|   \|  |    /  ^  \  \   \/   /      ______    |  |_)  | |  |_)  |    |  |  |  |       |  | |  |__   `---|  |----`  |   (----`
|  . `  |   /  /_\  \  \      /      |______|   |   ___/  |      /     |  |  |  | .--.  |  | |   __|      |  |        \   \    
|  |\   |  /  _____  \  \    /                  |  |      |  |\  \----.|  `--'  | |  `--'  | |  |____     |  |    .----)   |   
|__| \__| /__/     \__\  \__/                   | _|      | _| `._____| \______/   \______/  |_______|    |__|    |_______/

*/

#projets_go{
/*    border: 2px solid red;*/
margin-top: 5vh;
top: 0px;
right: 1.5vw;
position: fixed;
width: 10vw;
height: 100vh;   
}


#link_menu_2{
    line-height: 5vh;
    font-family: 'Switzer-Medium', sans-serif;
    font-size: 2vw;
    width: 10vw;
    justify-content: space-between;
    text-align:right;    
}


#link_menu_2 li {
/*    border: 2px solid green;*/
position: relative; 
padding-bottom: 0;
transition: padding-bottom 0.2s ease-in-out; /* Animation plus rapide pour le texte */
}

.previewContainer {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.2s ease-in-out; /* Durée plus courte pour une apparence plus rapide */
}

/* Image */
.previewImage {
    width: 10vw;
    text-align: right;
    display: block;
    height: auto; /* Ajuste la hauteur de l'image */
}

/* Assurer que le texte reste visible quand on survole l'image */
li:hover .previewContainer + a,
.previewContainer:hover + a {
    opacity: 1 !important;
}







/*___________________________________________________________________________

.___  ___.   ______   .___________. __    ______   .__   __.     __          ___      .______   
|   \/   |  /  __  \  |           ||  |  /  __  \  |  \ |  |    |  |        /   \     |   _  \  
|  \  /  | |  |  |  | `---|  |----`|  | |  |  |  | |   \|  |    |  |       /  ^  \    |  |_)  | 
|  |\/|  | |  |  |  |     |  |     |  | |  |  |  | |  . `  |    |  |      /  /_\  \   |   _  <  
|  |  |  | |  `--'  |     |  |     |  | |  `--'  | |  |\   |    |  `----./  _____  \  |  |_)  | 
|__|  |__|  \______/      |__|     |__|  \______/  |__| \__|    |_______/__/     \__\ |______/

*/


/* Mise en page générale */
#ATELIER {
	display: flex;
	height: 100vh;
	width:100vw;   
	border: none;
}

#atelier_description{
    position: fixed;
    width: 10vw;
    height: auto;
}

/* article qui se constitue des images de projet*/ 
.sections_atelier{
    background-color: red;
    z-index: 5;
    position: fixed;
    padding-left: 1vw;
    font-family: 'Switzer-Regular', sans-serif;
    font-size: 1vw;
    padding-bottom: 2vh;
    padding-top: 2vh;
    height: auto;
    top: 0px;
    margin-bottom: 0px; 
    width: 28vw;
} 


.NUM{
	margin-left: 1vw;
	padding-bottom: 1vh;
	font-family: 'Switzer-Bold', sans-serif;
	font-size: 1vw;
	margin-bottom: 2.5vh;
}


#MOTION_01{
    border: 2px solid red;
    overflow-y: scroll;
    flex-flow: row wrap;
    height: 100vh;
    width: 30vw;  
    margin-left: 40vw;
}


#MOTION_02{
    display: block;
    overflow-y: scroll;
    flex-flow: row wrap;
    height: 100vh;
    width: 30vw;  
}


#ATELIER video {
   width: 27vw;
   margin: auto;
   height: auto;
   border-radius: 10px;
   margin-bottom: 1.5vh;
}


#grid_atelier_01{
 width: 100%;
 padding-top: 6.5vh;
 padding-bottom: 1vh;
 display:grid;
 grid-template-columns: repeat(1,1fr);
 grid-column-gap: 0vw;
 grid-row-gap: 0vw;
 grid-template-rows: 1fr;
}


#grid_atelier_02{
 width: 100%;
 padding-top: 6.5vh;
 padding-bottom: 1vh;
 display:grid;
 grid-template-columns: repeat(1,1fr);
 grid-column-gap: 0vw;
 grid-row-gap: 0vw;
 grid-template-rows: 1fr;
}

#A2D{
 font-family: 'Switzer-Black', sans-serif;
}

#B3D{
 font-family: 'Switzer-Black', sans-serif;
}

#controls {
  display: flex;
  width:auto;
}
.infos-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* Overlay transparent au départ */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: background 0.3s ease, opacity 0.3s ease;
    pointer-events: none; /* Empêche l'overlay de bloquer le clic */
}

.article_work:hover .infos-hover {
    background: rgba(0, 0, 0, 0.8); /* Overlay noir au hover */
    opacity: 1;
}

.infos-hover h3,
.infos-hover p {
    color: white;
    text-align: center;
    opacity: 0;
    transform: translateY(10px); /* Légèrement décalé vers le bas */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.article_work:hover .infos-hover h3,
.article_work:hover .infos-hover p {
    opacity: 1;
    transform: translateY(0); /* Remonte à la position normale */
}


button {
 color: black;
 border: none;
 margin: auto;
 border-radius: 100px;
 transition:  800ms ease-out;
 margin: auto;
 font-family: 'Switzer-Regular', sans-serif;
}

button:hover{
 font-weight:900;
}

#currentTrack{
  font-family: 'Switzer-Medium', sans-serif;
  height: 2vh;
  padding-top: 0.5vh;
  text-align: center;
}

#infos_pratiques_3 {
    z-index: 999;
    position: fixed;
    width: 10vw;
    height: auto;
    text-align: left;
    bottom: 1.5vh;
    padding-top: 0vh;
    font-family: 'Switzer', sans-serif;
    font-size: 3vw;
    right: 19vw;
}





/*___________________________________________________________________________
     ___      .______        ______  __    __   __  ____    ____  _______     _______.
    /   \     |   _  \      /      ||  |  |  | |  | \   \  /   / |   ____|   /       |
   /  ^  \    |  |_)  |    |  ,----'|  |__|  | |  |  \   \/   /  |  |__     |   (----`
  /  /_\  \   |      /     |  |     |   __   | |  |   \      /   |   __|     \   \    
 /  _____  \  |  |\  \----.|  `----.|  |  |  | |  |    \    /    |  |____.----)   |   
/__/     \__\ | _| `._____| \______||__|  |__| |__|     \__/     |_______|_______/

*/


#archives{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 90vw;
    height: auto;
    position: fixed;
    left: 3.5vw;
    bottom: 1vh;
}

#archives p{
    font-style: italic;
    font-family: 'Thunder Black', sans-serif;
    font-size: 8vw;
}



.archives-projet{
   transition: 800ms ease-out;
   font-variation-settings: "wght"350; 
}

.archives-projet:hover{
    font-variation-settings: "wght"700;
}






.gallery {

    margin-top:10vh;
    margin-left: 3vw;
    border: 2px solid red;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            width: 94vw;
        }
        .gallery-item {
            text-align: center;
        }
        .gallery img {
            width: 100%;
            height: auto;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .gallery img:hover {
            transform: scale(1.05);
        }
        .gallery p {
            margin: 5px 0 0;
            font-size: 14px;
            color: #333;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }
        .overlay img {
            max-width: 90%;
            max-height: 90%;
        }
        .overlay.active {
            display: flex;
        }