/* Réglages transverses du site de campagne — 17/09/2026
   ------------------------------------------------------
   Cette feuille porte ce qui vaut pour toutes les pages et que les jetons du
   système de design ne couvrent pas. Elle se charge après eux et ne redéfinit
   aucun jeton : elle s'appuie sur `--ink`, `--paper` et `--ac`.

   Elle ne remplace pas le système de design et n'a pas vocation à grossir.
   Ce qui relève de l'identité retourne au système ; ce qui relève d'une page
   reste dans la page. */

/* 1. Le focus au clavier
   ----------------------
   Les champs portaient `outline:none` en style inline, sans rien en échange :
   naviguer au clavier devenait impossible à suivre, ce que la règle 2.4.7 des
   WCAG interdit au niveau AA. L'attribut a été retiré des pages et le repère
   se dessine ici.

   `:focus-visible` ne se déclenche qu'au clavier : un clic à la souris sur un
   bouton ne fait donc rien paraître et le rendu au repos ne change pas. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink, #121212);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sur un fond sombre, l'encre ne se verrait pas : l'accent prend le relais. */
[style*="background:var(--ink)"] :where(a, button, input, select, textarea, [tabindex]):focus-visible,
[style*="background:var(--btn-solid-bg)"]:focus-visible {
  outline-color: var(--ac, #C6F135);
}

/* Le bouton plein encre porte son propre fond : décoller le trait suffit. */
button:focus-visible {
  outline-offset: 3px;
}

/* 2. Les cibles tactiles
   ----------------------
   Les liens du menu replié et les boutons atteignent 44 px de haut, seuil
   courant pour le doigt. Les liens de texte courant en sont dispensés :
   les agrandir casserait l'interligne des paragraphes. */
@media (pointer: coarse) {
  nav a,
  button,
  [role="button"] {
    min-height: 44px;
  }
}

/* 3. Le mouvement
   ---------------
   Les pages coupent déjà leurs animations quand le système le demande. Cette
   règle couvre ce qui viendrait plus tard sans y penser. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Les trios
   ------------
   Trois éléments dans une grille qui s'ajuste toute seule finissent par
   s'afficher sur deux colonnes et le troisième reste seul en dessous. Mesuré
   le 17/09/2026 sur les axes du programme à 414 px : deux colonnes de deux
   cents pixels, un texte haché sur huit lignes, « Rassembler » orphelin.

   Un trio se lit sur une colonne ou sur trois, jamais sur deux. Le seuil tient
   à la mesure : trois colonnes lisibles demandent environ 260 px chacune, plus
   les gouttières. */
[data-trio] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 880px) {
  [data-trio] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4 bis. Les quatuors
   ------------------
   Quatre éléments : une colonne, puis deux sur deux. Jamais quatre de front :
   TRANSFORMER en Anton mesure 5,15 em et déborderait d'une colonne sur quatre. */
[data-quatuor] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 640px) {
  [data-quatuor] { grid-template-columns: repeat(2, 1fr); }
}

/* 5. Ce qui se lit et ne se voit pas
   ----------------------------------
   Pour les titres de repérage destinés aux lecteurs d'écran. */
.pour-lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 6. Le registre d'affichage — 22/09/2026
   ---------------------------------------
   Le site passe tout entier en registre d'affichage : aplat azur sur toute la
   hauteur, capitales Anton pour les titres, cartouche blanc pour la ligne de
   scrutin. La bascule se fait par un seul attribut sur le conteneur racine de
   chaque page, [data-registre="affichage"], posé avec [data-fond="azur"] qui
   règle l'appariement des franges (tokens/affichage.css).

   Les alias sémantiques du système sont réorientés ici, pas les jetons de base :
   l'encre reste l'encre, l'azur reste le fond. Le gris d'encre passe à l'encre
   pleine, parce que #63635A sur azur tombe sous 3:1. Le blanc ne sert plus
   qu'au cartouche. L'accent vivant devient le magenta, couleur de la plaque de
   titre de l'affiche. */
[data-registre="affichage"] {
  --surface-page: var(--fond);
  --surface-header: rgba(44, 182, 255, .92);
  --text-primary: var(--ink);
  --text-secondary: var(--ink);
  --text-muted: var(--ink);
  --border-hairline: var(--ink);
  --border-rule: var(--ink);
  --ac: var(--accent-magenta);
  --on-ac: var(--ink);
  --btn-solid-fg: var(--fond);
  --btn-accent-bg: var(--accent-magenta);
  --btn-accent-fg: var(--ink);
  --mark-band: var(--accent-magenta);
  --selection-bg: var(--accent-acide);

  /* Une seule voix de texte. JetBrains Mono faisait un troisième registre à
     côté d'Anton et de Host Grotesk : surtitres, libellés, dates et mentions
     passent en Host Grotesk capitales. Le tracking se resserre, la chasse
     fixe ne le demandant plus ; le libellé remonte à 12 px pour rester lisible. */
  --font-mono: var(--font-sans);
  --tracking-eyebrow: .06em;
  --tracking-label: .06em;
  --tracking-label-tight: .05em;
  --size-label: 12px;

  /* Corps d'affichage du site. Jamais sous 5 % de la largeur de l'écran. */
  --aff-titre: clamp(52px, 10vw, 168px);
  --aff-accroche: clamp(40px, 6vw, 104px);
  --aff-section: clamp(40px, 5vw, 80px);
  /* Corps posé sur un cadre photo pour que le décalage de repérage, exprimé
     en em, prenne l'épaisseur d'un cheveu à l'écran : 2 à 5 px. */
  --aff-plaque: clamp(160px, 24vw, 360px);
  color: var(--ink);
}

html:has([data-registre="affichage"]),
html:has([data-registre="affichage"]) body {
  background: var(--fond-azur);
}

[data-registre="affichage"] ::selection {
  background: var(--accent-acide);
  color: var(--ink);
}