@charset "utf-8";
/* CSS Document */

/* Début css pour la page principale/Template */
	body {
		margin: 0;
		padding: 0;
		background-color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
	} 

	* {
		/*font-family: 'Share Tech', sans-serif, Verdana, Arial, Helvetica, sans-serif;*/
		font-family: 'Iceland', 'Share Tech', sans-serif, Verdana, Arial, Helvetica, sans-serif;
	}
	
/* Fin css pour la page principale/Template */

/* Début balise header */
	#Header {
		height: 60px;
	}
	
	/* Début div #logotext */
	#logotext {
		background-color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
		margin: 0;
		width: 100%;
		height: 60px;
		position: fixed;
		z-index: 140;
		top: 0;
	}

	#logo {
		display: block;
		float: left;
		margin: 0 10px 0 0;
		height: 60px;
	}

	#logotext p {
		margin: 0;
		line-height: 60px;
		display: inline-block;
		color: rgba(237,153,16,1); /* couleur Gamboge #ED9910 */
		font-size: 30px;
	}
	
	p span{
		line-height: 30px;
		display: inline-block;
		background: #ED9910; /* couleur Gamboge #ED9910 */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	/* Fin div #logotext */

	/* Début balise nav */
	#menu1 a.ouvrir, #menu1 a.fermer{
  		background-image: url(../img/Picto_Menu_O.svg);
		/*border: 2px solid rgba(237,153,16,1); /* couleur Gamboge */
		width: 40px;
		height: 40px;
		position: absolute;
		position: fixed;
		z-index: 150;
		right: 10px;
		top: 10px;
		-moz-border-radius: 22px;
		-webkit-border-radius: 22px;
		-o-border-radius: 22px;
		-ms-border-radius: 20px;
		-khtml-border-radius: 22px;
		border-radius: 22px;
		animation-name: animenu;
		animation-duration: 0.5s;
		animation-delay : 2s;
		animation-timing-function : ease;
		animation-iteration-count : 2;
	}
	
	@keyframes animenu{
		0%{box-shadow: 0 0 15px rgba(255,255,255,0);}
   		50%{box-shadow: 0 0 15px rgba(255,255,255,1); background-color: rgba(255,255,255,1);}
		100%{box-shadow: 0 0 15px rgba(255,255,255,0);}
	}
	@-moz-keyframes animenu{
		0%{box-shadow: 0 0 15px rgba(255,255,255,0);}
		50%{box-shadow: 0 0 15px rgba(255,255,255,1); background-color: rgba(255,255,255,1);}
		100%{box-shadow: 0 0 15px rgba(255,255,255,0);}
	}
	@-webkit-keyframes animenu{
		0%{box-shadow: 0 0 15px rgba(255,255,255,0);}
		50%{box-shadow: 0 0 15px rgba(255,255,255,1); background-color: rgba(255,255,255,1);}
		100%{box-shadow: 0 0 15px rgba(255,255,255,0);}
	}
	@-o-keyframes animenu{
		0%{box-shadow: 0 0 15px rgba(255,255,255,0);}
		50%{box-shadow: 0 0 15px rgba(255,255,255,1); background-color: rgba(255,255,255,1);}
		100%{box-shadow: 0 0 15px rgba(255,255,255,0);}
	}
	@-ms-keyframes animenu{
		0%{box-shadow: 0 0 15px rgba(255,255,255,0);}
		50%{box-shadow: 0 0 15px rgba(255,255,255,1); background-color: rgba(255,255,255,1);}
		100%{box-shadow: 0 0 15px rgba(255,255,255,0);}
	}
	@-khtml-keyframes animenu{
		0%{box-shadow: 0 0 15px rgba(255,255,255,0);}
		50%{box-shadow: 0 0 15px rgba(255,255,255,1); background-color: rgba(255,255,255,1);}
		100%{box-shadow: 0 0 15px rgba(255,255,255,0);}
	}
	
	#menu1 a.ouvrir:hover {
		/*background-color: rgba(28,254,186,1); /* couleur Aquamarine */
		background-image: url(../img/Picto_Menu_Oh.svg);
		transition: background-color 0.1s ease 0.3s, color 0.1s ease 0.3s;
		transition-duration: 0.1s, 0.1s;
		transition-timing-function: ease, ease;
		transition-delay: 0.3s, 0.3s;
		animation: 0.3s ease 0s normal forwards 1 running anim-boutons;
	}
	
	#menu1:target a.fermer:hover {
		/*background-color: rgba(28,254,186,1); /* couleur Aquamarine */
		background-image: url(../img/Picto_Menu_Fh.svg);
		transition: background-color 0.1s ease 0.3s, color 0.1s ease 0.3s;
		transition-duration: 0.1s, 0.1s;
		transition-timing-function: ease, ease;
		transition-delay: 0.3s, 0.3s;
		animation: 0.3s ease 0s normal forwards 1 running anim-boutons;
	}

	#menu1 a.fermer {
		/* les styles de #volet a.ouvrir + display: none; */
		display: none;
	}
	
	#menu1:target a.ouvrir {
		display: none;
	}

	#menu1:target a.fermer {
		background-image: url(../img/Picto_Menu_F.svg);
		display: block;
		right: 10px;
	}

	#sousmenu1{
		/*background-color: green;*/
		list-style: none;
		margin: -172px 0 0 -100px; /* Si margin-top = moitié de height alors le menu est centré par rapport à la fenêtre du navigateur. Si margin-top = moitié + 30px alors le menu est centré par rapport au fond bleu */
		padding: 0;
		width: 200px;
		height: 405px;
		position: absolute;
		position: fixed;
		z-index: 130;
		left: 50%;
		top: 50%;
		animation-name: sousmenu;
		animation-duration: 0.5s;
	}

	@keyframes sousmenu{
   		/*0%{transform : scale(0);}
   		100%{transform : scale(1);}*/
		0%{opacity : 0;}
   		100%{opacity : 1;}
	}
	
	.sousmenu{
		
	}

	.bouton{
		background-color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
		text-decoration: none;
		color: rgba(237,153,16,1); /* couleur Gamboge #ED9910 */
		/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
		border: 2px solid rgba(237,153,16,1); /* couleur Gamboge */
		font-size: 24px;
		display: block;
		height: 40px;
		line-height: 40px;
		margin: 20px auto;
		text-align: center;
		-moz-border-radius: 22px;
		-webkit-border-radius: 22px;
		-o-border-radius: 22px;
		-ms-border-radius: 22px;
		-khtml-border-radius: 22px;
		border-radius: 22px;
		
		background-origin: border-box;
		background-clip: content-box, border-box;
	}
	
	a span {
		line-height: 24px;
		background: #ED9910; /* couleur Gamboge #ED9910 */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	a span:hover {
		line-height: 24px;
		background-color:rgba(28,254,186,1); /* couleur Aquamarine #1CFEBA */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.bouton:hover span{
		line-height: 24px;
		background-color:rgba(28,254,186,1); /* couleur Aquamarine #1CFEBA */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.bouton:hover {
		/*background-color:rgba(28,254,186,1); /* couleur Aquamarine #1CFEBA */
		color: rgba(28,254,186,1); /* couleur Aquamarine #1CFEBA */
		transition: background-color 0.1s ease 0.3s, color 0.1s ease 0.3s;
		transition-duration: 0.1s, 0.1s;
		transition-delay: 0.3s, 0.3s;
		animation: 0.3s ease 0s normal forwards 1 running anim-boutons;
	}
	
	@keyframes anim-boutons {
		60% {transform: scale3d(0.8, 0.8, 1);}
		85% {transform: scale3d(1.1, 1.1, 1);}
		100% {transform: scale3d(1, 1, 1);}
	}
	/* Fin balise nav */
/* Fin balise header */

	#fondmenu{
		background-color: rgba(26,9,13,0.7); /* couleur Licorice #1A090D */
		position: absolute;
		top: 60px;
		position: fixed;
		z-index: 120;
		width: 100%;
		height: 100%;
		animation-name: sousmenu;
		animation-duration: 0.5s;
	}

	h3{
		text-align:center;
		line-height: 30px;
		width:100%;
		height:30px;
		margin: 0 auto;
	}

/* Début balise div de class="pages" (contenu de l'ensemble des pages) */
	.pages {
		/*margin-top: 120px;*/
	}
/* Fin balise div de class="pages" (contenu de l'ensemble des pages) */


/* Début div de la page Présentation */
	#TitrePresentation {
		background-color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
		color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
	}
	
	#presentation {
		/*background-color:#00CC00;*/
		margin-top: 60px;
		display : flex;
		flex-wrap : wrap;
	}

	#prescont1 {
		margin: 0 auto;
		width: 280px;
		height: 300px;
	}

	#prescont2 {
		/*background-color: rgba(255,255,255,0.7);*/
		color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
		margin: 0px auto;
		padding: 10px;
		width: 800px; /*58%;*/
		font-size: 18px;
	}
	
	#prescont3{
		display: inline-flex;
		width: 100%;
	}
	
	#prescont3 svg{
		filter: drop-shadow(0px 0px 6px #1CFEBA); /* ombre portée pour lueur externe */
	}
	
	rect, path, polygon{
		fill: #1CFEBA; /* pour changer la couleur svg */
	}

	.boite{
		display: inline-flex;
		flex-wrap: wrap;
		margin : auto;
		width: 330px;
	}

	.sousboite{
		margin : 10px auto;
		padding: 15px;
		width: 60px;
		height: 60px;
	}
/* Fin div de la page Présentation */


/* Début div de la page Peintures */
	#TitrePeintures {
		background-color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
		color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
	}
	
	#peintures {
		background-color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
		color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
		margin: 0 auto;
		text-align: left;
		/*height: 600px;*/
		font-size: 18px;
	}
	
	#paintcont {
		/*background-color: #090;*/
		display: flex;
		flex-wrap : wrap;
		justify-content: space-around;
		padding-top: 30px;
	}
	
	.paint {
		/*background-color: #9F0;*/
		width: 300px;
		height: 500px;
		margin: 10px;
	}
	
	.ombre {box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);}
/* Fin div de la page Peintures */


/* Début div de la page Sculptures */
	#TitreSculptures {
		background-color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
		color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
	}
	
	#sculptures {
		/*color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
		color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
		margin: 0 auto;
		text-align: left;
		/*height: 600px;*/
		font-size: 18px;
	}
	
	#sculptcont {
		/*background-color: #090;*/
		display: flex;
		flex-wrap : wrap;
		justify-content: space-around;
		padding-top: 30px;
	}
	
	.sculpt {
		/*background-color: #9F0;*/
		width: 300px;
		height: 500px;
		margin: 10px;
	}
	
	.coinarrondi {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-o-border-radius: 10px;
		-ms-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
	}
/* Fin div de la page Sculptures */


/* Début div de la page 2D/3D */
	#Titre2D3D {
		background-color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
		color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
	}
	
	#recherches {
		background-color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
		margin: 0 auto;
		text-align: left;
		/*height: 600px;*/
		font-size: 18px;
	}
	
	#rechcont {
		/*background-color: #090;*/
		display: flex;
		flex-wrap : wrap;
		justify-content: space-around;
		padding-top: 30px;
	}
	
	.rech {
		/*background-color: #9F0;*/
		width: 300px;
		height: 350px;
		margin: 10px;
	}
	
	a {
		text-decoration: none;
	}
	
	.coinarrondi2 {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-o-border-radius: 10px;
		-ms-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
	}
/* Fin div de la page 2D/3D */


/* Début div de la page Contact */
	#contact {
		background-color: rgba(26,9,13,1); /* couleur Licorice #1A090D */
	}

	#Form {
		margin: 0 auto;
	}

	table {
		background-color: rgba(179,181,187,1); /* couleur French Gray #B3B5BB */
		width: 320px;
		border: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); /* compatibilité : ie9+ */
	}

	table tr td {
		border: none;
		padding: 10px;
	}

	tr td:first-of-type {
		width: 80px;
	}

	#idEmail, #idObjet, #idMessage {
		color: rgba(64,0,0,1); /* couleur rouge foncé */
		resize: horizontal;
		width: 200px;
	}

	td p {
		margin: 0;
		text-align: center;
	}
/* *** */
	#CachForm {
		position: absolute;
		top: 190px;
		left: 50%;
		transform: translate(-50%, 0%);
		width: 332px;
		height: 500px;
		overflow: hidden;
	}

	#Form {
		position: absolute;
		top: 0px;
		left: 0px;
		/*transform: translate(-50%, 0%);*/
		/*width:320px;*/
		height: 540px;
		overflow: hidden;
	}
	
	#acontact {
		margin: 0 auto;
		position: absolute;
		top: 250px;
		left: 50%;
		transform: translate(-50%, 0%);
		line-height: 60px;
		color: rgba(237,153,16,1); /* couleur Gamboge #ED9910 */
		font-size: 60px;
	}
	
	#acontact:hover {
		color: rgba(28,254,186,1); /* couleur Aquamarine #1CFEBA */
	}
	
/* *** */
/* Fin div de la page Contact */


/* Début responsive */
	@media all and(max-width:760px) {
	/* Début div de la page Présentation */
		#presentation {
		}
		
		#prescont2 {
		}
		
		.boite{
			width: /*21.962%*/;
			height: /*21.962%*/;
		}

		.sousboite{
			width: /*30%*/;
			height: /*30%*/;
		}
	/* Fin div de la page Présentation */
	}

	@media all and (max-width:400px) {
	/* Début balise nav */
	/* Fin balise nav */


	/* Début div de la page Présentation */
		#presentation {
		}

		#prescont2 {
		}
	/* Fin div de la page Présentation */


	/* Début div de la page Contact */
		table {
			width: 280px; /* 320px de 400px */
		}

		#idEmail, #idObjet, #idMessage {
			width: 160px;
		}
	/* Fin div de la page Contact */
	}
/* Fin responsive */