/* ============================================================
   QWS - v4 · Système visuel premium
   Mobile-first · Dark/Light · Motion subtil et intentionnel
   Principes : transform/opacity uniquement, easing expressif,
   prefers-reduced-motion respecté, aucun gimmick.
   ============================================================ */

/* ---------- 0. Polices auto-hébergées ----------
   Deux fichiers variables, sous-ensemble latin : couvrent toutes les graisses
   utilisées par le site. Zéro requête vers un domaine tiers (perf + RGPD).
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Design tokens ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090c12;
  --bg-2: #0d1119;
  --bg-elevated: rgba(255,255,255,0.03);
  --bg-glass: rgba(255,255,255,0.045);
  --surface: #10151e;
  --border: rgba(255,255,255,0.075);
  --border-hover: rgba(255,255,255,0.16);
  --text: #eef1f6;
  --text-muted: #98a2b3;
  --text-faint: #78859c;   /* AA : 5,07:1 sur --bg-2 */
  --accent: #4f8cff;
  --accent-2: #8ec5ff;
  --accent-deep: #2f6be6;
  --accent-soft: rgba(79,140,255,0.22);
  --accent-glow: rgba(79,140,255,0.45);
  --header-bg: rgba(9,12,18,0.72);
  --header-bg-solid: rgba(9,12,18,0.9);
  --nav-link: #e6e9ef;
  --nav-link-hover: #ffffff;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -20px rgba(0,0,0,0.6);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 70px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(79,140,255,0.12);
  --shadow-btn: 0 10px 30px -10px var(--accent-glow);
  --noise-opacity: 0.045;
  --logo-filter: brightness(0) invert(1);

  --display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --blur: 18px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 22px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 0.25s;
  --d-base: 0.5s;
  --d-slow: 0.9s;
  --transition: var(--d-base) var(--ease-out);

  --header-h: 64px;
  --px: 0;
  --py: 0;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fb;
  --bg-2: #eff1f6;
  --bg-elevated: rgba(15,23,42,0.035);
  --bg-glass: rgba(255,255,255,0.72);
  --surface: #ffffff;
  --border: rgba(15,23,42,0.08);
  --border-hover: rgba(15,23,42,0.16);
  --text: #0f172a;
  --text-muted: #55627a;
  --text-faint: #5d6878;   /* AA : 5,00:1 sur --bg-2 */
  --accent: #1f5eff;
  --accent-2: #3b82f6;
  --accent-deep: #1548d6;
  --accent-soft: rgba(31,94,255,0.12);
  --accent-glow: rgba(31,94,255,0.35);
  --header-bg: rgba(247,248,251,0.72);
  --header-bg-solid: rgba(247,248,251,0.92);
  --nav-link: #0f172a;
  --nav-link-hover: #000000;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 16px 40px -18px rgba(15,23,42,0.18);
  --shadow-card-hover: 0 2px 4px rgba(15,23,42,0.05), 0 28px 60px -20px rgba(15,23,42,0.25), 0 0 0 1px rgba(31,94,255,0.12);
  --noise-opacity: 0.03;
  --logo-filter: none;
}

/* ---------- 2. Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'cv11';
}
::selection { background: var(--accent); color: #fff; }

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
strong { color: var(--text); font-weight: 600; }

/* Grain - signature de finition, quasi imperceptible */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9000;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain 8s steps(10) infinite;
}
[data-theme="light"] body::before { filter: invert(1); }
@media (max-width: 767px) { body::before { animation: none; } }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -4%); }
  20% { transform: translate(-6%, 2%); }
  30% { transform: translate(4%, -6%); }
  40% { transform: translate(-2%, 7%); }
  50% { transform: translate(-7%, -2%); }
  60% { transform: translate(6%, 3%); }
  70% { transform: translate(1%, 6%); }
  80% { transform: translate(-4%, 1%); }
  90% { transform: translate(5%, -3%); }
}

/* Transitions de thème (classe posée 600 ms par le JS) */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.6s var(--ease-in-out), color 0.6s var(--ease-in-out), border-color 0.6s var(--ease-in-out), fill 0.6s, stroke 0.6s !important;
}

/* Transition de page (cross-document, navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.22s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vtIn 0.42s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
/* Fallback JS : sortie douce */
html.is-leaving body { opacity: 0; transition: opacity 0.22s var(--ease-in-out); }

/* Liens en prose : soulignement animé */
a { color: var(--accent); text-decoration: none; }
.prose a, .footer-legal a, .footer-contact a, .contact-info a, .form-note a, .legal a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--ease-out), color var(--d-fast);
}
.prose a:hover, .footer-legal a:hover, .footer-contact a:hover, .contact-info a:hover, .form-note a:hover, .legal a:hover {
  background-size: 100% 1px;
}

/* Focus visible - anneau net et cohérent */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 4px; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* Barre de progression de lecture */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
  opacity: 0.9;
}

/* ---------- 3. Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(var(--blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: transform var(--d-base) var(--ease-out), background-color var(--d-base), border-color var(--d-base), box-shadow var(--d-base);
  animation: headerIn 0.9s var(--ease-out) both;
}
@keyframes headerIn { from { opacity: 0; transform: translateY(-12px); } }
.site-header.is-scrolled {
  background: var(--header-bg-solid);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,0.5);
}
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: padding var(--d-base) var(--ease-out);
}
.site-header.is-scrolled .header-inner { padding-top: 0.55rem; padding-bottom: 0.55rem; }

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  max-width: min(9.5rem, 38vw);
  line-height: 0;
  transition: opacity var(--d-fast), transform var(--d-base) var(--ease-out);
}
.logo:hover { opacity: 0.85; }
.logo img {
  display: block;
  width: auto; height: auto;
  max-height: 2rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: var(--logo-filter);
  opacity: 0.95;
}

/* Burger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
  position: relative;
  z-index: 2;
}
.nav-toggle:hover { border-color: var(--border-hover); background: var(--bg-elevated); }
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast), width var(--d-base) var(--ease-out);
}
.nav-toggle span:nth-child(2) { width: 12px; align-self: flex-start; margin-left: 13px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(-6px); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Navigation mobile : panneau plein écran */
/* NB : le header (backdrop-filter) sert de bloc conteneur → dimensions explicites */
.nav-main {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 1;
  padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), visibility 0s linear var(--d-base);
  overflow-y: auto;
}
.nav-main.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), visibility 0s;
}
.nav-main > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-main > ul > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.nav-main.is-open > ul > li { opacity: 1; transform: none; }
.nav-main.is-open > ul > li:nth-child(1) { transition-delay: 0.08s; }
.nav-main.is-open > ul > li:nth-child(2) { transition-delay: 0.14s; }
.nav-main.is-open > ul > li:nth-child(3) { transition-delay: 0.20s; }
.nav-main.is-open > ul > li:nth-child(4) { transition-delay: 0.26s; }
.nav-main.is-open > ul > li:nth-child(5) { transition-delay: 0.32s; }
.nav-main > ul > li > a,
.nav-services-trigger {
  display: block;
  padding: 0.85rem 0;
  color: var(--nav-link);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
  transition: color var(--d-fast), padding-left var(--d-base) var(--ease-out);
}
.nav-main > ul > li > a:hover { color: var(--accent); padding-left: 0.4rem; }
.nav-main > ul > li > a[aria-current="page"] { color: var(--accent); }

/* Sous-menu Services */
.nav-item-services { position: relative; }
.nav-services-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--display);
  cursor: pointer;
  text-align: left;
}
.nav-services-trigger:hover { color: var(--accent); }
.nav-item-services.is-active > .nav-services-trigger { color: var(--accent); }
.nav-chevron { width: 18px; height: 18px; transition: transform var(--d-base) var(--ease-out); }
.nav-item-services.is-open .nav-chevron { transform: rotate(180deg); }
.nav-services-menu {
  list-style: none;
  display: none !important;
  padding: 0; margin: 0;
}
.nav-item-services.is-open .nav-services-menu {
  display: flex !important;
  flex-direction: column;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 1px solid var(--accent);
  margin: 0.5rem 0 0.25rem;
  animation: menuIn 0.4s var(--ease-out) both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.nav-services-menu a {
  display: block;
  padding: 0.5rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--d-fast), transform var(--d-base) var(--ease-out);
}
.nav-services-menu a:hover { color: var(--text); transform: translateX(4px); }
.nav-services-menu a[aria-current="page"] { color: var(--accent); }

/* Actions (espace client + thème) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.header-icon-btn,
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--d-base) var(--ease-spring);
}
.header-icon-btn:hover, .theme-toggle:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  color: var(--accent);
  transform: translateY(-1px);
}
.header-icon-btn:active, .theme-toggle:active { transform: scale(0.94); }
.header-icon-btn svg, .theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle span { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; transition: transform 0.5s var(--ease-spring), opacity 0.3s; }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-main {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
    transition: none;
  }
  .nav-main > ul {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }
  .nav-main > ul > li { opacity: 1; transform: none; transition: none; position: relative; }
  .nav-main > ul > li > a,
  .nav-services-trigger {
    width: auto;
    padding: 0.5rem 0.85rem;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0;
    border: none;
    border-radius: 999px;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
  }
  .nav-main > ul > li > a:hover, .nav-services-trigger:hover { color: var(--text); padding-left: 0.85rem; }
  .nav-main > ul > li > a[aria-current="page"],
  .nav-item-services.is-active > .nav-services-trigger { color: var(--text); }
  /* Indicateur glissant */
  .nav-indicator {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    opacity: 0;
    transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out), opacity 0.3s;
    pointer-events: none;
    z-index: 0;
  }
  .nav-indicator.is-visible { opacity: 1; }
  .nav-chevron { width: 14px; height: 14px; margin-left: 0.3rem; }
  .nav-services-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    min-width: 240px;
  }
  .nav-item-services.is-open .nav-services-menu {
    padding: 0.4rem;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
    transform-origin: top left;
    animation: menuPop 0.45s var(--ease-out) both;
  }
  [data-theme="light"] .nav-item-services.is-open .nav-services-menu {
    box-shadow: 0 24px 60px -20px rgba(15,23,42,0.25);
  }
  @keyframes menuPop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
  .nav-services-menu a {
    padding: 0.6rem 0.85rem;
    border-radius: 9px;
    font-size: 0.92rem;
    white-space: nowrap;
    color: var(--text-muted);
  }
  .nav-services-menu a:hover { background: var(--bg-elevated); color: var(--text); transform: none; }
  .nav-services-menu a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
}

/* ---------- 4. Layout ---------- */
main { padding-top: var(--header-h); }
.section { padding: 5rem 1.25rem; position: relative; }
.container { max-width: 1100px; margin: 0 auto; }
.container-narrow { max-width: 720px; margin: 0 auto; }
@media (min-width: 768px) { .section { padding: 6.5rem 1.5rem; } }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem 5rem;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, var(--accent-soft) 0%, transparent 60%),
    var(--bg);
}
/* Grille technique, masquée en douceur */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, #000 0%, transparent 70%);
  opacity: 0.28;
  animation: gridFade 1.8s var(--ease-out) both;
}
@keyframes gridFade { from { opacity: 0; transform: scale(1.04); } }
/* Fin faisceau horizontal qui respire lentement */
.hero-bg::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 60vw;
  max-width: 900px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  animation: beam 9s var(--ease-in-out) infinite;
}
@keyframes beam {
  0%, 100% { transform: translateX(-70%) scaleX(0.6); opacity: 0.15; }
  50% { transform: translateX(-30%) scaleX(1); opacity: 0.7; }
}
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 14px), 0);
  transition: transform 1.2s var(--ease-out);
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  will-change: transform;
  animation: orbIn 1.6s var(--ease-out) forwards, orbFloat 16s var(--ease-in-out) infinite;
}
.hero-orb-1 { width: 420px; height: 420px; top: 2%; left: 8%; background: var(--accent-soft); animation-delay: 0.1s, 0s; }
.hero-orb-2 { width: 320px; height: 320px; top: 28%; right: 4%; background: rgba(79,140,255,0.28); animation-delay: 0.3s, -5s; }
.hero-orb-3 { width: 240px; height: 240px; bottom: 12%; left: 32%; background: rgba(142,197,255,0.16); animation-delay: 0.5s, -10s; }
[data-theme="light"] .hero-orb-2 { background: rgba(31,94,255,0.16); }
[data-theme="light"] .hero-orb-3 { background: rgba(59,130,246,0.12); }
@keyframes orbIn { to { opacity: 0.75; } }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(22px, -26px) scale(1.08); }
  66% { transform: translate(-16px, 14px) scale(0.94); }
}

/* Blueprint « sur mesure » - cadre qui se dessine, se mesure, s'ajuste */
.hero-blueprint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1140px, 106%);
  height: auto;
  z-index: -1;
  pointer-events: none;
  transform: translate(calc(-50% + var(--px) * 6px), calc(-50% + var(--py) * 6px));
  transition: transform 1.2s var(--ease-out);
  display: none;
}
@media (min-width: 900px) { .hero-blueprint { display: block; } }
.bp-stroke { stroke: var(--text); stroke-width: 1; stroke-opacity: 0.16; vector-effect: non-scaling-stroke; }
.bp-fill { fill: var(--text); fill-opacity: 0.16; }
.bp-accent { stroke: var(--accent); stroke-width: 1; stroke-opacity: 0.55; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bp-handle { fill: var(--bg); stroke: var(--accent); stroke-width: 1; stroke-opacity: 0.7; opacity: 0; animation: bpIn 0.6s var(--ease-out) forwards; }
[data-theme="light"] .bp-stroke { stroke-opacity: 0.2; }
[data-theme="light"] .bp-fill { fill-opacity: 0.2; }
.bp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bpDraw 2.2s var(--ease-in-out) forwards; }
.bp-frame { animation-delay: 0.2s; }
.bp-bar { animation-duration: 1s; animation-delay: 1.6s; }
.bp-dim-h { animation-duration: 1.2s; animation-delay: 2s; }
.bp-dim-v { animation-duration: 1.2s; animation-delay: 2.3s; }
.bp-fade { opacity: 0; animation: bpIn 0.8s var(--ease-out) forwards; }
.bp-dots { animation-delay: 2.1s; }
.bp-ticks { animation-delay: 2.9s; }
.bp-handles .bp-handle:nth-child(1) { animation-delay: 3.1s; }
.bp-handles .bp-handle:nth-child(2) { animation-delay: 3.15s; }
.bp-handles .bp-handle:nth-child(3) { animation-delay: 3.2s; }
.bp-handles .bp-handle:nth-child(4) { animation-delay: 3.25s; }
.bp-handles .bp-handle:nth-child(5) { animation-delay: 3.3s; }
.bp-handles .bp-handle:nth-child(6) { animation-delay: 3.35s; }
.bp-handles .bp-handle:nth-child(7) { animation-delay: 3.4s; }
.bp-handles .bp-handle:nth-child(8) { animation-delay: 3.45s; }
@keyframes bpDraw { to { stroke-dashoffset: 0; } }
@keyframes bpIn { to { opacity: 1; } }
/* Le cadre s'ajuste lentement : on « prend les mesures » */
.bp-fit {
  transform-box: view-box;
  transform-origin: 80px 320px;
  animation: bpFit 12s var(--ease-in-out) 3.6s infinite;
}
@keyframes bpFit {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.035, 1.02); }
}
.bp-handle-live { animation: bpIn 0.6s var(--ease-out) forwards, bpLive 12s var(--ease-in-out) 3.6s infinite; }
@keyframes bpLive {
  0%, 100% { stroke-opacity: 0.7; fill: var(--bg); }
  50% { stroke-opacity: 1; fill: var(--accent); }
}

.hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
}
@media (max-width: 480px) {
  .hero-label { font-size: 0.68rem; letter-spacing: 0.1em; padding: 0.35rem 0.75rem 0.35rem 0.6rem; }
}
.hero-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  60% { box-shadow: 0 0 0 7px transparent; }
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 4.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero-title em,
.page-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.hero-desc {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  margin: 0 auto 2.25rem;
  max-width: 600px;
  line-height: 1.65;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.scroll-hint {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1.5px solid var(--border-hover);
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) 1.4s forwards;
  transition: opacity var(--d-base);
}
.scroll-hint.is-gone { opacity: 0 !important; }
.scroll-dot {
  width: 3px; height: 8px;
  background: var(--text-muted);
  border-radius: 2px;
  animation: scrollDot 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(10px); opacity: 1; }
}
@keyframes fadeIn { to { opacity: 1; } }

/* Révélation du titre ligne par ligne (masque) */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 1.15s var(--ease-out) forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.09s);
}
@keyframes lineUp { to { transform: translateY(0); } }

/* Entrées hero (autres éléments) */
.hero-reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: heroReveal 1s var(--ease-out) forwards;
}
.hero-reveal-delay-1 { animation-delay: 0.15s; }
.hero-reveal-delay-2 { animation-delay: 0.55s; }
.hero-reveal-delay-3 { animation-delay: 0.7s; }
.hero-reveal-delay-4 { animation-delay: 0.85s; }
@keyframes heroReveal { to { opacity: 1; transform: none; } }

/* ---------- 6. Boutons ---------- */
.btn, a.btn, a.btn:hover, a.btn:focus, a.btn:active { text-decoration: none !important; }
.btn {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0.8rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), background var(--d-base), border-color var(--d-base), color var(--d-base);
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, var(--shadow-btn);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-out);
  z-index: -1;
}
.btn-primary:hover::before, .btn-primary:focus-visible::before { transform: translateX(120%); }
.btn-primary::after {
  content: '';
  display: inline-block;
  vertical-align: -0.12em;
  width: 0.95em; height: 0.95em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-left: 0.45em;
  opacity: 0.85;
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-base);
}
.btn-primary:hover::after { transform: translateX(3px); opacity: 1; }
.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 16px 40px -12px var(--accent-glow);
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px - 2px));
}
.btn-ghost {
  background: var(--bg-glass);
  color: var(--text) !important;
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.5);
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px - 2px));
}
.btn-large { padding: 1rem 2.1rem; font-size: 1.05rem; }

/* ---------- 7. Titres de section ---------- */
.section-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 1rem;
  text-align: center;
  text-wrap: balance;
}
.section-title::before {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin: 0 auto 1.25rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1s var(--ease-out) 0.2s;
}
.section-title.is-inview::before, html:not(.js) .section-title::before { width: 36px; }
.section-intro {
  text-align: center;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  font-size: 1.08rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- 8. Cartes ---------- */
.value-grid {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin-top: 2.5rem;
}
.value-grid.three-cols { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .value-grid:not(.three-cols) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .value-grid.three-cols { grid-template-columns: repeat(3, 1fr); }
}
.card {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-lg);
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out), border-color var(--d-base);
}
.card-glass {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
:root:not([data-theme="light"]) .card-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
}
/* Projecteur qui suit le curseur */
.card-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(520px circle at var(--mx) var(--my), var(--accent-soft), transparent 42%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
/* Bord lumineux qui suit aussi */
.card-glass::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(360px circle at var(--mx) var(--my), var(--accent-glow), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.card-glass:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.card-glass:hover::before, .card-glass:hover::after { opacity: 1; }
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.35rem;
}
.card-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  color: var(--accent);
  background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  transition: transform var(--d-base) var(--ease-spring), border-color var(--d-base), box-shadow var(--d-base), background var(--d-base);
}
.card-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* L'icône se dessine à l'apparition de la carte */
html.js .card-icon path, html.js .card-icon circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
html.js .card-icon path:nth-child(2), html.js .card-icon circle:nth-child(2) { transition-delay: 0.12s; }
html.js .card-icon path:nth-child(3), html.js .card-icon circle:nth-child(3) { transition-delay: 0.24s; }
html.js .card-icon path:nth-child(4), html.js .card-icon circle:nth-child(4) { transition-delay: 0.36s; }
html.js .card-icon path:nth-child(5), html.js .card-icon circle:nth-child(5) { transition-delay: 0.48s; }
html.js .card-icon path:nth-child(6), html.js .card-icon circle:nth-child(6) { transition-delay: 0.6s; }
html.js .is-inview .card-icon path, html.js .is-inview .card-icon circle { stroke-dashoffset: 0; }
.card-index {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding-top: 0.2rem;
  transition: color var(--d-base);
}
.card:hover .card-icon {
  transform: translateY(-2px);
  border-color: var(--accent-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 26px -12px var(--accent-glow);
}
.card:hover .card-index { color: var(--accent); }
.card h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
  color: var(--text);
}
.card p { font-size: 0.96rem; color: var(--text-muted); line-height: 1.65; }

/* ---------- 9. Sections spécifiques ---------- */
.focus-section {
  background: var(--bg-2);
  overflow: hidden;
}
.focus-section::before, .cta-section::before, .site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hover) 30%, var(--border-hover) 70%, transparent);
}
.focus-section::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 70vw; max-width: 900px; height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--accent-soft), transparent 65%);
  opacity: 0.55;
  filter: blur(30px);
  pointer-events: none;
}
.focus-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; text-align: center; }
.focus-content .section-title { margin-bottom: 1.25rem; }
.focus-content p { margin-bottom: 1rem; color: var(--text-muted); font-size: 1.05rem; text-wrap: pretty; }
.focus-content .btn { margin-top: 0.75rem; }

/* Fil conducteur - méthodologie en 3 temps */
.process-section .process-intro { margin-bottom: 0; }
.process-section .section-intro { margin-bottom: 3rem; }
.process {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
  --marker: 44px;
  --seg-delay: 0.55s;
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--marker) 1fr;
  column-gap: 1.25rem;
  padding-bottom: 2.25rem;
}
.process-step:last-child { padding-bottom: 0; }
.process-marker {
  position: relative;
  z-index: 1;
  width: var(--marker);
  height: var(--marker);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-hover);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5);
  transition: color var(--d-base), border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base) var(--ease-spring);
}
:root:not([data-theme="light"]) .process-marker { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--surface); }
/* Anneau qui s'allume quand l'étape est atteinte */
.process-marker::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--d-base), transform var(--d-base) var(--ease-out);
}
/* Segment de fil vers l'étape suivante */
.process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--marker) / 2 - 1px);
  top: var(--marker);
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--marker) / 2 - 1px);
  top: var(--marker);
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 100% 300%;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.7s var(--ease-in-out);
}
.process-body { padding-top: 0.55rem; }
.process-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.process-body h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 0.45rem;
}
.process-body p { color: var(--text-muted); font-size: 1rem; line-height: 1.65; margin: 0; text-wrap: pretty; }
.process-cta { text-align: center; margin-top: 3rem; }

/* Séquence : marqueur 1 → fil → marqueur 2 → fil → marqueur 3 */
html.js .process .process-marker,
html.js .process .process-body {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js .process .process-marker { transform: scale(0.7); }
html.js .process.is-inview .process-marker,
html.js .process.is-inview .process-body { opacity: 1; transform: none; }
.process.is-inview .process-step:nth-child(1) .process-marker,
.process.is-inview .process-step:nth-child(1) .process-body { transition-delay: 0.05s; }
.process.is-inview .process-step:nth-child(1)::after { transition-delay: 0.35s; }
.process.is-inview .process-step:nth-child(2) .process-marker,
.process.is-inview .process-step:nth-child(2) .process-body { transition-delay: calc(0.35s + var(--seg-delay)); }
.process.is-inview .process-step:nth-child(2)::after { transition-delay: calc(0.65s + var(--seg-delay)); }
.process.is-inview .process-step:nth-child(3) .process-marker,
.process.is-inview .process-step:nth-child(3) .process-body { transition-delay: calc(0.65s + var(--seg-delay) * 2); }
.process.is-inview .process-step:not(:last-child)::after { transform: scaleY(1); }
.process.is-inview .process-marker { color: var(--text); border-color: transparent; }
.process.is-inview .process-marker::after { opacity: 1; transform: scale(1); }
.process.is-inview .process-step:nth-child(1) .process-marker::after { transition-delay: 0.3s; }
.process.is-inview .process-step:nth-child(2) .process-marker::after { transition-delay: calc(0.6s + var(--seg-delay)); }
.process.is-inview .process-step:nth-child(3) .process-marker::after { transition-delay: calc(0.9s + var(--seg-delay) * 2); }
/* Lueur qui circule le long du fil, une fois dessiné */
.process.is-inview .process-step:nth-child(1)::after { animation: flowY 5s linear 2.2s infinite; }
.process.is-inview .process-step:nth-child(2)::after { animation: flowY 5s linear 2.9s infinite; }
@keyframes flowY { from { background-position: 0 0; } to { background-position: 0 -300%; } }
.process-step:hover .process-marker { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--accent-glow); }

@media (min-width: 768px) {
  .process {
    max-width: none;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    text-align: center;
  }
  .process-step {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    padding-bottom: 0;
  }
  .process-marker { margin-bottom: 1.25rem; }
  .process-body { padding-top: 0; max-width: 300px; }
  .process-step:not(:last-child)::before,
  .process-step:not(:last-child)::after {
    top: calc(var(--marker) / 2 - 1px);
    left: calc(50% + var(--marker) / 2);
    bottom: auto;
    width: calc(100% + 1.5rem - var(--marker));
    height: 2px;
  }
  .process-step:not(:last-child)::after {
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
    background-size: 300% 100%;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .process.is-inview .process-step:not(:last-child)::after { transform: scaleX(1); }
  .process.is-inview .process-step:nth-child(1)::after { animation-name: flowX; }
  .process.is-inview .process-step:nth-child(2)::after { animation-name: flowX; }
  @keyframes flowX { from { background-position: 0 0; } to { background-position: -300% 0; } }
  .process-cta { margin-top: 3.5rem; }
}

/* Stats - chiffres posés sur une règle graduée (« sur mesure ») */
.stats { padding: 4rem 1.25rem 3.5rem; overflow: hidden; }
.stats .container { max-width: 900px; }
.stats-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: end;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.5rem;
  position: relative;
}
.stat-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.05em;
  margin-bottom: 0.45rem;
  line-height: 1;
  transition: transform 0.6s var(--ease-spring);
}
.stat-item.is-done .stat-value { animation: statLand 0.7s var(--ease-spring); }
@keyframes statLand {
  0% { transform: scale(1); }
  35% { transform: scale(1.06) translateY(-3px); }
  100% { transform: scale(1); }
}
.stat-num {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.045em;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  background: linear-gradient(180deg, var(--text) 35%, var(--text-muted));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.stat-suffix {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--accent);
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-spring);
}
.stat-item.is-done .stat-suffix { opacity: 1; transform: none; }
.stat-label {
  display: block;
  font-size: clamp(0.66rem, 1.6vw, 0.82rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.35;
  text-wrap: balance;
}
/* Repère qui relie le chiffre à la règle */
.stat-marker {
  position: relative;
  display: block;
  width: 1px;
  height: 34px;
  margin-top: 1.1rem;
  background: linear-gradient(180deg, transparent, var(--accent));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.8s var(--ease-out) 0.1s;
}
.stat-marker::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 18px var(--accent-glow);
  transition: transform 0.6s var(--ease-spring) 0.6s;
}
.stat-item.is-done .stat-marker { transform: scaleY(1); }
.stat-item.is-done .stat-marker::after { transform: translateX(-50%) scale(1); }
/* Règle graduée qui dérive lentement */
.stats-ruler {
  position: relative;
  height: 30px;
  margin-top: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.stats-ruler::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--border-hover);
}
.ruler-ticks {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--border-hover) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, var(--text-muted) 0 1px, transparent 1px 60px);
  background-size: 100% 10px, 100% 20px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity: 0.8;
  animation: rulerDrift 14s linear infinite;
}
@keyframes rulerDrift { to { background-position: -60px 0, -60px 0; } }
@media (min-width: 640px) {
  .stats { padding: 5.5rem 1.5rem 4.5rem; }
  .stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: 0; top: 10%;
    height: 55%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--border), transparent);
  }
}

/* CTA */
.cta-section {
  padding: 6rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.cta-section::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -40%;
  width: 80vw; max-width: 1000px; height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, var(--accent-soft), transparent 60%);
  opacity: 0.8;
  pointer-events: none;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section .section-intro { margin-bottom: 2rem; }

/* ---------- 10. Pages intérieures ---------- */
.page-hero {
  position: relative;
  padding: 4.5rem 1.25rem 3.5rem;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 50% -20%, var(--accent-soft), transparent 60%);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 0%, transparent 65%);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 0%, transparent 65%);
  opacity: 0.25;
  animation: gridFade 1.6s var(--ease-out) both;
}
.page-hero .container { position: relative; }
.page-hero + .section { padding-top: 3.5rem; }
.page-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--text);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.page-lead {
  font-size: 1.12rem;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.65;
  text-wrap: pretty;
}
@media (min-width: 768px) { .page-hero { padding: 6rem 1.5rem 4.5rem; } }

/* Prose */
.prose { margin-bottom: 2rem; }
.prose h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.85rem;
  color: var(--text);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1.1rem; color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; }
.prose ul { margin: 1rem 0 1.25rem 0; color: var(--text-muted); list-style: none; }
.prose li { margin-bottom: 0.6rem; padding-left: 1.5rem; position: relative; font-size: 1.02rem; }
.prose li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1.5px;
  background: var(--accent);
  border-radius: 1px;
}
.list-principles { margin-left: 0; }
.list-principles li {
  margin-bottom: 0;
  padding: 1.1rem 0 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: padding-left var(--d-base) var(--ease-out);
}
.list-principles li:hover { padding-left: 1.9rem; }
.list-principles li::before { top: 1.75em; transition: width var(--d-base) var(--ease-out), background var(--d-base); }
.list-principles li:hover::before { width: 14px; }
.list-principles li strong { font-family: var(--display); font-weight: 600; }
.cta-block { text-align: center; margin-top: 2.5rem; }

/* Philosophie - illustration animée « du générique au sur mesure » */
.philo-story { display: grid; gap: 2.5rem; align-items: center; }
.philo-story .prose { margin-bottom: 0; }
@media (min-width: 860px) {
  .philo-story { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .philo-story .prose p { max-width: 52ch; }
}
.philo-figure {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--accent-soft), transparent 55%), var(--bg-2);
  padding: 1.5rem;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
.philo-figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}
.philo-anim { position: relative; width: 100%; height: auto; display: block; }
.philo-anim * { vector-effect: non-scaling-stroke; }
.pa-scene { animation: paScene 11s var(--ease-in-out) infinite; }
.pa-frame { stroke: var(--text); stroke-opacity: 0.35; stroke-width: 1; animation: paFrame 11s var(--ease-in-out) infinite; }
.pa-box { fill: var(--surface); stroke: var(--text); stroke-opacity: 0.28; stroke-width: 1; }
.pa-line { fill: var(--text); fill-opacity: 0.18; }
.pa-check { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pa-block { transform-box: fill-box; transform-origin: center; }
.pa-keep .pa-box { animation: paKeepBox 11s var(--ease-in-out) infinite; }
.pa-keep .pa-line { animation: paKeepLine 11s var(--ease-in-out) infinite; }
.pa-keep .pa-check { animation: paCheck 11s var(--ease-in-out) infinite; }
.pa-drop { animation: paDrop 11s var(--ease-in-out) infinite; }
.pa-b { animation: paMoveB 11s var(--ease-in-out) infinite; }
.pa-c { animation: paMoveC 11s var(--ease-in-out) infinite; }
.pa-d { animation: paMoveD 11s var(--ease-in-out) infinite; }
.pa-dim { stroke: var(--accent); stroke-width: 1; stroke-linecap: round; stroke-opacity: 0.8; opacity: 0; animation: paDim 11s var(--ease-in-out) infinite; }
.pa-dim-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: paDimLine 11s var(--ease-in-out) infinite; }
.pa-cap { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; fill: var(--text-muted); }
.pa-cap-1 { animation: paCap1 11s var(--ease-in-out) infinite; }
.pa-cap-2 { fill: var(--accent); opacity: 0; animation: paCap2 11s var(--ease-in-out) infinite; }

@keyframes paScene { 0% { opacity: 0; } 4% { opacity: 1; } 93% { opacity: 1; } 100% { opacity: 0; } }
/* 1. Les fonctions utiles s'allument (12→22 %) */
@keyframes paKeepBox {
  0%, 12% { stroke: var(--text); stroke-opacity: 0.28; fill: var(--surface); }
  22%, 100% { stroke: var(--accent); stroke-opacity: 0.9; fill: var(--accent-soft); }
}
@keyframes paKeepLine { 0%, 12% { fill: var(--text); fill-opacity: 0.18; } 22%, 100% { fill: var(--accent); fill-opacity: 0.6; } }
@keyframes paCheck { 0%, 16% { opacity: 0; transform: scale(0.6); } 26%, 100% { opacity: 1; transform: none; } }
/* 2. Le superflu s'efface (30→42 %) */
@keyframes paDrop { 0%, 30% { opacity: 1; transform: none; } 42%, 100% { opacity: 0; transform: scale(0.88) translateY(4px); } }
/* 3. L'essentiel se regroupe (46→60 %) */
@keyframes paMoveB { 0%, 46% { transform: none; } 60%, 100% { transform: translateY(-58px); } }
@keyframes paMoveC { 0%, 46% { transform: none; } 60%, 100% { transform: translateY(-58px); } }
@keyframes paMoveD { 0%, 46% { transform: none; } 60%, 100% { transform: translate(-84px, 58px); } }
/* 4. Le cadre s'ajuste au juste besoin (52→68 %) */
@keyframes paFrame {
  0%, 52% { width: 280px; height: 200px; stroke: var(--text); stroke-opacity: 0.35; }
  68%, 100% { width: 196px; height: 142px; stroke: var(--accent); stroke-opacity: 0.7; }
}
/* 5. On prend la mesure : prix fixe (70→80 %) */
@keyframes paDim { 0%, 70% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes paDimLine { 0%, 70% { stroke-dashoffset: 1; } 82%, 100% { stroke-dashoffset: 0; } }
@keyframes paCap1 { 0%, 34% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes paCap2 { 0%, 62% { opacity: 0; transform: translateY(4px); } 72%, 100% { opacity: 1; transform: none; } }

/* Nos principes - grille « manifeste » */
.section-tight { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.page-hero + .section-tight { padding-top: 3.5rem; }
.principles-section { padding-top: 3rem; padding-bottom: 3rem; }
.principles {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin-top: 0.5rem;
}
@media (min-width: 720px) { .principles { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.principle {
  padding: 2.25rem 2rem 2.1rem;
  min-height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.principle .card-icon { margin-bottom: 1.75rem; }
.principle h3 {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  color: var(--text);
}
.principle p { font-size: 1rem; color: var(--text-muted); line-height: 1.65; max-width: 40ch; margin: 0; }
.principle-num {
  position: absolute;
  top: 0.9rem;
  right: 1.35rem;
  font-family: var(--display);
  font-size: clamp(5rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-hover);
  background: linear-gradient(110deg, transparent 35%, var(--accent) 50%, var(--accent-2) 55%, transparent 70%);
  background-size: 320% 100%;
  background-position: -120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: -webkit-text-stroke-color var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out), opacity var(--d-slow);
  opacity: 0.9;
}
.principle > *:not(.principle-num) { position: relative; z-index: 1; }
/* Une lumière traverse le numéro à l'apparition */
html.js .principle-num { opacity: 0; transform: translateY(14px); }
html.js .is-inview .principle-num { opacity: 0.9; transform: none; animation: numSweep 1.8s var(--ease-in-out) 0.5s both; }
@keyframes numSweep {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
.principle:hover .principle-num { -webkit-text-stroke-color: var(--accent); transform: translateY(-4px); opacity: 1; }
[data-theme="light"] .principle-num { -webkit-text-stroke-color: rgba(15,23,42,0.22); }
.principle:hover { transform: translateY(-5px); }

/* Cas d'usage */
.use-cases { display: grid; gap: 1.1rem; margin-top: 2rem; }
@media (min-width: 640px) { .use-cases { grid-template-columns: repeat(2, 1fr); } }
.use-case .meta {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-top: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
}

/* ---------- 11. Contact ---------- */
.contact-section { padding: 4rem 1.25rem 6rem; }
.contact-grid {
  display: grid;
  gap: 2.5rem;
  max-width: 860px;
  margin: 0 auto;
}
@media (min-width: 720px) { .contact-grid { grid-template-columns: 1fr 1.6fr; gap: 3.5rem; } }
.contact-info h2, .contact-form-wrapper h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  color: var(--text);
}
.contact-info p { margin-bottom: 1.25rem; color: var(--text-muted); line-height: 1.6; }
.contact-info p strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.2rem; font-weight: 600; }
.contact-form-wrapper {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.contact-form .field { margin-bottom: 1.1rem; }
.contact-form label {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--text-muted);
  transition: color var(--d-fast);
}
.contact-form .field:focus-within label { color: var(--accent); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  font-family: var(--sans);
  font-size: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color var(--d-base), box-shadow var(--d-base), background var(--d-base);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-faint); }
.contact-form input:hover, .contact-form textarea:hover { border-color: var(--border-hover); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: transparent;
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form button { margin-top: 0.4rem; width: 100%; }
@media (min-width: 720px) { .contact-form button { width: auto; } }
.form-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 1.25rem; line-height: 1.6; }

/* ---------- 12. Pages légales ---------- */
.legal-main { padding-top: calc(var(--header-h) + 3rem); padding-right: 1.25rem; padding-bottom: 5rem; padding-left: 1.25rem; }
.legal-main h1 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 0.35rem; }
.legal-main .meta { font-size: 0.9rem; color: var(--text-faint); margin-bottom: 2.5rem; }
.legal.prose h2 { font-size: 1.15rem; margin-top: 2rem; }
.legal.prose p { margin-bottom: 0.85rem; font-size: 1rem; }

/* ---------- 13. Footer ---------- */
.site-footer {
  position: relative;
  padding: 4rem 1.25rem 2rem;
  background: var(--bg-2);
  overflow: hidden;
}
/* Filigrane : le symbole du logo, en masque, dans la couleur du thème */
.site-footer::after {
  content: '';
  position: absolute;
  right: -4%;
  bottom: -6%;
  width: clamp(280px, 38vw, 620px);
  aspect-ratio: 573 / 344;
  /* Image blanche sur fond transparent ; inversée en thème clair.
     (Pas de mask-image : il ne se charge pas en ouverture locale via file://) */
  background: url("../images/logo-symbol.png") center / contain no-repeat;
  opacity: 0.045;
  transform: rotate(-6deg);
  pointer-events: none;
}
[data-theme="light"] .site-footer::after { filter: invert(1); opacity: 0.06; }
.site-footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; } }
.footer-brand .logo { max-width: 8.5rem; margin-bottom: 1rem; }
.footer-brand .logo img { max-height: 1.65rem; }
.footer-brand p { font-size: 0.92rem; color: var(--text-muted); max-width: 30ch; line-height: 1.6; }
.footer-links h2, .footer-contact h2,
.footer-links h4, .footer-contact h4 {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a, .footer-contact p, .footer-contact a { font-size: 0.92rem; color: var(--text-muted); }
.footer-links a {
  display: inline-block;
  transition: color var(--d-fast), transform var(--d-base) var(--ease-out);
}
.footer-links a:hover { color: var(--text); transform: translateX(3px); }
.footer-contact p { margin-bottom: 0.45rem; }
.footer-contact a:hover, .footer-legal a:hover { color: var(--text); }
.footer-legal {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-legal p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.footer-legal a { color: var(--text-muted); }
.copyright { color: var(--text-faint) !important; }

/* ---------- 14. Système de révélation au scroll ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="scale"] { transform: translateY(16px) scale(0.965); }
html.js [data-reveal="blur"] { transform: translateY(14px); filter: blur(8px); }
html.js [data-reveal="left"] { transform: translateX(-24px); }
html.js [data-reveal="right"] { transform: translateX(24px); }
html.js [data-reveal].is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Stagger automatique des grilles */
.value-grid > [data-reveal]:nth-child(1), .use-cases > [data-reveal]:nth-child(1), .stats-list > [data-reveal]:nth-child(1) { --i: 0; }
.value-grid > [data-reveal]:nth-child(2), .use-cases > [data-reveal]:nth-child(2), .stats-list > [data-reveal]:nth-child(2) { --i: 1; }
.value-grid > [data-reveal]:nth-child(3), .use-cases > [data-reveal]:nth-child(3), .stats-list > [data-reveal]:nth-child(3) { --i: 2; }
.value-grid > [data-reveal]:nth-child(4), .use-cases > [data-reveal]:nth-child(4) { --i: 3; }
.list-principles > [data-reveal]:nth-child(1) { --i: 0; }
.list-principles > [data-reveal]:nth-child(2) { --i: 1; }
.list-principles > [data-reveal]:nth-child(3) { --i: 2; }
.list-principles > [data-reveal]:nth-child(4) { --i: 3; }

/* ---------- 15. Espace client - connexion ---------- */
.client-auth-page {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.client-auth-page main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  overflow: hidden;
}
.client-auth-page .site-header {
  flex-shrink: 0;
  position: relative;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.client-auth-page .header-inner { padding: 0.5rem 1rem; }
.client-auth-layout { width: 100%; max-width: 420px; max-height: 100%; overflow: hidden; }
.client-auth-panel {
  padding: 1.6rem 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(79,140,255,0.06);
  overflow: hidden;
  animation: panelIn 0.9s var(--ease-out) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
[data-theme="light"] .client-auth-panel { box-shadow: 0 4px 6px rgba(15,23,42,0.04), 0 24px 48px -12px rgba(15,23,42,0.12); }
.client-auth-panel-header { margin-bottom: 1.25rem; text-align: center; }
.client-auth-panel-header .logo-mobile { display: inline-block; margin-bottom: 0.85rem; max-width: 8.5rem; margin-left: auto; margin-right: auto; }
.client-auth-panel-header .logo-mobile img { max-height: 1.75rem; margin: 0 auto; object-position: center center; filter: var(--logo-filter); }
.client-auth-panel-header h2 { font-family: var(--display); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.2rem; color: var(--text); }
.client-auth-panel-header p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.4; }
.auth-form .form-group { margin-bottom: 0.85rem; }
.auth-form label { display: block; font-size: 0.86rem; font-weight: 500; margin-bottom: 0.4rem; color: var(--text-muted); transition: color var(--d-fast); }
.auth-form .form-group:focus-within label { color: var(--accent); }
.auth-form .input-wrap { position: relative; }
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  padding: 0.7rem 2.5rem 0.7rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color var(--d-base), box-shadow var(--d-base), background var(--d-base);
}
.auth-form input::placeholder { color: var(--text-faint); }
.auth-form input:hover { border-color: var(--border-hover); }
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: transparent; }
.auth-form input.is-invalid { border-color: #e57373; box-shadow: 0 0 0 4px rgba(229,115,115,0.18); animation: shake 0.4s var(--ease-out); }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.auth-form .field-error { display: none; font-size: 0.8rem; color: #e57373; margin-top: 0.35rem; }
.auth-form .form-group.has-error .field-error { display: block; animation: fadeIn 0.3s both; }
.password-toggle {
  position: absolute;
  right: 0.45rem; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
}
.password-toggle:hover { color: var(--text); background: var(--bg-elevated); }
.password-toggle svg { width: 18px; height: 18px; }
.auth-form-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1.1rem; font-size: 0.82rem; }
.auth-remember { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); cursor: pointer; }
.auth-remember input { width: 1rem; height: 1rem; accent-color: var(--accent); }
.auth-forgot { color: var(--accent); font-weight: 500; }
.auth-forgot:hover { text-decoration: underline; }
.auth-form .btn-primary { width: 100%; }
.auth-form .btn-primary.is-loading { pointer-events: none; opacity: 0.85; }
.auth-form .btn-large { padding: 0.8rem 1.5rem; font-size: 0.95rem; }
.auth-alert {
  display: none;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.85rem;
  font-size: 0.86rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  line-height: 1.45;
}
.auth-alert.is-visible { display: block; animation: menuIn 0.4s var(--ease-out) both; }
.auth-alert-error { background: rgba(229,115,115,0.1); border-color: rgba(229,115,115,0.3); color: #f4a9a9; }
[data-theme="light"] .auth-alert-error { color: #b91c1c; background: rgba(185,28,28,0.06); }
.client-auth-panel-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: 1.1rem; font-size: 0.76rem; color: var(--text-faint);
}
.client-auth-panel-footer a { color: var(--text-faint); transition: color var(--d-fast); }
.client-auth-panel-footer a:hover { color: var(--accent); }
.auth-back { display: inline-flex; align-items: center; gap: 0.3rem; }
.auth-back svg { width: 14px; height: 14px; transition: transform var(--d-base) var(--ease-out); }
.auth-back:hover svg { transform: translateX(-3px); }
@media (max-height: 600px) {
  .client-auth-panel { padding: 0.9rem 1rem 0.8rem; }
  .client-auth-panel-header { margin-bottom: 0.65rem; }
  .client-auth-panel-header h2 { font-size: 1.2rem; }
  .auth-form .form-group { margin-bottom: 0.55rem; }
  .auth-form-row { margin-bottom: 0.75rem; }
}

/* ---------- 16. Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none; }
  .hero-orbs { transform: none !important; }
  .bp-draw { stroke-dashoffset: 0 !important; }
  .bp-fade, .bp-handle { opacity: 1 !important; }
  .bp-fit, .bp-handle-live { animation: none !important; }
  .line > span, .hero-reveal, html.js [data-reveal], .scroll-hint, .hero-orb { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-orb { opacity: 0.75 !important; }
  .section-title::before { width: 36px; }
  .btn { transform: none !important; }
  .philo-anim * { animation: none !important; }
  .pa-drop { opacity: 0 !important; }
  .pa-b, .pa-c { transform: translateY(-58px) !important; }
  .pa-d { transform: translate(-84px, 58px) !important; }
  .pa-frame { width: 196px !important; height: 142px !important; stroke: var(--accent) !important; }
  .pa-keep .pa-box { stroke: var(--accent) !important; fill: var(--accent-soft) !important; }
  .pa-check, .pa-dim, .pa-cap-2 { opacity: 1 !important; transform: none !important; }
  .pa-dim-line { stroke-dashoffset: 0 !important; }
  .pa-cap-1 { opacity: 0 !important; }
  .stat-marker, .stat-marker::after { transform: scaleY(1) !important; }
  .stat-marker::after { transform: translateX(-50%) scale(1) !important; }
  .stat-suffix { opacity: 1 !important; transform: none !important; }
  .ruler-ticks { animation: none !important; }
  html.js .principle-num { opacity: 0.9 !important; transform: none !important; animation: none !important; }
  html.js .card-icon path, html.js .card-icon circle { stroke-dashoffset: 0 !important; }
  html.js .process .process-marker, html.js .process .process-body { opacity: 1 !important; transform: none !important; }
  .process-step:not(:last-child)::after { transform: none !important; animation: none !important; }
}

/* ============================================================
   17. Composants ajoutés au lot SEO / conversion
   ============================================================ */

/* ---------- Boutons compacts et CTA d'en-tête ---------- */
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-block; } }
.nav-cta-mobile { margin-top: 1.25rem; }
.nav-cta-mobile .btn { display: block; width: 100%; padding: 0.85rem 1.2rem; font-size: 0.95rem; }
@media (min-width: 900px) { .nav-cta-mobile { display: none; } }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--border-hover);
}
.link-button:hover { color: var(--text); }

/* ---------- Surtitre de page ---------- */
.page-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-glass);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
[data-theme="light"] .page-eyebrow { color: var(--accent-deep); }

.section-alt { background: var(--bg-2); }
.card-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-2);
}
[data-theme="light"] .card-link { color: var(--accent-deep); }
.card-link::after { content: ' \2192'; transition: transform var(--d-fast); display: inline-block; }
.card-link:hover::after { transform: translateX(3px); }

/* ---------- Pied de page : compléments ---------- */
.footer-loc {
  display: flex; align-items: center; gap: 0.45rem;
  margin-top: 0.75rem; font-size: 0.88rem; color: var(--text-faint);
}
.footer-loc svg { flex-shrink: 0; }
.footer-note { font-size: 0.85rem !important; color: var(--text-faint) !important; margin: 0.75rem 0 1rem !important; }
.footer-contact .btn { margin-top: 0.25rem; }

/* ---------- Barre d'action mobile ---------- */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--header-bg-solid);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 0.32s var(--ease-out);
}
.cta-bar.is-visible { transform: translateY(0); }
@media (min-width: 900px) { .cta-bar { display: none !important; } }
.cta-bar-main { flex: 1; padding: 0.75rem 1rem; font-size: 0.92rem; }
.cta-bar-call {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.86rem; font-weight: 600;
  color: var(--text);
  background: var(--bg-glass);
}
.cta-bar-call:hover { border-color: var(--border-hover); }

/* ---------- Bandeau de consentement ---------- */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border-hover);
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.55);
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.consent.is-open { transform: translateY(0); opacity: 1; }
.consent-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 760px) {
  .consent-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
}
.consent-text h2 { font-family: var(--display); font-size: 0.98rem; margin-bottom: 0.3rem; }
.consent-text p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.55; max-width: 62ch; }
.consent-text a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 0.2em; }
[data-theme="light"] .consent-text a { color: var(--accent-deep); }
.consent-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.consent-actions .btn { flex: 1; white-space: nowrap; }
/* Une seule décision à la fois : tant que le bandeau cookies est ouvert,
   la barre CTA mobile s'efface pour ne pas se superposer à lui. */
html.consent-open .cta-bar { transform: translateY(110%) !important; }

/* ---------- Tarifs ---------- */
.pricing-grid {
  list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; gap: 1.25rem;
}
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.pricing-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
:root:not([data-theme="light"]) .pricing-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
}
.pricing-card.is-featured {
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-card-hover);
}
@media (min-width: 900px) { .pricing-card.is-featured { transform: scale(1.035); } }
.pricing-badge {
  position: absolute; top: -0.75rem; left: 1.6rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
}
.pricing-head h2 { font-family: var(--display); font-size: 1.2rem; margin-bottom: 0.2rem; }
.pricing-tag { font-size: 0.8rem; color: var(--text-faint); }
.pricing-amount {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem;
  margin: 1.4rem 0 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.pricing-from { font-size: 0.82rem; color: var(--text-faint); }
.pricing-number { font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
.pricing-unit { font-size: 0.85rem; color: var(--text-muted); }
.pricing-desc { font-size: 0.93rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.2rem; }
.pricing-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.6rem; }
.pricing-list li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.9rem; color: var(--text-muted); line-height: 1.5;
}
.pricing-list li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 0.72rem; height: 0.4rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.pricing-card .btn { margin-top: auto; }
.pricing-footnote { margin-top: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--text-faint); }

/* ---------- Facteurs de prix ---------- */
.factor-list { list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: 820px; display: grid; gap: 1.1rem; }
.factor {
  display: flex; gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.factor-index {
  font-family: var(--display); font-size: 0.85rem; font-weight: 700;
  color: var(--accent); flex-shrink: 0; padding-top: 0.15rem;
}
.factor h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.factor p { font-size: 0.93rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- Deux listes en vis-à-vis ---------- */
.two-col-lists { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .two-col-lists { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.list-block {
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
.list-block h2 { font-family: var(--display); font-size: 1.15rem; margin-bottom: 1.2rem; }
.list-block-yes { border-color: rgba(79,140,255,0.28); }
.check-list, .cross-list { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.check-list li, .cross-list li {
  position: relative; padding-left: 1.75rem;
  font-size: 0.94rem; color: var(--text-muted); line-height: 1.55;
}
.check-list li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.4em;
  width: 0.72rem; height: 0.4rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.cross-list li::before,
.cross-list li::after {
  content: ''; position: absolute; left: 0.2rem; top: 0.62em;
  width: 0.7rem; height: 2px; background: var(--text-faint);
}
.cross-list li::before { transform: rotate(45deg); }
.cross-list li::after { transform: rotate(-45deg); }

/* ---------- Symptômes (pages d'atterrissage) ---------- */
.symptom-list { list-style: none; padding: 0; margin: 2.2rem auto 0; max-width: 760px; display: grid; gap: 0.9rem; }
.symptom {
  position: relative;
  padding: 1.1rem 1.3rem 1.1rem 3rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-soft);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  font-size: 0.97rem; color: var(--text-muted); line-height: 1.6;
}
.symptom::before {
  content: ''; position: absolute; left: 1.25rem; top: 1.45em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--accent); opacity: 0.7;
}

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: 2.5rem; }
@media (min-width: 940px) { .faq-layout { grid-template-columns: 240px 1fr; gap: 4rem; align-items: start; } }
.faq-nav h2 {
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 0.9rem;
}
.faq-nav ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.faq-nav a { font-size: 0.93rem; color: var(--text-muted); }
.faq-nav a:hover { color: var(--text); }
@media (min-width: 940px) { .faq-nav { position: sticky; top: calc(var(--header-h) + 2rem); } }
.faq-nav-cta {
  margin-top: 1.8rem; padding: 1.2rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated);
}
.faq-nav-cta p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.8rem; }
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group-title { font-family: var(--display); font-size: 1.3rem; margin-bottom: 1.2rem; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color var(--d-fast);
}
.faq-item[open] { border-color: var(--border-hover); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  font-weight: 500; font-size: 1rem; line-height: 1.45;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--text); }
.faq-chevron { flex-shrink: 0; color: var(--text-faint); transition: transform var(--d-fast) var(--ease-out); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-answer { padding: 0 1.35rem 1.35rem; }
.faq-answer p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; }
.faq-answer p + p { margin-top: 0.8rem; }
.faq-answer strong { color: var(--text); font-weight: 600; }

/* ---------- Formulaire : états, aides, erreurs ---------- */
.req { color: var(--accent); }
.opt { color: var(--text-faint); font-weight: 400; }
.field-help { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-faint); line-height: 1.5; }
.field-error { margin-top: 0.4rem; font-size: 0.83rem; color: #ff8a8a; }
[data-theme="light"] .field-error { color: #c0392b; }
.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color: #ff8a8a;
}
.contact-form select {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - 0.8rem) 1.25rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.contact-form select:focus-visible { border-color: var(--accent); outline: none; }
.field-check { display: flex; align-items: flex-start; gap: 0.65rem; }
.field-check input { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; accent-color: var(--accent); flex-shrink: 0; }
.field-check label { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  margin-top: 1rem; padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm); font-size: 0.9rem; line-height: 1.55;
}
.form-status.is-ok { background: rgba(79,140,255,0.12); border: 1px solid var(--accent-soft); color: var(--text); }
.form-status.is-error { background: rgba(255,138,138,0.1); border: 1px solid rgba(255,138,138,0.35); color: var(--text); }
.form-status.is-info { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); }
.btn.is-loading { opacity: 0.7; cursor: progress; }

/* ---------- Bandeau de preuve sous le pli ---------- */
.proof-bar { border-block: 1px solid var(--border); background: var(--bg-2); }
.proof-list {
  list-style: none; padding: 1.1rem 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.6rem 2.2rem;
}
.proof-list li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.87rem; color: var(--text-muted); white-space: nowrap;
}
.proof-list svg { color: var(--accent); flex-shrink: 0; }

/* ---------- Logos clients ---------- */
.clients { padding: 1.85rem 0; border-block: 1px solid var(--border); background: var(--bg-2); }
.clients-label {
  text-align: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 1.25rem;
}
.clients-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2.6rem 3.6rem;
}
.clients-list img {
  display: block; height: 2.1rem; width: auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.25s var(--ease-out);
}
[data-theme="dark"] .clients-list img { filter: grayscale(1) opacity(0.55) invert(1) brightness(1.6); }
.clients-list img:hover,
.clients-list img:focus-visible { filter: grayscale(0) opacity(1); }
[data-theme="dark"] .clients-list img:hover,
[data-theme="dark"] .clients-list img:focus-visible { filter: grayscale(0) opacity(1) invert(0); }
@media (prefers-reduced-motion: reduce) { .clients-list img { transition: none; } }

/* ---------- 404 ---------- */
.error-hero .page-title { font-size: clamp(2rem, 6vw, 3.2rem); }

/* ============================================================
   18. Budget d'animation sur petit écran
   Les effets les plus coûteux (flous animés, halos, boucles
   infinies) sont désactivés sous 768 px : gain direct sur le
   temps de blocage du thread principal et sur la batterie.
   ============================================================ */
@media (max-width: 767px) {
  :root, [data-theme="dark"], [data-theme="light"] { --blur: 10px; }
  .hero-orbs { display: none; }
  .hero-bg::after { animation: none; }
  .ruler-ticks { animation: none; }
  .focus-section::after { filter: blur(18px); opacity: 0.4; }
  .hero-label::before { animation: none; }
  .hero-title em, .page-title em { animation: none; }
  .bp-fit { animation: none; }
  .bp-handle-live { animation: bpIn 0.6s var(--ease-out) forwards; }
  .pa-scene, .pa-frame, .pa-keep .pa-box, .pa-keep .pa-line,
  .pa-keep .pa-check, .pa-drop { animation: none; }
  .process.is-inview .process-step::after { animation: none; }
  .btn-ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.js [data-reveal="blur"] { filter: none; }
  .card-glass::before { display: none; }
}

/* Interface esquissée dans le blueprint du hero */
.bp-ui { animation-delay: 2.6s; animation-duration: 1.2s; }
.bp-ui .bp-fill { fill-opacity: 0.11; }
.bp-ui .bp-stroke { stroke-opacity: 0.1; }
[data-theme="light"] .bp-ui .bp-fill { fill-opacity: 0.13; }
[data-theme="light"] .bp-ui .bp-stroke { stroke-opacity: 0.13; }
.bp-ui .bp-ui-accent { fill: var(--accent); fill-opacity: 0.34; }
@media (max-width: 899px) { .bp-ui { display: none; } }

/* ============================================================
   19. Prise de rendez-vous (Cal.com)
   Le calendrier est encadré comme une fenêtre d'application,
   en écho au blueprint du hero : le service tiers ne doit pas
   ressembler à un widget collé par-dessus la page.
   ============================================================ */
.booking-section { padding-bottom: 2rem; }
.booking-head { text-align: center; margin-bottom: 3rem; }

.booking-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1040px) {
  .booking-layout { grid-template-columns: 340px 1fr; gap: 3rem; }
}

.booking-aside h3 { font-family: var(--display); font-size: 1.05rem; margin-bottom: 1.4rem; }
.booking-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.3rem; }
.booking-points li { display: flex; gap: 0.9rem; }
.booking-step {
  flex-shrink: 0;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  background: var(--bg-elevated);
  font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  color: var(--accent);
}
.booking-points strong { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; }
.booking-points p { font-size: 0.89rem; color: var(--text-muted); line-height: 1.55; }
.booking-meta {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--border);
  font-size: 0.86rem; color: var(--text-muted);
}
.booking-meta svg { color: var(--accent); flex-shrink: 0; }
.booking-fallback { margin-top: 0.9rem; font-size: 0.82rem; color: var(--text-faint); line-height: 1.55; }
.booking-fallback a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.18em; }
.booking-fallback a:hover { color: var(--text); }

.booking-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
:root:not([data-theme="light"]) .booking-frame {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
}
.booking-frame-bar {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.booking-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); opacity: 0.5; }
.booking-frame-label {
  margin-left: 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.02em; color: var(--text-faint);
}

.cal-inline { position: relative; min-height: 620px; }
.cal-inline > :not(.cal-skeleton) { width: 100%; }
@media (max-width: 720px) { .cal-inline { min-height: 560px; } }

/* Ossature affichée pendant le chargement : la page ne bouge pas d'un pixel
   quand le calendrier arrive (CLS = 0). */
.cal-skeleton {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr; gap: 1.2rem;
  padding: 1.8rem;
  align-content: start;
}
@media (min-width: 780px) { .cal-skeleton { grid-template-columns: 200px 1fr; } }
.cal-skeleton-side { display: grid; gap: 0.8rem; align-content: start; }
.cal-skeleton-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; align-content: start;
}
.sk {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skShimmer 1.6s linear infinite;
}
.sk-lg { height: 22px; width: 78%; }
.sk-md { height: 13px; width: 60%; }
.sk-sm { height: 11px; width: 45%; }
.sk-cell { height: 40px; }
@keyframes skShimmer { to { background-position: -200% 0; } }
.cal-skeleton-note {
  grid-column: 1 / -1;
  margin-top: 0.6rem; font-size: 0.84rem; color: var(--text-faint); text-align: center;
}
.cal-inline.is-slow .cal-skeleton-note::after {
  content: " Si rien n'apparaît, utilisez le lien direct ci-contre.";
}
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* Séparateur « ou » entre le calendrier et le formulaire */
.section-divider {
  display: flex; align-items: center; gap: 1rem;
  max-width: 1080px; margin: 1rem auto 0; padding: 0 1.25rem;
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.section-divider span {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint);
}

/* Tableaux des pages légales */
.legal-table {
  width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem;
  font-size: 0.88rem;
  display: block; overflow-x: auto; white-space: normal;
}
@media (min-width: 720px) { .legal-table { display: table; } }
.legal-table th, .legal-table td {
  padding: 0.7rem 0.85rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); line-height: 1.5;
}
.legal-table th {
  font-size: 0.76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint);
  border-bottom-color: var(--border-hover);
}
.legal-table td { color: var(--text-muted); }
.legal-table code {
  font-size: 0.85em; padding: 0.1rem 0.35rem; border-radius: 4px;
  background: var(--bg-elevated); color: var(--text);
}

/* ============================================================
   20. Réalisations - showcase MacBook + iPhone
   ============================================================ */
/* ---------- Showcase : MacBook + iPhone ---------- */
.showcase-section { padding-bottom: 2rem; overflow: hidden; }
.showcase { display: grid; gap: 4.5rem; margin-top: 1rem; }
.showcase-more { text-align: center; margin: 2.75rem 0 0; }
.showcase-item { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .showcase { gap: 6rem; }
  .showcase-item { grid-template-columns: 0.8fr 1.2fr; gap: 3.5rem; }
  .showcase-item.is-reverse .showcase-text { order: 2; }
  .showcase-item.is-reverse .showcase-stage { order: 1; }
}
.showcase-kicker {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.showcase-text h3 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 0.85rem;
}
.showcase-text p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; margin-bottom: 1.25rem; text-wrap: pretty; max-width: 44ch; }
.showcase-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.showcase-tags li {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
}
/* Scène 3D */
.showcase-stage {
  position: relative;
  perspective: 1400px;
  padding: 1.5rem 0 2.5rem;
  --rx: 0;
  --ry: 0;
}
.stage-glow {
  position: absolute;
  left: 50%; top: 55%;
  width: 90%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--accent-soft), transparent 65%);
  filter: blur(30px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.device { position: relative; z-index: 1; transform-style: preserve-3d; }
.device img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: object-position 5s var(--ease-in-out); }
.showcase-stage:hover .device img { object-position: bottom; }
/* MacBook */
.device-mac {
  width: 86%;
  transform: rotateY(calc(var(--ry) * -1deg)) rotateX(calc(var(--rx) * 1deg));
  transition: transform 0.9s var(--ease-out);
}
.mac-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 7px solid #1a1e27;
  border-bottom-width: 9px;
  background: #0b0e14;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 40px 80px -30px rgba(0,0,0,0.7),
    0 0 0 6px rgba(0,0,0,0.15) inset;
}
.mac-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 14%; height: 10px;
  background: #1a1e27;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}
.mac-base {
  position: relative;
  height: 13px;
  width: 116%;
  margin-left: -8%;
  background: linear-gradient(180deg, #3a404b, #262b34 60%, #1b1f27);
  border-radius: 3px 3px 12px 12px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.7);
}
.mac-base::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 16%; height: 4px;
  background: #171a21;
  border-radius: 0 0 6px 6px;
}
.mac-base::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(255,255,255,0.18);
}
[data-theme="light"] .mac-screen { border-color: #2a2e37; }
[data-theme="light"] .mac-base { background: linear-gradient(180deg, #d9dce3, #b8bcc6 60%, #9ba0ab); }
[data-theme="light"] .mac-base::before { background: #8f939c; }
/* iPhone */
.device-phone {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 24%;
  min-width: 96px;
  transform: translateZ(60px) rotateY(calc(var(--ry) * -1.4deg)) rotateX(calc(var(--rx) * 1.4deg));
  transition: transform 0.9s var(--ease-out);
  z-index: 3;
}
.phone-frame {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 14% / 6.5%;
  border: 5px solid #16191f;
  background: #0b0e14;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 30px 60px -20px rgba(0,0,0,0.75);
  animation: phoneFloat 7s var(--ease-in-out) infinite;
}
.phone-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.6);
  pointer-events: none;
}
.phone-island {
  position: absolute;
  top: 3.2%; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 3.2%;
  background: #0a0c10;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
[data-theme="light"] .phone-frame { border-color: #2a2e37; }
/* Vitrine avec un seul appareil (application mobile uniquement) */
.showcase-stage-single { display: flex; justify-content: center; align-items: flex-end; }
.showcase-stage-single .device-phone {
  position: relative; right: auto; bottom: auto;
  width: 46%; min-width: 190px; max-width: 260px;
}
@media (max-width: 720px) { .showcase-stage-single .device-phone { width: 58%; } }
/* Entrée en scène */
html.js .showcase-stage[data-reveal] .device-mac { opacity: 0; transform: translateY(24px) rotateX(8deg); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
html.js .showcase-stage[data-reveal] .device-phone { opacity: 0; transform: translate(0, 40px) translateZ(60px); transition: opacity 1s var(--ease-out) 0.25s, transform 1.2s var(--ease-out) 0.25s; }
html.js .showcase-stage.is-inview .device-mac { opacity: 1; transform: rotateY(calc(var(--ry) * -1deg)) rotateX(calc(var(--rx) * 1deg)); transition: opacity 1s var(--ease-out), transform 0.9s var(--ease-out); }
html.js .showcase-stage.is-inview .device-phone { opacity: 1; transform: translateZ(60px) rotateY(calc(var(--ry) * -1.4deg)) rotateX(calc(var(--rx) * 1.4deg)); transition: opacity 1s var(--ease-out), transform 0.9s var(--ease-out); }
@media (max-width: 899px) {
  .showcase-stage { padding: 1rem 0 1.5rem; }
  .device-mac { width: 88%; }
  .device-phone { width: 26%; right: 0; }
}


/* ============================================================
   21. Contact simplifié - deux voies, formulaire court
   ============================================================ */
.contact-choose { padding: 2.5rem 1.25rem 1rem; }
.contact-choose .container { max-width: 860px; }
.contact-paths { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .contact-paths { grid-template-columns: 1fr 1fr; } }
.contact-path {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform var(--d-base) var(--ease-out), border-color var(--d-base), box-shadow var(--d-base);
}
:root:not([data-theme="light"]) .contact-path { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); }
.contact-path:hover { transform: translateY(-3px); border-color: var(--accent-soft); box-shadow: var(--shadow-card-hover); color: var(--text); }
.contact-path-call { border-color: rgba(79,140,255,0.35); }
.contact-path-call::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 0% 0%, var(--accent-soft), transparent 55%);
  pointer-events: none;
}
.contact-path-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  position: relative;
}
.contact-path-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-path-body { display: flex; flex-direction: column; gap: 0.15rem; position: relative; }
.contact-path-title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.contact-path-desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.4; }
.contact-path-arrow { margin-left: auto; color: var(--text-faint); font-size: 1.1rem; position: relative; transition: transform var(--d-base) var(--ease-out), color var(--d-base); }
.contact-path:hover .contact-path-arrow { color: var(--accent); transform: translateY(3px); }
.contact-direct {
  list-style: none;
  display: grid;
  gap: 0.6rem 1.5rem;
  padding: 0.25rem 0.5rem;
}
@media (min-width: 640px) { .contact-direct { grid-template-columns: repeat(3, auto); justify-content: space-between; } }
.contact-direct li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.92rem; }
.contact-direct-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); font-weight: 500; }
.contact-direct-link svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-direct-link:not(.is-static):hover { color: var(--accent); }
.contact-direct-note { font-size: 0.78rem; color: var(--text-faint); }
.copy-btn {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast);
}
.copy-btn:hover { color: var(--text); border-color: var(--border-hover); }
.copy-btn.is-copied { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
/* Agenda : pleine largeur, sans colonne latérale */
.booking-compact { padding-top: 3rem; }
.booking-compact .booking-head { margin-bottom: 2rem; }
.booking-layout-single { grid-template-columns: 1fr !important; max-width: 860px; margin: 0 auto; }
.booking-fallback-center { text-align: center; margin-top: 1rem; }
/* Formulaire court */
.contact-write { padding-top: 2.5rem; }
.contact-write .container { max-width: 720px; }
.contact-write .contact-form-wrapper { padding: 2rem 1.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (min-width: 640px) { .contact-write .contact-form-wrapper { padding: 2.5rem 2.5rem 2.25rem; } }
.contact-form-head { margin-bottom: 1.75rem; }
.contact-form-head h2 { font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.4rem; color: var(--text); }
.contact-form-head p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.55; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.contact-form legend { display: block; font-size: 0.86rem; font-weight: 500; margin-bottom: 0.45rem; color: var(--text-muted); }
.field-choice { border: none; padding: 0; margin: 0 0 1.15rem; }
.choice-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast);
}
.choice:hover span { border-color: var(--border-hover); color: var(--text); }
.choice input:checked + span { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* En thème clair, l'accent sur fond accent-soft tombait à 4,32:1. */
[data-theme="light"] .choice input:checked + span { color: #2a5fd0; }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.field-phone { animation: menuIn 0.4s var(--ease-out) both; }
.form-actions { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.5rem; }
.form-actions .btn { width: 100%; margin-top: 0; }
@media (min-width: 640px) {
  .form-actions { flex-direction: row; align-items: center; gap: 1.25rem; }
  .form-actions .btn { width: auto; white-space: nowrap; }
}
.form-reassure { font-size: 0.82rem; color: var(--text-faint); line-height: 1.5; margin: 0; }
.form-privacy { margin-top: 1.1rem; font-size: 0.8rem; color: var(--text-faint); line-height: 1.55; }
.form-privacy a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.18em; }
.contact-write .form-status { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .phone-frame { animation: none !important; }
  .device img { transition: none !important; }
  .field-phone { animation: none !important; }
}

/* ============================================================
   22. Contact - onglets Message / Rendez-vous, balayage horizontal
   ============================================================ */
/* Page contact : plus de hero séparé. Titre, promesse et sélecteur forment
   un seul bloc, ce qui remonte les deux voies d'accès au-dessus de la ligne
   de flottaison, y compris sur mobile. */
.contact-tabs-section { padding-top: 3.25rem; }
@media (min-width: 768px) { .contact-tabs-section { padding-top: 4.5rem; } }
.contact-lead { text-align: center; max-width: 46rem; margin: 0 auto 2.25rem; }
.contact-title {
  font-family: var(--display);
  font-size: clamp(2rem, 5.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 0.9rem;
  text-wrap: balance;
}
.contact-sub {
  font-size: 1.03rem;
  color: var(--text-muted);
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 40rem;
  margin: 0 auto;
}
.contact-tabs-section .container { max-width: 900px; }
.contact-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  isolation: isolate;
}
:root:not([data-theme="light"]) .contact-switch { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }
.contact-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--d-base);
  -webkit-tap-highlight-color: transparent;
}
.contact-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.contact-tab.is-active { color: #fff; }
.contact-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-switch-thumb {
  position: absolute;
  top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px -10px var(--accent-glow);
  transform: translateX(calc(var(--tab, 0) * 100%));
  transition: transform 0.55s var(--ease-out);
  z-index: 0;
}
/* Indice en boucle, très espacé : un bref glissement puis une longue pause. */
@keyframes switchPeek {
  0%, 10% { transform: translateX(0); }
  16%, 22% { transform: translateX(12%); }
  30%, 100% { transform: translateX(0); }
}
@keyframes tabIdlePulse {
  0%, 10%, 30%, 100% { opacity: 1; }
  16%, 22% { opacity: 0.65; }
}
.contact-switch.is-hinting .contact-switch-thumb {
  animation: switchPeek 8.5s var(--ease-out) 1.2s infinite;
}
.contact-switch.is-hinting .contact-tab:not(.is-active) {
  animation: tabIdlePulse 8.5s ease-in-out 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .contact-switch.is-hinting .contact-switch-thumb,
  .contact-switch.is-hinting .contact-tab:not(.is-active) { animation: none; }
}
.contact-tab .tab-short { display: none; }
@media (max-width: 480px) {
  .contact-tab { font-size: 0.9rem; padding: 0.75rem 0.5rem; }
  .contact-tab .tab-long { display: none; }
  .contact-tab .tab-short { display: inline; }
}
.contact-swipe-hint {
  display: none;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 0.8rem 0 0;
}
.contact-swipe-hint span { display: inline-block; color: var(--accent); animation: hintNudge 2.4s var(--ease-in-out) infinite; }
.contact-swipe-hint span:first-child { animation-delay: 1.2s; }
@keyframes hintNudge { 0%, 100% { transform: translateX(0); opacity: 0.6; } 50% { transform: translateX(3px); opacity: 1; } }
@media (hover: none) and (pointer: coarse) { .contact-swipe-hint { display: block; } }
.contact-swipe-hint.is-gone { display: none; }

/* Piste : les deux panneaux côte à côte, défilement horizontal aimanté */
.contact-track {
  display: flex;
  align-items: flex-start;
  margin-top: 1.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* marge intérieure pour laisser respirer l'ombre des cartes */
  padding: 12px 0 28px;
  margin-left: -12px; margin-right: -12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  transition: height 0.55s var(--ease-out);
}
.contact-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .contact-track { scroll-behavior: auto; } }
.contact-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 0 12px;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.contact-panel[aria-hidden="true"] { opacity: 0.35; transform: scale(0.97); }
.contact-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.contact-panel .contact-form-wrapper { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem; }
@media (min-width: 640px) { .contact-panel .contact-form-wrapper { padding: 2.5rem 2.5rem 2.25rem; } }
.booking-head-compact { text-align: center; max-width: 640px; margin: 0 auto 1.5rem; }
.booking-head-compact h2 { font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; color: var(--text); }
.booking-head-compact p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.55; }
.contact-panel .booking-frame { max-width: 860px; margin: 0 auto; }
.contact-direct-center { justify-content: center; margin-top: 0.5rem; }
@media (min-width: 640px) { .contact-direct-center { grid-template-columns: repeat(3, auto); justify-content: center; gap: 0.6rem 2.5rem; } }

/* ============================================================
   23. Fond de page - objets du quotidien en filigrane
   ============================================================ */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
/* Le contenu passe devant ; les sections qui ont un fond propre recouvrent la scène */
main, .site-footer { position: relative; z-index: 1; }
.bg-scene::before, .bg-scene::after {
  content: '';
  position: absolute;
  width: 55vw; height: 55vw;
  max-width: 820px; max-height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 65%);
  filter: blur(40px);
  opacity: 0.28;
  animation: bgGlow 38s var(--ease-in-out) infinite alternate;
}
.bg-scene::before { left: -18vw; top: 8vh; }
.bg-scene::after { right: -20vw; bottom: -10vh; animation-delay: -19s; }
@keyframes bgGlow {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6vw, 5vh) scale(1.12); }
}
.bg-glyph {
  position: absolute;
  width: var(--s, 140px);
  height: var(--s, 140px);
  margin: calc(var(--s, 140px) / -2) 0 0 calc(var(--s, 140px) / -2);
  transform: rotate(var(--r, 0deg));
  will-change: transform;
  opacity: 0.55;
}
.bg-glyph svg {
  width: 100%; height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--text);
  stroke-opacity: 0.12;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: glyphDrift var(--t, 20s) var(--ease-in-out) var(--o, 0s) infinite alternate;
}
.bg-glyph svg * { vector-effect: non-scaling-stroke; }
[data-theme="light"] .bg-glyph svg { stroke-opacity: 0.16; }
@keyframes glyphDrift {
  from { transform: translate(0, 0); }
  to { transform: translate(10px, -14px); }
}
/* Détails en accent, et micro-animations lentes */
.bg-glyph .g-cell, .bg-glyph .g-day, .bg-glyph .g-stamp, .bg-glyph .g-tick, .bg-glyph .g-total, .bg-glyph .g-bar, .bg-glyph .g-line, .bg-glyph .g-box {
  stroke: var(--accent);
  stroke-opacity: 0.55;
}
.bg-glyph .g-cell, .bg-glyph .g-day { fill: var(--accent); fill-opacity: 0.16; }
.bg-glyph .g-cell { animation: cellWalk 12s steps(1) infinite; }
@keyframes cellWalk {
  0% { transform: translate(0, 0); }
  25% { transform: translate(16px, 0); }
  50% { transform: translate(16px, 10px); }
  75% { transform: translate(0, 20px); }
  100% { transform: translate(0, 0); }
}
.bg-glyph .g-day { animation: dayWalk 14s steps(1) infinite; }
@keyframes dayWalk {
  0% { transform: translate(0, 0); }
  33% { transform: translate(9px, 0); }
  66% { transform: translate(-18px, 9px); }
  100% { transform: translate(0, 0); }
}
.bg-glyph .g-tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tickDraw 9s var(--ease-out) infinite; }
.bg-glyph .g-tick-2 { animation-delay: 1.2s; }
.bg-glyph .g-tick-3 { animation-delay: 2.4s; }
@keyframes tickDraw {
  0%, 10% { stroke-dashoffset: 1; }
  20%, 80% { stroke-dashoffset: 0; }
  90%, 100% { stroke-dashoffset: 1; }
}
.bg-glyph .g-stamp { stroke-dasharray: 1; stroke-dashoffset: 1; animation: stampDraw 11s var(--ease-in-out) infinite; }
@keyframes stampDraw { 0%, 20% { stroke-dashoffset: 1; opacity: 0; } 35%, 80% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 1; opacity: 0; } }
.bg-glyph .g-bar { transform-box: fill-box; transform-origin: bottom center; animation: barGrow 10s var(--ease-in-out) infinite alternate; }
.bg-glyph .g-bar-2 { animation-delay: -3s; }
.bg-glyph .g-bar-3 { animation-delay: -6s; }
@keyframes barGrow { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
.bg-glyph .g-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lineGrow 12s var(--ease-in-out) infinite; }
@keyframes lineGrow { 0%, 15% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.bg-glyph .g-box { animation: boxLand 13s var(--ease-out) infinite; }
@keyframes boxLand { 0%, 10% { transform: translateY(-10px); opacity: 0; } 25%, 85% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(-10px); opacity: 0; } }
/* Petits écrans : trois objets seulement, plus petits, dans les coins */
@media (max-width: 767px) {
  .bg-glyph { --s: 88px !important; opacity: 0.45; }
  .bg-glyph:nth-child(n+4) { display: none; }
  .bg-scene::before, .bg-scene::after { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glyph svg, .bg-scene::before, .bg-scene::after, .bg-glyph .g-cell, .bg-glyph .g-day, .bg-glyph .g-tick, .bg-glyph .g-stamp, .bg-glyph .g-bar, .bg-glyph .g-line, .bg-glyph .g-box { animation: none !important; }
  .bg-glyph .g-tick, .bg-glyph .g-stamp, .bg-glyph .g-line { stroke-dashoffset: 0; }

/* Budget de rendu sous 900 px.
   Les micro-animations SVG (tracés en stroke-dashoffset, barres, tampons) et le
   flou du halo ne sont pas accélérés par le compositeur : ils repeignent la scène
   à chaque image. Mesuré sur l'accueil en profil mobile bridé : 90 ms de blocage
   du thread principal et +325 ms de Style & Layout, soit 4 points de performance.
   Le décor reste identique sur desktop, où il n'a aucun coût mesurable. */
@media (max-width: 899px) {
  .bg-scene::before, .bg-scene::after { filter: none; opacity: 0.34; animation: none; }
  .bg-glyph svg { animation: none; }
  .bg-glyph .g-cell, .bg-glyph .g-day, .bg-glyph .g-tick, .bg-glyph .g-stamp,
  .bg-glyph .g-bar, .bg-glyph .g-line, .bg-glyph .g-box { animation: none; }
  .bg-glyph .g-tick, .bg-glyph .g-stamp, .bg-glyph .g-line { stroke-dashoffset: 0; }
}
}


/* Champ replié : le budget reste disponible sans alourdir le formulaire */
.field-extra { margin-top: -0.35rem; }
.field-extra > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  list-style: none;
  transition: color var(--d-fast);
}
.field-extra > summary::-webkit-details-marker { display: none; }
.field-extra > summary::before {
  content: '';
  width: 0.55rem; height: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--d-fast) var(--ease-out);
}
.field-extra[open] > summary::before { transform: rotate(45deg); }
.field-extra > summary:hover { color: var(--text); }
.field-extra > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.field-extra > summary span { color: var(--text-faint); font-weight: 400; }
.field-extra[open] > .field { animation: menuIn 0.35s var(--ease-out) both; margin-top: 0.6rem; }
@media (prefers-reduced-motion: reduce) { .field-extra[open] > .field { animation: none; } }