/* 31fevrier.be — feuille de style unique.
 * Design system éditorial : tokens sur .tf / .tf-light / .tf-dark
 * (thème par CLASSE, source unique — cf. CLAUDE.md, invariant n°3).
 * Reconstruite depuis les sources des composants Astro (commit e16439c)
 * le 2026-07-17 : chaque section ci-dessous vient du composant nommé.
 * Toute modification de couleur : reporter la paire dans
 * scripts/check-contrast.mjs et le lancer.
 */

/* ==== Fontes (auto-hébergées, zéro tiers) ==== */
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/plex-sans-100-700-normal-1.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:100 700;font-style:normal;}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/plex-sans-100-700-italic-1.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:100 700;font-style:italic;}
@font-face{font-family:"IBM Plex Sans-1633351936f3df96 fallback: Arial";src:local("Arial");font-display:swap;font-weight:100 700;font-style:normal;size-adjust:101.1663%;ascent-override:101.3184%;descent-override:27.183%;line-gap-override:0%;}
@font-face{font-family:"IBM Plex Sans-1633351936f3df96 fallback: Arial";src:local("Arial");font-display:swap;font-weight:100 700;font-style:italic;size-adjust:101.1663%;ascent-override:101.3184%;descent-override:27.183%;line-gap-override:0%;}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plex-mono-400-normal-1.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400;font-style:normal;}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plex-mono-500-normal-1.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:500;font-style:normal;}
@font-face{font-family:"IBM Plex Mono-96d27ae8d395f239 fallback: Courier New";src:local("Courier New");font-display:swap;font-weight:400;font-style:normal;size-adjust:99.9837%;ascent-override:102.5167%;descent-override:27.5045%;}
@font-face{font-family:"IBM Plex Mono-96d27ae8d395f239 fallback: Courier New";src:local("Courier New");font-display:swap;font-weight:500;font-style:normal;size-adjust:99.9837%;ascent-override:102.5167%;descent-override:27.5045%;}
:root{--font-sans:"IBM Plex Sans","IBM Plex Sans fallback: Arial",-apple-system,"Helvetica Neue",sans-serif;}
:root{--font-mono:"IBM Plex Mono","IBM Plex Mono fallback: Courier New",ui-monospace,"SF Mono",monospace;}

/* ==== global ==== */
/* ============================================================
   31 février — Design tokens · Direction A (Éditorial)
   Source : Claude Design handoff (reference/tokens.css)
   ============================================================ */

/* Polices : chargées via fontsource (self-hosted), import depuis Default.astro.
   Pas de @import Google Fonts ici — perf + RGPD. */

.tf {
  /* ---- Type ---- */
  /* --font-sans et --font-mono sont définis par l'API Astro Fonts
     (cf. experimental.fonts dans astro.config.mjs). Cette section ne
     déclare que le fallback sémantique --font-serif, qui réutilise
     Plex Sans en italique pour les sous-titres éditoriaux. */
  --font-serif: var(--font-sans);

  /* Modular scale, ratio 1.25 (Major Third), base 17px */
  --fs-micro: 12px;
  --fs-small: 14px;
  --fs-body: 17px;
  --fs-lead: 21px;
  --fs-h6: 19px;
  --fs-h5: 23px;
  --fs-h4: 28px;
  --fs-h3: 35px;
  --fs-h2: 44px;
  --fs-h1: 62px;
  --fs-display: 88px;

  --lh-body: 1.7;
  --lh-tight: 1.15;
  --lh-mid: 1.35;

  /* ---- Space (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* ---- Layout ---- */
  --prose-max: 680px;
  --layout-max: 1200px;

  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- LIGHT ---------- */
.tf-light {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #F2EDE4;
  --ink: #1F1A17;
  --ink-2: #5A554F;
  --ink-3: #6B6358;  /* durci pour contraste AA 4.5:1 sur --bg #FAF7F2 (~5.9:1) */
  --border: #E8E4DC;
  --border-2: #D8D1C4;
  --anchor: #2A1F1A;
  --taupe: #6E5F54;
  --accent: #D8581A;       /* Brand — accents décoratifs (soulignement, bordure, focus-ring, dropcap, ::selection). Sur --bg : 3.69:1 (non-text WCAG 1.4.11 ≥3:1 ✓). NE PAS utiliser comme fond de bouton avec texte normal. */
  --accent-bg: #B0440E;    /* USAGE FOND bouton primaire — texte --accent-ink (#FFFFFF) dessus = 5.34:1, AA ✓ */
  --accent-text: #B0440E;  /* USAGE TEXTE sur --bg : 5.34:1, AA ✓ */
  --accent-ink: #FFFFFF;
  --accent-soft: #F4E4D5;
  --highlight: #FBEACD;
  --shadow-card: 0 1px 0 rgba(31, 26, 23, .04), 0 8px 24px -12px rgba(31, 26, 23, .08);
  --focus-ring: 0 0 0 3px rgba(216, 88, 26, .32);
  color-scheme: light;
}

/* ---------- DARK ---------- */
.tf-dark {
  --bg: #1A1614;
  --surface: #221C19;
  --surface-2: #2A221E;
  --ink: #EAE5DC;
  --ink-2: #A39B8E;
  --ink-3: #968D81;  /* durci pour contraste AA 4.5:1 sur --bg #1A1614 (~5.8:1) */
  --border: #2E2724;
  --border-2: #3A322D;
  --anchor: #F4EFE5;
  --taupe: #B8A89A;
  --accent: #F07A2E;
  --accent-bg: #F07A2E;    /* dark mode : --accent passe déjà comme fond bouton, texte --accent-ink (#1A1614) = 6.18:1 ✓ */
  --accent-text: #F07A2E;  /* dark mode : --accent passe déjà sur --bg (~6.3:1) */
  --accent-ink: #1A1614;
  --accent-soft: #3B2519;
  --highlight: #4A3A1E;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .4), 0 8px 28px -10px rgba(0, 0, 0, .5);
  --focus-ring: 0 0 0 3px rgba(240, 122, 46, .45);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }

/* Le header est en position: sticky → on garde de la marge sous le focus
   ramené par les liens d'ancre (skip-link inclus) pour éviter qu'il passe
   sous la barre (WCAG 2.4.11 Focus Not Obscured). */
:root { scroll-padding-top: 112px; } /* header sticky mesuré à 96px (audit a11y-engine 2026-07-17) */
@media (max-width: 900px) { :root { scroll-padding-top: 72px; } }

/* ---------- A11y utilities ---------- */

/* Texte visuellement masqué mais lu par les lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link WCAG 2.4.1 — invisible jusqu'au focus clavier, puis épinglé
   en haut à gauche en lisible-haut-contraste. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: top .12s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Focus visible global (WCAG 2.4.7) — outline contrasté, contre-ratio AA
   sur tous les fonds. Les composants qui veulent un effet différent
   (theme-toggle box-shadow par ex.) gardent leur propre focus-visible. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* <main> reçoit tabindex=-1 pour pouvoir être cible du skip-link sans
   afficher d'outline parasite. */
main:focus { outline: none; }

.tf h1, .tf h2, .tf h3, .tf h4, .tf h5, .tf h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  color: var(--anchor);
  margin: 0;
  text-wrap: balance;
}
.tf h1 { font-size: var(--fs-h1); letter-spacing: -0.04em; }
.tf h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
.tf h3 { font-size: var(--fs-h3); }
.tf h4 { font-size: var(--fs-h4); }
.tf h5 { font-size: var(--fs-h5); }
.tf h6 { font-size: var(--fs-h6); }
.tf p { margin: 0; text-wrap: pretty; }

/* :where(.tf) neutralise la spécificité de la classe (0,0,0,1 au lieu de
   0,0,1,1) pour ne PAS écraser les règles .tf-btn* (0,0,1,0) sur les
   ancres qui sont aussi des boutons (WCAG 1.4.3 — assure que les styles
   bouton appliqués à <a class="tf-btn"> ne sont pas neutralisés par les
   styles d'ancre génériques). */
:where(.tf) a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  transition: background-size .25s ease, color .15s ease;
  padding-bottom: 1px;
}
:where(.tf) a:hover { background-size: 100% 2.5px; color: var(--accent-text); }
/* Outline plein (pas de box-shadow translucide : à .32 d'alpha le contraste
   effectif tombait à ~1.6:1 — sous le seuil 3:1 de WCAG 1.4.11. Audit
   manuel du 2026-07-17). Même langage de focus que le reste du site. */
:where(.tf) a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.tf code, .tf .mono {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-feature-settings: "liga" 0;
}

/* ---------- Buttons ---------- */
.tf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  padding: 14px 22px;
  min-height: 48px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              transform .1s ease, box-shadow .15s ease;
  text-decoration: none;
  background-image: none;
  letter-spacing: -0.005em;
}
.tf-btn:hover { background-size: 0 0; }
.tf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-btn:active { transform: translateY(1px); }

.tf-btn--primary {
  background: var(--accent-bg);
  color: var(--accent-ink);
}
.tf-btn--primary:hover {
  background: color-mix(in oklch, var(--accent-bg) 88%, black);
  color: var(--accent-ink);
}
.tf-btn--primary:disabled {
  background: var(--ink-3);
  color: var(--bg);
  cursor: not-allowed;
}

.tf-btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-2);
}
.tf-btn--secondary:hover {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}

.tf-btn--ghost {
  background: transparent;
  color: var(--ink);
  padding-left: 0;
  padding-right: 0;
}
.tf-btn--ghost::after {
  content: "→";
  margin-left: 2px;
  transition: transform .18s ease;
  display: inline-block;
}
.tf-btn--ghost:hover { color: var(--accent-text); }
.tf-btn--ghost:hover::after { transform: translateX(3px); }

/* ---------- Pull-quote ---------- */
.tf-pullquote {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 500;
  color: var(--anchor);
  font-style: normal;
  border-left: 3px solid var(--accent);
  padding-left: var(--s-6);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ---------- Eyebrow / kicker (mono uppercase) ---------- */
.tf-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

/* ---------- Pill tag ---------- */
.tf-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 3px 9px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  background: var(--surface);
}

/* ---------- Service card ---------- */
.tf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-7);
  transition: border-color .2s ease;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}
.tf-card:hover { border-color: var(--ink); }

/* ---------- Drop cap ---------- */
.tf-dropcap::first-letter,
.tf-dropcap > p:first-child::first-letter {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 4.2em;
  line-height: .85;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--accent);
  letter-spacing: -0.04em;
}

/* ---------- Selection ---------- */
.tf ::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ============================================================
   prefers-reduced-motion — désactive transitions et animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==== site/Logo ==== */
.tf .logo{
    display: block;
    width: auto;
  }.tf /* Inversion taupe → crème en dark,
.tf en préservant l'orange. */
  .tf-dark .logo{
    filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(180%) hue-rotate(2deg);
  }

/* ==== site/SectionRule ==== */
.tf .section-rule{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    align-items: center;
    gap: 24px;
  }.tf .section-rule__line{
    flex: 1;
    height: 1px;
    background: var(--border);
  }.tf .section-rule__mark{
    color: var(--ink-3);
    display: flex;
  }
  @media (max-width: 900px) {.tf .section-rule{ padding: 0 24px; }
  }

/* ==== site/ThemeToggle ==== */
.tf .theme-toggle{
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: 100px;
    padding: 6px 10px;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 32px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .15s ease, color .15s ease;
  }.tf .theme-toggle:hover{
    border-color: var(--ink);
    color: var(--ink);
  }.tf .theme-toggle:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }.tf .theme-toggle__dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--anchor);
    transition: background .15s ease;
  }.tf-dark .theme-toggle__dot{
    background: var(--accent);
  }.tf .theme-toggle__label--dark{ display: none; }.tf-dark .theme-toggle__label--light{ display: none; }.tf-dark .theme-toggle__label--dark{ display: inline; }

/* ==== site/Header ==== */
.tf .site-header{
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 20;
  }.tf .site-header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 80px;
    max-width: 1440px;
    margin: 0 auto;
  }.tf .site-header__logo{
    background: none;
    padding: 0;
    display: inline-flex;
  }.tf .site-header__logo:hover{ background-size: 0 0; }.tf .site-header__nav{
    display: flex;
    align-items: center;
    gap: 36px;
  }.tf .site-header__link{
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    background: none;
    padding: 0 0 4px;
    border-bottom: 1.5px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }.tf .site-header__link:hover{
    color: var(--ink);
    background-size: 0 0;
  }.tf .site-header__link--active{
    color: var(--anchor);
    border-bottom-color: var(--accent);
  }.tf .site-header__divider{
    width: 1px;
    height: 18px;
    background: var(--border);
  }.tf .site-header__cta{
    padding: 10px 18px;
    min-height: 40px;
    font-size: 14px;
  }.tf .site-header__burger{
    display: none;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    flex-direction: column;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }.tf .site-header__burger span{
    width: 18px;
    height: 1.5px;
    background: currentColor;
  }.tf .mobile-menu{
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 30;
    padding: 88px 24px 24px;
    overflow-y: auto;
  }.tf .mobile-menu__nav{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }.tf .mobile-menu__link{
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 500;
    color: var(--ink);
    background: none;
    padding: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
  }.tf .mobile-menu__link--active{
    color: var(--accent);
  }.tf .mobile-menu__actions{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  @media (max-width: 900px) {.tf .site-header__inner{
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
    }.tf .site-header__nav{
      display: none;
    }.tf .site-header__burger{
      display: inline-flex;
    }
  }

/* ==== site/ServicesSubnav ==== */
.tf .services-subnav{
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }.tf .services-subnav__inner{
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--ink-3);
  }.tf .services-subnav__label{
    color: var(--ink-3);
    flex-shrink: 0;
  }.tf .services-subnav__label-link{
    color: var(--ink-2);
    background: none;
    padding: 0;
  }.tf .services-subnav__label-link:hover{
    color: var(--ink);
    background-size: 0 0;
  }.tf .services-subnav__items{
    color: var(--ink-2);
  }.tf .services-subnav__sep{
    color: var(--ink-3);
    margin: 0 2px;
  }.tf .services-subnav__link{
    color: var(--ink-2);
    background: none;
    /* WCAG 2.5.8 — cible tactile minimum 24×24 px. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 2px;
    transition: color .15s ease;
  }.tf .services-subnav__link:hover{
    color: var(--ink);
    background-size: 0 0;
  }.tf .services-subnav__link--active{
    color: var(--accent-text);
  }

  @media (max-width: 900px) {.tf .services-subnav__inner{
      padding: 14px 24px;
    }
  }

/* ==== site/Footer ==== */
.tf .site-footer{
    border-top: 1px solid var(--border);
    background: var(--bg);
    margin-top: var(--s-11);
  }.tf .site-footer__inner{
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 80px 40px;
  }.tf .site-footer__grid{
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 1fr;
    gap: 64px;
  }.tf .site-footer__brand .logo{ margin-bottom: 18px; }.tf .site-footer__tagline{
    font-size: 14px;
    color: var(--ink-2);
    max-width: 280px;
    line-height: 1.6;
    margin: 0;
  }.tf .site-footer__col ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }.tf /* h2 sémantique (a11y : repère de navigation par titres + landmark nommé
     via aria-labelledby),
.tf mais rendu visuel d'un eyebrow — on neutralise
     les règles globales .tf h2 qui rendraient le label trop lourd. */
  .site-footer__heading{
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-wrap: auto;
  }.tf .site-footer__col a{
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    background: none;
    /* WCAG 2.5.8 — cible tactile minimum 24×24 px. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 0;
    line-height: 1.2;
  }.tf .site-footer__col--mono a{
    font-family: var(--font-mono);
    font-size: 13px;
  }.tf .site-footer__bottom{
    margin-top: 80px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }.tf .site-footer__bottom-link{
    color: var(--ink-2);
    background: none;
    /* WCAG 2.5.8 — cible tactile minimum 24×24 px. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 0;
    text-decoration: none;
    transition: color .15s ease;
  }.tf .site-footer__bottom-link:hover{
    color: var(--ink);
  }

  @media (max-width: 900px) {.tf .site-footer__inner{
      padding: 48px 24px 32px;
    }.tf .site-footer__grid{
      grid-template-columns: 1fr;
      gap: 36px;
    }.tf .site-footer__bottom{
      margin-top: 48px;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }

/* ==== paragraphs/Hero ==== */
.tf .hero{
    padding: 72px 80px 96px;
    max-width: 1440px;
    margin: 0 auto;
  }.tf .hero--with-marginalia{
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 64px;
    align-items: end;
  }.tf .hero__main{ max-width: 1100px; }.tf .hero__eyebrow{ margin-bottom: 28px; }.tf .hero__title{
    font-size: clamp(44px, 7vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin-top: 22px;
    margin-bottom: 32px;
    max-width: 900px;
  }.tf .hero__title-accent{
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
  }.tf .hero__subtitle{
    font-family: var(--font-serif);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 580px;
    margin-bottom: 40px;
    font-style: italic;
  }.tf .hero__ctas{
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
  }.tf .hero__marginalia{
    border-left: 1px solid var(--border);
    padding-left: 32px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-self: stretch;
    justify-content: flex-end;
  }.tf .hero__dateline{
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
  }

  @media (max-width: 1000px) {.tf .hero--with-marginalia{
      grid-template-columns: 1fr;
      gap: 40px;
    }.tf .hero__marginalia{
      border-left: none;
      border-top: 1px solid var(--border);
      padding-left: 0;
      padding-top: 32px;
    }
  }

  @media (max-width: 900px) {.tf .hero{ padding: 40px 24px 56px; }.tf .hero__ctas .tf-btn{
      width: 100%;
      justify-content: center;
    }
  }

/* ==== paragraphs/MetaField ==== */
.tf .meta-field{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }.tf .meta-field__label{
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }.tf .meta-field__value{
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink);
    line-height: 1.45;
  }

/* ==== paragraphs/EditorialText ==== */
.tf .editorial-text{
    padding: 96px 80px;
    margin: 0 auto;
  }.tf .editorial-text--prose{ max-width: 1100px; }.tf .editorial-text--wide{ max-width: 1100px; }.tf /* rail commun des sections */
  .editorial-text--dropcap{ max-width: 1100px; }.tf .editorial-text__inner{ max-width: 100%; }.tf .editorial-text--prose .editorial-text__inner,
.tf .editorial-text--dropcap .editorial-text__inner{
    max-width: var(--prose-max);
  }.tf .editorial-text__kicker{ margin-bottom: 18px; }.tf .editorial-text__title{ margin-bottom: 28px; }.tf /* Body prose */
  .editorial-text__body p{
    margin-bottom: 1.2em;
    font-size: var(--fs-body);
    line-height: 1.7;
  }.tf .editorial-text__body p:last-child{ margin-bottom: 0; }.tf /* Dropcap : titre H2 plus large + premier paragraphe en taille lead */
  .editorial-text--dropcap .editorial-text__title{
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.02;
  }.tf .editorial-text--dropcap .editorial-text__body p:first-child{
    font-size: var(--fs-lead);
    line-height: 1.6;
  }.tf .editorial-text__body h3{
    font-size: var(--fs-h4);
    margin-top: 1.6em;
    margin-bottom: 0.6em;
  }.tf .editorial-text__body h4{
    font-size: var(--fs-h5);
    margin-top: 1.4em;
    margin-bottom: 0.5em;
  }.tf .editorial-text__body ul,
.tf .editorial-text__body ol{
    margin: 0 0 1.2em;
    padding-left: 1.5em;
  }.tf .editorial-text__body li{
    margin-bottom: 0.6em;
    line-height: 1.65;
  }.tf .editorial-text__body strong{
    color: var(--anchor);
    font-weight: 600;
  }

  @media (max-width: 900px) {.tf .editorial-text{ padding: 56px 24px; }
  }

/* ==== paragraphs/PullQuote ==== */
.tf .pull-quote-wrap{
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 80px;
  }.tf .pull-quote-wrap .tf-pullquote p{
    margin: 0;
  }.tf .pull-quote-wrap__attribution{
    display: block;
    margin-top: 16px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--ink-2);
    letter-spacing: 0.04em;
  }
  @media (max-width: 900px) {.tf .pull-quote-wrap{ padding: 32px 24px; }
  }

/* ==== paragraphs/Card ==== */
.tf /* Default card */
  .card__header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }.tf .card__meta{ color: var(--ink-3); }.tf .card__title{
    font-size: var(--fs-h4);
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.15;
  }.tf .card__description{
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.6;
  }.tf .card__description p{ margin: 0 0 0.8em; }.tf .card__description p:last-child{ margin-bottom: 0; }.tf .card__link{
    margin-top: 8px;
    font-size: 15px;
    align-self: flex-start;
  }.tf /* Pillar variant (4-col,
.tf no border,
.tf mono accent number) */
  .pillar{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }.tf .pillar__num{
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-text);
    letter-spacing: 0.1em;
  }.tf .pillar__title{
    font-size: 22px;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }.tf .pillar__description{
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
  }.tf .pillar__description p{ margin: 0 0 0.6em; }.tf .pillar__description p:last-child{ margin-bottom: 0; }.tf .pillar__link{ font-size: 14px; margin-top: 4px; align-self: flex-start; }

  @media (max-width: 900px) {.tf .card{ padding: 24px; }.tf .card__title{ font-size: 22px; }
  }

/* ==== paragraphs/CardsGrid ==== */
.tf /* Rail commun des sections : 1100px + padding 80,
.tf aligné sur
     .editorial-text--prose (harmonisation du 2026-07-16 — les titres de
     section partagent le même rail gauche sur toutes les pages). */
  .cards-grid{
    padding: 96px 80px;
    max-width: 1100px;
    margin: 0 auto;
  }.tf .cards-grid--pillars{
    padding-top: 0; /* normalement suit un editorial_text + pull_quote, on resserre */
  }.tf .cards-grid__inner{ max-width: 100%; }.tf .cards-grid__header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 56px;
  }.tf .cards-grid__title{
    font-size: clamp(34px, 4.5vw, 56px);
    margin-top: 18px;
    max-width: 720px;
    letter-spacing: -0.025em;
    line-height: 1.05;
  }.tf .cards-grid__intro{
    font-size: 15px;
    color: var(--ink-2);
    max-width: 320px;
    line-height: 1.6;
  }.tf .cards-grid__intro p{ margin: 0; }.tf .cards-grid__items{
    display: grid;
    gap: 20px;
  }.tf .cards-grid--cols-2 .cards-grid__items{ grid-template-columns: repeat(2, 1fr); }.tf /* Nombre impair de cartes en 2 colonnes : la dernière s'étend sur toute
     la largeur plutôt que de rester orpheline en bas à gauche. */
  .cards-grid--cols-2 .cards-grid__items > :last-child:nth-child(odd){ grid-column: 1 / -1; }.tf .cards-grid--cols-3 .cards-grid__items{ grid-template-columns: repeat(3, 1fr); }.tf .cards-grid--cols-4 .cards-grid__items{ grid-template-columns: repeat(4, 1fr); }.tf /* Pillars : gap réduit,
.tf séparateur en haut */
  .cards-grid__items--pillars{
    gap: 32px;
    border-top: 1px solid var(--border);
    padding-top: 40px;
  }

  @media (max-width: 1100px) {.tf .cards-grid--cols-3 .cards-grid__items,
.tf .cards-grid--cols-4 .cards-grid__items{
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 700px) {.tf .cards-grid{ padding: 56px 24px; }.tf .cards-grid__header{
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 32px;
    }.tf .cards-grid__items,
.tf .cards-grid--cols-2 .cards-grid__items,
.tf .cards-grid--cols-3 .cards-grid__items,
.tf .cards-grid--cols-4 .cards-grid__items{
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

/* ==== paragraphs/StackChip ==== */
.tf .stack-chip{
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink);
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border: 1px solid var(--border-2);
    border-radius: 100px;
    background: var(--surface);
    font-weight: 400;
    font-style: normal;
  }.tf .stack-chip--cat{
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--accent-text);
    padding: 0 6px;
    border: none;
    background: transparent;
    border-radius: 0;
  }

/* ==== paragraphs/StackCloud ==== */
.tf .stack-cloud{
    padding: 120px 80px;
    max-width: 1100px; /* rail commun des sections */
    margin: 0 auto;
  }.tf .stack-cloud__header{
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 80px;
    margin-bottom: 40px;
    align-items: end;
  }.tf .stack-cloud__title{
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -0.025em;
    margin-top: 18px;
  }.tf .stack-cloud__intro{
    font-size: 17px;
    color: var(--ink-2);
    max-width: 480px;
    line-height: 1.65;
  }.tf .stack-cloud__intro p{ margin: 0; }.tf .stack-cloud__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    max-width: 1040px;
    line-height: 2.2;
  }

  @media (max-width: 900px) {.tf .stack-cloud{ padding: 56px 24px; }.tf .stack-cloud__header{
      grid-template-columns: 1fr;
      gap: 16px;
    }.tf .stack-cloud__chips{
      gap: 6px;
      line-height: 2;
    }
  }

/* ==== paragraphs/Step ==== */
.tf .step{
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
  }.tf .step:last-child{ border-bottom: none; }.tf .step__header{
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 24px;
    align-items: baseline;
    margin-bottom: 18px;
  }.tf .step__label{
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--accent-text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }.tf .step__title{
    font-size: var(--fs-h4);
    line-height: 1.15;
  }.tf .step__duration{
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }.tf .step__description{
    margin-left: 144px;
    max-width: var(--prose-max);
  }.tf .step__description p{
    margin: 0 0 1em;
    line-height: 1.65;
  }.tf .step__description p:last-child{ margin-bottom: 0; }

  @media (max-width: 900px) {.tf .step__header{
      grid-template-columns: 1fr;
      gap: 6px;
      margin-bottom: 12px;
    }.tf .step__description{ margin-left: 0; }
  }

/* ==== paragraphs/StepsList ==== */
.tf .steps-list{
    padding: 96px 80px;
    max-width: 1100px; /* rail commun des sections */
    margin: 0 auto;
  }.tf .steps-list__header{ margin-bottom: 32px; }.tf .steps-list__title{
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -0.025em;
    margin-bottom: 16px;
  }.tf .steps-list__intro{
    color: var(--ink-2);
    max-width: var(--prose-max);
    line-height: 1.65;
  }.tf .steps-list__intro p{ margin: 0; }.tf .steps-list__items{
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border);
  }

  @media (max-width: 900px) {.tf .steps-list{ padding: 56px 24px; }
  }

/* ==== paragraphs/PricingRow ==== */
.tf .pricing-row{ border-bottom: 1px solid var(--border); }.tf .pricing-row:last-child{ border-bottom: none; }.tf .pricing-row > *{
    padding: 20px 16px;
    text-align: left;
    vertical-align: top;
  }.tf .pricing-row__label{
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--anchor);
    font-size: 16px;
  }.tf .pricing-row__effort{
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-2);
    letter-spacing: 0.02em;
  }.tf .pricing-row__price{
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.01em;
  }.tf .pricing-row__note{
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
  }

/* ==== paragraphs/PricingTable ==== */
.tf .pricing-table{
    padding: 96px 80px;
    max-width: 1100px; /* rail commun des sections */
    margin: 0 auto;
  }.tf .pricing-table__inner{ max-width: 100%; }.tf .pricing-table__title{
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -0.025em;
    margin-bottom: 18px;
  }.tf .pricing-table__intro{
    color: var(--ink-2);
    max-width: var(--prose-max);
    margin-bottom: 32px;
    line-height: 1.65;
  }.tf .pricing-table__intro p{ margin: 0 0 0.8em; }.tf .pricing-table__intro p:last-child{ margin-bottom: 0; }.tf .pricing-table__scroll{
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
  }.tf .pricing-table__table{
    width: 100%;
    border-collapse: collapse;
  }.tf .pricing-table__th{
    padding: 16px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    font-weight: 500;
    text-align: left;
    border-bottom: 1px solid var(--border-2);
    background: var(--surface-2);
  }.tf .pricing-table__footnote{
    margin-top: 18px;
    font-size: 13px;
    color: var(--ink-2);
    font-style: italic;
  }.tf .pricing-table__footnote p{ margin: 0; }

  @media (max-width: 900px) {.tf .pricing-table{ padding: 56px 24px; }
  }

/* ==== paragraphs/FaqItem ==== */
.tf .faq-item{
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
  }.tf .faq-item:last-child{ border-bottom: none; }.tf .faq-item__question{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: var(--font-sans);
    font-size: var(--fs-h6);
    font-weight: 500;
    color: var(--anchor);
    cursor: pointer;
    list-style: none;
    padding: 6px 0;
    line-height: 1.4;
  }.tf .faq-item__question::-webkit-details-marker{ display: none; }.tf .faq-item__question:hover{ color: var(--accent-text); }.tf .faq-item__chevron{
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink-2);
    transition: transform .2s ease;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
  }.tf .faq-item[open] .faq-item__chevron{
    transform: rotate(45deg);
    color: var(--accent);
  }.tf .faq-item__answer{
    padding-top: 16px;
    color: var(--ink-2);
    max-width: var(--prose-max);
  }.tf .faq-item__answer p{
    margin: 0 0 0.8em;
    line-height: 1.65;
  }.tf .faq-item__answer p:last-child{ margin-bottom: 0; }

/* ==== paragraphs/FaqList ==== */
.tf .faq-list{
    padding: 96px 80px;
    max-width: 1100px;
    margin: 0 auto;
  }.tf /* 880px de largeur de lecture,
.tf mais calé sur le rail gauche commun
     plutôt que centré (le titre s'aligne avec ceux des autres sections). */
  .faq-list__inner{ max-width: 880px; }.tf .faq-list__title{
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -0.025em;
    margin-bottom: 32px;
  }.tf .faq-list__items{
    border-top: 1px solid var(--border);
  }
  @media (max-width: 900px) {.tf .faq-list{ padding: 56px 24px; }
  }

/* ==== paragraphs/HighlightBlock ==== */
.tf .highlight-wrap{
    padding: 0 80px;
    max-width: 1100px; /* rail commun des sections */
    margin: 0 auto;
  }.tf .highlight-block{
    border-radius: 14px;
    padding: 72px 64px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }.tf /* Variant accent : fond ancre en light,
.tf surface en dark.
     On override --accent-text localement : sur fond sombre,
.tf l'eyebrow
     orange a besoin d'une teinte plus claire pour rester lisible (AA). */
  .highlight-block--accent{
    background: var(--anchor);
    color: var(--bg);
    --accent-text: #F4A06A; /* 7.7:1 sur --anchor #2A1F1A */
  }.tf-dark .highlight-block--accent{
    background: var(--surface);
    color: var(--ink);
    --accent-text: var(--accent); /* dark : --accent passe déjà sur --surface */
  }.tf /* Variant neutral : surface plus calme */
  .highlight-block--neutral{
    background: var(--surface-2);
    color: var(--ink);
  }.tf /* Variant urgent : accent direct */
  .highlight-block--urgent{
    background: var(--accent);
    color: var(--accent-ink);
  }.tf .highlight-block__deco{
    position: absolute;
    top: -20px;
    right: -20px;
    opacity: 0.08;
    color: currentColor;
  }.tf .highlight-block__content{
    position: relative;
    max-width: 640px;
  }.tf .highlight-block__eyebrow{
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }.tf .highlight-block__title{
    font-size: clamp(32px, 4.5vw, 52px);
    margin-top: 18px;
    margin-bottom: 22px;
    color: inherit;
    letter-spacing: -0.025em;
    line-height: 1.05;
  }.tf .highlight-block__body{
    font-size: 18px;
    line-height: 1.65;
    opacity: 0.85;
    max-width: 540px;
  }.tf .highlight-block__body p{ margin: 0 0 1em; }.tf .highlight-block__body p:last-child{ margin-bottom: 0; }.tf .highlight-block__cta{
    position: relative;
    display: flex;
    align-items: flex-end;
  }

  @media (max-width: 900px) {.tf .highlight-wrap{ padding: 16px 24px 56px; }.tf .highlight-block{
      grid-template-columns: 1fr;
      padding: 36px 28px;
      gap: 24px;
    }.tf .highlight-block__deco svg{ width: 140px; height: 140px; }.tf .highlight-block__title{ font-size: 32px; }.tf .highlight-block__body{ font-size: 15px; }.tf .highlight-block__cta .tf-btn{
      width: 100%;
      justify-content: center;
    }
  }

/* ==== paragraphs/CtaBlock ==== */
.tf .cta-block{
    padding: 96px 80px 120px;
    max-width: 1100px; /* rail commun ; la composition reste centrée (accent volontaire) */
    margin: 0 auto;
    text-align: center;
  }.tf .cta-block__inner{ max-width: 720px; margin: 0 auto; }.tf .cta-block__eyebrow{ justify-content: center; margin-bottom: 24px; }.tf .cta-block__title{
    font-size: clamp(38px, 5vw, 72px);
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin-bottom: 28px;
  }.tf .cta-block__body{
    font-size: 19px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 40px;
  }.tf .cta-block__body p{ margin: 0 0 0.8em; }.tf .cta-block__body p:last-child{ margin-bottom: 0; }.tf .cta-block__ctas{
    display: inline-flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 900px) {.tf .cta-block{ padding: 64px 24px 80px; }.tf .cta-block__ctas{
      display: flex;
      flex-direction: column;
      width: 100%;
    }.tf .cta-block__ctas .tf-btn{
      width: 100%;
      justify-content: center;
    }
  }

/* ==== services/index ==== */
.tf .services-index{
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 80px 96px;
  }.tf .services-index__header{
    margin-bottom: 64px;
  }.tf .services-index__dateline{
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 28px;
  }.tf .services-index__title{
    font-size: clamp(44px, 7vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0;
  }.tf .services-index__lede{
    margin-top: 18px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 720px;
  }.tf .services-index__list{
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border);
  }.tf .services-index__item{
    border-bottom: 1px solid var(--border);
  }.tf .services-index__link{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 32px;
    padding: 28px 0;
    color: var(--ink);
    background: none;
    transition: color .15s ease;
  }.tf .services-index__link:hover{
    color: var(--anchor);
    background-size: 0 0;
  }.tf .services-index__num{
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    font-weight: 500;
  }.tf .services-index__name{
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    letter-spacing: -0.015em;
  }.tf .services-index__arrow{
    font-size: 1.6em;
    color: var(--ink-3);
    transition: transform .15s ease, color .15s ease;
    line-height: 1;
  }.tf .services-index__link:hover .services-index__arrow{
    color: var(--accent);
    transform: translateX(4px);
  }.tf .services-index__empty{
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-2);
  }

  @media (max-width: 900px) {.tf .services-index{
      padding: 40px 24px 56px;
    }.tf .services-index__header{
      margin-bottom: 40px;
    }.tf .services-index__link{
      gap: 18px;
      padding: 22px 0;
      grid-template-columns: auto 1fr auto;
    }
  }

/* ==== [...slug] ==== */
.tf .page-meta{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 80px 64px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
  }
  @media (max-width: 900px) {.tf .page-meta{ padding: 0 24px 40px; }
  }

/* ==== 404 ==== */
.tf .page-404{
    max-width: 760px;
    margin: 0 auto;
    padding: 96px 80px 128px;
  }.tf .page-404__dateline{
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 28px;
  }.tf .page-404__title{
    font-size: clamp(44px, 7vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin-bottom: 28px;
  }.tf .page-404__lede{
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.5;
    color: var(--ink-2);
    margin-bottom: 40px;
    max-width: 580px;
  }.tf .page-404__links{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  @media (max-width: 900px) {.tf .page-404{ padding: 56px 24px 80px; }.tf .page-404__links .tf-btn{ width: 100%; justify-content: center; }
  }

/* Mode contraste élevé (Windows High Contrast / forced-colors) : les focus
 * qui reposent sur box-shadow ou couleur y disparaissent — on restaure un
 * vrai outline système. Leçon portée de complia.be (aucun outil automatisé
 * ne détecte ce cas). */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }
}

/* 1.4.10 Redistribution — un mot long (« systématiquement ») ne doit jamais
 * créer de défilement horizontal à 320px (constat audit a11y-engine
 * 2026-07-17). overflow-wrap = filet d'urgence sans impact visuel ;
 * la césure automatique est réservée aux très petits écrans, où elle est
 * physiquement nécessaire — PAS au-delà (hyphens: auto coupe sinon les
 * titres même sans débordement, retour de Fred sur le hero). */
.tf h1, .tf h2, .tf h3, .tf h4, .tf .prose {
  overflow-wrap: break-word;
}
@media (max-width: 400px) {
  /* h1 exclu : hyphens:auto coupe pour équilibrer les lignes même quand le
   * mot entier tient (vu sur le hero) — or les tailles fluides ci-dessous
   * garantissent que le plus long mot d'un h1 tient toujours entier. */
  .tf h2, .tf h3, .tf h4 { hyphens: auto; }
}

/* Le plancher de 44px du hero force la césure de « d'accessibilité »
 * (15 caractères) sous ~410px de large. Sous 430px, taille fluide calée
 * pour que le mot le plus long des h1 tienne entier — la césure ≤400px
 * ne reste qu'en ultime filet (retour de Fred : pas de mots coupés dans
 * le hero). Continuité : 11.5vw - 5px = 44px à 430px. */
@media (max-width: 430px) {
  .tf .hero__title { font-size: clamp(30px, 11.5vw - 5px, 44px); }
}