@font-face{

	font-family:'feroniapi';
	src: url('Feroniapi-MediumItalic.woff2');
}

@font-face{

	font-family:'rubik';
	src: url('Rubik.ttf');
	font-weight: 300;
}


html {
    padding: 0;
    margin: 0;
}

.grandtitre{

	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;

}

.imagenote, .definition {
	    cursor: pointer;

}


.container{


	border-left: 1px solid black ;
	border-right: 1px solid black;
	max-width: 50%;
    margin-left: auto;
   	margin-right: auto;
   	margin-bottom: 13vh;
   	padding:  10px 0 10px 0;
}

.container p .hide{
	
	display: none;
}

 .container p .definition:hover + .hide{

    display: block;
    text-align: justify;
    position: absolute;
    font-family:'rubik' ;
    background-color: none;
    font-size: 0.8rem;
    line-height: 1.2;
    width: 150px;
    padding: 5px;
    transform: translate(-200px, -25px);

 }

 .container p .hideimage{

 	display: none;
 }

.container p .imagenote:hover + .hideimage{

	display: block;
    text-align: justify;
    position: absolute;
    width: 150px;
    padding: 5px;
    transform: translate(750px, 25px);
}

.container p .imagenote:hover + .hideimage img{

	width: 15vw;
  height: 20vh;

}
.bibliographie{
/*
	border: 2px solid blue;*/
	max-width: 80%;
    margin-left: auto;
   	margin-right: auto;
   	margin-bottom: 10px;	
}

.credit{

	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}


.bibliographie .partie1{
	
    display: flex;
    gap: 3vh;
    margin-bottom: 10vh;	
}


.bibliographie .partie2{

    display: flex;
    gap: 3vh;
    margin-bottom: 10vh;		
}

.bibliographie .partie3{

    display: flex;
    gap: 3vh;
    margin-bottom: 10vh;		
}

.bibliographie .partie4{

    display: flex;
    justify-content: space-between;
    margin-bottom: 10vh;   
}

.bibliographie .partie4 section article{

	width: 48%; 
}

.bibliographie section article {
    flex: 1;  
    min-width: 0;        
}

.bibliographie article p {

	text-align: start;
}
.plante{

 width: 45vw;
  height: 60vh;
  justify-content: right;
  background-size: 100%; 
  background-position: center;
  overflow: hidden;
  align-items: center;
  display: flex;

}

img.plante{

	width: 80%;
	object-fit: contain;	
}


.titre{
 
 	display: flex;
  	align-items: center;
  	gap: 0;

/*  	border: 2px solid blue;*/
}

.titre h1{

	text-align: center;
  	font-size: 9rem;
  	font-family: 'feroniapi';
  	font-weight: 300;
}

.titre section {
	display: flex;
	flex-direction: column;
}

.titre section p{
	text-align: center;
  	font-size: 1rem;
  	font-family: 'rubik';
    font-weight: 300;
    line-height: 1.5;
}

#imagetitre{

	display: flex;
  	width: 50vw;
  	height: 95vh;
  	background-image: url("../../images/imagesdessin/litdessus.png");
  	background-repeat: no-repeat;
  	background-size: 95%;
  	background-position: center;
  	overflow: hidden;
  	justify-content: center;
  	align-items: center;
  	border-left: 1px solid black;
}

#imagetitre img{

	width: 100%;
	object-fit: contain;
}

section h2{

  	text-align: left;
  	font-size: 3rem;
  	font-family: 'feroniapi';
  	font-weight: 300;
  	margin: 3vh;

/* 	border: 2px solid pink;*/
}

section h3{

	text-align: left;
  	font-size: 1.2rem;
  	font-family: 'rubik';
  	font-weight: 600;
  	margin: 3vh;
}

section p{

	text-align: justify;
	hyphens: auto;
	line-height: 1.3;
	text-justify: inter-word;
  	font-size: 1rem;
  	font-family: 'rubik';
/*  border: 2px solid green;*/
    font-weight: 300;
    margin: 3vh;

}

section blockquote{

	text-align: start;

	hyphens: auto;
	line-height: 1.3;
	text-justify: inter-word;
  	font-size: 1rem;
  	font-family: 'rubik';
  	font-weight: 300;
  	font-style: italic;
  	margin: 8vh;

}

section .prenom_citation{

	text-align: right;
}

section span{

	color: rgb(255, 94, 196);
}

a{
	color: black;

}

#image{

  	width: auto;
  	height: 50vh;
  	background-size: 95%;
/* background-color: pink;*/
  	background-position: center;
  	overflow: hidden;
  	justify-content: center;
  	align-items: center;
  	display: flex;
  	padding: 15px;
}

#image img{

	width: 80%;
	object-fit: contain;
}

#image img.img-chat {
  	
  	width: 40%;

}

#image img.img-ordi{
	
	width: 75%;
}

#image img.img-console{

	width: 90%;
}




@media only screen and (min-width: 1px) and (max-width: 900px) {



.container p .imagenote:hover + .hideimage{


transform: unset;

}

.container p .hideimage{

display: hide;
display: none;

}

.container{

	max-width: 100%;
	border: none;
/*	border: 2px solid green;*/
}

.grandtitre{

	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: none;
}

#image{

	width: 100%;
  	height: 100%;
}

.titre{

	display: grid;

}
.titre h1{

	font-size: 6rem;
}

#imagetitre{

	width: auto;
	height: 40vh;
	background-image: url("../../images/imagesdessin/amayacouvertureeee.png");
	border-left: none;
	background-size: 80%;
}

#image{

	width: auto;
}

#imagetitre img{

	width: 80%;
	object-fit: contain;
}

.bibliographie section article {

	flex: none;
	max-width: 100%;
}

	
.bibliographie{

	max-width: 100%;
}

.credit{

	max-width: 100%;
}
.bibliographie .partie1{

	display: grid;
	margin-bottom: 0.5vh;
	gap: none;
}

.bibliographie .partie2{

	display: grid;
	margin-bottom: 0.5vh;
}

.bibliographie .partie3{

	display: grid;
	margin-bottom: 0.5vh;
}

span{

	display: none;
}

.image, .plante{

	display: none;
}


}