/*
ACCESSIBILITÉ RGAA
Styles pour améliorer l'accessibilité selon les critères RGAA
Ces styles ne s'appliquent que quand .accessibility-mode est présent sur le body
*/

/* ========================================
   ÉLÉMENTS MASQUÉS VISUELLEMENT MAIS ACCESSIBLES AUX LECTEURS D'ÉCRAN
   ======================================== */

.sr-only {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.sr-only-focusable:focus {
   position: static !important;
   width: auto !important;
   height: auto !important;
   padding: 0.5rem !important;
   margin: 0 !important;
   overflow: visible !important;
   clip: auto !important;
   white-space: normal !important;
   background: var(--color-primary) !important;
   color: var(--color-light) !important;
   text-decoration: none !important;
   z-index: 9999 !important;
   border-radius: 4px !important;
}

.skip-link {
   position: absolute;
   top: -40px;
   left: 6px;
   background: var(--color-primary);
   color: var(--color-light);
   padding: 8px 12px;
}