/* =========================================
   APRS — Base (typographie, liens, wrappers)
   ========================================= */
html, body{
  font-family: var(--ff);
  color: var(--text);
  margin: 0;
}
body{line-height: 1.65; }

h1{
  line-height: 1.15;
  color: var(--col-primary);
  font-weight: 700;
}
h2{ font-size: var(--fs-600); line-height:1.20; color: var(--col-primary); font-weight:700; }
h3{ font-size: var(--fs-500); line-height:1.25; color: var(--col-primary); font-weight:700; }

a{
  color: var(--col-secondary);
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
  text-decoration: none;
}
a:hover{
  color: var(--col-accent);
}
img, video {
    display: block;
    max-width: 100%;
    height: auto;
}
.prose{ max-width: 75ch; margin-inline:auto; }
.container-readable{ max-width: 1200px; margin-inline:auto; }

/* Messages (alerts Bootstrap re-skinnés) */
.alert-primary{ --bs-alert-bg: color-mix(in srgb, var(--bs-primary), white 90%); --bs-alert-color: var(--bs-primary); }
.alert-secondary{ --bs-alert-bg: color-mix(in srgb, var(--bs-secondary), white 90%); --bs-alert-color: var(--bs-secondary); }
.alert-danger{ --bs-alert-bg: #fde7e7; --bs-alert-color: #b00020; }
.alert-warning{ --bs-alert-bg: #fff7e0; --bs-alert-color: #8a5a00; }
.alert-success{ --bs-alert-bg: #e7f7ef; --bs-alert-color: #18794e; }

/* Focus accessible */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--col-secondary), white 30%);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* === Accessibilité : éléments cachés mais focusables ===================== */
/* Cacher visuellement mais laisser dispo aux lecteurs d'écran */
.visually-hidden,
.visually-hidden-focusable {
  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; /* compat */
  clip-path: inset(50%) !important; /* moderne */
  white-space: nowrap !important;
  border: 0 !important;
}

/* Variante “focusable” (Drupal : .visually-hidden.focusable) */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus,
.visually-hidden.focusable:focus-visible,
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  z-index: 1000; /* pour passer au-dessus si nécessaire */
  outline: 3px solid color-mix(in srgb, var(--col-secondary), white 25%);
  outline-offset: 2px;
  background: #fff; /* optionnel : évite un texte blanc sur fond blanc */
  border-radius: .25rem;
  padding: .25rem .5rem; /* lisible au clavier */
}