/* Accueil */
body {
	background-color: white;
}
#bodyindex {
    height: 400vh; /* Hauteur totale de la page */
}

a {
    text-decoration: none;
    color: black;
}

#logo {
    position: fixed;
    top: 2vw;
    left: 2vw;
    z-index: 1000;
    width: auto; /* Largeur automatique pour le logo */
    height: auto; /* Hauteur automatique pour le logo */
    max-width: 12vw; /* Limite de largeur pour le logo */
    mix-blend-mode: difference; /* Mode de fusion pour inverser les couleurs */
    filter: invert(1); /* Inverser les couleurs du logo */
}

/* Style pour le header avec les images About et Work */
header {
    position: fixed;
    top: 2.5vw; /* Marge de 2vw en haut */
    right: 2vw; /* Marge de 2vw à droite */
    display: flex;
    gap: 2vw; /* Espace de 2vw entre les deux images */
    z-index: 1000;
    mix-blend-mode: difference; /* Mode de fusion pour inverser les couleurs */
    filter: invert(1); /* Inverser les couleurs du logo */
}

/* Style pour les images About et Work */
header a {
    display: block; /* Pour que l'image remplisse le lien */
    height: 100%; /* Pour que l'image prenne toute la largeur du lien */
}

#apropos,#projets{
	font-family: "poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1em;
}

/* Style pour les colonnes gauche et droite */
#conteneur {
    display: flex;
}

#droite {
    width: 50vw; /* Largeur de chaque colonne */
    height: 100vh; /* Hauteur totale des colonnes */
    position: fixed;
    right: 0;
}

#gauche {
	position: fixed;
	display: flex;
	width: 50vw; /* Largeur de chaque colonne */
	height: 100vh;
    flex-direction: column-reverse; /* Ordre inverse pour les images */;}

/* Styles pour les images */

.image {
    width: 50vw; /* Largeur des images */
	height: 100%;

 
}

.background-image {
    width: 100%;
	height: 100%;
	object-fit: cover; 
}







/* MOSAÏQUE DE PROJETS */

#conteneurprojet {
    display: flex;
}

#colonneimage {
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    flex-wrap: wrap;
    position: fixed;
    padding: 75px;
}

#colonneprojet {
    width: 100%;
    height: 100vh;
    position: fixed;
    right: 0px;
    display: flex;
    justify-content: left;
    align-items: left;
    left: 20vw;
}

#fondgris {
    background-color: #f2f2f2;
    width: calc(50vw - 150px);
    height: calc(100vh - 150px);
    object-fit: cover;
    position: fixed;
    opacity: 100%;
}

.imagework {
    width: calc(50vw - 150px);
    height: calc(100vh - 150px);
    object-fit: cover;
    position: fixed;
    opacity: 100%;
}

#projet1,
#projet2,
#projet3,
#projet4,
#projet5,
#projet6,
#projet7,
#projet8,
#projet9,
#projet10,
#projet11 {
    opacity: 0; /* L'image est invisible par défaut */
}



.titreprojet {
    margin-top: 10px;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8em;
    width: 100%;
    opacity: 1;
    line-height: 1.5;
    text-align: left; /* Aligne les titres à gauche */
    padding-left: 20px; /* Décale légèrement les titres depuis la gauche */
}

strong {
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.2em;
}

hr {
    width: 110%;
}

#nomprojet {
    margin: auto;
    width: 40%;
    padding-left: 10px; /* Décale tout le bloc des titres légèrement vers la gauche */
}


/*projet une fois pas plus*/

video{
	width: 100vw;
}
#video{
	width: 100%;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#separation{
	display: flex;
}
#left{
	width: calc(50vw - 15px);
	margin: 10px 5px 0px 10px;
	position: relative;
}

#right{
	width: calc(50vw - 15px);
	margin: 10px 10px 0px 5px;
}
#grand{
	width: calc(50vw - 15px);
	overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
#photo{
	width: calc(50vw - 12.5px);
	display: flex;
}
.texte{
	height: calc(75vh - 200px);
}
h2{
	font-family: "poppins", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2em;
	margin-top: 200px;
	margin-left: 0px;
}
h3{
	font-family: "poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
	margin-left: 50px;
}
p{
	font-family: "poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-top: 20px;
	width: 35vw;
	margin-left: 50px;
	line-height: 20px;
}
#photo1,#photo2{
	width: calc(25vw - 12.5px);
	background-color: blue;
	overflow: hidden;
	margin-top: 25px;
	position: absolute;
	bottom: 10px;
}
#photo1{
	margin-right: 5px;

}
#photo2{
	right: 0px;
}
#photo3{
	margin: 10px 10px 0px 10px;
	width: calc(100vw - 20px);
	margin-bottom: 10px;
}
footer{
	height: 20vh;
	margin: 0px 10px 10px 10px;
}
#bottomunefois{
	margin-top: -10px;
}
/*projet teaser jpo*/

#grandjpo{
	width: calc(50vw - 15px);
	margin-right: 0px;
}
#photo4{
	width: calc(50vw - 12.5px);
	position: absolute;
	bottom: 0px;
}
#leftjpo{
	margin: 10px 5px 0px 10px;
	position: relative;
	width: calc(50vw - 15px);
}
#rightjpo{
	overflow: hidden;
	margin: 10px 10px 0px 5px;
	position: relative;
	width: calc(50vw - 15px);
}
#photo5{
	margin: 10px 0px 0px 10px;
	width: 100vw;
}
#bottomjpo{
	margin-top:0px;
	width: calc(100vw - 10px);
	overflow: hidden;
	height: 30vh;
	margin-bottom: 10px;
}
#photojpo{
	width: calc(50vw - 12.5px);
	display: flex;
}
.textejpo{
	height: calc(75vh - 12vh);
}

/* projet phoo d'objet */

#grandobjet{
	width: calc(50vw - 15px);
}
#photo6{
	width: calc(25vw - 12.5px);
	bottom: 0px;
	position: absolute;
}
#photo7{
	width: calc(25vw - 12.5px);
	margin-left: 5px;
	margin-top: 25px;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#leftobjet{
	margin: 10px 5px 0px 10px;
	width: calc(50vw - 15px);
	overflow: hidden;
	position: relative;
}
#rightobjet{
	overflow: hidden;
	margin: 10px 10px 0px 5px;
	width: calc(50vw - 15px);
	position: relative;
}
#bottomobjet{
	margin-top: 10px;
	width: calc(100vw - 10px);
	overflow: hidden;
	display: flex;
}
#photo8{
	width: calc(25vw - 12.5px);
	margin: 0px 10px 0px 10px;
}
#photo9{
	width: calc(25vw - 12.5px);
	margin: 0px 0px 0px 0px;
}
#photo10{
	width: calc(25vw - 12.5px);
	margin: 0px 0px 0px 10px;
}
#photo11{
	width: calc(25vw - 12.5px);
	margin: 0px 0px 0px 10px;
}
#photoobjet{
	width: calc(50vw - 12.5px);
	display: flex;
}
.textobjet{
	height: calc(75vh - 12vh);
}

/*catalogue d'rtiste*/

#photobas{
	margin: 0px 10px 10px 10px;
	display: flex;
	width: calc(100vw - 20px);
}
#photocata1, #photocata2{
	justify-content: space-between;
	width: calc(50vw - 15px);
}
#photocata2{
	margin-left: 10px;
}

#photo16, #photo17{ 
	width: calc(25vw - 12.5px);
	background-color: blue;
	overflow: hidden;
	position: absolute;
}
#photo16{
	margin-right: 5px;
	bottom: 10px;

}
#photo17{
	margin-left: 5px;
	bottom: 10px;
	right: 0px;
}

/*portrait presse*/
#bottom{
	height: 200px;
	overflow: hidden;
	margin-bottom: 10px;
	margin-top: 10px;
}

#photo21,#photo20{
	width: calc(25vw - 12.5px);
	background-color: blue;
	overflow: hidden;
	position: absolute;
	bottom: 0px;
}
#photo21{
	left: 0px;
}
#photo20{
	right: 0px;
}

/*mutek*/
#bottom{
	height: 200px;
	overflow: hidden;
	margin-bottom: 10px;
	margin-top: -10px;
}
#photo15{
	width: calc(50vw - 12.5px);
	overflow: hidden;
	position: absolute;
	bottom: 10px;
}

/*meta*/

#meta2{
	width: calc(50vw - 15px);
	margin-top: -90px;
}

#metab{
	height: 332px;
	overflow: hidden;
	margin-top: 5px;
	margin-bottom: 10px;
	position: relative;
	bottom: 0px;
}


/* about */
#lien {
    display: flex;
    width: calc(50vw - 15px);
    margin: 10px auto;
    justify-content: space-around;
}

#lien p {
    color: white;
    font-size: 1.5em;
    text-shadow: 0.25px 0.25px 0.25px black;
    font-family: "montserrat", sans-serif;
    font-weight: 800;
    -webkit-text-stroke: 0.5px black;
}

#lien p:hover {
    color: black;
    text-shadow: 0px 0px 0px black;
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#moi {
    margin: -100px 10px 0px 5px;
    width: calc(50vw - 15px);
}

.indent {
    text-indent: 2em;
}

#leftabout {
    width: 50vw;
    height: 100vh;
    padding: 75px;
    position: relative;
    overflow: hidden;
}

#imgabout {
    position: relative;
}

#recto {
    object-fit: cover;
    width: calc(50vw - 150px);
    height: calc(100vh - 150px);
}

#verso {
    display: none; /* Cacher l'image verso au départ */
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#separationabout {
    padding: 20px;
}

#bodyabout {
    min-height: 100vh;
}

#contact {
    display: flex;
    justify-content: space-between;
    width: 35vw;
    margin-top: 20px;
    line-height: 20px;
    margin-left: 0;
}

#contacttext{
	margin-left: -4vw;
	  width: 35vw;
	line-height: 20px;

}





/*blender*/

#photo12{
	width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#photo13{
	width: calc(25vw - 12.5px);
	margin-left: 5px;
	margin-top: 25px;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#photo14{
	width: 100%;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-top: 10px;
    margin-bottom: 2vh;
}
#leftblender{
	margin: 10px 0px 0px 10px;
	width: calc(50vw - 15px);
	overflow: hidden;
	position: relative;
}
#rightblender{
	overflow: hidden;
	margin: 10px 10px 0px 2vh;
	width: calc(50vw - 15px);
	position: relative;

}
#bottomobjet{
	margin-top: 10px;
	width: calc(100vw - 10px);
	overflow: hidden;
	display: flex;
}
#photo8{
	width: calc(25vw - 12.5px);
	margin: 0px 10px 0px 10px;
}
#photo9{
	width: calc(25vw - 12.5px);
	margin: 0px 0px 0px 0px;
}
#photo10{
	width: calc(25vw - 12.5px);
	margin: 0px 0px 0px 10px;
}
#photo11{
	width: calc(25vw - 12.5px);
	margin: 0px 0px 0px 10px;
}
#photoblender{
	width: calc(50vw - 12.5px);
	display: flex;
}
.textobjet{
	height: calc(75vh - 12vh);
}

/*identité visuel*/

#scanfull{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	object-fit: cover;
}

#photobascharte{
	margin: 0px 10px 10px 10px;
	width: calc(100vw - 20px);
	height: 30vh;
}
#imglong{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*timbre*/

#photo22{
	width: 100%;
	background-color: blue;
	overflow: hidden;
	margin-top: 25px;
	position: absolute;
	bottom: 10px;	
}
#lefttimbre{
	width: calc(50vw - 15px);
	margin: 10px 5px 0px 10px;
	position: relative;
}

#photo23{
	margin: 10px 10px 0px 10px;
	width: calc(100vw - 20px);
	margin-bottom: 10px;
	height: 30vh;
	object-fit: cover;
}