:root {
	--background: #FFFEF9;
	--header: #FBF6EF;
	--orange: #FF9940;
	--sable-1: #DFBC82;
	--sable-2: #9F7429;
	--jaune-info: #FFF8E1;
	--jaune-info-bordure: #FFE691;
	--animation-timing: 0.6s;
}
html, body {
	position: relative;
	width: 100%;
	margin: auto;
	height: 100%;
	padding: 0;
}
body {
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	margin: 0;
	padding: 0;
	background: var(--background);
	color: #111;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	overflow-x: hidden; /* IMPORTANT pour les barres de séparation en rotation, MAIS ne fonctionne pas sous Androïd : besoin d'ajouter une nouvelle div avec cette même propriété ! */
	-webkit-font-smoothing: antialiased;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}
nav, ul, ol, li, a { margin: 0; padding: 0; }
ul {
	list-style-type: none;
	list-style: none; /* Pour enlever les puces sur IE7 */
}
ul.bull {
	list-style-type: disc;
	margin-left: 30px;
}
ol { margin-left: 17px; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; } /* IE 6 et 7 */

article, aside, figcaption, figure, footer, header, hgroup, nav, section { display: block; } /* Pour navigateurs ne supportant pas par défaut ces éléments HTML5 : Androïd browser, ...) */

a { color: var(--orange); text-decoration: none; outline: none; }
a:hover { border-bottom: 1px dotted var(--orange); }
a:active { outline-style: none; }

main {
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
	padding: 30px;
}

p, ul li, ol li { font-size: 1.05em; line-height: 30px; margin-bottom: 20px; }

p.info {
	padding: 25px;
	border-radius: 10px;
	background: var(--jaune-info);
	border: 2px solid var(--jaune-info-bordure);
}

/*
div.galerie-statique {
	display: flex;
	flex-wrap: wrap;
	width: 102%;
	margin: 0 0 40px -1%;
border: 1px solid red;
}
div.galerie-statique span {
	flex-basis: 32.33%;
	aspect-ratio: 4 / 3;
	margin-left: 1%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 10px;
	overflow: hidden;
}
div.galerie-statique span.portrait {
	aspect-ratio: 3 / 4;
}
*/

.galerie-statique {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 40px auto;
	column-count: 3;
	column-gap: 15px;
}
.galerie-statique img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 15px 0;
	border-radius: 5px;
	transition: 0.2s ease-in-out;
	filter: grayscale(0);
}
.galerie-statique img:hover {
	/* transform: scale(0.9); */
	/* filter: grayscale(10); */
}
@media (max-width: 800px) {
	.galerie-statique {
		column-count: 2;
	}
	.galerie-statique img {
		object-fit: cover;
		/* height: 180px; */
	}
}


div.wrapper-interne {
	display: flex;
	flex-wrap: wrap;
}
div.wrapper-interne section.principale {
	flex-basis: 70%;
}
div.wrapper-interne section.aside {
	flex-basis: 30%;
	padding-left: 50px;
}

div.wrapper-interne section.aside a.sous-rubrique {
	display: block;
	width: 100%;
	margin: 0 0 30px 0;
	border-radius: 10px;
	overflow: hidden;
}
div.wrapper-interne section.aside a.sous-rubrique:hover { border: none; }

div.wrapper-interne section.aside a.sous-rubrique span.tete {
	position: relative;
	display: block;
	color: #FFF;
	font-size: 1.1em;
	padding: 10px 25px;
	background: var(--sable-2);
}
div.wrapper-interne section.aside a.sous-rubrique span.tete i {
	position: absolute;
	top: 13px;
	right: 35px;
	transition: all 0.5s;
}
div.wrapper-interne section.aside a.sous-rubrique:hover span.tete i { right: 25px; }

div.wrapper-interne section.aside a.sous-rubrique span.corps {
	display: block;
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition: all 0.5s;
}

div.wrapper-interne section.aside a.sous-rubrique span.corps.enseignement { background-image: url(/realisations/images/voyage-zogor-5-079.jpg); }
div.wrapper-interne section.aside a.sous-rubrique span.corps.sante { background-image: url(/realisations/images/sante1.png); }
div.wrapper-interne section.aside a.sous-rubrique span.corps.reboisement { background-image: url(/realisations/images/arbre6.jpg); }
div.wrapper-interne section.aside a.sous-rubrique span.corps.micro-credits { background-image: url(/realisations/images/voyage-zogor-3-042.jpg); }

div.wrapper-interne section.aside a.sous-rubrique span.corps span.texte {
	display: flex;
	visibility: hidden;
	opacity: 0;
	font-size: 1em;
	line-height: 30px;
	color: #FFF;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	padding: 25px;
	height: 200px;
	transition: visibility 0s, opacity 0.5s linear;
}
div.wrapper-interne section.aside a.sous-rubrique:hover span.corps span.texte { visibility: visible; opacity: 1; }
div.wrapper-interne section.aside a.sous-rubrique span.corps span.texte span { /* On centre complètement le contenu texte */
	margin: auto;
	text-align: center;
}

/******************/
/**** + HEADER ****/
/******************/

header {
	position: relative;
	padding: 0 20px;
	height: 100px;
	display: flex;
/*
	align-items: center;
  justify-content: center;
*/
	background: var(--header); /* pour le sticky */
	/* overflow: hidden; <---- 04/2024 : ne plus utiliser car sous-menu ajouté */
	box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px;
border: 1px solid var(--header);
}
header #logo {
	position: relative;
	display: flex;
	flex-basis: 415px;
	align-items: center;
  justify-content: center;
	height: 100px;
	/* background: url(/images/logo.png?20240802) no-repeat; */
	background-size: contain;
	background-position: center center;
	cursor: pointer;
font-size: 2em;
}

/******************/
/**** - HEADER ****/
/******************/

/*********************************/
/**** + NAVIGATION PRINCIPALE ****/
/*********************************/

nav {
	display: block;
	position: relative;
	flex-basis: calc(100% - 415px);
	color: #000;
	padding: 0;
	margin: 0;
	z-index: 10;
}
nav a i { transition: all var(--animation-timing); }
nav a:hover { border-bottom: none; }
nav a:hover i { transform: rotate(-15deg); }

nav ul:not(.sous-menu) {
	display: flex;
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	*zoom: 1;

/* height: 43px; */
}
nav ul:not(.sous-menu) li {
	position: relative;
	flex-basis: 20%;
	margin: 0 0 0 0;
	text-align: center;
	font-family: "Montserrat", serif;
	font-size: 1.05em;
	transition: all var(--animation-timing);
	/* border-bottom: 4px solid var(--background); */
}
nav ul:not(.sous-menu) li:hover .sous-menu { display: block; visibility: visible; opacity: 1; }
nav ul:not(.sous-menu) li a {
	display: block;
	width: 100%;
	padding: 10px 0 0 0;
	color: #000;
	transition: all var(--animation-timing);
	font-weight: 500;
}

nav ul:not(.sous-menu) li:not(.ico) a i { margin-right: 10px; }

nav ul:not(.sous-menu) li a:hover {
	color: var(--sable-2);
}


nav ul.sous-menu {
	/* display: none; */
	opacity: 0;
	visibility: hidden;
	position: absolute;
	width: 100%;
	background: #FFF;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	transition: all .4s ease;
	border-radius: 0 0 10px 10px;
}

nav ul.sous-menu li {
	/* display: block; */
	width: 100% !important;
	font-size: 0.9em;
	padding: 0 20px;
}
nav ul.sous-menu li a { font-weight: 400; }

/****/
/**** Uniquement sur écran de bureau : ****/
/****/

@media screen and (min-width: 1600px) {

	nav ul li a::after {
	  content: "";
	  display: block;
		margin-top: 10px;
	  height: 0.1rem;
	  background: var(--sable-2);
	   transform: scale(0);
	   transition: transform var(--animation-timing);
	}
	nav ul li a:hover::after {
	  transform: scale(1);
	}

}

/****/
/**** + MENU HAMBERGEUR : ICONE ****/
/****/

#hamburger {
	width: 30px;
	height: 18px;
	position: relative;
	display: inline-block;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

#hamburger span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: var(--bleufonce);
	border-radius: 50px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#hamburger:hover span { background: var(--jaune) !important; }

#hamburger span:nth-child(1) {
	top: 0px;
}

#hamburger span:nth-child(2),#hamburger span:nth-child(3) {
	top: 8px;
}

#hamburger span:nth-child(4) {
	top: 16px;
}

#hamburger.open span:nth-child(1) {
	top: 16px;
	width: 0%;
	left: 50%;
}

#hamburger.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#hamburger.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#hamburger.open span:nth-child(4) {
	top: 12px;
	width: 0%;
	left: 50%;
}

header a.menu {
	display: none;
	width: auto;
	margin: 0;
	font-size: 1.5em;
	transition: color var(--animation-timing);
	position: absolute;
	left: 30px;
	top: 25px;
}
header a.menu:hover { border: none; }

/****/
/**** - MENU HAMBERGEUR : ICONE ****/
/****/

/*********************************/
/**** - NAVIGATION PRINCIPALE ****/
/*********************************/

/************************************/
/**** CLASSES SPECIALES : RADIUS ****/
/************************************/

.radius5 {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

.radius5top {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.radius5bottom {
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}
.radius5right {
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	-o-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
}

.radius10 {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

.radius10top {
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	-o-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
}

.radius10b {
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	-o-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}

.radius20 {
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
}

.radius10alt {
	-moz-border-radius: 0 10px 0 10px;
	-webkit-border-radius: 0 10px 0 10px;
	-o-border-radius: 0 10px 0 10px;
	border-radius: 0 10px 0 10px;
}

.radius50pc {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

/******************************/
/******************************/
/******************************/

/****************************/
/**** CLASSES GENERIQUES ****/
/****************************/

img { max-width: 100%; }
img#stats { width: 0px; height: 0px; display: none; }

.center { text-align: center; }
.right { text-align: right; }
.visible { display: block; }
.hidden { display: none; }

.lh25, ul.lh25 li { line-height: 25px; }
.lh28, ul.lh28 li { line-height: 28px; }
.lh30, ul.lh30 li { line-height: 30px; }
.lh35, ul.lh35 li { line-height: 35px; }

.invisible {
	opacity: 0 !important;
	cursor: default !important;
}
.barre { text-decoration: line-through; }
.right8 { margin-right: 8px; }
.right25 { margin-right: 25px; }
.left8 { margin-left: 8px; }

/******************************/
/******************************/
/******************************/

/*******************************************/
/**** FIL D'ARIANE REVISE LE 21/01/2020 ****/
/*******************************************/

ol#ariane { position: relative; margin: 0 0 15px 0; padding: 0; color: #666; font-size: 0.9em; }
ol#ariane li { display: inline; margin: 0; padding: 0; font-size: 0.9em; color: #666; }
ol#ariane li a, ol#ariane li a:visited { color: #666; margin-right: 5px; text-decoration: none; transition-duration: var(--animation-timing); }
ol#ariane li a:hover { border: none; text-decoration: none; color: #EFA349; }
ol#ariane i.fa-home { font-size: 0.9em; }
ol#ariane i.fa-angle-right { font-size: 0.7em; margin-right: 5px; }
ol#ariane li a span.accueil { display: none; }

/******************************/
/******************************/
/******************************/

/******************/
/**** + TITRES ****/
/******************/

h1, h2, h3, h4 {
	width: 100%;
	font-family: "Montserrat", serif;
	font-size: 1.8em;
	margin: 0 0 30px 0;
}
h1 {
	color: var(--sable-2);
	border-bottom: 3px dotted var(--sable-2);
	padding-bottom: 15px;
}
h2 { font-size: 1.5em; padding-left: 20px; border-left: 7px solid #000; margin: 40px 0 30px 0; }
h3 { font-size: 1.2em; color: #666; }
h4 { font-size: 1.1em; color: #666; padding-left: 15px; border-left: 7px solid #666; margin: 0 0 30px 0; }

/* main h2:not(:first-child) { margin-top: 40px; } */

/******************/
/**** - TITRES ****/
/******************/

/*****/
/**** + Effet spécial de soulignement des liens avec classe SLIDE-EFFECT ****/
/*****/

.slide-effect { display: inline-block; margin: 0 0 0 0; color: var(--orange-boutons); }
.slide-effect::after {
	content: '';
	display: block;
	width: 0;
	height: 1px;
	background: var(--orange-boutons);
	transition: width var(--animation-timing);
}

.slide-effect:hover::after { width: 100%; }
.slide-effect:hover { border-bottom: none; }

/*****/
/**** - Effet spécial de soulignement des liens avec classe SLIDE-EFFECT ****/
/*****/


/****************************/
/**** + EDITORIAL / BLOG ****/
/****************************/

/**** Page d'index du blog ****/

main.blog-index {
	display: flex;
	flex-wrap: wrap;
}

ul.articles-groupe {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 104%;
	margin-left: -2%;
}
ul.articles-groupe li {
	flex-basis: 46%;
	margin: 0 2% 50px 2%;
	overflow: hidden;
	background: #FFF;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	transition: all 0.5s;
	cursor: pointer;
}
ul.articles-groupe li:hover {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
ul.articles-groupe li div.photo {
	position: relative;
	background-size: cover;
	background-position: center center;
	height: 156px;
}
ul.articles-groupe li div.texte { position: relative; height: 295px; padding: 20px 25px 15px 25px; overflow: hidden; text-overflow: ellipsis; }
ul.articles-groupe li div.texte span.theme { display: block; text-align: center; color: var(--vert); font-size: 0.8em; font-family: "Montserrat", serif; margin-bottom: 10px; }
ul.articles-groupe li div.texte a { display: block; margin-bottom: 18px; color: #000; font-size: 1.2em; text-align: center; font-family: "Montserrat", serif; line-height: 28px; font-weight: 800; }
ul.articles-groupe li div.texte a:hover { border: none; }
ul.articles-groupe li div.texte p:nth-child(3), ul.articles-groupe li div.texte p:nth-child(4) { font-size: 0.8em; margin: 0 0 10px 0; color: var(--gristexte); text-align: center; }
ul.articles-groupe li div.texte p:nth-child(5) { font-family: 'Roboto', sans-serif; color: var(--gristexte); font-size: 0.95em; line-height: 25px;	 text-align: center; }

ul.articles-groupe li div.texte:after{ /* Pour pallier l'overflow qui ne prend pas en compte les padding */
  content: ' ';
  display: block;
  background: linear-gradient(to top, #FFF, 85%, rgba(255, 255, 255, 0.4));
  height: 22px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

/**** Page article de blog + asides index et article ****/

main.blog-article {
	position: relative;
	max-width: none;
	padding: 0;
}
main.blog-article article header, main.blog-article article .corps .contenu {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.05em;
	line-height: 26px;
}
main.blog-article article .corps .contenu h2 { display: block; margin: 20px 0 !important; color: #236FA1; font-size: 18pt; font-weight: bold; }
main.blog-article article .corps .contenu h3 { display: block; margin: 20px 0 !important; color: #236FA1; font-size: 17pt; font-weight: normal; }

main.blog-article article header {
	position: relative;
	width: 100%;
	padding: 50px;
	background-color: #000;
	margin-bottom: 40px;
}
main.blog-article article header::before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.5;
	background: url(/data/articles/tetieres/defaut.jpg) no-repeat center center;
	background-size: cover !important;
}
main.blog-article article header div {
	position: relative;
	width: 100%;
	max-width: 1500px;
	padding: 0 30px;
	text-align: center;
	color: #FFF;
}
main.blog-article article header div h1 { font-size: 2.2em; line-height: 45px; }

main.blog-article article div.corps {
	display: flex;
	flex-wrap: wrap;
	max-width: 1500px;
	padding: 0 30px;
	margin: auto;
}
main.blog-article article div.corps div.contenu, main.blog-index div.contenu {
	flex-basis: calc(100% - 450px);
	padding-right: 30px;
}
main.blog-article article div.corps div.contenu p.intro {
	font-size: 1em;
	font-weight: bold;
	margin: 0 0 40px 0;
}

main.blog-article article div.corps aside, main.blog-index aside {
	flex-basis: 450px;
}
main.blog-article article div.corps .titre, main.blog-index .titre {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
}
/* main.blog-article article div.corps .titre.top30, main.blog-index .titre.top30 { margin-top: 30px; } */

main.blog-article article div.corps .titre h6, main.blog-index .titre h6 {
	font-family: 'Montserrat', sans-serif;
/*
	line-height: 22px;
	background: linear-gradient(to bottom  right, var(--orange-boutons), var(--jaune));
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	color: #FFF;
	font-weight: normal;
	font-size: 1em;
	margin: 0 0 20px 0;
	padding: 10px;
*/
	display: inline-block;
	margin: auto;
	background: linear-gradient(180deg, rgba(255,255,255,0) 60%, var(--jaune) 50%);
	font-size: 1.5em;
	padding: 0 15px 0 15px;
}
main.blog-article article div.corps aside ul.liste-evenements-simple, main.blog-index aside ul.liste-evenements-simple {
	width: 100%;
	margin-left: 0;
}
main.blog-article article div.corps aside ul.liste-evenements-simple li, main.blog-index aside ul.liste-evenements-simple li {
	position: relative;
	flex-basis: 100%;
	margin: 0 0 30px 0;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #FFF;
	transition: all var(--animation-timing);
	padding-bottom: 35px; /* Pour compenser la position absolute du détail nb inscrits / nb commentaires */
}
main.blog-article aside p.partager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 30px;
}
main.blog-article aside p.partager a {
	flex-basis: 20%;
	text-align: center;
	font-size: 1.3em;
	color: #000;
	transition: all var(--animation-timing);
}
main.blog-article aside p.partager a:hover { color: var(--orange-boutons); border: none; }
main.blog-index aside a.tout, main.blog-article aside a.tout { margin-bottom: 20px; }

/**** Liens vers les thématiques (page d'index du blog + page article) ****/

main.blog-index aside div.thematiques, main.blog-article div.thematiques {
	display: flex;
	flex-wrap: wrap;
	width: 104%;
	margin-left: -2%;
	font-family: 'Montserrat', sans-serif;
}
main.blog-index aside div.thematiques a:not(.tout), main.blog-article div.thematiques a {
	position: relative;
	flex-basis: 46%;
	margin: 0 2% 20px 2%;
	text-align: center;
	color: #000;
	padding: 25px 20px 20px 20px;
	background: #EEE;
	border-radius: 10px;
	transition: all var(--animation-timing);
}
main.blog-index aside div.thematiques a span.trou, main.blog-article div.thematiques a span.trou {
	position: absolute;
	top: 15px;
	right: 15px;
	background: #FFF;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	padding-top: 5px;
}
main.blog-index aside div.thematiques a i.checked, main.blog-article div.thematiques a i.checked {
	display: none;
	font-size: 1em;
	color: var(--jaune);
}
main.blog-index aside div.thematiques a:not(.tout):hover, main.blog-index aside div.thematiques a:not(.tout).actif, main.blog-article div.thematiques a:hover, main.blog-article div.thematiques a.actif {
	border: none;
	background: var(--jaune);
	color: #FFF;
}
main.blog-index aside div.thematiques a:not(.tout).actif  i.checked, main.blog-article div.thematiques a.actif i.checked {
	display: block;
}
main.blog-index aside div.thematiques a:not(.tout) i:not(.checked), main.blog-article div.thematiques a i:not(.checked) {
	display: block;
	margin: 0 auto 20px auto;
	font-size: 2.3em;
}

/**** Liens vers les thématiques (spécifique page article de blog) ****/

main.blog-article div.thematiques { margin-top: 30px; margin-bottom: 30px; }
main.blog-article div.thematiques a { flex-basis: 21%; }


/**** Outils pour les administrateurs (modifier un article) ****/

main.blog-article #outils-admin {
	position: fixed;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	padding: 15px 20px;
	background: #FFF;
	border-radius: 10px;
	z-index: 99999;

background: linear-gradient(to bottom  right, #1D6897, #D4EAF8);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
main.blog-article #outils-admin p.avertissement {
	color: #FFF;
	font-size: 0.9em;
	text-align: center;
	margin: 0 0 15px 0;
}
main.blog-article #outils-admin a {
	display: inline-block;
	margin: 0 10px;
	padding: 7px 15px;
	background: #FFF;
	border-radius: 5px;
	transition: all var(--animation-timing);
	color: var(--orange-boutons);
}
main.blog-article #outils-admin a:hover {
	border: none;
	color: #FFF;
	background: var(--orange-boutons);
}

main.blog-article article .corps .contenu span.encart {
	position: relative;
	display: block;
	margin: 50px 0 5px 0;
	padding: 40px 20px 20px 20px;
	background: var(--jaune-tres-clair);
	border: 1px dashed var(--jaune-fonce);
	border-radius: 10px;
}
main.blog-article article .corps .contenu span.encart span {
	position: absolute;
	top: -15px;
	left: 20px;
	font-weight: bold;
	font-size: 1.1em;
	padding: 5px 20px;
/*
	border: 2px solid var(--jaune-fonce);
	background: var(--background);
*/
	background: var(--jaune-fonce);
	border-radius: 10px;
}

/****************************/
/**** - EDITORIAL / BLOG ****/
/****************************/

/****************/
/**** FOOTER ****/
/****************/

#footer-bordure {
	position: relative;
	background: url('/images/footer-bordure.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
	height: 69px;
	margin-top: 40px;
	z-index: 1; /* Pour passer au-dessus de la carte sur la page évènements */
}

footer {
	position: relative;
	width: 100%;
	height: auto;
	margin: auto;
	background: var(--sable-2);
	color: #FFF;
}
footer .content { text-align: center; padding: 25px 0 30px 0; font-size: 0.9em; }
footer .content a { color: var(--jaune); }
footer .content a:hover { border: none; }
footer .slide-effect { color: #FFF; }
footer .slide-effect::after { background: #FFF; }
footer .content a i { margin-right: 10px; }

footer span.sep { margin: 0 10px; }
footer span.sep:after { content: " • "; }

footer p { line-height: 25px; }
footer p.reseaux span { display: block; font-size: 1.3em; font-weight: bold; margin: 25px 0 10px 0; }
footer p.reseaux a { display: inline-block; color: var(--background); margin: 20px; transition: all var(--animation-timing); }
footer p.reseaux a:hover { color: var(--jaune); }
footer p.liens { margin-bottom: 30px; }
footer p.liens a { display: table; margin: 10px auto; font-size: 1.1em; }
footer p.rea { font-size: 0.9em; margin-bottom: 0; }
footer p.rea a { margin: 0 5px; }
footer p.alcool { line-height: 25px; font-size: 1.2em; }

/******************************/
/******************************/
/******************************/

/*****************/
/**** + PULSE ****/
/*****************/

@-webkit-keyframes pulse_vert {
  0% { -webkit-box-shadow: 0 0 0 0 rgba(39, 161, 145, 0.8); }
  70% { -webkit-box-shadow: 0 0 0 10px rgba(39, 161, 145, 0); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(39, 161, 145, 0); }
}
@keyframes pulse_vert {
  0% { -moz-box-shadow: 0 0 0 0 rgba(39, 161, 145, 0.8); box-shadow: 0 0 0 0 rgba(39, 161, 145, 0.8); }
  70% { -moz-box-shadow: 0 0 0 10px rgba(39, 161, 145, 0); box-shadow: 0 0 0 10px rgba(39, 161, 145, 0); }
  100% { -moz-box-shadow: 0 0 0 0 rgba(39, 161, 145, 0); box-shadow: 0 0 0 0 rgba(39, 161, 145, 0); }
}

/*****************/
/**** - PULSE ****/
/*****************/