/* ══════════════════════════════════════════════════════════════════
   OpenDoor · /opendoor et ses annexes
   La page est une notice d'installation : feuilles numérotées,
   en-tête courant, référence de document, dessins au trait noir
   avec gris pour la pièce posée (comme IKEA), tableaux techniques.
   Une couleur de marque, le bleu pétrole : numéros de section, bouton
   principal, pièces du kit. Pictogrammes selon ISO 7010 : vert = sûr,
   rouge = interdit. Police Barlow, dans l'esprit des notices DIN.
   ══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap;
  src: url('/fonts/Barlow-400.woff2?v=dev') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap;
  src: url('/fonts/Barlow-600.woff2?v=dev') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap;
  src: url('/fonts/Barlow-700.woff2?v=dev') format('woff2'); }

:root {
  --desk:  #E9E8E4;   /* le plan de travail sous les feuilles */
  --paper: #FFFFFF;
  --ink:   #1A1A1A;
  --ink2:  #55544F;   /* texte secondaire (7.4:1 sur blanc) */
  --rule:  #D2D0CA;
  --wash:  #F2F1ED;   /* fonds d'en-têtes de tableaux */
  --grey:  #D3D2CC;
  --accent: #0F4C5C;  /* bleu pétrole : couleur de marque (9.6:1 sur blanc) */
  --accent-soft: #D3E3E6;  /* pièces du kit sur les dessins */
  --accent-dark: #0A3A46;
  --on-accent: #FFFFFF;    /* texte posé sur le bleu pétrole */
  --accent-ink: #0F4C5C;   /* bleu pétrole utilisé comme couleur de texte */
  --bar-line: #BDBBB4;
  --shadow: 0 1px 2px rgba(0,0,0,.07);
  --focus: rgba(15,76,92,.22);
  --muted-n: #A9A8A2;      /* numéros d'étapes pas encore faites */
  /* dessins */
  --iso-top: #FFFFFF; --iso-front: #F4F3EF; --iso-side: #E4E3DE;
  --iso-floor: #FAFAF8; --iso-floor-line: #D2D0CA; --iso-pave: #DDDBD5; --iso-thin: #B6B4AD;
  --iso-glass: #EDF0F1; --iso-glass-top: #F6F8F8; --iso-leaf: #FFFFFF;
  --iso-metal: #D8D8D8; --iso-metal-top: #EEEEEE; --iso-kit: #A9C7CE;
  --green: #00774A;   /* ISO 7010, condition sûre (5.6:1) */
  --red:   #C62828;   /* ISO 7010, interdiction (5.6:1) */

  --f: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --bar-h: 58px;

  --check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 900px) { :root { --bar-h: 64px; } }

/* ═══ THÈME SOMBRE ═══════════════════════════════════════════════
   Suit le réglage du téléphone ou de l'ordinateur, sauf si le
   visiteur a choisi avec le bouton de la couverture (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --desk: #121314; --paper: #1C1D1F; --ink: #ECEBE6; --ink2: #AAA9A3;
    --rule: #37393C; --wash: #26282A; --grey: #3A3C3F;
    --accent: #1D6A7C; --accent-soft: #1E3A41; --accent-dark: #16586A;
    --on-accent: #FFFFFF; --accent-ink: #7FC3D2;
    --bar-line: #2E3033; --shadow: 0 1px 2px rgba(0,0,0,.5); --focus: rgba(127,195,210,.3);
    --muted-n: #6E6D69;
    --iso-top: #2A2C2F; --iso-front: #232527; --iso-side: #1A1B1D;
    --iso-floor: #1E1F21; --iso-floor-line: #3A3C3F; --iso-pave: #303235; --iso-thin: #55575B;
    --iso-glass: #2B3538; --iso-glass-top: #313B3E; --iso-leaf: #2E3033;
    --iso-metal: #45474B; --iso-metal-top: #55575B; --iso-kit: #2E6572;
    --green: #3FAE7A; --red: #E0645A;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --desk: #121314; --paper: #1C1D1F; --ink: #ECEBE6; --ink2: #AAA9A3;
  --rule: #37393C; --wash: #26282A; --grey: #3A3C3F;
  --accent: #1D6A7C; --accent-soft: #1E3A41; --accent-dark: #16586A;
  --on-accent: #FFFFFF; --accent-ink: #7FC3D2;
  --bar-line: #2E3033; --shadow: 0 1px 2px rgba(0,0,0,.5); --focus: rgba(127,195,210,.3);
  --muted-n: #6E6D69;
  --iso-top: #2A2C2F; --iso-front: #232527; --iso-side: #1A1B1D;
  --iso-floor: #1E1F21; --iso-floor-line: #3A3C3F; --iso-pave: #303235; --iso-thin: #55575B;
  --iso-glass: #2B3538; --iso-glass-top: #313B3E; --iso-leaf: #2E3033;
  --iso-metal: #45474B; --iso-metal-top: #55575B; --iso-kit: #2E6572;
  --green: #3FAE7A; --red: #E0645A;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font: 400 17px/1.5 var(--f);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
b, strong { font-weight: 600; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--ink2); }
.nowrap { white-space: nowrap; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px;
  background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ── boutons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  font: 600 16px/1.1 var(--f); color: var(--ink); text-decoration: none; text-align: center;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px; cursor: pointer;
  transition: background-color .15s ease;
}
.btn--main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) {
  .btn:hover { background: var(--wash); }
  .btn--main:hover { background: var(--accent-dark); }
}
.btn[disabled] { opacity: .45; cursor: default; }

/* ── barre du haut ─────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h); padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--desk); border-bottom: 1px solid var(--bar-line);
}
@media (min-width: 900px) { .bar { padding: 0 28px; } }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 700 20px/1 var(--f); letter-spacing: -.01em; text-decoration: none; }
.brand svg { width: 24px; height: 24px; flex: none; }
.brand svg path:nth-child(2), .cover__logo svg path:nth-child(2) { fill: var(--accent); }
.bar__page { display: none; }
@media (min-width: 760px) { .bar__page { display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 600; } }
.bar__actions { display: flex; gap: 8px; }
.bar .btn { min-height: 44px; padding: 0 14px; font-size: 15px; }

/* sommaire en fenêtre : centré sur ordinateur, titre et Fermer en haut */
.toc-dialog {
  width: min(480px, calc(100% - 24px)); max-height: calc(100% - 24px);
  padding: 20px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  overflow: auto; overscroll-behavior: contain;
}
.toc-dialog[open] {
  display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 6px;
  grid-template-areas: "title close" "list list";
}
.toc-dialog::backdrop { background: rgba(26,26,26,.4); }
.toc-dialog__title { grid-area: title; font: 700 24px/1 var(--f); }
.toc-dialog__list { grid-area: list; }
.toc-dialog__close { grid-area: close; }
.toc-dialog .toc { margin-top: 0; padding-top: 0; border-top: 0; }
.toc-dialog .toc ol { grid-template-columns: 1fr; }

/* sur téléphone : panneau qui monte du bas, Fermer sous le pouce */
@media (max-width: 759px) {
  .toc-dialog {
    width: 100%; max-width: 100%; max-height: 86vh;
    margin: auto 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-width: 1.5px 0 0;
  }
  .toc-dialog[open] {
    grid-template-columns: 1fr; grid-template-areas: "grip" "title" "list" "close";
    animation: sheet-up .3s cubic-bezier(.2,.8,.3,1);
  }
  /* poignée, comme les panneaux natifs */
  .toc-dialog[open]::before { content: ''; grid-area: grip; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin-bottom: 8px; }
  .toc-dialog[open]::backdrop { animation: fade .3s ease; }
  .toc-dialog__close { width: 100%; margin-top: 10px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ── les feuilles ──────────────────────────────────────────────── */
.notice { max-width: 1180px; margin: 0 auto; padding: 14px 10px 24px; display: grid; gap: 18px; }
@media (min-width: 900px) { .notice { padding: 32px 28px 40px; gap: 32px; } }

.sheet {
  position: relative; background: var(--paper);
  padding: 22px 18px 60px;
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--bar-h) + 12px);
}
.sheet:focus { outline: none; }
@media (min-width: 900px) { .sheet { padding: 44px 56px 76px; } }

.sheet__head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.sheet__n {
  display: grid; place-items: center; flex: none;
  min-width: 56px; height: 56px; padding: 0 8px;
  background: var(--accent); color: var(--on-accent);
  font: 700 34px/1 var(--f);
}
.sheet__head h2 { font: 700 clamp(26px, 4vw, 38px)/1.05 var(--f); letter-spacing: -.01em; }
@media (min-width: 900px) { .sheet__n { min-width: 72px; height: 72px; font-size: 44px; } .sheet__head { gap: 20px; margin-bottom: 36px; } }

.sheet__foot {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  font-size: 13px; color: var(--ink2);
}
@media (min-width: 900px) { .sheet__foot { left: 56px; right: 56px; bottom: 22px; } }
.pg { font-weight: 700; font-size: 15px; color: var(--ink); }

.h-sub { font: 700 17px/1.3 var(--f); margin: 0 0 12px; }
.h-sub--gap { margin-top: 36px; }
.two { display: grid; gap: 30px; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; gap: 56px; } }
.lede { font-size: clamp(18px, 1.8vw, 20px); line-height: 1.5; }
.note { margin-top: 16px; font-size: 15px; color: var(--ink2); }

/* puces carrées */
.bullets { display: grid; gap: 9px; }
.bullets li { position: relative; padding-left: 20px; line-height: 1.45; }
.bullets li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; background: var(--ink); }
.bullets--grid { gap: 10px 32px; }
@media (min-width: 700px) { .bullets--grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bullets--grid { grid-template-columns: repeat(3, 1fr); } }

/* pictogrammes, codes couleur ISO 7010 */
.picto { display: inline-block; flex: none; width: 26px; height: 26px; vertical-align: middle; }
.picto--ok { background: var(--green) var(--check-white) center / 22px no-repeat; }
.picto--warn { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 2.5 24.5 23h-23z' fill='white' stroke='%231A1A1A' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13 10v6.5' stroke='%231A1A1A' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='19.6' r='1.4' fill='%231A1A1A'/%3E%3C/svg%3E") center / 26px no-repeat; }

/* niveaux de compatibilité : plein, demi, vide */
.lvl { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -2px; }
.lvl--3 { background: var(--ink); }
.lvl--2 { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }

/* apparitions douces (jamais pilotées par le scroll) */
.js [data-reveal] > * { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].in > * { opacity: 1; transform: none; }

/* ═══ COUVERTURE ═════════════════════════════════════════════════ */
.cover { padding-top: 18px; }
.cover__top { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.theme-btn { min-height: 34px; padding: 0 12px; font: 600 14px/1 var(--f); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px; cursor: pointer; }
@media (hover: hover) { .theme-btn:hover { background: var(--wash); } }
@media (pointer: coarse) { .theme-btn { min-height: 44px; } }
.cover__logo { display: inline-flex; align-items: center; gap: 10px; font: 700 22px/1 var(--f); }
.cover__logo svg { width: 26px; height: 26px; }
/* FR / EN : même hauteur et même bordure que le bouton de thème */
.lang-switch { display: inline-flex; box-sizing: border-box; height: 34px; border: 1.5px solid var(--ink); border-radius: 2px; }
.lang-switch button { height: 100%; min-width: 40px; padding: 0 10px; font: 700 14px/1 var(--f); color: var(--ink); background: var(--paper); border: 0; cursor: pointer; }
.lang-switch button + button { border-left: 1.5px solid var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .lang-switch button[aria-pressed="false"]:hover { background: var(--wash); } }
@media (pointer: coarse) { .lang-switch { height: 44px; } .lang-switch button { min-width: 44px; } }
/* en anglais, masqué le temps de traduire (voir le script du <head>) */
.i18n-wait body { visibility: hidden; }
.toc a[aria-current="page"]:lang(en) span::after { content: ' · current page'; }
/* ordre du DOM = ordre téléphone : titre, démo, boutons, texte */
.cover__grid { display: grid; gap: 20px; grid-template-areas: "head" "demo" "cta" "lede"; }
.cover__head { grid-area: head; }
.hero-demo { grid-area: demo; }
.cover__cta { grid-area: cta; }
.cover__lede { grid-area: lede; }
@media (min-width: 980px) {
  .cover__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "head demo" "lede demo" "cta demo";
    grid-template-rows: auto auto 1fr; column-gap: 48px; row-gap: 26px; align-items: start;
  }
}
.cover__name { display: block; font: 700 clamp(44px, 7vw, 84px)/.95 var(--f); letter-spacing: -.025em; }
.cover__what { display: block; margin-top: 12px; font: 400 clamp(19px, 2.2vw, 24px)/1.3 var(--f); max-width: 24em; }
.cover__modes { margin-top: 12px; font-weight: 600; font-size: 17px; color: var(--accent-ink); }
.cover__lede { font-size: 18px; line-height: 1.55; max-width: 36em; }
.cover__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) { .cover__cta .btn { flex: 1 1 100%; } }

/* démo du montage sur la couverture */
.hero-demo { display: grid; gap: 10px; min-width: 0; }
.hero-demo__types { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hero-demo__types::-webkit-scrollbar { display: none; }
.hero-demo__types label { position: relative; flex: none; }
.hero-demo__types input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hero-demo__types span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hero-demo__types input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hero-demo__types input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .hero-demo__types input:not(:checked) + span:hover { border-color: var(--ink); } }
.hero-demo__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.hero-demo__btns { display: flex; gap: 8px; }
.hero-demo__btns .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.hero-demo__cap { flex: 1 1 220px; font-weight: 600; font-size: 16px; line-height: 1.3; }
.hero-demo__cap b { color: var(--accent-ink); margin-right: 6px; }
.hero-demo__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.hero-demo__bar i { height: 4px; background: var(--rule); transition: background-color .3s ease; }
.hero-demo__bar i.on { background: var(--accent); }
.hero-demo__note { font-size: 14.5px; color: var(--ink2); }

.toc { margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 18px; }
.toc__title { font: 700 22px/1 var(--f); margin-bottom: 6px; }
.toc ol { display: grid; column-gap: 48px; }
@media (min-width: 760px) { .toc ol { grid-template-columns: 1fr 1fr; } }
.toc a { display: flex; align-items: flex-end; gap: 8px; min-height: 48px; padding: 10px 4px; text-decoration: none; border-bottom: 1px solid var(--rule); }
.toc a em { font-style: normal; font-weight: 700; min-width: 20px; }
.toc a span { font-weight: 600; }
.toc a i { flex: 1; border-bottom: 1.5px dotted var(--ink2); margin-bottom: 5px; min-width: 16px; }
.toc a b { font-weight: 700; min-width: 16px; text-align: right; }
.toc a[aria-current="page"] { background: var(--wash); }
.toc a[aria-current="page"] span::after { content: ' · page affichée'; font-weight: 400; font-size: 14px; color: var(--ink2); }
@media (hover: hover) { .toc a:hover span { text-decoration: underline; text-underline-offset: 4px; } }

/* ═══ 1 · CONTENU ════════════════════════════════════════════════ */
.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .parts { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.part { position: relative; padding: 14px; border: 1px solid var(--rule); display: flex; flex-direction: column; }
.part svg { height: 92px; margin: 18px auto 12px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.part .fill { fill: var(--accent-soft); }
.part .win { fill: var(--paper); }
.part b { font-size: 17px; line-height: 1.25; }
.part small { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: var(--ink2); }
.part__ref { position: absolute; left: 10px; top: 10px; width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--f); }
.part__qty { position: absolute; right: 12px; top: 10px; font: 700 22px/1 var(--f); }
@media (max-width: 400px) { .part { padding: 12px 10px; } .part svg { height: 72px; } }

.notincl { display: grid; gap: 10px; margin-top: 30px; max-width: 760px; }
.notincl .h-sub { margin: 10px 0 0; }
.notincl p { color: var(--ink2); }

/* ═══ 2 · COMPATIBILITÉ ══════════════════════════════════════════ */
.grid-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.grid-table th, .grid-table td { text-align: left; vertical-align: middle; padding: 10px 8px; border-bottom: 1px solid var(--rule); }
.grid-table thead th { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); border-bottom: 1.5px solid var(--ink); padding-top: 0; }
.grid-table tbody th { font-weight: 600; white-space: nowrap; }
.grid-table tbody th svg { display: inline-block; width: 30px; height: 30px; margin-right: 10px; vertical-align: middle; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.grid-table td { color: var(--ink2); }
.grid-table td:last-child, .grid-table th:last-child { width: 40px; text-align: center; }
@media (max-width: 420px) { .grid-table tbody th svg { display: none; } .grid-table tbody th { white-space: normal; } }
.legend-line { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14px; color: var(--ink2); }
.legend-line > span { display: inline-flex; align-items: center; gap: 8px; }
.notes { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 900px) { .notes { grid-template-columns: 1fr 1fr; gap: 32px; } }
.notes p { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 15.5px; color: var(--ink2); }
.notes b { color: var(--ink); }

/* ═══ 3 · INSTALLATION ═══════════════════════════════════════════ */
.choose { display: grid; gap: 16px; margin-bottom: 18px; }
@media (min-width: 900px) { .choose { display: flex; gap: 36px; } }
.choose legend { padding: 0; margin-bottom: 8px; font: 700 15px/1.3 var(--f); }
.boxes { display: flex; flex-wrap: wrap; gap: 8px; }
.boxes label { position: relative; }
.boxes input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.boxes span {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px 0 10px;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--paper);
  font-size: 16px; font-weight: 600; white-space: nowrap;
}
/* case à cocher de formulaire imprimé */
.boxes span { transition: border-color .15s ease, background-color .15s ease; }
.boxes span::before { content: ''; width: 18px; height: 18px; border: 1.5px solid var(--ink); flex: none; transition: background-color .15s ease, border-color .15s ease; }
.boxes input:checked + span::before { animation: tick .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes tick { from { transform: scale(.55); } }
@media (hover: hover) { .boxes input:not(:checked):not(:disabled) + span:hover { background: var(--wash); } }
.boxes input:checked + span { border-width: 2px; padding-left: 9px; }
.boxes input:checked + span { border-color: var(--accent); }
.boxes input:checked + span::before { background: var(--accent) var(--check-white) center / 18px no-repeat; border-color: var(--accent); }
.boxes input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus); }
.boxes input:disabled + span { opacity: .4; }
.boxes input:disabled { cursor: not-allowed; }

.montage { display: grid; gap: 16px; }
@media (min-width: 980px) { .montage { grid-template-columns: 1.45fr 1fr; gap: 32px; align-items: start; } }
.montage__fig { position: relative; border: 1px solid var(--rule); padding: 44px 4px 6px; }
.side-tag { position: absolute; left: 10px; top: 10px; z-index: 2; font: 600 13px/1 var(--f); padding: 6px 9px; border: 1px solid var(--ink); background: var(--paper); }
.flip {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: var(--ink); color: var(--paper);
  font: 600 13px/1 var(--f); opacity: 0; pointer-events: none;
}
.flip.show { animation: flipnote 1.8s ease both; }
@keyframes flipnote { 0% { opacity: 0; transform: translateY(-6px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spin { from { transform: rotate(-180deg); } to { transform: none; } }

.steps { border-top: 1.5px solid var(--ink); }
.steps li { border-bottom: 1px solid var(--rule); }
.steps button {
  width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; align-items: baseline;
  padding: 12px 8px 12px 10px; text-align: left; background: none; border: 0; border-left: 3px solid transparent;
  cursor: pointer; font: inherit; color: inherit;
}
.steps .n { grid-row: span 2; font: 700 30px/1 var(--f); color: var(--muted-n); }
.steps .t { font-weight: 600; font-size: 17px; }
.steps .d { display: none; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.steps .done .n { color: var(--ink); }
.steps [aria-current="step"] { background: var(--wash); border-left-color: var(--accent); }
.steps [aria-current="step"] .n { color: var(--accent-ink); }
.steps [aria-current="step"] .d { display: block; }
@media (hover: hover) { .steps button:hover .t { text-decoration: underline; text-underline-offset: 4px; } }
.stepnav { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.stepnav .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.stepnav__count { font-weight: 600; font-size: 15px; min-width: 44px; text-align: center; }
.status-line { margin-top: 18px; font-size: 15px; color: var(--ink2); line-height: 1.5; }
.status-line #config-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); margin-right: 4px; }

/* dessin axonométrique (généré par js/opendoor.js) */
.drawing { position: relative; transition: opacity .18s ease, transform .18s ease; }
.drawing.is-leaving { opacity: 0; transform: translateY(6px) scale(.985); }
.drawing svg { width: 100%; height: auto; }
.iso { stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.iso * { vector-effect: non-scaling-stroke; }
.iso .top   { fill: var(--iso-top); }
.iso .front { fill: var(--iso-front); }
.iso .side  { fill: var(--iso-side); }
.iso .floor { fill: var(--iso-floor); stroke: var(--iso-floor-line); }
.iso .pave  { fill: none; stroke: var(--iso-pave); stroke-width: 1; }
.iso .thin  { fill: none; stroke: var(--iso-thin); stroke-width: 1; }
.iso polyline.glass { fill: var(--iso-glass); }
.iso .glass polygon { fill: var(--iso-glass); fill-opacity: .55; }
.iso .glass .top { fill: var(--iso-glass-top); }
.iso .leaf .front { fill: var(--iso-leaf); }
.iso .metal .front, .iso .metal .side { fill: var(--iso-metal); }
.iso .metal .top { fill: var(--iso-metal-top); }
.iso .bar   { fill: none; stroke-width: 2.4; }
/* les pièces du kit, en gris comme dans une notice */
.iso .kit   { stroke: var(--accent); stroke-width: 1.7; }
.iso .kit .front, .iso .kit .side { fill: var(--iso-kit); }
.iso .kit .top { fill: var(--accent-soft); }
.iso .wire  { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.iso .wave { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
/* les ondes apparaissent de proche en proche, du boîtier puis de la box */
.iso g.wave.is-new { animation: none; }
.iso g.wave.is-new path { animation: fade .35s ease both; }
.iso g.wave.is-new path:nth-child(2) { animation-delay: .15s; }
.iso g.wave.is-new path:nth-child(3) { animation-delay: .3s; }
.iso g.wave.is-new path:nth-child(4) { animation-delay: .5s; }
.iso g.wave.is-new path:nth-child(5) { animation-delay: .65s; }
.iso g.wave.is-new path:nth-child(6) { animation-delay: .8s; }
/* local du portail, dessiné en coupe : on voit le boîtier à travers */
.iso .building { stroke: var(--ink2); stroke-dasharray: 5 4; }
.iso .building polygon { fill: var(--iso-front); fill-opacity: .35; }
.iso .hole polygon { fill: var(--paper); }
.iso .leader { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.iso .is-off { visibility: hidden; }
.iso g.is-new, .iso line.is-new { animation: drop .7s cubic-bezier(.2,.7,.3,1) both; }
.iso polyline.wire.is-new { stroke-dasharray: 1; animation: draw 1s ease .15s both; }
@keyframes drop { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
.drawing--cover .leader { display: none; }

/* repère numéroté, cerclé comme dans une notice */
.callout {
  position: absolute; z-index: 3; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent-ink); color: var(--accent-ink);
  font: 700 16px/1 var(--f); pointer-events: none;
  animation: pop .4s ease .35s both;
}
@keyframes pop { from { opacity: 0; transform: scale(.4); } }

/* schéma de raccordement, et trajet dans l'annexe */
.flow { display: grid; gap: 8px; container-type: inline-size; }
.flow__main { display: grid; gap: 8px; }
.flow__node { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ink2); background: var(--paper); }
.flow__node span { font-size: 14.5px; color: var(--ink2); line-height: 1.35; }
.flow__node--core { background: var(--accent-soft); border-color: var(--accent); }
.flow__arrow { display: flex; align-items: center; gap: 8px; padding-left: 14px; font-size: 14px; color: var(--ink2); }
.flow__arrow::before { content: ''; width: 1.5px; height: 22px; background: var(--ink); flex: none; }
.flow__side { display: grid; gap: 8px; padding-top: 8px; border-top: 1.5px dashed var(--ink2); }
.flow__side .flow__node { border-style: dashed; }
.flow__side .flow__node--local { border-style: solid; }
.flow__caption { font-size: 14px; color: var(--ink2); }
@container (min-width: 820px) {
  .flow__main { grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: center; }
  .flow__main:has(> :nth-child(7)) { grid-template-columns: 1fr auto 1fr auto 1.2fr auto 1fr; }
  .flow__arrow { flex-direction: column; padding: 0 4px; text-align: center; gap: 4px; }
  .flow__arrow::before { width: 32px; height: 1.5px; }
  .flow__side { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ═══ 4 · UTILISATION ════════════════════════════════════════════ */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .panels { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.panels li { border: 1px solid var(--rule); padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.panels svg { width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panels .fill { fill: var(--accent-soft); }
.panels .win { fill: var(--paper); }
.panels .x { stroke: var(--red); stroke-width: 3.5; }
.panels .dash { stroke-dasharray: 4 5; }
.panels p { font-size: 15px; line-height: 1.4; }
.panels p b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border: 1.5px solid var(--ink); border-radius: 50%; font: 700 14px/1 var(--f); vertical-align: 1px; }

/* ═══ 5 · INTERFACE DE GESTION (aperçu) ══════════════════════════ */
.ui-wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .ui-wrap { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: start; } }
.ui-fig { display: grid; gap: 10px; justify-items: center; }
.ui-caption { font-size: 14px; color: var(--ink2); text-align: center; }

/* l'écran : la couleur d'accent est une variable, pour le sélecteur 5.2 */
.ui {
  --ui-accent: #0F4C5C;
  --ink: #1A1A1A; --ink2: #55544F; --paper: #FFFFFF; --rule: #D2D0CA;
  --ui-soft: color-mix(in srgb, var(--ui-accent) 14%, #fff);
  --ui-line: #E3E2DD;
  width: 100%; max-width: 400px; height: 640px;
  display: flex; flex-direction: column;
  background: #F7F7F4; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  font-size: 14px; line-height: 1.35;
}
.ui__top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--ui-line); }
.ui__brand { font-weight: 700; font-size: 16px; }
.ui__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.ui__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ui__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.ui__view { display: grid; gap: 10px; animation: ui-in .25s ease; }
.ui__view[hidden] { display: none; }
@keyframes ui-in { from { opacity: 0; transform: translateY(6px); } }
.ui__nav { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--ui-line); }
.ui__nav button {
  display: grid; justify-items: center; gap: 3px; min-height: 58px; padding: 8px 2px;
  background: none; border: 0; cursor: pointer; font: 600 11.5px/1 var(--f); color: var(--ink2);
}
.ui__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui__nav button[aria-pressed="true"] { color: var(--ui-accent); box-shadow: inset 0 2px 0 var(--ui-accent); }

.ui-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.ui-hero > div, .ui-stats > div, .ui-card { background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; }
.ui-hero > div { padding: 12px; display: grid; gap: 2px; }
.ui-hero b { font-size: 30px; line-height: 1; font-weight: 700; }
.ui-hero__main b { color: var(--ui-accent); }
.ui-hero span { font-weight: 600; font-size: 12.5px; }
.ui-hero small { font-size: 11.5px; color: var(--ink2); }
.ui-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-stats > div { padding: 10px; display: grid; gap: 2px; }
.ui-stats b { font-size: 19px; line-height: 1; }
.ui-stats span { font-size: 11px; color: var(--ink2); }
.ui-card { padding: 12px; display: grid; gap: 10px; }
.ui-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ui-card__head p { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.ui-seg { display: inline-flex; border: 1px solid var(--ui-line); border-radius: 6px; overflow: hidden; }
.ui-seg i { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 7px; color: var(--ink2); }
.ui-seg i.on { background: var(--ui-accent); color: #fff; }

/* grille de fréquentation : 7 jours × 17 heures, remplie par le script */
.ui-heat { display: grid; grid-template-columns: 26px repeat(17, 1fr); gap: 2px; font-size: 9.5px; color: var(--ink2); }
.ui-heat span { text-align: right; padding-right: 3px; align-self: center; }
.ui-heat i { aspect-ratio: 1; border-radius: 2px; background: #EFEEEA; }
.ui-heat i[data-l="1"], .ui-scale i:nth-child(1) { background: color-mix(in srgb, var(--ui-accent) 22%, #fff); }
.ui-heat i[data-l="2"], .ui-scale i:nth-child(2) { background: color-mix(in srgb, var(--ui-accent) 45%, #fff); }
.ui-heat i[data-l="3"], .ui-scale i:nth-child(3) { background: color-mix(in srgb, var(--ui-accent) 72%, #fff); }
.ui-heat i[data-l="4"], .ui-scale i:nth-child(4) { background: var(--ui-accent); }
.ui-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink2); }
.ui-scale { display: inline-flex; gap: 2px; }
.ui-scale i { width: 10px; height: 10px; border-radius: 2px; }

.ui-bars { display: grid; gap: 7px; }
.ui-bars li { display: grid; grid-template-columns: 74px 1fr 38px; align-items: center; gap: 8px; font-size: 12.5px; }
.ui-bars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ui-accent) var(--v), #EFEEEA var(--v)); }
.ui-bars b { text-align: right; font-weight: 600; }

.ui-search { padding: 10px 12px; background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; color: #8A8984; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chips i { font-style: normal; font-size: 12px; font-weight: 600; padding: 5px 10px; border: 1px solid var(--ui-line); border-radius: 999px; background: #fff; color: var(--ink2); }
.ui-chips i.on { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.ui-list { background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; }
.ui-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; }
.ui-list li + li { border-top: 1px solid var(--ui-line); }
.ui-list b { display: block; font-size: 14px; }
.ui-list small { font-size: 12px; color: var(--ink2); }
.ui-list--log li { grid-template-columns: 40px 1fr auto; }
.ui-list time { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.ui-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-accent); font-weight: 700; font-size: 12px; }
.ui-list em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.ui-list em.ok { background: #E3F1E8; color: #1D6B40; }
.ui-list em.warn { background: #F6EEDC; color: #7A5413; }
.ui-list em.no { background: #F7E4E2; color: #9C2A22; }
.ui-list em.off { background: #EFEEEA; color: var(--ink2); }
.ui-btn { padding: 11px; text-align: center; border-radius: 8px; background: var(--ui-accent); color: #fff; font-weight: 600; }
.ui-btn + .ui-btn { background: #fff; color: var(--ui-accent); border: 1px solid var(--ui-accent); }
.ui-rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; }
.ui-rows li + li { border-top: 1px solid var(--ui-line); }
.ui-rows b { font-weight: 600; }
.ui-toggle { width: 34px; height: 20px; border-radius: 999px; background: #D9D8D2; position: relative; flex: none; }
.ui-toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.ui-toggle.on { background: var(--ui-accent); }
.ui-toggle.on::after { transform: translateX(14px); }
.ui, .ui * { transition-property: background-color, color, border-color; transition-duration: .3s; }

/* légende à droite : chaque ligne ouvre l'écran correspondant */
.ui-legend { border-top: 1.5px solid var(--ink); }
.ui-legend li { border-bottom: 1px solid var(--rule); }
.ui-legend button {
  width: 100%; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start;
  padding: 12px 8px 12px 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink2); font-size: 15.5px;
}
.ui-legend b { display: block; color: var(--ink); font-size: 17px; }
.ui-legend .n { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 700; color: var(--ink); }
.ui-legend button[aria-pressed="true"] .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .ui-legend button:hover b { text-decoration: underline; text-underline-offset: 4px; } }
.ui-custom { color: var(--ink2); max-width: 46ch; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.swatches button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 8px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; font: 600 15px/1 var(--f); color: var(--ink);
}
.swatches i { width: 22px; height: 22px; border-radius: 50%; }
.swatches button[aria-pressed="true"] { border: 2px solid var(--ink); padding-left: 7px; }
@media (max-width: 440px) { .ui { height: 600px; border-radius: 18px; } }

/* ═══ 6 · INSTALLATION DE RÉFÉRENCE ══════════════════════════════ */
.case { display: grid; gap: 24px; }
@media (min-width: 900px) { .case { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.case__name { font: 700 28px/1.1 var(--f); margin-bottom: 10px; }
.specs { margin: 20px 0 22px; border-top: 1.5px solid var(--ink); }
.specs div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.specs dt { color: var(--ink2); }
.specs dt small { display: block; font-size: 14px; }
.specs dd { font-weight: 700; font-size: 18px; text-align: right; }
.specs dd a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 4px; color: var(--accent-ink); }
.specs--price dt { color: var(--ink); font-weight: 600; }
.specs--price dt small { font-weight: 400; color: var(--ink2); }
.case__log { padding: 18px; background: var(--wash); display: grid; gap: 12px; align-content: start; }
.case__log .h-sub { margin: 0; }
.case__log p:not(.h-sub) { font-size: 15.5px; color: var(--ink2); }
.case__log p b { color: var(--ink); }

/* ═══ 7 · DÉPANNAGE ══════════════════════════════════════════════ */
.trouble { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.trouble th, .trouble td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.trouble thead th { color: var(--ink2); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1.5px solid var(--ink); padding-top: 0; }
.trouble tbody th { font-weight: 600; width: 24%; }
.trouble td { color: var(--ink2); }
@media (max-width: 760px) {
  .trouble, .trouble tbody, .trouble tr, .trouble th, .trouble td { display: block; width: auto; }
  .trouble thead { display: none; }
  .trouble tr { border-top: 1.5px solid var(--ink); padding: 4px 0 12px; }
  .trouble th, .trouble td { border: 0; padding: 8px 0; }
  .trouble tbody th { width: auto; font-size: 17px; }
  .trouble td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); margin-bottom: 2px; }
}

/* ═══ 8 · CARACTÉRISTIQUES ET TARIFS ═════════════════════════════ */
.spec { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.spec tr:first-child th, .spec tr:first-child td { border-top: 1.5px solid var(--ink); }
.spec th { width: 34%; font-weight: 600; }
.spec td { color: var(--ink2); }
@media (max-width: 560px) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr { border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .spec th, .spec td { border: 0 !important; padding: 2px 0; }
}
.timeline { counter-reset: t; border-left: 1.5px solid var(--ink); margin-left: 15px; }
.timeline li { counter-increment: t; position: relative; padding: 0 0 18px 28px; color: var(--ink2); font-size: 15.5px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: counter(t); position: absolute; left: -16px; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--ink); font: 700 15px/1 var(--f); color: var(--ink); }
.timeline b { display: block; color: var(--ink); font-size: 17px; }

/* ═══ 9 · CONTACT ════════════════════════════════════════════════ */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 15.5px; }
.field label span { font-weight: 400; color: var(--ink2); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 17px/1.4 var(--f); color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 2px;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--focus); }
.form .btn { justify-self: start; min-height: 52px; padding: 0 26px; font-size: 17px; }
@media (max-width: 480px) { .form .btn { justify-self: stretch; } }
.form-status { min-height: 1.5em; font-size: 15.5px; }
.form-status.ok { color: var(--green); font-weight: 600; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 20px; max-width: 1180px; margin: 0 auto; padding: 8px 18px calc(24px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--ink2); }
@media (min-width: 900px) { .foot { padding: 8px 28px 32px; } }
.foot nav { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }

/* ═══ ANNEXES (études de cas) ════════════════════════════════════ */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; color: var(--ink2); }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; text-underline-offset: 4px; color: var(--accent-ink); }
.crumbs span { display: inline-flex; align-items: center; }
.cs-title { font: 700 clamp(40px, 7vw, 76px)/.95 var(--f); letter-spacing: -.025em; margin: 6px 0 8px; }
.cs-sub { color: var(--ink2); margin-bottom: 22px; }
.cs-grid { display: grid; gap: 28px; }
@media (min-width: 980px) { .cs-grid { grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; } }
.dots { display: grid; gap: 10px; }
.dots li { position: relative; padding-left: 20px; color: var(--ink2); }
.dots li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; background: var(--ink); }
.dots strong { color: var(--ink); }
.incidents { display: grid; gap: 12px; }
@media (min-width: 800px) { .incidents { grid-template-columns: 1fr 1fr; } }
.incident { padding: 18px; background: var(--wash); display: grid; gap: 8px; align-content: start; }
.incident h3 { font-size: 18px; font-weight: 700; }
.incident dl { display: grid; gap: 8px; }
.incident dt { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.incident dd { font-size: 15.5px; color: var(--ink2); }
.photo { aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 20px; text-align: center; border: 1px dashed var(--ink2); background: var(--wash); color: var(--ink2); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] > * { opacity: 1; transform: none; }
}

/* couverture sur téléphone : titre, démo et bouton dans le premier écran */
@media (max-width: 979px) {
  .hero-demo__fig { padding-top: 36px; }
  .hero-demo__note { display: none; }
  .cover__grid { gap: 16px; }
}

/* couverture : deuxième paragraphe (tout en un) */
.cover__lede--2 { margin-top: 12px; color: var(--ink2); }

/* démo de couverture : sur téléphone, les 4 types en grille 2 × 2,
   tous visibles d'un coup plutôt qu'un bandeau qui défile */
@media (max-width: 599px) {
  .hero-demo__types { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .hero-demo__types span { width: 100%; justify-content: center; }
}

/* section 6 : jauge de 19 personnes, la 20e au trait et barrée */
.gauge { margin: 26px 0 34px; }
.gauge__row { display: flex; flex-wrap: wrap; gap: 10px 9px; max-width: 700px; }
.gauge__row li { width: 26px; }
.gauge__row svg { display: block; width: 100%; height: auto; fill: var(--ink); }
.gauge__row .out svg { fill: none; stroke: var(--ink); stroke-width: 1.6; }
@media (max-width: 599px) { .gauge__row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px 6px; } .gauge__row li { width: auto; max-width: 26px; } }
.gauge .x { stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.gauge figcaption { margin-top: 12px; font-size: 16px; color: var(--ink2); }
.gauge figcaption b { color: var(--ink); }
.plain { line-height: 1.5; color: var(--ink2); }
.src { margin-top: 26px; font-size: 14px; color: var(--ink2); }
.help { margin-bottom: 34px; }
.help__how { line-height: 1.5; color: var(--ink2); }

/* demande de devis : blocs numérotés comme les sous-sections de la notice */
.form { gap: 30px; }
.form__grid { display: grid; gap: 30px; }
@media (min-width: 760px) { .form__grid { grid-template-columns: 1fr 1fr; gap: 20px 40px; } }
.fs { display: grid; gap: 16px; align-content: start; padding-top: 14px; border-top: 1.5px solid var(--ink); }
.fs legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font: 700 17px/1.3 var(--f); }
.fs legend + * { clear: both; }
.fs__row { display: grid; gap: 8px; }
.fs__label { font-weight: 600; font-size: 15.5px; }
.fs .boxes span { font-size: 15.5px; }
.field select {
  padding-right: 42px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.8'/%3E%3C/svg%3E") right 16px center / 12px no-repeat;
}
.hint { font-size: 14px; color: var(--ink2); line-height: 1.4; }
.form-photos { display: grid; gap: 14px; padding: 18px; border: 1.5px solid var(--accent); }
.form-photos[hidden] { display: none; }
.form-photos p { line-height: 1.5; }
.form-legal { font-size: 14px; color: var(--ink2); }
.form-legal a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
/* piège à robots : invisible pour les humains */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.toc a em { min-width: 24px; }

/* annexe : fil d'Ariane à gauche, FR / EN à droite */
.cover__top .crumbs { flex: 1; }
/* texte montré seulement dans la version anglaise */
.en-only { display: none; }
:root:lang(en) .en-only { display: block; }

.price-note { margin-top: 14px; font-size: 15px; }