/* *** Le lien qui ramène à l'accueil *** */
.accueil a { display: block; }

/* *** La navigation principale *** */
/* Le bouton */
#navprincipale button.burger { position: fixed; z-index: 1111; top: 0.5rem;  right: 0.5rem; display: flex; justify-content: center; align-items: center; 
	padding: 0; border: 0; color: var(--coul-texte); background: transparent; text-decoration: none; cursor: pointer; 
	transition: color var(--duree-transition); }
/* Hover */
#navprincipale button.burger:hover, #navprincipale button.burger[aria-expanded="true"]:hover  { color: var(--coul-emphase); }
/* Active */
#navprincipale button.burger:active { color: var(--coul-emphase); }
/* Ouvert */
#navprincipale button.burger[aria-expanded="true"] { background: transparent; color: var(--coul-fond); }
/* transformer ☰ en × */
#navprincipale button.burger[aria-expanded="true"] path:nth-child(1) { d: path("M4 20L20 4");}
#navprincipale button.burger[aria-expanded="true"] path:nth-child(2) { display: none; }
#navprincipale button.burger[aria-expanded="true"] path:nth-child(3) { d: path("M4 4L20 20");}
/* Menu principal */
#menuprincipal .on > a, #menuprincipal a:hover, #menuprincipal a:focus, #menuprincipal a:active { color: var(--coul-emphase); }
/* La navigation principale, le fil d'Ariane et les menus/listes */
.fildariane { margin-bottom:1rem; font-size: 0.875rem;}
ul.menu-items, ul.liste-items, ul.breadcrumb-items, ul.grille-items { margin-bottom: 0; list-style: none;}
ul.menu-items li.item { padding:0.2em; }
ul.menu-items > li.item, ul.breadcrumb-items > li.item { display:inline-block; }
ul.liste-items a:link, ul.menu-items a:link, ul.breadcrumb-items a:link, ul.grille-items a:link { text-decoration:none; }
ul.liste-items a:link, ul.menu-items a:link, ul.grille-items a:link { display:block; }

/* *** EFFETS *** */
.bordure {  display: inline-block;}
.bordure::after { display: block; content: ''; height: .5rem; width: 75%; max-width: 350px; background: var(--coul-reseau) ; }
.sect4 .bordure::after { background-color: var(--coul-mediation); }
.sect5 .bordure::after { background-color: var(--coul-zoom); }

/* *** LES BOUTONS *** */
.boutons { margin: 0; }
.boutons.voirtout { font-size: .75rem;}
.boutons a.bouton { display: inline-flex !important; align-items: center; padding: 0.25em 1.5em; text-transform: uppercase; font-weight: 500; text-decoration: none;
	color: var(--coul-texte); background: var(--coul-fond); border: 1px solid var(--coul-texte); border-radius: var(--border-radius);
	transition: background-color var(--duree-transition), color var(--duree-transition), border-color var(--duree-transition);}
a.bouton.principal { color: var(--coul-fond); background: var(--coul-texte);}
a.bouton.on, a.bouton:hover, a.bouton:active, a.bouton:focus { color: var(--coul-fond); background: var(--coul-texte); }
a.bouton.principal:hover, a.bouton.principal:active , a.bouton.principal:focus {color: var(--coul-fond); background: var(--coul-emphase); border-color: var(--coul-emphase); text-decoration: none;}
a.bouton:hover svg.chevron, a.bouton:active svg.chevron , a.bouton:focus svg.chevron,
a.bloc-chevron:hover svg.chevron, a.bloc-chevron:active svg.chevron , a.bloc-chevron:focus svg.chevron  { transform: translate3d(.5rem,0,0); }
span.picto { display: inline-flex; justify-content: center; align-items: center; }
span.picto svg { display:block; min-width: 24px; min-height: 24px; 
	transition: fill var(--duree-transition), transform var(--duree-transition); }
a.bloc-picto { display: block; }
.bloc-picto span.picto { width: 38px; height: 30px; color: var(--coul-emphase); border: 1px solid transparent; border-radius: var(--border-radius);
	transition: color var(--duree-transition), background-color var(--duree-transition);}
.bloc-picto span.picto.xl { width: 45px; height: 36px; }
a.bloc-picto:hover span.picto, a.bloc-picto:active span.picto, a.bloc-picto:focus span.picto { background: var(--coul-emphase); color: var(--coul-fond) }
a.bloc-picto:hover svg.chevron, a.bloc-picto:active svg.chevron, a.bloc-picto:focus svg.chevron { transform: translate3d(.2em,0,0); }
/* Les couleurs par mission */
.sect4 .bloc-picto span.picto { color: var(--coul-mediation);}
.sect4 .bloc-picto:hover span.picto, .sect4 .bloc-picto:active span.picto, .sect4 .bloc-picto:focus span.picto { background: var(--coul-mediation); color: var(--coul-fond) }
.sect5 .bloc-picto span.picto { color: var(--coul-zoom);}
.sect5 .bloc-picto:hover span.picto, .sect5 .bloc-picto:active span.picto, .sect5 .bloc-picto:focus span.picto { background: var(--coul-zoom); color: var(--coul-fond) }

/* *** LES FILTRES *** */
.filtres { margin-bottom: var(--marge-l); font-size: 0.75rem; }

/* RWD slide */
.wrapper-rwdslide { overflow-x: auto ; width: 100%; }
.wrapper-rwdslide ul.grille-items { display: flex; justify-content: flex-start; gap: var(--marge-l); }
.wrapper-rwdslide.nb3 li.item { width: calc(100% / 3); min-width: 200px; max-width: 80vw; }

/* SOCIAUX */
#sociaux { margin: var(--marge-l) 0; text-align: center; }

/* *** LA PAGINATION *** */
.pagination { margin-top: var(--marge);}
.pagination .pagination-items { list-style: none; display: flex; flex-direction: row; justify-content: center; font-size: .875rem; }
.pagination .pagination-item { margin: 0em; flex-basis: 4.5%; display: flex; align-items: center; color: var(--coul-emphase); }
.pagination-item.disabled:not(.tbc) { color: transparent; }
.pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto; }
.pagination .pagination-item + .pagination-item { margin-left: .5em }
.pagination .pagination-item-label { display:block; flex-basis: 100%; text-decoration: none; padding: .2rem .5rem; text-align: center; }
.pagination li .pagination-item-label {  background: transparent; color: var(--coul-emphase); border: 1px solid; border-radius: var(--border-radius-s);
	transition: color var(--duree-transition), background var(--duree-transition); }
.pagination ul:not(.pagination_precedent_suivant) li.prev .pagination-item-label,
.pagination ul:not(.pagination_precedent_suivant) 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 { color: #fff; background: var(--coul-emphase); text-decoration: none; }
.pagination .disabled span.pagination-item-label { background: transparent; border: 0;}

/* *** LES FORMULAIRES *** */
.formulaire_spip { margin:1.5em auto; max-width:500px; }
.formulaire_spip legend { font-size:1.2em; }
.formulaire_spip .editer { margin: 0; }
.formulaire_spip label { display: block; margin-right:0.25rem; line-height:1.125em; font-size: 1em; font-weight: normal; }
.formulaire_spip label strong, .formulaire_spip span.obligatoire { font-family:inherit; font-weight:normal; font-style:italic; font-size:0.75em; opacity: 0.6; }
.formulaire_spip input.text, .formulaire_spip textarea { padding:0.5rem; width: 100%; font-size: 0.875em; font-family:inherit; font-size:inherit; transition:background-color var(--duree-transition), color var(--duree-transition); }
.formulaire_spip .petit { font-size: 0.875em; }
.formulaire_spip .submit { cursor:pointer; padding:0.25em 0.75em; height:100%; border:0; background: var(--coul-texte); color:#fff; 
	transition: background-color var(--duree-transition), color var(--duree-transition); }
.formulaire_spip .submit:hover, .formulaire_spip .submit:focus, .formulaire_spip .submit:active  { background: var(--coul-emphase); }
.formulaire_spip .bugajaxie { display: none; } /*IE/Win*/
/* autres */
#formulaire_login .details a { color:#777; font-size:0.8em; text-decoration:none; }
#formulaire_login .choix label { display: inline-block; }
#formulaire_contact label[for="infolettre"] { display: flex; }
#formulaire_contact label[for="infolettre"] p {margin: 0; }
#formulaire_recherche { max-width: 300px; border-radius: var(--border-radius-s); border: 1px solid; overflow: hidden; }
#formulaire_recherche .editer-groupe { display: flex; }
#formulaire_recherche input#recherche { padding-top: 0; padding-bottom: 0 ; border: 0; }
#formulaire_recherche input.submit { line-height: 2rem; }

/* Alignement */
.centrer { text-align: center; }
.droite { text-align: right; }