/* ============================================================================
   PAGE D'ATTENTE dainamics.ch — feuille unique.
   Identité = DESIGN.md v3.2 (tokens §1, typo §2, plat §4, anatomies §5) ; mises en
   scène portées de la Home buildée (hero + rideau, viewer §5 Trajectory, clôture
   FinalCta) et du spécimen v8 (marquee vertical §5.8). Aucune ombre sur les cartes.
   ============================================================================ */

/* ---------- Polices self-host (jamais de CDN) — pile Reyhan composée comme app.css :
   base SANS accents en tête (fixe les métriques ch/ex), accents du Black re-creusés
   déclarés en 800 → servis sans gras synthétique. */
@font-face {
  font-family: 'Reyhan Regular';
  src: url('/assets/fonts/Reyhan-Regular-sans-accents.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reyhan Accents';
  src: url('/assets/fonts/Reyhan-Accents-latin.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reyhan Black';
  src: url('/assets/fonts/Reyhan-Black-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/InstrumentSans-400-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('/assets/fonts/FragmentMono-400-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (DESIGN.md §1) ---------- */
:root {
  --background: #fbfdfe;
  --foreground: #14191f;
  --primary: #1870c2;
  --primary-deep: #1654a9;
  --primary-soft: #69acde;
  --secondary: #f1f5f8;
  --muted-fg: #4d565f;
  --accent: #dfedfc;
  --accent-fg: #1c3451;
  --tint: rgba(24, 112, 194, 0.05);
  --hairline: rgba(24, 112, 194, 0.13);
  --border: #e2e6e9;
  --night: #101926;
  --night-primary: #5aa3ec;
  --swiss: #ff0000;
  --display-title: 'Reyhan Regular', 'Reyhan Accents', sans-serif;
  --display: 'Reyhan Black', sans-serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Fragment Mono', ui-monospace, monospace;
  --gm: clamp(16px, 3.36vw, 60px);
  --content-max: 1440px;
  --st-title: clamp(30px, 16px + 2.8vw, 56px);
  --r-fluid: clamp(16px, 12px + 0.5vw, 24px);
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --eoc: cubic-bezier(0.215, 0.61, 0.355, 1);
  --eio: cubic-bezier(0.645, 0.045, 0.355, 1);
  --eoq: cubic-bezier(0.23, 1, 0.32, 1);
  --focus-ring: 0 0 0 1px #1870c2, 0 0 0 3px rgba(24, 112, 194, 0.5);
  --bar-h: 4.5625rem;
}

/* ---------- Base (base fluide de la Home §6bis) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: clamp(16px, calc(16px + (100vw - 1600px) * 0.0125), 21px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p {
  margin: 0;
}
img,
video,
svg {
  display: block;
}
a {
  color: inherit;
}
.skip {
  position: fixed;
  left: var(--gm);
  top: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--r-xs);
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible {
  transform: none;
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Barre (jetonbank §5.1) — flottante, verre, SANS ombre ---------- */
.menu-wrap {
  position: fixed;
  top: clamp(0.75rem, 1.4vw, 1.25rem);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0 var(--gm);
  pointer-events: none;
}
.menu {
  pointer-events: auto;
  height: var(--bar-h);
  max-width: 67.5rem;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.87);
  -webkit-backdrop-filter: blur(11.65px);
  backdrop-filter: blur(11.65px);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  padding: 0 0.75rem 0 1.6rem;
}
.brand {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--foreground);
  line-height: 1;
  font-size: 2rem;
  flex-shrink: 0;
  transform: translateY(-2px);
}
.brand em {
  font-style: normal;
  color: var(--primary);
}
.brand:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}
.menu__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 100%;
}

/* Sélecteur de langue (§5.1b — anatomie verrouillée, transcrite de primitives.css). */
.lang-switch {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
}
.lang-trigger {
  all: unset;
  cursor: pointer;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0.9rem;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-deep);
  transition: color 0.15s var(--eoc);
}
.lang-trigger svg {
  transition: transform 0.2s var(--eoc);
}
.lang-trigger:focus-visible {
  box-shadow: var(--focus-ring);
}
.lang-menu {
  position: absolute;
  top: calc(100% - 21px);
  left: 0.94rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition:
    opacity 0.16s var(--eoc),
    transform 0.16s var(--eoc),
    visibility 0.16s;
  z-index: 70;
}
.lang-menu::before {
  content: '';
  position: absolute;
  inset: -0.55rem -0.9rem;
  background: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 16px 16px -8px rgba(20, 25, 31, 0.12);
  z-index: -1;
}
.lang-opt {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--muted-fg);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.14s var(--eoc);
}
.lang-opt:hover {
  color: var(--primary);
}
.lang-opt:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover .lang-trigger {
    color: var(--primary);
  }
  .lang-switch:hover .lang-trigger svg {
    transform: rotate(180deg);
  }
  .lang-switch:hover .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.lang-switch:focus-within .lang-menu,
.lang-switch.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-switch.is-open .lang-trigger svg {
  transform: rotate(180deg);
}

/* ---------- Boutons (jeton §5.3) — le fond RÉTRÉCIT au survol ---------- */
.jb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  height: 2.75rem;
  padding: 0 1.45rem;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: none;
  isolation: isolate;
  border-radius: 0.375rem;
  color: var(--foreground);
  white-space: nowrap;
}
.jb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  transition: transform 0.3s var(--eoc);
}
.jb:hover::before {
  transform: scale(0.98);
  transition-timing-function: var(--eio);
}
.jb:active::before {
  transform: scale(0.95);
}
.jb:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.jb.p {
  color: #fff;
}
.jb.p::before {
  background: var(--primary);
}
.jb.secondary {
  color: var(--primary);
}
.jb.secondary::before {
  background: var(--secondary);
  border: 1px solid rgba(0, 0, 0, 0.07);
}
.jb.sm {
  height: 2.25rem;
  font-size: 0.9rem;
  padding: 0 1.05rem;
}

/* Capsule-flèche (héros, jetonbank). */
.cap {
  display: inline-flex;
  align-items: center;
  border-radius: 2.8125rem;
  padding: 0.2rem 0 0.2rem 1.69rem;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.69;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
}
.cap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  transition: transform 0.3s var(--eoc);
}
.cap:hover::before {
  transform: scale(0.98);
  transition-timing-function: var(--eio);
}
.cap:active::before {
  transform: scale(0.96);
}
.cap:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.cap .icon {
  margin-left: 1.69rem;
  margin-right: 0.31rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
}
.cap .icon svg {
  transition: transform 0.3s var(--eoq);
}
.cap .icon svg path {
  stroke: currentColor;
}
.cap:hover .icon svg {
  transform: translate(3px, -3px);
}
.cap.blue {
  color: #fff;
}
.cap.blue::before {
  background: var(--primary);
}
.cap.blue .icon {
  background: #fff;
  color: var(--primary);
}
.cap.white {
  color: var(--primary);
}
.cap.white::before {
  background: #fff;
  border: 1px solid var(--border);
}
.cap.white .icon {
  background: var(--primary);
  color: #fff;
}
.cap.white:hover .icon svg {
  transform: translateX(3px);
}

/* Badge (§5.7 « outline + point ») — le point RESPIRE : la page est vivante, en préparation. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--r-xs);
  padding: 0.36rem 0.8rem;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--foreground);
}
.badge .dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
.badge .dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .badge .dot::after {
    animation: dnx-breathe 2.6s var(--eoq) infinite;
  }
}
@keyframes dnx-breathe {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  70%,
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* ---------- HÉROS — architecture jeton, centré (§12) + RIDEAU (Home 07/07) ---------- */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(180deg, #f4f8fc 0%, #eef4fa 100%);
}
.hero__bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.8s var(--eoq);
}
.hero__bg canvas.is-on {
  opacity: 1;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 38% at 50% 44%, rgba(251, 253, 254, 0.55) 0%, rgba(251, 253, 254, 0) 100%),
    linear-gradient(
      180deg,
      rgba(251, 253, 254, 0.18) 0%,
      rgba(251, 253, 254, 0) 18%,
      rgba(251, 253, 254, 0) 78%,
      rgba(251, 253, 254, 0.6) 100%
    );
}
.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gm));
  margin-inline: auto;
  padding: 6.5rem var(--gm) 3rem;
}
.hero__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-18px);
}
.hero__badge {
  margin-bottom: clamp(22px, 3.2svh, 32px);
}
.hero__h1 {
  font-family: var(--display-title);
  font-weight: 800;
  font-size: clamp(48px, 26.55px + 5.5vw, 106px);
  letter-spacing: 0;
  line-height: 1;
  color: var(--foreground);
  text-wrap: balance;
}
.hero__sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 17.518px + 0.38vw, 24px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #2c343d;
  margin-top: 18px;
  text-wrap: pretty;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
@media (max-width: 560px) {
  .hero__br,
  .hero__sub-br {
    display: none;
  }
}
/* Entrée douce des éléments d'appui (le H1 reste immobile : c'est le LCP). CSS seul. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-enter] {
    animation: dnx-enter 0.55s var(--eoq) both;
  }
  html.js .hero__badge[data-enter] {
    animation-delay: 0.08s;
  }
  html.js .hero__sub[data-enter] {
    animation-delay: 0.15s;
  }
  html.js .hero__cta[data-enter] {
    animation-delay: 0.22s;
  }
}
@keyframes dnx-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Panneau qui glisse PAR-DESSUS le héros épinglé (coins hauts arrondis, façon jeton). */
.page-over {
  position: relative;
  z-index: 1;
  background: var(--background);
  border-radius: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0 0;
}

/* Révélations au scroll — masquées UNIQUEMENT si JS actif ET mouvement autorisé. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.55s var(--eoq),
      transform 0.55s var(--eoq);
    transition-delay: var(--rd, 0s);
  }
  html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- En-têtes de section (centrés — seuls les en-têtes le sont) ---------- */
.sec-head {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.sec-title {
  font-family: var(--display-title);
  font-weight: 800;
  font-size: var(--st-title);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  text-wrap: balance;
}
.sec-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--muted-fg);
  text-wrap: pretty;
}

/* ---------- §2 — LE VIEWER (Home §5 Trajectory, anatomie Apple, porté tel quel) ---------- */
.pv {
  padding-inline: var(--gm);
  padding-block: clamp(5rem, 12svh, 8rem) clamp(3rem, 7svh, 6rem);
}
.pv__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
.pv .sec-head {
  margin-bottom: clamp(2rem, 4svh, 3.5rem);
}
.pv__viewer {
  position: relative;
  height: clamp(600px, 86svh, 900px);
  border-radius: 28px;
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
}
.pv__world {
  position: absolute;
  inset: 0;
}
.pv__media {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.pv__media[data-open] {
  opacity: 1;
  visibility: visible;
}
.pv__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pv__paddles {
  position: absolute;
  left: clamp(0.9rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
}
.pv__paddle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 25, 38, 0.42);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.2s var(--eoc),
    opacity 0.25s var(--eoc),
    transform 0.2s var(--eoc);
}
.pv__paddle svg {
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
@media (hover: hover) and (pointer: fine) {
  .pv__paddle:hover:not(:disabled) {
    background: rgba(16, 25, 38, 0.66);
    transform: scale(1.06);
  }
}
.pv__paddle:active:not(:disabled) {
  transform: scale(0.96);
}
.pv__paddle:disabled {
  opacity: 0.32;
  cursor: default;
}
.pv__paddle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.pv__controls {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: calc(clamp(0.9rem, 2vw, 1.6rem) + 44px + clamp(0.9rem, 1.8vw, 1.4rem));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  z-index: 2;
  max-width: calc(100% - clamp(0.9rem, 2vw, 1.6rem) * 2 - 44px - clamp(0.9rem, 1.8vw, 1.4rem));
}
.pv__item {
  position: relative;
  border-radius: 28px;
  background: rgba(16, 25, 38, 0.44);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow: hidden;
  max-width: 100%;
}
.pv__item:not(.expanded):hover {
  background: rgba(16, 25, 38, 0.66);
}
.pv__item.expanded {
  border-radius: 18px;
  background: rgba(16, 25, 38, 0.62);
  width: min(620px, 100%);
}
.pv__open {
  display: flex;
  align-items: center;
  height: 56px;
  padding-inline: 14px 28px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
.pv__open:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: inherit;
}
.pv__label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.pv__plus {
  margin-inline-end: 14px;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  flex: none;
}
.pv__item.expanded .pv__open {
  display: none;
}
.pv__card {
  display: none;
  position: relative;
}
.pv__item.expanded .pv__card {
  display: block;
}
.pv__card-inner {
  padding: 28px 64px 28px 28px;
  width: max-content;
  max-width: clamp(374px, 36vw, 630px);
}
.pv__card-title {
  margin: 0 0 6px;
  color: #fff;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.pv__card-body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
}
.pv__close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background 0.2s var(--eoc),
    transform 0.2s var(--eoc);
}
.pv__close svg {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}
@media (hover: hover) and (pointer: fine) {
  .pv__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.08);
  }
}
.pv__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (max-width: 700px) {
  .pv__viewer {
    height: clamp(520px, 76svh, 680px);
  }
  .pv__paddles {
    left: 0.75rem;
  }
  .pv__controls {
    left: calc(0.75rem + 44px + 0.75rem);
    max-width: calc(100% - 0.75rem * 2 - 44px - 0.75rem);
  }
  .pv__card-inner {
    max-width: 100%;
    width: auto;
    padding: 24px 56px 24px 22px;
  }
  .pv__card-body {
    font-size: 15.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pv__paddle,
  .pv__close,
  .pv__item {
    transition: none !important;
  }
}

/* ---------- §3 — LES SECTEURS : marquee vertical (spécimen v8 §5.8 « validé ») ----------
   Icône AU-DESSUS du nom, centrée ; chips --tint ; SANS conteneur carré. Pictos de la
   banque en glyphe nu : STATIQUES au repos, ANIMÉS au survol (doctrine des menus). */
.sect {
  padding-block: clamp(6rem, 16svh, 11rem) clamp(6rem, 16svh, 11rem);
  overflow: clip;
}
.sect .sec-head {
  padding-inline: var(--gm);
  margin-bottom: clamp(2.5rem, 6svh, 4.5rem);
}
.marquee {
  display: flex;
  gap: 1.1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.track {
  display: flex;
  gap: 1.1rem;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: dnx-scrollx 64s linear infinite;
}
.marquee:hover .track {
  animation-play-state: paused;
}
@keyframes dnx-scrollx {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1.1rem));
  }
}
.svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  flex-shrink: 0;
  min-width: 12.5rem;
  padding: 1.5rem 2.1rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--tint);
  transition: background 0.25s var(--eoc);
}
.svc:hover {
  background: rgba(24, 112, 194, 0.09);
}
.svc__ic {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
}
.svc__ic > span {
  grid-area: 1 / 1;
  display: block;
}
.svc__ic svg {
  width: 100%;
  height: 100%;
}
.svc__anim {
  visibility: hidden;
}
.svc.is-anim .svc__anim {
  visibility: visible;
}
.svc.is-anim .svc__still {
  visibility: hidden;
}
.svc__name {
  font-family: var(--sans);
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
    justify-content: center;
    padding-inline: var(--gm);
  }
  .track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 1;
  }
  .track[aria-hidden='true'],
  .svc[aria-hidden='true'] {
    display: none;
  }
}

/* ---------- §4 — CLÔTURE NUIT (Home FinalCta) ---------- */
.final {
  position: relative;
  overflow: clip;
  background: var(--night);
  padding-inline: var(--gm);
  min-height: 100svh;
  display: grid;
  place-items: center;
}
.final__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 12%, rgba(38, 108, 178, 0.28), rgba(16, 25, 38, 0) 70%);
  pointer-events: none;
}
.final::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-soft) 30%, var(--primary-soft) 70%, transparent);
  opacity: 0.5;
}
.final__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(5rem, 10svh, 8rem);
}
.final__title {
  font-family: var(--display-title);
  font-weight: 800;
  font-size: clamp(48px, 26.55px + 5.5vw, 106px);
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
  margin: 0 auto;
  max-width: 16ch;
  text-wrap: balance;
}
.final__sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 17.518px + 0.38vw, 24px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
  margin: clamp(1.25rem, 2.5svh, 2rem) auto 0;
  text-wrap: pretty;
}
.final__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4svh, 3rem);
}
.final__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: clamp(1.4rem, 3svh, 2rem);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.final__contact a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--eoc), color 0.2s var(--eoc);
}
.final__contact a:hover {
  color: var(--night-primary);
  border-color: var(--night-primary);
}
.final__contact a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}
.final__contact .sep {
  color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 767px) {
  .final {
    min-height: 88svh;
  }
}

/* ---------- Pied (nuit, continuité de la clôture) ---------- */
.foot {
  position: relative;
  z-index: 1;
  background: var(--night);
  padding-inline: var(--gm);
}
.foot__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.6rem 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.foot .brand {
  font-size: 1.6rem;
  color: #fff;
  transform: none;
}
.foot .brand em {
  color: var(--night-primary);
}
.foot__loc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.foot__loc .sep {
  color: rgba(255, 255, 255, 0.3);
}
.foot__l1 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.foot__flag {
  width: 16px;
  height: 16px;
  flex: none;
}
.foot__langs {
  display: flex;
  gap: 0.25rem;
}
.foot__langs a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  padding: 0.3rem 0.45rem;
  border-radius: var(--r-xs);
  transition: color 0.15s var(--eoc);
}
.foot__langs a:hover,
.foot__langs a[aria-current='page'] {
  color: #fff;
}
.foot__langs a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ---------- Petits écrans ---------- */
@media (max-width: 560px) {
  :root {
    --bar-h: 3.75rem;
  }
  .menu {
    padding: 0 0.4rem 0 1.1rem;
  }
  .brand {
    font-size: 1.65rem;
  }
  .lang-trigger {
    padding: 0 0.7rem;
  }
  .hero__inner {
    padding-top: 5.5rem;
  }
  .hero__cta {
    flex-direction: column;
    gap: 12px;
  }
  .foot__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .foot__loc {
    flex-direction: column;
    align-items: flex-start;
  }
  .foot__loc .sep {
    display: none;
  }
  .sect {
    padding-block: clamp(4.5rem, 11svh, 6rem);
  }
  .svc {
    min-width: 9.75rem;
    padding: 1.15rem 1.4rem 1.05rem;
    gap: 0.55rem;
  }
  .svc__ic {
    width: 3.4rem;
    height: 3.4rem;
  }
  .svc__name {
    font-size: 0.95rem;
  }
}