/* ==========================================================================
   CARTES — ATELIER D'USINAGE CNC & JESMONITE MINÉRALE
   Design System & Styles de la Landing Page
   ========================================================================== */

:root {
  color-scheme: light;
  --bg-stone: #f4f1ea;
  --bg-alabaster: #faf8f3;
  --bg-gallery-wall: #e8e6e1;
  --bg-oak-floor: #c5b8a5;
  --ink: #1c1915;
  --ink-muted: #575148;
  --ink-subtle: #787064;
  --border-stone: #d6cfc1;
  --border-strong: #c2b9a7;
  --accent-terracotta: #b85030;
  --accent-ocre: #c89b52;
  --accent-forest: #1f5c35;
  --accent-brass: #b89968;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* Palette par défaut : Basalte & Craie (10 strates exactes de 0 à 9) */
  --s0: #141417;
  --s1: #28282a;
  --s2: #3d3c3d;
  --s3: #51504f;
  --s4: #666562;
  --s5: #7d7c78;
  --s6: #9b9994;
  --s7: #b9b7b1;
  --s8: #d8d5ce;
  --s9: #f6f4ee;

  /* Couleurs d'incrustation actives */
  --inlay-roads-color: #f6f4ee;
  --inlay-bounds-color: #c89b52;
  --inlay-gpx-color: #b85030;
}

/* 4 Palettes Jesmonite de 10 strates (fidèles à client/src/jesmonite.js) */
body[data-palette="basalte"] {
  --s0: #141417;
  --s1: #28282a;
  --s2: #3d3c3d;
  --s3: #51504f;
  --s4: #666562;
  --s5: #7d7c78;
  --s6: #9b9994;
  --s7: #b9b7b1;
  --s8: #d8d5ce;
  --s9: #f6f4ee;
}

body[data-palette="terracotta"] {
  --s0: #2c150f;
  --s1: #4b2317;
  --s2: #6a311f;
  --s3: #893f27;
  --s4: #a84d2f;
  --s5: #bd5f3f;
  --s6: #cb7b5f;
  --s7: #d99780;
  --s8: #e8b3a0;
  --s9: #f6ede0;
}

body[data-palette="abysse"] {
  --s0: #0f2431;
  --s1: #173442;
  --s2: #1f4453;
  --s3: #275464;
  --s4: #2f6475;
  --s5: #437988;
  --s6: #6e98a3;
  --s7: #9ab7bd;
  --s8: #c5d6d8;
  --s9: #f1f5f2;
}

body[data-palette="foret"] {
  --s0: #15241b;
  --s1: #223527;
  --s2: #2f4634;
  --s3: #3c5740;
  --s4: #49684d;
  --s5: #5e7b5e;
  --s6: #83987f;
  --s7: #a8b5a1;
  --s8: #cdd2c2;
  --s9: #f2efe4;
}

/* Couleurs dynamiques des incrustations CNC */
body[data-roads="craie"] { --inlay-roads-color: #f6f4ee; }
body[data-roads="anthracite"] { --inlay-roads-color: #1c1b1f; }
body[data-roads="ocre"] { --inlay-roads-color: #c89b52; }
body[data-roads="terracotta"] { --inlay-roads-color: #b85030; }
body[data-roads="abysse"] { --inlay-roads-color: #286575; }
body[data-roads="none"] .studio-layer-roads { opacity: 0; }

body[data-bounds="craie"] { --inlay-bounds-color: #f6f4ee; }
body[data-bounds="anthracite"] { --inlay-bounds-color: #1c1b1f; }
body[data-bounds="ocre"] { --inlay-bounds-color: #c89b52; }
body[data-bounds="terracotta"] { --inlay-bounds-color: #b85030; }
body[data-bounds="abysse"] { --inlay-bounds-color: #286575; }
body[data-bounds="none"] .studio-layer-bounds { opacity: 0; }

body[data-gpx="craie"] { --inlay-gpx-color: #f6f4ee; }
body[data-gpx="anthracite"] { --inlay-gpx-color: #1c1b1f; }
body[data-gpx="ocre"] { --inlay-gpx-color: #c89b52; }
body[data-gpx="terracotta"] { --inlay-gpx-color: #b85030; }
body[data-gpx="abysse"] { --inlay-gpx-color: #286575; }
body[data-gpx="none"] .studio-layer-gpx { opacity: 0; }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-stone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  width: min(76rem, calc(100% - 3rem));
  margin: 0 auto;
}

/* ==========================================================================
   TYPOGRAPHIE & BOUTONS D'ATELIER
   ========================================================================== */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.65rem, 4.8vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

h1 em {
  font-style: italic;
  font-weight: 400;
}

h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.2;
}

p {
  margin: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.12rem 0.35rem;
  background: rgba(28, 25, 21, 0.07);
  border: 1px solid rgba(28, 25, 21, 0.14);
}

.mono-tag,
.eyebrow-mono,
.mono-coord {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.25rem;
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.button-lg {
  padding: 0.88rem 1.5rem;
  font-size: 0.95rem;
}

.button-full {
  width: 100%;
}

.button-primary {
  background: var(--ink);
  color: var(--bg-stone);
}

.button-primary:hover {
  background: #363028;
}

.button-secondary {
  background: transparent;
  color: var(--ink);
}

.button-secondary:hover {
  background: rgba(28, 25, 21, 0.07);
}

.button-invert {
  background: var(--bg-stone);
  color: var(--ink);
  border-color: var(--bg-stone);
}

.button-invert:hover {
  background: #ffffff;
}

.button-outline-light {
  background: transparent;
  color: var(--bg-stone);
  border-color: rgba(244, 241, 234, 0.45);
}

.button-outline-light:hover {
  border-color: var(--bg-stone);
  background: rgba(244, 241, 234, 0.1);
}

/* ==========================================================================
   EN-TÊTE FIXE (SITE HEADER)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-stone);
}

.header-inner {
  width: min(76rem, calc(100% - 3rem));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
}

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

.brand-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
}

.brand-tag {
  padding-left: 0.65rem;
  border-left: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.65rem;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ==========================================================================
   CLASSES DYNAMIQUES DES 10 STRATES & INCRUSTATIONS SVG
   ========================================================================== */

.layer-0 { fill: var(--s0); transition: fill 0.28s ease; }
.layer-1 { fill: var(--s1); transition: fill 0.28s ease; }
.layer-2 { fill: var(--s2); transition: fill 0.28s ease; }
.layer-3 { fill: var(--s3); transition: fill 0.28s ease; }
.layer-4 { fill: var(--s4); transition: fill 0.28s ease; }
.layer-5 { fill: var(--s5); transition: fill 0.28s ease; }
.layer-6 { fill: var(--s6); transition: fill 0.28s ease; }
.layer-7 { fill: var(--s7); transition: fill 0.28s ease; }
.layer-8 { fill: var(--s8); transition: fill 0.28s ease; }
.layer-9 { fill: var(--s9); transition: fill 0.28s ease; }

.layer-bg-0 { background-color: var(--s0); color: #f6f4ee; }
.layer-bg-1 { background-color: var(--s1); color: #f6f4ee; }
.layer-bg-2 { background-color: var(--s2); color: #f6f4ee; }
.layer-bg-3 { background-color: var(--s3); color: #f6f4ee; }
.layer-bg-4 { background-color: var(--s4); color: #f6f4ee; }
.layer-bg-5 { background-color: var(--s5); color: #1c1915; }
.layer-bg-6 { background-color: var(--s6); color: #1c1915; }
.layer-bg-7 { background-color: var(--s7); color: #1c1915; }
.layer-bg-8 { background-color: var(--s8); color: #1c1915; }
.layer-bg-9 { background-color: var(--s9); color: #1c1915; }

.inlay-roads {
  stroke: var(--inlay-roads-color);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, opacity 0.2s ease;
}

.inlay-bounds {
  stroke: var(--inlay-bounds-color);
  stroke-width: 2;
  stroke-dasharray: 5 3;
  stroke-linecap: round;
  transition: stroke 0.2s ease, opacity 0.2s ease;
}

.inlay-gpx {
  stroke: var(--inlay-gpx-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, opacity 0.2s ease;
}

.hex-bevel-stroke {
  fill: none;
  stroke: rgba(28, 25, 21, 0.35);
  stroke-width: 1.5;
}

.studio-layer-roads,
.studio-layer-bounds,
.studio-layer-gpx {
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   SECTION 1 : HERO SCULPTURAL
   ========================================================================== */

.hero {
  padding: 3.5rem 0 4.5rem;
  border-bottom: 1px solid var(--border-stone);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  align-items: center;
  gap: 3.25rem;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow-badge {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  background: var(--ink);
  color: var(--bg-stone);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-lead {
  font-size: 1.08rem;
  color: var(--ink-muted);
  max-width: 54ch;
}

.hero-lead strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-top: 0.35rem;
}

.hero-specs {
  margin: 0.75rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border-stone);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.spec-item dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-subtle);
  margin-bottom: 0.2rem;
}

.spec-item dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

/* Scène Hero : Cadre Caisse Américaine + Applique Laiton */
.gallery-showcase {
  position: relative;
  padding: 2.2rem 1.75rem 1.75rem;
  background: radial-gradient(circle at 50% 18%, #f7f4ec 0%, var(--bg-gallery-wall) 78%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 45px rgba(28, 25, 21, 0.08);
}

.picture-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.85rem;
}

.picture-light-plate {
  width: 3.2rem;
  height: 0.4rem;
  background: linear-gradient(90deg, #8f7245, #d4b886, #8f7245);
  border: 1px solid #5e4929;
}

.picture-light-arms {
  width: 1.6rem;
  height: 0.55rem;
  border-left: 2px solid #9b7e50;
  border-right: 2px solid #9b7e50;
}

.picture-light-hood {
  width: 13rem;
  height: 0.6rem;
  background: linear-gradient(90deg, #7d6238 0%, #d8bd8c 50%, #7d6238 100%);
  border: 1px solid #4d3b20;
  box-shadow: 0 6px 18px rgba(255, 213, 150, 0.55);
}

.Hero-frame,
.hero-frame {
  padding: 0.75rem;
  background: #231f1b;
  border: 1px solid #141210;
  box-shadow:
    0 22px 38px rgba(28, 25, 21, 0.24),
    inset 0 0 0 2px #3a332c;
}

.hero-mat-board {
  background: #fbfaf7;
  border: 1px solid #dedad0;
  padding: 1.15rem 1.25rem 0.95rem;
  box-shadow: inset 0 2px 6px rgba(28, 25, 21, 0.08);
}

.hero-frame-coords {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  color: var(--ink-subtle);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #ebe7de;
}

.hero-relief-svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-frame-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.55rem;
  border-top: 1px solid #ebe7de;
}

.plaque-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.plaque-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-muted);
}

/* Encart de coupe stratigraphique (10 × 2mm) */
.strata-cutaway-card {
  margin-top: 1.15rem;
  padding: 0.85rem 1rem;
  background: var(--bg-alabaster);
  border: 1px solid var(--ink);
}

.strata-cutaway-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.82rem;
}

.strata-stack {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  border: 1px solid var(--ink);
}

.strata-bar {
  padding: 0.32rem 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.15;
  border-right: 1px solid rgba(28, 25, 21, 0.22);
  transition: background-color 0.28s ease;
}

.strata-bar:last-child {
  border-right: 0;
}

/* ==========================================================================
   BANDEAU MÉTRIQUES
   ========================================================================== */

.metrics-strip {
  background: var(--bg-alabaster);
  border-bottom: 1px solid var(--border-stone);
  padding: 2rem 0;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.metric-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--ink);
}

.metric-num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.metric-desc {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ==========================================================================
   STRUCTURE GÉNÉRALE DES SECTIONS
   ========================================================================== */

.section {
  padding: 5.25rem 0;
  border-bottom: 1px solid var(--border-stone);
}

.section-header {
  max-width: 48rem;
  margin-bottom: 3rem;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-terracotta);
  font-weight: 500;
}

.section-lead {
  margin-top: 0.85rem;
  font-size: 1.05rem;
  color: var(--ink-muted);
}

/* ==========================================================================
   SECTION 2 : SAVOIR-FAIRE EN 3 ÉTAPES
   ========================================================================== */

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.process-card {
  background: #ffffff;
  border: 1px solid var(--border-strong);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.process-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-stone);
}

.process-step-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.process-spec-pill {
  padding: 0.15rem 0.5rem;
  background: var(--bg-stone);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.process-diagram {
  background: var(--bg-stone);
  border: 1px solid var(--border-stone);
  padding: 0.5rem;
}

.process-svg {
  width: 100%;
  height: auto;
  display: block;
}

.process-card p {
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* ==========================================================================
   SECTION 3 : STUDIO INTERACTIF (DÉMONSTRATEUR LIVE)
   ========================================================================== */

.studio-section {
  background: var(--bg-alabaster);
}

.studio-workbench {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

.studio-stage-card {
  border: 1px solid var(--ink);
  background: var(--bg-gallery-wall);
  display: flex;
  flex-direction: column;
}

.studio-stage-topbar {
  padding: 0.75rem 1.15rem;
  background: #ffffff;
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.88rem;
}

.studio-stage-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent-forest);
}

.mono-pill {
  padding: 0.15rem 0.45rem;
  background: var(--bg-stone);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.studio-wall-scene {
  position: relative;
  padding: 1.75rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(circle at 50% 15%, #f7f4eb 0%, #dfdcd4 80%);
  min-height: 27rem;
}

.studio-lamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.75rem;
}

.studio-lamp-bar {
  width: 11rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #7d6238, #d8bd8c, #7d6238);
  border: 1px solid #4d3b20;
}

.studio-lamp-beam {
  width: 16rem;
  height: 0.6rem;
  background: radial-gradient(ellipse at center, rgba(255, 223, 165, 0.65) 0%, transparent 75%);
}

.studio-frame-wrapper {
  width: 100%;
  max-width: 34rem;
  padding: 0.85rem;
  background: #fbfaf7;
  border: 10px solid #26211d;
  box-shadow:
    0 20px 36px rgba(28, 25, 21, 0.22),
    inset 0 0 0 1px #dcd7cc;
  transition: padding 0.25s ease, background-color 0.25s ease, border-width 0.25s ease, box-shadow 0.25s ease;
}

/* Bascule Sans Cadre dans le démonstrateur */
body[data-framed="false"] .studio-frame-wrapper {
  background: transparent;
  border-width: 0;
  padding: 0;
  box-shadow: none;
}

.studio-interactive-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Console en chêne sous la carte */
.studio-oak-shelf {
  margin-top: 1.35rem;
  width: 86%;
  height: 0.7rem;
  background: #8d7253;
  border: 1px solid #594631;
  box-shadow: 0 8px 16px rgba(28, 25, 21, 0.18);
  position: relative;
}

.studio-strata-footer {
  padding: 0.75rem 1.15rem;
  background: #ffffff;
  border-top: 1px solid var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.strata-mini-strip {
  display: flex;
  flex: 1;
  min-width: 10rem;
  max-width: 18rem;
  height: 0.9rem;
  border: 1px solid var(--ink);
}

.strata-mini-strip span {
  flex: 1;
  transition: background-color 0.25s ease;
}

.strata-footer-palette-name {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.76rem;
}

/* Panneau de contrôle du studio */
.studio-controls-panel {
  background: #ffffff;
  border: 1px solid var(--border-strong);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.control-block {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid #ebe5da;
}

.control-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.control-label {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
}

.control-hint {
  font-size: 0.75rem;
  color: var(--ink-subtle);
}

.chip-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.control-row-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1rem;
}

.control-row-split .control-block {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}

/* Puces de sélection (identiques à client/src/styles.css) */
.palette-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(28, 25, 21, 0.26);
  background: var(--bg-alabaster);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.palette-chip:hover {
  border-color: var(--ink);
  background: #ffffff;
}

.palette-chip.is-active {
  background: var(--ink);
  color: var(--bg-stone);
  border-color: var(--ink);
}

.palette-swatch {
  width: 1.35rem;
  height: 0.68rem;
  border: 1px solid rgba(28, 25, 21, 0.35);
  flex: none;
}

.palette-swatch-solid {
  width: 0.75rem;
  height: 0.68rem;
  border: 1px solid rgba(28, 25, 21, 0.35);
  flex: none;
}

.palette-chip.is-active .palette-swatch,
.palette-chip.is-active .palette-swatch-solid {
  border-color: rgba(244, 241, 234, 0.65);
}

/* ==========================================================================
   SECTION 4 : BENTO DES FONCTIONNALITÉS
   ========================================================================== */

.features-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

.bento-card {
  background: #ffffff;
  border: 1px solid var(--border-strong);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.bento-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 2rem;
}

.bento-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bento-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.18rem 0.55rem;
  background: var(--bg-stone);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.bento-card p {
  font-size: 0.94rem;
  color: var(--ink-muted);
}

.bento-specs-list {
  margin: 0.25rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.bento-visual {
  background: var(--bg-stone);
  border: 1px solid var(--border-stone);
  padding: 1rem;
}

.bento-svg {
  width: 100%;
  height: auto;
  display: block;
}

.bento-mini-meta {
  padding-top: 0.85rem;
  border-top: 1px solid #ebe5da;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-subtle);
}

/* ==========================================================================
   SECTION 5 : FOCUS IMPORT GPX / KML
   ========================================================================== */

.gpx-section {
  background: var(--bg-alabaster);
}

.gpx-showcase-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

.gpx-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.gpx-steps-list {
  margin: 0.65rem 0;
  display: grid;
  gap: 1rem;
}

.gpx-step-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.gpx-step-badge {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg-stone);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

.gpx-step-row strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.gpx-step-row p {
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.gpx-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.4rem;
}

.gpx-formats-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-subtle);
}

/* Carte démo GPX (inspirée de GpxImportModal.jsx) */
.gpx-preview-card {
  background: #ffffff;
  border: 1px solid var(--ink);
  box-shadow: 0 18px 40px rgba(28, 25, 21, 0.1);
}

.gpx-card-header {
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--border-stone);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.gpx-stats-pill {
  padding: 0.25rem 0.6rem;
  background: var(--bg-stone);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  white-space: nowrap;
}

.gpx-svg-frame {
  margin: 1.25rem 1.35rem;
  padding: 0.85rem;
  background: var(--bg-gallery-wall);
  border: 1px solid var(--border-strong);
}

.gpx-demo-svg {
  width: 100%;
  height: auto;
  display: block;
}

.gpx-hex-primary polygon {
  fill: rgba(28, 25, 21, 0.26);
  stroke: var(--ink);
  stroke-width: 1.3;
}

.gpx-hex-pad polygon {
  fill: rgba(28, 25, 21, 0.08);
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-dasharray: 3 2;
}

.gpx-legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  padding-top: 0.65rem;
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.gpx-legend-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.swatch-line {
  display: inline-block;
  width: 1rem;
  height: 0.22rem;
  background: var(--accent-terracotta);
}

.swatch-hex-solid {
  display: inline-block;
  width: 0.78rem;
  height: 0.78rem;
  background: rgba(28, 25, 21, 0.3);
  border: 1px solid var(--ink);
}

.swatch-hex-dash {
  display: inline-block;
  width: 0.78rem;
  height: 0.78rem;
  background: rgba(28, 25, 21, 0.09);
  border: 1px dashed var(--ink);
}

.gpx-card-footer {
  padding: 1rem 1.35rem;
  background: var(--bg-stone);
  border-top: 1px solid var(--border-stone);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.gpx-card-footer p {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

/* ==========================================================================
   SECTION 6 : TARIFS DÉGRESSIFS & SIMULATEUR
   ========================================================================== */

.pricing-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.25rem;
  align-items: start;
}

.pricing-tiers-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tiers-cards {
  display: grid;
  gap: 0.85rem;
}

.tier-card {
  padding: 1.25rem 1.35rem;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tier-card.is-active {
  border: 2px solid var(--ink);
  background: var(--bg-alabaster);
}

.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.tier-price {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
}

.tier-price span {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.tier-card p {
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.pricing-addons-box {
  background: #ffffff;
  border: 1px solid var(--border-strong);
  padding: 1.15rem 1.35rem;
  display: grid;
  gap: 0.9rem;
}

.addon-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.addon-line + .addon-line {
  padding-top: 0.9rem;
  border-top: 1px solid #ebe5da;
}

.addon-line strong {
  display: block;
  font-size: 0.92rem;
}

.addon-line span {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.addon-price {
  font-family: var(--font-mono);
  font-size: 0.86rem !important;
  font-weight: 600;
  color: var(--ink) !important;
  white-space: nowrap;
}

/* Carte Simulateur de Prix */
.pricing-calculator-card {
  background: #ffffff;
  border: 1px solid var(--ink);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 16px 36px rgba(28, 25, 21, 0.08);
}

.calc-control {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  background: var(--bg-stone);
  border: 1px solid var(--border-stone);
}

.calc-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.calc-hex-badge {
  padding: 0.2rem 0.65rem;
  background: var(--ink);
  color: var(--bg-stone);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.calc-slider {
  width: 100%;
  accent-color: var(--ink);
  cursor: pointer;
}

.calc-slider-marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-subtle);
}

.calc-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-alabaster);
  cursor: pointer;
}

.calc-checkbox-row input {
  margin-top: 0.22rem;
  accent-color: var(--ink);
}

.calc-checkbox-row strong {
  display: block;
  font-size: 0.9rem;
}

.calc-checkbox-row span {
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.calc-summary {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.calc-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.calc-summary dt,
.calc-summary dd {
  margin: 0;
}

.calc-summary dd {
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.calc-summary dd.is-free {
  color: var(--accent-forest);
  font-weight: 600;
}

.calc-total-row {
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink);
  font-weight: 600;
}

.calc-total-row dt {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
}

.calc-total-row dd {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
}

.calc-shipping-hint {
  padding: 0.55rem 0.75rem;
  background: var(--bg-stone);
  border: 1px solid var(--border-stone);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.calc-shipping-hint.is-free {
  background: #edf5ef;
  border-color: #b7d4be;
  color: var(--accent-forest);
}

/* ==========================================================================
   SECTION 7 : PIPELINE DE COMMANDE (5 ÉTAPES)
   ========================================================================== */

.pipeline-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

.pipeline-step {
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pipeline-step.is-done {
  background: var(--bg-alabaster);
  border-color: var(--ink);
}

.pipeline-step.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-stone);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.pipeline-step strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
}

.pipeline-step p {
  font-size: 0.84rem;
  color: var(--ink-muted);
}

.pipeline-step.is-current p {
  color: rgba(244, 241, 234, 0.82);
}

/* ==========================================================================
   SECTION 8 : FINAL CTA & FOOTER
   ========================================================================== */

.final-cta-section {
  padding: 5rem 0;
}

.final-cta-box {
  background: var(--ink);
  color: var(--bg-stone);
  padding: 3.75rem 3rem;
  border: 1px solid var(--ink);
}

.final-cta-copy {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.final-cta-copy .eyebrow-mono {
  color: var(--accent-ocre);
}

.final-cta-copy h2 {
  color: var(--bg-stone);
}

.final-cta-copy p {
  color: rgba(244, 241, 234, 0.82);
  font-size: 1.05rem;
}

.final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-top: 0.4rem;
}

.desktop-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem !important;
  color: rgba(244, 241, 234, 0.62) !important;
}

.site-footer {
  border-top: 1px solid var(--border-strong);
  background: var(--bg-alabaster);
  padding: 3.5rem 0 2rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-stone);
}

.footer-brand-col p {
  margin-top: 0.75rem;
  max-width: 34ch;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.footer-links-col strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.footer-links-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.footer-links-col a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.88rem;
}

.footer-links-col a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-bottom {
  padding-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--ink-subtle);
}

/* ==========================================================================
   BANDEAU DYNAMIQUE & ÉTATS MAINTENANCE / COMING SOON SUR LA LANDING PAGE
   ========================================================================== */

.site-status-banner {
  background: var(--ink);
  color: var(--bg-stone);
  border-bottom: 1px solid var(--ink);
  font-size: 0.85rem;
  padding: 0.6rem 0;
}

.site-status-banner.mode-maintenance {
  background: #2b1812;
  border-bottom: 2px solid var(--accent-terracotta);
}

.site-status-banner.mode-coming_soon {
  background: #1c1915;
  border-bottom: 2px solid var(--accent-ocre);
}

.site-status-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.site-status-banner-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.site-status-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  background: rgba(244, 241, 234, 0.14);
  border: 1px solid rgba(244, 241, 234, 0.35);
  color: var(--bg-alabaster);
}

.site-status-banner.mode-maintenance .site-status-pill {
  background: var(--accent-terracotta);
  border-color: var(--accent-terracotta);
  color: #fff;
}

.site-status-banner.mode-coming_soon .site-status-pill {
  background: var(--accent-ocre);
  border-color: var(--accent-ocre);
  color: var(--ink);
  font-weight: 600;
}

.site-status-date {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 0.15rem 0.5rem;
  background: rgba(244, 241, 234, 0.1);
  border-left: 2px solid var(--accent-ocre);
}

.site-status-admin-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--bg-stone);
  opacity: 0.8;
  text-decoration: none;
  white-space: nowrap;
}

.site-status-admin-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.header-status-chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--ink);
  background: var(--bg-stone);
  color: var(--ink);
}

.header-status-chip.mode-maintenance {
  border-color: var(--accent-terracotta);
  background: #fdf2ee;
  color: var(--accent-terracotta);
}

.header-status-chip.mode-coming_soon {
  border-color: var(--accent-ocre);
  background: #fbf6eb;
  color: #7a581c;
}

.hero-status-callout {
  margin: 0 0 1.35rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ink);
  background: var(--bg-alabaster);
  border-left: 4px solid var(--accent-terracotta);
}

.hero-status-callout.mode-coming_soon {
  border-left-color: var(--accent-ocre);
}

.hero-status-callout-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.hero-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-terracotta);
}

.hero-status-callout.mode-coming_soon .hero-status-dot {
  background: var(--accent-ocre);
}

.hero-status-callout p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.hero-status-countdown {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border-stone);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink);
}

.button.is-locked-cta {
  background: #3a342c;
  border-color: #3a342c;
  color: #e8e2d5;
  opacity: 0.92;
}

.button.button-invert.is-locked-cta {
  background: rgba(244, 241, 234, 0.16);
  border-color: rgba(244, 241, 234, 0.4);
  color: var(--bg-stone);
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLETTE & MOBILE)
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-grid,
  .studio-workbench,
  .gpx-showcase-grid,
  .pricing-layout,
  .bento-wide {
    grid-template-columns: 1fr;
  }

  .process-grid,
  .features-bento {
    grid-template-columns: 1fr;
  }

  .pipeline-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-nav,
  .brand-tag {
    display: none;
  }

  .hero-specs,
  .metrics-grid,
  .pipeline-steps,
  .footer-inner,
  .control-row-split,
  .chip-grid-2col {
    grid-template-columns: 1fr;
  }

  .strata-stack {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .final-cta-box {
    padding: 2.25rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}