/* ==========================================================================
   Accessibilite - Transport Manager
   --------------------------------------------------------------------------
   Cette feuille est chargee APRES uikit-tm.css dans les 9 header.php.
   Elle ne change pas le design : elle repare ce qui empeche d'utiliser le jeu
   au clavier ou avec un lecteur d'ecran.

   Sommaire
     1. Focus clavier visible
     2. Texte reserve au lecteur d'ecran
     3. Lien d'evitement
     4. Reperes de navigation
     5. Animations reduites
     6. Contrastes insuffisants
     7. Correctif de la bascule en mode standard
   ========================================================================== */


/* 1. Focus clavier visible
   --------------------------------------------------------------------------
   uikit-tm.css pose « outline: none » a 12 endroits sans jamais le remplacer.
   Sans contour, une personne qui navigue a la touche Tab ne sait pas ou elle est.

   On utilise :focus-visible : le contour n'apparait qu'au clavier, jamais au
   clic a la souris. Le design ne bouge donc pas pour les joueurs a la souris. */

:root {
  --tm-focus: #0b5cd5;
  --tm-focus-contre: #ffffff;
}

html.dark-mode {
  --tm-focus: #ffd400;
  --tm-focus-contre: #0d1221;
}

:focus-visible {
  outline: 3px solid var(--tm-focus);
  outline-offset: 2px;
}

/* Les selecteurs ci-dessous sont exactement ceux que uikit-tm.css neutralise.
   Le !important est necessaire pour repasser devant ces regles. */
.uk-button:focus-visible,
.uk-icon-link:focus-visible,
.uk-icon-button:focus-visible,
.uk-search-input:focus-visible,
.uk-search-icon:focus-visible,
.uk-nav li > a:focus-visible,
.uk-navbar-nav > li > a:focus-visible,
.uk-navbar-nav-alt > li > a:focus-visible,
.uk-navbar-toggle:focus-visible,
.uk-subnav > * > a:focus-visible,
.uk-iconnav > * > a:focus-visible,
.uk-logo:focus-visible {
  outline: 3px solid var(--tm-focus) !important;
  outline-offset: 2px !important;
}

/* Sur les barres de navigation sombres, un liseré clair detache le contour. */
.uk-navbar-primary .uk-navbar-nav > li > a:focus-visible,
.uk-navbar-primary .uk-logo:focus-visible,
.uk-navbar-primary .uk-navbar-toggle:focus-visible {
  box-shadow: 0 0 0 6px var(--tm-focus-contre) !important;
}

/* Les champs de saisie meritent un contour ET une bordure marquee. */
.uk-input:focus-visible,
.uk-select:focus-visible,
.uk-textarea:focus-visible,
.uk-checkbox:focus-visible,
.uk-radio:focus-visible {
  outline: 3px solid var(--tm-focus) !important;
  outline-offset: 1px !important;
}

/* Un element rendu focusable seulement pour recevoir le focus par programme
   (comme <main id="tm-contenu" tabindex="-1">) ne doit pas afficher de contour. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none !important;
}


/* 2. Texte reserve au lecteur d'ecran
   --------------------------------------------------------------------------
   Invisible a l'oeil, lu par la voix. Sert a nommer une icone ou a annoncer
   un changement. Aucune classe de ce type n'existait dans le projet. */

.tm-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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* 3. Lien d'evitement
   --------------------------------------------------------------------------
   Premier element de chaque page. Cache hors ecran, il apparait des qu'on
   appuie sur Tab et permet de sauter les 60 liens du menu d'un seul coup. */

.tm-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 12px 20px;
  background: #274690;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top .15s ease-in-out;
}

.tm-skip-link:focus,
.tm-skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--tm-focus);
  outline-offset: 2px;
}


/* 4. Reperes de navigation
   -------------------------------------------------------------------------- */

#tm-contenu {
  display: block;
}


/* 5. Animations reduites
   --------------------------------------------------------------------------
   Respecte le reglage systeme « reduire les animations ». Utile aux personnes
   sujettes au vertige, et aux machines lentes.
   Les barres de progression du jeu animent leur largeur pendant 600 ms. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 6. Contrastes insuffisants
   --------------------------------------------------------------------------
   #999999 sur blanc donne un rapport de 2,85 pour 1. Le minimum lisible est
   4,5 pour 1. #6b7280 donne 4,83 pour 1 en restant un gris discret.
   Le mode sombre est deja conforme, on n'y touche pas. */

html:not(.dark-mode) .uk-text-muted,
html:not(.dark-mode) .uk-link-muted,
html:not(.dark-mode) .uk-link-muted a,
html:not(.dark-mode) .uk-article-meta,
html:not(.dark-mode) .uk-icon-link {
  color: #6b7280 !important;
}

html:not(.dark-mode) .uk-search-default .uk-search-input::placeholder,
html:not(.dark-mode) .uk-input::placeholder,
html:not(.dark-mode) .uk-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}


/* 7. Correctif de la bascule en mode standard
   --------------------------------------------------------------------------
   Le site tournait en mode quirks parce que le HTML sortait avant le DOCTYPE.
   En mode standard, une image en ligne repose sur la ligne de base et laisse
   un espace de 3 a 5 pixels sous elle, tres visible dans les cellules de
   tableau. Cette ligne neutralise l'effet sur tout le site. */

img {
  vertical-align: middle;
}

/* Les images decoratives que l'on marque comme telles ne doivent pas non plus
   perturber l'alignement. */
img[alt=""] {
  vertical-align: middle;
}