/* C'est réglé · composants partagés.
 *
 * Chargé après tokens.css et avant la feuille propre à chaque page. Il ne lit
 * que des jetons : aucune couleur en dur, aucun dégradé, aucune ombre au-delà
 * de 8 % d'opacité (tests/test_design_system.py le vérifie).
 *
 * Les noms de classes évitent volontairement ceux que les gabarits hérités
 * emploient déjà (.card, .chip, .stepper, .field, .faq, .brand) : tant que
 * ces pages ne sont pas refaites, un composant ne doit pas déteindre sur elles.
 *
 * Sommaire
 *   1. Base : fond, texte, titres, liens, focus, mouvement réduit
 *   2. Utilitaires : .sr-only, lien d'évitement
 *   3. Mise en page : .wrap-grid, .wrap-prose, .wrap-form, .section
 *   4. Boutons : .btn et variantes
 *   5. Formulaires : .form-field, .form-input, .form-textarea, .form-select,
 *      .form-check, états d'erreur
 *   6. Bandeau d'offre : .promo
 *   7. En-tête et menu mobile : .site-header, .site-nav, .menu-toggle,
 *      .mobile-menu
 *   8. Pied de page : .site-footer
 *   9. Étapes : .step-list
 *  10. Carte de guide : .guide-tile
 *  11. FAQ : .faq-list
 *  12. Encadrés : .callout
 *  13. Puce de filtre : .filter-chip
 *  14. Aperçu de courrier : .letter-sheet
 *  15. Pages article (guides, délais, comparatifs) : .article-page,
 *      .article-layout, .article-cta, .law-cite, .tile-grid, .excerpt, .st,
 *      .callout-pair, .page-actions
 *  16. Impression
 *  17. Tableau de données : .data-table-wrap, .data-table, .data-table__hint
 */

/* 1. Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* Une ancre (/#faq) ne se cache pas sous l'en-tête collant. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h2, h3 { font-family: var(--sans); font-weight: 600; color: var(--ink); }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }

/* Un seul anneau de focus pour tout élément interactif : 2px plein, décalé de
   2px, visible au clavier seulement. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Chromium place le focus clavier d'un champ date dans ses parties internes
   (jour, mois, année, puis le bouton du calendrier) ; sur ce dernier arrêt,
   l'hôte ne correspond plus ni à :focus ni à :focus-visible, seulement à
   :focus-within. L'anneau suit donc :focus-within sur ce seul type de champ. */
input[type="date"]:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

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

/* 2. Utilitaires ----------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement : hors écran jusqu'au premier Tab, puis visible en haut à
   gauche, au-dessus de l'en-tête. */
.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 200;
  background: var(--accent); color: var(--paper-2);
  padding: 12px var(--s-2); border-radius: var(--r-control);
  font-weight: 600; font-size: var(--fs-meta); text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { top: var(--s-1); color: var(--paper-2); }

/* 3. Mise en page ---------------------------------------------------------- */

.wrap-grid, .wrap-prose, .wrap-form {
  margin-left: auto; margin-right: auto;
  padding-left: var(--s-3); padding-right: var(--s-3);
}
.wrap-grid { max-width: calc(var(--w-grid) + 2 * var(--s-3)); }
.wrap-prose { max-width: calc(var(--w-prose) + 2 * var(--s-3)); }
.wrap-form { max-width: calc(var(--w-form) + 2 * var(--s-3)); }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

@media (max-width: 640px) {
  .wrap-grid, .wrap-prose, .wrap-form { padding-left: var(--s-2); padding-right: var(--s-2); }
}

/* 4. Boutons --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 44px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--r-control);
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-primary { background: var(--accent); color: var(--paper-2); }
.btn-primary:hover { background: var(--accent-hover); color: var(--paper-2); }
.btn-secondary { background: var(--paper-2); color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-050); color: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn-danger { background: var(--warn); color: var(--paper-2); }
.btn-danger:hover { background: var(--ink); color: var(--paper-2); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }

/* 5. Formulaires ----------------------------------------------------------- */

.form-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--s-3); }
.form-label { font-weight: 600; font-size: var(--fs-body); color: var(--ink); }
.form-hint { font-size: var(--fs-meta); color: var(--ink-soft); margin: 0; }
.form-error { font-size: var(--fs-meta); font-weight: 600; color: var(--warn); margin: 0; }

.form-input, .form-textarea, .form-select {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--r-control);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.4;
}
.form-textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.form-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312141A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form-input[type="date"] { max-width: 16rem; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-soft); opacity: .8; }
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: var(--ink-soft); }
.form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible { border-color: var(--focus); }

.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"], .form-select[aria-invalid="true"] {
  border-color: var(--warn); border-width: 2px; padding: 9px 11px;
}

/* Case à cocher native, agrandie : l'étiquette entière est la cible. */
.form-check {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding: 10px 0; cursor: pointer;
}
.form-check input[type="checkbox"], .form-check input[type="radio"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--accent);
  border: 1px solid var(--rule-strong);
}
.form-check[aria-invalid="true"] input { outline: 2px solid var(--warn); outline-offset: 2px; }

/* 6. Bandeau d'offre ------------------------------------------------------- */

.promo {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 6px 56px 6px var(--s-2);
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-meta); line-height: 1.4; text-align: center;
}
.promo[hidden], .promo-off .promo { display: none; }
.promo__text { margin: 0; }
.promo__short { display: none; }
/* Sous 480px, la forme courte tient sur une ligne en 14px jusqu'à 320px de
   large, même en police de secours ; la phrase entière reste lue par les
   lecteurs d'écran (masquée visuellement, pas retirée). */
@media (max-width: 480px) {
  .promo { font-size: var(--fs-meta); padding-left: var(--s-1); padding-right: 48px; }
  .promo__text { white-space: nowrap; }
  .promo__long {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .promo__short { display: inline; }
}
.promo__code {
  display: inline-block; padding: 1px 8px; margin-left: 2px;
  border: 1px dashed var(--on-ink-soft); border-radius: 4px;
  font-weight: 600; letter-spacing: .06em;
}
.promo__close {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--paper); border: 0; border-radius: var(--r-control); cursor: pointer;
}
.promo__close:hover { background: var(--ink-edge); }
/* Sans JS, rien ne peut fermer l'offre : pas de bouton qui ne fait rien. */
html:not(.js) .promo__close { display: none; }
.promo__close svg { width: 16px; height: 16px; }
.promo :focus-visible { outline-color: var(--paper); }

/* 7. En-tête et menu mobile ------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--header-h);
}

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-right: auto;
  color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
}
.wordmark:hover { color: var(--ink); }
.wordmark__seal { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }

.site-nav { display: flex; align-items: center; gap: var(--s-3); }
.site-nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--ink-soft); font-size: 15px; font-weight: 600; text-decoration: none;
  border-radius: var(--r-control);
}
.site-nav__link:hover { color: var(--ink); text-decoration: underline; }
.site-nav__link[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

.site-header__actions { display: flex; align-items: center; gap: var(--s-1); }

.menu-toggle {
  display: none; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--r-control);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle .menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }

/* Menu mobile. Sans JS (pas de classe html.js), il reste visible sous
   l'en-tête, en liste compacte : ses liens sont joignables. Avec JS, il est
   replié et s'ouvre en plein écran (.is-open), piloté par chrome.js. */
.mobile-menu { display: none; background: var(--paper); }
.js .mobile-menu.is-open {
  display: block;
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, 56px); z-index: 99;
  overflow-y: auto;
  padding: var(--s-3) var(--s-2) var(--s-5);
}
.mobile-menu__list { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.mobile-menu__list li { border-bottom: 1px solid var(--rule); }
.mobile-menu__link {
  display: flex; align-items: center; min-height: 56px;
  color: var(--ink); font-size: 20px; font-weight: 600; text-decoration: none;
}
.mobile-menu__link[aria-current] { color: var(--accent); }
html.menu-open { overflow: hidden; }

@media (max-width: 960px) {
  .site-nav { display: none; }
  .js .menu-toggle { display: inline-flex; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .mobile-menu { display: block; padding: 0 var(--s-2) var(--s-2); }
  html:not(.js) .mobile-menu__list { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-bottom: var(--s-1); }
  html:not(.js) .mobile-menu__list li { border-bottom: 0; }
  html:not(.js) .mobile-menu__link { min-height: 44px; font-size: 16px; }
}
@media (min-width: 961px) {
  .mobile-menu { display: none !important; }
}

/* 8. Pied de page ---------------------------------------------------------- */

.site-footer {
  margin-top: var(--section-y);
  background: var(--paper-2); border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: var(--fs-meta); line-height: 1.6;
}
.site-footer__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-4);
  padding-top: var(--s-6); padding-bottom: var(--s-4);
}
.site-footer__title { margin: 0 0 var(--s-1); color: var(--ink); font-weight: 600; font-size: var(--fs-meta); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
/* 44px de haut à toutes les largeurs, et 44px de large au moins (« Tarifs »). */
.site-footer li a, .site-footer li [aria-current] {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-soft);
}
.site-footer li a:hover { color: var(--ink); }
.site-footer li [aria-current] { color: var(--ink); font-weight: 600; }
.site-footer__claim { margin: var(--s-1) 0 0; color: var(--ink); font-weight: 600; }
.site-footer__social { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--ink-soft); border-radius: var(--r-control);
}
.site-footer__social a:hover { color: var(--ink); background: var(--paper); }
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__legal { padding-bottom: var(--s-4); }
/* Le filet s'arrête aux marges du contenu, pas aux bords de la gouttière. */
.site-footer__legal::before {
  content: ""; display: block; border-top: 1px solid var(--rule); margin-bottom: var(--s-2);
}
.site-footer__legal p { margin: 0 0 var(--s-1); max-width: 80ch; }

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* 9. Étapes (liste ordonnée) ---------------------------------------------- */

.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-2); }
.step-list__item { counter-increment: step; position: relative; padding-left: 48px; min-height: 32px; }
.step-list__item::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong); border-radius: var(--r-control);
  background: var(--paper-2); color: var(--ink); font-weight: 600; font-size: var(--fs-meta);
}
.step-list__item[aria-current="step"]::before { background: var(--accent); border-color: var(--accent); color: var(--paper-2); }
.step-list__item.is-done::before { content: "\2713"; background: var(--accent-050); border-color: var(--accent); color: var(--accent); }
.step-list__title { display: block; font-weight: 600; color: var(--ink); }
.step-list__text { display: block; color: var(--ink-soft); font-size: var(--fs-meta); }

/* 10. Carte de guide ------------------------------------------------------- */

/* Une seule action : le lien du titre couvre toute la carte (::after). Rien
   d'autre de cliquable dedans, pour qu'un clic n'importe où mène au guide. */
.guide-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
  padding: var(--s-3); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.guide-tile[hidden] { display: none; }
/* Catégorie : une vraie puce, 14px, en casse de phrase. */
.guide-tile__kicker, .tag-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  background: var(--accent-050); color: var(--accent-hover);
  border-radius: var(--r-pill); font-size: var(--fs-meta); font-weight: 600; line-height: 1.3;
}
.guide-tile__title { margin: 0; font-size: var(--fs-h3); line-height: 1.3; }
.guide-tile__title a { color: var(--ink); text-decoration: none; }
.guide-tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.guide-tile:hover { border-color: var(--rule-strong); }
.guide-tile:hover .guide-tile__title a { text-decoration: underline; }
.guide-tile__title a:focus-visible { outline: none; }
.guide-tile:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.guide-tile__text { margin: 0; color: var(--ink-soft); }
/* Durée de lecture et date : séparées par un point dessiné, pas un caractère. */
.guide-tile__meta {
  display: flex; flex-wrap: wrap; align-items: center; margin: auto 0 0; padding-top: var(--s-1);
  font-size: var(--fs-meta); color: var(--ink-soft);
}
.guide-tile__meta > span + span::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 var(--s-1);
  border-radius: 50%; background: currentColor; vertical-align: middle;
}

/* 11. FAQ (details/summary, opérable au clavier nativement) --------------- */

.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); margin-right: 4px; transition: transform .15s;
}
.faq-list details[open] > summary::after { transform: rotate(-135deg); }
.faq-list .faq-list__answer { padding: 0 0 var(--s-2); color: var(--ink-soft); }
.faq-list .faq-list__answer > :first-child { margin-top: 0; }

/* 12. Encadrés ------------------------------------------------------------- */

.callout {
  padding: var(--s-2) var(--s-3); margin: var(--s-3) 0;
  border: 1px solid var(--rule); border-left-width: 4px; border-radius: var(--r-control);
  background: var(--paper-2); color: var(--ink);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout__title { display: block; font-weight: 600; margin-bottom: 4px; }
.callout-info { border-left-color: var(--accent); background: var(--accent-050); }
.callout-warning { border-left-color: var(--warn); background: var(--warn-050); }
.callout-warning .callout__title { color: var(--warn); }
.callout-legal { border-left-color: var(--ink); background: var(--paper-2); font-size: var(--fs-meta); color: var(--ink-soft); }

/* 13. Puce de filtre (bouton à bascule, aria-pressed) --------------------- */

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
}
.filter-chip:hover { border-color: var(--ink); }
.filter-chip[aria-pressed="true"] { background: var(--accent-050); border-color: var(--accent); color: var(--accent-hover); }
.filter-chip[aria-pressed="true"]::before {
  content: ""; width: 8px; height: 5px; margin-top: -3px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}

/* 14. Aperçu de courrier (feuille A4) ------------------------------------- */

.letter-sheet {
  aspect-ratio: 210 / 297; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 8% 9%; overflow: hidden;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: var(--shadow-sheet);
  font-size: 15px; line-height: 1.55;
}
.letter-sheet--auto { aspect-ratio: auto; min-height: 0; overflow: visible; }

/* 15. Pages article (guides, délais) ------------------------------------- */

/* Colonne de lecture de 720px ; à partir de 1024px, une colonne latérale porte
   l'action collante. En dessous, la même action devient une barre collée en bas
   de l'écran : c'est le dernier enfant de .article-layout, elle s'arrête donc
   d'elle-même à la fin de l'article et ne recouvre jamais le pied de page. */
.article-page { padding-top: var(--s-3); }
.article-layout { display: block; }
.article-body { max-width: var(--w-prose); min-width: 0; }
@media (min-width: 1024px) {
  .article-layout {
    display: grid; grid-template-columns: minmax(0, var(--w-prose)) 256px;
    /* Colonne de lecture calée sur le bord gauche de la grille (logotype,
       fil d'Ariane, H1 alignés), action collante sur son bord droit. */
    gap: var(--s-8); justify-content: space-between;
  }
}
.article-page .tag { margin: 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.article-page .tag a { color: var(--ink-soft); }
.article-page .tag a:hover { color: var(--ink); }
.article-header { margin: var(--s-3) 0 var(--s-3); }
.article-kicker { margin: 0 0 var(--s-1); font-size: var(--fs-meta); font-weight: 600; color: var(--accent); }
.article-kicker a { color: inherit; }
.article-header h1 { margin: 0 0 var(--s-1); }
.article-meta { margin: 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.article-body h2 { margin: var(--s-6) 0 var(--s-2); }
.article-body > section > h2:first-child { scroll-margin-top: calc(var(--header-h) + var(--s-2)); }
.article-body p, .article-body li { max-width: 72ch; }
.article-body .lead {
  margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3);
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: var(--r-control); font-size: 18px; line-height: 1.55; max-width: none;
}
.article-body .prose-list { padding-left: var(--s-3); margin: 0; }
.article-body .prose-list li { margin: 0 0 var(--s-1); }

/* Étapes d'un article : le texte garde la taille du corps. */
.step-list--prose .step-list__text { font-size: var(--fs-body); color: var(--ink); }

/* Action collante. */
.article-cta { margin-top: var(--s-6); }
.article-cta__card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.article-cta__title { margin: 0; font-weight: 600; color: var(--ink); }
.article-cta__text { margin: 0; font-size: var(--fs-meta); color: var(--ink-soft); }
@media (min-width: 1024px) {
  .article-cta { margin-top: 0; }
  .article-cta__card { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
}
@media (max-width: 1023px) {
  .article-cta { position: sticky; bottom: 0; z-index: 30; margin-left: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-3)); }
  .article-cta__card {
    flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: 12px var(--s-3) calc(12px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0; border-radius: 0; box-shadow: var(--shadow-sheet);
  }
  .article-cta__title { display: none; }
}
@media (max-width: 640px) {
  .article-cta { margin-left: calc(-1 * var(--s-2)); margin-right: calc(-1 * var(--s-2)); }
  .article-cta__card { padding-left: var(--s-2); padding-right: var(--s-2); }
}
/* Sous 1024px la barre couvre le bas de l'écran : un élément qui reçoit le
   focus au clavier défile au-dessus d'elle (barre + marge). Tant que le
   bandeau de consentement est affiché, la barre s'efface pour ne pas s'y
   superposer. */
@media (max-width: 1023px) {
  html:has(.article-cta) { scroll-padding-bottom: calc(var(--s-8) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  body:has(#cr-consent) .article-cta { visibility: hidden; }
}
@media (max-width: 480px) {
  .article-cta__text { display: none; }
  .article-cta__card .btn { flex: 1 1 auto; }
}

/* Citation d'un texte officiel : un extrait de document, pas une citation de
   blog. Filet d'encre, fond blanc, droit (jamais d'italique), la référence en
   étiquette au-dessus, la source Légifrance en légende. */
.law-cite {
  margin: var(--s-3) 0; padding: var(--s-2) var(--s-3);
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule); border-left: 4px solid var(--ink); border-radius: var(--r-control);
}
.law-cite__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-1); max-width: none; }
.law-cite__tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-1);
  border: 1px solid var(--rule-strong); border-radius: var(--r-control);
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft); line-height: 1.2;
}
.law-cite__ref { font-style: normal; font-weight: 600; color: var(--ink); }
.law-cite blockquote { margin: 0; padding: 0; font-style: normal; color: var(--ink); line-height: 1.65; }
.law-cite blockquote p, .law-cite__text p { margin: 0; max-width: none; }
/* Reformulation (« D'après le texte ») : même mise en page, sans blockquote. */
.law-cite__text { color: var(--ink); line-height: 1.65; }
.law-cite figcaption {
  margin-top: var(--s-2); padding-top: var(--s-1); border-top: 1px solid var(--rule);
  font-size: var(--fs-meta); color: var(--ink-soft);
}
.law-cite figcaption a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }
.law-cite figcaption svg { width: 14px; height: 14px; flex: 0 0 auto; }
.law-cite figcaption cite { font-style: normal; }

/* Extrait de modèle : la feuille de courrier, avec son étiquette. */
.excerpt { margin: 0; }
.excerpt__label { margin: 0 0 var(--s-1); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft); }
.excerpt .letter-sheet { max-width: none; padding: var(--s-3); white-space: pre-line; }

/* Grille de cartes : une colonne, deux à partir de 640px, trois en pleine
   largeur (.tile-grid--3, index des guides) à partir de 960px. */
.tile-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Statut d'une ligne de la table : petite étiquette, pas une pastille. */
.st {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-1); margin-left: var(--s-1);
  border: 1px solid currentColor; border-radius: var(--r-control);
  font-size: var(--fs-meta); font-weight: 600; font-style: normal; line-height: 1.2; white-space: nowrap;
  vertical-align: 1px;
}
.st.ok { color: var(--ok-700); background: var(--ok-050); }
.st.prov { color: var(--warn); background: var(--warn-050); }

/* FAQ d'un article : la question est un h3 dans le summary (plan du document). */
.faq-list summary h3 { margin: 0; font-size: var(--fs-body); line-height: 1.4; }

/* Deux encadrés côte à côte (« Choisissez X si », comparatifs) : une colonne,
   deux à partir de 640px. */
.callout-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: var(--s-3) 0; }
@media (min-width: 640px) { .callout-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.callout-pair > .callout { margin: 0; }
.callout h3.callout__title { margin: 0 0 var(--s-1); font-size: var(--fs-body); line-height: 1.4; }
.callout .prose-list { padding-left: var(--s-3); margin: 0; }

/* Rangée d'actions hors encadré (fin de l'index des comparatifs, page 404) :
   la primaire d'abord, écart de 8px, retour à la ligne en mobile. */
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-4) 0 0; }

/* 16. Impression : le courrier et le contenu, sans le chrome ------------- */

@media print {
  .skip-link, .promo, .site-header, .mobile-menu, .site-footer, .article-cta { display: none !important; }
  body { background: var(--paper-2); }
}

/* 17. Tableau de données (comparatifs) ------------------------------------ */

/* En-tête d'encre, filets --rule, légende visible, scope sur chaque th. Le
   conteneur défile horizontalement quand la table est plus large que l'écran :
   il est focalisable (tabindex="0", role="region" nommé) pour défiler au
   clavier, et une indication visible le dit sous 640px. */
.data-table-wrap {
  overflow-x: auto; margin: var(--s-2) 0 var(--s-3);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-card);
}
.data-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.5; }
.data-table caption {
  caption-side: top; text-align: left; padding: 12px var(--s-2);
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft);
}
.data-table th, .data-table td {
  padding: 12px var(--s-2); text-align: left; vertical-align: top;
  border-top: 1px solid var(--rule);
}
.data-table thead th { background: var(--ink); color: var(--paper-2); font-weight: 600; border-top: 0; }
.data-table tbody th { width: 28%; font-weight: 600; color: var(--ink); }
.data-table td { color: var(--ink); }
.data-table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.data-table__hint { display: none; margin: var(--s-2) 0 0; font-size: var(--fs-meta); color: var(--ink-soft); }
@media (max-width: 640px) {
  .data-table__hint { display: block; }
  .data-table__hint + .data-table-wrap { margin-top: var(--s-1); }
}