:root {
	--theme-bleu-sombre: #101356;
	--theme-bleu: #314152;
	--theme-rouge: #DD3208;
	--theme-orange: #FD633D;
	--theme-jaune: #FFCA1A;
	--theme-vert: #00928A;
	--theme-blanc: white;
	--hauteur-nav-desktop-xxl:60px;
	--hauteur-nav-desktop-xl:60px;
	--hauteur-nav-tablette:60px;
	--hauteur-nav-mobile:60px;

	--container-max-width:1400px;
}

/* frame bleu sur tout le site */
@media screen and (min-width: 992px){
	html {
		position: relative;
		padding: 10px; 
		/* padding pour restreindre le contenu égal à la valeur du frame bleu*/
	}

	html::before{
		content: "";
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: var(--theme-bleu-sombre) 10px solid;
		background-color: transparent;
		pointer-events: none;
	}
}

/* Spécial écran XXL pour Julien */
@media (min-width: 1700px) {
	html { font-size: 18px; }
	.container { max-width: 1640px; }
}

@media (max-width: 1280px) {
	html{ font-size: 14px; }
}

.cadre--jaune{
	border: solid var(--theme-jaune) 10px;
}

.cadre--jaune-ressources{
	border:none;
}

@media (min-width: 768px) {
	.cadre--jaune-ressources{
		border: solid  var(--theme-jaune) 10px;
		padding-top:1em;
		padding-left: 8.3334vw;
		padding-bottom: 8em;
		margin-bottom: -10em;
	}
}

.cadre_jaune{
	background-color: white;
	border: solid var(--theme-jaune) 10px;
}

/* style généraux ===================================*/
/*===================================================*/

.dark   { color:var(--theme-bleu-sombre); }
.blue   { color: var(--theme-vert); }
.red,
span[role="alert"]   { color: var(--theme-rouge); }
.yellow { color: var(--theme-jaune); }
.white { color:white; }

.bg_red {
	background-color:  var(--theme-rouge);
}

.link--arrow{
	display:block;
	padding-bottom:.5rem;
	font-weight:600;
}

.link--arrow::after{
	content: " →";
}

svg {
	width: 20px;
	height: 19px;
	fill: currentColor;
	vertical-align: bottom;
}

/************     LIENS       ************/
.texte a:not(.btn){
	color: var(--theme-rouge);
}

a,
a:hover{
	text-decoration: none;
}

a:hover, a.red.active{
	color:var(--theme-vert);
}

a.blue:hover, .sociaux-list .socicon:hover{
	color:var(--theme-bleu-sombre) !important;
}

.btn-link {
	padding:1em 0;
	text-align:left;
}

.btn-link:hover {
	text-decoration: none;
	color:var(--theme-vert);
}

a.spip_out {
	color: var(--theme-rouge);
}

a.spip_out::after {
	content: "\0000a0\279A";
}

a.spip_out:hover{
	color:var(--theme-vert);
}
.arbo a {
	color: var(--theme-vert);
	font-weight: 500;
}

/* UTILITIES =======================================*/
/*===================================================*/

@media screen and (min-width: 992px){
	/* Polygone : br = bottom_right, tl = top_left and so on… */
	.polygone_br{
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
	}

	.polygone_tl{
		height:15rem;
		-webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
		clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
	}
}


dl, ol, ul {
		margin-bottom: 3rem;
}

.liste_nobullets {
	padding-left:0;
}

.liste_nobullets li {
	list-style: none;
	margin-bottom:.5em;
}

.fond_bleu{
	background:url(img/fondbleu_small.jpg) no-repeat;
	color:white;
}

.fond_blanc {
	background-color: white;
	color:var(--theme-blanc);
}

.bkg_yellow { background-color:  var(--theme-jaune); }
.bkg_dark { background-color: var(--theme-bleu-sombre); }

.phylactere{
	position:relative;
}

.phylactere::before{
	content:url(img/phylactere.png);
	position:absolute;
	top:40%;
	right:-30px;
	z-index:1;
}

.trombi{
	display:flex;
}

.drag-up{
	margin-top:-20rem;
}

.img-fit{
	flex:1 1 auto;
	width:auto;
	height:auto;
	max-width:245px;
	max-height:260px;
	object-fit: cover;
}

/* COMPOSANTS ==========================================================================*/
/*======================================================================================*/
/*======================================================================================*/


/* ==================================================*/
/* NAVIGATION */
/* ==================================================*/

.js-nav.over{
	background-color: #fff;
	box-shadow: 0 10px 12px 0 rgba(70,70,70,.1);
}

.nav + * {
	padding-top: 60px;
}

@media screen and (min-width: 992px ){
	.nav{
		top: 10px;
		left: 10px;
		right:10px;
	}
}

.nav__logo {
	display: block;
	float: left;
	padding: 14px 14px 11px 14px;
	background-color:  var(--theme-jaune);
}

.logo--o {
	padding: 8px;
}

.nav__logo img {
	height: 100%;
}

.js-nav .nav-principale {
	justify-content: flex-end;
	column-gap: 3rem;
	margin-right: 3rem;
}

.nav-principale[data-depth="0"] li,
.nav-principale div.secteur {
	position: relative;
	padding-top: 15px;
}

.nav-principale div.secteur-contact {
	position: relative;
	padding-top: 8px;
}

.nav-principale li:before,
.nav-principale div.secteur:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 7px;
	background-color: var(--theme-jaune);
	opacity: 0;
	transition: all .8s;
}

.nav-principale li:hover::before, 
.nav-principale li:focus::before, 
.nav-principale li.active::before,
.nav-principale div.secteur:hover::before, 
.nav-principale div.secteur:focus::before, 
.nav-principale div.secteur.active::before {
	opacity: 1;
}

.nav-principale a,
.nav-principale .secteur__titre,
.nav-footer a {
	font-family: geomanist;
	display: block;
	color: var(--theme-bleu-sombre);
	font-weight: 600;
}




.nav-principale ul.menu-liste.menu-items[data-depth='1'] a,
.nav-principale .secteur__enfants a {
		color:var(--theme-bleu-sombre);
}

/* Nav principale en desktop : gestion couleur typo blanche sur fond coloré */
@media screen and (min-width: 992px) {
	
	[data-page *= "header_couleur"] .js-nav:not(.over) .nav-principale a,
	[data-page *= "formations"] .js-nav:not(.over) .nav-principale a,
	[data-page *= "services"] .js-nav:not(.over) .nav-principale a,
	[data-page *= "ADN"] .js-nav:not(.over) .nav-principale a,
	[data-page *= "ressources"] .js-nav:not(.over) .nav-principale a {
		color: white;
	}

	.nav-principale ul.menu-liste.menu-items[data-depth='1'],
	.nav-principale .secteur__enfants {
			position: absolute;
			top: 50px;
			width: 250px;
			padding: 1rem;
			background-color: white;
			border-left: solid 7px var(--theme-jaune);
			transition: all 0.4s ease-in-out;
	}
}

@media screen and (max-width: 992px) {
	.js-nav {
		background-color: white;
	}

	.js-nav .nav-principale {
		line-height: 40px;
	}

	.burger span {
		background-color: var(--theme-bleu-sombre);
	}

	.nav-principale  li a {
		color: var(--theme-rouge);
	}

	.nav-principale  a:after {
		content: " →";
		text-align: right;
	}

	.nav-principale a::before{
		display: none;
	}
}

.animation-container{
	position: relative;
	margin-top: 5em;
	width: 100% !important;
	height: 0 !important;
	padding-bottom: 33.3333%;
}

.animation-container canvas,
.animation-container #dom_overlay_container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none;
}


/********** Option Menu avec enfants /**********/
.nav-principale a.parent {
	position: relative;
}
.nav-principale a.parent::after {
	position: absolute;
	content: '▼';
	font-size: 10px;
	top:6px;
	right: -20px;
	transition: all 0.4s ease-in-out;
}

.nav-principale a.parent.open::after {
	transform: rotate(-180deg);
}



.nav-principale ul.menu-liste.menu-items[data-depth='1'] {
	display:none;
}

.nav-principale a.open + ul.menu-liste.menu-items[data-depth='1'] {
	display: block;
}

.carte__ergo_video h2 {
	margin-top: 0;
}

@media screen and (min-width: 992px) { 
	.carte__ergo_video {
		display: grid;
		column-gap: 2rem;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas: "a b"
							 "a c";
	}

	div.spip_document {
		grid-area: a;
	}

	header {
		grid-area: b;
	}

	p {
		grid-area: c;
	}
}


/* HEADERS ===============================*/
/*===================================================*/

@media screen and (max-width: 991px){
	 .header--service .row:nth-child(1){
		min-height: 20vw; /* 35vw */
		background-color: var(--theme-bleu-sombre);
		color: white;
	}
}

.temoignage{
	font-family: knile;
	font-style:italic;
}

.temoignage::before, .temoignage::after{
	color: var(--theme-jaune);
}
.temoignage::before{
	content: "❝ ";
}
.temoignage::after{
	content: " ❞";
}

.intro {
	font-size:1.1rem;
	font-style:italic;
}

.chapo {
	font-size:1.375rem;
	font-weight: 500;
	line-height:2.125rem;
}

.header--service__titre h1 {
	font-size: 2.4rem;
	line-height: 2.7rem;
	margin-top: 1rem;
	margin-bottom: .5em;
	padding-right: 1em;
}


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

	.header{
		margin-top: 3em;
		margin-bottom: 3em;
	}
	.header--service .row:nth-child(1){
		min-height: 20vw; /* 35vw */
		background-color: var(--theme-bleu-sombre);
		color: white;
	}

	.header--service__titre{
		align-self: flex-end;
		padding: 0;
		margin-top: 3em;
	}

	.header--service__cover{
		overflow: hidden;
	}

	.header--service__titre h1 {
		font-size: 3.4rem;
  		line-height: 3.8rem;
		margin-top:2em;
		margin-bottom: .5em;
		padding-right: 1em;
	}

	.header--service__cover{
		padding-left: 0;
		padding-right: 0;
		background-position: center;
		background-size: cover;
	}

	.header--service__intro,
	.header--service__description{
		padding-left: 24px;
	}

	.header--service__description{
		/*margin-bottom: -16px;*/
		padding-bottom: 1px;
		padding-top: 24px;
		padding-right:1em;
		border-top: 10px solid  var(--theme-jaune);
		border-left: 10px solid  var(--theme-jaune);
	}

	.header--service__intro{
		padding-top: 24px;
		border-bottom: 10px solid  var(--theme-jaune);
		border-right: 10px solid  var(--theme-jaune);
		border-left: 10px solid  var(--theme-jaune);
	}
}

/* INTRO SERVICE HOME PAGE ==========================*/
/*===================================================*/

#accueil-texte-intro {
	max-width: 800px;
}

.intro-service {
	position: relative;
	color: white;
	/*counter-increment: intro-service;*/
}

.intro-service h2{
	position: relative;
	max-width: 25rem;
	margin-bottom: 3rem;
	display: block;
}

/* numéro ===== */
.intro-service h2::before{
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 10rem;
	height: 15rem;
	transform: translateY(-20%);
}

@media screen and (min-width: 992px) {
	#accueil-texte-intro {
		max-width: 1000px;
	}

	.intro-service h2::before{
		transform: translateX(-35%) translateY(-20%);
	}
}

.intro-service--rouge h2::before{
	background: url(img/intro_numero_1.png) no-repeat center;
	background-size: contain;
}

.intro-service--dark h2::before{
	background: url(img/intro_numero_2.png) no-repeat center;
	background-size: contain;
}

.intro-service--bleu h2::before{
	background: url(img/intro_numero_3.png) no-repeat center;
	background-size: contain;
}

.intro-service__img{
	position: relative;
}

@media screen and (max-width:992px) {
	.intro-service__img{
		order: 2;
	}
}

[data-page = "sommaire"] .references h2 {
	text-align: center;
	padding:3rem 0 1rem;
	color:white;
} 

/* cadres blancs des images =====================*/

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

	.intro-service__cadre{
		content: "";
		position: absolute;
		z-index: 4;
	}

	.intro-service--rouge .intro-service__cadre{
		top: 20%;
		left: -10%;
		width: 90%;
		height: 85%;
		background: url(img/illus_intro_1_cadre.png) no-repeat center;
		background-size: 100% 100%;
	}

	.intro-service--dark .intro-service__cadre{
		top: 40%;
		left: 30%;
		width: 70%;
		height: 70%;
		background: url(img/illus_intro_2_cadre.png) no-repeat center;
		background-size: 100% 100%;
	}

	.intro-service--bleu .intro-service__cadre{
		top: 10%;
		left: 0%;
		width: 75%;
		height: 75%;
		background: url(img/illus_intro_3_cadre.png) no-repeat center;
		background-size: 100% 100%;
	}
}

/* images ====================================*/

/* donner une taille sur les col-12 sur petits écrans */
@media screen and (max-width: 992px){
	.intro-service__img{
		min-height: 300px;
	}
}

.intro-service__img img{
	position: absolute;
	z-index: 9;
	bottom: 0;
	left: 0;
	max-width: 100%;
	max-height: 100%;
}

.intro-service__content{
	position: relative;
	z-index: 3;
	padding-top: 8em;
	padding-bottom: 2em;
}

/* Pseudos elements pour faire les fonds de couleurs des sections ============================*/

.intro-service::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* styles spécifiques à la section services ROUGE ============================*/

.intro-service--rouge{
	margin-bottom: -4vh;
}

.intro-service--rouge .intro-service__img img{
	left: 16px;
}

.intro-service--rouge::before {
	z-index: 1;
	background:url(img/home_fondrouge_desktop.jpg) no-repeat center;
	background-size: cover;
}

@media screen and (min-width: 992px){
	.intro-service--rouge .intro-service__img img{
		z-index: 2;
		clip-path: polygon(0 0%, 100% 0%, 100% 95%, 0% 100%);
		-webkit-clip-path: polygon(0 0%, 100% 0%, 100% 95%, 0% 100%);
	}
}

/* styles spécifiques à la section services DARK ============================*/

.intro-service--dark::before {
	background:url(img/home_fonddark_desktop.jpg) no-repeat center;
	background-size: cover;
}

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

	.intro-service--dark{
		margin-bottom: -4vh;
	}

	.intro-service--dark::before {
		z-index: 2;
		clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
		-webkit-clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
	}

	.intro-service--dark .intro-service__img img{
		z-index: 2;
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 95%);
		-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 95%);
	}
}

@media screen and (min-width: 992px){
	.intro-service--dark .row{
		flex-direction: row-reverse;
	}
}

/* styles spécifiques à la section services BLEUE ============================*/

.intro-service--bleu::before {
	background:url(img/home_fondbleu_desktop.jpg) no-repeat center;
	background-size: cover;
}

@media screen and (min-width: 992px){
	.intro-service--bleu::before {
		z-index: 3;
	 clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 100%);
	 -webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 100%);
 }
}


/* styles spécifiques à la section services VIOLET ============================*/

.fond-violet {
	background:url(img/fond-violet.jpg) no-repeat center;
	background-size: cover;
}

@media screen and (min-width: 992px){
	.fond-violet {
		clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
	}
}

/* styles spécifiques de la section "On l'a fait pour eux "" ============================*/

.poureux{
	display:grid;
} 

.poureux .phylactere {
	display: flex;
	justify-content: center;
	align-items: center;
	padding:15px 0;
}

.poureux_texte, .poureux_references {
	display:grid;
	grid-row-gap: 1rem;
	justify-content: center;
	margin-top: 15px;
	padding-left:10px;
	padding-right:10px;
}

.poureux_texte h3, .poureux_references h3 {
	line-height: 2rem;
	margin-bottom: -0.5rem;
}

@media screen and (min-width:992) {
	.poureux .phylactere {
		padding:30px 0;
	}

	.poureux_texte, .poureux_references {
		padding-left:30px;
		padding-right:30px;
	}
}

.reference img{
	width:100%;
	max-width: 160px;
	height:auto;
}

@media (min-width : 750px) {
	.poureux{
		grid-template-columns: 2fr 5fr;
	}

	.poureux_references {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		grid-column-gap: 3rem;
		align-items: center;
	}
}

@media (min-width : 992px) {
	.poureux_texte, .poureux_references {
		padding-left:100px;
		padding-right:100px;
	}

	.poureux_references {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		align-items: center;
	}
}

@media (min-width : 1600px) {
	.poureux_texte, .poureux_references {
		padding-left:150px;
		padding-right:150px;
	}

	.poureux_references {
		grid-column-gap: 5rem;
	}
}

.pour-eux blockquote.spip{
	font-style: italic;
}

.pour-eux blockquote.spip::before, .pour-eux blockquote.spip::after{
	color: var(--theme-jaune);
}
.pour-eux blockquote.spip::before{
	content: "❝ ";
}
.pour-eux blockquote.spip::after{
	content: " ❞";
}

.pour-eux h2.spip, .pour-eux h3.spip{
	font-size:1.444rem;
	line-height:1.888rem;
	font-weight: 600;
	color:white;
	margin-bottom: 0;
	margin-top:2.5rem;
}

.pour-eux br{
	display:none;
}

/* CARTES ===============================*/
/*===================================================*/

.card{
	position: relative;
	border: 0;
	border-radius:0;
}

.card-img {
	border-radius:0;
}

.card a::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.card--service h3.card-title{
	margin-top:0;
}

.pastille{
	align-items: center;
}
.servive-pastille{
	float: left;
	padding:0 10px 10px 0;
	object-fit: contain;
}
.titre-pastille{
	margin:0;

}

@media screen and (min-width:576px){
	.card__cover{
		/*padding-bottom: 66%;*/
		clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
	}

	.card.card--service:hover img.logo{
		transform: scale(1.1);
		transition: all 1s ease-out;
	}

.card.card--service img.uni {
	transition-duration: 1s;
	transition-property: all;
}

	.card--service h3.card-title{
		margin-top: .75rem;
	}
}

/* Qui sommes nous ==================================*/
/*===================================================*/

.nous-sommes{
	padding-bottom: 75%;
	background: url(img/about_image.jpg);
	background-size: auto 75vw;
	background-repeat: no-repeat;
	background-position: bottom center;
	color: white;
}

.nous-sommes .container-md {
	max-width:1300px;
}

@media screen and (min-width: 768px){
	.nous-sommes{
		background-size: contain;
		background-repeat: repeat-x;
		background-position: left center;
		padding-bottom: 0;
	}
}

.nous-sommes .row{
	justify-content: flex-end;
}

.nous-sommes__content{
	width: 100%;
	padding: 4em 7.16vw;
	background-color: var(--theme-bleu-sombre);
}

@media screen and (min-width: 768px){
	.nous-sommes__content{
		width: 45rem;
		max-width: 100%;
	}
}

@media screen and (min-width: 1200px){
	.nous-sommes__content{
		width: 60rem;
		max-width: 100%;
	}
}

@media screen and (min-width: 1640px){
	.nous-sommes__content{
		width: 45rem;
		max-width: 100%;
	}
}

/* Equipes  ===============================*/
/*===================================================*/

.equipes{
}

.references {
	background:url(img/home_fonddark_desktop.jpg) no-repeat center;
	background-size: cover;
	-webkit-clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
}


/* Service -> Formations  ===============================*/
/*===================================================*/
.liste_formations .card--formation {
	border-left:solid 10px #FD633D;
	border-radius:0;
}

.groschiffres p {
	max-width: 220px;
}
.groschiffres strong {
	font-size:2.3rem;
	text-wrap: nowrap;

}

/* Ressources =======================================*/
/*===================================================*/
.ressources{
	overflow: hidden;
}

.ressources .container{
	position: relative;
}

.ressources .bordure {
	position: absolute;
	content: "";
	top: 2rem;
	left: -20rem;
	right: -20rem;
	bottom: 0;
	border:solid 10px  var(--theme-jaune);
}

@media screen and (min-width: 992px){
	.ressources .bordure {
		left: -2rem;
		right: -2rem;
		bottom: 10rem;
	}
}

.head-cadre_jaune {
	display: flex;
	flex-direction: column;
	min-height: 15em;
}

.card--ressource {
	box-shadow: 0 0 10px 0 rgba(70,70,70,.4);
}

.title-over-img {
	position:relative;
}
.title-over-img h3 {
	position: absolute; 
	bottom: 0; 
	left: 0; 
}

.card--ressource .title-over-img::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .8;
}

.card--ressource .card-body{
	padding: 1.25rem 1.5rem 0;
}

.card--ressource .card-footer{
	background:none;
	border:none;
	padding:0 1.5rem 1.25rem;
	margin-top:auto;
}

.title-over-img h3{
	z-index: +1;
}

.card--membre {
	clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
}
/*rouge*/
.card--membre .card--rouge,
.card--rouge .title-over-img::after{
	/*background-color:  var(--theme-rouge);*/
	background:url(img/bckgrd_dark.png) repeat;
}

/*dark*/
.card--membre .card--dark,
.card--dark .title-over-img::after{
	background:url(img/bckgrd_dark.png) repeat;
}

/*bleu*/
.card--bleu .title-over-img::after{
	background-color: var(--theme-vert);
}

/*jaune*/
.card--membre .card--jaune{
	/*background-color:  var(--theme-jaune);*/
	background:url(img/bckgrd_dark.png) repeat;
}


/* Ressources ===============================*/
/*===================================================*/
.references {
	background:url(img/home_fonddark_desktop.jpg) no-repeat center;
	background-size: cover;
	clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
}

/* Recrutement ===============================*/
/*===================================================*/
.liste_offres {
	background:url(img/bckgrd_green.jpg) repeat;
	clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
}

.liste_offres .card--offre {
	border-left:solid 10px  var(--theme-jaune);
	color:white;
	border-radius:0;
}

/* Contact ===============================*/
/*===================================================*/

@media screen and (min-width:992px) {
	.contact{
		background:url(img/bckgrd_yellow.png) repeat-x;
		background-size: auto 200px;
		background-position: bottom;
	}
}

.form-group {
	margin-bottom: 1rem;
}



/* FOOTER ===============================*/
/*===================================================*/
footer {
	background-color: var(--theme-jaune);
	color:var(--theme-bleu-sombre);
}

.grid__footer {
	column-gap: 1rem;
	justify-items: center;
}

@media screen and (min-width: 991px) {
	.grid__footer {
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 2rem;
	}
}

footer a {
	font-family: knile;
	font-weight: 500;
	text-decoration: none;
}

footer .secteur {
	margin-bottom: 1rem;
}

footer a.secteur__titre,
footer span.secteur__titre {
	font-size: 1.1rem;
	text-transform: uppercase;
	font-weight: 500;
}

footer .secteur__enfants a,
.plan .secteur__enfants a {
	display: block;
	font-size: 1rem;
	color: var(--theme-vert);
	line-height: .9rem;
	padding-top: .3rem;
	padding-bottom: .5rem;
}

footer a.on,
footer .secteur__enfants a:hover,
.plan .secteur__enfants a:hover {
	color:var(--theme-bleu-sombre);
}

.bouton-lettre {
	position: absolute;
	top:30px;
	left:50px;
}

footer .nav-principale .btn-contact {
	display: none;
}


/* Formulaires  ===============================*/
/*===================================================*/

legend {
	font-size:1.5rem;
	font-weight: 800;
	color:var(--theme-bleu-sombre);
}

@media screen and (min-width:992px){
	.form-cadre::before{
		content:url(img/picto_contact2.png);
		position:relative;
		z-index: -1;
		width:0;
		height:0;
		top:-50px;
		left:-90px;
	}

	.form-cadre{
		background-color:white;
		background-clip: padding-box;
		border:solid 10px var(--theme-vert);
	}
}

.form-control{
	border:solid 2px var(--theme-vert);
}

.form-check-label{
	vertical-align: super;
}

.form-check, .custom-control.custom-radio, .custom-control.custom-checkbox {
	margin-bottom:.6rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
	border-color: var(--theme-vert);
	background-color: var(--theme-vert);
}

.custom-control-inline {
		margin-right: 2rem;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='-4 -4 8 8'%3e%3ccircle r='4' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
	background-color: rgba(0, 123, 255, 0.5);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.dropfile {
	background-color: #fdfd86;
	margin-bottom:2rem;
}

.btn-red {
	display:inline-block;
	font-size: 1rem;
	background-color: var(--theme-rouge);
	color: white !important;
	border-radius:0;
	padding:6px 25px;
}

/* surcharge dans le menu de navigation principale version esktop */
.nav-principale a.btn-red {
	padding: 6px 25px;
}

.btn-red:hover{
	background-color:var(--theme-bleu-sombre);
	color:white;
}


/* SURCHARGE BOOTSTRAP 4 ===================================*/
/*===================================================*/
/*===================================================*/
/*===================================================*/
.card-title {
		margin-top: .75rem;
		margin-bottom: .75rem;
}
.card-footer{
	background:none;
	border:none;
	padding:0;
	margin-top:auto;
}


/* SPIP ===================================*/
/*===================================================*/
/*===================================================*/
/*===================================================*/

/* Bug SPIP 3.3 sur les <figure> */
.texte figure {width:auto !important}

.spip_documents_left {
		margin-right: 1.5em;
}

.spip_documents_right {
		float: right;
		margin-left: 15px;
		margin-bottom: 1.385em;
		max-width: 33%;
}

@media (min-width:992px){
	.texte .spip_documents_left img{
		margin-left:-8rem;
	}
}

 h2.spip, .h2.spip {
	margin-bottom:1.5rem;
	color:var(--theme-bleu-sombre);
	clear:both;
 }

	h3.spip {
	font-size:2rem;
	margin-bottom:2rem;
	color:var(--theme-bleu-sombre);
	clear:both;
 }

.titre--border-yellow {
	padding-top:.8em;
	background:url(img/titre-border-yellow.png) no-repeat top left;
}

.border-yellow {
	padding-top:.5em;
	background:url(img/titre-border-yellow.png) no-repeat bottom center;
}


/* .rubrique_service .texte > h2.spip:nth-child(n+2) {
	margin-top:1.5em;
	padding-top:2.5rem;
	background:url(img/titre-border-yellow.png) no-repeat top left;
 }
*/


header h2,
.block h2,
.texte > h2.spip,
.texte > h2.h2 {
	margin-top:2.4rem;
	padding-top:2.5rem;
	color:#101356;
	background:url(img/titre-border-yellow.png) no-repeat top left;
 }

.texte > h3.spip,
.texte > h3.h3 {
	color:#101356;
 }

.texte > h4.spip,
.texte > h4.h4 {
	color:#101356;
 }

.texte > h2.spip:first-child,
.texte > h2.h2:first-child{
	margin-top:0;
}

.rubrique_service .texte > h2.spip:first-child,
.rubrique_service .texte > h2.h2:first-child{
	background:none;
	margin-top:0;
	padding-top: 0;
}

.extra h2.spip,
.extra .h2,
.h2.spip {
	font-size:1.875rem;
	line-height:2rem;
	padding-top:2rem;
	background:url(img/titre-border-green.png) no-repeat top left;
 }

.extra h2.spip:nth-child(n+2),
.extra h2.h2:nth-child(n+2) {
		margin-top:4rem;
		background:url(img/titre-border-yellow.png) no-repeat top left;
}

.philosophie h2.spip,
.philosophie h2.h2 {
	font-size:2rem;
	line-height: 2.2rem;
	font-weight: 600;
	margin-top:4rem;
}

/******		Blockquote		*****/
blockquote {
	border:solid 10px var(--theme-orange);
	padding:1rem 2rem;
}

.texte blockquote{
	margin-top:2rem;
	margin-bottom:2rem;
}

.texte blockquote p:last-child{
	margin-bottom:0;
}

@media screen and (min-width:992px) {
	blockquote {
		padding:3rem;
	}

	.texte blockquote{
		margin:2rem -8rem;
	}
}

ul.spip li {
	margin-bottom:1em;
 }

 .extra ul.spip{
	padding-left:15px;
 }

 table.spip {
	border: solid 5px  var(--theme-jaune);
}

table.spip thead {
	background-color: #101356;
	color: var(--theme-jaune);
	border-bottom: solid 3px  var(--theme-jaune);
}

table.spip tbody tr {
	border-bottom: solid 3px  var(--theme-jaune);
}

/************************* 		PLUGINS		 *************************/

/* PLUGIN Liens vers les réseaux sociaux */
.sociaux .socicon {
	font-size:1.5rem;
	background-color: transparent !important;
	color:var(--theme-vert);
	padding:.3rem;
	border: solid 2px var(--theme-vert);
	border-radius: 0;
}

/* PLUGIN Swiper  */
.swiper-container {
	height:0;
	min-height: 180px !important;
}

.swiper-slide {
	display:flex;
	align-items: center;
	justify-content: center;
}

/* plugin Sommaire */
.nav-sommaire {
	margin-left:0;
	border:none;
}
a.spip_ancre {
	color: var(--theme-jaune);
}

a.spip_ancre::after {
	content: " ⤶";
}

/* PLUGIN Oembed  */

/* toujours effacer la légende de la vidéo */ 
.oembed figcaption.spip_doc_legende {
	display:none;
}

.oembed.oe-video {
	margin-bottom: 1rem;
}

/* Plan du site : surcharge de plan du site dans Composants.css*/

.plan a.secteur__titre {
	font-family: geomanist;
 	color:var(--theme-vert);
}

.plan a.secteur__titre:hover {
	color:var(--theme-bleu-sombre);
}


/* Les boutons d'admin survolent la page (sauf # FORMULAIRE_ADMIN) */
.spip-admin-bloc,
.spip-admin-float { z-index: 10000 !important; top:65px !important; left:0px !important; right:0; !important; left:0;}