/* ============================================================
   OSCAR — Design v5 "Performance Print"
   Studio-grade. Asymmetric. Intentional.
   ----------------------------------------------------------------
   Direction: High-end B2B consulting meets Parisian design studio.
   No template structures. Typography as primary medium.
   Brand orange used as surgical accent only — never as fill.
   ============================================================ */

/* Google Fonts: IBM Plex Mono for metrics */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   A — DESIGN TOKENS
   ============================================================ */
:root {
    --d-black:       #0c0c0a;
    --d-ink:         #1a1918;
    --d-paper:       #f6f4f0;
    --d-white:       #ffffff;
    --d-mid:         #e4e1db;
    --d-muted:       rgba(26, 25, 24, 0.4);
    --d-border:      rgba(0, 0, 0, 0.07);
    --d-border-s:    rgba(0, 0, 0, 0.13);
    --d-orange:      #FF6B47;
    --d-gap:         2px;            /* tight bento seams */
    --d-mono:        'IBM Plex Mono', 'Courier New', monospace;
    --d-easing:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   B — GRAIN TEXTURE — disabled for perf (SVG filter on fixed causes repaint every frame)
   ============================================================ */
/* body::before removed */

/* ============================================================
   D — NAVIGATION (flat studio header)
   ============================================================ */
.navbar {
    background: rgba(246, 244, 240, 0.96) !important;
    border-bottom: 1px solid var(--d-border) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.navbar.scrolled {
    background: rgba(246, 244, 240, 0.99) !important;
}

/* ============================================================
   E — HERO (complete structural replacement)
   ============================================================ */
.hero {
    background: var(--d-paper) !important;
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* — Context bar (replaces hero-badge pill) — */
.hero-context {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 13px 48px;
    border-bottom: 1px solid var(--d-border);
    font-family: var(--d-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--d-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

.hero-context-qualiopi-logo {
    height: 18px !important;
    width: auto;
    opacity: 0.5;
    filter: none !important;
    vertical-align: middle;
}

.hero-context-cert {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-context-sep {
    opacity: 0.3;
}

/* — Stage (main asymmetric split) — */
.hero-stage {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 0;
    padding: 52px 48px 32px;
    align-items: start;
}

/* — Typography tower — */
.hero-type {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 40px;
}

.hero-title {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    font-size: unset !important;
    line-height: 1 !important;
    margin: 0 0 24px 0 !important;
    animation: none !important;
}

/* TRANS- : outline, massive */
.ht-outline {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(5.5rem, 13vw, 12rem) !important;
    text-transform: uppercase !important;
    color: transparent !important;
    -webkit-text-stroke: 2px var(--d-ink) !important;
    line-height: 0.87 !important;
    letter-spacing: -0.02em !important;
    display: block !important;
}

/* FORMEZ : filled, massive */
.ht-fill {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(5.5rem, 13vw, 12rem) !important;
    text-transform: uppercase !important;
    color: var(--d-ink) !important;
    line-height: 0.87 !important;
    letter-spacing: -0.02em !important;
    display: block !important;
    -webkit-text-fill-color: var(--d-ink) !important;
}

/* "vos équipes avec la" — small serif feel via italic DM Sans */
.ht-body {
    font-family: 'DM Sans', sans-serif !important;
    font-style: italic !important;
    font-weight: 300 !important;
    font-size: clamp(1rem, 2.2vw, 1.35rem) !important;
    color: var(--d-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    margin-top: 18px !important;
    margin-bottom: 2px !important;
    display: block !important;
}

/* "formation digitale" — gradient accent, medium */
.ht-accent {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    line-height: 1.05 !important;
    display: block !important;
}

.ht-accent .gradient-text {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* — Claim line — */
.hero-claim {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.95rem !important;
    color: var(--d-muted) !important;
    line-height: 1.65 !important;
    margin: 0 0 36px 0 !important;
    max-width: 480px;
}

.hero-claim strong {
    color: var(--d-ink) !important;
    font-weight: 600 !important;
}

/* — Actions — */
.hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: wrap;
}

.hero-link-discover {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--d-muted);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.2s ease;
    letter-spacing: 0.02em;
}

.hero-link-discover:hover {
    color: var(--d-ink);
}

/* — Media panel (right column) — */
.hero-media {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-video-main {
    width: 100%;
    aspect-ratio: 9/16;
    max-height: 480px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.hero-video-main .hero-video-placeholder {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    border-radius: 3px !important;
    background: var(--d-mid) !important;
    border: 1px solid var(--d-border) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    color: rgba(0,0,0,0.25) !important;
}

.hero-video-main .hero-video-placeholder i {
    font-size: 1.8rem !important;
    color: rgba(0,0,0,0.2) !important;
}

.hero-video-main .hero-video-placeholder span {
    font-family: var(--d-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,0.25) !important;
}

/* — Metrics bar (bottom) — */
.hero-metrics {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 48px;
    border-top: 1px solid var(--d-border);
    background: var(--d-white);
    flex-shrink: 0;
}

.hero-metric {
    display: flex;
    flex-direction: column;
    padding: 18px 28px;
    flex: 1;
    border-right: 1px solid var(--d-border);
}

.hero-metric-n {
    font-family: var(--d-mono) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--d-ink) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
    display: block !important;
    background: none !important;
    -webkit-text-fill-color: var(--d-ink) !important;
}

.hero-metric-l {
    font-family: var(--d-mono);
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--d-muted);
    display: block;
}

.hero-metric-qualiopi {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
}

.hero-metric-qualiopi .hero-qualiopi-logo {
    height: 28px !important;
    width: auto !important;
    opacity: 0.65 !important;
    filter: none !important;
    display: block !important;
}

.hero-metric-cta {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 12px 24px !important;
    border-radius: 2px !important;
    background: var(--d-ink) !important;
    color: white !important;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    -webkit-text-fill-color: white !important;
}

.hero-metric-cta:hover {
    background: #2d2c2a !important;
}

.hero-metric-cta span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.hero-metric-cta:hover span {
    transform: translateX(4px);
}

/* Hide old hero elements that are replaced */
.hero .hero-badge,
.hero .hero-stats,
.hero-visual,
.hero-cta-group,
.hero-subtitle,
.scroll-indicator {
    display: none !important;
}

/* ============================================================
   F — MARQUEE STRIP
   ============================================================ */
.oscar-marquee {
    overflow: hidden;
    border-top: 1px solid var(--d-border);
    border-bottom: 1px solid var(--d-border);
    background: var(--d-white);
    padding: 0;
    position: relative;
    z-index: 1;
}

.oscar-marquee::before,
.oscar-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
}

.oscar-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--d-white), transparent);
}

.oscar-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--d-white), transparent);
}

.oscar-marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    animation: marqueeScroll 28s linear infinite;
    width: max-content;
}

.oscar-marquee:hover .oscar-marquee-track {
    animation-play-state: paused;
}

.marquee-item {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-ink);
    padding: 14px 24px;
    white-space: nowrap;
    opacity: 0.65;
}

.marquee-sep {
    font-family: var(--d-mono);
    font-size: 0.6rem;
    color: var(--d-orange);
    opacity: 0.9;
    flex-shrink: 0;
}

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

/* ============================================================
   G — STATEMENT MOMENT (black full-bleed break)
   ============================================================ */
.oscar-statement {
    background: var(--d-black);
    position: relative;
    overflow: hidden;
    padding: 100px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ghost "PROCESS" backdrop */
.oscar-statement::before {
    content: 'PROCESS';
    position: absolute;
    right: -2%;
    bottom: -15%;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(8rem, 20vw, 20rem);
    font-weight: 700;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
    pointer-events: none;
    line-height: 0.9;
    letter-spacing: -0.03em;
    user-select: none;
}

.oscar-statement-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 860px;
}

.oscar-statement-text {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.oscar-stat-accent {
    color: var(--d-orange);
    -webkit-text-fill-color: var(--d-orange);
}

.oscar-statement-sub {
    display: inline-block;
    font-family: var(--d-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
    margin-top: 4px;
}

/* ============================================================
   H — CHAPTER NUMBERING SYSTEM
   Override section-badge with editorial counter labels
   ============================================================ */

/* Counter on all section-badges */
body { counter-reset: chapter; }

.section-badge {
    counter-increment: chapter;
    color: var(--d-muted) !important;
    font-family: var(--d-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.18em !important;
}

.section-badge::before {
    content: "0" counter(chapter) " —— " !important;
    font-family: var(--d-mono) !important;
    color: var(--d-orange) !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

/* ============================================================
   I — PROBLEM SECTION (editorial statement style)
   ============================================================ */
.problem-section {
    padding: 100px 0 !important;
}

.problem-content {
    max-width: 1000px;
}

.problem-title {
    font-size: clamp(3rem, 6vw, 5.5rem) !important;
    line-height: 0.95 !important;
    margin-top: 24px !important;
}

/* Horizontal rule below problem */
.problem-section::after {
    display: none !important;
}

/* ============================================================
   J — WHY BENTO (asymmetric grid, not symmetric cards)
   ============================================================ */
.why-section {
    background: var(--d-paper) !important;
    padding: 100px 0 !important;
}

.why-chapter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 48px;
}

.chapter-tag {
    font-family: var(--d-mono);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--d-orange);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.chapter-tag::before {
    content: attr(data-n) " —— ";
    font-weight: 600;
}

.why-heading {
    font-family: 'Oswald', sans-serif !important;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--d-ink) !important;
    line-height: 1.02 !important;
    max-width: 680px;
}

/* Bento grid */
.why-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: var(--d-gap);
}

.bento-card {
    background: var(--d-white);
    padding: 44px 36px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--d-border);
    transition: border-color 0.3s ease;
}

.bento-card:hover {
    border-color: var(--d-border-s);
}

/* Large statement card: 2 columns */
.bento-statement {
    grid-column: 1 / 3;
    background: var(--d-ink) !important;
    border: 1px solid transparent !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 44px 40px !important;
}

.bento-ghost-n {
    position: absolute;
    top: -20px;
    left: -10px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(8rem, 18vw, 16rem);
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
}

.bento-stmt-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
    max-width: 460px;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.bento-arrow {
    font-family: var(--d-mono);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.bento-arrow:hover {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Small why cards in bento */
.bento-sm {
    grid-column: span 1;
}

.why-bento .why-card {
    background: var(--d-white) !important;
    border: 1px solid var(--d-border) !important;
    border-top: 3px solid transparent !important;
    border-radius: 0 !important;
    transition: border-top-color 0.3s ease !important;
    box-shadow: none !important;
    padding: 36px 28px !important;
}

.why-bento .why-card:hover {
    border-top-color: var(--d-orange) !important;
    transform: none !important;
    box-shadow: none !important;
}

.why-bento .why-card h3 {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--d-ink) !important;
    margin-bottom: 10px !important;
}

.why-bento .why-card p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: var(--d-muted) !important;
    line-height: 1.6 !important;
}

.why-bento .why-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

.why-bento .why-icon i {
    color: var(--d-orange) !important;
    font-size: 1.1rem !important;
}

/* ============================================================
   K — HOW SECTION (step cards with chapter number treatment)
   ============================================================ */
.how-section {
    background: var(--d-paper) !important;
}

/* Kill the decorative gradient blob — doesn't fit the editorial direction */
.how-section::before {
    display: none !important;
}

.how-section::after {
    display: none !important;
}

.how-header {
    color: var(--d-ink) !important;
}

.how-header .question {
    color: var(--d-orange) !important;
    font-size: clamp(3.5rem, 8vw, 6rem) !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
}

.how-header h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
    color: var(--d-ink) !important;
    -webkit-text-fill-color: var(--d-ink) !important;
    background: none !important;
}

.step-card {
    background: var(--d-white) !important;
}

.step-number {
    color: var(--d-orange) !important;
    border-color: var(--d-orange) !important;
}

.step-card h3 {
    color: var(--d-ink) !important;
}

.step-card p {
    color: var(--d-muted) !important;
}

/* ============================================================
   K2 — PROCESS GRID (replaces zigzag timeline)
   ============================================================ */
.process-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid var(--d-border);
}

.process-header {
    margin-bottom: 48px;
}

.process-label {
    font-family: var(--d-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-orange);
    margin-bottom: 12px;
}

.process-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: var(--d-ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* 3-column grid — 2 rows × 3 steps */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--d-border);
    border: 1px solid var(--d-border);
}

.process-step {
    position: relative;
    background: var(--d-white);
    padding: 36px 32px;
    cursor: pointer;
    border: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background 0.2s ease, transform 0.2s ease;
    font-family: inherit;
}

.process-step:hover {
    background: var(--d-paper);
    transform: none;
    z-index: 1;
}

.process-step:hover .process-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Big monospace step number */
.process-n {
    font-family: var(--d-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--d-orange);
    letter-spacing: 0.05em;
    display: block;
}

.process-content {
    flex: 1;
}

.process-step-title {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: var(--d-ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.2;
}

.process-step-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--d-muted);
    line-height: 1.55;
    margin: 0;
}

.process-arrow {
    font-size: 1rem;
    color: var(--d-orange);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    align-self: flex-end;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
    .process-step {
        padding: 28px 24px;
    }
}

/* ============================================================
   L — CASES SECTION
   ============================================================ */
.cases-section {
    background: var(--d-paper) !important;
}

/* ============================================================
   M — FOOTER (full redesign with OSCAR watermark)
   ============================================================ */
.footer {
    background: var(--d-black) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

/* The enormous OSCAR type backdrop */
.footer-type-bg {
    position: absolute;
    bottom: -30px;
    left: -20px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(10rem, 30vw, 26rem);
    font-weight: 700;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.045);
    line-height: 0.85;
    letter-spacing: -0.03em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.footer-inner {
    position: relative;
    z-index: 1;
    padding-top: 80px !important;
    padding-bottom: 0 !important;
}

/* Signature row */
.footer-sig-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 48px;
}

.footer-sig {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82) !important;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0;
}

.footer-social {
    display: flex;
    gap: 8px;
}

.footer .social-link {
    color: rgba(255, 255, 255, 0.35) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

.footer .social-link:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: none !important;
}

/* Links grid */
.footer-links-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 60px;
}

.footer-col h4.footer-section-title {
    color: rgba(255, 255, 255, 0.35) !important;
    font-family: var(--d-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    font-weight: 400 !important;
}

.footer-col .footer-links li {
    list-style: none !important;
    border: none !important;
    padding: 5px 0 !important;
    background: transparent !important;
}

.footer-col .footer-links a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    letter-spacing: 0 !important;
}

.footer-col .footer-links a:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    transform: none !important;
    padding-left: 0 !important;
}

/* Footer bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 20px 0 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
}

.footer-bottom p {
    font-family: var(--d-mono) !important;
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.22) !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
}

.footer-bottom .footer-qualiopi {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.3;
}

.footer-bottom .footer-qualiopi img {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-bottom .footer-qualiopi span {
    font-family: var(--d-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
   N — SECTION TRANSITIONS (breathing moments)
   ============================================================ */

/* Thin rule separators between sections */
.problem-section + *,
.why-section + *,
.cases-section + * {
    border-top: 1px solid var(--d-border);
}

/* ============================================================
   O — GLOBAL CLEANUP (things that still look template-ish)
   ============================================================ */

/* Ensure all sections have left-aligned text by default */
.why-header,
.cases-header,
.how-header,
.formations-header,
.roi-content,
.solution-text,
.service-text {
    text-align: left !important;
}

.why-header h2,
.cases-header h2,
.how-header h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
}

/* Number spans in headings (gradient-text variants) */
.how-header .question {
    font-size: clamp(3.5rem, 8vw, 6rem) !important;
}

/* ============================================================
   P — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .hero-stage {
        grid-template-columns: 1fr 320px;
        gap: 0;
        padding: 48px 32px 24px;
    }

    .hero-context,
    .hero-metrics {
        padding-left: 32px;
        padding-right: 32px;
    }

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

    .bento-statement {
        grid-column: 1 / 3;
    }
}

/* ============================================================
   CLIENTS STRIP — Bandeau sobre "Ils nous font confiance"
   ============================================================ */

.oscar-clients-strip {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 28px 40px;
    background: #fafaf8;
    text-align: center;
}

.clients-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 20px;
}

.clients-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px 40px;
    flex-wrap: wrap;
}

.clients-logos span {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bbb;
    transition: color 0.2s ease;
}

.clients-logos span:hover {
    color: #888;
}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */

.testimonials-section {
    padding: 80px 0;
    background: #fff;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 48px;
}

.testimonials-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark, #1a1a1a);
    margin: 8px 0 12px;
    line-height: 1.1;
}

.testimonials-subtitle {
    font-size: 0.9rem;
    color: #888;
    max-width: 480px;
    margin: 0 auto;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: #fafaf8;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.testimonial-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.12);
}

.testimonial-stars {
    display: flex;
    gap: 3px;
    color: #FF6B47;
    font-size: 0.85rem;
}

.testimonial-text {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #444;
    font-style: italic;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: 16px;
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--d-orange);
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.testimonial-info strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-dark, #1a1a1a);
}

.testimonial-info span {
    font-size: 0.75rem;
    color: #888;
}

@media (max-width: 768px) {
    .hero-stage {
        grid-template-columns: 1fr;
        padding: 36px 24px 20px;
    }

    .hero-type {
        padding-right: 0;
    }

    .hero-media {
        display: none; /* Remove on mobile — metrics bar below is enough */
    }

    .hero-context,
    .hero-metrics {
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-metrics {
        flex-wrap: wrap;
        gap: 0;
    }

    .hero-metric {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid var(--d-border);
    }

    .hero-metric-cta {
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 16px 24px !important;
    }

    .ht-outline,
    .ht-fill {
        font-size: clamp(3.8rem, 14vw, 6rem) !important;
    }

    .oscar-statement {
        padding: 70px 24px;
    }

    .oscar-statement::before {
        display: none;
    }

    .why-bento {
        grid-template-columns: 1fr;
    }

    .bento-statement {
        grid-column: 1;
        min-height: 220px;
    }

    .footer-sig-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-links-row {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-type-bg {
        font-size: clamp(6rem, 22vw, 12rem);
        bottom: -10px;
    }
}

@media (max-width: 480px) {
    .hero-context {
        padding-left: 20px;
        padding-right: 20px;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.6rem;
    }

    .hero-stage {
        padding: 28px 20px 16px;
    }

    .hero-metrics {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-metric {
        flex: 1 1 100%;
        border-right: none;
    }

    .ht-outline,
    .ht-fill {
        font-size: clamp(3rem, 16vw, 4.8rem) !important;
    }

    /* How section: 2 colonnes sur 480px */
    .how-steps {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Statement section: padding réduit */
    .oscar-statement {
        padding: 60px 20px;
    }

    /* Footer */
    .footer-links-row {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-type-bg {
        font-size: clamp(5rem, 20vw, 9rem);
        bottom: -5px;
        left: -10px;
    }
}

@media (max-width: 375px) {
    /* Hero context bar : masquer les séparateurs pour libérer de la place */
    .hero-context {
        padding-left: 16px;
        padding-right: 16px;
        gap: 6px;
    }

    .hero-context-sep {
        display: none;
    }

    /* Hero stage */
    .hero-stage {
        padding: 20px 16px 12px;
    }

    /* Titre hero : légèrement réduit à 375px */
    .ht-outline,
    .ht-fill {
        font-size: clamp(2.8rem, 17vw, 4.2rem) !important;
    }

    /* Hero metrics */
    .hero-metrics {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-metric {
        padding: 14px 16px;
    }

    .hero-metric-n {
        font-size: 1.25rem !important;
    }

    /* How section: 1 colonne à 375px */
    .how-steps {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Statement */
    .oscar-statement {
        padding: 50px 16px;
    }

    /* Marquee: réduire la taille du texte pour éviter tout overflow */
    .marquee-item {
        font-size: 0.7rem;
        padding: 12px 16px;
    }

    /* Footer signature row */
    .footer-sig {
        font-size: clamp(1.5rem, 8vw, 2.2rem) !important;
    }

    /* Footer links : une seule colonne (déjà à 480px mais s'assurer) */
    .footer-links-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Footer watermark OSCAR : réduire encore */
    .footer-type-bg {
        font-size: clamp(4rem, 18vw, 7rem);
        bottom: 0;
        left: -8px;
    }

    /* Footer bottom */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 0 60px !important;
    }

    /* Clients strip */
    .clients-logos {
        flex-wrap: wrap;
        gap: 16px 24px;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SITE-WIDE VISUAL FIXES — April 2026 check
   1. Gradient virus → solid orange
   2. Statement section → cream (break triple-dark)
   3. Final CTA → solid black
   4. Process title → Oswald uppercase
   5. Process desc → more readable
   6. Duplicate how-section → supprimé (HTML)
   ============================================================ */

/* ── 1. Kill ALL gradient text — solid orange everywhere ─── */
/* Full list of every selector using -webkit-text-fill-color: transparent */
.gradient-text,
.problem-title .highlight,
.hero-stat-number,
.roi-stat .number,
.budget-benefit i,
.web-stat-number,
.result-value,
.custom-formation-icon {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--d-orange) !important;
    color: var(--d-orange) !important;
}

/* Hero title underline decoration — keep the orange line */
.hero-title .gradient-text::after {
    background: var(--d-orange) !important;
}

/* ── 2. Kill gradient CTA buttons — solid orange ─────────── */
.cta-primary,
.budget-submit,
.formation-cta,
.web-formation-cta {
    background: var(--d-orange) !important;
    background-image: none !important;
    color: #fff !important;
}

.cta-primary:hover,
.budget-submit:hover,
.formation-cta:hover,
.web-formation-cta:hover {
    background: #e5572f !important;
    background-image: none !important;
}

/* Final CTA section button — white bg, orange text (editorial contrast) */
.cta-button {
    background: #fff !important;
    background-image: none !important;
    color: var(--d-orange) !important;
}

/* ── 3. Statement section → cream to break dark sequence ─── */
.oscar-statement {
    background: #f5f0eb !important;
}

.oscar-statement-text {
    color: var(--d-black) !important;
}

.oscar-statement-sub {
    color: rgba(0, 0, 0, 0.38) !important;
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

.oscar-statement::before {
    opacity: 0.04 !important;
    color: var(--d-black) !important;
    -webkit-text-fill-color: var(--d-black) !important;
}

/* ── 4. Final CTA section → solid black, no arc-en-ciel ──── */
.cta-section {
    background: var(--d-black) !important;
    background-image: none !important;
}

.cta-section::before,
.cta-section::after {
    display: none !important;
}

.cta-section h2 {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.48) !important;
    font-size: 1rem !important;
}

/* cta-button layout — keep original, just override background/color above */

/* ── 5. Process title → Oswald uppercase ─────────────────── */
.process-title {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.2rem, 3.8vw, 3.2rem) !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    color: var(--d-black) !important;
}

/* ── 6. Process step descriptions → bigger & readable ─────── */
.process-step-desc {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    color: var(--d-ink) !important;
    opacity: 1 !important;
}

.process-step {
    min-height: 180px !important;
}

/* ── 7. Video placeholder boxes → masqués (pas de contenu) ─ */
.cta-video-container,
.roi-video,
.roi-video-placeholder {
    display: none !important;
}

/* ============================================================
   OSCAR CASES v2 — Editorial results board
   Dark background · oversized metrics · zero gradients
   Layout: full-bleed grid, 3 cols, 1px seams
   ============================================================ */

.oscar-cases {
    background: var(--d-black);
    overflow: hidden;
}

/* ── Intro header ─────────────────────────────────────────── */
.oscar-cases-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 80px 96px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.oscar-cases-eyebrow {
    display: block;
    font-family: var(--d-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--d-orange);
    margin-bottom: 22px;
}

.oscar-cases-heading {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(3.2rem, 5.5vw, 5.2rem) !important;
    line-height: 0.93 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}

.oscar-cases-intro-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 36px;
    padding-bottom: 6px;
}

.oscar-cases-intro-right > p {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.42);
    max-width: 400px;
    margin: 0;
}

.oscar-cases-tally {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
    border-left: 2px solid var(--d-orange);
}

.oscar-cases-tally-n {
    font-family: 'Oswald', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--d-orange);
}

.oscar-cases-tally-l {
    font-family: var(--d-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.3);
}

/* ── 3-col grid with 1px seams ────────────────────────────── */
.oscar-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Individual case card ─────────────────────────────────── */
.oscar-case {
    background: var(--d-black);
    padding: 68px 60px 56px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 3px solid transparent;
    transition:
        background 0.28s ease,
        border-color 0.28s ease;
    /* Reset blockquote defaults */
    margin: 0;
}

.oscar-case:hover {
    background: #111111;
    border-left-color: var(--d-orange);
}

/* Top: tag + company */
.oscar-case-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 56px;
}

.oscar-case-tag {
    font-family: var(--d-mono);
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--d-orange);
}

.oscar-case-company {
    font-family: var(--d-mono);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.02em;
}

/* The hero metric — takes up most of the visual space */
.oscar-case-metric {
    margin-bottom: 52px;
}

.oscar-case-value {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(4.5rem, 7vw, 7rem);
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -0.03em;
}

.oscar-case-label {
    display: block;
    font-family: var(--d-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    margin-top: 14px;
}

/* Thin orange rule between metric and quote */
.oscar-case-divider {
    width: 28px;
    height: 1px;
    background: var(--d-orange);
    opacity: 0.65;
    margin-bottom: 32px;
    flex-shrink: 0;
}

/* Quote */
.oscar-case-quote {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.52);
    margin: 0 0 36px;
    flex: 1;
    quotes: none;
    padding: 0;
    border: none;
}

/* Attribution */
.oscar-case-footer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
}

.oscar-case-footer strong {
    font-family: var(--d-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
}

.oscar-case-footer span {
    font-family: var(--d-mono);
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.28);
}

/* ── Bottom CTA bar ───────────────────────────────────────── */
.oscar-cases-bottom {
    border-top: none; /* seam from grid already */
}

.oscar-cases-bottom-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 52px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.oscar-cases-bottom-text {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 0;
}

.oscar-cases-bottom-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 38px;
    background: var(--d-orange);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.oscar-cases-bottom-cta:hover {
    background: #e5572f;
    transform: translateX(4px);
}

.oscar-cases-bottom-cta > span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.oscar-cases-bottom-cta:hover > span {
    transform: translateX(5px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .oscar-cases-intro {
        gap: 48px;
        padding: 96px 48px 72px;
    }

    .oscar-case {
        padding: 56px 44px 48px;
    }

    .oscar-case-value {
        font-size: clamp(4rem, 7vw, 6rem);
    }

    .oscar-cases-bottom-inner {
        padding: 52px 48px;
    }
}

@media (max-width: 860px) {
    .oscar-cases-intro {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 72px 32px 56px;
    }

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

    .oscar-case {
        padding: 52px 40px 44px;
    }

    .oscar-cases-bottom-inner {
        padding: 48px 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
}

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

    .oscar-cases-intro {
        padding: 56px 24px 48px;
    }

    .oscar-case {
        padding: 36px 24px 28px;
    }

    .oscar-case-value {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    .oscar-cases-bottom-inner {
        padding: 36px 24px;
    }
}

/* ============================================================
   BUDGET FORM — editorial dark restyle
   Kills: white card, rounded corners, rainbow gradient border,
          cream section bg. Replaces with flat dark editorial.
   ============================================================ */

/* Section background → solid black */
.budget-cta-section {
    background: var(--d-black) !important;
    padding: 120px 0 !important;
    position: relative !important;
}

/* Container → flat dark panel, left-accent border */
.budget-cta-container {
    background: #0d0d0d !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-left: 3px solid var(--d-orange) !important;
    padding: 72px 80px !important;
    max-width: 960px !important;
}

/* Kill the rainbow top bar — completely */
.budget-cta-container::before {
    display: none !important;
}

/* Badge → mono small caps */
.budget-cta-badge {
    background: transparent !important;
    border: 1px solid rgba(255, 107, 71, 0.35) !important;
    border-radius: 0 !important;
    color: var(--d-orange) !important;
    font-family: var(--d-mono) !important;
    font-size: 0.63rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    font-weight: 400 !important;
}

/* Heading → Oswald uppercase white */
.budget-cta-header h2 {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
    text-transform: uppercase !important;
    color: #fff !important;
    line-height: 1.0 !important;
    letter-spacing: -0.01em !important;
}

/* Subtext */
.budget-cta-header p {
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 0.92rem !important;
}

/* Form field labels → mono small caps */
.budget-form .form-group label {
    font-family: var(--d-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 400 !important;
}
.budget-form .form-group label i {
    color: var(--d-orange) !important;
}

/* Inputs / selects / textarea → dark with subtle border */
.budget-form input,
.budget-form select,
.budget-form textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: var(--d-mono) !important;
    font-size: 0.85rem !important;
    padding: 14px 18px !important;
    transition: border-color 0.2s ease !important;
}
.budget-form input:focus,
.budget-form select:focus,
.budget-form textarea:focus {
    outline: none !important;
    border-color: var(--d-orange) !important;
    background: rgba(255, 107, 71, 0.04) !important;
    box-shadow: none !important;
}
.budget-form input::placeholder,
.budget-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.18) !important;
}
.budget-form select option {
    background: #111 !important;
    color: #fff !important;
}

/* Benefits strip → no background, just a top rule */
.budget-benefits {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: transparent !important;
    margin-top: 48px !important;
    padding-top: 36px !important;
    gap: 48px !important;
}
.budget-benefit {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.budget-benefit h4 {
    font-family: var(--d-mono) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 600 !important;
}
.budget-benefit p {
    color: rgba(255, 255, 255, 0.32) !important;
    font-size: 0.78rem !important;
}
.budget-benefit i {
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--d-orange) !important;
    color: var(--d-orange) !important;
    font-size: 1.2rem !important;
}

/* ============================================================
   JOURNEY OVERHAUL — Phase 2
   1. Hide duplicate #solution section
   2. Why section — 3-card flat grid (bento-statement removed)
   3. Process section — standalone section wrapper
   4. Testimonials — 2-card compact layout
   ============================================================ */

/* ── 1. Kill #solution (duplicate of hero value prop) ────── */
#solution {
    display: none !important;
}

/* ── 2. Why section — 3 equal cards, single row ──────────── */
/* Bento-statement is gone — reset to clean 3-col grid */
.why-bento {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    gap: var(--d-gap) !important;
}

/* Upgrade the 3 cards: stronger title, left-aligned editorial */
.why-bento .why-card {
    padding: 48px 40px !important;
    border-left: 3px solid transparent !important;
    border-top: 3px solid rgba(0,0,0,0.07) !important;
    text-align: left !important;
    transition: border-color 0.25s ease, background 0.25s ease !important;
}
.why-bento .why-card:hover {
    border-left-color: var(--d-orange) !important;
    border-top-color: var(--d-orange) !important;
    background: #fdfcfb !important;
}
.why-bento .why-card h3 {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: var(--d-ink) !important;
    margin-bottom: 14px !important;
    text-align: left !important;
}
.why-bento .why-card p {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    color: rgba(0,0,0,0.52) !important;
    text-align: left !important;
}
.why-bento .why-icon {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 107, 71, 0.09) !important;
    border-radius: 0 !important;
    margin-bottom: 24px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
.why-bento .why-icon i {
    color: var(--d-orange) !important;
    font-size: 1.1rem !important;
}

/* Why heading update */
.why-heading {
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    color: var(--d-ink) !important;
}

/* ── 3. Process section — standalone ──────────────────────── */
.process-section-standalone {
    background: var(--d-paper) !important;
    padding: 100px 0 !important;
    overflow: hidden !important;
}
.process-section-standalone .process-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}
/* Process grid on cream bg */
.process-section-standalone .process-step {
    background: #fff !important;
}
.process-section-standalone .process-step:hover {
    background: #f9f9f9 !important;
}

/* ── 4. Testimonials — 2 cards, wider layout ──────────────── */
/* With 2 cards instead of 4, give them more room */
.testimonials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.testimonial-card {
    padding: 40px 36px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-top: 3px solid var(--d-orange) !important;
}
.testimonial-text {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #333 !important;
}

/* Testimonials heading */
.testimonials-section .testimonials-header h2 {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
    color: var(--d-ink) !important;
}

/* ============================================================
   VISUAL IDENTITY UNIFICATION
   Kill every SaaS-template remnant in the cream sections.
   Target: same typographic language site-wide.
   ============================================================ */

/* ── SERVICE SECTION ────────────────────────────────────────── */

/* Title: "ON S'OCCUPE DE TOUT" — was all-orange, now ink + orange word */
.service-text h2 {
    font-family: 'Oswald', sans-serif !important;
    font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.0 !important;
    color: var(--d-ink) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 40px !important;
}
.service-text .highlight {
    color: var(--d-orange) !important;
}

/* List items: kill gradient circle icons → clean left-border rows */
.service-list {
    gap: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}
.service-list li {
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    gap: 20px !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    align-items: center !important;
}
.service-list li i {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    background: rgba(255,107,71,0.09) !important;
    background-image: none !important;
    border-radius: 0 !important;
    color: var(--d-orange) !important;
    font-size: 0.9rem !important;
}
.service-list li strong {
    font-family: var(--d-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    color: var(--d-ink) !important;
    display: block !important;
    margin-bottom: 2px !important;
}
/* Image: remove rounded card look */
.service-image {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.service-card {
    border-radius: 0 !important;
    border-left: 3px solid var(--d-orange) !important;
}

/* ── ROI STATS ───────────────────────────────────────────────── */

/* Stat cards: kill white rounded shadow cards → flat editorial */
.roi-stat {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 28px 0 !important;
    border-top: 3px solid rgba(0,0,0,0.08) !important;
    border-left: none !important;
}
.roi-stat:first-child {
    border-left: 3px solid var(--d-orange) !important;
    padding-left: 24px !important;
}
.roi-stat .number {
    font-family: 'Oswald', sans-serif !important;
    font-size: clamp(2.8rem, 5vw, 4rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--d-ink) !important;
    color: var(--d-ink) !important;
}
.roi-stat .label {
    font-family: var(--d-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,0.38) !important;
    font-weight: 400 !important;
    margin-top: 8px !important;
}

/* ROI title: was default h2, give it proper Oswald treatment */
#roi h2 {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    text-transform: uppercase !important;
    line-height: 1.0 !important;
    color: var(--d-ink) !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    margin-bottom: 24px !important;
}
#roi h2 .highlight {
    color: var(--d-orange) !important;
    -webkit-text-fill-color: var(--d-orange) !important;
}

/* ROI CTA button: consistent with primary style */
.roi-cta .cta-primary {
    background: var(--d-orange) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 16px 36px !important;
    font-size: 0.9rem !important;
}

/* ── FORMATIONS ──────────────────────────────────────────────── */

/* Header: left-aligned, Oswald, no gradient */
.formations-header {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding-bottom: 48px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    margin-bottom: 56px !important;
}
.formations-header h2 {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    text-transform: uppercase !important;
    color: var(--d-ink) !important;
    line-height: 1.0 !important;
    margin-bottom: 0 !important;
}
.formations-header .gradient-text {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--d-orange) !important;
    color: var(--d-orange) !important;
}

/* Formation cards: flat editorial grid, no rounded/shadow */
.formation-card {
    border-radius: 0 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-top: 3px solid transparent !important;
    box-shadow: none !important;
    padding: 36px 32px !important;
    background: #fff !important;
    transition: border-top-color 0.22s ease, background 0.22s ease !important;
}
.formation-card:hover {
    border-top-color: var(--d-orange) !important;
    background: #fdfcfb !important;
    transform: none !important;
}
.formation-icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,107,71,0.08) !important;
    background-image: none !important;
    border-radius: 0 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.formation-icon i {
    color: var(--d-orange) !important;
    font-size: 1rem !important;
    background: none !important;
    -webkit-text-fill-color: var(--d-orange) !important;
}
.formation-card h3 {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--d-ink) !important;
    margin-bottom: 12px !important;
}
.formation-card p {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    color: rgba(0,0,0,0.5) !important;
}

/* ── WEB FORMATION FEATURED BLOCK ───────────────────────────── */

/* Kill gradient border → flat editorial card */
.web-formation-container {
    background: var(--d-ink) !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 4px solid var(--d-orange) !important;
    padding: 64px !important;
}
.web-formation-container::before {
    display: none !important;
}
/* Make text readable on dark bg */
.web-formation-container h3,
.web-formation-container .web-title {
    color: #fff !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
}
.web-formation-container p,
.web-formation-container li {
    color: rgba(255,255,255,0.55) !important;
}
/* Benefits card: cream-on-dark → dark editorial */
.web-formation-container .web-formation-benefits {
    background: rgba(255,255,255,0.05) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
}
.web-formation-container .web-formation-benefits h4 {
    color: rgba(255,255,255,0.7) !important;
    font-family: var(--d-mono) !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
}
/* List items: dark text → white */
.web-formation-container .web-formation-benefits li {
    color: rgba(255,255,255,0.65) !important;
    font-weight: 400 !important;
}
/* Icons: blue → orange */
.web-formation-container .web-formation-benefits li i {
    color: var(--d-orange) !important;
    -webkit-text-fill-color: var(--d-orange) !important;
}
/* Stat cards: cream-on-cream → dark editorial style */
.web-formation-container .web-stat {
    background: rgba(255,255,255,0.06) !important;
    background-image: none !important;
    border-radius: 0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-left: 3px solid rgba(255,107,71,0.4) !important;
}
.web-formation-container .web-stat-number {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
}
.web-formation-container .web-stat-label {
    color: rgba(255,255,255,0.45) !important;
    font-family: var(--d-mono) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
.web-formation-container .web-stat-icon {
    background: rgba(255,107,71,0.15) !important;
    background-image: none !important;
    border-radius: 0 !important;
}
.web-formation-container .web-stat-icon i {
    color: var(--d-orange) !important;
    -webkit-text-fill-color: var(--d-orange) !important;
}
.web-formation-badge {
    background: var(--d-orange) !important;
    background-image: none !important;
    border-radius: 0 !important;
    font-family: var(--d-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
    color: #fff !important;
}
.web-formation-features li i {
    color: var(--d-orange) !important;
    -webkit-text-fill-color: var(--d-orange) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
}

/* ============================================================
   BRAND PALETTE — Orange #FF6B47 → Blue-Lavande #6B8EFF
   Re-enable the gradient on high-impact moments to match
   the real OSCAR brand identity (Instagram / visual assets).
   Dark editorial sections keep solid orange.
   Cream sections: gradient CTAs + gradient accents.
   ============================================================ */

/* ── Hero: "FORMATION DIGITALE" gets the brand gradient ────── */
.hero-title .gradient-text,
.hero-title .highlight {
    background: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.hero-title .gradient-text::after {
    background: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
}

/* ── Primary CTAs: gradient on cream sections ──────────────── */
/* Hero CTA + ROI CTA + section CTAs on light bg */
.hero-cta-group .cta-primary,
.roi-cta .cta-primary,
.cta-button[href="#budget"],
.oscar-statement + * .cta-primary {
    background: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
    background-image: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
    color: #fff !important;
}

/* ── Marquee dots: gradient ────────────────────────────────── */
.marquee-item::before,
.marquee-dot {
    background: linear-gradient(135deg, var(--d-orange), #6B8EFF) !important;
}

/* ── Stats bar in hero: gradient numbers ──────────────────── */
.hero-stat-number {
    background: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── ROI stats: first stat gets gradient number ──────────── */
.roi-stat:first-child .number {
    background: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ── Why card icons: gradient bg ──────────────────────────── */
.why-bento .why-icon {
    background: linear-gradient(135deg, rgba(255,107,71,0.12) 0%, rgba(107,142,255,0.12) 100%) !important;
}

/* ── Formation icons: gradient bg ─────────────────────────── */
.formation-icon {
    background: linear-gradient(135deg, rgba(255,107,71,0.1) 0%, rgba(107,142,255,0.1) 100%) !important;
}

/* ── Process steps hover: gradient number ─────────────────── */
.process-step:hover .process-n {
    background: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Hero blob decoration — matches Instagram visual ────────── */
/* Add a soft gradient blob behind the hero video placeholder */
.hero-video-placeholder {
    background: linear-gradient(135deg, rgba(255,107,71,0.15) 0%, rgba(107,142,255,0.15) 100%) !important;
    border: none !important;
    position: relative !important;
}
.hero-video-placeholder::before {
    content: '' !important;
    position: absolute !important;
    width: 80% !important;
    height: 80% !important;
    background: radial-gradient(ellipse at 40% 60%, rgba(255,107,71,0.25) 0%, rgba(107,142,255,0.2) 50%, transparent 70%) !important;
    top: 10% !important;
    left: 10% !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* ── Social links in footer: gradient on hover ─────────────── */
.social-link:hover {
    background: linear-gradient(135deg, var(--d-orange) 0%, #6B8EFF 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ── Misc polish ────────────────────────────────────────────── */

/* Hero: video placeholder removed — full-width single column */
.hero-stage {
    grid-template-columns: 1fr !important;
}
.hero-type {
    max-width: 900px !important;
    padding-right: 0 !important;
}

/* Service heading: single line */
.service-text h2 {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    white-space: nowrap !important;
}
@media (max-width: 1200px) {
    .service-text h2 { white-space: normal !important; }
}

/* Remove excess bottom gap in formations before cases */
#formations {
    padding-bottom: 60px !important;
}

/* Formations header: keep "NOS" black, only accent word gets orange */
.formations-header h2 {
    color: var(--d-ink) !important;
}

/* Footer social icons: make them visible */
.social-link {
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.6) !important;
    border-radius: 0 !important;
}

/* ============================================================
   AUDIT FIXES — April 2026
   1. Formation section → cream bg (white cards need contrast)
   2. ROI stats → uniform ink (no gradient on first only)
   3. Testimonials → left-aligned heading
   4. Final CTA button → solid orange
   5. Process step cards → top-border hover accent
   ============================================================ */

/* ── 1. Formations background → cream ───────────────────── */
/* .formations-section has background: var(--color-white) inline;
   override to cream so white cards are visible */
#formations,
#formations.formations-section {
    background: var(--d-paper) !important;
}

/* ── 2. ROI stats → all 3 get the same ink treatment ──────── */
/* Previously only :first-child had a gradient — jarring. Unify. */
.roi-stat:first-child .number {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--d-ink) !important;
    color: var(--d-ink) !important;
}

/* ── 3. Testimonials → left-aligned heading ──────────────── */
.testimonials-section .testimonials-header {
    text-align: left !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.testimonials-section .testimonials-header h2,
.testimonials-section .testimonials-header .section-badge {
    text-align: left !important;
}
.testimonials-subtitle {
    margin-left: 0 !important;
    text-align: left !important;
    max-width: none !important;
}

/* ── 4. Final CTA button → solid orange, not ghost white ──── */
.cta-button {
    background: var(--d-orange) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
}
.cta-button:hover {
    background: #e5572f !important;
    color: #fff !important;
}

/* ── 5. Process step cards → top-border hover accent ──────── */
.process-section-standalone .process-step {
    border-top: 3px solid rgba(0,0,0,0.07) !important;
    transition: border-top-color 0.22s ease, background 0.22s ease !important;
}
.process-section-standalone .process-step:hover {
    border-top-color: var(--d-orange) !important;
    background: #fdfcfb !important;
}

/* ============================================================
   RESPONSIVE — FULL MOBILE / TABLET OVERRIDE (April 2026)
   Every grid with !important above must collapse on mobile.
   This block loads last → wins specificity wars.
   ============================================================ */

/* ── Kill horizontal overflow globally ──────────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
.oscar-marquee,
.marquee-container,
.clients-strip {
    overflow: hidden !important;
}

/* ── TABLET (≤1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-stage,
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .why-bento {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .step-grid,
    .cases-grid,
    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .roi-stats,
    .stats-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .web-formation-container {
        grid-template-columns: 1fr !important;
    }
}

/* ── MOBILE (≤768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Typography — scale down everything */
    .hero-title,
    .ht-outline,
    .ht-fill {
        font-size: clamp(2.5rem, 12vw, 4rem) !important;
        line-height: 0.95 !important;
    }
    .problem-title,
    .cases-header h2,
    .final-cta-section h2,
    section#contact h2,
    .testimonials-section h2,
    .service-text h2 {
        font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
        line-height: 1.1 !important;
    }
    h2, h3 {
        word-break: break-word !important;
    }

    /* Section padding — slim down */
    section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .container,
    .section-container,
    .hero-content,
    .problem-content,
    .bento-statement,
    .cases-content,
    .testimonials-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Stack all grids → 1 column */
    .why-bento,
    .testimonials-grid,
    .step-grid,
    .cases-grid,
    .service-grid,
    .roi-stats,
    .stats-strip,
    .hero-metrics,
    .hero-cta-group,
    .bento-grid,
    .problem-grid,
    .formations-grid,
    .footer-links-row,
    .final-cta-grid,
    .hero-stage,
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Flex rows → stack */
    .hero-cta-group,
    .btn-group,
    .cta-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .hero-cta-group .btn,
    .hero-cta-group a,
    .cta-group .btn,
    .cta-group a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Cards — reduce padding so content fits */
    .testimonial-card,
    .why-card,
    .step-card,
    .oscar-case,
    .web-stat,
    .web-formation-benefits,
    .bento-statement {
        padding: 24px 20px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Testimonials — single column, full width */
    .testimonials-grid {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
    }
    .testimonial-card {
        padding: 28px 22px !important;
    }
    .testimonial-text {
        font-size: 0.95rem !important;
    }

    /* Web formation — stack stats */
    .web-formation-container {
        padding: 32px 20px !important;
    }
    .web-formation-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .web-stat-number {
        font-size: 1.5rem !important;
    }

    /* Service / ROI */
    .roi-stat .number,
    .stats-strip .number {
        font-size: 2rem !important;
    }

    /* Marquee: smaller items */
    .marquee-item {
        font-size: 0.8rem !important;
        padding: 10px 14px !important;
    }

    /* Navbar: ensure logo doesn't shift */
    .nav-container {
        padding: 0 16px !important;
    }

    /* Floating CTA: smaller on mobile */
    .floating-cta {
        padding: 12px 18px !important;
        font-size: 0.8rem !important;
        bottom: 16px !important;
        right: 16px !important;
    }

    /* Images / media: never overflow */
    img, video, iframe, svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Prevent any absolute/transformed element from causing overflow */
    .hero::before,
    .hero::after {
        display: none !important;
    }
}

/* ── SMALL MOBILE (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {
    .hero-title,
    .ht-outline,
    .ht-fill {
        font-size: clamp(2.2rem, 13vw, 3.2rem) !important;
    }
    .problem-title,
    .cases-header h2,
    .final-cta-section h2,
    .service-text h2 {
        font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important;
    }
    section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .testimonial-card,
    .why-card,
    .step-card,
    .oscar-case {
        padding: 22px 18px !important;
    }
    .web-formation-stats {
        grid-template-columns: 1fr !important;
    }
    .web-stat-number {
        font-size: 1.4rem !important;
    }
    .hero-metric-n {
        font-size: 1.2rem !important;
    }
    /* Bento statement big number */
    .bento-statement .big-n,
    .statement-big {
        font-size: clamp(3rem, 20vw, 6rem) !important;
    }
}