/*accueil*/
	#conteneur {
	    display: flex; /* Afficher le conteneur en flex */
	    flex-direction: column; /* Une seule colonne sur mobile */
	    align-items: center; /* Centre les éléments */
	}

	.image {
	    width: 100%; /* Largeur à 100% pour les images */
	    height: auto; /* Hauteur automatique pour maintenir le ratio */
	    margin: 0; /* Supprime les marges */
	    padding: 0; /* Supprime le padding */
	}
	#gauche, #droite {
        position: relative; /* Positionnement relatif pour mobile */
        width: 100vw; /* Largeur à 100% */
        height: auto; /* Hauteur automatique pour le contenu */
    }
    h1 {
        bottom: 10px; /* Position du titre sur mobile */
    }

/*projet une fois pas plus*/

    #video {
        width: 100vw; /* Largeur de la vidéo à 100% de la largeur de la fenêtre */
        height: auto; /* Hauteur de la vidéo */
        overflow: hidden; /* Cache tout débordement */
    }

    #separation {
        display: block; /* Affiche les sections en bloc */
        width: calc(100% - 20px); /* Prend toute la largeur */
    }

    #left, #right {
        width: 100%; /* Prend toute la largeur */
        margin: 0; /* Supprime les marges */
        margin: 10px 10px 0px 10px;
    }

    #grand {
        width: 100%; /* Prend toute la largeur */
        margin-bottom: 10px; /* Espace en bas de l'image */
    }

    #photo {
        width: 100%; /* Prend toute la largeur */
        display: block; /* Affiche les images en bloc */
    }

    #photo1, #photo2 {
        width: 100%; /* Prend toute la largeur */
        background-color: blue; /* Couleur de fond pour les images */
        overflow: hidden; /* Cache tout débordement */
        margin-top: 25px; /* Espace en haut */
        position: static; /* Position par défaut */
    }

    h2, h3, p {
        font-family: "poppins", sans-serif; /* Police de caractères */
        margin: 0; /* Supprime toutes les marges */
        width: 100%; /* Prend toute la largeur */

    h2 {
        font-weight: 700; /* Gras */
        font-size: 1.5em; /* Taille de la police ajustée */
        margin-top: 10px; /* Ajuster la marge en haut */
    }

    h3 {
        font-weight: 400; /* Normal */
        font-size: 1em; /* Taille de la police ajustée */
    }

    p {
        font-weight: 400; /* Normal */
        margin-top: 10px; /* Ajuster la marge en haut */
        line-height: 1.5; /* Hauteur de ligne ajustée */
    }
    #bottomunefois {
        margin-top: 0; /* Ajuster la marge en haut */
        width: 100%; /* Largeur de l'image du bas à 100% */
    }
    
	/*footer projet suivant*/
	#suivant{
		margin-top: 10px;
		margin-bottom: 10px;
		height: 40px;
		width: 20vw;
		margin-left: 70vw;
	}

	h4{
		color: white;
		font-size: 2em;
		text-align: center;
		text-shadow: 0.5px 0.5px 0.5px black;
		font-family: "montserrat", sans-serif;
		font-weight: 800;
		-webkit-text-stroke: 1px black;
	}
	h4:hover{
		color: black;
		text-shadow: 0px 0px 0px black;
		font-family: "montserrat", sans-serif;
		font-weight: 400;
		font-style: normal;
	}

/*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: -30px 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: calc(50vw - 15px);
	margin: 10px 5px 0px 10px;
	position: relative;
	overflow: hidden;
}
#pp{
	height: 500px;
	position: absolute;
	right: 20px;
	top: calc(50vh - 250px);
}
/*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;
}
#leftblender{
	margin: 10px 5px 0px 10px;
	width: calc(50vw - 15px);
	overflow: hidden;
	position: relative;
}
#rightblender{
	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;
}
#photoblender{
	width: calc(50vw - 12.5px);
	display: flex;
}
.textobjet{
	height: calc(75vh - 12vh);
}