/* fichier css/less olea compagnie */
/* by julien Schwartz */

/* affichage permanent des boutons SPIP */
.spip-admin-bloc, .spip-admin-float {
z-index: 999 !important;
}
/* !!! correction bug knacss fr dans html */
html.fr {float: none;}

/* ------ les couleurs ------ */

@bleugris: #416478;
@bleu: #7FB2CF;
@noirleger: #282328;
@blanccasse: #f2f5f7;
@corail: #D14D4D;
@jaune: #EAB330;
@orange: #F5764F;

.enbleugris { color: @bleugris; border-color: @bleugris;
	svg {fill: @bleugris; stroke: @bleugris;}
}

.enbleu { color: @bleu; border-color: @bleu;
	svg {fill: @bleu; stroke: @bleu;}
}

.ennoir  { color: @noirleger; border-color: @noirleger;
	svg {fill: @noirleger; stroke: @noirleger;}
}

.enblanc  { color: @blanccasse; border-color: @blanccasse;
	svg {fill: @blanccasse; stroke: @blanccasse;}
}

.encorail { color: @corail; border-color: @corail;
	svg {fill: @corail; stroke: @corail;}
}

.enjaune  { color: @jaune; border-color: @jaune;
	svg {fill: @jaune; stroke: @jaune;}
}

.enorange  { color: @orange; border-color: @orange;
	svg {fill: @orange; stroke: @orange;}
}

.fdbleugris {background-color: @bleugris;}
.fdbleu {background-color: @bleu;}
.fdnoir {background-color: @noirleger; color: @blanccasse; border-color: @blanccasse;}
.fdblanc {background-color: @blanccasse; color: @noirleger; border-color: @noirleger;}
.fdcorail {background-color: @corail;}
.fdjaune {background-color: @jaune;}
.fdorange {background-color: @orange;}

/* correction knacss qui colorie les H en noir…*/
h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like {
color: inherit;}



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

/* ------ réglages généraux ------ */

html {width: 100%; margin: 0; scroll-behavior: smooth;}

body {
	.fdblanc;
	color: @noirleger;
	width: 100%;
	margin: 0;
	.defaultfont;
	font-weight: 100;
}

.page {
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
}

section {overflow: hidden;}

/*section {
	min-height: 100vh;
	@media (max-width:@tinymax) {
		padding-left: 1rem;
		padding-right: 1rem;
	} 
}*/


img, svg {width: 100%; max-width: 100%;}
svg {max-height: 100%;}



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

/* ------ Typographie ------ */

.metropolis {
	font-family: 'Metropolis', Helvetica, Arial, sans-serif !important;
}
.n27 {
	font-family: 'n27', courrier new, courrier, sans-serif !important;
}
.bonanova {
	font-family: 'Bona Nova', serif !important;
}

.defaultfont {
	.metropolis;
	font-style: Normal;
    font-weight: Normal;
}


p,.p-like {
line-height: 1.5;
/*letter-spacing: -0.0025rem;*/
word-wrap: keep-all;
word-break: keep-all;
-webkit-word-wrap: keep-all;
-webkit-word-break: keep-all;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
}

h1,
.h1-like {
font-weight: bold;
font-size: 1.5rem;
line-height: 1;
word-wrap: normal;
hyphens: none;
text-transform: uppercase;
text-rendering: geometricPrecision;
}

h2,
.h2-like, .h2-like > p {
font-weight: lighter;
font-size: 1.8rem;
line-height: .95;

word-wrap: normal;
hyphens: none;
}

h3,
.h3-like {
font-weight: normal;
font-size: 1.25rem;
line-height: 1.1;
word-wrap: normal;
hyphens: none;
text-transform: uppercase;
}


h4,
.h4-like {
font-weight: normal;
.n27;
margin-bottom: 1.25rem;
hyphens: none;
line-height: 1.05;
letter-spacing: 0.05rem;
}

h5.spip {.n27; max-width: 75%;}

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

ul, ul.spip {
	list-style-type: "›";
	padding-left: 1rem;
	font-style: italic;
	font-weight: 100;
	margin-left: 0;
}

li, li.spip {padding-left: .6rem;}

strong {font-weight: bold;}

strong.caractencadre-spip, strong.caractencadre2-spip {
	.n27;
	text-transform: uppercase; 
	font-size: .5rem;
	font-weight: 300;
	display: inline-block;
	padding: .5rem .75rem;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	text-decoration: none;
	.enblanc;
	border: none;
	border-radius: 15px;
}
strong.caractencadre-spip {.fdcorail;}
strong.caractencadre2-spip {.fdbleugris;}

p + h3 {margin-top: 1.5rem;}

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

/* variables de tailles d'écrans */
@tinymax: 575px;
@smallmin: 576px;
@smallmax: 991px;
@mediummin: 992px;
@mediummax: 1329px;
@largemin: 1330px;

/* ------ Helpers ------ */

/* Helpers de structure */

.pleinecran {min-height: 100vh;}
.troisquartsecran {height: 80vh;}
.deuxtiersecran {height: 66vh;}
.demiecran {height: 50vh;}
.quarantepcecran {height: 40vh;}
.untiersecran {height: 33vh;}
.unquartecran {height: 25vh;}
.fulllarg {width: 100%; text-align: center; img {margin-left: auto; margin-right: auto; width: 100%;}}
.pleinelarg {width: 100% !important; margin-left: auto; margin-right: auto;/*max-width: 1440px !important;*/}
.deuxtierslarg {width: 66% !important; margin-left: auto; margin-right: auto;}
.troisquartslarg {width: 75% !important; margin-left: auto; margin-right: auto;}
@media (max-width:@tinymax) {
	.pleinelarg, .deuxtierslarg, .troisquartslarg {
		width: 95% !important;
	}
}
.absolutecont {position: relative;}

.w33 {width: 33%;}
.w50 {width: 50%;}
.w66 {width: 66%;}
.w75 {width: 75%;}
@media (max-width:@tinymax) {
	.w33, .w50, .w66, .w75 {
		width: 95% !important;
	}
}

.titresection{text-align:center; margin: 0 auto 2rem; padding: 1rem 0;}

.clear, .clearfix{
        clear: both;
}

.spip_documents_left:after {.clearfix;}

/* Helpers images */

.imgdefond {
	background-attachment: fixed; 
	background-repeat: no-repeat;
}

.rollovergray {
	img {filter: grayscale(80%);}
	&:hover {
		img {filter: grayscale(0);}
	}
}

.rolloversepia {
	img {filter: sepia(0%);}
	&:hover {
		img {filter: sepia(30%);}
	}
}

.imggray {img {filter: grayscale(80%);}}

.fusionmult {img {mix-blend-mode: multiply;}}

.fdradial {background: radial-gradient(#7fb2cf 0, #416478 50%, #282328 80%);}

/* helpers typographiques */

.nohyphens {
	word-break: keep-all;
	hyphens: none;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
}

.nosouligne {text-decoration: none !important;}

.minus {
	text-transform: lowercase;
	&:first-child {text-transform: capitalize;}
}

.texteplusgros {
	font-size: 1em;	
	@media (min-width: @mediummin) {font-size: 1.15em;};
	
}

.textemoinsgros {
	font-size: 1em;
	@media (max-width: @tinymax)  {font-size: .8em;};	
}

.enmaj {
  text-transform: uppercase;
}

.engras {font-weight: bold;}

.bordbas {border-bottom: 1px solid;}

.spip_doc_legende, .legende {
		.n27;
		text-transform: uppercase;
		font-size: .6rem;
}

h4.spip {clear: both; .enblanc; margin-bottom: 0;}
.fdblanc > h4.spip {.ennoir;}
h3.spip {clear: both;}

/* boutons */
.bouton {
  display: inline-block;
  padding: 1rem 1.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  color: #212529;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  .fdcorail;
  .n27;
  .h2-like;
  line-height: 1;
    transition: all 2s ease;
  &:focus, &:active, &:hover {
	  .fdbleugris;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 13px 14px 38px -15px rgba(0,0,0,0.77) inset;
-webkit-box-shadow: 13px 14px 38px -15px rgba(0,0,0,0.77) inset;
-moz-box-shadow: 13px 14px 38px -15px rgba(0,0,0,0.77) inset;
  
	}
}



/* limitation de la largeur du texte pour les articles issus de la base données */

.longtexte {
	p,.p-like,ul,ol,dl,blockquote,pre,td,th,label,textarea,caption,details,figure,h1,h1-like,h2,h2-like,h3,h3-like,h4,h4-like {
		max-width: 50rem;
		.centre;
	}
}

.exergue {font-weight: 100; font-style: italic;}



/* Helpers de positionnement et affichage */

.centre {margin-right: auto; margin-left: auto;}

.limit95 {max-width: 95% !important; .centre;}
.limit1040px {max-width: 1040px; .centre; @media (max-width: 1039px) {.limit95;}}
.limit1250px {max-width: 1250px; .centre; @media (max-width: 1249px) {.limit95;}}
.limit1440px {max-width: 1440px; .centre; @media (max-width: 1439px) {.limit95;}}

.visiblesipetit {
	display: none;
	@media (max-width: @smallmax) {display: block;}
}

.cachesipetit {
	display: block;
	@media (max-width: @smallmax) {display: none !important;}
}

.cache {display: none !important;}

.margeheader {margin-top: 60px;}

/* Helpers de blocs et bordures */

.nobord {border: none;}
.borddroit {border-right: 2px solid;}
.bordbas {border-bottom: 2px solid; padding-bottom: 1rem;}
.bordhaut {border-top: 2px solid; padding-top: 1rem;}
.bordfull {border:2px solid; padding: 1rem;}

.ombreinterne {
box-shadow: 0px 75px 59px -18px rgba(0,0,0,0.46) inset;
-webkit-box-shadow: 0px 75px 59px -18px rgba(0,0,0,0.46) inset;
-moz-box-shadow: 0px 75px 59px -18px rgba(0,0,0,0.46) inset;}

.caption-bigimg {
	position: absolute;
	bottom: 5%;
	left: 0;
	width: 100%;
	margin : 0;
	padding: 2rem 4rem;
	background-color: rgba(0,0,0,.2);
	.enblanc;
	text-align: left;
	h2, .h2-like {text-transform: uppercase; font-size: 2.25rem;}
	h1, .h1-like {text-transform: uppercase; font-weight: 100; font-size: 4.25rem;}
	svg {height: 3rem; transition-property: transform;
    transition-duration: .5s;}
	&:hover svg {transform: rotate(-90deg);}
}

@media (max-width:@smallmax) {
	.caption-bigimg {
		h1, .h1-like {font-size: 2.25rem;}
	}
}



/* helpers de background */

.bgfixe {background-attachment: fixed;}

@media (max-width: @smallmax) {
	.infocote {.fdcorail; padding-left: 2rem;}
	.infocote .encorail {.enblanc;}
	}

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

/* ------ page d'accueil ------ */

#alaune {
	position: relative;
	overflow: hidden;
	.enblanc;
	#logoaccueil {
		z-index: 20;
		position: absolute;
		top: 50%; left: 50%; /* à 50%/50% du parent référent */
		transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
		margin: 0 auto;
	} /* pos en absolute dans ce conteneur */
	#titralaune {
		transform-origin: bottom right;
		transform: rotate(270deg) translate(100%,0) ;
		z-index: 20;
		position: absolute;
		bottom: 5%;
		right: 5%;
		padding-left: 1rem;
		border-left: 1px solid;
	}
	#imgalaune {
		z-index: 10;
		position: absolute;
		width: 100%;
		height: 100%;
		img {min-height: 100%;}
	}
}

#splash, .splash {display: grid; /* contexte sur le parent */
  place-items: center;
  /* alignement vertical et horizontal des enfants dans leur cellule */}
#logoaccueil, .textexergue {
	width: 33%;
	margin: auto;
	overflow: hidden;
	@media (min-width: @smallmin) and (max-width: @smallmax) {width: 50%;}
	@media (max-width: @tinymax) {width: 66%;}
	p {
		line-height: 1.3;
		font-weight: 300;
		font-size: 1.25rem;
	}
}

/*#legendeactu {border-left: 1px solid; border-right: 1px solid;}*/

/* Header site */

header, header > * {display: block; height: 60px; width: 100%; max-width: 100%; overflow: hidden; z-index: 500 !important; margin: 0; padding: 0;}

#slogan {
	.bonanova;
	/*.ennoir;*/
	.centre;
	line-height: 60px;
	font-size: 1.35rem;
	letter-spacing: .25rem;
	white-space: nowrap;
}
	


/* menu de navigation */

#menuburger {
	display: block;
	position: fixed;
	z-index: 110 !important;
	top: 0;
	right:1rem;
	margin: .5rem 1rem;
	padding: .5rem 0 0 0;
	width: 2rem;
	height: 2rem;
	/*border: 5px solid black;*/
	text-align: center;
	input {display: none;}
	
	/* Common button styles */
	.nav-button2 {
	  position: relative;
	  display: block;
	  height: 1.5rem;
	  width: 2rem;
	  margin: 0 auto;
	  background-color: transparent;
	  background-image: linear-gradient(to right, @noirleger, @noirleger);
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: 100% 3px;
	  padding: 0;
	  outline: 0;
	  border: 0;
	  color: @noirleger;
	  cursor: pointer;
	  -webkit-tap-highlight-color: transparent;
	  transition: .25s cubic-bezier(.17,.67,.89,1.4);
	  transition-property: transform;
	  will-change: transform;
	 }
	.nav-button2::before,
	.nav-button2::after {
	  content: "";
	  position: absolute;
	  left: 0; right: 0;
	  display: block;
	  height: 3px;
	  background: @noirleger;
	  transition: .25s;
	  transition-property: transform, top;
	  will-change: transform, top;
	}
	.nav-button2::before {
	  top: 0;
	}
	.nav-button2::after {
	  top: calc(100% - 14px);
	}
	
	.nav-button2:hover{
		background-image: linear-gradient(to right, @corail, @corail);
	}
	.nav-button2:hover::before,
	.nav-button2:hover::after {
		 background: @corail;
	}

	/* cross button */
	.cross-button, .cross-button:hover {
	  background-image: none;
	}
	.cross-button::before,
	.cross-button::after{
	   top: 50%;
	 }
	.cross-button::before {
	   transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
	 }
	.cross-button::after {
	   transform: translate3d(0,-50%,0) rotate3d(0,0,1,-45deg);
	 }
	
}

#navig_generale {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 90 !important;
	margin-top: 60px;
	width: 300px;
	min-height: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: width .15s ease-out;
	-moz-transition: width .15s ease-out;
	-webkit-transition: width .15s ease-out;
	a {text-decoration: none;}
	ul {padding-left: 0; margin: 0; list-style-type: none; font-style: normal; text-transform: uppercase;}
	.itemmenunav {
		display: block;
		position: relative;
		width: 100%;
		/*height: 3rem;*/
		padding: 1rem 0 1rem 2rem;
		
		border-top: 1px solid @noirleger;
		a {display: inline-block; vertical-align: middle; margin-top: 0;}
		label, label::before {
			font-weight: bold;
			display: inline-block;
			text-align:center !important;
			width: 2em;
			font-size: 2.5rem;
			margin: 0 0 0 -2.2em;
			padding: 0 0 0 1.35em;
			}
		&:hover {.fdcorail; .enblanc;}
	}
	.itemmenunav.active {}
	.itemmenunav.on {font-weight: bold;}
	.menu-items__lien, .menu-items__texte {.n27;}
	
	/* Apparition & disparition des sous menus */
	.has-sub {position: relative; margin: 0;}
	.has-sub > h2 {border-bottom: 1px dotted @noirleger;}
	.has-sub > ul {margin-top: 1rem;}
	.has-sub ul li {
		width: 100%;
		display: block;
		transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		text-overflow: ellipsis;
		a {margin-top: 1rem; display: inline-block; text-transform: uppercase; opacity: 1;}
		
	}
	
	@media (min-width: 640px) {
		.togglessmenu ul li > a {
			opacity: 0;
			height: 0;
			padding: 0;
			margin: 0;
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			transition: all 0.25s ease-in-out;
		}
		.togglessmenu:hover ul li > a, .togglessmenu:active ul li > a, .togglessmenu:focus ul li > a {
			/*padding: 1.5em .5em 0.25em .5em;*/
			height: 2rem;
			opacity: 1;
			margin: 0;
			text-transform: uppercase;
			display: block;
			transition: all 0.25s ease-in-out;
		}
		
		.sousmenunav + .sousmenunav > a {padding-top: 0.1em;}
	}
	
	
}

#navig_generale.navcollapse {width: 0;}
#navig_generale.menuactif {width: 320px; }


/* FOOTER */

/* encart logo */
.footer-logo {
	height: 125px;
	margin-left: 0;
	margin-right: auto;
}

/* contact */
.footer-contact {
	p {line-height: 1.2;}
}

/* copyright & partners */
.footer-copyright {
	height: 65px;
	line-height: 65px !important;
}

.footer-partners {
	height: 65px;
	line-height: 65px;
	text-align: left;
	
	svg {max-width: 150px; margin: 0 0 1rem 0;}
	
}

/* boutons reseaux sociaux : socicon */

/*.rezosocio {margin: 1rem auto !important;}*/
.socicon-facebook:before {
  content: "\e028";
}
.socicon-instagram:before {
  content: "\e044";
}
.socicon-vimeo:before {
  content: "\e093";
}
.socicon-twitter:before {
  content: "\e08d";
}
.socicon-mail:before {
  content: "\e050";
}

#footersite {padding-top: 2.5rem;}
#footersite .rezosocio {height: 1.5rem;	overflow-y: hidden;}
#footersite a.bouton-rezos {	
	padding: .5rem 0;
	margin: 0 .5rem;
	font-size: 1rem;
	line-height: 1.5rem;
	text-align: left;
	height: 1.5rem;
	width: 1.5rem;

	.socicon {
		margin: 0 auto;
		line-height: 1.5rem;
		.enblanc;
	}
	transition: font-size .25s, padding .25s;
	&:hover {
		font-size: 1.5rem;
		padding: 0 0;
	}
}


/* formulaire formidable */
.formulaire_formidable-2 input[type=submit] {display: none;}
.formulaire_formidable-2 p.boutons {visibility: hidden;}

/* message réponse */

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

.reponse_formulaire_ok {
background : @bleu;
color: @blanccasse;
border: none;
}



/* mise en page champs */

/* labels de manière générale */
.formulaire_formidable-2 label {
    display: block;
	font-size: 1.25rem;
	/*color: black;*/
	padding: 0;
	/*height: 2.4rem;
	line-height: 2.4rem;*/
	letter-spacing: -0.05rem;
	font-weight: inherit;
}

/* label champ input 1, soit l'endroit où on met son mail */

.formulaire_formidable-2 label[for="champ_input_1"] {
	@media (max-width: 768px) {display: none;}
}

/* label butt envoi */
.formulaire_formidable-2 label.voismoi {
    display: inline-block;
}

.formulaire_formidable-2 label.buttenvoi {
    border: none;
    margin: 0;
    margin-left: -5px;
	font-size: 1.5rem;
    padding: 0 .5rem;
    transition-property: transform;
    transition-duration: .5s;
	&:hover {transform: rotate(180deg);}
}


/* input de manière générale */
.formulaire_formidable-2 input {
    margin: 0;
}

/* champ input (texte) */
.formulaire_formidable-2 input[type=text] {
    display: inline-block;
	margin: 0;
    height: 30px;
    padding: 0 1rem;
    vertical-align: center;
	max-width: 20em;
    border: 1px solid white;
	background-color: transparent;
	box-shadow: none;
}
 
.formulaire_formidable-2 input[type=text]::-webkit-input-placeholder {
 color: @blanccasse;
}
.formulaire_formidable-2 input[type=text]:-moz-placeholder { /* older Firefox*/
 color: @blanccasse;
}
.formulaire_formidable-2 input[type=text]::-moz-placeholder  { /* Firefox 19+ */ 
 color: @blanccasse; 
} 
.formulaire_formidable-2 input[type=text]:-ms-input-placeholder { 
 color: @blanccasse;
}


/* affichage en colonnes dpeuis champ [(#TEXTE)] avec utilisation "*****" */

.buzz {
	display: table-cell;
	padding: 0 2rem;
	width: 50%;
	@media (max-width: 640px) {display: block; margin: 2em 0; padding: 0; padding-left: 0 !important; width: 100%;}
}

.buzz:first-of-type {padding: 0; padding-right: 4rem;}
.buzz:last-of-type {padding: 0; padding-left: 4rem;}