/*
Theme Name: CP PROJET.CH
Theme URI: https://__DOMAIN__
Author: CP PROJET.CH — Cédric Ponti
Description: Premium custom theme for CP PROJET.CH — Swiss precision metalwork & structural-steel engineering studio (Genève / Romandie). Dark luxury-industrial design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: cp-projet
*/
/* ============================================================
   CP PROJET.CH — Design System / base_css
   Construction métallique de précision — Genève / Romandie
   Luxury-industrial: graphite base, brushed-steel neutrals,
   molten copper/amber accent, blueprint steel-blue secondary.
   ============================================================ */

/* ---- Fonts: loaded via <link> in header.php (no render-blocking @import) ---- */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Palette — SERVETTE FC light mode (2026-06-10, user directive: end client
     loves the club colours). White like the home kit, deep club grenat for
     actions, steel-blue for the technical/blueprint layer. Crisp white +
     strong grenat — NOT the washed-out cream version rejected earlier. */
  --bg:          #FAFBFC;
  --bg-alt:      #EFF2F5;
  --surface:     #FFFFFF;
  --surface-2:   #F5F7F9;
  --text:        #1A1F26;
  --text-muted:  #525C68;
  --accent:      #93203A;   /* grenat Servette — actions */
  --accent-2:    #46708F;   /* blueprint steel-blue — technical + numerals */
  --border:      #DEE3E9;
  --border-soft: rgba(26, 31, 38, 0.09);

  /* Derived accent tints */
  --accent-rgb:   147, 32, 58;
  --accent-2-rgb: 70, 112, 143;
  --accent-strong: #7C1B31;  /* hover darkens on light bg */
  --accent-glow:  rgba(147, 32, 58, 0.22);
  /* Gold RETIRED 2026-06-10 (user dislikes the yellow). Tokens kept as
     aliases of steel-blue so any leftover var(--gold) degrades gracefully. */
  --gold:         #46708F;
  --gold-rgb:     70, 112, 143;

  /* Typography */
  --font-display: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --fs-h6:      clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --fs-h5:      clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h4:      clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  --fs-h3:      clamp(1.75rem, 1.4rem + 1.7vw, 2.6rem);
  --fs-h2:      clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);
  --fs-h1:      clamp(2.75rem, 1.9rem + 4.4vw, 5.5rem);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.65;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.22em;

  /* Spacing & layout */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 0.5rem + 3.2vw, 3rem);
  --section-y:     clamp(4.5rem, 2.5rem + 7vw, 9rem);

  /* Radii */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Borders & shadows */
  --hairline: 1px solid var(--border);
  --shadow-soft:  0 18px 50px -24px rgba(15, 23, 42, 0.16);
  --shadow-card:  0 1px 0 0 var(--border-soft), 0 30px 60px -40px rgba(15, 23, 42, 0.22);
  --shadow-glow:  0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 20px 60px -20px var(--accent-glow);

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.5s;
  --dur-fast:  0.28s;

  /* Header */
  --header-h: 84px;

  color-scheme: light;
}

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

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

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

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

::selection {
  background: rgba(var(--accent-rgb), 0.85);
  color: #FFFFFF;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p  { max-width: 68ch; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 60ch;
}

.text-muted  { color: var(--text-muted); }
.text-accent { color: var(--accent); }

strong { font-weight: 600; color: var(--text); }

a:not([class]) {
  color: var(--accent);
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease);
}
a:not([class]):hover { color: var(--accent-strong); }

/* Eyebrow / kicker */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: clamp(24px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb), 0));
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: clamp(24px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(270deg, var(--gold), rgba(var(--gold-rgb), 0));
}

/* ============================================================
   4. LAYOUT — container & section
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--alt {
  background: var(--bg-alt);
  border-block: var(--hairline);
}

/* Optional blueprint grid backdrop for hero / feature bands.
   PERF: no mask-image here. A full-section radial mask over a repeating
   gradient froze rasterization for 30s+ on this guest (confirmed by CDP
   capture bisection). The edge fade is faked instead with two cheap opaque
   gradient layers painted ON TOP of the grid, blending to the section's own
   background color (--grid-fade). */
.section--grid {
  --grid-fade: var(--bg);
}
.section--alt.section--grid {
  --grid-fade: var(--bg-alt);
}
.section--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--grid-fade) 0%, transparent 22%, transparent 78%, var(--grid-fade) 100%),
    linear-gradient(to right, var(--grid-fade) 0%, transparent 14%, transparent 86%, var(--grid-fade) 100%),
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
  opacity: 0.8;
}
.section--grid > .container { position: relative; z-index: 1; }

.section-head {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1rem 1.6rem;
  border-radius: var(--radius-pill);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-fg: #FFFFFF;
  --btn-bd: transparent;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  box-shadow: 0 12px 32px -14px var(--accent-glow);
}
.btn--primary:hover {
  box-shadow: 0 18px 44px -14px var(--accent-glow), 0 0 0 1px rgba(var(--accent-rgb), 0.4);
}

.btn--ghost {
  --btn-fg: var(--text);
  background: transparent;
  border-color: var(--border);
}
.btn--ghost:hover {
  --btn-fg: var(--text);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.06);
}

.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* Inline text link with arrow affordance */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link-arrow:hover { gap: 0.85em; color: var(--accent-strong); }

/* ============================================================
   6. CARDS
   ============================================================ */
.card {
  position: relative;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: var(--shadow-soft), 0 30px 70px -40px var(--accent-glow);
}
.card:hover::before { opacity: 1; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.card__title { font-size: var(--fs-h5); margin-bottom: 0.6rem; }
.card__text  { color: var(--text-muted); font-size: 1rem; }

/* Index/number badge for process or stats */
.badge-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent-2);
}

/* ============================================================
   7. SCROLL REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger helper (apply data-reveal-delay via inline style or these classes) */
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .site-nav { gap: 1.75rem; }
}

@media (max-width: 560px) {
  :root { --header-h: 68px; }
  .btn { width: 100%; }
  .btn--auto { width: auto; }
  .section-head { margin-bottom: 2.5rem; }
}

/* ============ section: header ============ */
/* ===== Header / Sticky site header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h, 76px);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease,
    height 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Glassy condensed state on scroll */
.site-header.is-scrolled {
  height: 64px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.02),
    0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
}

/* ---- Brand wordmark ---- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display, 'Sora', sans-serif);
  letter-spacing: -0.02em;
  line-height: 1;
  z-index: 2;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--accent);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    var(--surface);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.brand:hover .brand__mark {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18),
    0 8px 22px -10px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}

.brand__mark svg {
  display: block;
}

.brand__text {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  font-weight: 700;
  white-space: nowrap;
}

.brand__accent {
  color: var(--accent);
}

/* ---- Navigation ---- */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  white-space: nowrap;
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  text-decoration: none;
  color: var(--text-muted);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.25s ease;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--text);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  transform: scaleX(1);
}

/* ---- Phone CTA ---- */
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.site-nav__cta-icon {
  display: inline-flex;
  align-items: center;
}

/* ---- Hamburger toggle ---- */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.nav-toggle:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* hamburger built from one span + its pseudo elements */
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.nav-toggle span {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle span::before {
  top: -6px;
  transform: translateX(-50%);
}

.nav-toggle span::after {
  top: 6px;
  transform: translateX(-50%);
}

/* hamburger -> X (driven by aria-expanded) */
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* ===== Mobile / drawer ===== */
@media (max-width: 920px) {
  .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(86vw, 360px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h, 76px) + 1.5rem) 1.75rem 2rem;
    background: var(--bg-alt);
    border-left: 1px solid var(--border);
    box-shadow: -32px 0 60px -30px rgba(0, 0, 0, 0.85);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-nav__item {
    border-bottom: 1px solid var(--border);
  }

  .site-nav__link {
  white-space: nowrap;
    display: block;
    padding: 1.05rem 0;
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__cta {
    justify-content: center;
    width: 100%;
    margin-top: 1.75rem;
  }

  /* Drawer backdrop (ported from the removed legacy 768px block) */
  .site-nav.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100vw;
    height: 100dvh;
    margin-left: calc(min(86vw, 360px) - 100vw);
    background: rgba(8, 9, 11, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* body scroll lock while drawer is open (CSS :has + JS fallback class) */
body:has(.site-nav.is-open),
body.nav-open {
  overflow: hidden;
}

/* Reveal animation entry */
.site-header[data-reveal] {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.site-header[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav,
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after,
  .site-nav__link::after,
  .site-header[data-reveal] {
    transition: none;
  }
  .site-header[data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ============ section: hero ============ */
/* ============================================================
   HERO SECTION — scoped to .hero__*
   Tokens only; no :root, no resets, no @import.
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  /* Hero owns its own vertical breathing; header overlaps transparently */
  padding-top: clamp(7rem, 14vh, 11rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg);
}

/* ---- Decorative background layers ---- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Animated metallic / mesh gradient */
.hero__mesh {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(42% 55% at 18% 22%, rgba(var(--accent-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(38% 50% at 82% 30%, rgba(70, 112, 143, 0.14) 0%, transparent 62%),
    radial-gradient(60% 60% at 60% 88%, rgba(var(--accent-rgb), 0.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 55%, #E6EAEF 100%);
  background-size: 160% 160%, 150% 150%, 170% 170%, 100% 100%;
  filter: saturate(1.05);
  animation: hero-mesh-drift 26s ease-in-out infinite alternate;
}

@keyframes hero-mesh-drift {
  0%   { background-position: 0% 30%, 100% 0%, 50% 100%, 0 0; }
  50%  { background-position: 30% 60%, 70% 40%, 60% 70%, 0 0; }
  100% { background-position: 60% 20%, 40% 80%, 40% 100%, 0 0; }
}

/* Soft copper / steel glows (interactive/hero accents only) */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.hero__glow--a {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  top: -10%;
  left: -8%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.55) 0%, transparent 68%);
  animation: hero-glow-a 18s ease-in-out infinite alternate;
}
.hero__glow--b {
  width: 38vw;
  height: 38vw;
  max-width: 520px;
  max-height: 520px;
  bottom: -14%;
  right: -6%;
  background: radial-gradient(circle, rgba(70, 112, 143, 0.40) 0%, transparent 70%);
  animation: hero-glow-b 22s ease-in-out infinite alternate;
}
@keyframes hero-glow-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.12); }
}
@keyframes hero-glow-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-5%, -4%, 0) scale(0.95); }
}

/* Blueprint / steel inline-SVG motif, masked to fade at edges */
.hero__blueprint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 35%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 70% 35%, #000 30%, transparent 78%);
}
.hero__bp-draw { stroke-linecap: round; }
.hero__bp-draw path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: hero-draw 4.5s ease forwards 0.4s;
}
.hero__bp-draw circle {
  fill: var(--accent);
  opacity: 0;
  animation: hero-node-in 0.6s ease forwards 3s;
}
@keyframes hero-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes hero-node-in {
  to { opacity: 0.8; }
}

/* Faint grain overlay (no external image — SVG noise data URI) */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Hairline at the very bottom to seam into next section */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--border) 25%, var(--border) 75%, transparent);
  pointer-events: none;
}

/* ---- Foreground content ---- */
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 56rem; /* editorial left-aligned measure */
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.4rem;
}

.hero__title {
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
  background: linear-gradient(180deg, var(--text) 0%, #3E4754 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__subtitle {
  margin: 0 0 2.4rem;
  max-width: 46rem;
  color: var(--text-muted);
}

/* ---- CTAs ---- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
  align-items: center;
}
.hero__cta { white-space: nowrap; }

/* ---- Badge ---- */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2.6rem 0 0;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(22, 24, 29, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-display, 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  width: fit-content;
}
.hero__badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  animation: hero-pulse 2.6s ease-out infinite;
}
@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* ---- Scroll-down cue ---- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.hero__scroll:hover,
.hero__scroll:focus-visible { color: var(--accent); }
.hero__scroll-label {
  font-family: var(--font-display, 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll-track {
  position: relative;
  display: block;
  width: 22px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.hero__scroll-thumb {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
  animation: hero-scroll-thumb 1.9s ease-in-out infinite;
}
@keyframes hero-scroll-thumb {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ============================================================
   Responsive — mobile-first refinements
   ============================================================ */
@media (max-width: 600px) {
  .hero__actions { gap: 0.75rem; }
  .hero__cta { width: 100%; text-align: center; }
  .hero__scroll-label { display: none; }
}

@media (min-width: 900px) {
  .hero__inner { max-width: 60rem; }
  .hero__subtitle { font-size: 1.15rem; }
}

/* ============================================================
   Reduced motion — kill all decorative animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__mesh,
  .hero__glow--a,
  .hero__glow--b,
  .hero__badge-dot,
  .hero__scroll-thumb { animation: none; }
  .hero__bp-draw path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .hero__bp-draw circle {
    opacity: 0.8;
    animation: none;
  }
}

/* ============ section: expertises ============ */
/* ===== Expertises section — scoped to .expertises__* ===== */

.expertises__head {
  max-width: 46rem;
}

.expertises__intro {
  margin-top: 0.85rem;
}

/* Grid: mobile-first single column → 3 across */
.expertises__grid {
  list-style: none;
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.5rem);
}

@media (min-width: 640px) {
  .expertises__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .expertises__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.expertises__item {
  display: flex;
}

/* Card — relies on shared .card hover (lift + copper hairline);
   we add a softer accent glow + the technical index treatment. */
.expertises__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
  transition: box-shadow 0.45s ease, transform 0.45s ease, border-color 0.45s ease;
}

/* Accent glow on hover/focus-within (soft copper, never broad) */
.expertises__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    120% 80% at 50% -10%,
    rgba(var(--accent-rgb), 0.12),
    transparent 60%
  );
}

.expertises__card:hover,
.expertises__card:focus-within {
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.expertises__card:hover::after,
.expertises__card:focus-within::after {
  opacity: 1;
}

/* Icon chip — inherits .card__icon (52px tinted chip), we tune the SVG */
.expertises__icon {
  position: relative;
  z-index: 1;
  color: var(--accent);
  transition: transform 0.45s ease, color 0.45s ease;
}

.expertises__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.expertises__card:hover .expertises__icon {
  transform: translateY(-2px);
}

.expertises__title {
  position: relative;
  z-index: 1;
  margin: clamp(1.1rem, 2.4vw, 1.4rem) 0 0;
  letter-spacing: -0.01em;
}

.expertises__text {
  position: relative;
  z-index: 1;
  margin: 0.7rem 0 0;
  color: var(--text-muted);
}

/* Steel-blue technical index — blueprint annotation, top-right */
.expertises__index {
  position: absolute;
  top: clamp(1.2rem, 2.6vw, 1.6rem);
  right: clamp(1.3rem, 2.8vw, 1.8rem);
  z-index: 1;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-2);
  opacity: 0.55;
  transition: opacity 0.45s ease;
}

.expertises__card:hover .expertises__index {
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .expertises__card,
  .expertises__icon,
  .expertises__card::after,
  .expertises__index {
    transition: none;
  }
}

/* ============ section: about ============ */
/* =========================================================
   ABOUT SECTION — "À propos" (#apropos)
   Scoped to .about__* ; references shared tokens only.
   ========================================================= */

.about__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

@media (min-width: 880px) {
	.about__layout {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: clamp(3rem, 5vw, 5.5rem);
	}
}

/* ---- Left rail : editorial copy ------------------------- */

.about__head {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 38ch;
}

.about__body {
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2.2vw, 1.6rem);
	max-width: 56ch;
}

.about__lead {
	color: var(--text);
}

.about__paragraph {
	line-height: 1.75;
}

/* off-center editorial feel: subtle left rail on wide screens */
@media (min-width: 880px) {
	.about__col--text {
		position: relative;
		padding-left: clamp(1rem, 2.5vw, 2rem);
	}
	.about__col--text::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.35rem;
		bottom: 0.5rem;
		width: 1px;
		background: linear-gradient(
			to bottom,
			rgba(var(--accent-rgb), 0.55),
			var(--border) 28%,
			var(--border) 80%,
			transparent
		);
	}
}

/* ---- Right rail : stats + blueprint panel --------------- */

.about__panel {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
}

/* faint copper hairline glow along the top edge */
.about__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(var(--accent-rgb), 0.7) 40%,
		rgba(var(--accent-rgb), 0.7) 60%,
		transparent
	);
	opacity: 0.7;
}

.about__panel-head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.about__index {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--accent-2);
}

.about__panel-label {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--text-muted);
}

/* ---- Stats grid : big accent numbers -------------------- */

.about__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}

.about__stat {
	margin: 0;
	padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(0.9rem, 2vw, 1.25rem);
	background: var(--bg-alt);
	transition: background 0.35s ease;
}

.about__stat:hover {
	background: var(--surface);
}

.about__stat-value {
	margin: 0 0 0.35rem;
	font-family: var(--font-display, 'Sora', sans-serif);
	font-weight: 700;
	font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.about__stat-label {
	margin: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.82rem;
	line-height: 1.4;
	font-weight: 500;
	color: var(--text-muted);
}

/* ---- Blueprint SVG -------------------------------------- */

.about__blueprint {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	border-radius: 12px;
	overflow: hidden;
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(var(--accent-rgb), 0.05), transparent 70%),
		var(--bg-alt);
	border: 1px solid var(--border);
}

.about__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Panel footer signature ----------------------------- */

.about__panel-foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.about__signature {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent-2);
	white-space: nowrap;
}

.about__rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.4), transparent);
}

/* ---- Reveal baseline (JS adds .is-visible) -------------- */

.about [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.about [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

.about [data-reveal][data-delay="1"] { transition-delay: 0.08s; }
.about [data-reveal][data-delay="2"] { transition-delay: 0.16s; }
.about [data-reveal][data-delay="3"] { transition-delay: 0.24s; }
.about [data-reveal][data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	.about [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============ section: realisations ============ */
/* ============================================================
   SECTION · RÉALISATIONS — "L'étude → la réalisation"
   Each card shows its AutoCAD schematic (Étude, default face)
   and reveals the finished render (Réalisation) via an
   accessible, labelled segmented control + hover/focus preview.
   Scoped to .realisations* — references design tokens only.
   ============================================================ */

.realisations__head {
  max-width: 64ch;
}

.realisations__intro {
  margin-top: 0;
}

.realisations__intro strong {
  color: var(--text);
  font-weight: 600;
}

/* Legend — quick read of the two faces */
.realisations__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
}

.realisations__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.realisations__legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.realisations__legend-item--study {
  color: var(--accent-2);
}

.realisations__legend-item--result {
  color: var(--accent);
}

.realisations__legend-item--result .realisations__legend-dot {
  background: rgba(var(--accent-rgb), 0.28);
}

.realisations__legend-item--study .realisations__legend-dot {
  background: rgba(var(--accent-2-rgb), 0.28);
}

/* ---------- GALLERY GRID ---------- */
.realisations__grid {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 720px) {
  .realisations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.realisations__item {
  margin: 0;
  min-width: 0;
}

/* ---------- CARD ---------- */
.realisations__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.5s ease, box-shadow 0.5s ease;
}

.realisations__card::before {
  /* copper hairline that ignites on hover */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 4;
}

.realisations__card:hover,
.realisations__card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.realisations__card:hover::before,
.realisations__card:focus-within::before {
  opacity: 1;
  transform: scaleX(1);
}

/* ---------- DUAL-VIEW VIEWER ---------- */
.realisations__viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 440;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-2-rgb), 0.06), transparent 60%),
    var(--bg-alt);
  border-bottom: 1px solid var(--border);
  isolation: isolate;
  overflow: hidden;
}

.realisations__view {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.6s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    visibility 0.6s;
  backface-visibility: hidden;
}

/* Legibility scrim under the floating switch: the study SVGs draw title-block
   annotations at the card bottom, which collided with the pill. Static
   gradient, no blend mode (cheap). Sits above both views (z2), below the
   switch (z5). */
.realisations__viewer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.88) 88%);
}

.realisations__svg {
  width: 100%;
  height: 100%;
  padding: clamp(0.6rem, 1.6vw, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.realisations__svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Default face = ÉTUDE (the study). Result waits beneath. */
.realisations__view--study {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.realisations__view--result {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  z-index: 1;
}

/* State driven by the segmented control (source of truth) */
.realisations__card[data-state="result"] .realisations__view--study {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.99);
}

.realisations__card[data-state="result"] .realisations__view--result {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

/* ---------- VIEW BADGE ---------- */
.realisations__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  /* PERF: solid tint instead of backdrop-filter — live blur froze raster on
     this guest (same fix as the site header). */
  background: rgba(255, 255, 255, 0.92);
}

.realisations__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.realisations__badge--study {
  color: var(--accent-2);
  border-color: rgba(var(--accent-2-rgb), 0.4);
}

.realisations__badge--study::before {
  background: var(--accent-2);
}

.realisations__badge--result {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.realisations__badge--result::before {
  background: var(--accent);
}

/* ---------- SEGMENTED SWITCH (Étude / Réalisation) ---------- */
.realisations__switch {
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  /* PERF: solid tint instead of backdrop-filter (see header note). */
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.9);
}

.realisations__seg {
  position: relative;
  z-index: 2;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.3s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.realisations__seg:hover {
  color: var(--text);
}

.realisations__seg.is-active {
  color: var(--text);
}

/* Glider sits behind the active label */
.realisations__seg-glider {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--accent-2-rgb), 0.22), rgba(var(--accent-2-rgb), 0.12));
  border: 1px solid rgba(var(--accent-2-rgb), 0.45);
  transition: transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    background 0.4s ease, border-color 0.4s ease;
  pointer-events: none;
}

.realisations__card[data-state="result"] .realisations__seg-glider {
  transform: translateX(100%);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.14));
  border-color: rgba(var(--accent-rgb), 0.5);
}

.realisations__seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- BODY ---------- */
.realisations__body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
}

.realisations__tag {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-2);
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(var(--accent-2-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--accent-2-rgb), 0.08);
}

.realisations__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.realisations__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.62;
}

.realisations__cta {
  margin-top: 0.35rem;
}

.realisations__cta svg {
  transition: transform var(--dur-fast, 0.28s) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.realisations__cta:hover svg,
.realisations__cta:focus-visible svg {
  transform: translateX(3px);
}

.realisations__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   FALLBACK + ACCESSIBILITY
   ============================================================ */

/* Touch / no-hover devices: the segmented control (JS) drives state.
   With JS off the schematic remains the readable default face. */

/* Pointer-capable, hover-able devices get an instant preview of the
   finished render on hover/focus when the user has NOT pinned a state.
   The [data-state] selectors above always win, so an explicit choice
   via the control persists even while hovering. */
@media (hover: hover) and (pointer: fine) {
  .realisations__card[data-state="study"]:hover .realisations__view--result,
  .realisations__card[data-state="study"]:focus-within .realisations__view--result {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
  }

  .realisations__card[data-state="study"]:hover .realisations__view--study,
  .realisations__card[data-state="study"]:focus-within .realisations__view--study {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.99);
  }

  /* keep the glider/labels honest during hover-preview */
  .realisations__card[data-state="study"]:hover .realisations__seg-glider,
  .realisations__card[data-state="study"]:focus-within .realisations__seg-glider {
    transform: translateX(100%);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.14));
    border-color: rgba(var(--accent-rgb), 0.5);
  }
}

/* Reduced motion — no transforms/cross-fades; instant, legible state */
@media (prefers-reduced-motion: reduce) {
  .realisations__card,
  .realisations__view,
  .realisations__seg-glider,
  .realisations__card::before,
  .realisations__cta svg {
    transition: none;
  }

  .realisations__card:hover,
  .realisations__card:focus-within {
    transform: none;
  }

  .realisations__view--study,
  .realisations__view--result,
  .realisations__card[data-state] .realisations__view--study,
  .realisations__card[data-state] .realisations__view--result {
    transform: none;
  }
}

/* Reveal stagger (matches shared [data-reveal] contract) */
.realisations [data-reveal][data-delay="1"] { transition-delay: 0.08s; }
.realisations [data-reveal][data-delay="2"] { transition-delay: 0.16s; }
.realisations [data-reveal][data-delay="3"] { transition-delay: 0.24s; }
.realisations [data-reveal][data-delay="4"] { transition-delay: 0.32s; }

/* ============ section: services ============ */
.services__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.services__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding: clamp(2rem, 5vw, 3.25rem) 0;
}

/* Very large ghost number sitting behind the content */
.services__ghost {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.75rem, 12vw, 8.5rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.32);
  user-select: none;
  transition: -webkit-text-stroke-color 0.45s ease, color 0.45s ease, transform 0.45s ease;
  min-width: clamp(3.5rem, 14vw, 9rem);
}

.services__body {
  flex: 1 1 auto;
  max-width: 42rem;
  padding-top: clamp(0.25rem, 1.5vw, 1.1rem);
}

/* Tiny steel-blue technical index/label */
.services__index {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 0.85rem;
}

.services__title {
  margin: 0 0 0.65rem;
  color: var(--text);
  letter-spacing: -0.02em;
}

.services__text {
  margin: 0;
  max-width: 38rem;
  line-height: 1.7;
}

/* Hairline divider line between rows */
.services__divider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--border);
  overflow: hidden;
}

.services__divider::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
  transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services__item:last-child .services__divider {
  display: none;
}

/* Hover: ignite the ghost number and run the copper hairline */
.services__item:hover .services__ghost,
.services__item:focus-within .services__ghost {
  -webkit-text-stroke-color: rgba(var(--accent-rgb), 0.85);
  text-stroke-color: rgba(var(--accent-rgb), 0.85);
  color: rgba(var(--accent-rgb), 0.06);
}

.services__item:hover .services__divider::after,
.services__item:focus-within .services__divider::after {
  width: 100%;
}

/* Mobile-first: stack ghost number above the body */
@media (max-width: 640px) {
  .services__item {
    flex-direction: column;
    gap: 0.5rem;
  }

  .services__ghost {
    min-width: 0;
    margin-bottom: -0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services__ghost,
  .services__divider::after {
    transition: none;
  }
}

/* ============ section: cta ============ */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed contrast background layer */
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(var(--accent-rgb), 0.10) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-alt) 0%, var(--bg) 60%, #E6EAEF 100%);
  pointer-events: none;
}

/* Blueprint grid. PERF: no mask (see .section--grid note) — edge fade faked
   with opaque cover gradients toward the .cta__bg base tones. */
.cta__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, var(--bg-alt) 0%, transparent 24%, transparent 72%, #E6EAEF 100%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  opacity: 0.4;
}

/* Soft molten-copper glows. PERF: no Gaussian filter — the radial gradient
   itself provides the falloff (a 70px blur over a ~400px layer is one of the
   most expensive single rasters on weak GPUs). */
.cta__glow {
  position: absolute;
  border-radius: 50%;
}

.cta__glow--a {
  top: -120px;
  right: -60px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28) 0%, transparent 70%);
}

.cta__glow--b {
  bottom: -160px;
  left: -80px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(70, 112, 143, 0.16) 0%, transparent 70%);
}

/* Hot-metal hairline running across the top of the band */
.cta__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 18%,
    rgba(var(--accent-rgb), 0.85) 50%,
    var(--border) 82%,
    transparent 100%);
}

/* Content panel */
.cta__panel {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(0.5rem, 2vw, 2rem);
}

.cta__eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--accent);
}

.cta__heading {
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cta__text {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--text-muted);
}

/* Actions */
.cta__actions {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.cta__btn {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 14px 40px -18px rgba(var(--accent-rgb), 0.7);
}

/* Secondary links */
.cta__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem clamp(1.2rem, 4vw, 2.4rem);
}

.cta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.5rem;
  color: var(--text-muted);
  font-family: var(--font-body, inherit);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.cta__link:hover,
.cta__link:focus-visible {
  color: var(--text);
}

.cta__link:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.7);
  outline-offset: 3px;
}

.cta__link-icon {
  flex: none;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.cta__link:hover .cta__link-icon,
.cta__link:focus-visible .cta__link-icon {
  transform: translateY(-1px);
}

.cta__link-sub {
  color: var(--text-muted);
}

/* Divider between the two secondary links on wider screens */
@media (min-width: 560px) {
  .cta__secondary {
    flex-wrap: nowrap;
  }
  .cta__link:not(:first-child) {
    position: relative;
  }
  .cta__link:not(:first-child)::before {
    content: "";
    position: absolute;
    left: calc(clamp(1.2rem, 4vw, 2.4rem) / -2);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--border);
  }
}

/* ============ section: contact ============ */
/* ============================================================
   CONTACT — scoped to .contact__*  (tokens only)
   ============================================================ */
.contact__head {
  max-width: 640px;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 920px) {
  .contact__grid {
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(2.5rem, 4vw, 4.5rem);
  }
}

/* ---------- LEFT : coordinates --------------------------- */
.contact__coords {
  position: relative;
}

.contact__coords-kicker {
  display: block;
  margin-bottom: 1.6rem;
}

.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.contact__row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}
.contact__row:first-child { padding-top: 0; }

.contact__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.contact__row:hover .contact__ico {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.42);
  transform: translateY(-1px);
}

.contact__row-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.15rem;
}

.contact__row-label {
  font-family: var(--font-display, inherit);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
}

.contact__row-value {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  font-style: normal;
  word-break: break-word;
  transition: color 0.25s ease;
}
a.contact__row-value:hover,
a.contact__row-value:focus-visible {
  color: var(--accent);
}
.contact__row-value--plain { color: var(--text-muted); }

.contact__note {
  margin: 1.6rem 0 0;
  font-size: 0.9rem;
}

/* ---------- RIGHT : form card ---------------------------- */
.contact__form-wrap {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), transparent 38%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
}

/* success note */
.contact__notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}
.contact__notice-ico {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--accent);
}
.contact__notice-text { font-weight: 500; }
/* Error / warning variant (used by the cperr feedback block) */
.contact__notice--error {
  border-color: rgba(180, 83, 9, 0.40);
  background: rgba(180, 83, 9, 0.10);
}
.contact__notice--error .contact__notice-ico { color: #b45309; }

/* fields grid */
.contact__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.05rem;
}
@media (min-width: 560px) {
  .contact__fields { grid-template-columns: 1fr 1fr; }
}
.contact__field--full { grid-column: 1 / -1; }

/* floating-label field */
.contact__field {
  position: relative;
}

.contact__input {
  width: 100%;
  font-family: var(--font-body, inherit);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.35rem 1rem 0.55rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.contact__input::placeholder { color: transparent; }

.contact__textarea {
  resize: vertical;
  min-height: 130px;
  padding-top: 1.6rem;
}

.contact__input:hover { border-color: rgba(var(--accent-rgb), 0.4); }

.contact__input:focus,
.contact__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
  background: var(--surface);
}

/* floating label */
.contact__label {
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  font-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease, top 0.18s ease;
}

.contact__input:focus + .contact__label,
.contact__input:not(:placeholder-shown) + .contact__label {
  top: 0.5rem;
  transform: scale(0.74);
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* select sits above its label in source -> label is sibling AFTER */
.contact__field--select .contact__label {
  /* select always counts as filled when an option is chosen */
}
.contact__select {
  cursor: pointer;
  color: var(--text);
  padding-right: 2.6rem;
}
/* keep label raised once a real value is set; the empty hidden option
   makes :not(:placeholder-shown) unreliable for <select>, so float on focus + valid */
.contact__select:focus + .contact__label,
.contact__select:valid + .contact__label {
  top: 0.5rem;
  transform: scale(0.74);
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.contact__select:invalid { color: var(--text-muted); }

.contact__select option {
  color: var(--text);
  background: var(--surface);
}

.contact__chevron {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.25s ease;
}
.contact__field--select:hover .contact__chevron,
.contact__select:focus ~ .contact__chevron { color: var(--accent); }

.contact__field--area .contact__label { top: 1.15rem; }
.contact__textarea:focus + .contact__label,
.contact__textarea:not(:placeholder-shown) + .contact__label {
  top: 0.45rem;
}

/* actions */
.contact__actions {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.contact__submit {
  align-self: flex-start;
}
.contact__legal {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .contact__ico,
  .contact__input,
  .contact__label,
  .contact__row-value { transition: none; }
}

/* ============ section: footer ============ */
.footer {
  position: relative;
  overflow: hidden;
}

/* Hairline accent that bleeds along the very top edge of the footer band */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.45) 22%,
    rgba(var(--accent-rgb), 0.45) 50%,
    transparent 82%
  );
  opacity: 0.7;
  pointer-events: none;
}

.footer .container {
  position: relative;
  z-index: 1;
}

/* ---- Top grid: brand rail + nav + contact ---- */
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block-end: clamp(2.25rem, 4vw, 3rem);
}

@media (min-width: 600px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 920px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* ---- Brand block ---- */
.footer__brand {
  max-width: 38ch;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
}

.footer__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    var(--surface);
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer__logo:hover .footer__logo-mark,
.footer__logo:focus-visible .footer__logo-mark {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 6px 22px -12px rgba(var(--accent-rgb), 0.6);
}

.footer__logo-text {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.footer__logo-dot {
  color: var(--accent);
}

.footer__tagline {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* "Made in Suisse" mark */
.footer__made {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.6rem 0 0;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.footer__badges .footer__made { margin-top: 0; }

.footer__flag {
  display: inline-flex;
  line-height: 0;
  border-radius: 5px;
  overflow: hidden;
}
.footer__arms {
  display: inline-flex;
  line-height: 0;
}

.footer__made-text {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Column headings ---- */
.footer__col-title {
  display: block;
  margin: 0 0 1.1rem;
  color: var(--accent-2);
}

/* ---- In-page nav ---- */
.footer__nav-list,
.footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer__nav-link {
  position: relative;
  display: inline-block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding-left: 0;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.footer__nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: width 0.25s ease;
}

.footer__nav-link:hover,
.footer__nav-link:focus-visible {
  color: var(--text);
  padding-left: 1.1rem;
}

.footer__nav-link:hover::before,
.footer__nav-link:focus-visible::before {
  width: 0.75rem;
}

/* ---- Contact ---- */
.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.footer__contact-item:hover .footer__contact-icon {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.footer__contact-link {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 0.25s ease;
}

.footer__contact-link:hover,
.footer__contact-link:focus-visible {
  color: var(--accent);
}

.footer__contact-text {
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer__contact-item--region .footer__contact-icon {
  color: var(--accent-2);
}

/* ---- Bottom bar ---- */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-block-start: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer__copyright {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.005em;
}

.footer__index {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer__index-label {
  color: var(--accent-2);
}

.footer__index-num {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Focus visibility (a11y) ---- */
.footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Reveal fallback (in case JS/observer is delayed) ---- */
@media (prefers-reduced-motion: reduce) {
  .footer [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* ===== post-assembly overrides ===== */
.site-header .site-nav__cta.btn--primary,
.site-header .site-nav__cta.btn--primary .site-nav__cta-label{ color: var(--btn-fg); }


/* methode section */
.methode {
  background: var(--bg);
  color: var(--text);
  position: relative;
}

.methode__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

/* ---- Header ---- */
.methode__head {
  max-width: 60ch;
}

.methode__eyebrow {
  color: var(--accent);
  margin: 0 0 1rem;
}

.methode__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  color: var(--text);
}

.methode__intro {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
}

/* ---- Steps ---- */
.methode__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  counter-reset: methode;
}

.methode__step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.6rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color .35s ease, transform .35s ease, background .35s ease;
}

.methode__step:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: translateY(-3px);
}

/* connecting arrow between steps (desktop) */
.methode__step::after {
  content: "";
  position: absolute;
  top: 2.45rem;
  right: -1.05rem;
  width: 0.85rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-2-rgb), 0.55), rgba(var(--accent-2-rgb), 0));
  z-index: 2;
}

.methode__step:last-child::after {
  display: none;
}

.methode__stepHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.methode__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(var(--accent-rgb), 0.9);
}

.methode__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex: 0 0 auto;
  color: var(--accent-2);
  background: rgba(var(--accent-2-rgb), 0.1);
  border: 1px solid rgba(var(--accent-2-rgb), 0.25);
}

.methode__stepTitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}

.methode__stepText {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ---- CTA / trust ---- */
.methode__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.5rem clamp(1.4rem, 3vw, 2.2rem);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.methode__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  max-width: 52ch;
}

.methode__trustIcon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--accent);
}

.methode__btn {
  flex: 0 0 auto;
}

/* ---- Reveal animation ---- */
[data-reveal].methode__step,
.methode [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}

.methode [data-reveal].is-visible,
.methode [data-reveal].revealed,
.methode [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .methode__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .methode__step::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .methode__steps {
    grid-template-columns: 1fr;
  }
  .methode__cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .methode__btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .methode [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .methode__step:hover {
    transform: none;
  }
}

/* ===== UX readability / sobriety pass ===== */
/* ============================================================
   READABILITY + SOBRIETY + CONVERSION PASS  (appended last — wins)
   Refinement only: no palette swap, no layout/structure change.
   Targets existing CP PROJET.CH classes + generic elements.
   ============================================================ */

/* (a) Readability — lift muted text + comfortable measure.
   Retuning the token cascades to every .text-muted / .lead / card
   text / footer copy without touching individual rules.
   LIGHT THEME (2026-06-10): #4A5460 on #FAFBFC ≈ 7.6:1 — calm but clearly
   readable, still below --text so hierarchy is preserved. */
:root {
  --text-muted: #4A5460;
  --measure: 66ch;
}

p { max-width: var(--measure); }                 /* comfy line length */
.lead {
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 62ch;                               /* slightly wider, still tight */
}
.card__text,
.services__text,
.cta__text,
.footer__tagline { line-height: 1.7; }           /* breathing room in body copy */

/* (b) Hierarchy & sober spacing — quieter eyebrow, clearer section heads */
.eyebrow { letter-spacing: 0.18em; opacity: 0.96; }  /* a touch less shouty */
.section-head > * + * { margin-top: 0.85rem; }       /* even rhythm in heads */
.lead + .btn,
.cta__text + .cta__actions { margin-top: 0.25rem; }  /* tie copy to its CTA */

/* (c) Inviting primary CTA — slightly larger tap target, calm copper sheen,
   no garish glow. Reinforces the existing gradient rather than replacing it. */
.btn--primary {
  padding-block: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
              0 10px 26px -14px var(--accent-glow);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #A82945, var(--accent-strong));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 16px 40px -14px var(--accent-glow);
}

/* (d) Consistent, calm hover/focus affordances on ghost & inline links */
.btn--ghost:hover {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.07);
}
a:not([class]):hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* (e) Strong, visible focus everywhere — accessible & on-brand.
   Double ring (dark halo + copper) so it reads on any surface. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95),
              0 0 0 6px rgba(var(--accent-rgb), 0.55);
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }      /* clears the pill edge */
.contact__input:focus-visible {                  /* keep field ring subtle, not doubled */
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary, .btn--ghost { transition: none; }
}

/* Elementor hero CTA row — buttons side by side */
.cp-cta-row .elementor-widget-wrap{ flex-direction:row; flex-wrap:wrap; gap:14px; align-items:center; }
.cp-cta-row .elementor-widget-wrap > .elementor-element{ width:auto; max-width:none; flex:0 0 auto; margin-top:0; margin-bottom:20px; }
/* Align solid + outline Elementor buttons to the SAME height: outline buttons add a
   1px border, so give every button a transparent 1px border by default. Elementor's
   per-button border colors (more specific) still win on the outline buttons. */
.elementor-button{ border:1px solid transparent; }
/* Force identical pill radius on Elementor buttons (0,3,0 specificity beats any
   per-element override) so solid and outline CTAs share the exact same shape. */
.elementor-widget-button .elementor-button.elementor-size-sm{ border-radius:999px; }

/* Elementor hero — blueprint grid + accent glow (match bespoke depth).
   :not(.hero) keeps these ID-strength rules off the bespoke fallback hero
   (parts/sections.php), which shares id="accueil" and has its own ::after
   1px seam hairline that these would otherwise hijack. */
#accueil:not(.hero){ position:relative; overflow:hidden; }
#accueil:not(.hero) > .elementor-container{ position:relative; z-index:1; }
#accueil:not(.hero)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* PERF: no mask (see .section--grid note) — edge fade faked with cover
     gradients toward the hero's Elementor background (#FAFBFC = CP_BG). */
  background-image:
    linear-gradient(to bottom, #FAFBFC 0%, transparent 20%, transparent 76%, #FAFBFC 100%),
    linear-gradient(to right, #FAFBFC 0%, transparent 12%, transparent 88%, #FAFBFC 100%),
    linear-gradient(to right, rgba(70,112,143,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(70,112,143,0.10) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 64px 64px, 64px 64px;
}
#accueil:not(.hero)::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 42% at 84% 34%, rgba(147,32,58,0.10), transparent 70%),
    radial-gradient(40% 42% at 18% 78%, rgba(70,112,143,0.07), transparent 72%),
    radial-gradient(38% 40% at 66% 72%, rgba(70,112,143,0.08), transparent 72%);
}
/* Accessibility skip-link */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:3000; background:var(--accent); color:#FFFFFF; padding:.7rem 1.2rem; font-weight:600; border-radius:0 0 10px 0; text-decoration:none; }
.skip-link:focus{ left:0; outline:2px solid #fff; outline-offset:-4px; }
/* ===== Left scroll-spy navigation (front page) ===== */
.scrollspy{ position:fixed; left:24px; top:50%; transform:translateY(-50%); z-index:900; display:flex; flex-direction:column; align-items:center; gap:20px; padding:8px 0; }
.scrollspy__progress{ position:absolute; left:50%; top:-14px; bottom:-14px; width:2px; transform:translateX(-50%); background:var(--border); border-radius:2px; overflow:hidden; }
.scrollspy__progress-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(180deg,var(--accent),var(--accent-strong)); }
.scrollspy__item{ position:relative; display:flex; align-items:center; justify-content:center; width:18px; height:18px; z-index:1; }
.scrollspy__dot{ width:9px; height:9px; border-radius:50%; background:var(--surface); border:1.5px solid var(--text-muted); transition:transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.scrollspy__item:hover .scrollspy__dot, .scrollspy__item.is-active .scrollspy__dot{ background:var(--accent); border-color:var(--accent); transform:scale(1.3); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18); }
.scrollspy__item::after{ content:attr(data-label); position:absolute; left:26px; top:50%; transform:translateY(-50%) translateX(-6px); white-space:nowrap; font-family:var(--font-body); font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text); background:var(--surface); border:1px solid var(--border); padding:.32rem .6rem; border-radius:7px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.scrollspy__item:hover::after, .scrollspy__item.is-active::after{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:1180px){ .scrollspy{ display:none; } }
/* ===== Section reveal: REMOVED =====
   Sections are always fully visible. The hide-then-reveal pattern (opacity:0
   until the IntersectionObserver adds .cp-in) flashed blank bands while scrolling
   on this environment — fast scrolling outran the observer, landing on sections
   still at opacity 0. Kept rock-solid instead. (.cp-in may still be added by JS;
   these rules make it a no-op so nothing is ever hidden.) */
html.cp-js .elementor-top-section,
html.cp-js .elementor-top-section.cp-in{ opacity:1; transform:none; }
/* Header: always a dark glassy bar so the nav stays legible over light sections */
/* Header: near-solid white (NO backdrop blur). A sticky backdrop-filter
   re-blurs the page behind it on every scroll frame — the main cause of scroll
   lag / blank frames on this slow guest. Solid bg is legible and free. */
.site-header, .site-header.is-scrolled{ background:rgba(255,255,255,0.95) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-bottom:1px solid rgba(26,31,38,0.08); }

/* NOTE: the section reveal is the ONE-SHOT IntersectionObserver fade above
   (.cp-in adds opacity/translate once on entry, then the section stays solid).
   The scroll-LINKED view() variant was removed — on this guest it flashed
   sections to ~0 opacity mid-scroll, which read as display glitches. */

/* ===== Band cue: a faint grenat top-glow marks the start of the Réalisations /
   Contact feature bands on the dark graphite page (subtle delineation, below
   content). ===== */
.realisations::after, .contact::after{
  content:""; position:absolute; left:0; right:0; top:0;
  height:clamp(56px, 8vw, 110px); z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(147,32,58,0.07) 0%, rgba(147,32,58,0) 100%);
}

/* ===== Reduced-motion failsafe: never hide any reveal element, so scrolling can
   never flash a blank band (fast scroll outrunning the IntersectionObserver). ===== */
@media (prefers-reduced-motion: reduce){
  html.cp-js .elementor-top-section,
  html.cp-js [data-reveal],
  html.cp-js [data-reveal].is-visible{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   #forge-line — Blueprint-Cut-to-Steel (« du trait à l'acier »)
   Adapted from .theme-build/forge-line-reveal.synth.json with this project's
   hard perf rules: OVERLAYS ONLY (section content is never hidden — the
   hide-then-reveal pattern stays banned, see "Section reveal: REMOVED"),
   no mix-blend-mode, no masks, no backdrop filters. The blueprint plate and
   plasma kerf are static paints animated with compositor-only opacity /
   transform.
   - Chromium, full motion: scroll-linked via animation-timeline: view().
   - Chromium, prefers-reduced-motion: scroll-linked OPACITY-ONLY fade of the
     plate (the authored reduce-fade this site promises); no kerf travel.
   - Other engines: one-shot keyframes when main.js's IntersectionObserver
     adds .cp-in. Under reduce there, the global 0.01ms blanket neutralizes
     them; the section itself is always visible regardless.
   [id] scoping: only top-sections with an anchor id (= the section that
   OPENS each visual band: expertises/methode/a-propos/services/cta) get the
   plate+kerf. Body sub-sections and the full-width shortcode wrappers
   (réalisations/contact) have no id — per-sub-section plates created seam
   banding mid-band, and on the opaque shortcode bands the plate was occluded
   while the kerf swept alone (review findings 2026-06-10).
   ============================================================ */
html.cp-js .elementor-top-section[id]:not(#accueil){ position:relative; overflow:hidden; }
html.cp-js .elementor-top-section[id]:not(#accueil) > .elementor-container,
html.cp-js .elementor-top-section[id]:not(#accueil) > .e-con-inner{ position:relative; z-index:2; }

/* Blueprint plate: steel-blue drafting grid + wash. Rests visible on sections
   still below the viewport ("the drawing"), drains away as they enter. */
html.cp-js .elementor-top-section[id]:not(#accueil)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(70,112,143,0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(70,112,143,0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(70,112,143,0.10) 0%, rgba(70,112,143,0.02) 100%);
  background-size:32px 32px, 32px 32px, 100% 100%;
  opacity:0;
}

/* Plasma kerf: a 26px hot strip painted at the top of a full-height box; the
   box translates by its own height (= section height), so the strip rides the
   cut line down the section. Compositor-only. */
html.cp-js .elementor-top-section[id]:not(#accueil)::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:
    radial-gradient(220px 22px at 30% 13px, rgba(147,32,58,0.16), transparent 70%),
    radial-gradient(150px 18px at 72% 13px, rgba(70,112,143,0.12), transparent 70%),
    linear-gradient(180deg, transparent 11px, rgba(147,32,58,0.45) 12px, #93203A 13px, rgba(147,32,58,0.45) 14px, transparent 15px);
  background-repeat:no-repeat;
  opacity:0;
}

/* --- Fallback path (non-Chromium): one-shot on .cp-in. Content never hides. */
@keyframes cpForgePlateOneShot{ 0%{ opacity:1; } 100%{ opacity:0; } }
@keyframes cpForgeKerfOneShot{
  0%{ opacity:0; transform:translate3d(0,0,0); }
  12%{ opacity:1; }
  86%{ opacity:1; }
  100%{ opacity:0; transform:translate3d(0, calc(100% - 26px), 0); }
}
html.cp-js .elementor-top-section.cp-in[id]:not(#accueil)::before{
  animation:cpForgePlateOneShot 1.1s cubic-bezier(0.22,1,0.36,1) both;
}
html.cp-js .elementor-top-section.cp-in[id]:not(#accueil)::after{
  animation:cpForgeKerfOneShot 1.05s cubic-bezier(0.22,1,0.36,1) both;
}
/* Never travel the kerf for reduce users on the fallback path. */
@media (prefers-reduced-motion: reduce){
  html.cp-js .elementor-top-section.cp-in[id]:not(#accueil)::after{ animation:none; opacity:0; }
}

/* --- Scroll-linked path (Chromium): overrides the one-shot (same specificity,
   later in file + @supports). Progress is range-mapped, so the global reduce
   blanket's 0.01ms duration does not affect these. */
@supports (animation-timeline: view()) {
  @keyframes cpForgeDrain{ 0%{ opacity:1; } 100%{ opacity:0; } }
  @keyframes cpForgeKerf{
    0%{ opacity:0; transform:translate3d(0,0,0); }
    10%{ opacity:1; }
    88%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(0, calc(100% - 26px), 0); }
  }
  @media (prefers-reduced-motion: no-preference){
    html.cp-js .elementor-top-section[id]:not(#accueil)::before,
    html.cp-js .elementor-top-section.cp-in[id]:not(#accueil)::before{
      animation:cpForgeDrain linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 46%;
    }
    html.cp-js .elementor-top-section[id]:not(#accueil)::after,
    html.cp-js .elementor-top-section.cp-in[id]:not(#accueil)::after{
      animation:cpForgeKerf linear both;
      animation-timeline:view();
      animation-range:entry 2% entry 44%;
    }
  }
  /* Reduce: the authored opacity-fade — the blueprint plate clears gently as
     the section enters. Opacity only, nothing moves, content never hidden. */
  @media (prefers-reduced-motion: reduce){
    html.cp-js .elementor-top-section[id]:not(#accueil)::before,
    html.cp-js .elementor-top-section.cp-in[id]:not(#accueil)::before{
      animation:cpForgeDrain linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
    html.cp-js .elementor-top-section[id]:not(#accueil)::after,
    html.cp-js .elementor-top-section.cp-in[id]:not(#accueil)::after{
      animation:none; opacity:0;
    }
  }
}