:root {
    color-scheme: light only;
    --bg: #fafaf7;
    --bg-alt: #f2f2ed;
    --ink: #0a0a0a;
    --ink-soft: #2d2d2d;
    --ink-mute: #6b6b68;
    --ink-light: #9a9a96;
    --line: #e2e2dc;
    --line-soft: #ecece6;
    --green: #16a34a;
    --f-serif: "Instrument Serif", "Times New Roman", serif;
    --f-display: "Instrument Serif", "Times New Roman", serif;
    --f-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --f-mono: "Geist Mono", ui-monospace, monospace;
    --max: 1360px;
    --pad: clamp(24px, 5vw, 72px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: #fafaf7 !important;
    color-scheme: light only;
}

body {
    background: #fafaf7 !important;
    color: #0a0a0a !important;
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--ink);
    color: var(--bg);
}

/* Topbar */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(250, 250, 247, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 10px var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.brand .wordmark {
    font-family: var(--f-sans);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
}

.brand .wordmark .ext {
    color: #e60000;
    font-weight: 700;
    font-size: 0.42em;
    letter-spacing: 0.03em;
    margin-left: 3px;
    align-self: flex-start;
    transform: translateY(0.1em);
    font-family: var(--f-sans);
    text-transform: uppercase;
}

.brand .wordmark .red-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--ink);
    border-radius: 50%;
    margin: 0 3px;
    transform: translateY(-2px);
    flex-shrink: 0;
}

.brand .tagline {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
    padding-left: 16px;
    border-left: 1px solid var(--line);
    line-height: 1.45;
    align-self: center;
}

.brand .tagline span {
    display: block;
    font-size: 9px;
    color: var(--ink-light);
    letter-spacing: 0.16em;
    font-weight: 400;
    margin-top: 3px;
}

@media (max-width: 820px) {
    .brand .tagline {
        display: none;
    }
}

@media (max-width: 520px) {
    .brand .wordmark {
        font-size: 26px;
    }

    .brand .wordmark .red-dot {
        width: 7px;
        height: 7px;
    }
}

.nav {
    display: flex;
    gap: 30px;
    font-size: 14px;
    color: var(--ink-soft);
}

.nav a {
    transition: color 0.2s;
}

.nav a:hover {
    color: var(--ink-mute);
}

.nav-cta {
    padding: 10px 18px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    font-size: 13px;
    font-weight: 500;
    border-radius: 100px;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-cta:hover {
    background: transparent;
    color: var(--ink);
}

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

/* ---------- HERO ---------- */
.hero {
    padding: 150px var(--pad) 80px;
    max-width: var(--max);
    margin: 0 auto;
}

.badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: #fff;
}

.badge.live::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--green);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: livePulse 2s ease-out infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}

.badge.trophy::before {
    content: "🏆";
    font-size: 12px;
}

.badge.reunion::before {
    content: "";
    width: 16px;
    height: 11px;
    background-image: url("data:image/png;base64,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");
    background-size: cover;
    background-position: center;
    border-radius: 1px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.hero h1 {
    font-family: var(--f-serif);
    font-size: clamp(44px, 7.4vw, 108px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
    max-width: 1180px;
    margin-bottom: 44px;
}

.hero h1 em {
    font-style: italic;
    color: var(--ink-mute);
    font-weight: 400;
}

.hero h1 u {
    text-decoration: none;
    border-bottom: 3px solid var(--ink);
    padding-bottom: 2px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 72px;
    align-items: start;
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
}

@media (max-width: 960px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.hero-lede {
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 620px;
}

.hero-lede strong {
    color: var(--ink);
    font-weight: 500;
}

.hero-lede p+p {
    margin-top: 16px;
}

/* Témoignage hero */
.hero-quote {
    margin-top: 28px;
    padding: 22px 26px;
    border-left: 3px solid var(--ink);
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(10, 10, 10, 0.04);
    position: relative;
    max-width: 560px;
    min-height: 140px;
}

.hero-quote::before {
    content: "“";
    position: absolute;
    top: -14px;
    left: 14px;
    font-family: var(--f-display);
    font-size: 72px;
    line-height: 1;
    color: var(--ink);
    font-weight: 400;
}

.hero-quote .quote-slide {
    opacity: 0;
    position: absolute;
    inset: 22px 26px;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.hero-quote .quote-slide.active {
    opacity: 1;
    position: relative;
    inset: auto;
    pointer-events: auto;
}

.hero-quote p {
    font-family: var(--f-display);
    font-size: 19px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
    font-style: italic;
}

.hero-quote footer {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-quote footer::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--ink-mute);
    display: inline-block;
    flex-shrink: 0;
}

.hero-quote footer strong {
    color: var(--ink);
    font-weight: 500;
}

.quote-dots {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
    align-items: center;
}

.quote-dot {
    width: 18px;
    height: 3px;
    background: var(--line);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
    border-radius: 2px;
}

.quote-dot.active {
    background: var(--ink);
}

.quote-dot:hover {
    background: var(--ink-mute);
}

.quote-count {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--ink-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 28px 28px 24px;
    border-radius: 6px;
}

.hero-right h4 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 8px;
}

.hero-right h3 {
    font-family: var(--f-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: 10px;
}

.hero-right p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.hero-right ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.hero-right li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--ink-soft);
}

.hero-right li::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    flex-shrink: 0;
    margin-top: 3px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--ink);
    color: var(--bg);
    font-size: 14px;
    font-weight: 500;
    border-radius: 100px;
    align-self: stretch;
    justify-content: center;
    transition: transform 0.2s;
    margin-top: 12px;
}

.hero-cta:hover {
    transform: translateY(-1px);
}

.hero-sub {
    font-family: var(--f-mono);
    font-size: 11px;
    text-align: center;
    color: var(--ink-light);
    letter-spacing: 0.04em;
}

/* Proof bar */
.proof-bar {
    background: var(--ink);
    color: var(--bg);
    padding: 18px var(--pad);
}

.proof-bar-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.proof-bar span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(250, 250, 247, 0.85);
}

.proof-bar span strong {
    color: var(--bg);
    font-weight: 500;
}

.proof-bar span::before {
    content: "◆";
    color: rgba(250, 250, 247, 0.45);
    font-size: 8px;
}

/* Clients strip */
.clients-strip {
    border-bottom: 1px solid var(--line);
    background: #fff;
    padding: 32px var(--pad);
}

.clients-strip-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.clients-label {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-light);
    text-transform: uppercase;
    white-space: nowrap;
}

.clients-names {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--f-serif);
    font-size: 22px;
    color: var(--ink-soft);
    font-weight: 400;
}

/* Sections */
section {
    padding: 120px var(--pad);
    max-width: var(--max);
    margin: 0 auto;
}

.section-kicker {
    display: flex;
    gap: 16px;
    align-items: baseline;
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--ink-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.section-kicker::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--ink-light);
    display: inline-block;
    align-self: center;
}

.section-title {
    font-family: var(--f-serif);
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 920px;
    margin-bottom: 24px;
}

.section-title em {
    font-style: italic;
    color: var(--ink-mute);
}

.section-intro {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 720px;
    margin-bottom: 56px;
}

/* URGENCY */
.urgency {
    background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
    max-width: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.urgency-inner {
    max-width: var(--max);
    margin: 0 auto;
}

.urgency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 32px;
}

@media (max-width: 960px) {
    .urgency-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.urg {
    padding: 32px 0 0;
    border-top: 2px solid var(--ink);
}

.urg .urg-num {
    font-family: var(--f-serif);
    font-size: 72px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}

.urg .urg-num em {
    font-style: italic;
    color: var(--ink-mute);
    font-size: 0.4em;
    vertical-align: super;
    margin-left: 4px;
}

.urg h4 {
    font-family: var(--f-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -0.015em;
}

.urg p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
}

.urg p strong {
    color: var(--ink);
    font-weight: 500;
}

/* Manifeste */
.manifest {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 72px;
    align-items: start;
}

@media (max-width: 960px) {
    .manifest {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.manifest-aside {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--ink-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 2;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.manifest-aside span {
    display: block;
    color: var(--ink);
    font-weight: 500;
}

.manifest-body p {
    font-family: var(--f-serif);
    font-size: clamp(22px, 2.5vw, 28px);
    line-height: 1.38;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 22px;
    letter-spacing: -0.01em;
}

.manifest-body p em {
    color: var(--ink-mute);
    font-style: italic;
}

.manifest-body p strong {
    font-weight: 500;
}

/* Services */
.services {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    max-width: none;
}

.services-inner {
    max-width: var(--max);
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

@media (max-width: 960px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

.service {
    padding: 36px 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    background: #fff;
    transition: background 0.25s;
}

.service:hover {
    background: var(--bg-alt);
}

.service-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service h3 {
    font-family: var(--f-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 14px 0;
}

.service p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.service-foot {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
    text-transform: uppercase;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

/* Founder */
.founder {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 72px;
    align-items: start;
}

@media (max-width: 960px) {
    .founder {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.founder-card {
    background: var(--ink);
    color: var(--bg);
    padding: 44px 40px;
    border-radius: 6px;
    position: relative;
}

.founder-card .kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.6);
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(250, 250, 247, 0.15);
}

.founder-card h4 {
    font-family: var(--f-serif);
    font-size: 34px;
    line-height: 1.12;
    font-weight: 400;
    margin-bottom: 28px;
    letter-spacing: -0.015em;
}

.founder-card h4 em {
    font-style: italic;
    color: rgba(250, 250, 247, 0.6);
}

.trophy-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    margin: 8px 0 20px;
    border-top: 1px solid rgba(250, 250, 247, 0.15);
    border-bottom: 1px solid rgba(250, 250, 247, 0.15);
}

.trophy-line {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14px;
}

.trophy-line span.ico {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.trophy-line strong {
    font-family: var(--f-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--bg);
    font-style: italic;
    letter-spacing: -0.01em;
}

.trophy-line small {
    display: block;
    color: rgba(250, 250, 247, 0.6);
    font-size: 12px;
    margin-top: 2px;
    font-family: var(--f-mono);
    letter-spacing: 0.02em;
}

.founder-card dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px 24px;
    font-size: 14px;
}

.founder-card dt {
    font-family: var(--f-mono);
    font-size: 11px;
    color: rgba(250, 250, 247, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 3px;
}

.founder-card dd {
    color: var(--bg);
}

.founder-card dd strong {
    font-weight: 500;
}

.founder-text p {
    font-family: var(--f-serif);
    font-size: clamp(20px, 2.1vw, 25px);
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.founder-text p em {
    font-style: italic;
    color: var(--ink-mute);
}

.founder-text .quote {
    font-family: var(--f-serif);
    font-size: 28px;
    font-style: italic;
    line-height: 1.3;
    padding: 24px 0 20px;
    margin-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    letter-spacing: -0.015em;
}

.founder-text .quote::before {
    content: "«";
    font-size: 48px;
    color: var(--ink-mute);
    margin-right: 8px;
    vertical-align: -14px;
    font-style: normal;
}

.founder-text .quote::after {
    content: "»";
    font-size: 48px;
    color: var(--ink-mute);
    margin-left: 8px;
    vertical-align: -14px;
    font-style: normal;
}

.founder-sign {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 8px;
}

/* Method */
.method-section {
    background: var(--bg-alt);
    max-width: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.method-inner {
    max-width: var(--max);
    margin: 0 auto;
}

.method {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 16px;
}

@media (max-width: 960px) {
    .method {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .method {
        grid-template-columns: 1fr;
    }
}

.step {
    padding-top: 28px;
    border-top: 1px solid var(--ink);
}

.step .num {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.step h4 {
    font-family: var(--f-serif);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 400;
    margin-bottom: 14px;
    letter-spacing: -0.015em;
}

.step p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Clients full */
.clients-full {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin-top: 16px;
}

@media (max-width: 960px) {
    .clients-full {
        grid-template-columns: repeat(2, 1fr);
    }
}

.client {
    padding: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    transition: background 0.25s;
    overflow: hidden;
}

.client:hover {
    background: var(--bg-alt);
}

.client-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    min-height: 120px;
}

.client-logo img {
    max-width: 150px;
    max-height: 62px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.75);
    transition: filter 0.25s ease, transform 0.25s ease;
    mix-blend-mode: multiply;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.client:hover .client-logo img {
    filter: grayscale(100%) opacity(1);
    transform: translateZ(0) scale(1.05);
}

.client-logo img.dark-bg {
    filter: grayscale(100%) invert(1) opacity(0.75);
    mix-blend-mode: screen;
}

.client:hover .client-logo img.dark-bg {
    filter: grayscale(100%) invert(1) opacity(1);
}

.client-meta {
    padding: 12px 20px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-light);
}

.client-meta .sector {
    color: var(--ink-soft);
    font-weight: 500;
}

/* FAQ */
.faq-list {
    margin-top: 16px;
    border-top: 1px solid var(--line);
}

details {
    border-bottom: 1px solid var(--line);
    padding: 26px 0;
    cursor: pointer;
}

details summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    font-family: var(--f-serif);
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.3;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::after {
    content: "+";
    font-family: var(--f-mono);
    font-size: 22px;
    color: var(--ink-mute);
    transition: transform 0.25s;
    flex-shrink: 0;
    line-height: 1;
}

details[open] summary::after {
    content: "−";
}

.faq-answer {
    padding-top: 18px;
    max-width: 780px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* CTA FINAL */
.cta-final {
    background: var(--ink);
    color: var(--bg);
    max-width: none;
    padding: 130px var(--pad);
    position: relative;
    overflow: hidden;
}

.cta-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 72px;
    align-items: end;
    position: relative;
}

@media (max-width: 960px) {
    .cta-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.cta-kicker {
    font-family: var(--f-mono);
    font-size: 12px;
    color: rgba(250, 250, 247, 0.6);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.cta-inner h2 {
    font-family: var(--f-serif);
    font-size: clamp(44px, 7vw, 88px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.cta-inner h2 em {
    font-style: italic;
    color: rgba(250, 250, 247, 0.55);
}

.cta-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.cta-right a.primary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 26px;
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    border-radius: 100px;
    transition: transform 0.2s;
}

.cta-right a.primary:hover {
    transform: translateY(-1px);
}

.cta-right a.ghost {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 25px;
    background: transparent;
    border: 1px solid rgba(250, 250, 247, 0.3);
    color: var(--bg);
    font-size: 15px;
    font-weight: 400;
    border-radius: 100px;
    transition: border-color 0.2s, background 0.2s;
}

.cta-right a.ghost:hover {
    border-color: var(--bg);
    background: rgba(250, 250, 247, 0.05);
}

.cta-right small {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.55);
    margin-top: 14px;
    line-height: 1.7;
    text-align: center;
}

/* Footer */
footer {
    padding: 80px var(--pad) 40px;
    border-top: 1px solid var(--line);
}

.foot-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
}

@media (max-width: 960px) {
    .foot-inner {
        grid-template-columns: 1fr 1fr;
    }
}

.foot-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.foot-brand .brand-block {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin-bottom: 4px;
}

.foot-brand .wordmark-big {
    font-family: var(--f-sans);
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--ink);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}

.foot-brand .wordmark-big .ext {
    color: #e60000;
    font-weight: 700;
    font-size: 0.38em;
    letter-spacing: 0.03em;
    margin-left: 4px;
    align-self: flex-start;
    transform: translateY(0.15em);
    font-family: var(--f-sans);
    text-transform: uppercase;
}

.foot-brand .brand-sub {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-left: 16px;
    border-left: 1px solid var(--line);
}

.foot-brand .foot-sub {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-light);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: -4px;
}

.foot-brand p {
    font-size: 14px;
    color: var(--ink-mute);
    max-width: 360px;
    line-height: 1.55;
}

.foot-brand address {
    font-style: normal;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.65;
    margin-top: 4px;
}

.foot-col h6 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 18px;
}

.foot-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foot-col a {
    font-size: 14px;
    color: var(--ink-soft);
    transition: color 0.2s;
}

.foot-col a:hover {
    color: var(--ink);
}

.foot-bottom {
    max-width: var(--max);
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-wrap: wrap;
    gap: 12px;
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- MODAL AUDIT ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 40px;
    overflow-y: auto;
}

.modal-overlay.open {
    display: flex;
    animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal {
    background: var(--bg);
    max-width: 780px;
    width: 100%;
    border-radius: 8px;
    position: relative;
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    background: var(--ink);
    color: var(--bg);
    padding: 36px 40px 32px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(250, 250, 247, 0.25);
    background: transparent;
    color: var(--bg);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s, border-color 0.2s;
}

.modal-close:hover {
    background: rgba(250, 250, 247, 0.1);
    border-color: rgba(250, 250, 247, 0.5);
}

.modal-kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.6);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
}

.modal-header h3 {
    font-family: var(--f-serif);
    font-size: clamp(28px, 3.8vw, 38px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

.modal-header h3 em {
    font-style: italic;
    color: rgba(250, 250, 247, 0.6);
}

.modal-header p {
    font-size: 15px;
    color: rgba(250, 250, 247, 0.75);
    line-height: 1.55;
    max-width: 560px;
}

.modal-body {
    padding: 32px 40px 36px;
}

.progress-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
}

.progress-seg {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 2px;
    transition: background 0.3s;
}

.progress-seg.done {
    background: var(--ink);
}

.step-label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 12px;
}

.step-label strong {
    color: var(--ink);
    font-weight: 500;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.form-question {
    font-family: var(--f-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 6px;
}

.form-hint {
    font-size: 13px;
    color: var(--ink-mute);
    margin-bottom: 20px;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

@media (max-width: 560px) {
    .option-grid {
        grid-template-columns: 1fr;
    }
}

.option {
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--ink);
    text-align: left;
    font-family: inherit;
    font-weight: 400;
}

.option:hover {
    border-color: var(--ink);
    background: var(--bg-alt);
}

.option:active {
    transform: scale(0.99);
}

.option.selected {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg);
}

.option .radio {
    width: 16px;
    height: 16px;
    border: 1px solid var(--line);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
    background: #fff;
}

.option.selected .radio {
    border-color: var(--bg);
    background: var(--bg);
}

.option.selected .radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--ink);
    border-radius: 50%;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 12px;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--ink);
}

.form-input::placeholder {
    color: var(--ink-light);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 560px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

textarea.form-input {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
}

.form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.btn-back {
    background: transparent;
    border: none;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--ink-mute);
    cursor: pointer;
    padding: 10px 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s;
}

.btn-back:hover {
    color: var(--ink);
}

.btn-back:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-next {
    background: var(--ink);
    color: var(--bg);
    border: none;
    padding: 14px 26px;
    border-radius: 100px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, opacity 0.2s;
}

.btn-next:hover {
    transform: translateY(-1px);
}

.btn-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.form-success {
    display: none;
    text-align: center;
    padding: 40px 20px 20px;
}

.form-success.visible {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

.form-success .check {
    width: 64px;
    height: 64px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 28px;
}

.form-success h3 {
    font-family: var(--f-serif);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.form-success p {
    color: var(--ink-soft);
    max-width: 420px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.form-success small {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 20px;
}

/* ================================================
   FIX MOBILE : aucun débordement, tout lisible
   ================================================ */
/* Empêche TOUT débordement horizontal sur tous les écrans */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Les images ne débordent JAMAIS de leur parent */
img,
svg {
    max-width: 100%;
    height: auto;
}

/* Les textes longs ne cassent pas la mise en page */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Tablette et mobile large */
@media (max-width: 960px) {
    :root {
        --pad: 24px;
    }

    section {
        padding: 80px var(--pad);
    }

    .hero {
        padding: 120px var(--pad) 60px;
    }
}

/* Mobile — tout doit respirer, tout doit tenir */
@media (max-width: 640px) {
    :root {
        --pad: 20px;
    }

    section {
        padding: 64px var(--pad);
    }

    .hero {
        padding: 100px var(--pad) 48px;
    }

    /* H1 hero : la taille fluide doit être plafonnée bas */
    .hero h1 {
        font-size: clamp(32px, 8.5vw, 48px) !important;
        line-height: 1.08;
        letter-spacing: -0.02em;
    }

    /* Titres sections */
    .section-title,
    h2 {
        font-size: clamp(28px, 7vw, 40px) !important;
        line-height: 1.1;
    }

    /* CTA final giga titre */
    .cta h2 {
        font-size: clamp(32px, 8vw, 52px) !important;
        line-height: 1.08;
    }

    /* Footer wordmark trop gros par défaut */
    .foot-brand .wordmark-big {
        font-size: 40px !important;
    }

    /* Numéros géants 01, 02... dans méthode */
    .step-num,
    .service-num,
    .urg-num {
        font-size: 48px !important;
    }

    /* Chiffres hero (24 ans, etc.) */
    .stat-num {
        font-size: 36px !important;
    }

    /* Témoignage hero : plus petit */
    .hero-quote {
        padding: 20px 20px 20px 22px;
        margin-top: 24px;
    }

    .hero-quote p {
        font-size: 16px !important;
        line-height: 1.4;
    }

    .hero-quote::before {
        font-size: 56px;
        top: -10px;
        left: 10px;
    }

    /* Badges sous le H1 */
    .badge {
        font-size: 10px !important;
        padding: 6px 10px;
    }

    /* Offre audit (box à droite) */
    .audit-offer {
        padding: 24px;
    }

    /* Proof bar : wrap correctement, garder lisibilité */
    .proof-bar {
        padding: 16px var(--pad);
    }

    .proof-bar-inner {
        gap: 14px 18px;
        font-size: 10px;
        justify-content: flex-start;
    }

    .proof-bar span {
        gap: 8px;
    }

    /* Clients strip en haut : scroll horizontal au lieu de wrap */
    .clients-strip-inner {
        padding: 14px var(--pad);
    }

    .clients-names {
        flex-wrap: wrap;
        gap: 12px 18px;
        font-size: 11px;
    }

    .clients-label {
        font-size: 10px;
    }

    /* Logo header : tagline déjà cachée en < 820, on rapetisse le wordmark */
    .brand .wordmark {
        font-size: 28px !important;
    }

    /* Nav mobile : déjà cachée en < 960, OK */
    /* FAQ : plus de padding */
    details.faq {
        padding: 20px 0;
    }

    details.faq summary {
        font-size: 16px;
    }

    details.faq .faq-a {
        font-size: 15px;
    }

    /* Services / urgencies : texte lisible */
    .service h3,
    .urg h3 {
        font-size: 20px !important;
    }

    .service p,
    .urg p {
        font-size: 15px;
        line-height: 1.55;
    }

    /* Founder card : photo full width */
    .founder {
        gap: 32px;
    }

    .founder-photo {
        max-width: 100%;
    }

    /* Méthode : taille pas trop grosse */
    .step h3 {
        font-size: 18px !important;
    }

    .step p {
        font-size: 14px;
    }

    /* Clients grid : taille logos adaptée */
    .client {
        min-height: 140px;
    }

    .client-logo {
        padding: 18px 20px;
        min-height: 90px;
    }

    .client-logo img {
        max-width: 120px;
        max-height: 50px;
    }

    .client-meta {
        font-size: 9px;
        padding: 10px 14px;
    }

    /* CTA final */
    .cta-inner {
        gap: 24px;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 14px;
        padding: 14px 20px;
    }

    /* Footer */
    .foot-inner {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    .foot-sub,
    .foot-col h4,
    .foot-col a {
        font-size: 13px;
    }

    /* Modal : plein écran sur mobile */
    .modal {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        margin: 12px;
    }

    .modal-body {
        padding: 24px 20px;
    }

    .modal-header {
        padding: 20px;
    }

    /* Carousel dots : réduits */
    .quote-dots {
        gap: 4px;
        padding-top: 12px;
    }

    .quote-dot {
        width: 14px;
        height: 2px;
    }

    /* Fond gris beige → blanc sur mobile pour lisibilité maximale */
    .method-section {
        background: #fff !important;
    }

    .service:hover {
        background: #fff !important;
    }

    .client:hover {
        background: #fff !important;
    }
}

/* Très petits écrans (iPhone SE, etc.) */
@media (max-width: 380px) {
    :root {
        --pad: 16px;
    }

    .hero h1 {
        font-size: 28px !important;
    }

    .cta h2 {
        font-size: 28px !important;
    }

    .brand .wordmark {
        font-size: 24px !important;
    }
}