/* SANAGA Automation & Énergie — feuille unique (démo de Mike SOBTAMFO) */
@layer reset, tokens, base, layout, components, utilities, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, canvas, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --acier: #EFF2F5; --acier-2: #E3E7EB; --blanc: #FFFFFF; --graphite: #191D22;
    --bg: var(--acier); --bg-2: var(--acier-2); --surface: var(--blanc);
    --ink: #191D22; --ink-2: #4E5A66; --link: #154D8C; --plan: #154D8C; --on-plan: #FFFFFF;
    --accent: #F3680F; --on-accent: #191D22; --accent-text: #B04A06;
    --line: #C5CCD3; --line-strong: #7A8692; --ok: #1E7A46; --err: #B3261E;
    --band-dark: #191D22; --on-dark: #E8ECEF; --on-dark-2: #A7B0B8; --link-on-dark: #7FB0EA;
    --grid-minor: rgb(21 77 140 / .07); --grid-major: rgb(21 77 140 / .12);
    --shadow: 0 18px 50px rgb(25 29 34 / .22);
    --font-sans: Archivo, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --text--1: clamp(.83rem, .8rem + .1vw, .875rem);
    --text-0: clamp(1rem, .98rem + .1vw, 1.0625rem);
    --text-1: clamp(1.2rem, 1.12rem + .35vw, 1.33rem);
    --text-2: clamp(1.44rem, 1.25rem + .8vw, 1.77rem);
    --text-3: clamp(1.73rem, 1.4rem + 1.4vw, 2.36rem);
    --text-4: clamp(2.07rem, 1.55rem + 2.3vw, 3.15rem);
    --text-h1: clamp(2.3rem, 1.4rem + 4vw, 4.2rem);
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
    --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
    --section: clamp(4rem, 8vw, 8rem);
    --gutter: 1rem;
    --radius: 2px;
    --ease: cubic-bezier(.2, .8, .2, 1); --dur: .18s;
    --header-h: 64px;
    --demo-offset: 0px;
  }
  @media (min-width: 48em) { :root { --gutter: 1.5rem; } }
  @media (min-width: 64em) { :root { --gutter: 2rem; } }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #14181D; --bg-2: #1A2026; --surface: #1E242B; --ink: #E8ECEF; --ink-2: #A7B0B8;
      --link: #7FB0EA; --plan: #1B5CA6; --accent-text: #F3680F; --line: #2C353E; --line-strong: #6A7681;
      --ok: #5CC389; --err: #FF8A80; --band-dark: #0E1114;
      --grid-minor: rgb(127 176 234 / .07); --grid-major: rgb(127 176 234 / .12);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14181D; --bg-2: #1A2026; --surface: #1E242B; --ink: #E8ECEF; --ink-2: #A7B0B8;
    --link: #7FB0EA; --plan: #1B5CA6; --accent-text: #F3680F; --line: #2C353E; --line-strong: #6A7681;
    --ok: #5CC389; --err: #FF8A80; --band-dark: #0E1114;
    --grid-minor: rgb(127 176 234 / .07); --grid-major: rgb(127 176 234 / .12);
  }
  :root[data-theme="light"] { color-scheme: light; }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background: var(--bg); color: var(--ink); font-family: var(--font-sans);
    font-size: var(--text-0); line-height: 1.6; font-stretch: 100%; font-weight: 400;
    min-block-size: 100vh; display: flex; flex-direction: column; overflow-wrap: break-word;
  }
  main { flex: 1; }
  h1, h2, h3, h4 { font-stretch: 112%; font-weight: 760; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
  h1 { font-size: var(--text-h1); line-height: 1.02; letter-spacing: -.02em; }
  h2 { font-size: var(--text-3); }
  h3 { font-size: var(--text-1); line-height: 1.2; font-stretch: 105%; }
  h4 { font-size: var(--text-0); font-stretch: 100%; font-weight: 700; line-height: 1.3; }
  @container (max-inline-size: 30em) { h1, h2 { font-stretch: 92%; } }
  @media (max-width: 30em) { h1, h2 { font-stretch: 92%; } }
  p, li, dd { max-inline-size: 70ch; text-wrap: pretty; }
  a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--accent); color: var(--graphite); }
  strong { font-weight: 700; }
  small { font-size: var(--text--1); }
  code, kbd, samp { font-family: var(--font-mono); font-size: .92em; }
  hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-6); }
  .skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 3000; padding: .75rem 1rem; background: var(--accent); color: var(--graphite); font-weight: 700; text-decoration: none; }
  .skip-link:focus { inset-block-start: .5rem; }
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), 80rem); margin-inline: auto; }
  .wrap--wide { inline-size: min(100% - 2 * var(--gutter), 120rem); }
  .wrap--narrow { inline-size: min(100% - 2 * var(--gutter), 52rem); }
  .section { padding-block: var(--section); position: relative; }
  .section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
  .section--band { background: var(--bg-2); }
  .section--dark { background: var(--band-dark); color: var(--on-dark); --ink: var(--on-dark); --ink-2: var(--on-dark-2); --link: var(--link-on-dark); --line: #2C353E; --line-strong: #6A7681; --surface: #1E242B; }
  .section--plan { background: var(--plan); color: #fff; --ink: #fff; --ink-2: #D6E3F3; --link: #fff; --line: rgb(255 255 255 / .25); background-image: linear-gradient(var(--plan-g) 1px, transparent 1px), linear-gradient(90deg, var(--plan-g) 1px, transparent 1px); background-size: 24px 24px; --plan-g: rgb(255 255 255 / .08); }
  .stack > * + * { margin-block-start: var(--stack, var(--space-4)); }
  .grid { display: grid; gap: var(--gap, var(--space-5)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .grid--3, .grid--5 { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40em) { .grid--3, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .grid--3, .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 80em) { .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .split { display: grid; gap: var(--space-6); align-items: center; }
  @media (min-width: 64em) {
    .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .split--wide-l { grid-template-columns: 1.3fr 1fr; }
    .split--wide-r { grid-template-columns: 1fr 1.3fr; }
    .split--top { align-items: start; }
  }
}

@layer components {
  /* ---------- En-tête ---------- */
  .site-header { position: sticky; inset-block-start: 0; z-index: 1000; background: var(--bg); border-block-end: 1px solid var(--line-strong); }
  html:not(.js) .site-header { position: static; }
  .site-header__bar { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--header-h); }
  .logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); margin-inline-end: auto; padding-block: .5rem; }
  .logo svg { inline-size: 2.6rem; block-size: auto; flex: none; }
  .logo__txt { display: grid; line-height: 1; }
  .logo__name { font-stretch: 125%; font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; }
  .logo__sub { font-family: var(--font-mono); font-weight: 500; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; margin-block-start: .3rem; color: var(--ink-2); }
  .logo:hover .logo__name { color: var(--accent-text); }
  .nav ul { list-style: none; padding: 0; margin: 0; display: grid; }
  .nav a { text-decoration: none; color: var(--ink); font-weight: 600; font-stretch: 100%; }
  .nav__tools { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4) 0 var(--space-5); }
  .nav-link { display: flex; align-items: center; gap: .5rem; padding: .85rem 0; border-block-end: 1px solid var(--line); font-size: 1.05rem; }
  .nav-link[aria-current="page"] { color: var(--link); box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: .75rem; }
  .live-pill { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; letter-spacing: .08em; padding: .1rem .4rem; border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: 2px; }
  .astreinte { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-inline-size: 44px; min-block-size: 44px; padding-inline: .6rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgb(243 104 15 / .14) 8px 16px); }
  .astreinte svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
  .astreinte span { display: none; }
  .astreinte:hover { border-color: var(--accent); }
  .menu-btn { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; padding: 0 .9rem; background: var(--ink); color: var(--bg); border: 0; border-radius: var(--radius); font-weight: 700; }
  .menu-btn svg { inline-size: 1.1rem; block-size: 1.1rem; }
  .menu-btn[aria-expanded="true"] .i-open, .menu-btn:not([aria-expanded="true"]) .i-close { display: none; }
  .js .nav { display: none; position: fixed; inset-inline: 0; inset-block-start: var(--header-h); max-block-size: calc(100dvh - var(--header-h)); overflow-y: auto; background: var(--bg); border-block-end: 1px solid var(--line-strong); padding-inline: max(var(--gutter), calc((100vw - 80rem) / 2)); box-shadow: var(--shadow); }
  .js .nav.is-open { display: block; }
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .nav { inline-size: 100%; }
  html:not(.js) .site-header__bar { flex-wrap: wrap; }
  .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); }
  .icon-btn:hover { border-color: var(--ink); }
  .icon-btn svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-mono); font-size: .85rem; }
  .lang a, .lang span { padding: .65rem .8rem; min-block-size: 44px; display: inline-flex; align-items: center; text-decoration: none; }
  .lang [aria-current="true"] { background: var(--ink); color: var(--bg); font-weight: 500; }
  .site-footer .lang { border-color: #4E5A66; }
  .site-footer .lang [aria-current="true"] { background: #E8ECEF; color: #191D22; }
  [data-theme-icon] { display: none; }
  html:not([data-theme]) [data-theme-icon="system"], [data-theme="light"] [data-theme-icon="light"], [data-theme="dark"] [data-theme-icon="dark"] { display: block; }
  .btn.hdr-cta { display: none; white-space: nowrap; }
  @media (min-width: 48em) and (max-width: 89.99em) { .btn.hdr-cta { display: inline-flex; } }
  @media (min-width: 90em) {
    .menu-btn { display: none !important; }
    .js .nav, .nav { display: flex !important; position: static; padding: 0; box-shadow: none; border: 0; overflow: visible; max-block-size: none; align-items: center; gap: var(--space-3); background: transparent; inline-size: auto; }
    .nav ul { display: flex; gap: .15rem; }
    .nav-link { padding: .5rem .45rem; border: 0; font-size: .9rem; }
    .nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); padding-inline-start: .45rem; }
    .nav__tools .btn { white-space: nowrap; }
    .nav__tools { padding: 0; flex-wrap: nowrap; }
    .astreinte span { display: inline; }
    .logo { margin-inline-end: 0; }
    .site-header__bar { gap: var(--space-4); }
    .nav { margin-inline-start: auto; }
  }
  @media (min-width: 90em) and (max-width: 104.99em) { .astreinte span { display: none; } }

  /* ---------- Boutons ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-block-size: 48px; padding: .7rem 1.25rem; border: 2px solid transparent; border-radius: var(--radius); font-weight: 700; font-stretch: 110%; font-size: .95rem; line-height: 1.2; text-decoration: none; text-align: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .btn svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
  .btn:active { transform: translateY(1px); }
  .btn--primary { background: var(--accent); color: var(--on-accent); }
  .btn--primary:hover { background: #FF7B28; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
  .btn--outline { border-color: var(--link); color: var(--link); background: transparent; }
  .btn--outline:hover { background: var(--link); color: var(--bg); }
  .btn--dark { background: var(--ink); color: var(--bg); }
  .btn--dark:hover { background: var(--plan); color: #fff; }
  .btn--ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; }
  .btn--ghost:hover { border-color: var(--ink); background: var(--bg-2); }
  .section--dark .btn--ghost, .section--plan .btn--ghost { color: #fff; border-color: rgb(255 255 255 / .5); }
  .section--dark .btn--ghost:hover, .section--plan .btn--ghost:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
  .section--plan .btn--outline { color: #fff; border-color: #fff; }
  .section--plan .btn--outline:hover { background: #fff; color: var(--plan); }
  .btn--sm { min-block-size: 44px; padding: .45rem .9rem; font-size: .85rem; }
  .btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; }
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }
  .link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
  .link-arrow:hover::after { transform: translateX(4px); }

  /* ---------- Motifs ---------- */
  .eyebrow { font-family: var(--font-sans); font-stretch: 125%; font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
  .mono { font-family: var(--font-mono); font-weight: 400; font-size: .92em; }
  .plan-grid { background-color: var(--bg); background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px), linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px); background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
  .cartouche { position: absolute; inset-inline-end: var(--gutter); inset-block-end: .75rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .04em; padding: .3rem .6rem; border: 1px solid var(--ink-2); color: var(--ink-2); background: var(--bg); display: none; white-space: nowrap; }
  @media (min-width: 64em) { .cartouche { display: block; } }
  .hazard { background: repeating-linear-gradient(45deg, var(--accent) 0 12px, var(--graphite) 12px 24px); }
  .hazard-box { position: relative; padding: var(--space-5); border: 2px solid var(--graphite); background: var(--surface); }
  .hazard-box::before { content: ""; position: absolute; inset-inline: -2px; inset-block-start: -2px; block-size: 10px; background: repeating-linear-gradient(45deg, var(--accent) 0 12px, var(--graphite) 12px 24px); }
  .hazard-box { padding-block-start: calc(var(--space-5) + 10px); }
  .badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em; padding: .2rem .55rem; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink-2); background: var(--surface); }
  .badge--accent { background: var(--accent); border-color: var(--accent); color: var(--graphite); }
  .badge--ok { color: var(--ok); border-color: var(--ok); }
  .isa { display: inline-grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border: 1.75px solid currentColor; border-radius: 50%; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; line-height: 1; position: relative; flex: none; }
  .isa::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; border-block-start: 1px solid currentColor; }
  .isa span { position: absolute; inset-inline: 0; text-align: center; }
  .isa span:first-child { inset-block-start: 23%; } .isa span:last-child { inset-block-start: 58%; }
  .isa-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
  .isa-list li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
  .isa-list li::before { content: ""; inline-size: .7rem; block-size: .7rem; margin-block-start: .5em; border: 1.75px solid var(--link); border-radius: 50%; }
  .check-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
  .check-list li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; }
  .check-list li::before { content: ""; inline-size: .9rem; block-size: .5rem; margin-block-start: .5em; border-inline-start: 2.5px solid var(--ok); border-block-end: 2.5px solid var(--ok); transform: rotate(-45deg) scale(.9); }
  .section--dark .check-list li::before { border-color: #5CC389; }

  /* ---------- Titre de section « feuille de plan » ---------- */
  .sh { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: start; padding-block-start: var(--space-4); border-block-start: 2px solid var(--ink); margin-block-end: var(--space-7); }
  .sh__no { font-family: var(--font-mono); font-weight: 500; font-size: .85rem; padding-block-start: .35rem; color: var(--ink-2); }
  .sh h2 { grid-column: 2; }
  .sh .eyebrow { grid-column: 2; margin-block-end: var(--space-2); }
  .sh p.lead { grid-column: 2; font-size: var(--text-1); color: var(--ink-2); max-inline-size: 60ch; margin-block-start: var(--space-3); line-height: 1.5; }
  .sh--center { text-align: left; }

  /* ---------- Cartes, tuiles ---------- */
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; }
  a.card, .card--link { text-decoration: none; color: inherit; }
  a.card:hover, .card--link:hover { border-color: var(--plan); transform: translateY(-2px); }
  .card h3 { font-size: var(--text-1); }
  .card p { color: var(--ink-2); font-size: .98rem; }
  .card .isa { color: var(--link); margin-block-end: var(--space-2); }
  .card__more { margin-block-start: auto; padding-block-start: var(--space-3); }
  .section--dark .card { background: #1E242B; }
  .fig { margin: 0; }
  .fig__frame { border: 1px solid var(--ink); background: var(--bg-2); overflow: hidden; position: relative; }
  .fig img { inline-size: 100%; filter: saturate(.85) contrast(1.04); object-fit: cover; }
  .fig__frame--draw { background-color: var(--surface); background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); background-size: 24px 24px; }
  .fig__link { display: block; }
  .fig__link img { transition: transform var(--dur) var(--ease); }
  .fig__link:hover img { transform: scale(1.02); }
  .draw { display: block; inline-size: 100%; block-size: auto; color: var(--ink); }
  .draw .cab { fill: none; stroke: currentColor; stroke-width: 2.5; }
  .draw .plate { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 6 4; }
  .draw .duct, .draw .term, .draw .m { fill: var(--surface); stroke: currentColor; stroke-width: 1.5; }
  .draw .m { stroke-width: 1.75; }
  .draw .m--cpu { stroke: var(--accent); stroke-width: 2.5; }
  .draw .slot { stroke: var(--line-strong); stroke-width: 1; }
  .draw .rail { fill: var(--line-strong); }
  .draw .t { font-family: var(--font-mono); font-size: 13px; font-weight: 500; fill: currentColor; }
  .draw .t--s { font-size: 11px; font-weight: 400; fill: var(--ink-2); }
  .draw .t--dim { fill: var(--link); font-size: 12px; }
  .draw .dim { fill: none; stroke: var(--link); stroke-width: 1.2; }
  .draw .led { fill: none; stroke: currentColor; stroke-width: 1.2; }
  .draw .led--on { fill: var(--accent); stroke: var(--accent); }
  .draw .tb { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
  .draw .scr { fill: var(--bg-2); stroke: currentColor; stroke-width: 1; }
  .draw .w { stroke: var(--ink-2); stroke-width: 1.2; }
  .draw .call circle { fill: var(--ink); }
  .draw .call text { fill: var(--bg); font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
  .fig figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--ink-2); padding-block-start: .5rem; max-inline-size: none; }
  .tile { position: relative; display: block; overflow: hidden; border: 1px solid var(--ink); background: #000; color: #fff; text-decoration: none; isolation: isolate; }
  .tile img { inline-size: 100%; block-size: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.85) contrast(1.04); transition: transform .5s var(--ease); }
  .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 17 20 / .92) 0%, rgb(14 17 20 / .55) 45%, rgb(14 17 20 / .05) 80%); z-index: 1; }
  .tile__body { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: var(--space-4); }
  .tile__body h3 { color: #fff; font-size: var(--text-1); }
  .tile__body p { color: #E8ECEF; font-size: .88rem; margin-block-start: .25rem; }
  .tile:hover img { transform: scale(1.04); }
  .tile:hover { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* ---------- Chiffres ---------- */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
  @media (min-width: 64em) { .stats { grid-template-columns: repeat(5, 1fr); } }
  .stat { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--space-3); }
  .stat__n { display: block; font-stretch: 75%; font-weight: 700; font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .stat__l { display: block; font-size: .88rem; color: var(--ink-2); margin-block-start: .4rem; max-inline-size: 22ch; }
  .section--dark .stat__l, .section--plan .stat__l { color: var(--on-dark-2); }
  .result { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
  .result__n { font-stretch: 75%; font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
  .result__l { font-size: .9rem; color: var(--ink-2); }

  /* ---------- Méthode (ligne de procédé) ---------- */
  .process { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: step; position: relative; }
  .process li { position: relative; padding: 0 0 var(--space-5) 3.5rem; max-inline-size: none; }
  .process li::before { content: ""; position: absolute; inset-inline-start: 1.05rem; inset-block: 2.2rem 0; border-inline-start: 4px solid var(--line-strong); }
  .process li:last-child::before { display: none; }
  .process__no { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 2.4rem; block-size: 2.4rem; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-mono); font-weight: 500; background: var(--bg); }
  .process h3 { font-size: var(--text-1); margin-block-end: .3rem; }
  @media (min-width: 64em) { .process:not(.process--v) h3 { min-block-size: 2.4em; display: flex; align-items: end; } }
  .process p { color: var(--ink-2); font-size: .96rem; }
  .process .badge { margin-block-start: .5rem; }
  @media (min-width: 64em) {
    .process { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
    .process li { padding: 3.6rem 0 0 0; }
    .process li::before { inset-inline-start: 2.6rem; inset-inline-end: -1rem; inset-block: 1.1rem auto; border-inline-start: 0; border-block-start: 4px solid var(--line-strong); }
    .section--dark .process__no { background: var(--band-dark); border-color: #fff; }
  }

  /* ---------- Frise chronologique ---------- */
  .timeline { list-style: none; padding: 0; display: grid; gap: var(--space-4); border-inline-start: 2px solid var(--ink); margin-inline-start: .4rem; }
  .timeline li { position: relative; padding-inline-start: var(--space-5); }
  .timeline li::before { content: ""; position: absolute; inset-inline-start: -.45rem; inset-block-start: .55em; inline-size: .8rem; block-size: .8rem; background: var(--accent); border: 2px solid var(--ink); border-radius: 50%; }
  .timeline b { font-family: var(--font-mono); font-weight: 500; display: block; }

  /* ---------- Tableaux ---------- */
  .tbl-wrap { overflow-x: auto; max-inline-size: 100%; border: 1px solid var(--line); background: var(--surface); }
  .tbl { inline-size: 100%; font-size: .92rem; }
  .tbl caption { text-align: start; padding: .75rem 1rem; font-weight: 700; font-stretch: 105%; }
  .tbl th, .tbl td { padding: .6rem 1rem; text-align: start; vertical-align: top; border-block-start: 1px solid var(--line); }
  .tbl thead th { font-stretch: 87.5%; font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: var(--bg-2); white-space: nowrap; }
  .tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
  .tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tbl-wrap:focus-visible { outline-offset: -3px; }

  /* ---------- Détails, FAQ ---------- */
  details.faq { border-block-end: 1px solid var(--line-strong); }
  details.faq:first-of-type { border-block-start: 1px solid var(--line-strong); }
  details.faq > summary { list-style: none; cursor: pointer; padding: 1rem 2.5rem 1rem 0; font-weight: 700; font-stretch: 105%; position: relative; min-block-size: 48px; display: flex; align-items: center; }
  details.faq > summary::-webkit-details-marker { display: none; }
  details.faq > summary::after { content: "+"; position: absolute; inset-inline-end: .25rem; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 400; transition: transform var(--dur) var(--ease); }
  details.faq[open] > summary::after { transform: rotate(45deg); }
  details.faq > div { padding-block-end: 1.25rem; color: var(--ink-2); }

  /* ---------- Fil d’Ariane ---------- */
  .crumbs { font-family: var(--font-mono); font-size: .75rem; padding-block: .85rem; }
  .crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
  .crumbs li + li::before { content: "/"; margin-inline-end: .35rem; color: var(--ink-2); }
  .crumbs a { color: var(--ink-2); }
  .crumbs [aria-current] { color: var(--ink); }

  /* ---------- Pied de page ---------- */
  .site-footer { background: var(--band-dark); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); position: relative; overflow: hidden; --link: var(--link-on-dark); }
  .site-footer a { color: var(--on-dark); }
  .site-footer a:hover { color: #fff; }
  .site-footer .logo { color: #fff; margin: 0; }
  .site-footer .logo__sub { color: var(--on-dark-2); }
  .foot-mark { position: absolute; inset-inline-end: -4rem; inset-block-end: -2rem; inline-size: 38rem; max-inline-size: 90%; opacity: .06; pointer-events: none; color: #fff; }
  .foot-grid { display: grid; gap: var(--space-6); position: relative; }
  @media (min-width: 48em) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 80em) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
  .foot-grid h2 { font-size: .72rem; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--on-dark-2); margin-block-end: var(--space-3); line-height: 1.3; }
  .foot-grid ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
  .foot-grid li a { display: inline-block; padding-block: .4rem; text-decoration: none; }
  .foot-grid li a:hover { text-decoration: underline; }
  .foot-grid address { font-style: normal; font-size: .92rem; color: var(--on-dark-2); }
  .foot-grid address strong { color: var(--on-dark); display: block; }
  .foot-astreinte { display: block; font-stretch: 75%; font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); line-height: 1.05; text-decoration: none; color: #fff; margin-block: var(--space-3) var(--space-2); padding: var(--space-3) var(--space-4); border-inline-start: 10px solid var(--accent); background: rgb(255 255 255 / .05); }
  .foot-astreinte small { display: block; font-stretch: 125%; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); font-weight: 600; }
  .foot-clock { font-family: var(--font-mono); font-size: .85rem; color: var(--on-dark-2); }
  .foot-tech { font-family: var(--font-mono); font-size: .75rem; color: var(--on-dark-2); margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid #2C353E; max-inline-size: none; position: relative; }
  .foot-bottom { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid #2C353E; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; font-size: .85rem; color: var(--on-dark-2); position: relative; }
  .foot-bottom p { max-inline-size: 60ch; }

  /* ---------- Barre mobile ---------- */
  .mbar { display: none; }
  @media (max-width: 47.99em) {
    .mbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 900; display: grid; grid-template-columns: 1.2fr 1fr 1fr; background: var(--bg); border-block-start: 1px solid var(--line-strong); padding-block-end: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgb(0 0 0 / .12); }
    .mbar a { display: flex; align-items: center; justify-content: center; gap: .4rem; min-block-size: 52px; text-decoration: none; font-weight: 700; font-size: .85rem; color: var(--ink); border-inline-start: 1px solid var(--line); }
    .mbar a:first-child { background: var(--accent); color: var(--graphite); border: 0; }
    .mbar svg { inline-size: 1.15rem; block-size: 1.15rem; }
    .has-mbar { padding-block-end: calc(52px + env(safe-area-inset-bottom)); }
    .has-mbar .msd-badge { inset-block-end: calc(62px + var(--demo-offset-extra, 0px)); }
    .mbar.is-off { display: none; }
  }
}

@layer components {
  /* ---------- Formulaires ---------- */
  .form { display: grid; gap: var(--space-5); }
  .field { display: grid; gap: .4rem; align-content: start; }
  .field > label, .choices > legend { font-weight: 700; font-size: .95rem; padding: 0; }
  .req { color: var(--accent-text); margin-inline-start: .15rem; }
  .field__hint { font-size: .85rem; color: var(--ink-2); }
  .field__err { display: none; font-size: .88rem; font-weight: 600; color: var(--err); }
  .field__err::before { content: "⚠ "; }
  .field.has-error .field__err, .choices.has-error .field__err { display: block; }
  .field.has-error :is(input, select, textarea) { border-color: var(--err); box-shadow: inset 4px 0 0 var(--err); }
  :is(input:not([type=checkbox], [type=radio], [type=file], [type=range]), select, textarea) { inline-size: 100%; min-block-size: 48px; padding: .65rem .85rem; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); transition: border-color var(--dur), box-shadow var(--dur); }
  textarea { min-block-size: 8rem; resize: vertical; line-height: 1.5; }
  :is(input, select, textarea):hover { border-color: var(--ink-2); }
  :is(input, select, textarea):focus-visible { outline: 3px solid var(--link); outline-offset: 1px; }
  input[type=file] { inline-size: 100%; padding: .6rem; border: 1.5px dashed var(--line-strong); background: var(--surface); border-radius: var(--radius); }
  input[type=range] { inline-size: 100%; accent-color: var(--plan); min-block-size: 32px; }
  .hp { position: absolute; inset-inline-start: -9999px; }
  .row-2 { display: grid; gap: var(--space-5); }
  @media (min-width: 40em) { .row-2 { grid-template-columns: 1fr 1fr; } }
  fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .choices { display: grid; gap: .6rem; }
  .choice-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .choice { position: relative; display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; min-block-size: 48px; font-size: .95rem; line-height: 1.35; transition: border-color var(--dur), background var(--dur); }
  .choice:hover { border-color: var(--ink); }
  .choice input { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: .05rem 0 0; accent-color: var(--plan); }
  .choice:has(input:checked) { border-color: var(--plan); background: color-mix(in srgb, var(--plan) 8%, var(--surface)); box-shadow: inset 4px 0 0 var(--plan); }
  .choice:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
  .choice small { display: block; color: var(--ink-2); }
  .counter { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); text-align: end; }
  .file-list { list-style: none; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
  .file-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .4rem .75rem; background: var(--bg-2); border-radius: var(--radius); max-inline-size: none; }
  .btn-link { background: none; border: 0; padding: .4rem; color: var(--link); text-decoration: underline; font-weight: 600; min-block-size: 44px; }
  .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; }
  .error-summary { border: 2px solid var(--err); background: var(--surface); padding: var(--space-4); border-radius: var(--radius); }
  .error-summary h3 { color: var(--err); font-size: 1.05rem; margin-block-end: .5rem; }
  .error-summary ul { padding-inline-start: 1.2rem; display: grid; gap: .25rem; }
  .success-box { border: 2px solid var(--ok); background: var(--surface); padding: var(--space-6); border-radius: var(--radius); display: grid; gap: var(--space-4); }
  .success-box h2 { font-size: var(--text-2); }
  .ref-code { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 500; padding: .4rem .8rem; background: var(--bg-2); border: 1px solid var(--line-strong); display: inline-block; }
  .notice { display: flex; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-inline-start: 5px solid var(--plan); background: var(--surface); border-radius: var(--radius); font-size: .92rem; }
  .notice--warn { border-inline-start-color: var(--accent); }
  .notice p { max-inline-size: none; }

  /* ---------- Étapes du devis ---------- */
  .steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; counter-reset: s; margin-block-end: var(--space-5); }
  .steps li { max-inline-size: none; border-block-start: 4px solid var(--line-strong); padding-block-start: .5rem; font-size: .75rem; font-family: var(--font-mono); color: var(--ink-2); display: flex; flex-direction: column; gap: .1rem; }
  .steps li.is-done { border-color: var(--plan); color: var(--ink); }
  .steps li[aria-current="step"] { border-color: var(--accent); color: var(--ink); font-weight: 500; }
  .steps .steps__t { display: none; }
  @media (min-width: 48em) { .steps .steps__t { display: block; font-family: var(--font-sans); font-size: .85rem; } }
  .step-title { font-size: var(--text-2); margin-block-end: var(--space-4); }
  .step-title:focus { outline: none; }
  .step-title:focus-visible { outline: 3px solid var(--link); }
  .stepbar { display: flex; gap: var(--space-3); justify-content: space-between; flex-wrap: wrap; margin-block-start: var(--space-5); }
  @media (max-width: 47.99em) { .stepbar { position: sticky; inset-block-end: var(--demo-offset); background: var(--bg); padding: .75rem 0; border-block-start: 1px solid var(--line); z-index: 20; } .stepbar .btn { flex: 1; } }
  .recap { display: grid; gap: var(--space-4); }
  .recap section { border: 1px solid var(--line); background: var(--surface); padding: var(--space-4); }
  .recap h3 { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: 1rem; margin-block-end: .5rem; }
  .recap dl { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: .25rem 1rem; font-size: .9rem; }
  .recap dt { color: var(--ink-2); } .recap dd { max-inline-size: none; overflow-wrap: anywhere; }
  html:not(.js) .stepbar, html:not(.js) .steps { display: none; }

  /* ---------- Filtres, onglets ---------- */
  .filters { display: grid; gap: var(--space-3); margin-block-end: var(--space-5); }
  .filter-group { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
  .filter-group > .eyebrow { inline-size: 100%; }
  html:not(.js) .filters { display: none; }
  .chip { min-block-size: 44px; padding: .4rem .9rem; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--ink); transition: background var(--dur), border-color var(--dur), color var(--dur); }
  .chip:hover { border-color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .count-line { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-2); }
  .empty { padding: var(--space-6); border: 1px dashed var(--line-strong); text-align: center; display: grid; gap: var(--space-3); justify-items: center; }

  /* ---------- Dialogue ---------- */
  dialog.dlg { inline-size: min(100% - 2rem, 44rem); max-block-size: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: auto; opacity: 1; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete; }
  dialog.dlg::backdrop { background: rgb(14 17 20 / .6); transition: opacity .25s; }
  @starting-style { dialog.dlg[open] { opacity: 0; transform: translateY(12px); } dialog.dlg[open]::backdrop { opacity: 0; } }
  .dlg__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; background: var(--surface); z-index: 2; }
  .dlg__head h2 { font-size: var(--text-1); line-height: 1.2; }
  .dlg__body { padding: var(--space-5); display: grid; gap: var(--space-4); }
  .dlg__foot { padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
  @media (prefers-reduced-motion: reduce) { dialog.dlg, dialog.dlg::backdrop { transition: none; } }
  [popover].pop { border: 1px solid var(--ink); background: var(--surface); color: var(--ink); padding: var(--space-4); max-inline-size: 20rem; box-shadow: var(--shadow); inset: auto; margin: 0; position: fixed; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }
}

@layer pages {
  /* ---------- Héros ---------- */
  .hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6.5rem); border-block-end: 1px solid var(--line-strong); overflow: hidden; }
  .hero__grid { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 64em) { .hero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--space-8); } .hero--page .hero__grid { grid-template-columns: 1.3fr 1fr; } }
  .hero h1 { margin-block: var(--space-3) var(--space-5); }
  .hero h1 em { font-style: normal; color: var(--accent-text); }
  .hero__lead { font-size: var(--text-1); color: var(--ink-2); max-inline-size: 58ch; line-height: 1.5; margin-block-end: var(--space-5); }
  .hero__proofs { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-block-start: var(--space-5); font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); list-style: none; padding: 0; }
  .hero__proofs li::before { content: "▪ "; color: var(--accent-text); }
  .hero__urgent { margin-block-start: var(--space-5); padding: .6rem .9rem; border-inline-start: 6px solid var(--accent); background: var(--surface); font-size: .92rem; display: inline-block; max-inline-size: 100%; }
  .hero__urgent a { font-weight: 700; color: var(--ink); white-space: nowrap; }
  .hero--page { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
  .hero--page h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); }
  .hero--photo { color: #fff; background: #0E1114; border: 0; }
  .hero--photo .hero__bg { position: absolute; inset: 0; }
  .hero--photo .hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); }
  .hero--photo .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 17 20 / .94) 0%, rgb(14 17 20 / .78) 55%, rgb(14 17 20 / .45) 100%); }
  .hero--photo .wrap { position: relative; z-index: 1; }
  .hero--photo .hero__lead, .hero--photo .eyebrow, .hero--photo .crumbs a { color: #D5DCE2; }
  .hero--photo .crumbs [aria-current] { color: #fff; }
  .hero--photo h1 em { color: #FF9A52; }
  .hero--photo .cartouche { background: rgb(14 17 20 / .8); color: #D5DCE2; border-color: #D5DCE2; z-index: 1; }
  .hero-cotes { color: var(--ink-2); inline-size: 100%; max-inline-size: 22rem; margin-block-end: var(--space-3); }

  /* ---------- Aperçu live (accueil) ---------- */
  .live-card { background: var(--surface); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--bg-2), 8px 8px 0 1px var(--line-strong); padding: var(--space-4); display: grid; gap: var(--space-3); position: relative;
    --lc-bg: #EEF0F2; --lc-ink: #1B2026; --lc-lbl: #4A545D; --lc-pipe: #6B7580; --lc-eq: #3B444C; --lc-val: #0B3D73; --lc-fond: #DDE1E4; }
  :root[data-theme="dark"] .live-card { --lc-bg: #1F252C; --lc-ink: #E6EAED; --lc-lbl: #A9B2BA; --lc-pipe: #6A7681; --lc-eq: #C9D1D8; --lc-val: #8EC2FF; --lc-fond: #15191E; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .live-card { --lc-bg: #1F252C; --lc-ink: #E6EAED; --lc-lbl: #A9B2BA; --lc-pipe: #6A7681; --lc-eq: #C9D1D8; --lc-val: #8EC2FF; --lc-fond: #15191E; } }
  .live-card { contain: layout paint; }
  .live-card header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .live-card h2 { font-size: 1rem; font-stretch: 105%; line-height: 1.2; }
  .lc-pid { inline-size: 100%; block-size: auto; background: var(--lc-bg); border: 1px solid var(--line); }
  .lc-pid text { font-family: var(--font-mono); fill: var(--lc-lbl); }
  .lc-t { font-size: 11px; letter-spacing: .04em; } .lc-t--s { font-size: 10px; }
  .lc-pid .lc-hz { font-size: 12px; font-weight: 500; fill: var(--lc-val); }
  .lc-wall { fill: none; stroke: var(--lc-eq); stroke-width: 2.5; }
  .lc-water { fill: var(--lc-pipe); opacity: .35; }
  .lc-pipe { fill: none; stroke: var(--lc-pipe); stroke-width: 6; stroke-linejoin: round; }
  .lc-flow { fill: none; stroke: var(--lc-bg); stroke-width: 2.2; stroke-dasharray: 8 12; opacity: 0; }
  .lc-arrow { fill: none; stroke: var(--lc-pipe); stroke-width: 3; }
  .lc-tank { fill: var(--lc-bg); stroke: var(--lc-eq); stroke-width: 3; }
  .lc-level { fill: var(--lc-eq); opacity: .45; }
  .lc-mark { stroke: var(--lc-lbl); stroke-width: 1.2; stroke-dasharray: 3 4; }
  .lc-pump { fill: var(--lc-eq); stroke: var(--lc-eq); stroke-width: 3; }
  .lc-sym { fill: none; stroke: var(--lc-bg); stroke-width: 2.5; stroke-linejoin: round; }
  @media (prefers-reduced-motion: no-preference) {
    .lc-flow.is-flowing { opacity: 1; animation: lc-flow var(--flow-dur, 1.2s) steps(10) infinite; }
    .lc-level { transition: y .9s linear, height .9s linear; }
    @keyframes lc-flow { to { stroke-dashoffset: -20; } }
  }
  @media (prefers-reduced-motion: reduce) { .lc-flow.is-flowing { opacity: 1; stroke-dasharray: 2 18; } }
  .lc-flow.is-paused { animation-play-state: paused; }
  .btn__tag { white-space: nowrap; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .35rem; border: 1px solid currentColor; border-radius: 2px; }
  .live-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .live-vals div { border-inline-start: 2px solid var(--ink-2); padding-inline-start: .5rem; min-inline-size: 0; }
  .live-vals dt { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-2); line-height: 1.3; }
  .live-vals dt span { display: block; font-family: var(--font-sans); font-size: .72rem; }
  .live-vals dd { font-family: var(--font-mono); font-weight: 500; font-size: 1.1rem; font-variant-numeric: tabular-nums; max-inline-size: none; color: var(--lc-val); }
  .live-vals dd small { font-size: .65rem; color: var(--ink-2); }
  .live-spark { block-size: 48px; inline-size: 100%; color: var(--lc-val); }
  .live-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
  .lc-btn { min-block-size: 44px; padding: .4rem .8rem; background: var(--surface); border: 1.5px solid var(--ink-2); border-radius: 2px; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
  .lc-btn:hover { border-color: var(--ink); }
  .lc-btn svg { inline-size: 1rem; block-size: 1rem; }
  .lc-btn .i-play, .lc-btn[aria-pressed="true"] .i-pause { display: none; }
  .lc-btn[aria-pressed="true"] .i-play { display: inline; }

  /* ---------- Accueil : sections ---------- */
  .situations { display: grid; gap: var(--space-4); }
  .sit { display: grid; gap: .35rem; padding: var(--space-4) 0; border-block-start: 1px solid var(--line-strong); }
  .sit q { font-stretch: 112%; font-weight: 700; font-size: var(--text-1); quotes: "«\00a0" "\00a0»"; line-height: 1.2; }
  :lang(en) .sit q { quotes: "\201C" "\201D"; }
  .sit p { color: var(--ink-2); }
  .sit p::before { content: "→ "; color: var(--accent-text); font-weight: 700; }
  .band-live { display: grid; gap: var(--space-6); align-items: center; }
  @media (min-width: 64em) { .band-live { grid-template-columns: 1fr 1.25fr; gap: var(--space-8); } }
  .band-live .fig__frame { border-color: #4E5A66; }
  .feat-list { display: grid; gap: var(--space-3); }
  .big-results { display: grid; gap: var(--space-5); }
  @media (min-width: 48em) { .big-results { grid-template-columns: repeat(3, 1fr); } }
  .big-result { display: grid; gap: .6rem; align-content: start; }
  .big-result h3 { font-size: 1.05rem; font-stretch: 100%; }
  .tags-mono { font-family: var(--font-mono); font-size: .8rem; line-height: 1.9; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .35rem .5rem; list-style: none; padding: 0; }
  .tags-mono li { padding: .1rem .5rem; border: 1px solid var(--line-strong); max-inline-size: none; }
  .section--dark .tags-mono { color: var(--on-dark-2); border-color: #2C353E; }
  .days-counter { font-stretch: 75%; font-weight: 700; font-size: clamp(3.5rem, 2.5rem + 5vw, 7rem); line-height: .9; font-variant-numeric: tabular-nums; }
  .cta-final { text-align: left; }
  .cta-final h2 { font-size: var(--text-4); max-inline-size: 18ch; }
  .tiles { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40em) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---------- Expertises / secteurs ---------- */
  .toc { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin-block-end: var(--space-6); }
  .toc a { display: inline-flex; align-items: center; min-block-size: 44px; padding: .4rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; background: var(--surface); }
  .toc a:hover { border-color: var(--ink); }
  @media (min-width: 64em) { .toc-sticky { position: sticky; inset-block-start: var(--header-h); z-index: 50; background: var(--bg); border-block-end: 1px solid var(--line); padding-block: .6rem; margin: 0; } .toc-sticky ul { margin: 0; flex-wrap: nowrap; overflow-x: auto; } }
  .exp, .sec { padding-block: var(--space-7); border-block-start: 2px solid var(--ink); }
  .exp__cols { display: grid; gap: var(--space-6); }
  @media (min-width: 64em) { .exp__cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .exp:nth-of-type(even) .exp__media { order: -1; } }
  .exp h2, .sec h2 { margin-block-end: var(--space-4); }
  .kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .92rem; margin-block: var(--space-4); }
  .kv dt { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); padding-block-start: .15rem; }
  .kv dd { max-inline-size: none; }
  .h4-label { font-stretch: 125%; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-block: var(--space-4) var(--space-2); font-weight: 600; }
  .arch { list-style: none; padding: 0; display: grid; gap: .6rem; counter-reset: a; }
  .arch li { max-inline-size: none; }
  .arch button { inline-size: 100%; text-align: start; display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; padding: .75rem 1rem; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); min-block-size: 56px; font-weight: 700; transition: border-color var(--dur), background var(--dur); }
  .arch button::before { counter-increment: a; content: counter(a); font-family: var(--font-mono); font-weight: 500; inline-size: 1.8rem; block-size: 1.8rem; display: grid; place-items: center; border: 1.75px solid currentColor; border-radius: 50%; font-size: .8rem; }
  .arch button:hover, .arch button[aria-pressed="true"] { border-color: var(--plan); background: color-mix(in srgb, var(--plan) 8%, var(--surface)); }
  .arch li + li::before { content: ""; display: block; block-size: .6rem; margin-inline-start: 1.65rem; border-inline-start: 2px dashed var(--line-strong); }
  .arch-panel { background: var(--surface); border: 1px solid var(--ink); padding: var(--space-5); position: relative; min-block-size: 11rem; }
  .arch-panel h3 { font-size: var(--text-1); margin-block-end: .5rem; }
  .arch-desc { display: grid; gap: .5rem; }
  .calc { display: grid; gap: var(--space-5); background: var(--surface); border: 1px solid var(--ink); padding: var(--space-5); }
  .calc-grid { display: grid; gap: var(--space-4); }
  @media (min-width: 48em) { .calc-grid { grid-template-columns: 1fr 1fr; } }
  .calc-out { background: var(--band-dark); color: var(--on-dark); padding: var(--space-5); display: grid; gap: var(--space-3); }
  .calc-out output { font-stretch: 75%; font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; display: block; font-variant-numeric: tabular-nums; }
  .calc-out dl { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; font-size: .9rem; }
  .calc-out dd { font-family: var(--font-mono); text-align: end; max-inline-size: none; }
  .calc-bars rect { transition: width .3s var(--ease); }

  /* ---------- Réalisations ---------- */
  .case { background: var(--surface); border: 1px solid var(--ink); display: grid; margin-block-end: var(--space-6); }
  .case[hidden] { display: none; }
  .case__head { padding: var(--space-5); border-block-end: 1px solid var(--line); background: var(--bg-2); display: grid; gap: var(--space-3); }
  .case__meta { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
  .case__body { display: grid; gap: var(--space-6); padding: var(--space-5); }
  @media (min-width: 64em) { .case__body { grid-template-columns: 1.1fr 1fr; padding: var(--space-6); gap: var(--space-7); } }
  .case h3 { font-size: var(--text-2); }
  .case__results { display: grid; gap: var(--space-4); align-content: start; }
  .ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: var(--space-3) 0; border-block-end: 1px solid var(--line); }
  .ba__v { font-stretch: 75%; font-weight: 700; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
  .ba__v small { display: block; font-family: var(--font-sans); font-stretch: 100%; font-weight: 400; font-size: .72rem; color: var(--ink-2); margin-block-end: .2rem; }
  .ba__arrow { color: var(--accent-text); font-size: 1.4rem; }
  .ba--after .ba__v { color: var(--ok); }
  .team-quote { border-inline-start: 5px solid var(--accent); padding: .5rem 0 .5rem var(--space-4); font-stretch: 105%; font-weight: 600; font-size: var(--text-1); line-height: 1.3; }
  .layers { inline-size: 100%; max-inline-size: 28rem; color: var(--ink); border: 1px solid var(--line); background: var(--bg); }

  /* ---------- Documentation ---------- */
  .fiches { display: grid; gap: var(--space-5); }
  .fiche { background: var(--surface); border: 1px solid var(--ink); display: grid; }
  .fiche[hidden] { display: none; }
  .fiche__head { display: grid; gap: var(--space-2); padding: var(--space-5); border-block-end: 1px solid var(--line); }
  .fiche__ref { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); }
  .fiche__price { font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem; }
  .fiche__body { padding: var(--space-5); display: grid; gap: var(--space-4); }
  .fiche__actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: var(--space-4) var(--space-5); background: var(--bg-2); border-block-start: 1px solid var(--line); }
  .specs { inline-size: 100%; font-size: .9rem; }
  .specs th { text-align: start; font-weight: 600; padding: .45rem 1rem .45rem 0; vertical-align: top; color: var(--ink-2); inline-size: 40%; }
  .specs td { padding: .45rem 0; font-family: var(--font-mono); font-size: .85rem; }
  .specs tr { border-block-end: 1px solid var(--line); }
  .gloss { display: grid; gap: 0; }
  .gloss div { display: grid; gap: .2rem; padding: .9rem 0; border-block-start: 1px solid var(--line-strong); }
  @media (min-width: 48em) { .gloss div { grid-template-columns: 12rem 1fr; gap: 2rem; } }
  .gloss dt { font-family: var(--font-mono); font-weight: 500; }
  .gloss dd { max-inline-size: 65ch; color: var(--ink-2); }
  .deliver { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .deliver li { list-style: none; padding: var(--space-4); border: 1px solid var(--line-strong); background: var(--surface); max-inline-size: none; font-weight: 600; display: grid; gap: .3rem; }
  .deliver li span { font-weight: 400; color: var(--ink-2); font-size: .88rem; }

  /* ---------- Entreprise, carrières, contact ---------- */
  .team { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .person { display: grid; gap: .5rem; padding: var(--space-4); border: 1px solid var(--line); background: var(--surface); align-content: start; }
  .avatar { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-stretch: 125%; font-weight: 800; letter-spacing: .02em; }
  .person h3 { font-size: 1.05rem; font-stretch: 100%; }
  .person .role { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-2); }
  .sites { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  .site-card { border: 1px solid var(--ink); background: var(--surface); padding: var(--space-5); display: grid; gap: .5rem; align-content: start; }
  .site-card h3 { font-size: var(--text-1); }
  .site-card address { font-style: normal; color: var(--ink-2); font-size: .95rem; }
  .site-card .geo { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-2); }
  .oncall { display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--band-dark); color: var(--on-dark); position: relative; overflow: hidden; border: 2px solid var(--graphite); }
  .oncall::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 12px; background: repeating-linear-gradient(45deg, var(--accent) 0 12px, var(--graphite) 12px 24px); }
  .oncall__tel { font-stretch: 75%; font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem); line-height: 1; color: #fff; text-decoration: none; display: block; margin-block: var(--space-3); }
  .oncall .eyebrow { color: var(--on-dark-2); }
  .map { background: var(--surface); border: 1px solid var(--ink); position: relative; }
  .map svg { inline-size: 100%; block-size: auto; color: var(--ink); }
  .pin { position: absolute; inline-size: 44px; block-size: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--graphite); background: var(--accent); color: var(--graphite); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: .8rem; }
  .pin:hover { transform: scale(1.1); }
  .job { border: 1px solid var(--ink); background: var(--surface); margin-block-end: var(--space-3); }
  .job > summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5); display: grid; gap: .25rem; position: relative; padding-inline-end: 3rem; }
  .job > summary::-webkit-details-marker { display: none; }
  .job > summary::after { content: "+"; position: absolute; inset-inline-end: 1.25rem; inset-block-start: 1rem; font-family: var(--font-mono); font-size: 1.5rem; }
  .job[open] > summary::after { transform: rotate(45deg); }
  .job h3 { font-size: var(--text-1); }
  .job__sum { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
  .job__body { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-5); }
  @media (min-width: 48em) { .job__body { grid-template-columns: repeat(2, 1fr); } }
  .job__body ul { padding-inline-start: 1.1rem; display: grid; gap: .3rem; }
  .job__body > div:last-child { grid-column: 1 / -1; }
  .legal { max-inline-size: 52rem; }
  .legal h2 { font-size: var(--text-2); margin-block: var(--space-7) var(--space-3); }
  .legal h3 { margin-block: var(--space-5) var(--space-2); }
  .legal p, .legal li { margin-block-end: var(--space-3); }
  .legal ul { padding-inline-start: 1.2rem; }
  .legal table { font-size: .9rem; }
  .e404 { min-block-size: 70vh; display: grid; align-items: center; }


}

@layer utilities {
  .rv-off { opacity: 1 !important; transform: none !important; }
  @media (prefers-reduced-motion: no-preference) {
    .js .rv { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
    .js .rv.is-in { opacity: 1; transform: none; }
  }
  .mt-4 { margin-block-start: var(--space-4); } .mt-5 { margin-block-start: var(--space-5); } .mt-6 { margin-block-start: var(--space-6); } .mt-7 { margin-block-start: var(--space-7); }
  .mb-5 { margin-block-end: var(--space-5); }
  .muted { color: var(--ink-2); }
  .nowrap { white-space: nowrap; }
  .center { text-align: center; }
  .lead { font-size: var(--text-1); line-height: 1.5; color: var(--ink-2); }
  @media print {
    .site-header, .mbar, .skip-link, .btn-row, .filters, .menu-btn, .hmi__bar, .hmi-subnav, .fiche__actions, .cartouche, .site-footer .foot-mark, .stepbar { display: none !important; }
    body { background: #fff; color: #000; }
    .section--dark, .site-footer, .hero--photo { background: #fff !important; color: #000 !important; }
    .rv { opacity: 1 !important; transform: none !important; }
    a { color: #000; }
    .hmi { background: #fff; --hmi-fond: #fff; --hmi-panneau: #fff; }
    body.is-printing-one .fiche:not(.print-one) { display: none !important; }
    body.is-printing-one main > *:not(:has(.print-one)) { display: none !important; }
    body.is-printing-one .fiche.print-one .fiche__body details { display: block; }
  }
}

@layer pages {
  .site-footer { padding-block-end: calc(var(--space-6) + var(--demo-offset)); }
  .ba__v--after { color: var(--ok); }
  .step-legend { padding: 0; float: none; inline-size: 100%; margin-block-end: var(--space-4); }
  .step-title { display: block; font-stretch: 112%; font-weight: 760; font-size: var(--text-2); line-height: 1.1; letter-spacing: -.01em; }
  .fiche__head { align-content: start; }
  .fiche summary { cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; min-block-size: 44px; list-style: none; font-weight: 600; color: var(--link); }
  .fiche summary::-webkit-details-marker { display: none; }
  .fiche summary::before { content: "+"; display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border: 1.5px solid currentColor; border-radius: 2px; font-family: var(--font-mono); font-weight: 500; }
  .fiche details[open] > summary::before { content: "−"; }
  .fiche__body { padding-block: var(--space-3); }
  .fiche__price strong { font-weight: 700; }
  @media (min-width: 64em) { .process.process--4 { grid-template-columns: repeat(4, 1fr); } }
  .hero--photo .btn--primary { margin-block-start: var(--space-3); }
  .arch-js .arch-desc[hidden] { display: none; }
  .card .link-arrow { color: var(--link); }
  .lead { max-inline-size: 60ch; }
  .oncall .tbl-wrap { background: #1E242B; border-color: #2C353E; }
  .oncall .tbl th, .oncall .tbl td { color: var(--on-dark); border-color: #2C353E; }
  .oncall .tbl caption { color: var(--on-dark-2); }
  .oncall .tbl tbody tr:nth-child(even) { background: #232A32; }
  .section--dark .tbl-wrap { background: #1E242B; }
  .section--dark .tbl th, .section--dark .tbl td { color: var(--on-dark); border-color: #2C353E; }
  .section--dark .tbl caption { color: var(--on-dark-2); }
  .section--dark .tbl tbody tr:nth-child(even) { background: #232A32; }
  .section--dark .muted, .section--plan .muted { color: var(--on-dark-2); }
  .section--plan .lead { color: #D6E3F3; }
  .map .pin { left: var(--x); top: var(--y); }
  .u-lead-dark { color: var(--on-dark-2); }
  .u-lead-plan { color: #D6E3F3; }
  .u-small { font-size: .8rem; }
  .u-pt-6 { padding-block-start: 6rem; }
  .hero-pad { padding-block: clamp(3rem, 8vw, 7rem); }
  .h-sm { font-size: 1rem; }
  .h-md { font-size: var(--text-2); }
  .stack-sm { --stack: 1rem; }
  .stack-md { --stack: 1.25rem; }
  .case h2, .fiche__head h2 { font-size: var(--text-2); line-height: 1.1; }
  .case-h { font-size: var(--text-0); font-stretch: 100%; font-weight: 700; line-height: 1.3; margin-block-end: .25rem; }
  .field__err[hidden] { display: none; }
  .split > *, .grid > *, .hero__grid > *, .exp__cols > *, .band-live > * { min-inline-size: 0; }
  .tbl .num { white-space: normal; }
  .tbl td.num, .tbl th.num { overflow-wrap: anywhere; }
  .tbl caption { caption-side: top; }
  .tbl-wrap { position: relative; }
  .nav-link { white-space: nowrap; }
  .logo__sub { white-space: nowrap; }
  @media (max-width: 26em) { .logo__sub { display: none; } .logo svg { inline-size: 2.2rem; } .site-header__bar { gap: .5rem; } .menu-btn { padding-inline: .65rem; } }
  .process.process--v { grid-template-columns: 1fr; }
  .process.process--v li { padding: 0 0 var(--space-5) 3.5rem; }
  .process.process--v li::before { inset-inline: 1.05rem auto; inset-block: 2.2rem 0; border-block-start: 0; border-inline-start: 4px solid var(--line-strong); }
  main > .section { content-visibility: auto; contain-intrinsic-size: auto 700px; }
  .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  .u-w44 { max-inline-size: 44ch; } .u-w68 { max-inline-size: 68ch; } .u-w20 { max-inline-size: 20ch; } .u-mb-7 { margin-block-end: var(--space-7); } .u-xs { font-size: .78rem; }
  .u-promise { font-size: var(--text-3); font-stretch: 112%; font-weight: 700; line-height: 1.1; max-inline-size: 26ch; color: #fff; }
  .calc-bars { inline-size: 100%; block-size: 2.5rem; }
}