/* =====================================================================
   EMPIRIC — L'atelier franc · Composants
   Sacha Gotainer — L'accès n'est pas l'adoption.

   Socle : reset.css → tokens.css (palette, typo, utilitaires .em-*) → ce fichier.
   Règles tenues ici : aucune ombre, aucun dégradé, aucun rayon > 8px,
   une seule courbe d'easing, zone cliquable ≥ 44px, filets au lieu de profondeur.
   ===================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =====================================================================
   GRILLE
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--em-w-page);
  margin-inline: auto;
  padding-inline: var(--em-gutter);
}

/* Les variantes ne rétrécissent pas le conteneur : elles bornent la mesure
   de leurs enfants. Toutes les sections partagent ainsi le même bord gauche
   que la nav et le footer — un seul rail sur toute la page.
   --tight est le nom historique de --text ; les deux coexistent le temps que
   les pages secondaires soient réécrites. */
.container--content > * { max-width: var(--em-w-content); }

.container--text > *,
.container--tight > * { max-width: var(--em-w-text); }

/* Le rythme vertical prescrit (88px mobile / 128px desktop) est l'écart ENTRE
   deux sections : chacune en porte donc la moitié. */
.section { padding-block: calc(var(--em-section-y) / 2); }

/* Une surface pleine a besoin de sa respiration propre. */
.section.em-section--ink { padding-block: var(--em-section-y); }

.section__head { margin-bottom: var(--em-sp-2xl); }

.section__title { font-size: var(--em-fs-h2); line-height: var(--em-lh-h2); }

.section__lead {
  margin-top: var(--em-sp-lg);
  max-width: var(--em-w-text);
  font-size: var(--em-fs-lead);
  color: var(--em-on-paper-2);
}

.em-section--ink .section__lead { color: var(--em-on-ink-2); }

/* Filet d'accent sur fond encre — terre cuite claire, pour le contraste. */
.em-rule--on-ink { border-top-color: var(--em-clay-light); }

/* =====================================================================
   BOUTONS — compléments aux variantes de tokens.css
   ===================================================================== */

.em-btn {
  padding-block: var(--em-sp-md);
  text-align: center;
  text-wrap: balance;
}

.em-btn--sm {
  padding-inline: var(--em-sp-lg);
  font-size: var(--em-fs-small);
}

.em-btn--block {
  display: flex;
  width: 100%;
}

/* =====================================================================
   NAVIGATION
   ===================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--em-paper);
  border-bottom: 1px solid var(--em-hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--em-sp-lg);
  min-height: 64px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--em-font-voice);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--em-ink);
}

.nav__links { display: none; }

.nav__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--em-fs-small);
  font-weight: 500;
  color: var(--em-on-paper-2);
}

.nav__links a:hover { color: var(--em-ink); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--em-sp-md) * -1);
  color: var(--em-ink);
}

.nav__toggle svg { width: 1.5rem; height: 1.5rem; }

.nav__cta { display: none; }

.nav__panel {
  display: none;
  padding-bottom: var(--em-sp-lg);
  border-top: 1px solid var(--em-hairline);
}

.nav__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--em-fs-body);
  font-weight: 500;
  color: var(--em-on-paper-1);
  border-bottom: 1px solid var(--em-hairline);
}

.nav__panel .em-btn {
  margin-top: var(--em-sp-lg);
  border-bottom: 0;
}

.nav.is-open .nav__panel { display: block; }

@media (min-width: 900px) {
  .nav__links { display: flex; gap: var(--em-sp-xl); }
  .nav__toggle { display: none; }
  .nav__cta { display: inline-flex; }
  .nav__panel { display: none !important; }
}

/* =====================================================================
   HERO
   ===================================================================== */

.hero { padding-block: var(--em-sp-2xl) calc(var(--em-section-y) / 2); }

@media (min-width: 900px) {
  .hero { padding-top: calc(var(--em-section-y) * 0.55); }
}

.hero__title {
  margin-top: var(--em-sp-lg);
  max-width: 56rem;
  font-size: var(--em-fs-display);
  line-height: var(--em-lh-display);
  text-wrap: balance;
}

.hero__title-voice,
.hero__title-frank { display: block; }

.hero__title-voice {
  font-family: var(--em-font-voice);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--em-ls-title);
}

.hero__title-frank {
  margin-top: 0.08em;
  font-family: var(--em-font-frank);
  font-weight: 700;
  letter-spacing: var(--em-ls-punch);
}

.hero__lead {
  margin-top: var(--em-sp-xl);
  max-width: var(--em-w-text);
  font-size: var(--em-fs-lead);
}

.hero__body {
  margin-top: var(--em-sp-lg);
  max-width: var(--em-w-text);
  color: var(--em-on-paper-2);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--em-sp-md);
  margin-top: var(--em-sp-2xl);
}

/* En dessous de 640px, les deux CTA prennent la même largeur : le bouton
   primaire passe sur deux lignes, un secondaire calé sur son texte serait ragé. */
@media (max-width: 639px) {
  .hero__cta .em-btn { width: 100%; }
}

.hero__micro {
  margin-top: var(--em-sp-lg);
  max-width: var(--em-w-text);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

/* =====================================================================
   CE QUE JE TROUVE EN OUVRANT LE CAPOT
   ===================================================================== */

.findings {
  display: grid;
  gap: var(--em-sp-2xl);
}

@media (min-width: 900px) {
  .findings { grid-template-columns: repeat(2, 1fr); column-gap: var(--em-sp-2xl); }
}

.finding {
  padding-top: var(--em-sp-lg);
  border-top: 1px solid var(--em-hairline);
}

.finding__num {
  display: block;
  color: var(--em-clay);
}

.finding__title {
  margin-top: var(--em-sp-sm);
  font-size: var(--em-fs-h3);
}

.finding__body {
  margin-top: var(--em-sp-md);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

/* =====================================================================
   LA MÉTHODE
   ===================================================================== */

.method {
  display: grid;
  gap: var(--em-sp-2xl);
}

.step {
  display: grid;
  gap: var(--em-sp-sm);
  padding-top: var(--em-sp-lg);
  border-top: 1px solid var(--em-hairline);
}

@media (min-width: 640px) {
  .step {
    grid-template-columns: 4rem 1fr;
    column-gap: var(--em-sp-xl);
    align-items: start;
  }
}

.step__num {
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-mono);
  color: var(--em-clay);
}

.step__title { font-size: var(--em-fs-h3); }

.step__body {
  margin-top: var(--em-sp-md);
  max-width: var(--em-w-text);
  color: var(--em-on-paper-2);
}

/* =====================================================================
   CE QUE JE NE FAIS PAS — bloc de franchise, fond encre
   ===================================================================== */

.franchise__punch {
  margin-top: var(--em-sp-sm);
  max-width: 34rem;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.15;
}

.franchise__body {
  margin-top: var(--em-sp-xl);
  max-width: var(--em-w-text);
  color: var(--em-on-ink-2);
}

/* =====================================================================
   LES OFFRES
   ===================================================================== */

.unit-note {
  margin-bottom: var(--em-sp-2xl);
  padding: var(--em-sp-xl);
  border: 1px solid var(--em-hairline);
  border-radius: var(--em-r-lg);
  max-width: var(--em-w-content);
}

.unit-note strong { font-weight: 700; color: var(--em-ink); }
.unit-note p { color: var(--em-on-paper-2); }

.pricing {
  display: grid;
  gap: var(--em-sp-xl);
  align-items: start;
}

@media (min-width: 900px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
}

.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan--start { border-color: var(--em-clay); }

.pricing__note {
  margin-top: var(--em-sp-xl);
  text-align: center;
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.plan__badge {
  margin-bottom: var(--em-sp-lg);
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-label);
  text-transform: uppercase;
  color: var(--em-clay);
}

.plan__head { padding-bottom: var(--em-sp-lg); }

.plan__label {
  margin: var(--em-sp-lg) 0 var(--em-sp-sm);
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-label);
  text-transform: uppercase;
  color: var(--em-on-paper-mut);
}

.plan__head > .plan__label:first-child { margin-top: 0; }

.plan__price { margin-top: var(--em-sp-md); }

.plan__price-amount {
  display: block;
  font-family: var(--em-font-frank);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: var(--em-ls-punch);
  color: var(--em-ink);
}

.plan__price-unit {
  display: block;
  margin-top: var(--em-sp-xs);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.plan__examples {
  margin-top: var(--em-sp-sm);
  font-family: var(--em-font-mono);
  font-size: var(--em-fs-label);
  letter-spacing: 0.1em;
  color: var(--em-on-paper-mut);
}

.plan__name { font-size: var(--em-fs-h3); }

.plan__desc {
  margin-top: var(--em-sp-md);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.plan__features { margin-top: var(--em-sp-sm); }

.plan__features li {
  position: relative;
  padding-left: var(--em-sp-lg);
  margin-bottom: var(--em-sp-sm);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.plan__features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--em-clay);
}

.plan__features strong { font-weight: 600; color: var(--em-ink); }

.plan__tier {
  margin-top: var(--em-sp-lg);
  padding-top: var(--em-sp-lg);
  border-top: 1px solid var(--em-hairline);
}

.plan__tier > .plan__label:first-child {
  margin: 0 0 var(--em-sp-md);
  font-family: var(--em-font-frank);
  font-weight: 700;
  font-size: var(--em-fs-body);
  letter-spacing: var(--em-ls-punch);
  text-transform: none;
  color: var(--em-ink);
}

.plan__frank {
  margin-top: var(--em-sp-lg);
  padding-top: var(--em-sp-md);
  border-top: 1px solid var(--em-hairline);
  font-family: var(--em-font-voice);
  font-style: italic;
  font-size: var(--em-fs-small);
  line-height: var(--em-lh-lead);
  color: var(--em-ink);
}

.plan__fine {
  margin-top: var(--em-sp-md);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-mut);
}

/* Le CTA se cale en bas de carte, avec un écart minimum garanti. */
.plan > *:has(+ .em-btn--block) { margin-bottom: var(--em-sp-xl); }
.plan .em-btn--block { margin-top: auto; }

/* Empiric Équipe — régime distinct : séparée par un filet, hors du tableau
   comparatif, et volontairement moins large que les trois cartes ci-dessus. */
.training { margin-top: var(--em-sp-2xl); }

.training__rule {
  border-top: 1px solid var(--em-hairline);
  margin-bottom: var(--em-sp-xl);
}

.training__kicker { margin-bottom: var(--em-sp-lg); }

.plan--training { max-width: 36rem; }

/* =====================================================================
   LES PREUVES
   ===================================================================== */

.field {
  display: grid;
  gap: var(--em-sp-xl);
}

@media (min-width: 900px) {
  .field { grid-template-columns: repeat(2, 1fr); column-gap: var(--em-sp-2xl); }
}

.field__item {
  padding-top: var(--em-sp-lg);
  border-top: 2px solid var(--em-clay);
}

.field__claim {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.15;
}

.field__body {
  margin-top: var(--em-sp-md);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

/* Preuve d'appui — subordonnée : plus bas, en liste, titres plus petits. */
.built {
  margin-top: var(--em-sp-2xl);
  padding-top: var(--em-sp-2xl);
  border-top: 1px solid var(--em-hairline);
}

.built__intro {
  margin-top: var(--em-sp-md);
  max-width: var(--em-w-text);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.built__list { margin-top: var(--em-sp-xl); }

.built__item {
  display: grid;
  gap: var(--em-sp-xs);
  padding-block: var(--em-sp-md);
  border-top: 1px solid var(--em-hairline);
}

@media (min-width: 640px) {
  .built__item {
    grid-template-columns: 13rem 9rem 1fr;
    column-gap: var(--em-sp-lg);
    align-items: baseline;
  }
}

.built__name {
  font-family: var(--em-font-frank);
  font-weight: 700;
  font-size: var(--em-fs-small);
  letter-spacing: -0.02em;
  color: var(--em-ink);
}

.built__status {
  font-size: var(--em-fs-micro);
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-clay);
}

.built__fact {
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

/* Témoignages — Callet, puis le pont éditorial, puis Dussert. */
.quotes {
  margin-top: var(--em-sp-2xl);
  padding-top: var(--em-sp-2xl);
  border-top: 1px solid var(--em-hairline);
}

.quote {
  padding-left: var(--em-sp-xl);
  border-left: 2px solid var(--em-clay);
  max-width: var(--em-w-text);
}

.quote__body { font-size: var(--em-fs-lead); }

.quote__by {
  display: block;
  margin-top: var(--em-sp-md);
}

.quote__name {
  display: block;
  font-family: var(--em-font-frank);
  font-weight: 700;
  font-size: var(--em-fs-small);
  letter-spacing: -0.02em;
  color: var(--em-ink);
}

.quote__role {
  display: block;
  margin-top: var(--em-sp-xs);
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-micro);
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-on-paper-mut);
}

.quotes__bridge {
  margin-block: var(--em-sp-xl);
  max-width: var(--em-w-text);
  font-weight: 700;
  color: var(--em-ink);
}

.visibility {
  margin-top: var(--em-sp-2xl);
  padding-top: var(--em-sp-xl);
  border-top: 1px solid var(--em-hairline);
  max-width: var(--em-w-text);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.visibility strong { font-weight: 600; color: var(--em-ink); }

.visibility a {
  color: var(--em-ink);
  text-decoration: underline;
  text-decoration-color: var(--em-clay);
  text-underline-offset: 3px;
}

.visibility a:hover { text-decoration-thickness: 2px; }

/* =====================================================================
   À PROPOS
   ===================================================================== */

.about {
  display: grid;
  gap: var(--em-sp-2xl);
  align-items: start;
}

@media (min-width: 640px) {
  .about { grid-template-columns: 1fr 220px; }
}

.about__text { max-width: var(--em-w-text); }

.about__text p + p { margin-top: var(--em-sp-lg); }

.about__text p:not(:first-child) { color: var(--em-on-paper-2); }

.about__figure { max-width: 220px; }

.about__portrait {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--em-r-lg);
}

.about__figure figcaption { margin-top: var(--em-sp-sm); }

/* =====================================================================
   FAQ
   ===================================================================== */

.faq__item { border-top: 1px solid var(--em-hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--em-hairline); }

.faq__summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--em-sp-lg) var(--em-sp-xl) var(--em-sp-lg) 0;
  cursor: pointer;
  font-family: var(--em-font-frank);
  font-weight: 700;
  font-size: var(--em-fs-body);
  letter-spacing: var(--em-ls-punch);
  color: var(--em-ink);
  list-style: none;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-family: var(--em-font-frank);
  font-weight: 700;
  color: var(--em-clay);
}

.faq__item[open] .faq__summary::after { content: "–"; }

.faq__body {
  padding-bottom: var(--em-sp-lg);
  max-width: var(--em-w-text);
  color: var(--em-on-paper-2);
}

.faq__body strong { font-weight: 600; color: var(--em-ink); }

/* =====================================================================
   CTA FINAL
   ===================================================================== */

.final-cta { border-top: 1px solid var(--em-hairline); }

.final-cta__title { font-size: var(--em-fs-h1); line-height: var(--em-lh-title); }

.final-cta__lead {
  margin-top: var(--em-sp-lg);
  font-size: var(--em-fs-lead);
}

.final-cta__actions { margin-top: var(--em-sp-xl); }

.final-cta__alt {
  margin-top: var(--em-sp-lg);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.final-cta__alt a {
  /* La zone cliquable atteint 44 px sans décaler le texte : le padding est
     repris par une marge négative de même valeur. */
  display: inline-block;
  padding: 12px 6px;
  margin: -12px -6px;
  color: var(--em-ink);
  text-decoration: underline;
  text-decoration-color: var(--em-clay);
  text-underline-offset: 3px;
}

.final-cta__alt a:hover { text-decoration-thickness: 2px; }

.final-cta__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--em-sp-md) var(--em-sp-lg);
  margin-top: var(--em-sp-xl);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.final-cta__terms li + li::before {
  content: "·";
  margin-right: var(--em-sp-lg);
  color: var(--em-clay);
}

/* =====================================================================
   FOOTER
   ===================================================================== */

.footer {
  padding-block: var(--em-sp-2xl);
  border-top: 1px solid var(--em-hairline);
}

.footer__inner {
  display: grid;
  gap: var(--em-sp-2xl);
}

@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* Sur les pages encore en markup historique, .footer__brand porte directement
   le nom ; sur la home il enveloppe la signature complète. On ne le typographie
   que dans le premier cas. */
.footer__brand:not(:has(*)) {
  font-family: var(--em-font-voice);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--em-ink);
}

.footer__signature {
  display: inline-flex;
  gap: 13px;
  align-items: flex-start;
}

.footer__sig-name {
  display: block;
  font-family: var(--em-font-voice);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--em-ink);
}

.footer__sig-line {
  display: block;
  margin-top: 5px;
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-on-paper-2);
}

.footer__tag {
  margin-top: var(--em-sp-lg);
  max-width: 26rem;
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--em-sp-lg);
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.footer__links a:hover {
  color: var(--em-ink);
  text-decoration: underline;
  text-decoration-color: var(--em-clay);
  text-underline-offset: 3px;
}

.footer__legal {
  margin-top: var(--em-sp-sm);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-mut);
}

@media (min-width: 900px) {
  .footer__meta { text-align: right; }
  .footer__links { justify-content: flex-end; }
}

/* =====================================================================
   PAGES SECONDAIRES — /ressources/ et mentions légales
   ===================================================================== */

.legal-hero { padding-block: var(--em-sp-2xl) 0; }

.legal-hero__eyebrow {
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-label);
  text-transform: uppercase;
  color: var(--em-clay);
}

.legal-hero__title {
  margin-top: var(--em-sp-md);
  font-family: var(--em-font-voice);
  font-weight: 600;
  font-size: var(--em-fs-h1);
  line-height: var(--em-lh-title);
  letter-spacing: var(--em-ls-title);
  color: var(--em-ink);
  text-wrap: balance;
}

.legal-hero__eyebrow-link {
  /* Fil d'Ariane : zone cliquable portée à 44px sans décaler le surtitre. */
  display: inline-block;
  padding: 14px 6px;
  margin: -14px -6px;
  color: inherit;
  text-decoration: none;
}
.legal-hero__eyebrow-link:hover { text-decoration: underline; }

.legal-hero__meta {
  margin-top: var(--em-sp-md);
  max-width: var(--em-w-text);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

/* Chapeau éditorial — la voix. Hero des pages intérieures et ouverture d'article. */
.lead {
  margin-top: var(--em-sp-lg);
  max-width: var(--em-w-text);
  font-family: var(--em-font-voice);
  font-style: italic;
  font-weight: 400;
  font-size: var(--em-fs-lead);
  line-height: var(--em-lh-lead);
  color: var(--em-on-paper-1);
  text-wrap: pretty;
}

/* Corps d'article — largeur de lecture, hiérarchie éditoriale.
   .prose est posé sur le conteneur lui-même dans le HTML : c'est donc aux
   enfants de porter la mesure, sinon le bloc se recentre et sort du rail. */
.prose > * { max-width: var(--em-w-text); }

.prose > * + * { margin-top: var(--em-sp-lg); }

.prose h2 {
  margin-top: var(--em-sp-2xl);
  font-family: var(--em-font-voice);
  font-weight: 600;
  font-size: var(--em-fs-h2);
  line-height: var(--em-lh-h2);
  letter-spacing: var(--em-ls-title);
  color: var(--em-ink);
  text-wrap: balance;
}

.prose h3 {
  margin-top: var(--em-sp-xl);
  font-family: var(--em-font-frank);
  font-weight: 700;
  font-size: var(--em-fs-h3);
  line-height: var(--em-lh-h3);
  letter-spacing: var(--em-ls-punch);
  color: var(--em-ink);
}

.prose p { color: var(--em-on-paper-1); }

.prose strong { font-weight: 600; color: var(--em-ink); }

.prose em { font-family: var(--em-font-voice); font-style: italic; }

.prose ul li,
.prose ol li {
  position: relative;
  padding-left: var(--em-sp-lg);
  margin-bottom: var(--em-sp-md);
}

.prose ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--em-clay);
}

.prose ol { counter-reset: prose-ol; }

.prose ol li { counter-increment: prose-ol; }

.prose ol li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-small);
  color: var(--em-clay);
}

.prose a {
  color: var(--em-ink);
  text-decoration: underline;
  text-decoration-color: var(--em-clay);
  text-underline-offset: 3px;
}

.prose a:hover { text-decoration-thickness: 2px; }

/* Un bouton posé dans le corps de texte garde ses propres couleurs :
   sans ça, .prose a l'emporte en spécificité et le texte passe en encre sur fond encre. */
.prose a.em-btn { text-decoration: none; }
.prose a.em-btn--primary { color: var(--em-paper); }
.prose a.em-btn--secondary { color: var(--em-ink); }

/* Listes de définition (informations d'éditeur des mentions légales). */
.prose dl {
  display: grid;
  gap: var(--em-sp-sm) var(--em-sp-lg);
}

@media (min-width: 640px) {
  .prose dl { grid-template-columns: 15rem 1fr; align-items: baseline; }
}

.prose dt {
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-on-paper-mut);
}

.prose dd { color: var(--em-on-paper-1); }

.prose hr {
  border: 0;
  border-top: 1px solid var(--em-hairline);
  margin-block: var(--em-sp-2xl);
}
.prose__back { margin-top: var(--em-sp-2xl); }

/* Encadré de réponse courte. */
.answer-box {
  padding: var(--em-sp-xl);
  border: 1px solid var(--em-hairline);
  border-radius: var(--em-r-lg);
}

.answer-box > * + * { margin-top: var(--em-sp-md); }

/* Tableaux — défilement horizontal confiné, jamais la page. */
.table-wrap {
  overflow-x: auto;
  margin-block: var(--em-sp-xl);
  border: 1px solid var(--em-hairline);
  border-radius: var(--em-r-lg);
}

.table-wrap table {
  width: 100%;
  /* En dessous de cette largeur les colonnes cassent mot à mot : le tableau
     défile alors dans son conteneur, ce qui reste lisible. */
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--em-fs-small);
}

.table-wrap th,
.table-wrap td {
  padding: var(--em-sp-md) var(--em-sp-lg);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--em-hairline);
}

.table-wrap tr:last-child td { border-bottom: 0; }

.table-wrap th {
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-on-paper-mut);
}

.table-wrap td { color: var(--em-on-paper-2); }

/* Cartes de la page Ressources. */
.cards { display: grid; gap: var(--em-sp-xl); }

@media (min-width: 640px) {
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
  padding: var(--em-sp-xl);
  border: 1px solid var(--em-hairline);
  border-radius: var(--em-r-lg);
}

.article-card {
  display: block;
  padding: var(--em-sp-xl);
  border: 1px solid var(--em-hairline);
  border-radius: var(--em-r-lg);
  transition: border-color var(--em-dur) var(--em-ease);
}

.article-card:hover { border-color: var(--em-clay); }

.article-card__meta {
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-on-paper-mut);
}

.article-card__title {
  margin-top: var(--em-sp-md);
  font-family: var(--em-font-frank);
  font-weight: 700;
  font-size: var(--em-fs-h3);
  line-height: var(--em-lh-h3);
  letter-spacing: var(--em-ls-punch);
  color: var(--em-ink);
}

.article-card__excerpt {
  margin-top: var(--em-sp-md);
  font-size: var(--em-fs-small);
  color: var(--em-on-paper-2);
}

.article-card__more {
  display: inline-block;
  margin-top: var(--em-sp-lg);
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-label);
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-clay);
}

/* Le mot surligné du titre colle à l'élision et au point (« l'adoption. ») */
.hero__title-frank .em-mark {
  padding: 0 0.1em;
  margin: 0 -0.04em 0 0.02em;
}

/* =====================================================================
   EMPIRIC LAB — en-tête (cachet + entité + personne), ligne d'entité
   ===================================================================== */
.nav__brand { gap: var(--em-sp-sm); }
.nav__seal { width: 36px; height: 36px; flex: none; }
.nav__names { display: inline-flex; flex-direction: column; line-height: 1.1; }
.nav__entity { font-family: var(--em-font-voice); font-weight: 600; font-size: 1.125rem; color: var(--em-ink); }
.nav__person {
  font-family: var(--em-font-mono);
  font-weight: 500;
  font-size: var(--em-fs-micro);
  letter-spacing: var(--em-ls-mono);
  text-transform: uppercase;
  color: var(--em-on-paper-2);
}
.hero__entity { margin-top: var(--em-sp-lg); }
.quotes__kicker { margin-bottom: var(--em-sp-lg); }

/* =====================================================================
   RESSOURCES — bloc d'accueil, liste, page d'une ressource
   ===================================================================== */
.res-list { display: grid; gap: var(--em-sp-lg); }
@media (min-width: 900px) { .res-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.res-card {
  padding: var(--em-sp-xl);
  border: 1px solid var(--em-hairline);
  border-radius: var(--em-r-lg);
}
.res-card__title {
  margin-top: var(--em-sp-sm);
  font-family: var(--em-font-voice);
  font-weight: 600;
  font-size: var(--em-fs-h3);
  line-height: var(--em-lh-h3);
}
.res-card__title a { color: var(--em-ink); text-decoration: none; }
.res-card__title a:hover { text-decoration: underline; text-decoration-color: var(--em-clay); text-underline-offset: 3px; }
.res-card__desc { margin-top: var(--em-sp-sm); font-size: var(--em-fs-small); color: var(--em-on-paper-2); }
.res-more { margin-top: var(--em-sp-xl); font-size: var(--em-fs-small); }
.res-more a { color: var(--em-ink); text-decoration: underline; text-decoration-color: var(--em-clay); text-underline-offset: 3px; }

.res-actions { display: flex; flex-wrap: wrap; gap: var(--em-sp-md); margin-top: var(--em-sp-xl); }
.res-for {
  margin-top: var(--em-sp-xl);
  max-width: var(--em-w-text);
  padding: var(--em-sp-lg) var(--em-sp-xl);
  border-left: 3px solid var(--em-clay);
  background: rgba(188, 100, 64, 0.06);
}
.res-for p + p { margin-top: var(--em-sp-sm); }
.prose .res-piles { display: grid; grid-template-columns: 1fr; gap: var(--em-sp-lg); }
.prose .res-piles > div { display: grid; gap: var(--em-sp-xs); }
@media (min-width: 640px) {
  .prose .res-piles > div { grid-template-columns: 15rem 1fr; align-items: baseline; gap: var(--em-sp-lg); }
}
.prose .res-piles dt { font-weight: 700; color: var(--em-ink); }
.prose .res-piles dd { margin-top: var(--em-sp-xs); color: var(--em-on-paper-1); }
.res-limit {
  margin-top: var(--em-sp-2xl);
  padding-top: var(--em-sp-xl);
  border-top: 1px solid var(--em-hairline);
}
.res-cta { margin-top: var(--em-sp-xl); }
.res-licence { margin-top: var(--em-sp-2xl); font-size: var(--em-fs-small); color: var(--em-on-paper-2); }
.res-licence a { color: var(--em-ink); }
.print-only { display: none; }