@font-face {
    font-family: 'maven_pro';
    src: url('../polices/mavenpro-webfont.woff2') format('woff2'),
         url('../polices/mavenpro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url('../polices/sourcesanspro-semibold-webfont.woff2') format('woff2'),
         url('../polices/sourcesanspro-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prolight';
    src: url('../polices/sourcesanspro-light-webfont.woff2') format('woff2'),
         url('../polices/sourcesanspro-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {background:#fff; font-family: "source_sans_prolight", Arial, Helvetica, sans-serif; color: #1d1d1b;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-family: "maven_pro", Arial, Helvetica, sans-serif; line-height:1em; font-weight: 600; }
h1, .h1 {font-size:2.75em;}
h2, .h2 {font-size:1.75em;}
h3, .h3 {font-size:1.5em;}
h4, .h4 {font-size:1.0625em;}

strong { font-weight: normal; font-family:"source_sans_prosemibold", Arial, Helvetica, sans-serif;}
svg { fill:#1d1d1b; }
hr { border-color: #d62324;}
.on a, a:hover, a:active, a:focus { color: #d62324; }

/* largeur des container */
.container { margin:auto; width:950px; max-width: 100%;}
.page_sommaire .container, .page_rubrique .main .liste.container  { width:1200px;}
.rubrique_missions .section.liste .container, .page_rubrique.rubrique_formations #intro .container, 
.page_rubrique #formations, #suivant_precedent.container, .page_fiche-asso .contenu.container,
.page_fiche-mission .contenu.container , .page_fiche-materiel .contenu.container,
.article_formations #inscription { width:600px }
.rubrique_presentation .main .container, .rubrique_presentation .documents_joints, .article_formations #presentation .container,
.article_formations #informations.container, .article_formations aside.container,
#outils_fiches .liste.article { width:500px; }

/* *** L'ENTETE *** */
#header { z-index: 1001; position: sticky; top: 0; width: 100%; background: #fff; box-shadow: 0 3px 8px -5px rgba(50,50,50,.3);
    transition: transform 0.3s;}
#header.cachee {transform: translateY(-100%); overflow: hidden;}
#header .container { display: flex; justify-content: space-between; align-items :flex-end; padding: 1.25em 0.5em; width: 1400px;}
#header .accueil a { display: inline-block; margin-right: 4em; }

/* LA NAVIGATION PRINCIPALE */
#navprincipale input[type="radio"] {display: none;}
#nav a { position: relative; display: block; text-transform: uppercase; }

/* simuler un lien au survol des label */
#navprincipale label.bouton {cursor: pointer; display: block; }
#navprincipale label.bouton svg {stroke: #1d1d1b; transition: stroke 0.2s, stroke-width 0.2s; stroke-width : 6; stroke-miterlimit:8 }
#navprincipale label.bouton svg:hover {stroke: #d62324; stroke-width : 8 }
/* La recherche */
#bloc_recherche { background: #8c8d97; color: #fff; text-align: center;}
.formulaire_recherche {margin: 0; text-align: center;}
.formulaire_recherche label { text-transform: uppercase;}

/* *** L'ACCUEIL *** */
.page_sommaire #content { margin-bottom: 0; }

/* Les contenus centrés */
.section-container { padding: 3em 0; }
.section-content { margin: auto; max-width: 975px; }
/* les titres cartouches */
.page_sommaire h2.cartouche { margin-bottom: 3em; padding: 0.5em 1em; display: inline-block; color: #fff; background: #333e4b; font-size: 1.25em; text-transform: uppercase;}
.page_sommaire h2.cartouche span { font-weight: 400;}

/* entete diapo/actu/agenda */
#entete { background: #dad9dd;}
#entete h2 { margin: 0; padding: 0.5em; font-size: 0.8125em; color: #fff; text-align: center; background: #000; text-transform: uppercase; }
#entete h3 { margin: 0; font-size: 1.0625em;}
#entete ul, #entete figure { margin: 0; }
#entete .container > div { display: flex; background: #fff; }
#entete a { text-decoration: none; }
#entete .lien_rubrique  {background: #000; text-align: center; }
.lien_rubrique a.bouton { margin-top: 0; margin-bottom: 0;  text-transform: none; background: #dad9dd; }
#diapoaccueil .swiper-container  { max-height: 259px;}
#diapoaccueil h3 { margin: 0.5em 0; font-size: 1.875em; }
#diapoaccueil figure { position: relative; margin: 0; }
#diapoaccueil figure { position: relative; margin: 0; }
#diapoaccueil figcaption { position: absolute; padding: 1em; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 50%; height: 100%; color: #fff;
    text-transform: uppercase; background: rgba(0,0,0,0.5); font-family: "source_sans_prosemibold", Arial, Helvetica, sans-serif;}
#diapoaccueil .bouton { margin-left: 0; }
#actus { display: flex; flex-direction: column; width: calc(100% / 3 * 2);}
#actus h2 { background: #d62324; }
#actus ul { flex:1; border-left: 26px solid #000; border-right: 26px solid #000;}
#actus li { flex:1;}
#actus li:first-of-type { border-bottom: 1px solid #000; }
#actus article { display: flex; }
#actus article > * {width:50%;}
#actus article header { display: flex; flex-direction: column; justify-content: center; padding:1em 0.5em 1em 2em; }
#actus article header > div { color: #d62324; font-size: 0.8125em; }
#agenda {flex:1; display: flex; flex-direction: column; justify-content: space-between; text-align: center; color: #fff; background: #ffdea3; }
#agenda > div:not(.lien_rubrique) { margin:auto; max-width: 250px; color: #fff; font-family: "maven_pro", Arial, Helvetica, sans-serif; }
#agenda h2 { background: #fbbc33;}
#agenda ul { padding: 0.5em; }
#agenda ul a { display: block; color: #000; }
#agenda li:not(:last-of-type) { margin-bottom: 1em; }
#agenda li span.date { display: inline-block; margin-bottom: 0.25em; width: 110px; border: 1px solid #000;
    transition: background 0.2s, border-color 0.2s; }
#agenda a:hover span.date { background: #fbbc33; border-color: #fbbc33; }

/* La carte */
#carte { padding: 5em 0; text-align: center; color: #fff; background: #333e4b; }
#carte h2 { font-size: 1em; font-family: "source_sans_prolight", Arial, Helvetica, sans-serif; text-transform: uppercase;}
#carte .acces-rapide {margin-top: 2em; text-transform: uppercase;}

.leaflet-popup-content-wrapper { border-radius: 0; padding: 0; }
.leaflet-container a.leaflet-popup-close-button { color: #fff; }
.leaflet-popup-content { margin: 0; }
.leaflet-popup-content .entry-title { font-size: 1.25em; line-height: 1.25em; display: block; margin: 0; padding: 1em; background: #d62324; text-align: center; color: #fff; }
.leaflet-popup-content .entry-title a { color: #fff; text-decoration: none; }
.leaflet-popup-content .description { padding: 1em; text-align: center;}
.leaflet-popup-content .description a { color: #d62324; }
.leaflet-popup-content .description .texte { margin-bottom: 1em; }
.leaflet-popup-content .description  p { margin: 0; }
.leaflet-popup-content .description  p + p { margin-top: 0.25em	; }

/* Les chiffres */
#chiffres ul { display: flex; justify-content: space-between; margin: auto; padding: 0.5em; max-width: 800px;}
#chiffres li { width: 145px; text-align: center; text-transform: uppercase; font-family:"source_sans_prosemibold", Arial, Helvetica, sans-serif;}
#chiffres svg { margin-bottom: 1em; transition: transform 0.2s; }
#chiffres li:hover svg { transform: scale(1.15);}

/* Les missions */
#missions { background: #ffdea3;}
#missions ul { display: flex; justify-content: space-between; flex-wrap: wrap;  }
#missions li { width: 30%; margin-bottom: 4%; text-align: center; }
#missions a { display: block; overflow: hidden; position: relative; z-index: 0;  height: 100%; text-decoration: none; background: #fff;}
#missions a::before { display: block; content: ''; z-index: -1; background: #333e4b; width: 100%; height: 50%; position: absolute; top: 0;
    transition: height 0.2s; }
#missions a > div { position: relative; margin: 0 auto; padding: 0.5em; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 14em; 
    transition: margin 0.2s; }
#missions h3 { margin: 0; color: #fff; font-size: 1em; text-transform: uppercase; line-height: 1em;}
#missions p { margin: 0; font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 600; line-height: 1em;
    transition: color 0.2s;}
#missions svg { position: absolute; top: 50%; transform: translateY(-50%); padding: 0.25em; fill: #d62324; stroke: #d62324; background: #fff; border-radius: 50%;
    transition: fill 0.2s, stroke 0.2s, background-color 0.2s; }
/* animations des missions */
#missions a:hover::before { height: 100%; }
/* #missions a:hover > div {margin-top: -50%;} */
#missions a:hover p { color: #fff;}
#missions a:hover svg { fill: #fff; stroke: #fff; background: #333e4b; }

/* outils */
.container.outils {position: relative; }
.container.outils .fond { position: absolute; z-index: -1; top: 0; right: 0; width: 900px; height: 100%; }
#outils { padding-bottom: 6em;}
#outils .container { position: relative;}
#outils li a { display: block; margin: 0 20px; padding: 1em 1em; height: 210px; text-decoration: none;  
    border-top: 1px solid rgba(51, 62, 75, 0.1); border-left: 1px solid rgba(51, 62, 75, 0.1); 
    box-shadow: 10px 10px 10px rgba(51, 62, 75, 0.5); background: #fff; }
#outils li a:hover { color: #d62324; }
#outils li:last-of-type a { display: flex; align-items: flex-end; justify-content: flex-end; color: #fff; background: #333e4b; font-size: 1.25em; 
    transition: background 0.2s;}
#outils li:last-of-type a:hover { background: #d62324; }
#outils li h3 { font-size: 1.5em; }
#outils .thematiques { margin-bottom: 0.5em; font-size: 0.8125em; color: #d62324; }
#outils .thematiques li:not(:last-of-type)::after { display: inline-block; content: ', '; }
#outils .navigation { position: absolute; left: 300px; bottom:2.5em; height: 2em; }
#outils .navigation > div { position: relative; display: inline-block; width:5em; height: 100%; background: #d62324; }
#outils .navigation a.bouton { margin-top: 0; margin-bottom: 0; height: 100%; vertical-align: top; line-height: 2em; background: #dad9dd; }
#outils .navigation a.bouton:hover { background: #d62324; }
#outils .navigation svg { vertical-align: text-bottom; }
#outils .swiper-button-prev::after, #outils .swiper-button-next::after {color: #fff; font-size: 1em; }

/* Emploi */
#emploi { text-transform: uppercase; background: #f3f2f4; }
#emploi div.section-content { display: flex; justify-content: space-between; max-width: 800px ; font-family:"source_sans_prosemibold", Arial, Helvetica, sans-serif; }
#emploi div.section-content span:not(.chiffre) { display: block; font-family:"source_sans_prolight", Arial, Helvetica, sans-serif; font-weight: 600; }
#emploi div.section-content > * { width: 30%; }
#emploi ul { display: flex; flex-direction: column; justify-content: center; margin: 0; }
#emploi a.bouton { display: block; background: #dad9dd; color: #d62324; border: 2px solid #d62324; }
#emploi a.bouton:hover { background: #d62324; color: #fff; }

/* *** CONTENU DES AUTRES PAGES *** */

.chapo { font-size: 1.125em; line-height: 1.25em; font-family:"source_sans_prosemibold", Arial, Helvetica, sans-serif; }
.texte { margin-bottom:1.5em; }

/* Contenus connexes */
#connexe { padding-top: 2em ; background: #f3f2f4; }
#connexe .container { width: 1200px; }
#connexe h2 {margin-bottom: 0.5em; }
#connexe h3 { margin: 0; font-size: 1.25em; }

/* les grilles */

/* grille d'article */
.liste.articles .grille h3 {margin: 0; color: #333e4b;}
.liste.articles .grille li .vignette_article { background: #333e4b;}
.liste.articles .grille li:nth-of-type(3n+2) h3 { color: #d62324;}
.liste.articles .grille li:nth-of-type(3n+2) .vignette_article { background: #d62324;}
.liste.articles .grille li:nth-of-type(3n+3) h3 { color: #fbbc33;}
.liste.articles .grille li:nth-of-type(3n+3) .vignette_article { background: #fbbc33;}
.liste.articles .grille img { background: #333e4b;  opacity: 0.7; transition: opacity 0.2s; }
.liste.articles .grille a:hover { color: #fff;}
.liste.articles .grille a:hover img {  opacity:1;}
.liste.articles .grille figure {margin: 0;}
.liste.articles .grille figcaption { padding: 0 0.5em;}

/* *** RUBRIQUE *** */
#visuel-entete { position: relative; height: 260px; }
#cartouche_secteur, #cartouche_rubrique {position: absolute; bottom: 0; padding: 0.25em 1em; text-transform: uppercase; line-height: 1em;
    letter-spacing: 0.1em; font-size: 1.125em; color:#fff; background: #d62324; font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 600; }
#cartouche_secteur { margin-left: -180px; width: 180px; text-align: center; background: #333e4b;}
#cartouche_rubrique { margin: 0;  background: #d62324; }

/* les filtres par mot-clefs */
.page_rubrique:not(.rubrique_actualites) nav.filtres { margin: 0 2em 2em 2em; padding: 0.25em; text-align: center; border: 1px solid #4b525f; }
.page_rubrique:not(.rubrique_actualites) nav.filtres a { position: relative; }
.page_rubrique:not(.rubrique_actualites) nav.filtres a.on { color: #d62324; }
.page_rubrique:not(.rubrique_actualites) nav.filtres > div { display: flex; justify-content: center; margin: 0.5em 0; }
.page_rubrique:not(.rubrique_actualites) nav.filtres li:not(:last-of-type) a { margin-right: 0.4em; padding-right: 0.5em; border-right: 1px solid #1d1d1b;}
.page_rubrique:not(.rubrique_actualites) nav.filtres .titre { font-family: 'maven_pro', Arial, Helvetica, sans-serif; font-weight: 600;}

/* Rub actus */
.rubrique_actualites .wrapper { display: flex; justify-content: space-between; align-items: flex-start; }
.rubrique_actualites nav.filtres { position: sticky; top: 6.5em; width: 20%; padding: 0.5em; background: #f3f2f4;
    font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 400;}
.rubrique_actualites .main { position: relative; width: 75%; border-top: 20px solid #d62324; }
.rubrique_actualites .main::before, .rubrique_actualites .main::after { position: absolute; top:0; left:0; display: block; content: ''; 
    width: 20px; height: 20px; background: #d62324; }
.rubrique_actualites .main::after { left:auto; right: 0; }
.rubrique_actualites .liste.actualites .liste-items { margin: 20px; }
.rubrique_actualites .liste.actualites .items a:hover { color: inherit;}
.rubrique_actualites .liste.actualites .item { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #8c8d97; }
.rubrique_actualites .liste.actualites .liste-items a:link { display: flex; justify-content: space-between; }
.rubrique_actualites .liste.actualites .resume_article { margin-right: 2em; padding-left: 1.5em; flex: 1; }
.rubrique_actualites .liste.actualites .vignette_article { width: 191px; }
.composition_actualites .date_article {margin: 0; color: #d62324; font-family: "maven_pro", Arial, Helvetica, sans-serif; }
.rubrique_actualites .liste.actualites h2 { margin-bottom: 0.5em; font-size: 1.5em; font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 600; 
    transition: color 0.2s;}
.rubrique_actualites .liste.actualites a:hover h2 { color: #d62324;}
.rubrique_actualites .liste.actualites a:hover .bouton { background: #d62324; color: #fff;}
.rubrique_actualites .liste.actualites .introduction p { margin-bottom: 0.5em;}
.rubrique_actualites .liste.actualites .bouton { margin: 0; background: #dad9dd; }
.rubrique_actualites .liste.actualites svg { fill: #8c8d97; }
.rubrique_actualites .liste.actualites a:hover svg { fill: #000; }

/* Rub présentation */
.rubrique_presentation .main { position: relative; }
.rubrique_presentation .bordure { margin: 2.5em auto; }
.rubrique_presentation li:not(:last-of-type) .bordure {border-bottom: 1px solid #333e4b; }
.rubrique_presentation .main .texte { margin-bottom: 0; }
.rubrique_presentation .main h2 { color: #d62324; text-transform: uppercase; font-size: 2.5em; font-weight: 400; }
.rubrique_presentation .soustitre { position: sticky; z-index: 10; top: 0; height: 0;}
.rubrique_presentation .soustitre > div { margin-left: -175px; padding: 0.25em; width:150px; text-align: center; line-height: 1.2em; font-size: 1.25em; color: #fff; background: #333e4b; }
.rubrique_presentation .documents_joints { margin: auto; }
.rubrique_presentation .partenaires { margin: auto; max-width: 650px; text-align: center; }
.rubrique_presentation .partenaires li { margin: 0.5em; }

/* Rub missions */
.page_rubrique h1 span { background: #333e4b; }

.section.liste li { overflow: clip; margin: 0; padding: 3em 0; color: #fff; }
/* Les fonds de couleur par mission qu'on retrouve sur la section du secteur et l'intro de la sous-rubrique */
.section.liste li, .sect_missions #intro, .sect_missions #fildariane { background: #8c8d97; }
.section.liste li:nth-of-type(2), .sect_missions.rub_5 #intro, .sect_missions.rub_5 #fildariane { background: #797c87; }
.section.liste li:nth-of-type(3), .sect_missions.rub_6 #intro, .composition_formations #fildariane  { background: #676c78; }
.section.liste li:nth-of-type(4), .sect_missions.rub_10 #intro, .sect_missions.rub_10 #fildariane  { background: #555c68; }
.section.liste li:nth-of-type(5), .sect_missions.rub_18 #intro, .sect_missions.rub_18 #fildariane  { background: #444d59; }
.section.liste li:nth-of-type(6), .sect_missions.rub_19 #intro, .sect_missions.rub_19 #fildariane  { background: #333e4b; }
/* Le couleurs utilisables si ajout de rubriques : (attention, en dessous de 50%, on n'est pas dans les clous niveau accessibilités / contrastes)
100% (la dernière) - 333e4b / 85% - 4b525f / 75% - 5c616d / 60% - 787a85 / 50% - 8c8d97 / 40% - a1a1a9 / 30% - b7b6bd */
/* Donc on fait de 100% à 50% en 6 étapes => #333e4b,#444d59,#555c68,#676c78,#797c87,#8c8d97 thx to https://gka.github.io/palettes/ */
.section.liste article { position: relative;}
.section.liste h2 {font-size: 2.5em; text-transform: uppercase; font-weight: 200;}
.section.liste h2 small { text-transform: none; }
.rubrique_missions .picto_mission { position: sticky; top: 2em; height: 0; }
.rubrique_missions .picto_mission  svg { margin-left: -100px; fill: #d62324; }

.section.liste .bouton {margin: 0; display: inline-block; }

/* Sous-rub missions */
.sect_missions #intro { padding-top: 2em ; padding-bottom: 2em ; background: #787a85; color: #fff; }
.sect_missions #intro .texte { margin-bottom: 0; }
.sect_missions #intro p:last-of-type { margin-bottom: 0; }
.sect_missions .main .liste.container { margin-top: 2em;  margin-bottom: 2em;}

/* *** Rub Formations *** */
.rubrique_formations #formations { margin-top: 0; margin-bottom: 0; padding-top: 5em; padding-bottom: 5em; background: #f3f2f4; }
.rubrique_formations #formations h2 { position: absolute; top: 0; left: -10.5rem; width: 10rem; padding: 0.5em ; 
    text-align: center; background: #333e4b; color: #fff; text-transform: uppercase; 
    font-size: 1.125em; font-family: "source_sans_prolight", Arial, Helvetica, sans-serif; }
.rubrique_formations #formations h3 { margin: 0; font-size:1em; font-family:"source_sans_prosemibold", Arial, Helvetica, sans-serif; font-weight:normal;
    transition: color 0.2s;} 
.rubrique_formations #formations li.thematique a {color: #1d1d1b; }
.rubrique_formations #formations li.thematique a:hover {color: #d62324; }
.rubrique_formations #formations li.thematique { position: relative;}
.rubrique_formations #formations li.thematique:not(:last-of-type) {margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #4b525f; }
.rubrique_formations #formations li.thematique .liste-items { margin-left: 1.5em; list-style:disc ; color: #d62324; }
.rubrique_formations #formations li.thematique .item { margin-bottom: 0.5em; }

/* Rub annuaire*/
/* Les onglets inspired from bootstrap */
.tabs { margin: 0 0 1em; padding: 0; list-style: none; zoom: 1; text-transform: uppercase; font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 600;}
.tabs:before,
.tabs:after { display: table; content: ""; zoom: 1; }
.tabs:after { clear: both }
.tabs > .item { float: left }
.tabs > .item > a { display: block; text-decoration: none; }
.tabs { border-color: #ddd; border-style: solid; border-width: 0 0 1px; }
.tabs > .item { position: relative; margin-bottom: -1px; }
.tabs > .item > a { padding: 0 1em; margin-right: 2px; line-height: 2.25; color: #666; border: 1px solid transparent; border-radius: 4px 4px 0 0; }
.tabs > .item > a:hover { text-decoration: none; background-color: #eee; border-color: #eee #eee #ddd; }
.tabs .on > a { font-weight: 600;}
.tabs .on > a,
.tabs .on > a:hover { color: #1b1b1b; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; }
@media (max-width: 640px) {
	.tabs { border-width: 1px; border-radius: 4px; }
	.tabs > .item { float: none; }
	.tabs > .item > a,
	.tabs > .item > a:hover,
	.tabs > .on > a,
	.tabs > .on > a:hover { margin: 0; border: 0; border-radius: 0; }
	.tabs > .on > a,
	.tabs > .on > a:hover { background: #eee; }
}
.article_annuaire .filtres { margin-bottom: 1em;}
.article_annuaire .filtres form { display: inline-block;}
.liste-objets .table thead { text-align: left; font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 600;}
.liste-objets .table .titre a { color: #d62324; text-decoration: none; font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 600;}
/* Rub agenda */
.article_agenda h1#cartouche_rubrique { color: #d62324; background: #fbbc33;}
.liste-items.agenda { margin-bottom: 1.5em; }
.liste-items.agenda .logo { margin-bottom: 0.75rem; text-align: center; mix-blend-mode: luminosity; }
.liste-items.agenda h3 { font-size: 1.25em; margin-bottom: 0.5rem; color: #d62324;}
.liste-items.agenda .date { font-weight: bold; margin-bottom: 0; }
.liste-items.agenda .asso { font-style: italic; color: #666; }
.liste-items.agenda a:hover .bouton { background: #d62324; color: #fff;}
.liste-items.agenda .bouton { margin: 0; background: #dad9dd; }
.liste-items.agenda svg { fill: #8c8d97; }
.liste-items.agenda a:hover svg { fill: #000; }

/* Rub outils */
.rubrique_outils #dernieres_fiches { margin-bottom: 3em; padding: 1em 0; background: #333e4b; color: #fff; }
.rubrique_outils #dernieres_fiches li:nth-of-type(1) h3 { color: #fff; }
.rubrique_outils #liste { margin-bottom: 3em; }
.rubrique_outils #liste ul { list-style: disc; color: #d62324; }
.rubrique_outils #liste a { color: #333e4b; text-decoration: none; }
.rubrique_outils #liste a:hover { color: #d62324;  }
.rubrique_outils #liste .nb_fiches { color: #d62324; text-transform: uppercase; font-family: "maven_pro", Arial, Helvetica, sans-serif; font-weight: 600; }

/* *** ARTICLE *** */
.page_article h1 { font-weight: 400;  }
.metas_article { padding: 0.5em 0;}

/* Art formations */
.article_formations header.cartouche { padding:1.5em 0; }
.article_formations header.cartouche, .article_formations #presentation { background: #4b525f; }
.article_formations h1 { margin: 0 ; color: #fff; }
.article_formations .metas_article { float: right; }
.article_formations .formation_non_programmee { margin-bottom: 0.5em; padding: 0.25em; background: #d62324; color: #fff; text-align: center;
    line-height: 1.2em; font-size: 1.25em; }
.article_formations #presentation { padding-top: 2em; color: #fff; }
.article_formations #presentation h2 { background: #fff; color: #4b525f; }
.article_formations #presentation .texte { margin-bottom: 0;  }
.article_formations #informations  { padding-top: 2em; padding-bottom: 2em; background: #f3f2f4; }
.article_formations #informations .bouton  { display: block; text-align: center; color: #fff; background: #d62324; }
.article_formations #informations .bouton:hover  { background: #333e4b; }
.article_formations .main .texte { position: relative; padding: 0 1em;}
.article_formations .main ul.spip, .article_formations .main ol.spip { margin-left: 15px; }
.article_formations .main .titre { position: absolute; top: 0; height: 0; }
.article_formations .main .titre h2 { margin-left: calc( -175px - 1.25em) ; padding: 0.25em; width: 175px; text-align: center;
    font-family:"source_sans_prolight", Arial, Helvetica, sans-serif; line-height: 1.2em; font-size: 1.25em; color: #fff; background: #4b525f; }
.article_formations article aside { background: #dad9dd; }
.article_formations article aside .documents_portfolio, .article_formations article aside .documents_joints { padding: 2em 0; }
.article_formations #mentions_legales { margin-top: 1em; font-size: 0.875em; text-align: center; color: #787a85; }
/* Formulaire d'inscription aux formation */
.article_formations #inscription {margin-top: 2em;}
.article_formations #inscription .bouton { margin-left: 0; color: #fff; background: #d62324;}
.article_formations #inscription .bouton:hover { background: #333e4b;}
.article_formations #inscription .bouton svg { fill: #fff; }

/* Art outils */
.article_outils h1 { margin-bottom: 0.1em; }
.article_outils .metas_article { margin-bottom: 2em; }
.article_outils .thematiques { display: inline-block; }
.article_outils .thematiques a { display: block; padding: 0.2em 0.75em; background: #333e4b; color: #fff;
    transition: background-color 0.2s; }
.article_outils .thematiques a:hover { background: #d62324; }
.article_outils .version_pdf { padding: 0.2em 0.75em; font-size: inherit; }

#suivant_precedent { margin-bottom: 4em; line-height: 1.25em;}
#suivant_precedent ul { display: flex; font-family: "maven_pro", Arial, Helvetica, sans-serif; text-transform: uppercase; }
#suivant_precedent ul li {width: 50%;}
#suivant_precedent ul li:last-of-type { text-align: right;}

#suivant_precedent a { position:relative; display: flex; align-items: center; padding: 0.75em 0.5em 0.75em 2em; height: 100%; 
     background: #d62324; color: #fff; }
#suivant_precedent a:hover, #suivant_precedent a:active, #suivant_precedent a:focus { color:#000 }
#suivant_precedent li:last-of-type a { padding-left: 0.5em; padding-right: 2em; }

/* les flèches en before/after */
#suivant_precedent a::before, #suivant_precedent a::after { display:block; position:absolute; top:0; left:0.25em; content:'';
    height:50%; border-left:1px solid #fff; transition:all 0.2s}
#suivant_precedent a::before {transform-origin:bottom left; transform:rotate(30deg)}
#suivant_precedent a::after {top:auto; bottom:0; transform-origin:top left; transform:rotate(-30deg)}
#suivant_precedent li:last-of-type a::before, #suivant_precedent li:last-of-type a::after {left:auto; right:0.25em;}
#suivant_precedent li:last-of-type a::before{transform-origin:bottom right; transform:rotate(-30deg)}
#suivant_precedent li:last-of-type a::after{transform-origin:top right; transform:rotate(30deg)}

/* animation des flèches en before/after (ouais, 800 caractères rien que pour ça mais tavu, ça claque !) */
#suivant_precedent a:hover::before, #suivant_precedent a:hover::after,
#suivant_precedent a:focus::before, #suivant_precedent a:focus::after,
#suivant_precedent a:active::before, #suivant_precedent a:active::after { border-color:#d62324 }
#suivant_precedent a:hover::before, #suivant_precedent a:hover::after,
#suivant_precedent a:focus::before, #suivant_precedent a:focus::after,
#suivant_precedent a:active::before, #suivant_precedent a:active::after { left: -2em; }
#suivant_precedent li:last-of-type a:hover::before, #suivant_precedent li:last-of-type a:hover::after,
#suivant_precedent li:last-of-type a:focus::before, #suivant_precedent li:last-of-type a:focus::after,
#suivant_precedent li:last-of-type a:active::before, #suivant_precedent li:last-of-type a:active::after { right: -2em; }

/* pas de flèches sur les liens de retour rubrique */
#suivant_precedent a.retour { background: #000; }
#suivant_precedent a.retour:hover { color: #d62324; }
#suivant_precedent a.retour::before, #suivant_precedent a.retour::after {display: none;}

/* *** PORTFOLIO / DOCUMENTS JOINTS *** */
.documents_portfolio { margin-bottom: 2em; }

/* Newsletter */
#newsletter { background: #d62324; color: #fff; }
#newsletter h2 { font-size: 1.125em; text-transform: uppercase; }
#newsletter h2 span { font-weight: 400; }
#newsletter .section-content { max-width: 400px; }
.formulaire_newsletter { padding: 0;}
.texte .formulaire_newsletter { margin-bottom: 1.5em;}
#newsletter .formulaire_newsletter .editer > label { color: #fff; font-weight: normal;}
.formulaire_newsletter input.submit { background: transparent;  }
#newsletter .formulaire_newsletter input.submit { border: 1px solid #fff; }
.formulaire_newsletter input.submit:hover { background: #fff; color: #d62324; }
#newsletter input.text { background: #fff; border: 0;}
#newsletter input.submit { color: #fff;}
#newsletter input.submit:hover { color: #d62324;}

/* Fiches asso/mission/matériel */
#content .spip_logo_center { text-align: center; }
.page_fiche-asso #content h1, .page_fiche-materiel #content h1, .page_fiche-mission #content h1 {text-align: center; color: #d62324;}
.page_fiche-asso #content h2, .page_fiche-materiel #content h2, .page_fiche-mission #content h2 {color: #d62324;}
.page_fiche-asso .publication { text-align: center; color: #5c616d;}
.page_fiche-asso .agenda li { margin-bottom: 1.5em;}
.page_fiche-asso .agenda li a { display: flex; align-items: flex-start;}
.page_fiche-asso .agenda .infos_evenement { flex: 1; margin-left: 1.5em;}
table.spip.details td.label {font-family: "source_sans_prosemibold", Arial, Helvetica, sans-serif;}

/* Fiche evenement */
.page_fiche-evenement h1  { margin-bottom: 0.25em; color: #d62324; text-transform: uppercase;}
.page_fiche-evenement .wrapper { display: flex; justify-content: space-between; align-content: flex-start; flex-direction: row-reverse; margin-bottom: 2em;}
.page_fiche-evenement #logo_evenement {width: 250px;}
.page_fiche-evenement #logo_evenement svg { fill: #8c8d97;}
.page_fiche-evenement header.cartouche { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #5c616d ;}
.page_fiche-evenement .contenu {width: 65%;}

/* *** Les autres pages *** */
.page_404 #content, .page_404 #missions {margin-top: 4em;}

/* *** PIED DE PAGE *** */
#footer { padding: 3em 0; background: #dad9dd; font-size: 0.8125em; font-family: "source_sans_prosemibold", Arial, Helvetica, sans-serif;}
#footer h2 { font-size: 0.8125em; }
#footer nav { text-transform: uppercase; }
#footer nav a:hover { text-decoration: underline; }
#footer .container {  width: 800px; }
#footer .container > div { display: flex; justify-content: space-between; margin-top: 1em;}
#footer .container > .logos { flex-wrap: wrap; justify-content: left; align-items: center; gap: 2em; margin-top: 0; }
#footer .organization__nom, #footer .sep { display: none; }
#footer .organization__tel, #footer .organization__mel, #footer .item__sub { display: block; }
#footer #sociaux { margin-bottom: 1.5em; }
#footer #sociaux svg { fill: #8c8d97; }
#footer #sociaux li, #footer #partenaires li { margin:0 1em 1em 0; }
#footer #partenaires { max-width: 350px; }

/* *** COMMUNS *** */
/* Fil d'ariane */
#fildariane { font-size: 0.875em;}
#fildariane, #fildariane a { color: #8c8d97; }
#fildariane strong { font-family: inherit; }
.sect_missions #fildariane, .composition_formations #fildariane { margin-bottom: 0; color: #fff;}
.sect_missions #fildariane a, .composition_formations #fildariane a {color: #fff;}

/* Les chiffres */
span.chiffre {display: block; color: #d62324; font-size: 3.25em; line-height: 1em;}

/* Les boutons avec puce */
div.bouton, a.bouton { display: inline-block; margin: 0.5em;  padding: 0.25em 0.5em;
    text-transform: uppercase; color: #000; font-size: 0.8125em; text-decoration: none; background: #fff; 
    text-align: center; transition: background-color 0.2s, color 0.2s;}
:where(.chapo, .texte) a.bouton { background: #dad9dd; }
div.bouton:hover, a.bouton:hover, a.bouton:active, a.bouton:focus { background-color: #d62324; color: #fff; text-decoration: none; }
.bouton svg { vertical-align: text-bottom; fill: #8c8d97; }
.bouton:hover svg { fill: #000 }


/* Bouton version PDF */
a.version_pdf { margin: 0; text-transform: none; border: 1px solid #333e4b; }
a.version_pdf svg, a.version_pdf:hover svg { fill:none; }

/* diaporama */
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #8c8d97;}
.swiper-button-prev, .swiper-button-next {color: #d62324; text-shadow: 0 0 5px rgba(51, 62, 75, 0.5);}

/* la pagination */
.pagination .pagination-items {list-style: none; display: flex; flex-direction: row; justify-content: center; }
.pagination .pagination-item { margin: 0em; flex-basis: 7.5%; display: flex;align-items: center; color: #000;}
.pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
.pagination .pagination-item + .pagination-item { margin-left: 0.5em }
.pagination .pagination-item-label { display:block; flex-basis: 100%; text-decoration: none; padding:.5em; text-align: center;}
.pagination li .pagination-item-label {color: #fff; background: #000;
	transition: background 0.2s;}
.pagination li.prev .pagination-item-label,
.pagination li.next .pagination-item-label {color: inherit; background: inherit; border: inherit;}
.pagination span.pagination-item-label.on,
.pagination a.pagination-item-label:hover,
.pagination a.pagination-item-label:focus,
.pagination a.pagination-item-label:active { background: #d62324;text-decoration: none; }

/* Divers */
.aucun-resultat { margin: 1.5em 0;}
.info { padding: 0.2em; background: #ec681c; color: #fff; text-align: center; }
.info a { color: inherit;}

/* Le Menu */
@media screen and (min-width: 1200px) {

    #navprincipale label.bouton.navigation {display: none;}

    #nav li.item.recherche label { width: 25px; height: 25px; text-align: center; border: 1px solid #8c8d97; border-radius: 50%;
        transition: border-color 0.2s;}
    #nav li.item.recherche label:hover { border-color: #d62324;}
    #nav li.item.recherche svg { vertical-align: middle; stroke: #8c8d97;
        transition: stroke 0.2s;}
    #nav li.item.recherche label:hover svg { stroke: #d62324;}
    #nav a {padding: 0 1.25em; font-size: 0.94em; }
   /* les animations du menu principal */
    #nav a::before { display: inline-block; position: absolute; left: 0; top: 50%; content: ""; border-left: 1px solid #1d1d1b; height: 1em;
        transition: border-color 0.2s, transform 0.2s; transform-origin: 50% right; transform: translateY(-50%); }
    #nav .on a::before, #nav a:hover::before, #nav a:active::before, #nav a:focus::before { transform: rotate(90deg) translateY(-50%); border-color: #d62324; }
    /* Annimation de la recherche */
    #bloc_recherche { position: absolute; display: flex; justify-content: center; top:0; left:0; margin-top: -5.75em; width: 100%; height: 100%;  
        transition: margin 0.2s ease-in-out;}
    #bloc_recherche label.bouton { position: absolute; right:1em; top : 0; height: 100%;}
    #bloc_recherche label.bouton svg { stroke: #fff; height: 100%;}

    #afficher_recherche:checked ~ #bloc_recherche { margin-top: 0; }
    .formulaire_recherche label { display: inline;}
    #formulaire_recherche input.text, #recherche_annuaire input.text { width: 400px; }
}

@media screen and (max-width: 1199px) {
    #afficher_navigation { position: fixed; right: 0.75rem; top : 0.75rem; }
    #fermer_navigation { margin-bottom: 1em; }
    #nav { position: fixed; top: 0; right: 0; margin-right: -100%; padding: 0.75rem 0 0 0; overflow-y: scroll;  
        width: 100%; height: 100%; text-align: right; background: #333e4b; box-shadow: -8px 0 10px 1px rgba(0,0,0,0.06);
        transition: margin-right 0.5s; max-width: 300px;}
    #nav ul.menu-items {margin: 1em 0;}
    #nav ul.menu-items li.item { display: block; padding: 0; }
    #nav ul.menu-items li.item.recherche { display: none; }
    #nav a { margin-bottom: 0.5em; padding: 0.5em 0.75rem 0.25em 0; color: #fff; border-bottom: 1px solid #fff;
        transition: color 0.2s, border-color 0.2s;}
    #nav .on a, #nav a:hover {color: #d62324; border-color: #d62324; }
    #nav label.bouton svg { stroke: #fff;}

    #bloc_recherche { padding: 1em 0; }
    #formulaire_recherche input.text { width: 90%; }

    /* Si le radio button afficher_navigation est coché */
    #afficher_navigation:checked ~ #nav { display: block; margin-right: 0; }
    #bloc_recherche label.bouton {display: none;}

    #visuel-entete > .container { position: absolute; display: flex; align-items: flex-start; flex-direction: column; bottom: 0; padding: 0;}
    #cartouche_secteur, #cartouche_rubrique { position: relative; margin: 0; padding: 0.25em 0.5em; width: auto; text-align: left; font-size: 1em; }

}

@media (max-width: 1000px) {

    #outils li a { height: 150px; }

    .rubrique_actualites .wrapper {display: block;}
    .rubrique_actualites nav.filtres { position: relative; top: 0; margin-bottom: 1em; width: auto; text-align: center; }
    .rubrique_actualites nav.filtres li { display: inline-block; position: relative; }
    .rubrique_actualites nav.filtres a { padding: 0 0.5em; }

    .rubrique_actualites .main { margin: auto; width: auto; max-width: 700px; }
    .rubrique_actualites .main::before, .rubrique_actualites .main::after { display: none;}
    .rubrique_actualites .liste.actualites .liste-items { margin-left: 0; margin-right: 0; }
    .rubrique_actualites .liste.actualites .resume_article { padding: 0; }

    .rubrique_presentation .main h2 {margin-bottom: 0.25em;}

    /* Les cartouches qui débordent dans présentation et formations */
    .rubrique_presentation .soustitre, .article_formations .main .titre {margin-bottom: 1.5em; height: auto; }
    .article_formations .main .titre {position: relative;}
    .rubrique_presentation .soustitre > div, .article_formations .main .titre h2 { margin: 0; display: inline-block; width: auto; text-align: left;}

    .rubrique_missions .picto_mission { position: relative ; top: auto; height: auto;}
    .rubrique_missions .picto_mission svg { margin: 0 auto 1em auto ; width: 50px;}

    .rubrique_formations #formations h2 { position: relative; display: inline-block; top: auto; left: auto; width: auto; }
}


@media (max-width: 768px) {
    #diapoaccueil h3 { font-size: 1.5em; }
    #actus {width: 50%;}
    #actus ul { display: flex ; flex-direction: column; border: 0;}
    #actus article header {width: 100%;}
    #actus figure {display: none;}
    span.chiffre { font-size: 2.5em;}
    #missions div.section-content, #emploi div.section-content, #footer .container, #newsletter .section-content { padding: 0 0.5em;}
    #missions ul { margin: auto; max-width: 450px; }
    #missions li { margin-bottom: 2%; width: 49%; }
    #outils .navigation { left: 0;}
    .page_fiche-evenement .wrapper { display: block;}
    .page_fiche-evenement .contenu { margin-bottom: 2em; width: auto;}
    .page_fiche-evenement #logo_evenement { margin: auto;}
    .page_fiche-evenement #logo_evenement svg { display: none;}
}

@media (max-width: 600px) {

    h1, .h1 { font-size: 2.5em; }

    #header .accueil > svg { display: none; }

    #entete .container > div { display: block;}
    #diapoaccueil .swiper-container { max-height: none; }
    #diapoaccueil h3 { font-size: 1.25em; }
    #diapoaccueil figcaption {position: relative; display: block; width: auto; height: auto;}
    #actus, #actus article, #agenda { display: block; width: auto; }
    #actus article header { display: block; padding: 1em 0.5em;}
    #carte {padding-top: 2em; padding-bottom: 2em;}
    #carte .acces-rapide span { display: block;}

    #visuel-entete {height: 180px;}   

    .rubrique_actualites .liste.actualites .resume_article { flex:1;}

    .liste.articles .grille h3 {font-size: 1.125em;}

    #suivant_precedent {font-size: 0.8125em;}
    #suivant_precedent a:hover::before, #suivant_precedent a:hover::after,
    #suivant_precedent a:focus::before, #suivant_precedent a:focus::after,
    #suivant_precedent a:active::before, #suivant_precedent a:active::after { border-color:#000 }
    #suivant_precedent a:hover::before, #suivant_precedent a:hover::after,
    #suivant_precedent a:focus::before, #suivant_precedent a:focus::after,
    #suivant_precedent a:active::before, #suivant_precedent a:active::after { left: 0; }
    #suivant_precedent li:last-of-type a:hover::before, #suivant_precedent li:last-of-type a:hover::after,
    #suivant_precedent li:last-of-type a:focus::before, #suivant_precedent li:last-of-type a:focus::after,
    #suivant_precedent li:last-of-type a:active::before, #suivant_precedent li:last-of-type a:active::after { right: 0; }
    
    #footer {text-align: center;}
    #footer .container > div {display: block;}
    #footer .container > div > * { margin-bottom: 1em;}

}

@media (max-width: 400px) {
    h1, .h1 { font-size: 2.25em; }

    #diapoaccueil figcaption { padding: 1em 2.5em; }
    #diapoaccueil figcaption h3 { margin: 0; font-size: 1.125em; }
    #chiffres ul { flex-wrap: wrap;}
    #chiffres li:last-of-type {width: 100%;}
    #chiffres svg {display: none;}
    #missions a > div { height: auto;}
    #missions svg { position: relative; transform: none; margin: 1em auto;}
    #emploi div.section-content { flex-wrap: wrap; justify-content: space-around; text-align: center; }
    #emploi div.section-content ul { width: 100%; }

    .rubrique_actualites .liste.actualites a { flex-direction: column-reverse;}
    .rubrique_actualites .liste.actualites .resume_article {margin: 0;}
    .rubrique_actualites .liste.actualites .vignette_article { margin: auto; }
    .rubrique_missions .section.liste h2 {font-size: 1.75em;}

    #cartouche_secteur, #cartouche_rubrique { font-size: 0.875em; }

}