/* ---------------------------------------------------------------------------
   IlikoCar — correctifs d'accessibilité.
   Feuille séparée volontairement : overrides.css fait déjà 44 Ko et sert de
   fourre-tout. On n'y ajoute plus rien, pour que ces règles restent lisibles,
   attribuables et supprimables sans risque.
   --------------------------------------------------------------------------- */

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus, puis affiché en
   haut à gauche. On ne l'affiche PAS avec display:none / visibility:hidden,
   qui le retireraient de l'ordre de tabulation et le rendraient inutile. */
.skipLink {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  background: #0b1733;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}

.skipLink:focus,
.skipLink:focus-visible {
  top: 0;
  outline: 3px solid #ffd0c0;
  outline-offset: 2px;
}

/* L'ancre de destination ne doit jamais dessiner de contour au focus
   programmatique : elle est vide, un contour flottant serait incompréhensible. */
#contenu:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------
   Focus visible au clavier.
   :focus-visible ne s'active qu'à la navigation clavier, jamais au clic souris :
   on rend donc le parcours clavier lisible sans dégrader le rendu à la souris.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Hiérarchie visuelle des titres sur les pages éditoriales.

   Défaut mesuré sur /contact, /legal/*, /mentions-legales et les guides :
   `.sectionTitle` impose font-size:clamp(26px,3.5vw,38px) et font-weight:800 à
   TOUT son contenu. Le <h1> reçoit sa propre taille (26px/700) mais le <p> de
   chapô hérite du conteneur et se retrouve à 28px/800, donc plus gros et plus
   gras que le titre qu'il accompagne.

   Ce n'est pas qu'une question d'esthétique : WCAG 1.3.1 demande que la
   structure perçue visuellement corresponde à la structure du document. Ici un
   lecteur voit le chapô comme le titre de la page.

   Portée limitée à .staticPage : l'accueil utilise .sectionTitle avec une autre
   mise en page, on n'y touche pas.
   --------------------------------------------------------------------------- */
.staticPage .sectionTitle h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 10px;
}

.staticPage .sectionTitle > div > p,
.staticPage .sectionTitle p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Intitulés de champs réservés aux lecteurs d'écran.
   Utilisé quand le libellé visible est porté par un autre élément (placeholder
   ou en-tête de colonne) mais qu'il faut quand même un <label> lié au champ.
   --------------------------------------------------------------------------- */
.srOnly {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Rendu visible dès qu'il reçoit le focus (cas des liens d'évitement additionnels). */
.srOnly:focus,
.srOnly:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---------------------------------------------------------------------------
   Respect de la préférence système « réduire les animations ».
   Critère WCAG 2.3.3, et confort réel pour les personnes sujettes au mal des
   transports vestibulaire.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}