/*==================================================================
   SKIP-LINK.CSS
   Auteur   : Renaud
   Création : 26 octobre 2025
   Dernière modification : 15 novembre 2025
   Description :
     Ce petit utilitaire masque le lien « Passer au contenu » hors‑de‑l’écran
     et le rend visible uniquement lorsqu’il reçoit le focus (ou est activé
     via le clavier). Il améliore l’expérience des utilisateurs de lecteurs
     d’écran et respecte les exigences WCAG 2.1 AA pour la navigation au
     clavier.
===================================================================*/

/* -----------------------------------------------------------------
   État masqué (par défaut)
   Le lien est placé hors du viewport, réduit à 1 px×1 px et placé
   derrière les autres éléments grâce à un z‑index négatif.
----------------------------------------------------------------- */
.skip-link {
    position: absolute;      /* sort du flux normal */
    left: -9999px;           /* hors‑de‑l’écran horizontalement */
    top: -9999px;            /* hors‑de‑l’écran verticalement */
    width: 1px;              /* zone de clic minimale */
    height: 1px;
    overflow: hidden;        /* masque tout débordement */
    z-index: -1;             /* reste sous les éléments interactifs */
}

/* -----------------------------------------------------------------
   État focus (ou activation clavier)
   Dès que le lien reçoit le focus, il devient visible, lisible et
   suffisamment grand pour être cliqué/touché. Le contraste élevé
   (fond blanc / texte noir) satisfait le ratio ≥ 4.5 :1.
----------------------------------------------------------------- */
.skip-link:focus {
    left: 0;                 /* repositionnement dans le viewport */
    top: 0;
    width: auto;             /* reprend sa taille naturelle */
    height: auto;
    background: #fff;        /* fond blanc */
    color: #000;             /* texte noir */
    padding: .5rem 1rem;     /* surface tactile confortable */
    border: 1px solid #333; /* démarcation visuelle */
    z-index: 1000;           /* au‑devant de tout le reste */
    box-shadow: 0 0 4px rgba(0,0,0,.3); /* léger relief pour la visibilité */
}

/* -----------------------------------------------------------------
   Variante optionnelle – si vous souhaitez que le lien reste
   visible en permanence (décommenter et adapter selon le besoin).
----------------------------------------------------------------- */
/*
.skip-link.always-visible {
    left: 0;
    top: 0;
    position: static;
    background: #f8f8f8;
    color: #333;
    padding: .5rem;
    border: 1px solid #aaa;
}
*/