@charset "UTF-8";


/* =====  1 Global Rules & Definitions  ===================================== */

/* -----  1.1 Font Definitions  --------------------------------------------- */

/* DIN */
@font-face {
  font-family: 'Din_Alternate';
  src:  url(../fonts/din_bold-webfont.woff2) format("woff2"),
        url(../fonts/din_bold-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}

/* -----  1.2 Reset & Normalization  ---------------------------------------- */

body {margin: 0 0 0 0; -webkit-font-smoothing: antialiased;}

ul, li {
list-style:none;
margin-left:0;
padding-left:0;
}

/* -----  1.3 General Typography  ------------------------------------------- */



h1 {font-family: "Din_Alternate"; font-size: 14px; font-weight: normal;}
h2 {font-family: "Din_Alternate"; font-size: 9px;font-weight: normal;}

@-moz-document url-prefix() {
h1 {font-family: "Din_Alternate"; font-size: 14px; font-weight: normal;}
h2 {font-family: "Din_Alternate"; font-size: 9px;font-weight: normal;}
}

.soulignement {text-decoration: underline;}

p {font-family: 'Droid Serif', serif; font-size: 17px;    margin-top: 0;}

/* Links */
a, a:visited {text-decoration: none; color: black;}



/* Misc */

::-moz-selection { /*@bugfix mozilla*/
    background: black; /* REMPLACER PAR LA COULEUR DÉSIRÉE*/
    color: white;
}
::selection { /* effet souris  */
    background: black; /* REMPLACER PAR LA COULEUR DÉSIRÉE*/
    color: white;
}

.countImages h1::-moz-selection { /*@bugfix mozilla*/
    background: white; /* REMPLACER PAR LA COULEUR DÉSIRÉE*/
    color: black;
}
.countImages h1::selection { /* effet souris  */
    background: white; /* REMPLACER PAR LA COULEUR DÉSIRÉE*/
    color: black;
}

.gallery li ::-moz-selection { /*@bugfix mozilla*/
    background: none; /* REMPLACER PAR LA COULEUR DÉSIRÉE*/
    color: none;
}
.gallery li ::selection { /* effet souris  */
    background: none; /* REMPLACER PAR LA COULEUR DÉSIRÉE*/
    color: none;
}


.loaders {
	margin-top: 83px;
	margin-left: 50%;
	margin-right: 50%;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    border-top: 2px solid #000000;
    width: 15px;
    height: 15px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* -----  1.4 Images & Figures  --------------------------------------------- */



/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* -----  2.1 Kirbytext  ---------------------------------------------------- */

/* -----  2.2 Button  ------------------------------------------------------- */

/* -----  2.3 Grid & Layout  ------------------------------------------------ */

/* -----  2.4 Pagination  --------------------------------------------------- */

/* ----- 2.5 Projects Showcase ---------------------------------------------- */



/* =====  3 Site Layout  ==================================================== */



/* ----- 3.1  Header  ------------------------------------------------------- */

/* -----  3.2 Menu  --------------------------------------------------------- */
.listMenu {
	text-transform: uppercase;
	text-align: left;
	position: absolute;
	height: 100%;
}
.onTheTop {padding-left: 20px; top:0px; position: absolute;}
.onTheBottom {top:0px; left:50%; position: absolute;}
.onTheTop h1, .onTheBottom h1 {line-height:30px;}


@media screen and (max-width: 975px) {
.onTheTop {top:0px; position: relative;	margin-bottom: 70px;}
.onTheBottom {bottom:0px; position: relative; left:0%; padding-left: 20px; }
.onTheTop h1, .onTheBottom h1 {line-height:20px;}
.listMenu {position:relative;}
}


@media screen and (max-width: 760px) {
.onTheTop {top:0px; position: relative;	margin-bottom: 70px;}
.onTheBottom {bottom:0px; position: relative; left:0%; padding-left: 20px; }
.onTheTop h1, .onTheBottom h1 {line-height:20px;}
.listMenu {position:relative;}
}

.separateur {/*border-left: 1px solid black;*/height: 16px;}



/* -----  3.3 leftMenu  ------------------------------------------------ */
.leftMenu {
	left: 0px;
	position: fixed; height: 100%;
	width: 131px;
	background-color:white;
	top:0px;
	padding-left: 28px;
	padding-top: 18px;
	opacity: 1;
	z-index: 50;
	transition: left 0.1s ;
}
.buttonMenu {position: fixed; left: 24px; top: 15px; cursor: pointer; }
.buttonMenu:hover{border-bottom: solid black 1px;}
.touchMenu {position:fixed; height:100%; width: 130px; top:0px;}


.menuHide {left: -159px; transition: left 0.1s ;}

/*@media screen and (max-width: 1015px) {
	.leftMenu {left: -159px;}
	.touchMenu {position:fixed; height:100%; display: block;}
}
*/
@media screen and (max-width: 760px) {
	.touchMenu {position:fixed; height:50px;}
	.leftMenu {border-right: solid black 1px;}
}



/* -----  3.4 Main Content  ------------------------------------------------- */
.containerGauche {width: 50%; height:100%; }
.containerDroite {width: 50%; height:100%; position: fixed; right:0px; top: 0px;}
.leftBlackLine { border-left: 1px solid black; }

.scroll {overflow-y: scroll;}

@media screen and (max-width: 760px) {
	.leftBlackLine {
		border-left: none;
		border-top: 1px solid black; 
}
	.containerGauche {
		width: 100%;
	}
	.containerDroite {
	  	position: relative;
	 	background-color: white;
     	width: 100%;
    }

}

/* -----  3.5 rightGalerie  ------------------------------------------------- */
.buttonGalerie {position: fixed; right: 20px; top:15px;}
.touchGalerie{position:fixed; height:100%; width: 50px; top:0px; right:0px;}

.containerGalerie { right: -100px; position: fixed; height: 100%; top:0px; opacity: 1; z-index: 40; overflow: auto;}

.galerie {padding-left: 5px; padding-right: 5px;}

.blocMosa {height: 60px; width: 60px;}
.blocMosa img {cursor: pointer; object-fit:contain;  width: 50px; height: 50px}

@media screen and (max-width: 760px) {
	.containerGalerie, .buttonGalerie, .touchGalerie {display: none;}
}

/* -----  3.6 projectList  ------------------------------------------------- */
.titleCat {
	margin-top: 25px;
	margin-bottom: 76px;
	text-transform: uppercase;
	width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 113px;
}

.projectList {
	width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.projectList .indentRight h1{
	display: inherit;
}

.indentLeft {
}

.indentLeft h2 {
	position: absolute;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 20px;
}


.indentRight li {
 	margin-left: 56px;
}


.indentRight h1 {
	line-height: 10px;
	margin-top: 0px;
    margin-bottom: 0px;
}

.projectList .indentRight h1:hover {
 	border-bottom: black solid 1px;
}

.activeOnTheList {
 	border-bottom: black solid 1px;
}

.blocsAnnees {
	margin-bottom: 14px;
}

/* -----  3.6 projectDetails  ------------------------------------------------- */

.titleProject {
	margin-top: 25px;
	margin-left: 36px;
    text-transform: uppercase;
}

.containerLegendes {
	bottom: 0px;
	position: fixed;
	margin-left: 36px;
	z-index: 20;
}
@media screen and (max-width: 760px) {
.containerLegendes {position: relative;}
}

.projectDetails {
	max-width: 380px;
}

.projectDetails .indentRight h1 {font-size: 16px; line-height: 20px; margin-left: 56px;}
.blocInfo {margin-bottom: 20px;}

.blocSousCatButton {
margin-left: 56px;
}

.sousCatButton h1 {
	border:solid black 1px;
	background-color: white;
	display: inline-flex;
	padding-left: 5px;
	padding-right: 5px;
}
.sousCatButton h1:hover {
	background-color: black;
	color: white;
}


@media screen and (max-width: 760px) {
	.projectDetails .indentRight h1 {font-size: 11px; line-height: 15px; margin-left: 56px;}
}

/* -----  3.6 projectGallery  ------------------------------------------------- */

.blocPrevious {		
	top: 0px;
	z-index: 5;
	width: 25%; height: 100%;
	position: fixed;
	cursor: url(flechesN_G.svg),auto;
}
.blocNext {
	top: 0px;
	z-index: 5;
	width: 25%; height: 100%;
	position: fixed;
	right: 0px;
	cursor: url(flechesN-D.svg),auto;
}


.countImages{
	margin-top: 25px;
    margin-left: 40px;
}

.hide {display:none;}
.show {display: block;}

.gallery li {
	width: 70%;
	margin-left: 13%;
/*	border : red solid 1px;*/
}

.gallery img {
width: 100%;
height: 100%;
object-fit: contain;
}

@media screen and (max-width: 760px) {
	.blocPrevious, .blocNext { top:0px; width: 50%; position: absolute;}
	.blocPrevious {
    content: url(flechesN_G.svg);
    cursor: pointer;
    width: 22px;
    padding-left: 10px;
	}
.blocNext {
	content: url(flechesN-D.svg);
	cursor: pointer;
	width: 22px;
	padding-right: 10px;
	}

}



/* =====  4 Template-specific Components ==================================== */

/* -----  4.1 Homepage  ----------------------------------------------------- */

.mainMenu .listMenu {
	width: 50%;
}

.mainMenu .listMenu h1 {
	font-size: 40px;				
}

@media screen and (max-width: 1740px) {
	.mainMenu .listMenu h1 {font-size: 37px;}
}
@media screen and (max-width: 1440px) {
	.mainMenu .listMenu h1 {font-size: 34px;}
}
@media screen and (max-width: 1300px) {
	.mainMenu .listMenu h1 {font-size: 30px;}
}
@media screen and (max-width: 1100px) {
	.mainMenu .listMenu h1 {font-size: 25px;}
}

@media screen and (max-width: 975px) {
	 .mainMenu .listMenu {width: 90%}
	
}


@media screen and (max-width: 760px) {
	 .mainMenu .listMenu {width: 90%}
	 .mainMenu .listMenu h1 {font-size: 18px;}
	
}


.ContainerImageHome{
	margin-left:30px;
	margin-right: 30px;
	margin-top: 24px;
}
.imageHome {
	width: 100%;
}

.annonceHome {
    position: absolute;
	bottom: 14px;
    margin-left: 30px;
    margin-right: 30px;
}
.annonceHome h1 {font-size: 16px;}
.annonceHome h1 p {font-family:"Din_Alternate"; font-size: 16px;}

@media screen and (max-width: 760px) {
	.annonceHome {position: relative;    
		left: 21px;
	    top: 7px;
	    margin-right: 45px;
	}
	.imageHome {display: none;}
}

/* ----- 4.2 TEXT  -------------------------------------------------- */

.titleCatText{
	margin-top: 25px;
	margin-bottom: 72px;
	text-transform: uppercase;
	width: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 113px;
}

.projectListText {
	width: 410px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.projectListText .indentLeft h2 {
	position: absolute;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 40px;	
}

.projectListText .indentRight li {
 	margin-left: 56px;
}

.projectListText .indentRight h1 {
	display: initial;
	line-height: 39px;
	margin-top: 0px;
    margin-bottom: 0px;
    font-size: 20px;
}

.textProject {
	margin-left: 10px;
	margin-right: 15px;
    margin-top: 9px;

}
.textProject h1{
	font-size: 24px;
    max-width: 400px;
    margin-top: 0;	
}

@media screen and (max-width: 760px) {
	.projectListText {
		max-width: 200px;
		margin-bottom: 10px;
	}
	.projectListText .indentRight h1	{
		    font-size: 14px;
    		line-height: 18px;
	}
	.projectListText .indentLeft h2	{
		line-height: 20px;
	}
	.titleCatText{
		width: 200px;
	}
}

/* -----  4.3 Publications  --------------------------------------------------------- */

.titleCatPublication{
	margin-top: 23px;
    margin-bottom: 76px;
    text-transform: uppercase;
    text-align: right;
    padding-right: 23px;
}

.containerPublications {
	height:auto;
	overflow: hidden;
	top:0px;
	left:0px;
	margin:0px auto; 
    position: relative;
    margin-left: 170px;
    margin-right: 0px;
}
.containerPublications p {
	font-size: 12px;		
}
.blocPublication {width:25%; height: 550px; float: left}
.blocPublication img {
	width: 95%;
}
.blocPublication p {
	width: 80%;
}

@media screen and (max-width: 950px) {
	.blocPublication {
		width:33.3%; height: 480px;
		}
    .containerPublications {
    	margin-left: 60px;
    	margin-right: 60px;
    }
}

@media screen and (max-width: 730px) {
	.blocPublication {
		width:50%; height: 480px;}
	.containerPublications {
    	margin-left: 40px;
    	margin-right: 40px;
    }
}

@media screen and (max-width: 490px) {
	.blocPublication {
		width:100%; height: 480px;}
	.containerPublications {
    	margin-left: 20px;
    	margin-right: 20px;
    }
}




/* -----  4.4 Contact  ------------------------------------------------------ */

.contactContainer {
    margin-left: 25px;
    margin-top: 23px;
}

.contactContainer h1, .contactContainer p, .contactContainer a {
	color:white;
}
.fondNoir{
	background-color: black;
}

@media screen and (max-width: 500px) {
	.contactContainer {
	    margin-left: 30px;
	    margin-top: 60px;
	}
}