/* ==========================================================================
   BASE — ce qui s'applique partout, et ce qui ne s'applique qu'au nouveau
   balisage
   --------------------------------------------------------------------------
   Pendant la refonte, les pages pas encore refaites gardent Bootstrap 4 et
   l'ancienne feuille du thème. Les règles globales se limitent donc à ce qui
   ne peut rien casser (police, focus, utilitaires). Tout le reste — titres,
   listes, liens, images — ne vaut qu'à l'intérieur de `.nd` (« nouveau
   design »), posé par les gabarits refaits. :where() garde ces règles à une
   spécificité nulle : la moindre classe d'un composant les surcharge.
   À l'étape 5 (ménage), le préfixe `.nd` disparaîtra.
   ========================================================================== */

/* ------------------------------------------------------------------ global */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--h-entete) + var(--wp-admin--admin-bar--height, 0px) + 24px);
}

body {
  font-family: var(--f-texte);
  -webkit-font-smoothing: antialiased;
}

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

/* Le focus doit se voir, toujours. */
:focus-visible { outline: var(--trait-2) solid var(--focus); outline-offset: 2px; }

[hidden] { display: none !important; }

/* ------------------------------------------------ nouveau balisage (.nd) */
:where(.nd) {
  font-family: var(--f-texte);
  font-size: var(--t-2);
  line-height: 1.6;
  color: var(--md-encre);
}
:where(.nd) :where(h1, h2, h3, h4) {
  font-family: var(--f-titre);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--e-4);
  color: inherit;
  text-wrap: balance;
}
:where(.nd) :where(h1) { font-size: var(--t-6); }
:where(.nd) :where(h2) { font-size: var(--t-5); }
:where(.nd) :where(h3) { font-size: var(--t-3); letter-spacing: -0.01em; }
:where(.nd) :where(p) { margin: 0 0 var(--e-4); }
:where(.nd) :where(p:last-child) { margin-bottom: 0; }
:where(.nd) :where(a) { color: var(--accent-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.nd) :where(a:hover) { color: var(--md-encre); }
:where(.nd) :where(img) { max-width: 100%; height: auto; display: block; }
:where(.nd) :where(ul, ol) { margin: 0; padding: 0; }
:where(.nd) :where(button, input, select) { font: inherit; color: inherit; }

/* ------------------------------------------------------------- utilitaires */
.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--e-5); }
@media (max-width: 640px) { .conteneur { padding-inline: var(--e-4); } }

.surface-nuit { background: var(--nuit); color: var(--md-papier); }
.surface-nuit :where(h1, h2, h3) { color: var(--md-papier); }

/* Sur-titre : libellé en chasse fixe, précédé d'un carré de la couleur de marque. */
.surtitre {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin: 0 0 var(--e-3);
  font-family: var(--f-mono); font-size: var(--t-0); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--md-encre-2);
}
.surtitre::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--marque); }
[data-marque="sidat"] .surtitre::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Pictogrammes au trait, dessinés dans templates/commun/pictogrammes.html.twig */
.icone {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}