/* *** Interface / UI *** */


/* Le menu d'accès rapide */
#accesrapide { position: fixed; z-index: 200; left: 0.5em; opacity: 0; top: 1em; color: #fff; background: #000;
	transform: translateY(-10em); transition: transform var(--duree-transition), opacity var(--duree-transition); }
#accesrapide.actif { opacity: 1; transform: translateY(0em); }
#accesrapide a:hover, #accesrapide a:active, #accesrapide a:focus { background-color: #fff; color: #000;}

/* Le menu principal */
.accueil .logo { margin: auto; width: 150px; height: 150px;}
.accueil a { display: block; text-transform: uppercase; text-decoration: none; }
#navprincipale button.burger { position: fixed; z-index: 1111; top: 0.5rem;  right: 0.5rem; justify-content: center; align-items: center; 
	padding: 0; border: 0; color: var(--couleur-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(--couleur-claire); }
/* Active */
#navprincipale button.burger:active { color: var(--couleur-claire); }
/* Ouvert */
#navprincipale button.burger[aria-expanded="true"] { background: transparent; color: var(--couleur1); }
/* 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 { text-decoration: underline; }
/* 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; }

/* Les grilles */
.grille.articles { text-align: center;}
/* Les formulaires */
.formulaire_spip { margin: 0 auto; max-width: 600px; }
.formulaire_spip label { display: block; }
.formulaire_spip input.text,
.formulaire_spip select,
.formulaire_spip textarea { width: 100%; padding:.25em; border:0; }
.formulaire_spip .bugajaxie { display: none; } /*IE/Win*/
.formulaire_spip input.submit { padding:.1em .5em; border: 0; }
.erreur_message { display: block; padding: .1rem .5rem; background: hsl(356,70%,57%); color: #000; font-size: .875rem; }

/* 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(--couleur-claire); }
.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(--couleur-claire); border: 1px solid var(--couleur-claire); 
	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(--couleur-claire); text-decoration: none; }
.pagination .disabled.tbc  { visibility: inherit; }
.pagination .disabled span.pagination-item-label { background: transparent; border: 0;}

/* Accessibilité 
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 4px solid var(--couleur-sombre); box-shadow: 0 0 0 4px var(--couleur-claire); outline-offset: 4px;}
textarea:focus-visible, select:focus-visible, input:focus-visible { outline: 0; box-shadow: none; outline-offset: 0; }
*/
/* les boutons */
.boutons { margin: 0; }
.boutons.centrer { text-align: center; }
a.bouton, .formulaire_spip input.submit { display: inline-block; padding: 0.25em 1.5em; text-transform: uppercase; font-size: .8125rem; text-decoration: none;
    color: var(--couleur-claire); background: transparent; border: 1px solid ; border-radius: .85rem;
    transition: background-color var(--duree-transition), color var(--duree-transition), border-color var(--duree-transition);}
a.bouton:hover, a.bouton:active , a.bouton:focus, .formulaire_spip input.submit:hover { color: var(--couleur-sombre); background: var(--couleur-claire); border-color: var(--couleur-claire); text-decoration: none;}

/* player oembed */
body .spip_documents .oembed { padding:0; border:0; }
body .oe-play-button button,
body .oe-play-button button::before { margin:0; width:100px; transform:translate(-50%,-50%); border-radius:5%; }
body .oe-play-button button,
body .oembed_audio .oe-play-button button { background: rgba(33, 33, 33, 0.8); transition: background var(--duree-transition); }
body .oe-play-button:hover button, body .oe-play-button button:focus { background: #ee4c32; }
body .oembed_rich .oe-play-button button,
body .oembed_audio .oe-play-button button { transform: translate(0,-50%); }
body .oe-play-button button::before { content:none; display:none; }
body .oe-play-button button::after { border-left-color: #fff; }
body .spip_documents.oembed figcaption.spip_doc_legende { max-width: none; font-size: 0.75em;}

/* divers */
.rond picture { overflow: hidden; border-radius: 50%; }
.invisible, #visuel-accueil figcaption { position:absolute; clip: rect(0, 0, 0, 0); overflow:hidden; margin:0; padding:0; width:1px; height:1px; white-space:nowrap; border: 0; }
.crayon-active { color: var(--couleur-sombre) !important; background: var(--couleur-claire) !important; } /* Edition via les crayon */