/*===================*\
#    Accessibilité    #==============================================================================================================================
\*===================*/
.accessibilite{
	--accessibilite-marges:0.5rem;
	--icon-epaisseur:0.2rem;
	--icon-couleur:currentColor;
	position:fixed;
	right:var(--accessibilite-marges);
	top:var(--accessibilite-marges);
	z-index:9;
	transition:0.3s ease-out;
	transition-property:right, top;
}
button.accessibilite-toggle{
	display:block;
	width:calc(2.6rem + 2px*var(--icon-epaisseur));
	height:calc(2.6rem + 2px*var(--icon-epaisseur));
	max-width:none;
	opacity:0.8;
	background:#fff;
	padding:1px;
	border-radius:0;
	transition:none;
	border-radius:50%;
	box-shadow:0 0 0 3px rgba(255,255,255,0.5);
	color:inherit;
}
.accessibilite-toggle svg.atelier-icon-accessibilite{
	--icon-epaisseur:2.7;
	--icon-coins:round;
	--icon-extremites:round;
	border:calc(var(--icon-epaisseur)*0.15px) solid var(--icon-couleur);
	border-radius:50%;
}
.accessibilite-toggle:is(:hover,:focus){background:none;}
.accessibilite-toggle svg *{fill:currentColor;}
.accessibilite-menu{
	position:absolute;
	right:calc(0px - var(--accessibilite-marges));
	top:100%;
	white-space:nowrap;
	background:#fff;
	background-color:var(--couleur-blanc);
	padding:0;
	transform:translateX(100%);
	transition:transform 0.3s ease-out;
}
[aria-expanded="true"] + .accessibilite-menu{
	transform:translateX(0%);
}
.accessibilite-menu-item{
	padding:0.3em 1em;
	display:block;
}
.accessibilite-menu-item:first-child{padding-top:0.6em;}
.accessibilite-menu-item:last-child{padding-bottom:0.6em;}

/* Supprime les animations et transitions quand la préférence reduced motion est activée (un jour ça existera) */
@media(prefers-reduced-motion:reduce){
	*, *::before, *::after{
		animation:none !important;
		transition:none !important;
	}
}
.nomotion *,
.nomotion *::before,
.nomotion *::after{ animation:none !important;
					transition:none !important; }

/* Liseuses */
/* Affichage sur liseuses uniquement :
   Usage : <a class="notexte">Texte accessible</a>
   Alternative dans certains cas : attribut aria-label */
.notexte, .visually-hidden, .screen-reader-response, .sr-only, .screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
/* Masquage sur liseuses uiquement : */
/* Ajouter l'attribut aria-hidden="true", pas de CSS */

/* Liens d'évitement */
.skip-links{
	/* Ne pas utiliser display:none, les logiciels de synthèse vocale ignoreraient ces liens :) */
	margin:0 auto;
	padding:0rem;
	width:100%;
	height:0;
	transition:all 0.3s ease-out;
	transition-property:opacity, padding;
	background:var(--couleur-blanc);
	opacity:0;
	text-align:center;
	list-style:none;
	overflow:hidden;
}
.skip-links.active{
	height:auto;
	padding:1rem;
	opacity:1;
}
.skip-links-li{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	padding:0;
}
.skip-links-a{
	display:block;
	text-decoration:none;
	color:var(--couleur-texte);
	padding:0.3rem 0.5rem;
}

.dyslexie,
.dyslexie *{
	font-family:'OpenDyslexic',sans-serif !important;
	text-transform:none !important;
}

[aria-busy="true"]{ cursor:progress; }
[aria-controls]{ cursor:pointer; }
[aria-disabled="true"], [disabled]{ cursor:not-allowed; }
[aria-hidden="false"][hidden]{ display:initial; }
[aria-hidden="false"][hidden]:not(:focus){
	position:absolute;
	clip:rect(0, 0, 0, 0);
}

/* Affichage du focus */
*:is(:focus,:focus-visible){
	outline:var(--outline);
	outline-offset:var(--outline-offset);
}
*:focus:where(:not(:focus-visible)){ outline:none; }