/* ══════════════════════════════════════════════════════════════════════
   FICHIER GÉNÉRÉ — NE PAS ÉDITER.
   Source : site/assets/css/*.css, assemblés par site/build_css.py.
   Modifier le partiel concerné puis relancer : python site/build_css.py
   Partiels : 00-tokens.css, 10-base.css, 20-layout.css, 30-components.css, 40-motion.css, 45-legacy.css, 50-home.css, 51-fechas.css, 52-comparador.css, 53-article.css, 54-guias.css, 55-contacto.css, 56-ficha.css, 57-vs.css, 58-quiz-obligado.css, 59-herramientas.css, 60-legal.css, 61-consentimiento.css
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 00-tokens.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   00 · Tokens — design system Broadsheet + refonte du 24/09/2026.

   Source : design/refonte-2026-09/_ds/broadsheet-…/styles.css (tokens
   identiques) et les écrans Claude Design (Accueil v2, Calendario,
   Comparador, Articulo, Guias, Contacto) pour les valeurs propres à la
   refonte : rayons arrondis, largeur de colonne, échelle typographique.

   AUCUN @import de police : le DS d'origine charge Source Serif 4 depuis
   Google Fonts, ce qui enverrait l'IP de chaque visiteur hors du domaine
   et rendrait fausses /privacidad/ et /cookies/. Les déclarations de
   police locales vivent dans assets/broadsheet.css, chargé avant ce
   fichier. build_css.py refuse d'écrire si une URL http(s) apparaît.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* — couleurs du DS — */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  --color-process-yellow: #edbb00;

  /* — polices : repli sur une serif, jamais une sans (le DS le proscrit) — */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;          /* boutons, libellés forts (DS) */
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* — espacements du DS (densité 1,25×, ne pas resserrer) — */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* ── Refonte : valeurs relevées dans les maquettes ─────────────────── */

  /* Colonne : 1340 px, gouttière fluide 20 → 72 px (toutes les maquettes). */
  --fo-maxw: 1340px;
  --fo-gutter: clamp(20px, 5vw, 72px);

  /* Surfaces et encres : les cartes de la maquette sont blanches. */
  --fo-paper: #fff;
  --fo-muted: color-mix(in srgb, var(--color-text) 72%, transparent);
  --fo-muted-strong: color-mix(in srgb, var(--color-text) 80%, transparent);
  --fo-dotted: color-mix(in srgb, var(--color-text) 30%, transparent);

  /* Rayons : la refonte arrondit franchement (le DS restait à 2-4 px). */
  --fo-radius-logo: 8px;       /* le carré « FO » */
  --fo-radius-chip: 12px;      /* pastilles d'initiale, vignettes */
  --fo-radius-card: 14px;      /* cartes, lignes du comparateur */
  --fo-radius-choice: 16px;    /* réponses du quiz */
  --fo-radius-panel: 18px;     /* grands panneaux (Calendario, Contacto) */
  --fo-radius-quiz: clamp(18px, 2.4vw, 28px);
  --fo-radius-hero: clamp(20px, 3vw, 36px);
  --fo-radius-pill: 999px;

  /* Graisse d'affichage : tous les titres de la maquette sont en 700. */
  --fo-display-weight: 700;

  /* Échelle typographique (bornes clamp() reprises telles quelles). */
  --fo-fs-display: clamp(44px, 7vw, 104px);     /* h1 du hero d'accueil */
  --fo-fs-h1: clamp(42px, 5.6vw, 80px);         /* h1 des pages intérieures */
  --fo-fs-h2-xl: clamp(34px, 4.5vw, 58px);      /* bloc CTA sombre */
  --fo-fs-h2-lg: clamp(34px, 4vw, 52px);        /* sections à colonne 4/8 */
  --fo-fs-h2: clamp(32px, 3.8vw, 50px);         /* sections */
  --fo-fs-h2-card: clamp(28px, 3.2vw, 42px);    /* titre de panneau */
  --fo-fs-h2-quiz: clamp(26px, 2.6vw, 36px);
  --fo-fs-lede: clamp(18px, 1.5vw, 21px);
  --fo-fs-lede-lg: clamp(21px, 1.8vw, 25px);    /* chapô d'article */
  --fo-fs-eyebrow: 13px;

  /* Espacements de section. */
  --fo-section-xl: clamp(90px, 10vw, 150px);
  --fo-section-lg: clamp(80px, 9vw, 130px);
  --fo-section: clamp(60px, 8vw, 110px);
  --fo-hero-top: clamp(56px, 7vw, 100px);
  --fo-hero-bottom: clamp(40px, 5vw, 70px);

  /* Mouvement. */
  --fo-ease: cubic-bezier(.2, .7, .2, 1);
  --fo-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fo-dur-fast: .25s;
  --fo-dur: .45s;
  --fo-dur-slow: .8s;

  /* Hauteur de l'en-tête collant (ancres, sommaire latéral). */
  --fo-header-h: 72px;
}

/* ─── 10-base.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   10 · Base — éléments nus, typographie, liens, focus.
   Reprend la base du DS Broadsheet, retouchée selon la maquette : titres
   en 700, liens accent-700 sans soulignement dans l'interface, transitions
   douces sur tout ce qui est interactif.
   ══════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Les ancres ne passent pas sous l'en-tête collant. */
  scroll-padding-top: calc(var(--fo-header-h) + 16px);
  /* clip (et non hidden) : ne crée pas de conteneur de défilement, donc
     l'en-tête reste collant. Les formes décoratives et les apparitions
     latérales (data-reveal="left|right") ne font jamais défiler la page. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* Les formes décoratives débordent volontairement de leurs blocs :
     la page, elle, ne défile jamais horizontalement. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fo-display-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
figure { margin: 0; }
figcaption { font-size: 13px; margin-top: var(--space-1); color: var(--fo-muted); }

/* — liens — */
a {
  color: var(--color-accent-700);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-accent-900); }

/* Dans le texte courant, un lien se distingue autrement que par la seule
   couleur (WCAG 1.4.1) : filet discret, qui se renforce au survol.
   :where() garde la spécificité d'un simple « a » : toute classe de
   composant (navigation, cartes, sommaire) reprend la main sans lutte. */
:where(p, li, dd, td, blockquote, figcaption) a:where(:not(.btn)) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
:where(p, li, dd, td, blockquote, figcaption) a:where(:not(.btn)):hover {
  text-decoration-color: currentColor;
}

a, button, .btn, input, select, textarea, summary {
  transition:
    color var(--fo-dur-fast) ease,
    background-color var(--fo-dur-fast) ease,
    border-color var(--fo-dur-fast) ease,
    box-shadow .3s ease,
    transform var(--fo-dur-fast) ease,
    opacity var(--fo-dur-fast) ease;
}

button { font: inherit; color: inherit; }

strong, b { font-weight: 600; }

.num { font-variant-numeric: tabular-nums lining-nums; }
.text-muted { color: var(--fo-muted); }

/* — focus et sélection (DS) — */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — accessibilité — */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link, .screen-reader-text.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--color-text); color: var(--color-bg);
  padding: 10px 16px; border-radius: var(--fo-radius-logo);
  font-size: 15px; text-decoration: none;
  transition: top var(--fo-dur-fast) ease;
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; color: var(--color-bg); }

/* — filet (présent dans le DS, à éviter) — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

[hidden] { display: none !important; }

/* ─── 20-layout.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   20 · Mise en page — conteneur, rail, en-tête, navigation, menu mobile,
   pied de page, sections.

   Le balisage de l'en-tête et du pied vient d'un seul modèle :
   site/build_layout.py (pages statiques) et header.php / footer.php (thème),
   qui doivent rester identiques. Ne pas écrire de variante par page.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- conteneur ---------- */

.container,
.wrap {
  max-width: var(--fo-maxw);
  margin-inline: auto;
  padding-inline: var(--fo-gutter);
}
/* .wrap : l'enveloppe historique des pages (statiques et thème). Elle suit
   désormais la colonne de la refonte, alignée sur l'en-tête. */
.page { padding-bottom: clamp(48px, 6vw, 96px); }

/* Un bloc qui doit sortir de la gouttière (hero en aplat, par exemple)
   sans jamais provoquer de défilement horizontal. */
.bleed { margin-inline: calc(-1 * var(--fo-gutter)); }
@media (min-width: 1500px) {
  .bleed { margin-inline: calc(-1 * var(--fo-gutter) - 30px); }
}

/* ---------- rail noir du haut ---------- */

.site-rail {
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-rail__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 28px;
  padding-block: 10px;
}
.site-rail__fresh { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-rail__pulse {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent-300);
}
.site-rail__claim {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-rail__link {
  color: var(--color-accent-300);
  white-space: nowrap;
  margin-left: auto;
}
.site-rail__link:hover { color: var(--color-bg); }
.site-rail__link:focus-visible { outline-color: var(--color-accent-300); }

@media (max-width: 760px) {
  /* La date porte l'E-E-A-T et le lien dit qui paie : on garde les deux,
     sur deux lignes si besoin. La mention « Independiente » quitte le rail
     (trois lignes noires au-dessus du titre, c'est trop) : le pied de page
     la reprend (.site-footer__claim). */
  .site-rail { font-size: 12px; letter-spacing: .05em; }
  .site-rail__inner { flex-wrap: wrap; gap: 4px 18px; padding-block: 8px; }
  .site-rail__claim { display: none; }
  .site-rail__link { margin-left: 0; }
}

/* ---------- en-tête collant ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow var(--fo-dur) ease;
}
/* Posé par fo.js dès que la page défile : l'en-tête se détache du papier. */
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-divider), 0 8px 24px -18px color-mix(in srgb, #2d2b2b 40%, transparent); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--space-6);
  padding-block: 14px;
  min-height: var(--fo-header-h);
}

/* — marque — */
.site-brand {
  display: flex; align-items: center; gap: 10px;
  margin-right: auto;
  color: var(--color-text);
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 20px; white-space: nowrap;
}
.site-brand:hover { color: var(--color-text); }
.site-brand__mark {
  flex: none;
  width: 30px; height: 30px; border-radius: var(--fo-radius-logo);
  /* accent-700 : blanc à 6,4:1 (l'accent de base n'atteint que 4,1:1). */
  background: var(--color-accent-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; letter-spacing: 0;
  transition: transform var(--fo-dur) var(--fo-ease), background-color var(--fo-dur-fast) ease;
}
.site-brand:hover .site-brand__mark { transform: rotate(-6deg) scale(1.06); background: var(--color-accent-800); }

/* — navigation principale — */
.site-nav { position: relative; }
.site-nav__list {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 6px var(--space-6);
  margin: 0; padding: 0; list-style: none;
  font-size: 15px; white-space: nowrap;
}
.site-nav__link {
  display: inline-block;
  padding-block: 4px;
  color: var(--color-text);
  text-decoration: none;
}
.site-nav__link:hover { color: var(--color-accent-700); }
.site-nav__link[aria-current] {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
/* Le trait animé qui glisse d'un lien à l'autre (fo.js). Sans JS, le
   soulignement statique ci-dessus suffit. */
.site-nav__ink {
  position: absolute; left: 0; bottom: -2px;
  width: 1px; height: 2px;
  background: var(--color-accent-700);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--fo-dur) var(--fo-ease), opacity var(--fo-dur-fast) ease;
}
.site-nav.has-ink .site-nav__ink { opacity: 1; }
.site-nav.has-ink .site-nav__link[aria-current] { text-decoration: none; }
.site-nav__cta { display: none; }

/* — bouton « Recibir alertas » — */
.site-header__cta { white-space: nowrap; }

/* — bouton du menu mobile (n'existe qu'avec JS) — */
.site-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--fo-radius-chip);
  background: transparent; color: var(--color-text);
  cursor: pointer;
}
.site-burger:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.site-burger__lines { position: relative; width: 22px; height: 14px; }
.site-burger__lines span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--fo-dur) var(--fo-ease), opacity var(--fo-dur-fast) ease;
}
.site-burger__lines span:nth-child(1) { top: 0; }
.site-burger__lines span:nth-child(2) { top: 6px; }
.site-burger__lines span:nth-child(3) { top: 12px; }
.site-burger[aria-expanded="true"] .site-burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-burger[aria-expanded="true"] .site-burger__lines span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.site-burger[aria-expanded="true"] .site-burger__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Ordre desktop : marque · liens · bouton (ordre du code = ordre visuel). */

/* ---------- petites largeurs ---------- */

@media (max-width: 1023px) {
  /* Sans JS : la maquette mobile — marque et bouton sur la première ligne,
     les liens passent en dessous et reviennent à la ligne. */
  .site-nav { order: 3; flex: 1 1 100%; }
  .site-header__cta { order: 2; }
  .site-nav__list { gap: 4px 22px; }

  /* Avec JS : bouton hamburger et panneau plein écran. La classe js-nav
     est posée par un script inline du <head>, avant les feuilles de style :
     attendre fo.js (defer) laisserait la navigation dans le flux au premier
     rendu, puis la retirerait (décalage de mise en page mesuré à 0,117).
     backdrop-filter fait de l'en-tête le bloc conteneur de ses descendants
     en position fixed : le panneau serait alors calé sur l'en-tête et non
     sur la fenêtre. On le retire ici, au profit d'un fond presque opaque. */
  .js-nav .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--color-bg) 97%, transparent);
  }
  .js-nav .site-burger { display: inline-flex; order: 3; }
  .js-nav .site-nav {
    order: 4;
    position: fixed;
    left: 0; right: 0;
    top: var(--fo-menu-top, var(--fo-header-h));
    bottom: 0;
    z-index: 39;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px var(--fo-gutter) 40px;
    background: var(--color-bg);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--fo-dur) var(--fo-ease), transform var(--fo-dur) var(--fo-ease), visibility 0s linear var(--fo-dur);
  }
  .js-nav .site-header.is-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--fo-dur) var(--fo-ease), transform var(--fo-dur) var(--fo-ease), visibility 0s;
  }
  /* Deux cercles du système dans le coin du panneau, peints en fond : des
     pseudo-éléments débordants ajouteraient des barres de défilement. */
  .js-nav .site-nav {
    overflow-x: hidden;
    background-color: var(--color-bg);
    background-image:
      radial-gradient(circle at calc(100% + 40px) calc(100% + 30px), color-mix(in srgb, var(--color-accent-300) 55%, transparent) 0 150px, transparent 151px),
      radial-gradient(circle at calc(100% - 150px) calc(100% + 70px), color-mix(in srgb, var(--color-accent-2-300) 55%, transparent) 0 120px, transparent 121px);
    background-repeat: no-repeat;
  }

  .js-nav .site-nav__list {
    position: relative; z-index: 1;
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    white-space: normal;
  }
  .js-nav .site-nav__list > li { border-bottom: 2px dotted var(--fo-dotted); }
  .js-nav .site-nav__list > li.site-nav__cta { border-bottom: 0; }
  .js-nav .site-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
    font-family: var(--font-heading); font-weight: var(--fo-display-weight);
    font-size: clamp(24px, 6.4vw, 32px); letter-spacing: -0.015em;
  }
  .js-nav .site-nav__link::after { content: "→"; font-weight: 400; color: var(--color-accent-700); }
  .js-nav .site-nav__link[aria-current] { text-decoration: none; color: var(--color-accent-700); }
  .js-nav .site-nav__ink { display: none; }
  .js-nav .site-nav__cta { display: block; padding-top: 26px; }
  .js-nav .site-nav__cta .btn { width: 100%; min-height: 50px; font-size: 16px; }

  /* Entrée en cascade des liens à l'ouverture. */
  .js-nav .site-nav__list > li {
    opacity: 0; transform: translateY(14px);
    transition: opacity var(--fo-dur) var(--fo-ease), transform var(--fo-dur) var(--fo-ease);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .js-nav .site-header.is-open .site-nav__list > li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 55ms); }

  html.fo-menu-open { overflow: hidden; }
}

@media (max-width: 639px) {
  /* Avec JS, le bouton d'alerte passe dans le panneau : la première ligne
     ne tient pas marque + bouton + hamburger à 360 px. */
  .js-nav .site-header__cta { display: none; }
  .site-brand { font-size: 18px; }
}

/* ---------- pied de page ---------- */

.site-footer {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: 14px;
}
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: 16px 20px;
  justify-content: space-between; align-items: baseline;
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: 48px;
}
.site-footer__note { margin: 0; }
.site-footer__claim { display: block; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__links a { color: var(--color-accent-700); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-accent-900); }

/* ---------- sections et têtes de page ---------- */

.section { padding-top: var(--fo-section); }
.section--lg { padding-top: var(--fo-section-lg); }
.section--xl { padding-top: var(--fo-section-xl); }

/* Rendu différé des sections hors écran : le navigateur ne met en page que
   celles qui approchent de la fenêtre. Mesuré sur l'accueil en mobile freiné
   (CPU 4x) : la première mise en page passe d'environ 1,3 s à 0,5 s, et c'est
   elle qui retardait le premier rendu (LCP). Le contenu reste dans le DOM
   (recherche, lecteurs d'écran, ancres). La peinture est confinée à la
   section : vérifié qu'aucun descendant visible n'en dépasse (les formes
   décoratives sont déjà coupées par leurs blocs). La hauteur réservée n'est
   qu'une estimation, remplacée par la vraie une fois la section rendue.   */
main > .section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Colonne 4/8 : titre à gauche, contenu à droite (calendrier, FAQ). */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 6vw, 96px);
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* Tête de section : sur-titre + titre, action éventuelle à droite. */
.section-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 20px; flex-wrap: wrap;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fo-fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent-2-700);
}
.eyebrow--muted { color: var(--fo-muted); }

.section-title {
  font-size: var(--fo-fs-h2);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 12px 0 0;
}
.section-title--lg { font-size: var(--fo-fs-h2-lg); margin-top: 14px; }

/* Tête des pages intérieures (Calendario, Comparador, Guias, Articulo). */
.page-head {
  position: relative;
  padding-top: var(--fo-hero-top);
  padding-bottom: var(--fo-hero-bottom);
}
.page-head__body { position: relative; max-width: min(760px, 64%); }
.page-head__body--wide { max-width: min(860px, 70%); }
.page-title {
  font-size: var(--fo-fs-h1);
  line-height: 1.02; letter-spacing: -0.03em;
  margin: 14px 0 0;
}
.lede {
  font-size: var(--fo-fs-lede);
  line-height: 1.55;
  margin: 22px 0 0;
  max-width: 54ch;
  color: var(--fo-muted);
}
@media (max-width: 760px) {
  .page-head__body, .page-head__body--wide { max-width: 100%; }
}

/* ─── 30-components.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   30 · Composants — tout ce que les gabarits réutilisent.

   Règle : un gabarit (partiels 50 à 60) compose avec ces classes et ne
   crée pas de variante parallèle. Le balisage de référence de chaque
   composant est dans site/_demo/componentes.html.

   Valeurs relevées dans les maquettes Claude Design de la refonte.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Boutons ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }

.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); box-shadow: none; color: var(--color-accent-800); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* Sur fond sombre (bloc CTA) : papier sur encre. */
.btn-light { background: var(--color-bg); color: var(--color-text); }
.btn-light:hover { background: #fff; color: var(--color-text); }

.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
/* Taille des actions principales de page (maquette : 48-50 px, 16 px). */
.btn-lg { min-height: 48px; font-size: 16px; padding: 12px 22px; }

/* ══ Pastilles (pills) ═════════════════════════════════════════════════
   Boutons bascules à aria-pressed : segments « Autónomos / Pymes /
   Gestorías », filtres, motifs du formulaire. Pour un choix exclusif sur
   des radios natives, préférer .seg (DS), qui marche sans JS. */

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font: inherit; font-size: 15px; line-height: 1.2;
  padding: 9px 18px;
  border: 1.5px solid var(--color-text); border-radius: var(--fo-radius-pill);
  background: transparent; color: var(--color-text);
  cursor: pointer; white-space: nowrap;
}
.pill:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.pill[aria-pressed="true"], .pill.is-active { background: var(--color-text); color: var(--color-bg); }

/* Sans contour (segments de l'accueil). */
.pill--flat { border-color: transparent; padding-inline: 16px; }

/* Filtres : fond papier gris, actif en bleu profond. */
.pill--soft { border: 0; font-size: 14px; padding: 7px 14px; background: var(--color-surface); }
.pill--soft:hover { background: var(--color-neutral-300); }
.pill--soft[aria-pressed="true"], .pill--soft.is-active { background: var(--color-accent-800); color: #fff; }

/* Contour bleu (motifs du formulaire de contact). */
.pill--accent { border-color: var(--color-accent-800); color: var(--color-accent-900); }
.pill--accent[aria-pressed="true"], .pill--accent.is-active { background: var(--color-accent-800); border-color: var(--color-accent-800); color: #fff; }

/* Action textuelle en forme de pastille (tri par prix). */
.pill--link { border: 0; font-size: 14px; padding: 7px 14px; color: var(--color-accent-700); }
.pill--link:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* — contrôle segmenté du DS, sur radios natives — */
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt input, .radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ══ Étiquettes et statuts ═════════════════════════════════════════════ */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .02em; line-height: 1.3;
  padding: 3px 10px;
  border-radius: calc(var(--radius-md) * .75);
  white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* Ferme / conditionnel : la distinction qui fonde le site. Une date FERME
   est ancrée au BOE (aplat plein) ; une date CONDITIONNELLE dépend de
   l'Orden Ministerial (pointillés magenta, jamais d'aplat). */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; line-height: 1.2; letter-spacing: .02em;
  padding: 4px 11px 4px 9px;
  border-radius: var(--fo-radius-pill);
  white-space: nowrap;
}
.badge::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
}
.badge--firme { background: var(--color-accent-100); color: var(--color-accent-800); }
.badge--firme::before { background: var(--color-accent); }
.badge--condicional {
  background: transparent; color: var(--color-accent-2-700);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-2-300);
}
.badge--condicional::before { border: 2px dotted var(--color-accent-2); background: transparent; width: 10px; height: 10px; }
.badge--hecho { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.badge--hecho::before { background: var(--color-neutral-500); }

/* Point « en attente » (Orden Ministerial sin publicar). */
.dot-pending {
  display: inline-block; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px dotted var(--color-accent-2);
}

/* ══ Pastilles d'initiale (logos typographiques) ════════════════════════ */

.tile {
  flex: none;
  width: 46px; height: 46px; border-radius: var(--fo-radius-chip);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 20px; line-height: 1;
  background: var(--color-accent); color: #fff;
}
.tile--sm { width: 40px; height: 40px; font-size: 17px; }
.tile--lg { width: 48px; height: 48px; }
.tile--c { background: var(--color-accent); }
.tile--m { background: var(--color-accent-2); }
.tile--k { background: var(--color-text); }

/* ══ Cartes ════════════════════════════════════════════════════════════
   Réservées aux éléments discrets (fiches, programmes, guides), jamais à
   la structure de la page (règle du DS). */

.card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px;
  border-radius: var(--fo-radius-card);
  background: var(--fo-paper);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.card--panel { border-radius: var(--fo-radius-panel); padding: clamp(28px, 4vw, 48px); gap: 0; }
.card--float { box-shadow: var(--shadow-lg); border-radius: var(--fo-radius-panel); padding: clamp(26px, 3.5vw, 44px); }
.card--surface { background: var(--color-surface); box-shadow: none; padding: 24px; gap: 8px; }
.card--tint { background: var(--color-accent-2-100); box-shadow: none; overflow: hidden; }
.card--tint-accent { background: var(--color-accent-100); box-shadow: none; overflow: hidden; }

.card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__title {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 23px; line-height: 1.2; margin: 4px 0 0;
}
.card__title--lg { font-size: var(--fo-fs-h2-card); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.card__text { margin: 0; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.card__meta { font-size: 14px; color: var(--fo-muted); }
.card__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: auto; padding-top: 10px;
}
.card__price { font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 30px; line-height: 1; }
.card__unit { font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
/* Tout le contenu au-dessus des formes décoratives d'une carte teintée. */
.card > :not(.deco) { position: relative; }

/* Grille de cartes (auto-fit, comme dans les maquettes). */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}

/* DS : sous-éléments de carte compacte, conservés. */
.card-kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fo-muted); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ══ Carte de guide (vignette + titre) ═════════════════════════════════ */

.post-card {
  --pc-bg: var(--color-accent-100);
  --pc-shape: var(--color-accent-300);
  --pc-fg: var(--color-accent-900);
  display: flex; flex-direction: column; gap: 12px;
  border-radius: var(--fo-radius-card);
  color: var(--color-text);
}
.post-card:hover { color: var(--color-text); }
.post-card--m { --pc-bg: var(--color-accent-2-100); --pc-shape: var(--color-accent-2-300); --pc-fg: var(--color-accent-2-900); }
.post-card--k { --pc-bg: var(--color-surface); --pc-shape: var(--color-neutral-300); --pc-fg: var(--color-text); }
.post-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--fo-radius-card);
  background: var(--pc-bg);
}
.post-card__shape {
  position: absolute; right: -30px; bottom: -30px;
  width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: var(--pc-shape); mix-blend-mode: multiply;
}
.post-card__big {
  position: absolute; left: 24px; top: 22px;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 54px; line-height: 1; color: var(--pc-fg);
}
.post-card__meta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fo-muted); }
.post-card__title { font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 22px; line-height: 1.25; }

/* ══ Formulaires ═══════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label, .field > label { font-size: 15px; font-weight: 600; color: var(--color-text); }
.field__hint { font-size: 14px; color: var(--fo-muted); }
.field__error { font-size: 14px; color: var(--color-accent-2-700); }

.input {
  width: 100%; min-height: 46px; padding: 8px 12px;
  font: inherit; font-size: 16px; color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 65%, transparent); opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--color-accent-2-700); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}

.radio, .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent); }

/* Champ + bouton sur une ligne (inscription, recherche). */
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.inline-form .input { flex: 1 1 240px; min-height: 48px; }

/* ══ Réponses de quiz ══════════════════════════════════════════════════ */

.choice {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 64px;
  padding: 14px 18px;
  font: inherit; text-align: left; color: var(--color-text);
  background: var(--fo-paper);
  border: 0; border-radius: var(--fo-radius-choice);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-text); }
.choice:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.choice[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-accent), var(--shadow-md); }
.choice__body { flex: 1; min-width: 0; }
.choice__label { display: block; font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 18px; line-height: 1.25; }
.choice__hint { display: block; font-size: 14px; color: var(--fo-muted); }
.choice__arrow { flex: none; font-size: 20px; color: var(--color-accent-700); transition: transform var(--fo-dur-fast) var(--fo-ease); }
.choice:hover .choice__arrow { transform: translateX(4px); }
.choices-stack { display: flex; flex-direction: column; gap: 10px; }

/* Progression du quiz : trois points, l'étape courante s'allonge. */
.steps-dots { display: flex; gap: 6px; }
.steps-dots > span {
  height: 6px; width: 10px; border-radius: 6px;
  background: var(--color-neutral-300);
  transition: width .3s var(--fo-ease), background-color .3s ease;
}
.steps-dots > .is-done { background: var(--color-accent); }
.steps-dots > .is-current { width: 28px; background: var(--color-accent); }

/* ══ Accordéon (FAQ) ═══════════════════════════════════════════════════
   <details> natif : fonctionne sans JS. fo.js anime la hauteur. */

.accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.accordion__item {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background-color .2s ease;
}
.accordion__item[open] { background: var(--color-accent-100); }
.accordion__q {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 26px;
  cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 19px; line-height: 1.3;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q::marker { content: ""; }
.accordion__q:focus-visible { outline-offset: -3px; border-radius: var(--radius-lg); }
/* Le signe + devient − : deux traits, le vertical pivote. */
.accordion__sign {
  position: relative; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-text);
  transition: transform var(--fo-dur) var(--fo-ease), background-color var(--fo-dur-fast) ease;
}
.accordion__sign::before, .accordion__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: var(--color-bg); border-radius: 1px;
  transition: transform var(--fo-dur) var(--fo-ease);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__sign::after { transform: rotate(0deg); }
.accordion__q:hover .accordion__sign { background: var(--color-accent-700); }
.accordion__a {
  padding: 0 26px 24px;
  font-size: 16px; line-height: 1.6;
  color: var(--fo-muted-strong);
}
.accordion__a > * { max-width: 62ch; }
.accordion__a > :last-child { margin-bottom: 0; }

/* ══ Frise verticale à points ══════════════════════════════════════════ */

.timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline__item {
  display: grid;
  grid-template-columns: 150px 28px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 34px;
}
.timeline__date { font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 20px; line-height: 1.3; }
.timeline__rail { position: relative; display: flex; justify-content: center; align-self: stretch; }
.timeline__rail::before {
  content: ""; position: absolute; top: 10px; bottom: -34px;
  border-left: 2px dotted var(--fo-dotted);
}
.timeline__item:last-child .timeline__rail::before { display: none; }
.timeline__dot {
  --dot: var(--color-text);
  position: relative; width: 16px; height: 16px; margin-top: 5px;
  border-radius: 50%; background: var(--dot);
}
.timeline__dot--c { --dot: var(--color-accent); }
.timeline__dot--m { --dot: var(--color-accent-2); }
.timeline__dot--m7 { --dot: var(--color-accent-2-700); }
.timeline__dot--n { --dot: var(--color-neutral-400); }
.timeline__dot--pending { background: var(--color-bg); border: 2px dotted var(--color-accent-2); }
.timeline__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.timeline__title { font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 20px; line-height: 1.3; }
.timeline__text { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.timeline__count { text-align: right; }
.timeline__count-num { font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 28px; line-height: 1; }
.timeline__count-unit { font-size: 13px; color: var(--fo-muted); }

/* Variante « Calendario » : point · texte · compteur, sans colonne date. */
.timeline--compact .timeline__item { grid-template-columns: 22px minmax(0, 1fr) auto; padding-bottom: 28px; }
.timeline--compact .timeline__rail::before { bottom: -28px; }
.timeline--compact .timeline__date { font-size: 21px; }
.timeline--compact .timeline__text { margin-top: 4px; }

@media (max-width: 640px) {
  /* La date passe au-dessus du titre, le fil reste à gauche. */
  .timeline__item { grid-template-columns: 22px minmax(0, 1fr); gap: 4px 16px; padding-bottom: 28px; }
  .timeline__item > .timeline__date { grid-column: 2; grid-row: 1; }
  .timeline__item > .timeline__rail { grid-column: 1; grid-row: 1 / span 2; }
  .timeline__item > .timeline__body { grid-column: 2; }
  .timeline__rail::before { bottom: -28px; }
  .timeline--compact .timeline__item { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .timeline--compact .timeline__item > .timeline__rail { grid-row: 1; }
}

/* ══ Tableaux ══════════════════════════════════════════════════════════
   Un tableau ne fait jamais défiler la page : il défile dans son
   conteneur (.table-wrap), ou s'empile en fiches sous 760 px
   (.table--stack, chaque <td> porte data-label). */

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--fo-radius-card);
}
.table-wrap:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.table-wrap--card { background: var(--fo-paper); box-shadow: var(--shadow-sm); padding: 8px 20px; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  padding: 12px var(--space-2); border-bottom: 1px solid var(--color-divider);
  vertical-align: bottom;
}
.table td {
  padding: 14px var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  vertical-align: top;
}
/* En-tête de ligne (<th scope="row"> dans le tbody : nom du programme,
   date…) : il se lit comme du texte en gras, pas comme une étiquette de
   colonne (ni petites capitales, ni couleur atténuée). */
.table tbody th {
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--color-text);
  padding: 14px var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  vertical-align: top;
}
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr { transition: background-color var(--fo-dur-fast) ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table .n { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

@media (max-width: 760px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
  /* Libellé en bloc au-dessus de la valeur : une grille à deux colonnes
     ferait de chaque nœud enfant du td (texte, <br>, <span>, <a>…) une
     cellule, et le texte glisserait dans la colonne du libellé. */
  .table--stack td { border: 0; padding: 6px 0; display: block; overflow-wrap: anywhere; }
  .table--stack td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fo-muted);
  }
  .table--stack td:not([data-label])::before, .table--stack td[data-label=""]::before { content: none; }
  .table--stack .n { text-align: left; }
  /* L'en-tête de ligne devient le titre de la fiche empilée. */
  .table--stack tbody th {
    display: block; width: 100%;
    padding: 0 0 6px; border: 0;
    font-family: var(--font-heading); font-size: 18px;
  }
  .table--stack tbody tr:last-child { border-bottom: 0; }
}

/* ══ Décor : cercles superposés, trames de points ══════════════════════
   Toujours aria-hidden, jamais cliquables. Animés par 40-motion.css
   (data-anim) et fo.js (data-parallax). */

.deco { position: absolute; pointer-events: none; }
.deco-circle { border-radius: 50%; aspect-ratio: 1; }
.deco--c { background: var(--color-accent); }
.deco--c2 { background: var(--color-accent-200); }
.deco--c3 { background: var(--color-accent-300); }
.deco--c7 { background: var(--color-accent-700); }
.deco--m { background: var(--color-accent-2); }
.deco--m2 { background: var(--color-accent-2-200); }
.deco--m3 { background: var(--color-accent-2-300); }
.deco--m7 { background: var(--color-accent-2-700); }
.deco--k { background: var(--color-text); }
.deco--multiply { mix-blend-mode: multiply; }
.deco--screen { mix-blend-mode: screen; }

.deco-dots {
  --dot-color: var(--color-text);
  --dot-size: 1.6px;
  --dot-step: 11px;
  border-radius: 50%; aspect-ratio: 1;
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent calc(var(--dot-size) + .2px));
  background-size: var(--dot-step) var(--dot-step);
  opacity: .25;
}
.deco-dots--square { border-radius: 0; }
.deco-dots--white { --dot-color: #fff; --dot-size: 1.8px; --dot-step: 12px; opacity: .28; }
.deco-dots--c { --dot-color: var(--color-accent); --dot-size: 2px; --dot-step: 14px; opacity: .4; }
.deco-dots--m { --dot-color: var(--color-accent-2); --dot-size: 2px; --dot-step: 14px; opacity: .35; }

/* Le trio des têtes de page : deux cercles qui se croisent + une trame. */
.deco-cluster {
  position: absolute; right: -4%; top: 10px;
  width: clamp(200px, 28vw, 420px); aspect-ratio: 1;
  pointer-events: none;
}
.deco-cluster > span { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.deco-cluster__a { left: 0; top: 14%; width: 62%; background: var(--color-accent-300); mix-blend-mode: multiply; }
.deco-cluster__b { left: 32%; top: 0; width: 62%; background: var(--color-accent-2-300); mix-blend-mode: multiply; }
.deco-cluster__dots {
  left: 18%; top: 40%; width: 60%;
  background-image: radial-gradient(var(--color-text) 1.6px, transparent 1.8px);
  background-size: 11px 11px; opacity: .25;
}
.deco-cluster--cool .deco-cluster__a { background: var(--color-accent-200); }
.deco-cluster--cool .deco-cluster__b { background: var(--color-accent-300); }
@media (max-width: 760px) {
  .deco-cluster { right: -18%; top: -10px; width: 190px; opacity: .6; }
}

/* ══ Hero à bloc de couleur arrondi (accueil) ══════════════════════════ */

.hero-block {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  padding: clamp(28px, 5vw, 76px) clamp(20px, 5vw, 72px);
  border-radius: var(--fo-radius-hero);
  background: var(--color-accent-700);
  color: #fff;
}
.hero-block > :not(.deco) { position: relative; min-width: 0; }
.hero-block__title {
  font-size: var(--fo-fs-display);
  line-height: .98; letter-spacing: -0.04em;
  margin: 0; color: #fff;
}
.hero-block__lede { font-size: var(--fo-fs-lede); line-height: 1.55; margin: 24px 0 0; max-width: 46ch; }
/* Liens du texte posé sur l'aplat (pas ceux de la carte du quiz). */
.hero-block__lede a, .hero-block__title a { color: #fff; text-decoration: underline; text-decoration-color: color-mix(in srgb, #fff 50%, transparent); }

/* Le tour « y cuándo? » : italique vraie, graisse de texte. */
.is-soft { font-style: italic; font-weight: 400; }

/* Carte posée sur le hero (quiz). */
.hero-card {
  position: relative; min-width: 0;
  scroll-margin-top: 120px;
  background: var(--color-bg); color: var(--color-text);
  border-radius: var(--fo-radius-quiz);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 3vw, 40px);
}
.hero-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero-card__step { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fo-muted); }
.hero-card__q { font-size: var(--fo-fs-h2-quiz); line-height: 1.1; letter-spacing: -0.02em; margin: 18px 0 22px; }

/* Rangée « Respaldado por » sous le hero. */
.sources-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  font-size: 14px; color: var(--fo-muted);
}
.sources-row__label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.sources-row__pending { display: flex; align-items: center; gap: 8px; }

/* ══ Bloc CTA sombre ═══════════════════════════════════════════════════ */

.cta-dark {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-text); color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 88px);
}
.cta-dark__body { position: relative; max-width: min(620px, 100%); }
.cta-dark__title { font-size: var(--fo-fs-h2-xl); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--color-bg); }
.cta-dark__text { font-size: 18px; line-height: 1.55; margin: 20px 0 0; opacity: .85; }
.cta-dark__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.cta-dark a:not(.btn) { color: var(--color-accent-300); }
.cta-dark a:not(.btn):hover { color: var(--color-bg); }
.cta-dark :focus-visible { outline-color: var(--color-accent-300); }

/* ══ Encadrés d'article ════════════════════════════════════════════════ */

.callout {
  display: flex; gap: 18px;
  margin: 8px 0 26px;
  padding: 26px 28px;
  border-radius: var(--fo-radius-card);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}
.callout__icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
}
.callout__body { font-size: 17px; line-height: 1.6; }
.callout__body > :last-child { margin-bottom: 0; }
.callout--m { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.callout--m .callout__icon { background: var(--color-accent-2); }

/* Sommaire et encadrés latéraux. */
.aside-card {
  padding: 26px;
  border-radius: var(--fo-radius-card);
  background: var(--fo-paper);
  box-shadow: var(--shadow-md);
}
.aside-card--surface { background: var(--color-surface); box-shadow: none; }
.aside-card__title { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.aside-card__list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; }
.aside-card__list a { text-decoration: none; }
.aside-card__list a.is-active { color: var(--color-accent-900); font-weight: 600; }

/* Carte compte à rebours (magenta). */
.countdown-card {
  position: relative; overflow: hidden;
  padding: 26px;
  border-radius: var(--fo-radius-card);
  background: var(--color-accent-2); color: #fff;
}
.countdown-card > :not(.deco) { position: relative; }
.countdown-card__num { font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.countdown-card__label { font-size: 15px; margin-top: 6px; }
.countdown-card--c { background: var(--color-accent-700); }

/* ══ Fil d'Ariane (existant, restylé) ══════════════════════════════════
   Il vit dans le <main> : ce qui vit hors du <main> ne part pas avec
   push_pages.py. `grid-column` est indispensable dans .ficha / .qlayout,
   qui sont des grilles. */

.crumbs {
  grid-column: 1 / -1;
  /* Au-dessus du décor : le .deco-cluster de la .page-head qui suit
     déborde vers le haut (top négatif en mobile) et recouvrait le fil. */
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding-top: clamp(18px, 2vw, 26px);
  font-size: 15px; line-height: 1.4;
  color: var(--fo-muted);
}
.crumbs a { color: var(--color-accent-700); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-900); }
.crumbs span[aria-hidden] { color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.crumbs [aria-current] { color: var(--fo-muted); }
.ficha:has(.crumbs) { padding-top: 0; }
/* Fil posé juste avant la tête de page (build_jsonld.py) : en mobile, le
   trio décoratif descend sous le fil au lieu de remonter dessus. */
@media (max-width: 760px) {
  .crumbs + .page-head .deco-cluster { top: 24px; opacity: .4; }
}

/* ══ Méta d'article ════════════════════════════════════════════════════ */

.meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  font-size: 15px; color: var(--fo-muted);
}
.meta-row__verified { display: flex; align-items: center; gap: 6px; }
.meta-row__verified::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

/* ─── 40-motion.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   40 · Mouvement — keyframes, survols, apparitions.

   Trois règles :
   1. On n'anime que transform et opacity (et translate / scale, qui en
      sont des alias) : aucune animation ne décale la mise en page (CLS).
   2. Tout état caché n'existe que sous html.js (classe posée par fo.js) :
      si le script ne charge pas, le contenu est visible.
   3. prefers-reduced-motion: reduce coupe tout, en CSS comme en JS.

   Les animations sont volontairement plus marquées que la maquette
   (validé le 24/09) : amplitudes plus grandes, cascade plus lisible.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- keyframes de la maquette ---------- */

@keyframes fo-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -30px) scale(1.06); }
}
@keyframes fo-float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 22px) scale(.95); }
}
/* La trame dérive : on déplace un calque plus grand que la forme, plutôt
   que background-position (qui repeint à chaque image). */
@keyframes fo-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-14px, 10px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes fo-spin { to { transform: rotate(360deg); } }
@keyframes fo-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 9px transparent; opacity: .8; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
@keyframes fo-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes fo-pop {
  0% { opacity: 0; transform: scale(.92); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* ---------- formes flottantes (data-anim) ---------- */

[data-anim="float"] { animation: fo-float 11s ease-in-out infinite; }
[data-anim="float2"] { animation: fo-float2 14s ease-in-out infinite; }
[data-anim="drift"] { animation: fo-drift 18s ease-in-out infinite; }
[data-anim="spin"] { animation: fo-spin 60s linear infinite; }
[data-anim="pulse"] { color: var(--color-accent-300); animation: fo-pulse 2.2s ease-out infinite; }
/* Décalage de phase, pour que deux formes voisines ne battent pas ensemble. */
[data-anim-delay="1"] { animation-delay: -3s; }
[data-anim-delay="2"] { animation-delay: -6s; }
[data-anim-delay="3"] { animation-delay: -9s; }

/* ---------- survols : cartes soulevées, vignettes qui zooment ---------- */

/* Le soulèvement passe par la propriété translate, pas par transform :
   les apparitions (data-reveal, cascade comprise) remettent transform à
   none une fois jouées, et l'emporteraient sur le survol. translate se
   compose avec transform au lieu de le remplacer : une carte peut
   apparaître en cascade puis se soulever au survol. */
[data-lift] {
  transition: translate .35s var(--fo-ease), box-shadow .35s ease;
}
[data-lift]:hover,
[data-lift]:focus-visible {
  translate: 0 -6px;
  box-shadow: var(--shadow-lg);
}
[data-lift] [data-zoom] { transition: transform .6s var(--fo-ease); }
[data-lift]:hover [data-zoom],
[data-lift]:focus-visible [data-zoom] { transform: scale(1.14) translate(-7%, -7%); }

/* ---------- apparition au défilement (fo.js) ----------
   data-reveal=""        fondu + montée (défaut)
   data-reveal="fade"    fondu seul
   data-reveal="left"    arrive de la gauche
   data-reveal="right"   arrive de la droite
   data-reveal="zoom"    léger agrandissement
   data-reveal="stagger" les enfants directs apparaissent en cascade
   data-reveal-delay="120" retard en ms (sinon cascade automatique)       */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--fo-dur-slow) var(--fo-ease),
    transform var(--fo-dur-slow) var(--fo-ease);
  transition-delay: var(--fo-delay, 0ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

.js [data-reveal="stagger"] { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s var(--fo-ease),
    transform .7s var(--fo-ease);
  transition-delay: calc(var(--fo-delay, 0ms) + var(--i, 0) * 90ms);
}
.js [data-reveal="stagger"].is-revealed > * { opacity: 1; transform: none; }

/* Carte soulevable dans une apparition : la transition de l'apparition
   (plus spécifique) remplaçait celle du survol. On garde les deux : la
   cascade sur opacity/transform, le survol sur translate/box-shadow. */
.js [data-reveal][data-lift] {
  transition:
    opacity var(--fo-dur-slow) var(--fo-ease),
    transform var(--fo-dur-slow) var(--fo-ease),
    translate .35s var(--fo-ease),
    box-shadow .35s ease;
  transition-delay: var(--fo-delay, 0ms), var(--fo-delay, 0ms), 0ms, 0ms;
}
.js [data-reveal="stagger"] > [data-lift] {
  transition:
    opacity .7s var(--fo-ease),
    transform .7s var(--fo-ease),
    translate .35s var(--fo-ease),
    box-shadow .35s ease;
  transition-delay:
    calc(var(--fo-delay, 0ms) + var(--i, 0) * 90ms),
    calc(var(--fo-delay, 0ms) + var(--i, 0) * 90ms),
    0ms, 0ms;
}

/* ---------- entrée du hero en cascade ----------
   [data-hero] contient un [data-hero-title] puis des [data-hero-item].

   L'entrée est une animation CSS, lancée au premier rendu sous html.js-nav
   (classe posée par le script inline du <head>, jamais différé) : elle ne
   dépend donc pas de l'heure d'arrivée de fo.js (defer, parfois retardé
   par un optimiseur). Sans JS du tout, pas de js-nav : rien n'est animé.

   LCP : le titre et les paragraphes d'introduction (<p>) sont l'élément LCP
   des gabarits. Ils sont peints dès la première image : jamais d'opacité 0
   au départ, sinon le navigateur ne compte le LCP qu'à la fin du fondu
   (mesuré : +1,3 à 1,8 s en mobile freiné). Le titre part d'une opacité
   partielle, les <p> ne font que glisser. Seuls les éléments secondaires
   (surtitre, méta, cartes…) partent de 0.

   Titre mot à mot : si fo.js s'exécute AVANT le premier rendu, il découpe
   le titre en .fo-word (le titre passe en .fo-split) et recalcule les
   délais des éléments selon le nombre de mots. S'il arrive après, le titre
   entre d'un bloc : découper un titre déjà affiché le ferait pâlir.      */
@keyframes fo-hero-in {
  from { opacity: var(--fo-hero-o, 0); transform: var(--fo-hero-t, translateY(30px)); }
}
.fo-word { display: inline-block; }
.js-nav [data-hero] [data-hero-title],
.js-nav [data-hero] [data-hero-item],
.js-nav [data-hero] .fo-word {
  animation: fo-hero-in .9s var(--fo-ease-out) backwards;
  animation-delay: var(--fo-delay, 350ms);
}
.js-nav [data-hero] [data-hero-title] { --fo-hero-o: .35; --fo-hero-t: translateY(.25em); --fo-delay: 0ms; }
.js-nav [data-hero] [data-hero-title].fo-split { animation: none; }
.js-nav [data-hero] .fo-word {
  --fo-hero-o: .35; --fo-hero-t: translateY(.45em) rotate(2deg);
  transform-origin: 0 100%;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* Délais par défaut (sans fo.js) : les éléments qui suivent le titre
   entrent l'un après l'autre ; fo.js les remplace par des délais calés
   sur le nombre de mots quand il découpe le titre.                       */
.js-nav [data-hero] [data-hero-title] ~ [data-hero-item] { --fo-delay: 350ms; }
.js-nav [data-hero] [data-hero-title] ~ [data-hero-item] ~ [data-hero-item] { --fo-delay: 490ms; }
.js-nav [data-hero] [data-hero-title] ~ [data-hero-item] ~ [data-hero-item] ~ [data-hero-item] { --fo-delay: 630ms; }
.js-nav [data-hero] p[data-hero-item] { --fo-hero-o: 1; --fo-hero-t: translateY(18px); }
.js-nav [data-hero] [data-hero-item="card"] { --fo-hero-t: translateY(40px) scale(.97); --fo-delay: 600ms; }
/* Élément qui porte le H1 (carte-question du parcours ¿Me afecta?) : son
   texte est l'élément LCP, il ne part donc pas de 0.                      */
.js-nav [data-hero] [data-hero-item]:has(h1) { --fo-hero-o: .35; }

/* ---------- compteurs ---------- */

[data-count-to], [data-countdown] { font-variant-numeric: tabular-nums lining-nums; }
.js [data-count-to].is-counting, .js [data-countdown].is-counting { display: inline-block; }

/* ---------- transitions de quiz (FO.swap) ---------- */

.fo-swap-out { opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease; }
.fo-swap-in { animation: fo-in .45s var(--fo-ease) both; }
.fo-pop { animation: fo-pop .5s var(--fo-ease) both; }

/* ---------- parallaxe (fo.js pose la propriété translate) ---------- */

[data-parallax] { will-change: translate; }

/* ---------- réduction du mouvement ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { animation: none !important; }
  .js [data-reveal], .js [data-reveal] > * {
    opacity: 1 !important; transform: none !important;
  }
  [data-hero] [data-hero-title], [data-hero] [data-hero-item], [data-hero] .fo-word { animation: none !important; }
  [data-lift]:hover, [data-lift]:focus-visible { translate: none; }
  .btn:hover, .choice:hover { transform: none; }
  [data-lift]:hover [data-zoom] { transform: none; }
  [data-parallax] { translate: none !important; }
}

/* À l'impression, tout est visible. */
@media print {
  .js [data-reveal], .js [data-reveal] > * { opacity: 1 !important; transform: none !important; }
  [data-hero] [data-hero-title], [data-hero] [data-hero-item], [data-hero] .fo-word { animation: none !important; }
  [data-anim] { animation: none !important; }
  .site-rail, .site-header, .site-footer, .deco, .deco-cluster { display: none !important; }
}

/* ─── 45-legacy.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   45 · Legacy — ce qui reste des classes d'avant la refonte.

   Toutes les pages sont migrées vers les partiels 00 à 60. Ne subsistent
   ici que les classes encore émises par des pages écrites à la main
   (articles, page de l'Orden Ministerial, privacidad), vérifiées par grep
   sur site/**/*.html, site/*.py, assets/**/*.js et le thème le 24/09/2026 :

     .kicker        sur-titre dans le corps des articles
     .gotcha        encart « aquí se equivoca todo el mundo » (articles)
     .tablenote     note sous tableau (articles)
     .legalbase*    bloc « base legal » (articles, Orden, build_guias.py)
     .verdict__actions  boutons de fin d'article
     .idcard        fiche d'identité de l'éditeur (privacidad)
     .copybox       texte à copier-coller (articles)

   Retirés à l'intégration (plus aucun balisage ne les émet) : anciens
   en-têtes et pieds (.masthead, .qhead, .rail, .foot : build_layout.py les
   remplace), .hero, .pricetable, .tablewrap, .stub, .altlinks, .ficha__*,
   .doc, .legal*, .log*, parcours .qlayout/.qrecap/.choices/.verdict__*,
   outils .toolbox/.toolout/.toollist/.quiz/.quizres.

   Avant d'ajouter une page, composer avec 20-layout et 30-components ;
   quand une de ces classes n'est plus émise, retirer son bloc ici.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- petits intertitres ---------- */

.kicker {
  font-size: clamp(11.5px, 0.95vw, 13.5px); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 14px;
}

/* ---------- encart « ici tout le monde se trompe » ---------- */

.gotcha { margin-top: clamp(20px, 2.1vw, 30px); max-width: 560px; font-size: clamp(16px, 1.25vw, 17px); line-height: 1.5; }

/* ---------- note sous tableau ---------- */

.tablenote { display: flex; gap: clamp(24px, 4.2vw, 60px); margin-top: 30px; align-items: start; flex-wrap: wrap; }
.tablenote > div { font-size: 16.5px; line-height: 1.55; max-width: 520px; }

@media (max-width: 1080px) {
  .tablenote { gap: 26px; }
}

/* ---------- base légale et actions de fin d'article ---------- */

.verdict__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.verdict__actions .btn { font-size: 17px; padding: 14px 22px; }

.legalbase { padding-top: 8px; font-size: 16px; line-height: 1.5; }
.legalbase__list { display: flex; flex-direction: column; gap: 12px; }
.legalbase__src { color: var(--color-neutral-700); }
.legalbase__rev { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-divider); color: var(--color-neutral-800); }

/* ---------- fiche d'identité (privacidad) ----------
   Libellé / valeur. Le libellé reste en gris, la valeur porte
   l'information : c'est elle qu'on vient chercher. */

.idcard { margin: 0 0 18px; display: grid; grid-template-columns: max-content 1fr; gap: 7px 24px; font-size: 16.5px; }
.idcard dt { color: var(--color-neutral-700); }
.idcard dd { margin: 0; }
@media (max-width: 560px) {
  .idcard { grid-template-columns: 1fr; gap: 1px; }
  .idcard dt { margin-top: 12px; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; }
  .idcard dt:first-child { margin-top: 0; }
}

/* ---------- bloc « à copier-coller » ----------
   Traitement de presse : filet plein en haut, texte un peu plus grand. */

.copybox {
  margin: 20px 0 24px; max-width: 62ch;
  border-top: 3px solid var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  padding: 14px 0 16px;
}
.copybox p { margin: 8px 0 0; font-size: 18px; line-height: 1.55; }

/* ─── 50-home.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   50-home · Accueil (index.html), maquette « Accueil v2 »
   Lot 2A de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Ce partiel n'appartient qu'à ce gabarit : composer d'abord avec les
   classes de 20-layout et 30-components (voir site/_demo/componentes.html),
   n'écrire ici que ce qui est propre à la page. Retirer de 45-legacy.css
   les blocs que ce gabarit remplace.

   Blocs générés par site/build_home.py : cartes du comparateur, vignettes
   des guides, FAQ. Interactions : site/assets/fo.js (quiz, onglets).
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- hero ----------
   La maquette pose le bloc de couleur dans une colonne de 1400 px avec une
   marge de 12 à 28 px : il déborde donc de la colonne de texte (1196 px à
   1440). Largeur visée : min(1344 px, fenêtre moins deux marges). Les
   marges négatives se calculent sur la largeur du <main> (100 %). */
.home-hero {
  --home-hero-gap: clamp(12px, 2vw, 28px);
  margin-inline: max(calc((100% - 1344px) / 2), calc((100% - 100vw) / 2 + var(--home-hero-gap)));
  padding-top: clamp(8px, 1.5vw, 20px);
}
.home-hero__text { align-self: center; }
.home-hero .hero-block__lede strong { font-weight: 700; }
.home-hero__sub { font-size: clamp(16px, 1.25vw, 18px); margin-top: 16px; opacity: .88; }
.home-hero__sources { padding: 18px clamp(8px, 4vw, 60px) 0; }
.home-hero__meta { color: var(--fo-muted); }
.home-hero__sources a { text-decoration: none; }
.home-hero__sources a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- quiz ---------- */
.home-quiz__stage { min-height: 0; }
.home-quiz__panel .hero-card__q:focus { outline: none; }
.home-quiz__tile-d { background: var(--color-accent-700); }
.home-quiz__back { margin-top: 14px; }
.home-quiz__note { margin: 18px 0 0; font-size: 14px; line-height: 1.45; color: var(--fo-muted); }
/* Sur l'aplat bleu, la carte reste lisible même très étroite. */
@media (max-width: 400px) {
  .home-quiz .choice { gap: 12px; padding: 12px 14px; }
  .home-quiz .choice__label { font-size: 17px; }
}

/* ---------- textes d'introduction des sections ---------- */
.home-intro {
  font-size: 17px; line-height: 1.6;
  margin: 20px 0 0;
  max-width: 60ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.home-intro__cta { margin-top: 28px; }

/* ---------- calendrier ---------- */
.home-cal .timeline__text a { color: var(--color-accent-700); }
.home-cal__count {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin: 10px 0 0;
  padding: 6px 12px;
  border-radius: var(--fo-radius-pill);
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  font-size: 14px;
}
.home-cal__num {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 20px; line-height: 1;
}

/* ---------- comparateur ---------- */
.home-prog__intro { margin-top: 18px; }
.home-prog__panels { margin-top: 30px; }
.home-prog__panel + .home-prog__panel { margin-top: 44px; }
/* Onglets actifs (fo.js) : un seul panneau visible, pas d'écart. */
.home-prog__panels.is-tabbed .home-prog__panel + .home-prog__panel { margin-top: 0; }
.home-prog__rule {
  margin: 0 0 18px;
  font-size: 15px; line-height: 1.55;
  max-width: 80ch;
  color: var(--fo-muted);
}
.home-prog__rule strong { color: var(--color-text); }
.home-prog__tabs { flex-wrap: wrap; }
.home-prog__afil { margin: 22px 0 0; font-size: 14px; color: var(--fo-muted); max-width: 80ch; }
.home-prog__more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.home-card__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.home-card .card__foot { flex-wrap: wrap; align-items: flex-end; }
.home-card__price { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-card__per { font-size: 13px; line-height: 1.35; color: var(--fo-muted); }
.home-card__link { font-size: 15px; white-space: nowrap; text-decoration: none; }

/* ---------- guides ---------- */
.home-guias .section-head { margin-bottom: 30px; }
.home-guias__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px var(--space-6);
}
.home-guias .post-card { text-decoration: none; }

/* ---------- index des fiches ---------- */
.home-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.home-chip {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--fo-radius-pill);
  background: var(--fo-paper);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  font-size: 15px; text-decoration: none;
  transition: transform var(--fo-dur-fast) var(--fo-ease), box-shadow var(--fo-dur-fast) ease, color var(--fo-dur-fast) ease;
}
.home-chip:hover { color: var(--color-accent-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.home-analisis__sub {
  margin: 36px 0 0;
  font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fo-muted);
}
.home-links { margin: 12px 0 0; padding: 0; list-style: none; }
.home-links li { border-bottom: 2px dotted var(--fo-dotted); }
.home-links a {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 18px; line-height: 1.3;
  color: var(--color-text); text-decoration: none;
}
.home-links a::after { content: "→"; flex: none; font-weight: 400; color: var(--color-accent-700); transition: transform var(--fo-dur-fast) var(--fo-ease); }
.home-links a:hover { color: var(--color-accent-700); }
.home-links a:hover::after { transform: translateX(4px); }

/* ---------- FAQ ---------- */
.home-faq .accordion__a p { margin: 0 0 12px; }
.home-faq .accordion__a a { color: var(--color-accent-700); }

@media (prefers-reduced-motion: reduce) {
  .home-chip:hover { transform: none; }
  .home-links a:hover::after { transform: none; }
}

/* ─── 51-fechas.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   51-fechas · Fechas clave (fechas.html) et page de l'Orden Ministerial, maquette « Calendario »
   Lot 2B de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Ce partiel n'appartient qu'à ce gabarit : composer d'abord avec les
   classes de 20-layout et 30-components (voir site/_demo/componentes.html),
   n'écrire ici que ce qui est propre à la page. Retirer de 45-legacy.css
   les blocs que ce gabarit remplace.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Fechas clave ══════════════════════════════════════════════════════ */

/* Ligne « Revisado » sous le chapô : date de revue et liens de contrôle. */
.fechas-rev {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin: 26px 0 0; max-width: 68ch;
  font-size: 15.5px; line-height: 1.55; color: var(--fo-muted-strong);
}
.fechas-rev__label {
  font-size: var(--fo-fs-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700);
}

/* Les deux panneaux côte à côte : ferme à gauche, conditionnel à droite. */
.fechas-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.fechas-panel { position: relative; }
.fechas-panel > :not(.deco) { position: relative; }
.fechas-panel__list { margin-top: 30px; }
/* Les dates sont des titres (h3) : on neutralise la marge des titres. */
.fechas-panel .timeline__date { margin: 0; letter-spacing: -0.01em; }
.fechas-panel .timeline__text strong { font-weight: 600; }
.fechas-src { display: block; margin-top: 4px; font-size: 14px; color: var(--fo-muted); }
.fechas-panel .timeline__count-num { font-size: clamp(28px, 2.6vw, 36px); color: var(--color-accent-700); }
.fechas-panel .timeline__item:nth-child(2) .timeline__count-num { color: var(--color-accent-2-700); }

.fechas-panel__foot {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  margin-top: auto; padding-top: 6px;
}
.fechas-panel__foot .btn { gap: 10px; }
.fechas-ics__icon { flex: none; }
.fechas-panel__hint { font-size: 14px; color: var(--fo-muted); max-width: 32ch; }

/* Panneau magenta : tout ce qui dépend de l'Orden. */
.fechas-panel--b2b .timeline__text { color: var(--color-accent-2-900); }
.fechas-panel--b2b .timeline__dot--pending { background: var(--color-accent-2-100); }
.fechas-panel__kicker {
  margin: 18px 0 0;
  font-size: var(--fo-fs-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-2-700);
}
.fechas-panel__punch {
  margin: auto 0 0; padding-top: 18px;
  border-top: 2px dotted color-mix(in srgb, var(--color-accent-2) 45%, transparent);
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4;
  color: var(--color-accent-2-900);
}

/* Deux colonnes d'explication sous les panneaux. */
.fechas-explain__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
}
.fechas-explain__title {
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.fechas-explain p { font-size: clamp(16px, 1.3vw, 17.5px); line-height: 1.6; max-width: 62ch; }
.fechas-explain p:last-child { margin-bottom: 0; }

/* Aperçu : les trois dates telles qu'elles s'afficheraient. */
.fechas-preview {
  margin: 4px 0 22px; padding: 18px 22px;
  border-radius: var(--fo-radius-card);
  background: var(--color-surface);
}
.fechas-preview__label {
  font-size: var(--fo-fs-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fo-muted);
}
.fechas-preview__list {
  position: relative;
  display: flex; justify-content: space-between; gap: 12px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
/* Le fil qui relie les trois points. */
.fechas-preview__list::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 12px;
  border-top: 2px dotted var(--fo-dotted);
}
.fechas-preview__list li { position: relative; display: flex; flex-direction: column; gap: 8px; }
.fechas-preview__list li:nth-child(2) { align-items: center; }
.fechas-preview__list li:last-child { align-items: flex-end; }
.fechas-preview__date { font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: clamp(15px, 1.3vw, 18px); }
.fechas-preview__caption { margin: 12px 0 0 !important; font-size: 14px !important; color: var(--fo-muted); }

/* « Lo que ya ha pasado » : cartes datées. */
.fechas-past__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
  margin: 30px 0 0; padding: 0; list-style: none;
}
.fechas-past__date { font-size: 14px; color: var(--fo-muted); font-variant-numeric: tabular-nums lining-nums; }
.fechas-past__title { margin: 0; font-size: 20px; line-height: 1.25; }
.fechas-past__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fo-muted); }

@media (max-width: 900px) {
  .fechas-explain__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .fechas-panel .timeline__count-num { font-size: 26px; }
  .fechas-preview { padding: 16px; }
}

/* ══ Orden Ministerial ═════════════════════════════════════════════════ */

/* Titre long (le statut est dans le titre) : un cran sous le h1 standard. */
.orden-head__title { font-size: clamp(34px, 4.4vw, 62px); }
.orden-head__lede { max-width: 66ch; }

/* Bloc d'état, mis en avant sous la tête de page. */
.orden-status { position: relative; gap: 14px; }
.orden-status > :not(.deco) { position: relative; }
.orden-status__row { display: flex; gap: 16px; align-items: flex-start; }
.orden-status__dot {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--fo-paper);
}
.orden-status__dot .dot-pending { width: 16px; height: 16px; }
/* Point « publiée » (Orden HAC/1028/2026 au BOE depuis le 05/10/2026). */
.orden-status__dot .dot-ok { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); }
.orden-status__text {
  margin: 0;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.35;
  color: var(--color-accent-2-900);
}
.orden-status__note { margin: 0; padding-left: 54px; font-size: 16px; line-height: 1.55; color: var(--color-accent-2-900); max-width: 72ch; }

/* Colonne de lecture + sommaire collant à droite. */
.orden-layout {
  display: grid;
  grid-template-columns: minmax(0, 780px) minmax(220px, 280px);
  justify-content: space-between;
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 70px);
}
.orden-toc {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: calc(var(--fo-header-h) + 24px);
}
.orden-toc .aside-card__list { font-size: 15px; }
.orden-prose { grid-column: 1; grid-row: 1; min-width: 0; font-size: 17px; line-height: 1.62; }

.orden-prose h2 {
  font-size: clamp(25px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.02em;
  margin: clamp(48px, 5vw, 70px) 0 16px;
}
.orden-prose > h2:first-child { margin-top: 0; }
.orden-prose h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; margin: 30px 0 10px; }
.orden-prose p { margin: 0 0 16px; max-width: 68ch; }
.orden-prose strong { font-weight: 600; }
.orden-prose code { font-size: .86em; overflow-wrap: anywhere; }

/* Étapes numérotées : pastilles rondes, le texte garde sa mesure. */
.orden-steps {
  counter-reset: orden-step;
  display: flex; flex-direction: column; gap: 18px;
  margin: 8px 0 22px; padding: 0; list-style: none; max-width: 68ch;
}
.orden-steps > li {
  counter-increment: orden-step;
  position: relative; padding-left: 50px;
}
.orden-steps > li::before {
  content: counter(orden-step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 16px;
}

/* La phrase qui fonde tout le calendrier : entrée en vigueur, pas publication. */
.orden-key {
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--color-accent-2);
}

/* Tableaux : le programme ou la date est un en-tête de ligne (th), stylé
   par le composant commun .table (30-components). */
.orden-table { margin: 24px 0 26px; }
.orden-table .table td { line-height: 1.5; }
/* Colonne de lecture étroite : la citation garde une largeur lisible. */
.orden-table .table td:nth-child(2) { min-width: 15em; }
.orden-table .table { font-size: 14.5px; }
.orden-table .table .num { white-space: nowrap; }

/* Ce que la page ne sait pas : liste numérotée dans l'encart magenta. */
.orden-unknowns { margin: 10px 0 20px; }
.orden-unknowns ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.orden-unknowns li::marker { color: var(--color-accent-2-700); font-weight: 600; }

.orden-legal { margin-top: 10px; gap: 0; }
.orden-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

@media (max-width: 1024px) {
  .orden-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .orden-toc { grid-column: 1; position: static; }
  .orden-prose { grid-row: 2; }
}
@media (max-width: 760px) {
  .orden-status__note { padding-left: 0; }
  .orden-table .table .num { white-space: normal; }
  .orden-table .table td:nth-child(2) { min-width: 0; }
}

/* ─── 52-comparador.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   52-comparador · Comparateur, precios, programas gratis, declaración responsable, maquette « Comparador »
   Lot 2C de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Ce partiel n'appartient qu'à ce gabarit : composer d'abord avec les
   classes de 20-layout et 30-components (voir site/_demo/componentes.html),
   n'écrire ici que ce qui est propre à la page. Retirer de 45-legacy.css
   les blocs que ce gabarit remplace.

   Préfixe .cmp- : tout ce qui suit ne sert qu'aux quatre pages du lot
   (comparador, precios, programas-facturacion-gratis,
   declaracion-responsable).
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Tête de page ══════════════════════════════════════════════════════ */

/* Titres longs (page des plans gratuits) : un cran sous le h1 intérieur. */
.cmp-title--long { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.05; }

/* ══ Barre de filtres (maquette : profils à gauche, filtres à droite) ══ */

.cmp-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px;
}
.cmp-bar[hidden], .cmp-sort[hidden] { display: none; }
/* Avec JS (html.js-nav, posé par le script inline du <head>) : la place de
   la barre est réservée dès le premier rendu, invisible. comparador.js
   (defer) ne fait que la rendre visible, sans pousser les cartes vers le
   bas (décalage de mise en page mesuré à 0,056 en mobile freiné).       */
.js-nav .cmp-bar[hidden], .js-nav .cmp-sort[hidden] { display: flex !important; visibility: hidden; }
.cmp-bar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-bar__label { font-size: 15px; color: var(--fo-muted); margin-right: 4px; }

.cmp-count { margin: 22px 0 0; font-size: 15px; line-height: 1.5; color: var(--fo-muted); }
.cmp-count strong { color: var(--color-text); font-weight: 600; }

/* ══ Liste de cartes horizontales ══════════════════════════════════════ */

.cmp-list {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.cmp-list__item[hidden] { display: none; }

.cmp-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) minmax(0, 1.1fr) auto;
  gap: 18px 24px; align-items: center;
  padding: 22px 26px;
  border-radius: var(--fo-radius-card);
  background: var(--fo-paper);
  box-shadow: var(--shadow-sm);
}
.cmp-card__id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cmp-card__who { min-width: 0; }
.cmp-card__name {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 20px; line-height: 1.2; margin: 0;
}
.cmp-card__sub { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--fo-muted); }
.cmp-card__tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cmp-card__tags .tag { white-space: normal; text-decoration: none; }
.cmp-card__tags a.tag:hover { filter: brightness(.96); }
.cmp-card__price { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-card__amount { font-size: 28px; }
.cmp-card__per { font-size: 14px; line-height: 1.4; color: var(--fo-muted); }
.cmp-card__promo { font-size: 13px; line-height: 1.4; color: var(--color-accent-2-700); }
.cmp-card__cta { display: flex; justify-content: flex-end; }

@media (max-width: 1100px) {
  /* Deux colonnes : identité | prix, puis étiquettes | bouton. */
  .cmp-card { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .cmp-card__tags { grid-column: 1; }
  .cmp-card__price { grid-column: 2; grid-row: 1; text-align: right; align-items: flex-end; }
  .cmp-card__cta { grid-column: 2; grid-row: 2; align-self: end; }
}
@media (max-width: 600px) {
  .cmp-card { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 14px; }
  .cmp-card__tags, .cmp-card__price, .cmp-card__cta { grid-column: 1; grid-row: auto; }
  .cmp-card__price { text-align: left; align-items: flex-start; }
  .cmp-card__cta { justify-content: stretch; }
  .cmp-card__cta .btn { width: 100%; }
}

.cmp-empty { margin: 16px 0 0; font-size: 18px; color: var(--fo-muted); }
.cmp-empty[hidden] { display: none; }
.cmp-foot { margin: 26px 0 0; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--fo-muted); }

/* ══ Encarts sous la liste ═════════════════════════════════════════════ */

.cmp-notes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-4);
}
.cmp-notes__grid > .callout { margin: 0; }
.cmp-notes .callout__body { font-size: 16px; }
.cmp-notes .callout__body p { margin: 0; }

/* Liens des comparaisons directes (bloc écrit par build_vs.py, qui garde
   sa propre classe) : rendu en bande sobre, sans reprendre l'ancien stub. */
.cmp-vs { margin-top: var(--space-4); }
/* Comparaciones directas (bloc écrit par build_vs.py) : panneau gris,
   intitulé en petites capitales, une pastille papier par comparaison. */
.cmp-vs__panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 18px 22px;
  border-radius: var(--fo-radius-card);
  background: var(--color-surface);
}
.cmp-vs__label {
  margin: 0;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fo-muted);
}
.cmp-vs__list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.cmp-vs__link {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--fo-radius-pill);
  background: var(--fo-paper);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  font-size: 15px; line-height: 1.3; text-decoration: none;
  transition: transform var(--fo-dur-fast) var(--fo-ease), box-shadow var(--fo-dur-fast) ease, color var(--fo-dur-fast) ease;
}
.cmp-vs__link:hover { color: var(--color-accent-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cmp-vs__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cmp-vs__link, .cmp-vs__link:hover { transition: none; transform: none; }
}

/* ══ Tableau complet ═══════════════════════════════════════════════════ */

.cmp-full__intro { margin: 18px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--fo-muted); }
.cmp-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 26px; }
.cmp-sort .pill { font-size: 14px; padding: 7px 14px; }

.cmp-tablewrap { margin-top: 22px; }
.cmp-tablenote { margin-top: var(--space-4); }
.cmp-tablenote .card__text { margin-top: 8px; }

.cmp-table { font-size: 15px; }
.cmp-table__caption {
  caption-side: top; text-align: left;
  padding: 12px 0; font-size: 14px; line-height: 1.5; color: var(--fo-muted);
}
.cmp-table tbody th {
  text-align: left; font-family: var(--font-heading); font-weight: 600;
  font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--color-text);
  padding: 14px var(--space-2); white-space: normal;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  vertical-align: top;
}
.cmp-table tbody tr:last-child th { border-bottom: 0; }
.cmp-table .amount { font-family: var(--font-heading); font-size: 17px; white-space: nowrap; }
.cmp-table .pending { color: var(--color-accent-2-700); }
.cmp-table .was, .cmp-table .text-muted { color: var(--fo-muted); }
.cmp-table [title] { text-decoration: underline dotted color-mix(in srgb, var(--color-text) 35%, transparent); text-underline-offset: 3px; cursor: help; }

@media (min-width: 761px) {
  /* Le tableau ne se tasse pas : il défile dans son conteneur. */
  .cmp-table { min-width: 860px; }
  .cmp-table--narrow { min-width: 560px; }
}
@media (max-width: 760px) {
  /* En fiches : le nom du programme devient le titre de chaque fiche. */
  .table--stack.cmp-table th[scope="row"] { display: block; width: 100%; border: 0; padding: 0 0 6px; font-size: 18px; }
  .table-wrap--card.cmp-tablewrap { padding: 4px 16px; }
  .table--stack.cmp-table caption { display: block; width: 100%; }
  /* Étiquette au-dessus de la valeur : une cellule à contenu composé
     (texte + <br> + span) éclaterait la grille à deux colonnes du
     composant commun. */
  .table--stack.cmp-table td { display: block; padding: 5px 0; }
  .table--stack.cmp-table td::before { display: block; margin-bottom: 1px; }
  .cmp-table .amount { white-space: normal; }
}

/* ══ Pages de texte (precios, gratis, declaración) ═════════════════════
   Colonne de lecture, tableaux et encadrés en pleine largeur. */

.cmp-doc { max-width: 1100px; }
.cmp-doc > h2 {
  font-size: var(--fo-fs-h2-card); line-height: 1.1; letter-spacing: -0.02em;
  margin: clamp(56px, 6vw, 88px) 0 18px; max-width: 30ch;
}
.cmp-doc > h3 { font-size: 22px; line-height: 1.3; margin: 34px 0 10px; max-width: 46ch; }
.cmp-doc > p, .cmp-doc > ul, .cmp-doc > ol { max-width: 68ch; font-size: 18px; line-height: 1.65; }
.cmp-doc > ul, .cmp-doc > ol { padding-left: 22px; margin: 0 0 var(--space-3); }
.cmp-doc > ul li, .cmp-doc > ol li { margin-bottom: 8px; }
.cmp-doc > ul li::marker { color: var(--color-accent-700); }
.cmp-doc strong { font-weight: 600; }
.cmp-doc > .table-wrap { margin: 26px 0 0; }
.cmp-doc > .callout { max-width: 68ch; margin: 28px 0; }
.cmp-doc > .callout .callout__body p { margin: 0; }

.cmp-note { margin: 14px 0 0; max-width: 72ch; font-size: 15px !important; line-height: 1.55 !important; color: var(--fo-muted); }

/* Bloc « Para copiar y pegar » : l'encadré d'article, texte plus grand. */
.cmp-copy .callout__body p { font-size: 18px; }
.cmp-copy__kicker { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* Base légale : encadré latéral des articles, en pleine colonne. */
.cmp-legal { max-width: 860px; margin-top: 18px; }
.cmp-legal .aside-card__list { font-size: 16px; }
.cmp-legal__src { color: var(--fo-muted); }
.cmp-legal__rev {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--color-divider);
  font-size: 15px; line-height: 1.55; color: var(--fo-muted-strong);
}

.cmp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* Chiffres clés (declaración : cuántos lo publican) : typographie sous
   un filet, pas de boîte. */
.cmp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-4); margin: 26px 0 8px; max-width: 900px;
}
.cmp-stat { padding-top: 16px; border-top: 4px solid var(--color-text); }
.cmp-stat--accent { border-top-color: var(--color-accent); }
.cmp-stat--accent .cmp-stat__num { color: var(--color-accent-800); }
.cmp-stat__num {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.cmp-stat__of { font-size: 22px; font-weight: 400; color: var(--fo-muted); }
.cmp-stat__label { margin: 10px 0 0; font-size: 16px; line-height: 1.45; }

/* Encadré chiffré de /precios/ (l'ancien « discord »). */
.cmp-highlight { max-width: 760px; margin-top: 8px; }
.cmp-highlight__big {
  display: block; margin-top: 10px;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em;
}
.cmp-highlight p { margin: 12px 0 0; font-size: 17px; line-height: 1.55; }

/* Chapô long placé en tête de colonne (plans gratuits). */
.cmp-doc__lede { margin-top: 0; margin-bottom: var(--space-4); max-width: 68ch; color: var(--fo-muted-strong); }
.cmp-doc > .lede { font-size: var(--fo-fs-lede); }

/* Ligne « Tú, el usuario » du tableau des sanctions. */
.cmp-row--tu th, .cmp-row--tu td { background: var(--color-accent-2-100); }

/* Citation dépliable d'une cellule (build_comparador.py) : remplace
   l'attribut title, qui n'existait qu'au survol de la souris. S'ouvre au
   toucher, au clavier et au clic. */
.cmp-cita > summary {
  display: inline; cursor: pointer; list-style: none;
  text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}
.cmp-cita > summary::-webkit-details-marker { display: none; }
.cmp-cita > summary::after {
  content: "+"; display: inline-block; margin-left: 6px;
  font-size: 13px; color: var(--fo-muted);
  transition: transform var(--fo-dur-fast) ease;
}
.cmp-cita[open] > summary::after { transform: rotate(45deg); }
.cmp-cita > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
.cmp-cita__txt {
  margin: 6px 0 2px; max-width: 34ch;
  font-size: 13.5px; line-height: 1.45; color: var(--fo-muted);
}
@media (max-width: 760px) { .cmp-cita__txt { max-width: none; } }

/* ─── 53-article.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   53-article · Articles (guides), maquette « Articulo »
   Lot 2D de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Composé avec les classes communes (.page-head, .crumbs, .meta-row,
   .aside-card, .countdown-card, .table-wrap, .table--stack) ; ce partiel
   ne porte que la grille de l'article et la typographie du texte courant.

   Structure (main.article) :
     header.page-head.article-head   fil, H1, ligne méta, cercles
     div.article-layout              grille texte + barre latérale
       p.article-lede                chapô
       aside.article-aside           sommaire, normes, compte à rebours
       div.article-body              le texte, inchangé

   Ordre du DOM = ordre mobile : chapô, barre latérale, texte. En bureau,
   la grille place la barre à droite, sur toute la hauteur, et la colle.
   Les anciennes classes du texte (.copybox, .gotcha, .legalbase,
   .tablenote, .verdict__actions) sont restylées ici, sous .article-body,
   sans toucher à 45-legacy.css qu'utilisent encore d'autres pages.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- tête ---------- */

.article-head { padding-bottom: clamp(32px, 4vw, 56px); }
.article-crumbs { padding-top: 0; }
.article-crumbs span:not([aria-hidden]) { color: var(--fo-muted); }
/* Les titres d'article sont longs (jusqu'à 97 signes) : l'échelle du H1
   des pages intérieures (80 px) les étalerait sur six lignes. */
.article-title {
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.04;
  margin-top: 22px;
  text-wrap: balance;
}
.article-head .meta-row { margin-top: 28px; }

/* ---------- grille ---------- */

.article-layout {
  --article-measure: 60ch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lede" "resumen" "aside" "body";
  gap: 0;
  font-size: 19px;
}
.article-lede { grid-area: lede; }
/* « En resumen » suit le chapô, avant le sommaire, à toutes les largeurs :
   la réponse d'abord (décision du 16/10/2026). */
.article-layout > .resumen { grid-area: resumen; }
.article-aside { grid-area: aside; }
.article-body { grid-area: body; min-width: 0; }

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, var(--article-measure)) minmax(260px, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "lede aside" "resumen aside" "body aside";
    column-gap: clamp(40px, 6vw, 96px);
  }
  /* Seul le sommaire est collant : la barre entière collante, bornée à la
     hauteur de l'écran, faisait défiler ses dernières cartes (compte à
     rebours) dans un cadre interne, hors de vue à 1440×700. La barre suit
     donc la page ; le sommaire reste en haut et les cartes suivantes
     passent dessous en fin de défilement. */
  .article-aside { align-self: stretch; max-width: 440px; }
  .article-toc {
    position: sticky; z-index: 2;
    top: calc(var(--fo-header-h) + 24px);
    /* Sommaire plus haut que l'écran : il défile seul. */
    max-height: calc(100vh - var(--fo-header-h) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .article-toc:hover { scrollbar-color: var(--color-neutral-400) transparent; }
}

/* ---------- barre latérale ---------- */

.article-aside {
  display: flex; flex-direction: column; gap: 18px;
  font-size: 16px;
}
/* Dans la colonne à hauteur bornée, les cartes ne s'écrasent pas. */
.article-aside > * { flex-shrink: 0; }
@media (max-width: 1023px) {
  .article-aside { margin: 8px 0 clamp(36px, 6vw, 56px); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* Tablette : sommaire en pleine largeur, normes et compte à rebours côte à côte. */
  .article-aside { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .article-toc { grid-column: 1 / -1; }
}

/* Sommaire : un <details> ouvert, repliable en mobile, figé en bureau. */
.article-toc > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  cursor: pointer;
  list-style: none;
}
.article-toc > summary::-webkit-details-marker { display: none; }
.article-toc > summary::after {
  content: "";
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(2px) rotate(-135deg);
  transition: transform var(--fo-dur-fast) ease;
}
.article-toc:not([open]) > summary::after { transform: translateY(-2px) rotate(45deg); }
@media (min-width: 1024px) {
  .article-toc > summary { cursor: default; pointer-events: none; }
  .article-toc > summary::after { display: none; }
}
.article-toc .aside-card__list { gap: 2px; font-size: 15px; }
.article-toc .aside-card__list a {
  position: relative;
  display: block;
  padding: 4px 0 4px 16px;
  color: var(--color-accent-700);
  line-height: 1.35;
}
.article-toc .aside-card__list a:hover { color: var(--color-accent-900); }
/* Section en cours (fo.js, module du sommaire) : un point qui apparaît
   devant le lien, et la graisse. */
.article-toc .aside-card__list a::before {
  content: "";
  position: absolute; left: 0; top: calc(4px + .675em - 3px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-2);
  opacity: 0; transform: scale(.2);
  transition: opacity var(--fo-dur-fast) ease, transform .35s var(--fo-ease);
}
.article-toc .aside-card__list a.is-active { color: var(--color-accent-900); }
.article-toc .aside-card__list a.is-active::before { opacity: 1; transform: none; }

.article-aside .countdown-card .deco { right: -40px; top: -40px; width: 130px; }

/* ---------- chapô ---------- */

.article-lede {
  font-size: var(--fo-fs-lede-lg);
  line-height: 1.5;
  margin: 0 0 30px;
  max-width: var(--article-measure);
}

/* ---------- texte courant ---------- */

.article-body { line-height: 1.7; }
.article-body > p,
.article-body > ul,
.article-body > ol { max-width: var(--article-measure); }
.article-body p { margin: 0 0 22px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--color-accent-700); }
.article-body strong { font-weight: 600; }
.article-body h2 {
  font-size: 30px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 56px 0 18px;
  scroll-margin-top: calc(var(--fo-header-h) + 24px);
}
.article-body > h2:first-child { margin-top: 0; }
.article-body h3 {
  font-size: 22px; line-height: 1.25; letter-spacing: -0.01em;
  margin: 34px 0 12px;
}
@media (max-width: 640px) {
  .article-layout { font-size: 18px; }
  .article-body h2 { font-size: 26px; margin-top: 46px; }
  .article-body h3 { font-size: 20px; }
}

/* « En resumen » : la réponse en trois ou quatre phrases autonomes, en tête
   du texte. Chaque phrase doit se lire seule (lecteur pressé, extrait
   Google, assistant IA) : c'est elle que cible le balisage speakable.
   Pas de classe parente : sert aussi aux pages hors gabarit d'article. */
.resumen {
  max-width: var(--article-measure, 60ch);
  margin: 0 0 40px;
  padding: 24px 28px 8px;
  border-radius: var(--fo-radius-card);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}
.resumen__title {
  margin: 0 0 12px;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 22px; line-height: 1.2;
}
.resumen ul { margin: 0; padding-left: 22px; }
.resumen li { margin: 0 0 14px; font-size: 18px; line-height: 1.5; }
.resumen li::marker { color: var(--color-accent-700); }
@media (max-width: 520px) {
  .resumen { padding: 20px 20px 6px; }
  .resumen li { font-size: 17px; }
}

/* Sources officielles, en bas de l'article (avant la refonte du 16/10/2026,
   elles occupaient la barre latérale, au-dessus du texte). */
.fuentes {
  max-width: var(--article-measure, 60ch);
  margin: 40px 0 0;
  font-size: 15px; line-height: 1.5;
  color: var(--fo-muted-strong);
}
.fuentes__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 17px; color: var(--color-text); }
.fuentes ul { margin: 0; padding-left: 20px; }
.fuentes li { margin: 0 0 6px; }
.fuentes a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }

/* Encadré « à copier-coller » : l'encadré d'information de la maquette
   (fond accent-100, pastille ronde). Le texte reste celui de l'article. */
.article-body .copybox {
  position: relative;
  max-width: var(--article-measure);
  margin: 8px 0 26px;
  padding: 24px 28px 24px 82px;
  border: 0;
  border-radius: var(--fo-radius-card);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}
.article-body .copybox::before {
  position: absolute; left: 28px; top: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 22px; line-height: 1;
  content: "«";
}
.article-body .copybox .kicker {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-800); margin: 0;
}
.article-body .copybox p { margin: 8px 0 0; font-size: 17px; line-height: 1.6; }
@media (max-width: 520px) {
  .article-body .copybox { padding: 70px 20px 20px; }
  .article-body .copybox::before { left: 20px; top: 20px; }
}

/* Listes « ce que la page ne sait pas » : cartes numérotées (listes de
   contrôle de la maquette). */
.article-body .gotcha { max-width: var(--article-measure); margin: 8px 0 26px; font-size: 17px; line-height: 1.55; }
.article-body .gotcha ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  counter-reset: fo-gotcha;
}
.article-body .gotcha li {
  counter-increment: fo-gotcha;
  position: relative;
  margin: 0;
  padding: 18px 20px 18px 62px;
  border-radius: var(--fo-radius-card);
  background: var(--color-surface);
  transition: background-color var(--fo-dur-fast) ease, transform .35s var(--fo-ease);
}
.article-body .gotcha li:hover { background: var(--color-accent-100); transform: translateX(4px); }
.article-body .gotcha li::before {
  content: counter(fo-gotcha);
  position: absolute; left: 20px; top: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--color-accent-800);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 13px; line-height: 1; color: var(--color-accent-800);
}
.article-body .gotcha strong { font-family: var(--font-heading); }

/* Tableaux : carte blanche qui défile dans son cadre en bureau,
   fiches empilées sous 760 px (.table--stack). */
.article-body .table-wrap { margin: 30px 0 14px; }
.article-body .table caption { caption-side: top; }
.article-body .table .pending { color: var(--color-accent-2-700); }
.article-body .table [title] { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; cursor: help; }
@media (min-width: 761px) {
  .article-body .table--stack { min-width: 680px; }
}
@media (max-width: 760px) {
  .article-body .table-wrap--card { padding: 4px 18px; }
}

.article-body .tablenote {
  display: block;
  max-width: var(--article-measure);
  margin: 0 0 26px;
  font-size: 15px; line-height: 1.55;
  color: var(--fo-muted);
}

/* Base légale : panneau gris, comme la carte latérale. */
.article-body .legalbase {
  max-width: var(--article-measure);
  padding: 26px 28px;
  border-radius: var(--fo-radius-card);
  background: var(--color-surface);
  font-size: 16px; line-height: 1.5;
}
.article-body .legalbase__list { gap: 12px; }
.article-body .legalbase__src { color: var(--fo-muted-strong); }
.article-body .legalbase__rev { color: var(--fo-muted-strong); font-size: 15px; }

/* Boutons de fin d'article. */
.article-body .verdict__actions { gap: 12px; }
.article-body .verdict__actions .btn { font-size: 16px; padding: 12px 22px; }

/* ─── 54-guias.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   54-guias · Index des guides (guias.html), maquette « Guias »
   Lot 2D de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   La page est générée par site/build_guias.py. Composée avec .page-head,
   .pills/.pill, .tag et .post-card ; ce partiel porte la grande carte
   « Destacado », la grille et le filtre.

   Le filtre par thème marche SANS JavaScript : ce sont des boutons radio
   (dans les pastilles), et :has() masque les cartes des autres silos. En
   ligne, push_pages.py retire tout script exécutable du <main> : un filtre
   en JS n'y survivrait pas. Un silo ajouté à build_guias.py demande une
   ligne de plus dans le bloc « filtre » ci-dessous.
   ══════════════════════════════════════════════════════════════════════ */

.guias .page-head__body { max-width: min(760px, 64%); }
@media (max-width: 760px) {
  .guias .page-head__body { max-width: 100%; }
}

/* ---------- filtre ---------- */

.guias-filtro { gap: 8px; }
.guias-filtro .pill {
  position: relative;
  cursor: pointer;
  font-size: 15px;
  padding: 9px 18px;
  border-width: 1.5px;
}
.guias-filtro .pill:has(input:checked) { background: var(--color-text); color: var(--color-bg); }
.guias-filtro .pill:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.guias-lista:has(#guias-f-verifactu:checked) .guias-grid > [data-silo]:not([data-silo="verifactu"]),
.guias-lista:has(#guias-f-b2b:checked) .guias-grid > [data-silo]:not([data-silo="b2b"]),
.guias-lista:has(#guias-f-precios:checked) .guias-grid > [data-silo]:not([data-silo="precios"]) {
  display: none;
}
/* Les cartes qui restent entrent en léger rebond au changement de filtre. */
.guias-lista:has(.guias-filtro input:not(#guias-f-todas):checked) .guias-grid > [data-silo] {
  animation: fo-pop .5s var(--fo-ease) both;
}

/* ---------- grande carte « Destacado » ---------- */

.guia-top {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  overflow: hidden;
  border-radius: var(--fo-radius-panel);
  background: var(--fo-paper);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.guia-top:hover { color: var(--color-text); }
.guia-top__media {
  position: relative; overflow: hidden;
  min-height: 300px;
  background: var(--color-accent);
}
.guia-top__shape {
  position: absolute; right: -60px; bottom: -60px;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: var(--color-accent-2); mix-blend-mode: multiply;
}
.guia-top__dots {
  position: absolute; left: 12%; bottom: -12%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background-image: radial-gradient(#fff 1.8px, transparent 2px);
  background-size: 12px 12px;
  opacity: .28;
}
.guia-top__big {
  position: absolute; left: 34px; top: 30px;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(72px, 9vw, 130px); line-height: 1;
  color: #fff;
}
.guia-top__body {
  padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.guia-top__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.guia-top__title {
  font-size: var(--fo-fs-h2-card);
  line-height: 1.08; letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.guia-top__text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--fo-muted); }
.guia-top__meta { font-size: 14px; color: var(--fo-muted); }
@media (max-width: 520px) {
  .guia-top__media { min-height: 200px; }
}

/* ---------- grille ---------- */

.guias-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px var(--space-6);
}
/* Les titres des cartes sont des h2 (plan de la page) : on neutralise
   les marges et la taille par défaut des titres. */
.guias-grid .post-card__title { margin: 0; letter-spacing: -0.01em; }
.guias-grid .post-card__big { max-width: calc(100% - 48px); overflow-wrap: anywhere; }
.guias-grid .post-card:focus-visible { outline-offset: 6px; }

.guias-nota { margin: 48px 0 0; font-size: 15px; color: var(--fo-muted); }

/* ─── 55-contacto.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   55-contacto · Contact (contacto.html), maquette « Contacto »
   Lot 2F de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Ce partiel n'appartient qu'à ce gabarit : composer d'abord avec les
   classes de 20-layout et 30-components (voir site/_demo/componentes.html),
   n'écrire ici que ce qui est propre à la page. Retirer de 45-legacy.css
   les blocs que ce gabarit remplace.

   Deux colonnes : le propos et les trois motifs à gauche, le formulaire
   dans une carte flottante à droite. Le formulaire marche sans JavaScript
   (POST classique, le serveur redirige vers /contacto/?enviado=1#enviado) :
   les deux panneaux d'état s'affichent alors par :target. Avec JavaScript
   (assets/contacto.js), l'envoi part en fetch et les états s'animent.
   ══════════════════════════════════════════════════════════════════════ */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-top: var(--fo-hero-top);
}
.contact__intro { position: relative; min-width: 0; }
.contact__intro .lede { max-width: 46ch; }

/* — les trois motifs — */
.contact-reasons { display: flex; flex-direction: column; gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; }
.contact-reasons li { display: flex; gap: 16px; align-items: flex-start; }
.contact-reasons__dot { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); }
.contact-reasons__dot--m { background: var(--color-accent-2); }
.contact-reasons__dot--k { background: var(--color-text); }
.contact-reasons__title { display: block; font-family: var(--font-heading); font-weight: var(--fo-display-weight); font-size: 19px; line-height: 1.3; }
.contact-reasons__text { display: block; font-size: 16px; line-height: 1.5; color: var(--fo-muted); }
.contact-mail {
  margin: 36px 0 0; padding-top: 18px;
  border-top: 2px dotted var(--fo-dotted);
  font-size: 16px; line-height: 1.5; color: var(--fo-muted-strong);
}
.contact-mail a { font-weight: 600; overflow-wrap: anywhere; }

/* — la carte — */
.contact__panel { position: relative; min-width: 0; }
.contact-card { position: relative; z-index: 1; gap: 0; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form legend { padding: 0; margin-bottom: 10px; }

/* Motifs : pastilles sur boutons radio natifs (marchent sans JS). */
.contact-form .pill { position: relative; font-size: 15px; padding: 9px 16px; }
.contact-form .pill--accent:has(input:checked) { background: var(--color-accent-800); border-color: var(--color-accent-800); color: #fff; }
.contact-form .pill:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Champ piège : hors écran pour les humains, visible pour les robots. */
.contact-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contact-form__privacy { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fo-muted); }
.contact-form__error {
  margin: 0; padding: 14px 16px;
  border-radius: var(--fo-radius-chip);
  background: var(--color-accent-2-100); color: var(--color-accent-2-900);
  font-size: 15.5px; line-height: 1.5;
}
.contact-form__error:empty { display: none; }

/* Bouton : libellé, puis roue pendant l'envoi. */
.contact-send { position: relative; min-height: 52px; }
.contact-send__spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, #fff 40%, transparent); border-top-color: #fff;
}
.contact-send[aria-busy="true"] { cursor: progress; }
.contact-send[aria-busy="true"] .contact-send__spinner { display: inline-block; animation: fo-spin .8s linear infinite; }

/* — panneaux d'état — */
.contact-status { display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0 8px; }
.contact-status:target, .contact-status.is-shown { display: flex; }
.contact-status:focus { outline: none; }
.contact-status__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
}
.contact-status__icon svg { width: 26px; height: 26px; }
.contact-status--ko .contact-status__icon { background: var(--color-accent-2); }
.contact-status h2 { font-size: var(--fo-fs-h2-card); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.contact-status p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--fo-muted-strong); max-width: 46ch; }
.js .contact-status.is-shown .contact-status__icon { animation: fo-pop .55s var(--fo-ease) both; }

/* Envoyé sans JS : le panneau remplace le formulaire. En erreur, le
   formulaire reste dessous pour réessayer. */
.contact-card:has(#enviado:target) .contact-form,
.contact-card.is-sent .contact-form { display: none; }
.contact-card:has(#error:target) .contact-status--ko { padding-bottom: 24px; margin-bottom: 20px; border-bottom: 2px dotted var(--fo-dotted); }

/* Refus d'un champ : petite secousse (transform seul). */
@keyframes contact-shake {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.contact-form .is-shaking { animation: contact-shake .42s var(--fo-ease); }

@media (prefers-reduced-motion: reduce) {
  .contact-send[aria-busy="true"] .contact-send__spinner { animation: none; }
  .contact-form .is-shaking { animation: none; }
}

/* ─── 56-ficha.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   56-ficha · Fiches programme (software/*, build_fichas.py)
   Lot 2E de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Pas d'écran de maquette pour la fiche : le gabarit décline Comparador
   (carré d'initiale, étiquettes) et Articulo (colonne de texte + colonne
   latérale), avec les composants de site/_demo/componentes.html :
   .page-head, .tile, .tag, .card, .callout, .deco-cluster.

   Couleur du carré : slugs triés par ordre alphabétique, rotation c, m, k
   (build_fichas.py, color_de). La même règle vaut pour le comparateur.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- tête ---------- */

/* Le fil d'Ariane précède la tête : l'espace du haut est déjà pris. */
.fi-head { padding-top: clamp(28px, 4vw, 60px); }

.fi-head__id { display: flex; align-items: center; gap: 14px; }
.fi-head__tile {
  width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px);
  font-size: clamp(21px, 2.2vw, 27px);
  box-shadow: var(--shadow-md);
  transition: transform var(--fo-dur) var(--fo-ease);
}
.fi-head:hover .fi-head__tile { transform: rotate(-6deg) scale(1.05); }
.fi-head__title { margin-top: 18px; }

.fi-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.fi-tags .tag { font-size: 13px; padding: 5px 12px; }

/* ---------- grille : texte à gauche, carte de prix à droite ---------- */

.fi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
/* La colonne latérale s'étire sur toute la hauteur : c'est le rail dans
   lequel la carte de prix reste collée. */
.fi-aside { align-self: stretch; min-width: 0; }
.fi-main { min-width: 0; }

@media (max-width: 1023px) {
  .fi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- deux cartes de conformité ---------- */

.fi-conform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
}
.fi-conf { gap: 10px; }
.fi-conf__kicker {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.fi-conf__verdict {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 0;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -0.02em;
}
/* Point plein : c'est publié. Point pointillé magenta : on ne l'a pas
   trouvé, comme les dates conditionnelles du reste du site. */
.fi-conf__verdict::before {
  content: ""; flex: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-accent);
}
.fi-conf__why { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fo-muted-strong); }
.fi-conf--pending { background: var(--color-accent-2-100); box-shadow: none; }
.fi-conf--pending .fi-conf__verdict { color: var(--color-accent-2-700); }
.fi-conf--pending .fi-conf__verdict::before {
  background: transparent; border: 2px dotted var(--color-accent-2);
}

/* ---------- la déclaration lue ---------- */

.fi-decl { position: relative; overflow: hidden; margin-top: var(--space-4); }
.fi-decl > :not(.deco) { position: relative; }
.fi-decl__deco { right: -70px; top: -70px; width: 220px; }
.fi-decl__title {
  font-size: var(--fo-fs-h2-card); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 22px; max-width: 18ch;
}

.fi-idcard { margin: 0; font-size: 16.5px; line-height: 1.45; }
.fi-idcard__row {
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 2px dotted var(--fo-dotted);
}
.fi-idcard__row:last-child { border-bottom: 0; }
.fi-idcard dt { color: var(--fo-muted); }
.fi-idcard dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .fi-idcard__row { grid-template-columns: minmax(0, 1fr); }
  .fi-idcard dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
}

.fi-decl__nota { margin: 20px 0 0; font-size: 16px; line-height: 1.6; max-width: 68ch; }
.fi-decl__src { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--fo-muted); max-width: 68ch; }

/* ---------- ce que la fiche ne dit pas ---------- */

.fi-gotcha { margin: var(--space-6) 0 0; }
.fi-gotcha__title { margin: 0 0 6px; font-family: var(--font-heading); font-weight: var(--fo-display-weight); }

/* ---------- carte de prix ---------- */

.fi-buy { position: relative; overflow: hidden; gap: 0; }
.fi-buy > :not(.deco) { position: relative; }
.fi-buy__deco { right: -110px; top: -110px; width: 200px; opacity: .45; }

.fi-buy__block + .fi-buy__block {
  margin-top: 22px; padding-top: 22px;
  border-top: 2px dotted var(--fo-dotted);
}
.fi-buy__kicker {
  display: block; margin-bottom: 10px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.fi-buy__price {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(38px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.02em;
}
.fi-buy__per {
  font-family: var(--font-body); font-weight: 400;
  font-size: 17px; letter-spacing: 0;
  color: var(--fo-muted);
}
.fi-buy__meta { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--fo-muted-strong); }
.fi-buy__cta { margin-top: 0; }
.fi-buy__cta svg { transition: transform var(--fo-dur-fast) var(--fo-ease); }
.fi-buy__cta:hover svg { transform: translateX(4px); }
.fi-buy__affiliate { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--fo-muted); }

.fi-links {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0; list-style: none;
  font-size: 16px; line-height: 1.4;
}
.fi-links a { display: inline-block; text-decoration: none; }
.fi-links a:hover { transform: translateX(3px); }

/* Plus serré en colonne latérale : la carte doit tenir dans l'écran pour
   pouvoir rester collée. */
@media (min-width: 1024px) {
  .fi-buy { padding: 30px 32px; }
  .fi-buy__block + .fi-buy__block { margin-top: 16px; padding-top: 16px; }
  .fi-buy__kicker { margin-bottom: 8px; }
  .fi-links { gap: 6px; font-size: 15.5px; }
}

/* Collée à droite pendant la lecture, seulement si l'écran est assez haut
   pour la montrer entière : sinon son bas deviendrait inaccessible. La
   hauteur dépend du nombre de blocs (fi-buy--3 à --5, posé par
   build_fichas.py : prix, bouton, puis articles, VS et alternatives) ;
   seuils = hauteur mesurée la plus grande + en-tête + marge. */
@media (min-width: 1024px) and (min-height: 720px) {
  .fi-buy--3 { position: sticky; top: calc(var(--fo-header-h) + 24px); }
}
@media (min-width: 1024px) and (min-height: 880px) {
  .fi-buy--4, .fi-buy--5 { position: sticky; top: calc(var(--fo-header-h) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .fi-head:hover .fi-head__tile, .fi-links a:hover, .fi-buy__cta:hover svg { transform: none; }
}


/* ---------- FAQ de la fiche (générée depuis precios.json) ---------- */

.fi-faq { margin: var(--space-8, 48px) 0 0; max-width: 68ch; }
.fi-faq__title {
  font-size: var(--fo-fs-h2-card); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 18px; scroll-margin-top: calc(var(--fo-header-h) + 24px);
}
.fi-faq h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; margin: 26px 0 8px; }
.fi-faq p { margin: 0; font-size: 17px; line-height: 1.6; }

/* ─── 57-vs.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   57-vs · Comparaisons A contre B (vs/*, build_vs.py)
   Lot 2E de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Pas d'écran de maquette pour la VS : deux carrés d'initiale face à face
   (langage du Comparador), puis un vrai tableau .table.table--stack, les
   différences en cartes, les sorties et « Lo que esta página no sabe » en
   encadré. Couleurs : même règle que la fiche ; si A et B tombent sur la
   même, B prend la suivante (build_vs.py, colores).
   ══════════════════════════════════════════════════════════════════════ */

.vs-head { padding-top: clamp(28px, 4vw, 60px); }

/* ---------- face à face ---------- */

.vs-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
}
.vs-duel__cell { min-width: 0; }
.vs-duel__side {
  flex-direction: row; align-items: center; gap: 18px;
  padding: clamp(18px, 2.4vw, 30px);
  text-decoration: none;
}
.vs-duel__side:hover { color: var(--color-text); }
.vs-duel__tile {
  width: clamp(52px, 5.4vw, 72px); height: clamp(52px, 5.4vw, 72px);
  font-size: clamp(23px, 2.4vw, 32px);
  transition: transform var(--fo-dur) var(--fo-ease);
}
.vs-duel__side:hover .vs-duel__tile { transform: rotate(-6deg) scale(1.06); }
.vs-duel__name {
  min-width: 0;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(24px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.vs-duel__arrow {
  margin-left: auto; font-size: 22px; color: var(--color-accent-700);
  transition: transform var(--fo-dur-fast) var(--fo-ease);
}
.vs-duel__side:hover .vs-duel__arrow { transform: translateX(4px); }

/* Le « vs » central est un décor : il n'existe pas dans le texte. */
.vs-duel__o {
  display: flex; align-items: center; justify-content: center;
  width: clamp(52px, 5vw, 68px); aspect-ratio: 1; border-radius: 50%;
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-heading); font-style: italic; font-size: clamp(17px, 1.6vw, 21px);
}
.vs-duel__o::before { content: "vs"; }

@media (max-width: 639px) {
  .vs-duel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vs-duel__o { justify-self: center; width: 44px; font-size: 15px; }
}

/* ---------- tableau ---------- */

.vs-block { margin-top: clamp(40px, 5vw, 64px); }

.vs-table .table { table-layout: fixed; }
.vs-table thead th:first-child { width: 24%; }
.vs-th { display: inline-flex; align-items: center; gap: 10px; }
.vs-th__chip { width: 14px; height: 14px; border-radius: 4px; }

/* En-tête de ligne : composant commun .table (30-components). */
.vs-table td { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.vs-table td .text-muted { font-size: 14px; }

@media (max-width: 760px) {
  .vs-table.table-wrap--card { padding: 4px 18px; }
  .vs-table .table--stack td::before { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
}

/* ---------- ce qui change ----------
   Colonne 4/8 éditoriale (.split), pas une grille de cartes : chaque
   différence ouvre sur sa phrase en gras, séparée de la suivante par un
   filet pointillé, comme la frise du calendrier. */

.vs-changes__title { position: sticky; top: calc(var(--fo-header-h) + 24px); }
.vs-changes__list { display: flex; flex-direction: column; }
.vs-change {
  margin: 0; padding: 26px 0;
  border-top: 2px dotted var(--fo-dotted);
  font-size: 17px; line-height: 1.62; color: var(--fo-muted-strong);
  max-width: 68ch;
}
.vs-change:first-child { border-top: 0; padding-top: 6px; }
/* En ligne et non en bloc : certaines phrases générées continuent après
   le gras par une virgule (« …declaración responsable</strong>, así que »). */
.vs-change strong {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: 1.12em; line-height: 1.4;
  color: var(--color-text);
}
@media (max-width: 900px) {
  .vs-changes__title { position: static; }
}

/* ---------- sorties ---------- */

.vs-actions { position: relative; margin-top: clamp(40px, 5vw, 64px); gap: 18px; }
.vs-actions > :not(.deco) { position: relative; }
.vs-actions__deco { right: -80px; bottom: -90px; width: 260px; }
.vs-actions__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.vs-actions__btn { background: var(--fo-paper); }
.vs-actions__btn:hover { background: var(--fo-paper); }
.vs-actions__btn svg { transition: transform var(--fo-dur-fast) var(--fo-ease); }
.vs-actions__btn:hover svg { transform: translateX(4px); }
.vs-actions__disclosure { margin: 0; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--color-accent-900); }
@media (max-width: 639px) {
  .vs-actions__btn { width: 100%; }
}

.vs-gotcha { margin: var(--space-6) 0 0; }
.vs-gotcha__title { margin: 0 0 6px; font-family: var(--font-heading); font-weight: var(--fo-display-weight); }

/* ---------- pour finir : lectures et base légale ---------- */

.vs-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--space-4);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}
/* Le h2 prend l'allure d'un titre d'encadré, pas d'un titre de section. */
.vs-foot__title { display: block; margin: 0; font-family: var(--font-body); font-weight: 400; line-height: 1.4; }
.vs-legal { font-size: 15.5px; }
.vs-legal__rev {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 2px dotted var(--fo-dotted);
  font-size: 15px; line-height: 1.55; color: var(--fo-muted-strong);
}

@media (prefers-reduced-motion: reduce) {
  .vs-duel__side:hover .vs-duel__tile, .vs-duel__side:hover .vs-duel__arrow,
  .vs-actions__btn:hover svg { transform: none; }
}

/* ─── 58-quiz-obligado.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   58-quiz-obligado · Parcours ¿Me afecta? (me-afecta*.html) et feuilles obligado/*
   Lot 2F de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Ce partiel n'appartient qu'à ce gabarit : composer d'abord avec les
   classes de 20-layout et 30-components (voir site/_demo/componentes.html),
   n'écrire ici que ce qui est propre à la page. Retirer de 45-legacy.css
   les blocs que ce gabarit remplace.

   Deux gabarits :
   .qpath  la question (me-afecta, -2, -3) : le hero en aplat de l'accueil
           (.hero-block) et sa carte de quiz (.hero-card, .choice), avec la
           question en H1 dans la carte ;
   .vd     le verdict (obligado/*) : grand titre, dates en cartes pleines
           (ferme) ou pointillées (conditionnelle), base légale en carte.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Question ══════════════════════════════════════════════════════════ */

.qpath { padding-top: clamp(14px, 2vw, 28px); }

/* Le hero de l'accueil, recomposé en trois zones : grand titre et rappel
   à gauche, carte de la question à droite. En mobile la carte passe juste
   sous le titre, le rappel des réponses ensuite. */
.qpath .hero-block {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "title card" "recap card";
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: clamp(20px, 3vw, 36px);
}
.qpath__title { grid-area: title; }
.qpath__recap { grid-area: recap; }
.qpath .hero-card { grid-area: card; align-self: center; }

.qpath__display {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(44px, 6.2vw, 92px);
  line-height: .98; letter-spacing: -0.04em;
  margin: 0; color: #fff;
}

.qpath__recap { font-size: 17px; line-height: 1.55; max-width: 44ch; }
.qpath__kicker {
  display: block; margin-bottom: 12px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, #fff 78%, transparent);
}
.qpath__recap-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qpath__recap-list strong { font-weight: 700; }
.qpath__recap a { color: #fff; text-decoration: underline; text-decoration-color: color-mix(in srgb, #fff 55%, transparent); text-underline-offset: 3px; }
.qpath__recap a:hover { text-decoration-color: #fff; }
.qpath__recap :focus-visible { outline-color: #fff; }
.qpath__privacy {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0; padding-top: 16px;
  border-top: 1px dotted color-mix(in srgb, #fff 45%, transparent);
  font-size: 15px; color: color-mix(in srgb, #fff 85%, transparent);
}
.qpath__privacy svg { flex: none; margin-top: 3px; }

/* La question dans la carte : même corps que la carte de l'accueil. */
.qpath .hero-card__q { margin: 18px 0 10px; }
.qpath__intro { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: var(--fo-muted-strong); }
.qpath__note { margin: 18px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fo-muted); }
.qpath__back { margin-top: 12px; }

/* Le point d'étape courant s'allonge à l'arrivée sur la page. */
.js .qpath .steps-dots > .is-current { transform-origin: 0 50%; animation: qpath-dot .7s var(--fo-ease) .35s both; }
@keyframes qpath-dot { from { transform: scaleX(.36); } to { transform: none; } }

@media (max-width: 900px) {
  .qpath .hero-block {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "card" "recap";
    grid-template-rows: auto;
  }
  .qpath .hero-card { align-self: stretch; }
}

/* ══ Verdict ═══════════════════════════════════════════════════════════ */

.vd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.vd > .crumbs { grid-column: 1 / -1; }
.vd__top { grid-column: 1; position: relative; padding-top: clamp(36px, 5vw, 72px); }
.vd__body { grid-column: 1; }
.vd__legal { grid-column: 2; grid-row: 2 / span 2; margin-top: clamp(36px, 5vw, 72px); }
@media (min-width: 1001px) {
  .vd__legal { position: sticky; top: calc(var(--fo-header-h) + 24px); }
}

/* Le trio décoratif reste derrière le haut du titre, en retrait : le
   titre du verdict est long et doit se lire d'un bloc. */
.vd__deco { right: -6%; top: -8px; width: clamp(160px, 18vw, 260px); opacity: .55; }
.vd__head { position: relative; max-width: 880px; }
.vd__profile {
  margin: 12px 0 0; max-width: 60ch;
  font-size: 15px; line-height: 1.45; color: var(--fo-muted);
}
.vd__title {
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.02; letter-spacing: -0.03em;
  margin: 16px 0 0;
}

/* — les deux dates — */
.vd__dates {
  position: relative;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(28px, 3.4vw, 44px);
}
.vd-date {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  border-radius: var(--fo-radius-choice);
}
.vd-date__main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.vd-date__label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.vd-date__when {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.02em;
}
.vd-date__note { margin: 0; font-size: 15px; line-height: 1.45; max-width: 34ch; }

.vd-date--firme { background: var(--color-accent-700); color: #fff; }
.vd-date--firme .vd-date__label { color: color-mix(in srgb, #fff 80%, transparent); }
.vd-date--firme .vd-date__note { color: color-mix(in srgb, #fff 88%, transparent); }
.vd-date--none { background: var(--color-surface); color: var(--color-text); }
.vd-date--none .vd-date__label, .vd-date--none .vd-date__note { color: var(--fo-muted-strong); }

.vd-date--cond {
  background: var(--color-accent-2-100); color: var(--color-accent-2-900);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-2-300);
}
.vd-date--cond .vd-date__when { color: var(--color-accent-2-700); }

/* Compteur de jours, à droite de la date ferme. */
.vd-date__count { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.vd-date__num {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(40px, 4vw, 56px); line-height: 1;
}
.vd-date__unit { font-size: 14px; margin-top: 4px; }
.vd-date__until { font-size: 12.5px; opacity: .8; }

/* Anneau pointillé : l'emblème du conditionnel (jamais d'aplat). */
.vd-date__ring {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 3px dotted var(--color-accent-2);
}
.js .vd-date__ring { animation: fo-spin 24s linear infinite; }

/* — corps du verdict — */
.vd__body { margin-top: clamp(30px, 3.6vw, 48px); max-width: 720px; }
.vd__body p { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; margin: 0 0 16px; }
.vd__body p.vd__muted { color: var(--fo-muted-strong); }
.vd__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 30px; }

/* — base légale en carte — */
.vd-legal__list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.vd-legal__list li { display: flex; flex-direction: column; gap: 2px; padding-left: 20px; position: relative; font-size: 16px; line-height: 1.4; }
.vd-legal__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent);
}
.vd-legal__list strong { font-weight: 700; }
.vd-legal__list span { font-size: 14.5px; color: var(--fo-muted); }
.vd-legal__rev {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 2px dotted var(--fo-dotted);
  font-size: 14.5px; line-height: 1.5; color: var(--fo-muted-strong);
}

@media (max-width: 1000px) {
  .vd { grid-template-columns: minmax(0, 1fr); }
  .vd__legal { grid-column: 1; grid-row: auto; }
}
@media (max-width: 480px) {
  .vd-date { flex-direction: column; }
  .vd-date__ring { position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; border-width: 2px; }
  .vd-date--cond .vd-date__main { padding-right: 36px; }
  .vd-date__count { align-items: flex-start; text-align: left; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .vd__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .qpath .steps-dots > .is-current, .js .vd-date__ring { animation: none; }
}

/* ─── 59-herramientas.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   59-herramientas · Outils (herramientas/*)
   Lot 2F de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Ce partiel n'appartient qu'à ce gabarit : composer d'abord avec les
   classes de 20-layout et 30-components (voir site/_demo/componentes.html),
   n'écrire ici que ce qui est propre à la page. Retirer de 45-legacy.css
   les blocs que ce gabarit remplace.

   Gabarit : tête de page intérieure (.page-head), l'outil dans une carte
   flottante (.card--float) posée sur deux formes décoratives, puis le
   texte. Le formulaire et son résultat vivent dans la même carte : sans
   JavaScript, la carte entière reste masquée (attribut hidden, retiré par
   ui.js) et un avis prend sa place. Les montants glissent d'une valeur à
   l'autre (ui.js), les changements d'état passent par FO.swap (fo.js).
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Tête et scène de l'outil ══════════════════════════════════════════ */

.tool-page .page-head { padding-bottom: clamp(28px, 3.4vw, 48px); }

.tool-stage { position: relative; max-width: 760px; }

/* En grand écran, l'outil monte à côté du titre : on l'utilise sans
   avoir à défiler. Le trio décoratif de la tête laisse alors la place
   aux formes posées sous la carte. */
@media (min-width: 1100px) {
  .tool-page:has(> .tool-stage) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .tool-page:has(> .tool-stage) > * { grid-column: 1 / -1; }
  .tool-page:has(> .tool-stage) > .page-head { grid-column: 1; }
  .tool-page:has(> .tool-stage) > .page-head .page-head__body { max-width: 100%; }
  .tool-page:has(> .tool-stage) > .page-head .deco-cluster { display: none; }
  .tool-page:has(> .tool-stage) > .page-head .page-title { font-size: clamp(40px, 4.2vw, 62px); }
  .tool-page:has(> .tool-stage) > .tool-stage { grid-column: 2; grid-row: 2; padding: 40px 0; }
  .tool-page:has(> .tool-stage) > .quiz-out { grid-row: 3; }
}
.tool-stage .deco { z-index: 0; }
.tool-card { position: relative; z-index: 1; gap: 20px; }
.tool-card > :not(.deco) { position: relative; }
.tool-card__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: end; }

/* Champ vedette (validateur) : on y tape un identifiant, on le lit en grand. */
.input--xl { min-height: 60px; font-size: 24px; letter-spacing: .04em; text-transform: uppercase; }
.input--xl::placeholder { text-transform: none; letter-spacing: .02em; }

/* Le contrôle segmenté prend toute la largeur de la carte. */
.tool-card .seg { display: flex; width: 100%; }
.tool-card .seg-opt { flex: 1 1 0; justify-content: center; min-height: 46px; font-size: 15px; }

/* Sans JavaScript. */
.tool-nojs { position: relative; z-index: 1; max-width: 62ch; font-size: 16px; line-height: 1.55; }

/* ══ Résultat ══════════════════════════════════════════════════════════ */

.tool-result:empty { display: none; }
.tool-result {
  padding-top: 18px;
  border-top: 2px dotted var(--fo-dotted);
  font-size: 17px; line-height: 1.55;
}

/* Lignes de calcul : libellé à gauche, montant aligné à droite. */
.tool-lines { display: flex; flex-direction: column; }
.tool-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.tool-line .num { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.tool-line--total {
  border-bottom: 0; margin-top: 10px; padding: 16px 18px;
  border-radius: var(--fo-radius-card);
  background: var(--color-accent-700); color: #fff;
}
.tool-line--total > span:first-child { font-size: 16px; }
.tool-line--total .num {
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: clamp(26px, 3vw, 34px); line-height: 1;
}
.tool-note { display: block; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--fo-muted-strong); }

/* Verdict du validateur : pastille ronde + phrase. */
.tool-verdict { display: flex; gap: 16px; align-items: flex-start; }
.tool-verdict__icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
}
.tool-verdict__icon svg { width: 22px; height: 22px; }
.tool-verdict__text { min-width: 0; }
.tool-verdict__text strong { font-weight: 700; }
.tool-result--ko .tool-verdict__icon { background: var(--color-accent-2); }
.tool-result--ko .tool-verdict__text { color: var(--color-accent-2-900); }
.tool-result--aviso { color: var(--color-accent-2-800); }
.js .tool-verdict__icon { animation: fo-pop .5s var(--fo-ease) both; }

/* ══ Test « ¿Qué programa te conviene? » ═══════════════════════════════ */

.quiz-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-q__legend {
  display: block; width: 100%; padding: 0; margin: 4px 0 20px;
  font-family: var(--font-heading); font-weight: var(--fo-display-weight);
  font-size: var(--fo-fs-h2-quiz); line-height: 1.12; letter-spacing: -0.02em;
}
.quiz-q__hint { margin: 16px 0 0; }
/* Sans JavaScript la carte est masquée ; avec, une seule question à la fois
   (ui.js pose hidden sur les autres). */

/* Réponse en carte lettrée, sur bouton radio natif. */
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color-accent), var(--shadow-md); }
.choice:has(input:checked) .choice__arrow { transform: translateX(4px); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.quiz-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.quiz-nav__end { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

/* Résultats : une carte par programme retenu. */
.quiz-out { margin-top: clamp(28px, 3.4vw, 44px); }
.quiz-out:empty { display: none; }
.quiz-out__lede { max-width: 68ch; font-size: 17px; line-height: 1.55; margin: 0 0 20px; }
.quiz-out--ko .quiz-out__lede strong { color: var(--color-accent-2-700); }
.quiz-res-list {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.quiz-res { gap: 12px; }
.quiz-res__name { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 23px; line-height: 1.2; }
.quiz-res__name a { color: var(--color-text); }
.quiz-res__name a:hover { color: var(--color-accent-700); }
.quiz-res__price { margin: 0; font-size: 16px; line-height: 1.5; }
.quiz-res__why { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 1.5; color: var(--fo-muted-strong); }
.quiz-res__why li { margin: 3px 0; }
.quiz-res__line { margin: 0; font-size: 15px; line-height: 1.5; }
.quiz-res__line > span:first-child {
  display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fo-muted);
}
.quiz-res__links { margin: auto 0 0; padding-top: 10px; border-top: 2px dotted var(--fo-dotted); font-size: 15px; }
.quiz-res .affiliate { margin: 0; font-size: 14px; }
.quiz-out .accordion { margin-top: 24px; max-width: 860px; }
.quiz-out .accordion__a ul, .quiz-adjust { padding-left: 1.1em; }
.quiz-adjust li { margin: 4px 0; }

/* ══ Index des outils ══════════════════════════════════════════════════ */

.tool-tile .card__title a { color: var(--color-text); }
.tool-tile .card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tool-tile .card__title a:hover { color: var(--color-accent-700); }
.tool-tile:has(a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tool-tile .card__title a:focus-visible { outline: none; }
.tool-tile .card__foot { color: var(--color-accent-700); font-size: 20px; }

.tool-soon { display: flex; flex-direction: column; margin: 20px 0 0; padding: 0; list-style: none; max-width: 760px; }
.tool-soon li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 14px;
  padding: 18px 0; border-bottom: 2px dotted var(--fo-dotted);
}
.tool-soon .dot-pending { margin-top: 8px; }
.tool-soon h3 { margin: 0; font-size: 20px; color: var(--fo-muted-strong); }
.tool-soon p { grid-column: 2; margin: 0; color: var(--fo-muted); }

/* ══ Texte de la page ══════════════════════════════════════════════════ */

.tool-prose { max-width: 760px; padding-top: clamp(48px, 6vw, 88px); font-size: 17px; line-height: 1.65; }
.tool-prose > h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin: clamp(40px, 4.4vw, 60px) 0 14px; }
.tool-prose > h2:first-child { margin-top: 0; }
.tool-prose > p, .tool-prose > ul { max-width: 68ch; }
.tool-prose > p { margin: 0 0 16px; }
.tool-prose > ul { margin: 0 0 18px; padding-left: 20px; }
.tool-prose > ul li { margin-bottom: 8px; }
.tool-prose > ul li::marker { color: var(--color-accent-700); }
.tool-prose .table-wrap { margin: 22px 0 10px; }
.tool-prose .table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--color-text); }
/* Taux (« 21 % », « 5,2 % ») : jamais coupés entre le nombre et le signe. */
.tool-prose .table td.n { white-space: nowrap; }
.tool-prose .table-caption { caption-side: top; text-align: left; padding: 12px 0; font-size: 14px; color: var(--fo-muted); }
@media (max-width: 760px) {
  .tool-prose .table--stack caption { display: block; }
  .tool-prose .table--stack th[scope="row"] { display: block; padding: 0 0 6px; border: 0; font-size: 18px; white-space: normal; }
}
.tool-prose .table-note { margin: 8px 0 24px; font-size: 14.5px; color: var(--fo-muted); max-width: 68ch; }
.tool-prose .pending { color: var(--color-accent-2-700); }
.tool-refs { margin-top: clamp(32px, 4vw, 48px); }
.tool-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Grande table des données du test : défile dans son conteneur au-dessus
   de 760 px, s'empile en fiches en dessous (.table--stack). */
.tool-prose .table-wrap--wide { max-width: none; width: min(100%, 1196px); }
@media (min-width: 761px) {
  .tool-prose .table-wrap--wide .table { min-width: 880px; }
}
@media (min-width: 1200px) {
  .tool-prose:has(.table-wrap--wide) { max-width: none; }
  .tool-prose:has(.table-wrap--wide) > :not(.table-wrap--wide) { max-width: 760px; }
}

/* ─── 60-legal.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   60-legal · Pages légales (aviso-legal, privacidad, cookies, correcciones)
   Lot 2F de la refonte (plan docs/plans/2026-09-24-refonte-design.md).

   Ce partiel n'appartient qu'à ce gabarit : composer d'abord avec les
   classes de 20-layout et 30-components (voir site/_demo/componentes.html),
   n'écrire ici que ce qui est propre à la page. Retirer de 45-legacy.css
   les blocs que ce gabarit remplace.

   Gabarit : tête de page intérieure (.page-head), puis deux colonnes :
   à gauche une carte collante (sommaire, ou identité du titulaire sur
   l'aviso legal), à droite le texte. Les fiches d'identité sont des
   cartes, le journal des corrections une frise (.timeline).
   ══════════════════════════════════════════════════════════════════════ */

.lg .page-head { padding-bottom: clamp(32px, 4vw, 56px); }
.lg .page-head .lede { max-width: 60ch; }

.lg__layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.lg__aside { position: sticky; top: calc(var(--fo-header-h) + 24px); display: flex; flex-direction: column; gap: 18px; }

/* — sommaire — */
.lg__toc .aside-card__list { font-size: 15px; gap: 8px; }
.lg__toc .aside-card__list a { color: var(--color-text); }
.lg__toc .aside-card__list a:hover { color: var(--color-accent-700); }

/* — carte du titulaire (aviso legal) — */
.lg-owner { display: flex; flex-direction: column; gap: 4px; font-size: 15.5px; line-height: 1.5; }
.lg-owner .aside-card__title { display: block; margin-top: 16px; }
.lg-owner .aside-card__title:first-child { margin-top: 0; }
.lg-owner__links { display: flex; flex-direction: column; gap: 6px; }

/* — le texte — */
.lg__body { max-width: 760px; min-width: 0; font-size: 17px; line-height: 1.65; }
.lg__body > h2 {
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em;
  margin: clamp(44px, 4.6vw, 64px) 0 14px;
  scroll-margin-top: calc(var(--fo-header-h) + 20px);
}
.lg__body > h2:first-child { margin-top: 0; }
.lg__body > h3 { font-size: 21px; margin: 30px 0 10px; }
.lg__body > p, .lg__body > ul { max-width: 68ch; }
.lg__body > p { margin: 0 0 16px; }
.lg__body > ul { margin: 0 0 18px; padding-left: 20px; }
.lg__body > ul li { margin-bottom: 8px; }
.lg__body > ul li::marker { color: var(--color-accent-700); }
.lg__body code { font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--color-surface); }
.lg__updated { margin-top: 40px !important; font-size: 15px; color: var(--fo-muted); }

/* — fiches d'identité en carte — */
.lg-id {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 26px;
  margin: 8px 0 24px; padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--fo-radius-card);
  background: var(--fo-paper); box-shadow: var(--shadow-sm);
  font-size: 16px; line-height: 1.5;
}
.lg-id dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fo-muted); padding-top: 2px; }
.lg-id dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .lg-id { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lg-id dd { margin-bottom: 12px; }
}

/* — deux engagements côte à côte (aviso legal) — */
.lg-pair {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin: 30px 0 8px;
}
.lg-pair .card { gap: 8px; }
.lg-pair h2 { font-size: 22px; line-height: 1.2; margin: 0; scroll-margin-top: calc(var(--fo-header-h) + 20px); }
.lg-pair p { margin: 0; font-size: 16px; line-height: 1.55; }

.lg__body .table-wrap { margin: 14px 0 26px; }
.lg__body .table td { font-size: 15.5px; }

/* — journal des corrections en frise — */
.lg-log { margin: 26px 0 30px; }
.lg-log .timeline__item { grid-template-columns: 132px 28px minmax(0, 1fr); }
.lg-log .timeline__date { font-size: 16px; line-height: 1.35; }
.lg-log .timeline__title { display: block; font-size: 19px; line-height: 1.35; margin: 0; }
.lg-log__scope { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fo-muted); }
.lg-log .timeline__text { font-size: 16px; line-height: 1.6; }
.lg-log .timeline__text a { color: var(--color-accent-700); }
@media (max-width: 640px) {
  .lg-log .timeline__item { grid-template-columns: 22px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .lg__layout { grid-template-columns: minmax(0, 1fr); }
  .lg__aside { position: static; }
  /* Le sommaire double les intertitres : en une colonne, il repousserait
     le texte d'un écran entier. La carte du titulaire, elle, reste. */
  .lg__toc { display: none; }
}

/* ─── 61-consentimiento.css ─── */

/* ══════════════════════════════════════════════════════════════════════
   61-consentimiento · Bandeau de consentement (assets/consentimiento.js)
   Posé le 17/10/2026 : GA4 et Clarity n'existent qu'après « Aceptar ».

   Position fixe en bas : il n'occupe aucune place dans le flux, donc aucun
   saut de mise en page à son apparition. « Rechazar » et « Aceptar » ont
   exactement le même style : refuser doit être aussi simple qu'accepter.
   ══════════════════════════════════════════════════════════════════════ */

.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent__inner {
  pointer-events: auto;
  max-width: 760px;
  width: 100%;
  background: var(--fo-paper);
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  border-radius: var(--fo-radius-card);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  align-items: center;
}
.consent__titulo {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: var(--font-heading-weight);
  font-size: 18px;
}
.consent__texto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fo-muted-strong); }
.consent__texto a { color: var(--color-accent-700); }
.consent__acciones { display: flex; gap: 12px; }
.consent__acciones .btn { min-width: 110px; justify-content: center; }

.site-footer__consent {
  font: inherit;
  color: var(--color-accent-700);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-footer__consent:hover { color: var(--color-accent-900); }

@media (max-width: 640px) {
  .consent { left: 12px; right: 12px; bottom: 12px; }
  .consent__inner { grid-template-columns: 1fr; padding: 16px; }
  .consent__acciones .btn { flex: 1; min-width: 0; }
}