#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}

/* css FFJS.org Spip */
/* author : Julien Schwartz 2016 */


/* !!! correction bug knacss fr dans html */
html.fr {float: none; }

html {width: 100%; margin: 0;}

body {
	font-family: 'Quattrocento Sans', Helvetica, Arial, sans-serif;
	color: #000;
	width: 100%;
	margin: 0;
	line-height: 1.2;
	/* set body font-size in em (1.6em equiv "16px" = 12pt) */
	font-size: 1.6em;
}

/* Variable générales */

@couleur_rouge: rgb(220,25,25);
@couleur_bleue: rgb(100,190,220);

/* gestion des couleurs */
.fdrouge {
	background-image: -webkit-linear-gradient(to bottom right, #DB0F0F, rgb(153,0,0));
	background-image:    -moz-linear-gradient(to bottom right, #DB0F0F, rgb(153,0,0));
	background-image:    linear-gradient(to bottom right, #DB0F0F, rgb(153,0,0));
	}
.fdbleu {
	background-image: -webkit-linear-gradient(to bottom right, #2F8BBC, #1B5F84);
	background-image:    -moz-linear-gradient(to bottom right, #2F8BBC, #1B5F84);
	background-image:    linear-gradient(to bottom right, #2F8BBC, #1B5F84);
}
.fdrouge > *, .fdbleu > * {color: #fff;}

.fondrouge {
		background-color: @couleur_rouge;
		color: white !important;
		/* réglage des logos SVG */
		.logosvg .feuillage {fill: #fff !important;}
}

/* mode de fusion */
.fusionmult {mix-blend-mode: multiply;}

/* éléments principaux de layout */

.page {width: 100%; margin: 0;}

.panneau {width: auto; box-sizing: border-box; border: 0; overflow: hidden;}

.pleinecran {min-height: 100vh;}

.ssconteneur {position: relative; max-width: 100%;}

.imgexergue {
	width: 100%;
	height: 90vh;
	position: relative;
	@media (max-width: 960px) {max-height: 75vh; overflow: hidden;}
}

.bandologo {
	position: absolute;
	z-index: 100;
	left: 4em;
	width: 15%;
	height: 100%;
	padding: 1em;
	.fondrouge;
	.logosvg {height: 100%;}
	background-color: rgba(220,25,25,.9);
	@media (max-width: 640px) {width: 30%; left: 1em;}
	@media (min-width: 641px) and (max-width: 960px) {width: 20%; left: 2em;}
	
}

.imgcaptionhover {
	position: absolute;
	z-index: 100;
	bottom: 10vh + 2em;
	right: 2em;
	background-color: rgba(255,255,255,.8);
	padding: 1em;
	/*test tabulaire*/
	display: table;
	@media (max-width: 960px) {
		position: static; padding: .25em; background-color: white; margin: 0; bottom: 0; right: 0; height: 15vh; overflow: hidden; font-size: 80%;
	}
}

.captiontext {
	padding-right: .5em;
	max-width: 40em;
	@media (max-width: 960px) {padding-right: .25em; max-width: 100%; display: table-cell; vertical-align: middle;}
}

.captionlink {
	background-color: transparent;
	width: 3.4rem;
	
	a {
		display: block;
		width: 100%; height: 100%;
		text-transform: uppercase;
		font-family: 'Exotic_350 W03', Helvetica, Arial, sans-serif;
		font-size: 2.4rem;
		color: @couleur_rouge;
		text-decoration: none;
		&:hover {color: #fff; background-color: @couleur_rouge;}
	}
}

.plushoriz {display: table-cell; vertical-align: middle; padding: 0 .5em 0 .5em; border-left: 1px solid @couleur_rouge;}
.plusgros a {font-size: 3.5rem; width: 4.5rem;}


/* Navigation */

#navigation {
	width: 100% !important;
	height: 10vh;
	position: absolute;
	z-index: 999;
	bottom: 0;
	left :0;
	background-color: #fff;
	overflow: hidden;
	
	.menulogo {display: none;}
}




/* partie responsive de lanavigation */

#navigation input {display: none;}
.togglenav {display: none;}

@media (max-width: 640px) {
.togglenav {
	display: inline-block;
	padding: .15em .5em;
	font-size: 3rem;
	margin: 0;
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	background-color: rgba(255,255,255,.75);
	color: @couleur_bleue;
	}
.togglenav:before {content: "\2261";}
.togglenav:after {margin-left: .5em;}
#navigation input:not(:checked) ~ div {display: none;}
#navigation input:checked ~ div {display: block;}



/* réglage des fonts */
p,.p-like,ul,ol,dl,blockquote,pre,td,th,label,textarea,caption,details,figure {
line-height: 1.5;
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}

p {	text-align: justify;}
ul.spip {text-align: left;}

h1,
.h1-like {
text-transform: uppercase;
font-family: 'Exotic_350 W03', Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 700;
line-height: 1.05;
letter-spacing: .01em;
}

h2,
.h2-like {
text-transform: uppercase;
font-family: 'Exotic_350 W03', Helvetica, Arial, sans-serif;
font-weight: 400;
}
h3,
.h3-like {font-weight: 400; text-transform: uppercase;
}

p, h1, h2, h3 {max-width: 45em;}


/* récupéré de perso */

/* correction knacss et spip */
.spip_logo {margin: 0;}

.caractencadre-spip {background: none; color: rgb(153,0,0); font-weight: bold;}
.caractencadre2-spip {font-family: 'Quattrocento Sans', Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: rgb(153,0,0); line-height: 1.15; }
p > *.caractencadre2-spip {display: block; text-align: center !important; margin: 1.25em auto;}

/* formulaire formidable */

.formulaire_formidable-1 p.boutons {display: inline-block; margin-left: 0;}

.formulaire_formidable-1 input {margin: 0; padding: 0;}
.formulaire_formidable-1 input[type=text] {max-width: 20em; border: 1px solid #595959;}
.formulaire_formidable-1 input[type=text] {display: inline-block; margin-right: 0; line-height: 1.9em; height: 30px; padding:4px;  vertical-align: center; border-right: 0;}

@media (max-width: 640px) {.formulaire_formidable-1 input[type=text] {max-width: 12em;}}

.formulaire_formidable-1 label.buttenvoi {
	border: 1px solid #595959;
	margin:0;
	margin-left: -4px;
	line-height: 1.9em;
	height: 30px;
	padding:4px;
	background-color: #fff;
	vertical-align: bottom;
	border-left: 0;
	 /* Fonctionne déjà sur webkit */
	-webkit-transition-property: background-color;
	-webkit-transition-duration: .5s;
				
	/* Bientôt supporté par Firefox */
	-moz-transition-property: background-color;
	-moz-transition-duration: .5s;
				
	/* … et lorsque ce sera standardisé */
	transition-property: background-color;
	transition-duration: .5s;
}
.formulaire_formidable-1 label.buttenvoi  span {
	color: #595959;
	 /* Fonctionne déjà sur webkit */
	-webkit-transition-property: color;
	-webkit-transition-duration: .5s;
				
	/* Bientôt supporté par Firefox */
	-moz-transition-property: color;
	-moz-transition-duration: .5s;
				
	/* … et lorsque ce sera standardisé */
	transition-property: color;
	transition-duration: .5s;
}
.formulaire_formidable-1 label.buttenvoi:hover {background-color:#595959;}
.formulaire_formidable-1 label.buttenvoi:hover span {color:#fff;}
.formulaire_formidable-1 input[type=submit] {display: none;}

.formulaire_formidable-1 input[type=submit] {
	border: 1px solid #111;
	background-color: #595959;
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
}


.formulaire_formidable-1 label {display: none;}
.formulaire_formidable-1 label.voismoi {display: inline-block;}

p#explication_input_1 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: .9em;
	margin: .25em auto;
	text-align: center;
 }
 
.formulaire_formidable-1 input[type=text]::-webkit-input-placeholder {
 color: #595959;
 text-transform: uppercase;
	font-weight: 400;
}
.formulaire_formidable-1 input[type=text]:-moz-placeholder { /* older Firefox*/
 color: #595959;
 text-transform: uppercase;
	font-weight: 400;
}
.formulaire_formidable-1 input[type=text]::-moz-placeholder  { /* Firefox 19+ */ 
 color: #595959; 
 text-transform: uppercase;
	font-weight: 400;
} 
.formulaire_formidable-1 input[type=text]:-ms-input-placeholder { 
 color: #595959;
 text-transform: uppercase;
	font-weight: 400;
}


.formulaire_formidable-1 .reponse_formulaire {width: 75%; margin-left: auto; margin-right: auto; text-align: center;}

/* extension Responsive grid KNACSS*/
@media (max-width: 960px) {
  [class*="-medium-6"] > * {
    width: calc(100% * 1 / 6 - 2rem - .01px);
  }
  
  [class*="-medium-6"] > .flex-item-double {
    width: calc(100% * 1 / 3 - 2rem - .01px);
  }
  [class*="-medium-5"] > * {
    width: calc(100% * 1 / 5 - 2rem - .01px);
  }
  [class*="-medium-5"] > .flex-item-double {
    width: calc(100% * 2 / 5 - 2rem - .01px);
  }
  [class*="-medium-4"] > * {
    width: calc(100% * 1 / 4 - 2rem - .01px);
  }
  [class*="-medium-4"] > .flex-item-double {
    width: calc(100% * 1 / 2 - 2rem - .01px);
  }
  [class*="-medium-3"] > * {
    width: calc(100% * 1 / 3 - 2rem - .01px);
  }
  [class*="-medium-3"] > .flex-item-double {
    width: calc(100% * 2 / 3 - 2rem - .01px);
  }
  [class*="-medium-2"] > * {
    width: calc(100% * 1 / 2 - 2rem - .01px);
  }
  [class*="-medium-2"] > .flex-item-double {
    width: calc(100% * 1 / 2 - 2rem - .01px);
  }
  [class*="-medium-1"] > * {
    width: calc(100% - 2rem - .01px);
  }
  [class*="-medium-1"] > .flex-item-double {
    width: calc(100% - 2rem - .01px);
  }
}

/* extension responsive helpers knacss */
@media (max-width: 640px) {
  .small-w90 {
    width: 90% !important;
  }
  .small-clear {
	float: none !important;
	clear: both !important;
  }
 }