/* Bascule : direction artistique « précision comptable suisse ».
   Papier blanc cassé, encre presque noire, un seul bleu électrique franc, aucun dégradé.
   IBM Plex Sans pour le texte, IBM Plex Mono pour les chiffres, les dates et les étiquettes.
   Grille fine visible et motifs de facture : bord perforé, lignes de tableau, QR stylisé, tampon « conforme ».
   La frise des échéances 2026-2027, tracée comme un diagramme de Gantt, sert d'élément signature. */

:root {
  --bg: #f2f1ec;
  --surface: #ffffff;
  --surface-2: #e8e7e0;
  --ink: #0d0e11;
  --ink-2: #33363d;
  --muted: #595c64;
  --line: #cdcbc2;
  --line-2: #dfddd5;
  --accent: #1a3cff;
  --accent-ink: #1230d6;
  --accent-soft: #e3e8ff;
  --accent-on-dark: #9eaeff;
  --on-accent: #ffffff;
  --ok: #0b6b43; --ok-bg: #e7f2ec;
  --warn: #8a4b00; --warn-bg: #fbf0dc;
  --ko: #b3261e; --ko-bg: #fbe9e7;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --head-weight: 600;
  --head-tracking: -0.025em;
  --radius: 4px;
  --radius-btn: 3px;
  --shadow: 0 1px 0 rgba(13, 14, 17, .05), 0 14px 30px -20px rgba(13, 14, 17, .45);
  --maxw: 1200px;
  --header-bg: #f2f1ec;
  --header-ink: #0d0e11;
  --footer-bg: #0d0e11;
  --footer-ink: #b9bbc2;
  --footer-strong: #ffffff;
  --grid-minor: rgba(13, 14, 17, .045);
  --grid-major: rgba(13, 14, 17, .085);
}

/* ---------- Base ---------- */
body { background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.6; font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--ink); }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-thickness: 2px; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mono, .eyebrow, time { font-family: var(--font-mono); }
.eyebrow { font-weight: 500; letter-spacing: .08em; font-size: 12.5px; color: var(--accent-ink); }
.gridpaper, .site-facture-electronique .page-head, .site-facture-electronique .lead {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ---------- Boutons ---------- */
.btn { border-radius: var(--radius-btn); border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent); font: 600 16px/1.2 var(--font-body); letter-spacing: -.005em; padding: 12px 20px; min-height: 46px; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { filter: none; background: #0f2be0; border-color: #0f2be0; color: #fff; text-decoration: none; }
.btn-big { padding: 15px 24px; font-size: 17px; min-height: 54px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn .arr { font-family: var(--font-mono); font-weight: 500; transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- En-tête ---------- */
.site-header { background: var(--header-bg); border-bottom: 1px solid var(--ink); box-shadow: inset 0 3px 0 var(--accent); }
.header-in { min-height: 70px; }
.brand { gap: 12px; min-height: 44px; }
.brand-logo { width: 38px; height: 38px; }
.brand-name { font-family: var(--font-body); font-weight: 700; font-size: 21px; letter-spacing: -.035em; }
.brand-tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav { gap: 26px; }
.nav a { font-size: 15px; opacity: 1; color: var(--ink-2); padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav a.btn { color: var(--on-accent); padding: 10px 16px; min-height: 42px; border-bottom: 1.5px solid var(--accent); font-size: 15px; }
.nav a.btn::after { content: "→"; font-family: var(--font-mono); margin-left: 2px; }
.nav-toggle { width: 46px; height: 46px; border: 1px solid var(--ink); border-radius: var(--radius-btn); }
@media (max-width: 940px) {
  .nav { gap: 0; background: var(--bg); border-bottom: 1px solid var(--ink); box-shadow: 0 18px 30px -24px rgba(13, 14, 17, .5); padding: 6px 16px 18px; }
  .nav a { padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav a:hover { border-bottom-color: var(--line); }
  .nav a.btn { margin-top: 14px; border-bottom: 1.5px solid var(--accent); justify-content: center; }
}

/* ---------- Primitives de section ---------- */
.section { padding: 88px 0; }
.sec-white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-dark { background: var(--ink); color: #d9dbe0; }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; }
@media (min-width: 900px) { .sec-head { grid-template-columns: 3fr 9fr; gap: 32px; } }
.sec-num { margin: 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-top: 2px solid var(--ink); padding-top: 10px; align-self: start; display: flex; gap: 14px; }
.sec-num span { color: var(--accent-ink); font-weight: 500; }
.sec-dark .sec-num { color: #c9ccd3; border-top-color: #fff; }
.sec-dark .sec-num span { color: var(--accent-on-dark); }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 14px; max-width: 22ch; text-wrap: balance; }
.sec-lede { margin: 0; font-size: 18.5px; color: var(--ink-2); max-width: 62ch; }
.sec-dark .sec-lede { color: #c9ccd3; }
.lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 400; }

/* ---------- Héros ---------- */
.hero { border-bottom: 1px solid var(--ink); overflow: hidden; }
.hero-grid { display: grid; gap: 48px; padding-top: 64px; padding-bottom: 56px; align-items: center; }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; padding-top: 100px; padding-bottom: 76px; } }
.kicker { margin: 0 0 22px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.kicker b { font-weight: 500; background: var(--ink); color: var(--bg); padding: 3px 8px; border-radius: 2px; letter-spacing: .06em; }
.hero h1 { font-size: clamp(38px, 4.7vw, 68px); line-height: 1; letter-spacing: -.045em; font-weight: 600; margin: 0 0 26px; }
.hero h1 .u { white-space: nowrap; color: var(--accent); background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% .07em; background-position: 0 92%; background-repeat: no-repeat; }
.hero-lede { font-size: clamp(18px, 1.5vw, 20.5px); color: var(--ink-2); max-width: 58ch; margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-note { margin: 0; padding-top: 18px; border-top: 1px dashed var(--line); font-size: 15px; color: var(--ink-2); max-width: 60ch; display: grid; gap: 6px; }
.hero-note .updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.countdown { font-family: var(--font-mono); font-weight: 500; color: var(--accent-ink); white-space: nowrap; }

/* La facture spécimen */
.hero-fig { margin: 0; position: relative; justify-self: center; width: 100%; max-width: 460px; }
.ticket-wrap { position: relative; filter: drop-shadow(0 22px 26px rgba(13, 14, 17, .16)) drop-shadow(0 1px 0 rgba(13, 14, 17, .12)); }
.ticket {
  background: #fff; color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; padding: 28px 26px 30px;
  -webkit-mask: radial-gradient(circle 5px at 8px 0, #0000 97%, #000) top left / 16px 51% repeat-x, radial-gradient(circle 5px at 8px 100%, #0000 97%, #000) bottom left / 16px 51% repeat-x;
  mask: radial-gradient(circle 5px at 8px 0, #0000 97%, #000) top left / 16px 51% repeat-x, radial-gradient(circle 5px at 8px 100%, #0000 97%, #000) bottom left / 16px 51% repeat-x;
}
.tk-top { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.tk-top b { color: var(--ink); font-weight: 500; }
.tk-h { font-family: var(--font-body); font-weight: 600; font-size: 19px; letter-spacing: -.02em; margin: 14px 0 0; }
.tk-d { margin: 2px 0 12px; color: var(--muted); font-size: 11.5px; }
.tk-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.tk-parties dt, .tk-tot dt { color: var(--muted); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; }
.tk-parties dd { margin: 0; font-weight: 500; }
.tk-new { list-style: none; margin: 0 0 14px; padding: 8px 10px 6px 12px; background: var(--accent-soft); border-left: 3px solid var(--accent); position: relative; }
.tk-new::before { content: "4 mentions nouvelles"; display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; margin-bottom: 4px; }
.tk-new li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 4px 0; border-top: 1px solid rgba(26, 60, 255, .16); }
.tk-new li:first-child { border-top: 0; }
.tk-new .k { color: var(--ink-2); font-size: 11px; }
.tk-new .v { grid-column: 1; font-weight: 500; }
.tk-new .tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 2px; padding: 1px 5px; white-space: nowrap; }
.tk-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; font-size: 12px; margin: 0 0 8px; }
.tk-lines span { padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.tk-lines .th { color: var(--muted); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.tk-lines span:not(:nth-child(3n+1)) { text-align: right; padding-left: 18px; }
.tk-tot { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 0; }
.tk-tot dd { margin: 0; text-align: right; padding-left: 12px; }
.tk-tot .net { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); text-transform: none; border-top: 1.5px solid var(--ink); padding-top: 6px; margin-top: 4px; }
.tk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.tk-foot img { width: 76px; height: 76px; display: block; }
.tk-status { margin: 0; font-size: 11px; color: var(--muted); }
.tk-status b { display: inline-block; color: var(--ok); font-weight: 500; }
.stamp { position: absolute; right: 116px; bottom: 26px; width: 178px; transform: rotate(-9deg); mix-blend-mode: multiply; opacity: .92; pointer-events: none; }
.stamp img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .stamp { animation: tampon .55s cubic-bezier(.2, .9, .3, 1.2) .5s both; }
  @keyframes tampon { from { opacity: 0; transform: rotate(-9deg) scale(1.35); } to { opacity: .92; transform: rotate(-9deg) scale(1); } }
}
.reg { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--ink); }
.reg::before { left: 8.5px; top: 0; width: 1px; height: 18px; }
.reg::after { top: 8.5px; left: 0; height: 1px; width: 18px; }
.reg-tl { left: -30px; top: -22px; } .reg-br { right: -30px; bottom: 6px; }
.fig-cap { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--muted); text-align: center; }

/* Bandeau des chiffres réglementaires */
.specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); background: var(--surface); }
.specs > div { padding: 22px 18px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specs dt { font-family: var(--font-mono); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); margin-bottom: 8px; }
.specs dt small { font-size: .55em; letter-spacing: 0; color: var(--muted); margin-left: 3px; }
.specs dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.specs > div:first-child dt { color: var(--accent); }
@media (max-width: 559px) { .specs > div:last-child { grid-column: 1 / -1; } }
@media (min-width: 560px) and (max-width: 999px) { .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .specs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .specs > div { border-bottom: 0; padding: 26px 24px 30px; } .specs > div:last-child { border-right: 0; } }
.specs-wrap { padding: 0; }
@media (min-width: 720px) { .specs-wrap { padding: 0 24px; } .specs { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* ---------- Prestations : le devis type ---------- */
.doc { border: 1px solid var(--ink); background: var(--surface); }
.doc-head { display: none; }
.ln { display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; padding: 22px 18px; border-top: 1px solid var(--line); align-items: start; }
.ln:first-of-type { border-top: 0; }
.ln-ref { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--accent-ink); padding-top: 4px; }
.ln-ico { width: 40px; height: 40px; grid-column: 2; grid-row: 1; justify-self: end; }
.ln-main { grid-column: 1 / -1; }
.ln-main h3 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 6px; }
.ln-main p { margin: 0; color: var(--ink-2); font-size: 16px; }
.ln-main a { white-space: nowrap; }
.ln-liv, .ln-prix { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; display: grid; gap: 2px; }
.ln-prix b { font-family: var(--font-mono); font-weight: 500; font-size: 17px; color: var(--ink); letter-spacing: -.02em; }
.ln-prix small { font-size: 13px; color: var(--muted); }
.ln-total { background: var(--ink); color: #fff; border-top: 0; align-items: center; }
.ln-total .ln-ref { color: var(--accent-on-dark); }
.ln-total .ln-main { grid-column: 2; font-weight: 600; font-size: 18px; }
.ln-total .ln-prix { grid-column: 1 / -1; margin: 0; }
.ln-total .ln-prix b { color: #fff; font-size: 22px; }
.doc-note { margin: 16px 0 0; font-size: 14.5px; color: var(--muted); max-width: 80ch; }
@media (min-width: 900px) {
  .doc-head { display: grid; grid-template-columns: 64px 52px minmax(0, 1fr) 230px 210px; gap: 20px; padding: 12px 24px; border-bottom: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .doc-head span:last-child { text-align: right; }
  .ln { grid-template-columns: 64px 52px minmax(0, 1fr) 230px 210px; gap: 20px; padding: 26px 24px; }
  .ln-ico { grid-column: 2; grid-row: 1; justify-self: start; width: 44px; height: 44px; }
  .ln-main { grid-column: 3; }
  .ln-liv { grid-column: 4; margin: 0; padding-top: 3px; }
  .ln-prix { grid-column: 5; margin: 0; text-align: right; padding-top: 1px; }
  .ln .lbl { display: none; }
  .ln-total .ln-main { grid-column: 2 / 5; }
  .ln-total .ln-prix { grid-column: 5; }
}

/* ---------- Frise des échéances (Gantt) ---------- */
.gantt { position: relative; margin-top: 8px; }
.g-months { display: none; }
.g-legal { display: grid; gap: 12px; margin-bottom: 18px; }
.g-mark { background: var(--ink); color: #e6e7ea; padding: 16px 18px; border-radius: var(--radius); }
.g-mark time { display: block; font-size: 22px; font-weight: 500; color: #fff; letter-spacing: -.02em; margin-bottom: 4px; }
.g-mark p { margin: 0; font-size: 15px; line-height: 1.45; }
.g-mark .st { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; margin-left: 8px; vertical-align: 4px; }
.g-mark .st-on { background: var(--accent); color: #fff; }
.g-mark .st-next { border: 1px solid #9ea2ad; color: #d6d8dd; }
.g-plan-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin: 26px 0 10px; }
.g-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-plan li { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 12px 14px; display: grid; gap: 2px; border-radius: 0 var(--radius) var(--radius) 0; }
.g-when { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.g-plan b { font-weight: 600; font-size: 16px; line-height: 1.3; }
.g-plan li > span:last-child { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.g-today { display: none; }
.g-months, .g-plan-title { position: relative; z-index: 3; }
@media (min-width: 900px) { .g-plan-title { background: var(--surface); width: fit-content; padding: 2px 8px 2px 0; } }
@media (max-width: 899px) { .gantt { display: flex; flex-direction: column; } .g-legal { display: contents; } .g-start { order: 1; } .g-plan-title { order: 2; } .g-plan { order: 3; } .g-end { order: 4; margin-top: 12px; } }
@media (min-width: 900px) {
  .gantt { padding: 0 0 14px; background-color: var(--surface); background-image: linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: calc(100% / 12) 100%; border: 1px solid var(--line); border-top: 0; }
  .g-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); background: var(--surface); margin: 0 -1px; }
  .g-months span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 0 8px 8px; }
  .g-months span.y { color: var(--ink); font-weight: 500; }
  .g-legal { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; margin: 18px 0 8px; }
  .g-mark { grid-row: 1; position: relative; z-index: 3; }
  .g-start { grid-column: 1 / 6; border-radius: 0 var(--radius) var(--radius) 0; }
  .g-end { grid-column: 8 / 13; border-radius: var(--radius) 0 0 var(--radius); text-align: right; }
  .g-plan-title { margin: 30px 0 12px 8px; }
  .g-plan { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 0; }
  .g-plan li { grid-column: var(--s) / var(--e); margin: 0 3px; position: relative; z-index: 3; }
  .g-plan li:nth-child(1) { grid-row: 1; } .g-plan li:nth-child(2) { grid-row: 2; } .g-plan li:nth-child(3) { grid-row: 3; } .g-plan li:nth-child(4) { grid-row: 4; }
  .g-today { display: block; position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--accent); z-index: 2; pointer-events: none; }
  .g-today[hidden] { display: none; }
  .g-today span { position: absolute; top: 100%; left: -1px; transform: translateY(6px); background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; white-space: nowrap; }
}
.profils { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 760px) { .profils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profil { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--ink); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.profil h3 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.profil dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; }
.profil dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.profil dd { margin: 0; font-family: var(--font-mono); font-weight: 500; text-align: right; }
.profil dd.on { color: var(--accent-ink); }
.profil p { margin: 0; font-size: 15px; color: var(--ink-2); }
.profil a { margin-top: auto; font-size: 15px; padding: 10px 0; align-self: flex-start; }
.cal-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Comment ça marche ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.steps li { position: relative; padding: 26px 0 26px 76px; border-top: 1px dashed #4a4e58; }
.steps li:first-child { border-top: 0; }
.st-ico { position: absolute; left: 0; top: 26px; width: 56px; height: 56px; background: #fff; display: grid; place-items: center; border-radius: 2px; }
.st-ico img { width: 34px; height: 34px; }
.steps .st-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--accent-on-dark); text-transform: uppercase; margin: 0 0 4px; }
.steps h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.steps p { margin: 0; color: #c9ccd3; font-size: 16px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
  .steps li { border-top: 0; padding: 0; }
  .st-ico { position: relative; top: 0; margin-bottom: 22px; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 68px; right: -16px; border-top: 1.5px dashed #6b707c; }
}
.transp { margin: 48px 0 0; padding: 22px 24px; border: 1px solid #3a3e48; border-left: 4px solid var(--accent); display: grid; gap: 8px; max-width: 900px; }
.transp p { margin: 0; color: #e3e5e9; font-size: 17px; }
.transp strong { color: #fff; }
.transp .lbl { color: var(--accent-on-dark); }

/* ---------- Méthode de comparaison ---------- */
.methode { display: grid; gap: 36px; }
@media (min-width: 1000px) { .methode { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; } }
.criteres { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.criteres li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.criteres .n { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--accent-ink); padding-top: 3px; }
.criteres b { font-weight: 600; font-size: 17px; }
.criteres span:last-child { grid-column: 2; color: var(--ink-2); font-size: 15.5px; }
.nepas { background: var(--bg); border: 1.5px solid var(--ink); padding: 26px 24px; }
@media (min-width: 1000px) { .nepas { position: sticky; top: 96px; } }
.nepas h3 { margin: 6px 0 14px; font-size: 22px; letter-spacing: -.02em; }
.nepas ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.nepas li { padding-left: 22px; position: relative; font-size: 15.5px; color: var(--ink-2); }
.nepas li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; background: var(--accent); }
.nepas li strong { color: var(--ink); }

/* ---------- Dossier de preuves ---------- */
.preuves { display: grid; gap: 36px; }
@media (min-width: 1000px) { .preuves { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.preuves-txt p { margin: 0 0 16px; color: var(--ink-2); }
.dossier { position: relative; background: var(--surface); border: 1px solid var(--ink); margin-top: 26px; }
.dossier::before { content: "Dossier de conformité"; position: absolute; left: -1px; bottom: 100%; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px 5px; border-radius: 4px 4px 0 0; }
.dossier ol { list-style: none; margin: 0; padding: 6px 22px; counter-reset: pc; }
.dossier li { counter-increment: pc; display: grid; grid-template-columns: 86px minmax(0, 1fr) 22px; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed var(--line); font-size: 16px; }
.dossier li:last-child { border-bottom: 0; }
.dossier li::before { content: "Pièce " counter(pc, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--muted); }
.dossier li::after { content: ""; width: 16px; height: 16px; align-self: center; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* ---------- Guides, FAQ, sources sur l'accueil ---------- */
.page-home .related { margin-top: 0; }
.faq-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; } }
.faq-grid .faq, .faq-grid .sources { margin-top: 0; }

/* ---------- Cartes (guides et pages liées) ---------- */
.related h2, .faq h2, .sources h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.025em; margin: 0 0 22px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 0; border-top: 1.5px solid var(--ink); border-left: 1px solid var(--line); counter-reset: cd; }
.card { counter-increment: cd; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 22px 22px 24px; gap: 8px; background: var(--surface); position: relative; transition: background-color .15s; }
.card::before { content: counter(cd, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.card::after { content: "→"; position: absolute; right: 20px; top: 20px; font-family: var(--font-mono); color: var(--accent-ink); transition: transform .15s; }
.card:hover { box-shadow: none; background: var(--accent-soft); border-color: var(--line); }
.card:hover::after { transform: translateX(3px); }
.card-kind { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .08em; color: var(--accent-ink); }
.card-title { font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.card-desc { font-size: 14.5px; color: var(--muted); }
.card-service .card-kind, .card-tool .card-kind { background: var(--accent); color: #fff; align-self: flex-start; padding: 2px 7px; border-radius: 2px; }

/* ---------- FAQ ---------- */
.faq details { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; background: transparent; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { padding: 18px 56px 18px 0; font-weight: 600; font-size: 17.5px; letter-spacing: -.01em; min-height: 44px; }
.faq summary::after { content: "+"; right: 0; top: 16px; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 18px; color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; }
.faq details[open] summary::after { content: "−"; background: var(--ink); color: #fff; }
.faq summary:hover { color: var(--accent-ink); }
.faq details > div { padding: 0 56px 20px 0; color: var(--ink-2); }
.sources { font-size: 15px; }
.sources h2 { font-size: 22px; }
.sources ul { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.sources li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.sources a { color: var(--ink); text-decoration: none; display: block; padding-right: 22px; position: relative; }
.sources a::after { content: "↗"; position: absolute; right: 0; top: 0; font-family: var(--font-mono); color: var(--accent-ink); }
.sources a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------- Pages standard ---------- */
.page-head { border-bottom: 1px solid var(--ink); padding: 34px 0 40px; position: relative; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background-image: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 24px); opacity: .5; }
.crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); gap: 10px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.page-head h1 { font-size: clamp(31px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.035em; margin: 18px 0 14px; max-width: 24ch; }
.meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.page-head .lede { font-size: clamp(18px, 1.6vw, 20.5px); color: var(--ink-2); max-width: 64ch; }
.content-wrap { padding-top: 44px; padding-bottom: 72px; }
@media (min-width: 1000px) { .content-grid.has-side { grid-template-columns: minmax(0, 1fr) 310px; gap: 64px; } }
.prose { counter-reset: h2c; }
.prose h2 { font-size: clamp(25px, 2.4vw, 31px); letter-spacing: -.025em; line-height: 1.12; margin: 52px 0 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.prose h2::before { counter-increment: h2c; content: "§ " counter(h2c, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--accent-ink); margin-bottom: 8px; }
.prose h3 { font-size: 20px; letter-spacing: -.015em; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ol li::marker { font-family: var(--font-mono); color: var(--accent-ink); }
.prose ul li::marker { color: var(--accent); }
.table-wrap { border: 1px solid var(--ink); border-radius: 0; background: var(--surface); margin: 6px 0 24px; }
table { font-size: 15px; font-variant-numeric: tabular-nums; }
th { background: var(--surface); font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1.5px solid var(--ink); padding: 12px 14px; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
tbody tr:hover td { background: #fafaf7; }

/* L'essentiel : un ticket perforé */
.bref { position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 0; border-radius: 0; padding: 22px 24px 20px 30px; margin: 0 0 30px; }
.bref::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: radial-gradient(circle 4px at 0 50%, var(--bg) 96%, transparent) 0 0 / 8px 14px repeat-y, var(--accent); }
.bref-title { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.bref ul { list-style: none; padding: 0; }
.bref li { padding-left: 20px; position: relative; margin: 9px 0; font-size: 16px; }
.bref li::before { content: "→"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); color: var(--accent); }

/* Encadré d'appel : un talon de ticket */
.cta-box { background: var(--ink); color: #fff; border: 0; border-radius: var(--radius); padding: 22px 24px; margin: 36px 0; position: relative; gap: 18px 24px; }
.cta-box::before { content: "Devis gratuit"; position: absolute; top: -10px; left: 20px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.cta-title { font-weight: 600; font-size: 19px; letter-spacing: -.015em; line-height: 1.3; flex: 1 1 280px; }
.cta-box .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cta-box .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Colonne latérale */
.sidebar { top: 100px; }
.side-box { border: 1.5px solid var(--ink); border-radius: 0; box-shadow: none; padding: 0 22px 22px; gap: 12px; background: var(--surface); }
.side-box::before { content: "Bascule · Devis gratuit"; display: block; margin: 0 -22px 6px; padding: 9px 22px; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.side-title { font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.side-text { font-size: 15px; }
.side-link { font-size: 15px; font-weight: 600; padding: 6px 0; border-top: 1px dashed var(--line); padding-top: 12px; }
.side-link::after { content: " →"; font-family: var(--font-mono); }

/* ---------- Formulaire de devis ---------- */
.lead { border-top: 1px solid var(--ink); padding: 84px 0; }
.lead h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.035em; max-width: 14ch; }
.lead-head::before { content: "Demande de devis · 2 minutes"; display: inline-block; margin-bottom: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 4px 9px; border-radius: 2px; }
.lead-intro { font-size: 17.5px; }
.lead-points li { padding-left: 32px; }
.lead-points li::before { border-radius: 2px; width: 18px; height: 18px; top: 4px; }
.lead-form { border: 1.5px solid var(--ink); border-radius: 0; box-shadow: 0 24px 40px -30px rgba(13, 14, 17, .5); padding: 0 26px 26px; }
.lead-form::before { content: "Bon de demande  ·  Bascule"; display: block; margin: 0 -26px 22px; padding: 11px 26px; border-bottom: 1px dashed var(--ink); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: pre; background: radial-gradient(circle 5px at 0 50%, var(--bg) 96%, transparent) left / 10px 100% no-repeat, radial-gradient(circle 5px at 100% 50%, var(--bg) 96%, transparent) right / 10px 100% no-repeat; }
.field label { font-size: 14.5px; font-weight: 600; }
.field input, .field select, .field textarea, .tool input:not([type=radio]):not([type=checkbox]), .tool select { border: 1px solid #a9aaa3; border-radius: 2px; background: #fff; color: var(--ink); min-height: 46px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
.consent { font-size: 13.5px; }
.consent input { accent-color: var(--accent); }
.btn-submit::after { content: "→"; font-family: var(--font-mono); }
.form-note { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
.form-success { background: #fff; border: 1.5px solid var(--ink); border-left: 4px solid var(--accent); border-radius: 0; padding: 28px 26px; color: var(--ink); }
.success-title { color: var(--accent-ink); font-size: 22px; letter-spacing: -.02em; }
@media (max-width: 600px) { .lead { padding: 56px 0; } .lead-form { padding: 0 18px 20px; } .lead-form::before { margin: 0 -18px 18px; padding: 10px 18px; } }

/* ---------- Outil ---------- */
.tool { border: 1.5px solid var(--ink); border-radius: 0; box-shadow: none; padding: 0 24px 24px; background: var(--surface); }
.tool-head { margin: 0 -24px 22px; padding: 11px 24px; background: var(--ink); color: #fff; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.tool-head span:last-child { color: var(--accent-on-dark); }
.tool .q { padding-bottom: 18px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; }
.tool .q-label { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.tool .hint { font-size: 13.5px; line-height: 1.5; }
.choices { gap: 8px; }
.choices label { border: 1px solid #a9aaa3; border-radius: 2px; min-height: 44px; padding: 9px 14px; font-size: 15px; background: #fff; transition: border-color .12s, background-color .12s; }
.choices label:hover { border-color: var(--ink); }
.choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool #fe-go::after { content: "→"; font-family: var(--font-mono); }
.result { border-radius: 0; border: 1px solid var(--line); border-left: 4px solid var(--ink); background: #fafaf7; padding: 20px 22px; }
.result.ok { background: var(--ok-bg); border-color: #b9d8c7; border-left-color: var(--ok); }
.result.warn { background: var(--warn-bg); border-color: #ecd3a6; border-left-color: var(--warn); }
.result.ko { background: var(--ko-bg); border-color: #efc2bd; border-left-color: var(--ko); }
.result-title { font-size: 20px; letter-spacing: -.02em; font-weight: 600; }
.result .hint { font-family: var(--font-mono); font-size: 12px; }
.result .btn { margin-top: 6px; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 4px solid var(--accent); padding: 64px 0 32px; font-size: 15px; }
.site-footer .brand-logo .lg-tk { fill: #f2f1ec; }
.site-footer .brand-logo .lg-tr { fill: #0d0e11; }
.brand-footer .brand-name { font-size: 24px; }
.footer-grid { gap: 40px; }
.footer-text { opacity: 1; color: var(--footer-ink); max-width: 46ch; }
.footer-title { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-on-dark); padding-bottom: 10px; border-bottom: 1px solid #2b2e36; margin-bottom: 12px; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-block; padding: 10px 0; }
.site-footer a:hover { color: var(--accent-on-dark); }
.disclaimer { border-top: 1px dashed #4a4e58; opacity: 1; color: #a5a8b0; font-size: 13px; margin-top: 44px; }
.disclaimer a { text-decoration: underline; }
.legal-links { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.legal-links a { padding: 12px 0; color: #d9dbe0; }

@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .section { padding: 64px 0; }
  .sec-head { margin-bottom: 30px; }
  .hero-grid { padding-top: 40px; }
  .ticket { padding: 26px 18px 28px; font-size: 12px; }
  .stamp { width: 116px; right: 98px; bottom: 36px; }
  .reg { display: none; }
  .hero-actions .btn { width: 100%; }
  .content-wrap { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Titre de section hors en-tête de section */
.preuves-txt .sec-num { margin-bottom: 22px; }
.preuves-txt h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 20px; max-width: 16ch; }
@media (max-width: 600px) {
  .dossier ol { padding: 4px 16px; }
  .dossier li { grid-template-columns: 62px minmax(0, 1fr) 18px; gap: 10px; font-size: 15.5px; }
  .dossier li::before { content: "N\B0  " counter(pc, decimal-leading-zero); }
}
@media (max-width: 600px) {
  .tool { padding: 0 16px 18px; }
  .tool-head { margin: 0 -16px 18px; padding: 10px 16px; }
  .result { padding: 16px 14px; }
  .result ul { padding-left: 18px; }
}
@media (max-width: 600px) { .bref { padding: 18px 16px 14px 26px; } .bref li { font-size: 15.5px; } .cta-box { padding: 22px 18px 18px; } }
.prose > h2:first-child { margin-top: 0; }
@media (max-width: 600px) {
  .table-wrap table:has(th:nth-child(3)) { min-width: 540px; }
  .table-wrap table:has(th:nth-child(5)) { min-width: 720px; }
  th, td { padding: 10px 12px; font-size: 14.5px; }
}