/* =========================================================
   MÉTHODE — sablier sticky scrub (home LinkZen)
   ---------------------------------------------------------
   Track haut (480vh = 6 × 80vh) avec stage sticky 100vh.
   Au scroll, on traverse les 6 paliers N0→N5 sans quitter
   la vue : le palier actif change, le narratif swap, le grain
   descend, le rail vertical s'illumine progressivement.
   ========================================================= */
.section-methode {
  /* override padding-block du .section global — c'est le track qui gère */
  padding-block: 0;
  position: relative;
}
.methode-track {
  position: relative;
  /* 6 paliers × ~80vh + bonus respiration en sortie */
  height: clamp(420vh, 480vh, 540vh);
}
.methode-sticky {
  position: sticky;
  top: 64px;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  padding-block: clamp(40px, 6vh, 80px);
}

/* Layout split : visuel à gauche (40%) / narratif à droite (60%) */
.methode-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  width: 100%;
}
@media (max-width: 900px) {
  .methode-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- VISUEL : 6 paliers verticaux empilés ---------- */
.methode-visual {
  position: relative;
  height: clamp(360px, 60vh, 520px);
}
.methode-paliers {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: clamp(28px, 4vw, 48px);
}
.methode-palier {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  position: relative;
  transition:
    color 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  color: var(--ink-mute);
}
.methode-palier-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  font-weight: 600;
  transition: color 0.5s ease;
}
.methode-palier-rail {
  height: 1px;
  background: var(--line-strong);
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: height 0.4s var(--ease-out, ease);
}
.methode-palier-rail::after {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--c-or);
  transition: inset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.methode-palier-label {
  font-family: var(--display);
  font-stretch: 92%;
  font-weight: 540;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.018em;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.4s ease;
}

/* État ACTIF : palier en cours de lecture */
.methode-palier.is-active .methode-palier-num {
  color: var(--c-or);
}
.methode-palier.is-active .methode-palier-rail {
  height: 2px;
}
.methode-palier.is-active .methode-palier-rail::after {
  inset: 0 0 0 0;
}
.methode-palier.is-active .methode-palier-label {
  color: var(--ink);
}
/* État DÉJÀ PASSÉ : muted but visible */
.methode-palier.is-passed {
  color: var(--ink-dim);
}
.methode-palier.is-passed .methode-palier-rail::after {
  inset: 0 0 0 0;
  background: color-mix(in srgb, var(--c-or) 50%, transparent);
}
.methode-palier.is-passed .methode-palier-label {
  color: var(--ink-dim);
}
/* État NON ATTEINT : visible mais discret */
.methode-palier:not(.is-active):not(.is-passed) {
  opacity: 0.55;
}

/* GRAIN qui descend en suivant le scroll dans la colonne du num */
.methode-grain {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--c-or);
  border-radius: 50%;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--c-or) 60%, transparent),
    0 0 4px var(--c-or);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: top 0.18s linear, opacity 0.3s ease;
  opacity: 0;
  z-index: 2;
}
.section-methode.is-grain-active .methode-grain {
  opacity: 1;
}

/* ---------- NARRATIF : titre + story qui change ---------- */
.methode-narratif {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
}
.methode-eyebrow {
  letter-spacing: 0.18em;
}
.methode-title {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 540;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.methode-title em {
  font-style: normal;             /* anti-Claude */
  color: var(--c-vert-foret);
}
:root[data-theme="dark"] .methode-title em {
  color: var(--c-or);
}

/* Story qui change cinétiquement (fade-swap au scroll) */
.methode-story {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding-block: clamp(20px, 3vh, 28px);
  transition: opacity 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}
.methode-story.is-changing {
  opacity: 0.25;
}
.methode-story-num {
  font-family: var(--serif-display);     /* signe, pas mot — autorisé */
  font-style: normal;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-or);
  font-weight: 400;
}
.methode-story-label {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 540;
  font-size: clamp(24px, 2.4vw, 36px);
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-top: -4px;
}
.methode-story-text {
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 8px 0 0;
}
.methode-story-roi {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  font-weight: 600;
}

/* CTA — lien souligné brut (anti-bouton mono uppercase Anthropic) */
.methode-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 500;
  color: var(--c-vert-foret);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, var(--c-vert-foret) 50%, transparent);
  transition:
    text-decoration-color 0.3s ease,
    text-underline-offset 0.3s var(--ease-out, ease),
    color 0.3s ease,
    gap 0.3s var(--ease-out, ease);
}
:root[data-theme="dark"] .methode-cta { color: var(--c-or); text-decoration-color: color-mix(in srgb, var(--c-or) 50%, transparent); }
.methode-cta:hover {
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
  gap: 18px;
}
.methode-cta .arrow {
  transition: transform 0.3s var(--ease-out, ease);
}
.methode-cta:hover .arrow { transform: translateX(4px); }

/* Reduced-motion : on désactive le sticky scrub, on rend statique */
@media (prefers-reduced-motion: reduce) {
  .methode-track { height: auto; }
  .methode-sticky { position: relative; top: auto; min-height: 0; padding-block: 80px; }
  .methode-grain { display: none; }
}

/* =========================================================
   SECTION LE CONSTAT — fragments du chaos qui convergent
   ---------------------------------------------------------
   Storytelling cinétique : 10 fragments dispersés en absolute
   au repos. Au passage du scroll dans la section, ils sont
   "aspirés" vers le centre et s'estompent, laissant émerger
   une seule phrase claire en grand.
   ========================================================= */
.section-constat {
  padding-block: clamp(120px, 18vw, 200px);
  position: relative;
}
.constat-stage {
  position: relative;
  min-height: clamp(560px, 75vh, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 32px);
}

/* Fragments — état dispersé par défaut */
.constat-fragments {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.constat-frag {
  position: absolute;
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
  padding: 6px 12px;
  white-space: nowrap;
  user-select: none;
  opacity: 0.55;
  transition:
    transform 1.6s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 1.6s cubic-bezier(0.65, 0, 0.35, 1),
    color 0.8s ease;
  will-change: transform, opacity;
}

/* État "convergé" — déclenché par .is-mask-open (déjà géré par
   le système data-section-reveal en place) : tous les fragments
   convergent vers le centre et s'estompent */
.section-constat.is-mask-open .constat-frag {
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  opacity: 0;
  transition-delay: var(--delay, 0s);
}
.section-constat.is-mask-open .constat-frag:nth-child(1)  { --delay: 0.05s; }
.section-constat.is-mask-open .constat-frag:nth-child(2)  { --delay: 0.10s; }
.section-constat.is-mask-open .constat-frag:nth-child(3)  { --delay: 0.15s; }
.section-constat.is-mask-open .constat-frag:nth-child(4)  { --delay: 0.20s; }
.section-constat.is-mask-open .constat-frag:nth-child(5)  { --delay: 0.25s; }
.section-constat.is-mask-open .constat-frag:nth-child(6)  { --delay: 0.30s; }
.section-constat.is-mask-open .constat-frag:nth-child(7)  { --delay: 0.35s; }
.section-constat.is-mask-open .constat-frag:nth-child(8)  { --delay: 0.40s; }
.section-constat.is-mask-open .constat-frag:nth-child(9)  { --delay: 0.45s; }
.section-constat.is-mask-open .constat-frag:nth-child(10) { --delay: 0.50s; }

/* Eyebrow de la section */
.constat-eyebrow {
  position: relative;
  z-index: 3;
  letter-spacing: 0.18em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease 1.4s, transform 0.8s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 1.4s;
}
.section-constat.is-mask-open .constat-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

/* Statement central — le titre qui émerge quand les fragments disparaissent */
.constat-statement {
  position: relative;
  z-index: 3;
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 540;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.94;
  letter-spacing: -0.034em;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
  max-width: 18ch;
}
.constat-statement .line {
  display: block;
  overflow: hidden;
  padding-block: 0.18em 0.18em;
  margin-block: -0.18em -0.18em;
}
.constat-statement .line > * {
  display: inline-block;
}
.constat-statement em {
  font-style: normal;                /* anti-Claude — couleur seule */
  color: var(--c-vert-foret);
}
:root[data-theme="dark"] .constat-statement em {
  color: var(--c-or);
}
/* Reveal lignes : translate Y pleine, montent au passage de la section */
.constat-statement .line {
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-constat.is-mask-open .constat-statement .line {
  transform: translateY(0);
}
.section-constat.is-mask-open .constat-statement .line:nth-child(1) { transition-delay: 1.6s; }
.section-constat.is-mask-open .constat-statement .line:nth-child(2) { transition-delay: 1.8s; }

/* Foot — sub-paragraphe explicatif sous le statement */
.constat-foot {
  position: relative;
  z-index: 3;
  margin-top: clamp(16px, 3vh, 28px);
  max-width: 56ch;
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: var(--ink-dim);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s ease 2.3s, transform 0.9s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 2.3s;
}
.constat-foot strong {
  color: var(--ink);
  font-weight: 500;
}
.section-constat.is-mask-open .constat-foot {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .constat-stage { min-height: 520px; }
  .constat-frag { font-size: 10px; padding: 4px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .constat-frag,
  .constat-statement .line,
  .constat-eyebrow,
  .constat-foot {
    transition: none !important;
  }
  .constat-frag { opacity: 0; }   /* on cache directement les fragments */
  .constat-statement .line { transform: none; }
}

/* Ancien fil thread désactivé — remplacé par le fil d'or courbe-sablier */
#of-thread { display: none !important; }

/* =========================================================
   FIL THREAD VERTICAL — animation continue
   ---------------------------------------------------------
   Un fil fin vert sauge descend dans la marge droite du site.
   Des NŒUDS pulsent quand un cadre Open Frame entre dans le
   viewport, marquant la progression cinématique de la lecture.

   C'est le pendant "animation continue" du brief Beagle —
   un fil narratif qui ne s'interrompt jamais, qui couture les
   sections sans rupture.
   ========================================================= */

#of-thread {
  position: fixed;
  top: 0;
  bottom: 0;
  right: clamp(16px, 2.5vw, 32px);
  width: 1px;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--c-vert-sauge) 30%, transparent) 8%,
    color-mix(in srgb, var(--c-vert-sauge) 30%, transparent) 92%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.8s var(--ease-soft, ease);
}
#of-thread.is-active {
  opacity: 1;
}

#of-thread .of-thread-progress {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 0%;
  background: var(--c-vert-sauge);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-vert-sauge) 50%, transparent);
  transition: height 0.12s linear;
}

#of-thread .of-thread-node {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--c-vert-sauge);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.45;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-vert-sauge) 0%, transparent);
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity 0.5s ease,
              box-shadow 0.6s ease;
}
#of-thread .of-thread-node.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  background: var(--c-or);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-or) 18%, transparent),
              0 0 18px color-mix(in srgb, var(--c-or) 40%, transparent);
}
#of-thread .of-thread-node.is-passed {
  background: var(--c-vert-sauge);
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(0.85);
}

@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  #of-thread { display: none; }
}

/* Couleur du thread adaptée par univers (data-universe sur le thread lui-même) */
#of-thread[data-universe="home"] {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-vert-foret) 25%, transparent) 8%, color-mix(in srgb, var(--c-vert-foret) 25%, transparent) 92%, transparent 100%);
}
#of-thread[data-universe="home"] .of-thread-progress {
  background: var(--c-or);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-or) 50%, transparent);
}
#of-thread[data-universe="caseone"] {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-or) 20%, transparent) 8%, color-mix(in srgb, var(--c-or) 20%, transparent) 92%, transparent 100%);
}
#of-thread[data-universe="caseone"] .of-thread-progress {
  background: var(--c-or);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-or) 60%, transparent);
}

/* =========================================================
   SECTION INDICATOR — eyebrow sticky du chapitre courant
   ---------------------------------------------------------
   Mini-tag mono en haut-gauche fixé, change cinématiquement
   au passage de chaque section principale. Type "tableau de
   bord narratif" — l'utilisateur sait toujours où il est.
   ========================================================= */
.section-indicator {
  position: fixed;
  top: 92px;
  left: clamp(20px, 4vw, 56px);
  z-index: 50;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.section-indicator.is-active {
  opacity: 1;
  transform: translateX(0);
}
.section-indicator.is-changing {
  opacity: 0.4;
}
.section-indicator-frame {
  flex-shrink: 0;
  color: var(--accent);
}
.section-indicator-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  line-height: 1;
}
.section-indicator-name {
  color: var(--ink);
  font-weight: 500;
  transition: opacity 0.18s ease;
}
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  .section-indicator { display: none; }
}

/* =========================================================
   SECTION MASK REVEAL — clip-path cinétique
   ---------------------------------------------------------
   Chaque [data-section-reveal] s'ouvre du haut vers le bas
   au scroll (1.2s expo). Plus cinématique qu'un fade-up.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  [data-section-reveal] {
    clip-path: inset(0 0 100% 0);
    opacity: 0.6;
    transition:
      clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.8s ease;
  }
  [data-section-reveal].is-mask-open {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
  }
}

/* =========================================================
   OPTIMS PERF — fluidité scroll + GPU compositing
   ---------------------------------------------------------
   Skip rendering hors viewport, hint compositing GPU sur
   les éléments animés, pause des animations infinies cachées.
   ========================================================= */

/* content-visibility : le navigateur skip layout/paint des sections
   hors viewport. Énorme gain sur les pages denses. contain-intrinsic
   indique une hauteur estimée pour éviter le saut de scroll au layout. */
.section-constat,
.section-methode,
.section-founders,
.section,
.casefile,
.modules,
.principles,
.bignums {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
/* Hero exclu — il est always above the fold */
.hero,
.hero-identity,
.hero-caseone {
  content-visibility: visible;
}

/* will-change ciblé sur les éléments réellement animés */
.hero-identity-fog,
.hero-identity-fog::before,
.methode-grain,
.of-thread,
.of-thread-progress,
.cursor-dot,
.cursor-ring,
.constat-frag,
.section-indicator,
.founder-photo img {
  will-change: transform;
}

/* Sticky stages : translateZ pour activer compositing GPU */
.hg-sticky-stage,
.methode-sticky {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* IMPORTANT : pause des animations infinies quand hors viewport
   via animation-play-state. Combiné avec content-visibility, cela
   évite que les fog hero / pulse continuent de tourner inutilement. */
@media (prefers-reduced-motion: no-preference) {
  .hero-identity-fog::before,
  .hg-dot,
  .of-thread,
  .nav-status::before,
  .footer-manifesto-eyebrow .dot {
    /* on garde l'animation mais le content-visibility la pausera
       automatiquement quand hors viewport — pas d'override nécessaire */
  }
}

/* Réduire les transitions multiples sur les éléments hover lourds.
   Cible : éléments qui ont 3+ propriétés transitionnées simultanément. */
.btn-frame,
.methode-cta,
.hg-footer-cta {
  contain: layout;
}

/* Polaroid tilt 3D : limiter au hover, pas pendant scroll */
@media (prefers-reduced-motion: reduce) {
  .polaroid {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   TOGGLE THÈME — transition cinétique 600ms
   ---------------------------------------------------------
   Quand l'utilisateur bascule jour/nuit, fade-cross sur les
   couleurs principales (bg, ink, line) pour éviter le flash
   instantané. Posture cinématique cohérente "Slow to scale".
   ========================================================= */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  transition:
    background-color 0.6s var(--ease-soft, ease),
    color 0.6s var(--ease-soft, ease);
}

html, body, .nav, .footer,
.section, .section-dark,
.casefile, .of-frame, .card-frame, .btn-frame,
.mod, .principle, .spec, .bignum,
.brick, .axis-cell, .hg-footer,
.section-indicator,
.constat-frag,
.methode-story, .methode-palier-rail,
.founder-photo, .founder-photo-mark,
.polaroid, .agent-card,
.dossier-stamp, .hero-stamps .stamp {
  transition:
    background-color 0.6s var(--ease-soft, ease),
    color 0.6s var(--ease-soft, ease),
    border-color 0.6s var(--ease-soft, ease);
}

/* Hero fog or — visible en dark (cinématique), atténué en light
   (sinon trop bruyant sur fond ivoire). */
:root[data-theme="light"] .hero-identity-fog::before {
  opacity: 0.28;          /* descend de 0.6-1 à 0.28 */
}
:root[data-theme="dark"] .hero-identity-fog::before {
  /* défaut — visible cinématique */
}

/* Photos founders — duotone reste pareil dans les 2 modes (signature) */

/* Toggle button : icône sun/moon avec rotation au switch */
.theme-toggle svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover svg {
  transform: rotate(20deg);
}

@media (prefers-reduced-motion: reduce) {
  :root, :root[data-theme="light"], :root[data-theme="dark"],
  html, body, .nav, .footer, .section, .casefile, .of-frame,
  .card-frame, .btn-frame, .mod, .principle, .spec, .bignum,
  .brick, .axis-cell, .hg-footer, .section-indicator,
  .constat-frag, .methode-story, .methode-palier-rail,
  .founder-photo, .polaroid, .agent-card,
  .dossier-stamp, .hero-stamps .stamp {
    transition: none !important;
  }
}

/* =========================================================
   FOUNDERS — TAGS QUI REMONTENT SUR LA PHOTO AU SCROLL
   ---------------------------------------------------------
   Animation signature : au scroll dans la section humains, les
   compétences (.founder-tags) translatent vers le haut et viennent
   se poser sur la photo en bas. Effet "les compétences viennent
   habiter le portrait" — anti-listing froid.

   Piloté en JS via custom property --tags-rise (0 → 1) qui
   représente la progression scroll dans la section.
   ========================================================= */

.section-founders [data-founders-track],
.section-founders {
  --tags-rise: 0;                          /* 0 (repos) → 1 (sur la photo) */
}

.section-founders .founder {
  position: relative;                       /* permet absolute si besoin */
}

.section-founders .founder-tags {
  position: relative;
  z-index: 4;
  margin-top: 12px;
  /* Translation négative pilotée par --tags-rise.
     -360px = montée typique pour passer au-dessus du bio + role + meta
     et arriver visuellement EN BAS de la photo. */
  transform: translateY(calc(var(--tags-rise) * -360px));
  transition: transform 0.18s linear;       /* lerp au scroll, pas saute */
  will-change: transform;
}

/* Quand les tags sont au-dessus (--tags-rise approche 1),
   leur fond devient translucide pour bien se lire sur la photo */
.section-founders .founder-tags li {
  background: color-mix(in srgb, var(--bg) calc((1 - var(--tags-rise)) * 100%), transparent);
  border-color: color-mix(in srgb, var(--line-strong) calc((1 - var(--tags-rise)) * 60% + 40%), var(--accent));
  color: color-mix(in srgb, var(--ink-mute) calc((1 - var(--tags-rise)) * 100%), var(--accent));
  backdrop-filter: blur(calc(var(--tags-rise) * 8px));
  -webkit-backdrop-filter: blur(calc(var(--tags-rise) * 8px));
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    backdrop-filter 0.3s ease;
}

/* Hover des tags pendant qu'ils sont sur la photo : amplification accent */
.section-founders.is-tags-on-photo .founder-tags li:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* Mobile + reduced-motion : les tags restent sous le bio (pas d'animation) */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .section-founders .founder-tags {
    transform: none !important;
  }
  .section-founders .founder-tags li {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* =========================================================
   FIL D'OR — trame de fond signature LinkZen
   ---------------------------------------------------------
   Un trait or fin descend en courbe-sablier sur tout le viewport.
   Position fixed = toujours visible. Tracé progressif au scroll
   via stroke-dashoffset (piloté par JS scrollY/docHeight).
   6 nœuds pulsants s'illuminent au passage des sections-clés.
   La trame "tire" le site visuellement, donne le sens de la
   trajectoire (cohérent avec le sablier OpenFrame N0→N5).
   ========================================================= */
/* =========================================================
   RAILS OPEN FRAME — L'HORIZON QUI RESPIRE
   ---------------------------------------------------------
   Deux rails fixed (haut + bas) qui matérialisent le cadre
   Open Frame en permanence. Position par défaut : 14vh / 86vh.
   Sur la section Méthode (col du sablier), les rails se
   resserrent vers le centre (32vh / 68vh) — incarnation
   cinétique du col du sablier sur toute la page.
   ========================================================= */
/* of-rails désactivés (audit user 2026-05-09 : "ligne dorée
   en haut polluait l'expérience"). HTML retiré de _base.html
   et JS de linkzen.js. CSS conservé en stub vide pour
   compatibilité au cas où classe utilisée ailleurs. */
.of-rail { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .of-rail { display: none !important; }
}

/* =========================================================
   FOOTER MANIFESTO — typo verrouillée sur Bricolage Grotesque
   ---------------------------------------------------------
   Le footer est universel à toutes les pages. Sur la page CaseOne
   (data-surface="caseone"), la règle [data-surface="caseone"] .h2
   force Special Elite (typewriter) sur tous les h2 — y compris
   .footer-manifesto-text (qui est un h2). On override.
   ========================================================= */
.footer-manifesto-text,
[data-surface] .footer-manifesto-text {
  font-family: var(--display) !important;
  font-stretch: 90%;
  font-weight: 540;
  letter-spacing: -0.034em;
  line-height: 0.92;
}
.footer-manifesto-text em,
[data-surface] .footer-manifesto-text em {
  font-family: var(--display) !important;
  font-style: normal !important;
  font-weight: 540;
  color: var(--c-or);
  letter-spacing: inherit;
}

/* =========================================================
   NAV FRAME TRIGGER — petit bouton qui ouvre le frame-panel
   ---------------------------------------------------------
   Discret (vert sauge), placé après le brand-mark dans la nav.
   Click ouvre une sub-window contextuelle latérale.
   ========================================================= */
.nav-frame-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 64px;
  padding: 0 10px;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-left: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.nav-frame-trigger:hover {
  background: var(--bg-soft);
  color: var(--accent);
}
.nav-frame-trigger svg {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 16px;
}

/* =========================================================
   FRAME PANEL — sub-window latérale ouverte depuis le logo
   ---------------------------------------------------------
   Slide depuis la gauche (450ms cubic ease-out), encadrée par
   4 coins en équerre (signature Open Frame). Contient une
   navigation contextuelle, contact, status. Phase 2 (rollback
   facile via git revert du commit isolé).
   ========================================================= */
.frame-panel-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--c-encre) 55%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 4999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.frame-panel-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.frame-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: clamp(320px, 40vw, 520px);
  background: var(--bg);
  z-index: 5000;
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.25, 1);
  pointer-events: none;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.frame-panel.is-open {
  transform: translateX(0);
  pointer-events: all;
}

/* 4 coins en équerre — signature Open Frame sur le panel lui-même */
.frame-panel-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 2;
}
.frame-panel-corner--tl {
  top: 28px; left: 28px;
  border-top: 1.5px solid var(--accent);
  border-left: 1.5px solid var(--accent);
}
.frame-panel-corner--tr {
  top: 28px; right: 28px;
  border-top: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
}
.frame-panel-corner--bl {
  bottom: 28px; left: 28px;
  border-bottom: 1.5px solid var(--accent);
  border-left: 1.5px solid var(--accent);
}
.frame-panel-corner--br {
  bottom: 28px; right: 28px;
  border-bottom: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
}

.frame-panel-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  z-index: 3;
  transition: border-color 0.25s, color 0.25s, transform 0.3s var(--ease-out, ease);
}
.frame-panel-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(90deg);
}

.frame-panel-inner {
  position: relative;
  height: 100%;
  padding: clamp(70px, 9vw, 110px) clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  z-index: 1;
}

.frame-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.frame-panel-eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: frame-panel-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes frame-panel-dot-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.frame-panel-title {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 540;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.026em;
  color: var(--ink);
  line-height: 0.95;
}

.frame-panel-tag {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-dim);
  max-width: 30ch;
  line-height: 1.5;
}

.frame-panel-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.frame-panel-nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px) 0;
  font-family: var(--sans);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  transition: color 0.25s, padding-left 0.3s var(--ease-out, ease);
  position: relative;
}
.frame-panel-nav a::before {
  content: attr(data-num);
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s ease, left 0.3s var(--ease-out, ease);
}
.frame-panel-nav a:hover {
  color: var(--accent);
  padding-left: 16px;
}
.frame-panel-nav a:hover::before {
  opacity: 1;
  left: -8px;
}
.frame-panel-nav-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
}

.frame-panel-foot {
  margin-top: auto;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.frame-panel-foot-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.frame-panel-cta {
  font-family: var(--display);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: color 0.25s, gap 0.25s var(--ease-out, ease);
}
.frame-panel-cta .arrow {
  color: var(--accent);
  transition: transform 0.25s var(--ease-out, ease);
}
.frame-panel-cta:hover {
  color: var(--accent);
  gap: 14px;
}
.frame-panel-cta:hover .arrow {
  transform: translateX(4px);
}

/* Mobile : panel pleine largeur */
@media (max-width: 640px) {
  .frame-panel { width: 100%; }
}

/* Reduced motion : transitions instantanées */
@media (prefers-reduced-motion: reduce) {
  .frame-panel,
  .frame-panel-backdrop,
  .frame-panel-close,
  .frame-panel-nav a,
  .frame-panel-cta { transition: none !important; }
  .frame-panel-eyebrow .dot { animation: none; }
}

/* =========================================================
   CURSEUR BRANDÉ — Open Frame qui épouse les espaces
   ---------------------------------------------------------
   Le curseur est le logo Open Frame (4 coins en équerre). Au
   repos, petit cadre 32×32 qui suit la souris avec inertie.
   Sur hover d'un élément interactif, le cadre s'étire pour
   l'envelopper (avec padding) — signature Awwwards.

   Coexiste avec :
   - .cursor-dot : point précis (pas changé)
   - .cursor-ring : legacy v2 désactivé (remplacé par .cursor-frame)
   ========================================================= */
.cursor-ring { display: none !important; }

/* Cursor au format logo OpenFrame asymétrique : 2 rails (haut+bas pleine
   largeur via ::before/::after) + 4 pattes verticales aux coins, longues
   en TL+BR (56%) et courtes en TR+BL (19%) — rotational symmetry 180°. */
.cursor-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out, ease), width 0.3s var(--ease-out, ease), height 0.3s var(--ease-out, ease);
  --cursor-color: var(--c-vert-sauge-bright);
  --cursor-stroke: 1.5px;
}
.cursor-frame.is-active { opacity: 1; }
@supports (mix-blend-mode: difference) {
  .cursor-frame { mix-blend-mode: difference; }
  .cursor-frame.is-hugging { mix-blend-mode: normal; }
}

/* Rails haut + bas pleine largeur */
.cursor-frame::before,
.cursor-frame::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: var(--cursor-stroke);
  background: var(--cursor-color);
  transition: height 0.3s var(--ease-out, ease), background-color 0.3s var(--ease-out, ease);
}
.cursor-frame::before { top: 0; }
.cursor-frame::after  { bottom: 0; }

/* Pattes verticales asymétriques aux 4 coins */
.cursor-frame-corner {
  position: absolute;
  width: var(--cursor-stroke);
  background: var(--cursor-color);
  transition: width 0.3s var(--ease-out, ease), height 0.3s var(--ease-out, ease), background-color 0.3s var(--ease-out, ease);
}
.cursor-frame-corner--tl { top: 0;    left: 0;  height: 56.25%; }   /* longue */
.cursor-frame-corner--tr { top: 0;    right: 0; height: 18.75%; }   /* courte */
.cursor-frame-corner--br { bottom: 0; right: 0; height: 56.25%; }   /* longue */
.cursor-frame-corner--bl { bottom: 0; left: 0;  height: 18.75%; }   /* courte */

/* Mode hugging : épaissir un peu pour signaler l'interaction */
.cursor-frame.is-hugging { --cursor-stroke: 2px; }

/* CaseOne : cursor or (lumière de loupe) */
[data-surface="caseone"] .cursor-frame { --cursor-color: var(--c-or); }

/* Désactivation tactile + reduced motion */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-frame { display: none; }
}

/* =========================================================
   PRELOADER — cinématique d'arrivée robuste
   ---------------------------------------------------------
   Reactivé après "j'aimais bien l'animation". 4 garde-fous JS
   anti-blocage. La classe .is-done sur l'élément le ferme via
   opacity + visibility + slight translate (pas de clip-path
   qui posait problème). Animations en pure CSS (forwards) +
   final state explicite pour ne jamais rester invisibles si
   le close arrive avant la fin des animations.
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--c-encre);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 44px);
  cursor: pointer;
  transition: opacity 0.6s ease, visibility 0.6s, transform 0.7s ease;
  will-change: opacity, transform;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2vh);
}

.preloader-frame {
  position: relative;
  width: clamp(180px, 22vw, 260px);
  height: clamp(120px, 14vw, 170px);
}
.preloader-frame-rail,
.preloader-frame-leg {
  position: absolute;
  background: var(--c-vert-sauge-bright);
  display: block;
}
.preloader-frame-rail {
  left: 0;
  right: 0;
  height: 5px;
  transform: scaleX(0);
  transform-origin: center;
  animation: pl-rail 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.preloader-frame-rail--top    { top: 0; }
.preloader-frame-rail--bottom { bottom: 0; animation-delay: 0.18s; }
@keyframes pl-rail {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Pattes asymétriques fidèles au logo OpenFrame :
   TL + BR longues (56.25% du frame), TR + BL courtes (18.75%). */
.preloader-frame-leg {
  width: 5px;
  opacity: 0;
  transform: translateY(-8px);
  animation: pl-leg 0.4s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
.preloader-frame-leg--tl { top: 0;    left: 0;  height: 56.25%; animation-delay: 0.45s; }   /* longue */
.preloader-frame-leg--tr { top: 0;    right: 0; height: 18.75%; animation-delay: 0.55s; }   /* courte */
.preloader-frame-leg--br { bottom: 0; right: 0; height: 56.25%; animation-delay: 0.65s; }   /* longue */
.preloader-frame-leg--bl { bottom: 0; left: 0;  height: 18.75%; animation-delay: 0.75s; }   /* courte */
@keyframes pl-leg {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.preloader-text {
  display: flex;
  gap: clamp(2px, 0.4vw, 6px);
  font-family: var(--display);
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 540;
  letter-spacing: 0.18em;
  color: var(--c-papier-warm);
}
.preloader-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  animation: pl-letter 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.preloader-text span:nth-child(1) { animation-delay: 0.95s; }
.preloader-text span:nth-child(2) { animation-delay: 1.03s; }
.preloader-text span:nth-child(3) { animation-delay: 1.11s; }
.preloader-text span:nth-child(4) { animation-delay: 1.19s; }
.preloader-text span:nth-child(5) { animation-delay: 1.27s; }
.preloader-text span:nth-child(6) { animation-delay: 1.35s; }
.preloader-text span:nth-child(7) { animation-delay: 1.43s; }
@keyframes pl-letter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.preloader-tag {
  font-family: var(--mono);
  font-size: clamp(10px, 0.9vw, 11px);
  letter-spacing: 0.32em;
  color: color-mix(in srgb, var(--c-papier-warm) 50%, transparent);
  opacity: 0;
  animation: pl-tag 0.6s ease 1.55s forwards;
}
@keyframes pl-tag {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Bouton ENTRER — porte d'entrée explicite vers le site
   Apparaît après le mot LINKZEN et le tag (delay 2.1s)
   Pulse subtle au repos pour attirer le regard */
.preloader-enter {
  position: absolute;
  bottom: clamp(60px, 9vh, 110px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-vert-sauge-bright);
  background: transparent;
  border: 1px solid var(--c-vert-sauge-bright);
  cursor: pointer;
  opacity: 0;
  animation: pl-enter-fade 0.7s ease 2.1s forwards,
             pl-enter-pulse 2.4s ease-in-out 3.0s infinite;
  transition:
    color 0.25s ease,
    background-color 0.3s ease,
    gap 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s ease,
    box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}
.preloader-enter:hover {
  color: var(--c-encre);
  background: var(--c-vert-sauge-bright);
  gap: 18px;
  box-shadow: 0 0 32px color-mix(in srgb, var(--c-vert-sauge-bright) 50%, transparent);
}
.preloader-enter-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.preloader-enter:hover .preloader-enter-arrow {
  transform: translateX(6px);
}
@keyframes pl-enter-fade {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes pl-enter-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-vert-sauge-bright) 40%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-vert-sauge-bright) 0%, transparent); }
}

/* Cursor sur le préloader entier reste pointer pour signaler
   que click ailleurs aussi déclenche l'entrée */
.preloader { cursor: pointer; }
.preloader-enter:hover { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .preloader, .preloader * {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  .preloader-frame-rail { transform: scaleX(1); }
  .preloader-frame-leg { opacity: 1; transform: none; }
  .preloader-text span { opacity: 1; transform: none; }
  .preloader-tag { opacity: 1; }
}

/* =========================================================
   PAGE TRANSITION — overlay glissant entre pages internes
   ---------------------------------------------------------
   Au clic sur un lien /linkzen/* : l'overlay encre glisse de
   bas en haut (550ms), navigation, puis sur la page d'arrivée
   il glisse de haut en bas pour révéler le contenu (650ms).
   Continuité bipolaire LinkZen → OpenFrame → CaseOne sans
   coupure brutale.
   ========================================================= */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: var(--c-encre);
  opacity: 0;
  /* display: none par défaut pour empêcher le rendu des 15 cadres 3D
     enfants (perspective + transform-style: preserve-3d créent un
     contexte de compositing qui peut buguer sur certains forks Chromium
     type Comet, même avec opacity:0 + visibility:hidden). JS ajoute
     .is-entering avant la transition. */
  display: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-transition.is-entering {
  display: block;
  opacity: 1;
}
.page-transition-stage {
  position: absolute;
  inset: 0;
  perspective: 700px;
  perspective-origin: center center;
  overflow: hidden;
}
.page-transition-camera {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.page-transition-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              transparent 25%,
              rgba(11, 22, 32, 0.6) 65%,
              rgba(11, 22, 32, 0.95) 100%);
  pointer-events: none;
  z-index: 5;
}
/* Flash final qui scinde la transition (white-out → reveal page suivante) */
.page-transition-flash {
  position: absolute;
  inset: 0;
  background: var(--c-papier-warm);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  transition: opacity 200ms ease-out;
}
.page-transition.is-flashing .page-transition-flash { opacity: 0.9; }

/* =========================================================
   TUNNEL PASSAGE — section sticky scroll dans la home
   ---------------------------------------------------------
   Entre Constat et Deux marques : 180vh de scroll, viewport sticky
   100vh à l'intérieur, le user traverse le tunnel en scrollant.
   JS pilote camera Z via scroll progress (initTunnelPassage).
   ========================================================= */
.tunnel-passage {
  position: relative;
  z-index: 2;          /* au-dessus du thread-logo (z-index 0) */
  height: 180vh;
  background: var(--c-encre);
  border-top: none !important;
  overflow: visible;
  isolation: isolate;
}
.tunnel-passage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--c-encre);
  perspective: 700px;
  perspective-origin: center center;
}
.tunnel-passage-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tunnel-passage-camera {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.tunnel-passage-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              transparent 30%,
              rgba(11, 22, 32, 0.55) 70%,
              rgba(11, 22, 32, 0.92) 100%);
  pointer-events: none;
  z-index: 5;
}
.tunnel-passage-text {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  pointer-events: none;
  padding: 0 clamp(20px, 5vw, 80px);
}
.tunnel-passage-text .tp-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-papier-warm) 50%, transparent);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.tunnel-passage-text .tp-title {
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 540;
  font-stretch: 88%;
  letter-spacing: -0.034em;
  line-height: 0.94;
  color: var(--c-papier-warm);
  margin: 0;
  text-shadow: 0 0 24px rgba(11, 22, 32, 0.55);
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1),
              text-shadow 800ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}
.tunnel-passage-text .tp-title .accent { color: var(--c-or); }
.tunnel-passage-text .tp-hint {
  margin-top: clamp(28px, 5vh, 56px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-papier-warm) 38%, transparent);
  transition: opacity 600ms ease;
}

/* État filigrane : déclenché par JS quand progress > 0.7 du scroll
   section (logo passe en filigrane derrière, texte devient sujet).
   Le titre s'agrandit légèrement et gagne en présence ; le hint
   "↓ Continuez à scroller" s'efface. */
.tunnel-passage[data-tp-state="filigrane"] .tp-title {
  transform: scale(1.06);
  text-shadow: 0 0 36px rgba(11, 22, 32, 0.85);
}
.tunnel-passage[data-tp-state="filigrane"] .tp-hint {
  opacity: 0;
}
.tunnel-passage[data-tp-state="filigrane"] .tunnel-passage-vignette {
  background: radial-gradient(ellipse at center,
              transparent 35%,
              rgba(11, 22, 32, 0.75) 70%,
              rgba(11, 22, 32, 0.95) 100%);
  transition: background 600ms ease;
}

/* Cadre individuel du tunnel passage — généré par JS (16 instances) */
.tp-passage-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vmin;
  height: 50vmin;
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform, opacity;
}
.tp-passage-frame svg { width: 100%; height: 100%; display: block; }
.tp-passage-frame rect { fill: currentColor; }
.tp-passage-frame--c0 { color: var(--c-papier-warm); }
.tp-passage-frame--c1 { color: var(--c-or); }
.tp-passage-frame--c2 { color: var(--c-vert-sauge); }
.tp-passage-frame--c3 { color: color-mix(in srgb, var(--c-papier-warm) 60%, var(--c-or) 40%); }
.tp-passage-frame--station { filter: drop-shadow(0 0 24px var(--c-or)); }

/* Reduced motion : passage statique (le tunnel ne court pas, mais le
   contenu texte reste lisible et l'utilisateur peut scroller normalement). */
@media (prefers-reduced-motion: reduce) {
  .tunnel-passage { height: 100vh; }
  .tunnel-passage-camera { display: none; }
}

/* Cadre individuel du tunnel — généré par JS (15 instances) */
.pt-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vmin;
  height: 50vmin;
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform, opacity;
}
.pt-frame svg { width: 100%; height: 100%; display: block; }
.pt-frame rect { fill: currentColor; }
.pt-frame--c0 { color: var(--c-papier-warm); }
.pt-frame--c1 { color: var(--c-or); }
.pt-frame--c2 { color: var(--c-vert-sauge); }
.pt-frame--c3 { color: color-mix(in srgb, var(--c-papier-warm) 60%, var(--c-or) 40%); }
.pt-frame--station { filter: drop-shadow(0 0 24px var(--c-or)); }

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none !important; }
}

/* =========================================================
   SCROLL PROGRESS NARRATIF — fil discret en haut viewport
   ---------------------------------------------------------
   Une barre fine vert sauge qui se remplit au scroll, +
   un mini compteur de progression dans le coin. Sensation
   de lecture éditoriale (énergie Beagle/Podio).
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--c-vert-sauge-bright) 12%, transparent);
  z-index: 99;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  background: var(--c-vert-sauge-bright);
  width: 0%;
  transition: width 0.06s linear;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c-vert-sauge-bright) 40%, transparent);
}

[data-surface="caseone"] .scroll-progress {
  background: color-mix(in srgb, var(--c-or) 12%, transparent);
}
[data-surface="caseone"] .scroll-progress-bar {
  background: var(--c-or);
  box-shadow: 0 0 8px color-mix(in srgb, var(--c-or) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress-bar { transition: none; }
}

/* =========================================================
   CURSEUR NARRATIF — labels contextuels selon zone hover
   ---------------------------------------------------------
   Le ring v2 (#cursor-ring) reçoit des classes additionnelles
   .is-internal / .is-external / .is-grab / .is-read selon la
   zone survolée. On ajoute des labels via ::after.
   ========================================================= */
.cursor-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--c-vert-sauge-bright);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out);
}
.cursor-ring.is-internal::after { content: '→'; opacity: 1; font-size: 18px; line-height: 1; }
.cursor-ring.is-external::after { content: '↗'; opacity: 1; font-size: 18px; line-height: 1; }
.cursor-ring.is-mailto::after   { content: '✉'; opacity: 1; font-size: 14px; line-height: 1; }
.cursor-ring.is-anchor::after   { content: '↓'; opacity: 1; font-size: 18px; line-height: 1; }

[data-surface="caseone"] .cursor-ring::after { color: var(--c-or); }

/* =========================================================
   NAV REFACTOR (audit user 2026-05-09 — agent cohérence)
   ---------------------------------------------------------
   Quick Win sort de la séquence numérique 00/01/02/03 et
   devient une porte express assumée dans la zone droite,
   sans cumuler avec le CTA "Prendre RDV". Mobile refondu
   en sections (Marques · Démarrer) avec eyebrows.
   ========================================================= */

/* DESKTOP — Quick Win express (zone droite) */
.nav-quick {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
}
.nav-quick::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav-quick:hover::after { transform: scaleX(1); }
.nav-quick:hover { color: var(--accent); }
.nav-quick-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 2px 6px;
  transition: border-color 0.25s, color 0.25s;
}
.nav-quick:hover .nav-quick-tag {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 980px) {
  .nav-quick { display: none; }
}

/* MOBILE — sections nommées avec eyebrows */
.nav-mobile-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.nav-mobile-section:last-of-type { border-bottom: none; }

.nav-mobile-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
  display: block;
}

.nav-mobile-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  font-weight: 400;
  margin-left: 8px;
}

.nav-mobile-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 10px 0;
  text-decoration: none;
}
.nav-mobile-quick .accent {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 14px 16px;
  margin-top: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s;
}
.nav-mobile-cta:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
  border-color: var(--accent);
}
.nav-mobile-cta .arrow {
  transition: transform 0.25s var(--ease-out);
}
.nav-mobile-cta:hover .arrow { transform: translateX(4px); }

/* Active state mobile : page courante avec barre or à gauche */
.nav-mobile a.active {
  color: var(--accent);
  position: relative;
  padding-left: 14px;
}
.nav-mobile a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
}

/* =========================================================
   HEAD-ROW — pattern responsive pour les paires titre + lead
   ---------------------------------------------------------
   Remplace les inline style="display:grid;grid-template-columns:
   1fr 1fr;gap:64px" qui ne se stackaient pas en mobile.
   ========================================================= */
.head-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 48px;
  align-items: stretch;
}
.head-row > :last-child { align-self: end; }

@media (max-width: 768px) {
  .head-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }
  .head-row > :last-child { align-self: start; }
}

/* =========================================================
   GLOBAL MOBILE TUNING — viewport < 768px
   ---------------------------------------------------------
   Ajustements transverses pour les inline grids legacy non
   convertis et pour la respiration verticale en mobile.
   ========================================================= */
@media (max-width: 768px) {
  /* Tous les grids inline 2 colonnes des templates → stack */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Hero padding réduit en mobile */
  .hero,
  .hero-identity,
  .hero-caseone {
    padding-top: clamp(80px, 12vh, 120px) !important;
    padding-bottom: clamp(60px, 8vh, 100px) !important;
  }

  /* Container padding mobile */
  .container { padding-inline: 18px; }

  /* Sections padding réduit */
  .section { padding-block: clamp(56px, 10vw, 96px); }

  /* Doc-row : stack vertical */
  .doc-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* Nav mobile : on garde le burger d'origine, on cache liens et statut */
  .nav-links { display: none; }
  .nav-status { display: none; }
  .nav-cta { font-size: 11px; padding: 10px 14px; }
}

/* =========================================================
   PARC USE CASES — labels de groupe pour le catalogue OpenFrame
   ---------------------------------------------------------
   Sépare visuellement les 12 use cases en 6 groupes (directions).
   ========================================================= */
.usecases-group {
  margin-top: clamp(32px, 5vh, 56px);
  margin-bottom: 16px;
}
.usecases-group:first-of-type {
  margin-top: 24px;
}
.usecases-group-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 14px;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
}
.usecases-group-label .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* =========================================================
   USECASE-CARD — design éditorial premium
   ---------------------------------------------------------
   Refonte 2026-05-11 : chaque card devient un objet visuel
   identifiable, pas une colonne de texte parmi d'autres.
   - Lettre grecque géante en watermark top-left (signature)
   - Direction eyebrow + .mod-id repositionnés
   - .mod-kpi en BLOC central dramatique
   - Border-top accent + border-left asymétrique (signature OpenFrame)
   - Hover : élève + frame accent or qui apparaît
   ========================================================= */
.usecase-card {
  position: relative;
  padding: clamp(40px, 4vw, 56px) clamp(28px, 3vw, 40px) clamp(32px, 3vw, 40px);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 2%, transparent) 0%,
    transparent 60%);
  isolation: isolate;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  overflow: hidden;
}

/* Lettre grecque en watermark — gros chiffre serif italique
   en arrière-plan top-left, basse opacity, identifie la card. */
.usecase-card .mod-id {
  position: relative;
  padding-left: clamp(56px, 7vw, 88px);
  min-height: clamp(56px, 7vw, 88px);
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.usecase-card .mod-id::before {
  content: attr(data-i);
  position: absolute;
  top: -8px;
  left: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 380;
  font-stretch: 75%;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: none;
  /* Garde seulement la première lettre grecque, masque le reste */
  overflow: hidden;
  max-width: 1.2ch;
  white-space: nowrap;
  z-index: 1;
  transition: color 0.4s ease, transform 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Titre plus large pour faire le poids visuel */
.usecase-card .mod-title {
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.024em;
  line-height: 1.05;
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* KPI bloc dramatique — c'est LE chiffre qui doit POP */
.usecase-card .mod-kpi {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 540;
  font-stretch: 88%;
  letter-spacing: -0.024em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 18%, transparent);
  position: relative;
}
.usecase-card .mod-kpi::before {
  content: 'PERFORMANCE';
  position: absolute;
  top: -8px;
  left: 0;
  background: var(--bg);
  padding-right: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.usecase-card .mod-kpi strong {
  color: var(--accent);
  font-weight: 600;
  font-size: 1.4em;
  font-stretch: 75%;
  letter-spacing: -0.034em;
  display: inline-block;
  vertical-align: baseline;
}
.usecase-card .mod-kpi .kpi-sep {
  display: inline-block;
  margin: 0 8px;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  font-weight: 300;
  font-size: 0.9em;
  vertical-align: baseline;
}

/* Body smaller, lisible mais secondaire au KPI */
.usecase-card .mod-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* Footer : badge ROI doré + arrow */
.usecase-card .mod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.usecase-card .usecase-roi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  background: color-mix(in srgb, var(--c-or) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-or) 55%, transparent);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.usecase-card .mod-foot::after {
  content: '→';
  font-family: var(--mono);
  font-size: 18px;
  color: color-mix(in srgb, var(--accent) 60%, transparent);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover : élève + signature gold sur ROI + lettre plus présente + arrow */
.usecase-card:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-or) 6%, transparent) 0%,
    color-mix(in srgb, var(--c-or) 2%, transparent) 60%);
  border-top-color: var(--c-or);
  transform: translateY(-2px);
}
.usecase-card:hover .mod-id::before {
  color: var(--c-or);
  transform: translateY(-2px) scale(1.04);
}
.usecase-card:hover .usecase-roi {
  background: var(--c-or);
  color: var(--c-encre);
  border-color: var(--c-or);
}
.usecase-card:hover .mod-foot::after {
  color: var(--c-or);
  transform: translateX(4px);
}

/* Mode dark : ajustements lisibilité */
:root[data-theme="dark"] .usecase-card .mod-kpi { color: var(--c-papier-warm); }
:root[data-theme="dark"] .usecase-card .mod-kpi::before { background: var(--bg); }

/* =========================================================
   SECTION SUR-MESURE — process 3 étapes + engagements
   ---------------------------------------------------------
   Pilier différenciant OpenFrame : construction de use case
   sur-mesure en 2 semaines garanti. 3 étapes timeline + 4
   engagements en bandeau.
   ========================================================= */
.section-surmesure .surmesure-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(48px, 6vh, 72px);
  position: relative;
}
.section-surmesure .surmesure-step {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 32px);
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 3%, transparent) 100%);
  transition: background 0.4s ease;
}
.section-surmesure .surmesure-step:last-child { border-right: none; }
.section-surmesure .surmesure-step:hover {
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--c-or) 8%, transparent) 100%);
}
.surmesure-step-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.surmesure-step-num {
  font-family: var(--serif-display);
  font-stretch: 75%;
  font-weight: 380;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.surmesure-step-time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.surmesure-step-title {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 540;
  font-stretch: 88%;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 14px;
}
.surmesure-step-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 18px;
}
.surmesure-step-body strong { color: var(--ink); font-weight: 500; }
.surmesure-step-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px dashed var(--line);
  padding-top: 16px;
}
.surmesure-step-bullets li {
  position: relative;
  padding-left: 18px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.surmesure-step-bullets li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -2px;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

@media (max-width: 900px) {
  .section-surmesure .surmesure-process { grid-template-columns: 1fr; }
  .section-surmesure .surmesure-step { border-right: none; border-bottom: 1px solid var(--line); }
  .section-surmesure .surmesure-step:last-child { border-bottom: none; }
}

/* Bandeau 4 engagements en bas de la section sur-mesure */
.surmesure-engagements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(56px, 7vh, 88px);
  background: var(--line);
  border: 1px solid var(--line);
}
.surmesure-engagement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  background: var(--bg);
  text-align: center;
}
.surmesure-engagement-num {
  font-family: var(--serif-display);
  font-stretch: 75%;
  font-weight: 380;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
}
.surmesure-engagement-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .surmesure-engagements { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   STORE — App Store du dirigeant (37 use cases)
   ---------------------------------------------------------
   Boutique premium 2026, charte LinkZen stricte (or chirurgical
   <5%, sauge dominant, atmosphère cinématique). Featured tier S
   en hero, grid filtré par axe, cards avec mini-frame OpenFrame
   en icône signature.
   ========================================================= */

/* ---- Hero ---- */
.store-hero {
  padding-top: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.store-hero-title {
  margin: clamp(40px, 6vh, 72px) 0 clamp(32px, 5vh, 56px);
}
.store-hero-title .display {
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 540;
  font-stretch: 85%;
  letter-spacing: -0.034em;
  line-height: 0.92;
  margin: 0;
}
.store-hero-title .display .line { display: block; }
.store-hero-title .display .accent { color: var(--accent); }
.store-hero-lead {
  margin-top: clamp(24px, 3vh, 36px);
  max-width: 64ch;
  font-family: var(--sans);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  color: var(--ink-dim);
}
.store-hero-lead strong { color: var(--ink); }
.store-hero-lead .accent { color: var(--accent); font-weight: 500; }

/* ---- Stats axes (6 cards en grille) ---- */
.store-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin-top: clamp(40px, 5vh, 64px);
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 980px) { .store-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .store-stats { grid-template-columns: repeat(2, 1fr); } }

.store-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(20px, 2.5vw, 28px) 12px;
  background: var(--bg);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease;
}
.store-stat:hover {
  background: color-mix(in srgb, var(--c-or) 8%, var(--bg));
}
.store-stat:hover .store-stat-num { color: var(--c-or); }
.store-stat-num {
  font-family: var(--serif-display);
  font-stretch: 75%;
  font-weight: 380;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--accent);
  transition: color 0.25s ease;
}
.store-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* ---- Featured grid (3 cols sur desktop, hero cards plus grandes) ---- */
.store-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(40px, 5vh, 64px);
}
@media (max-width: 980px) { .store-featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .store-featured-grid { grid-template-columns: 1fr; } }

/* ---- Filter bar (sticky-ready, tab style) ---- */
.store-filter-bar {
  padding-top: clamp(48px, 6vh, 80px);
  padding-bottom: clamp(24px, 3vh, 40px);
}
.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.store-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.store-filter:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.store-filter.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.store-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.store-filter.is-active .store-filter-count {
  background: color-mix(in srgb, var(--bg) 18%, transparent);
}

/* ---- Sections axe (6 sections empilées) ---- */
.section-axe {
  padding-top: clamp(32px, 4vh, 56px);
  padding-bottom: clamp(48px, 6vh, 80px);
  border-top: 1px solid var(--line);
}
.store-axe-header {
  margin-bottom: clamp(32px, 4vh, 48px);
}
.store-axe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.store-axe-eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.store-axe-title {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 540;
  font-stretch: 88%;
  letter-spacing: -0.028em;
  line-height: 0.96;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.store-axe-title .accent { color: var(--accent); }

/* ---- Grid catalogue (3 cols, 1px gutter géré par bg parent) ---- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 980px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .store-grid { grid-template-columns: 1fr; } }

/* =========================================================
   STORE CARD — design léger éditorial 2026 (refonte 2026-05-13)
   ---------------------------------------------------------
   Refonte simplification : "trop lourd à lire" (user feedback).
   Moins d'éléments concurrents, hiérarchie plus claire :
   - Numéro discret (pas de SVG mini-frame en watermark)
   - Tier badge top-right
   - Title comme héros visuel
   - Description plus aérée
   - Persona + ROI en footer minimaliste
   - MCP/EXEC indicators MASQUÉS par défaut, visibles au hover
     (info technique secondaire, pas surcharger la card)
   ========================================================= */
.store-card {
  position: relative;
  background: var(--bg);
  padding: clamp(28px, 3vw, 36px) clamp(24px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: background 0.3s ease, transform 0.3s ease;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
}
.store-card:hover {
  background: color-mix(in srgb, var(--c-or) 5%, var(--bg));
  transform: translateY(-2px);
}

.store-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* Numéro 01-37 : simple, en mono, accent subtle */
.store-card-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.store-card-icon svg {
  display: none; /* le mini-frame n'est plus affiché par défaut, trop bruyant */
}
.store-card-icon-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  transition: color 0.3s ease;
}
.store-card:hover .store-card-icon-num { color: var(--accent); }

/* Tier badge */
.store-card-tier {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.store-card-tier--s {
  background: var(--c-or);
  color: var(--c-encre);
  border: 1px solid var(--c-or);
}
.store-card-tier--a {
  background: transparent;
  color: var(--c-or);
  border: 1px solid color-mix(in srgb, var(--c-or) 55%, transparent);
}
.store-card-tier--b {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--line-strong);
}

/* Title — le héros visuel de la card */
.store-card-title {
  font-family: var(--display);
  font-size: clamp(20px, 1.55vw, 24px);
  font-weight: 540;
  font-stretch: 88%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}

/* Description */
.store-card-description {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 auto;
  /* Pas de border-top, pas de séparateur lourd */
  padding-bottom: 18px;
}

/* Meta : persona — caché par défaut, on consolide en footer */
.store-card-meta { display: none; }

/* Footer : persona/indicators (swap au hover) + ROI minimaliste */
.store-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* foot-meta : container relatif pour le swap persona ↔ indicators */
.store-card-foot-meta {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 18px;
  display: flex;
  align-items: center;
}

/* Persona visible par défaut, fade-out au hover (cède la place) */
.store-card-foot-meta .store-card-persona {
  position: relative;
  z-index: 1;
  transition: opacity 0.25s ease;
}
.store-card:hover .store-card-foot-meta .store-card-persona {
  opacity: 0;
}

/* Indicators MCP/EXEC : masqués par défaut (position absolute pour
   prendre la place de persona au hover sans bouger le layout). */
.store-card-indicators {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.25s ease 0.05s;
  pointer-events: none;
}
.store-card:hover .store-card-indicators {
  opacity: 1;
  pointer-events: auto;
}
.store-indicator {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-mute);
  cursor: help;
}
.store-indicator--green {
  border-color: color-mix(in srgb, var(--c-vert-sauge) 60%, transparent);
  color: var(--c-vert-sauge);
}
.store-indicator--yellow {
  border-color: color-mix(in srgb, var(--c-or) 60%, transparent);
  color: var(--c-or);
}
.store-indicator--red {
  border-color: color-mix(in srgb, var(--c-bordeaux) 80%, transparent);
  color: var(--c-bordeaux);
}
:root[data-theme="dark"] .store-indicator--red {
  color: color-mix(in srgb, var(--c-bordeaux) 70%, var(--c-papier-warm) 30%);
  border-color: color-mix(in srgb, var(--c-bordeaux) 90%, var(--c-papier-warm) 10%);
}

/* Persona en footer (style générique) */
.store-card-persona {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}

.store-card-roi {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}

/* ---- Featured cards (variation visuelle) ---- */
.store-card--featured {
  min-height: 320px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-or) 5%, var(--bg)) 0%,
    var(--bg) 60%);
  border-top: 2px solid var(--c-or);
}
.store-card--featured .store-card-icon { color: var(--c-or); }
.store-card--featured .store-card-title {
  font-size: clamp(22px, 1.7vw, 28px);
}
.store-card-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
  flex: 1;
  min-width: 0;
}
.store-card-axe {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* =========================================================
   STORE LIST — version ultra-compacte (1 ligne par cas)
   ---------------------------------------------------------
   Refonte 2026-05-13 : le user trouve les cards trop denses.
   On passe à une liste éditoriale, 1 ligne par cas, click pour
   déplier la description + indicators techniques.
   Featured reste en cards (les vedettes méritent l'amplitude).
   ========================================================= */
.store-list {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3vh, 40px) 0 0;
  border-top: 1px solid var(--line);
}
.store-list-item {
  border-bottom: 1px solid var(--line);
}
.store-list-row {
  display: grid;
  grid-template-columns: 56px 1fr 220px 130px 28px;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  width: 100%;
  padding: clamp(16px, 2vw, 22px) clamp(8px, 1vw, 14px);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background 0.2s ease;
  font: inherit;
}
.store-list-row:hover {
  background: color-mix(in srgb, var(--c-or) 5%, transparent);
}
.store-list-row:hover .store-list-num { color: var(--accent); }
.store-list-row:hover .store-list-chevron { color: var(--accent); }

.store-list-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.2s ease;
}
.store-list-title {
  font-family: var(--display);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 540;
  font-stretch: 88%;
  letter-spacing: -0.014em;
  line-height: 1.2;
  color: var(--ink);
}
.store-list-persona {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}
.store-list-roi {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}
.store-list-chevron {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--ink-mute);
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), color 0.2s ease;
}
.store-list-item.is-open .store-list-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Detail révélé au click */
.store-list-detail {
  padding: 4px clamp(12px, 1.5vw, 20px) clamp(20px, 2.5vw, 28px) clamp(76px, 6vw, 92px);
  border-top: 1px dashed var(--line);
  background: color-mix(in srgb, var(--c-or) 3%, transparent);
}
.store-list-description {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 14px 0 16px;
  max-width: 80ch;
}
.store-list-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.store-list-tier {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.store-list-tier--s {
  background: var(--c-or);
  color: var(--c-encre);
  border: 1px solid var(--c-or);
}
.store-list-tier--a {
  background: transparent;
  color: var(--c-or);
  border: 1px solid color-mix(in srgb, var(--c-or) 55%, transparent);
}
.store-list-tier--b {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--line-strong);
}
/* Indicators dans le detail : pleine taille (pas masqué comme avant) */
.store-list-detail .store-indicator {
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: none;
  font-weight: 400;
  font-family: var(--sans);
  border: 1px solid var(--line-strong);
}
.store-list-detail .store-indicator--green {
  border-color: color-mix(in srgb, var(--c-vert-sauge) 60%, transparent);
  color: var(--c-vert-sauge);
}
.store-list-detail .store-indicator--yellow {
  border-color: color-mix(in srgb, var(--c-or) 60%, transparent);
  color: var(--c-or);
}
.store-list-detail .store-indicator--red {
  border-color: color-mix(in srgb, var(--c-bordeaux) 80%, transparent);
  color: var(--c-bordeaux);
}
:root[data-theme="dark"] .store-list-detail .store-indicator--red {
  color: color-mix(in srgb, var(--c-bordeaux) 70%, var(--c-papier-warm) 30%);
  border-color: color-mix(in srgb, var(--c-bordeaux) 90%, var(--c-papier-warm) 10%);
}

/* Mobile : liste s'adapte en 2 lignes */
@media (max-width: 720px) {
  .store-list-row {
    grid-template-columns: 44px 1fr 28px;
    grid-template-rows: auto auto;
    gap: 4px 12px;
  }
  .store-list-num { grid-row: 1; grid-column: 1; }
  .store-list-title { grid-row: 1; grid-column: 2; }
  .store-list-chevron { grid-row: 1 / span 2; grid-column: 3; }
  .store-list-persona { grid-row: 2; grid-column: 2; }
  .store-list-roi {
    grid-row: 2; grid-column: 2;
    text-align: left;
    margin-left: 12px;
    color: var(--accent);
  }
  .store-list-detail { padding-left: 56px; }
}

/* =========================================================
   STORE KITS — méga use cases briques Lego
   Concept user 2026-05-13 : tronc commun + briques additionnelles
   combinables en kits par persona/niveau.
   ========================================================= */
.store-kits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(40px, 5vh, 64px);
}
@media (max-width: 880px) { .store-kits-grid { grid-template-columns: 1fr; } }

.store-kit-card {
  position: relative;
  background: var(--bg);
  padding: clamp(32px, 3vw, 44px) clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
  isolation: isolate;
  border-top: 2px solid transparent;
}
.store-kit-card:hover {
  background: color-mix(in srgb, var(--c-or) 4%, var(--bg));
  border-top-color: var(--accent);
}

/* Header : niveau + count briques */
.store-kit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.store-kit-level {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.store-kit-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Title + tagline + description */
.store-kit-title {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 540;
  font-stretch: 88%;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 8px;
}
.store-kit-tagline {
  font-family: var(--serif-display);
  font-size: clamp(15px, 1.2vw, 18px);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 18px;
  line-height: 1.4;
}
.store-kit-description {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 28px;
}
.store-kit-description strong { color: var(--ink); font-weight: 500; }

/* Bricks list */
.store-kit-bricks {
  margin: 0 0 24px;
  padding: 18px 0;
  border-top: 1px dashed var(--line-strong);
  border-bottom: 1px dashed var(--line-strong);
}
.store-kit-bricks-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.store-kit-bricks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.store-kit-brick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--bg-soft, color-mix(in srgb, var(--ink) 4%, transparent));
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.2;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.store-kit-brick:hover {
  background: color-mix(in srgb, var(--c-or) 15%, var(--bg));
  border-color: var(--c-or);
  color: var(--ink);
}
.store-kit-brick-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.store-kit-brick-title {
  font-weight: 400;
}

/* Footer : persona + ROI */
.store-kit-foot {
  margin-top: auto;
}
.store-kit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.store-kit-persona {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.store-kit-roi {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
}

/* Niveau 0 (tronc commun) — design distinct, plus prominent */
.store-kit-card[data-kit-level="0"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-or) 8%, var(--bg)) 0%,
    var(--bg) 70%);
  border-top: 2px solid var(--c-or);
}
.store-kit-card[data-kit-level="0"] .store-kit-level {
  background: var(--c-or);
  color: var(--c-encre);
  border-color: var(--c-or);
}

/* =========================================================
   Mobile : reduce padding & sizes
   ========================================================= */
@media (max-width: 600px) {
  .store-hero-title .display { font-size: clamp(40px, 12vw, 64px); }
  .store-filters { gap: 6px; }
  .store-filter { padding: 8px 12px; font-size: 10px; }
  .store-card { min-height: auto; padding: 24px 20px; }
  .store-card--featured { min-height: auto; }
  .store-kit-card { padding: 28px 22px; }
}