/* =====================================================================
   ASH2501 Labs — vitrine statique · pièce visuelle
   Blanc robotique · céramique · aluminium · registre industriel
   Aucune dépendance externe. Tout est self-contained.
   ===================================================================== */

:root {
  /* Fond */
  --bg:        #F0EEEA;
  --bg-soft:   #e8e6e2;

  /* Confort visuel — atténuation fond / anti-lumière bleue (ajuster ici) */
  --background-dim:           0.91;   /* luminosité image (0.82–1) */
  --ceramic-warmth:           0.14;   /* neutralisation bleu froid (0–0.3) */
  --comfort-overlay-opacity:  0.46;   /* intensité voile ivoire (0.3–0.6) */
  --comfort-overlay:          243, 241, 236;  /* ivoire froid céramique */
  --comfort-overlay-strong:   236, 234, 229;  /* gris céramique */
  --comfort-overlay-deep:     228, 226, 221;

  /* Surfaces & lignes */
  --surface:   rgba(255, 255, 255, 0.78);
  --surface-2: rgba(255, 255, 255, 0.94);
  --border:    rgba(18, 26, 40, 0.08);
  --border-2:  rgba(18, 26, 40, 0.14);
  --hairline:  rgba(18, 26, 40, 0.06);

  /* Panneaux — verre céramique / aluminium */
  --panel-edge:   rgba(176, 186, 200, 0.68);
  --panel-edge-2: rgba(255, 255, 255, 0.92);
  --panel-inner:  rgba(18, 26, 40, 0.045);
  --panel-glow:   inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(18, 26, 40, 0.035);
  --panel-shadow: 0 22px 56px -36px rgba(18, 26, 40, 0.18), 0 6px 18px -10px rgba(18, 26, 40, 0.08);

  /* Texte */
  --text:      #141c2a;
  --text-soft: #3a4654;
  --text-mute: #5a6678;

  /* Fond image */
  --bg-img-avif: url("assets/ash-bg-white-tech.avif");
  --bg-img-webp: url("assets/ash-bg-white-tech.webp");
  --bg-pos: 58% 30%;
  --bg-pos-mobile: 52% 10%;

  /* Accents */
  --accent:    #1aab9a;
  --accent-2:  #4a7fc4;
  --accent-3:  #7a68b0;

  /* Ombres */
  --shadow-sm: 0 2px 8px -2px rgba(18, 26, 40, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(18, 26, 40, 0.10);
  --shadow-lg: 0 24px 56px -20px rgba(18, 26, 40, 0.12);

  /* Cadre viewport — interface pleine fenêtre */
  --frame-stroke: rgba(18, 26, 40, 0.11);

  /* Géométrie */
  --maxw: 1200px;
  --space-section: clamp(96px, 14vw, 180px);

  /* Ancrage photolayout — calé sur ash-bg-white-tech (cover, 58% 30%) */
  --layout-gutter:       clamp(24px, 4.4vw, 56px);
  --layout-header-h:     clamp(48px, 6.2vh, 56px);
  --layout-header-rail:  clamp(10px, 1.35vh, 13px);
  --layout-header-top:   clamp(8px, 1.1vh, 11px);
  --layout-header-overlap-buffer: 10px;
  --layout-cuve-left:    clamp(28px, 4.6vw, 56px);
  --layout-cuve-width:   clamp(392px, 39.5vw, 488px);
  --layout-cuve-top:     clamp(10px, 1.8vh, 20px);
  --layout-cuve-min-h:   clamp(400px, 50vh, 508px);
  --layout-panel-inset:  clamp(24px, 2.8vw, 32px);
  --layout-plaque-top:   clamp(72px, 11.8vh, 110px);
  --layout-plaque-right: clamp(2px, 0.9vw, 12px);
  --layout-plaque-width: 152px;
  --layout-plaque-height: 86px;
  --layout-nav-gap:      clamp(16px, 2.2vw, 28px);
  --layout-rail-right:   clamp(10px, 2.2vw, 28px);

  /* Positions figées — cadres hero (desktop) */
  --layout-hero-offset-x:     0px;
  --layout-hero-offset-y:     0px;
  --layout-plaque-offset-x:   calc(3cm + var(--layout-plaque-width));
  --layout-plaque-offset-y:   calc(-1 * var(--layout-plaque-height));
  --layout-plaque-left:       clamp(56px, 7.4vw, 112px);

  /* Encastrement — relief façade / module */
  --seat-inset-top:    inset 0 3px 7px rgba(18, 26, 40, 0.07);
  --seat-inset-bottom: inset 0 -3px 8px rgba(18, 26, 40, 0.052);
  --seat-inset-lip:    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --seat-outer:        0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 22px -16px rgba(18, 26, 40, 0.11);

  /* Double cadre layout — trait technique gris */
  --module-frame-outer:  rgba(176, 186, 200, 0.54);
  --module-frame-inner:  rgba(176, 186, 200, 0.30);
  --module-frame-inner-soft: rgba(176, 186, 200, 0.24);
  --module-frame-gap:    5px;
  --module-fill-anchors:
    radial-gradient(circle at 0 0, rgba(26, 171, 154, 0.38) 0 1px, transparent 1.6px),
    radial-gradient(circle at 100% 0, rgba(176, 186, 200, 0.32) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 100% 100%, rgba(176, 186, 200, 0.42) 0 1px, transparent 1.6px);
  --module-fill-base:
    linear-gradient(168deg, rgba(255, 255, 255, 0.46) 0%, rgba(248, 250, 253, 0.26) 48%, rgba(240, 238, 234, 0.2) 100%);

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typographie — stack système (zéro requête réseau)
     --font-display : registre carré / DIN / technique
     (Bahnschrift = variable, géométrique, livré avec Windows 10+) */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Bahnschrift", "DIN Alternate", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Inter", system-ui, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

  /* Typo cyber — registre machine / lab */
  --cyber-track-tight:  -0.02em;
  --cyber-track-label:   0.24em;
  --cyber-track-title:   0.06em;
  --cyber-track-micro:   0.28em;
  --cyber-lh-mechanical: 1.08;
  --cyber-stretch:       86%;
}

/* ---------- Reset léger ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #c8cdd6 var(--bg);
}

/* Sélection de texte — accent lab */
::selection { background: rgba(26, 171, 154, 0.18); color: #0a3d36; }

/* Scrollbar claire (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #c8cdd6;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #a8b0bc; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  line-height: var(--cyber-lh-mechanical);
  letter-spacing: var(--cyber-track-title);
  font-weight: 600;
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  text-transform: uppercase;
}

/* ---------- Utilitaires typo cyber ---------- */
.cyber-title {
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  font-weight: 600;
  letter-spacing: var(--cyber-track-title);
  line-height: var(--cyber-lh-mechanical);
  text-transform: uppercase;
}
.cyber-label {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: var(--cyber-track-label);
  line-height: 1.2;
  text-transform: uppercase;
}
.cyber-word {
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  letter-spacing: var(--cyber-track-title);
  text-transform: uppercase;
}
.tech-text {
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.68;
  text-transform: none;
}
.project-name {
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  position: relative;
}
.encoded-accent {
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  border-radius: 2px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Décor — fond image tech + voile céramique confort ---------- */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--comfort-overlay), calc(0.62 * var(--comfort-overlay-opacity))) 0%,
      rgba(var(--comfort-overlay-strong), calc(0.48 * var(--comfort-overlay-opacity))) 28%,
      rgba(var(--comfort-overlay-deep), calc(0.52 * var(--comfort-overlay-opacity))) 58%,
      rgba(var(--comfort-overlay), calc(0.66 * var(--comfort-overlay-opacity))) 100%
    ),
    -webkit-image-set(
      var(--bg-img-avif) type("image/avif"),
      var(--bg-img-webp) type("image/webp")
    );
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--comfort-overlay), calc(0.62 * var(--comfort-overlay-opacity))) 0%,
      rgba(var(--comfort-overlay-strong), calc(0.48 * var(--comfort-overlay-opacity))) 28%,
      rgba(var(--comfort-overlay-deep), calc(0.52 * var(--comfort-overlay-opacity))) 58%,
      rgba(var(--comfort-overlay), calc(0.66 * var(--comfort-overlay-opacity))) 100%
    ),
    image-set(
      var(--bg-img-avif) type("image/avif"),
      var(--bg-img-webp) type("image/webp")
    );
  background-size: cover;
  background-position: var(--bg-pos);
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter:
    brightness(var(--background-dim))
    saturate(calc(1 - var(--ceramic-warmth) * 0.42))
    contrast(0.98);
}

/* Lumière — zone calme gauche, relief technique droite (ivoire froid, moins bleu) */
.bg-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 62% at 18% 34%, rgba(var(--comfort-overlay), calc(0.38 * var(--comfort-overlay-opacity))) 0%, transparent 74%),
    radial-gradient(ellipse 42% 55% at 82% 28%, rgba(var(--comfort-overlay-strong), calc(0.24 * var(--comfort-overlay-opacity))) 0%, transparent 68%),
    linear-gradient(105deg, rgba(var(--comfort-overlay), calc(0.18 * var(--comfort-overlay-opacity))) 0%, transparent 42%, rgba(var(--comfort-overlay-strong), calc(0.10 * var(--comfort-overlay-opacity))) 100%),
    linear-gradient(180deg, rgba(var(--comfort-overlay), calc(0.14 * var(--comfort-overlay-opacity))) 0%, transparent 22%, rgba(var(--comfort-overlay-strong), calc(0.22 * var(--comfort-overlay-opacity))) 88%, rgba(var(--comfort-overlay), calc(0.34 * var(--comfort-overlay-opacity))) 100%);
}

/* Micro-vignette + voile céramique global — confort sans masquer le détail */
.bg-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 38%, rgba(18, 26, 40, 0.045) 100%),
    linear-gradient(
      168deg,
      rgba(var(--comfort-overlay), calc(0.08 + var(--ceramic-warmth) * 0.18)) 0%,
      rgba(var(--comfort-overlay-strong), calc(0.06 + var(--ceramic-warmth) * 0.12)) 52%,
      rgba(var(--comfort-overlay-deep), calc(0.10 + var(--ceramic-warmth) * 0.14)) 100%
    );
}

/* Lumière ambiante très lente */
@keyframes ambient-drift {
  0%, 100% { opacity: 1;    transform: translate3d(0, 0, 0); }
  50%      { opacity: 0.92; transform: translate3d(12px, -8px, 0); }
}
.bg-decor::before {
  animation: ambient-drift 36s ease-in-out infinite;
}

/* Grille supprimée — conservée en DOM pour compatibilité, masquée */
.bg-grid { display: none; }

/* Couches décoratives legacy — masquées, le fond image porte la matière */
.bg-circuit,
.halo,
.bg-signal,
.bg-coords { display: none; }

.bg-circuit {
  position: absolute;
  inset: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='rgba(18,26,40,0.04)' stroke-width='1'%3E%3Cpath d='M70 60v110l50 50h110'/%3E%3Cpath d='M520 90h-90l-40 40v80'/%3E%3Cpath d='M120 420h120l40-40v-50'/%3E%3Cpath d='M460 520v-90l-50-50'/%3E%3Cpath d='M540 560h-120l-30-30'/%3E%3Cpath d='M40 560v-60l30-30'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(26,171,154,0.05)' stroke-width='1'%3E%3Cpath d='M150 300v80l40 40'/%3E%3Cpath d='M560 250v110l-30 30'/%3E%3C/g%3E%3Cg fill='rgba(18,26,40,0.06)'%3E%3Ccircle cx='70' cy='60' r='2'/%3E%3Ccircle cx='230' cy='220' r='2'/%3E%3Ccircle cx='520' cy='90' r='2'/%3E%3Ccircle cx='390' cy='210' r='2'/%3E%3Ccircle cx='120' cy='420' r='2'/%3E%3Ccircle cx='280' cy='330' r='2'/%3E%3Ccircle cx='460' cy='520' r='2'/%3E%3Ccircle cx='410' cy='380' r='2'/%3E%3Ccircle cx='540' cy='560' r='2'/%3E%3Ccircle cx='390' cy='530' r='2'/%3E%3Ccircle cx='40' cy='560' r='2'/%3E%3Ccircle cx='70' cy='470' r='2'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(18,26,40,0.05)'%3E%3Ccircle cx='230' cy='220' r='4.5'/%3E%3Ccircle cx='460' cy='520' r='4.5'/%3E%3Ccircle cx='120' cy='420' r='4.5'/%3E%3C/g%3E%3Cg fill='rgba(26,171,154,0.12)'%3E%3Ccircle cx='150' cy='300' r='1.8'/%3E%3Ccircle cx='190' cy='420' r='1.8'/%3E%3Ccircle cx='530' cy='390' r='1.8'/%3E%3C/g%3E%3Crect x='300' y='250' width='64' height='64' rx='3' fill='rgba(255,255,255,0.3)' stroke='rgba(18,26,40,0.05)'/%3E%3Crect x='322' y='272' width='20' height='20' fill='none' stroke='rgba(26,171,154,0.1)'/%3E%3Cg stroke='rgba(18,26,40,0.04)'%3E%3Cpath d='M316 250v-12M332 250v-12M348 250v-12M316 314v12M332 314v12M348 314v12M300 266h-12M300 282h-12M300 298h-12M364 266h12M364 282h12M364 298h12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px 600px;
  -webkit-mask-image: radial-gradient(ellipse 120% 95% at 50% 42%, #000 0%, transparent 88%);
          mask-image: radial-gradient(ellipse 120% 95% at 50% 42%, #000 0%, transparent 88%);
}

/* Signal — balayage horizontal très lent, presque imperceptible */
.bg-signal {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 12%,
    rgba(26, 171, 154, 0.06) 38%,
    rgba(26, 171, 154, 0.12) 50%,
    rgba(26, 171, 154, 0.06) 62%,
    transparent 88%
  );
  opacity: 0;
  animation: signal-sweep 28s linear infinite;
  will-change: transform, opacity;
}
@keyframes signal-sweep {
  0%   { transform: translateY(6vh);  opacity: 0; }
  10%  { opacity: 0.6; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(94vh); opacity: 0; }
}

/* Micro-coordonnées techniques en périphérie */
.bg-coords {
  position: absolute;
  inset: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: rgba(107, 119, 136, 0.38);
  user-select: none;
}
.bg-coords span { position: absolute; white-space: nowrap; }
.bg-coords span:nth-child(1) {
  left: 18px; top: 50%;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateY(50%);
}
.bg-coords span:nth-child(2) { right: 20px; bottom: 26vh; writing-mode: vertical-rl; }
.bg-coords span:nth-child(3) { left: 50%; bottom: 14px; transform: translateX(-50%); }

.bg-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.018;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Voile confort — devant le fond, derrière le contenu (z-index -1 hérité) */
.bg-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 72% at 50% 38%, rgba(var(--comfort-overlay), calc(0.10 + var(--comfort-overlay-opacity) * 0.12)), transparent 72%),
    linear-gradient(
      180deg,
      rgba(var(--comfort-overlay), calc(0.06 + var(--ceramic-warmth) * 0.10)) 0%,
      transparent 38%,
      rgba(var(--comfort-overlay-strong), calc(0.08 + var(--ceramic-warmth) * 0.12)) 100%
    );
}

.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  will-change: transform;
}
/* Halos sculptés — cœur dense, déclin contrôlé */
.halo--one {
  width: 640px; height: 640px;
  top: -16%; right: -12%;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(26, 171, 154, 0.07) 0%,
    rgba(26, 171, 154, 0.025) 38%,
    transparent 66%
  );
  animation: drift 40s var(--ease) infinite alternate;
}
.halo--two {
  width: 720px; height: 720px;
  bottom: -28%; left: -16%;
  background: radial-gradient(
    circle at 60% 55%,
    rgba(74, 127, 196, 0.06) 0%,
    rgba(74, 127, 196, 0.02) 40%,
    transparent 66%
  );
  animation: drift 48s var(--ease) infinite alternate-reverse;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-36px, 28px, 0) scale(1.06); }
}

/* ---------- Cadre viewport — pleine fenêtre, lié à la top bar ---------- */
.viewport-frame {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
  border-top: 1px solid var(--frame-stroke);
  border-left: 1px solid var(--frame-stroke);
  border-right: 1px solid var(--frame-stroke);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.18),
    inset -1px 0 0 rgba(255, 255, 255, 0.18);
}

/* ---------- Module industriel — verre céramique ---------- */
.module {
  position: relative;
  background:
    linear-gradient(148deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 253, 0.78) 46%, rgba(255, 255, 255, 0.72) 100%);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  border: 1px solid var(--panel-edge);
  box-shadow: var(--panel-glow), var(--panel-shadow);
  transition:
    border-color 0.4s var(--ease),
    box-shadow 0.45s var(--ease),
    background 0.45s var(--ease);
}
.module::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--panel-inner);
  pointer-events: none;
  transition: border-color 0.4s var(--ease);
}
.module::after {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95) 42%, transparent);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease), left 0.45s var(--ease), right 0.45s var(--ease);
}
.module:hover,
.module:focus-within {
  border-color: rgba(176, 186, 200, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(18, 26, 40, 0.04),
    0 26px 60px -34px rgba(18, 26, 40, 0.18),
    0 8px 22px -12px rgba(18, 26, 40, 0.08);
}
.module:hover::after,
.module:focus-within::after {
  opacity: 1;
  left: 4%;
  right: 4%;
}
.module--ghost {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.58) 0%, rgba(248, 250, 253, 0.38) 100%);
  box-shadow:
    var(--seat-inset-top),
    var(--seat-inset-bottom),
    var(--seat-inset-lip),
    var(--seat-outer);
}

/* Modules encastrés dans le photolayout */
.module--seated {
  box-shadow:
    var(--seat-inset-top),
    var(--seat-inset-bottom),
    var(--seat-inset-lip),
    var(--seat-outer);
}
.module--seated::before {
  inset: 3px;
  border-color: rgba(18, 26, 40, 0.05);
}

/* ---------- Rails verticaux ---------- */
.rails {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  max-width: var(--maxw);
  margin-inline: auto;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  display: none;
}
@media (min-width: 1100px) { .rails { display: block; } }

/* ---------- En-tête — rainure horizontale du photolayout ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--layout-header-h);
  display: flex;
  align-items: stretch;
  border-bottom: none;
  background: transparent;
  isolation: isolate;
}
.site-header__inner {
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out), visibility 0.42s;
}
.site-header.is-scrolled .site-header__inner {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  visibility: hidden;
}
.site-header::before {
  content: "";
  position: absolute;
  left: var(--layout-cuve-left);
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 12%,
    rgba(176, 186, 200, 0.22) 32%,
    rgba(176, 186, 200, 0.16) 72%,
    transparent 100%
  );
  opacity: 0.72;
  transition: opacity 0.24s var(--ease);
}
.site-header.is-scrolled::before,
.site-header.is-scrolled::after {
  opacity: 0;
}
.site-header::after {
  content: "";
  position: absolute;
  left: var(--layout-cuve-left);
  right: var(--layout-rail-right);
  bottom: calc(var(--layout-header-rail) - 2px);
  height: 1px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.38s var(--ease);
  background: linear-gradient(
    to right,
    rgba(26, 171, 154, 0.38) 0,
    rgba(26, 171, 154, 0.38) calc(var(--layout-cuve-width) - 6px),
    rgba(176, 186, 200, 0.36) calc(var(--layout-cuve-width) - 6px),
    rgba(176, 186, 200, 0.22) 66%,
    rgba(176, 186, 200, 0.08) 86%,
    transparent 100%
  );
}
.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--layout-header-top) + 1px) var(--layout-gutter) calc(var(--layout-header-rail) + 1px);
  min-height: var(--layout-header-h);
}
@media (min-width: 961px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: var(--layout-cuve-width) minmax(0, 1fr);
    column-gap: clamp(20px, 3.6vw, 44px);
    align-items: start;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: calc(var(--layout-cuve-left) - var(--layout-gutter));
  padding-bottom: 0;
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (min-width: 961px) {
  .brand { grid-column: 1; }
}
.brand__mark {
  width: 19px;
  height: 19px;
  border-radius: 2px;
  display: block;
  opacity: 0.86;
  transition: opacity 0.32s var(--ease), filter 0.38s var(--ease);
}
.brand:hover .brand__mark {
  opacity: 0.94;
  filter: drop-shadow(0 0 5px rgba(26, 171, 154, 0.1));
}
.brand__name {
  font-size: 0.72rem;
  line-height: 1;
  color: var(--text-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
  transition: color 0.3s var(--ease), text-shadow 0.35s var(--ease);
}
.brand:hover .brand__name {
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 16px rgba(74, 127, 196, 0.04);
}
.brand__sub {
  margin-left: 2px;
  padding: 2px 5px 1px;
  border: 1px solid rgba(176, 186, 200, 0.28);
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(248, 250, 253, 0.1));
  box-shadow: none;
}

.site-header__right {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 24px);
  margin-left: auto;
  margin-right: calc(var(--layout-rail-right) - var(--layout-gutter));
  padding-left: 0;
  padding-top: 1px;
  border-left: none;
}
@media (min-width: 961px) {
  .site-header__right {
    grid-column: 2;
    justify-content: flex-end;
    margin-left: 0;
    gap: clamp(16px, 2.2vw, 28px);
    padding-right: 2px;
  }
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  padding-right: 0;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(90, 102, 120, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}
@media (min-width: 961px) {
  .site-nav { flex: 0 1 auto; justify-content: flex-end; }
}
.site-nav a { position: relative; transition: color 0.25s var(--ease); }
.site-nav a::before {
  margin-right: 6px;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: rgba(26, 171, 154, 0.5);
}
.site-nav a:nth-of-type(1)::before { content: "01"; }
.site-nav a:nth-of-type(2)::before { content: "02"; }
.site-nav a:nth-of-type(3)::before { content: "03"; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: calc(-1 * var(--layout-header-rail) + 1px);
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.site-nav a:hover { color: var(--text); }
.site-nav a:hover::after { transform: scaleX(1); }

/* ---------- Sélecteur FR / UK — contrôle intégré à la rainure ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  gap: 3px;
  margin-bottom: 0;
  margin-top: 0;
  padding: 2px 7px 3px;
  border: 1px solid rgba(176, 186, 200, 0.26);
  border-bottom-color: rgba(176, 186, 200, 0.2);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
}
.lang-switch::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 5px; height: 5px;
  border-top: 1px solid rgba(26, 171, 154, 0.3);
  border-right: 1px solid rgba(26, 171, 154, 0.3);
  pointer-events: none;
}
.lang-switch::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 5px; height: 5px;
  border-bottom: 1px solid rgba(176, 186, 200, 0.38);
  border-left: 1px solid rgba(176, 186, 200, 0.38);
  pointer-events: none;
}
.lang-switch__btn {
  border: 0;
  margin: 0;
  padding: 1px 2px;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text-mute);
  transition: color 0.25s var(--ease), text-shadow 0.35s var(--ease);
}
.lang-switch__btn:hover { color: var(--text); }
.lang-switch__btn.is-active {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(26, 171, 154, 0.22);
}
.lang-switch__sep {
  color: rgba(18, 26, 40, 0.22);
  font-weight: 400;
  letter-spacing: 0;
}
.lang-switch--floating {
  position: fixed;
  top: clamp(14px, 2.2vh, 20px);
  right: var(--layout-gutter);
  z-index: 60;
  margin-right: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: var(--cyber-track-micro);
  text-transform: uppercase;
  color: var(--text-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(26, 171, 154, 0.35);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ---------- Hero — encastrement dans la cuve du photolayout ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--layout-header-h));
  display: block;
  padding: var(--layout-cuve-top) 0 clamp(56px, 8vh, 80px);
}
.hero__grid {
  display: grid;
  grid-template-columns: var(--layout-cuve-width) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(20px, 3.6vw, 44px);
  row-gap: clamp(28px, 4vh, 48px);
}

/* Bloc principal — emboîté dans la cuve gauche */
.hero__content {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: var(--layout-cuve-width);
  transform: translate(var(--layout-hero-offset-x), var(--layout-hero-offset-y));
  --hero-chamfer: clamp(16px, 2.2vw, 26px);
  --hero-frame-outer: rgba(162, 174, 190, 0.76);
  --hero-frame-inner: rgba(162, 174, 190, 0.58);
  --hero-frame-chamfer: rgba(148, 160, 178, 0.88);
  --hero-frame-chamfer-inner: rgba(148, 160, 178, 0.82);
  --hero-frame-chamfer-line: 1.25px;
  --hero-frame-inner-line: 1.25px;
  --hero-frame-outer-stroke: 1.5px;
  --hero-frame-inner-stroke: 1px;
  min-height: var(--layout-cuve-min-h);
  margin-top: clamp(14px, 1.8vh, 22px);
  margin-left: calc(var(--layout-cuve-left) - var(--layout-gutter));
  padding:
    var(--layout-panel-inset)
    clamp(22px, 2.8vw, 32px)
    clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  background:
    linear-gradient(to right, transparent, rgba(255, 255, 255, 0.75) 42%, transparent),
    var(--module-fill-anchors),
    var(--module-fill-base);
  background-size:
    calc(100% - 2 * var(--hero-chamfer) - 16px) 1px,
    auto,
    auto;
  background-repeat: no-repeat, repeat, repeat;
  background-position:
    50% calc(var(--layout-panel-inset) * 0.35 + 6px),
    0 0,
    0 0;
  clip-path: polygon(
    var(--hero-chamfer) 0,
    calc(100% - var(--hero-chamfer)) 0,
    100% var(--hero-chamfer),
    100% calc(100% - var(--hero-chamfer)),
    calc(100% - var(--hero-chamfer)) 100%,
    var(--hero-chamfer) 100%,
    0 calc(100% - var(--hero-chamfer)),
    0 var(--hero-chamfer)
  );
  box-shadow:
    var(--seat-inset-top),
    var(--seat-inset-bottom),
    inset 2px 0 6px rgba(18, 26, 40, 0.028),
    inset -2px 0 6px rgba(18, 26, 40, 0.022),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    var(--seat-inset-lip),
    var(--seat-outer),
    0 9px 0 -8px rgba(176, 186, 200, 0.52),
    0 14px 0 -13px rgba(255, 255, 255, 0.62);
}
/* Grand cadre ASH — double contour biseauté fermé (masque SVG evenodd) */
.hero__content.module::before {
  inset: 0;
  border: none;
  box-shadow: none;
  clip-path: none;
  padding: 0;
  background-color: var(--hero-frame-chamfer);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M4.44,0 L95.56,0 L100,4.17 L100,95.83 L95.56,100 L4.44,100 L0,95.83 L0,4.17 Z M4.77,1.5 L95.23,1.5 L98.5,4.48 L98.5,95.52 L95.23,98.5 L4.77,98.5 L1.5,95.52 L1.5,4.48 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M4.44,0 L95.56,0 L100,4.17 L100,95.83 L95.56,100 L4.44,100 L0,95.83 L0,4.17 Z M4.77,1.5 L95.23,1.5 L98.5,4.48 L98.5,95.52 L95.23,98.5 L4.77,98.5 L1.5,95.52 L1.5,4.48 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero__content.module::after {
  inset: var(--module-frame-gap);
  top: var(--module-frame-gap);
  right: var(--module-frame-gap);
  bottom: var(--module-frame-gap);
  left: var(--module-frame-gap);
  width: auto;
  height: auto;
  opacity: 1;
  --hero-chamfer-inner: max(0px, calc(var(--hero-chamfer) - var(--module-frame-gap)));
  clip-path: none;
  padding: 0;
  background-color: var(--hero-frame-chamfer-inner);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.41,0 L96.59,0 L100,3.19 L100,96.81 L96.59,100 L3.41,100 L0,96.81 L0,3.19 Z M3.69,1.25 L96.31,1.25 L98.75,3.46 L98.75,96.54 L96.31,98.75 L3.69,98.75 L1.25,96.54 L1.25,3.46 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.41,0 L96.59,0 L100,3.19 L100,96.81 L96.59,100 L3.41,100 L0,96.81 L0,3.19 Z M3.69,1.25 L96.31,1.25 L98.75,3.46 L98.75,96.54 L96.31,98.75 L3.69,98.75 L1.25,96.54 L1.25,3.46 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero__content .eyebrow { margin-top: 2px; }
/* CTA — barre de commande intégrée à la base du panneau */
.hero__content .cue {
  margin-top: auto;
  align-self: stretch;
  justify-content: space-between;
  margin-left: 0;
  box-shadow:
    inset 0 2px 4px rgba(18, 26, 40, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 3px rgba(18, 26, 40, 0.035),
    0 1px 0 rgba(255, 255, 255, 0.5);
}
.hero__content .cue:hover {
  transform: none;
  box-shadow:
    inset 0 2px 4px rgba(18, 26, 40, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 20px -12px rgba(26, 171, 154, 0.14);
}

.hero__mark {
  margin-top: clamp(14px, 2vh, 20px);
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  font-size: clamp(3.2rem, 10.5vw, 8.6rem);
  font-weight: 700;
  letter-spacing: var(--cyber-track-tight);
  line-height: 0.88;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__num-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  margin-top: -0.02em;
  padding-right: 2px;
}
.hero__ash {
  width: 100%;
  position: relative;
  background-image:
    linear-gradient(
      100deg,
      transparent 36%,
      rgba(180, 200, 220, 0.28) 46%,
      rgba(255, 255, 255, 0.42) 50%,
      rgba(180, 200, 220, 0.22) 54%,
      transparent 64%
    ),
    linear-gradient(
      172deg,
      #141c2a 0%,
      #1e2a3c 18%,
      #344860 36%,
      #243244 52%,
      #1a2838 72%,
      #141c2a 100%
    );
  background-size: 220% 100%, 100% 280%;
  background-position: -80% 0%, 50% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 28px rgba(74, 127, 196, 0.08));
  animation: ash-fx 28s ease-in-out infinite alternate;
}
.hero__ash .encoded-accent {
  -webkit-text-fill-color: transparent;
  background-image: inherit;
  -webkit-background-clip: text;
          background-clip: text;
}
@keyframes ash-fx {
  0%   { background-position: -100% 0%, 50% 0%; }
  45%  { background-position: 140% 0%, 50% 45%; }
  100% { background-position: -100% 0%, 50% 100%; }
}
.hero__num {
  color: rgba(20, 28, 42, 0.04);
  -webkit-text-stroke: 2px rgba(68, 80, 94, 0.58);
  letter-spacing: 0.04em;
  font-stretch: 82%;
  line-height: 0.92;
  flex: 0 1 auto;
}
@supports not (-webkit-text-stroke: 1px #fff) {
  .hero__num { color: var(--text-soft); }
}
/* Labs — plaque calée sur l’axe de 2501 */
.hero__labs {
  margin-left: clamp(10px, 1.6vw, 15px);
  margin-bottom: 0.16em;
  padding: 4px 10px 3px 12px;
  border: 1px solid rgba(170, 180, 194, 0.64);
  border-bottom-color: rgba(160, 170, 184, 0.7);
  background-image:
    radial-gradient(circle at 4px 50%, rgba(18, 26, 40, 0.14) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at calc(100% - 4px) 50%, rgba(18, 26, 40, 0.14) 0 0.8px, transparent 1.3px),
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 253, 0.52));
  background-size: 100% 100%, 100% 100%, 220% 100%, 100% 100%;
  background-position: 0 0, 0 0, -120% 0, 0 0;
  font-family: var(--mono);
  font-size: clamp(0.56rem, 0.95vw, 0.66rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-soft);
  transform: none;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  align-self: flex-end;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 3px rgba(18, 26, 40, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 4px -3px rgba(18, 26, 40, 0.1);
  animation: labs-sheen 20s ease-in-out infinite;
  transition:
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    color 0.35s var(--ease);
}
.hero__num-row::after {
  content: "";
  flex: 1 1 auto;
  align-self: flex-end;
  height: 1px;
  margin-left: clamp(8px, 1.4vw, 14px);
  margin-bottom: 0.42em;
  background: linear-gradient(to right, rgba(176, 186, 200, 0.38), transparent 88%);
  pointer-events: none;
}
@keyframes labs-sheen {
  0%, 70%  { background-position: 0 0, 0 0, -120% 0, 0 0; }
  100%     { background-position: 0 0, 0 0, 180% 0, 0 0; }
}
.hero__labs::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 5px; height: 5px;
  border-top: 1px solid rgba(26, 171, 154, 0.4);
  border-left: 1px solid rgba(26, 171, 154, 0.4);
  transition: border-color 0.35s var(--ease);
  z-index: 1;
}
.hero__labs::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9) 50%, transparent);
  pointer-events: none;
}
.hero__content:hover .hero__labs,
.hero__mark:hover .hero__labs {
  border-color: rgba(26, 171, 154, 0.32);
  color: var(--text-mute);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 14px -6px rgba(26, 171, 154, 0.12);
}

.hero__phrase {
  margin-top: clamp(20px, 2.8vh, 26px);
  max-width: 34ch;
  font-size: clamp(0.98rem, 1.7vw, 1.12rem);
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.62;
  letter-spacing: 0.015em;
  text-transform: none;
  padding-left: 2px;
}
.hero__phrase::before {
  content: "";
  display: block;
  width: clamp(36px, 8vw, 52px);
  height: 1px;
  margin-bottom: clamp(14px, 2vh, 18px);
  background: linear-gradient(to right, rgba(26, 171, 154, 0.55), rgba(176, 186, 200, 0.35) 70%, transparent);
}

/* CTA — plaque aluminium */
.cue {
  position: relative;
  margin-top: clamp(24px, 3vh, 32px);
  margin-left: 1px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 12px;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 253, 0.82));
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--cyber-track-micro);
  text-transform: uppercase;
  color: var(--text);
  box-shadow: var(--panel-glow), 0 8px 24px -16px rgba(18, 26, 40, 0.12);
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background 0.3s var(--ease),
    box-shadow 0.4s var(--ease),
    transform 0.35s var(--ease);
}
.cue::before,
.cue::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  transition: border-color 0.3s var(--ease);
}
.cue::before {
  top: -1px; left: -1px;
  border-top: 1px solid rgba(26, 171, 154, 0.5);
  border-left: 1px solid rgba(26, 171, 154, 0.5);
}
.cue::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid rgba(26, 171, 154, 0.5);
  border-right: 1px solid rgba(26, 171, 154, 0.5);
}
.cue__label { position: relative; }
.cue__arrow {
  width: 14px; height: 14px;
  color: var(--accent);
  animation: cue-drop 2.8s var(--ease) infinite;
}
.cue:hover {
  border-color: rgba(26, 171, 154, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(242, 245, 248, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 14px 36px -18px rgba(18, 26, 40, 0.14),
    0 0 24px -14px rgba(26, 171, 154, 0.1);
  transform: translateY(-1px);
}
.cue:focus-visible {
  outline: 1.5px solid rgba(26, 171, 154, 0.55);
  outline-offset: 5px;
  box-shadow:
    var(--panel-glow),
    0 0 0 3px rgba(26, 171, 154, 0.1);
}
@keyframes cue-drop {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%      { transform: translateY(3px); opacity: 0.5; }
}

/* Plaque secondaire — encastrée dans sous-panneau droit du photolayout */
@media (min-width: 961px) {
  .hero__grid { position: relative; }
  .hero__plaque {
    position: absolute;
    top: calc(clamp(14px, 1.8vh, 22px) + var(--layout-cuve-min-h) / 2);
    left: var(--layout-plaque-left);
    z-index: 1;
    margin: 0;
    transform: translate(var(--layout-plaque-offset-x), calc(-50% + var(--layout-plaque-offset-y)));
  }
  /* Pattes de fixation — relient la plaque à la structure droite */
  .hero__plaque-bar::before,
  .hero__plaque-bar::after {
    content: "";
    position: absolute;
    left: calc(var(--layout-plaque-width) - 9px);
    width: clamp(16px, 2.4vw, 38px);
    height: 1px;
    background: linear-gradient(to right, rgba(176, 186, 200, 0.5), rgba(176, 186, 200, 0.18));
    pointer-events: none;
  }
  .hero__plaque-bar::before { top: 2px; }
  .hero__plaque-bar::after  { bottom: 2px; }
}
.hero__plaque {
  --plaque-chamfer: clamp(7px, 0.85vw, 11px);
  --plaque-frame-outer-stroke: 1px;
  --plaque-frame-inner-stroke: 1px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: var(--layout-plaque-width);
  padding: 14px 14px 13px 15px;
  border: none;
  background:
    var(--module-fill-anchors),
    var(--module-fill-base);
  clip-path: polygon(
    var(--plaque-chamfer) 0,
    calc(100% - var(--plaque-chamfer)) 0,
    100% var(--plaque-chamfer),
    100% calc(100% - var(--plaque-chamfer)),
    calc(100% - var(--plaque-chamfer)) 100%,
    var(--plaque-chamfer) 100%,
    0 calc(100% - var(--plaque-chamfer)),
    0 var(--plaque-chamfer)
  );
  backdrop-filter: blur(11px) saturate(110%);
  -webkit-backdrop-filter: blur(11px) saturate(110%);
  box-shadow:
    inset 0 4px 10px rgba(18, 26, 40, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -3px 8px rgba(18, 26, 40, 0.055),
    inset 2px 0 6px rgba(18, 26, 40, 0.028),
    inset -1px 0 4px rgba(18, 26, 40, 0.02),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px -14px rgba(18, 26, 40, 0.1);
}
.hero__plaque.module--ghost {
  background:
    var(--module-fill-anchors),
    var(--module-fill-base);
}
/* Petit cadre SYSTÈME SILENCIEUX — double contour biseauté fermé (masque SVG evenodd) */
.hero__plaque.module::before {
  inset: 0;
  border: none;
  box-shadow: none;
  clip-path: none;
  padding: 0;
  background-color: rgba(162, 174, 190, 0.76);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.92,0 L94.08,0 L100,10.47 L100,89.53 L94.08,100 L5.92,100 L0,89.53 L0,10.47 Z M6.58,1.25 L93.42,1.25 L98.75,11.72 L98.75,88.28 L93.42,98.75 L6.58,98.75 L1.25,88.28 L1.25,11.72 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.92,0 L94.08,0 L100,10.47 L100,89.53 L94.08,100 L5.92,100 L0,89.53 L0,10.47 Z M6.58,1.25 L93.42,1.25 L98.75,11.72 L98.75,88.28 L93.42,98.75 L6.58,98.75 L1.25,88.28 L1.25,11.72 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero__plaque.module::after {
  inset: var(--module-frame-gap);
  top: var(--module-frame-gap);
  right: var(--module-frame-gap);
  bottom: var(--module-frame-gap);
  left: var(--module-frame-gap);
  width: auto;
  height: auto;
  opacity: 1;
  --plaque-chamfer-inner: max(0px, calc(var(--plaque-chamfer) - var(--module-frame-gap)));
  clip-path: none;
  padding: 0;
  background-color: rgba(148, 160, 178, 0.82);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2.82,0 L97.18,0 L100,5.26 L100,94.74 L97.18,100 L2.82,100 L0,94.74 L0,5.26 Z M3.52,1 L96.48,1 L99,6.58 L99,93.42 L96.48,99 L3.52,99 L1,93.42 L1,6.58 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2.82,0 L97.18,0 L100,5.26 L100,94.74 L97.18,100 L2.82,100 L0,94.74 L0,5.26 Z M3.52,1 L96.48,1 L99,6.58 L99,93.42 L96.48,99 L3.52,99 L1,93.42 L1,6.58 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero__plaque-bar {
  position: absolute;
  left: 8px;
  top: 11px;
  bottom: 11px;
  width: 1px;
  height: auto;
  margin: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 171, 154, 0.52) 0%,
    rgba(26, 171, 154, 0.32) 38%,
    rgba(176, 186, 200, 0.24) 72%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(26, 171, 154, 0.08);
}
.hero__plaque-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.hero__plaque-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px 1px rgba(26, 171, 154, 0.28);
  flex-shrink: 0;
}
.hero__plaque-ref {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
  opacity: 0.82;
  padding-left: 10px;
}

/* Ligne de coordonnées sous le hero */
.hero__meta {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: clamp(6px, 1.2vh, 12px);
  margin-left: calc(var(--layout-cuve-left) - var(--layout-gutter));
  margin-right: calc(var(--layout-rail-right) - var(--layout-gutter));
  padding: 10px 2px 0;
  border-top: 1px solid rgba(170, 180, 194, 0.34);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: var(--cyber-track-micro);
  text-transform: uppercase;
  color: rgba(90, 102, 120, 0.8);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.hero__meta > span:last-child { opacity: 0.68; }
.hero__meta::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 84px; height: 1px;
  background: linear-gradient(to right, rgba(26, 171, 154, 0.46), rgba(26, 171, 154, 0.12) 72%, transparent);
  box-shadow: 0 0 4px rgba(26, 171, 154, 0.1);
}
.hero__meta::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(to right, rgba(176, 186, 200, 0.22) 0 1px, transparent 1px 92px);
  opacity: 0.85;
}

/* ---------- Sections ---------- */
.sec { padding: calc(var(--space-section) / 2.2) 0; }
.sec--contact { padding-bottom: calc(var(--space-section) * 0.88); }

.sec__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(26px, 3.8vw, 40px);
}
/* Trace technique après le titre — détail circuit discret */
.sec__head::after {
  content: "";
  flex: 1;
  align-self: center;
  height: 1px;
  margin-left: 10px;
  background:
    radial-gradient(circle 2px at 2px 50%, rgba(26, 171, 154, 0.35) 0 1.6px, transparent 2px),
    linear-gradient(to right, var(--border-2), transparent 70%);
}
/* Numéro — cartouche système */
.sec__num {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  padding: 4px 8px 3px 10px;
  border: 1px solid rgba(176, 186, 200, 0.42);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(248, 250, 253, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
.sec__num::before { content: "[\00a0"; opacity: 0.38; font-weight: 400; }
.sec__num::after  { content: "\00a0]"; opacity: 0.38; font-weight: 400; }
/* Titre — registre display carré */
.sec__title {
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  font-size: clamp(1.02rem, 2.1vw, 1.42rem);
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 22px rgba(74, 127, 196, 0.03);
}

/* ---------- Registre (listes éditoriales) ---------- */
.ledger {
  position: relative;
  padding: 0 clamp(10px, 1.6vw, 18px);
  border: 1px solid var(--module-frame-outer);
  background:
    var(--module-fill-anchors),
    linear-gradient(168deg, rgba(255, 255, 255, 0.44) 0%, rgba(248, 250, 253, 0.24) 52%, rgba(240, 238, 234, 0.16) 100%);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(18, 26, 40, 0.03),
    0 14px 36px -28px rgba(18, 26, 40, 0.12);
  transition: box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.ledger::before,
.ledger::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 10px; height: 10px;
  pointer-events: none;
}
.ledger::before {
  left: 0;
  border-top: 1px solid rgba(26, 171, 154, 0.28);
  border-left: 1px solid rgba(26, 171, 154, 0.28);
}
.ledger::after {
  right: 0;
  border-top: 1px solid rgba(176, 186, 200, 0.34);
  border-right: 1px solid rgba(176, 186, 200, 0.34);
}
.ledger > .ledger__row:first-child { border-top: 1px solid rgba(176, 186, 200, 0.14); }
.ledger:hover {
  border-color: rgba(176, 186, 200, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 18px 42px -32px rgba(18, 26, 40, 0.14);
}
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: clamp(20px, 2.8vw, 30px) 6px;
  border-bottom: 1px solid rgba(176, 186, 200, 0.28);
  transition:
    padding-left 0.4s var(--ease-out),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
.ledger__row::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  transition: width 0.5s var(--ease-out);
}
/* Voile de surface au survol — sensation de matière */
.ledger__row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(26, 171, 154, 0.03), transparent 55%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.ledger__row:hover { padding-left: 18px; border-bottom-color: var(--border-2); }
.ledger__row:hover::before { width: 38%; }
.ledger__row:hover::after { opacity: 1; }

.ledger__idx {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(26, 171, 154, 0.62);
  transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}
.ledger__row:hover .ledger__idx {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(26, 171, 154, 0.15);
}
.ledger__name {
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  font-size: clamp(0.92rem, 1.85vw, 1.22rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}
/* Noms projets — archive premium + micro-sheen */
.ledger--projects .ledger__name {
  position: relative;
  display: inline-block;
  transition: color 0.35s var(--ease), letter-spacing 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
.ledger--projects .ledger__name::before {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 0; height: 1px;
  background: linear-gradient(to right, rgba(26, 171, 154, 0.5), rgba(74, 127, 196, 0.2) 80%, transparent);
  transition: width 0.5s var(--ease-out);
}
.ledger--projects .ledger__name::after {
  content: "";
  position: absolute;
  left: -11px; top: 0.55em;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.5);
  box-shadow: 0 0 5px rgba(26, 171, 154, 0.3);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.ledger--projects .ledger__row:hover .ledger__name {
  color: #0f1724;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 24px rgba(74, 127, 196, 0.06);
}
.ledger--projects .ledger__row:hover .ledger__name::before { width: 100%; }
.ledger--projects .ledger__row:hover .ledger__name::after {
  opacity: 0.65;
  transform: scale(1);
}
.ledger__frag {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-mute);
  text-align: right;
  max-width: 36ch;
  line-height: 1.58;
  letter-spacing: 0.02em;
}

/* Variante projets / archive */
.ledger--projects .ledger__row {
  grid-template-columns: 48px minmax(0, 0.78fr) minmax(0, 1fr) auto;
}
.ledger__desc {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1.58;
  max-width: 38ch;
  letter-spacing: 0.015em;
}
.ledger__tag {
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
  padding: 3px 8px 2px;
  border: 1px solid rgba(176, 186, 200, 0.34);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  position: relative;
}
.ledger__tag::before {
  content: "[\00a0";
  opacity: 0.38;
  letter-spacing: 0;
  font-weight: 400;
}
.ledger__tag::after {
  content: "\00a0]";
  opacity: 0.38;
  letter-spacing: 0;
  font-weight: 400;
}
.ledger__tag--blue   { color: var(--accent-2); border-color: rgba(74, 127, 196, 0.2); background: rgba(74, 127, 196, 0.04); }
.ledger__tag--violet { color: var(--accent-3); border-color: rgba(122, 104, 176, 0.2); background: rgba(122, 104, 176, 0.04); }

/* ---------- Méthode / manifeste ---------- */
.sec--methode { padding: calc(var(--space-section) / 1.7) 0; }
.sec--methode .container { text-align: center; }
.sec--methode .sec__head { justify-content: center; }
.sec--methode .sec__head::before {
  content: "";
  flex: 1;
  align-self: center;
  height: 1px;
  margin-right: 8px;
  background: linear-gradient(to left, var(--border-2), transparent 70%);
}
.motto {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(18px, 3.2vw, 40px);
  border: 1px solid var(--module-frame-outer);
  background:
    var(--module-fill-anchors),
    radial-gradient(70% 100% at 50% 0%, rgba(26, 171, 154, 0.025), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(248, 250, 253, 0.22) 62%);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 16px 40px -30px rgba(18, 26, 40, 0.14);
}
.motto::before,
.motto::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
}
.motto::before { top: -1px;    left: -1px;  border-top: 1px solid rgba(26, 171, 154, 0.26); border-left: 1px solid rgba(26, 171, 154, 0.26); }
.motto::after  { bottom: -1px; right: -1px; border-bottom: 1px solid rgba(176, 186, 200, 0.32); border-right: 1px solid rgba(176, 186, 200, 0.32); }
.motto__line {
  font-family: var(--font-display);
  font-stretch: 92%;
  font-size: clamp(1.22rem, 3.2vw, 1.92rem);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.16;
  text-transform: none;
  color: var(--text-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 28px rgba(74, 127, 196, 0.04);
}
.motto__sub {
  margin-top: 16px;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0.03em;
  line-height: 1.62;
  text-transform: none;
}
.motto__pillars {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(176, 186, 200, 0.24);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: var(--cyber-track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.motto__pillars span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.motto__pillars span::before {
  content: "·";
  width: auto;
  height: auto;
  background: none;
  font-weight: 400;
  color: rgba(26, 171, 154, 0.55);
  opacity: 1;
}

/* ---------- Contact / transmission ---------- */
.transmission {
  position: relative;
  border: 1px solid var(--module-frame-outer);
  background:
    var(--module-fill-anchors),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(248, 250, 253, 0.2));
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 14px 36px -28px rgba(18, 26, 40, 0.12);
  padding: clamp(28px, 4.8vw, 52px) clamp(16px, 2.4vw, 26px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.transmission::before,
.transmission::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
.transmission::before { top: -1px;    left: 0;  border-top: 1px solid rgba(26, 171, 154, 0.32); border-left: 1px solid rgba(26, 171, 154, 0.32); }
.transmission::after  { bottom: -1px; right: 0; border-bottom: 1px solid rgba(26, 171, 154, 0.32); border-right: 1px solid rgba(26, 171, 154, 0.32); }
.transmission__q {
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  font-size: clamp(1.08rem, 2.8vw, 1.72rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.12;
  text-transform: none;
  color: var(--text-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.transmission__link {
  position: relative;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--cyber-track-label);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 6px;
  transition: color 0.3s var(--ease), letter-spacing 0.35s var(--ease);
}
.transmission__link:hover {
  letter-spacing: 0.26em;
  text-shadow: 0 0 14px rgba(26, 171, 154, 0.14);
}
.transmission__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.45;
  transition: opacity 0.3s var(--ease);
}
.transmission__link:hover::after { opacity: 1; }
.transmission__mark { display: inline-block; transition: transform 0.3s var(--ease); }
.transmission__link:hover .transmission__mark { transform: translate(3px, -3px); }

/* ---------- Pied de page ---------- */
.site-footer {
  position: relative;
  padding: 24px 0 36px;
  border-top: none;
}
/* Ligne technique basse — répond à la topbar */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--layout-cuve-left);
  right: var(--layout-rail-right);
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(26, 171, 154, 0.38) 0,
    rgba(26, 171, 154, 0.38) 84px,
    rgba(170, 180, 194, 0.28) 84px,
    rgba(176, 186, 200, 0.14) 72%,
    transparent 100%
  );
}
/* Graduations discrètes sous la ligne de coupe */
.site-footer::after {
  content: "";
  position: absolute;
  top: 1px;
  left: var(--layout-cuve-left);
  right: var(--layout-rail-right);
  height: 3px;
  background: repeating-linear-gradient(to right, rgba(176, 186, 200, 0.18) 0 1px, transparent 1px 92px);
  opacity: 0.8;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-left: calc(var(--layout-cuve-left) - var(--layout-gutter));
  margin-right: calc(var(--layout-rail-right) - var(--layout-gutter));
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: var(--cyber-track-micro);
  color: rgba(90, 102, 120, 0.74);
}
.site-footer__cell--mid { opacity: 0.58; }
.site-footer__cell:last-child { opacity: 0.64; }

/* ---------- Page 404 ---------- */
.error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.error-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  text-align: center;
  padding: clamp(40px, 6vw, 64px) 36px;
  border: 1px solid var(--panel-edge);
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(26, 171, 154, 0.03), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 253, 0.78));
  outline: 1px solid var(--panel-inner);
  outline-offset: 6px;
  box-shadow: var(--panel-glow), var(--panel-shadow);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}
.error-card::before,
.error-card::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
}
.error-card::before { top: -1px;    left: -1px;  border-top: 1px solid rgba(26, 171, 154, 0.4); border-left: 1px solid rgba(26, 171, 154, 0.4); }
.error-card::after  { bottom: -1px; right: -1px; border-bottom: 1px solid rgba(26, 171, 154, 0.4); border-right: 1px solid rgba(26, 171, 154, 0.4); }
.error-card .brand { justify-content: center; }
.error-code {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: clamp(3.4rem, 12vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #141c2a 0%, #44505e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-stretch: var(--cyber-stretch);
  font-size: clamp(1.25rem, 3.2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.error-text { margin: 12px auto 28px; max-width: 38ch; color: var(--text-soft); }

/* Bouton (404) — discret, filaire */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  border: 1px solid rgba(26, 171, 154, 0.28);
  color: var(--accent);
  background: var(--surface-2);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-sm);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:hover { background: rgba(26, 171, 154, 0.05); border-color: rgba(26, 171, 154, 0.45); box-shadow: var(--shadow-md); }
.btn__arrow { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.hero__content,
.hero__plaque { position: relative; }

/* ---------- Apparition au scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition:
    opacity 1.15s var(--ease-out),
    transform 1.15s var(--ease-out),
    filter 1s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* ---------- Responsive ---------- */
@media (min-width: 1400px) {
  :root {
    --layout-cuve-left: 4.4vw;
    --layout-cuve-width: 38.5vw;
    --layout-rail-right: 2.4vw;
    --layout-plaque-right: 2.1vw;
  }
}

@media (max-width: 960px) {
  :root {
    --layout-cuve-left: 0px;
    --layout-cuve-width: 100%;
    --layout-cuve-top: 14px;
    --layout-cuve-min-h: auto;
    --layout-plaque-top: 0px;
    --layout-plaque-right: 0px;
    --layout-rail-right: 0px;
    --layout-nav-gap: 16px;
  }
  .bg-decor {
    background-position: var(--bg-pos-mobile);
    background-attachment: scroll;
  }
  .site-header::before,
  .site-header::after { display: none; }
  .site-header__right {
    border-left: 0;
    padding-left: 0;
    margin-right: 0;
  }
  .lang-switch {
    align-self: flex-start;
    margin-bottom: 0;
    border-radius: 0;
  }
  .hero { min-height: auto; padding-bottom: 48px; }
  .hero__grid { grid-template-columns: 1fr; row-gap: 18px; }
  .hero__content {
    transform: none;
    margin-left: 0;
    margin-top: 0;
    max-width: none;
    min-height: auto;
    display: block;
    padding: clamp(24px, 5vw, 32px);
  }
  .hero__content .cue {
    margin-top: clamp(24px, 3vh, 32px);
    width: 100%;
  }
  .hero__plaque {
    position: static;
    transform: none;
    grid-column: 1;
    justify-self: start;
    width: auto;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 0;
    margin-right: 0;
    padding: 13px 16px 12px 14px;
    outline-offset: -4px;
  }
  .hero__plaque-bar {
    position: static;
    width: 28px;
    height: 1px;
    top: auto;
    bottom: auto;
    left: auto;
    box-shadow: none;
    background: linear-gradient(to right, rgba(26, 171, 154, 0.45), rgba(176, 186, 200, 0.32) 70%, transparent);
  }
  .hero__plaque-status,
  .hero__plaque-ref { padding-left: 0; }
  .hero__meta {
    margin-left: 0;
    margin-right: 0;
    margin-top: 18px;
  }
  .site-footer::before,
  .site-footer::after { left: 0; right: 0; }
  .site-footer__inner {
    margin-left: 0;
    margin-right: 0;
  }
  .hero__num-row::after { display: none; }
  .brand { margin-left: 0; }
  .ledger__row { grid-template-columns: 40px minmax(0, 1fr); }
  .ledger__frag { grid-column: 2; text-align: left; margin-top: 6px; }
  .ledger--projects .ledger__row { grid-template-columns: 40px minmax(0, 1fr); }
  .ledger__desc { grid-column: 2; }
  .ledger__tag { grid-column: 2; justify-self: start; margin-top: 4px; }
  .transmission { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .bg-coords { display: none; }
}

@media (max-width: 620px) {
  .site-nav { gap: 12px; font-size: 0.6rem; }
  .site-nav a:not([href="#contact"]) { display: none; }
  .lang-switch { padding: 3px 7px 3px; gap: 3px; }
  .site-header__right { gap: 0; }
  .hero__labs { margin-left: 8px; }
  .hero__meta-mid { display: none; }
}

/* =====================================================================
   Passe « pièce d'exposition » — chorégraphie de scroll & FX premium
   + passe finale polish — mystère, matière, lignes techniques
   Sobres, GPU-friendly, neutralisés sous prefers-reduced-motion (bas).
   ===================================================================== */

/* Titres de section — micro-reflet à l'apparition */
.js .sec__head.reveal.is-visible .sec__title {
  animation: title-glint 1.4s var(--ease-out) 0.12s 1;
}
@keyframes title-glint {
  from { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), -24px 0 18px rgba(74, 127, 196, 0.08); }
  to   { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 22px rgba(74, 127, 196, 0.03); }
}

/* Plaques — grain céramique ultra discret */
.ledger,
.motto,
.transmission,
.hero__content,
.hero__plaque {
  background-blend-mode: normal, soft-light, normal;
}

/* Jauge de défilement — charge l'arête haute du cadre viewport.
   Pilotée par --scroll-progress (0→1) depuis script.js. */
.viewport-frame::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  background: linear-gradient(
    to right,
    rgba(26, 171, 154, 0.52) 0%,
    rgba(26, 171, 154, 0.40) 44%,
    rgba(74, 127, 196, 0.34) 100%
  );
  box-shadow: 0 0 8px rgba(26, 171, 154, 0.14);
  opacity: 0.92;
  pointer-events: none;
}

/* Révélation chorégraphiée des lignes de registre (JS requis).
   Animation (et non transition) pour ne pas écraser le hover des lignes. */
.js .ledger.reveal .ledger__row { opacity: 0; }
.js .ledger.reveal.is-visible .ledger__row { animation: row-rise 0.72s var(--ease-out) both; }
.js .ledger.reveal.is-visible .ledger__row:nth-child(1) { animation-delay: 0.06s; }
.js .ledger.reveal.is-visible .ledger__row:nth-child(2) { animation-delay: 0.14s; }
.js .ledger.reveal.is-visible .ledger__row:nth-child(3) { animation-delay: 0.22s; }
.js .ledger.reveal.is-visible .ledger__row:nth-child(4) { animation-delay: 0.30s; }
@keyframes row-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Révélation chorégraphiée des piliers méthode (JS requis) */
.js .motto.reveal .motto__pillars span { opacity: 0; }
.js .motto.reveal.is-visible .motto__pillars span { animation: pill-rise 0.6s var(--ease-out) both; }
.js .motto.reveal.is-visible .motto__pillars span:nth-child(1) { animation-delay: 0.10s; }
.js .motto.reveal.is-visible .motto__pillars span:nth-child(2) { animation-delay: 0.18s; }
.js .motto.reveal.is-visible .motto__pillars span:nth-child(3) { animation-delay: 0.26s; }
.js .motto.reveal.is-visible .motto__pillars span:nth-child(4) { animation-delay: 0.34s; }
.js .motto.reveal.is-visible .motto__pillars span:nth-child(5) { animation-delay: 0.42s; }
@keyframes pill-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Noms de projets — traitement « plaque imprimée » + balayage lent au survol */
.ledger--projects .ledger__name {
  color: #2b394d;
  background-image:
    linear-gradient(
      100deg,
      transparent 40%,
      rgba(255, 255, 255, 0.55) 48%,
      rgba(180, 200, 220, 0.30) 52%,
      transparent 60%
    ),
    linear-gradient(176deg, #232f40 0%, #36496a 52%, #1f2a39 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: 200% 0, 50% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ledger--projects .ledger__name {
    color: var(--text-soft);
    -webkit-text-fill-color: currentColor;
  }
}
.ledger--projects .ledger__row:hover .ledger__name {
  text-shadow: none;
  animation: name-sheen 0.95s var(--ease);
}
@keyframes name-sheen {
  from { background-position: 200% 0, 50% 0; }
  to   { background-position: -120% 0, 50% 0; }
}

/* Projets masqués — flou fort, nom seul */
.ledger--projects .project-name--veiled .project-name__veiled-text {
  position: relative;
  display: inline-block;
  isolation: isolate;
  letter-spacing: 0.16em;
  transform: scaleX(1.08);
  transform-origin: left center;
  color: #2b394d;
  background-image:
    linear-gradient(
      100deg,
      transparent 36%,
      rgba(255, 255, 255, 0.42) 46%,
      rgba(180, 200, 220, 0.22) 54%,
      transparent 64%
    ),
    linear-gradient(176deg, #232f40 0%, #36496a 52%, #1f2a39 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 200% 0, 50% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(8px) contrast(0.74) saturate(0.55);
  opacity: 0.38;
  animation: veil-breathe 6.2s ease-in-out infinite, veil-sheen 11s ease-in-out infinite;
}
.ledger--projects .project-name--veiled .project-name__veiled-text::after {
  content: "";
  position: absolute;
  inset: -4px -8px;
  background:
    linear-gradient(
      108deg,
      transparent 40%,
      rgba(176, 186, 200, 0.26) 47%,
      rgba(240, 238, 234, 0.44) 50%,
      rgba(176, 186, 200, 0.26) 53%,
      transparent 60%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      rgba(176, 186, 200, 0.07) 3px,
      rgba(176, 186, 200, 0.07) 4px
    );
  background-size: 240% 100%, 100% 100%;
  background-position: 190% 0, 0 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.62;
  animation: veil-interference 5.4s ease-in-out infinite;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ledger--projects .project-name--veiled .project-name__veiled-text {
    color: var(--text-mute);
    -webkit-text-fill-color: currentColor;
    filter: blur(6.5px) contrast(0.75);
    opacity: 0.42;
  }
}
.ledger--projects .ledger__row:hover .project-name--veiled {
  animation: none;
}
.ledger--projects .ledger__row:hover .project-name--veiled .project-name__veiled-text {
  filter: blur(7.5px) contrast(0.74) saturate(0.58);
  opacity: 0.4;
  transform: scaleX(1.1);
  letter-spacing: 0.18em;
}
.ledger--projects .ledger__row:hover .project-name--veiled .project-name__veiled-text::after {
  animation: none;
  opacity: 0.7;
}
@keyframes veil-breathe {
  0%, 100% {
    filter: blur(7.5px) contrast(0.76) saturate(0.58);
    opacity: 0.4;
    letter-spacing: 0.14em;
    transform: scaleX(1.06) translateX(0);
  }
  50% {
    filter: blur(9.5px) contrast(0.68) saturate(0.48);
    opacity: 0.28;
    letter-spacing: 0.2em;
    transform: scaleX(1.12) translateX(0.6px);
  }
}
@keyframes veil-sheen {
  0%, 76%, 100% { background-position: 200% 0, 50% 0; }
  88%           { background-position: -120% 0, 50% 0; }
}
@keyframes veil-interference {
  0%, 72%, 100% { background-position: 190% 0, 0 0; opacity: 0.55; }
  84%           { background-position: -70% 0, 0 0; opacity: 0.78; }
}

/* LyberTools — indicateur actif */
.project-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 0.55em;
  vertical-align: 0.14em;
  font-family: var(--mono);
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.9;
  -webkit-text-fill-color: currentColor;
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
}
.project-status__dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px rgba(26, 171, 154, 0.42), 0 0 14px rgba(26, 171, 154, 0.14);
  animation: status-pulse 2.8s ease-in-out infinite;
}
.project-status__label {
  font-size: inherit;
  letter-spacing: inherit;
}
@keyframes status-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 5px rgba(26, 171, 154, 0.42), 0 0 14px rgba(26, 171, 154, 0.14);
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    box-shadow: 0 0 8px rgba(26, 171, 154, 0.55), 0 0 18px rgba(26, 171, 154, 0.22);
    transform: scale(0.9);
  }
}

/* Index de section — scan ultra subtil à l'apparition (JS requis) */
.sec__num {
  background-image:
    linear-gradient(100deg, transparent 42%, rgba(26, 171, 154, 0.20) 50%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(248, 250, 253, 0.22));
  background-size: 220% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
}
.js .sec__head.reveal.is-visible .sec__num { animation: num-scan 1.1s var(--ease) 0.18s 1; }
@keyframes num-scan {
  from { background-position: 180% 0, 0 0; }
  to   { background-position: -80% 0, 0 0; }
}

/* Pied de page — petit témoin « signal vivant » */
.site-footer__cell:first-child::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(26, 171, 154, 0.32);
  vertical-align: middle;
}

/* ---------- Respect de prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .site-header__inner {
    transition: none !important;
  }
  .site-header::before,
  .site-header::after {
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .halo, .eyebrow .dot, .cue__arrow, .hero__ash, .hero__labs { animation: none; }
  .hero__ash { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)); }
  .hero__labs { background-position: 0 0, 0 0; }
  .bg-decor::before { animation: none; }
  .bg-signal { animation: none; opacity: 0; }
  .cue:hover { transform: none; }
  .ledger--projects .ledger__row:hover .ledger__name { letter-spacing: 0.07em; animation: none; }
  .ledger--projects .project-name--veiled .project-name__veiled-text {
    animation: none;
    filter: blur(7.5px) contrast(0.74) saturate(0.58);
    opacity: 0.4;
    transform: scaleX(1.1);
    letter-spacing: 0.18em;
  }
  .ledger--projects .project-name--veiled .project-name__veiled-text::after {
    animation: none;
    opacity: 0.68;
  }
  .project-status__dot { animation: none; }
  /* Chorégraphie de scroll neutralisée — état final immédiat */
  .js .ledger.reveal .ledger__row,
  .js .motto.reveal .motto__pillars span { opacity: 1 !important; animation: none !important; }
  .sec__num { animation: none !important; }
  .js .sec__head.reveal.is-visible .sec__title { animation: none !important; }
  .viewport-frame::after { transition: none !important; }
}