body, html {
	/*font-family: nhaas;*/
	height: 100vh;
	cursor: url("cursor4.png"), auto;
	max-height: 100vh;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	background-color: white;
	font-family: ABC Arizona Regular;
}
#body_sp {
	margin: 0;
	/*padding-left: 10px;
	padding-right: 5px;*/
}

::-webkit-scrollbar {
       width: 0px;
       background: transparent; /* make scrollbar transparent */
}

a {
	text-decoration: none;
}

.italic {
	font-family: ABC Arizona Italic;
}

em {
	font-family: ABC Arizona Italic;
}

/*DESACTIVER ENREGISTREMENT IMAGES*/


@font-face {
	font-family: ABC Arizona Regular;
	src: url(ABCArizonaText-Regular.otf);
}

@font-face {
	font-family: ABC Arizona Italic;
	src: url(ABCArizonaText-RegularItalic.otf);
}

@font-face {
	font-family: Adobe Caslon Regular;
	src: url(Adobe-Caslon-Pro-Regular.ttf);
}

#main-container {
	padding-right: 12px;
	padding-left: 12px;

	/*color: #AC328B;*/ /*violet*/
	/*color: #A71344;*/ /*pourpre*/
	/*color: #B91435;*/ /*pourpre rouge clair*/
	color: #156DE5; /*bleu*/

	/*color: #74a8d7;*/ /*PMS 284*/
	/*color: #003992;*/ /*PMS 287*/
	/*color: #1007a0;*/ /*PANTONE 072C*/
}

#main-container a {
	text-decoration: none;
	/*color: #AC328B;*/ /*violet*/
	/*color: #A71344;*/ /*pourpre*/
	/*color: #B91435;*/ /*pourpre rouge clair*/
	color: #156DE5; /*bleu*/

	/*color: #74a8d7;*/ /*PMS 284*/
	/*color: #003992;*/ /*PMS 287*/
	/*color: #1007a0;*/ /*PANTONE 072C*/
} 
#main-container a:hover {
	/*color: #CC6EB3;*/
	text-decoration: underline; 
} 

/*NAVIGATION*/
#container-nav {
	width: 99.3%;
	height: auto;
	/*border: 2px solid green;*/
	margin-top: 45vh;

	display: flex;
	/*align-items: center;*/

	position: fixed;
	z-index: 999;
}

nav {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.infos {
	text-align: right;
	padding-right: 10px;
}
.infos-infos {
	text-align: right;
	padding-right: 10px;
	padding-left: 88.88%;
	width: 11.11%;
}

.dropbtn {
	width: 11.11%;
	cursor: pointer;
	/*border: 1px solid red;*/
}

.dropdown-content div {
	display: flex;
}

/*affichage sous division menu au survol*/
.dropdown-content {
	display: none;
	/*position: absolute;*/
}

.dropbtn:hover .dropdown-content {
	display: block;
}

.dropdown-content:hover {
	display: block;
}

#container-nav-mobile {
	display: none;
	z-index: 1000;
}

/* BOUTON POUR ACTIVER/DESACTIVER TEXTE*/
#container-button {
	display: flex;
	justify-content: flex-end;
	padding-top: 12px;
	padding-right: 8px;
	position: absolute;
	right: 0;
	z-index: 1000;
}

#btn {
	/*position: absolute;*/
	width: 22px;
	height: 22px;
	/*border-radius: 50%;*/
	/*border: 1px solid #156DE5;*/
	/*background-color: #156DE5;*/
	cursor: pointer;
	transition-duration: 0.15s;
}

#btn.active {
	fill:transparent;
	stroke: #156de5;
	stroke-linecap:butt;
	stroke-width: 7px;
}


/*GESTION DES IMAGES*/
#container-image {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

#container-image img {
	margin-bottom: 12px;
}

#container-image .image-verticale {
	width: 44.6%;
}

#container-image .image-horizontale {
	width: 79%;
}

/*Afficher légende image au survol*/
.container-image-et-text {
	position: relative;
	display: flex;
}

.overlay, .overlay-horizontale {
    opacity: 0;
    display: flex;
    align-items: end;
    padding-bottom: -120px;
    padding-left: 5px;
    height: 98.2%;
    /*font-family: ABC Arizona Italic;*/
    transition-duration: 0.2s;
    position: absolute;
}
.overlay {
    width: 44.2%;
}
.overlay-horizontale {
	width: 79%;
}

.overlay:hover, .overlay-horizontale:hover {
    opacity: 1;
 }


/*GESTION DU TEXTE*/
#container-texte {
	position: fixed;
	z-index: 999;
	bottom: -8px;
	cursor: default;
	padding-right: 12px;
}

/*/////////////////////////*/
/*SCROLL HORIZONTAL ACCUEIL*/
/*/////////////////////////*/
#container-image-accueil .box {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0;

	/*border:1px solid red;*/
}

#container-image-accueil .box > div {
	position: relative;
	/*border: 1px solid blue;*/

	padding: 0;
	margin-right: 0px;
}

.box img {
	margin-right: -0.5px; /*permet de légèrement superposer les images d'accueil et d'éviter le filet gris entre les images*/
}

#container-image-accueil {
	overflow-y: scroll;
	overflow-x: hidden;
	transform: rotate(270deg) translateX(-100%);
	transform-origin: top left;
	position: absolute;
	width: 97.9vh; /*gère la taille du conteneur des plus grandes images*/
	height: 100vw;
	padding-left: 0px;
	padding-right: 0.7%; /*espace entre haut de la page et début des images, marge du haut*/
	padding-bottom: 0;
	padding-top: 0;

	margin: 0;
	/*border: 2px solid orange;*/
}

#container2 {
	transform: rotate(90deg) translateY(-97.9vh) translateX(-18%);
	transform-origin: top left;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	width: 100vh;
	height: 100vw;

	/*border: 1px solid green;*/
}

.image-accueil {
	height: 97.4vh;
}

.image-accueil-niv2 {
	height: 75vh;
	transform: translateY(-22.3vh);
}

.image-accueil-horizontale {
	height: 50vh;
	transform: translateY(-47.3vh);
}

/*Pour afficher les divs de manière aléatoire*/
.acc-random {
	display: none;
}

#top-marge-accueil, #bottom-marge-accueil {
	display: flex;
	position: absolute;
	width: 100vw;
	height: 12px;
	background-color: white;
	z-index: 999;
}

#bottom-marge-accueil {
	bottom: 0;
}

/*/////////////////////////*/
/*///////PAGE INDEX////////*/
/*/////////////////////////*/
#container-close-mobile {
	display: none;
}

#container-image-index {
	display: flex;
	flex-direction: column;
	padding-left: 11.11%;
	padding-top: 45vh;
	/*border: 2px solid rgb(236, 47, 195);*/
}

#container-image-index-ligne {
	width: 75.3%;
	display: flex;
	flex-direction: raw;
	/*border: 2px solid rgb(47, 236, 79);*/
}

#index-ligne {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	position: relative;
	/*border: 2px solid blue;*/
}

#index-ligne a {
	margin: 0;
	padding: 0;
	text-decoration: none;
	z-index: 1000;
}

#index-ligne img {
	/*transition-duration: 0.1s;*/
}
#index-ligne:hover img {
	/*transform: rotate(7deg);*/
	/*filter: grayscale(80);*/
	/*visibility: hidden;*/
	/*opacity: 0;*/
}

/*.container-image-index-ligne {
	position: absolute;
	width: 100vw;
}*/

.nom-serie-index {
	height: 100% !important;
	width: 100%;
	opacity: 0;
	align-items: end;
	padding-left: 75.3%;
	position: absolute;
	transition-duration: 0.2s;
}

#index-ligne:hover .nom-serie-index {
	opacity: 1;
}

.nom-serie-index:hover {
	text-decoration: none !important;
}

.nom-serie-index-mobile {
	display: none;
}

/*#index-ligne:hover .image-index {
	opacity: 30%;
}*/


.image-index {
	height: 70px;
	margin-right: -4px;
	margin-bottom: -4px !important;
}

/*animation apparition noms séries index*/
/*@keyframes apparition {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.index-ligne {
	animation: apparition linear;
	animation-timeline: view();
	animation-range: entry exit;
}*/

/*/////////////////////////*/
/*///////PAGE INFOS////////*/
/*/////////////////////////*/
#main-container-infos-mobile {
	display: none;
} 

#main-container-infos {
	display: flex;
	flex-direction: row;
	position: fixed;

	width: 100vw;
	max-height: 100vh;
}

#main-container-infos > div {
	padding-top: 12px;
} 

#main-container-cv {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	width: 33.33%;
	max-height: 100%;
}

#row-cv {
	display: flex;
	flex-direction: row;

	/*border: 1px solid red;*/
	width: 100%;
	height: fit-content;
}

#row-cv p {
	margin: 0;
	cursor: default;
}

#column1-cv {
	width: 33.33%;
	/*border: 1px solid purple;*/

	padding-right: 10px;
}

#column2-cv {
	width: 66.33%;
	/*border: 1px solid purple;*/

	padding-right: 10px;
}

#main-container-bio {
	/*border: 1px solid blue;*/
	width: 33.33%;
	max-height: 100%;
	padding-right: 10px;
	overflow-y: scroll;

	padding-bottom: 50px;
}

#main-container-bio p {
	margin: 0;
	padding-right: 10px;
	/*position: fixed;*/
	width: 100%;
}

#main-container-credits {
	/*border: 1px solid blue;*/
	width: 11.11%;
	height: fit-content;
}

#main-container-credits p {
	margin: 0;
	position: fixed;
	width: 11.11%;
}

/*///////////////////////////////////////////////////////////////*/
/*/////////////////////////RESPONSIVE////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/

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

html, body {
    max-width: 100%;
    background-color: white;
    font-size: 18px;
}

/*GESTION DU MENU SUR TEL*/
/*#container-nav {
	margin-top: 3vh;
}

nav {
	flex-direction: column !important;
}

.dropdown-content {
	display: flex !important;
	flex-direction: row !important;
}

.dropdown-content div {
	display: flex !important;
	padding-left: 5vh;
}

.dropdown-content a:active {
	color:red;
}

.dropbtn {
	width: fit-content !important;
}*/

#container-nav, nav {
	display: none;
}

#container-nav-mobile {
	display: flex;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: auto;
	padding-right: 12px;
	/*border: 1px solid red;*/
}

#nav-mobile {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 100vh;
	padding-right: 12px;
	padding-top: 12px;
	z-index: 1000;
}

.dropbtn-mobile {
	width: 100%;
}

.dropdown-content-mobile-menu {
	
}

.dropdown-content-mobile-menu,
.dropdown-content-mobile-photo,
.dropdown-content-mobile-expo,
.dropdown-content-mobile-projets,
.dropdown-content-mobile-commissions,
.dropdown-content-mobile-publications  {
	display: none;
	padding-left: 24px;
}

.infos-mobile {
	text-align: left !important: 
}

/* BOUTON POUR ACTIVER/DESACTIVER TEXTE*/
#container-button {
	padding-right: 12px;
}

/*AFFICHAGE DES IMAGES SUR TELEPHONE*/
.image-verticale, .image-horizontale {
	width: 100% !important;
}

/*Afficher légende image non plus au survol mais tout le temps*/
.container-image-et-text {
	position: relative;
	display: flex;
}

.overlay, .overlay-horizontale {
    opacity: 1;
    display: flex;
    align-items: end;
    padding-bottom: 10px;
    padding-left: 5px;
    height: 98.2%;
    /*font-family: ABC Arizona Italic;*/
    transition-duration: 0.2s;
    position: absolute;
    width: 100%;
}

/*/////////////*/
/*GESTION INDEX*/
/*/////////////*/
#container-close-mobile {
	display: flex;
	position: fixed;
	z-index: 999;
	width: 93.7%;
	height: auto;
	padding-right: 12px;
}

#index-ligne {
	/*padding-top: 30px;*/
	flex-direction: column;
}

#container-image-index {
	padding-left: 0;
	padding-top: 0 !important;
	z-index: 1 !important;
}

#container-image-index-ligne {
	width: 100%;
	z-index: 1 !important;
	flex-direction: column;
}

.nom-serie-index {
	height: 100%;
	width: 100%;
	opacity: 1;
	align-items: end;
	padding-left: 0;
	margin-bottom: 20px;
	/*position: absolute;*/
	transition-duration: 0.2s;
	z-index: 800;
}

.nom-serie-index-mobile {
	display: flex;
}

/*/////////////*/
/*GESTION INFOS*/
/*/////////////*/
.infos {
	position: relative;
	z-index: 1000;
	padding-bottom: 22px;
}

#main-container-infos {
	display: none;
}

#main-container-infos-mobile {
	display: flex;
	flex-direction: column;
	padding-right: 12px;
	padding-top: 12px;
	width: 95vw;
}

#main-container-cv {
	display: flex;
	flex-direction: column;
	overflow: visible;

	/*border: 1px solid blue;*/
	width: 100%;
	height: fit-content;
}

#main-container-bio {
	width: 100%;
	overflow: visible;
	height: fit-content;
	padding-bottom: 17px !important;
}

#main-container-bio p {
	margin: 0;
	padding-right: 10px;
	position: relative;
	width: 100%;
}

#main-container-contact-mobile {
	/*border: 1px solid blue;*/
	width: 100%;
}

#main-container-contact-mobile p {
	margin: 0;
	position: relative;
	width: 100%;
}

#main-container-credits-mobile {
	/*border: 1px solid blue;*/
	width: 100%;
	padding-top: 22px;
	padding-bottom: 10px;
}

#main-container-credits-mobile p {
	margin: 0;
	position: relative;
	width: 100%;
}