/**
 * Thelis Homepage — Unified Design System
 * Syne + JetBrains Mono | Engineering Aesthetic | Warm Off-White
 *
 * NOTE: Google Fonts sont chargées via wp_enqueue_style() dans functions.php
 * (PAS via @import ici — les plugins de cache ignorent les @import dans les CSS combinés)
 */

/* =============================================
   DESIGN SYSTEM — CSS VARIABLES
   ============================================= */
:root {
    /* Colors — unified with Bridge Showcase */
    --thelis-red:       #E8294A;
    --thelis-red-dark:  #c91e38;
    --thelis-red-glow:  rgba(232, 41, 74, 0.28);
    --thelis-red-dim:   rgba(232, 41, 74, 0.06);

    /* Surfaces */
    --thelis-black:     #111118;
    --thelis-white:     #ffffff;
    --thelis-light:     #f7f5f1;   /* warm off-white — matches Bridge Showcase */
    --thelis-light-bg:  #f7f5f1;   /* backward-compat alias */

    /* Text */
    --thelis-text:      #111118;
    --thelis-gray:      rgba(17, 17, 24, 0.50);
    --thelis-border:    rgba(17, 17, 24, 0.08);

    /* Typography */
    --thelis-ff-display: 'Syne', sans-serif;
    --thelis-ff-mono:    'JetBrains Mono', monospace;
    /* Serif display — hero title + CTA only. Tall letterforms, never crushed */
    --thelis-ff-title:   'Cormorant Garamond', Georgia, serif;

    /* Animation — same easing as Bridge Showcase */
    --thelis-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --thelis-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --thelis-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   GLOBAL SCROLL PROGRESS BAR — toutes les pages
   Injecté via wp_footer (functions.php)
   ID : #thelis-progress
   ============================================= */
#thelis-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 3px;
    background: var(--thelis-red, #E8294A);
    z-index: 99999;
    transition: width 0.08s linear;
    pointer-events: none;
}

/* =============================================
   GLOBAL TYPOGRAPHY
   ============================================= */
.thelis-homepage h1,
.thelis-homepage h2,
.thelis-homepage h3,
.thelis-homepage h4,
.thelis-homepage h5 {
    font-family: var(--thelis-ff-display);
    color: var(--thelis-text);
}

.thelis-homepage {
    overflow-x: hidden;
    font-family: var(--thelis-ff-display);
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

section {
    padding: 120px 0;
}

section:nth-child(even) {
    background: var(--thelis-light);
}

/* =============================================
   SECTION ANATOMY — unified labels + titles
   ============================================= */

/* Eyebrow label — matches Bridge Showcase .bs-eyebrow */
/* Eyebrow label — dash — TEXT — dash — both sides */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--thelis-ff-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--thelis-red);
    margin-bottom: 24px;
}

.bs-subtitle {
    font-family: var(--bs-ff-mono);
    font-size: 13px;
    color: var(--bs-text-dim);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.9;
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease 0.78s, transform 0.8s var(--bs-ease-out) 0.78s;
}

.bs-section.is-visible .bs-subtitle {
    opacity: 1;
    transform: translateY(0);
}
.section-label::before,
.section-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--thelis-red);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Section titles */
.section-title {
    font-family: var(--thelis-ff-display);
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--thelis-text);
    line-height: 1.08;
    margin-bottom: 22px;
}

.section-intro {
    font-family: var(--thelis-ff-display);
    text-align: center;
    font-size: 17px;
    color: var(--thelis-gray);
    line-height: 1.75;
    max-width: 760px;
    margin: 0 auto;
}

.highlight {
    color: var(--thelis-red);
}

/* =============================================
   SCROLL ANIMATIONS — ONE unified spring reveal
   ============================================= */

/* Single animation pattern for the whole site */
.fade-in-up {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity   0.7s var(--thelis-ease-out) calc(var(--i, 0) * 80ms),
        transform 0.9s var(--thelis-spring)   calc(var(--i, 0) * 80ms);
}

.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-scale {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    transition:
        opacity   0.75s var(--thelis-ease-out) calc(var(--i, 0) * 80ms),
        transform 1s    var(--thelis-spring)   calc(var(--i, 0) * 80ms);
}

.fade-in-scale.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =============================================
   BUTTONS — Architectural mono style
   ============================================= */
.btn {
    display: inline-block;
    padding: 13px 28px;
    font-family: var(--thelis-ff-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition:
        background  0.25s ease,
        color       0.25s ease,
        border-color 0.25s ease,
        transform   0.4s var(--thelis-spring),
        box-shadow  0.25s ease;
}

.btn-primary {
    background: var(--thelis-red);
    color: white;
    border: 1.5px solid var(--thelis-red);
}

.btn-primary:hover {
    background: var(--thelis-red-dark);
    border-color: var(--thelis-red-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(232, 41, 74, 0.3);
    color: white;
}

.btn-secondary {
    background: transparent;
    color: var(--thelis-text);
    border: 1.5px solid rgba(17, 17, 24, 0.28);
}

.btn-secondary:hover {
    background: var(--thelis-text);
    border-color: var(--thelis-text);
    color: white;
    transform: translateY(-3px);
}

.btn-large {
    padding: 16px 36px;
    font-size: 11px;
    letter-spacing: 3.5px;
}

/* =============================================
   HERO SECTION — Dark cinematic, full-bleed
   ============================================= */
.hero-section {
    height: 100vh;
    min-height: 560px; /* plancher absolu */
    display: flex;
    flex-direction: column;
    background: var(--thelis-black);
    position: relative;
    overflow: hidden;
}

/* Engineering dot grid — dark version (subtle red dots on dark) */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(232, 41, 74, 0.055) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 1;
}

/* Red accent bar — top edge */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    width: 55%;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
    z-index: 10;
}

/* ── Full-bleed background ─────────────────────────────── */
.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left 40%;
    filter: brightness(0.45) saturate(0.55);
    transform: scale(1.06);
    transition: transform 14s ease-out;
    will-change: transform;
    display: block;
}

/* Ken Burns déclenché par JS au load */
.hero-bg-img.is-loaded {
    transform: scale(1.0);
}

/* Dégradé multi-couche : vignette + teinte rouge subtile en bas */
.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 60% at 65% 45%,
            rgba(232, 41, 74, 0.04) 0%,
            transparent 70%
        ),
        linear-gradient(
            180deg,
            rgba(17, 17, 24, 0.12) 0%,
            rgba(17, 17, 24, 0.00) 30%,
            rgba(17, 17, 24, 0.32) 100%
        );
    pointer-events: none;
}

/* ── Main content — centré verticalement ───────────────── */
.hero-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    /* vh-proportional : couvre la navbar + respiration */
    padding: clamp(72px, 10vh, 110px) 48px clamp(120px, 17vh, 162px);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.hero-content {
    max-width: 800px;
}

.hero-title {
    font-family: var(--thelis-ff-title);
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 600;
    color: var(--thelis-white) !important;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-bottom: clamp(14px, 1.8vh, 24px);
}

.hero-tagline {
    font-family: var(--thelis-ff-display);
    font-size: clamp(16px, 1.8vh, 19px);
    color: rgba(255, 255, 255, 0.68) !important;
    line-height: 1.7;
    margin-bottom: clamp(18px, 2.5vh, 32px);
    font-weight: 400;
}

.hero-tagline strong {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: clamp(20px, 2.8vh, 36px);
}

/* Badges — sur fond sombre : fond semi-opaque, texte blanc, accent rouge */
.badge {
    padding: 7px 15px;
    background: rgba(17, 17, 24, 0.45);
    border: 1px solid rgba(232, 41, 74, 0.45);
    border-radius: 2px;
    font-family: var(--thelis-ff-mono);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.90) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.badge:hover {
    border-color: var(--thelis-red);
    background: rgba(232, 41, 74, 0.12);
    color: var(--thelis-white) !important;
}

.hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Secondary CTA — adapté au fond sombre */
.btn-secondary--dark {
    color: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.btn-secondary--dark:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: var(--thelis-white) !important;
}

/* ── Journey strip : Idea → Engineering → Reality ───────── */
.hero-journey {
    display: flex;
    height: clamp(105px, 15vh, 145px);
    position: absolute; /* ancré au bas du hero, bulletproof */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-journey-item {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.hero-journey-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.48) saturate(0.65);
    transform: scale(1);
    transition: filter 0.7s var(--thelis-ease-out), transform 0.9s var(--thelis-ease-out);
    display: block;
}

/* object-position par image — déclarées APRÈS la règle de base pour l'emporter */
.hero-journey-item--idea img    { object-position: center 22%; }
.hero-journey-item--eng img     { object-position: center 45%; }
.hero-journey-item--reality img { object-position: center center; }

.hero-journey-item:hover img {
    filter: brightness(0.82) saturate(0.88);
    transform: scale(1.07);
}

/* Vignette : dégradé bas + assombrissement central pour lisibilité du titre */
.hero-journey-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 85% 75% at 50% 50%, rgba(17, 17, 24, 0.42) 0%, transparent 70%),
        linear-gradient(0deg, rgba(17, 17, 24, 0.85) 0%, rgba(17, 17, 24, 0.10) 50%, transparent 100%);
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 1;
}

.hero-journey-item:hover .hero-journey-veil {
    opacity: 0.5;
}

/* Méta : titre centré grand — se rétracte au hover */
.hero-journey-meta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    transition: transform 0.65s var(--thelis-ease-out), opacity 0.65s ease;
    will-change: transform, opacity;
    pointer-events: none;
}

.hero-journey-item:hover .hero-journey-meta {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0.25;
}

.hero-journey-step {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--thelis-red) !important;
    line-height: 1;
}

.hero-journey-label {
    font-family: var(--thelis-ff-display);
    font-size: clamp(16px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1;
}

/* Ligne rouge sur le premier item (Idea) */
.hero-journey-item--idea::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--thelis-red) 0%, rgba(232, 41, 74, 0.40) 100%);
    z-index: 3;
}

/* Ligne rouge sur le dernier item (Reality) */
.hero-journey-item--reality::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(232, 41, 74, 0.40) 0%, var(--thelis-red) 100%);
    z-index: 3;
}

/* Flèche → séparateur entre items — signe de progression */
@keyframes heroArrowPulse {
    0%, 100% { transform: translateX(0);   opacity: 1; }
    50%       { transform: translateX(5px); opacity: 0.6; }
}

.hero-journey-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 58px;
    flex-shrink: 0;
    background: rgba(17, 17, 24, 0.82);
    position: relative;
    z-index: 2;
    border-left:  1px solid rgba(232, 41, 74, 0.22);
    border-right: 1px solid rgba(232, 41, 74, 0.22);
}

/* Trait horizontal au-dessus de la flèche */
.hero-journey-arrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: rgba(232, 41, 74, 0.65);
}

/* Symbole flèche animé */
.hero-journey-arrow::after {
    content: '→';
    font-family: var(--thelis-ff-mono);
    font-size: 22px;
    color: var(--thelis-red);
    animation: heroArrowPulse 2.2s ease-in-out infinite;
}

/* =============================================
   PROBLEM SECTION
   ============================================= */
/* =============================================
   THE PROBLEM SECTION
   ============================================= */
.problem-section {
    background: var(--thelis-white);
    position: relative;
    overflow: hidden;
}

/* Dot grid texture */
.problem-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(17,17,24,0.045) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Red sweep bar at top */
.problem-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
}

/* ---- Header ---- */
.problem-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

/* Animated red divider — draws left→right when header becomes visible */
.prob-divider {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--thelis-red), rgba(232, 41, 74, 0.15));
    margin: 28px auto 28px;
    transform-origin: left center;
    transform: scaleX(0);
}

/* Triggered when parent .problem-header gets .animated by IntersectionObserver */
.problem-header.animated .prob-divider {
    animation: probDrawLine 0.9s var(--thelis-ease-out) 0.45s forwards;
}

@keyframes probDrawLine {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---- Cards ---- */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}

.problem-card {
    background: var(--thelis-light);
    padding: 40px 36px 32px;
    border-radius: 4px;
    text-align: left;
    border-top: 2px solid transparent;
    transition:
        border-color 0.25s ease,
        transform    0.45s var(--thelis-spring),
        box-shadow   0.25s ease;
}

.problem-card:hover {
    border-top-color: var(--thelis-red);
    transform: translateY(-6px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.07);
}

.problem-card h3 {
    font-family: var(--thelis-ff-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--thelis-text);
    margin-bottom: 12px;
}

.problem-card p {
    font-family: var(--thelis-ff-display);
    font-size: 14px;
    font-weight: 300;
    color: var(--thelis-gray);
    line-height: 1.75;
    margin-bottom: 20px;
}

/* Consequence tag — mono text separator at card bottom */
.prob-tag {
    display: block;
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thelis-gray);
    border-top: 1px solid var(--thelis-border);
    padding-top: 16px;
}

/* ---- Conclusion ---- */
.problem-conclusion {
    text-align: center;
    padding: 32px 48px;
    background: var(--thelis-red-dim);
    border-left: 3px solid var(--thelis-red);
    border-radius: 2px;
    position: relative;
    z-index: 1;
}

.emphasis {
    font-family: var(--thelis-ff-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--thelis-text);
}

/* =============================================
   ENGINEERING GAP SECTION
   ============================================= */
.engineering-gap-section {
    background: var(--thelis-light);
    padding-top: 0; /* vide géré par .bs-header ci-dessous */
}

/* Le bs-header ajoute son propre padding — 100px → 40px pour supprimer le vide excessif */
.bs-section .bs-header {
    padding-top: 40px;
}

.gap-header {
    text-align: center;
    margin-bottom: 72px;
}

.gap-visual {
    margin-bottom: 60px;
}

.gap-diagram {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 40px;
    align-items: center;
}

.gap-side h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

.gap-side ul {
    list-style: none;
    padding: 0;
}

.gap-side li {
    padding: 9px 0;
    font-size: 15px;
    color: var(--thelis-gray);
    border-bottom: 1px solid var(--thelis-border);
}

.gap-side li:first-child {
    border-top: 1px solid var(--thelis-border);
}

.gap-bridge {
    text-align: center;
}

.gap-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.gap-pillar {
    background: var(--thelis-red);
    color: white;
    padding: 16px 10px;
    border-radius: 2px;
    font-family: var(--thelis-ff-mono);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gap-label {
    font-family: var(--thelis-ff-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--thelis-red);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.gap-conclusion {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.gap-conclusion p {
    font-size: 17px;
    color: var(--thelis-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

/* =============================================
   INNOVATION MODEL SECTION — ENGINEERING FLOW DIAGRAM
   ============================================= */
.innovation-model-section {
    background: var(--thelis-white);
    position: relative;
    overflow: hidden;
}

/* Dot grid texture */
.innovation-model-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(17,17,24,0.045) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Red sweep bar at top */
.innovation-model-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
}

/* ---- Section header ---- */
.im-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.im-intro {
    font-family: var(--thelis-ff-display);
    font-size: 16px;
    font-weight: 300;
    color: var(--thelis-gray);
    max-width: 640px;
    margin: 16px auto 0;
    line-height: 1.75;
}

/* ---- Flow container ---- */
.im-flow {
    position: relative;
    z-index: 1;
    margin-bottom: 64px;
}

/* ---- Nodes row ---- */
/* 7-column grid: [node 1fr] [conn var] [node 1fr] [conn var] [node 1fr] [conn var] [node 1fr] */
/* --im-conn-w must equal .im-cards column-gap for pixel-perfect vertical alignment */
.im-nodes-row {
    --im-conn-w: 64px;
    display: grid;
    grid-template-columns: 1fr var(--im-conn-w) 1fr var(--im-conn-w) 1fr var(--im-conn-w) 1fr;
    align-items: start;
}

/* Node column: circle + vertical line, stacked */
.im-node-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Node wrapper */
.im-node {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Pulse ring */
.im-node-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 41, 74, 0.22);
    animation: imRingPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes imRingPulse {
    0%, 100% { transform: scale(1);   opacity: 0.55; }
    50%       { transform: scale(1.6); opacity: 0;    }
}

/* Red filled circle */
.im-node-core {
    width: 56px;
    height: 56px;
    background: var(--thelis-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--thelis-ff-mono);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 24px var(--thelis-red-glow);
    position: relative;
    z-index: 1;
    transition:
        transform  0.35s var(--thelis-spring),
        box-shadow 0.25s ease;
}

.im-node-col:hover .im-node-core {
    transform: scale(1.12);
    box-shadow: 0 14px 36px rgba(232, 41, 74, 0.45);
}

/* Vertical line from node down to card */
.im-v-line {
    width: 2px;
    height: 32px;
    background: linear-gradient(
        180deg,
        var(--thelis-red) 0%,
        rgba(232, 41, 74, 0.08) 100%
    );
    flex-shrink: 0;
}

/* ---- Connector column (between nodes) ---- */
.im-conn {
    position: relative;
    height: 88px; /* node(56) + v-line(32) */
}

/* Horizontal connector line */
.im-conn::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 28px; /* vertically centers on the 56px node */
    height: 1px;
    background: rgba(17, 17, 24, 0.10);
}

/* Animated flow particle traveling left → right */
.im-conn::after {
    content: '';
    position: absolute;
    left: -28px;
    top: 27px;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--thelis-red) 50%, transparent);
    animation: imFlowPulse 2.2s ease-in-out infinite;
    animation-delay: var(--cd, 0s);
}

@keyframes imFlowPulse {
    0%   { left: -28px;              opacity: 0; }
    12%  {                            opacity: 1; }
    88%  {                            opacity: 1; }
    100% { left: calc(100% + 4px);   opacity: 0; }
}

/* Chevron arrow (›) punched over the connector line */
.im-chevron {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--thelis-ff-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--thelis-red);
    background: var(--thelis-white); /* cuts through the line */
    padding: 1px 6px;
    line-height: 1;
    z-index: 2;
    letter-spacing: 0;
}

/* ---- Phase cards ---- */
/* column-gap MUST equal --im-conn-w so cards align under their nodes */
.im-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 64px;
    row-gap: 0;
}

.im-card {
    background: var(--thelis-white);
    border: 1px solid var(--thelis-border);
    border-top: 2px solid transparent;
    border-radius: 4px;
    padding: 32px 28px 28px;
    position: relative;
    overflow: hidden;
    transition:
        border-top-color 0.3s ease,
        transform        0.45s var(--thelis-spring),
        box-shadow       0.25s ease;
}

.im-card:hover {
    border-top-color: var(--thelis-red);
    transform: translateY(-6px);
    box-shadow: 0 20px 56px rgba(17, 17, 24, 0.10);
}

/* Ghost number — large, faint, behind content */
.im-ghost {
    position: absolute;
    bottom: -8px;
    right: 12px;
    font-family: var(--thelis-ff-mono);
    font-size: 72px;
    font-weight: 700;
    color: rgba(17, 17, 24, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transition: color 0.3s ease;
}

.im-card:hover .im-ghost {
    color: rgba(232, 41, 74, 0.07);
}

/* Eyebrow (Phase 0X) */
.im-eyebrow {
    display: block;
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--thelis-red);
    margin-bottom: 14px;
}

/* Card title */
.im-card-title {
    font-family: var(--thelis-ff-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--thelis-text);
    line-height: 1.1;
    margin-bottom: 14px;
}

/* Card description */
.im-card-desc {
    font-family: var(--thelis-ff-display);
    font-size: 14px;
    font-weight: 300;
    color: var(--thelis-gray);
    line-height: 1.75;
    margin-bottom: 20px;
}

/* Tag chips */
.im-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.im-tags span {
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thelis-gray);
    background: var(--thelis-light);
    border: 1px solid var(--thelis-border);
    border-radius: 2px;
    padding: 4px 10px;
}

/* ---- Bottom principle block ---- */
.model-principle {
    padding: 32px 48px;
    border-left: 3px solid var(--thelis-red);
    background: var(--thelis-red-dim);
    border-radius: 2px;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.model-principle p {
    font-family: var(--thelis-ff-display);
    font-size: 18px;
    font-weight: 300;
    color: rgba(17, 17, 24, 0.60);
    font-style: italic;
    line-height: 1.65;
    text-align: center;
    margin: 0;
}

.model-principle strong {
    font-weight: 600;
    color: var(--thelis-text);
    font-style: normal;
}

/* =============================================
   HOW WE WORK SECTION
   ============================================= */
.how-we-work-section {
    background: var(--thelis-light);
    position: relative;
}

/* Red sweep bar at top */
.how-we-work-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
}

/* Dot grid background */
.how-we-work-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(17,17,24,0.045) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* ---- Header ---- */
.hww-header {
    text-align: center;
    margin-bottom: 80px;
}

/* ---- 3-column diagram grid ---- */
.hww-diagram {
    display: grid;
    grid-template-columns: 190px 1fr 190px;
    gap: 48px;
    align-items: center;
    max-width: 1020px;
    margin: 0 auto 80px;
}

/* ---- Side label columns ---- */
.hww-side {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-self: stretch;
    gap: 0;
    padding: 24px 0;
}

.hww-side--left  { align-items: flex-end; }
.hww-side--right { align-items: flex-start; }

/* ---- Individual labels ---- */
.hww-label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hww-side--left  .hww-label { align-items: flex-end; text-align: right; }
.hww-side--right .hww-label { align-items: flex-start; text-align: left; }

.hww-label h4 {
    font-family: var(--thelis-ff-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--thelis-text);
    margin: 0;
    line-height: 1.3;
}

.hww-label p {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thelis-gray);
    margin: 0;
}

/* ---- Pulsing dot ---- */
.hww-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--thelis-red);
    flex-shrink: 0;
    animation: hwwDotPulse 2.8s ease-in-out infinite;
}

@keyframes hwwDotPulse {
    0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0   rgba(232,41,74,0.45); }
    50%       { transform: scale(1.4); opacity: 0.8; box-shadow: 0 0 0 5px rgba(232,41,74,0);    }
}

/* ---- SVG wrapper ---- */
.hww-svg-wrap {
    /* center block */
}

.hww-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* ---- SVG paths ---- */

/* Static hairline track */
.hww-track {
    stroke: rgba(17,17,24,0.10);
    stroke-width: 1.5;
}

/* Blurred glow — trails the particle */
.hww-glow {
    stroke: var(--thelis-red);
    stroke-width: 9;
    opacity: 0.15;
    stroke-dasharray: 22 78;
    animation: hwwFlow 4s linear infinite -0.3s;
}

/* Primary sharp particle */
.hww-particle {
    stroke: var(--thelis-red);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 8 92;
    animation: hwwFlow 4s linear infinite;
}

/* Echo particle — softer, offset by half loop */
.hww-particle-echo {
    stroke: var(--thelis-red);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 8 92;
    opacity: 0.35;
    animation: hwwFlow 4s linear infinite -2s;
}

@keyframes hwwFlow {
    from { stroke-dashoffset: 0;    }
    to   { stroke-dashoffset: -100; }
}

/* Center pulsing ring */
.hww-center-ring {
    stroke: var(--thelis-red);
    stroke-width: 1;
    opacity: 0.5;
    transform-origin: 250px 100px;
    animation: hwwRingPulse 2.8s ease-in-out infinite;
}

@keyframes hwwRingPulse {
    0%, 100% { transform: scale(1);   opacity: 0.55; }
    50%       { transform: scale(2.2); opacity: 0;    }
}

/* Center solid dot */
.hww-center-dot {
    opacity: 0.9;
    animation: hwwDotCenterPulse 2.8s ease-in-out infinite;
    transform-origin: 250px 100px;
}

@keyframes hwwDotCenterPulse {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%       { transform: scale(1.25); opacity: 0.6; }
}

/* ---- Conclusion block ---- */
.work-principle {
    background: rgba(232,41,74,0.04);
    border-left: 3px solid var(--thelis-red);
    border-radius: 2px;
    padding: 32px 48px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.work-principle p {
    font-family: var(--thelis-ff-display);
    font-size: 18px;
    color: rgba(17,17,24,0.60);
    font-style: italic;
    line-height: 1.65;
    margin: 0;
}

.work-principle strong {
    font-weight: 600;
    color: var(--thelis-text);
    font-style: normal;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hww-diagram {
        grid-template-columns: 160px 1fr 160px;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .hww-diagram {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 480px;
    }

    /* SVG appears first on mobile */
    .hww-svg-wrap   { order: -1; }
    .hww-side--left { order: 0; flex-direction: row; justify-content: space-around; align-items: flex-start; padding: 0; }
    .hww-side--right { order: 1; flex-direction: row; justify-content: space-around; align-items: flex-start; padding: 0; }

    .hww-side--left  .hww-label,
    .hww-side--right .hww-label { align-items: center; text-align: center; }
}

@media (max-width: 480px) {
    .hww-side--left,
    .hww-side--right { flex-direction: column; gap: 28px; align-items: center; }

    .work-principle { padding: 28px 28px; }
    .work-principle p { font-size: 16px; }
}

/* =============================================
   WHAT WE BUILD SECTION — v5 (cinematic dark)
   ============================================= */
.what-we-build-section {
    background-color: #111118;
    position: relative;
    padding: 120px 0 96px;
    overflow: hidden;
}

/* Red top bar */
.what-we-build-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
    z-index: 10;
}

/* Red dot grid — texture sombre */
.what-we-build-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(232,41,74,0.05) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    z-index: 1;
    pointer-events: none;
}

/* ── Full-bleed background image ─────────────────────────────── */
.wwb-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.wwb-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    filter: grayscale(0.20) brightness(0.52) contrast(1.10);
    transform: scale(1.05);
    animation: wwbKenBurns 18s ease-out forwards;
}

@keyframes wwbKenBurns {
    from { transform: scale(1.05); }
    to   { transform: scale(1.00); }
}

.wwb-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(14, 14, 20, 0.74) 0%,
        rgba(14, 14, 20, 0.58) 40%,
        rgba(14, 14, 20, 0.68) 100%
    );
}

/* ── Container above bg ───────────────────────────────────────── */
.what-we-build-section .container {
    position: relative;
    z-index: 2;
}

/* ── Centered header ─────────────────────────────────────────── */
.wwb-header {
    text-align: center;
    margin-bottom: 64px;
}

/* Section label overrides pour fond sombre */
.wwb-label--dark {
    display: flex;          /* préserve le flex-layout ::before/::after */
    justify-content: center;
    margin-bottom: 28px;
    /* color reste var(--thelis-red) — OK sur fond sombre */
}

.wwb-headline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-family: var(--thelis-ff-title);
    font-size: clamp(46px, 5.5vw, 76px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -2px;
    color: #ffffff !important;
    margin: 0 0 24px;
}

.wwb-headline em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.70) !important;
}

.wwb-subline {
    font-family: var(--thelis-ff-display);
    font-size: 16px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72) !important;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Horizontal rule ─────────────────────────────────────────── */
.wwb-rule {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.12) 15%,
        rgba(255,255,255,0.12) 85%,
        transparent 100%
    );
    margin-bottom: 0;
}

/* ── 5-column systems grid ───────────────────────────────────── */
.wwb-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-left: 1px solid rgba(255,255,255,0.08);
}

.wwb-col {
    padding: 44px 28px 40px;
    border-right: 1px solid rgba(255,255,255,0.10);
    border-top: 1px solid rgba(255,255,255,0.10);
    position: relative;
    /* Fond sombre local — assure lisibilité quelle que soit la zone d'image */
    background: rgba(14, 14, 20, 0.56);
    transition: background 0.35s ease;
    overflow: hidden;
}

/* Red bottom accent bar */
.wwb-col::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--thelis-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--thelis-ease-out);
}

.wwb-col:hover {
    background: rgba(14, 14, 20, 0.28);
}

.wwb-col:hover::after {
    transform: scaleX(1);
}

/* Ghost number — masqué, remplacé visuellement par le titre */
.wwb-col__num {
    display: none;
}

/* Column name — premier élément visible, plus imposant */
.wwb-col__name {
    font-family: var(--thelis-ff-display);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: -0.5px;
    line-height: 1.22;
    margin: 0 0 16px;
    transition: color 0.28s ease;
    padding-top: 4px;
}

/* Petite ligne rouge avant le titre — repère visuel structurant */
.wwb-col__name::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--thelis-red, #E8294A);
    margin-bottom: 18px;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwb-col:hover .wwb-col__name {
    color: var(--thelis-red, #E8294A) !important;
}

.wwb-col:hover .wwb-col__name::before {
    width: 36px;
}

/* Column desc */
.wwb-col__desc {
    font-family: var(--thelis-ff-display);
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.62;
    margin: 0 0 20px;
    transition: color 0.28s ease;
}

.wwb-col:hover .wwb-col__desc {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Tags */
.wwb-col__tags {
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0.80;
    transition: opacity 0.35s ease;
}

.wwb-col:hover .wwb-col__tags {
    opacity: 1;
}

.wwb-col__tags span {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    padding: 4px 9px;
    display: inline-block;
    width: fit-content;
}

/* ── Footer outcome ──────────────────────────────────────────── */
.wwb-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
    padding-top: 52px;
}

.wwb-outcome-card {
    border-left: 2px solid var(--thelis-red);
    padding: 20px 28px;
    background: rgba(232, 41, 74, 0.08);
    max-width: 480px;
    width: 100%;
}

.wwb-outcome-label {
    display: block;
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--thelis-red);
    margin-bottom: 10px;
}

.wwb-outcome-card p {
    font-family: var(--thelis-ff-display);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72) !important;
    margin: 0;
}

/* ── Scan line ───────────────────────────────────────────────── */
@keyframes wwbScan {
    0%   { top: -1px; opacity: 0; }
    4%   { opacity: 1; }
    90%  { opacity: 0.7; }
    100% { top: 100%; opacity: 0; }
}

.wwb-scanline {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(232, 41, 74, 0.25) 20%,
        rgba(232, 41, 74, 0.50) 50%,
        rgba(232, 41, 74, 0.25) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 3;
    animation: wwbScan 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    animation-delay: 1.5s;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .wwb-grid { grid-template-columns: repeat(3, 1fr); }
    .wwb-col:nth-child(3) { border-right: none; }
    .wwb-col:nth-child(4),
    .wwb-col:nth-child(5) { border-top: 1px solid rgba(255,255,255,0.08); }
}

@media (max-width: 1024px) {
    .wwb-headline { font-size: clamp(40px, 5vw, 60px); }
    .wwb-grid { grid-template-columns: repeat(2, 1fr); }
    .wwb-col:nth-child(2n) { border-right: none; }
    .wwb-col:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.08); }
}

@media (max-width: 768px) {
    .what-we-build-section { padding: 80px 0 72px; }
    .wwb-headline { font-size: clamp(36px, 7vw, 52px); }
    .wwb-grid { grid-template-columns: 1fr; }
    .wwb-col { border-right: none; }
    .wwb-col__tags { display: none; }
}

/* =============================================
   CASE STUDIES SECTION
   ============================================= */
.case-studies-section {
    background: var(--thelis-light);
    position: relative;
}

/* Top separator bar */
.case-studies-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
}

/* ---- Header ---- */
.cases-header {
    text-align: center;
    margin-bottom: 48px;
}

/* ---- Filter tabs ---- */
.cs-filters {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 48px;
}

.cs-filter {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--thelis-gray);
    background: transparent;
    border: 1px solid var(--thelis-border);
    border-radius: 2px;
    padding: 8px 22px;
    cursor: pointer;
    transition: all 0.25s var(--thelis-ease-out);
}

.cs-filter:hover {
    color: var(--thelis-black);
    border-color: rgba(17,17,24,0.25);
}

.cs-filter.is-active {
    background: var(--thelis-red);
    color: #fff;
    border-color: var(--thelis-red);
}

/* ---- Accordion panels container ---- */
.cs-panels {
    display: flex;
    height: 560px;
    gap: 10px;
}

/* ---- Individual panel ---- */
.cs-panel {
    flex: 0 0 72px;
    background: #fff;
    border-radius: 4px;
    border-top: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition:
        flex         0.65s var(--thelis-spring),
        border-color 0.3s  ease;
}

.cs-panel.is-active {
    flex: 1;
    border-top-color: var(--thelis-red);
    cursor: default;
}

.cs-panel:not(.is-active):hover {
    border-top-color: rgba(232,41,74,0.40);
}

.cs-panel.is-hidden {
    display: none;
}

/* ---- Collapsed strip (visible when not active) ---- */
.cs-panel-collapsed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 0 24px;
    gap: 14px;
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.cs-panel.is-active .cs-panel-collapsed {
    opacity: 0;
}

.cs-panel-num {
    font-family: var(--thelis-ff-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--thelis-red);
}

.cs-panel-vtitle {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--thelis-ff-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--thelis-black);
    white-space: nowrap;
    flex: 1;
}

.cs-panel-vtag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--thelis-ff-mono);
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thelis-gray);
}

/* ---- Expanded content (visible when active) ---- */
.cs-panel-expanded {
    position: absolute;
    inset: 0;
    padding: 26px 36px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity   0.38s ease 0.18s,
        transform 0.5s  var(--thelis-ease-out) 0.12s;
    pointer-events: none;
    overflow: hidden;
    min-width: 420px;
}

.cs-panel.is-active .cs-panel-expanded {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

/* Top row: badges + ghost number */
.cs-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cs-panel-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.cs-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 2px;
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.cs-badge--domain {
    background: rgba(17,17,24,0.06);
    color: var(--thelis-black);
}

/* Client-type badge colours */
.tag-corporation { background: rgba(17,17,24,0.07);  color: var(--thelis-black); }
.tag-startup     { background: rgba(232,41,74,0.08); color: var(--thelis-red);   }
.tag-public      { background: rgba(42,59,143,0.07); color: #2a3b8f;             }

.cs-panel-ghost {
    font-family: var(--thelis-ff-mono);
    font-size: 72px;
    font-weight: 700;
    color: rgba(17,17,24,0.04);
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

/* Title */
.cs-panel-title {
    font-family: var(--thelis-ff-body);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--thelis-black);
    margin-bottom: 10px;
}

/* Description */
.cs-panel-desc {
    font-family: var(--thelis-ff-body);
    font-size: 14px;
    color: var(--thelis-gray);
    line-height: 1.65;
    margin-bottom: 16px;
    max-width: 540px;
}

/* Metrics strip */
.cs-metrics {
    display: flex;
    gap: 36px;
    padding: 14px 0;
    border-top: 1px solid var(--thelis-border);
    border-bottom: 1px solid var(--thelis-border);
    margin-bottom: 14px;
}

.cs-metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cs-metric-value {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-family: var(--thelis-ff-mono);
    color: var(--thelis-red);
}

.cs-metric-prefix {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.cs-metric-num {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

.cs-metric-unit {
    font-size: 15px;
    font-weight: 500;
    color: rgba(232,41,74,0.55);
}

.cs-metric-label {
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thelis-gray);
}

/* Tech stack pills */
.cs-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.cs-stack span {
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thelis-black);
    background: var(--thelis-light);
    border: 1px solid var(--thelis-border);
    border-radius: 2px;
    padding: 4px 10px;
}

/* Read link */
.cs-read-link {
    font-family: var(--thelis-ff-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--thelis-red) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    flex-shrink: 0;
    transition: gap 0.3s var(--thelis-ease-out), opacity 0.2s ease;
    opacity: 0.85;
    border-bottom: 1px solid rgba(232, 41, 74, 0.25);
    padding-bottom: 2px;
}

.cs-read-link:hover {
    gap: 14px;
    color: var(--thelis-red) !important;
    opacity: 1;
    border-bottom-color: rgba(232, 41, 74, 0.65);
}

/* =============================================
   TECH DOMAINS SECTION
   ============================================= */
.tech-domains-section {
    background: var(--thelis-white);
    position: relative;
}

/* Subtle engineering dot grid */
.tech-domains-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(17,17,24,0.04) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Top separator bar */
.tech-domains-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
}

/* ---- Header ---- */
.td-header {
    text-align: center;
    margin-bottom: 64px;
}

/* ---- 2×2 Grid ---- */
.td-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ---- Card shell ---- */
.td-card {
    border-radius: 4px;
    border: 1px solid var(--thelis-border);
    border-top: 2px solid transparent;
    background: #fff;
    transition:
        transform    0.45s var(--thelis-spring),
        box-shadow   0.28s ease,
        border-color 0.25s ease;
    cursor: default;
}

.td-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 52px rgba(0,0,0,0.08);
    border-top-color: var(--thelis-red);
    border-color: transparent;
    border-top-color: var(--thelis-red);
}

.td-card-inner {
    padding: 40px 40px 36px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---- Top row: icon + ghost number ---- */
.td-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}

/* ---- Icon bordered square ---- */
.td-icon-wrap {
    width: 64px;
    height: 64px;
    border: 1px solid var(--thelis-border);
    border-radius: 4px;
    background: var(--thelis-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: var(--thelis-red);
    transition:
        border-color 0.25s ease,
        background   0.25s ease;
}

.td-card:hover .td-icon-wrap {
    border-color: rgba(232,41,74,0.35);
    background: rgba(232,41,74,0.04);
}

/* Scan line that sweeps down on hover */
.td-icon-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,41,74,0.7), transparent);
    top: -100%;
    opacity: 0;
}

.td-card:hover .td-icon-wrap::after {
    animation: tdScanLine 0.55s var(--thelis-ease-out) 0.05s forwards;
}

@keyframes tdScanLine {
    0%   { top: -5%;  opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.8; }
    100% { top: 110%; opacity: 0; }
}

.td-icon {
    flex-shrink: 0;
    /* stroke-width scales with viewBox; no override needed */
}

/* ---- Ghost index number ---- */
.td-num {
    font-family: var(--thelis-ff-mono);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: rgba(17,17,24,0.05);
    user-select: none;
    transition: color 0.25s ease;
}

.td-card:hover .td-num {
    color: rgba(232,41,74,0.07);
}

/* ---- Title ---- */
.td-title {
    font-family: var(--thelis-ff-body);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--thelis-black);
    margin-bottom: 10px;
}

/* Thin red accent line beneath title */
.td-title::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--thelis-red);
    margin-top: 10px;
    transition: width 0.4s var(--thelis-ease-out);
    opacity: 0.7;
}

.td-card:hover .td-title::after {
    width: 32px;
}

/* ---- Description ---- */
.td-desc {
    font-family: var(--thelis-ff-body);
    font-size: 14px;
    color: var(--thelis-gray);
    line-height: 1.75;
    margin-bottom: 24px;
}

/* ---- Capabilities list ---- */
.td-caps {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: auto;
    border-top: 1px solid var(--thelis-border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.td-caps li {
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--thelis-gray);
    padding-left: 12px;
    position: relative;
}

.td-caps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--thelis-red);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.td-card:hover .td-caps li::before {
    opacity: 1;
}

/* =============================================
   IMPACT SECTION
   ============================================= */
.impact-section {
    background: var(--thelis-light);
    position: relative;
}

/* Top separator bar (from tech-domains) */
.impact-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
    pointer-events: none;
}

/* ---- Header ---- */
.impact-header {
    text-align: center;
    margin-bottom: 80px;
}

/* ---- Horizontal strips ---- */
.impact-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--thelis-border);
}

.impact-row {
    display: grid;
    grid-template-columns: 300px 1fr 220px;
    gap: 64px;
    align-items: center;
    padding: 56px 0 56px 20px;
    margin-left: -20px;
    border-bottom: 1px solid var(--thelis-border);
    position: relative;
    transition:
        background 0.35s ease;
    cursor: default;
}

/* Animated left red border — scaleY from bottom on hover */
.impact-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--thelis-red);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 0.55s var(--thelis-spring);
}

.impact-row:hover {
    background: rgba(255, 255, 255, 0.65);
}

.impact-row:hover::before {
    transform: scaleY(1);
}

/* ---- Meta column (number + badge + heading) ---- */
.impact-row-meta {
    position: relative;
    padding: 4px 0;
}

/* Giant ghost number behind the heading */
.impact-ghost {
    position: absolute;
    top: 50%;
    left: -4px;
    transform: translateY(-52%);
    font-family: var(--thelis-ff-display);
    font-size: 116px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -6px;
    color: var(--thelis-red);
    opacity: 0.055;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.impact-row:hover .impact-ghost {
    opacity: 0.11;
}

/* Client type badge */
.impact-type {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--thelis-red);
    margin-bottom: 16px;
}

.impact-type::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--thelis-red);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Row heading */
.impact-title {
    position: relative;
    z-index: 1;
    font-family: var(--thelis-ff-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--thelis-black);
    margin: 0;
}

/* ---- Description ---- */
.impact-desc {
    font-family: var(--thelis-ff-display);
    font-size: 15px;
    line-height: 1.8;
    color: var(--thelis-gray);
    font-weight: 300;
    margin: 0;
}

/* ---- Capability bullets ---- */
.impact-caps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.impact-caps li {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--thelis-black);
    opacity: 0.55;
    display: flex;
    align-items: center;
    gap: 10px;
    transition:
        opacity   0.25s ease,
        color     0.25s ease;
}

.impact-caps li::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--thelis-red);
    flex-shrink: 0;
    opacity: 0.5;
    transition:
        width   0.35s var(--thelis-spring),
        opacity 0.25s ease;
}

.impact-row:hover .impact-caps li {
    opacity: 0.85;
}

.impact-row:hover .impact-caps li::before {
    width: 24px;
    opacity: 1;
}

/* =============================================
   WHY THELIS SECTION — wt-*
   ============================================= */

.wt-section {
    background: var(--thelis-white);
    position: relative;
}

/* Separator bar from Impact → Why Thelis */
.wt-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
    pointer-events: none;
}

.wt-header {
    text-align: center;
    margin-bottom: 72px;
}

/* ---- Triptych grid ---- */
.wt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 64px;
}

/* ---- Card ---- */
.wt-card {
    background: var(--thelis-white);
    border: 1px solid var(--thelis-border);
    border-radius: 4px;
    overflow: hidden;
    transition:
        transform   0.45s var(--thelis-spring),
        box-shadow  0.3s ease;
    cursor: default;
}

.wt-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.09);
}

/* ---- Dark top panel ---- */
.wt-card-top {
    background: var(--thelis-black);
    padding: 32px 36px 28px;
    position: relative;
    overflow: hidden;
    min-height: 152px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Dot grid on dark panel */
.wt-card-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(232, 41, 74, 0.08) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Red sweep line — draws across bottom on hover */
.wt-card-top::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0;
    height: 2px;
    background: var(--thelis-red);
    transition: width 0.55s var(--thelis-spring);
}

.wt-card:hover .wt-card-top::after {
    width: 100%;
}

/* Ghost number watermark */
.wt-num {
    position: absolute;
    top: -10px;
    right: 20px;
    font-family: var(--thelis-ff-display);
    font-size: 100px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    color: white;
    opacity: 0.04;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.wt-card:hover .wt-num {
    opacity: 0.08;
}

/* Icon */
.wt-icon {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    color: white;
    opacity: 0.8;
    transition:
        opacity   0.3s ease,
        transform 0.4s var(--thelis-spring);
}

.wt-card:hover .wt-icon {
    opacity: 1;
    transform: scale(1.08);
}

/* ---- Card body ---- */
.wt-card-body {
    padding: 36px 36px 40px;
    display: flex;
    flex-direction: column;
}

/* Red label / eyebrow */
.wt-label {
    font-family: var(--thelis-ff-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--thelis-red);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.wt-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--thelis-red);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Heading */
.wt-heading {
    font-family: var(--thelis-ff-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--thelis-black);
    margin-bottom: 16px;
}

/* Description */
.wt-desc {
    font-family: var(--thelis-ff-display);
    font-size: 15px;
    line-height: 1.8;
    color: var(--thelis-gray);
    font-weight: 300;
    margin-bottom: 24px;
    flex: 1;
}

/* Proof line — dans le panel sombre, toujours visible */
.wt-proof {
    font-family: var(--thelis-ff-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    z-index: 4;
}

.wt-proof::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--thelis-red);
    flex-shrink: 0;
}

/* ---- Manifesto quote ---- */
.wt-manifesto {
    border-left: 3px solid var(--thelis-red);
    background: rgba(232, 41, 74, 0.04);
    border-radius: 2px;
    padding: 32px 48px;
}

.wt-manifesto blockquote {
    font-family: var(--thelis-ff-title);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.5px;
    line-height: 1.35;
    color: var(--thelis-black);
    margin: 0 0 14px 0;
    border-left: none !important;
    padding-left: 0 !important;
}

.wt-manifesto cite {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--thelis-red);
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wt-manifesto cite::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--thelis-red);
    opacity: 0.6;
}

/* =============================================
   FINAL CTA SECTION — Editorial split
   Prefix: fcta-*
   Photo full-bleed · layout gauche / droite · cohérent brand
   ============================================= */

.fcta-section {
    background: var(--thelis-black);
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* ── Photo background ── */
.fcta-bg-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(0.22) saturate(0.35);
    transition: filter 1.2s ease, transform 1.2s ease;
    z-index: 0;
}
.fcta-section:hover .fcta-bg-img {
    filter: brightness(0.32) saturate(0.45);
    transform: scale(1.02);
}

/* ── Dark gradient overlay — stronger left, lighter right ── */
.fcta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(17, 17, 24, 0.88) 0%,
        rgba(17, 17, 24, 0.60) 50%,
        rgba(17, 17, 24, 0.50) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ── Radial vignette ── */
.fcta-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 110% 100% at 0% 50%, transparent 40%, rgba(17, 17, 24, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ── Subtle dot grid texture (top layer) ── */
.fcta-grid-texture {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(232, 41, 74, 0.05) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    z-index: 2;
    pointer-events: none;
}

/* ── Red accent top bar ── */
.fcta-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent 70%);
    z-index: 4;
}

/* ── Container & layout ── */
.fcta-section .container {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
}

.fcta-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 110px 0;
    width: 100%;
}

/* ── Left column : headline ── */
.fcta-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fcta-eyebrow {
    margin-bottom: 28px;
}

.fcta-label {
    font-family: var(--thelis-ff-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--thelis-red) !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    opacity: 0.80;
}

.fcta-label::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: var(--thelis-red);
    opacity: 0.5;
    flex-shrink: 0;
}

/* ── Headline ── */
.fcta-title {
    font-family: var(--thelis-ff-display) !important;
    font-size: clamp(48px, 5.5vw, 88px) !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.96) !important;
    letter-spacing: -2px;
    line-height: 1.06;
    margin-bottom: 36px;
}

.fcta-title em {
    font-style: italic;
    color: var(--thelis-red) !important;
    position: relative;
    display: inline-block;
}

.fcta-title em::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--thelis-red), rgba(232, 41, 74, 0.15));
    border-radius: 1px;
}

/* ── Audience badges (bottom of left col) ── */
.fcta-badges {
    display: flex;
    align-items: center;
    gap: 0;
}

.fcta-badge {
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28) !important;
    padding: 0 20px 0 0;
    transition: color 0.25s ease;
}
.fcta-badge:first-child { padding-left: 0; }

.fcta-badge:hover {
    color: rgba(255, 255, 255, 0.55) !important;
}

.fcta-badge-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    margin-right: 20px;
}

/* ── Right column : sub + CTA ── */
.fcta-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 80px;
}

/* Vertical red rule between eyebrow and cta */
.fcta-rule {
    display: none; /* handled by border-left on .fcta-right */
}

.fcta-sub {
    font-family: var(--thelis-ff-display);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.52) !important;
    margin-bottom: 48px;
    max-width: 380px;
}

/* ── CTA zone ── */
.fcta-cta-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

/* Breathing glow orb */
.fcta-glow-orb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-20%, -50%);
    width: 340px;
    height: 120px;
    background: radial-gradient(ellipse, rgba(232, 41, 74, 0.32) 0%, transparent 68%);
    filter: blur(32px);
    pointer-events: none;
    animation: fctaOrbPulse 3.6s ease-in-out infinite;
    z-index: 0;
}

@keyframes fctaOrbPulse {
    0%, 100% { opacity: 0.55; transform: translate(-20%, -50%) scale(1); }
    50%       { opacity: 0.85; transform: translate(-20%, -50%) scale(1.15); }
}

/* Magnetic wrap */
.fcta-btn-wrap {
    position: relative;
    display: inline-flex;
    padding: 48px 64px;
    margin: -48px -64px;
    z-index: 1;
}

/* ── Primary button ── */
.fcta-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 20px 48px;
    background: var(--thelis-red);
    color: white !important;
    border-radius: 2px;
    text-decoration: none !important;
    font-family: var(--thelis-ff-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.fcta-btn-fill {
    position: absolute;
    inset: 0;
    background: var(--thelis-red-dark);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--thelis-spring);
    z-index: 0;
}

.fcta-btn-primary:hover .fcta-btn-fill {
    transform: scaleX(1);
}

.fcta-btn-primary:hover {
    box-shadow:
        0 0 0 1px rgba(232, 41, 74, 0.55),
        0 0 36px rgba(232, 41, 74, 0.45),
        0 16px 48px rgba(232, 41, 74, 0.28);
}

.fcta-btn-text,
.fcta-btn-arrow {
    position: relative;
    z-index: 1;
}

.fcta-btn-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.35s var(--thelis-spring);
}

.fcta-btn-primary:hover .fcta-btn-arrow {
    transform: translateX(6px);
}

/* ── Ghost secondary ── */
.fcta-btn-ghost {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25) !important;
    text-decoration: none !important;
    transition: color 0.25s ease, gap 0.3s var(--thelis-spring);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding-bottom: 3px;
}

.fcta-btn-ghost:hover {
    color: rgba(255, 255, 255, 0.55) !important;
    gap: 16px;
    border-bottom-color: rgba(255, 255, 255, 0.28);
}

/* =============================================================================
   DARK SECTION THEMES
   Challenge / How We Work / Impact → fond #111118
   Rythme : clair → sombre → clair → sombre → clair → sombre → clair
   Texte sur a/p/span : !important requis (spécificité Blocksy #primary *)
   ============================================================================= */

/* ---- Challenge Section — dark ---- */
.problem-section {
    background: #111118 !important;
}

/* Dot grid : points rouges discrets sur fond sombre */
.problem-section::before {
    background-image: radial-gradient(circle, rgba(232,41,74,0.08) 1.2px, transparent 1.2px);
}

.problem-section .section-title        { color: rgba(255, 255, 255, 0.94); }
.problem-section .section-intro        { color: rgba(255, 255, 255, 0.65) !important; }

.problem-section .problem-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 2px solid transparent;
}

.problem-section .problem-card:hover {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.problem-section .problem-card h3      { color: rgba(255, 255, 255, 0.92); }
.problem-section .problem-card p       { color: rgba(255, 255, 255, 0.72) !important; }
.problem-section .prob-tag             { color: rgba(255, 255, 255, 0.65) !important;
                                         border-top-color: rgba(255, 255, 255, 0.08); }
.problem-section .problem-conclusion   { background: rgba(232, 41, 74, 0.12); }
.problem-section .emphasis             { color: rgba(255, 255, 255, 0.88) !important; }

/* ---- How We Work Section — dark ---- */
.how-we-work-section {
    background: #111118 !important;
}

/* Dot grid : points rouges sur fond sombre */
.how-we-work-section::before {
    background-image: radial-gradient(circle, rgba(232,41,74,0.08) 1.2px, transparent 1.2px);
}

.how-we-work-section .section-title    { color: rgba(255, 255, 255, 0.94); }
.how-we-work-section .section-intro    { color: rgba(255, 255, 255, 0.65) !important; }
.how-we-work-section .hww-label h4     { color: rgba(255, 255, 255, 0.88); }
.how-we-work-section .hww-label p      { color: rgba(255, 255, 255, 0.65) !important; }

/* SVG track : hairline claire sur fond sombre */
.how-we-work-section .hww-track        { stroke: rgba(255, 255, 255, 0.18); }

/* Bloc conclusion */
.how-we-work-section .work-principle        { background: rgba(232, 41, 74, 0.12); }
.how-we-work-section .work-principle p      { color: rgba(255, 255, 255, 0.72) !important; }
.how-we-work-section .work-principle strong { color: rgba(255, 255, 255, 0.92); }

/* ---- Impact Section — dark ---- */
.impact-section {
    background: #111118 !important;
}

/* Séparateurs horizontaux */
.impact-section .impact-rows              { border-top-color: rgba(255, 255, 255, 0.08); }
.impact-section .impact-row               { border-bottom-color: rgba(255, 255, 255, 0.08); }
.impact-section .impact-row:hover         { background: rgba(255, 255, 255, 0.04); }

.impact-section .section-title            { color: rgba(255, 255, 255, 0.94); }
.impact-section .section-intro            { color: rgba(255, 255, 255, 0.65) !important; }
.impact-section .impact-title             { color: rgba(255, 255, 255, 0.92); }
.impact-section .impact-desc              { color: rgba(255, 255, 255, 0.65) !important; }

/* Bullets capacités */
.impact-section .impact-caps li           { color: rgba(255, 255, 255, 0.65) !important; opacity: 1; }
.impact-section .impact-row:hover .impact-caps li { color: rgba(255, 255, 255, 0.88) !important; }

/* Ghost number : rouge teinté sur fond sombre */
.impact-section .impact-ghost             { color: var(--thelis-red); opacity: 0.08; }
.impact-section .impact-row:hover .impact-ghost { opacity: 0.16; }

/* =============================================================================
   NOTE SCROLL NAVIGATION
   Aucune contrainte CSS de hauteur sur les sections.
   Le padding original (120px) est conservé — les layouts ne sont pas touchés.
   ============================================================================= */

/* =============================================================================
   IMPACT SECTION — REDESIGN 3 CARTES CÔTE À CÔTE
   Les 3 rangées horizontales empilées deviennent 3 cartes en grille.
   Tout le contenu est visible sur un seul viewport sans compression.
   Seul le CSS change — le HTML (section-impact.php) est intact.
   ============================================================================= */

/* Padding section réduit (120px → 64px) pour gagner de la hauteur */
.impact-section {
    padding-top:    64px;
    padding-bottom: 64px;
}

/* Header plus compact */
.impact-section .impact-header {
    margin-bottom: 40px;
}

/* Grille 3 colonnes — séparateurs hairline via gap + background */
.impact-section .impact-rows {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    border-top:            none;          /* retire la bordure top originale */
    gap:                   1px;
    background:            rgba(255, 255, 255, 0.07); /* couleur du séparateur */
    border-radius:         2px;
    overflow:              hidden;
}

/* Chaque rangée → carte en colonne flex */
.impact-section .impact-row {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding:        32px 28px 28px;
    margin-left:    0;
    border-bottom:  none;
    background:     #111118;
    gap:            0;
    cursor:         default;
    position:       relative;
    transition:     background 0.35s ease;
}

.impact-section .impact-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Barre rouge horizontale en haut (remplace la barre verticale latérale) */
.impact-section .impact-row::before {
    content:          '';
    position:         absolute;
    top:              0; left: 0; right: 0; bottom: auto;
    width:            auto;
    height:           3px;
    background:       var(--thelis-red);
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform 0.55s var(--thelis-spring);
}

.impact-section .impact-row:hover::before {
    transform: scaleX(1);
}

/* Ghost repositionné en haut-droite de la carte */
.impact-section .impact-ghost {
    top:            14px;
    left:           auto;
    right:          14px;
    transform:      none;
    font-size:      60px;
    letter-spacing: -3px;
    line-height:    1;
    opacity:        0.07;
}

.impact-section .impact-row:hover .impact-ghost {
    opacity: 0.14;
}

/* Meta : label + titre */
.impact-section .impact-row-meta {
    position:      relative;
    z-index:       1;
    padding:       0;
    margin-bottom: 14px;
}

.impact-section .impact-type {
    font-size:     8px;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.impact-section .impact-title {
    font-size:   20px;
    line-height: 1.25;
}

/* Description flexible (pousse les caps vers le bas) */
.impact-section .impact-desc {
    font-size:     13px !important;
    line-height:   1.75;
    flex:          1;
    margin-bottom: 20px;
    color:         rgba(255, 255, 255, 0.65) !important;
}

/* Capacités en pied de carte */
.impact-section .impact-caps {
    margin-top: auto;
    gap:        10px;
}

.impact-section .impact-caps li {
    font-size:   8px !important;
    letter-spacing: 2px;
    opacity:     1;
    color:       rgba(255, 255, 255, 0.55) !important;
}

.impact-section .impact-caps li::before {
    width:   12px;
    opacity: 0.45;
}

.impact-section .impact-row:hover .impact-caps li {
    color: rgba(255, 255, 255, 0.80) !important;
}

.impact-section .impact-row:hover .impact-caps li::before {
    width:   18px;
    opacity: 0.85;
}

/* Responsive — repasse en colonne sur mobile */
@media (max-width: 768px) {
    .impact-section .impact-rows {
        grid-template-columns: 1fr;
    }
    .impact-section .impact-row {
        padding: 28px 20px;
    }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .section-title {
        font-size: 36px;
        letter-spacing: -1.5px;
    }

    .build-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Hero — height: 100vh maintenu sur tablet */
    .hero-section {
        height: 100vh;
    }

    /* Hero wrap — padding réduit tablet */
    .hero-wrap {
        padding: clamp(60px, 9vh, 90px) 40px clamp(118px, 17vh, 158px);
    }

    /* Build image — fond blanc n'est plus latéral → overlay simplifié */
    .build-img-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(17, 17, 24, 0.35) 0%,
                transparent 55%
            );
    }

    /* Ratio plus cinématique sur tablet/mobile */
    .build-img-frame {
        aspect-ratio: 16 / 9;
    }

    .problem-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Final CTA — stack at tablet */
    .fcta-layout {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 88px 0;
    }

    .fcta-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 48px;
    }

    .fcta-title {
        font-size: clamp(42px, 7vw, 72px) !important;
    }

    .fcta-btn-wrap {
        padding: 44px 60px;
        margin: -44px -60px;
    }

    /* Why Thelis — single column at tablet */
    .wt-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .wt-manifesto {
        padding: 28px 32px;
    }

    /* Impact — collapse to 2-col at tablet */
    .impact-row {
        grid-template-columns: 240px 1fr;
        gap: 40px;
        padding: 44px 0 44px 16px;
        margin-left: -16px;
    }

    .impact-caps {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 24px;
    }

    .impact-ghost {
        font-size: 88px;
    }

    /* Case studies — tighter panels on tablet */
    .cs-panels {
        height: 520px;
    }

    .cs-panel-expanded {
        padding: 22px 26px;
        min-width: 340px;
    }

    .cs-panel-photo { height: 90px; margin-bottom: 12px; }
    .cs-panel-title { font-size: 18px; }
    .cs-metric-num  { font-size: 24px; }
    .cs-metrics     { gap: 24px; }

    /* Innovation model — tighter connectors at tablet landscape */
    .im-nodes-row {
        --im-conn-w: 48px;
    }

    .im-cards {
        column-gap: 48px;
    }
}

@media (max-width: 768px) {
    section {
        padding: 80px 0;
    }

    .container {
        padding: 0 24px;
    }

    .section-title {
        font-size: 28px;
        letter-spacing: -1px;
    }

    .hero-title {
        font-size: 44px;
        letter-spacing: -0.5px;
    }

    /* Hero — mobile : compact pour tenir dans le viewport */
    .hero-section {
        height: 100svh; /* small viewport height — plus fiable sur mobile */
        min-height: 500px;
    }

    .hero-wrap {
        padding: clamp(56px, 8vh, 80px) 24px clamp(150px, 22vh, 210px);
    }

    /* Hero bg — mobile : recentre pour montrer la profondeur du couloir */
    .hero-bg-img {
        object-position: 38% 40%;
    }

    /* Hero journey — mobile : hauteur réduite + vague diagonale */
    .hero-journey {
        height: clamp(82px, 13svh, 100px);
    }

    /* Vague lumineuse : part du coin haut-gauche, balaie vers la droite */
    @keyframes heroWave {
        0%   { transform: translateX(-100%) skewX(-18deg); opacity: 0; }
        4%   { opacity: 1; }
        55%  { opacity: 1; }
        60%  { transform: translateX(200%)  skewX(-18deg); opacity: 0; }
        100% { transform: translateX(200%)  skewX(-18deg); opacity: 0; }
    }

    .hero-journey::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 40%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.07) 40%,
            rgba(255, 255, 255, 0.13) 50%,
            rgba(255, 255, 255, 0.07) 60%,
            transparent 100%
        );
        animation: heroWave 6s ease-in-out infinite;
        pointer-events: none;
        z-index: 3;
        transform-origin: top left;
    }

    /* Labels : bascule en coin bas-gauche */
    .hero-journey-meta {
        top: auto;
        left: 14px;
        bottom: 10px;
        transform: none !important;
        align-items: flex-start;
        text-align: left;
        gap: 4px;
        opacity: 1 !important;
    }

    .hero-journey-label {
        font-size: 8px;
        letter-spacing: 2px;
        font-family: var(--thelis-ff-mono);
    }

    .hero-journey-step {
        font-size: 7px;
    }

    /* ── Spotlight cyclique : IDEA → ENGINEERING → REALITY ── */
    @keyframes heroSpotlight {
        0%   { filter: brightness(0.85) saturate(0.88); }
        28%  { filter: brightness(0.85) saturate(0.88); }  /* hold bright */
        38%  { filter: brightness(0.46) saturate(0.58); }  /* fondu → sombre */
        100% { filter: brightness(0.46) saturate(0.58); }  /* reste sombre */
    }

    /* Chaque image tourne sur 6s, décalage négatif = départ en milieu de cycle */
    .hero-journey-item img {
        transform: none;
        transition: none;
        animation: heroSpotlight 6s ease-in-out infinite;
    }

    /* Item 1 — Idea : démarre bright immédiatement */
    .hero-journey-item--idea img    { animation-delay: 0s; }
    /* Item 2 — Engineering : bright à partir de t=2s */
    .hero-journey-item--eng img     { animation-delay: -4s; }
    /* Item 3 — Reality : bright à partir de t=3.5s */
    .hero-journey-item--reality img { animation-delay: -2.5s; }

    /* Désactiver le hover (touch peu fiable) */
    .hero-journey-item:hover img { filter: unset; transform: none; }

    /* Veil — simplifié mobile */
    .hero-journey-veil {
        background: linear-gradient(
            0deg,
            rgba(17, 17, 24, 0.78) 0%,
            rgba(17, 17, 24, 0.04) 45%,
            transparent 100%
        );
    }

    /* Flèches mobiles — plus visibles, fond teinté rouge */
    .hero-journey-arrow {
        width: 32px;
        gap: 4px;
        background: rgba(17, 17, 24, 0.88);
        border-left:  1px solid rgba(232, 41, 74, 0.50);
        border-right: 1px solid rgba(232, 41, 74, 0.50);
    }

    .hero-journey-arrow::before {
        width: 14px;
        background: rgba(232, 41, 74, 0.75);
    }

    .hero-journey-arrow::after {
        font-size: 15px;
    }

    .hero-wrap {
        padding: clamp(56px, 8vh, 80px) 24px clamp(108px, 19svh, 135px);
    }

    .td-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .td-card-inner {
        padding: 28px 28px 24px;
    }

    .td-num {
        font-size: 40px;
    }

    /* Innovation model — hide pipeline, switch to 2-col cards */
    .im-nodes-row {
        display: none;
    }

    .im-cards {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 20px;
    }

    .gap-diagram {
        grid-template-columns: 1fr;
    }

    .gap-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-content h2 {
        letter-spacing: -1.5px;
    }

    /* Impact — single column on mobile */
    .impact-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 36px 0 36px 14px;
        margin-left: -14px;
    }

    .impact-ghost {
        font-size: 72px;
        opacity: 0.04;
    }

    .impact-title {
        font-size: 22px;
    }

    .impact-caps {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 20px;
    }

    /* Why Thelis — tighter on mobile */
    .wt-card-top {
        min-height: 120px;
        padding: 24px 24px 20px;
    }

    .wt-card-body {
        padding: 28px 24px 32px;
    }

    .wt-manifesto {
        padding: 24px 24px;
    }

    /* Case studies — vertical stacking on mobile */
    .cs-panels {
        flex-direction: column;
        height: auto;
        gap: 8px;
    }

    .cs-panel {
        flex: 0 0 auto !important;
    }

    /* On mobile, all panels are always "expanded" — collapse strip hidden */
    .cs-panel-collapsed {
        display: none;
    }

    .cs-panel-expanded {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: all !important;
        min-width: 0;
        padding: 24px 20px;
    }

    .cs-panel-ghost { font-size: 48px; }
    .cs-metrics     { gap: 20px; flex-wrap: wrap; }
    .cs-metric-num  { font-size: 26px; }
}

@media (max-width: 480px) {
    /* Innovation model — single column on small mobile */
    .im-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .im-card {
        padding: 28px 22px 24px;
    }

    .im-ghost {
        font-size: 56px;
    }

    .model-principle {
        padding: 24px 28px;
    }

    /* Final CTA — mobile */
    .fcta-layout {
        padding: 72px 0;
        gap: 44px;
    }

    .fcta-title {
        font-size: clamp(36px, 10vw, 54px) !important;
        letter-spacing: -1px;
    }

    .fcta-sub {
        font-size: 16px !important;
        margin-bottom: 40px;
    }

    .fcta-glow-orb {
        width: 240px;
        height: 90px;
    }

    .fcta-btn-wrap {
        padding: 40px 50px;
        margin: -40px -50px;
    }

    .fcta-cta-zone {
        align-items: flex-start;
    }

    .fcta-btn-primary {
        padding: 18px 36px;
        font-size: 10px;
        letter-spacing: 3px;
        gap: 14px;
    }

    .fcta-badges {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fcta-badge-sep {
        display: none;
    }

    .fcta-badge {
        padding: 0 12px;
    }

    .fcta-circuit {
        opacity: 0.6;
    }
}

/* =============================================
   TECH DOMAINS — COMPACT VIEWPORT FIT
   All 4 cards visible on one viewport.
   Overrides global section { padding: 120px 0 }
   ============================================= */
.tech-domains-section {
    padding-top:    64px;
    padding-bottom: 64px;
}

.tech-domains-section .td-header {
    margin-bottom: 28px;
}

.tech-domains-section .td-card-inner {
    padding: 20px 24px 16px;
}

.tech-domains-section .td-top {
    margin-bottom: 12px;
}

.tech-domains-section .td-icon-wrap {
    width:  44px;
    height: 44px;
}

.tech-domains-section .td-num {
    font-size: 34px;
}

.tech-domains-section .td-title {
    font-size: 16px;
    margin-bottom: 8px;
}

.tech-domains-section .td-desc {
    font-size:     13px;
    line-height:   1.6;
    margin-bottom: 12px;
}

.tech-domains-section .td-caps {
    padding-top: 10px;
    gap:          5px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Why Thelis — photo layer inside dark card tops
   Both ::before (dot grid) and ::after (sweep line) are consumed on
   .wt-card-top, so the photo and veil are real child elements.
───────────────────────────────────────────────────────────────────────── */
.wt-card-top-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.38) saturate(0.45);
    transition: transform 0.75s ease, filter 0.55s ease;
    z-index: 0;
}
.wt-card:hover .wt-card-top-img {
    transform: scale(1.06);
    filter: brightness(0.50) saturate(0.60);
}
.wt-card-top-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(17,17,24,0.25) 0%, rgba(17,17,24,0.68) 65%, rgba(17,17,24,0.82) 100%);
    z-index: 1;
    pointer-events: none;
}
/* Ensure existing pseudo-elements and content stay above the photo layer */
.wt-card-top::before { z-index: 2; }
.wt-card-top::after  { z-index: 3; }
.wt-num, .wt-icon    { position: relative; z-index: 4; }

/* ─────────────────────────────────────────────────────────────────────────
   Impact — subtle background photo per row
───────────────────────────────────────────────────────────────────────── */
.impact-section .impact-row {
    overflow: hidden;
}
.impact-row-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.18) saturate(0.30);
    transition: transform 0.7s ease, filter 0.6s ease;
    z-index: 0;
    pointer-events: none;
}
.impact-section .impact-row:hover .impact-row-bg-img {
    transform: scale(1.04);
    filter: brightness(0.28) saturate(0.42);
}
/* Keep all row content above the photo */
.impact-section .impact-row-meta,
.impact-section .impact-desc,
.impact-section .impact-caps {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   Case Studies — photo backgrounds on collapsed strips + editorial header
───────────────────────────────────────────────────────────────────────── */

/* Photo + veil inside collapsed strip */
.cs-panel-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.45) saturate(0.55);
    transition: transform 0.65s ease, filter 0.45s ease;
    z-index: 0;
}
.cs-panel:not(.is-active):hover .cs-panel-bg-img {
    transform: scale(1.08);
    filter: brightness(0.58) saturate(0.68);
}
.cs-panel-bg-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
/* Distinct tint per client category */
.cs-panel[data-category="corporation"] .cs-panel-bg-veil {
    background: linear-gradient(to bottom, rgba(17,17,24,0.28) 0%, rgba(17,17,24,0.62) 100%);
}
.cs-panel[data-category="startup"] .cs-panel-bg-veil {
    background: linear-gradient(to bottom, rgba(17,17,24,0.22) 0%, rgba(232,41,74,0.20) 45%, rgba(17,17,24,0.58) 100%);
}
.cs-panel[data-category="public"] .cs-panel-bg-veil {
    background: linear-gradient(to bottom, rgba(17,17,24,0.24) 0%, rgba(42,59,143,0.18) 45%, rgba(17,17,24,0.60) 100%);
}

/* Text on top of dark photo — elevate + go white */
.cs-panel-num,
.cs-panel-vtitle,
.cs-panel-vtag {
    position: relative;
    z-index: 2;
}
.cs-panel-vtitle { color: rgba(255,255,255,0.92) !important; }
.cs-panel-vtag   { color: rgba(255,255,255,0.48) !important; }

/* Fade out photo layer when panel becomes active (expanded content takes over) */
.cs-panel.is-active .cs-panel-bg-img,
.cs-panel.is-active .cs-panel-bg-veil {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Editorial photo strip at top of expanded panel */
.cs-panel-photo {
    width: 100%;
    height: 112px;
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 14px;
    flex-shrink: 0;
    position: relative;
    background: var(--thelis-light);
}
.cs-panel-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.88) saturate(0.85);
    transition: transform 0.7s ease;
}
.cs-panel.is-active:hover .cs-panel-photo img {
    transform: scale(1.04);
}
/* Subtle right-fade on the photo strip */
.cs-panel-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 55%, rgba(255,255,255,0.22) 100%);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Technology Domains — full-bleed dark photo cards (editorial)
   Each card becomes a dark window into its domain through photography.
───────────────────────────────────────────────────────────────────────── */

/* Flip cards to dark + photo-backed */
.td-card {
    background: #111118;
    overflow: hidden;
    border-color: rgba(255,255,255,0.08);
}
.td-card:hover {
    border-color: transparent;
    box-shadow: 0 24px 64px rgba(0,0,0,0.32);
}

/* Photo layer — full bleed, strongly filtered at rest */
.td-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.28) saturate(0.38);
    transition: transform 0.80s ease, filter 0.60s ease;
    z-index: 0;
}
.td-card:hover .td-card-bg {
    transform: scale(1.06);
    filter: brightness(0.46) saturate(0.55);
}

/* Atmospheric gradient overlay — drawn with ::before (free on .td-card) */
.td-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        155deg,
        rgba(17,17,24,0.38) 0%,
        rgba(17,17,24,0.72) 55%,
        rgba(17,17,24,0.92) 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.55s ease;
}
.td-card:hover::before {
    opacity: 0.82;
}

/* Push all inner content above photo + overlay */
.td-card-inner {
    position: relative;
    z-index: 2;
}

/* Icon wrap — adapted for dark */
.td-card .td-icon-wrap {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.13);
}
.td-card:hover .td-icon-wrap {
    background: rgba(232,41,74,0.10);
    border-color: rgba(232,41,74,0.38);
}

/* Ghost number — white tone on dark */
.td-card .td-num {
    color: rgba(255,255,255,0.055);
}
.td-card:hover .td-num {
    color: rgba(232,41,74,0.10);
}

/* Title — white */
.td-card .td-title {
    color: rgba(255,255,255,0.92);
}
.td-card:hover .td-title::after {
    width: 32px; /* keep the red underline animation */
}

/* Description — light gray white (Blocksy override with !important) */
.td-card .td-desc {
    color: rgba(255,255,255,0.58) !important;
}

/* Caps border + items — adapted for dark */
.td-card .td-caps {
    border-top-color: rgba(255,255,255,0.10);
}
.td-card .td-caps li {
    color: rgba(255,255,255,0.46) !important;
}

/* =============================================================================
   THELIS FOOTER
   Prefix: tf-*
   Dark editorial · 4-col grid · giant wordmark watermark
   ============================================================================= */

.thelis-footer {
    background: #0c0c10;
    position: relative;
    overflow: hidden;
}

/* Subtle 1px separator from CTA section above */
.thelis-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(232, 41, 74, 0.18);
    z-index: 3;
}

/* Dot grid texture */
.tf-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(232,41,74,0.04) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

/* ── Main body ── */
.tf-body {
    position: relative;
    z-index: 2;
    padding: 88px 0 72px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
}

/* 4-column grid: brand wider, 3 nav cols equal */
.tf-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 56px;
    align-items: start;
}

/* ── Brand column ── */
.tf-brand-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tf-logo {
    display: inline-block;
    text-decoration: none !important;
    line-height: 1;
}

.tf-logo-img {
    display: block;
    height: 36px;
    width: auto;
    opacity: 0.88;
    transition: opacity 0.25s ease;
}

.tf-logo:hover .tf-logo-img {
    opacity: 1;
}

.tf-tagline {
    font-family: var(--thelis-ff-display);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255,255,255,0.40) !important;
    max-width: 210px;
    margin: 0;
}

.tf-location {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.24) !important;
}

/* ── Navigation columns ── */
.tf-nav-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tf-col-label {
    font-family: var(--thelis-ff-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--thelis-red) !important;
    opacity: 0.72;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    display: block;
}

.tf-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tf-links li a,
.tf-links li span {
    font-family: var(--thelis-ff-display);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.42) !important;
    text-decoration: none !important;
    transition: color 0.22s ease;
}

.tf-links li a:hover {
    color: rgba(255,255,255,0.80) !important;
}

/* Contact column — mono for email/links */
.tf-links--contact li a {
    font-family: var(--thelis-ff-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Bottom bar ── */
.tf-bottom {
    position: relative;
    z-index: 2;
    padding: 20px 0;
}

.tf-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.tf-copyright {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.18) !important;
}

.tf-legal {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tf-legal a {
    font-family: var(--thelis-ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.18) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.tf-legal a:hover {
    color: rgba(255,255,255,0.48) !important;
}

.tf-legal-sep {
    color: rgba(255,255,255,0.10) !important;
    font-size: 11px;
}

/* ── Giant decorative wordmark ── */
.tf-wordmark {
    position: absolute;
    bottom: -0.12em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--thelis-ff-display);
    font-size: clamp(96px, 17vw, 252px);
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.028);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .tf-grid {
        grid-template-columns: 1fr 1fr;
        gap: 44px;
    }
    .tf-brand-col {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 28px 40px;
        align-items: flex-start;
    }
    .tf-tagline { max-width: 260px; }
}

@media (max-width: 640px) {
    .tf-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .tf-brand-col {
        grid-column: 1 / -1;
        flex-direction: column;
        gap: 18px;
    }
    .tf-body { padding: 64px 0 52px; }
    .tf-bottom .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .tf-wordmark {
        font-size: clamp(72px, 22vw, 130px);
    }
}



/* ================================================================
   CLIENTS SECTION — section-clients.php (.clients-*)
   Disposition side-by-side : label fixe à gauche · double marquee à droite
   Section compacte — hauteur définie par les tickers seuls
   ================================================================ */

.clients-section {
    position: relative;
    background: var(--thelis-light);
    display: flex;
    align-items: stretch;
    overflow: hidden; /* contient le débordement du marquee */
    padding: 0 !important; /* écrase le padding global Blocksy sur les sections */
    margin: 0 !important;
}

/* Barre rouge séparatrice depuis le CTA sombre */
.clients-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--thelis-red), transparent);
    z-index: 2;
    pointer-events: none;
}

/* ── Colonne label — statique, gauche ── */
.clients-label-col {
    flex-shrink: 0;
    width: 210px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    border-right: 1px solid rgba(17,17,24,0.07);
    position: relative;
    z-index: 1;
    /* Fond léger pour couper visuellement le masque de fondu du marquee */
    background: var(--thelis-light);
}

/* Slide-in depuis la gauche au scroll */
.clients-label-col.fade-in-up {
    clip-path: none;
    opacity: 0;
    transform: translateX(-14px);
    transition:
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1)    0s,
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
}
.clients-label-col.fade-in-up.animated {
    opacity: 1;
    transform: translateX(0);
    clip-path: none;
}

.clients-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--thelis-red);
    white-space: nowrap;
    display: block;
}
.clients-eyebrow::before { display: none; }

.clients-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(17,17,24,0.32);
    margin: 0;
    padding: 0;
}

/* ── Marquee outer : occupe toute la largeur restante ── */
.clients-marquee-outer {
    flex: 1;
    min-width: 0; /* indispensable pour qu'un flex child déborde */
    overflow: hidden;
    background: rgba(17,17,24,0.018);
    /* Fondu uniquement vers la droite — la col label forme la bordure gauche naturelle */
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 80%, transparent 100%);
    mask-image: linear-gradient(90deg, black 0%, black 80%, transparent 100%);
}

/* Surcharge .fade-in-up — fade simple légèrement décalé */
.clients-marquee-outer.fade-in-up {
    opacity: 0;
    transform: translateY(10px);
    clip-path: none;
    transition:
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1)    0.14s,
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s;
}
.clients-marquee-outer.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
    clip-path: none;
}

/* ── Tickers ── */
.clients-ticker {
    display: flex;
    align-items: center;
    width: max-content;
}

/* Rangée unique : gauche · 48s */
.clients-ticker--fwd {
    animation: clientsMarquee 48s linear infinite;
    animation-play-state: paused;
    padding: 12px 0;
}

/* Démarre au scroll */
.clients-marquee-outer.animated .clients-ticker { animation-play-state: running; }
/* Pause au survol */
.clients-marquee-outer.animated:hover .clients-ticker { animation-play-state: paused; }

@keyframes clientsMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Cellules logo : flottantes, pas de case ── */
.clients-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 44px;
    flex-shrink: 0;
    position: relative;
    background: transparent;
}

/* Pilule sombre pour logos blancs/clairs */
.clients-logo--dark {
    background: #0f0f16;
    border-radius: 3px;
    padding: 16px 40px;
    margin: 0 6px;
}

.clients-logo--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: rgba(232,41,74,0.05);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.clients-logo--dark:hover::before { opacity: 1; }

/* ── Images : révélation au survol ── */
.clients-logo img {
    max-height: 72px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0.58;
    filter: none;
    transition:
        opacity   0.45s ease,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.clients-logo--dark img { opacity: 0.80; }
.clients-logo:hover img { opacity: 1; transform: scale(1.07); }
.clients-logo--dark:hover img { opacity: 1; transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .clients-ticker--fwd { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .clients-label-col { width: 175px; padding: 0 28px; }
    .clients-logo { padding: 0 32px; }
    .clients-logo--dark { padding: 12px 28px; }
    .clients-logo img { max-height: 46px; max-width: 135px; }
    .clients-ticker--fwd { padding: 7px 0; }
}

@media (max-width: 768px) {
    /* Empilement vertical sur mobile */
    .clients-section { flex-direction: column; }

    .clients-label-col {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-right: none;
        border-bottom: 1px solid rgba(17,17,24,0.07);
        gap: 0;
    }

    /* Sur mobile : fondu des deux côtés */
    .clients-marquee-outer {
        -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    }

    .clients-logo { padding: 0 24px; }
    .clients-logo--dark { padding: 8px 20px; margin: 0 3px; }
    .clients-logo img { max-height: 32px; max-width: 96px; }
    .clients-ticker--fwd { padding: 12px 0; }
}