/* ════════════════════════════════════════════════════════════
   ÆNIX Robotics — composants partagés
   Méga-menu, pages produit, configurateur, partenaires.
   S'appuie sur les tokens et utilitaires de styles.css.
   ════════════════════════════════════════════════════════════ */

/* ─── Méga-menu « Robots » ─────────────────────────────────── */
.nav-drop { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop .chev { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .45s var(--expo); }
.nav.mega-open { background: var(--white); border-bottom-color: var(--frost); }
.nav-drop.is-open { color: var(--indigo); }
.nav-drop.is-open .chev { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 1px solid var(--frost);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--expo), visibility 0s linear .6s;
}
.mega.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--expo), visibility 0s; }
.mega { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
.mega-inner { max-width: min(1560px, 100%); margin-inline: auto; padding: 36px var(--gutter) 44px; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 52px; }
.mega-intro { display: grid; gap: 14px; align-content: start; padding-right: 32px; border-right: 1px solid var(--frost); }
.mega-intro h3 { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 300; }
.mega-intro p { font-size: 15px; line-height: 1.5; color: var(--steel); }
.mega-intro .link-arrow { font-size: 15px; margin-top: 4px; }
.mega-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-content: start; }
.mega-card { display: grid; gap: 12px; padding: 10px; border-radius: var(--r); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--ease), transform .7s var(--expo), background-color .3s var(--ease); }
.mega.is-open .mega-card { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 120ms), calc(var(--i, 0) * 45ms + 120ms), 0s; }
.mega-card:hover { background: var(--mist); }
.mega-group { grid-column: 1 / -1; margin: 12px 0 0; padding: 16px 10px 0; border-top: 1px solid var(--frost); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.mega-group.mega-range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; text-transform: none; letter-spacing: 0; }
.mega-range .mg-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.mega-range .mg-desc { font-size: 15px; color: var(--steel); }
.mega-range .link-arrow { margin-left: auto; font-size: 15px; }
.mega-green { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 12px; padding: 16px 10px 0; border-top: 1px solid var(--frost); }
.mg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; }
.mega-green .mg-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.mega-green .link-arrow { font-size: 15px; }
.mg-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mg-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 10px; border-radius: var(--r); transition: background-color .3s var(--ease); }
.mg-row:hover { background: var(--mist); }
.mg-row:hover .mc-img img { transform: scale(1.07); }
.mg-row b { font-weight: 400; font-size: 15px; line-height: 1.25; color: var(--ink); }
@media (max-width: 1279px) { .mg-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc-img { aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.mc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--expo); }
.mega-card:hover .mc-img img { transform: scale(1.07); }
.mega-card b { font-weight: 400; font-size: 15px; color: var(--ink); line-height: 1.2; }
.mega-card small { display: block; font-size: 13px; color: var(--slate); margin-top: 2px; }
.mega-card:hover b { color: var(--indigo); }

.brand-lg img { height: 56px; }
.mobile-menu .mm-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); padding: 20px 0 4px; }
.mobile-menu nav a.mm-sub { font-size: 22px; padding: 10px 0; }

/* ─── Sous-navigation produit ──────────────────────────────── */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 90;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-block: 1px solid var(--frost);
  transition: top .6s var(--expo);
}
html.nav-up .subnav { top: 0; }
.subnav-inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); height: 56px; display: flex; align-items: center; gap: 24px; }
.subnav-name { font-size: 14px; font-weight: 400; white-space: nowrap; color: var(--ink); }
.subnav-name span { color: var(--slate); }
.subnav-links { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a { position: relative; padding: 8px 12px; font-size: 13px; color: var(--slate); white-space: nowrap; transition: color .3s var(--ease); }
.subnav-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--indigo); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--expo); }
.subnav-links a:hover { color: var(--ink); }
.subnav-links a.is-active { color: var(--ink); }
.subnav-links a.is-active::after { transform: scaleX(1); }
.subnav .btn { flex: none; opacity: 0; transform: translate3d(8px, 0, 0); pointer-events: none; transition: opacity .4s var(--ease), transform .6s var(--expo), color .35s, background-color .35s; }
.subnav.show-cta .btn { opacity: 1; transform: none; pointer-events: auto; }
.subnav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.subnav-progress i { display: block; height: 100%; background: var(--indigo); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ─── Hero produit ─────────────────────────────────────────── */
.p-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(56px, 7vw, 96px); overflow: hidden; }
.p-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.p-text { display: grid; gap: 22px; justify-items: start; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--slate); }
.crumbs a { transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--indigo); }
.crumbs i { font-style: normal; color: var(--smoke); }
.crumbs span { color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p-title { font-size: clamp(46px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.035em; font-weight: 300; }
.p-title small { display: block; font-size: 14px; letter-spacing: .32em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; font-weight: 400; }
.p-tagline { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: var(--smoke); max-width: 26ch; }
.p-desc { font-size: 17px; line-height: 1.5; color: var(--steel); max-width: 50ch; }

.qs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: 100%; border-top: 1px solid var(--frost); }
.qs > div { padding: 16px 16px 0 0; min-width: 0; }
.qs > div + div { padding-left: 16px; border-left: 1px solid var(--frost); }
.qs dt { font-size: 12px; color: var(--slate); margin-bottom: 6px; }
.qs dd { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.qs dd small { font-size: 14px; letter-spacing: 0; color: var(--slate); margin-left: 3px; }

.p-visual { position: relative; }
.p-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--mist); border: 1px solid var(--frost); }
.p-media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.p-media.is-landscape img { object-position: 50% 50%; }
.js .p-media[data-hero-in] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.4s var(--expo); transition-delay: .25s; }
.js.hero-ready .p-media[data-hero-in] { clip-path: inset(0 0 0 0 round var(--r)); }
.p-chip {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--white); border: 1px solid var(--frost); border-radius: var(--r);
  font-size: 13px; color: var(--steel); max-width: 260px;
  animation: float 6s ease-in-out infinite;
}
.p-chip b { display: block; font-weight: 400; color: var(--ink); font-size: 14px; }
.p-chip.bl { left: -16px; bottom: 32px; }
.p-chip.tr { right: -16px; top: 32px; animation-delay: -3s; }
@keyframes float { 50% { transform: translate3d(0, -8px, 0); } }

/* ─── Cartes « ledger » : variantes ────────────────────────── */
.sol-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-card.compact { min-height: 0; gap: 12px; }
.sol-card.compact .sol-top { margin-bottom: 0; padding-bottom: 20px; }
.sol-card.compact .h3 { font-size: 22px; }
.sol-card .card-stat { font-size: clamp(34px, 3.2vw, 44px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.sol-card .card-stat small { font-size: 15px; color: var(--slate); letter-spacing: 0; margin-left: 4px; }
.sol-card .num { font-size: 13px; color: var(--smoke); letter-spacing: .04em; }
.sol-card.is-featured { background: var(--wash); }
.sol-card.is-cta { background: var(--mist); justify-content: flex-end; }
div.sol-card { cursor: default; }

/* ─── Section split (image + texte) ────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.top { align-items: start; }
.split.reverse > .split-media { order: 2; }
.split-text { display: grid; gap: 20px; justify-items: start; }
.split-media { position: relative; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; border-radius: var(--r); background: var(--mist); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media .p-chip { left: 16px; bottom: 16px; }

/* Révélation en rideau */
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path 1.3s var(--expo); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--r)); }
.js [data-reveal="clip"] > img { transform: scale(1.18); transition: transform 1.8s var(--expo); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal="clip"].is-in > img { transform: none; }

/* ─── Liste clé / valeur ───────────────────────────────────── */
.kv { width: 100%; border-top: 1px solid var(--frost); }
.kv > div { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--frost); font-size: 15px; }
.kv dt { color: var(--slate); transition: color .3s var(--ease); }
.kv dd { color: var(--ink); text-align: right; }
.kv > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--indigo); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--expo); }
.kv > div:hover::after { transform: scaleX(1); }
.kv > div:hover dt { color: var(--indigo); }

.spec-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.spec-group + .spec-group { margin-top: 0; }
.spec-group h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); font-weight: 400; padding: 32px 0 12px; }
.spec-groups .spec-group:nth-child(-n+2) > h3:first-child { padding-top: 0; }
.spec-note { margin-top: 24px; font-size: 13px; color: var(--slate); max-width: 80ch; }

/* ─── Barres de rendement ──────────────────────────────────── */
.bars { border-top: 1px solid var(--frost); }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px 24px; padding: 20px 0; border-bottom: 1px solid var(--frost); }
.bar-row span { color: var(--steel); font-size: 16px; }
.bar-row b { font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.bar-row b small { font-size: 14px; color: var(--slate); letter-spacing: 0; }
.bar-row .bar { grid-column: 1 / -1; height: 2px; background: var(--frost); overflow: hidden; }
.bar-row .bar i { display: block; height: 100%; background: var(--indigo); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--expo); transition-delay: calc(var(--d, 0) * 140ms + 200ms); }
.bars.is-in .bar i { transform: scaleX(var(--v, 1)); }

/* ─── Monument chiffré ─────────────────────────────────────── */
.monument { display: grid; gap: 12px; align-content: center; justify-items: start; padding: clamp(32px, 4vw, 56px); background: var(--mist); border-radius: var(--r); min-height: 100%; }
.monument .big { font-size: clamp(88px, 12vw, 180px); line-height: .9; letter-spacing: -0.05em; color: var(--ink); }
.monument .big small { font-size: .28em; letter-spacing: -0.01em; color: var(--indigo); margin-left: 8px; }
.monument p { color: var(--steel); max-width: 34ch; }
.band .monument, .band .screen-stage, .band .path-stage { background: var(--white); border: 1px solid var(--frost); }

/* ─── Mosaïque d'images ────────────────────────────────────── */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.m-item { position: relative; grid-column: span 4; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.m-item.w5 { grid-column: span 5; }
.m-item.w6 { grid-column: span 6; }
.m-item.w7 { grid-column: span 7; }
.m-item.w8 { grid-column: span 8; }
.m-item.w12 { grid-column: span 12; aspect-ratio: 21 / 9; }
.m-item.tall { grid-row: span 2; aspect-ratio: auto; }
.m-item.fill { aspect-ratio: auto; }
.m-item.fill img { position: absolute; inset: 0; }
.m-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--expo); }
.m-item:hover img { transform: scale(1.06); }
.m-cap { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--ink); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transform: translate3d(0, 6px, 0); opacity: 0; transition: opacity .4s var(--ease), transform .6s var(--expo); }
.m-cap::before { content: ""; width: 5px; height: 5px; background: var(--indigo); border-radius: 1px; }
.m-item:hover .m-cap, .m-item:focus-within .m-cap { opacity: 1; transform: none; }
@media (hover: none) { .m-cap { opacity: 1; transform: none; } }

/* ─── Étapes horizontales ──────────────────────────────────── */
.hsteps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; padding-top: 44px; }
.hsteps-rail { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--frost); overflow: hidden; }
.hsteps-rail i { position: absolute; inset: 0; background: var(--indigo); transform-origin: left; transform: scaleX(0); transition: transform 2s var(--expo) .2s; }
.hsteps.is-in .hsteps-rail i { transform: scaleX(1); }
.hstep { position: relative; display: grid; gap: 10px; align-content: start; padding-right: 8px; }
.hstep::before { content: ""; position: absolute; top: -44px; left: 0; width: 15px; height: 15px; background: var(--white); border: 1.5px solid var(--lavender); border-radius: var(--r); transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .8s var(--expo); transition-delay: calc(var(--i, 0) * 260ms + 300ms); }
.band .hstep::before { background: var(--mist); }
.hsteps.is-in .hstep::before { background: var(--indigo); border-color: var(--indigo); transform: rotate(45deg); }
.hstep .num { font-size: 13px; color: var(--smoke); }
.hstep h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 300; }
.hstep p { color: var(--steel); font-size: 15px; line-height: 1.45; }

/* ─── FAQ ──────────────────────────────────────────────────── */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-wrap .section-head { position: sticky; top: calc(var(--nav-h) + 80px); margin-bottom: 0; }
.faq { border-top: 1px solid var(--frost); }
.faq details { border-bottom: 1px solid var(--frost); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.3; letter-spacing: -0.01em; transition: color .3s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--indigo); }
.faq .plus { position: relative; width: 14px; height: 14px; flex: none; }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--indigo); transition: transform .5s var(--expo); }
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq .faq-a { overflow: hidden; }
.faq .faq-a p { padding-bottom: 24px; color: var(--steel); max-width: 64ch; }
.faq .faq-a a { color: var(--indigo); }

/* ─── Encadré note ─────────────────────────────────────────── */
.note { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; background: var(--wash); border: 1px solid var(--lilac); border-radius: var(--r); color: var(--steel); font-size: 15px; }
.note .icon { width: 22px; height: 22px; margin-top: 1px; }
.note strong { font-weight: 400; color: var(--ink); }
.note a { color: var(--indigo); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.note-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.note-row > div { display: grid; gap: 4px; }
.note-row h3, .note-row h2 { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; color: var(--ink); }

/* ─── Gamme (grille de robots) ─────────────────────────────── */
.range-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.range-grid .robot { width: auto; }
.range-grid .robot-name { font-size: 22px; }
.robot.is-current { border-color: var(--indigo); }
.robot-media .tag { position: absolute; left: 12px; top: 12px; }
a.robot { color: inherit; }

/* ─── Écran publicitaire animé ─────────────────────────────── */
.screen-stage { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); background: var(--mist); border-radius: var(--r); min-height: 100%; }
.screen { position: relative; width: min(280px, 70%); aspect-ratio: 9 / 16; background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); padding: 10px; }
.screen-view { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background: var(--wash); }
.screen-slide { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 18px; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s var(--ease), transform .8s var(--expo); }
.screen-slide.is-on { opacity: 1; transform: none; }
.screen-slide small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.screen-slide strong { font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; letter-spacing: -0.02em; }
.screen-slide.s1 { background: var(--indigo); color: #fff; }
.screen-slide.s2 { background: var(--wash); color: var(--ink); }
.screen-slide.s3 { background: var(--deep-violet); color: #fff; }
.screen-slide .lines { display: grid; gap: 6px; }
.screen-slide .lines i { display: block; height: 4px; border-radius: 1px; background: currentColor; opacity: .25; }
.screen-bar { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background: var(--frost); overflow: hidden; }
.screen-bar i { display: block; height: 100%; background: var(--indigo); transform-origin: left; transform: scaleX(0); }
.screen-caption { margin-top: 16px; font-size: 12px; color: var(--smoke); }

/* ─── Trajectoire animée (PURE ONE LITE) ───────────────────── */
.path-stage { position: relative; aspect-ratio: 1 / 1; background: var(--mist); border-radius: var(--r); overflow: hidden; }
.path-stage svg { width: 100%; height: 100%; }
.path-stage .room { fill: none; stroke: var(--deep-violet); stroke-width: 1.5; }
.path-stage .guide { fill: none; stroke: var(--lilac); stroke-width: 1; stroke-dasharray: 4 6; }
.path-stage .route-bg { fill: none; stroke: var(--wash); stroke-width: 22; stroke-linejoin: round; stroke-linecap: round; }
.path-stage .route { fill: none; stroke: var(--indigo); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.path-stage.is-in .route { animation: route-draw 9s var(--ease) infinite; }
.path-stage.is-in .route-bg { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: route-draw 9s var(--ease) infinite; }
@keyframes route-draw { 0% { stroke-dashoffset: 2400; } 80%, 100% { stroke-dashoffset: 0; } }
.path-stage .bot { offset-path: path("M60 90 L340 90 L340 130 L100 130 L100 170 L340 170 L340 210 L100 210 L100 250 L340 250 L340 290 L60 290 Z"); offset-rotate: auto; offset-distance: 0%; }
.path-stage.is-in .bot { animation: bot-move 9s var(--ease) infinite; }
@keyframes bot-move { 0% { offset-distance: 0%; } 80%, 100% { offset-distance: 100%; } }
.path-stage .bot rect { fill: var(--indigo); }
.path-stage .bot path { fill: none; stroke: #fff; stroke-width: 1.6; }
.path-stage .base { fill: var(--white); stroke: var(--amethyst); }
.path-stage figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 12px; color: var(--slate); }

/* ─── Bandeau CTA flottant ─────────────────────────────────── */
.sticky-cta { position: fixed; right: 24px; bottom: 24px; z-index: 80; opacity: 0; transform: translate3d(0, 16px, 0); pointer-events: none; transition: opacity .4s var(--ease), transform .7s var(--expo), color .35s, background-color .35s; }
.sticky-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ─── Formulaires ──────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label, .field .label { font-size: 12px; color: var(--slate); }
.field .req { color: var(--indigo); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 14px; background: var(--white);
  border: 1px solid var(--frost); border-radius: var(--r);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--lilac); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--indigo); background: var(--mist); }
.choice-row { display: flex; gap: 8px; }
.choice { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; font-size: 14px; color: var(--steel); border: 1px solid var(--frost); border-radius: var(--r); cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:hover { border-color: var(--lavender); }
.choice:has(input:checked) { border-color: var(--indigo); background: var(--wash); color: var(--indigo); }
.choice:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--steel); line-height: 1.5; }
.consent input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--indigo); }
.consent a { color: var(--indigo); }
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status, .send-status { display: none; padding: 12px 16px; border-radius: var(--r); font-size: 14px; }
.form-status.show, .send-status.show { display: block; animation: step-in .5s var(--expo); }
.form-status.loading, .send-status.loading { background: var(--wash); color: var(--indigo); }
.form-status.success, .send-status.success { background: var(--mist); color: var(--ink); border: 1px solid var(--frost); }
.form-status.error, .send-status.error { background: #fdf3f2; color: #a3342a; border: 1px solid #f3d4d0; }
.form-status a, .form-status button, .send-status a, .send-status button { color: inherit; text-decoration: underline; font-weight: 400; }
.field-error { display: none; font-size: 13px; color: #a3342a; }
.field-error.show { display: block; }
.form-card { background: var(--white); color: var(--ink); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; }
.form-note { font-size: 12px; color: var(--slate); }

/* ─── Configurateur ────────────────────────────────────────── */
.cfg-page { padding-top: calc(var(--nav-h) + clamp(32px, 5vw, 64px)); }
.cfg { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cfg-aside { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 20px; justify-items: start; }
.cfg-aside .p-title { font-size: clamp(40px, 4.6vw, 64px); }
.cfg-track { width: 100%; margin-top: 12px; border-top: 1px solid var(--frost); counter-reset: q; }
.cfg-track li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--frost); font-size: 15px; color: var(--smoke); transition: color .4s var(--ease); }
.cfg-track li::before { counter-increment: q; content: counter(q, decimal-leading-zero); font-size: 12px; width: 22px; color: var(--smoke); }
.cfg-track li i { margin-left: auto; width: 14px; height: 14px; border: 1px solid var(--lilac); border-radius: var(--r); transition: background-color .4s, border-color .4s, transform .6s var(--expo); }
.cfg-track li.is-current { color: var(--ink); }
.cfg-track li.is-current::before { color: var(--indigo); }
.cfg-track li.is-current i { border-color: var(--indigo); transform: rotate(45deg); }
.cfg-track li.is-done { color: var(--steel); }
.cfg-track li.is-done i { background: var(--indigo); border-color: var(--indigo); }

.cfg-card { border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); overflow: hidden; }
.cfg-progress-track { height: 2px; background: var(--frost); }
.cfg-progress-fill { height: 100%; width: 16.67%; background: var(--indigo); transition: width .8s var(--expo); }
.cfg-progress-label { display: flex; justify-content: space-between; padding: 16px clamp(20px, 3vw, 32px) 0; font-size: 12px; color: var(--slate); }
.cfg-body { padding: 24px clamp(20px, 3vw, 32px) 32px; min-height: 420px; }
.cfg .step { display: none; }
.cfg .step.active { display: block; animation: step-in .7s var(--expo); }
@keyframes step-in { from { opacity: 0; transform: translate3d(24px, 0, 0); } }
.step-q { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 300; margin-bottom: 8px; outline: none; }
.step-hint { font-size: 14px; color: var(--slate); margin-bottom: 24px; }
.cfg fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.cfg fieldset:last-child { margin-bottom: 0; }
.sub-legend { display: block; font-size: 13px; color: var(--steel); margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt-grid.single { grid-template-columns: 1fr; }
.opt-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label.opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .5s var(--expo); }
label.opt:hover { border-color: var(--lavender); background: var(--mist); }
label.opt:active { transform: scale(.99); }
label.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.opt::after { content: ""; flex: none; margin-left: auto; width: 14px; height: 14px; border: 1px solid var(--lavender); border-radius: var(--r); background: var(--white); transition: background-color .3s, border-color .3s, transform .6s var(--expo); }
label.opt:has(input:checked) { border-color: var(--indigo); background: var(--wash); }
label.opt:has(input:checked)::after { background: var(--indigo); border-color: var(--indigo); transform: rotate(45deg); }
label.opt:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.opt-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--indigo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.opt-txt { display: grid; gap: 2px; }
.opt-txt .t { font-size: 15px; color: var(--ink); }
.opt-txt .s { font-size: 12px; color: var(--steel); }
.cfg .reveal { display: none; margin-top: 12px; padding: 16px; background: var(--mist); border-radius: var(--r); }
.cfg .reveal.show { display: block; animation: step-in .6s var(--expo); }
.slide-box { padding: 24px; background: var(--mist); border-radius: var(--r); }
.slide-val { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.slide-val output { font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; }
.slide-val small { color: var(--slate); font-size: 15px; }
.slide-range-lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--smoke); margin-top: 8px; }
.cfg input[type="range"]:disabled { opacity: .35; cursor: not-allowed; }
.precise-input { display: grid; gap: 6px; margin-top: 16px; }
.precise-input label { font-size: 13px; color: var(--steel); }
.precise-input input { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .3s; }
.precise-input input:focus { outline: none; border-color: var(--indigo); }
.cfg-nav { display: flex; justify-content: space-between; gap: 12px; padding: 0 clamp(20px, 3vw, 32px) 32px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled::before { display: none; }

#result { display: none; }
.res-hero { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px); background: var(--indigo); color: #fff; }
.res-hero .eyebrow { color: rgba(255,255,255,.75); }
.res-hero .eyebrow::before { background: #fff; }
.res-name { font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin: 12px 0 8px; outline: none; }
.res-desc { color: rgba(255,255,255,.82); max-width: 52ch; }
.res-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; fill: none; stroke: rgba(255,255,255,.18); stroke-dasharray: 8 10; animation: dash-flow 22s linear infinite; }
.res-hero > *:not(svg) { position: relative; z-index: 1; }
.res-body { display: grid; gap: 24px; padding: clamp(20px, 3vw, 32px); }
.robo-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 16px; border: 1px solid var(--frost); border-radius: var(--r); animation: step-in .8s var(--expo) both; animation-delay: calc(var(--i, 0) * 140ms); }
.robo-card .robo-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.robo-card .robo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--expo); }
.robo-card:hover .robo-img img { transform: scale(1.06); }
.robo-card .robo-main { display: grid; gap: 8px; align-content: start; }
.robo-need { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); }
.robo-card h3 { font-size: 24px; font-weight: 300; letter-spacing: -0.01em; }
.robo-desc { font-size: 14px; color: var(--steel); }
.robo-reason { font-size: 14px; color: var(--steel); padding: 12px 14px; background: var(--mist); border-radius: var(--r); }
.robo-link { display: inline-flex; align-items: center; gap: 8px; color: var(--indigo); font-size: 14px; }
.robo-alt { font-size: 13px; color: var(--slate); }
.robo-alt a { color: var(--indigo); }
.disclaimer { font-size: 13px; color: var(--steel); padding: 10px 14px; border-left: 2px solid var(--lavender); background: var(--mist); }
.res-block { display: grid; gap: 10px; }
.res-reason { font-size: 15px; color: var(--steel); padding: 16px; background: var(--wash); border-radius: var(--r); }
.lead-form { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--frost); }
.lead-form > p { color: var(--steel); }
.restart-link { justify-self: center; font-size: 13px; color: var(--slate); transition: color .3s; }
.restart-link:hover { color: var(--indigo); }

/* ─── Partenaires ──────────────────────────────────────────── */
.concept { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 16px; }
.concept-box { display: grid; gap: 14px; align-content: start; padding: 28px; border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); }
.concept-box h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.concept-box ul { display: grid; gap: 8px; }
.concept-box li { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -0.01em; }
.concept-box li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--smoke); }
.concept-box.is-aenix li::before { background: var(--indigo); }
.concept-box.is-result { background: var(--indigo); color: #fff; border-color: var(--indigo); align-content: center; }
.concept-box.is-result h3 { color: rgba(255,255,255,.88); }
.concept-box.is-result strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
.concept-sym { display: grid; place-items: center; font-size: 48px; font-weight: 300; color: var(--smoke); transition: transform 1s var(--expo), color .6s; }
.concept.is-in .concept-sym { transform: rotate(180deg); color: var(--indigo); }
.hybrid { display: grid; gap: 8px; }
.hybrid-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); }
.hybrid-row .icon { width: 28px; height: 28px; }
.hybrid-row b { display: block; font-weight: 400; color: var(--ink); }
.hybrid-row small { display: block; color: var(--slate); font-size: 13px; }
.hybrid-plus { justify-self: center; font-size: 22px; color: var(--smoke); }
.quote { padding-left: 20px; border-left: 2px solid var(--indigo); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.statement { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); max-width: 34ch; }
.statement em { font-style: normal; color: var(--indigo); }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.seg .sim-opt { padding: 12px 10px; font-size: 13px; color: var(--steel); border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); transition: border-color .3s, background-color .3s, color .3s; }
.seg .sim-opt:hover { border-color: var(--lavender); }
.seg .sim-opt.active { border-color: var(--indigo); background: var(--wash); color: var(--indigo); }
.p-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lilac); }
.p-results > div { padding: 18px 12px 4px 0; }
.p-results > div + div { padding-left: 16px; border-left: 1px solid var(--lilac); }
.p-results .r-num { font-size: clamp(32px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.p-results .r-lbl { font-size: 13px; color: var(--steel); margin-top: 6px; }
.cta-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.cta-split .cta-content { max-width: none; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mega { display: none; }
  .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .p-hero-inner, .split, .cfg, .faq-wrap, .cta-split { grid-template-columns: 1fr; }
  .split.reverse > .split-media { order: 0; }
  .p-visual { max-width: 560px; }
  .p-chip.bl { left: 12px; }
  .p-chip.tr { right: 12px; }
  .spec-groups { grid-template-columns: 1fr; }
  .spec-groups .spec-group:nth-child(2) h3 { padding-top: 32px; }
  .sol-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .hsteps-rail { display: none; }
  .hstep::before { top: -28px; }
  .cfg-aside, .faq-wrap .section-head { position: static; }
  .cfg-track { display: none; }
  .concept { grid-template-columns: 1fr; }
  .concept-sym { font-size: 36px; }
  .mosaic .m-item, .mosaic .m-item.w5, .mosaic .m-item.w6, .mosaic .m-item.w7, .mosaic .m-item.w8 { grid-column: span 6; }
  .mosaic .m-item.tall { grid-row: auto; aspect-ratio: 4 / 3; }
  .mosaic .m-item.fill { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .subnav-name { display: none; }
  .subnav .btn { display: none; }
  .qs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .qs > div:nth-child(n+3) { border-top: 1px solid var(--frost); margin-top: 16px; }
  .sol-grid.cols-3, .sol-grid.cols-2 { grid-template-columns: 1fr; }
  .hsteps { grid-template-columns: 1fr; }
  .range-grid { grid-template-columns: 1fr; }
  .mosaic .m-item, .mosaic .m-item.w5, .mosaic .m-item.w6, .mosaic .m-item.w7, .mosaic .m-item.w8, .mosaic .m-item.w12 { grid-column: span 12; aspect-ratio: 4 / 3; }
  .opt-grid, .opt-grid.compact { grid-template-columns: 1fr; }
  .robo-card { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-results { grid-template-columns: 1fr; }
  .p-results > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--lilac); }
  .sticky-cta { left: 16px; right: 16px; bottom: 16px; }
  .p-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal="clip"], .js .p-media[data-hero-in] { clip-path: none; }
  .mega-card { opacity: 1; transform: none; }
}


/* ─── Cartes solutions avec image ──────────────────────────── */
.sol-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.sol-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--expo); }
.sol-card:hover .sol-media img { transform: scale(1.05); }
.sol-card.has-media { gap: 14px; }
.sol-card.has-media .sol-top { margin-bottom: 0; padding-bottom: 0; }
.sol-media.is-square { aspect-ratio: 1 / 1; }
.sol-card.has-media > .pills { margin-top: auto; padding-top: 4px; }
.sol-media.is-icon { display: grid; place-items: center; background: var(--wash); }
.sol-media.is-icon .icon { width: 64px; height: 64px; stroke-width: 1; transition: transform 1.1s var(--expo); }
.sol-card:hover .sol-media.is-icon .icon { transform: scale(1.08); }
.sol-card.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); min-height: 0; }
.sol-card.is-wide .sol-media { aspect-ratio: 16 / 9; }
.sol-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sol-card.is-wide .sol-top { margin-bottom: 4px; }
.sol-card.is-wide .h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.02em; }
@media (max-width: 640px) {
  .sol-card.is-wide { grid-template-columns: 1fr; gap: 14px; }
  .sol-card.is-wide .h3 { font-size: 26px; }
}

/* ─── Images <picture> (AVIF + WebP) ───────────────────────── */
.m-item picture, .split-media picture, .spec-visual picture { display: contents; }
.js [data-reveal="clip"] > picture > img { transform: scale(1.18); transition: transform 1.8s var(--expo); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal="clip"].is-in > picture > img { transform: none; }
.js .m-item[data-reveal="clip"].is-in:hover img { transform: scale(1.06); transition-duration: 1.2s; transition-delay: 0s; }

/* ─── Spécifications illustrées ────────────────────────────── */
.spec-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.spec-layout .spec-groups { grid-template-columns: 1fr; }
.spec-layout .spec-groups .spec-group:nth-child(2) > h3:first-child { padding-top: 32px; }
.spec-aside { position: sticky; top: calc(var(--nav-h) + 88px); display: grid; gap: 12px; }
.spec-visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--white); border: 1px solid var(--frost); }
.spec-visual img { width: 100%; height: 100%; object-fit: cover; }
.spec-dim { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--ink); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.spec-dim::before { content: ""; width: 14px; height: 8px; border: 1px solid var(--indigo); border-top: 0; }
.spec-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.spec-stats > div { padding: 14px 16px; min-width: 0; }
.spec-stats > div + div { border-left: 1px solid var(--frost); }
.spec-stats dt { font-size: 12px; color: var(--slate); margin-bottom: 6px; }
.spec-stats dd { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.spec-stats dd small { font-size: 13px; letter-spacing: 0; color: var(--slate); margin-left: 3px; }

/* ─── Estimateur PURE SWEEP ────────────────────────────────── */
.sw-timeline { display: flex; gap: 4px; height: 36px; }
.sw-seg { position: relative; flex: var(--g, 9) 1 0; min-width: 6px; overflow: hidden; border: 1px solid var(--lilac); border-radius: 2px; background: var(--white); animation: sw-in .6s var(--expo) both; }
.sw-seg i { position: absolute; inset: 0; background: var(--indigo); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform .9s var(--expo); }
.sw-seg.is-charge { display: grid; place-items: center; border-style: dashed; background: repeating-linear-gradient(135deg, var(--wash) 0 5px, var(--white) 5px 10px); }
.sw-seg.is-charge .icon { width: 16px; height: 16px; }
@keyframes sw-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.sw-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--slate); }
.sw-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw-key { width: 14px; height: 8px; border-radius: 1px; background: var(--indigo); }
.sw-key.is-charge { background: repeating-linear-gradient(135deg, var(--lilac) 0 2px, var(--white) 2px 4px); border: 1px dashed var(--lilac); }

@media (max-width: 960px) {
  .spec-layout { grid-template-columns: 1fr; }
  .spec-aside { position: static; max-width: 560px; }
}
@media (max-width: 640px) {
  .spec-stats dd { font-size: 22px; }
  .spec-stats > div { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-seg { animation: none; }
  .sw-seg i { transition: none; }
}

/* ─── Infographies pleine largeur ──────────────────────────── */
.info-media { position: relative; aspect-ratio: 16 / 9; margin-bottom: clamp(24px, 3vw, 40px); overflow: hidden; border-radius: var(--r); background: var(--white); border: 1px solid var(--frost); }
.info-media img { width: 100%; height: 100%; object-fit: cover; }

/* ─── En-tête de section accompagné d'un visuel ───────────────── */
.head-split { margin-bottom: clamp(40px, 5vw, 64px); }
.head-split .section-head { margin-bottom: 0; }
.head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.head-split .section-head .h2 { max-width: 20ch; }
@media (max-width: 960px) { .head-split { grid-template-columns: 1fr; } }

/* ─── Bases compatibles (extension écran) ──────────────────── */
.base-pick, .note-row > .base-pick { display: flex; flex-wrap: wrap; gap: 12px; }
.base-card { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; color: var(--ink); background: var(--white); border: 1px solid var(--lilac); border-radius: var(--r); transition: border-color .3s var(--ease), transform .6s var(--expo); }
.base-card:hover { border-color: var(--indigo); transform: translate3d(0, -2px, 0); }
.base-img { flex: none; width: 56px; height: 70px; overflow: hidden; border-radius: 2px; background: var(--mist); }
.base-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--expo); }
.base-card:hover .base-img img { transform: scale(1.08); }
.base-txt { display: grid; gap: 2px; }
.base-txt small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.base-txt b { font-size: 15px; font-weight: 400; }
.base-card .arr { margin-left: 6px; color: var(--indigo); }

/* ─── Hero « couloir d’images » (portage de image-stream-hero) ───
 * Deux rails de 9 cartes partent du point de fuite et filent vers le visiteur.
 * Les longueurs sont en cqw (largeur du hero) : le couloir garde ses proportions
 * à toutes les tailles. Délais négatifs : le couloir est plein dès la 1re image.
 * ─────────────────────────────────────────────────────────────── */
@keyframes ist-rail-r {
  0% { transform: translate3d(-11.00cqw, 0, -258.46cqw) rotateY(-6.00deg); }
  4.17% { transform: translate3d(-3.79cqw, 0, -225.92cqw) rotateY(-6.92deg); }
  8.33% { transform: translate3d(2.73cqw, 0, -197.04cqw) rotateY(-7.83deg); }
  12.50% { transform: translate3d(8.60cqw, 0, -171.43cqw) rotateY(-8.75deg); }
  16.67% { transform: translate3d(13.87cqw, 0, -148.70cqw) rotateY(-9.67deg); }
  20.83% { transform: translate3d(18.56cqw, 0, -128.54cqw) rotateY(-10.58deg); }
  25% { transform: translate3d(22.72cqw, 0, -110.65cqw) rotateY(-11.50deg); }
  29.17% { transform: translate3d(26.37cqw, 0, -94.78cqw) rotateY(-12.42deg); }
  33.33% { transform: translate3d(29.57cqw, 0, -80.70cqw) rotateY(-13.33deg); }
  37.50% { transform: translate3d(32.34cqw, 0, -68.21cqw) rotateY(-14.25deg); }
  41.67% { transform: translate3d(34.71cqw, 0, -57.13cqw) rotateY(-15.17deg); }
  45.83% { transform: translate3d(36.73cqw, 0, -47.30cqw) rotateY(-16.08deg); }
  50% { transform: translate3d(38.42cqw, 0, -38.58cqw) rotateY(-17.00deg); }
  54.17% { transform: translate3d(39.81cqw, 0, -30.84cqw) rotateY(-17.92deg); }
  58.33% { transform: translate3d(40.94cqw, 0, -23.98cqw) rotateY(-18.83deg); }
  62.50% { transform: translate3d(41.84cqw, 0, -17.89cqw) rotateY(-19.75deg); }
  66.67% { transform: translate3d(42.53cqw, 0, -12.48cqw) rotateY(-20.67deg); }
  70.83% { transform: translate3d(43.06cqw, 0, -7.69cqw) rotateY(-21.58deg); }
  75% { transform: translate3d(43.43cqw, 0, -3.44cqw) rotateY(-22.50deg); }
  79.17% { transform: translate3d(43.69cqw, 0, 0.33cqw) rotateY(-23.42deg); }
  83.33% { transform: translate3d(43.85cqw, 0, 3.68cqw) rotateY(-24.33deg); }
  87.50% { transform: translate3d(43.94cqw, 0, 6.65cqw) rotateY(-25.25deg); }
  91.67% { transform: translate3d(43.98cqw, 0, 9.28cqw) rotateY(-26.17deg); }
  95.83% { transform: translate3d(44.00cqw, 0, 11.62cqw) rotateY(-27.08deg); }
  100% { transform: translate3d(44.00cqw, 0, 13.70cqw) rotateY(-28.00deg); }
}
@keyframes ist-rail-l {
  0% { transform: translate3d(11.00cqw, 0, -258.46cqw) rotateY(6.00deg); }
  4.17% { transform: translate3d(3.79cqw, 0, -225.92cqw) rotateY(6.92deg); }
  8.33% { transform: translate3d(-2.73cqw, 0, -197.04cqw) rotateY(7.83deg); }
  12.50% { transform: translate3d(-8.60cqw, 0, -171.43cqw) rotateY(8.75deg); }
  16.67% { transform: translate3d(-13.87cqw, 0, -148.70cqw) rotateY(9.67deg); }
  20.83% { transform: translate3d(-18.56cqw, 0, -128.54cqw) rotateY(10.58deg); }
  25% { transform: translate3d(-22.72cqw, 0, -110.65cqw) rotateY(11.50deg); }
  29.17% { transform: translate3d(-26.37cqw, 0, -94.78cqw) rotateY(12.42deg); }
  33.33% { transform: translate3d(-29.57cqw, 0, -80.70cqw) rotateY(13.33deg); }
  37.50% { transform: translate3d(-32.34cqw, 0, -68.21cqw) rotateY(14.25deg); }
  41.67% { transform: translate3d(-34.71cqw, 0, -57.13cqw) rotateY(15.17deg); }
  45.83% { transform: translate3d(-36.73cqw, 0, -47.30cqw) rotateY(16.08deg); }
  50% { transform: translate3d(-38.42cqw, 0, -38.58cqw) rotateY(17.00deg); }
  54.17% { transform: translate3d(-39.81cqw, 0, -30.84cqw) rotateY(17.92deg); }
  58.33% { transform: translate3d(-40.94cqw, 0, -23.98cqw) rotateY(18.83deg); }
  62.50% { transform: translate3d(-41.84cqw, 0, -17.89cqw) rotateY(19.75deg); }
  66.67% { transform: translate3d(-42.53cqw, 0, -12.48cqw) rotateY(20.67deg); }
  70.83% { transform: translate3d(-43.06cqw, 0, -7.69cqw) rotateY(21.58deg); }
  75% { transform: translate3d(-43.43cqw, 0, -3.44cqw) rotateY(22.50deg); }
  79.17% { transform: translate3d(-43.69cqw, 0, 0.33cqw) rotateY(23.42deg); }
  83.33% { transform: translate3d(-43.85cqw, 0, 3.68cqw) rotateY(24.33deg); }
  87.50% { transform: translate3d(-43.94cqw, 0, 6.65cqw) rotateY(25.25deg); }
  91.67% { transform: translate3d(-43.98cqw, 0, 9.28cqw) rotateY(26.17deg); }
  95.83% { transform: translate3d(-44.00cqw, 0, 11.62cqw) rotateY(27.08deg); }
  100% { transform: translate3d(-44.00cqw, 0, 13.70cqw) rotateY(28.00deg); }
}
.hero.hero-stream { --axis: 43%; --speed: 30s; padding: 0; height: clamp(760px, 62vw, 100svh); container-type: inline-size; background: var(--white); }
.ist-stage { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
.ist-world { position: absolute; inset: 0; transform-style: preserve-3d; perspective: 30cqw; perspective-origin: 50% var(--axis); }
.ist-card {
  position: absolute; left: 50%; top: var(--axis);
  width: 18cqw; height: 25cqw; margin: -12.5cqw 0 0 -9cqw;
  overflow: hidden; border-radius: .4cqw; background: var(--mist);
  backface-visibility: hidden; will-change: transform;
  animation: ist-rail-r var(--speed) linear infinite;
  animation-delay: calc(var(--i) * var(--speed) / -9);
}
.ist-card.ist-l { animation-name: ist-rail-l; animation-delay: calc((var(--i) + .5) * var(--speed) / -9); }
.ist-card img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.hero-stream.is-off .ist-card { animation-play-state: paused; }

/* Voile clair : lisibilité du texte sans masquer le couloir */
.ist-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(30% 20% at 50% 17%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 100%),
    radial-gradient(52% 34% at 50% 80%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 82%, var(--white) 100%);
}
.ist-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  padding: calc(var(--nav-h) + clamp(28px, 5vw, 64px)) var(--gutter) clamp(28px, 4vw, 56px);
}
.ist-top, .ist-bottom { display: grid; justify-items: center; gap: 18px; }
.ist-bottom { gap: 16px; }
.ist-logo { position: relative; line-height: 0; width: clamp(220px, 24vw, 400px); }
.ist-logo img { width: 100%; height: auto; }
.ist-logo .brand-shine { animation: ist-shine 7s 1.6s var(--ease) infinite; }
@keyframes ist-shine { 0% { background-position: 150% 0; } 22%, 100% { background-position: -50% 0; } }
.hero-stream .hero-seo { max-width: 46ch; }
.hero-stream .display { max-width: none; }
.hero-stream .cta-pair { justify-content: center; margin-top: 0; }
.hero-stream .fineprint { text-align: center; }

/* Console LiDAR : section dédiée sous le hero */
.mission .hero-text { gap: 20px; }
@media (max-width: 960px) and (min-width: 641px) { .ist-stage { left: -25%; right: -25%; } }

@media (max-width: 640px) {
  .hero.hero-stream { --axis: 40%; height: auto; min-height: max(780px, 100svh); }
  .ist-stage { left: -55%; right: -55%; }
  .ist-content { min-height: max(780px, 100svh); }
}
/* Mouvement réduit : le couloir reste complet, figé (la règle globale écourterait l'animation) */
@media (prefers-reduced-motion: reduce) {
  .ist-card { animation-duration: var(--speed) !important; animation-iteration-count: infinite !important; animation-play-state: paused !important; }
}

/* ─── Footer premium (portage de « BackgroundPaths ») ──────────────
 * Courbes générées par js/main.js, dessinées en continu via stroke-dashoffset
 * (pathLength = 1). Titre lettre à lettre à effet ressort, bouton en verre.
 * ─────────────────────────────────────────────────────────────── */
.footer { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--white) 0%, var(--mist) 100%); }
.footer > .container { position: relative; z-index: 1; }
.footer-paths { position: absolute; left: 0; right: 0; top: var(--fp-top, 50%); bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; color: var(--indigo); }
/* Fondu d'entrée sous les liens, fondu de sortie en bas du footer */
.footer-paths::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 12vw, 170px); background: linear-gradient(180deg, #fbfcfe 0%, rgba(251, 252, 254, 0) 100%); }
.footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: clamp(90px, 9vw, 130px); pointer-events: none; background: linear-gradient(180deg, rgba(248, 250, 253, 0) 0%, var(--mist) 75%); }
.footer-paths svg { position: absolute; left: 0; width: 100%; top: var(--fp-svg-top, 0px); height: var(--fp-svg-h, 100%); overflow: visible; }
/* Fond : dérive lente d'un seul bloc (composité, aucune repeinture) */
.fp-base { animation: fp-drift 26s var(--ease) infinite alternate; will-change: transform; }
@keyframes fp-drift {
  from { transform: translate3d(-1.2%, 0, 0) scale(1); opacity: .75; }
  to   { transform: translate3d(1.2%, -1.5%, 0) scale(1.03); opacity: 1; }
}
/* Reflets : un trait lumineux parcourt la courbe */
.fp-glow {
  stroke-dasharray: var(--dash, 240px) var(--len, 1400px); stroke-dashoffset: var(--dash, 240px); stroke-opacity: .55;
  animation: fp-run var(--dur, 12s) linear infinite; animation-delay: var(--delay, 0s);
}
@keyframes fp-run { to { stroke-dashoffset: calc(var(--len, 1400px) * -1); } }
.footer.is-off .fp-base, .footer.is-off .fp-glow { animation-play-state: paused; }

/* Ouverture : slogan + bouton verre */
.footer-cta {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px;
  padding-bottom: clamp(48px, 6vw, 88px); margin-bottom: clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--frost);
}
.footer-title { font-size: clamp(44px, 6.6vw, 108px); line-height: 1; letter-spacing: -0.045em; font-weight: 300; color: var(--ink); }
.footer-title .lw { display: inline-block; white-space: nowrap; padding-bottom: .08em; }
.footer-title .lt {
  display: inline-block;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 35%, var(--steel) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-title .smoke .lt { background-image: linear-gradient(180deg, var(--indigo) 0%, #8f7dff 100%); }
.js .footer-title .lt {
  opacity: 0; transform: translate3d(0, 100%, 0);
  transition: transform 1.1s cubic-bezier(.34, 1.56, .64, 1), opacity .7s var(--ease);
  transition-delay: calc(var(--w) * 100ms + var(--l) * 30ms);
}
.js .footer-title [data-letters].is-in .lt { opacity: 1; transform: none; }

.glass-wrap {
  flex: none; display: inline-block; padding: 1px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(83, 58, 253, .42) 0%, rgba(83, 58, 253, .06) 100%);
  transition: background-color .4s var(--ease);
}
.glass-btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border-radius: 3px;
  font-size: 17px; font-weight: 400; color: var(--ink);
  background: rgba(255, 255, 255, .76); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.glass-label { opacity: .92; transition: opacity .3s var(--ease); }
.glass-arrow { display: inline-block; opacity: .65; transition: transform .45s var(--expo), opacity .3s var(--ease); }
.glass-wrap:hover { background: linear-gradient(180deg, var(--indigo) 0%, rgba(83, 58, 253, .2) 100%); }
.glass-btn:hover { background: var(--white); color: var(--indigo); }
.glass-btn:hover .glass-label, .glass-btn:hover .glass-arrow { opacity: 1; }
.glass-btn:hover .glass-arrow { transform: translateX(6px); }

/* Grand ÆNIX : dégradé qui s'efface vers le bas */
.footer-giant span {
  background: linear-gradient(180deg, rgba(6, 27, 49, .2) 0%, rgba(6, 27, 49, .03) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-giant span:hover { background-image: linear-gradient(180deg, var(--indigo) 0%, rgba(83, 58, 253, .08) 92%); }

@media (max-width: 640px) {
  .footer-cta { align-items: flex-start; }
  .glass-btn { padding: 16px 22px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-base { animation: none !important; }
  .fp-flow { display: none; }
}

/* ─── Formulaire de demande (fenêtre) ──────────────────────── */
.lead-modal {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  color: var(--ink); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r);
  overflow: auto; overscroll-behavior: contain;
}
.lead-modal::backdrop { background: rgba(6, 27, 49, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lead-modal[open] { animation: lead-in .6s var(--expo); }
@keyframes lead-in { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.98); } }
.lead-open { overflow: hidden; }
.lead-card { position: relative; display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); }
.lead-head { display: grid; gap: 10px; padding-right: 48px; }
.lead-sub { color: var(--steel); font-size: 15px; max-width: 52ch; }
.lead-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--steel); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .5s var(--expo);
}
.lead-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.lead-close:hover { color: var(--indigo); border-color: var(--lilac); transform: rotate(90deg); }
.lead-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.lead-choice { flex: 1 1 auto; padding: 10px 14px; }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lead-actions .link-arrow { font-size: 14px; }
.lead-fine:empty { display: none; }
.lead-modal .form-status button { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
@media (max-width: 640px) {
  .lead-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
}

/* ─── Carrousel gamme : image cliquable + bouton centré ────── */
a.robot-media { display: block; color: inherit; cursor: pointer; }
.robot-peek {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 12px; color: var(--indigo); background: rgba(255, 255, 255, .92);
  border: 1px solid var(--lilac); border-radius: 9999px; pointer-events: none;
  opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .35s var(--ease), transform .5s var(--expo);
}
.robot:hover .robot-peek { opacity: 1; transform: none; }
.robot:hover .robot-peek .arr-line { opacity: 1; }
@media (hover: none) { .robot-peek { display: none; } }
.robot .robot-btn { margin-top: auto; width: 100%; justify-content: center; }
.robot:hover .robot-btn { border-color: var(--indigo); }

/* ─── Footer : logo à gauche, slogan à droite ──────────────── */
.footer-cta { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2.3fr); align-items: center; gap: 0; }
.footer-logo { position: relative; display: inline-block; justify-self: center; line-height: 0; width: clamp(200px, 18vw, 300px); }
.footer-claim {
  display: grid; justify-items: start; gap: clamp(24px, 3vw, 36px);
  margin-left: clamp(32px, 4vw, 64px); padding-left: clamp(32px, 4vw, 72px); border-left: 1px solid var(--frost);
}
.footer-claim .footer-title { font-size: clamp(40px, 4.6vw, 76px); }
@media (max-width: 900px) {
  .footer-cta { grid-template-columns: 1fr; gap: 28px; }
  .footer-logo { justify-self: start; width: clamp(180px, 40vw, 240px); }
  .footer-claim { margin-left: 0; padding-left: 0; border-left: 0; }
}
.footer-logo img { width: 100%; height: auto; }
.footer-logo .brand-shine { animation: ist-shine 7s 1s var(--ease) infinite; }

/* ─── Assistant ÆNIX (réponses guidées) ────────────────────── */
.ast-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 86; width: 56px; height: 56px;
  display: grid; place-items: center; color: #fff; background: var(--indigo);
  border: 0; border-radius: var(--r); cursor: pointer;
  transition: background-color .3s var(--ease), transform .6s var(--expo), opacity .3s var(--ease);
}
.ast-launch:hover { transform: translate3d(0, -2px, 0); }
.ast-launch svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ast-ico { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .3s var(--ease), transform .5s var(--expo); }
.ast-ico-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.ast-open .ast-ico-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.ast-open .ast-ico-close { opacity: 1; transform: none; }
.ast-badge { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.ast-badge::after { content: ""; position: absolute; inset: -4px; border: 1px solid #fff; border-radius: 50%; animation: pulse 2s var(--ease) infinite; }
.ast-open .ast-badge { display: none; }

.ast-teaser {
  position: fixed; right: 24px; bottom: 92px; z-index: 86; display: flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 14px; background: var(--white); border: 1px solid var(--lilac); border-radius: var(--r);
  opacity: 0; transform: translate3d(0, 8px, 0); pointer-events: none;
  transition: opacity .4s var(--ease), transform .6s var(--expo);
}
.ast-teaser.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ast-teaser button { font: inherit; background: none; border: 0; cursor: pointer; color: var(--ink); }
.ast-teaser-open { font-size: 14px; padding: 6px 0; }
.ast-teaser-open:hover { color: var(--indigo); }
.ast-teaser .ast-teaser-close { display: grid; place-items: center; width: 28px; height: 28px; color: var(--slate); }
.ast-teaser-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ast-open .ast-teaser { opacity: 0; pointer-events: none; }

.ast-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 90;
  width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 190px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--frost); border-radius: var(--r);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 14px, 0) scale(.98); transform-origin: 100% 100%;
  transition: opacity .3s var(--ease), transform .55s var(--expo), visibility 0s linear .55s;
}
.ast-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .3s var(--ease), transform .55s var(--expo), visibility 0s; }
.ast-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--frost); }
.ast-avatar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; color: var(--indigo); background: var(--wash); border-radius: var(--r); }
.ast-title { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ast-title b { font-weight: 400; font-size: 15px; color: var(--ink); }
.ast-title small { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--slate); }
.ast-close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--steel); background: none; border: 1px solid var(--frost); border-radius: var(--r); cursor: pointer; transition: color .3s, border-color .3s; }
.ast-close:hover { color: var(--indigo); border-color: var(--lilac); }
.ast-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.ast-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--mist); }
.ast-msg { max-width: 90%; padding: 10px 12px; font-size: 14px; line-height: 1.45; border-radius: var(--r); animation: ast-in .45s var(--expo) both; }
.ast-msg.bot { align-self: flex-start; color: var(--ink); background: var(--white); border: 1px solid var(--frost); }
.ast-msg.user { align-self: flex-end; color: #fff; background: var(--indigo); }
.ast-msg b { font-weight: 400; color: var(--indigo); }
.ast-msg a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.ast-fine { margin-top: 6px; font-size: 12px; color: var(--slate); }
.ast-list { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; list-style: decimal; }
.ast-list li::marker { color: var(--indigo); }
.ast-msg.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.ast-msg.typing span { width: 6px; height: 6px; background: var(--lavender); border-radius: 50%; animation: ast-dot 1s var(--ease) infinite; }
.ast-msg.typing span:nth-child(2) { animation-delay: .15s; }
.ast-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ast-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes ast-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translate3d(0, -3px, 0); } }

.ast-actions, .ast-chips { display: flex; flex-wrap: wrap; gap: 6px; animation: ast-in .45s var(--expo) both; }
.ast-chips { margin-top: 2px; }
.ast-chip {
  display: inline-flex; align-items: center; padding: 7px 12px; font: inherit; font-size: 13px; line-height: 1.2;
  color: var(--indigo); background: var(--white); border: 1px solid var(--lilac); border-radius: 9999px; cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.ast-chip:hover { background: var(--wash); border-color: var(--amethyst); }
.ast-chip.primary { color: #fff; background: var(--indigo); border-color: var(--indigo); }
.ast-chip.primary:hover { background: var(--amethyst); border-color: var(--amethyst); }

.ast-form { display: flex; gap: 8px; padding: 12px; background: var(--white); border-top: 1px solid var(--frost); }
.ast-form input { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--ink); padding: 10px 12px; background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .3s; }
.ast-form input:focus { outline: none; border-color: var(--indigo); }
.ast-form button { flex: none; width: 42px; display: grid; place-items: center; color: #fff; background: var(--indigo); border: 0; border-radius: var(--r); cursor: pointer; }
.ast-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ast-note { padding: 0 12px 10px; font-size: 11px; color: var(--slate); text-align: center; background: var(--white); }
.ast-link { padding: 0; font: inherit; color: var(--indigo); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* Bouton flottant Tester / Démo : décalé à gauche du bouton assistant */
.has-assistant .sticky-cta { right: 92px; }
.form-status button.lead-copy { padding: 0; font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }

@media (max-width: 640px) {
  .ast-launch { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .has-assistant .sticky-cta { left: 16px; right: 80px; bottom: 16px; height: 52px; }
  .ast-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; transform-origin: 50% 100%; }
  html.ast-open { overflow: hidden; }
  .ast-open .ast-launch { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ast-badge::after, .ast-msg.typing span { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   PAGES MÉTIER (solutions/<métier>/)
   ════════════════════════════════════════════════════════════ */

/* ─── Hero métier : titre + grande photographie ─────────────── */
.m-hero .m-hero-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 28px clamp(32px, 5vw, 80px); align-items: end; }
.m-hero-title { display: grid; gap: 22px; justify-items: start; }
.m-hero-title .display { font-size: clamp(40px, 5vw, 72px); max-width: 19ch; }
.m-hero-side { display: grid; gap: 28px; justify-items: start; padding-bottom: 6px; }
.m-hero-media { position: relative; margin-top: clamp(36px, 4.5vw, 64px); aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--r); background: var(--mist); border: 1px solid var(--frost); }
.m-hero-zoom { position: absolute; inset: 0; transition: transform 1.8s var(--expo); }
.js .m-hero-zoom { transform: scale(1.06); }
.js.hero-ready .m-hero-zoom { transform: none; }
.m-hero-media img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; object-position: 66% 72%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.m-hero-media .p-chip.bl { left: 20px; bottom: 20px; }
.m-hero-media .p-chip.tr { right: 20px; top: 20px; }

/* ─── Rôles : équipes / robot ───────────────────────────────── */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; background: var(--frost); border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; }
.role { display: grid; align-content: start; gap: 16px; padding: 24px; background: var(--white); }
.role.is-robot { background: var(--wash); }
.role h3 { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.role h3 .icon { width: 20px; height: 20px; }
.role ul { display: grid; gap: 12px; }
.role li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.4; color: var(--steel); }
.role li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 1px; background: var(--lavender); }
.role.is-robot li { color: var(--ink); }
.role.is-robot li::before { background: var(--indigo); }

/* ─── Bandeau photo pleine largeur ──────────────────────────── */
.m-banner { position: relative; aspect-ratio: 21 / 8; margin-bottom: 12px; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.m-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 64%; }
.m-banner .p-chip { left: 20px; bottom: 20px; }

/* ─── Solutions : une ligne par machine ─────────────────────── */
.flux-list { display: grid; gap: 12px; }
.flux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; transition: border-color .4s var(--ease); }
.flux:hover { border-color: var(--lilac); }
.flux-media { position: relative; display: block; min-height: 280px; overflow: hidden; background: var(--mist); }
.flux-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--expo); }
.flux:hover .flux-media img { transform: scale(1.05); }
.flux-body { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.flux-name { font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -0.03em; font-weight: 300; }
.flux-name small { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.flux-pos { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.flux-body p:not(.flux-pos) { color: var(--steel); line-height: 1.45; max-width: 44ch; }
.flux-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.flux-links .link-arrow { font-size: 15px; }
.flux-specs { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0; }
.flux-specs .kv > div { font-size: 14px; }
.flux-specs .kv dd { max-width: 60%; }
.flux-pending { display: grid; gap: 8px; padding: 20px; border: 1px dashed var(--lavender); border-radius: var(--r); color: var(--steel); font-size: 14px; line-height: 1.45; }
.flux-pending b { font-weight: 400; color: var(--ink); }
.flux.is-cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 24px clamp(32px, 5vw, 80px); padding: clamp(28px, 4vw, 48px); background: var(--wash); border-color: var(--lilac); }
.flux.is-cta .flux-body { padding: 0; }
.flux.is-cta .h3-lg { max-width: 22ch; }
.flux-cta-side { display: grid; gap: 16px; justify-items: start; }

/* ─── Cohabitation : points étudiés ─────────────────────────── */
.check-groups { display: grid; gap: 28px; width: 100%; }
.check-group h3 { margin-bottom: 12px; font-size: 12px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--frost); }
.check-list li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--frost); font-size: 16px; line-height: 1.3; color: var(--ink); }
.check-list svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--indigo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.js .check-list path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .9s var(--expo); transition-delay: calc(var(--d, 0) * 70ms + 250ms); }
.js .check-list.is-in path { stroke-dashoffset: 0; }

/* ─── Méthode : visuel dans la colonne fixe ─────────────────── */
.process-media { width: 100%; margin-top: 8px; }

/* ─── Étude de potentiel ────────────────────────────────────── */
.study-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.study-text { display: grid; gap: 20px; justify-items: start; }
.study-text .h2 { max-width: 17ch; }
.study-card { border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); overflow: hidden; }
.study-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; background: var(--mist); border-bottom: 1px solid var(--frost); font-size: 13px; color: var(--slate); }
.study-head b { font-weight: 400; color: var(--ink); }
.study-rows { position: relative; overflow: hidden; }
.study-rows::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(83,58,253,0) 0, rgba(83,58,253,.05) 88%, rgba(83,58,253,.45) 100%); transform: translate3d(0, -100%, 0); opacity: 0; }
.study-card.is-in .study-rows::after { animation: study-scan 2.6s var(--ease) .35s 1 both; }
@keyframes study-scan { 0% { transform: translate3d(0, -100%, 0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(0, 0, 0); opacity: 0; } }
.study-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--frost); }
.study-row .n { font-size: 12px; color: var(--smoke); }
.study-row b { display: block; font-size: 16px; font-weight: 400; color: var(--ink); }
.study-row .d { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--slate); }
.study-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; white-space: nowrap; color: var(--indigo); background: var(--wash); border: 1px solid var(--lilac); border-radius: 9999px; }
.study-state svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.js .study-state { opacity: 0; transform: translate3d(8px, 0, 0); transition: opacity .5s var(--ease), transform .7s var(--expo); transition-delay: calc(var(--d, 0) * 280ms + 500ms); }
.js .study-card.is-in .study-state { opacity: 1; transform: none; }
.study-foot { display: grid; gap: 8px; padding: 20px; background: var(--wash); }
.study-foot .eyebrow { color: var(--indigo); }
.study-foot p:not(.eyebrow) { color: var(--ink); line-height: 1.45; }
.m-fin { margin-top: clamp(40px, 5vw, 64px); align-items: center; }
.m-fin p { max-width: none; }

/* ─── CTA final avec photographie ───────────────────────────── */
.m-cta-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.m-cta .display { font-size: clamp(36px, 4.4vw, 64px); max-width: 15ch; }
.m-cta-list { display: flex; flex-wrap: wrap; gap: 8px; }
.m-cta-list li { padding: 6px 12px; font-size: 13px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.32); border-radius: 9999px; }
.m-cta-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); }
.m-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; }
.m-cta .cta-contacts { margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 1180px) {
  .flux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flux-media { grid-row: 1 / 3; min-height: 300px; }
  .flux-specs { padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); }
}
@media (max-width: 960px) {
  .m-hero .m-hero-head, .study-wrap, .m-cta-grid, .flux.is-cta { grid-template-columns: 1fr; }
  .m-hero-media { aspect-ratio: 16 / 9; }
  .m-banner { aspect-ratio: 16 / 9; }
  .m-cta-media { aspect-ratio: 16 / 10; }
  .process-media { max-width: 560px; }
}
@media (max-width: 640px) {
  .m-hero-media { aspect-ratio: 4 / 3; }
  .m-banner { aspect-ratio: 4 / 3; }
  .roles, .check-list { grid-template-columns: 1fr; }
  .flux { grid-template-columns: 1fr; }
  .flux-media { grid-row: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .flux-specs .kv > div { flex-direction: column; gap: 4px; }
  .flux-specs .kv dd { max-width: none; text-align: left; }
  .study-row { grid-template-columns: 22px minmax(0, 1fr); row-gap: 10px; padding: 14px 16px; }
  .study-state { grid-column: 2; justify-self: start; }
  .m-fin { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .m-hero-zoom { transform: none; }
  .js .check-list path { stroke-dashoffset: 0; }
  .js .study-state { opacity: 1; transform: none; }
  .study-card.is-in .study-rows::after { animation: none; }
}

/* ─── Pages légales et 404 ─────────────────────────────────── */
.legal { max-width: 840px; }
.legal-hero { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 88px)); padding-bottom: clamp(32px, 4vw, 48px); }
.legal-hero .legal { display: grid; gap: 20px; justify-items: start; }
.legal-body { padding-top: 0; }
.legal h2 { margin: clamp(36px, 4vw, 52px) 0 16px; padding-top: 24px; border-top: 1px solid var(--frost); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 300; }
.legal > h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.6; color: var(--steel); }
.legal-body p + p { margin-top: 12px; }
.legal-body ul { display: grid; gap: 10px; margin: 12px 0; }
.legal-body li { position: relative; padding-left: 22px; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--indigo); }
.legal-body strong { font-weight: 400; color: var(--ink); }
.legal-body a { color: var(--indigo); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.legal-body .kv dd { max-width: 62%; }
.legal mark.todo { padding: 0 4px; border-radius: 2px; color: #7a4b00; background: #fff1cc; }
.not-found { min-height: 72svh; }
.not-found .display { max-width: 18ch; }
.not-found-links { display: grid; gap: 12px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--frost); width: 100%; }
@media (max-width: 640px) {
  .legal-body .kv > div { flex-direction: column; gap: 4px; }
  .legal-body .kv dd { max-width: none; text-align: left; }
}

/* ════════════════════════════════════════════════════════════
   PAGE MÉTIER — HÔTELLERIE & HOSPITALITY (préfixe hx-)
   ════════════════════════════════════════════════════════════ */

/* ─── Hero immersif : photographie + carte ─────────────────── */
.p-hero.hx-hero { padding-top: calc(var(--nav-h) + clamp(16px, 2vw, 28px)); padding-bottom: clamp(56px, 7vw, 96px); }
.hx-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.hx-stage { position: relative; }
.hx-frame { position: relative; height: clamp(560px, 82svh, 840px); overflow: hidden; border-radius: var(--r); background: var(--mist); }
.hx-frame img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; object-position: 38% 72%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hx-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(6,27,49,.18), rgba(6,27,49,0) 38%); }
.hx-card { position: absolute; z-index: 2; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px); width: min(580px, calc(100% - 32px)); display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 3vw, 40px); background: rgba(255,255,255,.95); border: 1px solid var(--frost); border-radius: var(--r); }
.hx-card .display { font-size: clamp(34px, 3.6vw, 54px); }
.hx-card .p-desc { font-size: 16px; }

/* ─── Exploitation : lignes d'enjeux ───────────────────────── */
.hx-ops-media { position: sticky; top: calc(var(--nav-h) + 72px); }
.ops { width: 100%; border-top: 1px solid var(--frost); }
.op { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 20px; padding: 26px 0 26px 20px; border-bottom: 1px solid var(--frost); }
.op::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--indigo); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--expo); }
.op:hover::before { transform: scaleY(1); }
.op .icon { grid-row: 1 / 3; width: 28px; height: 28px; }
.op h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 300; }
.op p { color: var(--steel); line-height: 1.45; max-width: 48ch; }

/* ─── Nettoyage : sélection de la gamme PURE ───────────────── */
.range-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.range-grid .robot-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.range-grid .robot-facts span { padding: 4px 10px; font-size: 12px; color: var(--steel); background: var(--mist); border: 1px solid var(--frost); border-radius: 9999px; }

/* ─── Livraison : parcours de la réception à la chambre ────── */
.route { position: relative; display: grid; gap: 0; width: 100%; padding-left: 34px; }
.route-rail { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--frost); overflow: hidden; }
.route-rail i { position: absolute; inset: 0; background: var(--indigo); transform-origin: top; transform: scaleY(0); transition: transform 2.2s var(--expo) .2s; }
.route.is-in .route-rail i { transform: scaleY(1); }
.route li { position: relative; display: grid; gap: 4px; padding: 12px 0; }
.route li::before { content: ""; position: absolute; left: -34px; top: 17px; width: 15px; height: 15px; background: var(--white); border: 1.5px solid var(--lavender); border-radius: 50%; transition: background-color .5s var(--ease), border-color .5s var(--ease); transition-delay: calc(var(--i, 0) * 450ms + 300ms); }
.route.is-in li::before { background: var(--indigo); border-color: var(--indigo); }
.route b { font-size: 18px; font-weight: 400; color: var(--ink); }
.route span { font-size: 14px; color: var(--slate); }
.route .is-study b::after { content: "selon étude"; margin-left: 10px; padding: 2px 8px; font-size: 11px; vertical-align: 2px; color: var(--indigo); background: var(--wash); border: 1px solid var(--lilac); border-radius: 9999px; }
.dcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.dcard { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease); }
.dcard:hover { border-color: var(--lilac); }
.dcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dcard .flux-name { font-size: clamp(28px, 2.6vw, 38px); }
.dcard .kv > div { font-size: 14px; }
.dcard .kv dd { max-width: 60%; }
.dcards + .note { margin-top: 12px; }

/* ─── Expérience client : registre éditorial ───────────────── */
.hx-quote { display: grid; gap: clamp(32px, 4vw, 56px); }
.hx-quote-text { max-width: 22ch; font-size: clamp(38px, 5.2vw, 80px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 300; }
.hx-wide { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.hx-wide img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); border-top: 1px solid var(--frost); padding-top: clamp(24px, 3vw, 40px); }
.principle { display: grid; gap: 10px; align-content: start; }
.principle .num { font-size: 13px; color: var(--smoke); }
.principle h3 { font-size: 22px; line-height: 1.15; font-weight: 300; letter-spacing: -0.01em; }
.principle p { color: var(--steel); line-height: 1.45; }

/* ─── Plusieurs usages : composition bento ─────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 12px; }
.bento-media { position: relative; grid-column: span 6; grid-row: span 2; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.bento-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.bento-tile { position: relative; grid-column: span 3; display: grid; align-content: space-between; gap: 20px; padding: clamp(20px, 2.4vw, 32px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.bento-tile:hover { border-color: var(--lilac); background: var(--wash); }
.bento-word { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: .06em; text-transform: uppercase; font-weight: 300; color: var(--ink); }
.bento-word .num { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: .04em; color: var(--smoke); }
.bento-tile p { color: var(--steel); font-size: 15px; line-height: 1.45; }
.bento-tile .pills { margin-top: 4px; }

/* ─── Intégration : étapes horizontales ────────────────────── */
.hsteps .pills { margin-top: 4px; }

/* ─── Étude : éléments à cocher ────────────────────────────── */
.picker-card { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.picker-card legend { float: left; width: 100%; padding: 0; font-size: 13px; color: var(--slate); }
.picker-card legend + * { clear: both; }
.picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pick { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; font-size: 15px; color: var(--steel); border: 1px solid var(--frost); border-radius: var(--r); cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--lavender); border-radius: 3px; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.pick i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.pick:hover { border-color: var(--lavender); }
.pick:has(input:checked) { color: var(--ink); background: var(--wash); border-color: var(--indigo); }
.pick:has(input:checked) i { background: var(--indigo); border-color: var(--indigo); }
.pick:has(input:checked) i svg { opacity: 1; }
.pick:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.picker-count { font-size: 13px; color: var(--slate); }

/* ─── Financement ──────────────────────────────────────────── */
.fin-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) auto; align-items: center; gap: 24px clamp(32px, 5vw, 72px); padding: clamp(28px, 4vw, 48px); background: var(--wash); border: 1px solid var(--lilac); border-radius: var(--r); }
.fin-panel .h3-lg { max-width: 16ch; }
.fin-panel p { color: var(--steel); line-height: 1.5; }

/* ─── CTA final : scène photographique ─────────────────────── */
.hx-cta { position: relative; min-height: clamp(520px, 70vh, 720px); overflow: hidden; border-radius: var(--r); background: var(--mist); }
.hx-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; }
.hx-cta .hx-card { top: 50%; bottom: auto; transform: translateY(-50%); }
.hx-cta .display { font-size: clamp(32px, 3.4vw, 50px); }
.hx-cta .cta-contacts { grid-template-columns: repeat(2, auto); gap: 20px 32px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--frost); }
.hx-cta .cta-contacts dt { color: var(--slate); }
.hx-cta .cta-contacts dd { color: var(--ink); }

@media (max-width: 1180px) {
  .bento-media { grid-column: span 12; grid-row: auto; aspect-ratio: 16 / 9; }
  .bento-tile { grid-column: span 6; }
}
@media (max-width: 960px) {
  .hx-frame { height: auto; aspect-ratio: 4 / 3; }
  .hx-card, .hx-cta .hx-card { position: relative; right: auto; top: auto; bottom: auto; width: auto; margin: -56px 16px 0; transform: none; }
  .hx-cta { min-height: 0; overflow: visible; background: none; }
  .hx-cta > img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); }
  .hx-ops-media { position: relative; top: 0; }
  .range-grid.cols-3, .dcards, .principles { grid-template-columns: 1fr; }
  .fin-panel { grid-template-columns: 1fr; }
  .hsteps.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
}
@media (max-width: 640px) {
  .hx-frame { aspect-ratio: 1 / 1; }
  .hx-frame img { object-position: 34% 72%; }
  .hx-card, .hx-cta .hx-card { margin: -40px 0 0; }
  .hx-wide { aspect-ratio: 4 / 3; }
  .bento { grid-auto-rows: auto; }
  .bento-tile { grid-column: span 12; }
  .picker { grid-template-columns: 1fr; }
  .dcard .kv > div { flex-direction: column; gap: 4px; }
  .dcard .kv dd { max-width: none; text-align: left; }
  .hx-cta .cta-contacts { grid-template-columns: 1fr; }
  .hsteps.cols-4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .route-rail i { transform: none; transition: none; }
  .route li::before { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   PAGE MÉTIER — SANTÉ & EHPAD (préfixe sx-)
   ════════════════════════════════════════════════════════════ */

/* ─── Hero centré, registre apaisé ─────────────────────────── */
.p-hero.sx-hero { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 64px)); padding-bottom: clamp(48px, 6vw, 88px); text-align: center; }
.sx-hero-inner { display: grid; gap: 22px; justify-items: center; max-width: 900px; margin-inline: auto; }
.sx-hero-inner .display { font-size: clamp(36px, 4.6vw, 68px); max-width: 20ch; }
.sx-hero-inner .p-desc { max-width: 60ch; }
.sx-hero-inner .crumbs, .sx-hero-inner .tags, .sx-hero-inner .cta-pair { justify-content: center; }
.sx-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--frost); width: min(100%, 640px); font-size: 14px; color: var(--slate); }
.sx-trust span { display: inline-flex; align-items: center; gap: 8px; }
.sx-trust span::before { content: ""; width: 6px; height: 6px; background: var(--indigo); border-radius: 50%; }
.sx-band { position: relative; margin-top: clamp(36px, 4.5vw, 64px); aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.sx-band img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.sx-band .p-chip { left: 20px; bottom: 20px; }

/* ─── Zones de l'établissement ─────────────────────────────── */
.zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 4vw, 56px); }
.zone { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--frost); }
.zone .icon { width: 26px; height: 26px; }
.zone h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.zone p { color: var(--steel); font-size: 15px; line-height: 1.5; }

/* ─── Sélection PURE en lignes compactes ───────────────────── */
.pure-rows { display: grid; gap: 0; width: 100%; border-top: 1px solid var(--frost); }
.pure-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 18px 0; border-bottom: 1px solid var(--frost); transition: background-color .4s var(--ease); }
.pure-row:hover { background: var(--mist); }
.pure-thumb { grid-column: 1; grid-row: 1 / 3; width: 76px; height: 76px; overflow: hidden; border-radius: var(--r); background: var(--mist); border: 1px solid var(--frost); }
.pure-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pure-row b { grid-column: 2; grid-row: 1; font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.pure-row p { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 1.45; color: var(--steel); }
.pure-row .link-arrow { grid-column: 3; grid-row: 1 / 3; justify-self: end; font-size: 14px; }
.pure-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pure-facts span { padding: 3px 10px; font-size: 12px; color: var(--steel); background: var(--white); border: 1px solid var(--frost); border-radius: 9999px; }

/* ─── Transport interne ────────────────────────────────────── */
.carry-card { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.carry-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.carry-card .flux-name { font-size: clamp(28px, 2.6vw, 38px); }
.carry-card .kv > div { font-size: 14px; }

/* ─── L'humain au centre ───────────────────────────────────── */
.human { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.human-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.human-media img { width: 100%; height: 100%; object-fit: cover; }
.human-text { display: grid; gap: 22px; justify-items: start; }
.human-text .h2 { max-width: 16ch; }
.human-points { display: grid; gap: 16px; width: 100%; }
.human-point { display: grid; gap: 4px; padding-left: 20px; border-left: 2px solid var(--lilac); }
.human-point b { font-size: 17px; font-weight: 400; color: var(--ink); }
.human-point span { font-size: 15px; line-height: 1.45; color: var(--steel); }

/* ─── Cohabitation : points étudiés ────────────────────────── */
.crits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.crit { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease); }
.crit:hover { border-color: var(--lilac); }
.crit .icon { width: 20px; height: 20px; flex: none; }

/* ─── Intégration : 4 cartes numérotées ────────────────────── */
.stepcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.stepcard { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 32px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.stepcard:hover { border-color: var(--lilac); background: var(--mist); }
.stepcard .num { font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -0.03em; color: var(--lavender); }
.stepcard h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.stepcard p { font-size: 15px; line-height: 1.5; color: var(--steel); }
.stepcard .pills { margin-top: 2px; }

/* ─── CTA final : bandeau + carte centrée ──────────────────── */
.sx-cta { display: grid; }
.sx-cta-media { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.sx-cta-media img { width: 100%; height: 100%; object-fit: cover; }
.sx-cta-card { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: center; text-align: center; width: min(760px, calc(100% - 32px)); margin: clamp(-96px, -7vw, -56px) auto 0; padding: clamp(28px, 3.4vw, 48px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.sx-cta-card .display { font-size: clamp(30px, 3.2vw, 46px); max-width: 18ch; }
.sx-cta-card .p-desc { max-width: 56ch; }
.sx-cta-card .cta-pair { justify-content: center; }
.sx-cta-card .cta-contacts { grid-template-columns: repeat(2, auto); justify-content: center; gap: 16px 40px; border-top: 1px solid var(--frost); }
.sx-cta-card .cta-contacts dt { color: var(--slate); }
.sx-cta-card .cta-contacts dd { color: var(--ink); }

@media (max-width: 1180px) {
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .human { grid-template-columns: 1fr; }
  .human-media { max-width: 560px; }
  .crits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-band, .sx-cta-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .zones, .crits, .stepcards { grid-template-columns: 1fr; }
  .sx-band, .sx-cta-media { aspect-ratio: 4 / 3; }
  .pure-row { grid-template-columns: 56px minmax(0, 1fr); }
  .pure-thumb { width: 56px; height: 56px; }
  .pure-row .link-arrow { grid-row: auto; grid-column: 2; }
  .sx-cta-card { width: 100%; margin-top: -32px; }
  .sx-cta-card .cta-contacts { grid-template-columns: 1fr; }
  .carry-card .kv > div { flex-direction: column; gap: 4px; }
  .carry-card .kv dd { text-align: left; }
}

/* ─── Barre de navigation agrandie (17/09/2026) ────────────── */
.nav-actions .btn-sm { height: 48px; padding: 0 20px; font-size: 15px; }
.nav-actions .burger { width: 44px; height: 44px; }
.nav-actions .burger i { left: 13px; right: 13px; }
.nav-actions .burger i:first-child { top: 17px; }
.nav-actions .burger i:last-child { top: 25px; }
@media (max-width: 960px) {
  :root { --nav-h: 76px; }
  .brand img { height: 38px; }
}

/* ════════════════════════════════════════════════════════════
   PAGE MÉTIER — RETAIL & GMS (préfixe rx-)
   ════════════════════════════════════════════════════════════ */

/* ─── Hero : texte + rail d'usages, puis bandeau photo ─────── */
.p-hero.rx-hero { padding-bottom: clamp(48px, 6vw, 88px); }
.rx-hero-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(32px, 5vw, 88px); align-items: end; }
.rx-hero-text { display: grid; gap: 20px; justify-items: start; }
.rx-hero-text .display { font-size: clamp(36px, 4.8vw, 70px); max-width: 15ch; }
.rx-rail { display: grid; gap: 0; width: 100%; border-top: 1px solid var(--frost); }
.rx-rail div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--frost); }
.rx-rail .icon { grid-row: 1 / 3; width: 24px; height: 24px; }
.rx-rail b { font-size: 16px; font-weight: 400; color: var(--ink); }
.rx-rail span { font-size: 14px; color: var(--slate); }
.rx-band { position: relative; margin-top: clamp(32px, 4vw, 56px); aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.rx-band img { width: 100%; height: 100%; object-fit: cover; }
.rx-band .p-chip { left: 20px; bottom: 20px; }
/* Le visuel du hero porte un titre incrusté : on n’affiche que la partie droite de la scène */
.rx-hero-band img { width: 148%; max-width: none; margin-left: -48%; }
@media (max-width: 640px) { .rx-hero-band img { width: 165%; margin-left: -62%; } }

/* ─── Bande d'exploitation : 4 cellules séparées ───────────── */
.rx-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; background: var(--white); }
.rx-cell { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.6vw, 32px); border-left: 1px solid var(--frost); }
.rx-cell:first-child { border-left: 0; }
.rx-cell .num { font-size: 12px; color: var(--smoke); letter-spacing: .04em; }
.rx-cell h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.rx-cell p { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* ─── Combinaison balayage + nettoyage ─────────────────────── */
.combo { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; gap: 0; width: 100%; }
.combo-card { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.combo-card .pure-thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.combo-plus { display: grid; place-items: center; font-size: 26px; font-weight: 300; color: var(--indigo); }
.combo-card b { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.combo-card p { font-size: 15px; line-height: 1.5; color: var(--steel); }
.combo-card .pills { margin-top: 2px; }

/* ─── Comparatif des trois solutions ───────────────────────── */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.compare-card { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 34px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease); }
.compare-card:hover { border-color: var(--lilac); }
.compare-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.compare-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.compare-card h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1; letter-spacing: -0.02em; font-weight: 300; }
.compare-card h3 small { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.compare-role { font-size: 17px; color: var(--ink); }
.compare-card p { font-size: 15px; line-height: 1.5; color: var(--steel); }
.compare-card .kv > div { font-size: 14px; padding: 10px 0; }

/* ─── Étapes en lignes numérotées ──────────────────────────── */
.rx-steps { width: 100%; border-top: 1px solid var(--frost); margin-top: clamp(32px, 4vw, 48px); }
.rx-step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 24px; padding: 26px 0; border-bottom: 1px solid var(--frost); }
.rx-step .num { grid-row: 1 / 3; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.03em; color: var(--lavender); }
.rx-step h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 300; }
.rx-step p { font-size: 15px; line-height: 1.5; color: var(--steel); max-width: 62ch; }
.rx-step .pills { margin-top: 8px; }

/* ─── Réseau multi-sites ───────────────────────────────────── */
.multi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3.5vw, 44px); }
.multi div { display: grid; gap: 8px; align-content: start; padding-left: 20px; border-left: 2px solid var(--lilac); }
.multi b { font-size: 17px; font-weight: 400; color: var(--ink); }
.multi span { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* ─── CTA final : bandeau puis bloc texte ──────────────────── */
.rx-cta { display: grid; gap: 0; }
.rx-cta-media { aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: var(--mist); }
.rx-cta-media img { width: 100%; height: 100%; object-fit: cover; }
.rx-cta-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 3.6vw, 48px); background: var(--white); border: 1px solid var(--frost); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.rx-cta-body .display { font-size: clamp(30px, 3.2vw, 46px); max-width: 16ch; }
.rx-cta-side { display: grid; gap: 18px; justify-items: start; }
.rx-cta-side .cta-contacts { grid-template-columns: repeat(2, auto); gap: 16px 32px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--frost); }
.rx-cta-side .cta-contacts dt { color: var(--slate); }
.rx-cta-side .cta-contacts dd { color: var(--ink); }

@media (max-width: 1180px) {
  .rx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-cell:nth-child(3) { border-left: 0; }
  .rx-cell:nth-child(n+3) { border-top: 1px solid var(--frost); }
  .compare { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .rx-hero-top, .rx-cta-body, .multi { grid-template-columns: 1fr; }
  .combo { grid-template-columns: 1fr; gap: 12px; }
  .combo-plus { padding: 4px 0; }
  .rx-band, .rx-cta-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .rx-strip { grid-template-columns: 1fr; }
  .rx-cell { border-left: 0; border-top: 1px solid var(--frost); }
  .rx-cell:first-child { border-top: 0; }
  .rx-band, .rx-cta-media { aspect-ratio: 4 / 3; }
  .rx-band img { object-position: 62% 50%; }
  .rx-cta-media img { object-position: 46% 50%; }
  .rx-step { grid-template-columns: 56px minmax(0, 1fr); }
  .compare-card .kv > div { flex-direction: column; gap: 4px; }
  .compare-card .kv dd { text-align: left; }
}

/* ════════════════════════════════════════════════════════════
   PAGE MÉTIER — INDUSTRIE & LOGISTIQUE INTERNE (préfixe ix-)
   ════════════════════════════════════════════════════════════ */

/* ─── Hero : texte posé sur la photographie ────────────────── */
.p-hero.ix-hero { padding-top: calc(var(--nav-h) + clamp(12px, 2vw, 24px)); padding-bottom: clamp(48px, 6vw, 88px); }
.ix-hero-wrap { position: relative; }
.ix-stage { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.ix-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 26%, rgba(255,255,255,.55) 44%, rgba(255,255,255,0) 62%); }
.ix-hero-text { position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%); width: min(620px, 58%); display: grid; gap: 18px; justify-items: start; }
.ix-hero-text .display { font-size: clamp(32px, 3.6vw, 56px); max-width: 15ch; }
.ix-hero-text .p-desc { font-size: 16px; max-width: 46ch; }

/* ─── Réalités d'exploitation : 2 × 2 ──────────────────────── */
.ix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; margin-top: clamp(28px, 3.5vw, 44px); background: var(--frost); border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; }
.ix-block { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--white); transition: background-color .4s var(--ease); }
.ix-block:hover { background: var(--mist); }
.ix-block .icon { width: 26px; height: 26px; }
.ix-block h3 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.ix-block p { font-size: 15px; line-height: 1.5; color: var(--steel); max-width: 52ch; }

/* ─── Critères du terrain ──────────────────────────────────── */
.ix-crits { display: grid; gap: 0; width: 100%; border-top: 1px solid var(--frost); }
.ix-crit { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 28px; padding: 20px 0; border-bottom: 1px solid var(--frost); }
.ix-crit b { font-size: 17px; font-weight: 400; color: var(--ink); }
.ix-crit span { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* ─── Méthode : 4 cartes numérotées ────────────────────────── */
.ix-method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3.5vw, 44px); }
.ix-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 20px; align-content: start; padding: clamp(22px, 2.6vw, 32px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease); }
.ix-card:hover { border-color: var(--lilac); }
.ix-card .num { grid-row: 1 / 3; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.03em; color: var(--lavender); }
.ix-card h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.ix-card p { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* ─── Déploiement progressif : chaîne d'étapes ─────────────── */
.ix-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: clamp(24px, 3vw, 36px); }
.ix-flow span { padding: 9px 16px; font-size: 14px; color: var(--indigo); background: var(--white); border: 1px solid var(--lilac); border-radius: 9999px; }
.ix-flow i { font-style: normal; color: var(--smoke); }

/* ─── Bandeau CTA final ────────────────────────────────────── */
.ix-cta { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; gap: 0; border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; }
.ix-cta-media { position: relative; min-height: 340px; background: var(--mist); }
.ix-cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-cta-body { display: grid; gap: 18px; align-content: center; justify-items: start; padding: clamp(28px, 3.6vw, 52px); background: var(--wash); }
.ix-cta-body .display { font-size: clamp(28px, 3vw, 44px); max-width: 17ch; }
.ix-cta-body .cta-contacts { grid-template-columns: repeat(2, auto); gap: 14px 32px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--lilac); }
.ix-cta-body .cta-contacts dt { color: var(--slate); }
.ix-cta-body .cta-contacts dd { color: var(--ink); }

@media (max-width: 1180px) {
  .ix-hero-text { width: min(560px, 66%); }
}
@media (max-width: 960px) {
  .ix-stage { aspect-ratio: 4 / 3; }
  .ix-stage::after { display: none; }
  .ix-hero-text { position: relative; left: auto; top: auto; transform: none; width: auto; margin-top: 24px; }
  .ix-grid, .ix-method, .ix-cta { grid-template-columns: 1fr; }
  .ix-cta-media { min-height: 0; aspect-ratio: 16 / 9; }
  .ix-crit { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ix-stage { aspect-ratio: 4 / 3; }
  .ix-stage img { object-position: 65% 50%; }
}

/* ════════════════════════════════════════════════════════════
   PAGE MÉTIER — AGROALIMENTAIRE (préfixe ag-)
   ════════════════════════════════════════════════════════════ */

.ag-hero .p-hero-inner { align-items: center; }
.ag-hero-text { display: grid; gap: 20px; justify-items: start; }
.ag-hero-text .display { font-size: clamp(34px, 4vw, 60px); max-width: 15ch; }
.ag-hero-text .p-desc { max-width: 50ch; }

/* ─── Zones du site ────────────────────────────────────────── */
.ag-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3.5vw, 44px); }
.ag-zone { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 30px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease); }
.ag-zone:hover { border-color: var(--lilac); }
.ag-zone .chip { justify-self: start; padding: 4px 12px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--indigo); background: var(--wash); border-radius: 9999px; }
.ag-zone h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.ag-zone p { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* ─── Questions de terrain ─────────────────────────────────── */
.ag-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; width: 100%; }
.ag-q { display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid var(--lilac); }
.ag-q b { font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.35; }
.ag-q span { font-size: 14px; line-height: 1.45; color: var(--slate); }

/* ─── Déploiement en six temps ─────────────────────────────── */
.ag-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(26px, 3vw, 40px); }
.ag-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 4px 14px; padding: 18px 20px; background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.ag-step .num { grid-column: 1; grid-row: 1; font-size: 15px; color: var(--lavender); }
.ag-step b { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: 400; color: var(--ink); }
.ag-step span:not(.num) { grid-column: 2; grid-row: 2; font-size: 14px; line-height: 1.45; color: var(--steel); }

@media (max-width: 1180px) {
  .ag-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ag-zones, .ag-steps, .ag-questions { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   PAGES COMMERCIALES SEO (préfixe sc-)
   Hub gamme, comparatif, prix, démonstration, entreprises de propreté.
   Les scènes du pack sont en 1672 × 941 : on conserve leur ratio à
   toutes les largeurs (pas de recadrage), width/height réservent la place.
   ════════════════════════════════════════════════════════════ */

/* ─── Hero texte + illustration pleine largeur ──────────────── */
.sc-hero { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(40px, 5vw, 64px); }
.sc-hero-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px clamp(32px, 5vw, 80px); align-items: end; }
.sc-hero-title { display: grid; gap: 22px; justify-items: start; }
.sc-hero-title .display { font-size: clamp(36px, 4.6vw, 64px); max-width: 18ch; }
.sc-hero-side { display: grid; gap: 22px; justify-items: start; padding-bottom: 6px; }
.sc-hero-side p { font-size: 17px; line-height: 1.5; color: var(--steel); }

.sc-fig { margin-top: clamp(32px, 4vw, 56px); border: 1px solid var(--frost); border-radius: var(--r); background: var(--mist); overflow: hidden; }
.sc-fig img { display: block; width: 100%; height: auto; }
.sc-fig figcaption { padding: 12px 18px; font-size: 12px; line-height: 1.45; color: var(--slate); border-top: 1px solid var(--frost); background: var(--white); }
.sc-fig figcaption b { font-weight: 400; color: var(--ink); }

/* ─── Portes d'entrée par besoin ────────────────────────────── */
.sc-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-door { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.8vw, 34px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease); }
.sc-door:hover { border-color: var(--lilac); }
.sc-door .num { font-size: 12px; letter-spacing: .06em; color: var(--indigo); }
.sc-door h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.sc-door p { font-size: 15px; line-height: 1.5; color: var(--steel); }
.sc-door .link-arrow { margin-top: 4px; font-size: 15px; }

/* ─── Tableaux (comparatif, composition du devis) ───────────── */
.sc-tablewrap { width: 100%; overflow-x: auto; border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); }
.sc-tablewrap:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.sc-hint { margin-bottom: 12px; font-size: 13px; color: var(--slate); }
.sc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sc-table caption { padding: 18px 20px; text-align: left; font-size: 13px; line-height: 1.5; color: var(--slate); border-bottom: 1px solid var(--frost); }
.sc-table th, .sc-table td { padding: 16px 18px; text-align: left; vertical-align: top; line-height: 1.45; border-bottom: 1px solid var(--frost); }
.sc-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; color: var(--slate); background: var(--mist); white-space: nowrap; }
.sc-table tbody th { color: var(--ink); font-weight: 400; }
.sc-table td { color: var(--steel); }
.sc-table tbody tr:last-child th, .sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody tr { transition: background-color .3s var(--ease); }
.sc-table tbody tr:hover { background: var(--mist); }
.sc-table .link-arrow { font-size: 14px; white-space: nowrap; }
.sc-model { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 190px; }
.sc-model .thumb { aspect-ratio: 4 / 3; border-radius: 2px; background: var(--mist); overflow: hidden; }
.sc-model .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-model b { display: block; font-weight: 400; color: var(--ink); }
.sc-model small { display: block; margin-top: 2px; font-size: 12px; color: var(--slate); }
.sc-table--cmp { min-width: 940px; }
.sc-table--cost { min-width: 760px; }

/* ─── Étapes numérotées ─────────────────────────────────────── */
.sc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sc-step { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 30px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.sc-step .num { font-size: 12px; letter-spacing: .06em; color: var(--indigo); }
.sc-step h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.sc-step p { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* ─── Fiche d'évaluation vierge ─────────────────────────────── */
.sc-eval { border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); overflow: hidden; }
.sc-eval-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--mist); border-bottom: 1px solid var(--frost); font-size: 13px; color: var(--slate); }
.sc-eval-head b { font-weight: 400; color: var(--ink); }
.sc-eval-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px 24px; padding: 16px 20px; border-bottom: 1px solid var(--frost); }
.sc-eval-row:last-of-type { border-bottom: 0; }
.sc-eval-row b { font-size: 16px; font-weight: 400; color: var(--ink); }
.sc-eval-row span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--slate); }
.sc-eval-blank { align-self: center; height: 1px; background: repeating-linear-gradient(to right, var(--frost) 0 8px, transparent 8px 14px); }
.sc-eval-foot { padding: 16px 20px; background: var(--wash); font-size: 13px; line-height: 1.5; color: var(--ink); }

/* ─── Encadré conditions (essai, périmètre) ─────────────────── */
.sc-note { display: grid; gap: 8px; padding: clamp(20px, 2.4vw, 28px); border: 1px dashed var(--lavender); border-radius: var(--r); background: var(--white); }
.sc-note b { font-size: 16px; font-weight: 400; color: var(--ink); }
.sc-note p, .sc-note li { font-size: 14px; line-height: 1.5; color: var(--steel); }
.sc-note ul { display: grid; gap: 8px; }
.sc-note li { position: relative; padding-left: 20px; }
.sc-note li::before { content: ""; position: absolute; left: 0; top: .72em; width: 11px; height: 1px; background: var(--lavender); }

/* ─── Liens de rebond en fin de section ─────────────────────── */
.sc-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(24px, 3vw, 36px); padding-top: 20px; border-top: 1px solid var(--frost); width: 100%; }
.sc-links .link-arrow { font-size: 15px; }

/* ─── Grille de secteurs (liens vers les pages métier) ──────── */
.sc-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sc-sector { display: grid; align-content: start; gap: 6px; padding: 20px; background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); transition: border-color .4s var(--ease), transform .5s var(--expo); }
.sc-sector:hover { border-color: var(--lilac); transform: translateY(-2px); }
.sc-sector b { font-size: 17px; font-weight: 400; color: var(--ink); }
.sc-sector span { font-size: 14px; line-height: 1.45; color: var(--slate); }

@media (max-width: 1180px) {
  .sc-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sc-hero-head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sc-doors, .sc-steps, .sc-sectors { grid-template-columns: 1fr; }
  .sc-eval-row { grid-template-columns: 1fr; }
  .sc-eval-blank { height: 28px; border: 1px dashed var(--frost); border-radius: 2px; background: none; }
}

.sc-steps.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .sc-steps.is-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sc-steps.is-5 { grid-template-columns: 1fr; } }


/* ─── Lot 2 : checklist imprimable, blocs de méthode ────────── */
.sc-check { display: grid; gap: 1px; background: var(--frost); border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; }
.sc-check-group { padding: 12px 20px; background: var(--mist); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.sc-check-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 14px; padding: 16px 20px; background: var(--white); }
.sc-check-item input { grid-row: 1 / 3; width: 17px; height: 17px; margin-top: 3px; accent-color: var(--indigo); }
.sc-check-item b { font-size: 16px; font-weight: 400; color: var(--ink); }
.sc-check-item span { font-size: 14px; line-height: 1.5; color: var(--steel); }
.sc-print { display: none; }
.js .sc-print { display: inline-flex; }

.sc-formula { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 28px); background: var(--mist); border: 1px solid var(--frost); border-radius: var(--r); }
.sc-formula + .sc-formula { margin-top: 12px; }
.sc-formula b { font-size: 16px; font-weight: 400; color: var(--ink); }
.sc-formula code { display: block; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6; color: var(--indigo); background: var(--white); border: 1px solid var(--lilac); border-radius: var(--r); }
.sc-formula p { font-size: 14px; line-height: 1.55; color: var(--steel); }
.sc-formula ul { display: grid; gap: 8px; }
.sc-formula li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--steel); }
.sc-formula li::before { content: ""; position: absolute; left: 0; top: .72em; width: 11px; height: 1px; background: var(--lavender); }

/* Grille de scénarios : colonnes à remplir, aucune valeur pré-remplie */
.sc-table--blank td { color: var(--smoke); }
.sc-table--blank .fill { display: block; min-height: 20px; border-bottom: 1px dashed var(--frost); }

@media print {
  .nav, .subnav, .mobile-menu, .footer, .sticky-cta, .loader, .ast-launch, .ast-teaser, .ast-panel, .sc-print, .cta-section { display: none !important; }
  .section { padding-block: 12px; }
  .sc-check-item { break-inside: avoid; }
  body { background: #fff; }
  a[href]::after { content: ""; }
}

.footer-col h2 + ul + h2 { margin-top: 28px; }


/* ════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE (FR / EN)
   Drapeaux en SVG : les émojis drapeaux ne sont pas rendus sous Windows.
   Fonctionne sans JavaScript (survol et focus) ; le JS ajoute le clic tactile.
   ════════════════════════════════════════════════════════════ */
.lang-switch { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px;
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--white);
  border: 1px solid var(--frost); border-radius: var(--r); cursor: pointer;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.lang-btn:hover { border-color: var(--lilac); color: var(--indigo); }
.lang-btn .chev { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.lang-switch.is-open .lang-btn .chev { transform: rotate(180deg); }
.lang-code { letter-spacing: .04em; }

.flag { display: block; width: 21px; height: 14px; flex: none; border-radius: 2px; overflow: hidden; border: 1px solid rgba(6, 27, 49, .12); }
.flag svg { display: block; width: 100%; height: 100%; }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; min-width: 168px;
  display: grid; padding: 6px; background: var(--white); border: 1px solid var(--frost);
  border-radius: var(--r);
  opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0);
  transition: opacity .3s var(--ease), transform .45s var(--expo), visibility .3s;
}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu,
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 15px;
  color: var(--ink); border-radius: 2px; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lang-menu a:hover { background: var(--mist); color: var(--indigo); }
.lang-menu a[aria-current="true"] { color: var(--indigo); background: var(--wash); }
.lang-menu a[aria-current="true"]::after { content: ""; width: 6px; height: 6px; margin-left: auto; background: var(--indigo); border-radius: 50%; }

/* Menu mobile : une ligne par langue */
.mm-langs { display: flex; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--frost); }
.mm-langs a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 15px;
  color: var(--ink); border: 1px solid var(--frost); border-radius: var(--r);
}
.mm-langs a[aria-current="true"] { color: var(--indigo); border-color: var(--lilac); background: var(--wash); }

@media (max-width: 960px) {
  .lang-btn { height: 44px; padding: 0 10px; gap: 6px; }
  .lang-btn .lang-code { display: none; }
  .lang-menu { min-width: 156px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu { transition: opacity .01s, visibility .01s; transform: none; }
  .lang-btn .chev { transition: none; }
}

/* ════════════ LOT 3 : BUREAUX, ÉCOLES, SALLES DE SPORT, PARKINGS ════════════ */
/* Carte produit unique : packshot en contain, faits sourcés, liens */
.lx-prod { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border: 1px solid var(--frost); border-radius: var(--r); background: var(--white); overflow: hidden; }
.lx-prod-media { display: grid; place-items: center; padding: clamp(16px, 2.4vw, 32px); background: var(--mist); border-right: 1px solid var(--frost); }
.lx-prod-media img { display: block; width: 100%; max-width: 440px; height: auto; object-fit: contain; object-position: 50% 50%; }
.lx-prod-body { display: grid; align-content: start; justify-items: start; gap: 18px; padding: clamp(24px, 3.2vw, 44px); }
.lx-prod-body h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 300; }
.lx-prod-body > p { font-size: 16px; line-height: 1.55; color: var(--steel); max-width: 60ch; }
.lx-prod-body .kv > div { font-size: 15px; }
.lx-prod-body .kv dd { max-width: 34ch; }
.lx-src { font-size: 12px; line-height: 1.5; color: var(--slate); }
.lx-prod-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.lx-prod-links .link-arrow { font-size: 15px; }

/* Frise des moments de la journée ou de l'année : texte HTML, aucun horaire imposé */
.lx-rhythm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--frost); }
.lx-rhythm li { position: relative; display: grid; align-content: start; gap: 8px; padding: 28px 24px 4px 0; }
.lx-rhythm li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--indigo); }
.lx-when { font-size: 12px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.lx-rhythm b { font-size: 19px; line-height: 1.25; font-weight: 300; color: var(--ink); }
.lx-rhythm p { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* Revêtements : chaque carte porte un statut à vérifier, jamais une coche de compatibilité */
.lx-floors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lx-floor { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 30px); background: var(--white); border: 1px solid var(--frost); border-radius: var(--r); }
.lx-floor h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 300; }
.lx-floor p { font-size: 15px; line-height: 1.5; color: var(--steel); }
.lx-status { justify-self: start; padding: 4px 10px; font-size: 12px; letter-spacing: .02em; color: var(--indigo); background: var(--wash); border: 1px solid var(--lilac); border-radius: 9999px; }
.lx-status.is-strict { color: var(--ink); background: var(--mist); border-color: var(--frost); }

/* Figure accompagnant un texte (ratio d'origine conservé, pas de recadrage) */
.lx-duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lx-duo .sc-fig { margin-top: 0; }
.lx-duo-text { display: grid; gap: 18px; justify-items: start; }
.lx-duo-text > p { font-size: 16px; line-height: 1.55; color: var(--steel); }

@media (max-width: 960px) {
  .lx-rhythm { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--frost); margin-left: 7px; }
  .lx-rhythm li { padding: 0 0 26px 24px; }
  .lx-rhythm li:last-child { padding-bottom: 0; }
  .lx-rhythm li::before { top: 2px; left: -8px; }
  .lx-floors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-duo { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .lx-prod { grid-template-columns: 1fr; }
  .lx-prod-media { border-right: 0; border-bottom: 1px solid var(--frost); }
  .lx-prod-media img { max-width: 360px; }
}
@media (max-width: 640px) {
  .lx-floors { grid-template-columns: 1fr; }
  .lx-prod-body .kv > div { flex-direction: column; gap: 4px; }
  .lx-prod-body .kv dd { text-align: left; max-width: none; }
}

/* ════════════ RECETTE : ACCESSIBILITÉ ════════════ */
/* Contrastes sur fond lavande (#e8e9ff) */
.sim-card .eyebrow, .sim-card .fineprint { color: var(--steel); }
.sol-card.is-featured .num { color: var(--steel); }
/* Liens dans un texte courant : repérables autrement que par la couleur */
.fineprint a:not(.link-arrow) { text-decoration: underline; text-underline-offset: 2px; }
.lead a:not(.link-arrow):not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* Pause des contenus animés en continu (bandeau des secteurs, vidéo) */
.marquee-wrap { position: relative; }
.motion-toggle {
  position: absolute; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; border: 1px solid var(--frost); background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.motion-toggle:hover { border-color: var(--lilac); background: #fff; }
.motion-toggle:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.motion-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.motion-toggle .i-play, .motion-toggle.is-paused .i-pause { display: none; }
.motion-toggle.is-paused .i-play { display: block; }
.marquee-wrap > .motion-toggle { right: clamp(8px, 2vw, 20px); top: 50%; transform: translateY(-50%); }
.action-overlay > .motion-toggle { position: static; }
.role.is-robot h3, .note-row .eyebrow, .sw-legend span { color: var(--steel); }

/* Détourage visuel du robot GREEN ONE (photo de studio sur fond blanc) : le blanc prend la couleur de la carte,
   sans modifier le fichier image. Uniquement sur des cartes claires. */
img[src*="green-one-studio"] { mix-blend-mode: multiply; }
.mc-img, .robot-media, .spec-visual { isolation: isolate; }