/* --------------------------------------------------------------

   theme.css
   Theme par defaut de SPIP 3.3
   collectif SPIP

-------------------------------------------------------------- */

html {scrollbar-gutter: stable;}

body {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: white;
	background: #2d15ff;
	font-weight: 400;
	width: 100%;
	text-align: left;
}

h1,.h1,
h2,.h2 {line-height: 1.2;}

a, a:visited {color: white; text-decoration: none}

.sommaire {
	width: 1400px;
	margin: 60px auto 0;
}

.main {
	position: relative;
	width: 1070px;
	float: right;
}

.header {
	width: 300px;
	float: left;
	position: fixed;
}

.header h1 {margin-bottom: 25px;}

.header h1 a {
	color: white;
	font-size: 35px;
	font-weight: 600;
}

.button {
	background: transparent;
	border: none;
	padding:0;
	display: block;
	cursor: pointer;
	margin: 10px 0 0 0;
}

.button img, .button h2 {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}

.button h2 {
	margin-left: 15px;
	font-size: 28px;
	font-weight: 400;
}

.button:hover h2 {text-decoration: underline;}

.box {
	opacity: 0;
	transition: opacity 300ms ease-out;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.visible {opacity: 1;}

.introduction {
	font-size: 28px;
	font-weight: 900;
	padding: 0 0 60px 0;
}

.introduction img,
.introduction p {margin-bottom: 30px;}

.portfolio {padding: 0 0 60px 0;}

.vignette-portfolio {
	display: inline-block;
	width: 210px;
	height: 210px;
	vertical-align: top;
	transition: all 300ms ease-out;
}

.vignette-portfolio:hover {
	transform: translateY(-40px);
	transition: all 400ms ease;
}

.vignette-portfolio img {
	display: block;
	text-align: center;
	border-radius: 80px;
	transition: all 300ms ease-out;
	margin: 0 auto;
}

.vignette-portfolio:hover img {
	transform: scale(0.8);
	transition: all 400ms ease;
}

.vignette-portfolio h3 {
	text-align: center;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	visibility: hidden;
	opacity: 0;
	transition: all 300ms ease-out;
}

.vignette-portfolio h4 {
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	font-weight: 200;
	visibility: hidden;
	opacity: 0;
	transition: all 300ms ease-out;
}

.vignette-portfolio:hover h3,
.vignette-portfolio:hover h4 {
	visibility: visible;
	opacity: 1;
	transition: all 400ms ease;
}

.documents_portfolio li {display:inline;margin:0;padding:0;}
.documents_portfolio a {display:inline-block;padding:10px;margin:5px;border:1px solid #ccc !important;color:#EEE;background:#fff;box-shadow: 5px 7px 5px 2px rgba(85,85,85,0.3);}
.documents_portfolio a:hover {color:#999;opacity:0.8;}
.documents_portfolio img {margin:0;}

@media print {
	/*  Ne pas imprimer */
	.spip-admin,
	.spip-admin-float,
	.spip-previsu {display: none;}
	.repondre {display: none;}

	/* Souligner et expliciter les liens */
	a {color: #600; text-decoration: underline !important;}
	a.spip_out:after,
	a.spip_glossaire:after,
	a.spip_mail:after {display: inline; content: " [" attr(href) "]";}
}

/* ------------------------------------------
/* Responsive
/* ------------------------------------------ */

/* orientation horizontale */
@media (orientation: landscape) {
}

/* largeur maximum 1499px */
@media (max-width: 1499px) {

	.sommaire {width: 92vw; margin: 4vw auto 0;}
	.main {width: 71vw;}
	.header {width: 19vw;}
	.header h1 {margin-bottom: 1.6vw;}
	.header h1 a {font-size: 2.2vw;}
	.button {margin: 0.8vw 0 0 0;}
	.button img {width: 8vw;}
	.button h2 {margin-left: 0.6vw; font-size: 1.8vw;}
	.introduction {font-size: 1.8vw; padding: 0 0 4vw 0;}
	.introduction img, .introduction p {margin-bottom: 2vw;}
	.portfolio {padding: 0 0 4vw 0;}
	.vignette-portfolio {width: 14vw; height: 14vw;}
	.vignette-portfolio:hover {transform: translateY(-3vw);}
	.vignette-portfolio img {border-radius: 6vw; width: 10vw; height: 10vw;}
	.vignette-portfolio h3 {font-size: 1.2vw;}
	.vignette-portfolio h4 {font-size: 0.9vw;}

}

/* orientation verticale */
@media (orientation: portrait) {

	.sommaire {margin: 5vw auto 0;}
	.main {width: 92vw; float: none;}
	.header {width: 92vw; height: 28vw; float: none; position: relative;}
	.header h1 {margin-bottom: 4vw; text-align: center;}
	.header h1 a {font-size: 6vw;}
	.button {margin: 0; width: 44vw; border-bottom: 4px solid white; padding: 0 0 2vw 0;}
	.button:hover h2 {text-decoration: none;}
	#button1 {float: left;}
	#button2 {float: right;}
	.button img {width: 16vw;}
	.button h2 {margin-left: 1.5vw; font-size: 4vw;}
	.introduction {font-size: 3.8vw; padding: 0 0 8vw 0; overflow: hidden;}
	.introduction img, .introduction p {margin-bottom: 5vw;}
	.introduction img {max-width: none !important;  width: 180vw; transform: translate(-42vw);}
	.portfolio {padding: 0 0 8vw 0;}
	.vignette-portfolio {width: 30vw; height: 41vw;}
	.vignette-portfolio:hover, .vignette-portfolio:hover img {transform: none;}
	.vignette-portfolio img {border-radius: 14vw; width: 24vw; height: 24vw;}
	.vignette-portfolio h3 {font-size: 2.8vw; visibility: visible; opacity: 1; margin: 1.8vw 0 0.8vw 0;}
	.vignette-portfolio h4 {font-size: 2.2vw;visibility: visible; opacity: 1;}

}