/* vitrine BUNDLE — generated, do not edit. Source: index.css. */
@layer foundation, components, features, overrides;


/* ════════════════════════════════════════════════════════════════
   @layer foundation
   ════════════════════════════════════════════════════════════════ */

/* --- tokens.css --- */
@layer foundation {
/*
 * tokens.css — Plan 119-W (segmentation Plan 119-Q vitrine).
 *
 * Tokens canoniques de la vitrine sanctuaire / Fibonacci / tech-éthérée.
 * Source de vérité figée par le blueprint .planning/MYCELIUM-119-Q-vitrine-vision.md §1.
 * Tout token consommé par les chapters/* et components/* DOIT venir d'ici.
 * Modifier ces valeurs ailleurs = violation de l'invariant cohérence.
 *
 * Charge en PREMIER dans index.css (@import 'tokens.css') — toutes les autres
 * définitions dépendent de ces variables.
 */

:root {
  /* ── Palette canonique (proportions §1 blueprint) ───────────────── */
  /* Plan 119-YY — bascule palette : la base est désormais BLEU SANCTUAIRE
     (au lieu du brun-or sépia historique). L'or reste l'accent (proportion
     8%), mais bg=70% est bleu nuit profond. Préservation : ink cream, gold
     thread, cta terracotta, aurora caustiques, ratios Fibonacci, easings.
     Distribution visuelle cible : bg 70% · ink 18% · gold 8% · aurora 3% · cta 1% */
  --v119-bg-primary:        #0a1428;     /* bleu nuit profond (sanctuaire bleu, livre fermé sous éclipse) */
  --v119-bg-secondary:      #131e3a;     /* dégradé subtil pour les sections — bleu un cran plus clair */
  --v119-ink:               #f5e9d4;     /* encre de papier ancien éclairé (cream préservé pour contraste chaud sur bleu froid) */
  --v119-ink-muted:         #b8c4dc;     /* ink secondaire — bleu-blanc adouci (au lieu du c8b89a brun-écru) */
  --v119-gold-thread:       #c8a868;     /* fil d'or — spirale Fibonacci, sceaux, accents (chaud sur fond froid) */
  --v119-gold-deep:         #9a7d4a;     /* or sobre — filets, bordures éditoriales */
  --v119-cta:               #8b3a2e;     /* terracotta — UNE seule couleur de signature, parcimonieux */
  --v119-aurora-cyan:       #3a8eaa;     /* caustique tech éthérée (couche 1) */
  --v119-aurora-magenta:    #7d4da8;     /* caustique tech éthérée (couche 2) */
  --v119-aurora-violet:     #b87ac3;     /* caustique tech éthérée (couche 3) */

  /* ── Typographie ────────────────────────────────────────────────── */
  --v119-font-display: 'PP Editorial New', 'GT Sectra', 'Beatrice Display', 'Cormorant Garamond', Georgia, serif;
  --v119-font-body:    'GT America', 'Söhne', 'Inter', system-ui, -apple-system, sans-serif;
  --v119-font-mono:    'Söhne Mono', 'GT America Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Ratios Fibonacci (motion grammar) ──────────────────────────── */
  /* Strict, jamais d'arrondi décimal arbitraire. Tout timing animation
     vient de cette échelle. Cf Plan 112-B Tesla geometry. */
  --v119-phi-1: 0.382s;     /* ratio doré inverse — micro-pause */
  --v119-phi-2: 0.618s;     /* ratio doré — révélation */
  --v119-phi-3: 1s;         /* ancrage temporel (référence) */
  --v119-phi-4: 1.618s;     /* ratio doré — déploiement complet */
  --v119-phi-5: 2.618s;     /* respiration profonde, transitions de chapitre */

  /* ── Easings ────────────────────────────────────────────────────── */
  --v119-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --v119-ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Plan 119-AAA — pattern card élite (extrait de v119-auth-modal__panel) ──
     Le user a identifié que ce gradient bleu→brun avec border or atténué et
     box-shadow triple stack = "l'intégration la plus jolie". Tokenisé pour
     usage cohérent sur toutes les cards de la vitrine + admin. */
  --v119-card-bg: linear-gradient(180deg,
      rgba(19, 30, 58, 0.96) 0%,
      rgba(26, 22, 18, 0.98) 100%);
  --v119-card-border: 1px solid rgba(200, 168, 104, 0.22);
  /* Shadow modal (lourde) vs shadow card (modérée) — la modal doit pop davantage */
  --v119-card-shadow:
      0 8px 28px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(200, 168, 104, 0.08),
      inset 0 1px 0 rgba(245, 233, 212, 0.04);
  --v119-card-shadow-modal:
      0 24px 64px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(200, 168, 104, 0.08),
      inset 0 1px 0 rgba(245, 233, 212, 0.04);
  --v119-card-radius: 6px;
}

}

/* --- motion.css --- */
@layer foundation {
/*
 * motion.css — Plan 119-W.
 *
 * Animations partagées + reduced-motion gel global.
 * Charge APRÈS tokens.css mais AVANT components/* et chapters/*.
 *
 * Règle : tout @keyframes utilisé par 2+ composants vit ici. Les animations
 * spécifiques à un seul composant restent dans son fichier composant.
 */

/* ── Reveal observer générique (chapters/* utilisent [data-v119-reveal]) ── */
[data-v119-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--v119-phi-4) var(--v119-ease-out),
              transform var(--v119-phi-4) var(--v119-ease-out);
}

[data-v119-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Fade-rise (entry animation hero, intro) ──────────────────────── */
@keyframes v119-fade-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion (a11y) — gel global ────────────────────────────
   Tout @media (prefers-reduced-motion: reduce) DOIT vivre ici pour
   garantir que les overrides sont à un seul endroit, faciles à auditer. */
@media (prefers-reduced-motion: reduce) {
  /* Plan 119-PERF — guard global wildcard pour a11y + perf (38 infinite
     animations capturées) */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Aurora figées en gradient statique */
  .v119-aurora__layer { animation: none !important; }

  /* Trait d'encre tracé direct */
  .v119-thread__line { stroke-dashoffset: 0 !important; animation: none !important; }

  /* Hero : entrées finales directes */
  .v119-hero__title,
  .v119-hero__sub,
  .v119-seal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .v119-seal__core { animation: none !important; }

  /* Q-C : chap. III/IV/V */
  .v119-screen,
  .v119-screen__row,
  .v119-screen__toggle-switch::after,
  .v119-filaments__line,
  .v119-filaments__node { animation: none !important; }
  .v119-screen__row { opacity: 1 !important; transform: none !important; }

  /* Reveal observer : tout est révélé d'emblée */
  [data-v119-reveal] { opacity: 1 !important; transform: none !important; }
}

}

/* ════════════════════════════════════════════════════════════════
   @layer components
   ════════════════════════════════════════════════════════════════ */

/* --- components/advantage.css --- */
@layer components {
/*
 * components/advantage.css — Plan 119-W (extracted from Plan 119-Q-D).
 *
 * Item .v119-advantage (chap. IX). Sceau-puce or à gauche, titre italique
 * + paragraphe muted. 8 lignes en grid 2 colonnes (380px min).
 */

.v119-advantage {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  align-items: start;
}

.v119-advantage__seal {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--v119-gold-deep);
  border: 1px solid var(--v119-gold-thread);
  filter: drop-shadow(0 0 6px rgba(200, 168, 104, 0.35));
}

.v119-advantage__name {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--v119-ink);
  margin: 0 0 6px 0;
}

.v119-advantage p {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.65;
  color: var(--v119-ink-muted);
  margin: 0;
}

}

/* --- components/aurora.css --- */
@layer components {
/*
 * components/aurora.css — Plan 119-W (extracted from Plan 119-Q-B).
 *
 * Caustique tech éthérée : 3 couches blendées en `mix-blend-mode: screen`.
 * Cycles désynchronisés selon ratios Fibonacci :
 *   - couche 1 (cyan)    : 60s  (ancrage)
 *   - couche 2 (magenta) : 37s  (60s × phi-2 = 37.08s)
 *   - couche 3 (violet)  : 97s  (60s × phi-4 = 97.08s)
 *
 * Opacité 6-10 % maximum. Effet : "lumière passant à travers un vitrail
 * numérique" — perçu, jamais vu directement.
 */

.v119-aurora {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
}

/* Plan 119-PERF — blur 80→40px (GPU compositing cost ~halved). mix-blend-mode
   retiré (screen blend sur fullscreen layer = 30-50ms/frame Chrome). opacity
   maintenue sur seuil perceptuel. will-change: opacity only (transform
   provoquait des layer promotions excessives). */
.v119-aurora__layer {
  position: absolute;
  inset: 0;
  filter: blur(40px);
  opacity: 0.14;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .v119-aurora__layer { animation: none !important; }
}

.v119-aurora__layer--1 {
  background: radial-gradient(ellipse 60% 40% at 30% 30%, var(--v119-aurora-cyan) 0%, transparent 70%);
  animation: v119-aurora-drift-1 60s linear infinite;
}

.v119-aurora__layer--2 {
  background: radial-gradient(ellipse 50% 50% at 70% 60%, var(--v119-aurora-magenta) 0%, transparent 70%);
  animation: v119-aurora-drift-2 37s linear infinite;
  opacity: 0.08;
}

.v119-aurora__layer--3 {
  background: radial-gradient(ellipse 70% 35% at 50% 90%, var(--v119-aurora-violet) 0%, transparent 70%);
  animation: v119-aurora-drift-3 97s linear infinite;
  opacity: 0.06;
}

@keyframes v119-aurora-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8%, -5%) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes v119-aurora-drift-2 {
  0%   { transform: translate(0, 0) scale(1.1); }
  50%  { transform: translate(-6%, 7%) scale(0.95); }
  100% { transform: translate(0, 0) scale(1.1); }
}
@keyframes v119-aurora-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(5%, -8%) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}

}

/* --- components/auth-modal.css --- */
@layer components {
/*
 * components/auth-modal.css — Plan 119-U.
 *
 * Modale d'authentification (Connexion / Inscription) déclenchée depuis le
 * lien "Espace client" du topbar et du footer. Cohérente avec la grammaire
 * sanctuaire / Fibonacci / tech-éthérée de la vitrine refondue (Plan 119-Q).
 *
 * Tokens consommés :
 *   --v119-bg-primary, --v119-ink, --v119-ink-muted, --v119-gold-thread,
 *   --v119-gold-deep, --v119-cta, --v119-aurora-cyan/magenta/violet,
 *   --v119-phi-1..5, --v119-ease-out
 *
 * Activation : .v119-auth-modal[data-open="true"] (toggle via JS).
 * Reduced-motion : transitions/animations désactivées (motion.css gère le
 * reset global, mais les opacity/transform inline ici sont aussi neutralisés).
 */

.v119-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 20, 40, 0.78);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-auth-modal[data-open="true"] {
  display: flex;
  opacity: 1;
}

.v119-auth-modal__caustic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(58, 142, 170, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 75%, rgba(184, 122, 195, 0.10) 0%, transparent 55%);
  opacity: 0.7;
}

.v119-auth-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg,
    rgba(19, 30, 58, 0.96) 0%,
    rgba(26, 22, 18, 0.98) 100%);
  border: 1px solid rgba(200, 168, 104, 0.22);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 36px);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(200, 168, 104, 0.08),
    inset 0 1px 0 rgba(245, 233, 212, 0.04);
  font-family: var(--v119-font-body);
  color: var(--v119-ink, #f5e9d4);
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-auth-modal[data-open="true"] .v119-auth-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

/* Or-thread top accent */
.v119-auth-modal__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--v119-gold-thread, #c8a868) 30%,
    var(--v119-gold-thread, #c8a868) 70%,
    transparent);
  opacity: 0.7;
}

.v119-auth-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(200, 168, 104, 0.20);
  border-radius: 2px;
  color: var(--v119-ink-muted, #c8b89a);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-auth-modal__close:hover,
.v119-auth-modal__close:focus-visible {
  color: var(--v119-ink, #f5e9d4);
  border-color: var(--v119-gold-thread, #c8a868);
  background: rgba(200, 168, 104, 0.06);
  outline: none;
}

.v119-auth-modal__title {
  font-family: var(--v119-font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--v119-ink, #f5e9d4);
  letter-spacing: 0.01em;
}
.v119-auth-modal__sub {
  font-size: 12.5px;
  color: var(--v119-ink-muted, #c8b89a);
  margin: 0 0 24px;
  letter-spacing: 0.01em;
  line-height: 1.55;
}

/* ── Tabs Connexion / Inscription ────────────────────────────────────── */
.v119-auth-modal__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(200, 168, 104, 0.16);
  margin-bottom: 22px;
}
.v119-auth-modal__tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  color: var(--v119-ink-muted, #c8b89a);
  font-family: var(--v119-font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 0;
  cursor: pointer;
  transition:
    color var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-auth-modal__tab[data-active="true"] {
  color: var(--v119-ink, #f5e9d4);
  border-bottom-color: var(--v119-gold-thread, #c8a868);
}
.v119-auth-modal__tab:focus-visible {
  outline: 1px solid var(--v119-gold-thread, #c8a868);
  outline-offset: 2px;
}

/* ── Panneaux ────────────────────────────────────────────────────────── */
.v119-auth-modal__pane {
  display: none;
}
.v119-auth-modal__pane[data-active="true"] {
  display: block;
  animation: v119AuthPaneFade var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
@keyframes v119AuthPaneFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Formulaire ──────────────────────────────────────────────────────── */
.v119-auth-modal__field {
  display: block;
  margin-bottom: 16px;
}
.v119-auth-modal__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v119-ink-muted, #c8b89a);
  margin-bottom: 6px;
}
.v119-auth-modal__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  background: rgba(10, 20, 40, 0.40);
  border: 1px solid rgba(200, 168, 104, 0.20);
  border-radius: 3px;
  padding: 0 16px;
  color: var(--v119-ink, #f5e9d4);
  font-family: var(--v119-font-body);
  font-size: 14px;
  line-height: 44px;
  letter-spacing: 0.01em;
  vertical-align: middle;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    box-shadow var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-auth-modal__input::placeholder {
  color: rgba(200, 184, 154, 0.45);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.02em;
}
.v119-auth-modal__input:hover {
  border-color: rgba(200, 168, 104, 0.34);
  background: rgba(10, 20, 40, 0.48);
}
.v119-auth-modal__input:focus {
  outline: none;
  border-color: var(--v119-gold-thread, #c8a868);
  background: rgba(10, 20, 40, 0.55);
  box-shadow:
    0 0 0 3px rgba(200, 168, 104, 0.10),
    inset 0 1px 0 rgba(245, 233, 212, 0.04);
}
/* iOS Safari : neutralise auto-fill background jaune sans casser la teinte */
.v119-auth-modal__input:-webkit-autofill {
  -webkit-text-fill-color: var(--v119-ink, #f5e9d4);
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 20, 40, 0.40) inset;
  caret-color: var(--v119-gold-thread, #c8a868);
}

/* ── Plan 119-FFF — Toggle "Rester connecté" ─────────────────────────── */
.v119-auth-modal__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  color: var(--v119-ink-muted, #c8b89a);
  letter-spacing: 0.01em;
}
.v119-auth-modal__remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  background: rgba(10, 20, 40, 0.40);
  border: 1px solid rgba(200, 168, 104, 0.32);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition:
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
  flex-shrink: 0;
}
.v119-auth-modal__remember input[type="checkbox"]:hover {
  border-color: var(--v119-gold-thread, #c8a868);
}
.v119-auth-modal__remember input[type="checkbox"]:checked {
  background: var(--v119-gold-thread, #c8a868);
  border-color: var(--v119-gold-thread, #c8a868);
}
.v119-auth-modal__remember input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #0a1428;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.v119-auth-modal__remember input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--v119-gold-thread, #c8a868);
  outline-offset: 2px;
}
.v119-auth-modal__remember-text {
  line-height: 1.4;
}
.v119-auth-modal__remember-text small {
  color: rgba(200, 184, 154, 0.55);
  font-size: 10.5px;
  margin-left: 4px;
}

.v119-auth-modal__feedback {
  min-height: 18px;
  font-size: 12px;
  margin: 6px 0 14px;
  letter-spacing: 0.01em;
}
.v119-auth-modal__feedback[data-state="pending"] { color: var(--v119-ink-muted, #c8b89a); }
.v119-auth-modal__feedback[data-state="success"] { color: var(--v119-aurora-cyan, #3a8eaa); }
.v119-auth-modal__feedback[data-state="error"]   { color: var(--v119-cta, #8b3a2e); }

.v119-auth-modal__submit {
  width: 100%;
  background: var(--v119-cta, #8b3a2e);
  border: 1px solid var(--v119-cta, #8b3a2e);
  border-radius: 2px;
  color: #f5e9d4;
  font-family: var(--v119-font-body);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  transition:
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    transform var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    opacity var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-auth-modal__submit:hover:not([disabled]) {
  background: #a04736;
  transform: translateY(-1px);
}
.v119-auth-modal__submit:focus-visible {
  outline: 2px solid var(--v119-gold-thread, #c8a868);
  outline-offset: 3px;
}
.v119-auth-modal__submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.v119-auth-modal__hint {
  font-size: 11.5px;
  color: var(--v119-ink-muted, #c8b89a);
  margin: 14px 0 0;
  text-align: center;
  letter-spacing: 0.01em;
}
.v119-auth-modal__hint a {
  color: var(--v119-gold-thread, #c8a868);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 168, 104, 0.30);
  transition: border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-auth-modal__hint a:hover {
  border-bottom-color: var(--v119-gold-thread, #c8a868);
}

/* ── Pane Inscription : redirection contact ──────────────────────────── */
.v119-auth-modal__signup {
  text-align: center;
  padding: 4px 0 0;
}
.v119-auth-modal__signup p {
  color: var(--v119-ink, #f5e9d4);
  line-height: 1.65;
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.v119-auth-modal__signup p.v119-auth-modal__sub {
  font-size: 12.5px;
  color: var(--v119-ink-muted, #c8b89a);
}
.v119-auth-modal__signup-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid var(--v119-gold-thread, #c8a868);
  border-radius: 2px;
  color: var(--v119-gold-thread, #c8a868);
  font-family: var(--v119-font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-auth-modal__signup-cta:hover {
  background: var(--v119-gold-thread, #c8a868);
  color: var(--v119-bg-primary, #0a1428);
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v119-auth-modal,
  .v119-auth-modal__panel,
  .v119-auth-modal__pane,
  .v119-auth-modal__close,
  .v119-auth-modal__tab,
  .v119-auth-modal__input,
  .v119-auth-modal__submit,
  .v119-auth-modal__signup-cta { transition: none !important; animation: none !important; }
}

}

/* --- components/backlinks.css --- */
@layer components {
/*
 * components/backlinks.css — Plan 119-AB.
 *
 * Slider témoignages enrichis. Chaque carte = un client qui a activé son
 * backlink dans son interface (côté client opt-in). Cohérence sanctuaire :
 * teinte ivoire/or, mouvement Fibonacci, pas de tape-à-l'œil.
 *
 * Tokens consommés :
 *   --v119-bg-primary, --v119-ink, --v119-ink-muted, --v119-gold-thread,
 *   --v119-gold-deep, --v119-aurora-cyan, --v119-phi-2, --v119-ease-out
 *
 * Structure :
 *   .v119-backlinks
 *     .v119-backlinks__inner
 *       .v119-backlinks__header
 *       .v119-backlinks__slider
 *         .v119-backlinks__nav (prev/next)
 *         .v119-backlinks__track
 *           .v119-backlinks__card[data-active]
 *       .v119-backlinks__dots
 */

.v119-backlinks {
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0;
  background: linear-gradient(180deg,
    rgba(26, 22, 18, 0) 0%,
    rgba(19, 30, 58, 0.55) 38%,
    rgba(26, 22, 18, 0) 100%);
}

.v119-backlinks__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 36px);
}

/* ── Header ────────────────────────────────────────────────────────── */
.v119-backlinks__header {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.v119-backlinks__title {
  font-family: var(--v119-font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--v119-ink, #f5e9d4);
  letter-spacing: 0.005em;
}
.v119-backlinks__title::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--v119-gold-thread, #c8a868);
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.7;
}
.v119-backlinks__title::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--v119-gold-thread, #c8a868);
  vertical-align: middle;
  margin-left: 12px;
  opacity: 0.7;
}
.v119-backlinks__subtitle {
  font-size: 13px;
  color: var(--v119-ink-muted, #c8b89a);
  font-style: italic;
  margin: 0;
}

/* ── Slider container ──────────────────────────────────────────────── */
.v119-backlinks__slider {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 14px;
  align-items: stretch;
}

.v119-backlinks__nav {
  width: 36px;
  height: 100%;
  min-height: 80px;
  background: transparent;
  border: 1px solid rgba(200, 168, 104, 0.18);
  border-radius: 2px;
  color: var(--v119-ink-muted, #c8b89a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-backlinks__nav:hover,
.v119-backlinks__nav:focus-visible {
  color: var(--v119-gold-thread, #c8a868);
  border-color: var(--v119-gold-thread, #c8a868);
  background: rgba(200, 168, 104, 0.05);
  outline: none;
}
.v119-backlinks__nav[disabled] {
  opacity: 0.30;
  cursor: not-allowed;
}

.v119-backlinks__track {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.v119-backlinks__card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  padding: clamp(16px, 2.4vw, 24px);
  background: rgba(19, 30, 58, 0.55);
  border: 1px solid rgba(200, 168, 104, 0.14);
  border-radius: 4px;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition:
    opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    transform var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-backlinks__card[data-active="true"] {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.v119-backlinks__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent,
    var(--v119-gold-thread, #c8a868) 30%,
    var(--v119-gold-thread, #c8a868) 70%,
    transparent);
  opacity: 0.4;
}

/* Card media (logo / preview) */
.v119-backlinks__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 40, 0.40);
  border-radius: 2px;
  padding: 16px;
  aspect-ratio: 1.618;
  overflow: hidden;
}
.v119-backlinks__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(1.05) saturate(0.95);
}

/* Card body */
.v119-backlinks__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.v119-backlinks__name {
  font-family: var(--v119-font-display);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 400;
  margin: 0;
  color: var(--v119-ink, #f5e9d4);
  letter-spacing: 0.005em;
}
.v119-backlinks__context {
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v119-gold-deep, #9a7d4a);
  margin: 0 0 2px;
}
.v119-backlinks__presentation {
  font-size: 14px;
  line-height: 1.55;
  color: var(--v119-ink-muted, #c8b89a);
  margin: 0;
  letter-spacing: 0.01em;
}
.v119-backlinks__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--v119-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--v119-aurora-cyan, #3a8eaa);
  text-decoration: none;
  border-bottom: 1px solid rgba(58, 142, 170, 0.30);
  align-self: flex-start;
  transition: border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-backlinks__link:hover {
  border-bottom-color: var(--v119-aurora-cyan, #3a8eaa);
}

/* ── Dots ─────────────────────────────────────────────────────────── */
.v119-backlinks__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
}
.v119-backlinks__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200, 168, 104, 0.20);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  transition:
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    transform var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.v119-backlinks__dot:hover {
  background: rgba(200, 168, 104, 0.40);
}
.v119-backlinks__dot[data-active="true"] {
  background: var(--v119-gold-thread, #c8a868);
  transform: scale(1.20);
}
.v119-backlinks__dot:focus-visible {
  outline: 1px solid var(--v119-gold-thread, #c8a868);
  outline-offset: 2px;
}

/* ── Compact viewport ─────────────────────────────────────────────── */
@media (max-width: 680px) {
  .v119-backlinks__slider {
    grid-template-columns: 28px 1fr 28px;
    gap: 8px;
  }
  .v119-backlinks__card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .v119-backlinks__media {
    margin: 0 auto;
    max-width: 180px;
  }
  .v119-backlinks__link {
    align-self: center;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v119-backlinks__card,
  .v119-backlinks__dot,
  .v119-backlinks__nav { transition: none !important; }
}

}

/* --- components/filaments.css --- */
@layer components {
/*
 * components/filaments.css — Plan 119-W (extracted from Plan 119-Q-C).
 *
 * Filaments lumineux entre l'écran et 4 nœuds dispersés (chap. IV).
 * Effet "système nerveux numérique" : 4 lignes SVG dashed qui pulsent
 * avec dashoffset, 3s loop, stagger phi-1 entre les 4 lignes.
 */

.v119-filaments {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}

.v119-filaments__line {
  fill: none;
  stroke: var(--v119-gold-thread);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 2 6;
  opacity: 0.35;
  animation: v119-filament-pulse 3s var(--v119-ease-soft) infinite;
}

.v119-filaments__line:nth-child(2) { animation-delay: 0.382s; }
.v119-filaments__line:nth-child(3) { animation-delay: 0.618s; }
.v119-filaments__line:nth-child(4) { animation-delay: 1s; }

@keyframes v119-filament-pulse {
  0%, 100% { opacity: 0.18; stroke-dashoffset: 0; }
  50%      { opacity: 0.55; stroke-dashoffset: 16; }
}

.v119-filaments__node {
  fill: var(--v119-gold-thread);
  opacity: 0.55;
  filter: drop-shadow(0 0 4px rgba(200, 168, 104, 0.5));
  animation: v119-node-pulse 3s var(--v119-ease-soft) infinite;
}

@keyframes v119-node-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}

}

/* --- components/footer.css --- */
@layer components {
/*
 * components/footer.css — Plan 119-AAE.
 *
 * Footer base qui s'applique partout (pas scopé .landing--sota), pendant
 * du components/topbar.css. Sans ce fichier, les pages standalone (login,
 * signup, recover, verify, onboarding, prospect-resume, etc.) qui utilisent
 * layout-vitrine.php affichent le footer en HTML brut sans styling — bug
 * documenté Image #24.
 *
 * Le scope .landing--sota .lp-foot existant dans style.css continue de
 * fonctionner pour la landing page (cascade naturelle).
 */

.lp-foot {
  background: var(--v119-bg-primary, #0a1428);
  border-top: 1px solid rgba(200, 168, 104, 0.10);
  padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 40px);
  font-family: var(--v119-font-body, 'GT America', 'Inter', system-ui, sans-serif);
  color: var(--v119-ink-muted, #b8c4dc);
  font-size: 13px;
  line-height: 1.55;
}

.lp-foot__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.lp-foot strong {
  font-family: var(--v119-font-display, 'PP Editorial New', 'Cormorant Garamond', Georgia, serif);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  color: var(--v119-ink, #f5e9d4);
  letter-spacing: 0.005em;
}

.lp-foot small {
  display: block;
  margin-top: 4px;
  color: var(--v119-ink-muted, #b8c4dc);
  font-size: 12px;
  font-style: italic;
  opacity: 0.75;
}

.lp-foot a {
  color: var(--v119-ink-muted, #b8c4dc);
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  transition: color var(--v119-phi-2, 0.618s) var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  border-bottom: 1px solid transparent;
}

.lp-foot a:hover {
  color: var(--v119-gold-thread, #c8a868);
}

.lp-foot nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 720px) {
  .lp-foot__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .lp-foot nav {
    align-items: flex-start;
    text-align: left;
    margin-top: 12px;
  }
}

/* Container partagé landing + standalone — le scope landing--sota le
   redéfinit aussi mais avec mêmes valeurs (cf style.css ligne 182). */
.v119-page .lp-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* lp-btn / lp-link / lp-brand : utilisés dans la topbar (déjà covered by
   components/topbar.css). Ici on assure que .lp-btn--primary fonctionne
   aussi en standalone (CTA "Audit 15 min"). */
.v119-page .lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--v119-phi-2, 0.618s) var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.v119-page .lp-btn--lg { padding: 14px 22px; font-size: 14.5px; }
.v119-page .lp-btn--sm { padding: 7px 12px; font-size: 12px; }
.v119-page .lp-btn--primary {
  background: var(--v119-gold-thread, #c8a868);
  color: var(--v119-bg-primary, #0a1428);
  border-color: var(--v119-gold-thread, #c8a868);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.v119-page .lp-btn--primary:hover {
  background: #d4b577;
  border-color: #d4b577;
  transform: translateY(-1px);
  text-decoration: none;
}
.v119-page .lp-link {
  color: var(--v119-ink-muted, #b8c4dc);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--v119-phi-2, 0.618s) var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.v119-page .lp-link:hover {
  color: var(--v119-gold-thread, #c8a868);
}

}

/* --- components/form.css --- */
@layer components {
/*
 * components/form.css — Plan 119-W (extracted from Plan 119-Q-E).
 *
 * Form contact refondu (chap. X) + CTA terracotta UNIQUE OCCURRENCE
 * COULEUR CTA dans toute la vitrine (--v119-cta).
 *
 * Inputs ivoire transparents, focus gold-thread + halo box-shadow,
 * textarea min 120px resize vertical, feedback inline data-state colors.
 */

.v119-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.v119-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.v119-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v119-form__label {
  font-family: var(--v119-font-body);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--v119-ink-muted);
}

.v119-form__label em {
  font-style: italic;
  font-weight: 300;
  color: var(--v119-gold-deep);
}

.v119-form__field input,
.v119-form__field select,
.v119-form__field textarea {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: 14.5px;
  color: var(--v119-ink);
  background: rgba(245, 233, 212, 0.03);
  border: 1px solid rgba(154, 125, 74, 0.30);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color var(--v119-phi-1) var(--v119-ease-out),
              background var(--v119-phi-1) var(--v119-ease-out);
}

.v119-form__field input:focus,
.v119-form__field select:focus,
.v119-form__field textarea:focus {
  outline: none;
  border-color: var(--v119-gold-thread);
  background: rgba(245, 233, 212, 0.05);
  box-shadow: 0 0 0 3px rgba(200, 168, 104, 0.12);
}

/* ── Select natif sublimé v119 (Plan 119-NN) ─────────────────────────────
   Composant souvent négligé : on remplace la flèche système par un chevron
   gold-thread, on neutralise l'apparence native, et on teinte les options
   du dépliant pour rester dans le sanctuaire ivoire/encre.

   Note compat : le panneau popup des <option> est rendu par l'OS et n'est
   stylable qu'à minima (couleurs option/option:checked). Pour les browsers
   2026 supportant ::picker(select) (Chrome 130+), on enrichit le visuel.
*/
.v119-form__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c8a868' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.v119-form__field select:focus {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f5e9d4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
}

/* options dans le panneau natif (limité, mais améliore la cohérence) */
.v119-form__field select option {
  background: #131e3a;
  color: #f5e9d4;
  font-family: var(--v119-font-body);
  padding: 10px 14px;
}
.v119-form__field select option:checked,
.v119-form__field select option:hover {
  background: rgba(200, 168, 104, 0.18);
  color: #f5e9d4;
}
.v119-form__field select option[disabled],
.v119-form__field select option[value=""] {
  color: rgba(200, 184, 154, 0.55);
  font-style: italic;
}

/* Browsers 2026 supportant ::picker(select) : panneau dépliant entièrement stylable */
@supports selector(select::picker(select)) {
  .v119-form__field select,
  .v119-form__field select::picker(select) {
    appearance: base-select;
  }
  .v119-form__field select::picker(select) {
    background: linear-gradient(180deg, rgba(19, 30, 58, 0.98) 0%, rgba(26, 22, 18, 0.99) 100%);
    border: 1px solid rgba(200, 168, 104, 0.30);
    border-radius: 4px;
    box-shadow:
      0 24px 64px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(200, 168, 104, 0.08);
    padding: 6px;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  .v119-form__field select option {
    background: transparent;
    border-radius: 3px;
    padding: 10px 14px;
    margin: 1px 0;
    transition: background var(--v119-phi-1) var(--v119-ease-out);
  }
  .v119-form__field select option:hover {
    background: rgba(200, 168, 104, 0.10);
  }
  .v119-form__field select option:checked {
    background: rgba(200, 168, 104, 0.18);
    color: var(--v119-gold-thread);
  }
}

.v119-form__field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.v119-form__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  margin-top: 12px;
}

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

/* CTA terracotta — UNIQUE OCCURRENCE COULEUR CTA dans toute la vitrine */
.v119-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--v119-font-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v119-ink);
  background: var(--v119-cta);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--v119-phi-2) var(--v119-ease-out),
              transform var(--v119-phi-1) var(--v119-ease-out),
              box-shadow var(--v119-phi-2) var(--v119-ease-out);
  box-shadow: 0 4px 16px rgba(139, 58, 46, 0.20);
}

.v119-cta:hover {
  background: #a04434;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(139, 58, 46, 0.32);
}

.v119-cta:active { transform: translateY(0); }

.v119-cta:focus-visible {
  outline: 2px solid var(--v119-gold-thread);
  outline-offset: 3px;
}

.v119-cta svg { color: currentColor; }

.v119-form__alt {
  font-family: var(--v119-font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--v119-ink-muted);
  margin: 0;
  line-height: 1.6;
}

.v119-form__alt a {
  color: var(--v119-gold-thread);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 168, 104, 0.4);
  font-style: normal;
}

.v119-form__alt a:hover { border-bottom-color: var(--v119-gold-thread); }

.v119-form__alt span {
  display: block;
  font-size: 11.5px;
  margin-top: 6px;
  opacity: 0.7;
}

.v119-form__feedback {
  font-family: var(--v119-font-body);
  font-size: 13px;
  text-align: center;
  min-height: 20px;
  color: var(--v119-ink-muted);
}

.v119-form__feedback[data-state="success"] { color: #4ade80; }
.v119-form__feedback[data-state="error"]   { color: #f59e0b; }

}

/* --- components/immersive.css --- */
@layer components {
/*
 * immersive.css — Plan 119-IMM (brief expérience immersive).
 *
 * Composants signature de la refonte immersive :
 *   - .v119-sigil-crossroad     — sigil hero (C + flèches + ‹/›) animé séquencé
 *   - .v119-reveal-word         — révélation stagger par mot sur h1/h2 italics
 *   - .v119-fil-or              — fil d'or SVG tracé au scroll (méthode)
 *   - .v119-sigil-footer        — sigil rotatif lent (footer signature)
 *
 * Tous les composants respectent prefers-reduced-motion (fin direct, pas d'anim).
 * Aucune dépendance externe. Aucun impact LCP (SVG inline + CSS keyframes).
 */

/* ──────────────────────────────────────────────────────────────────
   SIGIL DU CARREFOUR — signature hero
   C italique central + flèche amont (entrant) + flèche aval (sortant)
   + tag ‹/› technique. Apparition séquencée 1.6s total.
   ────────────────────────────────────────────────────────────────── */
.v119-sigil-crossroad {
  position: absolute;
  bottom: clamp(34px, 5vw, 64px);
  right: clamp(34px, 5vw, 88px);
  width: clamp(120px, 14vw, 200px);
  height: clamp(120px, 14vw, 200px);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: v119-sigil-fade-in 800ms var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 800ms forwards;
}

.v119-sigil-crossroad svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Cercle d'ancrage — fade-in lent */
.v119-sigil-crossroad__ring {
  transform-origin: center;
  transform: scale(0.6);
  opacity: 0;
  animation: v119-sigil-ring-in 1200ms var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1000ms forwards;
}

/* C italique — apparaît en premier (500ms après le start) */
.v119-sigil-crossroad__c {
  transform-origin: 100px 110px;
  transform: scale(0.85);
  opacity: 0;
  animation: v119-sigil-c-in 600ms var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1100ms forwards;
}

/* Flèche AMONT — glisse depuis la gauche (délai 200ms après le C) */
.v119-sigil-crossroad__arrow-in {
  transform: translateX(-30px);
  opacity: 0;
  animation: v119-sigil-arrow-in-left 700ms var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1300ms forwards;
}

/* Flèche AVAL — glisse depuis la droite (même délai que amont) */
.v119-sigil-crossroad__arrow-out {
  transform: translateX(30px);
  opacity: 0;
  animation: v119-sigil-arrow-in-right 700ms var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1300ms forwards;
}

/* Tag ‹/› — fade simple, en dernier */
.v119-sigil-crossroad__tag {
  opacity: 0;
  animation: v119-sigil-tag-in 500ms var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1700ms forwards;
}

@keyframes v119-sigil-fade-in {
  to { opacity: 1; }
}
@keyframes v119-sigil-ring-in {
  to { transform: scale(1); opacity: 0.6; }
}
@keyframes v119-sigil-c-in {
  to { transform: scale(1); opacity: 1; }
}
@keyframes v119-sigil-arrow-in-left {
  to { transform: translateX(0); opacity: 0.8; }
}
@keyframes v119-sigil-arrow-in-right {
  to { transform: translateX(0); opacity: 0.8; }
}
@keyframes v119-sigil-tag-in {
  to { opacity: 0.75; }
}

@media (max-width: 720px) {
  .v119-sigil-crossroad {
    bottom: 18px;
    right: 18px;
    width: 88px;
    height: 88px;
    opacity: 0.55; /* discret sur mobile pour ne pas dominer */
  }
}

/* ──────────────────────────────────────────────────────────────────
   REVEAL-WORDS — stagger par mot sur h1/h2 italics
   Le JS wrappe chaque mot dans <span class="v119-reveal-word"> avec
   --idx custom prop. CSS gère le stagger via calc(--idx × 60ms).
   ────────────────────────────────────────────────────────────────── */
.v119-reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--v119-rw-idx, 0) * 60ms),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--v119-rw-idx, 0) * 60ms);
  will-change: opacity, transform;
}
.v119-reveal-word.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────────
   FIL D'OR — tracé SVG progressif sur la section Méthode
   La longueur du path est animée via --v119-fil-progress (0 → 1)
   contrôlée par IntersectionObserver + JS.
   ────────────────────────────────────────────────────────────────── */
.v119-fil-or {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 50vw, 600px);
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.v119-fil-or.is-visible {
  opacity: 0.55;
}

.v119-fil-or__path {
  fill: none;
  stroke: var(--v119-gold-thread, #c8a868);
  stroke-width: 1;
  stroke-dasharray: var(--v119-fil-length, 1000);
  stroke-dashoffset: var(--v119-fil-length, 1000);
  transition: stroke-dashoffset 2200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.v119-fil-or.is-tracing .v119-fil-or__path {
  stroke-dashoffset: 0;
}

/* Anneaux aux étapes — apparition au passage du fil */
.v119-fil-or__node {
  fill: var(--v119-gold-thread, #c8a868);
  opacity: 0;
  transform-origin: center;
  transform: scale(0);
  transition:
    opacity 400ms ease-out,
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v119-fil-or.is-tracing .v119-fil-or__node {
  opacity: 0.85;
  transform: scale(1);
}
.v119-fil-or__node--2 { transition-delay: 600ms; }
.v119-fil-or__node--3 { transition-delay: 1100ms; }
.v119-fil-or__node--4 { transition-delay: 1600ms; }

/* ──────────────────────────────────────────────────────────────────
   HÉLICE FIBONACCI — décoration de fond, section VII Internal
   288 particules SVG (144 × 2 brins entrelacés, angle d'or).
   Rotation 88s linéaire infinie. Position absolute, derrière contenu.
   ────────────────────────────────────────────────────────────────── */
.v119-helix-bg {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  width: clamp(280px, 36vw, 520px);
  height: auto;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
  animation: v119-helix-rotate 88s linear infinite;
  mix-blend-mode: screen;
}
@keyframes v119-helix-rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
@media (max-width: 720px) {
  .v119-helix-bg {
    right: -25%;
    width: 280px;
    opacity: 0.35;
  }
}

/* ──────────────────────────────────────────────────────────────────
   SIGIL FOOTER — rotation lente 88s
   ────────────────────────────────────────────────────────────────── */
.v119-sigil-footer {
  display: inline-block;
  width: 64px;
  height: 64px;
  animation: v119-sigil-footer-spin 88s linear infinite;
  opacity: 0.5;
}
@keyframes v119-sigil-footer-spin {
  to { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────────────
   A11Y — prefers-reduced-motion : tout en place direct, zero anim
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v119-sigil-crossroad,
  .v119-sigil-crossroad__ring,
  .v119-sigil-crossroad__c,
  .v119-sigil-crossroad__arrow-in,
  .v119-sigil-crossroad__arrow-out,
  .v119-sigil-crossroad__tag {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .v119-reveal-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v119-fil-or {
    opacity: 0.4 !important;
    transition: none !important;
  }
  .v119-fil-or__path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .v119-fil-or__node {
    opacity: 0.85 !important;
    transform: scale(1) !important;
    transition: none !important;
  }
  .v119-sigil-footer {
    animation: none !important;
  }
  .v119-helix-bg {
    animation: none !important;
  }
}

}

/* --- components/constellation.css --- */
@layer components {
/*
 * constellation.css — Plan 119-ECO (refonte écosystème vivant).
 *
 * Mini-map constellation persistante : rail vertical droite, N nœuds = sections.
 * Lignes tissées au scroll, nœud actif éclairé, clic = téléportation section.
 *
 * Composants :
 *   .v119-constellation                  — wrapper rail fixed right
 *   .v119-constellation__svg             — SVG fond (lignes + nœuds gold)
 *   .v119-constellation__node            — un nœud (cercle + halo)
 *   .v119-constellation__label           — label texte au hover
 *   .v119-constellation__progress        — ligne progressive (stroke-dashoffset)
 *
 * Composants header (sigil-as-logo) :
 *   .v119-brand-sigil                    — sigil inline dans le header
 *
 * Composants hero CTA (intégré, pas flottant) :
 *   .v119-hero__entry-node               — premier nœud cliquable, partie de la constellation
 */

/* ─────────────────────────────────────────────────────────────────
   1. BRAND SIGIL (header logo) — remplace "Harnais.dev" générique
   ───────────────────────────────────────────────────────────────── */
.v119-brand-sigil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--v119-ink, #f5e9d4);
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.01em;
  transition: opacity 240ms ease;
}
.v119-brand-sigil:hover {
  opacity: 0.85;
}
.v119-brand-sigil__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--v119-gold-thread, #c8a868);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background: radial-gradient(circle at center, rgba(200,168,104,0.12) 0%, transparent 70%);
}
.v119-brand-sigil__mark::before {
  content: 'C';
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 18px;
  color: var(--v119-gold-thread, #c8a868);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}
.v119-brand-sigil__mark::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(200, 168, 104, 0.2);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 360ms ease, inset 360ms ease;
}
.v119-brand-sigil:hover .v119-brand-sigil__mark::after {
  opacity: 1;
  inset: -7px;
}
.v119-brand-sigil__text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.v119-brand-sigil__name {
  font-style: italic;
  font-size: 21px;
  color: var(--v119-ink, #f5e9d4);
}
.v119-brand-sigil__tagline {
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  opacity: 0.7;
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   2. CONSTELLATION RAIL — mini-map vertical, fixed right
   ───────────────────────────────────────────────────────────────── */
.v119-constellation {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 70;
  pointer-events: none;
  width: 56px;
  height: 60vh;
  max-height: 540px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 600ms ease 800ms;
}
.v119-constellation.is-ready {
  opacity: 1;
}

/* SVG fond : ligne verticale + lignes connexion progressives */
.v119-constellation__svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.v119-constellation__rail-line {
  fill: none;
  stroke: rgba(200, 168, 104, 0.18);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.v119-constellation__progress {
  fill: none;
  stroke: var(--v119-gold-thread, #c8a868);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: var(--v119-cons-length, 540);
  stroke-dashoffset: var(--v119-cons-length, 540);
  transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 4px rgba(200, 168, 104, 0.4));
}

/* Nœuds : cercles cliquables le long du rail */
.v119-constellation__node {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(10, 20, 40, 0.92);
  border: 1.5px solid rgba(200, 168, 104, 0.35);
  cursor: pointer;
  pointer-events: auto;
  transition:
    border-color 360ms ease,
    box-shadow 360ms ease,
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
.v119-constellation__node::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--v119-gold-thread, #c8a868);
  opacity: 0;
  transition: opacity 360ms ease;
}
.v119-constellation__node:hover {
  border-color: var(--v119-gold-thread, #c8a868);
  transform: scale(1.18);
  box-shadow: 0 0 14px rgba(200, 168, 104, 0.45);
}
.v119-constellation__node.is-visited::before {
  opacity: 0.55;
}
.v119-constellation__node.is-active {
  border-color: var(--v119-gold-thread, #c8a868);
  box-shadow: 0 0 20px rgba(200, 168, 104, 0.6);
}
.v119-constellation__node.is-active::before {
  opacity: 1;
  animation: v119-cons-pulse 1.8s ease-in-out infinite;
}
@keyframes v119-cons-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.75); opacity: 0.7; }
}

/* Label nœud — apparait au hover, glisse depuis la droite */
.v119-constellation__label {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  white-space: nowrap;
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  background: rgba(10, 20, 40, 0.92);
  padding: 6px 12px;
  border: 1px solid rgba(200, 168, 104, 0.32);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.v119-constellation__node:hover .v119-constellation__label,
.v119-constellation__node:focus-visible .v119-constellation__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.v119-constellation__node:focus-visible {
  outline: 2px solid var(--v119-gold-thread, #c8a868);
  outline-offset: 4px;
}

/* Numéro romain du chapitre — au centre du nœud actif */
.v119-constellation__roman {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 10px;
  color: var(--v119-bg-primary, #0a1428);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.v119-constellation__node.is-active .v119-constellation__roman {
  opacity: 1;
}

/* Mobile : constellation cachée, header + scroll classique */
@media (max-width: 980px) {
  .v119-constellation {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   3. HERO ENTRY NODE — premier nœud cliquable de la constellation
   Remplace le bouton flottant "Découvrir l'approche".
   ───────────────────────────────────────────────────────────────── */
.v119-hero__entry-node {
  position: absolute;
  bottom: clamp(120px, 14vh, 200px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--v119-ink, #f5e9d4);
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  animation: v119-entry-fade-in 1s var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1.8s forwards;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}
@keyframes v119-entry-fade-in {
  to { opacity: 1; }
}
.v119-hero__entry-node__orb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(200, 168, 104, 0.18) 0%, transparent 70%);
  border: 1px solid rgba(200, 168, 104, 0.55);
  transition: border-color 360ms ease, box-shadow 360ms ease, transform 360ms ease;
}
.v119-hero__entry-node__orb::before,
.v119-hero__entry-node__orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200, 168, 104, 0.18);
  border-radius: 50%;
  animation: v119-entry-pulse 2.6s ease-out infinite;
}
.v119-hero__entry-node__orb::after { animation-delay: 1.3s; }
@keyframes v119-entry-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0;   }
}
.v119-hero__entry-node__chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--v119-gold-thread, #c8a868);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v119-hero__entry-node:hover .v119-hero__entry-node__orb {
  border-color: var(--v119-gold-thread, #c8a868);
  box-shadow: 0 0 32px rgba(200, 168, 104, 0.35);
  transform: translateY(2px);
}
.v119-hero__entry-node__label {
  opacity: 0.7;
  transition: opacity 240ms ease;
}
.v119-hero__entry-node:hover .v119-hero__entry-node__label {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   4. FORCE-GRAPH — 5 leviers interactifs Internal (canvas + tooltip)
   ───────────────────────────────────────────────────────────────── */
.v119-force-graph {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: clamp(34px, 5vw, 55px) auto 0;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(19, 30, 58, 0.45) 0%, rgba(10, 20, 40, 0) 70%);
  overflow: hidden;
  isolation: isolate;
}
.v119-force-graph__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.v119-force-graph__canvas:active {
  cursor: grabbing;
}
.v119-force-graph__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  opacity: 0.45;
  pointer-events: none;
  white-space: nowrap;
}
.v119-force-graph__tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(10, 20, 40, 0.94);
  border: 1px solid rgba(200, 168, 104, 0.32);
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 260px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 5;
  font-family: var(--v119-font-body, 'Inter', sans-serif);
}
.v119-force-graph__tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.v119-force-graph__tooltip-num {
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13px;
  color: var(--v119-gold-thread, #c8a868);
  margin-right: 6px;
}
.v119-force-graph__tooltip-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--v119-ink, #f5e9d4);
}
.v119-force-graph__tooltip-body {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(245, 233, 212, 0.72);
}

/* ─────────────────────────────────────────────────────────────────
   5. FLIP-CARD COOP — mockup interface client retournable
   ───────────────────────────────────────────────────────────────── */
.v119-flip {
  position: relative;
  perspective: 1200px;
  cursor: pointer;
  /* min-height match the .v119-screen content, prevents collapse */
  min-height: 340px;
  margin-top: 32px; /* space for hint */
}
.v119-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}
.v119-flip.is-flipped .v119-flip__inner {
  transform: rotateY(180deg);
}
.v119-flip__face,
.v119-flip__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.v119-flip__back {
  transform: rotateY(180deg);
  background: rgba(19, 30, 58, 0.55);
  border: 1px solid rgba(200, 168, 104, 0.28);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.v119-flip__back-title {
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 22px;
  color: var(--v119-gold-thread, #c8a868);
  margin: 0;
}
.v119-flip__back-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 14px;
  border-left: 2px solid rgba(200, 168, 104, 0.32);
}
.v119-flip__back-item-label {
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  opacity: 0.7;
}
.v119-flip__back-item-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245, 233, 212, 0.85);
}
.v119-flip__hint {
  position: absolute;
  top: -28px;
  right: 0;
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  opacity: 0.55;
  transition: opacity 240ms ease;
}
.v119-flip:hover .v119-flip__hint {
  opacity: 1;
}
.v119-flip.is-flipped .v119-flip__hint::before {
  content: '↩ ';
}

/* ─────────────────────────────────────────────────────────────────
   6. FIL D'ARIANE / ADN GLOBAL — spine SVG traversant toute la page
   Organique, golden-angle waves, knots aux ancres de section.
   Position: absolute sur body, derrière tout contenu. C'est LE fil
   qui fait que la constellation, le force-graph et les sections sont
   manifestations du même ADN, pas des îlots juxtaposés.
   ───────────────────────────────────────────────────────────────── */
/* Main doit être positioned pour que .v119-spine se cale sur sa hauteur réelle */
main#main {
  position: relative;
}
.v119-spine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.v119-spine * {
  pointer-events: none;
}
.v119-spine__svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 22vw, 420px);
  height: 100%;
  overflow: visible;
  opacity: 0.45;
}
.v119-spine__path {
  fill: none;
  stroke: var(--v119-gold-thread, #c8a868);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: var(--v119-spine-length, 4000);
  stroke-dashoffset: var(--v119-spine-length, 4000);
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 5px rgba(200, 168, 104, 0.4));
  vector-effect: non-scaling-stroke;
}
.v119-spine__path--shadow {
  stroke: rgba(200, 168, 104, 0.18);
  stroke-width: 0.8;
  stroke-dasharray: 4 8;
  stroke-dashoffset: 0;
  filter: none;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}
/* Knots = nœuds aux ancres section — positionnés JS via top: %offset */
.v119-spine__knot {
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.2px solid rgba(200, 168, 104, 0.4);
  background: rgba(10, 20, 40, 0.92);
  transform: translate(-50%, -50%);
  transition: border-color 360ms ease, box-shadow 360ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v119-spine__knot::before {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--v119-gold-thread, #c8a868);
  opacity: 0;
  transition: opacity 320ms ease;
}
.v119-spine__knot.is-visited::before {
  opacity: 0.5;
}
.v119-spine__knot.is-active {
  border-color: var(--v119-gold-thread, #c8a868);
  box-shadow: 0 0 18px rgba(200, 168, 104, 0.55);
  transform: translate(-50%, -50%) scale(1.18);
}
.v119-spine__knot.is-active::before {
  opacity: 1;
  animation: v119-spine-pulse 2.2s ease-in-out infinite;
}
@keyframes v119-spine-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.7); opacity: 0.65; }
}
/* Spine compact en mobile : juste les knots, pas le path complet */
@media (max-width: 720px) {
  .v119-spine__svg {
    width: 80px;
    left: 16px;
    transform: none;
    opacity: 0.4;
  }
  .v119-spine__knot {
    left: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   7. CO-SPOTLIGHT — bidirectional sync nœud canvas ↔ pilier HTML
   Hover sur un nœud du force-graph → le pilier correspondant scintille.
   Hover sur un pilier → le nœud canvas s'illumine. Visualisation
   tangible : "ces deux représentations sont la MÊME chose".
   ───────────────────────────────────────────────────────────────── */
.v119-pillar {
  transition: background-color 320ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 10px;
  padding: 8px 12px;
  margin-left: -12px;
  cursor: pointer;
}
.v119-pillar.is-cospotlight {
  background: linear-gradient(90deg, rgba(200, 168, 104, 0.12) 0%, transparent 60%);
  transform: translateX(4px);
}
.v119-pillar.is-cospotlight .v119-pillar__num {
  color: var(--v119-gold-thread, #c8a868);
  text-shadow: 0 0 12px rgba(200, 168, 104, 0.5);
  transition: color 240ms ease, text-shadow 240ms ease;
}
.v119-pillar.is-cospotlight .v119-pillar__name {
  color: var(--v119-ink, #f5e9d4);
}

@media (prefers-reduced-motion: reduce) {
  .v119-constellation {
    transition: none !important;
    opacity: 1 !important;
  }
  .v119-constellation__progress {
    transition: none !important;
  }
  .v119-constellation__node.is-active::before {
    animation: none !important;
  }
  .v119-hero__entry-node,
  .v119-hero__entry-node__orb::before,
  .v119-hero__entry-node__orb::after {
    animation: none !important;
    opacity: 1 !important;
  }
  .v119-flip__inner {
    transition: none !important;
  }
  .v119-force-graph__canvas {
    cursor: default !important;
  }
  .v119-spine__path {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
  .v119-spine__knot.is-active::before {
    animation: none !important;
  }
  .v119-pillar {
    transition: none !important;
  }
}

}

/* --- components/interface-split.css --- */
@layer components {
/*
 * interface-split.css — Plan 119-ECO §IV-bis.
 *
 * Section "Interface : Personnelle et Business, segmentées".
 * Layout : 3 colonnes (Perso · Bridge · Business). Sur mobile : stack vertical.
 * Ton : professionnel, sobre. Pas d'emoji, pas d'effets décoratifs gratuits.
 */

.v119-iface {
  padding: clamp(55px, 8vw, 110px) 0;
  position: relative;
}
.v119-iface__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(21px, 5vw, 55px);
}

.v119-iface__head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.v119-iface__title {
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  color: var(--v119-ink, #f5e9d4);
  margin: 0 0 18px;
}
.v119-iface__lede {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.65;
  color: rgba(245, 233, 212, 0.78);
  margin: 0;
}

.v119-iface__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 2.5vw, 40px);
  align-items: stretch;
}
@media (max-width: 980px) {
  .v119-iface__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Colonnes Perso / Business ─────────────────────────────────── */
.v119-iface__col {
  background: rgba(19, 30, 58, 0.42);
  border: 1px solid rgba(200, 168, 104, 0.20);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 38px);
  position: relative;
  transition: border-color 360ms ease, transform 360ms ease, background 360ms ease;
}
.v119-iface__col:hover {
  border-color: rgba(200, 168, 104, 0.42);
  background: rgba(19, 30, 58, 0.55);
  transform: translateY(-2px);
}
.v119-iface__col--perso {
  border-top: 2px solid rgba(245, 233, 212, 0.45);
}
.v119-iface__col--biz {
  border-top: 2px solid var(--v119-gold-thread, #c8a868);
}
.v119-iface__col-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245, 233, 212, 0.08);
}
.v119-iface__col-eyebrow {
  display: inline-block;
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  margin-bottom: 8px;
  opacity: 0.85;
}
.v119-iface__col-title {
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--v119-ink, #f5e9d4);
  margin: 0;
}
.v119-iface__col-intro {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 233, 212, 0.72);
  margin: 0 0 22px;
}
.v119-iface__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v119-iface__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 14px;
  border-left: 2px solid rgba(200, 168, 104, 0.22);
  transition: border-left-color 240ms ease;
}
.v119-iface__item:hover {
  border-left-color: rgba(200, 168, 104, 0.55);
}
.v119-iface__item-name {
  font-family: var(--v119-font-body, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--v119-ink, #f5e9d4);
  letter-spacing: 0.005em;
}
.v119-iface__item-body {
  font-family: var(--v119-font-body, 'Inter', sans-serif);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(184, 196, 220, 0.7);
}

/* ── BRIDGE central ─────────────────────────────────────────────── */
.v119-iface__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(18px, 2vw, 26px) clamp(12px, 1.5vw, 18px);
  position: relative;
  width: clamp(170px, 18vw, 240px);
}
@media (max-width: 980px) {
  .v119-iface__bridge {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
  }
}
.v119-iface__bridge-label {
  display: inline-block;
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  border: 1px solid rgba(200, 168, 104, 0.32);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.v119-iface__bridge-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 0 12px rgba(200, 168, 104, 0.15));
}

/* Vesica Piscis — respiration lente des deux cercles */
.v119-iface__vesica circle:nth-child(1) { animation: v119-iface-breathe-perso 6s ease-in-out infinite; transform-origin: 75px 120px; }
.v119-iface__vesica circle:nth-child(2) { animation: v119-iface-breathe-biz 6s ease-in-out infinite; transform-origin: 125px 120px; animation-delay: 3s; }
.v119-iface__vesica ellipse {
  animation: v119-iface-mandorle 4s ease-in-out infinite;
  transform-origin: 100px 120px;
}
@keyframes v119-iface-breathe-perso {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes v119-iface-breathe-biz {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes v119-iface-mandorle {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1;    }
}

/* Cœur mandorle — pulse golden ratio (1.618s) */
.v119-iface__heart {
  animation: v119-iface-heart-pulse 1.618s ease-in-out infinite;
  transform-origin: 100px 120px;
}
@keyframes v119-iface-heart-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.95; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}

/* Particules de flux — circulent le long des paths courbes */
.v119-iface__particle {
  offset-rotate: 0deg;
  filter: drop-shadow(0 0 4px rgba(200, 168, 104, 0.85));
}
.v119-iface__particle--1 {
  offset-path: path('M 30 80 Q 100 60, 170 80');
  animation: v119-iface-flow-along 5.4s linear infinite;
}
.v119-iface__particle--2 {
  offset-path: path('M 170 120 Q 100 100, 30 120');
  animation: v119-iface-flow-along 4.8s linear infinite;
  animation-delay: 1.6s;
}
.v119-iface__particle--3 {
  offset-path: path('M 30 160 Q 100 180, 170 160');
  animation: v119-iface-flow-along 6s linear infinite;
  animation-delay: 3.2s;
}
@keyframes v119-iface-flow-along {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Flux paths — éclatent leur opacité */
.v119-iface__flux {
  stroke-dasharray: 6 4;
  animation: v119-iface-flux-stream 3s linear infinite;
}
.v119-iface__flux--2 { animation-delay: 1s; }
.v119-iface__flux--3 { animation-delay: 2s; }
@keyframes v119-iface-flux-stream {
  from { stroke-dashoffset: 0;  opacity: 0.55; }
  50%  { opacity: 1; }
  to   { stroke-dashoffset: -30; opacity: 0.55; }
}
.v119-iface__bridge-intro {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(245, 233, 212, 0.72);
  margin: 0 0 14px;
  font-style: italic;
}
.v119-iface__bridge-flows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.v119-iface__bridge-flows li {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(184, 196, 220, 0.68);
  padding-left: 12px;
  position: relative;
}
.v119-iface__bridge-flows li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--v119-gold-thread, #c8a868);
  font-size: 10px;
}

.v119-iface__foot {
  text-align: center;
  margin-top: clamp(34px, 5vw, 55px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 233, 212, 0.78);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .v119-iface__col,
  .v119-iface__item {
    transition: none !important;
  }
  .v119-iface__vesica circle,
  .v119-iface__vesica ellipse,
  .v119-iface__heart,
  .v119-iface__particle,
  .v119-iface__flux {
    animation: none !important;
    opacity: 1 !important;
  }
}

}

/* --- components/central-stage.css --- */
@layer components {
/*
 * central-stage.css — Plan 119-ECO §central-canvas.
 *
 * Scène centrale fixe en arrière-plan. Canvas2D scroll-driven, morphing à
 * travers 6 phases narratives (ADN → tourbillon → cockpit → galaxie → vitesse
 * lumière → repos CTA). Particules en or sur fond ink, mix-blend-mode screen
 * pour rester lisible avec le texte au-dessus.
 *
 * Cachée sur mobile (perf) et reduced-motion (a11y).
 */

/* ── Backdrop continu : body solide, sections transparentes ─────── */
body { background: var(--v119-bg-primary, #0a1428); }

.v119-hero,
.v119-origin,
.v119-method,
.v119-cooperation,
.v119-site,
.v119-cases,
.v119-internal,
.v119-pricing,
.v119-advantages,
.v119-invitation,
.v119-iface,
.v119-capabilities {
  background: transparent !important;
  position: relative;
  z-index: 5;
}

/* Header + footer + constellation rail — au-dessus du canvas */
.lp-top { z-index: 80; }
.lp-foot { position: relative; z-index: 80; background: rgba(10, 20, 40, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.v119-constellation { z-index: 90; }

/* Stage : 2 canvases avec content sandwich pour effet orbital de profondeur.
   - back  (z-index 1) : particules avec z<0, derrière tout le contenu
   - front (z-index 50) : particules avec z>0, AU-DESSUS du contenu DOM
                         mais sous header/constellation rail (z=80/90)
   Le content section (z=5) est entre les deux → effet 3D orbital. */
.v119-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.v119-stage--front {
  z-index: 50;
}
.v119-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.45;
}
.v119-stage__canvas--front {
  opacity: 0.55;
}

/* Indicateur de phase — discret, monospace, bas-droit. Informe le visiteur
   que la transformation visuelle suit son scroll. */
.v119-stage__phase-label {
  position: fixed;
  bottom: 24px;
  right: 80px;
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  opacity: 0.5;
  pointer-events: none;
  z-index: 60;
  transition: opacity 360ms ease;
  white-space: nowrap;
}
.v119-stage__phase-label.is-hidden {
  opacity: 0;
}

@media (max-width: 980px) {
  .v119-stage { display: none; }
  .v119-stage__phase-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v119-stage { display: none; }
  .v119-stage__phase-label { display: none; }
}

}

/* --- components/palier.css --- */
@layer components {
/*
 * components/palier.css — Plan 119-W (extracted from Plan 119-Q-C).
 *
 * Card .v119-palier (chap. III méthode). 3 paliers en grid auto-fit,
 * cards rectangulaires sobres avec sceau-particule au coin (apparaît
 * à viewport-enter via .is-revealed), hover lift -2px.
 */

/* Plan 119-AAB-B — pattern auth-modal cohérent sur toutes les <article>. */
.v119-palier {
  position: relative;
  padding: 32px 28px 36px;
  background: var(--v119-card-bg);
  border: var(--v119-card-border);
  border-radius: var(--v119-card-radius);
  box-shadow: var(--v119-card-shadow);
  transition: border-color var(--v119-phi-2) var(--v119-ease-out),
              transform var(--v119-phi-2) var(--v119-ease-out),
              box-shadow var(--v119-phi-2) var(--v119-ease-out);
}

.v119-palier:hover {
  border-color: rgba(200, 168, 104, 0.45);
  transform: translateY(-2px);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(200, 168, 104, 0.16),
    inset 0 1px 0 rgba(245, 233, 212, 0.06);
}

.v119-palier__roman {
  display: block;
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--v119-gold-thread);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.v119-palier__name {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--v119-ink);
  margin: 0 0 16px 0;
}

.v119-palier__body {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
  margin: 0;
}

.v119-palier__body strong {
  color: var(--v119-ink);
  font-weight: 500;
}

/* Sceau-particule au coin des paliers (déclenché à viewport-enter) */
.v119-palier__seal {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--v119-phi-3) var(--v119-ease-out),
              transform var(--v119-phi-3) var(--v119-ease-out);
}

.v119-palier.is-revealed .v119-palier__seal {
  opacity: 0.5;
  transform: scale(1);
}

.v119-palier__seal circle {
  fill: var(--v119-gold-deep);
  stroke: var(--v119-gold-thread);
  stroke-width: 0.5;
}

}

/* --- components/portrait.css --- */
@layer components {
/*
 * components/portrait.css — Plan 119-X-B-3 (Section "À propos" Vincent).
 *
 * Avatar avec contour SVG silhouette qui se trace au scroll (cohérent thème
 * spirale Fibonacci + trait d'encre or). Slot photo qui fade-in derrière le
 * contour quand fournie (sinon contour seul, élégant et impersonnel).
 *
 * Structure attendue :
 *   <figure class="v119-portrait" data-v119-portrait>
 *     <div class="v119-portrait__halo" aria-hidden="true"></div>
 *     <svg class="v119-portrait__contour" viewBox="0 0 100 100">
 *       <path class="v119-portrait__path" d="..." />
 *     </svg>
 *     <img class="v119-portrait__photo" src="..." alt="..." (optionnel)/>
 *   </figure>
 */

.v119-portrait {
  position: relative;
  width: clamp(180px, 22vw, 260px);
  height: clamp(180px, 22vw, 260px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Plan 119-XY — Spirale Fibonacci ambient en arrière-plan du portrait.
   Le path est généré par vitrine.js (buildSpiralPath, paramétrique φ).
   L'animation se déclenche au reveal — calligraphie lente, gold tamisé. */
.v119-portrait__spiral {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transform: rotate(-18deg);
  transition: opacity 1.6s var(--v119-ease-out);
}

.v119-portrait.is-revealed .v119-portrait__spiral { opacity: 0.55; }

.v119-portrait__spiral-path {
  fill: none;
  stroke: var(--v119-gold-thread);
  stroke-width: 0.35;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(200, 168, 104, 0.30));
  /* le tracé scroll-progress est géré globalement par bindSpiralScroll
     dans .v119-spiral-zone ; ici on s'en passe — animation au reveal */
}

.v119-portrait.is-revealed .v119-portrait__spiral-path {
  animation: v119-portrait-spiral-trace 4.2s var(--v119-ease-out) 0.4s forwards;
}

@keyframes v119-portrait-spiral-trace {
  /* La spirale est dessinée avec le pathLength supposé de 100, mais le
     vrai pathLength varie selon l'instance. On joue stroke-dashoffset
     comme un compteur 0% → 100% avec stroke-dasharray défini par JS si
     dispo, sinon fallback CSS pathLength="100". */
  from { stroke-dashoffset: 100; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

/* Halo aurore tamisée derrière le portrait */
.v119-portrait__halo {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 50%, rgba(200, 168, 104, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(58, 142, 170, 0.10) 0%, transparent 60%);
  filter: blur(10px); /* Plan 119-PERF — 20→10px (GPU cost ~halved) */
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

/* Cercle d'accueil + contour SVG silhouette */
.v119-portrait__contour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

/* Cercle extérieur encadrant le portrait */
.v119-portrait__circle {
  fill: none;
  stroke: var(--v119-gold-thread);
  stroke-width: 0.8;
  stroke-dasharray: 314;            /* ≈ 2π × 50 */
  stroke-dashoffset: 314;
  opacity: 0.6;
  filter: drop-shadow(0 0 4px rgba(200, 168, 104, 0.35));
  transform-origin: center;
  transform: rotate(-90deg);        /* commence en haut */
}

.v119-portrait.is-revealed .v119-portrait__circle {
  animation: v119-portrait-circle-trace 2.4s var(--v119-ease-out) forwards;
}

@keyframes v119-portrait-circle-trace {
  to { stroke-dashoffset: 0; }
}

/* Path silhouette buste (intérieur du cercle) */
.v119-portrait__path {
  fill: none;
  stroke: var(--v119-gold-thread);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;            /* approximativement la longueur du path */
  stroke-dashoffset: 220;
  opacity: 0.85;
  filter: drop-shadow(0 0 3px rgba(200, 168, 104, 0.45));
}

.v119-portrait.is-revealed .v119-portrait__path {
  animation: v119-portrait-path-trace 2s var(--v119-ease-out) 0.6s forwards;
}

@keyframes v119-portrait-path-trace {
  to { stroke-dashoffset: 0; }
}

/* Photo réelle (slot optionnel) — fade-in derrière le contour */
.v119-portrait__photo {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  filter: grayscale(40%) sepia(15%) brightness(0.95);  /* harmonise avec palette ivoire/or */
  transition: opacity var(--v119-phi-5) var(--v119-ease-out);
}

.v119-portrait.is-revealed .v119-portrait__photo {
  opacity: 0.92;
  animation: v119-portrait-photo-emerge 2.6s var(--v119-ease-out) 1.2s forwards;
}

@keyframes v119-portrait-photo-emerge {
  from { opacity: 0; filter: grayscale(80%) sepia(40%) brightness(0.6) blur(4px); }
  to   { opacity: 0.92; filter: grayscale(40%) sepia(15%) brightness(0.95) blur(0); }
}

/* Reduced-motion : tout figé valeurs finales */
@media (prefers-reduced-motion: reduce) {
  .v119-portrait__circle,
  .v119-portrait__path { stroke-dashoffset: 0 !important; animation: none !important; }
  .v119-portrait__photo { opacity: 0.92 !important; animation: none !important; filter: grayscale(40%) sepia(15%) brightness(0.95) !important; }
}

}

/* --- components/screen.css --- */
@layer components {
/*
 * components/screen.css — Plan 119-W (extracted from Plan 119-Q-C).
 *
 * Mock interface client (chap. IV — coopération). Composant complexe
 * avec :
 *   - bar fenêtre (3 dots gold-deep + titre uppercase)
 *   - panneaux 1.4fr/1fr (Articles à valider / Newsletter drawer)
 *   - rows animées (apparition cyclique stagger phi-1)
 *   - toggle envoi-auto bounce gold-deep ↔ gold-thread
 *   - animation respire (translateY ±3px + box-shadow pulse 6s)
 */

.v119-screen {
  position: relative;
  background: var(--v119-bg-primary);
  border: 1px solid rgba(200, 168, 104, 0.28);
  border-radius: 10px;
  padding: 16px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(200, 168, 104, 0.08);
  font-family: var(--v119-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--v119-ink-muted);
  letter-spacing: 0.01em;
  animation: v119-screen-breath 6s var(--v119-ease-soft) infinite;
}

@keyframes v119-screen-breath {
  0%, 100% { transform: translateY(0); box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 32px rgba(200,168,104,0.08); }
  50%      { transform: translateY(-3px); box-shadow: 0 28px 72px rgba(0,0,0,0.55), 0 0 40px rgba(200,168,104,0.14); }
}

.v119-screen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(154, 125, 74, 0.16);
}

.v119-screen__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v119-gold-deep);
  opacity: 0.4;
}
.v119-screen__dot:nth-child(2) { opacity: 0.55; }
.v119-screen__dot:nth-child(3) { opacity: 0.7; }

.v119-screen__title {
  margin-left: 12px;
  font-family: var(--v119-font-mono);
  font-size: 11px;
  color: var(--v119-ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.v119-screen__panels {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}

.v119-screen__panel {
  padding: 12px 14px;
  background: rgba(245, 233, 212, 0.02);
  border: 1px solid rgba(154, 125, 74, 0.12);
  border-radius: 6px;
  min-height: 110px;
}

.v119-screen__panel-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v119-gold-thread);
  margin-bottom: 8px;
  opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────────────────
   Histoire animée 12s (Plan 119-NN — suite de l'animation Plan 119-Q-C)

   Cycle narratif unique sur tout le screen, scrollytelling silencieux :
     0.0–1.5s  : rows arrivent en cascade Fibonacci (panel tasks + drawer)
     2.0–3.5s  : tâche 1 cochée + barrée — meta passe à "✓"
     3.5–5.0s  : tâche 2 cochée + barrée
     5.0–6.5s  : tâche 3 cochée + barrée
     6.5–8.0s  : compteurs drawer pulse + incrémentent (3→6, 2→3)
     8.0–9.5s  : toggle bounce ON + halo gold-thread (envoi auto activé)
     9.5–11.5s : tout reste figé (état "completed" — fierté du résultat)
     11.5–12s  : reset doux pour relooper
────────────────────────────────────────────────────────────────────── */

.v119-screen__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(154, 125, 74, 0.08);
  opacity: 0;
  transform: translateY(4px);
  animation: v119-row-arrive 12s var(--v119-ease-out) infinite;
}
/* Stagger Fibonacci sur les rows (peu importe le type DOM) */
.v119-screen__row:nth-child(1 of .v119-screen__row) { animation-delay: 0s; }
.v119-screen__row:nth-child(2 of .v119-screen__row) { animation-delay: 0.382s; }
.v119-screen__row:nth-child(3 of .v119-screen__row) { animation-delay: 0.618s; }
.v119-screen__row:last-child    { border-bottom: none; }

@keyframes v119-row-arrive {
  0%, 100% { opacity: 0; transform: translateY(4px); }
  6%, 96%  { opacity: 1; transform: translateY(0); }
}

/* ── Icon = checkbox progressif (cercle vide → rempli + ✓) ─────────────
   Phase 1 : cercle creux (border gold-deep semi-transparent)
   Phase 2 : se remplit en gold-thread + ::after dessine le check
*/
.v119-screen__row-icon {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 1.2px solid rgba(200, 168, 104, 0.45);
  flex-shrink: 0;
  transition: background var(--v119-phi-1) var(--v119-ease-out),
              border-color var(--v119-phi-1) var(--v119-ease-out);
}
.v119-screen__row-icon::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 1.8px;
  width: 5px;
  height: 2.5px;
  border-left: 1.4px solid var(--v119-bg-primary);
  border-bottom: 1.4px solid var(--v119-bg-primary);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  opacity: 0;
}

/* Tâche : cycle 12s qui passe l'icon de creux → coché */
.v119-screen__panel--tasks .v119-screen__row--task .v119-screen__row-icon {
  animation: v119-task-check 12s var(--v119-ease-out) infinite;
}
.v119-screen__panel--tasks .v119-screen__row--task .v119-screen__row-icon::after {
  animation: v119-task-checkmark 12s var(--v119-ease-out) infinite;
}
/* Stagger : row 1 coche au timecode 17%, row 2 à 30%, row 3 à 42% */
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(1 of .v119-screen__row--task) .v119-screen__row-icon,
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(1 of .v119-screen__row--task) .v119-screen__row-icon::after { animation-delay: 0s; }
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(2 of .v119-screen__row--task) .v119-screen__row-icon,
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(2 of .v119-screen__row--task) .v119-screen__row-icon::after { animation-delay: 1.5s; }
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(3 of .v119-screen__row--task) .v119-screen__row-icon,
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(3 of .v119-screen__row--task) .v119-screen__row-icon::after { animation-delay: 3s; }

@keyframes v119-task-check {
  0%, 16%   { background: transparent; border-color: rgba(200, 168, 104, 0.45); }
  20%, 95%  { background: var(--v119-gold-thread); border-color: var(--v119-gold-thread); }
  100%      { background: transparent; border-color: rgba(200, 168, 104, 0.45); }
}
@keyframes v119-task-checkmark {
  0%, 17%    { transform: rotate(-45deg) scale(0); opacity: 0; }
  22%, 95%   { transform: rotate(-45deg) scale(1); opacity: 1; }
  100%       { transform: rotate(-45deg) scale(0); opacity: 0; }
}

/* Drawer (newsletter) : icon pulse au moment de l'incrément ─────────── */
.v119-screen__panel--drawer .v119-screen__row--count .v119-screen__row-icon {
  background: var(--v119-gold-thread);
  border-color: var(--v119-gold-thread);
  opacity: 0.55;
  animation: v119-count-glow 12s var(--v119-ease-soft) infinite;
}
.v119-screen__panel--drawer .v119-screen__row--count:nth-child(1 of .v119-screen__row--count) .v119-screen__row-icon { animation-delay: 0s; }
.v119-screen__panel--drawer .v119-screen__row--count:nth-child(2 of .v119-screen__row--count) .v119-screen__row-icon { animation-delay: 0.4s; }

@keyframes v119-count-glow {
  0%, 50%, 100% { box-shadow: 0 0 0 rgba(200, 168, 104, 0); opacity: 0.55; }
  55%, 70%      { box-shadow: 0 0 8px rgba(200, 168, 104, 0.55); opacity: 1; }
}

/* ── Texte : strikethrough animé pour les tâches cochées ──────────────
   Pseudo-élément ::after = ligne dessinée de gauche à droite synchronisée
   avec le checkmark (~22% du cycle).
*/
.v119-screen__row-text {
  position: relative;
  font-family: var(--v119-font-mono);
  font-size: 11px;
  color: var(--v119-ink-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--v119-phi-1) var(--v119-ease-out);
}
.v119-screen__panel--tasks .v119-screen__row--task .v119-screen__row-text::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--v119-gold-deep) 0%, var(--v119-gold-thread) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.85;
  animation: v119-task-strike 12s var(--v119-ease-out) infinite;
}
.v119-screen__panel--tasks .v119-screen__row--task .v119-screen__row-text {
  animation: v119-task-fade 12s var(--v119-ease-out) infinite;
}
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(1 of .v119-screen__row--task) .v119-screen__row-text,
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(1 of .v119-screen__row--task) .v119-screen__row-text::after { animation-delay: 0s; }
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(2 of .v119-screen__row--task) .v119-screen__row-text,
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(2 of .v119-screen__row--task) .v119-screen__row-text::after { animation-delay: 1.5s; }
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(3 of .v119-screen__row--task) .v119-screen__row-text,
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(3 of .v119-screen__row--task) .v119-screen__row-text::after { animation-delay: 3s; }

@keyframes v119-task-strike {
  0%, 18%    { transform: scaleX(0); opacity: 0; }
  24%        { transform: scaleX(1); opacity: 0.85; }
  95%        { transform: scaleX(1); opacity: 0.85; }
  100%       { transform: scaleX(0); opacity: 0; }
}
@keyframes v119-task-fade {
  0%, 18%    { color: var(--v119-ink-muted); }
  24%, 95%   { color: rgba(200, 184, 154, 0.50); }
  100%       { color: var(--v119-ink-muted); }
}

/* ── Meta (durée) : devient "✓" gold-thread quand la tâche est cochée ── */
.v119-screen__row-meta {
  font-size: 10px;
  color: var(--v119-gold-deep);
  letter-spacing: 0.04em;
  position: relative;
  transition: color var(--v119-phi-1) var(--v119-ease-out);
}
.v119-screen__panel--tasks .v119-screen__row--task .v119-screen__row-meta {
  animation: v119-task-meta 12s var(--v119-ease-out) infinite;
}
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(1 of .v119-screen__row--task) .v119-screen__row-meta { animation-delay: 0s; }
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(2 of .v119-screen__row--task) .v119-screen__row-meta { animation-delay: 1.5s; }
.v119-screen__panel--tasks .v119-screen__row--task:nth-child(3 of .v119-screen__row--task) .v119-screen__row-meta { animation-delay: 3s; }

@keyframes v119-task-meta {
  0%, 18%    { color: var(--v119-gold-deep); opacity: 1; }
  24%, 95%   { color: var(--v119-gold-thread); opacity: 0.85; }
  100%       { color: var(--v119-gold-deep); opacity: 1; }
}

/* ── Compteur drawer (3 → 6 articles, 2 → 3 nouveautés) ───────────────
   Pure CSS via ::before injecté quand on passe au-dessus du seuil temporel.
   Pas de JS — texte data-from visible par défaut, ::before remplace data-to.
*/
.v119-screen__counter {
  position: relative;
  display: inline-block;
  min-width: 0.7em;
}
.v119-screen__counter::before {
  content: attr(data-to);
  position: absolute;
  inset: 0;
  color: var(--v119-gold-thread);
  opacity: 0;
  transform: translateY(-3px);
  animation: v119-counter-flip 12s var(--v119-ease-out) infinite;
}
.v119-screen__counter {
  animation: v119-counter-original 12s var(--v119-ease-out) infinite;
}
.v119-screen__panel--drawer .v119-screen__row--count:nth-child(1 of .v119-screen__row--count) .v119-screen__counter,
.v119-screen__panel--drawer .v119-screen__row--count:nth-child(1 of .v119-screen__row--count) .v119-screen__counter::before { animation-delay: 0s; }
.v119-screen__panel--drawer .v119-screen__row--count:nth-child(2 of .v119-screen__row--count) .v119-screen__counter,
.v119-screen__panel--drawer .v119-screen__row--count:nth-child(2 of .v119-screen__row--count) .v119-screen__counter::before { animation-delay: 0.382s; }

@keyframes v119-counter-original {
  0%, 53%    { color: inherit; opacity: 1; transform: translateY(0); }
  56%        { opacity: 0; transform: translateY(3px); }
  60%, 95%   { opacity: 0; }
  100%       { color: inherit; opacity: 1; transform: translateY(0); }
}
@keyframes v119-counter-flip {
  0%, 55%    { opacity: 0; transform: translateY(-3px); }
  60%, 95%   { opacity: 1; transform: translateY(0); color: var(--v119-gold-thread); }
  100%       { opacity: 0; transform: translateY(-3px); }
}

/* ── Toggle envoi auto : ON synchronisé au climax (~9s) ─────────────── */
.v119-screen__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--v119-font-mono);
  font-size: 10.5px;
  color: var(--v119-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  animation: v119-toggle-label 12s var(--v119-ease-out) infinite;
}
@keyframes v119-toggle-label {
  0%, 65%    { color: var(--v119-ink-muted); }
  72%, 95%   { color: var(--v119-gold-thread); }
  100%       { color: var(--v119-ink-muted); }
}

.v119-screen__toggle-switch {
  width: 22px;
  height: 12px;
  background: rgba(200, 168, 104, 0.18);
  border-radius: 99px;
  position: relative;
  border: 1px solid rgba(200, 168, 104, 0.4);
  transition: background var(--v119-phi-1) var(--v119-ease-out),
              box-shadow var(--v119-phi-1) var(--v119-ease-out);
  animation: v119-toggle-track 12s var(--v119-ease-soft) infinite;
}
@keyframes v119-toggle-track {
  0%, 65%    { background: rgba(200, 168, 104, 0.18); box-shadow: none; }
  72%, 95%   { background: rgba(200, 168, 104, 0.32); box-shadow: 0 0 12px rgba(200, 168, 104, 0.25); }
  100%       { background: rgba(200, 168, 104, 0.18); box-shadow: none; }
}

.v119-screen__toggle-switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v119-gold-deep);
  animation: v119-toggle-knob 12s var(--v119-ease-soft) infinite;
}

@keyframes v119-toggle-knob {
  0%, 65%    { left: 1px; background: var(--v119-gold-deep); box-shadow: none; }
  72%, 95%   { left: 12px; background: var(--v119-gold-thread); box-shadow: 0 0 8px rgba(200, 168, 104, 0.7); }
  100%       { left: 1px; background: var(--v119-gold-deep); box-shadow: none; }
}

/* ── Reduced motion : bloque toute animation ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v119-screen,
  .v119-screen__row,
  .v119-screen__row-icon,
  .v119-screen__row-icon::after,
  .v119-screen__row-text,
  .v119-screen__row-text::after,
  .v119-screen__row-meta,
  .v119-screen__counter,
  .v119-screen__counter::before,
  .v119-screen__toggle,
  .v119-screen__toggle-switch,
  .v119-screen__toggle-switch::after {
    animation: none !important;
    transition: none !important;
  }
  .v119-screen__row { opacity: 1; transform: none; }
  .v119-screen__row-icon { background: var(--v119-gold-thread); border-color: var(--v119-gold-thread); }
}

/* ── Mobile : panneaux empilés verticalement (Plan 119-EE) ────────── */
@media (max-width: 720px) {
  .v119-screen {
    padding: 12px;
    font-size: 10.5px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .v119-screen__panels {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .v119-screen__panel { min-height: auto; padding: 10px 12px; }
  .v119-screen__row-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .v119-screen__title { font-size: 9px; }
  .v119-screen__panel-label { font-size: 9px; }
}

}

/* --- components/seal.css --- */
@layer components {
/*
 * components/seal.css — Plan 119-W extrait, refondu Plan 119-OO.
 *
 * Sceau de cire numérique. Glyph φ (nombre d'or) au centre, dessiné en
 * stroke-dashoffset après l'impress du sceau. Utilisé en chap. II (origine).
 *
 * Structure SVG attendue :
 *   <svg class="v119-seal" viewBox="0 0 64 64">
 *     <circle class="v119-seal__core" cx="32" cy="32" r="26" />
 *     <circle class="v119-seal__ring" cx="32" cy="32" r="20" />
 *     <ellipse class="v119-seal__phi-bowl" cx="32" cy="32" rx="7.2" ry="9.6" />
 *     <line    class="v119-seal__phi-stem" x1="32" y1="18" x2="32" y2="46" />
 *   </svg>
 */

/* ──────────────────────────────────────────────────────────────────────
   Sceau de cire numérique — Plan 119-OO refonte glyph + animation

   Lecture cohérente :
     - cercle de cire (gold-deep) imprimé avec léger overshoot rotatif
     - anneau intérieur fin (gold-thread) : suggère la matrice du sceau
     - glyph φ (phi minuscule) : symbole nombre d'or — signature de la
       maison Harnais.dev (cohérent avec spirale Fibonacci chap. III)
     - dessiné en stroke-dashoffset (calligraphie SOTA Plan 119-EE-fix)

   Nouveauté Plan 119-OO :
     - Glyph clair et lisible (φ universel) au lieu de runes confuses
     - Animation impress en 3 phases lisibles : poser → empreinte → repos
     - Pulse subtil 6s plus contemplatif (vs 4s avant — trop nerveux)
   ────────────────────────────────────────────────────────────────────── */

.v119-seal {
  display: block;
  margin: 24px auto 0;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 18px rgba(200, 168, 104, 0.32));
  opacity: 0;
  transform-origin: center;
  animation: v119-seal-impress 1.8s var(--v119-ease-out) 1.6s forwards;
}

.v119-seal__core {
  fill: var(--v119-gold-deep);
  stroke: var(--v119-gold-thread);
  stroke-width: 0.8;
  transform-origin: center;
  animation: v119-seal-breathe 6s var(--v119-ease-soft) 3.4s infinite;
}

.v119-seal__ring {
  fill: none;
  stroke: var(--v119-gold-thread);
  stroke-width: 0.6;
  opacity: 0;
  animation: v119-seal-ring-fade 1.2s var(--v119-ease-out) 2.8s forwards;
}

/* ── Glyph φ : trait dessiné en calligraphie ── */
.v119-seal__phi-stem,
.v119-seal__phi-bowl {
  fill: none;
  stroke: var(--v119-bg-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v119-seal__phi-stem {
  /* longueur ~28px — barre verticale */
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: v119-seal-draw 0.9s var(--v119-ease-out) 2.6s forwards;
}

.v119-seal__phi-bowl {
  /* circumférence ellipse ~52px */
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
  animation: v119-seal-draw 1.1s var(--v119-ease-out) 3.0s forwards;
}

@keyframes v119-seal-impress {
  0%   { opacity: 0; transform: scale(0.55) rotate(-14deg) translateY(-6px); }
  35%  { opacity: 0.6; transform: scale(0.92) rotate(-4deg) translateY(0); }
  55%  { opacity: 1; transform: scale(1.10) rotate(3deg) translateY(0); }
  75%  { transform: scale(0.97) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes v119-seal-ring-fade {
  to { opacity: 0.55; }
}

@keyframes v119-seal-draw {
  to { stroke-dashoffset: 0; }
}

/* Respiration douce post-impress (pas avant — laisse l'animation se poser) */
@keyframes v119-seal-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.03); filter: brightness(1.06); }
}

/* Reduced-motion : sceau visible d'emblée, pas d'animation */
@media (prefers-reduced-motion: reduce) {
  .v119-seal {
    opacity: 1;
    animation: none;
  }
  .v119-seal__core,
  .v119-seal__ring { animation: none; opacity: 1; }
  .v119-seal__phi-stem,
  .v119-seal__phi-bowl {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}

}

/* --- components/spiral.css --- */
@layer components {
/*
 * components/spiral.css — Plan 119-W (extracted from Plan 119-Q-C).
 *
 * Wrapper .v119-spiral-zone partage l'arrière-plan + spirale Fibonacci
 * pour les chap. III → V (méthode + coopération + site web).
 *
 * Le path SVG est généré en JS au boot (vitrine.js buildSpiralPath),
 * paramétrique r=a·φ^(θ/90°), 720° / 200 points, viewBox 0 0 100 100.
 * Le tracé se révèle au scroll-progress de la zone (stroke-dashoffset).
 */

.v119-spiral-zone {
  position: relative;
  background: linear-gradient(180deg, var(--v119-bg-secondary) 0%, var(--v119-bg-primary) 50%, var(--v119-bg-secondary) 100%);
  overflow: hidden;
  isolation: isolate;
}

.v119-spiral {
  position: absolute;
  top: 0;
  right: -20%;
  width: 90vmin;
  height: 90vmin;
  max-width: 900px;
  max-height: 900px;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
  transition: opacity var(--v119-phi-4) var(--v119-ease-out);
}

.v119-spiral--centered {
  /* Variante centrée pour chap. IV (œil du nautilus = interface) */
  right: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110vmin;
  height: 110vmin;
  opacity: 0.40;
}

.v119-spiral__path {
  fill: none;
  stroke: var(--v119-gold-thread);
  stroke-width: 1;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(200, 168, 104, 0.25));
}

/* ── Mobile : spirale plus discrète + scroll-bind off ──────────────
 * Le scroll-bind dashoffset crée un effet saccadé sur touchscroll iOS.
 * Sur viewport étroit, on affiche la spirale entière directement
 * (Plan 119-AA-fix mobile) avec opacité réduite. */
@media (max-width: 720px) {
  .v119-spiral {
    width: 70vmin;
    height: 70vmin;
    max-width: 360px;
    max-height: 360px;
    right: -25%;
    opacity: 0.32;
  }
  .v119-spiral--centered {
    width: 80vmin;
    height: 80vmin;
    opacity: 0.25;
  }
  .v119-spiral__path {
    /* Force path complet (override le dashoffset JS scroll-bind) */
    stroke-dashoffset: 0 !important;
    filter: drop-shadow(0 0 4px rgba(200, 168, 104, 0.18));
  }
}

/* ── Reduced motion : spirale visible direct, sans scroll-bind ──── */
@media (prefers-reduced-motion: reduce) {
  .v119-spiral__path {
    stroke-dashoffset: 0 !important;
  }
}

}

/* --- components/sublime.css --- */
@layer components {
/*
 * components/sublime.css — Plan 119-AA-C.
 *
 * Sublimations animations Fibonacci pour les chapitres existants.
 * Comble les trous où l'animation était light ou absente.
 *
 * Patterns utilisés :
 *   - Hover lift + glow or-thread (cards, tier, advantages)
 *   - Cursor trail or-thread sur cartes interactives
 *   - Reveal cascade phi-1 (382ms staggered) sur listes
 *   - Halo pulse Fibonacci (11s = phi^5) sur sigils/seals
 *   - Aurora parallax discret (translateY sur scroll)
 *   - Card group dim/highlight (phyllotaxis subtle)
 *
 * Tokens : --v119-phi-*, --v119-ease-*, --v119-gold-thread, --v119-aurora-*
 */

/* ── Cursor trail dot ───────────────────────────────────────────── */
.v119-cursor-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--v119-gold-thread, #c8a868);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 12px rgba(200, 168, 104, 0.5),
    0 0 24px rgba(200, 168, 104, 0.25);
  transition:
    left var(--v119-phi-1, 0.382s) cubic-bezier(0.16, 1, 0.3, 1),
    top var(--v119-phi-1, 0.382s) cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.85;
  z-index: 2;
}

/* ── Phyllotaxis card group : dim non-hovered ────────────────────── */
[data-v119-card-group][data-v119-hover-active="true"] [data-v119-card]:not([data-v119-hovered="true"]) {
  opacity: 0.55;
  transform: scale(0.992);
  filter: saturate(0.85);
}
[data-v119-card-group] [data-v119-card] {
  transition:
    opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    transform var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    filter var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    box-shadow var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    border-color var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
[data-v119-card-group] [data-v119-card][data-v119-hovered="true"] {
  transform: translateY(-2px) scale(1.005);
}

/* ── Tier cards (chap. IV — coopération) — sublimé ───────────────── */
.v119-tier {
  transition:
    transform var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    border-color var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    box-shadow var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    background var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-tier:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 168, 104, 0.45) !important;
  box-shadow:
    0 6px 32px rgba(200, 168, 104, 0.10),
    0 0 0 1px rgba(200, 168, 104, 0.18) inset;
}

/* ── Pricing cards (chap. VIII) — sublimé ────────────────────────── */
.v119-pricing__card,
.v119-pricing-card {
  position: relative;
  transition:
    transform var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    border-color var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    box-shadow var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-pricing__card:hover,
.v119-pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 168, 104, 0.40);
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(200, 168, 104, 0.22) inset,
    0 0 60px rgba(200, 168, 104, 0.06);
}
.v119-pricing__card[data-featured="true"]::before,
.v119-pricing-card.is-featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    transparent 30%,
    rgba(200, 168, 104, 0.30) 50%,
    transparent 70%);
  background-size: 200% 200%;
  background-position: -200% -200%;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out),
              background-position var(--v119-phi-5, 2.618s) var(--v119-ease-out);
}
.v119-pricing__card[data-featured="true"]:hover::before,
.v119-pricing-card.is-featured:hover::before {
  opacity: 1;
  background-position: 200% 200%;
}

/* ── Avantage seal (chap. IX) — rotate Fibonacci sur reveal ──────── */
.v119-advantage__seal {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--v119-gold-thread, #c8a868);
  border-radius: 50%;
  position: relative;
  margin-right: 14px;
  vertical-align: middle;
  transition: transform var(--v119-phi-3, 1s) var(--v119-ease-out);
}
.v119-advantage__seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(200, 168, 104, 0.40);
  border-radius: 50%;
}
.v119-advantage__seal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  background: var(--v119-gold-thread, #c8a868);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--v119-gold-thread, #c8a868);
}
.v119-advantage.is-revealed .v119-advantage__seal {
  animation: v119SealRotate 3.236s var(--v119-ease-soft, cubic-bezier(0.4, 0, 0.2, 1)) 0s 1 forwards;
}
@keyframes v119SealRotate {
  0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
  60%  { transform: rotate(216deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

/* ── Hero typing cursor pulse (chap. I) — already exists, sublimer ── */
[data-v119-typing] {
  position: relative;
}
[data-v119-typing][data-v119-typing-state="running"]::after,
[data-v119-typing][data-v119-typing-state="done"]::after {
  content: "▍";
  display: inline-block;
  margin-left: 4px;
  color: var(--v119-gold-thread, #c8a868);
  animation: v119Cursor 1.05s steps(1) infinite;
}
[data-v119-typing][data-v119-typing-state="done"]::after {
  animation-iteration-count: 6; /* fade après 6 cycles */
  animation-fill-mode: forwards;
}
@keyframes v119Cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── Footer signal pulses (subtle) ────────────────────────────────── */
.lp-foot__signals span:not([aria-hidden]) {
  position: relative;
}
.lp-foot__signals > span:not([aria-hidden]):first-child::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--v119-aurora-cyan, #3a8eaa);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--v119-aurora-cyan, #3a8eaa);
  animation: v119FootSignal 3.236s ease-in-out infinite;
}
@keyframes v119FootSignal {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.20); }
}

/* ── Topbar — slight backdrop on scroll (anchor effect) ─────────── */
.lp-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(26, 22, 18, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    background var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    backdrop-filter var(--v119-phi-2, 0.618s) var(--v119-ease-out),
    border-color var(--v119-phi-2, 0.618s) var(--v119-ease-out);
  border-bottom: 1px solid transparent;
}
.lp-top.is-scrolled {
  background: rgba(26, 22, 18, 0.72);
  backdrop-filter: blur(6px); /* Plan 119-PERF — 12→6px, saturate dropped */
  -webkit-backdrop-filter: blur(6px);
  border-bottom-color: rgba(200, 168, 104, 0.12);
}

/* ── Aurora parallax layers default ──────────────────────────────── */
[data-v119-parallax-aurora] {
  will-change: transform;
}

/* ── Reveal stagger improved : delay phi-1 between siblings ──────── */
[data-v119-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--v119-phi-3, 1s) var(--v119-ease-out),
    transform var(--v119-phi-3, 1s) var(--v119-ease-out);
}
[data-v119-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Or-thread divider universal helper ─────────────────────────── */
.v119-thread-divider {
  display: block;
  width: clamp(80px, 12vw, 140px);
  height: 1px;
  margin: clamp(28px, 4vw, 48px) auto;
  background: linear-gradient(90deg,
    transparent,
    var(--v119-gold-thread, #c8a868) 30%,
    var(--v119-gold-thread, #c8a868) 70%,
    transparent);
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-thread-divider.is-revealed,
[data-v119-reveal-section].is-revealed .v119-thread-divider {
  transform: scaleX(1);
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v119-cursor-dot,
  .v119-tier,
  .v119-pricing__card,
  .v119-pricing-card,
  .v119-advantage__seal,
  .lp-top,
  [data-v119-reveal],
  .v119-thread-divider {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .lp-foot__signals > span:first-child::before,
  [data-v119-typing]::after {
    animation: none !important;
  }
}

}

/* --- components/textures.css --- */
@layer components {
/*
 * components/textures.css — Plan 119-AAC + 119-AAD.
 *
 * Effets de texture pour sublimer le thème :
 *   .v119-gold-granite  → texte doré avec micro-grain (lumière sur métal)
 *   .v119-carbon-fade   → fond pattern carbone discret avec fade transparent
 *
 * Charge en dernier (après components/spiral, thread, sublime, …).
 */

/* ═══════════════════════════════════════════════════════════════════════
   Plan 119-AAC — effet GRANIT sur texte doré
   ═══════════════════════════════════════════════════════════════════════
   Approche : multi-stop linear-gradient avec micro-shifts + background-clip:text.
   Chaque stop joue sur la luminance de l'or (--v119-gold-thread #c8a868) pour
   simuler la cassure granuleuse d'un métal poli sous lumière oblique.
   Pure CSS, performant, scalable. */

.v119-gold-granite {
  /* Multi-stop avec ±6% luminance autour du gold-thread pour grain visible
     sur titres ≥ 28px ; subtle sur petits texts. */
  background-image: linear-gradient(135deg,
      #b89758 0%,
      #d4b577 6%,
      #c8a868 14%,
      #a88a4a 22%,
      #d8b97c 30%,
      #c8a868 38%,
      #b89758 46%,
      #ddc28a 54%,
      #c8a868 62%,
      #a88a4a 70%,
      #d4b577 78%,
      #c8a868 86%,
      #b89758 94%,
      #c8a868 100%
  );
  background-size: 200% 200%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  /* Léger drop-shadow doré pour redonner du contraste après clip:text */
  filter: drop-shadow(0 1px 1px rgba(154, 125, 74, 0.35));
  /* Animation lente de "lumière qui passe" — désactivée par reduce-motion */
  animation: v119-granite-shift 12s ease-in-out infinite alternate;
}

/* Variante statique (sans shimmer animé) pour titres importants — l'animation
   peut distraire de la lecture sur les très grands titres. */
.v119-gold-granite--static {
  animation: none;
  background-position: 50% 50%;
}

@keyframes v119-granite-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .v119-gold-granite { animation: none; background-position: 50% 50%; }
}

/* Fallback navigateurs sans background-clip:text (très rare en 2026) */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .v119-gold-granite {
    background-image: none;
    color: var(--v119-gold-thread, #c8a868);
    -webkit-text-fill-color: currentColor;
            text-fill-color: currentColor;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Plan 119-AAD — effet CARBONE discret avec fade vers transparent
   ═══════════════════════════════════════════════════════════════════════
   Approche : double repeating-linear-gradient diagonal pour pattern hex-like
   sub-pixel + mask-image gradient pour fade. Alpha extrêmement bas (0.012)
   pour rester discret — vibe matte carbone visible uniquement avec contraste
   bas, comme un fond noble qui se devine plus qu'il ne se voit. */

.v119-carbon-fade {
  position: relative;
}
.v119-carbon-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(245, 233, 212, 0.014) 0px,
      rgba(245, 233, 212, 0.014) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(-45deg,
      rgba(245, 233, 212, 0.010) 0px,
      rgba(245, 233, 212, 0.010) 1px,
      transparent 1px,
      transparent 4px);
  /* Fade selon direction (par défaut : top→transparent en bas) */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Variantes directionnelles — la classe parent choisit le côté qui fade */
.v119-carbon-fade--bottom::before {
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
.v119-carbon-fade--left::before {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
.v119-carbon-fade--right::before {
  -webkit-mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
/* Fade radial centre → bords (utile pour hero ou divider décoratif) */
.v119-carbon-fade--radial::before {
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%);
          mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%);
}

@media (prefers-reduced-motion: reduce) {
  .v119-carbon-fade::before { opacity: 0.6; }
}

}

/* --- components/thread.css --- */
@layer components {
/*
 * components/thread.css — Plan 119-W (extracted from Plan 119-Q-B).
 *
 * Trait d'encre or qui se trace au chargement (chap. I header).
 * SVG path stroke-dashoffset 100 → 0 sur 2.4s ease-out, delay 0.4s.
 * Position absolue top-left. Largeur ~28% viewport.
 */

.v119-thread {
  position: absolute;
  top: 6vh;
  left: 8%;
  width: 28%;
  height: 1px;
  z-index: 1;
}

.v119-thread__line {
  stroke: var(--v119-gold-thread);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: v119-thread-trace 2.4s var(--v119-ease-out) 0.4s forwards;
}

@keyframes v119-thread-trace {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 640px) {
  .v119-thread { width: 50%; left: 20px; }
}

}

/* --- components/tier.css --- */
@layer components {
/*
 * components/tier.css — Plan 119-W (extracted from Plan 119-Q-D).
 *
 * Card .v119-tier (chap. VIII tarifs). 3 tarifs grid auto-fit.
 * .v119-tier--featured a un signal-ribbon gold-thread + boost visuel.
 */

/* Plan 119-AAB-B — pattern auth-modal cohérent (--v119-card-bg/-border/-shadow
   tokenisé dans tokens.css). Toutes les <article> de la vitrine partagent
   ce gradient bleu nuit → brun-noir avec border or atténué. */
.v119-tier {
  position: relative;
  padding: 36px 28px 32px;
  background: var(--v119-card-bg);
  border: var(--v119-card-border);
  border-radius: var(--v119-card-radius);
  box-shadow: var(--v119-card-shadow);
  display: flex;
  flex-direction: column;
  transition: border-color var(--v119-phi-2) var(--v119-ease-out),
              transform var(--v119-phi-2) var(--v119-ease-out),
              box-shadow var(--v119-phi-2) var(--v119-ease-out);
}

.v119-tier:hover {
  border-color: rgba(200, 168, 104, 0.45);
  transform: translateY(-2px);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(200, 168, 104, 0.16),
    inset 0 1px 0 rgba(245, 233, 212, 0.06);
}

.v119-tier--featured {
  border-color: rgba(200, 168, 104, 0.55);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(200, 168, 104, 0.22),
    inset 0 1px 0 rgba(245, 233, 212, 0.06);
}

.v119-tier__signal {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--v119-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v119-bg-primary);
  background: var(--v119-gold-thread);
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.v119-tier__name {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--v119-ink);
  margin: 0 0 16px 0;
}

.v119-tier__price {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(154, 125, 74, 0.18);
}

.v119-tier__price strong {
  display: block;
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--v119-gold-thread);
  margin-bottom: 4px;
}

.v119-tier__price span {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--v119-ink-muted);
}

.v119-tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.v119-tier__features li {
  position: relative;
  padding-left: 22px;
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.6;
  color: var(--v119-ink);
}

.v119-tier__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--v119-gold-deep);
}

.v119-tier__commitment {
  font-family: var(--v119-font-body);
  font-style: italic;
  font-size: 12px;
  color: var(--v119-ink-muted);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(154, 125, 74, 0.12);
}

}

/* --- components/topbar.css --- */
@layer components {
/*
 * components/topbar.css — Plan 119-DD.
 *
 * Topbar v119 partagée par toutes les pages publiques (vitrine + sub-pages).
 * Réécrit en thème sanctuaire/Fibonacci/or-thread (avant : style.css legacy
 * scopait .lp-top sous .landing--sota uniquement → menu non stylé sur
 * /contact /method /pricing /handbook /cases /blog).
 *
 * Tokens consommés : --v119-bg-primary, --v119-ink, --v119-ink-muted,
 * --v119-gold-thread, --v119-gold-deep, --v119-phi-1, --v119-ease-out,
 * --v119-font-display, --v119-font-body, --v119-font-mono.
 */

/* Plan 119-PERF : backdrop-filter only on .is-scrolled (avoid sticky repaint
   cost on every scroll frame). blur 18→8px (saturate dropped). */
.lp-top {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(26, 22, 18, 0.72);
  border-bottom: 1px solid rgba(200, 168, 104, 0.10);
  transition: border-color var(--v119-phi-2, 0.618s) var(--v119-ease-out),
              background var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.lp-top.is-scrolled {
  background: rgba(26, 22, 18, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: rgba(200, 168, 104, 0.22);
}
.lp-top__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 32px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}

/* Brand — calligraphique sobre */
.lp-brand {
  font-family: var(--v119-font-display, 'PP Editorial New', Georgia, serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.005em;
  color: var(--v119-ink, #f5e9d4);
  text-decoration: none;
  position: relative;
  padding: 4px 2px;
  transition: color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-brand::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v119-gold-thread, #c8a868), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.lp-brand:hover { color: var(--v119-gold-thread, #c8a868); }
.lp-brand:hover::after { transform: scaleX(1); }

/* Nav links */
.lp-top__nav {
  display: flex;
  gap: clamp(14px, 2.4vw, 28px);
  justify-content: center;
  flex-wrap: nowrap;
}
.lp-top__nav a {
  font-family: var(--v119-font-mono, 'Söhne Mono', 'IBM Plex Mono', monospace);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v119-ink-muted, #c8b89a);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-top__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--v119-gold-thread, #c8a868);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.lp-top__nav a:hover {
  color: var(--v119-gold-thread, #c8a868);
}
.lp-top__nav a:hover::after { transform: scaleX(1); }
.lp-top__nav a.is-active {
  color: var(--v119-gold-thread, #c8a868);
}
.lp-top__nav a.is-active::after { transform: scaleX(1); }

/* CTAs (right side) */
.lp-top__cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-link {
  font-family: var(--v119-font-mono, 'Söhne Mono', monospace);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v119-ink-muted, #c8b89a);
  text-decoration: none;
  padding: 6px 2px;
  transition: color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-link:hover { color: var(--v119-gold-thread, #c8a868); }

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-family: var(--v119-font-mono, 'Söhne Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--v119-phi-1, 0.382s) var(--v119-ease-out);
  position: relative;
  overflow: hidden;
}
.lp-btn--sm { padding: 8px 14px; font-size: 10.5px; }
.lp-btn--lg { padding: 14px 26px; font-size: 12px; }

.lp-btn--primary {
  background: var(--v119-gold-thread, #c8a868);
  color: var(--v119-bg-primary, #0a1428);
  border: 1px solid var(--v119-gold-thread, #c8a868);
}
.lp-btn--primary:hover {
  background: var(--v119-ink, #f5e9d4);
  border-color: var(--v119-ink, #f5e9d4);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(200, 168, 104, 0.32);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--v119-gold-thread, #c8a868);
  border: 1px solid rgba(200, 168, 104, 0.30);
}
.lp-btn--ghost:hover {
  background: rgba(200, 168, 104, 0.06);
  border-color: var(--v119-gold-thread, #c8a868);
  color: var(--v119-ink, #f5e9d4);
}

/* ── Plan 119-FFF — Burger button (hidden on desktop) ──────────────────── */
.lp-top__burger {
  display: none;
  background: transparent;
  border: 1px solid rgba(200, 168, 104, 0.20);
  border-radius: 2px;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition:
    border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out),
    background var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-top__burger:hover,
.lp-top__burger:focus-visible {
  border-color: var(--v119-gold-thread, #c8a868);
  background: rgba(200, 168, 104, 0.06);
  outline: none;
}
.lp-top__burger-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--v119-ink, #f5e9d4);
  transition: transform 0.3s var(--v119-ease-out), opacity 0.3s var(--v119-ease-out);
}
.lp-top__burger[data-open="true"] .lp-top__burger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.lp-top__burger[data-open="true"] .lp-top__burger-line:nth-child(2) {
  opacity: 0;
}
.lp-top__burger[data-open="true"] .lp-top__burger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile collapse — nav becomes burger ≤720px */
@media (max-width: 720px) {
  .lp-top__inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .lp-top__nav { display: none; }
  /* Plan 119-FFF — n'enlève pas .lp-link, on garde l'avatar dropdown si connecté.
     Pour le user non-connecté, on cache les CTAs publics (login + audit) dans
     le burger drawer à la place. */
  .lp-top__cta .lp-link { display: none; }
  .lp-top__cta .lp-btn--primary { display: none; }
  /* Avatar+dropdown reste visible (.v119-user-menu) si connecté. */
  .lp-btn--sm { padding: 7px 12px; font-size: 10px; }
  .lp-top__burger { display: inline-flex; }
}

/* ── Plan 119-FFF — Mobile menu drawer (≤720px) ────────────────────────── */
.lp-mobile-menu {
  position: fixed;
  top: 64px;          /* sous topbar */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: linear-gradient(180deg,
    rgba(19, 30, 58, 0.985) 0%,
    rgba(26, 22, 18, 0.985) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 28px 24px 32px;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.382s var(--v119-ease-out),
    transform 0.382s var(--v119-ease-out);
  overflow-y: auto;
  display: none;  /* default desktop : invisible */
}
.lp-mobile-menu[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
}
.lp-mobile-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(200, 168, 104, 0.55) 30%,
    rgba(200, 168, 104, 0.55) 70%,
    transparent);
  pointer-events: none;
}
@media (max-width: 720px) {
  .lp-mobile-menu:not([hidden]) { display: block; }
}
.lp-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}
.lp-mobile-menu__nav a {
  display: block;
  padding: 14px 16px;
  font-family: var(--v119-font-mono, 'Söhne Mono', 'IBM Plex Mono', monospace);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v119-ink-muted, #c8b89a);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 168, 104, 0.10);
  transition: color var(--v119-phi-1, 0.382s) var(--v119-ease-out), background var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-mobile-menu__nav a:hover,
.lp-mobile-menu__nav a:focus-visible {
  color: var(--v119-ink, #f5e9d4);
  background: rgba(200, 168, 104, 0.05);
  outline: none;
}
.lp-mobile-menu__sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 104, 0.20), transparent);
  margin: 18px 0;
}
.lp-mobile-menu__auth {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-mobile-menu__cta-primary {
  display: block;
  text-align: center;
  padding: 14px 18px;
  background: var(--v119-gold-thread, #c8a868);
  color: var(--v119-bg-primary, #0a1428);
  text-decoration: none;
  font-family: var(--v119-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background var(--v119-phi-1, 0.382s) var(--v119-ease-out), transform var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-mobile-menu__cta-primary:hover,
.lp-mobile-menu__cta-primary:focus-visible {
  background: #d6b878;
  transform: translateY(-1px);
  outline: none;
}
.lp-mobile-menu__cta-secondary {
  display: block;
  text-align: center;
  padding: 12px 18px;
  background: transparent;
  color: var(--v119-gold-thread, #c8a868);
  text-decoration: none;
  font-family: var(--v119-font-body);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid rgba(200, 168, 104, 0.30);
  border-radius: 2px;
  transition: border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out), background var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-mobile-menu__cta-secondary:hover,
.lp-mobile-menu__cta-secondary:focus-visible {
  border-color: var(--v119-gold-thread, #c8a868);
  background: rgba(200, 168, 104, 0.06);
  outline: none;
}
.lp-mobile-menu__link {
  display: block;
  text-align: center;
  padding: 10px 16px;
  color: var(--v119-ink-muted, #c8b89a);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--v119-phi-1, 0.382s) var(--v119-ease-out);
}
.lp-mobile-menu__link:hover,
.lp-mobile-menu__link:focus-visible {
  color: var(--v119-ink, #f5e9d4);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-mobile-menu,
  .lp-top__burger,
  .lp-top__burger-line,
  .lp-mobile-menu__cta-primary,
  .lp-mobile-menu__cta-secondary { transition: none !important; }
}

}

/* --- components/user-menu.css --- */
@layer components {
/*
 * components/user-menu.css — Plan 119-XY.
 *
 * Avatar + dropdown utilisateur dans la topbar quand session active.
 * Style cohérent avec les select v119 (chevron gold, panneau ivoire
 * profond, hover gold-tinted, transition phi-1).
 */

.v119-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger : avatar circulaire + chevron */
.v119-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: rgba(245, 233, 212, 0.03);
  border: 1px solid rgba(154, 125, 74, 0.30);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--v119-font-body);
  color: var(--v119-ink);
  transition: border-color var(--v119-phi-1, 0.382s) var(--v119-ease-out, ease-out),
              background   var(--v119-phi-1, 0.382s) var(--v119-ease-out, ease-out);
}

.v119-user-menu__trigger:hover {
  border-color: var(--v119-gold-thread);
  background: rgba(245, 233, 212, 0.05);
}

.v119-user-menu__trigger:focus-visible {
  outline: none;
  border-color: var(--v119-gold-thread);
  box-shadow: 0 0 0 3px rgba(200, 168, 104, 0.18);
}

/* Avatar (photo ou initiale) */
.v119-user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(200, 168, 104, 0.12);
  border: 1px solid rgba(200, 168, 104, 0.45);
  overflow: hidden;
  flex-shrink: 0;
}

.v119-user-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v119-user-menu__initial {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--v119-gold-thread);
  line-height: 1;
}

/* Chevron — emprunté au select v119 */
.v119-user-menu__chevron {
  display: inline-flex;
  align-items: center;
  color: var(--v119-gold-thread);
  transition: transform var(--v119-phi-1, 0.382s) var(--v119-ease-out, ease-out);
}

.v119-user-menu.is-open .v119-user-menu__chevron {
  transform: rotate(180deg);
}

/* Panel dropdown */
.v119-user-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #131e3a;
  border: 1px solid rgba(154, 125, 74, 0.40);
  border-radius: 6px;
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(200, 168, 104, 0.10);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.24s var(--v119-ease-out, ease-out),
              transform 0.24s var(--v119-ease-out, ease-out);
  z-index: 100;
}

.v119-user-menu.is-open .v119-user-menu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Head : nom + email */
.v119-user-menu__head {
  padding: 10px 14px 12px;
  border-bottom: 1px solid rgba(154, 125, 74, 0.18);
  margin-bottom: 4px;
}

.v119-user-menu__name {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-size: 14.5px;
  color: #f5e9d4;
  line-height: 1.3;
}

.v119-user-menu__mail {
  font-size: 11.5px;
  color: rgba(200, 184, 154, 0.65);
  margin-top: 2px;
  word-break: break-all;
}

/* Items — calque option v119 */
.v119-user-menu__item {
  display: block;
  padding: 9px 14px;
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: 13.5px;
  color: #f5e9d4;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.18s var(--v119-ease-out, ease-out),
              color 0.18s var(--v119-ease-out, ease-out);
}

.v119-user-menu__item:hover,
.v119-user-menu__item:focus-visible {
  background: rgba(200, 168, 104, 0.18);
  color: #f5e9d4;
  outline: none;
}

.v119-user-menu__item--danger {
  color: rgba(200, 184, 154, 0.78);
  margin-top: 2px;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
  padding-top: 11px;
}

.v119-user-menu__item--danger:hover {
  background: rgba(200, 110, 110, 0.18);
  color: #f5e9d4;
}

/* Mobile : panel en bas-fixe full-width plus tactile */
@media (max-width: 540px) {
  .v119-user-menu__panel {
    position: fixed;
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    min-width: 0;
    transform-origin: bottom center;
  }
}

/* prefers-reduced-motion : pas de transitions */
@media (prefers-reduced-motion: reduce) {
  .v119-user-menu__trigger,
  .v119-user-menu__chevron,
  .v119-user-menu__panel,
  .v119-user-menu__item {
    transition: none !important;
  }
}

}

/* ════════════════════════════════════════════════════════════════
   @layer features
   ════════════════════════════════════════════════════════════════ */

/* --- chapters/01-hero.css --- */
@layer features {
/*
 * chapters/01-hero.css — Plan 119-EE-fix v2 (animation luxe SOTA — recherche dédiée).
 *
 * Pattern unique recommandé après recherche SOTA 2026 (sub-agent) :
 *   Blur-to-clear + clip-path inset reveal + underline draw or-thread.
 *   Total 1.4s avant texte 100% lisible, pas de letter-by-letter
 *   (anti-luxe pour wordmark < 12 chars selon Bose/A24/Linear/Stripe Press).
 *
 * Lignée : Hoefler editorial print 80s/90s (hairline rule sous masthead),
 *          Stripe Press / Linear (blur-to-clear settle), A24 (mask reveal),
 *          Saul Bass (snap easing en fin de settle).
 *
 * Anti-patterns évités :
 *   - stroke-dashoffset sur <text> SVG (browsers calculent mal totalLength)
 *   - letter cascade typewriter (cliché tech 2010s, anti-luxe wordmark courte)
 *   - bouncy spring overshoot (Hermès/Loro Piana n'en utilisent jamais)
 *
 * Composants requis : aurora.css, thread.css, motion.css, tokens.css.
 */

.v119-hero {
  position: relative;
  background: var(--v119-bg-primary);
  color: var(--v119-ink);
  font-family: var(--v119-font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  padding: 12vh 24px 8vh;
  display: flex;
  align-items: center;
}

.v119-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* ── Brand title — italic display serif, reveal SOTA ─────────────── */

.v119-hero__title {
  position: relative;
  display: inline-block;
  font-family: var(--v119-font-display, 'PP Editorial New', 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 124px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--v119-ink, #f5e9d4);
  margin: 0 0 var(--v119-phi-4, 1.618rem) 0;
  text-align: center;
  isolation: isolate;

  /* Initial state */
  filter: blur(12px);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  text-shadow: 0 0 24px rgba(200, 168, 104, 0);

  /* Two parallel keyframes: focus (blur+opacity+shadow) + reveal (clip-path) */
  animation:
    v119-title-focus var(--v119-phi-4, 1.618s) var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.2s forwards,
    v119-title-reveal var(--v119-phi-3, 1s) var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.2s forwards;
}

@keyframes v119-title-focus {
  to {
    filter: blur(0);
    opacity: 1;
    text-shadow: 0 0 32px rgba(200, 168, 104, 0.15);
  }
}
@keyframes v119-title-reveal {
  to { clip-path: inset(0 0 0 0); }
}

/* Halo radial gold-thread derrière, pulse infinite phi-5×phi-2 (settled glow) */
.v119-hero__title::before {
  content: "";
  position: absolute;
  inset: -25% -10%;
  background:
    radial-gradient(ellipse 55% 60% at 50% 55%, rgba(200, 168, 104, 0.14) 0%, transparent 65%);
  z-index: -1;
  opacity: 0;
  animation:
    v119-halo-emerge 2.618s var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.4s forwards,
    v119-halo-breathe 6.854s var(--v119-ease-soft, cubic-bezier(0.4, 0, 0.2, 1)) 3.2s infinite;
  pointer-events: none;
}
@keyframes v119-halo-emerge {
  to { opacity: 0.85; }
}
@keyframes v119-halo-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* Underline filet or-thread 1px (heritage Hoefler editorial print) */
.v119-hero__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 1px;
  background: var(--v119-gold-thread, #c8a868);
  transform-origin: left;
  transform: scaleX(0);
  animation: v119-title-thread var(--v119-phi-3, 1s) var(--v119-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--v119-phi-2, 0.618s) forwards;
  box-shadow: 0 0 8px rgba(200, 168, 104, 0.35);
}
@keyframes v119-title-thread {
  to { transform: scaleX(1); }
}

/* ── Sub paragraph — apparaît après le filet (1.6s, fluidité d'attention) ── */

.v119-hero__sub {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
  max-width: 580px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
  animation: v119-sub-reveal var(--v119-phi-2, 0.618s) var(--v119-ease-out) 1.6s forwards;
}
@keyframes v119-sub-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.v119-hero__sub em {
  font-style: italic;
  color: var(--v119-gold-thread);
  font-weight: 400;
}

/* ── Visually-hidden span (a11y + SEO) ────────────────────────────── */

.v119-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion : tout instantané ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .v119-hero__title,
  .v119-hero__title::before,
  .v119-hero__title::after,
  .v119-hero__sub {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .v119-hero__title::before { opacity: 0.5 !important; }
  .v119-hero__title::after { transform: scaleX(1) !important; }
}

/* ── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .v119-hero { padding: 8vh 20px 6vh; min-height: 88vh; }
  .v119-hero__title { font-size: clamp(48px, 14vw, 88px); }
}
@media (max-width: 420px) {
  .v119-hero__title { font-size: 56px; }
}

}

/* --- chapters/02-origine.css --- */
@layer features {
/*
 * chapters/02-origine.css — Plan 119-W (extracted from Plan 119-Q-B).
 *
 * Chap. II — Origine — 3 prestations introduites + sceau cire.
 * Composant requis : seal.css. Effet typing piloté par JS (data-v119-typing).
 */

.v119-origin {
  position: relative;
  background: linear-gradient(180deg, var(--v119-bg-primary) 0%, var(--v119-bg-secondary) 100%);
  color: var(--v119-ink);
  font-family: var(--v119-font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow: hidden;
  isolation: isolate;
  /* Plan 119-XY — padding-bottom réduit (120 → 56) : le sceau φ
     terminait trop loin du chap. III suivant. La transition vers
     la zone-spirale doit rester fluide, pas creuse. */
  padding: 80px 24px 56px;
  border-top: 1px solid rgba(154, 125, 74, 0.12);
}

.v119-origin__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.v119-origin__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 24px 0;
  text-align: center;
}

.v119-origin__title::first-letter { color: var(--v119-gold-thread); }

.v119-origin__intro {
  font-family: var(--v119-font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--v119-ink);
  margin: 0 0 32px 0;
  text-align: center;
  /* Le typing effect est piloté par JS — caché jusqu'à ce que JS prenne la main */
  min-height: 1.7em;
}

.v119-origin__intro[data-v119-typing-state="pending"] {
  color: transparent;
}

.v119-origin__list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.v119-origin__list li {
  position: relative;
  padding-left: 32px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: var(--v119-ink);
}

.v119-origin__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 18px;
  height: 1px;
  background: var(--v119-gold-deep);
}

.v119-origin__seal-text {
  position: relative;
  padding: 32px 0 0;
  margin: 32px 0 0;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
  font-family: var(--v119-font-body);
  font-style: italic;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .v119-origin { padding: 64px 20px 96px; }
  .v119-origin__list li { padding-left: 24px; }
}

}

/* --- chapters/03-methode.css --- */
@layer features {
/*
 * chapters/03-methode.css — Plan 119-W (extracted from Plan 119-Q-C).
 *
 * Chap. III — Méthode — 3 paliers services (articles SEO+LLM, posts locaux,
 * newsletter). Composant : palier.css. Wrapper : spiral.css (.v119-spiral-zone).
 */

.v119-method {
  position: relative;
  z-index: 1;
  /* Plan 119-XY — padding-top réduit (120 → 64) : la zone-spirale
     reprend la respiration du chap. II au lieu d'un gap creux. */
  padding: 64px 24px 100px;
}

.v119-method__inner {
  max-width: 960px;
  margin: 0 auto;
}

.v119-method__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 16px 0;
  text-align: center;
}

.v119-method__title::first-letter { color: var(--v119-gold-thread); }

.v119-method__lede {
  font-family: var(--v119-font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
  max-width: 560px;
  margin: 0 auto 80px;
  text-align: center;
}

.v119-method__paliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 56px);
}

}

/* --- chapters/04-cooperation.css --- */
@layer features {
/*
 * chapters/04-cooperation.css — Plan 119-W (extracted from Plan 119-Q-C).
 *
 * Chap. IV — Coopération — interface client vivante.
 * Layout asymétrique 1:1.2 (texte gauche / écran droit).
 * Composants : screen.css, filaments.css.
 */

.v119-cooperation {
  position: relative;
  z-index: 1;
  padding: 120px 24px 120px;
}

.v119-cooperation__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}

@media (min-width: 960px) {
  .v119-cooperation__inner {
    grid-template-columns: 1fr 1.2fr;
  }
}

.v119-cooperation__text { max-width: 520px; }

.v119-cooperation__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 24px 0;
}

.v119-cooperation__title::first-letter { color: var(--v119-gold-thread); }

.v119-cooperation__intro {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
  margin: 0 0 28px 0;
}

.v119-cooperation__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v119-cooperation__list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.7;
  color: var(--v119-ink);
}

.v119-cooperation__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 14px;
  height: 1px;
  background: var(--v119-gold-deep);
}

.v119-cooperation__outro {
  font-family: var(--v119-font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
  padding-top: 20px;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
}

}

/* --- chapters/05-site.css --- */
@layer features {
/*
 * chapters/05-site.css — Plan 119-W (extracted from Plan 119-Q-C).
 *
 * Chap. V — Site web — 2 colonnes ratio φ exact (0.382fr / 0.618fr).
 * Colonne gauche petite : "Vous avez déjà un site ?"
 * Colonne droite grande : "Vous n'avez pas de site, ou voulez en sortir ?"
 */

.v119-site {
  position: relative;
  z-index: 1;
  padding: 100px 24px 120px;
  border-top: 1px solid rgba(154, 125, 74, 0.12);
}

.v119-site__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 880px) {
  .v119-site__inner {
    grid-template-columns: 0.382fr 0.618fr;   /* ratio φ exact */
    gap: 72px;
    align-items: start;
  }
}

.v119-site__col-title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--v119-ink);
  margin: 0 0 20px 0;
}

.v119-site__col-title::first-letter { color: var(--v119-gold-thread); }

.v119-site__col-text {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
}

.v119-site__col-text strong { color: var(--v119-ink); font-weight: 500; }

.v119-site__col-text p { margin: 0 0 14px 0; }

.v119-site__col-list {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v119-site__col-list li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(13px, 0.95vw, 14.5px);
  color: var(--v119-ink);
}

.v119-site__col-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: var(--v119-gold-deep);
}

.v119-site__col-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
  font-style: italic;
  font-size: clamp(12.5px, 0.85vw, 13.5px);
  color: var(--v119-ink-muted);
}

}

/* --- chapters/05bis-about.css --- */
@layer features {
/*
 * chapters/05bis-about.css — Plan 119-X-B-3 (Section "À propos" Vincent).
 *
 * Section de présentation du dirigeant, intercalée entre chap. V (Site web)
 * et VI (Cas client). Layout asymétrique φ : portrait gauche (38%) +
 * texte droite (62%). Cohérent avec ratio Fibonacci de la vitrine.
 * Composant requis : portrait.css.
 */

.v119-about {
  position: relative;
  background: var(--v119-bg-primary);
  padding: 120px 24px 120px;
  border-top: 1px solid rgba(154, 125, 74, 0.12);
}

.v119-about__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

@media (min-width: 880px) {
  .v119-about__inner {
    grid-template-columns: 0.382fr 0.618fr;   /* ratio φ exact */
    gap: 72px;
  }
}

.v119-about__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 12px 0;
  text-align: center;
}

.v119-about__title::first-letter { color: var(--v119-gold-thread); }

@media (min-width: 880px) {
  .v119-about__title { text-align: left; }
}

.v119-about__role {
  font-family: var(--v119-font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--v119-gold-deep);
  margin: 0 0 24px 0;
  text-align: center;
}

@media (min-width: 880px) {
  .v119-about__role { text-align: left; }
}

.v119-about__name {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--v119-ink);
  margin: 0 0 8px 0;
}

.v119-about__bio {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.8;
  color: var(--v119-ink);
  margin: 0 0 28px 0;
}

.v119-about__experience {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
}

.v119-about__experience li {
  position: relative;
  padding-left: 24px;
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
}

.v119-about__experience li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 14px;
  height: 1px;
  background: var(--v119-gold-deep);
}

.v119-about__col-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
}

}

/* --- chapters/06-cases.css --- */
@layer features {
/*
 * chapters/06-cases.css — Plan 119-W (extracted from Plan 119-Q-D).
 *
 * Chap. VI — Cas client — placeholder honnête centré.
 * Structure simple : titre + 2 paragraphes (intro + alt mise en relation).
 * À refondre quand un client mature donne sa permission de publier.
 */

.v119-cases {
  position: relative;
  background: var(--v119-bg-primary);
  padding: 100px 24px 100px;
  border-top: 1px solid rgba(154, 125, 74, 0.12);
}

.v119-cases__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.v119-cases__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 32px 0;
}

.v119-cases__title::first-letter { color: var(--v119-gold-thread); }

.v119-cases__intro,
.v119-cases__alt {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--v119-ink-muted);
  margin: 0 0 20px 0;
}

.v119-cases__alt {
  font-style: italic;
  padding-top: 20px;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
}

}

/* --- chapters/07-internal.css --- */
@layer features {
/*
 * chapters/07-internal.css — Plan 119-W (extracted from Plan 119-Q-D).
 *
 * Chap. VII — Méthode interne — 5 piliers numérotés (I à V).
 * Layout grid 60px/1fr, séparateurs en encre or entre les piliers.
 */

.v119-internal {
  position: relative;
  background: linear-gradient(180deg, var(--v119-bg-primary) 0%, var(--v119-bg-secondary) 100%);
  padding: 120px 24px 120px;
}

.v119-internal__inner {
  max-width: 800px;
  margin: 0 auto;
}

.v119-internal__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 56px 0;
  text-align: center;
}

.v119-internal__title::first-letter { color: var(--v119-gold-thread); }

.v119-internal__pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.v119-pillar {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(154, 125, 74, 0.14);
}

.v119-pillar:last-child { border-bottom: none; }

.v119-pillar__num {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--v119-gold-thread);
  letter-spacing: 0.04em;
  line-height: 1;
}

.v119-pillar__name {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--v119-ink);
  margin: 0 0 8px 0;
}

.v119-pillar__body {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(13.5px, 1vw, 15.5px);
  line-height: 1.75;
  color: var(--v119-ink-muted);
  margin: 0;
}

}

/* --- chapters/08-pricing.css --- */
@layer features {
/*
 * chapters/08-pricing.css — Plan 119-W (extracted from Plan 119-Q-D).
 *
 * Chap. VIII — Tarifs — 3 formules grid auto-fit.
 * Composant : tier.css. Le tier featured a un signal-ribbon gold-thread.
 */

.v119-pricing {
  position: relative;
  background: var(--v119-bg-primary);
  padding: 120px 24px 120px;
}

.v119-pricing__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.v119-pricing__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 56px 0;
  text-align: center;
}

.v119-pricing__title::first-letter { color: var(--v119-gold-thread); }

.v119-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}

.v119-pricing__foot {
  margin-top: 48px;
  font-family: var(--v119-font-body);
  font-style: italic;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.7;
  color: var(--v119-ink-muted);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

}

/* --- chapters/08bis-value-prop.css --- */
@layer features {
/*
 * chapters/08bis-value-prop.css — Plan 119-AA-B (refonte luxueuse).
 *
 * Section "L'art de l'outillage" — repositionnement non-confrontationnel.
 * Plus billboard 100×, mais grid asymétrique φ (golden ratio 5:8) où le
 * chiffre devient un accent or sculpté plutôt qu'un slogan.
 *
 * Vocabulaire :
 *   - Grid 5:8 (gauche=texte éditorial, droite=accent or 100×)
 *   - Headline en deux temps : "Nous utilisons Claude Code." / "Mais nous
 *     l'utilisons multiplié."
 *   - Count-up 0→100 en 1.618s (ease-out cubic-bezier doré)
 *   - Hover methodology accordion révèle la liste
 *   - Aurora subtile (couches caustiques tech-éthérée)
 *   - Or-thread divider sépare headline et corps
 *
 * Tokens consommés : --v119-bg-primary, --v119-ink, --v119-ink-muted,
 *   --v119-gold-thread, --v119-gold-deep, --v119-cta, --v119-aurora-cyan,
 *   --v119-aurora-magenta, --v119-aurora-violet, --v119-phi-1..5,
 *   --v119-ease-out, --v119-ease-soft, --v119-font-display, --v119-font-body
 */

.v119-vp {
  position: relative;
  padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 40px);
  overflow: hidden;
}
.v119-vp::before {
  /* Aurora couche 1 — caustique cyan (tech) */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 70% 30%, rgba(58, 142, 170, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 25% 80%, rgba(184, 122, 195, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(125, 77, 168, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--v119-phi-5, 2.618s) var(--v119-ease-out);
}
.v119-vp.is-revealed::before { opacity: 0.85; }
.v119-vp::after {
  /* Subtle horizontal divider haut + bas, or-thread */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 20vw, 240px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--v119-gold-thread, #c8a868) 30%,
    var(--v119-gold-thread, #c8a868) 70%,
    transparent);
  opacity: 0;
  transition: opacity var(--v119-phi-4, 1.618s) var(--v119-ease-out) var(--v119-phi-1, 0.382s);
}
.v119-vp.is-revealed::after { opacity: 0.7; }

.v119-vp__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  /* Plan 119-AAB-A — REVERT du pattern card. La section VIII-bis est une
     section sanctuaire pleine largeur (comme les autres chapitres), pas
     une card encadrée. Le fond uni bleu nuit du body + overlay aurora
     (::before) suffit — pas de border ni de shadow. Le pattern auth-modal
     est réservé aux cards : <article>, .pricing-tier, .method-card, etc. */
}

.v119-vp__eyebrow {
  font-family: var(--v119-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  margin: 0 0 36px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out),
              transform var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-vp.is-revealed .v119-vp__eyebrow {
  opacity: 0.85;
  transform: translateY(0);
}

/* ── Grid asymétrique 5:8 (golden ratio) ──────────────────────────── */
.v119-vp__grid {
  display: grid;
  grid-template-columns: 5fr 8fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  margin: clamp(48px, 7vw, 80px) 0;
}
@media (max-width: 720px) {
  .v119-vp__grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 56px);
  }
}

/* Colonne droite : headline éditorial */
.v119-vp__copy {
  order: 2;
}
@media (max-width: 720px) {
  .v119-vp__copy { order: 1; }
}

.v119-vp__headline {
  font-family: var(--v119-font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--v119-ink, #f5e9d4);
  margin: 0 0 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-1, 0.382s),
              transform var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-1, 0.382s);
}
.v119-vp__headline-secondary {
  display: block;
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.25;
  color: var(--v119-gold-thread, #c8a868);
  letter-spacing: 0.01em;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-2, 0.618s),
              transform var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-2, 0.618s);
}
.v119-vp.is-revealed .v119-vp__headline,
.v119-vp.is-revealed .v119-vp__headline-secondary {
  opacity: 1;
  transform: translateY(0);
}

.v119-vp__subline {
  font-family: var(--v119-font-body);
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.7;
  color: var(--v119-ink-muted, #c8b89a);
  margin: clamp(20px, 3vw, 28px) 0 0;
  letter-spacing: 0.005em;
  max-width: 56ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--v119-phi-3, 1s) var(--v119-ease-out) var(--v119-phi-3, 1s),
              transform var(--v119-phi-3, 1s) var(--v119-ease-out) var(--v119-phi-3, 1s);
}
.v119-vp.is-revealed .v119-vp__subline {
  opacity: 1;
  transform: translateY(0);
}

/* ── Colonne gauche : multiplicateur sculpté ──────────────────────── */
.v119-vp__multiplier-frame {
  order: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 40px) clamp(12px, 2.5vw, 24px);
  min-height: clamp(260px, 32vw, 380px);
}
@media (max-width: 720px) {
  .v119-vp__multiplier-frame { order: 2; min-height: 240px; }
}

/* Cercle ouvert as background — référence à l'or et au sigil */
.v119-vp__multiplier-frame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px, 28vw, 320px);
  height: clamp(220px, 28vw, 320px);
  margin-top: calc(clamp(220px, 28vw, 320px) / -2);
  margin-left: calc(clamp(220px, 28vw, 320px) / -2);
  border: 1px solid rgba(200, 168, 104, 0.14);
  border-radius: 50%;
  box-shadow:
    inset 0 0 60px rgba(200, 168, 104, 0.08),
    0 0 80px rgba(200, 168, 104, 0.06);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--v119-phi-4, 1.618s) var(--v119-ease-out) var(--v119-phi-1, 0.382s),
              transform var(--v119-phi-4, 1.618s) var(--v119-ease-out) var(--v119-phi-1, 0.382s);
}
.v119-vp.is-revealed .v119-vp__multiplier-frame::before {
  opacity: 1;
  transform: scale(1);
}

/* Spirale Fibonacci en watermark — 5 secondes pour s'établir */
.v119-vp__multiplier-frame::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 22vw, 260px);
  height: clamp(180px, 22vw, 260px);
  margin-top: calc(clamp(180px, 22vw, 260px) / -2);
  margin-left: calc(clamp(180px, 22vw, 260px) / -2);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(200, 168, 104, 0.05) 39%, transparent 41%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--v119-phi-5, 2.618s) var(--v119-ease-out) var(--v119-phi-3, 1s);
  pointer-events: none;
}
.v119-vp.is-revealed .v119-vp__multiplier-frame::after {
  opacity: 1;
  animation: v119VpHalo 11s var(--v119-ease-soft) infinite;
}
@keyframes v119VpHalo {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.04); opacity: 1; }
}

.v119-vp__multiplier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.v119-vp__multiplier-num {
  font-family: var(--v119-font-display);
  font-weight: 400;
  font-size: clamp(96px, 16vw, 180px);
  line-height: 0.95;
  color: var(--v119-gold-thread, #c8a868);
  letter-spacing: -0.025em;
  text-shadow:
    0 0 30px rgba(200, 168, 104, 0.35),
    0 0 60px rgba(200, 168, 104, 0.15);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  position: relative;
}

.v119-vp__multiplier-unit {
  font-family: var(--v119-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 5.5vw, 60px);
  color: var(--v119-gold-deep, #9a7d4a);
  margin-left: 6px;
  vertical-align: super;
  line-height: 1;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-3, 1s),
              transform var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-3, 1s);
}
.v119-vp.is-revealed .v119-vp__multiplier-unit {
  opacity: 1;
  transform: translateY(0);
}

.v119-vp__multiplier-caption {
  font-family: var(--v119-font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--v119-ink-muted, #c8b89a);
  margin-top: 14px;
  font-style: italic;
  opacity: 0;
  transition: opacity var(--v119-phi-3, 1s) var(--v119-ease-out) var(--v119-phi-4, 1.618s);
  text-align: center;
}
.v119-vp.is-revealed .v119-vp__multiplier-caption {
  opacity: 0.85;
}

/* ── Focus invitation — citation centrée avec dividers or ─────────── */
.v119-vp__focus {
  display: block;
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--v119-ink, #f5e9d4);
  margin: clamp(56px, 8vw, 96px) auto clamp(40px, 6vw, 64px);
  max-width: 720px;
  text-align: center;
  position: relative;
  padding: 28px 0;
  letter-spacing: 0.005em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--v119-phi-3, 1s) var(--v119-ease-out) var(--v119-phi-4, 1.618s),
              transform var(--v119-phi-3, 1s) var(--v119-ease-out) var(--v119-phi-4, 1.618s);
}
.v119-vp.is-revealed .v119-vp__focus {
  opacity: 1;
  transform: translateY(0);
}
.v119-vp__focus::before,
.v119-vp__focus::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v119-gold-thread, #c8a868), transparent);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-5, 2.618s),
              opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out) var(--v119-phi-5, 2.618s);
}
.v119-vp__focus::before { top: 0; }
.v119-vp__focus::after  { bottom: 0; }
.v119-vp.is-revealed .v119-vp__focus::before,
.v119-vp.is-revealed .v119-vp__focus::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 0.6;
}

/* ── Methodology accordion — graceful disclosure ──────────────────── */
.v119-vp__methodo {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 720px;
  border: 1px solid rgba(200, 168, 104, 0.14);
  border-radius: 4px;
  background: rgba(19, 30, 58, 0.45);
  overflow: hidden;
  position: relative;
  transition: border-color var(--v119-phi-2, 0.618s) var(--v119-ease-out),
              background var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-vp__methodo:hover {
  border-color: rgba(200, 168, 104, 0.30);
  background: rgba(19, 30, 58, 0.65);
}
.v119-vp__methodo[open] {
  border-color: rgba(200, 168, 104, 0.35);
}
.v119-vp__methodo[open]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v119-gold-thread, #c8a868) 30%, var(--v119-gold-thread, #c8a868) 70%, transparent);
}

.v119-vp__methodo summary {
  padding: 16px 24px;
  cursor: pointer;
  font-family: var(--v119-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.v119-vp__methodo summary::-webkit-details-marker { display: none; }
.v119-vp__methodo summary::after {
  content: "+";
  font-family: var(--v119-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--v119-gold-thread, #c8a868);
  transition: transform var(--v119-phi-2, 0.618s) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v119-vp__methodo[open] summary::after { transform: rotate(45deg); }

.v119-vp__methodo-body {
  padding: 4px 24px 24px;
  font-family: var(--v119-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--v119-ink-muted, #c8b89a);
}
.v119-vp__methodo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: methodo;
}
.v119-vp__methodo-list li {
  padding: 14px 0 14px 36px;
  position: relative;
  border-bottom: 1px dashed rgba(200, 168, 104, 0.10);
  counter-increment: methodo;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--v119-phi-2, 0.618s) var(--v119-ease-out),
              transform var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-vp__methodo[open] .v119-vp__methodo-list li {
  opacity: 1;
  transform: translateY(0);
}
.v119-vp__methodo[open] .v119-vp__methodo-list li:nth-child(1) { transition-delay: var(--v119-phi-1, 0.382s); }
.v119-vp__methodo[open] .v119-vp__methodo-list li:nth-child(2) { transition-delay: calc(var(--v119-phi-1, 0.382s) * 1.618); }
.v119-vp__methodo[open] .v119-vp__methodo-list li:nth-child(3) { transition-delay: calc(var(--v119-phi-1, 0.382s) * 2.618); }
.v119-vp__methodo[open] .v119-vp__methodo-list li:nth-child(4) { transition-delay: calc(var(--v119-phi-1, 0.382s) * 4.236); }
.v119-vp__methodo[open] .v119-vp__methodo-list li:nth-child(5) { transition-delay: calc(var(--v119-phi-1, 0.382s) * 6.854); }
.v119-vp__methodo-list li:last-child { border-bottom: none; }
.v119-vp__methodo-list li::before {
  content: counter(methodo);
  position: absolute;
  left: 0;
  top: 14px;
  width: 22px;
  height: 22px;
  font-family: var(--v119-font-mono);
  font-size: 10.5px;
  color: var(--v119-gold-thread, #c8a868);
  border: 1px solid rgba(200, 168, 104, 0.30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.v119-vp__methodo-note {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--v119-gold-deep, #9a7d4a);
  font-style: italic;
  text-align: right;
  letter-spacing: 0.005em;
}

/* ── CTA — discrétion or-thread (pas terracotta brutal) ──────────── */
.v119-vp__cta-wrap {
  text-align: center;
  margin-top: clamp(48px, 6vw, 72px);
  opacity: 0;
  transition: opacity var(--v119-phi-3, 1s) var(--v119-ease-out) var(--v119-phi-5, 2.618s);
}
.v119-vp.is-revealed .v119-vp__cta-wrap { opacity: 1; }

.v119-vp__cta {
  display: inline-block;
  position: relative;
  padding: 14px 38px;
  background: transparent;
  color: var(--v119-gold-thread, #c8a868);
  text-decoration: none;
  border: 1px solid var(--v119-gold-thread, #c8a868);
  border-radius: 2px;
  font-family: var(--v119-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--v119-phi-2, 0.618s) var(--v119-ease-out);
}
.v119-vp__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v119-gold-thread, #c8a868);
  transform: translateX(-100%);
  transition: transform var(--v119-phi-2, 0.618s) var(--v119-ease-out);
  z-index: -1;
}
.v119-vp__cta:hover {
  color: var(--v119-bg-primary, #0a1428);
}
.v119-vp__cta:hover::before {
  transform: translateX(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v119-vp::before,
  .v119-vp::after,
  .v119-vp__eyebrow,
  .v119-vp__headline,
  .v119-vp__headline-secondary,
  .v119-vp__subline,
  .v119-vp__multiplier-frame::before,
  .v119-vp__multiplier-frame::after,
  .v119-vp__multiplier-unit,
  .v119-vp__multiplier-caption,
  .v119-vp__focus,
  .v119-vp__focus::before,
  .v119-vp__focus::after,
  .v119-vp__cta-wrap,
  .v119-vp__methodo-list li,
  .v119-vp__cta::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

}

/* --- chapters/09-advantages.css --- */
@layer features {
/*
 * chapters/09-advantages.css — Plan 119-W (extracted from Plan 119-Q-D).
 *
 * Chap. IX — Avantages & Performance — 8 différenciateurs avec sceau-puce or.
 * Composant : advantage.css. Grid 2 colonnes (380px min) pour confort lecture.
 */

.v119-advantages {
  position: relative;
  background: linear-gradient(180deg, var(--v119-bg-primary) 0%, var(--v119-bg-secondary) 100%);
  padding: 120px 24px 120px;
  border-top: 1px solid rgba(154, 125, 74, 0.12);
}

.v119-advantages__inner {
  max-width: 920px;
  margin: 0 auto;
}

.v119-advantages__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--v119-ink);
  margin: 0 0 56px 0;
  text-align: center;
}

.v119-advantages__title::first-letter { color: var(--v119-gold-thread); }

.v119-advantages__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 28px 48px;
}

}

/* --- chapters/10-invitation.css --- */
@layer features {
/*
 * chapters/10-invitation.css — Plan 119-W (extracted from Plan 119-Q-E).
 *
 * Chap. X — Invitation + Form contact + sceau final.
 * Caustique tamisée bottom (calmée vs hero) + form layout.
 * Composant : form.css.
 */

.v119-invitation {
  position: relative;
  background: var(--v119-bg-primary);
  padding: 140px 24px 80px;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
  overflow: hidden;
}

/* Caustique tamisée pour finale (calmée vs hero) */
.v119-invitation::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(58, 142, 170, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(200, 168, 104, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.v119-invitation__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.v119-invitation__title {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.15;
  color: var(--v119-ink);
  margin: 0 0 24px 0;
}

.v119-invitation__title::first-letter { color: var(--v119-gold-thread); }

.v119-invitation__intro {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.75;
  color: var(--v119-ink-muted);
  max-width: 540px;
  margin: 0 auto 56px;
}

}

/* ════════════════════════════════════════════════════════════════
   @layer overrides
   ════════════════════════════════════════════════════════════════ */

/* --- components/glass-overlay.css --- */
@layer overrides {
/*
 * glass-overlay.css — Plan 119-ECO §glass.
 *
 * Pattern glass morphism : sections transparentes (canvas visible) → cards et
 * panels semi-opaques avec backdrop-filter blur. L'animation centrale est
 * VUE FLOUTÉE derrière le contenu lisible. Effet "verre dépoli" cohérent.
 *
 * Cibles : tout container avec du texte qui mérite lisibilité optimale.
 * Skip : sections elles-mêmes (déjà transparentes), éléments décoratifs.
 *
 * Performance : backdrop-filter sur 6-8 éléments concurrents seulement (cards
 * en viewport). Pas sur fullscreen layers.
 */

/* ── PALIERS (Méthode) ─────────────────────────────────────────── */
.v119-palier {
  background: rgba(10, 20, 40, 0.38) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(200, 168, 104, 0.22);
  border-radius: 18px;
  /* Halo gold subtle pour intégrer la card dans la lumière ambiante */
  box-shadow:
    0 0 0 1px rgba(200, 168, 104, 0.04),
    0 12px 36px -16px rgba(200, 168, 104, 0.18),
    inset 0 1px 0 rgba(245, 233, 212, 0.06);
  transition: border-color 460ms ease, box-shadow 460ms ease, transform 460ms ease;
}
.v119-palier:hover {
  border-color: rgba(200, 168, 104, 0.42);
  box-shadow:
    0 0 0 1px rgba(200, 168, 104, 0.08),
    0 18px 48px -16px rgba(200, 168, 104, 0.32),
    inset 0 1px 0 rgba(245, 233, 212, 0.10);
  transform: translateY(-2px);
}
/* Coin haut-gauche : touche d'or pour signature */
.v119-palier::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-top: 1px solid rgba(200, 168, 104, 0.35);
  border-left: 1px solid rgba(200, 168, 104, 0.35);
  border-top-left-radius: 18px;
  pointer-events: none;
}
.v119-palier { position: relative; }

/* ── PILIERS (Internal) ────────────────────────────────────────── */
.v119-internal__pillars {
  position: relative;
  z-index: 2;
}
.v119-pillar {
  background: rgba(10, 20, 40, 0.32) !important;
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border-radius: 10px;
  padding: 14px 18px !important;
  margin-left: 0 !important;
}
.v119-pillar.is-cospotlight {
  background: linear-gradient(90deg, rgba(200, 168, 104, 0.14) 0%, rgba(10, 20, 40, 0.42) 60%) !important;
}

/* ── INTERFACE — Colonnes Perso/Business ───────────────────────── */
.v119-iface__col {
  background: rgba(10, 20, 40, 0.36) !important;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(200, 168, 104, 0.06),
    0 16px 48px -20px rgba(200, 168, 104, 0.18),
    inset 0 1px 0 rgba(245, 233, 212, 0.05);
}
.v119-iface__col:hover {
  background: rgba(10, 20, 40, 0.48) !important;
  box-shadow:
    0 0 0 1px rgba(200, 168, 104, 0.12),
    0 22px 56px -20px rgba(200, 168, 104, 0.30),
    inset 0 1px 0 rgba(245, 233, 212, 0.08);
}
.v119-iface__bridge {
  background: rgba(10, 20, 40, 0.25) !important;
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border-radius: 12px;
}

/* ── COOPÉRATION — Texte + screen mockup ───────────────────────── */
.v119-cooperation__text {
  background: rgba(10, 20, 40, 0.32);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-radius: 14px;
  padding: clamp(20px, 2.5vw, 34px);
}
.v119-screen {
  background: rgba(10, 20, 40, 0.55) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* ── ORIGINE / SITE / CASES — text containers ──────────────────── */
.v119-origin__inner,
.v119-site__col,
.v119-cases__inner {
  position: relative;
  z-index: 2;
}
.v119-origin__list,
.v119-site__col {
  background: rgba(10, 20, 40, 0.35);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border-radius: 12px;
  padding: clamp(18px, 2vw, 28px);
}

/* ── CAPABILITIES bento ────────────────────────────────────────── */
.v119-capgroup {
  background: rgba(10, 20, 40, 0.38) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  box-shadow:
    0 0 0 1px rgba(200, 168, 104, 0.05),
    0 12px 36px -16px rgba(200, 168, 104, 0.16),
    inset 0 1px 0 rgba(245, 233, 212, 0.04);
}
.v119-capgroup:hover {
  background: rgba(10, 20, 40, 0.50) !important;
  box-shadow:
    0 0 0 1px rgba(200, 168, 104, 0.10),
    0 18px 48px -16px rgba(200, 168, 104, 0.28),
    inset 0 1px 0 rgba(245, 233, 212, 0.07);
}
.v119-capabilities__foot {
  background: rgba(10, 20, 40, 0.42) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

/* ── PRICING tiers ─────────────────────────────────────────────── */
.v119-tier,
.v119-pricing__tier {
  background: rgba(10, 20, 40, 0.45) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

/* ── ADVANTAGES cards ──────────────────────────────────────────── */
.v119-advantage {
  background: rgba(10, 20, 40, 0.35);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border-radius: 10px;
  padding: 14px 18px;
}

/* ── INVITATION form ───────────────────────────────────────────── */
.v119-invitation__form,
.v119-invitation__inner {
  position: relative;
  z-index: 2;
}
.v119-invitation__form {
  background: rgba(10, 20, 40, 0.42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 40px);
}

/* ── FORCE-GRAPH wrap ──────────────────────────────────────────── */
.v119-force-graph {
  background: radial-gradient(ellipse at center, rgba(19, 30, 58, 0.38) 0%, rgba(10, 20, 40, 0) 75%) !important;
  position: relative;
  z-index: 2;
}

/* ── Text content z-index escalation : tout texte au-dessus du canvas */
.v119-hero__inner,
.v119-origin__inner,
.v119-method__inner,
.v119-cooperation__inner,
.v119-iface__inner,
.v119-site__inner,
.v119-cases__inner,
.v119-internal__inner,
.v119-pricing__inner,
.v119-advantages__inner,
.v119-invitation__inner,
.v119-capabilities__inner {
  position: relative;
  z-index: 4;
}

/* ── Text legibility — text-shadow pour textes hors cards ─────────
   Section titles, ledes, paragraphes flottant sur le canvas ambient
   reçoivent un text-shadow ink subtle pour rester nets quelles que
   soient les particules animées qui passent derrière. */
.v119-hero__title,
.v119-origin__title,
.v119-method__title,
.v119-method__lede,
.v119-cooperation__title,
.v119-iface__title,
.v119-iface__lede,
.v119-cases__title,
.v119-cases__intro,
.v119-cases__alt,
.v119-internal__title,
.v119-pricing__title,
.v119-advantages__title,
.v119-invitation__title,
.v119-capabilities__title,
.v119-capabilities__lede,
.v119-iface__foot {
  text-shadow:
    0 0 14px rgba(10, 20, 40, 0.85),
    0 0 28px rgba(10, 20, 40, 0.55),
    0 1px 2px rgba(10, 20, 40, 0.95);
}

/* Body text in non-card containers — léger shadow pour lisibilité */
.v119-origin__list li,
.v119-cooperation__intro,
.v119-site__col-text,
.v119-internal__intro,
.v119-pricing__lede {
  text-shadow:
    0 0 8px rgba(10, 20, 40, 0.85),
    0 1px 1px rgba(10, 20, 40, 0.85);
}

/* Glass band derrière les section heads (titres + ledes). Crée un fond
   ink subtle qui couvre la zone du texte d'en-tête, jamais le texte. */
.v119-iface__head,
.v119-internal__inner > .v119-internal__title,
.v119-capabilities__head {
  position: relative;
  z-index: 3;
}

.v119-method__inner > .v119-method__title,
.v119-method__inner > .v119-method__lede,
.v119-origin__inner > .v119-origin__title,
.v119-cooperation__inner > .v119-cooperation__title,
.v119-cases__inner > .v119-cases__title,
.v119-cases__inner > .v119-cases__intro,
.v119-cases__inner > .v119-cases__alt,
.v119-pricing__inner > .v119-pricing__title,
.v119-pricing__inner > .v119-pricing__lede,
.v119-advantages__inner > .v119-advantages__title,
.v119-invitation__inner > .v119-invitation__title,
.v119-invitation__inner > .v119-invitation__intro {
  position: relative;
  z-index: 3;
}

/* Plan 119-CLEAN 2026-05-25 : les overrides ci-dessous (background body,
   liens footer cyan, liens signals cyan) sont devenus redondants après
   redefinition de --accent, --text-2, --text-3 et background dans le bloc
   .landing--sota de style.css (palette en cascade variable, sans !important).
   Conservé en commentaire pour traçabilité.
   - body bg → style.css .landing--sota { background: #0a1428; }
   - links footer/signals → resolve via var(--text-2) → cream automatic
*/
/* ── DOCTRINE : grilles avec count item connu → colonnes EXPLICITES.
   auto-fit minmax crée des orphelins dès que la dernière rangée n'est pas
   complète. On préfère une grille équilibrée même si les cards sont un peu
   plus larges. */

/* 4 items → 2×2 (Méthode paliers + Capabilities groups) */
.landing--sota .v119-method__paliers,
.v119-method__paliers,
.landing--sota .v119-capabilities__grid,
.v119-capabilities__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(20px, 3vw, 40px) !important;
}
@media (max-width: 720px) {
  .landing--sota .v119-method__paliers,
  .v119-method__paliers,
  .landing--sota .v119-capabilities__grid,
  .v119-capabilities__grid {
    grid-template-columns: 1fr !important;
  }
}

/* 8 items → 4×2 desktop (Advantages list). 2 cols tablet, 1 mobile. */
.landing--sota .v119-advantages__list,
.v119-advantages__list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(16px, 2vw, 28px) !important;
}
@media (max-width: 1100px) {
  .landing--sota .v119-advantages__list,
  .v119-advantages__list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .landing--sota .v119-advantages__list,
  .v119-advantages__list {
    grid-template-columns: 1fr !important;
  }
}

/* Form fields glass — Contact page lisibilité */
.v119-invitation__form input[type=text],
.v119-invitation__form input[type=email],
.v119-invitation__form input[type=tel],
.v119-invitation__form input[type=number],
.v119-invitation__form select,
.v119-invitation__form textarea,
.v119-invitation input,
.v119-invitation select,
.v119-invitation textarea {
  background: rgba(10, 20, 40, 0.55) !important;
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
}

/* Skip backdrop-filter sur appareils sans support (safari iOS old) ─ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v119-palier,
  .v119-pillar,
  .v119-iface__col,
  .v119-iface__bridge,
  .v119-screen,
  .v119-capgroup,
  .v119-tier,
  .v119-pricing__tier,
  .v119-advantage,
  .v119-invitation__form,
  .v119-origin__list,
  .v119-site__col {
    background: rgba(10, 20, 40, 0.85) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v119-iface__col:hover,
  .v119-capgroup:hover {
    background: rgba(10, 20, 40, 0.52) !important;
  }
}

}

/* --- components/cinematic-hero.css --- */
@layer overrides {
/* ─────────────────────────────────────────────────────────────────────
   hero-cinematic.css — Hero plein écran avec vidéo de fond + texte HTML
   indexable. Conforme à la convention vitrine (tokens, ratios φ,
   easing).

   Stack visuelle (front to back) :
     5. <h1>, <p>, CTA — texte HTML animé une seule fois, persiste
     4. .v119-hero__veil — voile dégradé qui darken le bas pour lisibilité
     3. .v119-hero__grid-overlay — pattern hexagonal doré à droite (signature)
     2. .v119-hero__media — <video> ou <picture> fallback
     1. .v119-hero — fond bleu nuit (failsafe avant chargement vidéo)

   Le texte HTML est INDÉPENDANT de la timeline vidéo — il s'anime à
   t=0 (montage du composant) et reste figé à l'état final
   (animation-fill-mode: forwards). La vidéo loop derrière en silencieux.
   ───────────────────────────────────────────────────────────────────── */

.v119-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--v119-bg-primary, #0a1428);
  color: var(--v119-ink, #f5e9d4);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

/* Couche 2 — média (vidéo ou image fallback) */
.v119-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.v119-hero__video,
.v119-hero__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  inset: 0;
}
/* Plan 119-SP-Q (J2) : poster visible immédiatement (FCP rapide), vidéo
   se superpose progressivement en fondu une fois prête (1s ease). */
.v119-hero__poster {
  z-index: 1;
  opacity: 1;
  transition: opacity 1.2s ease-out;
}
.v119-hero__video {
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.v119-hero__media.is-video-ready .v119-hero__video { opacity: 1; }

/* Variantes de cadrage du média */
.v119-hero--media-fullbleed .v119-hero__media { inset: 0; }

.v119-hero--media-left .v119-hero__media {
  inset: 0 50% 0 0;
}
.v119-hero--media-left .v119-hero__media::after {
  /* fade vers le fond pour fondre la coupure droite */
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: -1px; width: 28%;
  background: linear-gradient(to right, transparent, var(--v119-bg-primary, #0a1428));
  pointer-events: none;
}

/* Couche 3 — pattern hexagonal doré à droite (signature de la référence) */
.v119-hero__grid-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(60deg, rgba(200,168,104,0.18) 1px, transparent 1px),
    linear-gradient(-60deg, rgba(200,168,104,0.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(200,168,104,0.18) 1px, transparent 1px);
  background-size: 48px 84px, 48px 84px, 48px 84px;
  mask-image: linear-gradient(to left, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 0%, black 50%, transparent 100%);
}

/* Couche 4 — voile dégradé qui darken pour lisibilité du texte */
.v119-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(10,20,40,0.0) 0%, rgba(10,20,40,0.55) 45%, rgba(10,20,40,0.85) 100%),
    linear-gradient(to bottom, rgba(10,20,40,0) 60%, rgba(10,20,40,0.6) 100%);
}

.v119-hero--veil-strong .v119-hero__veil {
  background:
    linear-gradient(to right, rgba(10,20,40,0.2) 0%, rgba(10,20,40,0.7) 50%, rgba(10,20,40,0.9) 100%),
    linear-gradient(to bottom, rgba(10,20,40,0.1) 60%, rgba(10,20,40,0.7) 100%);
}

/* Lens flare horizontal (signature de la référence) */
.v119-hero__flare {
  position: absolute;
  left: 0; right: 0;
  top: 62%;
  height: 3px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(58,142,170,0.4) 22%,
    rgba(245,233,212,0.85) 45%,
    rgba(200,168,104,0.7) 55%,
    transparent 80%);
  filter: blur(1px);
  opacity: 0;
  animation: hero-flare-in 1.618s var(--v119-ease-out, cubic-bezier(0.16,1,0.3,1)) 0.382s forwards;
}

@keyframes hero-flare-in {
  0%   { opacity: 0; transform: scaleX(0.2); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* Couche 5 — contenu texte */
.v119-hero__inner {
  position: relative;
  z-index: 4;
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 56px;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.v119-hero__text {
  grid-column: 2;
  max-width: 480px;
}

.v119-hero--text-center .v119-hero__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.v119-hero--text-center .v119-hero__text {
  grid-column: 1;
  max-width: 720px;
}

.v119-hero__eyebrow {
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v119-gold-thread, #c8a868);
  margin: 0 0 20px 0;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-fade-up 1s var(--v119-ease-out, cubic-bezier(0.16,1,0.3,1)) 0.382s forwards;
}

.v119-hero__title {
  font-family: var(--v119-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.05;
  margin: 0 0 24px 0;
  color: var(--v119-ink, #f5e9d4);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(12px);
  animation: hero-fade-up 1.618s var(--v119-ease-out, cubic-bezier(0.16,1,0.3,1)) 0.618s forwards;
}

.v119-hero__title-mark {
  color: var(--v119-gold-thread, #c8a868);
  font-style: italic;
}

.v119-hero__tagline {
  font-family: var(--v119-font-body, 'Inter', sans-serif);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--v119-ink-muted, #b8c4dc);
  margin: 0 0 32px 0;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-fade-up 1.618s var(--v119-ease-out, cubic-bezier(0.16,1,0.3,1)) 1s forwards;
}

/* Plan 119-SP-P fix : `style.css` (unlayered) définit `a { color: var(--accent); }`
   avec --accent: #19DCC8 (cyan). En CSS Cascade Layers spec, les styles unlayered
   priment sur tout layered, peu importe spécificité. Donc on force les couleurs
   du CTA via !important pour garantir la palette v119 (or-thread + ivoire). */
.v119-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--v119-font-body, sans-serif);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--v119-ink, #f5e9d4) !important;
  background: transparent !important;
  border: 1px solid rgba(200, 168, 104, 0.55) !important;
  border-radius: 4px;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.382s var(--v119-ease-out), border-color 0.382s var(--v119-ease-out), color 0.382s var(--v119-ease-out);
  opacity: 0;
  transform: translateY(8px);
  animation: hero-fade-up 1.618s var(--v119-ease-out, cubic-bezier(0.16,1,0.3,1)) 1.618s forwards;
}
.v119-hero__cta::after {
  content: '→';
  color: var(--v119-gold-thread, #c8a868);
  transition: transform 0.382s var(--v119-ease-out);
}
.v119-hero__cta:hover {
  background: rgba(200, 168, 104, 0.08) !important;
  border-color: var(--v119-gold-thread, #c8a868) !important;
  color: var(--v119-ink, #f5e9d4) !important;
}
.v119-hero__cta:hover::after { transform: translateX(4px); }

@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Plan 119-SP-Q (R-series V2) : keyframe offset-aware. Préserve --ox/--oy
   custom props (zone-anchor V2) en les incluant dans le transform animé.
   `--ox` / `--oy` sont set par l'inline style de l'élément (zone center + offset). */
@keyframes hero-fade-up-abs {
  from { opacity: 0; transform: translate(calc(-50% + var(--ox, 0%)), calc(-50% + var(--oy, 0%) + 12px)); }
  to   { opacity: 1; transform: translate(calc(-50% + var(--ox, 0%)), calc(-50% + var(--oy, 0%))); }
}

/* Styles base pour les éléments en mode absolute (.v119-hero__el) — hérite
   les caractéristiques typo via les classes BEM mappées (eyebrow/title/...) */
.v119-hero__el {
  z-index: 4;
  pointer-events: auto;
  white-space: normal;
  text-wrap: pretty;
  max-width: 60ch;
  /* Plan 119-SP-Q (J1) : reset clip-path/blur legacy qui rendait invisible. */
  clip-path: none !important;
  filter: none !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

/* Plan 119-SP-Q (L2) : font-size cohérente entre éditeur et front. Bornes
   du clamp réduites par rapport au layout classique car en mode absolute
   on n'a pas de container .v119-hero__inner avec max-width 480px qui
   contraignait — donc on doit éviter que le titre déborde sur grand écran. */
/* Plan 119-SP-Q (P1) : SOURCE DE VÉRITÉ UNIQUE pour le scaling.
   --vu (viewport unit) vaut `1vw` sur le front réel (= 1% de la viewport).
   Le canvas éditeur override cette variable avec sa propre largeur via JS,
   donc UNE FORMULE = UN RENDU IDENTIQUE des deux côtés (WYSIWYG bytes-pour-bytes).

   Coefficients (par bound type) :
     - title   : 2.6 × --vu (clamp 26-52px)
     - tagline : 0.95 × --vu (clamp 13-16px)
     - eyebrow : 0.7 × --vu (clamp 10-12px)
     - cta     : 0.85 × --vu (clamp 12-14px) */
.v119-hero { --vu: 1vw; }
.v119-hero__el.v119-hero__title {
  display: block !important;
  font-size: clamp(26px, calc(var(--vu, 1vw) * 2.6 * var(--el-scale, 1)), calc(52px * var(--el-scale, 1))) !important;
  line-height: 1.1 !important;
  font-family: var(--v119-font-display, 'Cormorant Garamond', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-align: left !important;
  max-width: 32ch;
  margin: 0;
}
.v119-hero__el.v119-hero__tagline {
  display: block !important;
  font-size: clamp(13px, calc(var(--vu, 1vw) * 0.95 * var(--el-scale, 1)), calc(16px * var(--el-scale, 1))) !important;
  line-height: 1.55 !important;
  font-family: var(--v119-font-body, 'Inter', sans-serif) !important;
  font-weight: 300 !important;
  text-align: left !important;
  max-width: 38ch;
  color: var(--v119-ink-muted, #b8c4dc);
  margin: 0;
}
.v119-hero__el.v119-hero__eyebrow {
  display: block !important;
  font-size: clamp(10px, calc(var(--vu, 1vw) * 0.7 * var(--el-scale, 1)), calc(12px * var(--el-scale, 1))) !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace) !important;
  text-align: left !important;
  max-width: 30ch;
  color: var(--v119-gold-thread, #c8a868);
  margin: 0;
}
.v119-hero__el.v119-hero__cta {
  font-size: clamp(12px, calc(var(--vu, 1vw) * 0.85 * var(--el-scale, 1)), calc(14px * var(--el-scale, 1))) !important;
  padding: calc(0.7 * var(--vu, 1vw) * var(--el-scale, 1)) calc(1.3 * var(--vu, 1vw) * var(--el-scale, 1)) !important;
}

/* Mark gold-thread italic à l'intérieur du title (peut wrap sur 2 lignes) */
.v119-hero__el.v119-hero__title .v119-hero__title-mark {
  color: var(--v119-gold-thread, #c8a868);
  font-style: italic;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .v119-hero { min-height: 88vh; }
  .v119-hero__inner {
    grid-template-columns: 1fr;
    padding: 64px 24px;
    text-align: center;
  }
  .v119-hero__text { grid-column: 1; max-width: 100%; }
  .v119-hero--media-left .v119-hero__media { inset: 0; }
  .v119-hero--media-left .v119-hero__media::after { display: none; }
  .v119-hero__veil {
    background:
      linear-gradient(to bottom, rgba(10,20,40,0.3) 0%, rgba(10,20,40,0.85) 100%);
  }
  .v119-hero__grid-overlay { width: 100%; opacity: 0.18; mask-image: none; -webkit-mask-image: none; }
  .v119-hero__cta { width: auto; }
}

/* ── Reduced motion : pas d'autoplay vidéo, image statique, pas d'anim ── */
@media (prefers-reduced-motion: reduce) {
  .v119-hero__video { display: none; }
  .v119-hero__poster { display: block; }
  .v119-hero__eyebrow,
  .v119-hero__title,
  .v119-hero__tagline,
  .v119-hero__cta,
  .v119-hero__flare {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

}

/* --- chapters/04-cooperation-flow.css --- */
@layer overrides {
/*
 * chapters/04-cooperation-flow.css — Plan 119-XY.
 *
 * Flux client → développeur dans le chap. IV (coopération).
 * Bulle haute (client anonyme, "Un besoin") → filament doré animé →
 * écran (existing v119-screen) → filament doré animé → bulle basse
 * (avatar développeur, "Un résultat").
 *
 * Palette : sanctuary v119 (ivoire #f5e9d4 / encre #0a1428 / gold-thread #c8a868).
 * Animation : pulse subtil sur les bulles + particule descendante sur
 * les filaments, respectueuse de prefers-reduced-motion.
 */

.v119-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.v119-flow .v119-screen {
  width: 100%;
  margin: 0;
}

/* ── Nodes (bulle avatar + caption) ─────────────────────────────── */

.v119-flow__node {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.v119-flow__node--client { align-self: flex-start; padding-left: 6%; }
.v119-flow__node--dev    { align-self: flex-end;   padding-right: 6%; flex-direction: row-reverse; }

@media (max-width: 720px) {
  .v119-flow__node--client,
  .v119-flow__node--dev   { align-self: center; padding: 0; flex-direction: column; gap: 10px; }
}

.v119-flow__avatar {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(26, 22, 18, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(200, 168, 104, 0.18),
    0 8px 24px -10px rgba(0, 0, 0, 0.65);
  overflow: visible;
  animation: v119-flow-breathe 4.2s ease-in-out infinite;
}

.v119-flow__avatar--dev {
  animation-delay: 1.4s;
  box-shadow:
    inset 0 0 0 1px rgba(200, 168, 104, 0.45),
    0 0 26px -8px rgba(200, 168, 104, 0.45),
    0 8px 28px -10px rgba(0, 0, 0, 0.65);
}

.v119-flow__contour {
  width: 100%;
  height: 100%;
  display: block;
}

.v119-flow__circle {
  fill: none;
  stroke: rgba(245, 233, 212, 0.22);
  stroke-width: 1.2;
}

.v119-flow__circle--gold {
  stroke: rgba(200, 168, 104, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 1.5 3;
  animation: v119-flow-rotate 18s linear infinite;
  transform-origin: 50% 50%;
}

.v119-flow__silhouette {
  fill: rgba(245, 233, 212, 0.42);
}

.v119-flow__silhouette--gold {
  fill: rgba(200, 168, 104, 0.78);
}

/* ── Caption (eyebrow + label) ──────────────────────────────────── */

.v119-flow__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--v119-font-body);
  line-height: 1.3;
}

.v119-flow__node--dev .v119-flow__caption { text-align: right; }

@media (max-width: 720px) {
  .v119-flow__node--dev .v119-flow__caption { text-align: center; }
}

.v119-flow__caption-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 233, 212, 0.42);
  font-weight: 400;
}

.v119-flow__caption-text {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--v119-ivoire, #f5e9d4);
}

.v119-flow__node--dev .v119-flow__caption-text {
  color: var(--v119-gold-thread, #c8a868);
}

/* ── Filament vertical animé entre les nodes/écran ──────────────── */

.v119-flow__filament {
  position: relative;
  width: 1px;
  height: 56px;
  background: linear-gradient(
    to bottom,
    rgba(200, 168, 104, 0.00) 0%,
    rgba(200, 168, 104, 0.55) 18%,
    rgba(200, 168, 104, 0.55) 82%,
    rgba(200, 168, 104, 0.00) 100%
  );
  overflow: visible;
}

.v119-flow__particle {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--v119-gold-thread, #c8a868);
  box-shadow: 0 0 12px 2px rgba(200, 168, 104, 0.55);
  animation: v119-flow-fall 2.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}

/* Petit halo derrière la particule pour impression de "queue" */
.v119-flow__particle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px;
  height: 14px;
  margin-left: -0.5px;
  background: linear-gradient(to bottom, rgba(200, 168, 104, 0.00), rgba(200, 168, 104, 0.65));
}

/* ── Animations ─────────────────────────────────────────────────── */

@keyframes v119-flow-fall {
  0%   { top: -4px;  opacity: 0; }
  18%  {              opacity: 1; }
  82%  {              opacity: 1; }
  100% { top: calc(100% + 4px); opacity: 0; }
}

@keyframes v119-flow-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 0 0 0 1px rgba(200, 168, 104, 0.18),
      0 8px 24px -10px rgba(0, 0, 0, 0.65);
  }
  50% {
    transform: scale(1.03);
    box-shadow:
      inset 0 0 0 1px rgba(200, 168, 104, 0.32),
      0 0 22px -8px rgba(200, 168, 104, 0.30),
      0 8px 24px -10px rgba(0, 0, 0, 0.65);
  }
}

@keyframes v119-flow-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Reduced-motion : suppression strict des animations ─────────── */
@media (prefers-reduced-motion: reduce) {
  .v119-flow__avatar,
  .v119-flow__circle--gold,
  .v119-flow__particle {
    animation: none !important;
  }
  .v119-flow__particle { top: 50%; opacity: 0.7; }
}

}

/* --- chapters/05bis-about-flow.css --- */
@layer overrides {
/*
 * chapters/05bis-about-flow.css — Plan 119-SP-M (refonte chap V-bis "À propos").
 *
 * Réinjection de la grammaire v119-flow (chap. IV coopération) dans la section
 * "À propos" : bulle portrait + cercles pointillés rotatifs + halo respirant
 * + filaments dorés avec particules + caustiques aurore.
 *
 * Décision design (chat handoff Claude Design 2026-05-10) :
 *   - Desktop : Variante C — Carrefour (vos besoins ↔ vous ↔ votre développeur)
 *   - Mobile  : Variante B — Vous → votre œuvre (mini-écran control plane)
 *
 * Dual DOM avec class utility .is-desktop / .is-mobile pour swap responsive.
 *
 * Tokens consommés : --v119-bg-primary, --v119-ink, --v119-gold-thread,
 * --v119-gold-deep, --v119-aurora-cyan/magenta/violet, --v119-phi-1..5,
 * --v119-ease-out, --v119-font-display/body/mono.
 *
 * Reduced-motion : tout figé (rotation, particule, breath, spirale).
 */

/* ─────────────────────────────────────────────────────────────────────
   Section globale (override v119-about legacy si chargé)
   ───────────────────────────────────────────────────────────────────── */
.v119-about--flow {
  position: relative;
  background: var(--v119-bg-primary, #0a1428);
  color: var(--v119-ink, #f5e9d4);
  font-family: var(--v119-font-body, 'Inter', system-ui, sans-serif);
  isolation: isolate;
  padding: clamp(64px, 8vw, 96px) 0;
}

/* Aurore caustique tamisée arrière-plan (hors flux) */
.v119-about--flow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(58, 142, 170, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(125, 77, 168, 0.08), transparent 60%),
    radial-gradient(ellipse 40% 30% at 60% 20%, rgba(184, 122, 195, 0.05), transparent 60%);
  z-index: 0;
}

/* Filet doré bordure haute */
.v119-about--flow::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 168, 104, 0.18) 30%,
    rgba(200, 168, 104, 0.32) 50%,
    rgba(200, 168, 104, 0.18) 70%,
    transparent 100%);
  z-index: 0;
}

.v119-about--flow .v119-about__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  box-sizing: border-box;
  /* Plan 119-SP-N — ce file est dans @layer overrides (cf vitrine/index.css)
     donc il prime naturellement sur le legacy `chapters/05bis-about.css` (layer features),
     sans `!important`. Si la cascade layer n'est pas supportée par un browser ancien,
     le legacy l'emporterait — mais @layer est natif Chrome/FF/Safari/Edge depuis 2022. */
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* Toggle desktop ↔ mobile */
.v119-about__variant--desktop { display: block; }
.v119-about__variant--mobile  { display: none; }
@media (max-width: 720px) {
  .v119-about__variant--desktop { display: none; }
  .v119-about__variant--mobile  { display: block; }
}

/* ─────────────────────────────────────────────────────────────────────
   Headers communs (eyebrow + title + role + bio + experience)
   ───────────────────────────────────────────────────────────────────── */
.v119-flow-text { color: var(--v119-ink, #f5e9d4); }

.v119-flow-text__eyebrow {
  font-family: var(--v119-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 168, 104, 0.7);
  margin: 0 0 16px 0;
}

.v119-flow-text__title {
  font-family: var(--v119-font-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  margin: 0 0 12px 0;
}
.v119-flow-text__title::first-letter { color: var(--v119-gold-thread, #c8a868); }

.v119-flow-text__role {
  font-family: var(--v119-font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--v119-gold-deep, #9a7d4a);
  margin: 0 0 24px 0;
}

.v119-flow-text__bio {
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 233, 212, 0.78);
  margin: 0 0 28px 0;
  text-wrap: pretty;
}
.v119-flow-text__bio strong { color: var(--v119-ink); font-weight: 400; }
.v119-flow-text__bio em { font-style: italic; color: var(--v119-gold-thread, #c8a868); font-weight: 400; }

.v119-flow-text__experience {
  list-style: none;
  padding: 24px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(154, 125, 74, 0.18);
}
.v119-flow-text__experience li {
  position: relative;
  padding-left: 24px;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 233, 212, 0.78);
}
.v119-flow-text__experience li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px; height: 1px;
  background: var(--v119-gold-deep, #9a7d4a);
}

/* ─────────────────────────────────────────────────────────────────────
   Bulle portrait — réplique fidèle v119-flow.
   Cercle pointillé rotatif (18s contre 28s rev) + halo breathing (4.2s).
   ───────────────────────────────────────────────────────────────────── */
.v119-flow-bubble {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(26, 22, 18, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(200, 168, 104, 0.45),
    0 0 32px -6px rgba(200, 168, 104, 0.32),
    0 12px 36px -10px rgba(0, 0, 0, 0.65);
  animation: v119-flow-breathe 4.2s ease-in-out infinite;
  overflow: visible;
}
.v119-flow-bubble--lg { width: 260px; height: 260px; }
.v119-flow-bubble--sm { width: 88px; height: 88px; }

@keyframes v119-flow-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 0 0 0 1px rgba(200, 168, 104, 0.45),
      0 0 28px -8px rgba(200, 168, 104, 0.32),
      0 12px 36px -10px rgba(0, 0, 0, 0.65);
  }
  50% {
    transform: scale(1.025);
    box-shadow:
      inset 0 0 0 1px rgba(200, 168, 104, 0.62),
      0 0 42px -6px rgba(200, 168, 104, 0.55),
      0 12px 36px -10px rgba(0, 0, 0, 0.65);
  }
}

.v119-flow-bubble__halo {
  position: absolute;
  inset: -28%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(200, 168, 104, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 35% 65%, rgba(58, 142, 170, 0.12) 0%, transparent 55%);
  filter: blur(10px); /* Plan 119-PERF — 22→10px (multiple instances, GPU cost dominant) */
  border-radius: 50%;
  z-index: -1;
}

.v119-flow-bubble__photo {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(245, 233, 212, 0.06);
}
.v119-flow-bubble__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 30%;
  filter:
    grayscale(28%) sepia(18%) saturate(95%)
    contrast(1.04) brightness(0.92);
}
.v119-flow-bubble__photo--duotone img {
  filter:
    grayscale(85%) sepia(45%) saturate(140%)
    hue-rotate(-8deg) contrast(1.08) brightness(0.88);
}
.v119-flow-bubble__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(10, 20, 40, 0.42) 100%),
    linear-gradient(180deg, transparent 60%, rgba(10, 20, 40, 0.22) 100%);
  pointer-events: none;
}

.v119-flow-bubble__ring {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  animation: v119-flow-rotate 18s linear infinite;
  transform-origin: 50% 50%;
}
.v119-flow-bubble__ring circle {
  fill: none;
  stroke: rgba(200, 168, 104, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 1.5 3;
}
.v119-flow-bubble__ring--inner {
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  animation: v119-flow-rotate-rev 28s linear infinite;
}
.v119-flow-bubble__ring--inner circle {
  stroke: rgba(200, 168, 104, 0.22);
  stroke-width: 0.6;
  stroke-dasharray: 0.8 4;
}

@keyframes v119-flow-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes v119-flow-rotate-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

/* ─────────────────────────────────────────────────────────────────────
   Caption (eyebrow + label) — sous bulle portrait
   ───────────────────────────────────────────────────────────────────── */
.v119-flow-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--v119-font-body);
  line-height: 1.3;
  text-align: center;
}
.v119-flow-caption__eyebrow {
  font-family: var(--v119-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 233, 212, 0.42);
  font-weight: 400;
}
.v119-flow-caption__text {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--v119-gold-thread, #c8a868);
}

/* ─────────────────────────────────────────────────────────────────────
   Filaments dorés — vertical (B) ou horizontal (C)
   ───────────────────────────────────────────────────────────────────── */
.v119-flow-filament {
  position: relative;
  width: 1px;
  height: 64px;
  margin: 0 auto;
  background: linear-gradient(to bottom,
    rgba(200, 168, 104, 0.00) 0%,
    rgba(200, 168, 104, 0.55) 18%,
    rgba(200, 168, 104, 0.55) 82%,
    rgba(200, 168, 104, 0.00) 100%);
}
.v119-flow-filament--horizontal {
  width: 80px;
  height: 1px;
  background: linear-gradient(to right,
    rgba(200, 168, 104, 0.00) 0%,
    rgba(200, 168, 104, 0.55) 18%,
    rgba(200, 168, 104, 0.55) 82%,
    rgba(200, 168, 104, 0.00) 100%);
}
.v119-flow-filament__particle {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--v119-gold-thread, #c8a868);
  box-shadow: 0 0 12px 2px rgba(200, 168, 104, 0.6);
  animation: v119-flow-fall 2.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}
.v119-flow-filament__particle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px; height: 14px;
  margin-left: -0.5px;
  background: linear-gradient(to bottom, transparent, rgba(200, 168, 104, 0.7));
}
.v119-flow-filament--horizontal .v119-flow-filament__particle {
  left: 0; top: 50%;
  margin-left: 0; margin-top: -3px;
  animation-name: v119-flow-fall-h;
}
.v119-flow-filament--horizontal .v119-flow-filament__particle::after {
  left: -14px; top: 50%;
  margin-top: -0.5px;
  width: 14px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(200, 168, 104, 0.7));
}
.v119-flow-filament--horizontal-rev .v119-flow-filament__particle {
  animation-name: v119-flow-fall-h-rev;
  left: auto; right: 0;
}
.v119-flow-filament--horizontal-rev .v119-flow-filament__particle::after {
  left: auto; right: -14px;
  background: linear-gradient(to left, transparent, rgba(200, 168, 104, 0.7));
}

@keyframes v119-flow-fall {
  0%   { top: -4px;  opacity: 0; }
  18%  {              opacity: 1; }
  82%  {              opacity: 1; }
  100% { top: calc(100% + 4px); opacity: 0; }
}
@keyframes v119-flow-fall-h {
  0%   { left: -4px;  opacity: 0; }
  18%  {              opacity: 1; }
  82%  {              opacity: 1; }
  100% { left: calc(100% + 4px); opacity: 0; }
}
@keyframes v119-flow-fall-h-rev {
  0%   { right: -4px; opacity: 0; }
  18%  {              opacity: 1; }
  82%  {              opacity: 1; }
  100% { right: calc(100% + 4px); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   Variante C — Double flow (carrefour) — DESKTOP
   Layout : texte gauche (1fr) + portrait+satellites centre/droit (0.9fr)
   ───────────────────────────────────────────────────────────────────── */
.v119-about__variant--desktop .v119-flow-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.v119-flow-portrait-double {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.v119-flow-satellite-row {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  margin-top: 8px;
}

.v119-flow-satellite {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v119-flow-satellite--right { flex-direction: row-reverse; }

.v119-flow-satellite__bubble {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(26, 22, 18, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(200, 168, 104, 0.22),
    0 6px 18px -8px rgba(0, 0, 0, 0.6);
  animation: v119-flow-breathe 4.2s ease-in-out infinite;
  display: grid;
  place-items: center;
  font-family: var(--v119-font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--v119-gold-thread, #c8a868);
}
.v119-flow-satellite--right .v119-flow-satellite__bubble {
  font-family: var(--v119-font-mono);
  font-style: normal;
  font-size: 16px;
  animation-delay: 1.4s;
}

.v119-flow-satellite__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.v119-flow-satellite--right .v119-flow-satellite__caption { text-align: right; }

.v119-flow-satellite__eyebrow {
  font-family: var(--v119-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 233, 212, 0.42);
}
.v119-flow-satellite__text {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--v119-ink, #f5e9d4);
}

/* ─────────────────────────────────────────────────────────────────────
   Variante B — Vous → votre œuvre — MOBILE
   Layout : portrait haut + filament + mini-screen control plane bas
   ───────────────────────────────────────────────────────────────────── */
.v119-about__variant--mobile .v119-flow-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 24px 0 36px;
}

.v119-flow-mini-screen {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: var(--v119-bg-primary, #0a1428);
  border: 1px solid rgba(200, 168, 104, 0.28);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--v119-font-mono);
  font-size: 10.5px;
  color: rgba(245, 233, 212, 0.78);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(200, 168, 104, 0.08);
  animation: v119-mini-screen-breath 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes v119-mini-screen-breath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.v119-flow-mini-screen__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(154, 125, 74, 0.16);
}
.v119-flow-mini-screen__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v119-gold-deep, #9a7d4a);
  opacity: 0.4;
}
.v119-flow-mini-screen__dot:nth-child(2) { opacity: 0.55; }
.v119-flow-mini-screen__dot:nth-child(3) { opacity: 0.7; }
.v119-flow-mini-screen__title {
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v119-flow-mini-screen__row {
  display: flex; align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 10px;
}
.v119-flow-mini-screen__row + .v119-flow-mini-screen__row {
  border-top: 1px solid rgba(154, 125, 74, 0.08);
}
.v119-flow-mini-screen__row-icon {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--v119-gold-thread, #c8a868);
  opacity: 0.7;
  flex-shrink: 0;
  animation: v119-mini-pulse 4s ease-in-out infinite;
}
.v119-flow-mini-screen__row:nth-child(2) .v119-flow-mini-screen__row-icon { animation-delay: 0.4s; }
.v119-flow-mini-screen__row:nth-child(3) .v119-flow-mini-screen__row-icon { animation-delay: 0.8s; }

@keyframes v119-mini-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(200, 168, 104, 0); opacity: 0.6; }
  50%      { box-shadow: 0 0 8px rgba(200, 168, 104, 0.55); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile breakpoint — coupe rotation/particule, garde halo respirant.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .v119-about--flow .v119-about__inner { padding: 0 24px; }
  .v119-flow-bubble { width: 180px; height: 180px; }
  .v119-flow-bubble--lg { width: 200px; height: 200px; }

  /* GARDÉ : halo respirant (animation v119-flow-breathe) */
  /* COUPÉ : rotation cercles */
  .v119-flow-bubble__ring,
  .v119-flow-bubble__ring--inner { animation: none; }

  /* COUPÉ : particule descendante */
  .v119-flow-filament__particle {
    animation: none;
    top: 50%; left: 50%;
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
  .v119-flow-filament--horizontal .v119-flow-filament__particle {
    transform: translate(-50%, -50%);
  }

  /* COUPÉ : breath mini-screen */
  .v119-flow-mini-screen { animation: none; }

  /* Texte centré sur mobile */
  .v119-flow-text__title,
  .v119-flow-text__role { text-align: center; }
}

/* prefers-reduced-motion : tout figé */
@media (prefers-reduced-motion: reduce) {
  .v119-flow-bubble,
  .v119-flow-bubble__ring,
  .v119-flow-bubble__ring--inner,
  .v119-flow-filament__particle,
  .v119-flow-mini-screen,
  .v119-flow-satellite__bubble {
    animation: none !important;
  }
  .v119-flow-filament__particle {
    top: 50%; left: 50%;
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
}

}

/* --- components/topbar-override.css --- */
@layer overrides {
/*
 * components/topbar-override.css — Plan 119-W (extracted from Plan 119-Q-B).
 *
 * Override de la top bar legacy (.lp-top, .lp-brand, .lp-top__nav, .lp-top__cta)
 * pour cohérence palette refondue. À retirer quand .lp-top sera refait en v119-top.
 */

.landing--sota .lp-top {
  background: rgba(26, 22, 18, 0.85) !important;
  border-bottom: 1px solid rgba(154, 125, 74, 0.16) !important;
  backdrop-filter: blur(12px);
}

.landing--sota .lp-brand {
  font-family: var(--v119-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--v119-ink) !important;
}

.landing--sota .lp-top__nav a {
  color: var(--v119-ink-muted) !important;
  font-family: var(--v119-font-body);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: color var(--v119-phi-1) var(--v119-ease-out);
}

.landing--sota .lp-top__nav a:hover {
  color: var(--v119-gold-thread) !important;
}

.landing--sota .lp-link {
  color: var(--v119-ink-muted) !important;
  font-family: var(--v119-font-body);
  font-weight: 300;
}

.landing--sota .lp-link:hover {
  color: var(--v119-gold-thread) !important;
}

/* CTA top bar — secondaire (pas la signature terracotta réservée à #contact) */
.landing--sota .lp-top__cta .lp-btn--primary {
  background: transparent !important;
  color: var(--v119-gold-thread) !important;
  border: 1px solid var(--v119-gold-deep) !important;
  box-shadow: none !important;
  font-family: var(--v119-font-body);
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: all var(--v119-phi-2) var(--v119-ease-out);
}

.landing--sota .lp-top__cta .lp-btn--primary:hover {
  background: rgba(200, 168, 104, 0.08) !important;
  border-color: var(--v119-gold-thread) !important;
}

}

/* --- components/footer-override.css --- */
@layer overrides {
/*
 * components/footer-override.css — Plan 119-W (extracted from Plan 119-Q-E).
 *
 * Override sobriété pour .lp-footer legacy (utilise les tokens v119-*).
 * À retirer quand le footer sera refait en .v119-footer.
 */

.landing--sota .lp-footer {
  background: var(--v119-bg-secondary) !important;
  border-top: 1px solid rgba(154, 125, 74, 0.18) !important;
  padding: 64px 24px 48px !important;
}

.landing--sota .lp-footer * {
  font-family: var(--v119-font-body);
  font-weight: 300;
  color: var(--v119-ink-muted);
}

.landing--sota .lp-footer a:hover { color: var(--v119-gold-thread); }

}