/*
 * Saint-Étienne-lès-Remiremont — base du thème.
 * Police Inter auto-hébergée, reset léger, focus, utilitaires d'accessibilité, couleurs de la rubrique courante.
 * Toutes les valeurs viennent de design-tokens.css : aucune valeur en dur ici.
 * Le mouvement réduit (prefers-reduced-motion) est géré en fin de design-tokens.css.
 */

/* ---------- Police : Inter variable (graisses 400, 500 et 600 utilisées) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2") tech("variations"),
       url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset léger ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Focus visible sur tous les fonds (anneau 2 px blanc puis 4 px bleu) ---------- */
:focus-visible {
  outline: 2px solid transparent; /* conserve un contour en mode contraste élevé de Windows */
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Utilitaires d'accessibilité ---------- */

/* Texte réservé aux technologies d'assistance : « (nouvelle fenêtre) », « PDF, 1,1 Mo »… */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Masqué jusqu'à la prise de focus (liens d'évitement). */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ---------- Couleurs de la rubrique courante ----------
   Le gabarit pose « theme-<slug> » sur body (functions.php, taxonomie `rubrique`).
   Les composants utilisent --rubrique-* et suivent ainsi la rubrique de la page.
   Sans rubrique : bleu de l'identité (mêmes valeurs que Ma mairie). */
body {
  --rubrique-background: var(--theme-ma-mairie-background);
  --rubrique-color: var(--theme-ma-mairie-color);
  --rubrique-label: var(--theme-ma-mairie-label);
  --rubrique-icon: var(--theme-ma-mairie-icon);
  --rubrique-section: var(--theme-ma-mairie-section);
  --rubrique-surlignage: var(--theme-ma-mairie-surlignage);
}

body.theme-mes-demarches {
  --rubrique-background: var(--theme-mes-demarches-background);
  --rubrique-color: var(--theme-mes-demarches-color);
  --rubrique-label: var(--theme-mes-demarches-label);
  --rubrique-icon: var(--theme-mes-demarches-icon);
  --rubrique-section: var(--theme-mes-demarches-section);
  --rubrique-surlignage: var(--theme-mes-demarches-surlignage);
}

body.theme-vivre-ici {
  --rubrique-background: var(--theme-vivre-ici-background);
  --rubrique-color: var(--theme-vivre-ici-color);
  --rubrique-label: var(--theme-vivre-ici-label);
  --rubrique-icon: var(--theme-vivre-ici-icon);
  --rubrique-section: var(--theme-vivre-ici-section);
  --rubrique-surlignage: var(--theme-vivre-ici-surlignage);
}

body.theme-actualites-agenda {
  --rubrique-background: var(--theme-actualites-agenda-background);
  --rubrique-color: var(--theme-actualites-agenda-color);
  --rubrique-label: var(--theme-actualites-agenda-label);
  --rubrique-icon: var(--theme-actualites-agenda-icon);
  --rubrique-section: var(--theme-actualites-agenda-section);
  --rubrique-surlignage: var(--theme-actualites-agenda-surlignage);
}

body.theme-decouvrir {
  --rubrique-background: var(--theme-decouvrir-background);
  --rubrique-color: var(--theme-decouvrir-color);
  --rubrique-label: var(--theme-decouvrir-label);
  --rubrique-icon: var(--theme-decouvrir-icon);
  --rubrique-section: var(--theme-decouvrir-section);
  --rubrique-surlignage: var(--theme-decouvrir-surlignage);
}