/* ============================================================
   ATELIER VOLT — Brutalist editorial agency site
   ============================================================ */

:root {
  --bg: #F1EFE9;
  --ink: #0A0A0A;
  --ink-soft: #4A4A4A;
  --ink-mute: #8C8A82;
  --blue: #1E3CFF;
  --blue-soft: rgba(30, 60, 255, 0.08);
  --accent: #FF3D00;
  --line: #D8D4C8;
  --line-strong: #BFBBAE;
  --col: 12;
  --gap: 24px;
  --pad: clamp(20px, 3vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { max-width: 100%; }

/* Cursor — disable native, draw our own (desktop only) */
@media (hover: hover) and (pointer: fine) {
  body, a, button { cursor: none; }
  /* Sauf dans le modal : on rend la main à l'utilisateur sur les formulaires */
  .modal, .modal *, .modal a, .modal button { cursor: auto; }
  .modal input, .modal textarea, .modal select { cursor: text; }
  .modal button, .modal .choice, .modal .modal-close, .modal label { cursor: pointer; }
  /* Et on cache le curseur custom quand le modal est ouvert */
  body:has(.modal.is-open) .cursor { display: none; }
  /* Idem pour l'assistant IA (FAB + panneau) : on rend le curseur natif normal */
  .n8a, .n8a *, .n8a a, .n8a button { cursor: auto; }
  .n8a input, .n8a textarea { cursor: text; }
  .n8a button, .n8a__chip, .n8a__close, .n8a__cta, .n8a__fab { cursor: pointer; }
  .n8a__send:disabled { cursor: not-allowed; }
  /* On masque le curseur custom UNIQUEMENT quand on survole l'assistant
     (pas quand il est juste ouvert) → il reste visible sur le reste du site */
  body:has(.n8a:hover) .cursor { display: none; }
}

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

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

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display {
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}
.display-xl { font-size: clamp(64px, 11vw, 160px); }
.display-l  { font-size: clamp(48px, 8vw, 120px); }
.display-m  { font-size: clamp(40px, 5.6vw, 96px); line-height: 0.95; letter-spacing: -0.035em; }

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
.mono-md { font-size: 13px; }

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.italic-accent { font-style: italic; color: var(--accent); }
.blue { color: var(--blue); }

/* ============================================================
   BACKGROUND GRID — statique, discret
   ============================================================ */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.grid-bg .col {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
  opacity: 0.3;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}
.cursor .cross {
  position: absolute;
  transform: translate(-50%, -50%);
}
.cursor .cross::before,
.cursor .cross::after {
  content: '';
  position: absolute;
  background: #fff;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor .cross::before { width: 18px; height: 1px; left: -9px; top: 0; }
.cursor .cross::after  { width: 1px; height: 18px; left: 0; top: -9px; }
.cursor .ring {
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor.is-link .ring { transform: translate(-50%, -50%) scale(3.4); }
.cursor.is-link .cross::before { width: 28px; left: -14px; }
.cursor.is-link .cross::after  { height: 28px; top: -14px; }
.cursor .coords {
  position: absolute;
  left: 22px; top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: #fff;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0.8;
}

/* ============================================================
   LAYOUT — section frame + technical labels
   ============================================================ */
section {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 11vh, 160px) var(--pad);
  border-top: 1px solid var(--line);
}
section:first-of-type { border-top: 0; }

/* Sur mobile, padding plus serré */
@media (max-width: 900px) {
  section { padding: clamp(72px, 10vh, 120px) var(--pad); }
}
@media (max-width: 480px) {
  :root { --gap: 16px; --pad: 18px; }
  section { padding: 80px 18px 64px; }
}

.label-tl, .label-tr, .label-bl, .label-br {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
  z-index: 3;
}
.label-tl { top: 88px; left: var(--pad); }
.label-tr { top: 88px; right: var(--pad); text-align: right; }
.label-bl { bottom: 24px; left: var(--pad); }
.label-br { bottom: 24px; right: var(--pad); text-align: right; }

.label-bl span, .label-br span { color: var(--ink); }

/* On masque TR + BR site-wide : seuls TL (SECT.NN / NOM) et BL (NN/11) restent.
   Garde la signature DA, dégage le bavardage. */
.label-tr, .label-br { display: none; }

/* Mobile : labels plus petits + remontés */
@media (max-width: 720px) {
  .label-tl, .label-bl { font-size: 9px; letter-spacing: 0.12em; }
  .label-tl { top: 76px; }
  .label-bl { bottom: 16px; }
}

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.loader.is-done { pointer-events: none; }
.loader-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}
.loader-grid .col {
  border-left: 1px solid var(--blue);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
}
.loader-grid .col:last-child { border-right: 1px solid var(--blue); }
.loader-counter {
  position: absolute;
  top: 24px; left: var(--pad);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ink);
}
.loader-counter .num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 96px;
  letter-spacing: -0.04em;
  color: var(--blue);
  line-height: 1;
  display: block;
  margin-top: 8px;
}
.loader-meta {
  position: absolute;
  bottom: 24px; right: var(--pad);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}
.loader-meta .blink::after {
  content: '_';
  animation: blink 0.8s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.loader-word {
  position: relative;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(80px, 16vw, 240px);
  letter-spacing: -0.05em;
  color: var(--blue);
  line-height: 0.9;
  z-index: 2;
}
.loader-word .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(20px);
  transform: translateY(20px);
}

.loader-list {
  position: absolute;
  left: var(--pad);
  bottom: 80px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.9;
}
.loader-list li {
  list-style: none;
  opacity: 0;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.loader-list li .dots {
  flex: 1;
  border-bottom: 1px dotted var(--ink-mute);
  margin: 0 6px;
  transform: translateY(-4px);
}
.loader-list li .ok { color: var(--blue); font-weight: 700; }

.loader-flash {
  position: absolute;
  inset: 0;
  background: var(--blue);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   SIDE INFO PANEL (desktop only)
   ============================================================ */
.side-panel {
  position: fixed;
  top: 0; right: 0;
  width: 200px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 80px 24px 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  z-index: 50;
  pointer-events: none;
  border-left: 1px solid var(--line);
  background: rgba(241, 239, 233, 0.4);
  backdrop-filter: none;
}
@media (max-width: 1024px) { .side-panel { display: none; } }

.side-panel .row { margin-bottom: 18px; }
.side-panel .row .key { display: block; opacity: 0.55; margin-bottom: 4px; }
.side-panel .row .val { color: var(--ink); font-size: 11px; }
.side-panel .row .val.big {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.side-panel .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.side-panel .status::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}
.side-panel .scroll-bar {
  position: relative;
  height: 1px; width: 100%;
  background: var(--line-strong);
  margin-top: 6px;
}
.side-panel .scroll-bar .fill {
  position: absolute;
  left: 0; top: -1px;
  height: 3px; width: 0%;
  background: var(--blue);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-header > * { pointer-events: auto; }
.site-header .brand {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
.site-header .brand .deg { color: var(--blue); }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { position: relative; color: var(--ink-soft); transition: color 200ms; }
.site-header nav a:hover { color: var(--ink); }
.site-header nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 1px; width: 0;
  background: var(--blue);
  transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header nav a:hover::after { width: 100%; }
.site-header .right { display: flex; align-items: center; gap: 16px; }

/* Header — fond legerement floute quand on scrolle */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(241,239,233,0);
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms;
  pointer-events: none;
  z-index: -1;
}
.site-header.is-scrolled::before {
  background: rgba(241,239,233,0.85);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}

/* Bouton menu mobile (hamburger -> X) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink);
  width: 40px; height: 40px;
  position: relative;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}
.nav-toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 350ms cubic-bezier(0.7,0,0.3,1), opacity 200ms;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-header .right { display: none; }
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 100vw);
    background: var(--bg);
    border-left: 1px solid var(--ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 80px 40px 40px;
    transform: translateX(100%);
    transition: transform 450ms cubic-bezier(0.7,0,0.3,1);
    z-index: 95;
    pointer-events: auto;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav a {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--ink);
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    width: 100%;
  }
  .site-nav a::after { display: none; }
  body.nav-open { overflow: hidden; }
}

/* Scroll progress bar — fine sous le header */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 91;
  pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--blue);
  transition: width 100ms linear;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: clamp(96px, 13vh, 160px);
  padding-bottom: clamp(40px, 5vh, 72px);
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--gap);
  row-gap: clamp(32px, 5vh, 56px);
  align-items: end;
}
.hero-left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.hero-blob { grid-column: 2; grid-row: 1; }

/* — Bascule desktop / mobile : ≥720px = desktop, <720px = mobile-specific — */
.hero-mobile { display: none; }

/* Tablette portrait + petit desktop : 2 colonnes resserrées,
   blob réduit mais aligné en bas avec le texte (compagnon visuel, pas
   bulle qui flotte au-dessus du contenu) */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1.5fr 0.75fr;
    grid-template-rows: auto;
    column-gap: clamp(20px, 3vw, 36px);
    row-gap: 0;
    /* Dégage la place du label de coin SECT.NN (.label-tl top:88px) */
    padding-top: clamp(108px, 12vh, 132px);
    min-height: auto;
    align-items: end;
  }
  .hero-left { grid-column: 1; grid-row: 1; width: 100%; }
  .hero-blob {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1.05;
    margin: 0 0 0 auto;
    justify-self: end;
    align-self: end;
  }
}

/* < 720px : affiche poster + blueprint animé — */
@media (max-width: 720px) {
  /* Annule la grille 2-col du palier tablette : le contenu mobile prend toute la largeur */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    /* Mobile : label de coin à top:76px — on dégage la rangée de tags */
    padding-top: clamp(96px, 13vh, 116px);
  }
  .hero-left { grid-column: 1; grid-row: 1; }
  .hero-desktop { display: none; }
  .hero-blob { display: none !important; }

  .hero-mobile {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vh, 22px);
    width: 100%;
  }

  /* Tags row : 4 disciplines en mono, séparées par slashes, soulignées en bleu */
  .hero-tags {
    display: block;
    color: var(--ink-soft);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    border-bottom: 1px solid var(--blue);
    padding-bottom: 8px;
    margin: 0;
  }

  /* Titre poster MAJUSCULE — 3 lignes, point italic orange */
  .hero-title-m {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(54px, 15.5vw, 78px);
    letter-spacing: -0.04em;
    line-height: 0.93;
    text-transform: uppercase;
    margin: 0;
    color: var(--ink);
  }
  .hero-title-m .ht-line { display: block; }
  .hero-title-m em {
    font-style: italic;
    color: var(--accent);
    text-transform: none;
    display: inline;
  }

  /* Lead paragraph */
  .hero-lead-m {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 42ch;
    margin: 0;
  }
  .hero-lead-m em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
  }

  /* Bottom row : CTAs gauche + Blueprint droite — CTAs en haut pour combler le vide */
  .hero-bottom-m {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(140px, 1.1fr);
    gap: clamp(8px, 2vw, 16px);
    align-items: start;
    margin-top: clamp(8px, 1.6vh, 16px);
  }

  /* CTAs empilés, alignés au haut de la row */
  .hero-ctas-m {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
  }
  .hero-ctas-m .btn {
    align-self: stretch;
    justify-content: space-between;
    font-size: 11px;
    padding: 14px 16px;
  }
  /* Bouton secondaire : outline, pas plein */
  .btn-outline {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
  }
  .btn-outline::before { background: var(--ink); }
  .btn-outline:hover { color: var(--bg); }

  /* — Blueprint container — */
  .hero-blueprint {
    width: 100%;
    aspect-ratio: 280 / 320;
    position: relative;
    overflow: visible;
    /* Léger débordement à droite pour effet "page imprimée" */
    margin-right: calc(var(--pad) * -0.6);
    /* Perspective pour l'inclinaison 3D du blueprint */
    perspective: 1400px;
    perspective-origin: 30% 50%;
  }
  .bp-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    /* Inclinaison isométrique de base — animée par bpSway */
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    animation: bpSway 22s ease-in-out infinite;
  }
  /* Page qui tourne / oscille en permanence — variations subtiles autour de l'inclinaison de base */
  @keyframes bpSway {
    0%, 100% { transform: rotateY(-16deg) rotateX(6deg)  rotate(0deg)    scale(0.94); }
    20%      { transform: rotateY(-11deg) rotateX(4.5deg) rotate(0.6deg)  scale(0.945); }
    45%      { transform: rotateY(-22deg) rotateX(7.5deg) rotate(-0.4deg) scale(0.935); }
    65%      { transform: rotateY(-19deg) rotateX(5.5deg) rotate(0.3deg)  scale(0.94); }
    85%      { transform: rotateY(-13deg) rotateX(6.5deg) rotate(-0.2deg) scale(0.942); }
  }

  /* Cadre principal — léger fond bleu très pâle */
  .bp-outer { transition: stroke-width 200ms; }

  /* Coordonnées en bas — comme une signature de carte */
  .hero-coords {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-strong);
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .hero-coords .hc-xy { color: var(--blue); font-weight: 700; }
  .hero-coords .hc-place { text-transform: uppercase; }

  /* — Entrance staggered — */
  .hero-mobile > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.ready .hero-mobile > * { opacity: 1; transform: none; }
  body.ready .hero-mobile > *:nth-child(1) { transition-delay: 200ms; }
  body.ready .hero-mobile > *:nth-child(2) { transition-delay: 330ms; }
  body.ready .hero-mobile > *:nth-child(3) { transition-delay: 460ms; }
  body.ready .hero-mobile > *:nth-child(4) { transition-delay: 580ms; }
  body.ready .hero-mobile > *:nth-child(5) { transition-delay: 720ms; }
}

@media (max-width: 480px) {
  .hero-bottom-m {
    grid-template-columns: 1fr 1.1fr;
    gap: 6px;
  }
  .hero-title-m { font-size: clamp(48px, 15vw, 64px); }
  .hero-ctas-m .btn { padding: 12px 14px; font-size: 10.5px; letter-spacing: 0.15em; }
}

@media (max-width: 400px) {
  .hero-title-m { font-size: clamp(44px, 15vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mobile > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bp-svg .bp-cta,
  .bp-svg .bp-block-a,
  .bp-svg .bp-annot,
  .bp-svg .bp-scan,
  .bp-svg .bp-text-l,
  .bp-svg .bp-title-l,
  .bp-svg .bp-sub-l { transition: none !important; }
}

/* — Blueprint SVG : transitions CSS pour tweens fluides — */
.bp-svg .bp-cursor {
  pointer-events: none;
  transition: transform 1100ms cubic-bezier(0.5, 0, 0.3, 1),
              opacity 500ms ease;
}
.bp-svg .bp-cta,
.bp-svg .bp-block-a {
  transition: x 700ms cubic-bezier(0.5, 0, 0.3, 1),
              y 700ms cubic-bezier(0.5, 0, 0.3, 1),
              width 700ms cubic-bezier(0.5, 0, 0.3, 1),
              height 700ms cubic-bezier(0.5, 0, 0.3, 1),
              opacity 500ms ease;
}
.bp-svg .bp-title-l,
.bp-svg .bp-sub-l { transition: width 700ms cubic-bezier(0.5, 0, 0.3, 1); }
.bp-svg .bp-text-l { transition: x1 700ms cubic-bezier(0.5, 0, 0.3, 1),
                                 x2 700ms cubic-bezier(0.5, 0, 0.3, 1); }

/* Animation du clic du curseur — anneau qui se contracte autour de la pointe */
.bp-svg .bp-cursor.is-clicking .bp-cursor-click {
  animation: bpCursorClick 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bpCursorClick {
  0%   { r: 0;  opacity: 0.9; }
  60%  { r: 9;  opacity: 0.5; }
  100% { r: 14; opacity: 0;   }
}
.bp-svg .bp-annot {
  transition: opacity 400ms ease;
  opacity: 0.4;
}
.bp-svg .bp-annot.is-active { opacity: 1; }
.bp-svg .bp-annot.is-active circle {
  animation: bpPulse 1.4s ease-in-out infinite;
}
@keyframes bpPulse {
  0%, 100% { r: 2; }
  50%      { r: 3.2; }
}

/* Scan line qui balaie quand active */
.bp-svg .bp-scan {
  transition: opacity 200ms ease;
}
.bp-svg .bp-scan.is-running {
  animation: bpScan 4.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes bpScan {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(220px); }
}

/* Build-up entrance : les lignes du blueprint apparaissent en cascade.
   Le périmètre du bp-outer = 2*(180+260) = 880 → dasharray dédié pour que
   le trait fasse le tour complet, sans gap résiduel à droite. */
.bp-svg .bp-header rect,
.bp-svg .bp-section rect:first-child,
.bp-svg .bp-footer rect {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.bp-svg .bp-outer {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
body.ready .bp-svg .bp-outer       { animation: bpDraw 1400ms ease-out 600ms forwards; }
body.ready .bp-svg .bp-header rect { animation: bpDraw 800ms ease-out 1000ms forwards; }
body.ready .bp-svg .bp-section rect:first-child { animation: bpDraw 800ms ease-out 1200ms forwards; }
body.ready .bp-svg .bp-footer rect { animation: bpDraw 800ms ease-out 1400ms forwards; }
@keyframes bpDraw {
  to { stroke-dashoffset: 0; }
}

/* (Badge dispo retiré — styles supprimés) */

.hero-title {
  margin-left: -0.04em;
  position: relative;
  font-size: clamp(28px, 4.2vw, 54px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
  max-width: 22ch;
}
.hero-title .word {
  display: inline-block;
  margin-right: 0.18em;
}
.hero-title .word .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(20px);
  transform: translateY(40px) scale(0.96);
  transition: transform 200ms ease-out;
}
.hero-title .accent {
  font-style: italic;
  color: var(--accent);
}

/* Eyebrow au-dessus du titre hero — petit cartouche mono, contexte studio */
.hero-eyebrow {
  display: inline-block;
  color: var(--ink-soft);
  margin-bottom: clamp(16px, 2vh, 24px);
}

.hero-meta {
  margin-top: clamp(16px, 2.4vh, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
  max-width: 560px;
}
.hero-meta p {
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
}
.hero-meta p strong { color: var(--ink); font-weight: 500; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* (Bande de preuve hero retirée — styles supprimés) */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  transition: color 250ms;
}
.btn .arrow { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: translateX(0); }
.btn:hover .arrow { transform: translate(4px, -4px); }
.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--bg);
}
.btn-primary::before { background: var(--ink); }
.btn-primary:hover { color: var(--bg); }

.btn-lg {
  padding: 18px 26px;
  font-size: 12px;
  letter-spacing: 0.2em;
}
.btn-ghost-light {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-soft);
}
.btn-ghost-light::before { background: var(--ink); }
.btn-ghost-light:hover { color: var(--bg); border-color: var(--ink); }

.hero-blob {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  align-self: end;
}
.hero-blob canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-blob .blob-label {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}
/* Les deux labels remontés en haut du blob (avant : un en haut, un en bas) */
.hero-blob .lbl-1 { top: -22px; right: 0; }
.hero-blob .lbl-2 { top: -22px; left: 0; }

/* ============================================================
   COMPARATIF (sect.03) — Avec / Sans 48N° — conversion-focused
   ============================================================ */
.compare {
  padding-top: clamp(100px, 14vh, 180px);
}
.compare-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 6vh, 64px);
}
@media (max-width: 900px) { .compare-head { grid-template-columns: 1fr; } }
.compare-head .eyebrow { grid-column: 1; color: var(--ink-soft); margin-bottom: 14px; display: inline-block; }
.compare-head h2 {
  grid-column: 1;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 76px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 18ch;
}
.compare-head p {
  grid-column: 2;
  color: var(--ink-soft);
  max-width: 38ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .compare-head h2, .compare-head p, .compare-head .eyebrow { grid-column: 1; }
}

.compare-table {
  border: 1px solid var(--ink);
  background: var(--bg);
  overflow: hidden;
}
.compare-table .ct-head,
.compare-table .ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.compare-table .ct-row > div,
.compare-table .ct-col-head {
  padding: clamp(18px, 2.5vw, 28px) clamp(18px, 2.6vw, 30px);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  transition: background 350ms ease, transform 350ms cubic-bezier(0.16,1,0.3,1);
}
.compare-table .ct-row > div p {
  font-size: clamp(14px, 1vw, 16.5px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.compare-table .ct-row > div p strong { color: var(--ink); font-weight: 500; }

/* Bordures internes propres */
.compare-table .ct-head { border-bottom: 1px solid var(--ink); }
.compare-table .ct-row { border-bottom: 1px solid var(--line); }
.compare-table .ct-row:last-child { border-bottom: 0; }
.compare-table .ct-row > div:first-child,
.compare-table .ct-col-head:first-child { border-right: 1px solid var(--line); }

/* En-tête de colonnes */
.compare-table .ct-col-head {
  background: var(--bg);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(14px, 2vw, 22px);
  padding-bottom: clamp(14px, 2vw, 22px);
}
.compare-table .ct-col-head.ct-good {
  background: var(--ink);
  color: rgba(241,239,233,0.7);
}
.compare-table .ct-col-head.ct-good .ct-tag { color: var(--bg); }
.compare-table .ct-col-head .ct-tag { color: var(--ink); }
.compare-table .ct-col-head.ct-bad .ct-tag { color: var(--ink); }

/* Index mono par ligne (= les quatre différences) — pas de picto ✗/✓ */
.compare-table .ct-row .ct-bad { color: var(--ink-soft); }
.compare-table .ct-row .ct-mark {
  flex-shrink: 0;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
/* Côté « standard » : index barré + atténué = point qui dérape */
.compare-table .ct-row .ct-bad .ct-mark {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.75;
}

/* Côté « 48N° » : même index, affirmé en bleu */
.compare-table .ct-row .ct-good {
  background: rgba(30,60,255,0.045);
}
.compare-table .ct-row .ct-mark--good {
  color: var(--blue);
  font-weight: 700;
}
.compare-table .ct-row:hover .ct-good { background: rgba(30,60,255,0.09); }
.compare-table .ct-row:hover .ct-bad  { background: rgba(10,10,10,0.025); }

@media (max-width: 800px) {
  .compare-table .ct-head { grid-template-columns: 1fr; }
  .compare-table .ct-col-head:first-child { display: none; }
  .compare-table .ct-row { grid-template-columns: 1fr; }
  .compare-table .ct-row > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    opacity: 0.7;
  }
  .compare-table .ct-row > div { padding: 18px 20px; }
}

/* CTA en bas du comparatif */
.compare-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(28px, 4vh, 48px);
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  flex-wrap: wrap;
}
.compare-cta p { color: rgba(241,239,233,0.75); margin: 0; }
.compare-cta .btn { border-color: var(--bg); color: var(--bg); }
.compare-cta .btn.btn-primary { background: var(--blue); border-color: var(--blue); }
.compare-cta .btn::before { background: var(--blue); }
.compare-cta .btn.btn-primary::before { background: var(--bg); }
.compare-cta .btn.btn-primary:hover { color: var(--ink); }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  background: var(--blue);
  color: var(--bg);
  border-top: 0;
}
.stats .label-tl, .stats .label-tr, .stats .label-bl, .stats .label-br { color: rgba(241,239,233,0.6); }
.stats .label-bl span, .stats .label-br span { color: var(--bg); }
.stats h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 14ch;
  margin-bottom: 60px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  border-top: 1px solid rgba(241,239,233,0.25);
  padding-top: 40px;
}
.stats-grid.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .stats-grid,
  .stats-grid.stats-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stats-grid,
  .stats-grid.stats-grid--3 { grid-template-columns: 1fr; }
}
.stat-cell .num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 10vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  display: block;
  position: relative;
}
.stat-cell .num.glitch::before,
.stat-cell .num.glitch::after {
  content: attr(data-val);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stat-cell .num.glitch::before { color: #ff3d00; transform: translateX(-2px); mix-blend-mode: screen; }
.stat-cell .num.glitch::after  { color: #00fff7; transform: translateX(2px); mix-blend-mode: screen; }
.stat-cell .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 16px;
  display: block;
  color: rgba(241,239,233,0.7);
  border-top: 1px solid rgba(241,239,233,0.25);
  padding-top: 12px;
  max-width: 22ch;
}

/* ============================================================
   HEATMAP / OPTIMISATION (sect.04)
   Conversion-focused : on bouge, on teste, on documente.
   ============================================================ */
.heatmap-sect {
  background: var(--blue);
  color: var(--bg);
  border-top: 0;
  /* padding-top élargi : dégage le label de coin SECT.03 (.label-tl top:88px) */
  padding: clamp(108px, 13vh, 140px) var(--pad) clamp(48px, 6vh, 80px);
  min-height: auto;
}
.heatmap-sect .label-tl,
.heatmap-sect .label-tr,
.heatmap-sect .label-bl,
.heatmap-sect .label-br { color: rgba(241,239,233,0.55); }
.heatmap-sect .label-bl span,
.heatmap-sect .label-br span { color: var(--bg); }

.hm-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 5vh, 56px);
}
@media (max-width: 900px) { .hm-head { grid-template-columns: 1fr; } }
.hm-head .eyebrow { grid-column: 1; color: rgba(241,239,233,0.55); display: inline-block; margin-bottom: 14px; }
.hm-head h2 {
  grid-column: 1;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 72px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--bg);
  max-width: 14ch;
}
.hm-head h2 .italic-accent { color: var(--accent); }
.hm-head p {
  grid-column: 2;
  color: rgba(241,239,233,0.72);
  max-width: 42ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .hm-head h2, .hm-head p, .hm-head .eyebrow { grid-column: 1; }
}

/* Stage : maquette à gauche, KPIs à droite. Taille bridée sur grand écran. */
.hm-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  max-width: 1000px;
}
@media (max-width: 1024px) { .hm-stage { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Wireframe + canvas + cursor : conteneur relatif unique */
.hm-canvas-wrap {
  position: relative;
  border: 1px solid rgba(241,239,233,0.35);
  background: rgba(10,10,10,0.18);
  aspect-ratio: 600 / 760;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1024px) { .hm-canvas-wrap { max-width: 100%; } }
.hm-canvas-wrap .hm-corner-tl,
.hm-canvas-wrap .hm-corner-tr,
.hm-canvas-wrap .hm-corner-bl,
.hm-canvas-wrap .hm-corner-br {
  position: absolute;
  z-index: 4;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(241,239,233,0.7);
  pointer-events: none;
}
.hm-canvas-wrap .hm-corner-tl { top: 12px; left: 14px; }
.hm-canvas-wrap .hm-corner-tr { top: 12px; right: 14px; }
.hm-canvas-wrap .hm-corner-bl { bottom: 12px; left: 14px; }
.hm-canvas-wrap .hm-corner-br { bottom: 12px; right: 14px; }
.hm-canvas-wrap .hm-corner-tr strong { color: var(--bg); margin: 0 2px; }

/* Wireframe SVG */
.hm-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hm-wire .hw-rule { stroke: rgba(241,239,233,0.18); stroke-width: 0.5; }
.hm-wire .hw-line { fill: rgba(241,239,233,0.22); }
.hm-wire .hw-block { fill: rgba(241,239,233,0.32); }
.hm-wire .hw-block-lg { fill: rgba(241,239,233,0.45); }
.hm-wire .hw-cta {
  fill: none;
  stroke: rgba(241,239,233,0.55);
  stroke-width: 1;
}
.hm-wire .hw-cta-primary {
  fill: rgba(241,239,233,0.18);
  stroke: rgba(241,239,233,0.85);
}
.hm-wire .hw-cell {
  fill: none;
  stroke: rgba(241,239,233,0.32);
  stroke-width: 0.8;
  stroke-dasharray: 3 4;
}
.hm-wire .hw-card {
  fill: rgba(241,239,233,0.05);
  stroke: rgba(241,239,233,0.32);
  stroke-width: 0.8;
}
.hm-wire .hw-blob { stroke: rgba(241,239,233,0.35); stroke-dasharray: 2 3; }
.hm-wire .hw-corners path {
  fill: none;
  stroke: var(--bg);
  stroke-width: 1.5;
}

/* Éléments du wireframe qu'on déplace réellement. Pas de CSS transition :
   c'est le JS qui interpole position par frame pendant le drag. */
.hm-wire .hw-movable { will-change: transform; }

/* Éléments adaptatifs : transform géré au tween JS (pas de CSS transition dessus
   pour ne pas se cumuler), mais l'opacité est animée en CSS quand un voisin
   doit fondre parce qu'il n'a plus sa place dans la nouvelle disposition. */
.hm-wire .hw-adaptive { transition: opacity 650ms cubic-bezier(0.5, 0, 0.2, 1); }
.hm-wire .hw-movable.hm-grabbed { filter: drop-shadow(0 0 8px rgba(255,61,0,0.75)); }
.hm-wire #hwCtaPrimary.hm-grabbed {
  stroke: var(--accent);
  stroke-width: 2;
  fill: rgba(255,61,0,0.25);
}
.hm-wire #hwStatsGroup.hm-grabbed .hw-cell {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: none;
}
/* Petite « ombre fantôme » à la position d'origine pendant le drag (laissée par le JS) */
.hw-ghost-trace {
  fill: none;
  stroke: rgba(241,239,233,0.5);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity 250ms;
}
.hw-ghost-trace.on { opacity: 1; }

/* Canvas heatmap au-dessus du wire — masqué pour l'instant.
   Pour le rallumer, retirer `display: none` ci-dessous. */
.hm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.95;
  display: none;
}

/* Curseur fantôme animé en JS */
.hm-ghost {
  position: absolute;
  z-index: 3;
  left: 0; top: 0;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 400ms;
  opacity: 0;
}
.hm-ghost.on { opacity: 1; }
/* Mode « grabbing » : le rond du curseur se remplit en accent (= main qui pince) */
.hm-ghost.grabbing .hm-ghost-cross::before {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.4);
}
.hm-ghost-cross::before { transition: transform 200ms cubic-bezier(0.16,1,0.3,1), background 200ms; }
.hm-ghost-cross {
  position: absolute;
  inset: 0;
}
.hm-ghost-cross span:nth-child(1) {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--bg);
  transform: translateY(-0.5px);
}
.hm-ghost-cross span:nth-child(2) {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--bg);
  transform: translateX(-0.5px);
}
.hm-ghost-cross::before {
  content: '';
  position: absolute;
  inset: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--bg);
  border-radius: 50%;
}
.hm-ghost-coords {
  position: absolute;
  /* Calé dans le quadrant bas-droit, sous les deux bras du crosshair (pas de chevauchement) */
  left: 16px; top: 18px;
  font-size: 9px;
  color: var(--bg);
  white-space: nowrap;
  letter-spacing: 0.12em;
}
/* Click ring : injecté par JS via .hm-click */
.hm-click {
  position: absolute;
  z-index: 3;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0.95;
  pointer-events: none;
  animation: hmClick 700ms cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes hmClick {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.95; border-width: 2px; }
  100% { transform: translate(-50%, -50%) scale(4);   opacity: 0;    border-width: 1px; }
}

/* — Panneau de droite : duel A/B sur 12 semaines + verdict — */
.hm-side {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid rgba(241,239,233,0.35);
  background: rgba(241,239,233,0.04);
}

.hm-duel {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 30px);
  height: 100%;
}

/* En-tête du duel : libellé variantes + plage de semaines */
.hm-duel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(241,239,233,0.25);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(241,239,233,0.5);
}
.hm-duel-head strong { color: var(--bg); font-weight: 500; }
.hm-duel-head em { font-style: normal; color: rgba(241,239,233,0.3); margin: 0 2px; }

/* Ligne variante : libellé + chiffre à gauche, graphique à droite */
.hm-duel-row {
  display: grid;
  grid-template-columns: minmax(76px, auto) 1fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
}
.hm-duel-meta { display: flex; flex-direction: column; gap: 7px; }
.hm-duel-key {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  color: rgba(241,239,233,0.55);
}
.hm-duel-num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 50px);
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: rgba(241,239,233,0.72);
  font-variant-numeric: tabular-nums;
}
.hm-duel-num--accent { color: var(--accent); }
.hm-duel-num .pct {
  font-size: 0.4em;
  letter-spacing: 0;
  vertical-align: 0.55em;
  margin-left: 1px;
  color: var(--accent);
}

/* Variante A : 12 cellules plates — aucune progression */
.hm-duel-chart--flat {
  display: flex;
  gap: clamp(3px, 0.6vw, 6px);
}
.hm-duel-cell {
  flex: 1;
  height: clamp(15px, 2.2vw, 22px);
  background: rgba(241,239,233,0.13);
  border: 1px solid rgba(241,239,233,0.28);
}

/* Variante B : histogramme ascendant + axe des semaines */
.hm-duel-chart--bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hm-duel-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 0.6vw, 6px);
  height: clamp(84px, 14vh, 132px);
}
.hm-duel-bar {
  flex: 1;
  height: var(--h, 10%);
  min-height: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.heatmap-sect.in-view .hm-duel-bar { transform: scaleY(1); }
.hm-duel-axis {
  display: flex;
  gap: clamp(3px, 0.6vw, 6px);
}
.hm-duel-axis span {
  flex: 1;
  text-align: center;
  font-size: 7.5px;
  letter-spacing: 0.02em;
  color: rgba(241,239,233,0.4);
}
@media (prefers-reduced-motion: reduce) {
  .hm-duel-bar { transition: none; transform: scaleY(1); }
}

.hm-test header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: rgba(241,239,233,0.6);
  margin-bottom: 12px;
}
.hm-test header .hm-test-id strong { color: var(--bg); margin-left: 2px; }
.hm-test-bar {
  position: relative;
  height: 8px;
  background: rgba(241,239,233,0.15);
  overflow: hidden;
}
.hm-test-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--accent);
  transition: width 200ms linear;
}
.hm-test-fill::after {
  content: '';
  position: absolute;
  right: 0; top: -2px; bottom: -2px;
  width: 2px;
  background: var(--bg);
}
.hm-test-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 9.5px;
  color: rgba(241,239,233,0.55);
}
.hm-leg {
  display: inline-block;
  width: 10px; height: 10px;
  background: rgba(241,239,233,0.5);
  margin-right: 6px;
  vertical-align: -1px;
}
.hm-leg.hm-leg-b { background: var(--accent); }

/* KPIs : 3 cellules empilées */
.hm-kpis {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(241,239,233,0.18);
}
.hm-kpis li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(241,239,233,0.18);
}
.hm-kpi-key {
  color: rgba(241,239,233,0.55);
  font-size: 10.5px;
  letter-spacing: 0.18em;
}
.hm-kpi-num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 48px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--bg);
  font-variant-numeric: tabular-nums;
}
.hm-kpi-num.flash { color: var(--accent); }
.hm-kpi-trend {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(241,239,233,0.55);
}
.hm-kpi-trend.up { color: var(--accent); }

/* Verdict — encadré orange en bas du duel, frappe une fois */
.hm-verdict {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 16px 18px;
  background: rgba(255,61,0,0.10);
  border: 1px solid var(--accent);
}
.hm-verdict > .mono { color: var(--accent); font-size: 10px; letter-spacing: 0.2em; }
.hm-verdict p { color: var(--bg); font-size: 14px; line-height: 1.5; margin: 0; }
.hm-verdict p strong { color: var(--bg); font-weight: 500; }
.hm-verdict p .blue { color: var(--bg); border-bottom: 1px solid var(--accent); }

/* Foot : note + CTA */
.hm-foot {
  margin-top: clamp(28px, 4vh, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(241,239,233,0.2);
}
.hm-foot p { color: rgba(241,239,233,0.7); }
.hm-foot .btn { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.hm-foot .btn::before { background: var(--bg); }
.hm-foot .btn:hover { color: var(--ink); }

/* — Anim d'entrée (in-view) — */
.heatmap-sect .hm-canvas-wrap,
.heatmap-sect .hm-side {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.heatmap-sect.in-view .hm-canvas-wrap { opacity: 1; transform: translateY(0); }
.heatmap-sect.in-view .hm-side        { opacity: 1; transform: translateY(0); transition-delay: 120ms; }

@media (max-width: 560px) {
  .hm-canvas-wrap { aspect-ratio: 4 / 5; }
  .hm-foot { flex-direction: column; align-items: flex-start; }
  /* Duel A/B : on empile libellé+chiffre au-dessus du graphique pleine largeur */
  .hm-duel-row { grid-template-columns: 1fr; gap: 10px; }
  .hm-duel-meta {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .hm-duel-num { line-height: 1; }
  .hm-duel-head { font-size: 9px; letter-spacing: 0.14em; }
}

/* ============================================================
   WORKS
   ============================================================ */
.works {
  padding-top: clamp(100px, 14vh, 180px);
}
.works-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  margin-bottom: 60px;
}
@media (max-width: 800px) { .works-head { grid-template-columns: 1fr; } }
.works-head h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.works-head .desc {
  color: var(--ink-soft);
  max-width: 38ch;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  row-gap: 80px;
}
.work-card {
  position: relative;
  cursor: none;
}
.work-card.span-7 { grid-column: span 7; }
.work-card.span-5 { grid-column: span 5; }
.work-card.span-6 { grid-column: span 6; }
.work-card.span-4 { grid-column: span 4; }
.work-card.span-12 { grid-column: span 12; }
@media (max-width: 800px) {
  .work-card.span-7, .work-card.span-5, .work-card.span-6, .work-card.span-4, .work-card.span-12 { grid-column: span 12; }
}

.work-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.work-shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(30,60,255,0.05) 11px 12px);
  z-index: 1;
}
.work-shot .swatch {
  position: absolute;
  inset: 8%;
  background: var(--blue);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms;
}
.work-shot .num {
  position: absolute;
  bottom: 16px; right: 16px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--bg);
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  z-index: 2;
  mix-blend-mode: difference;
}
.work-shot .tag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  color: var(--bg);
  mix-blend-mode: difference;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.work-card:hover .work-shot .swatch { transform: scale(1.06); }
.work-card:hover .arrow { transform: translate(4px, -4px); color: var(--blue); }

.work-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  gap: 16px;
}
.work-meta .title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
}
.work-meta .arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms;
}
.work-meta .sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Variant pixel mosaic for variety */
.work-shot.mosaic { background: var(--bg); }
.work-shot.mosaic .swatch { display: none; }
.work-shot.mosaic .dots {
  position: absolute; inset: 0;
}
.work-shot.dark { background: var(--ink); }
.work-shot.dark .swatch { background: var(--blue); }
.work-shot.cream .swatch { background: var(--ink); }

/* Variant photo : screenshot client cadré dans le carré, posé par-dessus la trame hatch */
.work-shot.photo { background: var(--bg); }
.work-shot.photo img {
  position: absolute;
  inset: 8%;
  width: auto;
  height: auto;
  max-width: none;
  /* couvre la zone insetée tout en restant au-dessus du hatch ::before */
  inline-size: 84%;
  block-size: 84%;
  object-fit: cover;
  object-position: top center;
  display: block;
  z-index: 2;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 400ms;
  filter: saturate(0.92) contrast(1.02);
}
.work-card:hover .work-shot.photo img { transform: scale(1.04); filter: saturate(1) contrast(1.05); }

/* Garanties + Marquee : sections retirées — styles supprimés */

/* ============================================================
   PRICING
   ============================================================ */
.pricing {
  padding-top: clamp(100px, 14vh, 180px);
}
.pricing-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: 60px;
  align-items: end;
}
@media (max-width: 800px) { .pricing-head { grid-template-columns: 1fr; } }
.pricing-head h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.pricing-head p { color: var(--ink-soft); max-width: 38ch; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  border: 1px solid var(--ink);
  padding: 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1);
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card.featured {
  background: var(--blue);
  color: var(--bg);
  border-color: var(--blue);
}
.pricing-card.featured .num,
.pricing-card.featured h3 { color: var(--bg); }
.pricing-card .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid currentColor;
  padding-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pricing-card.featured .head { border-bottom-color: rgba(241,239,233,0.4); }
.pricing-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
}
.pricing-card .price {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.pricing-card .price .sm {
  font-size: 0.4em;
  letter-spacing: 0;
  display: block;
  font-weight: 400;
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
}
.pricing-card ul {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-card.featured ul { border-top-color: rgba(241,239,233,0.4); }
.pricing-card li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.pricing-card li::before {
  content: '+';
  color: var(--blue);
  font-family: "JetBrains Mono", monospace;
}
.pricing-card.featured li::before { color: var(--bg); }

.pricing-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.pricing-card.featured .btn {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.pricing-card.featured .btn::before { background: var(--ink); }
.pricing-card.featured .btn:hover { color: var(--bg); }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
  padding-top: clamp(100px, 14vh, 180px);
}
@media (max-width: 900px) { .testimonial { grid-template-columns: 1fr; } }
.testimonial-portrait {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink);
}
.testimonial-portrait > img {
  display: block;
  width: 100%;
  height: auto;
}
.testimonial-portrait .meta {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  z-index: 2;
}
.testimonial blockquote {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.testimonial blockquote .accent { color: var(--blue); }
.testimonial cite {
  display: block;
  margin-top: 32px;
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.testimonial cite strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   TEAM
   ============================================================ */
.team {
  padding-top: clamp(100px, 14vh, 180px);
}
.team-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: 60px;
  align-items: end;
}
@media (max-width: 800px) { .team-head { grid-template-columns: 1fr; } }
.team-head h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.team-head p { color: var(--ink-soft); max-width: 36ch; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  border-top: 1px solid var(--line-strong);
  padding-top: 40px;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .team-grid { grid-template-columns: 1fr; } }

.team-member { display: flex; flex-direction: column; gap: 12px; }
.team-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--blue);
  overflow: hidden;
}
.team-portrait canvas { width: 100%; height: 100%; display: block; }
.team-portrait .id {
  position: absolute;
  top: 8px; left: 8px;
  color: var(--bg);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  z-index: 2;
}
.team-member .name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.team-member .role {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding-top: clamp(100px, 14vh, 180px);
}
.faq h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin-bottom: 60px;
  max-width: 12ch;
}
.faq-list {
  border-top: 1px solid var(--ink);
}
.faq-item {
  border-bottom: 1px solid var(--ink);
  padding: 24px 0;
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 24px;
  cursor: none;
  align-items: start;
  transition: background 200ms;
}
.faq-item:hover { background: var(--blue-soft); }
.faq-item .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  padding-top: 6px;
}
.faq-item .q {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.faq-item .toggle {
  font-family: "Space Grotesk", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  text-align: right;
  line-height: 1;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.open .toggle { transform: rotate(45deg); }
.faq-item .a {
  grid-column: 2 / 3;
  max-height: 0;
  overflow: hidden;
  color: var(--ink-soft);
  transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1), margin-top 300ms;
}
.faq-item.open .a { max-height: 400px; margin-top: 18px; }

/* ============================================================
   FOOTER — wordmark, bandeau contact, cartouche légal
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(64px, 9vh, 120px) var(--pad) 28px;
  border-top: 1px solid rgba(241,239,233,0.15);
  position: relative;
  z-index: 2;
}

/* — Wordmark géant + meta sur la même ligne d'ouverture — */
.footer-wordmark {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid rgba(241,239,233,0.18);
  padding-bottom: clamp(28px, 4vh, 48px);
  margin-bottom: clamp(48px, 7vh, 80px);
}
.ft-wm-line {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 16vw, 220px);
  letter-spacing: -0.06em;
  line-height: 0.82;
  color: var(--bg);
}
.ft-wm-line .blue { color: var(--blue); }
.ft-wm-line .stroke {
  -webkit-text-stroke: 1.5px var(--bg);
  color: transparent;
}
.ft-wm-meta {
  color: rgba(241,239,233,0.55);
  max-width: 32ch;
  text-align: right;
  font-size: 10.5px;
}
@media (max-width: 720px) {
  .footer-wordmark { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ft-wm-meta { text-align: left; }
}

/* — Bandeau contact (gros, lisible, prioritaire) — */
.footer-contact {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(48px, 7vh, 80px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid rgba(241,239,233,0.18);
  border-bottom: 1px solid rgba(241,239,233,0.18);
}
@media (max-width: 800px) { .footer-contact { grid-template-columns: 1fr; } }
.fc-block { display: flex; flex-direction: column; gap: 10px; }
.fc-block .mono { color: rgba(241,239,233,0.5); font-size: 10.5px; letter-spacing: 0.18em; }
.fc-link {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.025em;
  color: var(--bg);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  transition: color 250ms;
  width: fit-content;
}
.fc-link:hover { color: var(--blue); }
.fc-link .arrow { font-size: 0.7em; transition: transform 300ms cubic-bezier(0.16,1,0.3,1); }
.fc-link:hover .arrow { transform: translate(4px, -4px); }
.fc-block--sm .fc-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fc-socials a {
  color: rgba(241,239,233,0.85);
  transition: color 200ms;
}
.fc-socials a:hover { color: var(--blue); }

/* — Cartouche bas (légal + normes) — */
.footer-legal {
  margin-top: clamp(24px, 3vh, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fl-band {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(241,239,233,0.12);
  color: rgba(241,239,233,0.55);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.fl-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  color: rgba(241,239,233,0.55);
  font-size: 11px;
}
.fl-row a {
  color: rgba(241,239,233,0.7);
  transition: color 200ms;
}
.fl-row a:hover { color: var(--blue); }

/* ============================================================
   UTILS / IN-VIEW
   ============================================================ */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.fade-in.in-view { opacity: 1; transform: translateY(0); }
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
[data-stagger].in-view > * { opacity: 1; transform: translateY(0); }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 400ms; }

/* Print head sweep transition */
.section-sweep {
  position: relative;
}
.section-sweep::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 600ms cubic-bezier(0.7, 0, 0.3, 1);
}
.section-sweep.in-view::before { transform: scaleY(1); transform-origin: bottom; }

/* ============================================================
   POSTER · MOUNTAINS (sect.02)
   ============================================================ */
.poster-mount {
  background: var(--blue);
  color: var(--bg);
  padding: clamp(100px, 14vh, 180px) var(--pad) 0;
  border-top: 0;
  overflow: hidden;
  min-height: 100vh;
}
.poster-mount .label-tl, .poster-mount .label-tr, .poster-mount .label-bl, .poster-mount .label-br { color: rgba(241,239,233,0.7); }
.poster-mount .label-bl span, .poster-mount .label-br span { color: var(--bg); }
.poster-mount__inner {
  display: grid;
  grid-template-columns: 0.7fr 2.4fr 0.7fr;
  gap: 24px;
  align-items: stretch;
  height: calc(100vh - 200px);
  min-height: 640px;
  position: relative;
}
@media (max-width: 900px) { .poster-mount__inner { grid-template-columns: 1fr; height: auto; } }

/* Variante de FIN : poster utilisé comme endpaper / back-cover.
   Plus compacte, une seule colonne centrée, hauteur libre. */
.poster-mount.poster-mount--end {
  padding: clamp(64px, 9vh, 110px) var(--pad) clamp(36px, 5vh, 64px);
  min-height: auto;
}
.poster-mount.poster-mount--end .poster-mount__inner {
  grid-template-columns: 1fr;
  height: auto;
  min-height: 0;
  max-width: 920px;
  margin: 0 auto;
}
.poster-mount.poster-mount--end .pm-number {
  font-size: clamp(120px, 18vw, 260px);
}
.poster-mount.poster-mount--end .pm-mountains { margin-top: -4%; }
.poster-mount.poster-mount--end .pm-bottom-bar { padding-bottom: 0; }
.pm-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-top: 40px; }
.pm-block .pm-key {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  line-height: 1.6;
  border-left: 1px solid rgba(241,239,233,0.4);
  padding-left: 12px;
}
.pm-tall .pm-key { font-size: 13px; line-height: 1.5; }
.pm-right-bottom .pm-key { text-align: right; border-left: 0; border-right: 1px solid rgba(241,239,233,0.4); padding-left: 0; padding-right: 12px; }

.pm-center { position: relative; display: flex; flex-direction: column; }
.pm-number {
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-weight: 900;
  font-size: clamp(160px, 26vw, 380px);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--bg);
  text-align: center;
  margin-top: -0.05em;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.pm-number span {
  display: inline-block;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.16,1,0.3,1), opacity 900ms;
}
.poster-mount.in-view .pm-number span { transform: translateY(0); opacity: 1; }
.poster-mount.in-view .pm-number span:nth-child(2) { transition-delay: 120ms; }
.poster-mount.in-view .pm-number span:nth-child(3) { transition-delay: 240ms; }

.pm-mountains {
  width: 100%;
  flex: 1;
  margin-top: -8%;
  z-index: 2;
  position: relative;
  overflow: visible;
}
.pm-mountains .annot circle { fill: var(--bg); cursor: pointer; transition: r 200ms cubic-bezier(0.16,1,0.3,1); }
.pm-mountains .annot line { stroke: var(--bg); stroke-width: 1; opacity: 0; transition: opacity 250ms; }
.pm-mountains .annot text {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  fill: var(--bg);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 250ms;
}
.pm-mountains .annot:hover circle { r: 9; }
.pm-mountains .annot:hover line,
.pm-mountains .annot:hover text { opacity: 1; }
.pm-mountains .arcs { transform-origin: center; animation: arcSpin 60s linear infinite; }
@keyframes arcSpin { to { transform: rotate(360deg); } }

.pm-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 32px;
  border-top: 1px solid rgba(241,239,233,0.4);
  margin-top: auto;
  flex-wrap: wrap;
  gap: 12px;
}
.pm-bottom-bar .mono { color: var(--bg); }

/* Blueprint section retirée — styles supprimés */

/* ============================================================
   FISH (sect.07)
   ============================================================ */
.fish-sect {
  padding-top: clamp(100px, 14vh, 180px);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 900px) { .fish-sect { grid-template-columns: 1fr; } }
.fish-meta { display: flex; flex-direction: column; gap: 24px; }
.fish-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.fish-row:nth-child(2) { border-bottom: 0; padding-bottom: 0; }
.fish-h, .fish-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(80px, 11vw, 180px);
  letter-spacing: -0.05em;
  line-height: 0.85;
}
.fish-h { color: var(--ink); }
.fish-h2 { color: var(--blue); align-self: flex-end; }
.fish-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  margin-top: 12px;
}
.fish-data .fk { color: var(--ink-soft); margin-bottom: 6px; }
.fish-data .fv { font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.fish-data .fs { color: var(--ink-soft); margin-top: 8px; font-size: 10px; }

.fish-stage {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--ink);
  overflow: hidden;
  min-height: 520px;
}
.fish-canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.fish-corner-tl {
  position: absolute; top: 14px; left: 14px;
  z-index: 2; color: var(--ink);
}
/* (fish-corner-br retiré) */

/* ============================================================
   DEVIS (sect.10)  — replaces pricing
   ============================================================ */
.devis { padding-top: clamp(100px, 14vh, 180px); }
.devis-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: 60px;
  align-items: end;
}
@media (max-width: 800px) { .devis-head { grid-template-columns: 1fr; } }
.devis-head h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.devis-head p { color: var(--ink-soft); max-width: 38ch; }
.devis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  /* Hauteur naturelle de chaque carte (pas d'étirement à la plus haute) : la carte
     centrale « featured » est plus haute, les offres plus courtes ne gardent plus
     un grand vide entre les puces et le bouton — le bouton suit directement les points. */
  align-items: start;
}
@media (max-width: 900px) { .devis-grid { grid-template-columns: 1fr; } }
.devis-card {
  border: 1px solid var(--ink);
  padding: 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: transform 350ms cubic-bezier(0.16,1,0.3,1), background 250ms;
}
.devis-card:hover { transform: translateY(-6px); }
.devis-card.featured { background: var(--blue); color: var(--bg); border-color: var(--blue); }
.devis-card.featured h3 { color: var(--bg); }
.devis-card .head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid currentColor;
  padding-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.devis-card.featured .head { border-bottom-color: rgba(241,239,233,0.4); }
.devis-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.devis-card p { font-size: 14px; line-height: 1.5; }
.devis-card.featured p { color: rgba(241,239,233,0.85); }
.devis-card ul {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.devis-card.featured ul { border-top-color: rgba(241,239,233,0.4); }
.devis-card li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 13px; line-height: 1.45;
}
.devis-card li::before {
  content: '+';
  color: var(--blue);
  font-family: "JetBrains Mono", monospace;
}
.devis-card.featured li::before { color: var(--bg); }
.devis-card .btn { margin-top: auto; align-self: flex-start; }
.devis-card.featured .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.devis-card.featured .btn::before { background: var(--ink); }
.devis-card.featured .btn:hover { color: var(--bg); }

/* ============================================================
   MODAL — questionnaire
   ============================================================ */
.modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
}
.modal.is-open { display: block; }
.modal-bg {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.55);
  opacity: 0;
  transition: opacity 300ms;
}
.modal.is-open .modal-bg { opacity: 1; }
.modal-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 30px));
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--bg);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.16,1,0.3,1), transform 350ms cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.modal.is-open .modal-panel { opacity: 1; transform: translate(-50%, -50%); }
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid var(--ink);
  gap: 16px;
}
.modal-eyebrow {
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
}
.modal-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--ink);
  width: 36px; height: 36px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  transition: background 200ms, color 200ms;
}
.modal-close:hover { background: var(--ink); color: var(--bg); }
.modal-progress { height: 2px; background: var(--line); position: relative; }
.modal-progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: var(--blue); transition: width 400ms cubic-bezier(0.16,1,0.3,1); }
.modal-form { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.modal-body {
  padding: 28px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 280px;
}
.modal-step { display: none; animation: stepIn 400ms cubic-bezier(0.16,1,0.3,1); }
.modal-step.is-active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.modal-step h4 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.modal-step .helper { color: var(--ink-soft); font-size: 13px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field textarea, .field select {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
.field textarea { min-height: 100px; resize: vertical; }
.choice-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .choice-grid, .choice-grid.cols-3 { grid-template-columns: 1fr; } }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  cursor: none;
  font-size: 14px;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.choice input { display: none; }
.choice .box {
  width: 12px; height: 12px;
  border: 1px solid var(--ink);
  flex-shrink: 0;
  transition: background 200ms;
}
.choice.is-selected, .choice:hover { border-color: var(--blue); }
.choice.is-selected { background: var(--blue); color: var(--bg); border-color: var(--blue); }
.choice.is-selected .box { background: var(--bg); border-color: var(--bg); }

.modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-top: 1px solid var(--ink);
  gap: 16px;
}
.modal-actions { display: flex; gap: 8px; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.btn-ghost:disabled { opacity: 0.35; pointer-events: none; }
.step-counter { color: var(--ink-soft); }

.modal-thanks {
  text-align: center;
  padding: 60px 24px;
}
.modal-thanks .big {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 8vw, 120px);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--blue);
  margin-bottom: 12px;
}
.modal-thanks p { color: var(--ink-soft); }

/* Mention discrète de restauration de brouillon (modal devis) */
.draft-notice {
  display: inline-block;
  margin: 6px 0 14px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--blue);
  background: rgba(30, 60, 255, 0.08);
  border: 1px solid rgba(30, 60, 255, 0.25);
  transition: opacity 800ms ease;
}
.draft-notice.fade-out { opacity: 0; }

/* Message d'erreur d'envoi modal */
.submit-error {
  margin-top: 18px;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(255, 61, 0, 0.08);
  border: 1px solid rgba(255, 61, 0, 0.35);
}

/* Indicateur d'envoi : carré ouvert qui tourne dans le bouton (brutaliste) */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .arrow { display: none; }
.btn.is-loading::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Barre de progression en mode indéterminé pendant l'envoi (rayures animées) */
.modal-progress.is-loading .modal-progress-fill {
  width: 100% !important;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--blue) 0 8px,
    rgba(30, 60, 255, 0.45) 8px 16px
  );
  animation: progress-stripes 800ms linear infinite;
}
@keyframes progress-stripes {
  from { background-position: 0 0; }
  to   { background-position: -22px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after,
  .modal-progress.is-loading .modal-progress-fill { animation: none; }
}

/* Existing-poster animations boost */
.hero-title .word { display: inline-block; margin-right: 0.18em; }
.hero-title .line { display: block; }
.hero-title .word .ch { display: inline-block; }

/* === BOOSTED ANIMATIONS === */
.work-shot::before {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(30,60,255,0.05) 11px 12px);
}
.work-card { perspective: 800px; }
.work-shot { transition: transform 600ms cubic-bezier(0.16,1,0.3,1); }
.work-card:hover .work-shot { transform: scale(1.01) rotate(-0.4deg); }

/* Hero blob — légère croissance sur très grand écran */
@media (min-width: 1200px) {
  .hero-blob { max-width: 540px; }
}

/* ============================================================
   Micro-animations & polish (in-view, hovers fluides)
   ============================================================ */

/* Fade in plus organique pour les sections sweep */
.section-sweep > h2,
.section-sweep > .compare-head,
.section-sweep > .works-head,
.section-sweep > .devis-head {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.section-sweep.in-view > h2,
.section-sweep.in-view > .compare-head,
.section-sweep.in-view > .works-head,
.section-sweep.in-view > .devis-head {
  opacity: 1; transform: translateY(0);
}

/* Comparatif : lignes qui glissent depuis la gauche/droite */
.compare-table .ct-row > div {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1), background 350ms ease;
}
.compare-table .ct-row > div:first-child { transform: translateX(-24px); }
.compare-table .ct-row > div:last-child  { transform: translateX(24px); }
.compare.in-view .compare-table .ct-row > div { opacity: 1; transform: translateX(0); }
.compare.in-view .compare-table .ct-row:nth-child(2) > div { transition-delay: 80ms; }
.compare.in-view .compare-table .ct-row:nth-child(3) > div { transition-delay: 160ms; }
.compare.in-view .compare-table .ct-row:nth-child(4) > div { transition-delay: 240ms; }
.compare.in-view .compare-table .ct-row:nth-child(5) > div { transition-delay: 320ms; }
.compare.in-view .compare-table .ct-row:nth-child(6) > div { transition-delay: 400ms; }
.compare.in-view .compare-table .ct-row:nth-child(7) > div { transition-delay: 480ms; }

/* Stats — entrée plus elegante (le count-up démarre en parallèle via JS) */
.stat-cell {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.stats.in-view .stat-cell { opacity: 1; transform: translateY(0); }
.stats.in-view .stat-cell:nth-child(2) { transition-delay: 100ms; }
.stats.in-view .stat-cell:nth-child(3) { transition-delay: 200ms; }
.stats.in-view .stat-cell:nth-child(4) { transition-delay: 300ms; }

/* Lien header — soulignement plus net */
.site-header nav a {
  padding: 4px 0;
}

/* prefers-reduced-motion : on coupe tout */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .loader { display: none !important; }
}

/* ============================================================
   GARANTIE (sect.07) — satisfait ou remboursé + objections
   ============================================================ */
.guarantee { padding-top: clamp(100px, 14vh, 180px); }

/* — Tête : titre poster + clause + cachet — */
.guarantee-head {
  margin-bottom: clamp(48px, 7vh, 88px);
}
.gh-text {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 44px);
}
.guarantee-head h2 { font-size: clamp(52px, 8vw, 124px); }

/* Reveal organique, calé sur les autres sections sweep */
.section-sweep > .guarantee-head {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.section-sweep.in-view > .guarantee-head {
  opacity: 1;
  transform: translateY(0);
}

/* — Clause façon contrat — */
.guarantee-clause {
  border-left: 2px solid var(--blue);
  padding-left: clamp(18px, 2vw, 28px);
}
.gc-label {
  display: block;
  color: var(--blue);
  margin-bottom: 14px;
}
.guarantee-clause p {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.gc-window {
  margin-top: 14px;
  color: var(--accent);
  font-size: 11px;
}

/* — Grille des objections — */
.obj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .obj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .obj-grid { grid-template-columns: 1fr; } }

.obj-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 30px);
  background: var(--bg);
  border: 1px solid var(--ink);
  transition: background 200ms ease, transform 200ms ease;
}
.obj-card:hover {
  background: var(--blue-soft);
  transform: translateY(-4px);
}
.obj-num { color: var(--blue); }
.obj-q {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.obj-a {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}