/* ==========================================================================
   BIZSPACES - Design System
   --------------------------------------------------------------------------
   Noir / Blanc / Gris. Sobre. Premium. Montréal.
   Aucune couleur flashy. Aucun gradient saturé.
   ========================================================================== */

/* Performance notes:
   - All transitions use GPU-composited properties (transform, opacity)
   - No transition: all - explicit property lists only
   - Animations use transform/opacity, not box-shadow/width/height
   - will-change used sparingly and removed after animation completes
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* Self-hosted fonts - loaded locally, no 3rd-party requests */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Palette - noir profond, blanc, or premium, gris étagés */
  --c-bg:           #0a0a0a;
  --c-bg-elevated:  #111111;
  --c-bg-soft:      #161616;
  --c-line:         rgba(255, 255, 255, 0.12);
  --c-line-strong:  rgba(255, 255, 255, 0.24);

  --c-fg:           #ffffff;
  --c-fg-soft:      rgba(255, 255, 255, 0.78);
  --c-fg-muted:     rgba(255, 255, 255, 0.60);
  /* WCAG AA text contrast - was 0.35 (2.7:1, fail) bumped 0.55 (~5.3:1, pass) */
  --c-fg-dim:       rgba(255, 255, 255, 0.55);
  --c-accent:       #ffffff;          /* accent unique = blanc pur */
  --c-accent-soft:  rgba(255, 255, 255, 0.06);

  /* Gold accent - now declared centrally to avoid the orphan-fallback
     pattern that referenced --c-gold (defined only in cities.css)
     from styles.css + case-study.css. Both files can now resolve the
     token natively without literal fallbacks. */
  --c-gold:         #d4a537;
  --c-gold-soft:    rgba(212, 165, 55, 0.12);

  /* WCAG AA compliant form error colors */
  --c-error-bg:     rgba(239, 68, 68, 0.12);
  --c-error-border: #ef4444;
  --c-error-text:   #fca5a5;

  /* WCAG AA compliant form success colors */
  --c-success-bg:     rgba(34, 197, 94, 0.1);
  --c-success-border: #22c55e;
  --c-success-text:   #86efac;

  /* Border color tokens (for border-color usage) */
  --border-accent-color: rgba(255, 255, 255, 0.30);

  /* Derived tokens */
  --c-accent-hover:   #e0e0e0;
  --c-accent-rgb:     255, 255, 255;
  --t-fast:           180ms;

  /* ============================================================
     DS PREVIEW TOKENS — premium editorial surfaces
     Mapped to self-hosted fonts: Fraunces (display/serif),
     Inter (sans/body), JetBrains Mono (labels). No CDN.
     ============================================================ */

  /* Surface tiers (Material-3-ish, but warmer) */
  --ds-bg:               #0e0e0e;
  --ds-surface:          #131313;
  --ds-surface-low:      #1c1b1b;
  --ds-surface-lowest:   #0a0a0a;
  --ds-surface-high:     #2a2a2a;
  --ds-surface-highest:  #353534;
  --ds-surface-elevated: #1a1a1a;
  --ds-surface-variant:  #353534;
  --ds-surface-bright:   #393939;
  --ds-surface-dim:      #131313;

  /* Text on surfaces */
  --ds-on-surface:           #e5e2e1;
  --ds-on-surface-variant:   #c4c7c7;
  --ds-text-primary:         #ffffff;
  --ds-text-secondary:       #a1a1aa;

  /* Outlines */
  --ds-outline:           #8e9192;
  --ds-outline-variant:   #444748;

  /* Brand primary (silver/platinum) */
  --ds-primary:               #c9c6c5;
  --ds-on-primary:            #313030;
  --ds-primary-container:     #0a0a0a;
  --ds-on-primary-container:  #7b7979;
  --ds-primary-fixed:         #e5e2e1;
  --ds-primary-fixed-dim:     #c9c6c5;
  --ds-inverse-primary:       #5f5e5e;

  /* Tertiary accent (premium gold) — site gold accent */
  --ds-tertiary:               #d4a537;
  --ds-on-tertiary:            #3c2f00;
  --ds-tertiary-container:     #2a1f00;
  --ds-on-tertiary-container:  #f1d479;
  --ds-tertiary-fixed:         #ffe088;
  --ds-tertiary-fixed-dim:     #e9c349;

  /* Secondary (steel blue) — for accents / links / hover */
  --ds-secondary:               #adc6ff;
  --ds-on-secondary:            #002e6a;
  --ds-secondary-container:     #0566d9;
  --ds-on-secondary-container:  #e6ecff;
  --ds-secondary-fixed:         #d8e2ff;
  --ds-secondary-fixed-dim:     #adc6ff;

  /* Inverse */
  --ds-inverse-surface:     #e5e2e1;
  --ds-inverse-on-surface:  #313030;

  /* Status / accent utility colors */
  --ds-whatsapp-green:  #25D366;
  --ds-error:           #ffb4ab;
  --ds-on-error:        #690005;
  --ds-error-container:  #93000a;
  --ds-on-error-container: #ffdad6;

  /* Border radii (preview tokens — semantic reuse of preview scale) */
  --ds-radius-default: 0.125rem;
  --ds-radius-sm:      0.25rem;
  --ds-radius-md:      0.5rem;
  --ds-radius-lg:      0.75rem;
  --ds-radius-pill:    999px;

  /* Editorial spacing scale (preview tokens — 8px base, dense to sparse) */
  --ds-stack-sm:     8px;
  --ds-stack-md:     16px;
  --ds-stack-lg:     32px;
  --ds-section-gap:  128px;
  --ds-gutter:       24px;
  --ds-margin-mobile: 16px;
  --ds-container-max: 1280px;

  /* Editorial type scale (Fraunces display + Inter body + JBM labels) */
  --ds-display-lg-size:    clamp(2.8rem, 6vw, 72px);
  --ds-display-lg-lh:      1.1;
  --ds-display-lg-ls:      -0.02em;
  --ds-display-lg-weight:  700;

  --ds-headline-lg-size:    clamp(2rem, 4vw, 48px);
  --ds-headline-lg-lh:      1.16;
  --ds-headline-lg-mobile:  clamp(1.75rem, 6vw, 32px);
  --ds-headline-lg-weight:  700;

  --ds-headline-md-size:    1.5rem;
  --ds-headline-md-lh:      1.3;
  --ds-headline-md-weight:  700;

  --ds-body-lg-size:    1.125rem;
  --ds-body-lg-lh:      1.55;
  --ds-body-lg-weight:  400;

  --ds-body-md-size:    1rem;
  --ds-body-md-lh:      1.5;
  --ds-body-md-weight:  400;

  --ds-label-sm-size:    0.75rem;
  --ds-label-sm-lh:      1.33;
  --ds-label-sm-ls:      0.05em;
  --ds-label-sm-weight:  500;

  /* Editorial font family aliases */
  --ds-font-display:    var(--font-serif);
  --ds-font-headline:   var(--font-serif);
  --ds-font-body:       var(--font-sans);
  --ds-font-label:      var(--font-mono);

  /* Atmospheric gradients (for hero backdrops) */
  --ds-grad-radial-dark:    radial-gradient(circle at 50% 50%, #1a1a1a 0%, var(--ds-surface) 100%);
  --ds-grad-perspective:    linear-gradient(var(--ds-outline-variant) 1px, transparent 1px),
                            linear-gradient(90deg, var(--ds-outline-variant) 1px, transparent 1px);
  --ds-grad-vignette:       linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.95) 100%);
  --ds-grad-amber:          linear-gradient(135deg, var(--ds-tertiary) 0%, #b8852a 100%);

  /* Section hero ambient overlay */
  --ds-grid-color:  rgba(68, 71, 72, 0.20);

  /* Typographie - self-hosted */
  --font-serif: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  --fs-display:  clamp(2.8rem, 7vw, 6.5rem);
  --fs-h2:       clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h3:       clamp(1.4rem, 2.2vw, 1.8rem);
  --fs-lead:     clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-mini:     0.75rem;
  --fs-20:       1.25rem;
  --fs-18:       1.125rem;

  --ff-accent:   var(--font-serif);
  --c-muted:     var(--c-fg-muted);

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-normal:   1.55;
  --lh-loose:    1.7;

  --tracking-eyebrow: 0.18em;
  --tracking-cta:     0.14em;

  /* Espacement - rythme 8px */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Rayons */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Ombres - très subtiles */
  --shadow-md:  0 16px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 40px 80px rgba(0, 0, 0, 0.5);

  /* Premium borders */
  --border-soft:       1px solid rgba(255, 255, 255, 0.1);
  --border-medium:     1px solid rgba(255, 255, 255, 0.16);
  --border-accent:     1px solid rgba(255, 255, 255, 0.24);

  /* Durées + easings */
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-emphatic: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container-max:  1200px;
  --container-pad:  clamp(20px, 4vw, 40px);
  --nav-height:     76px;

  /* ============================================================
     FOUNDATION 00 - Tokens utilitaires premium
     ============================================================ */
  --container-wide: 1320px;

  --c-line-medium:  rgba(255, 255, 255, 0.10);
  --c-glow:         0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 80px rgba(0, 0, 0, 0.35);
  --c-card-hover:   0 0 0 1px rgba(255, 255, 255, 0.10), 0 20px 60px rgba(0, 0, 0, 0.45);

}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
}

html {
  scroll-padding-top: calc(var(--nav-height) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-wrap: break-word;
  min-height: 100vh;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--c-fg);
  color: var(--c-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Neutralize browser :visited purple - we want anchors to keep
   the colour we assign on each surface (var(--c-fg-soft), -muted,
   -dim, --c-gold for case-studies). Without this rule, an anchor
   the user has clicked before falls back to the purple default
   inside the same visited session, which contradicts the brand
   dark-on-black treatment. */
a:visited {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--c-fg);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   3. UTILITAIRES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: clamp(72px, 10vw, 128px);
}

.section--dark {
  background: var(--c-bg-elevated);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin-bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--c-fg-dim);
}

.section-header {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(64px, 8vw, 100px);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--c-fg);
}

.section-title em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--c-fg-muted);
  font-size: 0.75em;
  margin-top: var(--space-3);
}

.section-lead {
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--c-fg-soft);
  max-width: 60ch;
  margin-inline: auto;
}

/* Premium divider for section headers */
.section-header::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: var(--space-6) auto 0;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  border-radius: 2px;
  opacity: 0.6;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-slow) var(--ease-emphatic),
              transform var(--dur-slow) var(--ease-emphatic);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }
.reveal[data-delay="5"] { transition-delay: 500ms; }

/* Stagger children */
/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: var(--space-5);
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: var(--c-line);
  padding-block: var(--space-4);
}

.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.nav__logo {
  height: clamp(56px, 8vw, 100px);
  width: auto;
  background-color: transparent;
  transition: height var(--dur-base) var(--ease-out);
}

.nav.is-scrolled .nav__logo {
  height: 82px;
}

.footer__brand .nav__logo {
  height: 56px;
  margin-bottom: var(--space-4);
}

.nav__wordmark {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg);
  line-height: 1;
}

.nav__wordmark small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--c-fg-dim);
  margin-top: 4px;
}

.nav__links {
  display: flex;
  gap: var(--space-7);
  align-items: center;
  justify-content: center;
}

/* The in-drawer FR|EN pill never shows on desktop - the header
   .nav__lang--header is the canonical toggle there. Hidden by
   default; the @media (max-width: 960px) rule below reveals it
   ONLY when the drawer is .is-open on a small viewport. */
.nav__links-lang {
  display: none;
}

/* SEO Pages Dropdown */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__dropdown-btn::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--c-fg-soft);
  margin-left: 4px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__dropdown:hover .nav__dropdown-btn::after,
.nav__dropdown-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  z-index: 100;
  box-shadow: var(--shadow-lg);
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown-btn[aria-expanded="true"] + .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--c-fg-soft);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__dropdown-item:hover,
.nav__dropdown-item:focus-visible {
  color: var(--c-fg);
  background: var(--c-accent-soft);
}

.nav__link {
  position: relative;
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--c-fg-soft);
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-fg);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-emphatic);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] {
  color: var(--c-fg);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg-soft);
  /* WCAG 2.5.8 - touch target min 24x24 CSS px, bumped to >= 28 px height */
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.nav__lang:hover,
.nav__lang:focus-visible {
  border-color: var(--c-line-strong);
  color: var(--c-fg);
}

.nav__lang-sep {
  color: var(--c-fg-dim);
}

.nav__lang-mono {
  color: var(--c-fg-dim);
}

.nav__lang.is-fr .nav__lang-en,
.nav__lang:not(.is-fr) .nav__lang-fr {
  color: var(--c-fg-dim);
}

.nav__lang.is-fr .nav__lang-fr,
.nav__lang.is-en .nav__lang-en {
  color: var(--c-fg);
}

.nav__toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  color: var(--c-fg);
}

.nav__toggle-bar {
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__toggle-bar::before,
.nav__toggle-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              top var(--dur-base) var(--ease-out);
}

.nav__toggle-bar::before { top: -7px; }
.nav__toggle-bar::after  { top:  7px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bar { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after  { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-emphatic);
}

.btn:hover .arrow,
.btn:focus-visible .arrow {
  transform: translateX(5px);
}

.btn--primary {
  background: var(--c-fg);
  color: #0a0a0a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--c-fg);
  border: 1px solid var(--c-line-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--c-accent-soft);
  border-color: var(--c-fg);
}

/* Featured pricing card sits on white background.
   Override ghost CTA so its label + border remain legible
   instead of disappearing as white-on-white. */
.pricing-card--featured .btn--ghost {
  color: var(--c-bg);
  border-color: rgba(10, 10, 10, 0.28);
}

.pricing-card--featured .btn--ghost:hover,
.pricing-card--featured .btn--ghost:focus-visible {
  background: rgba(10, 10, 10, 0.06);
  border-color: var(--c-bg);
}

.btn--large {
  padding: 20px 40px;
  font-size: 0.9rem;
}

/* ==========================================================================
   6. HERO - Premium + Light Rays
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + 80px) var(--container-pad) 120px;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Soft glow additionnel pour amplifier l'effet Light Rays sur fond sombre.
   Le shader officiel produit des valeurs subtiles (idéal sur fond clair).
   Sur fond noir, cet overlay radial-gradient renforce la présence visuelle
   sans dénaturer le rendu officiel. */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 40%,
      transparent 70%),
    radial-gradient(circle at 50% 15%,
      rgba(180, 200, 230, 0.05) 0%,
      transparent 50%);
  pointer-events: none;
}

.hero__bg::after {
  /* Vignette douce pour garder le texte lisible */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at center,
      rgba(10, 10, 10, 0) 30%,
      rgba(10, 10, 10, 0.55) 80%,
      rgba(10, 10, 10, 0.9) 100%);
}

.hero__inner {
  width: 100%;
  max-width: 980px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-strong);
  background: rgba(10, 10, 10, 0.4);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-fg-soft);
  margin-bottom: var(--space-7);
  opacity: 0;
  will-change: opacity, transform;
  animation: heroFadeUp 1s var(--ease-emphatic) 0.2s forwards;
}

.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-fg);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
  animation: pulse 2.6s ease-in-out infinite;
  will-change: transform;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: heroFadeUp 1.1s var(--ease-emphatic) 0.4s forwards;
}

.hero__title-line {
  display: block;
}

.hero__title-rotator {
  display: inline-block;
  position: relative;
  font-style: italic;
  color: var(--c-fg);
  min-width: 10ch;
}

.hero__title-rotator::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: var(--c-fg-muted);
  margin-left: 4px;
  vertical-align: -0.05em;
}

.hero__rotator-word {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-emphatic),
              transform var(--dur-slow) var(--ease-emphatic);
}

.hero__rotator-word.is-active {
  opacity: 1;
  transform: translateY(0);
}

.hero__rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-20px);
}

.tldr {
  max-width: 680px;
  margin: 0 auto var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--c-accent);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-small);
  color: var(--c-fg-soft);
  line-height: var(--lh-body);
}

.hero__divider {
  width: 48px;
  height: 1px;
  background: var(--c-fg-muted);
  margin: var(--space-7) auto;
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-emphatic) 0.6s forwards;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--c-fg-soft);
  max-width: 56ch;
  margin: 0 auto var(--space-8);
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-emphatic) 0.7s forwards;
}

.hero__cta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-emphatic) 0.9s forwards;
}

.hero__meta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 56px);
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-emphatic) 1.1s forwards;
}

.hero__meta-item {
  font-size: var(--fs-small);
  color: var(--c-fg-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__meta-item strong {
  color: var(--c-fg);
  font-weight: 500;
}

.hero__scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-mini);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--c-fg-dim);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-emphatic) 1.4s forwards;
}

.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--c-fg-muted) 40%, var(--c-fg-muted) 60%, transparent);
  background-size: 100% 200%;
  animation: scrollLine 2.4s var(--ease-out) infinite;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 0.4; }
}

@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ==========================================================================
   7. TRUST BAR
   ========================================================================== */
.trust {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--space-7);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.trust__item--link {
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.trust__item--link:hover,
.trust__item--link:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.trust__arrow {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: 0.85rem;
  color: var(--c-fg-dim);
  opacity: 0;
  transform: translate(-4px, 0);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.trust__item--link:hover .trust__arrow,
.trust__item--link:focus-visible .trust__arrow {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--c-fg);
}

.trust__stars {
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--c-fg);
  margin-bottom: 4px;
}

.trust__number {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--c-fg);
}

.trust__label {
  font-size: var(--fs-mini);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}

/* Large format numbers */
.trust__number--large {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--c-fg);
  letter-spacing: -0.02em;
}

/* Certification badges */
.trust__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}
.badge-cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-fg);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.badge-cert:hover {
  border-color: var(--c-accent);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
.badge-cert svg {
  flex-shrink: 0;
  color: var(--c-accent);
}

/* Responsive trust grid */
@media (max-width: 980px) {
  .trust__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}
@media (max-width: 560px) {
  .trust__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .trust__number--large {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
  }
}

/* ==========================================================================
   8. SERVICES
   ========================================================================== */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.service-card {
  position: relative;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.service-card:hover,
.service-card:focus-within {
  border-color: var(--c-accent);
  transform: translateY(-6px);
  box-shadow: var(--c-card-hover);
}

.service-card__index {
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--c-fg-dim);
  margin-bottom: var(--space-7);
}

.service-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-5);
  color: var(--c-fg);
}

.service-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.service-card__desc {
  color: var(--c-fg-soft);
  line-height: var(--lh-normal);
  font-size: 0.95rem;
}

/* Spotlight overlay - basé sur Build UI Recipe Spotlight
   https://buildui.com/recipes/spotlight
   - radial-gradient 650px qui suit la souris en pixels absolus
   - opacité transition 300ms entre caché (0) et visible (1)
   - z-index 0 pour être au-dessus du fond, sous le contenu en z-index 1 */
.spotlight {
  --spot-x: 0px;
  --spot-y: 0px;
  --spot-opacity: 0;
  --spot-color: 255, 255, 255;
}

.spotlight::before {
  content: "";
  position: absolute;
  inset: -1px;                       /* -inset-px : couvre aussi la bordure */
  border-radius: inherit;             /* suit le border-radius du parent */
  background: radial-gradient(
    650px circle at var(--spot-x) var(--spot-y),
    rgba(var(--spot-color), 0.15),
    transparent 80%
  );
  opacity: var(--spot-opacity);
  transition: opacity 300ms ease-out;
  pointer-events: none;               /* laisse passer la souris pour tracker */
  z-index: 0;                         /* au-dessus du fond, sous le contenu */
}

.spotlight:hover::before,
.spotlight:focus-within::before {
  --spot-opacity: 1;
}

@media (hover: none) {
  .spotlight::before { display: none; }
}

/* ==========================================================================
   9. SECTEURS (Industries)
   ========================================================================== */
.sectors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .sectors {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .sectors {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sector {
  padding: var(--space-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg-elevated);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-emphatic),
              box-shadow var(--dur-base) var(--ease-out);
}
.sector__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sector:hover {
  border-color: var(--c-line-strong);
  transform: translateY(-4px);
  box-shadow: var(--c-card-hover);
}
.sector__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-dim);
  margin-bottom: var(--space-4);
}
.sector__icon {
  width: 32px;
  height: 32px;
  color: var(--c-fg-soft);
  margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
  .sector__icon {
    width: 28px;
    height: 28px;
  }
}
.sector__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin-bottom: var(--space-2);
  color: var(--c-fg);
}
.sector__pos {
  color: var(--c-fg-soft);
  font-size: 0.9rem;
  line-height: var(--lh-normal);
  margin-bottom: var(--space-3);
}
.sector__example {
  font-size: var(--fs-small);
  color: var(--c-fg-muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-2);
}
.sector__example span:first-child {
  font-weight: 500;
  color: var(--c-fg-dim);
}
.sector__stats {
  font-size: var(--fs-mini);
  color: var(--c-fg-dim);
  letter-spacing: 0.02em;
}
.sector__stats strong {
  color: var(--c-fg);
  font-weight: 600;
}

/* ==========================================================================
   10. PROCESS
   ========================================================================== */
.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  counter-reset: step;
}

.process-step {
  position: relative;
  padding: var(--space-7) var(--space-5) var(--space-6);
  border-top: 1px solid var(--c-line);
  counter-increment: step;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.process-step:hover {
  border-top-color: var(--c-line-strong);
  transform: translateY(-2px);
}

.process-step__index {
  position: relative;
  padding-bottom: var(--space-3);
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: 0.10em;
  color: var(--c-fg);
  margin-bottom: var(--space-4);
}

.process-step__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.18;
  margin-bottom: var(--space-3);
}

.process-step__desc {
  color: var(--c-fg-soft);
  font-size: 0.95rem;
  line-height: var(--lh-normal);
}

/* ==========================================================================
   11. PORTFOLIO
   ========================================================================== */
.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5);
}

.portfolio-card {
  position: relative;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-emphatic),
              box-shadow var(--dur-base) var(--ease-out);
}

.portfolio-card:hover,
.portfolio-card:focus-within {
  border-color: var(--c-accent);
  transform: translateY(-8px);
  box-shadow: var(--c-card-hover);
}

.portfolio-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-soft);
}

.portfolio-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-emphatic),
              filter var(--dur-slow) var(--ease-out);
}

.portfolio-card:hover .portfolio-card__thumb,
.portfolio-card:focus-within .portfolio-card__thumb {
  transform: scale(1.04);
}

.portfolio-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line-strong);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-soft);
}

.portfolio-card__badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-fg);
  animation: pulse 2s ease-in-out infinite;
  will-change: transform;
}

.portfolio-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}

.portfolio-card__cat {
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-dim);
}

.portfolio-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-fg);
}

.portfolio-card__desc {
  color: var(--c-fg-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 4px;
}

.portfolio-card__cta {
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fg);
  align-self: flex-start;
}

.portfolio-card__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-emphatic);
}

.portfolio-card:hover .portfolio-card__cta-arrow,
.portfolio-card:focus-within .portfolio-card__cta-arrow {
  transform: translate(4px, -4px);
}

.portfolio-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.portfolio-card__live-btn {
  position: relative;
  z-index: 3;
  margin-top: var(--space-3);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg);
  background: transparent;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-emphatic);
}

.portfolio-card:hover .portfolio-card__live-btn,
.portfolio-card:focus-within .portfolio-card__live-btn,
.portfolio-card__live-btn:hover,
.portfolio-card__live-btn:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  transform: translateY(-1px);
}

.portfolio-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

/* ==========================================================================
   12. PRICING
   ========================================================================== */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  max-width: 920px;
  margin-inline: auto;
}

.pricing-card {
  position: relative;
  padding: var(--space-7) var(--space-6);
  background: var(--c-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  isolation: isolate;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.pricing-card:hover,
.pricing-card:focus-within {
  border-color: var(--c-accent);
  transform: translateY(-6px);
  box-shadow: var(--c-card-hover);
}

.pricing-card--featured {
  background: var(--c-fg);
  color: var(--c-bg);
  border-color: var(--border-accent-color);
  box-shadow: var(--c-card-hover);
}

.pricing-card--featured .pricing-period,
.pricing-card--featured .pricing-desc,
.pricing-card--featured .pricing-features li {
  color: rgba(10, 10, 10, 0.7);
}

.pricing-card--featured .pricing-features li::before {
  background: var(--c-bg);
}

.pricing-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  background: var(--c-fg);
  color: var(--c-bg);
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pricing-card--featured .pricing-card__badge {
  background: var(--c-bg);
  color: var(--c-fg);
}

.pricing-amount {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-currency {
  font-size: 0.6em;
  opacity: 0.7;
}

.pricing-period {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-fg-muted);
}

.pricing-onetime {
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--c-fg-muted);
}

.pricing-onetime strong {
  color: var(--c-accent);
}

/* Total price highlight */
.pricing-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out);
}
.pricing-card:hover .pricing-total,
.pricing-card:focus-within .pricing-total {
  border-color: var(--c-accent);
}
.pricing-total__label {
  font-size: var(--fs-mini);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.pricing-total__value {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--c-fg);
  letter-spacing: -0.01em;
}
.pricing-total__detail {
  font-size: var(--fs-mini);
  color: var(--c-fg-muted);
}

.pricing-desc {
  margin-top: var(--space-4);
  color: var(--c-fg-soft);
  line-height: var(--lh-normal);
}

.pricing-features {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pricing-features li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--c-fg-soft);
  line-height: 1.45;
}

.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 1px;
  background: var(--c-fg-muted);
}

.pricing-cta {
  margin-top: var(--space-7);
}

.pricing-note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-mini);
  color: var(--c-fg-muted);
  max-width: 60ch;
  margin-inline: auto;
}

.pricing-soft-cta {
  text-align: center;
  margin-top: var(--space-4);
}

.pricing-soft-link {
  font-size: var(--fs-mini);
  color: var(--c-fg-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.pricing-soft-link:hover,
.pricing-soft-link:focus-visible {
  color: var(--c-fg);
  border-color: var(--c-fg);
}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (max-width: 960px) {
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .testimonials {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.testimonial {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-emphatic),
              box-shadow var(--dur-base) var(--ease-out);
}
.testimonial:hover {
  border-color: var(--c-line-strong);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.testimonial__stars {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  margin-bottom: var(--space-4);
}

.testimonial__quote {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color: var(--c-fg);
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  border: none;
}
@media (min-width: 1100px) {
  .testimonial__quote {
    font-size: 1.05rem;
  }
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
}

.testimonial__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  flex-shrink: 0;
}

.testimonial__name {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-fg);
  margin-bottom: 2px;
}

.testimonial__role {
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  color: var(--c-fg-muted);
  letter-spacing: 0.02em;
}

.testimonial__review-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.testimonial__review-link:hover,
.testimonial__review-link:focus-visible {
  color: var(--c-fg);
}

.testimonials-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.testimonials-google-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-fg-soft);
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.testimonials-google-link:hover,
.testimonials-google-link:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* ==========================================================================
   ========================================================================== */

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--c-line);
}

.faq-item {
  border-bottom: 1px solid var(--c-line);
}

.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-fg);
  text-align: left;
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq-item__btn:hover,
.faq-item__btn:focus-visible {
  color: var(--c-fg);
  outline: 2px solid var(--c-fg);
  outline-offset: 4px;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-emphatic);
}

.faq-item__icon::before {
  width: 10px;
  height: 1px;
}

.faq-item__icon::after {
  width: 1px;
  height: 10px;
}

.faq-item.is-open .faq-item__icon {
  background: var(--c-fg);
  color: var(--c-bg);
  border-color: var(--c-fg);
}

.faq-item.is-open .faq-item__icon::after {
  transform: rotate(90deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-emphatic);
}

.faq-item__answer-inner {
  padding: 0 0 var(--space-6);
  color: var(--c-fg-soft);
  line-height: var(--lh-loose);
  max-width: 65ch;
}

/* ==========================================================================
   15. CONSULTATION (Calendly)
   ========================================================================== */
.consult {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.consult__info h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: var(--space-5);
}

.consult__info p {
  color: var(--c-fg-soft);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-4);
}

.consult__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 20px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-fg);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  margin-top: var(--space-3);
}

.consult__wa:hover,
.consult__wa:focus-visible {
  background: var(--c-accent-soft);
  border-color: var(--c-fg);
}

.calendly-wrap {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-height: 700px;
  position: relative;
  overflow: hidden;
}

.calendly-inline-widget {
  min-width: 320px;
  height: 700px;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   16. CONTACT
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.contact__info h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: var(--space-5);
}

.contact__info > p {
  color: var(--c-fg-soft);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-6);
  max-width: 44ch;
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.contact__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: 0.95rem;
  color: var(--c-fg-soft);
  border-bottom: 1px solid var(--c-line);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.contact__link:hover,
.contact__link:focus-visible {
  color: var(--c-fg);
  border-color: var(--c-line-strong);
}

.contact__link-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.contact__socials {
  display: flex;
  gap: var(--space-3);
}

.contact__social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-fg-soft);
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.contact__social:hover,
.contact__social:focus-visible {
  border-color: var(--c-fg);
  color: var(--c-fg);
  background: var(--c-accent-soft);
}

.contact-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  align-content: start;
}

.contact-form__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}

.contact-form__desc {
  color: var(--c-fg-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-form__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.contact-form__alt {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
  font-size: 0.85rem;
  color: var(--c-fg-dim);
  line-height: 1.6;
}

.contact-form__alt-link {
  color: var(--c-fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.contact-form__alt-link:hover,
.contact-form__alt-link:focus-visible {
  color: var(--c-fg);
}

/* ==========================================================================
   CONTACT MODAL - Native form (replaces Google Forms iframe)
   ========================================================================== */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 32px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-out),
              visibility 0s linear 200ms;
}

.contact-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms var(--ease-out);
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.contact-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 64px);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(12px) scale(0.98);
  transition: transform 240ms var(--ease-out);
}

.contact-modal[aria-hidden="false"] .contact-modal__panel {
  transform: translateY(0) scale(1);
}

.contact-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.contact-modal__close:hover,
.contact-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--c-fg);
  transform: scale(1.05);
}

.contact-modal__form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  padding-top: var(--space-8);
  overflow-y: auto;
  max-height: calc(100vh - 64px);
}

.contact-modal__form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .contact-modal__form .form-row {
    grid-template-columns: 1fr;
  }
}

body.contact-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal,
  .contact-modal__panel,
  .contact-modal__close {
    transition: none;
  }
}

/* Form elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-fg);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--c-fg);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  font-family: inherit;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23666' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: var(--c-line-strong);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--c-fg);
  background: var(--c-bg-soft);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--c-fg-dim);
}

.form-submit {
  margin-top: var(--space-2);
}

.form-submit .btn {
  width: 100%;
  justify-content: center;
}

.form-submit .btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.form-submit .btn.is-loading .btn__label {
  visibility: hidden;
}

.form-submit .btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: form-spin 0.6s linear infinite;
}

@keyframes form-spin {
  to { transform: rotate(360deg); }
}

.form-success,
.form-error {
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.form-success--visible {
  display: block;
  background: var(--c-success-bg);
  color: var(--c-success-text);
  border: 1px solid var(--c-success-border);
}

.form-error--visible {
  display: block;
  background: var(--c-error-bg);
  color: var(--c-error-text);
  border: 1px solid var(--c-error-border);
}

/* Per-field a11y hint, shown next to inputs flagged aria-invalid="true" */
.form-error-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-mini);
  color: var(--c-error-text);
}
.form-error-hint[hidden] {
  display: none;
}
[aria-invalid="true"] {
  border-color: var(--c-error-border);
}

/* Inline style → CSS migration helpers */
.nav__wordmark--fallback {
  display: none;
}

/* Honeypot field (moved from inline style) */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Calendly widget container */
.calendly-widget {
  min-width: 320px;
  height: 700px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--c-fg);
  color: var(--c-bg);
  padding: 12px 20px;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.2s;
}

.skip-link:focus {
  transform: translateY(0);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-fg);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  transition: transform 100ms linear;
  /* Decorative only - don't intercept taps/hovers on header below */
  pointer-events: none;
}

.pricing-small {
  font-size: 0.45em;
  font-family: var(--font-sans);
  color: var(--c-fg-muted);
}

.pricing-small--dark {
  font-size: 0.45em;
  font-family: var(--font-sans);
  color: rgba(10, 10, 10, 0.5);
}

.pricing-cta--ghost {
  border-color: var(--c-bg);
}

.consult-muted {
  font-size: 0.9rem;
  color: var(--c-fg-muted);
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.footer {
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line-strong) 20%, var(--c-accent) 50%, var(--c-line-strong) 80%, transparent);
  opacity: 0.6;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

.footer__brand p {
  margin-top: var(--space-4);
  color: var(--c-fg-muted);
  max-width: 32ch;
  line-height: var(--lh-normal);
}

.footer__logo {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
}

.footer__address {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--c-fg-muted);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
}

.footer__col h4 {
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin-bottom: var(--space-4);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__col a {
  font-size: 0.92rem;
  color: var(--c-fg-soft);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--c-fg);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-mini);
  color: var(--c-fg-muted);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer__legal-links {
  display: flex;
  gap: var(--space-5);
}

.footer__legal-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--dur-fast) var(--ease-out);
  color: var(--c-fg-muted);
}

.footer__legal-links a svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.footer__legal-links a:hover,
.footer__legal-links a:focus-visible {
  color: var(--c-accent);
}

/* ==========================================================================
   18. SCROLL 3D - voir assets/js/scroll-3d.js pour la logique JS
   Le scroll 3D + tilt des cartes portfolio + parallax sont gérés en JS
   pour avoir un vrai suivi frame-by-frame. On garde ici uniquement les
   transitions de hover classiques (les transforms JS prennent le dessus).
   ========================================================================== */

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  :root {
    --nav-height: 72px;
  }

  .nav {
    padding-block: 12px;
  }
  .nav.is-scrolled {
    padding-block: 8px;
  }
  .nav__logo {
    height: 48px;
    width: auto;
  }
  .nav.is-scrolled .nav__logo {
    height: 40px;
  }

  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--c-bg);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-7);
    padding: var(--space-9) var(--container-pad);
    /* clip-path slide-in instead of transform translateX: it avoids
       a stale link-list cached locally when only the parent clip-path
       animation changed. The real fix for the layout trap lives in
       the .menu-open override below (lifts the .nav backdrop-filter
       so the fixed-drawer can extend to the viewport). */
    clip-path: inset(0 0 0 100%);
    -webkit-clip-path: inset(0 0 0 100%);
    transition: clip-path var(--dur-slow) var(--ease-emphatic);
    pointer-events: none;
    z-index: 99;
  }

  .nav__links.is-open {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }

  /* While the mobile drawer is open on a scrolled page, drop the
     .nav backdrop-filter. Otherwise that filter establishes the
     .nav element as the containing block for any fixed descendant
     and re-anchors the drawer to the 72px-tall bar instead of the
      full viewport. */
  body.menu-open .nav.is-scrolled {
    /* Same backdrop-filter quirk as before */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--c-bg);
  }

  .nav__link {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
  }

  .nav__links .nav__link:focus-visible {
    outline: 2px solid var(--c-accent, #0057ff);
    outline-offset: -2px;
  }

  .nav__toggle {
    display: inline-flex;
    z-index: 101;
  }

  .nav__inner {
    /* Mobile layout: brand (1fr) | lang-toggle (auto) | hamburger (auto) -
       the ul.nav__links is position:fixed so it doesn't consume a grid cell */
    grid-template-columns: 1fr auto auto;
  }

  .nav__lang--header {
    /* on mobile, show the header FR|EN pill to the right of the brand,
       before the hamburger button */
    display: inline-flex;
    /* don't push extra margin, the grid gap already spaces elements */
    margin-right: 0;
  }

  /* Reveal the in-drawer FR|EN pill only while the drawer is open */
  .nav__links.is-open .nav__links-lang {
    display: flex;
    justify-content: center;
    margin-top: var(--space-7);
  }

  .trust__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .consult,
  .contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4, 16px);
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .portfolio {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .consult,
  .contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4, 16px);
  }
}

@media (max-width: 540px) {
  .trust__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .trust__item {
    padding: var(--space-3) 0;
  }

  .hero {
    min-height: 88vh;
    padding-top: calc(var(--nav-height) + 48px);
  }

  .hero__cta {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }

  .nav__wordmark small {
    display: none;
  }

  .portfolio-card__media {
    aspect-ratio: 16 / 11;
  }

  /* A11y / iOS: form inputs must be >= 16px to prevent iOS Safari
     auto-zoom on focus (WCAG 2.5.8 + iOS WebKit policy) */
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 1rem; /* 16px */
  }

  /* Increase small link horizontal padding for WCAG 2.5.8 (>= 24x24)
     on small viewports where targets tend to shrink */
  .footer__col a,
  .footer__legal-links a {
    padding-block: 6px;
  }

  /* Touch-friendly minimum tap targets (WCAG 2.5.8) */
  .btn,
  .portfolio-filter,
  .nav__link,

  .pricing-card {
    padding: 20px;
  }

  /* Tighter hero title on very small screens */
  .hero--split .hero__title {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }

  /* Smaller section gaps on mobile */
  .case-card {
    margin-bottom: 32px;
    padding: 16px;
  }
}

/* ==========================================================================
   19b. VILLES DESSERVIES - ZONES GRID (SEO Local)
   ========================================================================== */
#zones { padding: clamp(56px, 8vw, 96px) 0; background: var(--c-bg); }
.zones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.zone-card { background: var(--c-bg-elevated); border: 1px solid var(--c-line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.zone-card:hover { border-color: var(--c-line-strong); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.zone-card__index { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-fg-dim); margin-bottom: 12px; }
.zone-card__title { margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; }
.zone-card__title a { color: var(--c-fg); text-decoration: none; transition: color var(--t-fast); }
.zone-card__title a:hover { color: var(--c-accent); }
.zone-card__desc { font-size: .9rem; line-height: 1.55; color: var(--c-fg-soft); margin: 0 0 16px; flex: 1; }
.zone-card__list { list-style: none; padding: 0; margin: 0 0 20px; font-size: .85rem; color: var(--c-fg-dim); }
.zone-card__list li { position: relative; padding-left: 16px; margin: 8px 0; }
.zone-card__list li::before { content: "\2022"; position: absolute; left: 0; color: var(--c-accent); }
.zone-card__link { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--c-fg-soft); text-decoration: none; transition: color var(--t-fast), gap var(--t-fast); }
.zone-card__link:hover { color: var(--c-accent); gap: 12px; }
.zone-card__link svg { flex-shrink: 0; transition: transform var(--t-fast); }
.zone-card__link:hover svg { transform: translateX(4px); }

@media (max-width: 960px) { .zones-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .zones-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 480px) { .zone-card { padding: 20px; } }

/* ==========================================================================
   FOUNDATION 00 - Composants réutilisables
   --------------------------------------------------------------------------
   ========================================================================== */

/* ----- Badge de confiance (pastille + texte) ----- */
.badge-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  font: 600 0.875rem/1 var(--font-sans);
  color: var(--c-fg);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.badge-trust:hover {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent), 0 8px 24px rgba(255,255,255,0.04);
}
.badge-trust__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-success-text);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

/* ==========================================================================
   --------------------------------------------------------------------------
   Layout deux colonnes sur desktop, pile unique sur mobile.
   ========================================================================== */
.hero--split {
  min-height: auto;
  padding-top: calc(var(--nav-height) + 56px);
  padding-bottom: 64px;
}
.hero--split .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
}
.hero--split .hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.hero--split .hero__title {
  font: 700 clamp(2.4rem, 5vw, 4rem)/1.05 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--c-fg);
  margin-top: 4px;
}
.hero--split .hero__title-line { display: block; }
.hero--split .hero__lead {
  font: 400 clamp(1rem, 1.25vw, 1.15rem)/1.55 var(--font-sans);
  color: var(--c-fg-soft);
  max-width: 560px;
}
.hero--split .benefits {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 420px;
}
.hero--split .benefit {
  padding: 14px 16px;
}
.hero--split .hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  justify-content: center;
}
.hero--split .hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}
.hero--split .hero__meta-item {
  font: 500 0.875rem/1.4 var(--font-sans);
  color: var(--c-fg-muted);
}
.hero--split .hero__meta-item strong {
  color: var(--c-fg);
  font-weight: 600;
}
.hero--split .hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
}
.hero--split .hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  justify-content: center;
}

/* Responsive : stack sur tablette et mobile */
@media (max-width: 980px) {
  .hero--split .hero__inner {
    gap: 32px;
  }
}
@media (max-width: 560px) {
  .hero--split { padding-bottom: 48px; }
  .hero--split .hero__chips { gap: 8px; }
}

/* ==========================================================================
   BRANCHE 02 - Portfolio "Études de cas"
   --------------------------------------------------------------------------
   (problème / solution / résultat). Filter bar CSS-only au-dessus de la
   grille classique pour ne pas casser les 12 cards existantes.
   ========================================================================== */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 32px 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.02);
}
.portfolio-filter__label {
  font: 500 0.75rem/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin-right: 4px;
}
.portfolio-filter {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: 500 0.85rem/1 var(--font-sans);
  color: var(--c-fg-soft);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.portfolio-filter:hover { color: var(--c-fg); border-color: var(--c-line-medium); }
.portfolio-filter.is-active {
  background: var(--c-fg);
  color: var(--c-bg);
  border-color: var(--c-fg);
}

/* Case card premium : "phare" du portfolio, mis en avant */
.case-card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: 64px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.case-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-6px);
  box-shadow: var(--c-card-hover);
}
.case-card__media {
  position: relative;
  display: flex;
  align-items: stretch;
}
.case-card__screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-card__ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.case-card__ba img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid var(--c-line-medium);
  border-radius: var(--radius-pill);
  font: 600 0.7rem/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-fg);
  backdrop-filter: blur(8px);
}
.case-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-success-text);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Body (story + CTA) */
.case-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.case-card__cat {
  font: 500 0.75rem/1.4 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.case-card__title {
  font: 700 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--c-fg);
  margin: -4px 0 4px;
}

/* Metric - gros chiffre + label */
.case-card__metric {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--c-line-medium);
  border-radius: var(--radius-md);
  margin: 4px 0 8px;
  align-self: flex-start;
}
.case-card__metric-value {
  font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--c-fg);
}
.case-card__metric-label {
  font: 500 0.8rem/1.4 var(--font-sans);
  color: var(--c-fg-muted);
}

/* Story : 3 blocs problème/solution/résultat */
.case-card__story {
  display: grid;
  gap: 12px;
}
.case-card__story-item {
  padding: 12px 16px;
  border-left: 2px solid var(--c-line-medium);
  background: rgba(255, 255, 255, 0.015);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.case-card__story-label {
  display: block;
  font: 600 0.7rem/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fg);
  margin-bottom: 6px;
}
.case-card__story-item p {
  font: 400 0.875rem/1.55 var(--font-sans);
  color: var(--c-fg-soft);
  margin: 0;
}

.case-card__cta {
  align-self: flex-start;
  margin-top: 8px;
}

/* Responsive case-card */
@media (max-width: 880px) {
  .case-card { grid-template-columns: 1fr; }
  .case-card__media { order: -1; }
  .case-card__body { gap: 12px; }
}
@media (max-width: 560px) {
  .case-card { padding: 20px; }
  .case-card__metric { padding: 12px 16px; }
  .case-card__cta { width: 100%; justify-content: center; }
}

/* Responsive filterbar */
@media (max-width: 680px) {
  .portfolio-filters { border-radius: var(--radius-md); }
  .portfolio-filter { padding: 6px 12px; font-size: 0.8rem; }
}

/* ==========================================================================
   20. UTILITY CLASSES
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Noscript fallback - if JS never runs, .reveal content stays visible */
@media (scripting: none) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   22. REFACTOR/03 - SERVICES / PROCESS / AUDIENCE / PRICING / MOBILE CTA
   ========================================================================== */

/* Services - outcome list */
.service-card__outcomes {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-card__outcomes li {
  font-size: 0.85rem;
  color: var(--c-fg-muted);
  padding-left: 20px;
  position: relative;
}
.service-card__outcomes li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 600;
  font-size: 0.8rem;
}
.services-cta {
  text-align: center;
  margin-top: 32px;
}

/* Pricing - urgency bar removed 2026-07-25: dead code.
   .pricing-urgency and .pricing-urgency__icon are not referenced
   in any audited live page, but the @keyframes pulse-urgency was
   active and would have applied gratuitous animation on spaces
   never rendered. Removed. */

/* Pricing - value highlight box */
.pricing-value {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.pricing-value__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--c-fg);
}
.pricing-value__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.pricing-value__list li {
  font-size: 0.9rem;
  color: var(--c-fg-muted);
  padding-left: 24px;
  position: relative;
}
.pricing-value__list li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 600;
}

/* Pricing card adjustments */



/* Second Footer CTA Block (white-on-white variant) removed
   2026-07-25: dead code. Same reasoning as the previous block. */

/* .footer-cta block removed 2026-07-25: dead code. No live page
   uses these classes (verified: index, services, tarifs, privacy,
   terms, 404, montreal, laval, chateauguay, all 12 case-studies),
   but the white-on-white override would have been a deployment
   accident waiting to happen. Removed. */

/* Section header responsive */
@media (max-width: 720px) {
  .hero__title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    line-height: 1.15;
  }
  .hero__lead {
    font-size: 1rem;
  }
}

/* ==========================================================================
   23. LEAD MAGNET PAGE (Branche 06)
   ========================================================================== */

/* Guide Chapters */

/* Guide Checklist */

/* Thank You Page */

/* Next Steps (on lead magnet page) */

/* ==========================================================================
   BOOKING FIXES - Urgency banner + CTA group
   ========================================================================== */
.urgency-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  margin: 24px auto;
  max-width: 720px;
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.15), rgba(255, 200, 0, 0.05));
  border: 1px solid rgba(255, 200, 0, 0.4);
  border-radius: 100px;
  color: var(--c-fg, #ffffff);
}

.urgency-banner__icon { animation: pulse 2s ease-in-out infinite; font-size: 1.2rem; }

.urgency-banner__text strong { color: var(--c-gold); }

.cta-group { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; margin-top: 24px; }

@media (max-width: 720px) {
  html, body { max-width: 100vw; }

  h1, .h1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; }
  h2, .h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }

  .btn { min-height: 44px !important; padding: 14px 24px !important; width: 100%; max-width: 320px; }

  input, textarea, select { font-size: 16px !important; }

  .cta-group { flex-direction: column !important; }
}

/* ==========================================================================
   BZ- alias classes - mirror primary class names to provide a stable
   brand-prefixed API. Inherits from the underlying classes, so updating
   one updates both. Used by HTML for cross-page consistency.
   ========================================================================== */
.bz-logo {
  /* inherits from .nav__logo / .footer__logo defined above */
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.bz-h1 {
  /* inherits from .hero__title styling */
  letter-spacing: -0.02em;
}
.bz-h2 {
  /* inherits from .section-title styling */
  letter-spacing: -0.015em;
}
.bz-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.bz-btn--primary {
  background: var(--c-fg);
  color: var(--c-bg);
}
.bz-btn--primary:hover,
.bz-btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 255, 255, 0.18);
  outline: none;
}
.bz-text-muted {
  color: rgba(255, 255, 255, 0.6);
}
.bz-overline {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-fg-muted);
}

/* ==========================================================================
   WHATSAPP / CONTACT LINKS
   Reusable CTA styling for .wa-link anchors (renders the WA SVG label).
   ========================================================================== */
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-fg);
  text-decoration: none;
  transition: color 180ms ease;
}
.wa-link:hover,
.wa-link:focus-visible {
  color: #25d366;
  outline: none;
}
.wa-link svg {
  flex-shrink: 0;
}
/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   Injected by main.js, styled here so we don't ship inline <style>.
   ========================================================================== */
.bz-wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 24px);
  bottom: clamp(16px, 3vw, 24px);
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.45),
              0 2px 4px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
  animation: bz-wa-pulse 2.4s ease-out infinite;
}
.bz-wa-float:hover,
.bz-wa-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.6),
              0 4px 8px rgba(0, 0, 0, 0.22);
  outline: none;
}
.bz-wa-float svg { width: 28px; height: 28px; }
.bz-wa-float[aria-hidden="true"] { display: none; }
@media print { .bz-wa-float { display: none !important; } }
@keyframes bz-wa-pulse {
  0%   { box-shadow: 0 6px 16px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 6px 16px rgba(37, 211, 102, 0.45), 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 6px 16px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ==========================================================================
   COOKIE CONSENT BANNER (Loi 25)
   Injected by cookie-consent.js. Hidden by default until JS appends.
   ========================================================================== */
.bz-cookie-banner {
  position: fixed;
  left: clamp(12px, 3vw, 24px);
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 950;
  max-width: 560px;
  margin-inline: auto;
  padding: 18px 20px;
  background: var(--c-bg-elevated, #141414);
  border: 1px solid var(--c-line-strong, #2a2a2a);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-fg-soft, #cccccc);
}
.bz-cookie-banner[hidden] { display: none; }
.bz-cookie-banner__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-fg, #ffffff);
}
.bz-cookie-banner__desc {
  margin: 0 0 12px;
}
.bz-cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bz-cookie-banner__btn {
  flex: 1 1 auto;
  min-width: 100px;
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .bz-cookie-banner {
    animation: bz-cookie-slide-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}
@keyframes bz-cookie-slide-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}