/* Cinématique « six contraintes » — feuille EXTRAITE de index_v8.html (règles dont le sélecteur porte
   cine / cstr6 / c6- / contrainte / #approche), reprise telle quelle pour que le module js/v9/scenes.js
   (copie du module v8) retrouve exactement la mise en page qu'il a été réglé sur. Les variables qu'elle lit
   (--bg-0, --acc, --font-*, --tx-*) sont redéfinies sur #approche dans index.html : la bande reste sombre
   dans une page claire. Généré le 2026-09-09 par un extracteur (docs/site-v9-20260909/BRIEF.md). */
:root:not(.v-old) .hero-h1, :root:not(.v-old) .section-h2, :root:not(.v-old) .cta-final-h,
    :root:not(.v-old) .cine-wordmark, :root:not(.v-old) .interlude-num,
    :root:not(.v-old) .contact-panel-title {font-stretch: 106%; font-weight: 600; letter-spacing: -0.03em;}
:root:not(.v-old) .cine-wordmark {font-stretch: 118%;}
:root:not(.v-old) .nav-links a, :root:not(.v-old) .nav-name-sub, :root:not(.v-old) .lang-pick,
    :root:not(.v-old) .hero-note, :root:not(.v-old) .cta-final-note,
    :root:not(.v-old) .price-name, :root:not(.v-old) .dur-btn, :root:not(.v-old) .price-card .price-badge,
    :root:not(.v-old) .price-savings, :root:not(.v-old) .price-amount .from, :root:not(.v-old) .price-trust,
    :root:not(.v-old) .price-tva, :root:not(.v-old) .faq-toggle, :root:not(.v-old) .footer-col h4,
    :root:not(.v-old) .footer-bottom, :root:not(.v-old) .footer-stamp, :root:not(.v-old) .footer-credit,
    :root:not(.v-old) .contact-field label, :root:not(.v-old) .contact-email-fallback,
    :root:not(.v-old) .roi-input-lbl, :root:not(.v-old) .roi-output-label,
    :root:not(.v-old) .specimen-overlay-tag, :root:not(.v-old) .founder-sig-meta, :root:not(.v-old) .cine-hint,
    :root:not(.v-old) .cstr6-card .c6-num, :root:not(.v-old) .c6-cap, :root:not(.v-old) .planche-mobile-hint,
    :root:not(.v-old) .approach-visual-caption, :root:not(.v-old) .pull-quote cite {font-family: var(--font-sans); letter-spacing: 0; text-transform: none;}
:root:not(.v-old) .hero-h1 em, :root:not(.v-old) .cta-final-h em, :root:not(.v-old) .cine-cap em {font-family: var(--font-sans); font-style: normal; font-weight: 600; color: var(--acc); font-variation-settings: normal;}
:root:not(.v-old) .hero-h1, :root:not(.v-old) .hl-inner, :root:not(.v-old) .cta-final-h, :root:not(.v-old) .founder-h2,
    :root:not(.v-old) .cine-cap, :root:not(.v-old) .specimen-overlay-tag, :root:not(.v-old) .cine-wordmark,
    :root:not(.v-old) .btn-primary, :root:not(.v-old) .btn-ghost, :root:not(.v-old) .nav-cta, :root:not(.v-old) .price-btn {text-transform: none;}
:root:not(.v-old) .contraintes-grid {margin-top: 40px;}
:root:not(.v-old) .contrainte-value {font-style: normal; font-family: var(--font-sans);}
.cine-stage.cine-beats {height: 560vh;}
@media (max-width: 700px) { .cine-stage.cine-beats {height: 720vh;} }
.cine-beats .cine-hint {font-family: var(--font-sans); letter-spacing: 0;}
.cine-beats .cine-wordmark {display: none;}
.cine-beats .cstr6-card {top: auto; bottom: 13vh; left: 5vw; right: auto; width: min(86vw, 400px); text-align: left; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 24px rgba(0,0,0,.55);}
.cine-beats .cstr6-card .c6-title {font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; color: #FBFBFB; margin: 0 0 12px; letter-spacing: -.01em;}
.cine-beats .cstr6-card .c6-row {display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; font-family: var(--font-sans); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.35; color: #EDEAE4; font-variant-numeric: tabular-nums;}
.cine-beats .cstr6-card .c6-row + .c6-row {margin-top: 6px;}
.cine-beats .cstr6-card .c6-lbl {color: rgba(245,242,236,.55);}
.cine-beats .cstr6-card .c6-meas {color: #FF7A1A; font-weight: 600; transition: opacity .12s linear;}
.cine-beats .cstr6-card .c6-ref {margin-top: 8px; padding-left: 88px; font-family: var(--font-sans); font-size: clamp(14px, 1.05vw, 16px); color: #D9705A; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .18s linear; min-height: 1.3em;}
.cine-beats .cstr6-card .c6-ok {margin-top: 8px; padding-left: 88px; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; color: #FF7A1A; opacity: 0;}
.cine-beats .cine-cap {bottom: 9vh; font-size: clamp(16px, 1.4vw, 21px); color: #E6E2DA; font-weight: 400;}
@media (max-width: 700px) { .cine-beats .cstr6-card {top: auto; bottom: 12vh; left: 5vw; transform: none; text-align: left; width: 90vw;} .cine-beats .cstr6-card .c6-row {grid-template-columns: 64px 1fr;} .cine-beats .cstr6-card .c6-ref, .cine-beats .cstr6-card .c6-ok {padding-left: 76px;} }
.cstr6-card .c6-ok {margin-top: 10px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; color: var(--acc); opacity: 0;}
.v-old .cine-stage {height: 820vh;}
.contraintes-grid {list-style: none;
      margin: 96px auto 0;
      max-width: 1280px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: 6px;
      overflow: hidden;}
@media (max-width: 900px) { .contraintes-grid {grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 600px) { .contraintes-grid {grid-template-columns: 1fr;} }
.contrainte {background: var(--bg-0);
      padding: 36px 32px 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: background .3s ease;
      position: relative;}
@media (hover: hover) { .contrainte:hover {background: var(--bg-1);} }
.contrainte-num {font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--acc);}
.contrainte-num::before {content: '— '; color: var(--tx-3);}
.contrainte-title {font-family: var(--font-sans);
      font-weight: 500;
      font-size: clamp(22px, 2vw, 26px);
      letter-spacing: -0.022em;
      line-height: 1.2;
      color: var(--tx-0);
      margin-top: 4px;}
.contrainte-value {font-family: var(--font-display);
      font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 80;
      font-style: italic;
      font-size: clamp(18px, 1.6vw, 22px);
      color: var(--acc);
      letter-spacing: -0.01em;
      margin-top: 2px;}
.contrainte-desc {font-size: 14px;
      line-height: 1.55;
      color: var(--tx-1);
      margin-top: 6px;}
.cine-stage {position: relative; height: 420vh;}
.cine-sticky {position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0a0a0d;}
.cine-canvas {position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease;}
.cine-canvas.is-ready {opacity: 1;}
@media (prefers-reduced-motion: reduce) { .cine-canvas {opacity: 1; transition: none;} }
.cine-loading {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: rgba(245,245,245,.45); transition: opacity .4s ease; pointer-events: none;}
.cine-loading.is-off {opacity: 0;}
@media (prefers-reduced-motion: reduce) { .cine-loading {display: none;} }
.cine-sticky::before, .cine-sticky::after {content: ''; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;}
.cine-sticky::before {top: 0; height: 22vh; background: linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-0) 18%, rgba(10,10,10,0) 100%);}
.cine-sticky::after {bottom: 0; height: 24vh; background: linear-gradient(to top, var(--bg-0) 0%, var(--bg-0) 8%, rgba(10,10,10,0) 100%);}
.cine-fade {position: absolute; inset: 0; background: #060608; opacity: 0; pointer-events: none; z-index: 3;}
.cine-overlay {position: absolute; inset: 0; pointer-events: none; z-index: 3;}
.cine-nature {position: absolute; top: 98px; left: 4vw; margin: 0; max-width: min(44vw, 430px);
      font-family: var(--font-mono); font-size: 12px; line-height: 1.55; letter-spacing: .03em;
      color: rgba(243,240,234,.60); text-shadow: 0 2px 18px rgba(0,0,0,.9);}
@media (max-width: 700px) { .cine-nature {top: 74px; left: 5vw; max-width: 80vw; font-size: 11px;} }
.cine-wordmark {position: absolute; top: 7vh; left: 50%;
      transform: translateX(-50%) translateY(26px);
      font-family: var(--font-display); font-weight: 600;
      font-size: clamp(54px, 13vw, 200px); line-height: .9; letter-spacing: .02em;
      color: #F5F5F5; opacity: 0; text-shadow: 0 6px 70px rgba(0,0,0,.65);}
.cine-wordmark span {display: inline-block; will-change: transform, opacity;}
.cine-cap {position: absolute; bottom: 11vh; left: 50%; transform: translateX(-50%);
      width: min(90vw, 780px); text-align: center; margin: 0;
      font-family: var(--font-sans); font-weight: 400;
      font-size: clamp(20px, 2.6vw, 34px); color: #EDEDED; opacity: 0;
      text-shadow: 0 2px 30px rgba(0,0,0,.7);}
.cine-cap em {font-family: var(--font-display); font-style: italic; color: #FF7A1A;}
.cine-lead {top: 11vh; bottom: auto; left: 50%; transform: translateX(-50%); width: min(88vw, 760px); text-align: center;}
.cine-lead p {margin: 0;}
.cine-lead-legend {margin-top: 10px !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: rgba(245,245,245,.72);}
.cine-dot {display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 8px 0 18px; vertical-align: 1px;}
.cine-dot-r {background: #c4472a; box-shadow: 0 0 8px rgba(196,71,42,.7);}
.cine-dot-k {background: #FF7A1A; box-shadow: 0 0 8px rgba(255,122,26,.7);}
.cine-beats .cine-lead {bottom: auto;}
@media (max-width: 700px) { .cine-lead, .cine-beats .cine-lead {top: 9vh; width: 92vw;} }
.cine-hint {position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%);
      font-family: var(--font-mono); font-size: 12px;
      letter-spacing: .12em; color: rgba(245,245,245,.55); opacity: 0;}
@media (max-width: 700px) { .cine-stage {height: 620vh;} .cine-cap, .cine-beats .cine-cap {font-size: 18px; bottom: 14vh;} .cine-beats .cine-lead {bottom: auto;} }
@media (prefers-reduced-motion: reduce) { .cine-stage {height: 100vh;} }
.cstr6-arrows {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;}
.cstr6-arrow {opacity: 0;}
.cstr6-arrow line, .cstr6-arrow polygon, .cstr6-arrow circle {filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.cstr6-card {position: absolute; top: 13vh; right: 5vw; width: min(84vw, 360px);
      opacity: 0; will-change: opacity, transform, filter; pointer-events: none; text-align: right;
      text-shadow: 0 1px 26px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);}
.cstr6-card .c6-num {font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; color: var(--acc);}
.cstr6-card .c6-title {font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.0; color: #FBFBFB; margin: 8px 0 7px;}
.cstr6-card .c6-value {font-family: var(--font-sans); font-size: clamp(16px, 1.7vw, 22px); color: var(--acc-2); letter-spacing: .01em;}
.cstr6-counter {position: absolute; bottom: 4.5vh; right: 5vw; font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; color: rgba(245,245,245,.62); text-shadow: 0 1px 10px rgba(0,0,0,.6);}
.cstr6-counter .c6-num {display: none;}
.cstr6-counter .c6-cap {letter-spacing: .18em;}
.cstr6-counter .c6-rail {display: inline-block; position: relative; width: 96px; height: 1px;
      background: rgba(245,245,245,.16); vertical-align: middle; margin-left: 14px;}
.cstr6-counter .c6-rail i {position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
      background: var(--acc); transform-origin: left center; transform: scaleX(0);}
.v-old .cstr6-counter .c6-num {display: inline;}
.v-old .cstr6-counter .c6-cap, .v-old .cstr6-counter .c6-rail {display: none;}
.cstr6-aria-live {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
@media (max-width: 700px) { .cstr6-card {top: 9vh; left: 50%; right: auto; transform: translateX(-50%); text-align: center; width: 90vw;} .cstr6-counter {right: 50%; transform: translateX(50%);} }
.cstr6-on .contraintes-grid {display: none;}