/* ==========================================================================
   ShapeXpert — feuille de style unique
   2ND ELEMENT SAS · Direction artistique validée (livrable 2)
   v1.0 — 27.10.2026
   --------------------------------------------------------------------------
   Base 8 · rayon 2px · aucune ombre portée.
   L'orange ne sert JAMAIS de couleur de texte sur fond clair (3,12:1).
   Texte sur orange = navy #1C2226 (4,68:1, AA).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Jetons */

:root {
  /* Couleurs — gris, anthracite, blanc, et un seul bleu */
  --ink:        #1C2226;  /* anthracite : titres, bandes sombres */
  --ink-2:      #2F363C;  /* anthracite clair : seconde bande */
  --graphite:   #3C464C;  /* texte courant */
  --steel:      #5A656C;  /* texte secondaire */

  --ac:         #16B8E8;  /* LE cyan : aplats, filets, pictos, tous fonds */
  --ac-hi:      #2FC6EF;  /* survol */
  --on-ac:      #1C2226;  /* texte posé sur un aplat cyan : TOUJOURS anthracite
                             (6,93:1 — le blanc sur cyan ne fait que 2,3:1) */
  --ac-text:    #0A6E8C;  /* le cyan quand il doit être du TEXTE sur fond clair
                             (5,31:1) — ne jamais écrire en --ac sur du clair */
  --ac-soft:    #35CDF0;  /* cyan éclairci pour le texte sur anthracite (8,53:1) */
  --ac-draw:    #0A8AB0;  /* traits porteurs d'information dans les schémas,
                             lisibles sur blanc (3,98:1) */

  --ground:     #F4F5F6;  /* fond de page */
  --surface:    #FFFFFF;  /* cartes, tableaux */
  --surface-2:  #E9EBED;  /* fond secondaire, emplacements média */
  --line:       #D8DCDF;
  --line-soft:  #EBEDEF;

  --on-band:    #F4F5F6;  /* texte sur anthracite */
  --on-band-mut:#AAB6BD;  /* texte secondaire sur anthracite */

  /* Typographie */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Espacement — base 8 */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px; --s5: 48px; --s6: 96px;
  --gut: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  --maxw-txt: 68ch;
  --r: 2px;
}

/* ------------------------------------------------------------ 2. Réglages */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--graphite);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ac-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
/* Liens dans la prose d'une bande sombre. Volontairement limité aux
   paragraphes enfants directs : un lien dans une carte blanche posée sur
   la bande doit rester sombre, et un bouton garde sa propre couleur. */
.band > .wrap > p a, .band > .wrap-narrow > p a,
.band-2 > .wrap > p a, .band-2 > .wrap-narrow > p a,
.hero > .wrap > p a, .hero > .wrap .lede a { color: var(--ac-soft); }
.band > .wrap > p a:hover, .band-2 > .wrap > p a:hover { color: #FFFFFF; }

:focus-visible {
  outline: 3px solid var(--ac);
  outline-offset: 2px;
  border-radius: var(--r);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--on-band);
  padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- 3. Mise en page */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 var(--gut); }

section { padding: clamp(48px, 7vw, 92px) 0; }
section.tight { padding: clamp(32px, 4.5vw, 56px) 0; }

.band       { background: var(--ink); color: var(--on-band); }
.band-2     { background: var(--ink-2); color: var(--on-band); }
.band .lede, .band p { color: var(--on-band-mut); }
.surface    { background: var(--surface); }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* ------------------------------------------------------- 4. Typographie */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  margin: 0 0 var(--s3);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-weight: 700;
}
.band h1, .band h2, .band h3, .band h4,
.band-2 h1, .band-2 h2, .band-2 h3, .band-2 h4 { color: #FFFFFF; }

h1 { font-size: clamp(33px, 5.6vw, 58px); font-variation-settings: "wdth" 112; }
h2 { font-size: clamp(25px, 3.6vw, 38px); }
h3 { font-size: clamp(18px, 2vw, 21px); line-height: 1.22; letter-spacing: -0.008em; }
h4 { font-size: 16.5px; letter-spacing: 0; }

.overline {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ac-text);
  margin: 0 0 var(--s3);
}
.band .overline, .band-2 .overline, .hero .overline { color: var(--ac-soft); }

.lede { font-size: clamp(17px, 1.9vw, 19.5px); line-height: 1.55; max-width: var(--maxw-txt); margin: 0 0 var(--s4); }
.lede b, strong { font-weight: 600; color: var(--ink); }
.band strong, .band-2 strong { color: #FFFFFF; }

p { max-width: var(--maxw-txt); }
p.small { font-size: 14px; color: var(--steel); line-height: 1.55; max-width: 76ch; }
.band p.small, .band-2 p.small { color: var(--on-band-mut); }

.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 5. Navigation */

.topbar {
  position: sticky; top: 0; z-index: 90;
  background: rgba(35, 41, 46, .97);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 68px; }

.brand { display: inline-flex; align-items: center; line-height: 0; }
/* Le logo est l'élément le plus large de la barre : on le monte à 252 px,
   soit 40 px de haut dans une barre de 68, sans toucher à sa hauteur. */
.brand img { width: 252px; height: auto; display: block; }
@media (max-width: 920px) { .brand img { width: 192px; } }
@media (max-width: 560px) { .brand img { width: 152px; } }
footer.site .brand img { width: 176px; margin-bottom: var(--s3); }

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a {
  color: var(--on-band); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--ac); }

/* --- Sous-menu Machines ------------------------------------------------
   Au survol et au clavier sur grand écran ; déplié en permanence dans le
   menu burger, où un second niveau repliable n'apporte rien.             */

.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
.sub-toggle {
  background: none; border: none; padding: 6px 2px; cursor: pointer;
  display: inline-flex; align-items: center; color: var(--on-band);
}
.sub-toggle svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-item:hover .sub-toggle, .sub-toggle[aria-expanded="true"] { color: #FFFFFF; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.subnav {
  position: absolute; top: 100%; left: -14px; z-index: 95;
  list-style: none; margin: 0; padding: 8px 0; min-width: 232px;
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.14);
  border-top: 2px solid var(--ac); border-radius: 0 0 var(--r) var(--r);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
.nav-item:hover .subnav,
.nav-item:focus-within .subnav,
.subnav.open { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a {
  display: block; padding: 9px 18px; font-size: 15px; font-weight: 500;
  color: var(--on-band); border-bottom: none; white-space: nowrap;
}
.subnav a:hover, .subnav a[aria-current="page"] { background: rgba(255,255,255,.08); color: #FFFFFF; }
.subnav .all { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.subnav .all a { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ac-soft); }

@media (max-width: 920px) {
  /* Dans le burger : tout est déplié, pas de second niveau à ouvrir. */
  .nav-item { display: block; }
  .sub-toggle { display: none; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: none; min-width: 0; padding: 0 0 6px;
  }
  .subnav a { padding: 9px 0 9px 18px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14.5px; }
  .subnav .all { margin: 0; padding: 0; border-top: none; }
}

.lang { display: flex; gap: 2px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; }
.lang a { color: var(--on-band-mut); text-decoration: none; padding: 4px 6px; border-bottom: none; }
.lang a[aria-current="true"] { color: #FFFFFF; font-weight: 600; }
.lang span { color: rgba(255,255,255,.55); }

.burger {
  display: none; margin-left: auto;
  background: none; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r);
  width: 42px; height: 38px; cursor: pointer; padding: 0;
}
.burger span { display: block; width: 18px; height: 2px; background: #FFF; margin: 3px auto; }

@media (max-width: 920px) {
  /* Une seule ligne : marque, bouton devis, langue, burger.
     Le bouton devis reste visible en permanence, hors du menu. */
  .topbar .wrap { flex-wrap: wrap; gap: 10px; min-height: 60px; }
  .burger { display: block; margin-left: 0; order: 4; flex: 0 0 auto; }
  .brand { order: 1; flex: 0 1 auto; margin-right: auto; }
  .topbar .btn { order: 2; }
  .lang { order: 3; }
  .nav {
    order: 5; width: 100%; margin: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid rgba(255,255,255,.12); padding: 6px 0 12px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 560px) {
  .topbar .wrap { gap: 8px; }
  .topbar .btn { font-size: 13px; padding: 8px 11px; }

  .lang { font-size: 11.5px; }
  .lang a { padding: 4px 3px; }
  .burger { width: 38px; height: 34px; }
}

/* ------------------------------------------------------------ 6. Boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-body); font-size: 15.5px; font-weight: 600;
  padding: 13px 22px; border-radius: var(--r); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn-primary { background: var(--ac); color: var(--on-ac); border-color: var(--ac); }
.btn-primary:hover { background: var(--ac-hi); border-color: var(--ac-hi); color: var(--on-ac); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #FFFFFF; }

.band .btn-line, .band-2 .btn-line, .hero .btn-line { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.band .btn-line:hover, .band-2 .btn-line:hover, .hero .btn-line:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

/* ------------------------------------------- 28. Pages juridiques
   Vingt-deux articles au corps des titres de section, c'est un mur. On
   réduit les intertitres : le lecteur qui cherche « article 13 » le trouve
   aussi bien, et la page tient en deux fois moins d'écrans. */
.legal h2 { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -.008em; }
.legal h2.mt5 { margin-top: var(--s5); }
.legal p { margin: 0 0 12px; }

/* ------------------------------------------- 28b. Clause très apparente
   Une clause attributive de juridiction entre professionnels n'est opposable
   que si elle est « spécifiée de façon très apparente » dans l'engagement
   (art. 48 du code de procédure civile). Les majuscules du texte ne suffisent
   pas à elles seules : on l'encadre pour qu'elle ne puisse pas passer
   inaperçue dans le flux des articles. */
p.apparent {
  border: 2px solid var(--ink); border-radius: var(--r);
  padding: 16px 18px; margin: var(--s4) 0;
  font-weight: 600; color: var(--ink); letter-spacing: .01em;
}

/* ------------------------------------------- 29. Les trois logos
   La gamme n'a pas de photo des trois machines ensemble : les trois
   marques posées l'une sous l'autre disent la même chose, et mieux.
   Les trois SVG ont des proportions proches, donc une largeur commune
   suffit à les aligner. */
.logo-stack {
  display: grid; align-content: center; justify-items: start;
  gap: clamp(26px, 4.5vw, 44px); padding: clamp(14px, 3vw, 30px) 0;
}
.logo-stack img { display: block; width: 100%; max-width: 440px; height: auto; }
@media (max-width: 860px) { .logo-stack { justify-items: center; } }

/* WhatsApp : second recours, jamais concurrent du devis. Il reste en trait
   sur fond clair, et en trait blanc sur les fonds sombres (barre collante
   comprise). Le picto est une bulle générique, pas la marque. */
.btn-wa { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-wa:hover { border-color: var(--ink); }
.btn-wa .ico { width: 17px; height: 17px; fill: currentColor; flex: none; }
.stickybar .btn-wa, .band .btn-wa, .band-2 .btn-wa, .hero .btn-wa {
  color: #FFFFFF; border-color: rgba(255,255,255,.45);
}
.stickybar .btn-wa:hover, .band .btn-wa:hover, .band-2 .btn-wa:hover, .hero .btn-wa:hover {
  border-color: #FFFFFF;
}
/* Dans la barre collante, c'est le devis qui est poussé à droite : le bouton
   WhatsApp doit donc porter la marge, sinon les deux se collent. */
.stickybar .btn-wa { margin-left: auto; padding: 11px 16px; }
.stickybar .btn-wa + .btn { margin-left: 0; }
@media (max-width: 580px) { .stickybar .btn-wa span { display: none; } .stickybar .btn-wa { padding: 11px 13px; } }

footer.site .wa-link { display: inline-flex; align-items: center; gap: 7px; }
footer.site .wa-link .ico { width: 15px; height: 15px; fill: currentColor; flex: none; }

.cta-s { display: none; }
@media (max-width: 580px) { .cta-l { display: none; } .cta-s { display: inline; } }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: var(--s4) 0 var(--s3); }
@media (max-width: 430px) {
  /* Sur un petit téléphone, un bouton pleine largeur vaut mieux qu'un libellé coupé. */
  .btn-row { display: grid; grid-template-columns: 1fr; }
  .btn-row .btn { white-space: normal; text-align: center; width: 100%; }
}

.arrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 15.5px; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--ac); padding-bottom: 2px;
}
.arrow-link:hover { color: var(--ac-text); border-bottom-color: var(--ac-hi); }
/* Dans un encadré posé sur une bande sombre, l'encre du lien devient
   illisible : il passe en blanc. La règle vise l'encadré seul, surtout pas
   toute la bande : les cartes qui s'y trouvent ont un fond clair, et leurs
   liens doivent rester sombres. */
.band .callout .arrow-link, .band-2 .callout .arrow-link { color: #FFFFFF; }
.band .callout .arrow-link:hover, .band-2 .callout .arrow-link:hover { color: var(--ac-soft); }
.arrow-link::after { content: "→"; font-family: var(--f-mono); }

/* --------------------------------------------------------------- 7. Hero */

.hero { background: var(--ink); color: var(--on-band); padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 60px); }
.hero .grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.hero h1 { color: #FFFFFF; margin-bottom: var(--s4); }
.hero .lede { color: var(--on-band-mut); }
.hero .micro { font-size: 14px; color: var(--on-band-mut); margin: var(--s3) 0 0; }
.hero .media { margin-bottom: -1px; }
@media (max-width: 880px) {
  .hero .grid { grid-template-columns: 1fr; }
}

.price-tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 18px; font-weight: 600;
  color: var(--ink); border-left: 3px solid var(--ac);
  padding: 2px 0 2px 13px; margin: 0 0 var(--s3);
}
.hero .price-tag, .band .price-tag, .band-2 .price-tag { color: #FFFFFF; }

/* -------------------------------------------- 8. Barre de spécifications */

.specbar { background: var(--ink-2); color: var(--on-band); border-top: 3px solid var(--ac); }
.specbar ul {
  list-style: none; margin: 0; padding: 20px 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(172px, 100%), 1fr)); gap: 18px 26px;
}
.specbar li { border-left: 2px solid rgba(255,255,255,.18); padding-left: 14px; }
.specbar dt, .specbar .k {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-band-mut); margin-bottom: 3px;
}
.specbar dd, .specbar .v { margin: 0; font-size: 16px; font-weight: 600; color: #FFFFFF; }

/* ------------------------------------------------- 9. Bloc de légitimité
   La citation du fondateur et les trois chiffres qui la rendent crédible,
   dans un seul bloc. Séparés, les chiffres flottaient sans contexte ;
   ensemble, ils répondent à la question « qui est ce "nous" ? ».
   Les chiffres sont toujours en lignes (nombre + légende côte à côte) :
   c'est ce qui tient aussi bien à 320 px qu'à 1600.                       */

.credo {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(24px, 3.4vw, 40px); margin: var(--s5) 0 0;
}
.credo blockquote { margin: 0; padding: 0 0 0 22px; border-left: 4px solid var(--ac); max-width: 46ch; }
.credo blockquote p {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.24; letter-spacing: -.015em;
  color: var(--ink); margin: 0 0 10px; text-wrap: balance;
}
.credo cite {
  font-style: normal; font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ac-text);
}

.credo .figs {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: clamp(22px, 2.8vw, 32px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
}
.credo .figs > div {
  display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 22px);
  padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.credo .figs > div:first-child { border-top: none; padding-top: 0; }
.credo .figs > div:last-child { padding-bottom: 0; }
.credo .figs .f {
  font-family: var(--f-display); font-variation-settings: "wdth" 112;
  font-size: clamp(27px, 3vw, 38px); font-weight: 700; line-height: 1;
  letter-spacing: -.025em; color: var(--ink);
  min-width: 3.1ch; flex: 0 0 auto;
}
.credo .figs .c { font-size: 14.5px; color: var(--steel); line-height: 1.35; margin: 0; }

/* Au-delà de 900 px, citation et chiffres côte à côte : sinon la moitié
   droite de la carte reste vide sous la citation. */
@media (min-width: 900px) {
  .credo {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px); align-items: center;
  }
  .credo .figs {
    margin-top: 0; padding-top: 0; border-top: none;
    border-left: 1px solid var(--line); padding-left: clamp(28px, 3vw, 44px);
  }
}

/* ---------------------------------------------------------- 10. Cartes */

.cards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; color: var(--graphite);
}
.card .card-media { border-bottom: 1px solid var(--line); }
.card .card-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 8px; }
.card .tagline { font-size: 15.5px; color: var(--graphite); margin: 0 0 var(--s3); }
.card dl {
  margin: 0 0 var(--s4); padding: var(--s3) 0 0; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 14.5px;
}
.card dt { color: var(--steel); }
.card dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.card dd.price { font-family: var(--f-mono); color: var(--ac-text); }
.card .arrow-link { margin-top: auto; align-self: flex-start; }

/* Cartes « elle est faite pour vous si… » */
.fit { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr)); }
.fit > div {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--ac); border-radius: var(--r); padding: var(--s4);
}
.fit h3 { font-size: 18px; margin-bottom: 9px; }
.fit p { font-size: 15px; margin: 0; }

/* Liste problèmes */
.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.problems li { padding-left: 30px; position: relative; max-width: 78ch; }
.problems li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 16px; height: 3px; background: var(--ac);
}
.problems b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* Étapes numérotées */
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.steps li::before {
  content: counter(st, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 13px; font-weight: 600;
  color: var(--on-ac); background: var(--ac);
  border-radius: var(--r); padding: 6px 0; text-align: center;
}
.steps b { display: block; color: var(--ink); font-weight: 600; }
.band .steps b, .band-2 .steps b { color: #FFFFFF; }
.steps p { margin: 2px 0 0; font-size: 15.5px; }

/* --------------------------------------------------------- 11. Citation */

blockquote.pull {
  margin: var(--s5) 0 0; padding: 0 0 0 26px; border-left: 4px solid var(--ac);
  max-width: 50ch;
}
blockquote.pull p {
  font-family: var(--f-display); font-size: clamp(21px, 2.8vw, 28px);
  line-height: 1.26; color: var(--ink); font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 10px;
}
.band blockquote.pull p, .band-2 blockquote.pull p { color: #FFFFFF; }
blockquote.pull cite {
  font-style: normal; font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}
.band blockquote.pull cite, .band-2 blockquote.pull cite { color: var(--ac-soft); }

/* ------------------------------------------------------ 12. Chiffres clés */

.figrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--s4); margin: var(--s5) 0;
}
.figrow > div { border-top: 3px solid var(--ac); padding-top: var(--s3); }
.figrow .fig {
  font-family: var(--f-display); font-variation-settings: "wdth" 112;
  font-size: clamp(34px, 5vw, 50px); font-weight: 700; line-height: .98;
  color: var(--ink); letter-spacing: -.025em;
}
.band .figrow .fig, .band-2 .figrow .fig { color: #FFFFFF; }
.figrow .cap { font-size: 14.5px; color: var(--steel); margin-top: 8px; line-height: 1.35; }
.band .figrow .cap, .band-2 .figrow .cap { color: var(--on-band-mut); }

/* ---------------------------------------------------------- 13. Tableaux */

.tablewrap { overflow-x: auto; margin: var(--s4) 0; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  .tablewrap::after {
    content: "\2194  faites glisser le tableau";
    display: block; font-family: var(--f-mono); font-size: 11px;
    letter-spacing: .08em; color: var(--steel); padding-top: 8px;
  }
  html[lang="en"] .tablewrap::after { content: "\2194  swipe the table"; }
}
table.t { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 580px;
          background: var(--surface); color: var(--graphite); }
table.t caption { text-align: left; font-size: 14px; color: var(--steel); padding-bottom: 10px; }
table.t th, table.t td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t thead th {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); background: var(--surface-2); border-bottom: 2px solid var(--ink);
  font-weight: 600; white-space: nowrap;
}
table.t tbody th { font-weight: 700; color: var(--ink); font-family: var(--f-display); font-size: 17px; white-space: nowrap; }
table.t .price { font-family: var(--f-mono); font-weight: 600; color: var(--ac-text); white-space: nowrap; }
table.t tbody tr:last-child td, table.t tbody tr:last-child th { border-bottom: none; }

/* Fiche technique : liste de définitions à deux colonnes */
dl.spec {
  display: grid; grid-template-columns: minmax(min(170px, 100%), 1fr) minmax(0, 2fr);
  gap: 0; margin: var(--s4) 0 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
dl.spec dt, dl.spec dd { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); margin: 0; }
dl.spec dt { color: var(--steel); font-size: 14.5px; }
dl.spec dd { color: var(--ink); font-weight: 500; }
dl.spec dt:nth-last-of-type(1), dl.spec dd:nth-last-of-type(1) { border-bottom: none; }
@media (max-width: 620px) {
  dl.spec { grid-template-columns: 1fr; }
  dl.spec dt { border-bottom: none; padding-bottom: 0; }
  dl.spec dd { padding-top: 2px; }
}

/* ---------------------------------------------- 14. Emplacements média */

.media {
  position: relative; background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: var(--r);
  text-align: center; overflow: hidden;
}
.media::before { content: ""; display: block; padding-top: var(--ratio, 66.6%); }
.media > .ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; padding: 22px;
}
.media .ph-k {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ac-text);
}
.media .ph-t { font-size: 14.5px; color: var(--steel); max-width: 38ch; line-height: 1.4; }
.media .ph-d { font-family: var(--f-mono); font-size: 11.5px; color: var(--steel); opacity: .8; }
.band .media, .band-2 .media, .hero .media {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.22);
}
.band .media .ph-t, .hero .media .ph-t, .band .media .ph-d, .hero .media .ph-d { color: var(--on-band-mut); }
.band .media .ph-k, .hero .media .ph-k { color: var(--ac-soft); }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Emplacement réellement rempli : plus de cadre en pointillés. */
.media.is-filled { border-style: solid; border-color: var(--line); background: var(--ink); }
.band .media.is-filled, .hero .media.is-filled { border-color: rgba(255,255,255,.14); }

.media-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

figure { margin: var(--s5) 0; }
/* Une figure posée dans une grille doit s'aligner sur les div voisines :
   sa marge verticale la décalait et cassait la rangée. */
.media-grid > figure, .grid > figure, .cards > figure { margin: 0; }
figure figcaption { font-size: 14.5px; color: var(--steel); margin-top: 14px; max-width: 80ch; line-height: 1.5; }
figure .draw {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4);
}

/* ------------------------------------------------------------ 15. Encarts */

.callout {
  background: var(--surface); border-left: 4px solid var(--ac);
  padding: var(--s4); margin: var(--s4) 0; border-radius: 0 var(--r) var(--r) 0;
}
.callout h3 { font-size: 17px; margin-bottom: 7px; }
.callout p { margin: 0; font-size: 15.5px; }
.band .callout, .band-2 .callout { background: rgba(255,255,255,.07); }

.note { font-size: 13.5px; color: var(--steel); line-height: 1.5; max-width: 82ch; margin: var(--s3) 0 0; }
.band .note, .band-2 .note { color: var(--on-band-mut); }

/* ---------------------------------------------------------------- 16. FAQ */

.faq { border-top: 1px solid var(--line); margin-top: var(--s4); }
.faq details { border-bottom: 1px solid var(--line); background: var(--surface); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px var(--s4) 18px 0;
  font-family: var(--f-display); font-weight: 700; font-size: 17.5px; color: var(--ink);
  position: relative; padding-left: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 15px;
  font-family: var(--f-mono); font-size: 22px; font-weight: 400; color: var(--ac-text); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { background: var(--surface-2); }
.faq .ans { padding: 0 var(--s4) 22px 18px; }
.faq .ans p { margin: 0; font-size: 15.5px; }

/* ----------------------------------------------------------- 17. Formulaire */

.form { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.form .full { grid-column: 1 / -1; }
.field label {
  display: block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 7px; font-weight: 500;
}
.band .field label, .band-2 .field label { color: #FFFFFF; }
.field .hint { display: block; font-family: var(--f-body); font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--steel); margin-top: 3px; font-weight: 400; }
.band .field .hint, .band-2 .field .hint { color: var(--on-band-mut); }
.field .req { color: var(--ac-text); }
.band .field .req, .band-2 .field .req { color: var(--ac-soft); }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--f-body); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; line-height: 1.4;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ac); }

fieldset.checks { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px; margin: 0; }
fieldset.checks legend {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
  /* La légende chevauche la bordure du fieldset : sans fond opaque, elle se
     perdait sur les bandes sombres et paraissait coupée en deux. */
  background: var(--surface); padding: 0 8px; margin-left: -2px;
}
fieldset.checks .opts { display: flex; flex-wrap: wrap; gap: 10px 20px; }
fieldset.checks label {
  display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--graphite);
  font-family: var(--f-body); letter-spacing: 0; text-transform: none; margin: 0;
}
fieldset.checks input { width: auto; }

/* Case isolée, hors fieldset : même traitement visuel que les groupes, avec
   sa précision sur une seconde ligne. */
label.check-one {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 14px 16px; font-size: 15px; color: var(--graphite); cursor: pointer;
}
label.check-one:hover { border-color: var(--steel); }
label.check-one input { width: auto; margin: 3px 0 0; }
label.check-one .hint { grid-column: 2; display: block; margin: 0; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --------------------------------------------- 18. Calculateur encombrement */

.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.calc .unit { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s4); }
.calc .unit button {
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface); color: var(--steel); border: none; cursor: pointer;
  padding: 9px 16px; border-right: 1px solid var(--line);
}
.calc .unit button:last-child { border-right: none; }
.calc .unit button[aria-pressed="true"] { background: var(--ac); color: var(--on-ac); font-weight: 600; }

.calc .inputs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-bottom: var(--s4); }
.calc .inputs .pair { display: flex; gap: 8px; }
.calc .inputs .pair > span { display: flex; align-items: center; gap: 5px; }
.calc .inputs .pair input { width: 5.5em; }
.calc .inputs .suf { font-family: var(--f-mono); font-size: 13px; color: var(--steel); }

.calc .outs {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: var(--s4); overflow: hidden;
}
.calc .outs > div { background: var(--surface-2); padding: 14px 16px; }
.calc .outs .k {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 4px;
}
.calc .outs .v { font-family: var(--f-mono); font-size: 16.5px; font-weight: 600; color: var(--ink); }

.calc svg { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------- 19. Barre collante */

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--ink); border-top: 2px solid var(--ac);
  transform: translateY(104%); transition: transform .2s ease;
}
.stickybar.on { transform: translateY(0); }
.stickybar .wrap { display: flex; align-items: center; gap: var(--s3); padding-top: 11px; padding-bottom: 11px; }
.stickybar .label { color: #FFFFFF; font-weight: 600; font-size: 15.5px; }
.stickybar .price { font-family: var(--f-mono); color: var(--ac-soft); font-size: 14.5px; }
.stickybar .btn { margin-left: auto; }
@media (max-width: 560px) {
  .stickybar .price { display: none; }
  .stickybar .label { font-size: 14px; }
}

/* ---------------------------------------------------------- 20. Fil d'ariane */

.crumbs { font-family: var(--f-mono); font-size: 12px; letter-spacing: .07em; color: var(--on-band-mut); padding: 14px 0 0; }
.crumbs a { color: var(--on-band-mut); text-decoration: none; }
.crumbs a:hover { color: #FFFFFF; }
.crumbs span { opacity: .5; margin: 0 6px; }

/* ------------------------------------------------------------- 21. Footer */

footer.site { background: var(--ink); color: var(--on-band-mut); padding: var(--s5) 0 var(--s4); margin-top: 0; }
footer.site .cols {
  display: grid; gap: var(--s4) var(--s5); grid-template-columns: 1fr;
  padding-bottom: var(--s5); border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 680px) { footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { footer.site .cols { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
footer.site .cols > * { min-width: 0; }
footer.site .news { grid-column: 1 / -1; }
@media (min-width: 1000px) { footer.site .news { grid-column: auto; } }
footer.site h4 {
  color: #FFFFFF; font-size: 12px; font-family: var(--f-mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s3);
}
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer.site a { color: var(--on-band-mut); text-decoration: none; font-size: 15px; }
footer.site a:hover { color: #FFFFFF; text-decoration: underline; }
footer.site .news p { font-size: 14.5px; margin: 0 0 var(--s3); max-width: 42ch; }
footer.site .news form { display: flex; gap: 8px; flex-wrap: wrap; }
footer.site .news input {
  flex: 1 1 190px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  color: #FFFFFF; border-radius: var(--r); padding: 11px 13px; font-size: 15px; font-family: var(--f-body);
}
footer.site .news input::placeholder { color: rgba(255,255,255,.45); }
footer.site .legal {
  padding-top: var(--s4); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}

/* ------------------------------------------------------------ 22. Divers */

.center { text-align: center; }
.mb0 { margin-bottom: 0; }
.mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }

@media print {
  .topbar, .stickybar, footer.site { display: none; }
  body { background: #FFF; font-size: 11pt; }
}

/* ------------------------------------------- 23. Chaînes de production */

.chains { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.chain {
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4);
  background: var(--surface);
}
.band .chain, .band-2 .chain { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.17); }
.chain h4 {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ac-text); margin-bottom: var(--s3);
}
.band .chain h4, .band-2 .chain h4 { color: var(--ac-soft); }
.chain ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.chain li {
  flex: 1 1 0; min-width: 0; position: relative;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; font-size: 14px; color: var(--steel); background: var(--ground);
}
.band .chain li, .band-2 .chain li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #C3CCD2; }
.chain li.is-m {
  border-color: var(--ac); border-left: 3px solid var(--ac);
  color: var(--ink); font-weight: 600; background: var(--surface);
}
.band .chain li.is-m, .band-2 .chain li.is-m { color: #FFFFFF; background: rgba(22,184,232,.18); }
.chain li em {
  display: block; font-style: normal; font-family: var(--f-mono);
  font-size: 11px; font-weight: 400; color: var(--steel); margin-top: 2px;
}
.band .chain li em, .band-2 .chain li em { color: var(--on-band-mut); }

/* ------------------------- 24. Composants clairs dans une bande sombre ---
   Une carte blanche posée sur une bande navy ne doit pas hériter du texte
   clair de la bande. Ces règles sont volontairement en fin de feuille.      */

.band .card, .band-2 .card,
.band .fit > div, .band-2 .fit > div,
.band table.t, .band-2 table.t,
.band dl.spec, .band-2 dl.spec,
.band .faq details, .band-2 .faq details,
.band .calc, .band-2 .calc { color: var(--graphite); }

.band .card h3, .band-2 .card h3,
.band .fit h3, .band-2 .fit h3,
.band .faq summary, .band-2 .faq summary,
.band table.t th, .band-2 table.t th,
.band dl.spec dd, .band-2 dl.spec dd,
.band .calc .outs .v, .band-2 .calc .outs .v { color: var(--ink); }

.band .card .tagline, .band-2 .card .tagline,
.band .fit p, .band-2 .fit p,
.band .faq .ans p, .band-2 .faq .ans p { color: var(--graphite); }

.band .card dt, .band-2 .card dt,
.band dl.spec dt, .band-2 dl.spec dt,
.band .calc .outs .k, .band-2 .calc .outs .k { color: var(--steel); }

.band .card dd, .band-2 .card dd { color: var(--ink); }
.band .card dd.price, .band-2 .card dd.price,
.band table.t .price, .band-2 table.t .price { color: var(--ac-text); }

/* Galerie carrée : quatre colonnes au-delà de 1000 px */
.media-grid.g4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .media-grid.g4 { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------- 25. Marqueurs « à compléter »
   Ces encarts signalent ce qui reste à remplir avant mise en ligne.
   Supprimez la classe .todo (et son contenu) une fois l'information en place. */

.todo {
  background: #FAF3E6; border-left: 4px solid #E3D2B0; color: #7A5410;
  padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0;
  font-size: 14.5px; margin: var(--s3) 0; max-width: 78ch;
}
.todo::before {
  content: "À compléter — "; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
}
dl.spec dd.todo {
  border-left: none; border-radius: 0; margin: 0; max-width: none;
  border-bottom: 1px solid var(--line-soft); font-size: 15px; padding: 13px 18px;
}

/* --- 26. Emplacement média DANS une carte blanche posée sur une bande ----
   Les règles de la section 14 assombrissent les emplacements média des
   bandes. Une carte, elle, reste blanche : il faut rétablir les couleurs
   de fond clair, sinon la légende devient illisible.                      */

.band .card .media, .band-2 .card .media,
.band .fit .media, .band-2 .fit .media {
  background: var(--surface-2); border-color: var(--line);
}
.band .card .media .ph-k, .band-2 .card .media .ph-k { color: var(--ac-text); }
.band .card .media .ph-t, .band-2 .card .media .ph-t,
.band .card .media .ph-d, .band-2 .card .media .ph-d { color: var(--steel); }

/* ------------------------------- 27. Vidéo de démonstration (format carré)
   Une vidéo longue ne démarre pas toute seule : image d'attente, bouton
   de lecture, et preload="none" pour ne rien télécharger avant le clic.
   Format carré volontairement bridé en largeur — plein écran, un carré
   de 1 180 px écraserait le reste de la page.                            */

figure.demo-video { max-width: 620px; margin-left: 0; margin-right: 0; }
figure.demo-video .media { background: var(--ink); }
figure.demo-video video { cursor: pointer; }