/* ═══════════════════════════════════════════════════════════════════
   Jingyuan — fr.jingyuan.hk  V1.0
   Design system : « Industrie claire » — B2B industriel européen
   Palette : blanc / gris clair dominant, bleu France en primaire,
             bleu technique et vert en accents ponctuels.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root {
  /* Couleurs */
  --brand:      #0055A4;   /* bleu France — couleur primaire */
  --brand-dk:   #003F7D;
  --brand-dkt:  #002F5E;
  --brand-lt:   #EAF1F9;
  --brand-lt2:  #D6E4F3;
  --tech:       #1E88E5;   /* bleu technique — accent secondaire */
  --tech-lt:    #E7F2FD;
  --green:      #0B7A50;   /* vert — usage ponctuel (validation, positif).
                              Assombri depuis #0E8F5F : le blanc sur ce fond ne
                              donnait que 4,11:1, sous le seuil WCAG AA (4,5:1)
                              pour le texte de petite taille — or ce vert porte
                              le libellé blanc du bouton WhatsApp flottant.
                              #0B7A50 donne 5,36:1 et reste le même vert. */
  --green-lt:   #E7F5EF;

  --bg:         #FFFFFF;
  --bg-alt:     #F5F8FB;
  --bg-soft:    #EDF2F8;
  --surface:    #FFFFFF;

  --border:     #E1E7EF;
  --border-hi:  #C7D5E5;

  --ink:        #0E1726;
  --ink-dim:    #48566B;
  --ink-sub:    #5F6C7F;   /* texte secondaire. Assombri depuis #6E7C91 :
                              le rapport sur blanc n'était que de 4,24:1, sous
                              le seuil WCAG AA de 4,5:1 pour le petit texte
                              (.note, libellés de pied de page, légendes).
                              #5F6C7F donne 5,33:1. */

  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  16px;

  --shadow-sm:  0 1px 2px rgba(14,23,38,.04), 0 1px 3px rgba(14,23,38,.06);
  --shadow:     0 2px 4px rgba(14,23,38,.04), 0 8px 24px rgba(14,23,38,.07);
  --shadow-lg:  0 4px 8px rgba(14,23,38,.05), 0 20px 48px rgba(14,23,38,.10);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --head: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  --wrap: 1200px;
  --nav-h: 72px;
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  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(--brand); text-decoration: none; }
a:hover { color: var(--brand-dk); }
/* 长词不得撑破容器：仅当单个词无法容纳时才触发断行，正常文本零影响。
   法语长词（d'approvisionnement / électromagnétique / décontamination…）极易
   在窄栏或窄视口造成整页横向滚动 —— 这是本类缺陷的通用兜底，与语种无关。 */
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.012em; overflow-wrap: break-word; }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem); }
h3 { font-size: clamp(1.1rem, .98rem + .5vw, 1.3rem); font-weight: 600; }
h4 { font-size: 1.02rem; font-weight: 600; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 3px solid var(--tech); outline-offset: 2px; border-radius: 3px; }

/* ── Helpers ───────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 880px; }
.sec { padding: 72px 0; }
.sec-sm { padding: 48px 0; }
.sec-alt { background: var(--bg-alt); }
.sec-soft { background: var(--bg-soft); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  background: var(--brand-lt); border-radius: 100px; padding: 5px 13px; margin-bottom: 16px;
}
.eyebrow-plain { background: none; padding: 0; color: var(--tech); }
.lead { font-size: 1.1rem; color: var(--ink-dim); max-width: 68ch; }
.sec-head { max-width: 780px; margin-bottom: 40px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head p { color: var(--ink-dim); margin-bottom: 0; }
.sub { color: var(--ink-sub); font-size: .93rem; }

/* ── Boutons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600; line-height: 1;
  padding: 14px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
  text-align: center;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-dk); color: #fff; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-outline { background: #fff; color: var(--brand); border-color: var(--border-hi); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-lt); color: var(--brand-dk); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--brand); padding-left: 0; padding-right: 0; }
.btn-ghost::after { content: '→'; transition: transform .18s; }
.btn-ghost:hover::after { transform: translateX(3px); }
.btn-sm { padding: 10px 16px; font-size: 14.5px; }
.btn-lg { padding: 16px 28px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Navigation ────────────────────────────────────────────────── */
/* L'en-tête est un point de repère ARIA (<header> = bannière) : il permet aux
   lecteurs d'écran de sauter directement au contenu ou à la navigation. Le
   « sticky » est porté par le <header> et non par <nav> : un élément sticky ne
   peut coller que dans les limites de son parent — si le parent avait la même
   hauteur que lui, il n'aurait aucune marge de défilement et ne collerait pas. */
.site-header { position: sticky; top: 0; z-index: 100; }
.nav {
  background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  display: block; color: var(--ink-dim); font-size: 15px; font-weight: 500;
  padding: 9px 14px; border-radius: var(--radius-sm); transition: color .16s, background .16s;
}
.nav-links a:hover { color: var(--brand); background: var(--brand-lt); }
.nav-links a.active { color: var(--brand); font-weight: 600; }
.nav-links a.nav-cta {
  background: var(--brand); color: #fff; font-weight: 600; padding: 11px 18px; margin-left: 8px;
  box-shadow: var(--shadow-sm);
}
.nav-links a.nav-cta:hover { background: var(--brand-dk); color: #fff; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { background: linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 78%); border-bottom: 1px solid var(--border); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; padding: 68px 0 60px; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-sub { font-size: 1.13rem; color: var(--ink-dim); max-width: 60ch; margin-bottom: 30px; }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.hero-figure figcaption {
  margin-top: 12px; font-size: 13px; color: var(--ink-sub); display: flex; align-items: center; gap: 8px;
}
.hero-figure figcaption::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0;
}
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0; }
.hero-stat { background: #fff; padding: 22px 20px; }
.hero-stat-num { font-family: var(--head); font-size: 1.6rem; font-weight: 700; color: var(--brand); line-height: 1.1; display: block; }
.hero-stat-lbl { font-size: 13.5px; color: var(--ink-sub); margin-top: 6px; display: block; line-height: 1.4; }

/* ── Trust bar ─────────────────────────────────────────────────── */
.trust { border-bottom: 1px solid var(--border); background: #fff; }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; padding: 20px 0; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-dim); }
.trust-item strong { font-family: var(--head); color: var(--ink); font-size: 15.5px; }
.trust-ico {
  width: 30px; height: 30px; border-radius: 7px; background: var(--brand-lt); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-ico svg { width: 17px; height: 17px; }

/* ── Grilles & cartes ──────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card:hover { border-color: var(--border-hi); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card-ico {
  width: 42px; height: 42px; border-radius: 9px; background: var(--brand-lt); color: var(--brand);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.card-ico svg { width: 22px; height: 22px; }
.card-plain:hover { transform: none; box-shadow: none; border-color: var(--border-hi); }

/* ── Produits ──────────────────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prod-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s;
  color: inherit;
}
.prod-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-3px); color: inherit; }
.prod-media { aspect-ratio: 16 / 10; background: var(--bg-alt); border-bottom: 1px solid var(--border); overflow: hidden; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.prod-card:hover .prod-media img { transform: scale(1.035); }
.prod-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.prod-series { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-sub); margin-bottom: 10px; line-height: 1.45; }
.prod-title { font-family: var(--head); font-size: 1.06rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; line-height: 1.3; }
.prod-title .model { color: var(--brand); }
.prod-desc { font-size: 14.5px; color: var(--ink-dim); margin: 0 0 16px; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--brand-dk);
  background: var(--brand-lt); border: 1px solid var(--brand-lt2); border-radius: 5px; padding: 4px 9px;
}
.chip-plain { background: var(--bg-alt); border-color: var(--border); color: var(--ink-dim); }
.prod-media-line { font-size: 13.5px; color: var(--ink-sub); padding-top: 13px; border-top: 1px solid var(--border); display: flex; gap: 7px; }
.prod-media-line b { color: var(--ink-dim); font-weight: 600; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-size: 12px; color: var(--ink-dim); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 100px; padding: 3px 10px; }

/* Filtres de catégorie */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }
.filters button {
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--ink-dim);
  background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 9px 17px; cursor: pointer;
  transition: all .16s;
}
.filters button:hover { border-color: var(--brand); color: var(--brand); }
.filters button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* ── Tableaux ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
table.spec caption { text-align: left; padding: 16px 20px; font-weight: 600; font-family: var(--head); border-bottom: 1px solid var(--border); }
table.spec th, table.spec td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.spec thead th { background: var(--bg-alt); font-family: var(--head); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody tr:nth-child(even) { background: #FBFCFE; }
table.spec td:first-child { font-weight: 500; color: var(--ink-dim); width: 38%; }
table.spec td.val { font-family: var(--mono); font-size: 14.5px; color: var(--ink); }
table.spec td.note { color: var(--ink-sub); font-size: 13.5px; }
.pending { color: #A4620A; background: #FFF8EC; border: 1px dashed #E8C07A; border-radius: 5px; padding: 2px 8px; font-size: 13px; font-family: var(--sans); white-space: nowrap; }

/* ── Galerie produit ───────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gallery-main { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); aspect-ratio: 3 / 2; position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 92px; height: 68px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg-alt); cursor: pointer; transition: border-color .16s, box-shadow .16s;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-lt2); }

/* ── Bloc réponse directe (AEO) ────────────────────────────────── */
.answer {
  background: var(--brand-lt); border: 1px solid var(--brand-lt2); border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: 22px 26px; margin: 26px 0;
}
.answer .answer-tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 9px; display: block;
}
.answer p { margin: 0; font-size: 15.5px; color: var(--ink); }

/* ── Listes techniques ─────────────────────────────────────────── */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 17px; height: 17px; border-radius: 50%;
  background: var(--green-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B7A50'%3E%3Cpath d='M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5-5L12.6 5z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.hash-list { list-style: none; padding: 0; margin: 0; }
.hash-list li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.hash-list li::before { content: '№'; position: absolute; left: 0; color: var(--tech); font-family: var(--mono); font-size: 13px; top: .12em; }

/* ── Étapes / process ──────────────────────────────────────────── */
.steps { display: grid; gap: 18px; counter-reset: st; }
/* 三列步骤布局用「类」而非内联 grid-template-columns。
   原因：内联样式优先级高于样式表，会把下方 @media 断点整段压掉 —— 手机端
   仍按 3 列排版并横向溢出（technologie / gas-pulse 两页的实际缺陷）。
   minmax(0,1fr) 而非 1fr：允许列宽收缩到内容以下，避免宽内容撑破网格。
   同理，.photo-strip 亦不再接受内联列定义。 */
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px 24px 74px; }
.step::before {
  counter-increment: st; content: counter(st); position: absolute; left: 24px; top: 24px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 700; font-size: 15px;
}
.step h3 { margin-bottom: .3em; }
.step p:last-child { margin-bottom: 0; }
.step-meta { font-family: var(--mono); font-size: 13px; color: var(--brand); display: block; margin-bottom: 2px; }

/* ── KPI produit ───────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(var(--kpi-n, 3), 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kpi { background: #fff; padding: 22px 24px; }
.kpi-val { font-family: var(--head); font-size: 1.32rem; font-weight: 700; color: var(--brand); margin-bottom: 5px; }
.kpi-lbl { font-size: 13.5px; color: var(--ink-sub); line-height: 1.45; }

/* ── Encadré ───────────────────────────────────────────────────── */
.note {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--tech);
  border-radius: var(--radius); padding: 18px 22px; font-size: 15px; color: var(--ink-dim); margin-top: 22px;
}
.note strong { color: var(--ink); }
.note-warn { border-left-color: #D98B1E; background: #FFFCF6; }
.note-green { border-left-color: var(--green); background: #F7FCFA; }


/* ── Bandeau CTA ───────────────────────────────────────────────── */
.cta-band { background: var(--brand); color: #fff; border-radius: var(--radius-lg); padding: 46px 48px; }
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); margin-bottom: 0; }
.cta-band .btn-primary { background: #fff; color: var(--brand); }
.cta-band .btn-primary:hover { background: var(--brand-lt); color: var(--brand-dk); }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.cta-band-inner { display: flex; justify-content: space-between; align-items: center; gap: 36px; flex-wrap: wrap; }
.cta-band-inner > div:first-child { max-width: 62ch; }
.cta-band-meta { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 14px; }

/* ── Formulaire ────────────────────────────────────────────────── */
.form-layout { display: grid; grid-template-columns: 1.35fr .85fr; gap: 40px; align-items: start; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 34px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .req { color: #C02626; }
.field .hint { font-size: 13px; color: var(--ink-sub); font-weight: 400; margin-left: 6px; }
.input, .select, .textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color .16s, box-shadow .16s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-lt); }
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%2348566B'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2348566B' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.is-invalid { border-color: #C02626 !important; box-shadow: 0 0 0 3px #FDECEC !important; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-dim); }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand); }
.form-error { display: none; background: #FDECEC; border: 1px solid #F3C6C6; color: #8E2020; border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14.5px; margin-bottom: 18px; }
.form-success { display: none; background: var(--green-lt); border: 1px solid #BFE5D4; border-radius: var(--radius); padding: 26px 28px; }
.form-success h3 { color: var(--green); margin-bottom: .4em; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-meta { font-size: 13.5px; color: var(--ink-sub); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.counter { font-size: 12.5px; color: var(--ink-sub); text-align: right; margin-top: 5px; font-family: var(--mono); }

/* ── Bloc coordonnées ──────────────────────────────────────────── */
.contact-list { display: grid; gap: 20px; }
.contact-item { display: flex; gap: 14px; }
.contact-item .ico { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-lt); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-item .ico svg { width: 18px; height: 18px; }
.contact-item dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-sub); font-weight: 600; margin-bottom: 3px; }
.contact-item dd { margin: 0; font-size: 15px; color: var(--ink-dim); line-height: 1.55; }

/* ── Bandeau de confiance (fabricant) ──────────────────────────── */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-strip figure { margin: 0; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.photo-strip figcaption { font-size: 13.5px; color: var(--ink-sub); margin-top: 9px; }

/* ── Pied de page ──────────────────────────────────────────────── */
.footer { background: var(--bg-alt); border-top: 1px solid var(--border); margin-top: 0; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 30px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--ink-sub); max-width: 34ch; }
/* Titres de colonnes du pied de page : h3 et non h4 — la page n'a pas de h3
   entre le dernier h2 et le pied de page, et sauter un niveau rompt la
   navigation par titres des lecteurs d'écran. */
.footer h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); margin: 0 0 14px; font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--ink-dim); font-size: 14.5px; }
.footer a:hover { color: var(--brand); }
.footer-contact dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-sub); margin-bottom: 2px; }
.footer-contact dd { margin: 0 0 13px; font-size: 14.5px; color: var(--ink-dim); line-height: 1.5; }
.footer-bottom {
  border-top: 1px solid var(--border); max-width: var(--wrap); margin: 0 auto;
  padding: 20px 24px 34px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-sub);
}
.footer-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-tags span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-sub); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; background: #fff; }

/* ── Boutons flottants : consultation rapide + WhatsApp ────────── */
/* Pile ancrée en bas à droite. Le conteneur porte pointer-events:none
   pour ne jamais intercepter un clic destiné au contenu sous-jacent :
   seuls les boutons eux-mêmes sont cliquables (zone morte = 0). */
.fab-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 92;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.fab-stack > * { pointer-events: auto; }
/* Le bandeau cookies est bien plus large que la pile : on remonte celle-ci
   de la hauteur réellement mesurée du bandeau (--cookie-h, posée par
   site.js) afin d'écarter tout recouvrement à toutes les largeurs. */
body.cookie-open .fab-stack { bottom: calc(var(--cookie-h, 0px) + 20px); }

.fab {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid transparent; border-radius: 100px; padding: 12px 18px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; line-height: 1;
  box-shadow: var(--shadow-lg); cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.fab svg { width: 20px; height: 20px; flex: 0 0 auto; }
.fab:hover { transform: translateY(-2px); }
.fab-ask { background: var(--brand); color: #fff; }
.fab-ask:hover { background: var(--brand-dk); color: #fff; }
.fab-wa { background: var(--green); color: #fff; }
.fab-wa:hover { background: #095F3E; color: #fff; }

/* Réserve d'espace en pied de page : sans elle, la pile recouvrirait la ligne
   « © … / Politique de confidentialité » et les tags.
   Bureau → on libère la marge droite de la ligne de pied de page.
   Mobile / tablette → l'élément vide .fab-clearance placé en fin de <footer>
   réserve la hauteur ; on n'utilise PAS de padding sur .footer-bottom car
   celui-ci est réinitialisé par le raccourci `padding` d'un @media situé plus
   bas dans la feuille (≤680px), ce qui annulait purement et simplement la
   réserve. */
@media (min-width: 941px) { .footer-bottom { padding-right: 236px; } }
.fab-clearance { height: 0; }
@media (max-width: 940px) { .fab-clearance { height: 128px; } }

/* ── Fenêtre de consultation rapide ────────────────────────────── */
.qa {
  border: none; padding: 0; margin: auto; background: transparent;
  width: calc(100% - 32px); max-width: 520px;
  max-height: calc(100vh - 32px); border-radius: var(--radius-lg);
}
.qa::backdrop { background: rgba(14,23,38,.52); }
.qa-inner {
  position: relative; background: #fff; border-radius: var(--radius-lg);
  padding: 30px 30px 26px; overflow-y: auto; max-height: calc(100vh - 32px);
}
.qa h2 { font-size: 1.35rem; margin: 0 0 8px; padding-right: 36px; }
.qa-lead { font-size: 14.5px; color: var(--ink-dim); margin: 0 0 20px; }
.qa-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; background: #fff;
  color: var(--ink-dim); font-size: 19px; line-height: 1; cursor: pointer;
}
.qa-close:hover { background: var(--bg-soft); color: var(--ink); }
.qa .textarea { min-height: 104px; resize: vertical; }
.qa-alt { font-size: 13.5px; color: var(--ink-sub); margin: 16px 0 0; }
.qa-done { display: none; }
.qa-done.show { display: block; }
.qa-done h3 { color: var(--green); margin: 0 0 .5em; }
@media (max-width: 480px) { .qa-inner { padding: 26px 20px 22px; } }

/* ── Bandeau cookies ───────────────────────────────────────────── */
.cookie-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 95;
  width: calc(100% - 36px); max-width: 940px; background: #fff; border: 1px solid var(--border-hi);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px 24px;
  display: none; gap: 20px; align-items: center; flex-wrap: wrap;
}
.cookie-bar.show { display: flex; }
.cookie-bar p { margin: 0; font-size: 14.5px; color: var(--ink-dim); flex: 1; min-width: 260px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Fil d'Ariane ──────────────────────────────────────────────── */
.crumbs { font-size: 13.5px; color: var(--ink-sub); padding: 22px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: 7px; color: var(--border-hi); }
.crumbs a { color: var(--ink-sub); }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ── Cibles tactiles (WCAG 2.2 SC 2.5.8 — 24 × 24 CSS px) ────────
   Les liens de pied de page et de fil d'Ariane mesuraient 17–19 px de haut :
   sous la souris cela ne se voit pas, au doigt sur un écran de téléphone on
   rate la cible. On ajoute du rembourrage vertical plutôt que d'agrandir le
   texte, afin de ne pas modifier la typographie ni les retours à la ligne. */
.footer a { display: inline-block; padding: 3px 0; }
.footer li { margin-bottom: 5px; }
.footer-bottom a { display: inline-block; padding: 3px 0; }
.crumbs a { display: inline-block; padding: 3px 0; }
.contact-item dd a { display: inline-block; padding: 3px 0; }
/* La case à cocher mesure 18 px, mais c'est le <label> entier qui est
   cliquable : c'est lui la cible. On garantit donc 24 px de hauteur sur la
   ligne, sans grossir la case (qui deviendrait visuellement lourde). */
.consent { min-height: 24px; }

/* ── Divers ────────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.side-col { display: grid; grid-template-columns: 1.45fr .85fr; gap: 44px; align-items: start; }
/* 网格/弹性子项默认 min-width:auto：宽表格会把整列撑到比视口还宽，反而使
   .table-wrap 自身的 overflow-x:auto 失效（容器被撑得与内容同宽，无内容可滚）。
   归零后子项可收缩，宽表改由 .table-wrap 内部横向滚动 —— 修复移动端整页溢出。
   实测：about.html / technologie.html 在 390px 下由 522px 溢出降为 0。 */
.two-col > *, .side-col > *, .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.form-layout > * { min-width: 0; }

/* 产品页英雄区 H1（.side-col 内的窄列，列宽上限 = --wrap 1200px 的 .85fr 列 ≈ 427px）。
   主题的 h1 clamp 由「视口」驱动，桌面端可达 48px；而本 H1 身处「列宽」驱动的窄栏，
   两者增速不一致 —— 法语长词 d'approvisionnement（9.87em）在 941–1280px 区间
   会撑破窄列，造成整页横向滚动（实测 +90px @941px，H1 被拉成 7 行）。
   故此处改用受列宽约束的字号；取值由两个适配阈值反推：
     · 上限 2.6rem = 41.6px < 427px ÷ 9.87em = 43.3px（最宽列仍能整词容纳）
     · 斜率 1rem + 1.6vw ⇒ 941px 时 31.1px < 331px ÷ 9.87em = 33.5px（最窄两栏亦然）
   ── 断点与 .side-col 的塌陷断点（940px）严格对齐：≤940px 为单列满宽，列宽充裕
   （768px 时列宽 720px，可容 73px 字号），沿用主题字号即可，无需压缩。
   此举使「仅原本破损的两栏区间发生变化」，移动端与平板渲染结果与修复前一致。
   注：原实现把该尺寸写成内联样式 `clamp(1.5rem,1.1rem+1.6vw,2.2rem)`，因缺少
   calc() 导致混单位表达式非法、整条声明被静默丢弃（并会压掉 @media 断点），
   实际从未生效。改为样式表规则后同时消除该隐患。 */
@media (min-width: 941px) {
  .prod-h1 { font-size: clamp(1.85rem, calc(1rem + 1.6vw), 2.6rem); }
}
.sticky-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.notice-pending { background: #FFF8EC; border: 1px solid #E8C07A; border-radius: var(--radius); padding: 16px 20px; font-size: 14.5px; color: #7A5008; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  :root { --nav-h: 64px; }
  .nav-burger { display: flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: var(--nav-h); display: none;
    flex-direction: column; align-items: stretch; gap: 0; background: #fff;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: 10px 16px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav-links a.nav-cta { margin: 10px 0 0; text-align: center; }
  .nav-inner { position: relative; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 48px; }
  .hero-figure { order: -1; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-4, .kpis { grid-template-columns: repeat(2, 1fr); }
  .two-col, .side-col, .form-layout { grid-template-columns: 1fr; gap: 30px; }
  .steps-3 { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 36px 28px; }
  .sec { padding: 52px 0; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .sec { padding: 44px 0; }
  .hero-stats { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4, .kpis, .prod-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 18px 24px; }
  .footer-bottom { padding: 18px 18px 28px; }
  .photo-strip { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* la pile de boutons flottants se resserre sur petit écran */
  .fab-stack { right: 14px; }
  .fab { padding: 11px 15px; font-size: 13.5px; gap: 8px; }
  .fab svg { width: 18px; height: 18px; }
  .gallery-thumbs button { width: 76px; height: 58px; }
  .crumbs { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .nav, .footer, .wa, .cookie-bar, .btn { display: none !important; }
  body { font-size: 12pt; }
}

/* ══════════════════════════════════════════════════════════════════
   CLASSES UTILITAIRES ISSUES DES STYLES EN LIGNE D'ORIGINE
   ══════════════════════════════════════════════════════════════════
   Ces classes remplacent les 121 styles en ligne du gabarit (44 valeurs
   distinctes, 935 déclarations). Un style en ligne l'emporte sur
   l'INTÉGRALITÉ de la feuille de style — y compris sur une règle écrite
   dans un @media. Pour reproduire exactement la cascade d'avant, ce bloc
   est donc placé APRÈS tous les @media : à spécificité égale, l'ordre de
   source est le seul moyen de garantir le même résultat.

   Deux emplacements réels en dépendent (détectés par _css_conflicts.py,
   qui fait échouer verify_fr.py s'ils régressent) :
     • 404.html      : <section class="sec hero-pad"> — les 80px de padding
       vertical sont conservés ; sinon @media (max-width:940px) .sec les
       ramènerait à 52px, puis à 44px sous 680px.
     • products.html : <div class="wrap section-tail"> — les 64px de padding
       bas sont conservés ; sinon @media (max-width:680px) .wrap les
       ramènerait à 18px.

   Corollaire à connaître : une règle @media ne peut PAS surcharger ces
   classes. Pour adapter un de ces espacements en responsive, créer une
   classe dédiée plutôt que réutiliser un utilitaire.

   (Les commentaires « Auparavant portées par des styles en ligne » qui
   suivaient chaque sous-bloc ont été fusionnés ici : la raison est
   commune.) */

/* ── FAQ (accordéon) ─────────────────────────────────────────────
   Portées avant par des styles en ligne sur <details>/<summary>/<p>. */
.faq-item { padding: 20px 24px; }
.faq-q { cursor: pointer; font-weight: 600; }
.faq-a { margin: 14px 0 0; }
.faq-lead { margin: 0 0 18px; }
.faq-grid { display: grid; gap: 16px; margin-top: 22px; }

/* ── Espacement ─────────────────────────────────────────────────── */
.mt-0  { margin-top: 0 }      .mt-12 { margin-top: 12px }
.mt-14 { margin-top: 14px }   .mt-16 { margin-top: 16px }
.mt-18 { margin-top: 18px }   .mt-20 { margin-top: 20px }
.mt-22 { margin-top: 22px }   .mt-24 { margin-top: 24px }
.mt-26 { margin-top: 26px }   .mt-28 { margin-top: 28px }
.mt-34 { margin-top: 34px }   .mt-36 { margin-top: 36px }
.mt-44 { margin-top: 44px }   .mt-46 { margin-top: 46px }
.mb-0  { margin-bottom: 0 }   .mb-22 { margin-bottom: 22px }
.mb-26 { margin-bottom: 26px } .mb-34 { margin-bottom: 34px }
.m-0   { margin: 0 }
.mx-auto { margin-left: auto; margin-right: auto }
.lead-center { margin: 0 auto 30px }
.chips-block { margin: 18px 0 }

/* ── Blocs ──────────────────────────────────────────────────────── */
.card-pad { padding: 28px }
.hero-pad { padding: 80px 0 }
.section-tail { padding-bottom: 64px }
.pm-flush { border: 0; padding-top: 0 }
.spec-divider { margin-bottom: 0; padding-top: 12px; border-top: 1px solid var(--border) }
.stack { display: flex; flex-direction: column }
.prose { max-width: 80ch }
.prose-narrow { max-width: 820px }
.tag-gap { gap: 10px }
.center-x { justify-content: center }

/* ── Typographie et couleur ─────────────────────────────────────── */
.lead-xs  { font-size: 1rem }
.lead-sm  { font-size: 1.02rem }
.lead-md  { font-size: 1.05rem }
.lead-lg  { font-size: 1.25rem }
.txt-left { text-align: left }
.fw-400 { font-weight: 400 }
.link-plain { color: inherit }
.card-link { display: block; color: inherit }