/* =============================================================================
   Cité par l'IA — système de design
   Direction : « la page annotée ».

   Le site fait deux choses : expliquer comment être cité, et fournir des
   outils qui corrigent une page. Les deux gestes sont ceux d'une relecture —
   on surligne le passage qui compte, on annote en rouge ce qui cloche.
   D'où trois seuls signes graphiques : le surligneur jaune (ce qui est
   retenu), le trait rouge (ce qui est corrigé), le panneau fichier (ce
   qu'on emporte).

   Ordre du fichier : fontes, jetons, reset, typographie, mise en page,
   composants, en-tête/pied, blocs éditoriaux, outils, utilitaires.
   ============================================================================= */

/* ------------------------------------------------------------------ Fontes */
/* Auto-hébergées : le CDN Google Fonts transmet l'IP du visiteur à un tiers,
   ce que plusieurs décisions européennes ont jugé non conforme au RGPD. */
@font-face {
  font-family: "Archivo";
  src: url("https://cite-par-lia.fr/wp-content/themes/cite-par-lia/assets/fonts/archivo-subset.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Source Serif 4";
  /* Sous-ensemble latin français, taille optique figée à 16.
     119 Ko à l'origine, 34 Ko ici : l'axe de taille optique coûtait plus
     cher que le gain qu'il apportait sur un site à un seul corps de texte. */
  src: url("https://cite-par-lia.fr/wp-content/themes/cite-par-lia/assets/fonts/source-serif-4-subset.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("https://cite-par-lia.fr/wp-content/themes/cite-par-lia/assets/fonts/ibm-plex-mono-400-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("https://cite-par-lia.fr/wp-content/themes/cite-par-lia/assets/fonts/ibm-plex-mono-500-subset.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ------------------------------------------------------------------ Jetons */
:root {
  /* Papier mat légèrement vert, pas le #FAFAFA habituel : ça éloigne
     immédiatement du rendu « sorti d'un générateur ». */
  --paper: #f2f1ec;
  --raised: #fcfbf8;
  --sunk: #e9e7df;

  --ink: #191a17;
  --ink-soft: #5c5e58;
  --ink-faint: #6a6c66;
  --rule: #dedcd4;
  --rule-strong: #c3c1b6;

  --highlight: #f5e03d; /* surligneur : ce qui est retenu */
  --red: #c42b12; /* stylo rouge : lien, correction, alerte */
  --red-soft: #f6e2dd;
  --green: #1f6b4a; /* validation */
  --green-soft: #dfeee7;

  --font-ui: "Archivo", system-ui, -apple-system, sans-serif;
  --font-prose: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wide: 1240px;

  --t-micro: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lede: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --t-h3: 1.1875rem;
  --t-h2: clamp(1.5rem, 1.3vw + 1.15rem, 2.125rem);
  --t-h1: clamp(2.375rem, 5vw + 0.5rem, 4.25rem);

  --shadow: 0 1px 0 var(--rule), 0 10px 30px -22px rgba(25, 26, 23, 0.5);
}

/* ------------------------------------------------------------------- Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection {
  background: var(--highlight);
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ Typographie */
h1,
h2,
h3,
h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.04em;
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.28;
  letter-spacing: -0.015em;
}
p {
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-prose);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Filet rouge devant les sur-titres : la marque de relecture. */
.eyebrow--marked::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--red);
  vertical-align: 0.28em;
  margin-right: 0.6rem;
}

.mono {
  font-family: var(--font-mono);
}
.prose-font {
  font-family: var(--font-prose);
}

/* Geste signature n°1 : le surligneur.

   La balise <mark> porte un fond jaune plat dans tous les navigateurs. Le
   trait de surligneur est dessiné en dégradé — il ne couvre que le bas de la
   ligne, comme un feutre passé à la main. Il faut donc annuler le fond natif,
   sans quoi les deux se superposent et le geste disparaît. */
mark.mark {
  background-color: transparent;
  color: inherit;
}
.mark {
  background-image: linear-gradient(transparent 55%, var(--highlight) 55%, var(--highlight) 93%, transparent 93%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .mark--sweep {
    background-size: 0% 100%;
    animation: sweep 780ms cubic-bezier(0.22, 1, 0.36, 1) 400ms forwards;
  }
  @keyframes sweep {
    to {
      background-size: 100% 100%;
    }
  }
}

/* ------------------------------------------------------------- Mise en page */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure {
  max-width: var(--measure);
}
.section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--rule);
}
.section--flush {
  border-top: 0;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1rem;
}
.section-head h2 {
  margin-top: 0.55rem;
}
.section-lede {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-family: var(--font-prose);
  margin-bottom: 2.5rem;
}
.grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------- Hero
   Ces deux classes étaient posées dans front-page.php mais n'existaient nulle
   part dans la feuille : le navigateur empilait donc les deux colonnes, et la
   figure de réponse s'étalait sur toute la largeur sous les boutons. C'est la
   cause du décalage entre la maquette et le rendu, pas un réglage de largeur.

   La bascule se fait à 980 px : en dessous, une colonne de texte de 46ch et
   une figure côte à côte laissent moins de quarante caractères à chacune. */
.hero-grid {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
/* La figure et sa légende forment une seule cellule de grille : séparées,
   la légende retomberait dans la colonne de gauche, sous les boutons. */
.hero-figure {
  min-width: 0;
}
.hero-grid .answer {
  margin: 0;
}
.hero-note {
  margin-top: 0.85rem;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 52ch;
}

/* -------------------------------------------------------------- Composants */
.card {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover {
  transform: translateY(-1px);
}
.btn--ghost {
  color: var(--ink);
  border-color: var(--rule-strong);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--ink);
}
.btn--sm {
  padding: 0.5rem 0.9rem;
  font-size: var(--t-micro);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.arrow-link:hover {
  text-decoration: underline;
}
.arrow-link svg {
  transition: transform 160ms ease;
}
.arrow-link:hover svg {
  transform: translateX(3px);
}

/* Puce de citation : l'artefact des moteurs de réponse. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.55em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: 0.12em;
}
a.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.tag {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 2px;
  background: var(--sunk);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-size: var(--t-small);
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus {
  top: 0.5rem;
}

/* ------------------------------------------------------- En-tête / pied */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 62px;
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark b {
  font-weight: 700;
}
.wordmark i {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  color: var(--red);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding-block: 0.35rem;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover {
  color: var(--ink);
}
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--highlight);
}

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-block: 3rem 2.5rem;
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
}
.site-foot__col h2 {
  font-size: var(--t-micro);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.site-foot__col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.site-foot__col a {
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: none;
}
.site-foot__col a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.site-foot__note {
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 34ch;
}
.site-foot__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

/* ------------------------------------------------- Blocs éditoriaux */

/* Bloc « réponse » : le passage écrit pour être extrait tel quel.
   Filet jaune à gauche = ce qui est retenu. */
.answer {
  position: relative;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--highlight);
  border-radius: 0 3px 3px 0;
  padding: 1.35rem 1.6rem 1.5rem;
}
.answer__q {
  font-family: var(--font-prose);
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.answer__a {
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-bottom: 1.75rem;
  list-style: none;
  padding: 0;
}
.breadcrumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs li::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--rule-strong);
}
.breadcrumbs li:last-child::after {
  content: none;
}

/* FAQ : <details> natif. La réponse reste dans le DOM sans JavaScript,
   donc lisible par un crawler, par Ctrl+F et par un lecteur d'écran. */
.faq {
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary h3,
.faq summary h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.faq summary:hover h3,
.faq summary:hover h2 {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}
.faq__icon {
  flex-shrink: 0;
  color: var(--ink-faint);
  transition: transform 200ms ease;
}
.faq details[open] .faq__icon {
  transform: rotate(45deg);
}
.faq__a {
  padding-bottom: 1.3rem;
  max-width: var(--measure);
  font-family: var(--font-prose);
  color: var(--ink-soft);
}

/* Cartes */
.card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color 160ms ease, transform 160ms ease;
}
.card-link:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}
.card-link h3 a {
  color: var(--ink);
  text-decoration: none;
}
.card-link h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-link:hover h3 a {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}
.card-link p {
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  flex: 1;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* Numérotation des piliers */

/* Lexique */
.deflist {
  border-top: 1px solid var(--rule);
  margin: 0;
}
.deflist__row {
  display: grid;
  gap: 0.35rem 2.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .deflist__row {
    grid-template-columns: 16rem 1fr;
  }
}
.deflist dt h2,
.deflist dt h3 {
  font-size: 1.125rem;
  scroll-margin-top: 5rem;
}
.deflist dt span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}
/* Un badge reste un badge, même dans une définition.

   La règle ci-dessus vise le libellé mono placé sous un titre de liste ; elle
   attrapait aussi le badge de fraîcheur, qui est également un <span>. Résultat :
   display:block l'emportait sur le inline-flex de .badge, et « Mis à jour
   le … » s'étirait en barre bordée sur toute la colonne. La spécificité de
   .deflist dt .badge (0-2-1) repasse devant celle de .deflist dt span (0-1-2). */
.deflist dt .badge {
  display: inline-flex;
  width: auto;
  margin-top: 0.4rem;
  font-size: 0.68rem;
}
.deflist dt .badge time {
  font-family: inherit;
  color: inherit;
}
.deflist dd {
  margin: 0;
  font-family: var(--font-prose);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ Outils */

/* Geste signature n°2 : le panneau fichier.
   La sortie d'un outil est un artefact qu'on emporte — on la montre donc
   comme un fichier, onglet de nom compris, pas comme une zone de texte. */

@media (min-width: 980px) {
}
.field {
  display: block;
  margin-bottom: 1.1rem;
}
.field > span {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.field small {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-weight: 400;
  margin-top: 0.15rem;
}
.field input[type="text"],
.field textarea,
.field select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.field textarea {
  min-height: 6rem;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--ink);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
}
fieldset legend {
  font-size: var(--t-small);
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.5rem;
}

.switch {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.switch:last-child {
  border-bottom: 0;
}
.switch input {
  margin-top: 0.3rem;
  accent-color: var(--red);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.switch__label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}
.switch__desc {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-faint);
  line-height: 1.45;
  margin-top: 0.1rem;
}

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.preset {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
}
.preset:hover {
  border-color: var(--ink);
}
.preset[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Geste signature n°3 : l'annotation rouge, ici en retour de validation. */
.notice {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 2px;
  font-size: var(--t-small);
  line-height: 1.45;
  margin-top: 1rem;
}
.notice--warn {
  background: var(--red-soft);
  border-left: 3px solid var(--red);
}
.notice--ok {
  background: var(--green-soft);
  border-left: 3px solid var(--green);
}
.notice__title {
  font-weight: 600;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.25rem 1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--red);
  padding-top: 0.15rem;
}
.steps h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.steps p {
  grid-column: 2;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- Utilitaires */
.stack > * + * {
  margin-top: 1rem;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}
.mt-4 {
  margin-top: 2rem;
}
.mt-6 {
  margin-top: 3rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- Navigation mobile */
/* Menu déroulant sans une ligne de JavaScript : <details> natif fournit
   l'ouverture, le clavier et aria-expanded gratuitement. La maquette React
   utilisait un useState + un bouton hamburger pour le même résultat. */
.nav-toggle {
  display: none;
}
.nav-toggle > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.nav-toggle > summary::-webkit-details-marker {
  display: none;
}
.nav-toggle[open] > summary {
  border-color: var(--ink);
}

@media (max-width: 860px) {
  .site-head__inner {
    flex-wrap: nowrap;
  }
  .nav-toggle {
    display: block;
  }
  .site-nav--desktop {
    display: none;
  }
  .nav-toggle .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 0.75rem;
    padding: 0.5rem var(--gutter) 1rem;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .nav-toggle .site-nav a {
    display: block;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    padding-left: 0.6rem;
  }
  .nav-toggle .site-nav a[aria-current="page"] {
    border-bottom-color: var(--rule);
    border-left-color: var(--highlight);
  }
}

/* -------------------------------------------------- Vignette d'article */
.card-cover {
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
}
.card--cover {
  padding: 0;
  overflow: hidden;
}
.card--cover .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.25rem 1.35rem 1.35rem;
  flex: 1;
}

/* ------------------------------------------------------------------ Article */
.post {
  max-width: 46rem;
  padding-block: 2.5rem 4rem;
}
.post__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin-top: 2rem;
}
.post__byline {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.post__byline a {
  color: var(--ink-soft);
}

/* Sommaire statique, écrit dans le HTML.
   La page applique la recommandation de l'outil « sommaire HTML » :
   un sommaire construit en JavaScript n'est pas lu par les crawlers. */
.toc {
  margin-top: 2.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  border-radius: 0 3px 3px 0;
  background: var(--raised);
}
.toc ol {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.toc a {
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: none;
}
.toc a:hover {
  color: var(--red);
  text-decoration: underline;
}

.post__body {
  margin-top: 2.5rem;
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.post__body h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  scroll-margin-top: 5.5rem;
}
.post__body p {
  margin-bottom: 1.1rem;
  max-width: var(--measure);
}
.post__body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: color-mix(in srgb, var(--highlight) 30%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.post__foot {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ Contact */
@media (min-width: 900px) {
}

/* --------------------------------------------------------------- Page 404 */
.page-404 {
  padding-block: clamp(4rem, 10vw, 7rem);
  max-width: 46rem;
}
.page-404__code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--red);
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------- Page à contenu simple */
.page {
  padding-block: 2.5rem 4rem;
}
.page h1 {
  margin-top: 0.75rem;
}
.page__lede {
  margin-top: 1.25rem;
  max-width: 52ch;
}
.page__body {
  margin-top: 2.75rem;
}
.legal h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
}
.legal p,
.legal ul {
  margin-bottom: 1rem;
  color: var(--ink-soft);
  font-family: var(--font-prose);
  max-width: var(--measure);
}

/* ------------------------------------------------------------- Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 0.5em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.badge--new {
  background: var(--highlight);
  color: var(--mark-ink);
}
.badge--updated {
  border: 1px solid var(--rule-strong);
  color: var(--ink-faint);
}

/* --------------------------------------------- Encart de maillage */

.crosslink {
  margin-block: 2rem;
  padding: 1.1rem 1.35rem;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--red);
  border-radius: 0 3px 3px 0;
}
.crosslink ul {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.crosslink a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-small);
}

/* ------------------------------------------ Navigation précédent/suivant */
.post-nav {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
  }
}
.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--raised);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 150ms ease, transform 150ms ease;
}
.post-nav__item:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.post-nav__item--next {
  text-align: right;
}
.post-nav__title {
  font-weight: 600;
  font-size: var(--t-small);
  line-height: 1.35;
}

/* ------------------------------------------------------- Nuage de termes */
.term-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
.term-cloud a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--raised);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.term-cloud a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* --------------------------------------------------------- Liste locale */

/* ---------------------------------------------------------- Consentement */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  background: var(--raised);
  border-top: 3px solid var(--red);
  box-shadow: 0 -8px 30px -20px rgba(25, 26, 23, 0.6);
}
.consent[hidden] {
  display: none;
}
.consent__inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 1.25rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 980px) {
  .consent__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}
.consent__title {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.consent__desc {
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 62ch;
}
.consent__detail {
  border-block: 1px solid var(--rule);
  padding-block: 0.5rem;
}
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ---------------------------------------------------------- Fiche d'étude */
.factsheet {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--raised);
  padding: 1.1rem 1.35rem;
}
.factsheet dl {
  display: grid;
  gap: 0.85rem 2rem;
  margin: 0;
}
@media (min-width: 640px) {
  .factsheet dl {
    grid-template-columns: repeat(2, 1fr);
  }
}
.factsheet dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}
.factsheet dd {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 600;
}

/* Tableau de chiffres : format le plus proprement extrait par les moteurs. */
.figures {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.figures th,
.figures td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.figures tr:first-child th,
.figures tr:first-child td {
  border-top: 2px solid var(--ink);
}
.figures th {
  font-weight: 400;
  color: var(--ink-soft);
  font-family: var(--font-prose);
  width: 65%;
}
.figures td {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Les limites en rouge de relecture : c'est une annotation critique. */
.limits {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--red);
  border-radius: 0 3px 3px 0;
  background: var(--raised);
  padding: 1.1rem 1.35rem;
}
.limits p {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.study {
  margin-bottom: 1rem;
}
.study__title {
  font-size: 1.1875rem;
  margin-top: 0.4rem;
}
.study__title a {
  color: var(--ink);
  text-decoration: none;
}
.study__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}
.study__source {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}
.study__desc {
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-top: 0.6rem;
}
.study__sample {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.study__sample .eyebrow {
  display: block;
  margin-bottom: 0.15rem;
}

/* --------------------------------------------------- Piliers, traitement large */
/* Rupture de rythme : pas de carte, pas de bordure. Le numéro porte la
   structure à la place du cadre. */
.pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.pillar {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .pillar {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0 2.5rem;
  }
}
.pillar__n {
  font-family: var(--font-ui);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--rule-strong);
}
.pillar__body {
  max-width: var(--measure);
}
.pillar__body h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.pillar__lede {
  margin-top: 0.35rem;
  font-weight: 600;
  font-size: var(--t-small);
  background-image: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 92%, transparent 92%);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pillar__body > p:last-child {
  margin-top: 0.8rem;
  font-family: var(--font-prose);
  color: var(--ink-soft);
}

/* ------------------------------------------------- Tableaux défilants */
/* Les valeurs chiffrées portent white-space: nowrap pour rester lisibles ;
   sans conteneur, un tableau large casse la mise en page sur mobile. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ Recherche */
.search-box input[type="search"] {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--raised);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
}
.search-box input:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--ink);
}
.search-count {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}
.search-results {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.search-hit {
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--highlight);
  border-radius: 0 2px 2px 0;
  background: var(--raised);
}
.search-hit a {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.search-hit a:hover {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}
.search-hit p {
  margin-top: 0.25rem;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ------------------------------------------------- Après usage d'un outil */
.afteruse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--highlight);
  border-radius: 0 3px 3px 0;
  background: var(--raised);
}
.afteruse__text {
  margin-top: 0.3rem;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 52ch;
}
.afteruse__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.embed iframe {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 3px;
}

a.tag {
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
a.tag:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ------------------------------------------------------------ Encart auteur */
.section > .authorbox {
  margin-top: 0;
}
.authorbox {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 1.35rem 1.5rem;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink);
  border-radius: 0 3px 3px 0;
}
.authorbox__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rule);
  flex-shrink: 0;
}
/* Le recadreur autorise trois formats. Un portrait 4:5 forcé dans un cercle
   serait recadré une seconde fois par le navigateur, et le cadrage choisi en
   back-office ne servirait plus à rien : les formats non carrés sortent donc
   du cercle et gardent leurs proportions. */
.authorbox__photo--portrait {
  width: 92px;
  height: 115px;
  border-radius: 3px;
}
.authorbox__photo--wide {
  width: 142px;
  height: 80px;
  border-radius: 3px;
}
.authorbox__body {
  flex: 1;
  min-width: 16rem;
}
.authorbox__name {
  font-size: 1.25rem;
  margin-top: 0.35rem;
}
.authorbox__name a {
  color: var(--ink);
  text-decoration: none;
}
.authorbox__name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}
.authorbox__credential {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.authorbox__bio {
  margin-top: 0.7rem;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 58ch;
}
.authorbox__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
}

/* -------------------------------------------------------------- Newsletter */
.newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1rem;
  padding: 1.35rem 1.5rem;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--highlight);
  border-radius: 0 3px 3px 0;
}
.newsletter__title {
  font-size: 1.25rem;
  margin-top: 0.4rem;
}
.newsletter__text {
  margin-top: 0.5rem;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 52ch;
}
.newsletter__cta {
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ Contact
   Page de contact sans formulaire. Aucune nouvelle couleur, aucun nouveau
   rayon : le filet rouge à gauche reprend celui de l'encart newsletter, pour
   que l'œil identifie « bloc d'action » sans apprendre un second langage. */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  padding: clamp(1.35rem, 2.5vw, 2rem);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--red);
  border-radius: 0 3px 3px 0;
}

.contact-card__lede {
  margin-top: 0.9rem;
  max-width: 46ch;
  font-family: var(--font-prose);
  color: var(--ink-soft);
}

.contact-line {
  margin-top: 1.25rem;
}

.contact-line--links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.contact-facts {
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.9rem;
}

.contact-facts dt {
  font-size: var(--t-micro);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.contact-facts dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 52ch;
}

.contact-links {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.1rem;
}

.contact-links li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.contact-links li:first-child {
  padding-top: 0;
  border-top: 0;
}

.contact-links a {
  font-weight: 600;
}

.contact-links span {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ------------------------------------------------- Journal des corrections
   Traitement discret : c'est une information de vérification, pas de lecture.
   Filet gris à gauche plutôt que rouge — le rouge du système signale une
   alerte, or une correction publiée est un signe de bonne santé. */

.corrections {
  margin-top: 3rem;
  padding: 1.2rem 1.4rem;
  background: var(--sunk);
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 3px 3px 0;
}

.corrections__lede {
  margin: 0.5rem 0 0;
  font-family: var(--font-prose);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 60ch;
}

.corrections__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.corrections__list li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  font-size: var(--t-small);
}

@media (max-width: 620px) {
  .corrections__list li {
    grid-template-columns: 1fr;
  }
}

.corrections__list time {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  padding-top: 0.15rem;
}

.corrections__list span {
  font-family: var(--font-prose);
  color: var(--ink);
}

/* ------------------------------------------------------------- Page guide
   Chiffres, sommaire cliquable et parcours d'entrée. Le hub doit dire ce
   qu'il couvre avant de le dérouler. */

.guide-stats {
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.guide-stats div {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.guide-stats dt {
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.guide-stats dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.guide-freshness {
  margin-top: 0.7rem;
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.guide-jump ul {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.guide-jump li a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--raised);
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--ink);
}

.guide-jump li a:hover {
  border-color: var(--rule-strong);
  background: var(--sunk);
}

.startpath {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.6rem;
}

.startpath__item {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: start;
}

.startpath__n {
  font-family: var(--font-ui);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rule-strong);
  font-variant-numeric: tabular-nums;
}

.startpath__item h3 {
  font-size: var(--t-h3);
}

.startpath__item p {
  margin: 0.3rem 0 0;
  font-family: var(--font-prose);
  color: var(--ink-soft);
  max-width: 58ch;
}

.startpath__link {
  margin-top: 0.5rem;
}