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

/* *** La navigation principale *** */
/* Le bouton */
#menuburger { z-index: 1100; visibility: hidden; opacity: 0; position: fixed; top: 0; right: 0;
	padding-top: 5rem; overflow-y: scroll; width: 100%; height: 100%; text-align: center; background: var(--coul-texte);;
	overscroll-behavior-y: contain; overflow-y: auto;
	transition: opacity 0.35s; }
#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: 1px solid var(--coul-texte); color: var(--coul-fond); background: var(--coul-texte); text-decoration: none; cursor: pointer; 
	transition: color var(--duree-transition), background var(--duree-transition); }
/* Hover */
#navprincipale button.burger:hover, #navprincipale button.burger[aria-expanded="true"]:hover  { color: var(--coul-texte); background: var(--coul-fond); }
/* 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");}
#navprincipale button.burger[aria-expanded="true"] + #menuburger { visibility:visible; opacity: 1; color: var(--coul-fond);}

/* Menu principal */
#menuprincipal { padding-top: var(--marge-l); font-size: 2rem; font-family: var(--font-titre); }
#menuprincipal a { padding: var(--marge); }
#menuprincipal .on > a, #menuprincipal a:hover, #menuprincipal a:focus, #menuprincipal a:active,
#menu_lang strong, #menu_lang a:hover, #menu_lang a:active, #menu_lang a:focus { color: var(--coul-texte); background: var(--coul-fond); }

/* Menu de langue */
#menu_lang { margin-top: var(--marge); font-family: var(--font-contenu); font-size: 1.5rem; line-height: 1.2em; }
#menuprincipal #menu_lang > * { display: inline-block; padding: var(--marge-s); }
#menuprincipal a { margin: var(--marge-s) auto; padding: var(--marge); max-width: 360px; }

/* 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; }


/* *** 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 .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 var(--coul-emphase); 
	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: var(--coul-texte); background: var(--coul-emphase); text-decoration: none; }
.pagination .disabled.tbc  { visibility: inherit; }
.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); }
/* 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 .editer-groupe { display: flex; }
#formulaire_recherche input.submit { line-height: 2rem; }

/* *** LES BOUTONS *** */
.boutons { margin: 0; }
.boutons.centrer { text-align: center; }
a.bouton { display: inline-block; padding: 0.25em 1em; text-decoration: none;
	color: var(--coul-fond); background: var(--coul-texte); border: 1px solid var(--coul-fond); border-radius: .5rem;
	transition: background-color var(--duree-transition), color var(--duree-transition);}
a.bouton:hover, a.bouton:active , a.bouton:focus { background: var(--coul-fond); color: var(--coul-texte); text-decoration: none;}

/* *** DIVERS *** */
.centrer {  text-align: center;}