@font-face
 {
 font-family: quicksandbook;
 src: url("quicksand_book-webfont.ttf");
 src: url("quicksand_book-webfont.eot");
 src: url("quicksand_book-webfont.woff"); 
}

@font-face
 {
 font-family: 'GeosansLight';
 src: url('GeosansLight.ttf');
 }

@font-face
 {
 font-family: 'Cisgender';
 src: url('Cisgender.otf');
}

body
{
width: 100%;
margin: 0;
padding: 0;
z-index: 1;
font-family: quicksandbook;
color: rgb(235,235,235);
background-color: rgb(35,35,39);
font-size: 17px;
}

#site
{
position: fixed;	
left: 15px;
top: 0px;	
font-weight: bold;
color: rgb(204,102,0);

}

h1
{
position: fixed;	
width: 100%;
text-align: center;
top: 120px;
font-family: 'Cisgender';
font-size: 80px;
font-weight: 100;
}
h2
{
margin-top: 10px;	
text-align: right;
font-weight: 10;
font-size: 16px;
}
#carousel
{
margin-top: -660px;	
padding-right: -200px;
padding-left: 300px;
/*élargir width quand on rajoute du contenu 200px par vide + 300px portrait ou 533 paysage format 4/3* !!!!! mais approximatif à vérifier avec background-color: black*/
width : 7700px;
z-index: 2;
list-style-type: none;	
display: flex;
overflow-x: visible;
flex-grow: 0;
flex-shrink: 0;
}

#carousel:has(li:hover) :not(li:hover)
{
z-index: 3;	
}

img
{
height: 400px;
-webkit-transition:1s ease-in-out;
transition:1s;
}

.tableau
{
height: 400px;
z-index: 5;
margin-right: 250px;
margin-top: 40px;
}

.tableau img
{
height: 100%;
z-index: 6;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
border-style: solid;
border-width: 2px;
border-color: rgb(235,235,235);
}

.tableau img:hover
{
-webkit-transform:scale(2);
transform:scale(2);

margin-right: 150px;
margin-left: 150px;
}

.tout
{
/*ci-dessous à adapter quand on ajoute un tableau +325 sur largeur carousel*/
width: 8160px;
margin-top: -250px;
margin-bottom: -250px;
/*ci-dessous à adapter quand on ajoute un tableau + 175 en valeur absolue sur carousel*/
margin-left: -7960px;
height: 1040px;
-webkit-transition:1s ease-in-out;
transition:1s ease-in-out;
z-index: 0;
}

.tableau:hover ~ .tout
{
background-color: rgb(35,35,39);
z-index: 4;	
}

.tableau img:hover + h2
{
display: none;
}

.texte
{

height: 400px;
z-index:3;	
}

.texte p
{
width: 380px;
height: 270px;
text-align: justify;
margin-top: 60px;
margin-right: 250px;
margin-bottom: 40px;
}

.texte h3
{
width: 380px;
text-align: right;
font-size: 16px;
font-weight: normal;
}




#menu ul
{
	
height: 200px;
padding-top: 105px;
position: fixed;
text-align: center;
top: 1050px;
width: 100%;
z-index: 1;
}

#menu li
{	
display: inline;
font-family: quicksandbook;
color: rgb(204,102,0);
font-size: 16px;
margin: 3%;
}

li a
{
text-decoration: none;
color: rgb(235,235,235);

}

li a:hover
{
color: rgb(204,102,0);
}

a
{
text-decoration: none;
color: rgb(204,102,0);
}


#objet
{
font-size: 20px;
font-weight: 100;	
margin-top: 350px;
margin-left: 1px;
width: 50px;
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotate(-180deg);
}