/* ============================================================
   AIRFIT — VARIANTE 3 « SHOWROOM TECHNIQUE »
   Palette stricte : #FFFFFF · #001231 · #01549D · #E5E6E9
   Typo : Barlow + Barlow Semi Condensed (vendorées)
   ============================================================ */

/* ---------------- Fonts ---------------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-semi-condensed-latin-800-normal.woff2') format('woff2'); }

/* ---------------- Tokens ---------------- */
:root {
  --white: #FFFFFF;
  --navy: #001231;
  --blue: #01549D;
  --grey: #E5E6E9;
  /* nuances intermédiaires (mix des 4 couleurs uniquement) */
  --navy-90: #071F3E;
  --navy-80: #0A2C55;
  --navy-70: #123F73;
  --blue-70: #2E6BAD;
  --blue-40: #7FA8D1;
  --blue-20: #C9D8E9;
  --blue-10: #E8EEF6;
  --ink-soft: #47597A;         /* texte secondaire sur fond clair */
  --paper: #F6F7F9;            /* fond clair général */
  --line-grid: #E5E6E9;
  --grad-signature: linear-gradient(135deg, #001231 0%, #01549D 55%, #FFFFFF 160%);
  --font: 'Barlow', system-ui, sans-serif;
  --font-cond: 'Barlow Semi Condensed', 'Barlow', sans-serif;
  --pad-x: clamp(20px, 5vw, 84px);
  --nav-h: 76px;
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html, body { max-width: 100%; overflow-x: clip; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--navy);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }

::selection { background: var(--blue); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .hero :focus-visible, .closing-cta :focus-visible { outline-color: var(--white); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--navy); color: var(--white);
  padding: 10px 18px; font-weight: 600; font-size: 14px; border-radius: 4px;
  transition: top .2s ease;
}
.skip-link:focus-visible { top: 12px; }

/* ---------------- Vocabulaire technique partagé ---------------- */

/* Label uppercase façon fiche d'ingénierie */
.tech-label {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tech-label::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
}
.on-dark .tech-label { color: var(--blue-40); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  position: relative;
}
.btn-solid { background: var(--blue); color: var(--white); }
.btn-solid:hover { background: var(--blue-70); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(1, 84, 157, .35); }
.btn-ghost { color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--white); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-70); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 18, 49, .28); }
/* même dégradé que la numérotation des espaces (#1, #2, #3) */
.btn-grad {
  background: linear-gradient(90deg, #01579E 0%, #00A3BE 100%);
  color: var(--white);
}
.btn-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 130, 170, .38);
}
.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 18, 49, .4); }
.btn .arr { transition: transform .25s ease; }
.btn:hover .arr { transform: translateX(4px); }

/* En-têtes de section */
.section-head {
  padding: 0 var(--pad-x);
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.section-head h2 {
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 17ch;
  text-wrap: balance;
}
.section-head .head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.section-head p.lead { color: var(--ink-soft); max-width: 52ch; font-size: clamp(15px, 1.4vw, 18px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  color: var(--white);
  transition: background .35s ease, box-shadow .35s ease, color .35s ease, height .35s ease;
}
/* plus de bandeau/fond au scroll : le header reste transparent, seul le CTA flotte */
/* pendant la scène des espaces, le CTA expert s'efface pour laisser la place aux encarts */
html.espaces-actifs .nav .nav-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: opacity .3s ease, visibility .3s ease;
}
/* dès qu'on descend dans la page : plus de header, seul le CTA reste, flottant */
.nav.is-scrolled .nav-logo,
.nav.is-scrolled .nav-links a:not(.nav-cta) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* logo horizontal : hauteur réduite pour compenser sa largeur */
.nav-logo img { height: 22px; width: auto; display: block; transition: height .35s ease; }
.nav.is-scrolled .nav-logo img { height: 19px; }
.nav-logo span { color: var(--blue-40); font-weight: 500; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
.nav-links a {
  font-weight: 500; font-size: 14px; letter-spacing: .06em;
  opacity: .85; transition: opacity .2s ease;
  padding: 8px 2px;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px 0 22px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--white);
  opacity: 1;
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(1, 84, 157, .38), inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav-cta .arr {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 13px;
  transition: transform .25s ease, background .25s ease;
}
.nav-cta:hover {
  background: var(--blue-70);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(1, 84, 157, .5), inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.nav-cta:hover .arr { transform: translateX(2px); background: rgba(255, 255, 255, .26); }
@media (max-width: 720px) {
  .nav-links a:not(.nav-cta) { display: none; }
}
@media (max-width: 480px) {
  /* évite le retour à la ligne du CTA du header sur très petits écrans */
  :root { --pad-x: clamp(16px, 5vw, 84px); }
  .nav-links a.nav-cta { padding: 0 6px 0 16px; font-size: 12.5px; gap: 6px; white-space: nowrap; }
  .nav-cta .arr { width: 22px; height: 22px; font-size: 11px; }
  .nav-logo span { display: none; }
}

/* ============================================================
   1 · HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--navy);
  color: var(--white);
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* grille technique sombre */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(229,230,233,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229,230,233,.055) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
}
.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-platform {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  will-change: transform;
}
.hero-platform svg { width: 100%; height: 100%; overflow: visible; }
.hero-platform img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 40% at 50% 70%, rgba(0,18,49,.66) 0%, rgba(0,18,49,.34) 48%, transparent 78%),
    linear-gradient(180deg, rgba(0,18,49,.38) 0%, transparent 22%);
}
.hero-halo {
  position: absolute;
  top: 6%; right: -8%;
  width: min(72vw, 1050px);
  aspect-ratio: 1.2;
  z-index: 2;
  background: radial-gradient(closest-side, rgba(1,84,157,.55), rgba(1,84,157,.18) 55%, transparent 75%);
  filter: blur(10px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 24px) var(--pad-x) clamp(88px, 10vh, 112px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  justify-content: flex-end;
}
.hero-copy { position: relative; z-index: 3; width: 100%; padding-bottom: 0; text-align: center; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-ctas .btn {
  min-height: 58px;
  padding: 16px 36px;
  font-size: 16.5px;
}

/* Cotes : couleur selon contexte */
.platform-svg .dim { stroke: currentColor; stroke-width: 1.1; fill: none; }
.platform-svg .dim-dot { fill: currentColor; }
.platform-svg .dim-t {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  fill: currentColor;
}
.platform-svg .dim-t--sub { font-family: var(--font); font-weight: 500; font-size: 9.5px; letter-spacing: .22em; opacity: .75; }
/* sur petit écran, le SVG rétrécit : on grossit les cotes en unités utilisateur */
@media (max-width: 700px) {
  .platform-svg .dim-t { font-size: 21px; }
  .platform-svg .dim-t--sub { font-size: 13px; }
  .platform-svg .dim { stroke-width: 1.5; }
}
.platform-svg .reg-cross line { stroke: currentColor; stroke-width: 1; opacity: .55; }
.hero-platform { color: rgba(229, 230, 233, .85); }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(229,230,233,.55);
}
.hero-scroll .mouse {
  width: 23px; height: 36px;
  border: 1.5px solid rgba(229, 230, 233, .5);
  border-radius: 13px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.hero-scroll .wheel {
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--white);
  animation: mouseWheel 1.9s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes mouseWheel {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  55% { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(11px); opacity: 0; }
}
.hero-scroll .chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid rgba(229, 230, 233, .55);
  border-bottom: 1.5px solid rgba(229, 230, 233, .55);
  animation: chevBounce 1.9s ease-in-out infinite;
}
@keyframes chevBounce {
  0%, 100% { transform: rotate(45deg) translate(-1px, -1px); opacity: .45; }
  50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}

@media (max-width: 980px) {
  .hero-inner { max-width: 100%; padding-top: calc(var(--nav-h) + 20px); }
  .hero-platform img { object-position: center 62%; }
  .hero-halo { top: -4%; right: -30%; width: 120vw; }
}
@media (max-width: 600px) {
  .hero-inner { padding-bottom: clamp(88px, 14svh, 108px); }
  .hero-ctas .btn { min-height: 54px; padding: 14px 28px; font-size: 15px; }
}

/* ============================================================
   1bis · BARRE DE CONFIANCE (logos villes, marquee, couleurs naturelles)
   ============================================================ */
.trust-bar {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--grey);
  padding: clamp(28px, 4vh, 44px) 0;
}
.trust-bar-inner { max-width: 1560px; margin: 0 auto; }
.trust-viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-marquee {
  display: flex;
  width: max-content;
  animation: trustScroll var(--trust-dur, 45s) linear infinite;
  will-change: transform;
}
.trust-marquee.is-paused { animation-play-state: paused; }
@keyframes trustScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.trust-lane { display: flex; align-items: center; gap: clamp(28px, 4vw, 52px); padding-right: clamp(28px, 4vw, 52px); }
.trust-chip {
  flex: none;
  display: grid;
  place-items: center;
  height: 73px;
  opacity: .88;
  transition: opacity .25s ease, transform .25s ease;
}
.trust-chip:hover { opacity: 1; transform: translateY(-1px); }
.trust-chip img { height: 64px; width: auto; max-width: 210px; object-fit: contain; }
.trust-chip--badge { border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--grey); }
.trust-chip--badge img { height: 73px; width: 73px; max-width: none; border-radius: 50%; }
.trust-chip--text {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .trust-chip { height: 56px; }
  .trust-chip img { height: 48px; }
  .trust-chip--badge img { height: 56px; width: 56px; }
}

/* ============================================================
   2 · NOS AIRES (showcase plein écran)
   ============================================================ */
.aires {
  position: relative;
  /* enchaînement direct sur la section suivante : aucune bande claire sous les espaces */
  background: var(--navy);
  padding: 0;
  scroll-margin-top: 0;
}
.aires-scene {
  --aires-progress: 0%;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: clip;
  isolation: isolate;
  background: var(--navy);
}
.aires-scene__cards {
  position: absolute;
  inset: 0;
}
.aires--pinned .aire-card {
  position: absolute;
  inset: 0;
}
.aires--static .aires-scene {
  height: auto;
  overflow: visible;
}
.aires--static .aires-scene__cards {
  position: relative;
}
.aires--static .aires-scene > .plateau-heading,
.aires--static .aires-progress {
  display: none;
}
.aires-scroll-hint {
  position: absolute;
  z-index: 7;
  top: 50%;
  right: clamp(14px, 2.2vw, 34px);
  width: 36px;
  height: 184px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--white);
  opacity: .88;
  transform: translateY(-50%);
  pointer-events: auto;
  filter: drop-shadow(0 2px 7px rgba(0, 18, 49, .42));
}
/* jauge continue : montre où l'on se situe dans la traversée des espaces */
.aires-scroll-hint__track {
  width: 32px;
  height: 148px;
  flex: 0 0 148px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 7px;
}
.aires-scroll-hint__segment {
  position: relative;
  width: 32px;
  min-height: 30px;
  padding: 0;
  justify-self: center;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}
.aires-scroll-hint__segment::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 1px 4px rgba(0, 18, 49, .38);
  transform: translateX(-50%);
  transition: width .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.aires-scroll-hint__segment:hover::before {
  width: 9px;
  background: rgba(255, 255, 255, .96);
}
.aires-scroll-hint__segment:focus-visible::before {
  width: 9px;
  background: var(--white);
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--white), 0 2px 9px rgba(0, 18, 49, .62);
}
.aires-scroll-hint__segment.is-active::before {
  width: 11px;
  background: rgba(255, 255, 255, .34);
  box-shadow: 0 0 0 2px var(--white), 0 2px 10px rgba(0, 18, 49, .68);
  transform: translateX(-50%) scaleY(1.04);
}
/* remplissage progressif de la pastille pendant le scroll de son espace */
.aires-scroll-hint__segment::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  width: 7px;
  height: calc((100% - 4px) * var(--fill, 0));
  border-radius: 999px;
  background: linear-gradient(180deg, #01579E 0%, #00A3BE 100%);
  transform: translateX(-50%);
  transform-origin: top;
  transition: height .16s linear, width .2s ease;
  pointer-events: none;
}
.aires-scroll-hint__segment.is-active::after { width: 11px; }
.aires-scroll-hint__segment:hover::after { width: 9px; }
.aires-scroll-hint__chevron {
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  pointer-events: none;
  transform: rotate(45deg);
  animation: aires-hint-descent 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes aires-hint-descent {
  0%, 100% { opacity: .32; transform: translateY(-3px) rotate(45deg); }
  48% { opacity: 1; transform: translateY(3px) rotate(45deg); }
}
.aires--static .aires-scroll-hint {
  position: sticky;
  top: 50vh;
  right: auto;
  margin-right: clamp(14px, 2.2vw, 34px);
  margin-bottom: -170px;
  margin-left: auto;
}
.aires-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 40px);
  max-width: 760px;
  margin: clamp(38px, 5vh, 60px) auto 0;
  padding: clamp(32px, 4vw, 44px) clamp(24px, 6vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 20px);
  text-align: center;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(125deg, rgba(1, 84, 157, .58), rgba(255, 255, 255, .9) 42%, rgba(0, 18, 49, .2)) border-box;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 52px rgba(0, 18, 49, .11), 0 2px 8px rgba(0, 18, 49, .05);
}
.aires-cta > *:not(.aires-cta__glow):not(.aires-cta__watermark) {
  position: relative;
  z-index: 2;
}
.aires-cta__glow {
  position: absolute;
  z-index: 0;
  top: -48%;
  left: -18%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 84, 157, .2) 0%, rgba(1, 84, 157, .07) 43%, transparent 72%);
  opacity: .72;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
  animation: aires-cta-drift 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aires-cta-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: .58; }
  100% { transform: translate3d(118%, 34%, 0) scale(1.12); opacity: .82; }
}
.aires-cta__watermark {
  position: absolute;
  z-index: 1;
  right: -3%;
  bottom: -12%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(1, 84, 157, .08);
  font-family: var(--font-cond);
  font-size: clamp(70px, 11vw, 132px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.055em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.aires-cta h3 {
  max-width: 24ch;
  color: var(--navy);
  font-family: var(--font-cond);
  font-size: clamp(27px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.aires-cta h3 span { color: var(--blue); }
.aires-cta .btn {
  min-width: 238px;
  box-shadow: 0 10px 24px rgba(1, 84, 157, .18);
  transition: transform .32s cubic-bezier(.2, .75, .25, 1), box-shadow .32s ease, background .25s ease;
}
.aires-cta .btn:hover,
.aires-cta .btn:focus-visible {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 18px 40px rgba(1, 84, 157, .38), 0 0 0 6px rgba(1, 84, 157, .07);
}
.aires-cta .btn .arr { transition: transform .32s cubic-bezier(.2, .75, .25, 1); }
.aires-cta .btn:hover .arr,
.aires-cta .btn:focus-visible .arr { transform: translateX(7px); }

.aire-card {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  background: var(--navy);
}

.aire-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: clip;
  background: var(--navy);
}
.aire-visual-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--navy);
}
.aire-visual-layer img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  will-change: transform;
}
.aire-card[data-model="compact"] .aire-visual-layer img { object-position: center 54%; }
.aire-card[data-model="signature"] .aire-visual-layer img { object-position: center 52%; }
.aire-card[data-model="confirme"] .aire-visual-layer img { object-position: center 54%; }
/* Arena : vraie photo installée, plein cadre comme les autres espaces */
.aire-card[data-model="arena"] .aire-visual-layer img { object-position: center 58%; }

/* Vraie séparation entre deux espaces empilés : un petit espace navy entre
   chaque carte, aux coins arrondis, plutôt qu'un simple trait décoratif. */
.aires--static .aires-scene__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
  padding-inline: clamp(10px, 1.4vw, 18px);
}
.aires--static .aire-card {
  border-radius: clamp(16px, 1.8vw, 26px);
}

/* Le dégradé reste léger : il protège la lecture du heading sans masquer la
   photo. Le heading est un élément partagé par les quatre états épinglés. */
.aire-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(0, 18, 49, .68) 0%, rgba(0, 18, 49, .16) 42%, transparent 66%),
    linear-gradient(to top, rgba(0, 18, 49, .25), transparent 36%);
}
.plateau-heading {
  position: absolute;
  z-index: 5;
  /* marge haute = marge gauche pour un calage visuel homogène dans le coin */
  top: clamp(12px, 2.2vw, 34px);
  left: clamp(12px, 2.2vw, 34px);
  width: min(58vw, 850px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--white);
  pointer-events: none;
}
.aires--pinned .plateau-heading__title-line {
  will-change: transform, opacity;
}
/* le # est aligné sur le milieu du chiffre, pas en exposant */
.plateau-heading__ord {
  font-size: .72em;
  vertical-align: baseline;
  letter-spacing: -.01em;
  margin-right: .02em;
}
.plateau-heading__number {
  display: inline-block;
  background: linear-gradient(90deg, #01579E 0%, #00A3BE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--white);
  paint-order: stroke fill;
  font: inherit;
  /* numérotation un cran au-dessus du reste du titre */
  font-size: 1.18em;
  line-height: 1;
}
/* largeur figée par lettre pendant le défilement "machine à sous" (Arena),
   pour que le mot ne tremble pas quand les lettres changent. */
.plateau-heading__slot-char { display: inline-block; min-width: .62em; text-align: center; }
.plateau-heading__title {
  font-family: var(--font-cond);
  font-size: clamp(1.65rem, 3vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .88;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  text-shadow: 0 4px 22px rgba(0, 18, 49, .32);
  white-space: nowrap;
}
.plateau-heading__title-line { display: inline-block; }
.plateau-heading > .plateau-heading__number,
.plateau-heading > .plateau-heading__price { display: none; }
.plateau-heading--static {
  display: none;
}
.aires--static .plateau-heading--static {
  display: flex;
}
.aires-progress {
  position: absolute;
  z-index: 6;
  left: clamp(18px, 4.4vw, 84px);
  right: clamp(18px, 4.4vw, 84px);
  bottom: clamp(10px, 1.8vh, 20px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(5px, .7vw, 12px);
  pointer-events: none;
}
.aires-progress__segment {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 1px rgba(0, 18, 49, .12);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Tous les panneaux posent leur contenu directement sur la photo. */
.aire-info {
  position: absolute;
  z-index: 4;
  width: min(360px, calc(100vw - 32px));
  padding-block: clamp(12px, 1.1vw, 17px);
  padding-inline: 6px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 20px;
  box-shadow: none;
  text-shadow: 0 2px 13px rgba(0, 18, 49, .72);
}
.aire-card[data-desc-pos="bottom-left"] .aire-info {
  left: 6px;
  bottom: 6px;
}
/* Espace 2 et Espace 3 : voile de lecture au coin bas-droit plutot qu'a
   gauche par defaut (photos avec le point d'interet a droite), le bloc
   prix/CTA restant lui a sa place habituelle en bas-gauche. */
.aire-card[data-model="signature"]::after,
.aire-card[data-model="confirme"]::after {
  background:
    linear-gradient(315deg, rgba(0, 18, 49, .68) 0%, rgba(0, 18, 49, .16) 42%, transparent 66%),
    linear-gradient(to top, rgba(0, 18, 49, .25), transparent 36%);
}
.aire-includes {
  padding-top: 0;
}
.aire-panel-price {
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: 0;
}
.aire-panel-price strong {
  display: block;
  color: var(--white);
  font-family: var(--font-cond);
  font-size: clamp(26px, 2.34vw, 32.5px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1;
}
.aire-includes-title {
  margin-bottom: 7px;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}
.aire-includes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.aire-included-item {
  appearance: none;
  min-width: 0;
  padding: 7px 4px 6px;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--white);
  background: rgba(0, 18, 49, .42);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  border-radius: 11px;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 18, 49, .2);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.aire-included-item:hover,
.aire-included-item:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .72);
  background: rgba(1, 84, 157, .84);
  box-shadow: 0 7px 16px rgba(0, 18, 49, .12);
}
.aire-included-item:active {
  transform: translateY(0);
  border-color: rgba(255, 255, 255, .72);
  background: rgba(1, 84, 157, .94);
  box-shadow: 0 2px 6px rgba(0, 18, 49, .12);
}
.aire-included-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--white);
}
.aire-included-icon svg { width: 24px; height: 24px; }
.aire-info .btn { width: 100%; min-height: 44px; margin-top: 10px; }

/* Points d'équipement superposés aux photos. Leur position en pixels est
   recalculée en JS à partir du repère source et du recadrage object-fit. */
.hotspots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform-origin: center;
}
.hotspot {
  position: absolute;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 4px 18px rgba(0,18,49,.3), 0 0 0 1px rgba(1,84,157,.28);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.hotspot::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  animation: hspulse 2.6s ease-out infinite;
}
@keyframes hspulse {
  0% { transform: scale(.7); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
.hotspot svg { width: 15px; height: 15px; transition: transform .25s ease; }
.hotspot:hover, .hotspot:focus-visible { background: var(--blue); color: var(--white); box-shadow: 0 6px 22px rgba(0,18,49,.4); }
.hotspot:hover svg, .hotspot:focus-visible svg { transform: rotate(45deg); }
/* Point plus discret sur la planche proprio : elle est petite, un gros
   rond la cacherait entièrement. */
.hotspot[aria-label*="Planche proprioceptive"] { width: 30px; height: 30px; }
.hotspot[aria-label*="Planche proprioceptive"] svg { width: 11px; height: 11px; }

@media (max-width: 1100px) {
  .plateau-heading { width: min(78vw, 620px); }
  .aire-info { width: min(340px, calc(100vw - 24px)); padding-block: 13px; border-radius: 17px; }
}
@media (max-width: 600px) {
  /* Les photos sont au format paysage ; en plein écran portrait, un simple
     object-fit: cover les recadre à ~25% de leur largeur (l'équipement peut
     sortir du cadre). On garde la photo entière (contain) et on comble les
     bandes avec un fond flouté de la même image, sans toucher au desktop
     ni déplacer/recréer les fichiers photo. */
  .aire-visual-layer {
    background: var(--visual-bg) center / cover no-repeat, var(--navy);
  }
  .aire-visual-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--visual-bg) center / cover no-repeat;
    filter: blur(34px) brightness(.55) saturate(1.15);
    transform: scale(1.15);
  }
  .aire-visual-layer img {
    position: relative;
    z-index: 1;
    object-fit: contain;
    object-position: center;
  }
  .plateau-heading {
    top: calc(var(--nav-h) + 5px);
    left: 12px;
    width: calc(100vw - 24px);
  }
  .plateau-heading__title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .aire-card[data-desc-pos="bottom-left"] .aire-info { left: 6px; bottom: 6px; }
  .aire-info { width: calc(100vw - 24px); padding-block: 12px; }
  .aire-panel-price { margin-bottom: 7px; }
  .aire-included-item { padding: 5px 3px 4px; font-size: 9px; }
  .aire-included-icon { width: 24px; height: 24px; }
  .aire-included-icon svg { width: 21px; height: 21px; }
  .aire-info .btn { min-height: 41px; margin-top: 7px; font-size: 12px; }
  .hotspot { width: 38px; height: 38px; }
  .aires-progress { left: 12px; right: 12px; bottom: 10px; }
  .aires-scroll-hint { right: 8px; opacity: .6; }
}
@media (max-width: 420px) {
  .plateau-heading__title { white-space: normal; }
}
@media (max-height: 680px) {
  .aire-info { padding-block: 10px; }
  .aire-panel-price { margin-bottom: 6px; }
  .aire-included-item { padding-block: 3px; }
  .aire-info .btn { min-height: 40px; margin-top: 6px; }
}

/* ============================================================
   5 · TIMELINE CLÉ EN MAIN
   ============================================================ */
.process {
  background: var(--navy);
  color: var(--white);
  padding: clamp(64px, 8vh, 100px) 0;
  position: relative;
  overflow: clip;
}
.process::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(229,230,233,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229,230,233,.05) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
}
.process .section-head { margin-bottom: clamp(40px, 6vh, 72px); position: relative; }
.process .section-head p.lead { color: var(--blue-20); }

/* étapes « clé en main » — grands titres reliés par un rail animé */
.tl {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 46px var(--pad-x) 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1.6vw, 26px);
}
.tl-rail {
  position: absolute;
  top: 78px;
  left: calc(10% + 0.8 * var(--pad-x));
  right: calc(10% + 0.8 * var(--pad-x));
  height: 2px;
  transform: translateY(-50%);
  background: rgba(229, 230, 233, .16);
  z-index: 0;
}
.tl-rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue-40), var(--blue));
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 16px rgba(1, 84, 157, .6);
}
.tl-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 0 4px;
}
.tl-node {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue-40);
  background: var(--navy);
  border: 1.5px solid rgba(127, 168, 209, .38);
  box-shadow: 0 0 0 7px var(--navy);
  transition: color .5s ease, background .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s ease;
}
.tl-node svg { width: 27px; height: 27px; }
.tl-step.is-in .tl-node {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 7px var(--navy), 0 14px 34px rgba(1, 84, 157, .45);
  transform: translateY(-2px);
}
.tl-body { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.tl-num {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--blue-40);
}
.tl-step h3 {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(17px, 1.85vw, 30px);
  line-height: 1.06;
  letter-spacing: -.005em;
  text-transform: uppercase;
  max-width: 12ch;
}
@media (max-width: 760px) {
  .tl { grid-template-columns: 1fr; gap: 4px; padding: 22px var(--pad-x) 0; }
  .tl-rail {
    top: 34px; bottom: 34px;
    left: calc(var(--pad-x) + 26px);
    right: auto;
    width: 2px; height: auto;
    transform: none;
    background: linear-gradient(180deg, var(--blue-40), var(--blue));
    opacity: .5;
  }
  .tl-rail-fill { display: none; }
  .tl-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
    padding: 12px 0;
  }
  .tl-node { width: 54px; height: 54px; flex: none; box-shadow: 0 0 0 6px var(--navy); }
  .tl-node svg { width: 23px; height: 23px; }
  .tl-step.is-in .tl-node { box-shadow: 0 0 0 6px var(--navy), 0 12px 28px rgba(1, 84, 157, .45); }
  .tl-body { align-items: flex-start; gap: 3px; }
  .tl-step h3 { font-size: 21px; max-width: none; }
}

/* Chiffres de réassurance intégrés à la section méthode (fond navy) */
.process-figures {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  max-width: 1240px;
  margin: clamp(52px, 8vh, 100px) auto 0;
  padding: 0 var(--pad-x);
}
.process-figures .figure-panel {
  padding: 0 clamp(8px, 1.5vw, 20px);
  min-height: auto;
}
.process .figure-value { color: var(--white); }
.process .figure-value .sign, .process .figure-value .unit { color: var(--blue-40); }
.process .figure-caption { color: var(--blue-20); }
@media (max-width: 700px) {
  .process-figures { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   7 · CHIFFRES XXL
   ============================================================ */
.figures {
  background: var(--white);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1560px;
  margin: 0 auto;
}
.figure-panel {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(36px, 5vw, 56px) clamp(16px, 2.5vw, 32px);
  position: relative;
  overflow: clip;
  text-align: center;
}
.figure-panel + .figure-panel { border-left: 1px solid var(--grey); }
.figure-value {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.figure-value .sign, .figure-value .unit { color: var(--blue); }
.figure-value .unit { font-size: .5em; }
.odo { display: inline-flex; overflow: hidden; }
.odo .odo-digit { display: inline-block; height: .95em; overflow: hidden; }
.odo .odo-strip { display: flex; flex-direction: column; transform: translateY(0); }
.odo .odo-strip span { display: block; height: .95em; line-height: .95; }
.figure-caption {
  color: var(--ink-soft);
  font-size: 13px;
  max-width: 26ch;
  text-align: center;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .figures { grid-template-columns: 1fr; }
  .figure-panel + .figure-panel { border-left: none; border-top: 1px solid var(--grey); }
}

/* ============================================================
   8 · RÉALISATIONS — galerie horizontale
   ============================================================ */
.works {
  --works-gap: clamp(16px, 2vw, 28px);
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: clip;
  padding-bottom: clamp(70px, 10vh, 120px);
}
.works-head-inner {
  padding: clamp(90px, 12vh, 150px) var(--pad-x) 44px;
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.works-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}
.works-cta { min-height: 46px; padding: 0 16px 0 24px; }
.works h2 {
  font-weight: 800;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: -.015em;
  line-height: 1.04;
  max-width: 16ch;
}
.works .tech-label { margin-bottom: 14px; }
.works-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--blue-40);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.works-all:hover { color: var(--white); border-color: rgba(255, 255, 255, .4); }
.works-all .arr { transition: transform .25s ease; }
.works-all:hover .arr { transform: translateX(4px); }

/* Marquee horizontal auto */
.works-viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}
.works-marquee {
  display: flex;
  width: max-content;
  animation: worksScroll var(--marquee-dur, 60s) linear infinite;
  will-change: transform;
}
.works-marquee.is-paused { animation-play-state: paused; }
@keyframes worksScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.works-lane {
  display: flex;
  gap: var(--works-gap);
  padding-right: var(--works-gap);
}
.work-card {
  position: relative;
  flex: none;
  width: clamp(290px, 32vw, 440px);
  height: clamp(380px, 56vh, 580px);
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy-90);
  isolation: isolate;
  transition: transform .4s cubic-bezier(.2, .6, .2, 1), box-shadow .4s ease;
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
}
.work-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cpath d='M0 87.5h88M87.5 0v88' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #001231 0%, #01549D 78%, #7FA8D1 145%);
}
.work-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.55) brightness(.9);
  transition: transform .8s cubic-bezier(.2, .6, .2, 1), filter .5s ease;
}
.work-card:hover .work-media img { transform: scale(1.06); filter: saturate(.85) brightness(1); }
.work-card.no-img .work-media img { display: none; }
.work-media .work-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .1);
  pointer-events: none;
}
.work-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,18,49,.9) 4%, rgba(0,18,49,.15) 48%, transparent 70%);
}
.work-fiche {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  z-index: 2;
}
.work-region {
  display: inline-block;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-40);
  margin-bottom: 8px;
}
.work-fiche h3 {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}
.work-go {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  transition: background .3s ease, transform .3s ease;
}
.work-card:hover .work-go { background: var(--blue); border-color: var(--blue); transform: translateX(3px); }
@media (max-width: 700px) {
  .work-card { width: clamp(230px, 78vw, 320px); height: clamp(320px, 62vh, 440px); }
}

/* ============================================================
   9 · POPUP CONTACT — formulaire réutilisé dans .aire-modal
   ============================================================ */
.aire-modal-step2 h3 { font-weight: 800; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.05; letter-spacing: -.01em; margin: 10px 0 14px; }
.aire-modal-step2 h3 .dot { color: var(--blue); }
.aire-modal-step2 .lead { color: var(--ink-soft); font-size: 15px; margin-bottom: 20px; }
.aire-modal-step2 .lead strong { color: var(--navy); }
.aire-modal-step2 .mon-aire-form { border: 0; box-shadow: none; padding: 0; }
.mon-aire-recap { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.mon-aire-recap li {
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: 999px;
  padding: 9px 16px;
}
.mon-aire-recap li span { color: var(--blue); font-weight: 700; }

/* Formulaire — carte compacte, posée sur le fond clair */
.mon-aire-form {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: 16px;
  padding: clamp(26px, 3.2vw, 36px);
  box-shadow: 0 24px 60px rgba(0, 18, 49, .1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mon-aire-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mon-aire-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mon-aire-form input {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--grey);
  border-radius: 8px;
  padding: 11px 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mon-aire-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-10);
}
.mon-aire-form .btn { width: 100%; min-height: 54px; margin-top: 4px; }
.mon-aire-form .form-note { font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink-soft); text-align: center; }

/* état confirmé : le contenu du formulaire est remplacé par un message (voir JS) */
.mon-aire-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 20px 0;
}
.mon-aire-confirm .check {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blue-10);
  color: var(--blue);
  display: grid;
  place-items: center;
}
.mon-aire-confirm .check svg { width: 24px; height: 24px; }
.mon-aire-confirm h3 { font-family: var(--font-cond); font-weight: 800; font-size: 22px; }
.mon-aire-confirm p { color: var(--ink-soft); font-size: 14.5px; max-width: 34ch; }

@media (max-width: 900px) {
  .mon-aire-form .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   9bis · CLÔTURE
   ============================================================ */
.closing-cta {
  position: relative;
  /* fond sombre aligné sur les sections voisines */
  background: var(--navy);
  color: var(--white);
  overflow: clip;
  padding: clamp(80px, 11vh, 140px) var(--pad-x);
  text-align: center;
}
/* mots accentués : même dégradé que les numéros d'espace */
.grad-accent {
  font-style: normal;
  background: linear-gradient(90deg, #01579E 0%, #00A3BE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.closing-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
}
.cta-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 110vmin; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.14), transparent 70%);
  pointer-events: none;
}
.closing-cta-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.closing-cta-inner .tech-label { color: rgba(255,255,255,.75); }
.closing-cta-inner .tech-label::before { background: rgba(255,255,255,.6); }
.closing-cta h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* conseil expert, placé juste après les chiffres */
.process-cta {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: clamp(48px, 7vh, 88px) auto 0;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.process-cta h3 {
  max-width: 30ch;
  color: var(--white);
  font-weight: 800;
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ============================================================
   10 · FOOTER
   ============================================================ */
.footer-v2 {
  background: var(--navy);
  color: var(--blue-20);
  border-top: 1px solid rgba(229, 230, 233, .1);
}
.footer-top {
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(48px, 6vh, 72px) var(--pad-x) 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-logo img { height: 20px; width: auto; display: block; }
.footer-logo em { font-style: normal; color: var(--blue-40); font-weight: 500; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.footer-brand p { font-size: 13.5px; line-height: 1.6; max-width: 34ch; color: var(--blue-20); }
.footer-col { display: flex; flex-direction: column; gap: 3px; }
.footer-col-title {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-40);
  margin-bottom: 10px;
}
.footer-col a { opacity: .85; transition: opacity .2s ease; padding: 6px 0; font-size: 14px; }
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  max-width: 1560px;
  margin: 0 auto;
  padding: 20px var(--pad-x) 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--blue-20);
  border-top: 1px solid rgba(229, 230, 233, .1);
}
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: inherit; opacity: .85; transition: opacity .2s ease; }
.footer-legal a:hover { opacity: 1; }
@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}

html.no-scroll { overflow: hidden; }

/* Popup équipement */
.hs-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 24px; }
.hs-modal[hidden] { display: none; }
.hs-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 18, 49, .68);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
}
.hs-modal.is-open .hs-modal-overlay { opacity: 1; }
.hs-modal-panel {
  position: relative;
  width: min(1240px, 95vw);
  max-height: min(94vh, 1040px);
  overflow-y: auto;
  background: var(--white);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 32px 80px rgba(0, 18, 49, .4);
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .3s ease, transform .3s ease;
}
.hs-modal.is-open .hs-modal-panel { opacity: 1; transform: translateY(0) scale(1); }
#hs-modal-title {
  margin: 0 52px 6px 0;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -.01em;
}
.hs-modal-subtitle {
  margin: 0 52px 20px 0;
  color: #01549D;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.hs-modal-subtitle[hidden] { display: none; }
.hs-modal-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
/* les 3 photos d'un même équipement partagent leur ratio natif : vignettes
   strictement identiques, photo entière, fond blanc fondu dans la pop-up */
.hs-modal-photos { align-items: center; }
/* Plus de 3 photos : la grille devient un bloc simple qui contient la
   fenêtre de 3 photos (toujours en grille) + la barre de contrôle. */
.hs-modal-photos--rotating { display: block; }
.hs-photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: center; transition: opacity .26s ease; }
.hs-photos-grid.is-swapping { opacity: 0; }
.hs-modal-photo { overflow: hidden; background: var(--white); border: 0; border-radius: 10px; display: flex; }
.hs-modal-photo img { width: 100%; height: auto; display: block; margin: 0 auto; }
/* hauteur plafonnée pour que la description reste visible sans avoir à
   scroller dans la pop-up, quel que soit le format des photos. */
.hs-modal-photos .hs-modal-photo img {
  width: auto;
  max-width: 100%;
  max-height: 46vh;
}
/* écran Arena + support : format très haut/étroit, bridé par max-height
   avant même d'atteindre la largeur de colonne. Plafond relevé (~+50%)
   pour que le sujet remplisse vraiment la vignette. */
.hs-modal-photos--tall .hs-modal-photo img {
  max-height: 46vh;
}
.hs-modal-photo--empty { aspect-ratio: 3 / 4; display: grid; place-items: center; border-style: dashed; border-color: var(--blue-20); }
button.hs-modal-photo { padding: 0; cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
button.hs-modal-photo:hover, button.hs-modal-photo:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 18, 49, .22); }

/* Grille inchangée (3 cases) ; quand il y a plus de 3 photos, une petite
   barre sous la grille regroupe pause + flèches pour piloter la rotation
   à la main, en plus du défilement automatique. */
.hs-photos-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.hs-photos-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--blue-20);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hs-photos-btn svg { width: 15px; height: 15px; }
.hs-photos-btn--pause svg { width: 14px; height: 14px; }
.hs-photos-btn:hover, .hs-photos-btn:focus-visible { background: var(--blue); color: var(--white); transform: scale(1.08); }

/* Visionneuse plein écran des photos d'équipement */
.photo-lightbox { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 12, 36, .82); backdrop-filter: blur(6px); }
.photo-lightbox__figure {
  position: relative;
  margin: 0;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .25s ease, transform .25s ease;
}
.photo-lightbox.is-open .photo-lightbox__figure { opacity: 1; transform: scale(1); }
.photo-lightbox__figure img {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
}
.photo-lightbox__close {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 24px; line-height: 1;
  color: var(--navy); background: var(--white);
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0, 18, 49, .35);
}
@media (max-width: 700px) {
  .photo-lightbox__close { top: 8px; right: 8px; }
}
.hs-modal-photo--empty span { padding: 0 6px; color: var(--ink-soft); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.hs-modal-desc .tech-label { margin-bottom: 8px; }
.hs-modal-desc p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
@media (max-width: 480px) { .hs-modal-photos { gap: 8px; } }

/* Plan 3D déjà annoté (numéros + flèches en dur dans l'image), recadré au
   plus près du contenu réel (les PNG sources avaient un grand fond
   transparent autour du rendu). Ratio 2:1 proche des 3 images recadrées,
   pour laisser le minimum de lettrboxing avec object-fit: contain. */
.hs-plan { margin-top: 16px; }
.hs-plan .tech-label { display: block; margin-bottom: 6px; }
.hs-plan-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  /* plafond de hauteur : la popup entière (texte + liste + plan) doit
     tenir dans l'écran sans scroll, quelle que soit la hauteur de la
     fenêtre. object-fit: contain sur l'image garde tout lisible même si
     le cadre devient plus plat que son ratio naturel. */
  max-height: min(26vh, 230px);
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--blue-20);
}
/* la photo de chantier (catégorie « Sol ») a son propre ratio réel
   (1400×654) : le cadre l'épouse exactement, sans letterboxing. */
.hs-plan-frame--floor { aspect-ratio: 1400 / 654; }
/* le plan 3D annoté (catégorie « Équipements ») : pas de fond visible et
   un cadre bien plus grand, pour que le plan occupe le maximum d'espace. */
.hs-plan-frame--equipment {
  aspect-ratio: 16 / 9;
  max-height: min(64vh, 620px);
  background: transparent;
  box-shadow: none;
}
.hs-plan-frame--equipment img { inset: 0; width: 100%; height: 100%; }
/* la photo « Pose » : cadre plus grand, à droite du texte (voir
   .included-modal__panel--side), ratio proche de la photo réelle (628×545). */
.hs-plan-frame--pose {
  aspect-ratio: 628 / 545;
  max-height: min(58vh, 520px);
}
/* bouton « agrandir » : ouvre la photo du plan/chantier en plein écran */
.hs-plan-expand {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 18, 49, .55);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .2s ease, transform .2s ease;
}
.hs-plan-expand svg { width: 15px; height: 15px; }
.hs-plan-expand:hover, .hs-plan-expand:focus-visible { background: var(--blue); transform: scale(1.06); }
/* le plan remplit le cadre au maximum : une marge fixe et fine (10px, un
   peu moins sur mobile) plutôt qu'un simple 100% qui laissait de grands
   espaces vides si l'image ne correspondait pas exactement au ratio. */
.hs-plan-frame img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  .hs-plan-frame img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .hotspot::before { animation: none; }
  .aires-scroll-hint__segment::before { transition: none; }
  .aires-scroll-hint__chevron {
    animation: none;
    opacity: .72;
    transform: rotate(45deg);
  }
  .hs-photos-grid { transition: none; }
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--navy);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.modal-close:hover { background: var(--navy); color: var(--white); transform: rotate(90deg); }
.modal-close svg { width: 14px; height: 14px; }

/* ============================================================
   Popup « je choisis mon Aire » — choix du modèle + contact
   ============================================================ */
.aire-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.aire-modal[hidden] { display: none; }
.aire-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 18, 49, .68);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
}
.aire-modal.is-open .aire-modal-overlay { opacity: 1; }
.aire-modal-panel {
  position: relative;
  width: min(640px, 94vw);
  max-height: min(90vh, 780px);
  overflow-y: auto;
  background: var(--white);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 32px 80px rgba(0, 18, 49, .4);
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .3s ease, transform .3s ease;
}
.aire-modal.is-open .aire-modal-panel { opacity: 1; transform: translateY(0) scale(1); }

.aire-modal-choice h3 { font-weight: 800; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.05; letter-spacing: -.01em; margin: 10px 52px 22px 0; }
.aire-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aire-choice-card {
  text-align: left;
  padding: 18px 20px;
  border: 1.5px solid var(--grey);
  border-radius: 14px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.aire-choice-card:hover {
  border-color: var(--blue-40);
  background: var(--blue-10);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(1, 84, 157, .16);
}
.aire-choice-index {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--blue);
  margin-bottom: 8px;
}
.aire-choice-name {
  display: block;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}
.aire-choice-specs { display: block; font-size: 12.5px; color: var(--ink-soft); }
.aire-choice-card--unsure {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  border-style: dashed;
  background: var(--paper);
}
.aire-choice-card--unsure .aire-choice-index {
  margin-bottom: 0;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-10);
  font-size: 14px;
}
.aire-choice-card--unsure .aire-choice-name,
.aire-choice-card--unsure .aire-choice-specs { margin-bottom: 0; }
.aire-choice-card--unsure .aire-choice-name { font-size: 16px; }

.aire-modal-back {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
  transition: color .2s ease;
}
.aire-modal-back:hover { color: var(--blue); }

@media (max-width: 560px) {
  .aire-choice-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .aires-cta__glow {
    animation: none;
    opacity: .68;
    transform: translate3d(42%, 12%, 0) scale(1.06);
  }
  .hero-scroll .wheel, .hero-scroll .chev { animation: none; }
}