/* ============================================================
 *  Serendip — overrides.css  (correctifs d'accessibilité & d'interaction)
 *  ------------------------------------------------------------
 *  Fichier ADDITIF et RÉVERSIBLE.
 *  - À charger EN DERNIER, après tous les autres CSS :
 *      <link rel="stylesheet" href="/assets/overrides.css">
 *  - Pour tout annuler : supprimez cette ligne <link>. Rien d'autre ne bouge.
 *  - Chaque bloc est indépendant : vous pouvez en retirer un seul
 *    sans toucher aux autres.
 * ============================================================ */


/* ----------------------------------------------------------------
 * 1. FILET DE SÉCURITÉ : contenu visible même sans JavaScript
 * ----------------------------------------------------------------
 * Aujourd'hui .reveal part de opacity:0 et n'apparaît que lorsque le
 * JS ajoute .in. Si le JS ne s'exécute pas (erreur, désactivé, bot),
 * le corps de page reste blanc.
 * Ci-dessous : UNIQUEMENT quand le navigateur n'a pas de scripting,
 * on force la visibilité. Avec JS, l'animation continue normalement.
 * -> aucun impact visuel pour un visiteur normal.
 * ---------------------------------------------------------------- */
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ----------------------------------------------------------------
 * 2. CONTRASTE : petits textes gris plus lisibles (WCAG AA)
 * ----------------------------------------------------------------
 * --ink-faint (~#8c958c) tombe sous le seuil 4,5:1 sur fond clair ;
 * il sert à de vrais textes (titres de colonnes du pied de page,
 * légendes, compteur, en-têtes de tableau). On l'assombrit un peu.
 * ---------------------------------------------------------------- */
:root {
  --ink-faint: #6b746b;   /* au lieu de #8c958c */
}

/* La signature du pied de page est en dégradé vert→teal sur ~15px :
   trop clair pour du petit texte. On repasse en couleur pleine. */
.foot-sig {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}


/* ----------------------------------------------------------------
 * 3. FOCUS CLAVIER visible et aux couleurs de la marque
 * ----------------------------------------------------------------
 * Les liens / boutons n'affichent aujourd'hui que le contour par
 * défaut du navigateur au focus clavier. On pose un anneau vert
 * cohérent. :focus-visible ne se déclenche QU'au clavier :
 * -> invisible pour la souris, donc rien ne change visuellement.
 * ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.lang-switch a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--green, #00bf73);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ----------------------------------------------------------------
 * 4. BOUTONS : retour tactile au clic (micro-détail « pressable »)
 * ----------------------------------------------------------------
 * Les boutons se soulèvent au survol mais ne réagissent pas au clic.
 * On ajoute un léger enfoncement : la pression se « sent ».
 * ---------------------------------------------------------------- */
.btn:active {
  transform: translateY(0) scale(.97);
}


/* ----------------------------------------------------------------
 * 5. RYTHME DES TRANSITIONS un peu plus vif
 * ----------------------------------------------------------------
 * Survols à .4s -> ~.22s (un survol < 300ms paraît réactif).
 * On ne touche qu'aux boutons pour rester prudent.
 * ---------------------------------------------------------------- */
.btn {
  transition: transform .22s var(--ease, cubic-bezier(.22,.61,.36,1)),
              box-shadow .22s var(--ease, cubic-bezier(.22,.61,.36,1)),
              background-color .22s ease,
              color .22s ease;
}


/* ----------------------------------------------------------------
 * 6. ZONES TACTILES : sélecteur de langue plus grand (mobile)
 * ----------------------------------------------------------------
 * .lang-switch a fait ~4px/9px de padding : cible sous les 44px
 * recommandés au doigt. On agrandit la zone cliquable sans changer
 * la taille visuelle du texte.
 * ---------------------------------------------------------------- */
.lang-switch a {
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}