@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: 'Cisgender';

 src: url('Cisgender.otf');

}



body

{

width: 100%;

margin: 0;

padding: 0;

z-index: 1;

background-color: rgb(35,35,39);

font-family: quicksandbook;

color: rgb(235,235,235);

font-size: 17px;

}



#site

{

position: fixed;	

left: 16px;

top: 0px;	

font-weight: bold;

color: rgb(204,102,0);

}



h1

{

color: white;

position: fixed;	

width: 100%;

text-align: center;

top: 120px;

font-family: 'Cisgender';

font-size: 80px;

font-weight: 100;

}



h2

{

margin-top: 2px;	

text-align: center;

font-weight: 10;

font-size: 17px;

}



#carousel

{

margin-top: 410px;	



padding-left: 5px;

/*augmenter 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 : 22865px;

z-index: 2;

list-style-type: none;	

display: flex;

overflow: visible;

flex-grow: 0;

flex-shrink: 0;

}



#carousel:has(li:hover) :not(li:hover)

{

z-index: 3;	

}



.tableau

{

z-index: 5;

margin-right: 250px;

margin-top: 40px;

}



.tableau img

{

height: 400px;

z-index: 6;

-webkit-transition:1s ease-in-out;

transition:1s ease-in-out;

}



.tableau img:hover

{

-webkit-transform:scale(2);

transform: scale(2.2);

margin-right: 150px;

margin-left: 150px;

}



.tableauxxl

{

height: 400px;

z-index: 5;

margin-right: 250px;

margin-top: 40px;

}



.tableauxxl img

{

height: 100%;

z-index: 6;

-webkit-transition:1s ease-in-out;

transition:1s ease-in-out;

}



.tableauxxl img:hover

{

-webkit-transform:scale(2.2);

transform:scale(2.2);

padding-bottom: 110px;

padding-top: 20px;

margin-right: 250px;

margin-left: 250px;

}



.tout

{

/*ci-dessous à adapter quand on ajoute un tableau +325 sur largeur carousel (voir caroussel)*/

width: 22950px;

margin-top: -250px;

margin-bottom: -400px;

/*ci-dessous à adapter quand on ajoute un tableau + 175 en valeur absolue sur carousel*/

margin-left: -23265px;

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: 70px;

}



.texte h3

{

width: 380px;

text-align: right;

font-size: 17px;

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);

}



h3 a

{

text-decoration: none;


}

#objet
{
color: yellow;
font-size: 20px;
font-weight: 100;	
padding-top: 20px;
margin-right: 190px;
padding-left: 15px;
width: 45px;
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotate(-180deg);
}


#suite
{
margin-left: 20px;
margin-top: 200px;
width: 600px;
z-index: 5;	
}

#suite:hover ~ .tout

{
color: rgb(235,235,235);
z-index: 4;	
}