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

/* *** La navigation principale *** */
svg.logo-texte { fill: var(--color-mer);}

/* Les boutons */
button.buger, button.menu-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none;
	padding: 0; text-transform: uppercase; border: 0; color: var(--coul-texte); text-decoration: none; 
	cursor: pointer; background: transparent;
	transition: border-color var(--duree-transition); }

/* Le bouton burger */
#navprincipale button.burger { position: fixed; z-index: 1111; top: 0.5rem;  right: 0.5rem; display: flex; justify-content: center; align-items: center; 
	border: 0; color: var(--color-txt); background: #fff; text-decoration: none; cursor: pointer; 
	transition: color var(--duree-transition); }
/* Hover */
#navprincipale button.burger:hover, #navprincipale button.burger[aria-expanded="true"]:hover  { color: var(--color-emphase); }
/* Active */
#navprincipale button.burger:active { color: var(--color-emphase); }
/* Ouvert */
#navprincipale button.burger[aria-expanded="true"] { background: transparent; color: var(--color-bg); }
/* 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");}

#menuprincipal a { transition: background-color var(--duree-transition), color var(--duree-transition) ;}
#menuprincipal .on > a, #menuprincipal a:hover, #menuprincipal a:active, #menuprincipal a:focus { background: var(--color-bleu-fonce); color: var(--color-txt);}

/* les sous menus */
#menuprincipal button[aria-expanded="true"] + ul.menu_niv2 { display: block; }
@media (max-width: 900px) {
	#menuprincipal ul.menu_niv2 { text-transform: none; }
}
@media (min-width: 900px) { 
	#menuprincipal li.item { position: relative;}
	#menuprincipal .niv1 { border-bottom: 3px solid transparent; transition: border-color var(--duree-transition); }
	#menuprincipal .on .niv1, #menuprincipal .niv1:hover, #menuprincipal .niv1:active, #menuprincipal .niv1:focus { background: transparent; border-color: var(--color-ciel);}
	#menuprincipal ul.menu_niv2 { display: none; position: absolute; top: 46px; overflow: hidden; padding: var(--margin-s) 0;
		background: var(--color-txt); color: var(--color-bg); border-radius: var(--border-radius); border-top-left-radius:0;}
	#menuprincipal a.niv2 { padding: var(--margin-s) var(--margin) ; }
}

/* La navigation principale, le fil d'Ariane et les menus/listes */
.fildariane { 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; }

/* *** GRAPHISME *** */
svg.ui.wave { position: absolute; z-index: 0; left: 0; bottom: 0; max-width: 55%; fill: var(--color-bleu-fonce); }
svg.ui.bebette { position: absolute; z-index: 0; bottom: 0; left: 0; max-width: 20%; fill: var(--color-bleu-fonce); }
svg#bebette-bas { position: sticky; z-index: -1; }
.vaguelettes { display: flex; justify-content: center; align-items: center; }
.vaguelettes > *:not(svg.ui.vaguelette) { margin-left: var(--margin-l); margin-right: var(--margin-l);}
.vaguelettes svg.ui.vaguelette { width: 200px; fill:none; fill-rule:nonzero; stroke: var(--color-mer); stroke-width:12px }
.vaguelettes svg.ui.vaguelette:last-of-type { transform: rotate3d(0,1,0,-180deg); }
.ombre { box-shadow: 2px 2px 10px 0 #000;}

/* *** LES BOUTONS *** */
.boutons { margin: 0; }
.boutons.centrer { text-align: center; }
.bouton { display: inline-block; padding: 0.25em 1.5em; text-transform: uppercase; font-weight: 500; text-decoration: none;
	color: var(--color-bg); font-size: 0.875rem; background: var(--color-txt); border: 1px solid var(--color-txt); border-radius: var(--border-radius-s);
	transition: background-color var(--duree-transition), color var(--duree-transition), border-color var(--duree-transition);}
a.bouton:hover, a.bouton:active , a.bouton:focus,
a:hover .bouton, a:active .bouton, a:focus .bouton { background: var(--color-emphase); border-color: var(--color-emphase); text-decoration: none;}
.bouton.inverse { color: var(--color-txt); background: var(--color-bg) ;}
.bouton.grand { font-size: 1.125rem;}
a.bouton.inverse:hover, a.bouton.inverse:active , a.bouton.inverse:focus,
a:hover .bouton.inverse, a:active .bouton.inverse, a:focus .bouton.inverse { color: var(--color-bg); border-color: var(--color-emphase); }

/* *** 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: var(--color-emphase); }
.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 {  background: transparent; color: var(--color-emphase); border: 1px solid; 
	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(--color-emphase); text-decoration: none; }
.pagination .disabled.tbc  { visibility: inherit; }
.pagination .disabled span.pagination-item-label { background: transparent; color: #999;}
.pagination a.suivant_precedent { margin: 0 0.5rem; display: inline-block; }
/* *** 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.6em; opacity: 0.6; }
.formulaire_spip input.text, .formulaire_spip textarea { padding:0.5rem; width: 100%; font-size: 0.875rem; font-family:inherit; font-size:inherit; }
.formulaire_spip .petit { font-size: 0.875em; }
.formulaire_spip .submit { cursor:pointer; padding:0.25em 0.75em; height:100%; border:0; background: var(--color-txt); 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(--color-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 #recherche { background: rgba(255,255,255,0.2); color: var(--color-fond); }
#formulaire_recherche input.submit { line-height: 2rem; }

/* Divers */
.rond { border-radius: 50%; overflow: hidden; }