/* ============================================================
   helveticAI — SITE complet · scroll-driven (Apple / Vettvangur)
   5 langages visuels assemblés : Flux · Kinétique · Terminal ·
   Matrice · Compteur, reliés par des révélations au défilement.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --red:#E2231A; --red-hot:#FF3B30;
  --ink:#0B0B0C; --ink-2:#16161A;
  --paper:#F1ECE2; --paper-2:#E8E2D5; --white:#FFFFFF; --mut:#8A8A82;
  --font:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --ease-io:cubic-bezier(0.65,0,0.35,1);
  --maxw:1240px; --gut:48px;
}
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); }
.site { font-family: var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }

/* shield */
.shieldS { display:block; flex:none; }

/* ---------- shared atoms ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.sec { position: relative; padding: clamp(90px, 13vh, 168px) 0; }
/* eyebrow = grotesque caps (NOT mono — mono is reserved for machinery) */
.eyebrow { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; color: var(--mut); }
.eyebrow--red { color: var(--red); }
.dot-red { width: 7px; height: 7px; background: var(--red); display: inline-block; margin-right: 10px; vertical-align: middle; }
.kuse { color: var(--red); font-style: normal; }

.t-display { font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; margin: 0; text-wrap: balance; }
.t-h2 { font-size: clamp(34px,4.6vw,64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
.t-h3 { font-size: clamp(20px,1.8vw,26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.16; margin: 0; }
.t-lead { font-size: clamp(17px,1.5vw,21px); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; margin: 0; color: #44443c; text-wrap: pretty; }
.t-body { font-size: 16px; line-height: 1.6; color: #44443c; margin: 0; text-wrap: pretty; }
.mono { font-family: var(--mono); }

.rule { height: 1px; background: rgba(11,11,12,0.14); border: 0; }
.rule--red { height: 2px; background: var(--red); border: 0; }

a { text-decoration: none; color: inherit; }
.lnk { color: var(--red); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: gap 150ms var(--ease); }
.lnk:hover { gap: 12px; }
.lnk svg { width: 14px; height: 14px; }

.btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font); font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em; padding: 15px 24px; border: 1px solid currentColor; background: transparent; color: var(--ink);
  cursor: pointer; transition: all 160ms var(--ease); line-height: 1; white-space: nowrap; }
.btn svg { width: 15px; height: 15px; transition: transform 200ms var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-hot); border-color: var(--red-hot); transform: translateY(-2px); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--lite { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn--lite:hover { background: #fff; color: #000; }

/* shimmer (kept from Spotlight) */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after { content:""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); transform: translateX(-120%); animation: shim 3.4s var(--ease-io) infinite; }
@keyframes shim { 0%,42% { transform: translateX(-120%);} 100% { transform: translateX(120%);} }

/* ---------- scroll reveal (JS-driven inline opacity/transform; base = visible) ---------- */
.reveal, .reveal-l { opacity: 1; will-change: opacity, transform; }
.reveal-clip { }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 72px; display: flex; align-items: center;
  border-bottom: 2px solid var(--red); background: var(--nav-bg, rgba(241,236,226,0)); transition: background 300ms var(--ease), backdrop-filter 300ms; }
.nav.solid { background: rgba(241,236,226,0.96); }
.nav.solid.nav--white { background: rgba(255,255,255,0.96); }
.nav.solid.nav--paper { background: rgba(241,236,226,0.96); }
.nav.on-dark { background: rgba(11,11,12,0); }
.nav.on-dark.solid { background: rgba(11,11,12,0.92); }
.nav-in { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .nm { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.brand .nm .ai { color: var(--red); }
.nav.on-dark .brand .nm, .nav.on-dark .nav-links a { color: #EDEDE6; }
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: #44443c; position: relative; padding: 4px 0; }
.nav-links a::after { content:""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.scrollbar { position: fixed; top: 0; left: 0; height: 2px; background: var(--red); z-index: 101; width: var(--p,0%); }

/* ============================================================
   HERO (Flux)
   ============================================================ */
.hero { position: relative; min-height: 100vh; background: #0A0708; color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.hero-mesh { position: absolute; inset: -20%; filter: blur(34px) saturate(125%); }
.flux-b { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: 0; }
.fb1 { width: 46vw; height: 46vw; left: -6%; top: 6%; --dx: 9vw; --dy: 7vh; background: radial-gradient(circle, #E2231A 0%, transparent 62%); animation: bloom 11s var(--ease-io) 0s infinite; }
.fb2 { width: 40vw; height: 40vw; right: -6%; bottom: -10%; --dx: -8vw; --dy: -6vh; background: radial-gradient(circle, #7a0f0a 0%, transparent 62%); animation: bloom 14s var(--ease-io) 2.4s infinite; }
.fb3 { width: 34vw; height: 34vw; left: 40%; top: 22%; --dx: 6vw; --dy: -8vh; background: radial-gradient(circle, #ff6a3d 0%, transparent 60%); animation: bloom 9s var(--ease-io) 1.2s infinite; }
.fb4 { width: 28vw; height: 28vw; left: 60%; top: -8%; --dx: -5vw; --dy: 9vh; background: radial-gradient(circle, #E2231A 0%, transparent 60%); animation: bloom 13s var(--ease-io) 4.5s infinite; }
.fb5 { width: 30vw; height: 30vw; left: 12%; bottom: -12%; --dx: 7vw; --dy: -5vh; background: radial-gradient(circle, #ff8a3d 0%, transparent 60%); animation: bloom 16s var(--ease-io) 6.5s infinite; }
@keyframes bloom { 0%{transform:translate(0,0) scale(0.35);opacity:0} 35%{opacity:0.92} 70%{opacity:0.5} 100%{transform:translate(var(--dx,6vw),var(--dy,-4vh)) scale(1.55);opacity:0} }
.hero-grain { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); animation: grainShift .4s steps(3) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)} 33%{transform:translate(-4px,3px)} 66%{transform:translate(3px,-2px)} }
.hero-in { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(56px,9vh,110px); }
.hero h1 { font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; font-size: clamp(64px,11vw,200px); margin: 0; }
.hero .lead { font-size: clamp(17px,1.6vw,22px); max-width: 46ch; margin: 26px 0 34px; color: rgba(255,255,255,0.84); }
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-scroll .ln { width: 1px; height: 30px; background: rgba(255,255,255,0.4); position: relative; overflow: hidden; }
.hero-scroll .ln::after { content:""; position: absolute; inset: 0; background: var(--red); animation: scrolldown 1.8s var(--ease-io) infinite; }
@keyframes scrolldown { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }

/* ============================================================
   KINÉTIQUE BAND (scroll-driven drift)
   ============================================================ */
.kband { background: var(--paper); color: var(--ink); padding: clamp(70px,10vh,120px) 0; overflow: hidden; position: relative; }
.kband-rows { display: flex; flex-direction: column; gap: clamp(2px,1vh,10px); }
.krow { white-space: nowrap; font-weight: 800; letter-spacing: -0.04em; font-size: clamp(40px,8vw,128px); line-height: 0.96; will-change: transform; }
.krow span { padding-right: 0.3em; }
.krow.ghost { color: transparent; -webkit-text-stroke: 1.4px rgba(11,11,12,0.22); }
.krow.solid { color: var(--ink); }
.krow.red { color: var(--red); }
.kband-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; padding: 26px 40px; text-align: center; background: rgba(241,236,226,0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 24px 60px rgba(11,11,12,0.10); }
.kband-tag .t { font-size: clamp(18px,2vw,26px); font-weight: 600; letter-spacing: -0.02em; }

/* ============================================================
   APPROCHE
   ============================================================ */
.surf-paper { background: var(--paper); }
.surf-white { background: var(--white); }
.surf-ink { background: var(--ink); color: #EDEDE6; }
.surf-ink .t-lead, .surf-ink .t-body { color: rgba(237,237,230,0.66); }
.surf-ink .rule { background: rgba(255,255,255,0.16); }

.sec-head { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.sec-marker { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.sec-marker .no { font-family: var(--mono); font-size: 13px; color: var(--red); }
.sec-marker .lb { font-family: var(--font); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); }

.cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(11,11,12,0.12); border: 1px solid rgba(11,11,12,0.12); margin-top: 56px; }
.surf-ink .cards3 { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.14); }
.card { background: var(--paper); padding: 36px 32px; }
.surf-white .card { background: #fff; }
.surf-ink .card { background: var(--ink); }
.card .cn { font-family: var(--mono); font-size: 12px; color: var(--red); letter-spacing: 0.08em; }
.card h3 { margin: 18px 0 12px; }
.card p { font-size: 15px; line-height: 1.55; color: #44443c; margin: 0; }
.surf-ink .card p { color: rgba(237,237,230,0.64); }

/* ============================================================
   MÉTHODE (Terminal)
   ============================================================ */
.method { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; margin-top: 56px; }
.steps { list-style: none; margin: 28px 0 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.steps li:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.steps .sn { font-family: var(--mono); font-size: 13px; color: var(--red); }
.steps .st { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #EDEDE6; }
.steps .sb { font-size: 14px; color: rgba(237,237,230,0.6); margin-top: 4px; line-height: 1.5; }

.term { background: #0e1116; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.term-bar .tl { width: 11px; height: 11px; border-radius: 50%; }
.term-bar .t-title { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: #6b7280; }
.term-body { padding: 22px 24px; font-family: var(--mono); font-size: 13.5px; line-height: 1.85; min-height: 330px; }
.term-body .pr { color: var(--red); } .term-body .di { color: #5f6b7a; } .term-body .ok { color: #4ec77f; } .term-body .wh { color: #D7E0D8; } .term-body .hl { color: #fff; font-weight: 600; }
.caret { display: inline-block; width: 9px; height: 1.05em; background: var(--red); vertical-align: -2px; margin-left: 3px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-progress { height: 6px; background: rgba(255,255,255,0.08); margin: 6px 0; overflow: hidden; }
.term-progress i { display: block; height: 100%; background: var(--red); animation: fillbar 1.6s var(--ease) forwards; }
@keyframes fillbar { from { width: 0;} to { width: 100%;} }

/* ============================================================
   MATRICE (interactive)
   ============================================================ */
.matrix { position: relative; min-height: 92vh; background: #060608; color: #EDEDE6; display: flex; align-items: center; overflow: hidden; }
.matrix-canvas { position: absolute; inset: 0; display: block; }
.matrix-in { position: relative; z-index: 3; width: 100%; text-align: center; pointer-events: none; }
.matrix-in h2 { font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; font-size: clamp(40px,6vw,98px); margin: 14px 0 0; }
.matrix-in .lead { color: rgba(237,237,230,0.66); font-size: clamp(16px,1.5vw,20px); margin: 24px auto 0; max-width: 46ch; }
.uses { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); margin-top: 52px; pointer-events: auto; }
.use { background: #060608; padding: 30px 26px; text-align: left; }
.use .uk { font-family: var(--mono); font-size: 12px; color: var(--red); }
.use h4 { margin: 14px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.use p { font-size: 14px; color: rgba(237,237,230,0.6); margin: 0; line-height: 1.5; }
.use .um { font-family: var(--mono); font-size: 11px; color: rgba(237,237,230,0.4); margin-top: 14px; }
.matrix-hint { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #55554e; z-index: 4; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-row { display: grid; grid-template-columns: 70px 1.1fr 1.5fr 130px; gap: 24px; align-items: baseline; padding: 30px 0; border-top: 1px solid rgba(11,11,12,0.14); transition: padding-left 200ms var(--ease); }
.svc-list .svc-row:last-child { border-bottom: 1px solid rgba(11,11,12,0.14); }
.svc-row:hover { padding-left: 12px; }
.svc-row .sk { font-family: var(--mono); font-size: 13px; color: var(--red); }
.svc-row .st { font-size: clamp(20px,2vw,28px); font-weight: 600; letter-spacing: -0.02em; }
.svc-row .sd { font-size: 15px; color: #44443c; line-height: 1.5; }
.svc-row .sm { font-family: var(--mono); font-size: 12px; color: var(--mut); text-align: right; }

/* ============================================================
   COMPTEUR (preuves)
   ============================================================ */
.cnt-grid { display: grid; grid-template-columns: repeat(4,1fr); align-items: end; gap: clamp(18px,2vw,40px); margin-top: 64px; }
.cnt-num { font-weight: 700; letter-spacing: -0.04em; line-height: 0.86; display: flex; align-items: baseline; color: #F1ECE2; }
.cnt-num .suf { font-size: 0.32em; font-weight: 600; margin-left: 8px; color: var(--red); letter-spacing: 0; }
.cnt-lab { font-family: var(--font); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a82; margin-top: 16px; max-width: 22ch; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16); }

/* ============================================================
   RÉFÉRENCES
   ============================================================ */
.logos { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: rgba(11,11,12,0.12); border: 1px solid rgba(11,11,12,0.12); margin-top: 48px; }
.logo-ph { background: var(--paper); height: 104px; display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, rgba(11,11,12,0.05) 0 7px, transparent 7px 15px); }
.surf-white .logo-ph { background-color: #fff; }
.logo-ph span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); text-align: center; }
.quote { display: grid; grid-template-columns: 56px 1fr; gap: 24px; margin-top: 60px; max-width: 920px; }
.quote .qm { font-size: 64px; line-height: 0.7; color: var(--red); font-weight: 700; }
.quote p { font-size: clamp(22px,2.4vw,32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.quote .qa { font-family: var(--mono); font-size: 12px; color: var(--mut); margin-top: 18px; letter-spacing: 0.04em; }

/* ============================================================
   FONDATEUR
   ============================================================ */
.founder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.portrait { aspect-ratio: 4/5; border: 1px solid rgba(11,11,12,0.16); position: relative; display: flex; align-items: flex-end;
  background-image: repeating-linear-gradient(135deg, rgba(11,11,12,0.06) 0 8px, transparent 8px 16px); }
.portrait .cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); padding: 14px; }
.cred { display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid rgba(11,11,12,0.16); margin-top: 28px; }
.cred > div { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.cred .ck, .cred .cv { white-space: nowrap; }
.surf-ink .cred { border-color: rgba(255,255,255,0.2); }
.cred .ck { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.cred .cv { font-size: 13px; font-weight: 600; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
.field input, .field textarea { font-family: var(--font); font-size: 16px; color: var(--ink); padding: 14px; border: 1px solid rgba(11,11,12,0.18); background: #fff; transition: border-color 140ms var(--ease); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.form-note { font-family: var(--mono); font-size: 11px; color: var(--mut); line-height: 1.5; }
.sent { padding: 24px; border: 1px solid var(--red); display: flex; gap: 14px; align-items: center; }
.sent .dot { width: 9px; height: 9px; background: var(--red); flex: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--ink); color: #EDEDE6; border-top: 2px solid var(--red); padding: 64px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
.foot a { color: rgba(237,237,230,0.6); font-size: 14px; display: block; padding: 5px 0; }
.foot a:hover { color: #fff; }
.foot h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.foot-bottom { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--mono); font-size: 11px; color: rgba(237,237,230,0.5); }

/* ============================================================
   REFERENCE INTEGRATION — chantier / dossier presentation
   ============================================================ */

/* hero machinery: top meta row + index strip + ticker */
.hero-in { padding-bottom: clamp(80px, 12vh, 140px); }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.hero-tag { display: inline-flex; align-items: center; color: #fff; }
.hero-tag .dot-red { margin-right: 10px; }
.hero-meta { text-align: right; line-height: 1.55; color: rgba(255,255,255,0.5); }
.hero-index { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.18); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.hero-index .r { text-align: right; }
.hero-scroll { bottom: 64px; }
.hero-ticker { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.12); overflow: hidden; z-index: 4; }
.ticker-track { display: inline-flex; white-space: nowrap; animation: ticker 46s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-grp { display: inline-flex; }
.ticker-i { display: inline-flex; align-items: center; padding: 12px 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241,236,226,0.82); }
.ticker-dot { color: var(--red); margin: 0 30px; }

/* terminal screen (screen 2) */
.termscreen { position: relative; background: #070708; color: #fff; padding: clamp(80px,12vh,150px) 0; border-top: 1px solid rgba(255,255,255,0.08); }
.termscreen-col { display: flex; flex-direction: column; align-items: center; }
.termscreen-eb { margin-bottom: 26px; }
.termscreen-eb .dot-red { margin-right: 10px; }
.term--big { width: min(960px, 100%); }
.termscreen-after { width: min(960px, 100%); margin-top: 40px; opacity: 0; transform: translateY(18px); pointer-events: none; }
.termscreen-after.show { opacity: 1; transform: none; pointer-events: auto; }
.term-body { white-space: pre; overflow-x: hidden; }
.term--big .term-body { font-size: clamp(11px, 1.04vw, 13.5px); min-height: 50vh; }
.term-scroll { max-height: 62vh; overflow-y: hidden; }
.term-body .box { color: #97b0c6; }

/* méthode — chantier timeline */
.chantier-rail { height: 2px; background: rgba(255,255,255,0.16); position: relative; }
.chantier-rail i { position: absolute; inset: 0 0 0 0; background: var(--red); width: 100%; }
.chantier-nodes { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: -7px; }
.cnode { width: 12px; height: 12px; background: var(--red); display: block; }
.cnode--end { justify-self: end; }
.chantier-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; margin-top: 30px; }
.cstep { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 18px; }
.cstep--last { border-top-color: var(--red); }
.cstep-w { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237,237,230,0.5); }
.cstep-t { font-family: var(--font); font-weight: 700; font-size: clamp(22px,2vw,32px); letter-spacing: -0.03em; line-height: 0.96; margin: 12px 0 0; color: #fff; }
.cstep-b { font-size: 14px; line-height: 1.55; color: rgba(237,237,230,0.66); margin: 12px 0 0; }
.cstep-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237,237,230,0.42); margin-top: 14px; }
.csheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(52px,7vh,96px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16); }
.csheet > div { display: flex; flex-direction: column; gap: 6px; }
.csheet .ck { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237,237,230,0.5); }
.csheet .cv { font-size: 14px; color: #fff; }
.csheet-end { text-align: right; align-items: flex-end; }

/* services — 4 disciplines, hover invert */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); border-left: 1px solid rgba(11,11,12,0.14); }
.svc { background: #fff; color: var(--ink); padding: clamp(28px,3vw,46px); border-right: 1px solid rgba(11,11,12,0.14); border-bottom: 1px solid rgba(11,11,12,0.14); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.svc:hover { background: var(--ink); color: var(--paper); }
.svc-top { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6E6A60; }
.svc:hover .svc-num { color: var(--red); }
.svc-h { font-family: var(--font); font-weight: 700; letter-spacing: -0.03em; line-height: 0.96; font-size: clamp(34px,3.4vw,52px); margin: 26px 0 0; }
.svc-b { font-size: 15px; line-height: 1.55; margin: 20px 0 0; max-width: 42ch; opacity: 0.86; }
.svc-li { list-style: none; margin: 26px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(11,11,12,0.18); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.svc:hover .svc-li { border-top-color: rgba(244,243,238,0.25); }
.svc-li li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(11,11,12,0.10); }
.svc:hover .svc-li li { border-bottom-color: rgba(244,243,238,0.14); }

/* FAQ accordion */
.faq-list { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid rgba(11,11,12,0.16); }
.faq-item.open { background: rgba(11,11,12,0.035); }
.faq-q { width: 100%; background: none; border: 0; cursor: pointer; display: flex; align-items: baseline; gap: clamp(16px,3vw,48px); padding: clamp(22px,3vh,34px) 8px; text-align: left; color: inherit; font-family: var(--font); }
.faq-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mut); }
.faq-item.open .faq-n { color: var(--red); }
.faq-qt { flex: 1; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(21px,2.6vw,40px); }
.faq-pm { font-size: 28px; font-weight: 300; line-height: 1; }
.faq-a { padding: 0 8px clamp(26px,3vh,36px); display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.faq-ak { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.faq-at { font-size: clamp(16px,1.5vw,19px); line-height: 1.55; max-width: 62ch; margin: 0; color: #3a3a34; }

/* contact — giant email + address card */
.surf-ink .cred .cv { color: #fff; }
.surf-ink .field label { color: rgba(237,237,230,0.55); }
.mailgiant { display: block; margin-top: 26px; font-family: var(--font); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; font-size: clamp(38px,7vw,104px); color: #fff; }
.mailgiant > span { display: block; white-space: nowrap; transition: color 0.25s var(--ease); }
.mailgiant:hover span { color: var(--red); }
.mailgiant-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 14px; color: rgba(237,237,230,0.6); }
.mailgiant-foot .mono { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.addr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(52px,7vh,96px); }
.addr > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.addr .ak { color: rgba(237,237,230,0.5); }
.addr .av { color: #fff; line-height: 1.55; }
.addr-end { text-align: right; align-items: flex-end; }

/* compteur animated bars */
.cnt-bars { display: flex; align-items: flex-end; gap: clamp(5px,0.8vw,10px); height: clamp(110px,16vh,190px); margin-top: clamp(40px,6vh,72px); }
.cnt-bars i { flex: 1; display: block; background: var(--red); opacity: 0.9; }
.cnt-bars i:nth-child(3n) { background: #F1ECE2; opacity: 0.85; }
.cnt-bars i:nth-child(4n) { opacity: 0.55; }

/* compteur — editorial stat rows with animated bars */
.stats { margin-top: clamp(48px,7vh,80px); border-top: 1px solid rgba(255,255,255,0.16); }
.statrow { display: grid; grid-template-columns: minmax(190px, 30%) 1fr; gap: clamp(24px,4vw,72px); align-items: center; padding: clamp(26px,4vh,46px) 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.statrow-n { font-family: var(--font); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(54px,7vw,116px); color: #F1ECE2; display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.statrow-n .suf { font-size: 0.3em; font-weight: 600; margin-left: 10px; color: var(--red); letter-spacing: 0; }
.statrow-l { font-family: var(--mono); font-size: clamp(12px,1.1vw,14px); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237,237,230,0.62); max-width: 34ch; }
.statrow-track { margin-top: 18px; height: 4px; background: rgba(255,255,255,0.14); position: relative; }
.statrow-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); transform-origin: left center; }

/* matrice — keep the headline legible over the finer dot field */
.matrix-in .eyebrow, .matrix-in h2, .matrix-in .lead { text-shadow: 0 2px 30px rgba(6,6,8,0.9), 0 0 10px rgba(6,6,8,0.7); }

@media (max-width: 880px) {
  .statrow { grid-template-columns: 1fr; gap: 12px; }
  .svc-grid, .chantier-grid, .csheet, .addr, .faq-a, .hero-index { grid-template-columns: 1fr; }
  .hero-index { display: none; }
  .chantier-nodes { display: none; }
  .csheet-end, .addr-end { text-align: left; align-items: flex-start; }
  .svc-grid { border-left: 0; }
}

@media (max-width: 880px) {
  .sec-head, .method, .matrix .uses, .founder, .contact { grid-template-columns: 1fr; gap: 32px; }
  .cards3, .uses { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 50px 1fr; }
  .svc-row .sd, .svc-row .sm { display: none; }
  .cnt-grid { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(2,1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}