body,
html {
	padding:0;
	margin:0;
	background:#fff;
	font-family:"Chaparral",times,times-new-roman,serif;
}
.titled,
h1,
h2,
h3,
h4,
h5 {
	font-family:"Snippet",tahoma,arial,helvetica,sans-serif;
	font-weight:400;
	margin:0
}
h1 {
	padding-left:1.5%;
	padding-top:1%;
	margin:0;
	font-size:40px
}
h2 {
	padding-left:1.5%;
	padding-top:5px;
	margin:0;
	font-size:20px;
	color:#aaa
}
a {color:#000;text-decoration:none;}

/*CONTACT*/
#contact-page header h1 a.main{color:var(--blue);}
#contact-page header p a{background-color:var(--blue);}
#contact-top, #contact-page main{
	margin:0 auto;
	width:96%;
	max-width:1300px;
	clear:both;
}
#contact-top{margin:100px auto 50px;}
p#contact-image {
	float:left;
	margin:0 20px 0 0;
	width:110px;
	height:110px;
	border-radius:75px;
	overflow:hidden
}
p#contact-image img {width:100%}
#contact-top h1 {margin:0;padding:10px 0 5px;}
#contact-page #contact-top h1 a {color:var(--blue);text-decoration:none}
#contact-page #contact-top p.titled {font-size:25px;letter-spacing:1px;padding-bottom:10px}
#contact-page h2{color:var(--blue);font-size:34px;padding-left:0;}
#contact-page main ul {list-style:none; padding:0;}
#contact-page main{
	display:grid;
	gap:20px;
	grid-template-columns:50% 50%;
	padding:0 2%;
	max-width:1200px;
	margin-bottom:100px;
}
#contact-page main>div{
	display:block;
	box-sizing:border-box;
	order:1;
	width:calc(100% - 20px);
}
#contact-page main>div#m_book{order:1;}
#contact-page main>div#m_mail{order:3;}
#contact-page main>div#m_formulaire{
	order:2;
	margin-right:0px;
	grid-area: 1 / 2 / 5 / 3;
	border-left:2px solid #eee;
	padding-left:40px;
}
#contact-page main>div#m_projets{order:4;}
#contact-page main>div#m_links{order:5;}
#contact-page main>div#m_formulaire p{font-size:24px;}
p#contact-book a {
	display:inline-block;
	text-decoration:none;
	background-color:#fff;
	border:2px solid var(--blue);
	color:var(--blue);
	line-height:20px;
	padding:6px 15px 6px 15px;
	font-size:18px;
	border-radius:25px;
	transition:all .25s;
	margin:0 0 5px;
}
p#contact-book a:last-child span,
p#contact-book a:first-child span,
p#contact-book a:first-child span:before,
p#contact-book a:last-child span:before {
	box-sizing:content-box;
	position:relative;
	display:inline-block;
	vertical-align:top;
	transition:all .25s;
}
p#contact-book a:last-child span {
	font-size:20px;
	width:10px;
	height:10px;
	border:3px solid var(--blue);
	border-radius:10px;
	margin-right:8px;
	margin-bottom:-30px;
	margin-top:1px;
}
p#contact-book a:first-child span {
	width:6px;
	height:10px;
	background:var(--blue);
	margin-right:10px;
	margin-left:4px;
	margin-bottom:-30px;
	margin-top:2px;
	text-align: left;
}
p#contact-book a:first-child span:before {
	content:"";
	width:0;
	height:0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-top:8px solid var(--blue);
	position:absolute;
	margin-left:-5px;
	margin-top:8px;
	background:0 0;
}
p#contact-book a:last-child span:before {
	content:"";
	position:absolute;
	right:-5px;
	bottom:-3px;
	border-width:0;
	background:var(--blue);
	width:6px;
	height:2px;
	transform:rotate(45deg);
}
p#contact-book a:hover {color:#fff;background:var(--blue);opacity:1;}
p#contact-book a:first-child:hover span, p#contact-book a:hover span:before {background:#fff}
p#contact-book a:first-child:hover span:before {border-top:8px solid #fff;background:transparent;}
p#contact-book a:last-child:hover span{border-color:#fff;}

p#contact-mail a {
	display:inline-block;
	border:2px solid var(--blue);
	padding:0px 20px 0px 0;
	border-radius:40px;
	color:var(--blue);
	text-decoration:none;
	font-size:26px;
	line-height:36px;
	height:36px;
	overflow:hidden;
	transition:all.25s;
	white-space: nowrap;
}
p#contact-mail a:hover {background:var(--blue);color:#fff;}
p#contact-mail a:before {
	content:"@";
	color:#fff;
	background:var(--blue);
	display:inline-block;
	vertical-align:top;
	font-family:tahoma,arial,helvetica,sans-serif;
	font-size:28px;
	width:42px;
	text-align:center;
	line-height:42px;
	padding-left:5px;
	margin:-5px 8px -5px -5px;
}
#contact-page p span.at,#contact-page p span.point,#contact-page p span.tiret {font-size:0}
#contact-page p span.point:after {content:".";font-size:14px}
#contact-page p span.at:after {content:"@";font-size:30px}
#contact-page p span.tiret:after {content:"-";font-size:14px}

#contact-page ul#rs {display:flex;gap:20px;justify-content:flex-start;}
ul#rs li {
	text-align:left;
	padding:0;
	margin:0;
	width:100%;
	background:url(/scripts/pictures/yt.svg) no-repeat top center;
	background-size:auto 100px;
	text-align:center;
}
ul#rs li a {
	display:inline-block;
	width:100%;
	padding-top:110px;
	font-size:16px;
	text-decoration:none;
	color:#aaa;
	text-align:center;
}
ul#rs li a:hover {color:#000}
ul#rs li#links-mp {background-image:url(/multi-prises/themes/mp6/img/mprise_h1.png);}
ul#rs li#links-naufrage {background-image:url(https://naufrage-thegame.com/pictures/favicon-96x96.png);}
ul#rs li#links-lagal {  background-image:url(/la-galerie/img/favicon.ico);}
ul#rs li#links-ateliers {background-image:url(https://ateliers.thomas-daveluy.fr/favicon.ico);}
ul#rs li#links-duplicata {background-image:url(/uploads/duplicata/favicon_duplicata.png);}
ul#rs li#links-madein {background-image:url(/le-made-in/images/madein.svg);}

ul#amis li {margin:0 0 10px 0}
ul#amis li a {
	margin:0 0 10px;
	padding:0px 0 0px 7px;
	color:#555;
	text-decoration:none;
	height:30px;
	line-height:30px;
	position:relative;
	display:inline-block;
	font-size:20px;
}
ul#amis li a:hover {color:#000;border-color:#333}
ul#amis li a:before, ul#amis li a.labo:after {
	content:"";
	width:36px;
	height:36px;
	padding:0;
	background:#ccc;
	display:inline-block;
	vertical-align: middle;
	margin-right:8px;
	margin-bottom:3px;
	background:#fff no-repeat center;
	background-size:contain;
}
ul#amis li a.cbp:before {  background-image:url(https://ciebandepassante.fr/wp-content/themes/bande-passante/images/favicon-32x32.png);}
ul#amis li a.gui:before {background-image:url(https://guillaumelepoix.fr/wp-content/uploads/2026/04/cropped-favicon_2026_512-192x192.jpg);}
ul#amis li a.soaz:before {background-image:url(https://soazic-bruneau.fr/wp-content/uploads/2026/07/sb.ico);}
ul#amis li a.sim:before {background-image:url(https://simonaugade.fr/wp-content/uploads/2020/03/logosite.png);}
ul#amis li a.nico:before {background-image:url(https://nicolasdesverronnieres.com/assets/img/favicon.png);}
ul#amis li a.labo:before {background:linear-gradient(135deg, #caf880 0%, #71ce7e 100%);}
ul#amis li a.labo:after {
	position:absolute;
	left:7px;
	background:transparent no-repeat center;
	background-image:url(https://www.laboratoire.art/wp-content/uploads/2024/11/eprouvette-2-452x1024.png);
	background-size:auto 32px;
}

#m_deroule_contact-right{display:none;}
#m_deroule_contact-right a{
	font-size:22px;
	color:#fff;
	display:block;
	width: max-content;
	background:var(--blue);
	padding:4px 20px 4px 23px;
	border-radius:30px;
}
#m_deroule_contact-right a:after{
	content:"\25bc";
	font-family:arial,tahoma,sans-serif;
	margin-left:8px;
	font-size:16px;
}
#contact-page label:not(.robbie) {
	display:block;
	text-transform:uppercase;
	font-size:16px;
	letter-spacing:1px;
	color:#333;
	margin-top:25px;
}
#contact-page label.robbie{
	display:inline-block;
	width:calc(49% - 15px);
	margin-top:10px;
	border:1px solid #ddd;
	padding:10px 5px;
	border-radius:5px;
	cursor:pointer;
}
#contact-page label.robbie:not(:last-of-type){margin-right:2%;}
#contact-page input[type=email], #contact-page input[type=text] {
	border:none;
	display:block;
	border-bottom:2px solid #ccc;
	width:calc(100% - 8px);
	padding:10px 4px;
	font-size:18px;
	margin:0 0 5px;
	transition:all .25s;
	box-sizing:border-box;
}
#contact-page input::placeholder, #contact-page textarea::placeholder {color:#aaa}
#contact-page input:invalid,#contact-page textarea:invalid {border-color:#f66;box-shadow:none;color:#800}
#contact-page input:valid,#contact-page textarea:valid {border-color:#beb;box-shadow:none}
#contact-page input:placeholder-shown,#contact-page textarea:placeholder-shown {border-color:#ccc;box-shadow:none}
#contact-page input#m-hp {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	z-index: -100;
}
#contact-page textarea {
	border:1px solid #ccc;
	display:inline-block;
	border-bottom:2px solid #ccc;
	width:calc(100% - 8px);
	max-width:100%;
	padding:4px;
	font-size:18px;
	margin:10px 0;
	color:#111;
	font-family:tahoma,arial,helvetica,sans-serif;
	transition:border-color .25s;
	min-height:120px;
	box-sizing:border-box;
}
#contact-page input[type=submit] {
	margin:0 auto;
	display:block;
	border:none;
	text-transform:uppercase;
	padding:10px 30px;
	border-radius:30px;
	cursor:pointer;
	background-color:var(--blue);
	color:#fff;
}
#contact-page input[type=submit]:hover {background-color:#10a0ff}
#contact-page input[type=submit]:active {margin-top:12px;margin-bottom:0;box-shadow:0 0 2px #000}

/*BOX CONTACT*/
#box-contact {
	position:fixed;
	z-index:1000;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(255,255,255,.6);
	backdrop-filter:blur(0px);
	transform: scale(1.5);
	text-align:center;
	overflow:hidden;
	opacity:0;
	pointer-events:none;
	transition:all .3s;
}
#box-contact.show {
	backdrop-filter:blur(10px);
	opacity:1;
	transform: scale(1);
	pointer-events:all;
}
#box-contact>div {
	position:absolute;
	height:350px;
	top:50%;
	margin-top:-175px;
	width:100%
}
#box-contact>div ul {list-style:none;padding:0;margin-top:30px}
#box-contact>div ul li {
	display:inline-block;
	vertical-align:top;
	width:200px;
	height:200px
}
#box-contact>div ul li:last-child {margin-left:80px}
#box-contact>div ul li:last-child:before {
	content:"ou";
	position:absolute;
	margin-left:-162px;
	margin-top:75px;
	color:#fff;
	font-size:20px;
	line-height:18px;
	background:var(--blue);
	padding:10px 10px;
	height:20px;
	width:20px;
	border-radius:40px
}
#box-contact>div ul li a {
	display:block;
	width:200px;
	height:50px;
	padding-top:160px;
	padding-bottom:10px;
	border-radius:10px;
	color:#333;
	text-decoration:none;
	box-shadow:0 0 5px rgba(0,0,0,.2);
	transition:all .25s;
	background:url(pictures/gmail.svg) no-repeat center 20px #fff;
	background-size:120px;
	font-size:18px;
}
#box-contact>div ul li:last-child a {background:url(pictures/copy.svg) no-repeat center 20px #fff;background-size:120px}
#box-contact>div ul li a:hover {
	background-color:#fff;
	color:#000;
	box-shadow:0 0 10px #aaa;
	transform: scale(1.05);
}
#box-contact>div p {width:480px;max-width:98%;margin:50px auto}
#box-contact>div p a {
	background:var(--blue);
	color:#fff;
	text-decoration:none;
	padding:10px 30px;
	font-size:18px;
	border-radius:30px
}

@media screen and (max-width:720px) {
	#contact-top {margin: 80px auto 20px;}
	p#contact-image {width: 70px;height: 70px;margin-top:-10px}
	#contact-page #contact-top p.titled {clear:both;
		font-size: 20px;
		padding-top:10px;
		text-align:center;
		padding-bottom:0;
	}
	#contact-top h1 {font-size:30px;}
	#contact-page main {grid-template-columns: 100%;}
	#contact-page main>div {
		text-align: center;
		width:100%;
		border-top:1px solid #eee;
		margin-bottom:0;
		padding-top:15px;
		margin-top:0px;
	}
	#contact-page main > div ul#amis {text-align: left;width: max-content;margin:20px auto 0;}
	#contact-page main > div#m_formulaire {
		order: 3;
		grid-area: auto;
		border-left: none;
		padding-left: 0px;
		text-align: left;
	}
	#contact-page main > div#m_formulaire h2 {text-align: center;}
	#m_formulaire:not(.open) #m_deroule_contact-right{display:block;text-align: center;}
	#m_deroule_contact-right a{margin:0 auto;}
	#m_formulaire:not(.open) form{display:none;}
	ul#rs li {background-size: auto 70px;}
	ul#rs li a {padding-top: 80px;}

	#box-contact>div {
		top:0;
		margin-top:5%;
		width:70%;
		margin-left:15%;
		text-align:center
	}
	#box-contact>div ul {margin-top:5%}
	#box-contact>div ul li {display:inline-block;margin:0 auto 20px auto;transform:scale(.9)}
	#box-contact>div ul li:last-child {margin-left:0;margin-top:35px}
	#box-contact>div ul li:last-child:before {margin-left:-18px;margin-top:-50px}
	#box-contact>div p {
		text-align:center;
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		margin:0;
		width:100%;
		max-width: 100%;
		height:60px
	}
	#box-contact>div p a {
		display:block;
		width:100%;
		border-radius:0;
		padding:20px 0;
	}
}