/* ═══════════════════════════════════════════════════════════════
   WA.COMPANY — V9
   Refonte radicale : pas de toggle thème, alternance noir/blanc forcée,
   anti-grille (chaque section a son layout unique).
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   I. PALETTE & SYSTÈME COULEUR (no toggle)
   ──────────────────────────────────────────────── */
:root {
    --bg-white: #F5F4F0;
    --bg-black: #0A0908;
    --bg-black-deep: #050504;
    --text-on-white: #0A0A0A;
    --text-on-white-muted: #6B6B6B;
    --text-on-white-faint: #9C9C9C;
    --text-on-black: #FFFFFF;
    --text-on-black-muted: rgba(255,255,255,0.65);
    --text-on-black-faint: rgba(255,255,255,0.40);
    --accent: #E31E24;
    --accent-hover: #B81017;
    --accent-soft: rgba(227,30,36,0.10);
    --line-on-white: rgba(10,10,10,0.10);
    --line-on-white-strong: rgba(10,10,10,0.22);
    --line-on-black: rgba(255,255,255,0.10);
    --line-on-black-strong: rgba(255,255,255,0.22);

    --font-sans:  'Geist', system-ui, sans-serif;
    --font-mono:  'Chivo Mono', 'SF Mono', monospace;
    --font-serif: 'Instrument Serif', Georgia, serif;

    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --container: 1280px;
    --container-wide: 1440px;
    --pad-x: clamp(20px, 4vw, 64px);
}

/* Force la suppression du toggle thème (hérite des V7/V8 où il existe encore) */
.theme-toggle { display: none !important; }

/* Reset html data-theme overrides — on n'en a plus besoin */
html { color-scheme: only light dark; }

/* ────────────────────────────────────────────────
   II. UTILITY CLASSES — alternance blocs
   ──────────────────────────────────────────────── */
.block-white {
    background: var(--bg-white);
    color: var(--text-on-white);
    --bg-current: var(--bg-white);
    --text-current: var(--text-on-white);
    --text-muted-current: var(--text-on-white-muted);
    --text-faint-current: var(--text-on-white-faint);
    --line-current: var(--line-on-white);
    --line-strong-current: var(--line-on-white-strong);
}
.block-black {
    background: var(--bg-black);
    color: var(--text-on-black);
    --bg-current: var(--bg-black);
    --text-current: var(--text-on-black);
    --text-muted-current: var(--text-on-black-muted);
    --text-faint-current: var(--text-on-black-faint);
    --line-current: var(--line-on-black);
    --line-strong-current: var(--line-on-black-strong);
}

/* ────────────────────────────────────────────────
   III. BASE GLOBALE
   ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
html { scroll-behavior: smooth; }

/* ════════════════════════════════════════════════════════════════
   CUSTOM SCROLLBAR — rectangulaire 90°, rouge brand WA
   Webkit (Chrome/Safari/Edge) + Firefox standard
   ════════════════════════════════════════════════════════════════ */

/* Firefox : tous les conteneurs */
html {
    scrollbar-width: thin;
    scrollbar-color: #E31E24 rgba(0,0,0,0.06);
}
/* Sur les sections sombres (block-black) : couleur track adaptée */
.block-black {
    scrollbar-color: #E31E24 rgba(255,255,255,0.08);
}

/* Webkit — global : rectangle plein, dur, 100% carré */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #000;       /* track noir pur */
    border-radius: 0;
}
::-webkit-scrollbar-thumb {
    background: #E31E24;    /* rouge brand plein */
    border-radius: 0;       /* 0 round */
    border: 0;              /* 0 border */
    min-height: 40px;
    box-shadow: inset 0 0 0 0 transparent; /* override potentiels arrondis browser */
}
::-webkit-scrollbar-thumb:hover {
    background: #ff2a31;
}
::-webkit-scrollbar-thumb:active {
    background: #b9171c;
}
::-webkit-scrollbar-corner {
    background: #000;
}
/* Force angles vifs sur tous les coins */
::-webkit-scrollbar-button {
    display: none;          /* pas de flèches haut/bas */
    width: 0; height: 0;
}
body {
    font-family: var(--font-sans);
    background: var(--bg-white);
    color: var(--text-on-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* Eyebrow standard pour toutes les sections */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted-current);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.eyebrow .num { color: var(--accent); font-weight: 600; }
.eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 0;
    background: var(--accent);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

/* Reveal pattern */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease-out-quart), transform 0.8s var(--ease-out-quart);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ────────────────────────────────────────────────
   IV. HEADER (sticky, transparent au-dessus du hero)
   ──────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px var(--pad-x);
    background: transparent;
    transition: background 0.4s, backdrop-filter 0.4s, transform 0.4s var(--ease-out-quart);
}
.site-header.is-scrolled {
    background: rgba(10,9,8,0.78);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.site-header.is-on-white-section {
    background: rgba(245,244,240,0.85);
}
body.header-hidden .site-header {
    transform: translateY(-100%);
}

.site-header__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand-wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}
.site-header.is-on-white-section .brand-wa { color: var(--text-on-white); }
.brand-wa__dot {
    width: 8px; height: 8px;
    border-radius: 0;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(227,30,36,0.6);
    animation: brand-pulse 1.8s ease-in-out infinite;
}
@keyframes brand-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227,30,36,0.5); }
    50% { box-shadow: 0 0 0 10px rgba(227,30,36,0); }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-link {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    padding: 8px 12px;
    transition: color 0.2s;
}
.site-header.is-on-white-section .nav-link { color: var(--text-on-white-muted); }
.nav-link:hover { color: #fff; }
.site-header.is-on-white-section .nav-link:hover { color: var(--text-on-white); }
.nav-link--cta {
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    margin-left: 8px;
}
.site-header.is-on-white-section .nav-link--cta {
    color: var(--text-on-white);
    border-color: var(--line-on-white-strong);
}
.nav-link--cta:hover { background: var(--accent); color: #fff !important; border-color: var(--accent); }

@media (max-width: 900px) {
    .nav-link:not(.nav-link--cta) { display: none; }
}

/* ────────────────────────────────────────────────
   01. HERO — split asymétrique, bloc-black
   ──────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    padding: 140px var(--pad-x) 80px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
    pointer-events: none;
}
.hero__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(227,30,36,0.16) 0%, transparent 55%);
    pointer-events: none;
}
.hero__corner {
    position: absolute;
    width: 48px; height: 48px;
    pointer-events: none;
}
.hero__corner::before,
.hero__corner::after {
    content: "";
    position: absolute;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(227,30,36,0.5);
}
.hero__corner--tl { top: 28px; left: 28px; }
.hero__corner--tl::before { top: 0; left: 0; width: 100%; height: 1.5px; }
.hero__corner--tl::after  { top: 0; left: 0; width: 1.5px; height: 100%; }
.hero__corner--tr { top: 28px; right: 28px; }
.hero__corner--tr::before { top: 0; right: 0; width: 100%; height: 1.5px; }
.hero__corner--tr::after  { top: 0; right: 0; width: 1.5px; height: 100%; }
.hero__corner--bl { bottom: 28px; left: 28px; }
.hero__corner--bl::before { bottom: 0; left: 0; width: 100%; height: 1.5px; }
.hero__corner--bl::after  { bottom: 0; left: 0; width: 1.5px; height: 100%; }
.hero__corner--br { bottom: 28px; right: 28px; }
.hero__corner--br::before { bottom: 0; right: 0; width: 100%; height: 1.5px; }
.hero__corner--br::after  { bottom: 0; right: 0; width: 1.5px; height: 100%; }

.hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-wide);
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.hero__left { display: flex; flex-direction: column; gap: 32px; }
.hero__title {
    font-family: var(--font-sans);
    font-size: clamp(56px, 9vw, 140px);
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-weight: 500;
    color: #fff;
}
.hero__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.hero__title .dot { color: var(--accent); font-family: var(--font-sans); font-style: normal; }
.hero__title .line { display: block; opacity: 0; transform: translateY(20px); }
.hero.is-loaded .hero__title .line { opacity: 1; transform: translateY(0); transition: opacity 0.8s, transform 0.8s var(--ease-out-quart); }
.hero.is-loaded .hero__title .line:nth-child(2) { transition-delay: 0.15s; }
.hero.is-loaded .hero__title .line:nth-child(3) { transition-delay: 0.30s; }

.hero__ctas {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.hero__cta-primary {
    background: var(--accent);
    color: #fff;
    padding: 18px 28px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transition: background 0.25s, transform 0.25s var(--ease-out-quart), gap 0.25s var(--ease-out-quart);
}
.hero__cta-primary:hover {
    background: var(--accent-hover);
    transform: translateX(3px);
    gap: 18px;
}
.hero__cta-secondary {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    transition: color 0.25s;
}
.hero__cta-secondary:hover { color: #fff; }

.hero__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
}
.hero__counter {
    text-align: right;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: -0.04em;
    font-size: clamp(96px, 14vw, 220px);
    line-height: 0.85;
    color: #fff;
    position: relative;
}
.hero__counter .unit {
    font-size: 0.4em;
    color: var(--accent);
    margin-left: 4px;
}
.hero__counter-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    text-align: right;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 12px;
}
.hero__kpis {
    display: flex;
    gap: 32px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.hero__kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}
.hero__kpi-value {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
}
.hero__kpi-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .hero__right { align-items: flex-start; }
    .hero__counter, .hero__counter-label { text-align: left; }
    .hero__kpis { justify-content: flex-start; }
}

/* ────────────────────────────────────────────────
   02. LOGOS BANDEAU — marquee continu, bloc-white
   ──────────────────────────────────────────────── */
.logos {
    padding: 60px 0;
    overflow: hidden;
    position: relative;
}
.logos__label {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-on-white-faint);
    margin-bottom: 32px;
}
.logos__label::before,
.logos__label::after {
    content: "—";
    color: var(--text-on-white-faint);
    margin: 0 12px;
}
.logos__track {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    white-space: nowrap;
    animation: marquee 50s linear infinite;
    will-change: transform;
}
.logos:hover .logos__track {
    animation-play-state: paused;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.logos__logo {
    height: 56px;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.4);
    opacity: 0.45;
    transition: filter 0.3s, opacity 0.3s, transform 0.3s var(--ease-out-quart);
    flex-shrink: 0;
}
.logos__logo:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.08);
}

/* ────────────────────────────────────────────────
   03. LIVE REVEAL (faux YT live) — bloc-black
   préserve le markup existant ; on garantit le bg
   ──────────────────────────────────────────────── */
/* .live-reveal background managed by live-reveal.css */
/* ────────────────────────────────────────────────
   04. CAS CLIENTS — 2 hero magazine + "Et bien plus", bloc-white
   ──────────────────────────────────────────────── */
.cas {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    background: var(--surface-on-white, #fff);
    color: var(--text-on-white, #111);
}
.cas__inner {
    max-width: var(--container-wide, 1280px);
    margin: 0 auto;
}
.cas__header {
    text-align: center;
    margin-bottom: clamp(48px, 5vw, 72px);
}
.cas__header .eyebrow {
    display: inline-flex; align-items: baseline; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-on-white-muted, rgba(0,0,0,0.65));
    margin-bottom: 16px;
}
.cas__header .eyebrow .num { color: var(--accent); }
.cas__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
}
.cas__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}
.cas__title .dot { color: var(--accent); }

/* — Stack 1-per-row : chaque hero = photo+overlay à gauche, dashboard Stripe à droite — */
.cas__heroes {
    display: flex; flex-direction: column;
    gap: 0;
    margin-bottom: clamp(64px, 7vw, 96px);
    /* Conteneur des sticky cards */
    perspective: 1500px;
}
.cas-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    min-height: 460px;
    /* SCROLL-STACKING : chaque card se cale VERTICALEMENT CENTRÉE dans la viewport */
    position: sticky;
    /* Card fait ~460-540px → top centrant : (vh - 500)/2 ≈ 25vh sur 1080, 20vh sur 800 */
    top: clamp(80px, 22vh, 220px);
    margin-bottom: clamp(80px, 22vh, 300px);  /* "temps de scroll" entre chaque card */
    /* Ombre orientée vers le HAUT : sémantiquement la card est posée PAR-DESSUS la précédente.
       Évite que l'ombre vers le bas transparaisse à travers "Et bien plus" qui suit. */
    box-shadow: 0 -10px 40px -16px rgba(0,0,0,0.22);
    transform-origin: center top;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Légèrement décalé en z pour que la card SUIVANTE passe par-dessus avec une vraie ombre portée */
.cas-hero:nth-of-type(1) { z-index: 1; }
.cas-hero:nth-of-type(2) { z-index: 2; }
.cas-hero:nth-of-type(3) { z-index: 3; }
.cas-hero:nth-of-type(4) { z-index: 4; }

/* La dernière card : même margin-bottom que les autres maintenant que cas-more est DANS
   le wrapper sticky — cas-more viendra "couvrir" M-03 comme une 4e couche, ce qui élimine le vide */
.cas-hero:last-of-type {
    margin-bottom: clamp(80px, 22vh, 300px);
}
/* cas-more dans le wrapper sticky : pas position sticky, juste un z-index élevé
   pour qu'elle passe AU-DESSUS de M-03 sticky lors du scroll */
.cas__heroes > .cas-more {
    position: relative;
    z-index: 10;        /* au-dessus de toutes les cas-hero sticky */
    background: #fff;   /* nécessaire pour vraiment "couvrir" M-03 en transparence */
    margin-top: 0;      /* colle directement à M-03 sans gap */
}

/* Quand une card a été "dépassée" (la suivante l'a recouverte), on la fade légèrement */
.cas-hero.is-stacked {
    box-shadow: 0 -4px 30px -8px rgba(0,0,0,0.3);
}

/* Mobile : désactive le sticky (intrusif sur petit écran) */
@media (max-width: 900px) {
    .cas__heroes {
        gap: clamp(24px, 3vw, 40px);
    }
    .cas-hero {
        position: relative;
        top: auto;
        margin-bottom: 0;
    }
}
.cas-hero--reverse {
    grid-template-columns: 1fr 1.1fr;
}
.cas-hero--reverse .cas-hero__photo-block { order: 2; }
.cas-hero--reverse .cas-dash { order: 1; border-left: none; border-right: 1px solid rgba(0,0,0,0.08); }
.cas-hero--reverse .cas-stripe { order: 1; }

/* Bloc photo + overlay (gauche par défaut) */
.cas-hero__photo-block {
    position: relative;
    min-height: 460px;
    overflow: hidden;
}
.cas-hero__media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center top;
    filter: grayscale(85%) contrast(1.1) brightness(0.78);
    z-index: 1;
}
.cas-hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.65) 45%, transparent 75%);
}
.cas-hero__media--missing {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 14px;
    filter: none;
}
.cas-hero__media--missing::after {
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 65%);
}
.cas-hero__init {
    font: 400 clamp(80px, 9vw, 120px)/1 var(--font-serif);
    font-style: italic;
    color: rgba(255,255,255,0.32);
    z-index: 1;
}
.cas-hero__needs {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
    z-index: 1;
}
.cas-hero__overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: clamp(20px, 2vw, 32px);
    color: #fff;
    z-index: 2;
    display: flex; flex-direction: column; gap: 14px;
}
.cas-hero__matricule {
    font: 500 10px/1.3 var(--font-mono);
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}
.cas-hero__matricule .accent { color: var(--accent); }
.cas-hero__name {
    font-family: var(--font-sans);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #fff;
    margin: 0;
}
.cas-hero__name em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.cas-hero__name .dot { color: var(--accent); }
.cas-hero__desc {
    font: 400 14px/1.6 var(--font-sans);
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 90%;
}
.cas-hero__desc strong { color: #fff; font-weight: 500; }
.cas-hero__desc em { font-style: italic; }
.cas-hero__partner {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 9px/1.3 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 6px 10px;
    align-self: flex-start;
    margin-top: 4px;
}
.cas-hero__partner .accent { color: var(--accent); }

/* Bouton "▶ Verbatim vidéo" discret dans overlay cas hero */
.cas-hero__video {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 8px;
    padding: 8px 14px 8px 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.24);
    color: rgba(255,255,255,0.85);
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cas-hero__video:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.cas-hero__video-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    transition: background 0.25s, color 0.25s;
}
.cas-hero__video-icon svg {
    width: 10px;
    height: 10px;
    display: block;
    margin-left: 1px;
}
.cas-hero__video:hover .cas-hero__video-icon {
    background: #fff;
    color: var(--accent);
}

/* — Fake dashboard Stripe-style (droite par défaut) — */
.cas-dash {
    background: #fafaf8;
    border-left: 1px solid rgba(0,0,0,0.08);
    padding: clamp(24px, 2.5vw, 36px);
    display: flex; flex-direction: column; gap: 20px;
    position: relative;
    overflow: hidden;
}
.cas-dash::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
    opacity: 0.6;
}
.cas-dash__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px;
}
.cas-dash__head-left {
    display: flex; flex-direction: column; gap: 4px;
}
.cas-dash__label {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
}
.cas-dash__value {
    font: 500 clamp(40px, 5vw, 56px)/1 var(--font-sans);
    letter-spacing: -0.03em;
    color: var(--accent);
}
.cas-dash__live {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.14em;
    color: var(--accent);
    background: rgba(227,30,36,0.08);
    border: 1px solid rgba(227,30,36,0.25);
    padding: 5px 8px;
    border-radius: 0;
}
.cas-dash__live-dot {
    width: 6px; height: 6px;
    border-radius: 0;
    background: var(--accent);
    animation: dashLivePulse 1.6s ease-in-out infinite;
}
@keyframes dashLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.cas-dash__chart {
    flex: 1 1 auto;
    min-height: 140px;
    position: relative;
}
.cas-dash__svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
}
/* ── Anim chart refondue : declenchée sur scroll-in (.is-anim) ──── */
.cas-dash__chart .cas-dash__line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}
.cas-dash__chart .cas-dash__area    { opacity: 0; transform: translateY(8px); }
.cas-dash__chart .cas-dash__tooltip { opacity: 0; transform: translateY(-4px); }
.cas-dash__chart .cas-dash__marker  { opacity: 0; }
.cas-dash__chart .cas-dash__endgroup { opacity: 0; }
.cas-dash__chart .cas-dash__grid line { stroke-dasharray: 360; stroke-dashoffset: 360; }
.cas-dash__chart .cas-dash__vbands line { opacity: 0; }

/* Quand .is-anim → l'orchestration démarre */
.cas-dash__chart.is-anim .cas-dash__grid line {
    animation: dashGridDraw 0.9s ease-out 0.05s forwards;
}
.cas-dash__chart.is-anim .cas-dash__grid line:nth-child(2) { animation-delay: 0.15s; }
.cas-dash__chart.is-anim .cas-dash__grid line:nth-child(3) { animation-delay: 0.25s; }
.cas-dash__chart.is-anim .cas-dash__vbands line {
    animation: dashFadeIn 0.6s ease-out forwards;
}
.cas-dash__chart.is-anim .cas-dash__vbands line:nth-child(1) { animation-delay: 0.25s; }
.cas-dash__chart.is-anim .cas-dash__vbands line:nth-child(2) { animation-delay: 0.32s; }
.cas-dash__chart.is-anim .cas-dash__vbands line:nth-child(3) { animation-delay: 0.39s; }
.cas-dash__chart.is-anim .cas-dash__vbands line:nth-child(4) { animation-delay: 0.46s; }
.cas-dash__chart.is-anim .cas-dash__vbands line:nth-child(5) { animation-delay: 0.53s; }
.cas-dash__chart.is-anim .cas-dash__line {
    animation: dashDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.cas-dash__chart.is-anim .cas-dash__area {
    animation: dashAreaIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
.cas-dash__chart.is-anim .cas-dash__marker {
    animation: dashFadeIn 0.2s ease-out 0.4s forwards;
}
.cas-dash__chart.is-anim .cas-dash__tooltip {
    animation: dashTooltipIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s forwards;
}
.cas-dash__chart.is-anim .cas-dash__endgroup {
    animation: dashFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s forwards;
}
.cas-dash__chart.is-anim .cas-dash__endgroup .cas-dash__pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: dashCorePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s forwards;
}
.cas-dash__chart.is-anim .cas-dash__pulse-ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: dashRingPulse 1.8s ease-out 2.8s infinite;
}
.cas-dash__chart.is-anim .cas-dash__marker-motion {
    /* JS triggers beginElement() so animateMotion plays on scroll-in */
}

@keyframes dashDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes dashGridDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes dashFadeIn {
    to { opacity: 1; }
}
@keyframes dashAreaIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dashTooltipIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dashCorePop {
    0%   { transform: scale(0.3); }
    100% { transform: scale(1); }
}
@keyframes dashRingPulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0;   }
}

.cas-dash__foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.cas-dash__period {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.08em;
    color: rgba(0,0,0,0.65);
    text-transform: uppercase;
}
.cas-dash__tags {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.cas-dash__tags li {
    font: 500 9px/1 var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--accent);
    background: rgba(227,30,36,0.06);
    padding: 5px 7px;
}

/* — "Et bien plus" : 4 mini-cards en row compacte — */
.cas-more {
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid rgba(0,0,0,0.1);
}
.cas-more__head {
    display: flex; align-items: baseline; gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.cas-more__label {
    font: 400 clamp(22px, 2.5vw, 28px)/1 var(--font-serif);
    font-style: italic;
    color: var(--text-on-white, #111);
}
.cas-more__sub {
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.62);
}
.cas-more__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.cas-more__item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.025);
    border: 1px solid rgba(0,0,0,0.08);
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.cas-more__item:hover {
    border-color: var(--accent);
    background: rgba(227,30,36,0.04);
    transform: translateY(-2px);
}
.cas-more__photo {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    border-radius: 0;
    background-size: cover; background-position: center;
    background-color: #1a1a1a;
    filter: grayscale(100%) contrast(1.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
    font: 500 14px/1 var(--font-mono);
    letter-spacing: 0.05em;
}
.cas-more__photo--missing { filter: none; }
.cas-more__info {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.cas-more__name {
    font: 500 13px/1.3 var(--font-sans);
    color: var(--text-on-white, #111);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cas-more__verticale {
    font: 500 10px/1.3 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .cas-hero,
    .cas-hero--reverse { grid-template-columns: 1fr; min-height: auto; }
    .cas-hero--reverse .cas-hero__photo-block { order: 0; }
    .cas-hero--reverse .cas-dash { order: 1; border-right: none; border-left: none; border-top: 1px solid rgba(0,0,0,0.08); }
    .cas-hero .cas-dash { border-left: none; border-top: 1px solid rgba(0,0,0,0.08); }
    .cas-hero__photo-block { aspect-ratio: 3/4; min-height: auto; }
    .cas-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cas-more__grid { grid-template-columns: 1fr; }
    .cas-hero__name { font-size: clamp(32px, 8vw, 40px); }
    .cas-dash__value { font-size: clamp(36px, 9vw, 44px); }
}

/* ────────────────────────────────────────────────
   04.5 PREUVES — screens Stripe / GoCardless, bloc-black
   ──────────────────────────────────────────────── */
.preuves {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    background: #000;
    color: #fff;
}
.preuves__inner { max-width: 1280px; margin: 0 auto; }
.preuves__head { margin-bottom: 64px; max-width: 720px; }
.preuves__head .eyebrow {
    display: inline-flex; align-items: baseline; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
}
.preuves__head .eyebrow .num { color: var(--accent); }
.preuves__title {
    font: 400 clamp(40px, 6vw, 80px)/0.95 var(--font-display, var(--font-serif));
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    color: #fff;
}
.preuves__title em { font-style: italic; color: var(--accent); }
.preuves__title .dot { color: var(--accent); }
.preuves__lead {
    font: 400 18px/1.55 var(--font-sans, var(--font-serif));
    color: rgba(255,255,255,0.78);
}
.preuves__lead strong { color: #fff; font-weight: 500; }
/* PREUVES — layout 2 colonnes : head sticky à gauche, stack scattered à droite */
.preuves--split .preuves__inner {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}
.preuves--split .preuves__head {
    position: sticky;
    top: clamp(40px, 12vh, 140px);
    margin-bottom: 0;
    max-width: none;
}
.preuves__stack {
    position: relative;
    width: 100%;
    aspect-ratio: 5/6;
    min-height: 640px;
    perspective: 1200px;
}
.preuves__lead em {
    font-style: italic;
    color: var(--accent);
}

@media (max-width: 900px) {
    .preuves--split .preuves__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .preuves--split .preuves__head {
        position: relative;
        top: auto;
    }
    .preuves__stack {
        aspect-ratio: auto;
    }
}

/* Chaque card flotte en absolute */
.preuve-card {
    position: absolute;
    width: clamp(180px, 46%, 300px);
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.35),
        0 18px 48px -12px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.04);
    transform-origin: center;
    will-change: transform;
    /* base : rotation custom + lift initial 0 — JS modifie le translate */
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                z-index 0s linear 0.3s;
    cursor: default;
    filter: grayscale(100%);
}
.preuve-card:hover {
    filter: grayscale(0%);  /* couleur originale au survol */
}

/* Quand le JS push la card, on prend ses --tx/--ty/--rh (offset + rotation extra) */
.preuve-card[data-push] {
    transform:
        translate(-50%, -50%)
        translate(var(--tx, 0px), var(--ty, 0px))
        rotate(calc(var(--r, 0deg) + var(--rh, 0deg)))
        scale(var(--sc, 1));
}

.preuve-card:hover {
    z-index: 99 !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.62),
        0 32px 80px -16px rgba(0,0,0,0.85),
        0 0 0 1px rgba(227,30,36,0.55);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Image full — contain pour éviter le crop haut/bas des dashboards Stripe (fix Loom Jean 1:24) */
.preuve-card__shot {
    width: 100%;
    aspect-ratio: 16/10;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    position: relative;
}
.preuve-card__shot::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.78) 100%);
    pointer-events: none;
}

/* Overlay bas */
.preuve-card__overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 3px;
    color: #fff;
    z-index: 2;
}
.preuve-card__palier {
    font: 400 clamp(22px, 1.9vw, 30px)/0.95 var(--font-display, var(--font-serif));
    font-style: italic;
    color: #fff;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.preuve-card__detail {
    font: 500 9.5px/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.82);
}

/* Tape effet (petit bord) */
.preuve-card::before {
    content: "";
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(2deg);
    width: 60px; height: 18px;
    background: linear-gradient(180deg, rgba(245,241,235,0.85), rgba(245,241,235,0.6));
    border: 1px solid rgba(0,0,0,0.04);
    z-index: 3;
    pointer-events: none;
}

/* Mobile : retour à un layout vertical simple (fix Loom Jean 1:57 · section bloque le mobile) */
@media (max-width: 900px) {
    .preuves__stack {
        position: relative;
        aspect-ratio: auto;
        min-height: 0;
        max-width: 480px;
        margin: 0 auto;
        display: flex; flex-direction: column; gap: 28px;
        align-items: center;
        perspective: none;
    }
    .preuve-card,
    .preuve-card[data-push] {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        max-width: 380px;
        /* neutralise le JS de repulsion : ignore tx/ty/rh/sc */
        transform: rotate(var(--r, 0deg)) !important;
        transition: none;
    }
    .preuve-card:hover {
        transform: rotate(var(--r, 0deg)) !important;
        z-index: auto !important;
    }
    .preuve-card__shot {
        aspect-ratio: 16/9;
    }
}

/* ────────────────────────────────────────────────
   04.7 MOMENTS DE GLOIRE — gros chiffres "faire rêver", bloc-white
   ──────────────────────────────────────────────── */
.gloire {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    background: var(--surface-on-white, #fff);
    color: var(--text-on-white, #111);
}
.gloire__inner { max-width: 1280px; margin: 0 auto; }
.gloire__head { text-align: center; margin-bottom: 64px; max-width: 720px; margin-left: auto; margin-right: auto; }
.gloire__head .eyebrow {
    display: inline-flex; align-items: baseline; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
    margin-bottom: 16px;
}
.gloire__head .eyebrow .num { color: var(--accent); }
.gloire__title {
    font: 500 clamp(36px, 5vw, 64px)/0.95 var(--font-sans);
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}
.gloire__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.gloire__title .dot { color: var(--accent); }
.gloire__lead {
    font: 400 16px/1.55 var(--font-sans);
    color: rgba(0,0,0,0.65);
}
.gloire__lead strong { color: var(--text-on-white, #111); font-weight: 500; }
.gloire__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.1);
}
.gloire-card {
    background: #fff;
    padding: 22px 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
    transition: background 0.25s;
    min-width: 0;
}
.gloire-card:hover { background: rgba(227,30,36,0.03); }
.gloire-card__rec {
    font: 500 9px/1 var(--font-mono);
    letter-spacing: 0.14em;
    color: var(--accent);
}
.gloire-card__value {
    font: 400 clamp(42px, 4.5vw, 60px)/0.95 var(--font-serif);
    font-style: italic;
    color: var(--accent);
    letter-spacing: -0.025em;
    white-space: nowrap;
}
.gloire-card__unit {
    font: 500 11px/1.3 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
}
.gloire-card__detail {
    font: 400 12px/1.5 var(--font-sans);
    color: rgba(0,0,0,0.7);
    margin: 4px 0 0;
}
.gloire-card__side {
    margin-top: auto;
    padding-top: 12px;
    font: 500 9px/1.3 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.62);
    border-top: 1px solid rgba(0,0,0,0.08);
}
@media (max-width: 700px) {
    .gloire__grid { grid-template-columns: repeat(2, 1fr); }
    .gloire-card { padding: 24px 18px 20px; }
    .gloire-card__value { font-size: clamp(44px, 9vw, 64px); }
}
@media (max-width: 460px) {
    .gloire__grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────
   05. POURQUOI WA — escalier diagonal, bloc-black
   ──────────────────────────────────────────────── */
.why {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    position: relative;
    overflow: hidden;
}
.why__inner {
    max-width: var(--container);
    margin: 0 auto;
}
.why__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 80px;
    flex-wrap: wrap;
    gap: 16px;
}
.why__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
.why__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.why__title .dot { color: var(--accent); }

.why__stairs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.why-step {
    display: grid;
    grid-template-columns: 200px 80px 1fr;
    gap: 24px;
    align-items: center;
    padding: 40px 0;
    border-top: 1px solid var(--line-on-black);
}
.why-step:last-child { border-bottom: 1px solid var(--line-on-black); }
/* Décalage en escalier (4 marches) */
.why-step:nth-child(1) { padding-left: 0; }
.why-step:nth-child(2) { padding-left: clamp(30px, 6vw, 100px); }
.why-step:nth-child(3) { padding-left: clamp(60px, 12vw, 200px); }
.why-step:nth-child(4) { padding-left: clamp(90px, 18vw, 300px); }

.why-step__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(80px, 10vw, 160px);
    line-height: 0.9;
    color: var(--accent);
    font-weight: 400;
}
.why-step__icon {
    width: 56px;
    height: 56px;
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.why-step__icon svg { width: 28px; height: 28px; }
.why-step__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.why-step__title {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
}
.why-step__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.why-step__body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
    max-width: 480px;
}
.why-step__body strong { color: #fff; font-weight: 500; }

@media (max-width: 900px) {
    .why-step { grid-template-columns: 1fr; gap: 16px; padding-left: 0 !important; }
    .why-step__num { font-size: 72px; }
}

/* ────────────────────────────────────────────────
   06. MÉTHODE — timeline horizontale, bloc-white
   ──────────────────────────────────────────────── */
.method {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    overflow: hidden;
}
.method__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
}
.method__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 80px;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line-on-white);
}
.method__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
.method__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.method__title .dot { color: var(--accent); }
.method__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--text-on-white-muted);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}

.method__timeline {
    position: relative;
    padding: 80px 0;
}
.method__line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--line-on-white);
    transform: translateY(-50%);
}
.method__line::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: var(--accent);
    width: 0;
    transition: width 1.2s var(--ease-out-quart);
}
.method__timeline.is-visible .method__line::after { width: 100%; }

.method__nodes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
}
.method-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.method-node__dot {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: var(--bg-white);
    border: 2px solid var(--text-on-white);
    position: relative;
    z-index: 2;
    margin: 0 auto;
    transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out-quart);
}
.method-node.is-current .method-node__dot {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.3);
    box-shadow: 0 0 0 8px var(--accent-soft);
}
/* Alternance contenu au-dessus / en-dessous */
.method-node__content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(180px, 18vw, 240px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.method-node:nth-child(odd) .method-node__content {
    bottom: calc(100% + 32px);
}
.method-node:nth-child(even) .method-node__content {
    top: calc(100% + 32px);
}
.method-node__time {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--text-on-white-faint);
    text-transform: uppercase;
}
.method-node__phase {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
}
.method-node__title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-on-white);
    line-height: 1.15;
}
.method-node__desc {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-on-white-muted);
}
.method-node__desc strong { color: var(--text-on-white); font-weight: 500; }

@media (max-width: 900px) {
    .method__timeline { padding: 0; }
    .method__line { display: none; }
    .method__nodes { grid-template-columns: 1fr; gap: 40px; }
    .method-node__content { position: relative; left: auto; transform: none; bottom: auto !important; top: auto !important; width: 100%; padding-left: 32px; border-left: 2px solid var(--accent); margin-top: 0 !important; }
    .method-node__dot { position: absolute; left: -7px; top: 8px; margin: 0; }
    .method-node { display: block; position: relative; }
}

/* ────────────────────────────────────────────────
   07. SERVICES — alternance L/R, bloc-black
   ──────────────────────────────────────────────── */
.services {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.services__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
}
.services__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 80px;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line-on-black);
}
.services__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
.services__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.services__title .dot { color: var(--accent); }
.services__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}

.service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    padding: 80px 0;
    border-bottom: 1px solid var(--line-on-black);
}
.service-row:last-child { border-bottom: none; }
.service-row--reversed { direction: rtl; }
.service-row--reversed > * { direction: ltr; }

.service-row__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.service-row__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--accent);
    font-weight: 600;
}
.service-row__name {
    font-family: var(--font-sans);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #fff;
}
.service-row__name .punct { color: var(--accent); }
.service-row__name em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.service-row__body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 440px;
}
.service-row__body strong { color: #fff; font-weight: 500; }
.service-row__list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.service-row__list li {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #fff;
    padding-left: 18px;
    position: relative;
}
.service-row__list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.service-row__visual {
    aspect-ratio: 1/1;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-on-black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.service-row__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
.service-row__icon {
    width: 60%;
    height: 60%;
    color: var(--accent);
    opacity: 0.85;
    z-index: 2;
    transition: transform 0.4s var(--ease-out-quart);
}
.service-row__visual:hover .service-row__icon { transform: scale(1.08) rotate(-3deg); }

@media (max-width: 900px) {
    .service-row { grid-template-columns: 1fr; padding: 40px 0; }
    .service-row--reversed { direction: ltr; }
    .service-row__visual { aspect-ratio: 16/10; max-width: 100%; }
}

/* ────────────────────────────────────────────────
   08. TÉMOIGNAGES — citation centrale + cascade photos, bloc-white
   ──────────────────────────────────────────────── */
.testimonials {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    position: relative;
    overflow: hidden;
}
.testimonials__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}
.testimonials__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.testimonials__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-on-white-muted);
}
.testimonials__eyebrow .num { color: var(--accent); }
.testimonials__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin: 0;
}
.testimonials__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.testimonials__title .dot { color: var(--accent); }
.testimonials__quote {
    position: relative;
    padding-top: 80px;
}
.testimonials__quote::before {
    content: "“";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-serif);
    font-size: 240px;
    line-height: 1;
    color: var(--accent);
    font-style: italic;
}
.testimonials__quote-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(28px, 3.8vw, 52px);
    line-height: 1.25;
    color: var(--text-on-white);
    max-width: 900px;
    margin: 0 auto;
    transition: opacity 0.5s, transform 0.5s var(--ease-out-quart);
}
.testimonials__quote-text.is-out { opacity: 0; transform: translateY(20px); }
.testimonials__author {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
}
.testimonials__author-photo {
    width: 64px;
    height: 64px;
    border-radius: 0;
    background-size: cover;
    background-position: center top;
    background-color: #E8E4DC; /* fallback si photo missing (Elodie, Robin, Jody à fournir) */
    filter: grayscale(100%) contrast(1.15);
    margin-bottom: 6px;
    border: 2px solid var(--accent);
}
/* Bouton "▶ Voir le témoignage vidéo" (Wistia modal) */
.testimonials__video-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 18px;
    background: transparent;
    color: var(--text-on-white);
    border: 1px solid var(--text-on-white);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.testimonials__video-cta:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.testimonials__video-cta.is-hidden { display: none; }
.testimonials__video-cta-icon {
    color: var(--accent);
    font-size: 13px;
    line-height: 1;
    transition: color 0.2s;
}
.testimonials__video-cta:hover .testimonials__video-cta-icon { color: #fff; }

/* Wistia modal · dialog natif */
.wistia-modal {
    padding: 0;
    border: 0;
    background: transparent;
    width: min(92vw, 960px);
    max-width: 960px;
    max-height: none;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    outline: 0;
    overflow: visible;
    color: #fff;
}
.wistia-modal::backdrop {
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
}
.wistia-modal:not([open]) { display: none !important; }
.wistia-modal[open] {
    display: block;
}
.wistia-modal__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.wistia-modal__close:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.wistia-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.9);
}
.wistia-modal--portrait {
    width: min(92vw, 420px);
    max-width: 420px;
}
.wistia-modal--portrait .wistia-modal__frame {
    aspect-ratio: 9/16;
}

/* Horloge Dubai live (dans yt-desc de la section live) */
.yt-desc__meta {
    margin-bottom: 10px;
}
.yt-desc__clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
.yt-desc__clock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(227,30,36,0.2);
    animation: waDubaiPulse 1.6s ease-in-out infinite;
}
@keyframes waDubaiPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(227,30,36,0.2); }
    50%      { opacity: 0.5; box-shadow: 0 0 0 5px rgba(227,30,36,0.05); }
}
.yt-desc__clock-label { color: rgba(255,255,255,0.55); }
.yt-desc__clock-value {
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.yt-desc__clock-tz { color: rgba(255,255,255,0.35); font-size: 9px; }
.wistia-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.testimonials__author-name {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-on-white);
}
.testimonials__author-role {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--text-on-white-muted);
    text-transform: uppercase;
}
.testimonials__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 0;
}
.testimonials__dots {
    display: flex;
    gap: 8px;
}
.testimonials__dot {
    width: 32px;
    height: 3px;
    background: var(--line-on-white-strong);
    transition: background 0.25s;
    cursor: pointer;
}
.testimonials__dot.is-active { background: var(--accent); }
.testimonials__arrow {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-on-white-strong);
    color: var(--text-on-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.testimonials__arrow:hover {
    background: var(--text-on-white);
    color: var(--bg-white);
    border-color: var(--text-on-white);
}
.testimonials__arrow svg { width: 18px; height: 18px; }

/* Phone mockup (iPhone-like, portrait 9/19.5) — slot dédié dans le carousel */
.testimonials__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 210px;
    margin: 0 auto;
}
.testimonials__phone[hidden] { display: none; }
.testimonials__phone-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19.5;
    background: #0a0a0a;
    border-radius: 32px;
    padding: 10px;
    box-shadow:
        0 24px 48px -18px rgba(0,0,0,0.35),
        0 0 0 2px rgba(255,255,255,0.04) inset;
}
.testimonials__phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 20px;
    background: #000;
    border-radius: 12px;
    z-index: 2;
}
.testimonials__phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #000;
}
.testimonials__phone-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.testimonials__phone-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.testimonials__phone-name {
    font: 500 15px/1.2 var(--font-sans);
    color: var(--text-on-white);
}
.testimonials__phone-role {
    font: 500 10px/1.2 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-on-white-muted);
}

/* Laptop mockup (landscape 16:9) — pour vidéos compilation/paysage */
.testimonials__laptop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
.testimonials__laptop[hidden] { display: none; }
.testimonials__laptop-frame {
    position: relative;
    width: 100%;
    background: #0a0a0a;
    border-radius: 10px 10px 4px 4px;
    padding: 12px 12px 14px;
    box-shadow: 0 24px 48px -18px rgba(0,0,0,0.35);
}
.testimonials__laptop-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 3px;
    overflow: hidden;
    background: #000;
}
.testimonials__laptop-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Base laptop : trapèze fin qui suggère le châssis */
.testimonials__laptop-base {
    width: 108%;
    height: 6px;
    margin-top: -4px;
    background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 12px -4px rgba(0,0,0,0.25);
}
.testimonials__laptop-base::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 2px auto 0;
    border-radius: 0 0 6px 6px;
    background: #050505;
}
.testimonials__laptop-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.testimonials__laptop-name {
    font: 500 15px/1.2 var(--font-sans);
    color: var(--text-on-white);
}
.testimonials__laptop-role {
    font: 500 10px/1.2 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-on-white-muted);
}

/* Photos cascade en arrière-plan asymétriques */
.testimonials__cascade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.06;
}
.testimonials__cascade-photo {
    position: absolute;
    width: 220px;
    height: 280px;
    background-size: cover;
    background-position: center top;
    filter: grayscale(100%);
}
.testimonials__cascade-photo:nth-child(1) { top: 10%; left: -60px; transform: rotate(-6deg); }
.testimonials__cascade-photo:nth-child(2) { bottom: 15%; right: -40px; transform: rotate(4deg); }
.testimonials__cascade-photo:nth-child(3) { top: 35%; right: 8%; transform: rotate(-2deg); width: 180px; height: 230px; }

/* ────────────────────────────────────────────────
   09. DIRECTION + ÉQUIPE — asymétrique + carte Dubai, bloc-black
   ──────────────────────────────────────────────── */
.direction {
    padding: clamp(80px, 10vw, 140px) var(--pad-x) 0;
    overflow: hidden;
}
.direction__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    min-height: 70vh;
}
.direction__text {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.direction__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: #fff;
}
.direction__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.direction__title .dot { color: var(--accent); }
.direction__bio {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    max-width: 440px;
}
.direction__bio strong { color: #fff; font-weight: 500; }

.direction__signature {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--line-on-black);
}
.direction__sig-text { display: flex; flex-direction: column; gap: 4px; }
.direction__sig-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 36px;
    color: #fff;
    line-height: 1;
}
.direction__sig-role {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

/* Carte Dubaï SVG */
.direction__map {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--line-on-black);
    background: rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 360px;
}
.dubai-map { width: 80px; height: 80px; flex-shrink: 0; }
.dubai-map__country {
    fill: none;
    stroke: rgba(255,255,255,0.45);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.dubai-map__marker {
    fill: var(--accent);
}
.dubai-map__pulse {
    fill: var(--accent);
    opacity: 0.45;
    transform-origin: center;
    animation: map-pulse 1.8s ease-in-out infinite;
}
@keyframes map-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3.5); opacity: 0; }
}
.direction__map-text { display: flex; flex-direction: column; gap: 4px; }
.direction__map-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
}
.direction__map-value {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}
.direction__map-coords {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.55);
}

/* Portrait Jean */
.direction__portrait {
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    filter: grayscale(100%) contrast(1.15) brightness(0.95);
    position: relative;
    border: 1px solid var(--line-on-black);
}
.direction__portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.direction__portrait-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #fff;
    background: rgba(0,0,0,0.7);
    padding: 8px 12px;
    backdrop-filter: blur(8px);
    z-index: 2;
}

/* Stack : portrait principal + side bureau Dubai en bas */
.direction__portrait-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.direction__portrait-side {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(80%) contrast(1.1) brightness(0.95);
    position: relative;
    border: 1px solid var(--line-on-black);
}
.direction__portrait-side::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.direction__portrait-tag--side {
    bottom: 12px;
    left: 12px;
    font-size: 9px;
    padding: 6px 10px;
}

/* Trophées Jean · figures cliquables (Wistia modal) */
.direction-trophy {
    position: relative;
    margin: 0;
    transform: rotate(var(--r, 0deg));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.direction-trophy img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(30%) contrast(1.05);
}
.direction-trophy figcaption {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.direction-trophy__palier {
    font: 400 clamp(20px, 1.6vw, 26px)/1 var(--font-display, var(--font-serif));
    font-style: italic;
    color: #fff;
    letter-spacing: -0.02em;
}
.direction-trophy__detail {
    font: 500 10px/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
}
/* Overlay play sur les trophées avec vidéo Wistia */
.direction-trophy--playable {
    cursor: pointer;
}
.direction-trophy--playable::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.direction-trophy--playable:hover::after,
.direction-trophy--playable:focus-visible::after {
    opacity: 1;
}
.direction-trophy__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 12px 40px rgba(227,30,36,0.5);
}
.direction-trophy__play svg {
    width: 28px;
    height: 28px;
    display: block;
    margin-left: 3px; /* icône play optiquement centrée */
}
.direction-trophy--playable:hover .direction-trophy__play,
.direction-trophy--playable:focus-visible .direction-trophy__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.direction-trophy--playable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
.direction-trophy--playable:hover {
    transform: rotate(var(--r, 0deg)) translateY(-4px);
}

/* Track record — trophées Two Comma Club (entre direction et équipe) */
.trophees {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--line-on-black);
}
.trophees__head { margin-bottom: 40px; max-width: 720px; }
.trophees__label {
    display: inline-flex; align-items: baseline; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
}
.trophees__label .num { color: var(--accent); }
.trophees__lead {
    font: 400 18px/1.55 var(--font-serif);
    color: rgba(255,255,255,0.88);
}
.trophees__lead em { font-style: italic; color: var(--accent); }
.trophees__lead strong { color: #fff; font-weight: 500; }
.trophees__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.trophee-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color 0.25s, transform 0.25s;
}
.trophee-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.trophee-card__photo {
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    background-size: cover; background-position: center;
    position: relative;
}
/* Placeholder visible when photo missing */
.trophee-card__photo[data-needs-photo]::before {
    content: '◆';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.15);
    font-size: 32px;
}
.trophee-card__palier {
    font: 400 28px/1 var(--font-display, var(--font-serif));
    font-style: italic;
    color: var(--accent);
}
.trophee-card__label {
    font: 500 10px/1.3 var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
}
.trophee-card__status {
    font: 500 9px/1 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 7px;
    align-self: flex-start;
    margin-top: 4px;
}
.trophee-card--obtenu .trophee-card__status {
    color: var(--accent);
    background: rgba(227,30,36,0.12);
    border: 1px solid var(--accent);
}
.trophee-card--en-course .trophee-card__status {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
}
.trophee-card--objectif .trophee-card__status {
    color: rgba(255,255,255,0.45);
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.25);
}
@media (max-width: 900px) {
    .trophees__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Rencontres — mentors (Russell, Jason, Iman) */
.rencontres {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--line-on-black);
}
.rencontres__head { margin-bottom: 32px; max-width: 720px; }
.rencontres__label {
    display: inline-flex; align-items: baseline; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 12px;
}
.rencontres__label .num { color: var(--accent); }
.rencontres__lead {
    font: 400 16px/1.55 var(--font-serif);
    font-style: italic;
    color: rgba(255,255,255,0.78);
}
.rencontres__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.rencontre-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.25s, transform 0.25s;
}
.rencontre-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.rencontre-card__photo {
    aspect-ratio: 4/3;
    background-size: cover; background-position: center top;
    background-color: #0a0a0a;
    filter: grayscale(70%) contrast(1.1);
    display: flex; align-items: center; justify-content: center;
}
.rencontre-card__photo--missing {
    filter: none;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}
.rencontre-card__needs {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.15em;
    color: var(--accent);
    text-transform: uppercase;
}
.rencontre-card__info {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.rencontre-card__who {
    font: 400 18px/1.2 var(--font-serif);
    font-style: italic;
    color: #fff;
}
.rencontre-card__sub {
    font: 500 10px/1.3 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
@media (max-width: 900px) {
    .rencontres__grid { grid-template-columns: 1fr; }
}

/* Bandeau équipe */
.team {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--line-on-black);
}
.team__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 12px;
}
.team__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}
.team__label .num { color: var(--accent); }
.team__hint {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}
.team__scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.team__scroll::-webkit-scrollbar { height: 4px; }
.team__scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.team__scroll::-webkit-scrollbar-thumb { background: var(--accent); }

.team-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-on-black);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: transform 0.35s var(--ease-out-quart), background 0.25s;
}
.team-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.05);
}
.team-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--accent);
    transition: width 0.35s var(--ease-out-quart);
}
.team-card:hover::before { width: 100%; }
.team-card__avatar {
    width: 64px; height: 64px;
    background: var(--accent-soft);
    color: var(--accent);
    background-size: cover; background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    border-radius: 0;
    filter: grayscale(80%) contrast(1.1);
    transition: filter 0.25s;
}
.team-card:hover .team-card__avatar { filter: grayscale(0%) contrast(1); }
.team-card__avatar--missing {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.62);
    filter: none;
    border: 1px dashed rgba(0,0,0,0.2);
}
.team-card__matricule {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}
.team-card__name {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.01em;
}
.team-card__role {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
}
.team-card__bio {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.55);
    margin-top: 8px;
}

@media (max-width: 900px) {
    .direction__inner { grid-template-columns: 1fr; min-height: auto; }
    .direction__portrait { max-width: 380px; }
}

/* ────────────────────────────────────────────────
   10. FAQ — accordion, bloc-white
   ──────────────────────────────────────────────── */
.faq {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.faq__inner {
    max-width: 920px;
    margin: 0 auto;
}
.faq__head {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.faq__title {
    font-family: var(--font-sans);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
.faq__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.faq__title .dot { color: var(--accent); }
.faq__list {
    border-top: 1px solid var(--line-on-white);
}
.faq-item {
    border-bottom: 1px solid var(--line-on-white);
}
.faq-item__btn {
    width: 100%;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    color: var(--text-on-white);
    transition: padding 0.25s var(--ease-out-quart);
}
.faq-item__btn:hover { padding-left: 12px; }
.faq-item.is-open .faq-item__btn { padding-left: 12px; }
.faq-item__q {
    font-family: var(--font-sans);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 500;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1.3;
}
.faq-item__q::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 0;
    background: var(--accent);
    flex-shrink: 0;
}
.faq-item__chevron {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-on-white-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-white);
    transition: transform 0.3s var(--ease-out-quart), background 0.25s, color 0.25s;
    flex-shrink: 0;
}
.faq-item.is-open .faq-item__chevron {
    transform: rotate(45deg);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.faq-item__chevron svg { width: 14px; height: 14px; }
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out-quart);
}
.faq-item.is-open .faq-item__answer {
    max-height: 400px;
}
.faq-item__answer-inner {
    padding: 0 12px 32px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-on-white-muted);
    max-width: 720px;
}
.faq-item__answer-inner strong { color: var(--text-on-white); font-weight: 500; }

/* ────────────────────────────────────────────────
   11. BRIEFING — split asymétrique, bloc-black
   ──────────────────────────────────────────────── */
.briefing {
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.briefing__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.briefing__left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.briefing__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #fff;
}
.briefing__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.briefing__title .dot { color: var(--accent); }
.briefing__lead {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,0.7);
    max-width: 380px;
}
.briefing__lead strong { color: #fff; font-weight: 500; }

.briefing__steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--line-on-black);
}
.briefing__step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    align-items: baseline;
}
.briefing__step-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 600;
}
.briefing__step-text {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
}
.briefing__step-text strong { color: #fff; font-weight: 500; }

.briefing__contact {
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line-on-black);
    display: flex;
    align-items: center;
    gap: 16px;
}
.briefing__contact-photo {
    width: 64px;
    height: 64px;
    border-radius: 0;
    background-size: cover;
    background-position: center top;
    filter: grayscale(100%) contrast(1.15);
    border: 2px solid var(--accent);
}
.briefing__contact-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.briefing__contact-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    color: #fff;
}
.briefing__contact-email {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
}
.briefing__contact-role {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

/* Form briefing */
.briefing__form {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-on-black);
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.briefing__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 540px) {
    .briefing__row { grid-template-columns: 1fr; }
}
.briefing__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}
.briefing__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.briefing__label .accent { color: var(--accent); }
.briefing__input,
.briefing__textarea,
.briefing__select {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    padding: 12px 0;
    outline: none;
    transition: border-color 0.3s;
    appearance: none;
}
.briefing__textarea { min-height: 80px; resize: vertical; }
.briefing__input:focus,
.briefing__textarea:focus,
.briefing__select:focus { border-bottom-color: var(--accent); }
.briefing__input::placeholder,
.briefing__textarea::placeholder { color: rgba(255,255,255,0.3); }
.briefing__select option { background: var(--bg-black); color: #fff; }

/* Radios Digifox-style (qualifs candidature) */
.briefing__radios {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px;
}
.briefing__radio {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-family: var(--font-sans);
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
.briefing__radio:hover { border-color: rgba(255,255,255,0.4); }
.briefing__radio input[type="radio"] {
    appearance: none;
    width: 14px; height: 14px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 0;
    margin: 0;
    position: relative;
    flex-shrink: 0;
}
.briefing__radio input[type="radio"]:checked {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--bg-black);
}
.briefing__radio:has(input:checked) {
    border-color: var(--accent);
    background: rgba(227,30,36,0.06);
    color: #fff;
}
.briefing__submit {
    margin-top: 12px;
    background: var(--accent);
    color: #fff;
    padding: 18px 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s var(--ease-out-quart), gap 0.25s var(--ease-out-quart);
}
.briefing__submit:hover { background: var(--accent-hover); transform: translateX(3px); gap: 24px; }
.briefing__hint {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}

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

/* ────────────────────────────────────────────────
   FOOTER — bloc-black profond
   ──────────────────────────────────────────────── */
.footer {
    background: var(--bg-black-deep);
    color: #fff;
    padding: clamp(60px, 8vw, 100px) var(--pad-x) 40px;
}
.footer__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
}
.footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line-on-black);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer__brand-mark {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.footer__brand-mark .dot {
    width: 9px; height: 9px;
    border-radius: 0;
    background: var(--accent);
    animation: brand-pulse 1.8s ease-in-out infinite;
}
.footer__about {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,0.6);
    max-width: 320px;
}

.footer__col h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 18px;
    font-weight: 500;
}
.footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer__col a {
    font-size: 14px;
    color: #fff;
    transition: color 0.2s;
}
.footer__col a:hover { color: var(--accent); }
.footer__col .small {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.55);
}

.footer__map {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line-on-black);
}
.footer__map .dubai-map { width: 48px; height: 48px; }

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}
.footer__bottom-left, .footer__bottom-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__bottom a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer__bottom a:hover { color: #fff; }

/* ────────────────────────────────────────────────
   Hide old V8 components qui ne servent plus
   ──────────────────────────────────────────────── */
.cursor-trail,
.rec-indicator,
.stats-ticker,
.live-rail,
.cas-carousel,
.pourquoi-wa,
.testimonials.testimonials__grid,
.direction.direction__inner.direction__photo,
.phases,
.panel-day,
.epg,
.band-stats,
.section-header,
.section--elev,
.logos-bandeau,
.section,
.frame,
.why-webi,
.verticales,
.proofs,
.histoire,
.mentors,
.senegal,
.cta-final
{ display: none !important; }

/* YT live classes : managed by youtube-live.css */


/* ═══════════════════════════════════════════════════════════════
   V9.4 — Overrides pour neutraliser conflits v7.css
   v7.css enqueued en V8.1 contient .cas-slide { position:absolute; opacity:0 }
   pour son carousel V7. On override pour V9 scrollytelling sticky.
   ═══════════════════════════════════════════════════════════════ */

/* CAS section : neutraliser absolute positioning + opacity 0 */
.cas .cas-slide {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
    background: transparent !important;
    grid-template-columns: 1fr 1.2fr !important;
    min-height: 80vh;
    padding: 48px 0 !important;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
}
.cas .cas-slide__left {
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}
.cas .cas-slide__matricule {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--text-on-white-muted) !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.cas .cas-slide__name {
    font-family: var(--font-sans) !important;
    font-size: clamp(48px, 6vw, 88px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.04em !important;
    line-height: 0.95 !important;
    color: var(--text-on-white) !important;
}
.cas .cas-slide__name em {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
}
.cas .cas-slide__name .dot {
    color: var(--accent) !important;
    font-family: var(--font-sans) !important;
    font-style: normal !important;
}
.cas .cas-slide__desc {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-on-white-muted);
    max-width: 420px;
    background: transparent !important;
    border: none !important;
}
.cas .cas-slide__desc strong { color: var(--text-on-white); font-weight: 500; }
.cas .cas-slide__kpis {
    display: flex;
    gap: 24px;
    margin: 0;
    flex-wrap: wrap;
}
.cas .cas-slide__photo-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.cas .cas-slide__photo {
    aspect-ratio: 4/5 !important;
    width: 100%;
    height: auto;
    max-height: 75vh;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat;
    filter: grayscale(100%) contrast(1.15) brightness(0.92) !important;
    position: static !important;
    inset: auto !important;
}
.cas .cas-slide__right {
    position: relative;
    background: transparent !important;
}
.cas .cas-slide__right::before,
.cas .cas-slide__right::after {
    display: none !important;
}
.cas .cas-slide__brand {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #fff;
    background: rgba(0,0,0,0.65);
    padding: 6px 10px;
    backdrop-filter: blur(8px);
    z-index: 2;
}

/* Briefing : aligner contact Jean en bas de la colonne gauche
   (force end-alignment pour qu'il colle au form bottom) */
.briefing .briefing__left {
    justify-content: space-between;
    min-height: 100%;
}
.briefing .briefing__contact {
    margin-top: auto !important;
}

/* Direction : si v7.css interfère, forcer le layout V9 */
.direction .direction__inner {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
}
@media (max-width: 900px) {
    .direction .direction__inner { grid-template-columns: 1fr !important; }
}
.direction .direction__portrait {
    position: static !important;
    opacity: 1 !important;
    aspect-ratio: 4/5 !important;
    width: 100% !important;
    height: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   V9.5 — Refinements
   ═══════════════════════════════════════════════════════════════ */

/* ── Briefing : pleine largeur ── */
.briefing .briefing__inner {
    max-width: var(--container-wide) !important;
    grid-template-columns: 0.85fr 1.4fr !important;
}
@media (max-width: 900px) {
    .briefing .briefing__inner { grid-template-columns: 1fr !important; }
}

/* ── Header menu plus fin / pro ── */
.site-header .nav-link {
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    padding: 8px 10px !important;
    font-weight: 500 !important;
}
.site-header .nav-link--cta {
    padding: 9px 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
}
.site-header .header-actions { gap: 4px !important; }
.site-header__inner {
    padding-block: 6px;
}
.site-header.is-scrolled {
    padding: 14px var(--pad-x) !important;
}
.site-header { padding: 18px var(--pad-x) !important; }

/* ── Services refonte en tabs ── */
.services-v95 {
    background: var(--bg-black);
    color: var(--text-on-black);
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.services-v95__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
}
.services-v95__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 64px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line-on-black);
    flex-wrap: wrap;
    gap: 16px;
}
.services-v95__head-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.services-v95__eyebrow {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.services-v95__eyebrow .num { color: var(--accent); }
.services-v95__title {
    font-family: var(--font-sans);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
.services-v95__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.services-v95__title .dot { color: var(--accent); }
.services-v95__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.5;
}

.services-v95__tabs-wrap {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: clamp(40px, 5vw, 80px);
    min-height: 460px;
}
@media (max-width: 900px) {
    .services-v95__tabs-wrap { grid-template-columns: 1fr; }
}

/* Tabs verticales */
.services-v95__tabs {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line-on-black);
}
.services-v95__tab {
    padding: 22px 24px;
    text-align: left;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--line-on-black);
    cursor: pointer;
    color: rgba(255,255,255,0.55);
    transition: padding-left 0.3s var(--ease-out-quart), color 0.25s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    font-family: var(--font-sans);
}
.services-v95__tab::before {
    content: "";
    position: absolute;
    left: -1px; top: 0; bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.25s;
}
.services-v95__tab:hover {
    color: #fff;
    padding-left: 32px;
}
.services-v95__tab.is-active {
    color: #fff;
    padding-left: 32px;
    background: rgba(255,255,255,0.02);
}
.services-v95__tab.is-active::before { background: var(--accent); }
.services-v95__tab-num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--accent);
    font-weight: 600;
}
.services-v95__tab-name {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.services-v95__tab-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Panels */
.services-v95__panels {
    position: relative;
    min-height: 460px;
}
.services-v95__panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s var(--ease-out-quart), transform 0.4s var(--ease-out-quart), visibility 0s linear 0.4s;
}
@media (max-width: 900px) {
    .services-v95__panel { grid-template-columns: 1fr; gap: 32px; }
}
.services-v95__panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}
.services-v95__panel-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--accent);
    font-weight: 600;
}
.services-v95__panel-title {
    font-family: var(--font-sans);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #fff;
    margin: 12px 0 8px;
}
.services-v95__panel-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.services-v95__panel-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.services-v95__panel-body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 460px;
    margin-bottom: 18px;
}
.services-v95__panel-body strong { color: #fff; font-weight: 500; }
.services-v95__panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--line-on-black);
    padding-top: 16px;
}
.services-v95__panel-list li {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #fff;
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.services-v95__panel-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.services-v95__panel-visual {
    aspect-ratio: 1/1;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-on-black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    max-width: 380px;
    margin-left: auto;
}
.services-v95__panel-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
.services-v95__panel-icon {
    width: 50%;
    height: 50%;
    color: var(--accent);
    z-index: 2;
    transition: transform 0.4s var(--ease-out-quart);
}
.services-v95.is-hover .services-v95__panel.is-active .services-v95__panel-icon {
    transform: scale(1.05);
}

/* Cache l'ancienne section .services V9 si elle existait encore */
.services-v95 + .services,
.services-v95 ~ .services { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   V9.6 — Forcer visibilité + briefing pleine largeur + footer
   ═══════════════════════════════════════════════════════════════ */

/* Reveal failsafe : tout est visible même si JS ne déclenche pas */
[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* Override ciblé : la section "Pourquoi WA" garde l'anim reveal en cascade */
.why [data-reveal] {
    opacity: 0 !important;
    transform: translateY(32px) !important;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.why [data-reveal].is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Cascade : chaque why-step apparaît avec un délai progressif (effet escalier) */
.why .why-step:nth-of-type(1).is-visible { transition-delay: 0.05s; }
.why .why-step:nth-of-type(2).is-visible { transition-delay: 0.18s; }
.why .why-step:nth-of-type(3).is-visible { transition-delay: 0.31s; }
.why .why-step:nth-of-type(4).is-visible { transition-delay: 0.44s; }

/* Souligné rouge qui se trace sous le num en even d'apparition */
.why-step__num {
    position: relative;
}
.why-step__num::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    height: 2px;
    width: 0;
    background: var(--accent);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.why .why-step.is-visible .why-step__num::after {
    width: 32px;
}
.why .why-step:nth-of-type(1).is-visible .why-step__num::after { transition-delay: 0.35s; }
.why .why-step:nth-of-type(2).is-visible .why-step__num::after { transition-delay: 0.48s; }
.why .why-step:nth-of-type(3).is-visible .why-step__num::after { transition-delay: 0.61s; }
.why .why-step:nth-of-type(4).is-visible .why-step__num::after { transition-delay: 0.74s; }

/* Footer trust : forcer visible (v7.css le cachait) */
.footer-trust {
    display: block !important;
}
/* Humanitaire badge — mention discrète "se déclare un peu" per Jean */
.footer-trust__humanitaire {
    display: inline-flex; align-items: baseline; gap: 6px;
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s;
}
.footer-trust__humanitaire:hover { color: rgba(255,255,255,0.85); }
.footer-trust__humanitaire .dot.accent { color: var(--accent); }
.footer-v5 {
    display: block !important;
}

/* Briefing : VRAIE pleine largeur */
.briefing {
    padding-left: clamp(40px, 5vw, 80px) !important;
    padding-right: clamp(40px, 5vw, 80px) !important;
}
.briefing .briefing__inner {
    max-width: none !important;
    width: 100% !important;
    grid-template-columns: 0.7fr 1.3fr !important;
    gap: clamp(40px, 5vw, 80px) !important;
}
@media (max-width: 900px) {
    .briefing .briefing__inner { grid-template-columns: 1fr !important; }
}
.briefing .briefing__form {
    width: 100%;
    max-width: none;
}

/* Why section : assurer pleine hauteur visible */
.why {
    min-height: 60vh;
}
.why .why-step {
    min-height: 140px;
}

/* Method : forcer width 100% */
.method .method__inner {
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   V9.7 — Briefing NUCLEAR fix (flexbox forcé)
   ═══════════════════════════════════════════════════════════════ */
.briefing {
    width: 100% !important;
    padding-left: clamp(40px, 5vw, 80px) !important;
    padding-right: clamp(40px, 5vw, 80px) !important;
    box-sizing: border-box !important;
}
.briefing .briefing__inner {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: clamp(40px, 5vw, 80px) !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}
.briefing .briefing__left {
    flex: 0 0 auto !important;
    width: 32% !important;
    min-width: 280px !important;
    max-width: 420px !important;
}
.briefing .briefing__form {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
}
@media (max-width: 900px) {
    .briefing .briefing__inner { flex-direction: column !important; }
    .briefing .briefing__left { width: 100% !important; max-width: none !important; }
}

/* ─── V9.8 : Force .briefing en display: block (section parent était grid !) ─── */
.briefing {
    display: block !important;
}




/* ═══════════════════════════════════════════════════════════════
   V11 — Live YT noir signature + menu Razorpay format précis
   Hero RESTE EN CLAIR (rollback V10)
   ═══════════════════════════════════════════════════════════════ */

/* Live reveal : forcé en NOIR (signature wow) */
.live-reveal { background: #0A0908 !important; color: #fff !important; }
.live-reveal__copy { color: #fff !important; }
.live-reveal__copy-eyebrow { color: rgba(255,255,255,0.65) !important; }
.live-reveal__copy-title, .live-reveal__copy-title em { color: #fff !important; }
.live-reveal__copy-body { color: rgba(255,255,255,0.75) !important; }
.live-reveal__copy-body strong { color: #fff !important; }
.live-reveal__copy-cta { background: #fff !important; color: #0A0908 !important; }
.live-reveal__act1-hint { color: rgba(255,255,255,0.55) !important; }
.live-reveal__act1-hint .big { color: #fff !important; }
.live-reveal__disclaim { color: rgba(255,255,255,0.65) !important; }

/* YT light theme (V13) */
/* ═══════════════════════════════════════════════════════════════
   V13 — YouTube interface en LIGHT (vraie palette YT desktop blanc)
   Le .live-reveal reste sur fond noir signature, le player ressort.
   + Hide bandeau "MISE EN SCÈNE"
   ═══════════════════════════════════════════════════════════════ */

/* Force YouTube palette en LIGHT */
:root {
    --yt-bg:        #FFFFFF !important;
    --yt-surface:   #F8F8F8 !important;
    --yt-surface-2: #E5E5E5 !important;
    --yt-surface-3: #CCCCCC !important;
    --yt-border:    #E0E0E0 !important;
    --yt-text:      #0F0F0F !important;
    --yt-text-2:    #606060 !important;
    --yt-text-3:    #909090 !important;
}
/* Bouton S'abonner : noir sur fond clair (vrai YT light) */
.yt-subscribe { background: #0F0F0F !important; color: #FFFFFF !important; }
.yt-subscribe:hover { background: #272727 !important; }
/* Bell button */
.yt-bell { background: var(--yt-surface-2) !important; color: var(--yt-text) !important; }
/* Search input clair */
.yt-search__input { background: var(--yt-surface) !important; color: var(--yt-text) !important; border: 1px solid var(--yt-border) !important; }
/* Icon SVG : currentColor adapts */
.yt-icon svg { fill: var(--yt-text) !important; }
/* Chat */
.yt-chat__field { background: var(--yt-surface) !important; color: var(--yt-text) !important; }
.yt-chat__tab { color: var(--yt-text-2) !important; }
.yt-chat__tab.is-active { color: var(--yt-text) !important; border-color: var(--yt-text) !important; }
.yt-chat__messages { background: var(--yt-bg) !important; color: var(--yt-text) !important; }
/* Channel info */
.yt-channel__avatar { background: var(--yt-surface-2) !important; border-color: var(--yt-border) !important; }
.yt-verified { background: var(--yt-text-2) !important; color: var(--yt-bg) !important; }
.yt-desc { background: var(--yt-surface) !important; color: var(--yt-text) !important; border: 1px solid var(--yt-border) !important; }
.yt-desc__meta, .yt-desc__text { color: var(--yt-text) !important; }
.yt-desc__meta strong, .yt-desc__text strong { color: var(--yt-text) !important; }

/* Hide bandeau MISE EN SCÈNE */
.live-reveal__disclaim { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   V14 — Menu style toolbar (boîtes + bordures séparateurs)
   Format : chaque item = container avec bordure, items collés
   ═══════════════════════════════════════════════════════════════ */

.site-header {
    background: #0A0908 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}
.site-header.is-scrolled {
    background: #0A0908 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

.site-header__inner {
    display: flex !important;
    align-items: stretch !important;
    height: 56px !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Brand WA en première box, séparée par border-right */
.site-header .brand-wa {
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    background: transparent !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    gap: 6px !important;
}
.site-header .brand-wa__dot { background: var(--accent) !important; }
.site-header.is-scrolled.is-on-white-section .brand-wa { color: #fff !important; }

/* header-actions = container flex pour les items */
.header-actions {
    display: flex !important;
    align-items: stretch !important;
    flex: 1 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

/* Chaque nav-link = box collée avec border-right */
.site-header .nav-link {
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    height: 100% !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.85) !important;
    background: transparent !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    transition: background 0.2s, color 0.2s !important;
    position: relative !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
}
.site-header .nav-link::before {
    content: attr(data-num) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    margin-right: 0 !important;
}
.site-header .nav-link::after { display: none !important; }
.site-header .nav-link:hover {
    background: var(--accent) !important;
    color: #fff !important;
}
.site-header .nav-link:hover::before { color: #fff !important; }

/* Toujours blanc même quand sur section claire (header en noir autonome) */
.site-header.is-scrolled.is-on-white-section .nav-link { color: rgba(255,255,255,0.85) !important; }
.site-header.is-scrolled.is-on-white-section .nav-link:hover { color: #fff !important; }
.site-header.is-scrolled.is-on-white-section .brand-wa { color: #fff !important; }

/* CTA BRIEFING à droite : fond rouge, push à droite */
.site-header .nav-link--cta {
    margin-left: auto !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-left: 1px solid rgba(255,255,255,0.12) !important;
    border-right: none !important;
    padding: 0 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
}
.site-header .nav-link--cta::before { display: none !important; }
.site-header .nav-link--cta:hover { background: #B81017 !important; color: #fff !important; }
.site-header.is-scrolled.is-on-white-section .nav-link--cta { background: var(--accent) !important; color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════
   V15 — Menu toolbar NOIR ferme (overrides définitifs)
   ═══════════════════════════════════════════════════════════════ */

.site-header {
    background: #0A0908 !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}
.site-header.is-scrolled {
    background: #0A0908 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

.site-header__inner {
    display: flex !important;
    align-items: stretch !important;
    height: 56px !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.site-header .brand-wa,
.site-header.is-scrolled .brand-wa,
.site-header.is-on-white-section .brand-wa,
.site-header.is-scrolled.is-on-white-section .brand-wa {
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    border-right: 1px solid rgba(255,255,255,0.18) !important;
    color: #fff !important;
    background: transparent !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    gap: 6px !important;
}
.site-header .brand-wa__dot { background: var(--accent) !important; }

.header-actions {
    display: flex !important;
    align-items: stretch !important;
    flex: 1 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

.site-header .nav-link,
.site-header.is-scrolled .nav-link,
.site-header.is-on-white-section .nav-link,
.site-header.is-scrolled.is-on-white-section .nav-link {
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 100% !important;
    border-right: 1px solid rgba(255,255,255,0.18) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    color: rgba(255,255,255,0.92) !important;
    background: transparent !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    transition: background 0.18s, color 0.18s !important;
    position: relative !important;
    white-space: nowrap !important;
}
.site-header .nav-link::before {
    content: attr(data-num) !important;
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500 !important;
    margin-right: 0 !important;
    letter-spacing: 0.06em !important;
}
.site-header .nav-link::after { display: none !important; }

.site-header .nav-link:hover,
.site-header.is-on-white-section .nav-link:hover {
    background: var(--accent) !important;
    color: #fff !important;
}
.site-header .nav-link:hover::before { color: #fff !important; }

/* CTA BRIEFING fond rouge plein à droite */
.site-header .nav-link--cta,
.site-header.is-on-white-section .nav-link--cta {
    margin-left: auto !important;
    background: var(--accent) !important;
    color: #fff !important;
    border-left: 1px solid rgba(255,255,255,0.18) !important;
    border-right: none !important;
    padding: 0 32px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
}
.site-header .nav-link--cta::before { display: none !important; }
.site-header .nav-link--cta:hover { background: #B81017 !important; }


/* ═══════════════════════════════════════════════════════════════
   V16 — Surclasser spécificité v7.css (body.is-front[data-theme])
   et masquer header-data DUBAI + timestamp
   ═══════════════════════════════════════════════════════════════ */

body.is-front[data-theme="light"] .site-header,
body[data-theme="light"] .site-header,
body.is-front .site-header,
body .site-header,
html body .site-header {
    background: #0A0908 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

body.is-front[data-theme="light"] .site-header.is-on-white-section,
body[data-theme="light"] .site-header.is-on-white-section,
body .site-header.is-on-white-section,
html body .site-header.is-on-white-section {
    background: #0A0908 !important;
}

/* Cacher DUBAI + timestamp */
html body .site-header .header-data,
body.is-front .site-header .header-data,
body .header-data {
    display: none !important;
}

/* Force nav-link couleur blanche définitive */
html body .site-header .nav-link,
body.is-front[data-theme="light"] .site-header .nav-link {
    color: rgba(255,255,255,0.92) !important;
    background: transparent !important;
}
html body .site-header .nav-link::before,
body.is-front[data-theme="light"] .site-header .nav-link::before {
    color: rgba(255,255,255,0.92) !important;
}
html body .site-header .nav-link:hover,
body.is-front[data-theme="light"] .site-header .nav-link:hover {
    background: var(--accent) !important;
    color: #fff !important;
}
html body .site-header .nav-link:hover::before {
    color: #fff !important;
}
html body .site-header .brand-wa,
body.is-front[data-theme="light"] .site-header .brand-wa {
    color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════
   V18 — Finitions menu (CTA rouge / logo blanc / items distribués / active scroll-spy)
   ═══════════════════════════════════════════════════════════════ */

/* Items répartis sur toute la largeur dispo */
html body .site-header .header-actions {
    display: flex !important;
    flex: 1 !important;
    align-items: stretch !important;
    gap: 0 !important;
}
html body .site-header .nav-link:not(.nav-link--cta) {
    flex: 1 1 0 !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
}

/* Logo WA COMPANY blanc franc lisible */
html body .site-header .brand-wa,
html body .site-header .brand-wa span:not(.brand-wa__dot) {
    color: #fff !important;
}

/* Texte items blanc franc */
html body .site-header .nav-link:not(.nav-link--cta) {
    color: #fff !important;
}
html body .site-header .nav-link:not(.nav-link--cta)::before {
    color: var(--accent) !important;
}
/* Hover : le fond passe en accent rouge → le numéro rouge devient invisible.
   Cette règle a la même mécanique de spécificité que celle du dessus
   (html body + 3 classes + :not) + un :hover en plus, donc bat l'idle
   ci-dessus en hover uniquement. 2026-07-04 */
html body .site-header .nav-link:not(.nav-link--cta):hover::before {
    color: #fff !important;
}

/* Item ACTIF (au scroll, JS ajoute .is-active) */
html body .site-header .nav-link.is-active {
    background: var(--accent) !important;
    color: #fff !important;
}
html body .site-header .nav-link.is-active::before {
    color: #fff !important;
}

/* CTA BRIEFING fond rouge plein */
html body .site-header .nav-link--cta {
    background: var(--accent) !important;
    color: #fff !important;
    border-left: 1px solid rgba(255,255,255,0.18) !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 36px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
}
html body .site-header .nav-link--cta:hover {
    background: #B81017 !important;
}


/* ═══════════════════════════════════════════════════════════════
   V19 — Spécificité MAX via id #wa-header (100+)
   Bat toutes les autres règles cascading sans bataille
   ═══════════════════════════════════════════════════════════════ */

#wa-header { background: #0A0908; }

/* Logo WA●COMPANY : enfants .brand-wa__wa et .brand-wa__co en BLANC */
#wa-header .brand-wa,
#wa-header .brand-wa__wa,
#wa-header .brand-wa__co {
    color: #FFFFFF;
}
#wa-header .brand-wa__dot {
    background: var(--accent);
}

/* Items menu : texte BLANC franc */
#wa-header .nav-link {
    color: #FFFFFF;
}
#wa-header .nav-link::before {
    color: var(--accent);
}
#wa-header .nav-link:hover {
    background: var(--accent);
    color: #FFFFFF;
}
#wa-header .nav-link:hover::before {
    color: #FFFFFF;
}

/* Active (scroll-spy) */
#wa-header .nav-link.is-active {
    background: var(--accent);
    color: #FFFFFF;
}
#wa-header .nav-link.is-active::before {
    color: #FFFFFF;
}

/* CTA → BRIEFING : fond rouge + TEXTE BLANC (pas rouge !) */
#wa-header .nav-link--cta {
    background: var(--accent);
    color: #FFFFFF;
}
#wa-header .nav-link--cta::before {
    display: none;
}
#wa-header .nav-link--cta:hover {
    background: #B81017;
    color: #FFFFFF;
}




/* ═══════════════════════════════════════════════════════════════
   V21.1 — Hero split : inner left max 720px, visual absolute right center
   ═══════════════════════════════════════════════════════════════ */

.hero-classic {
    position: relative !important;
    padding: 120px clamp(32px, 5vw, 80px) 80px !important;
    overflow: hidden;
}
.hero-classic__inner {
    max-width: 720px !important;
    margin: 0 !important;
    margin-left: clamp(40px, 8vw, 120px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(18px, 2vw, 28px) !important;
    width: 100% !important;
    position: relative;
    z-index: 3;
}

.hero-classic__visual {
    position: absolute !important;
    right: clamp(32px, 5vw, 80px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: clamp(360px, 35vw, 540px) !important;
    aspect-ratio: 4/5 !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
    gap: 10px !important;
    z-index: 2;
}
@media (max-width: 1100px) {
    .hero-classic__visual {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 32px auto 0 !important;
        max-width: 100% !important;
    }
    .hero-classic__inner { margin-left: auto !important; margin-right: auto !important; }
}

.hero-classic__visual-tile {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: grayscale(100%) contrast(1.18) brightness(0.88) !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    transition: filter 0.5s, transform 0.5s cubic-bezier(0.25,1,0.5,1);
}
.hero-classic__visual-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%),
        linear-gradient(180deg, transparent 60%, rgba(227,30,36,0.08) 100%);
    pointer-events: none;
    z-index: 1;
}
.hero-classic__visual-tile:hover {
    filter: grayscale(50%) contrast(1.18) brightness(0.95) !important;
    transform: scale(1.02);
    z-index: 4;
}
.hero-classic__visual-tile--main {
    grid-column: 1;
    grid-row: 1 / -1;
    background-position: center 25% !important;
}
.hero-classic__visual-tile--1 { grid-column: 2; grid-row: 1; background-position: center 15% !important; }
.hero-classic__visual-tile--2 { grid-column: 2; grid-row: 2; background-position: center 20% !important; }
.hero-classic__visual-tile--3 {
    grid-column: 2; grid-row: 3;
    background-size: contain !important;
    background-color: #0F0F0F !important;
}

.hero-classic__visual-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: #fff;
    background: rgba(0,0,0,0.72);
    padding: 4px 8px;
    backdrop-filter: blur(8px);
    z-index: 2;
    text-transform: uppercase;
    font-weight: 500;
}

/* Réduire la largeur des éléments dans l'inner pour pas overlap avec la mosaïque */
.hero-classic__title { max-width: 660px !important; }
.hero-classic__sub { max-width: 540px !important; }
.hero-classic__stats { max-width: 660px !important; }
.hero-classic__ctas { max-width: 660px !important; }


/* ═══════════════════════════════════════════════════════════════
   V23 — Hero : titre Geist uniforme, KPI lisibles, bouton rouge plein
   ═══════════════════════════════════════════════════════════════ */

/* Titre : tout en Geist (sans Instrument Serif italique) */
.hero-classic__title em {
    font-family: var(--font-sans) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
}

/* KPI cards lisibles : transparent + bordures fines + texte blanc franc */
.hero-classic__stats {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 0;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 920px !important;
}
.hero-classic__stat {
    background: transparent !important;
    padding: 16px 16px !important;
    border-right: 1px solid rgba(255,255,255,0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
.hero-classic__stat:last-child { border-right: none !important; }
.hero-classic__stat-label {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.55) !important;
    margin-bottom: 4px !important;
}
.hero-classic__stat-value {
    font-family: var(--font-sans) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
}
.hero-classic__stat-value .unit {
    font-size: 0.5em;
    color: var(--accent);
    margin-left: 3px;
    font-weight: 500;
}
.hero-classic__stat-sub {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.45) !important;
    margin-top: 2px !important;
}

/* Bouton DEMANDER UN BRIEFING — rouge plein bien visible */
.hero-classic__cta-primary {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    padding: 18px 32px !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
    transition: background 0.25s, transform 0.25s cubic-bezier(0.25,1,0.5,1) !important;
}
.hero-classic__cta-primary:hover {
    background: #B81017 !important;
    transform: translateX(3px) !important;
}
.hero-classic__cta-primary .dot {
    background: #fff !important;
    width: 8px !important; height: 8px !important;
    border-radius: 0;
    display: inline-block !important;
}

/* CTA secondaire texte blanc lisible */
.hero-classic__cta-secondary {
    color: rgba(255,255,255,0.78) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color 0.25s !important;
}
.hero-classic__cta-secondary:hover { color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════
   V24 — Adopter la DA officielle wa.company v2
   Fraunces (display) · Inter (sans) · JetBrains Mono (mono)
   Accent : #C8102E (rouge profond) · hover #E31E24
   ═══════════════════════════════════════════════════════════════ */

:root {
    --font-display: 'Fraunces', Georgia, serif !important;
    --font-sans:    'Inter', system-ui, sans-serif !important;
    --font-serif:   'Fraunces', Georgia, serif !important;
    --font-mono:    'JetBrains Mono', 'Chivo Mono', monospace !important;
    --accent:       #C8102E !important;
    --accent-hover: #E31E24 !important;
    --accent-soft:  rgba(200,16,46,0.10) !important;
}

/* Couleurs sombres officielles */
body {
    font-family: var(--font-sans) !important;
}

/* HERO — appliquer la DA v2 */
.hero-classic {
    background: #0F0F0F !important;
    color: #F5F1EB !important;
}
.hero-classic__eyebrow {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(245,241,235,0.6) !important;
}
.hero-classic__eyebrow .accent { color: var(--accent) !important; }
.hero-classic__eyebrow .dot { background: var(--accent) !important; }

/* Titre style DA : Fraunces, opsz 144, clamp 56-128px, weight 500, italique em sur accent */
.hero-classic__title {
    font-family: var(--font-display) !important;
    font-size: clamp(56px, 9vw, 128px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.95 !important;
    color: #F5F1EB !important;
    font-variation-settings: "opsz" 144 !important;
    text-transform: none !important;
}
.hero-classic__title .pre {
    font-family: var(--font-display) !important;
    text-transform: none !important;
    font-weight: 500 !important;
    color: #F5F1EB !important;
    opacity: 1 !important;
    font-style: normal !important;
    display: block;
}
.hero-classic__title .pre strong {
    font-weight: 500 !important;
    color: #F5F1EB !important;
}
.hero-classic__title em {
    font-family: var(--font-display) !important;
    font-style: italic !important;
    color: var(--accent) !important;
    font-weight: 500 !important;
    font-variation-settings: "opsz" 144 !important;
}

/* Sub-text en Inter */
.hero-classic__sub {
    font-family: var(--font-sans) !important;
    font-size: clamp(17px, 1.5vw, 21px) !important;
    color: rgba(245,241,235,0.6) !important;
    line-height: 1.5 !important;
    max-width: 640px !important;
}
.hero-classic__sub strong { color: #F5F1EB !important; }

/* KPI : 4 cards en ligne, contraintes par le inner 720px */
.hero-classic__stats {
    background: transparent !important;
    border: 1px solid rgba(245,241,235,0.12) !important;
    border-radius: 0;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 100% !important;
    width: 100% !important;
}
.hero-classic__stat {
    background: transparent !important;
    padding: 14px 12px !important;
    border-right: 1px solid rgba(245,241,235,0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}
.hero-classic__stat:last-child { border-right: none !important; }
.hero-classic__stat-label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(245,241,235,0.35) !important;
}
.hero-classic__stat-value {
    font-family: var(--font-display) !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    color: #F5F1EB !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    font-variation-settings: "opsz" 96 !important;
}
@media (max-width: 900px) {
    .hero-classic__stats { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; }
    .hero-classic__stat:nth-child(2) { border-right: none !important; }
    .hero-classic__stat:nth-child(1),
    .hero-classic__stat:nth-child(2) { border-bottom: 1px solid rgba(245,241,235,0.12) !important; }
}
@media (max-width: 480px) {
    .hero-classic__stats { grid-template-columns: 1fr !important; }
    .hero-classic__stat { border-right: none !important; border-bottom: 1px solid rgba(245,241,235,0.12) !important; }
    .hero-classic__stat:last-child { border-bottom: none !important; }
}
.hero-classic__stat-value .unit {
    font-size: 0.6em;
    color: var(--accent);
    margin-left: 4px;
    font-weight: 500;
    font-style: italic;
}
.hero-classic__stat-sub {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    color: rgba(245,241,235,0.35) !important;
    text-transform: uppercase !important;
}

/* CTA primary rouge plein style DA */
.hero-classic__cta-primary {
    background: var(--accent) !important;
    color: #F5F1EB !important;
    border: none !important;
    padding: 18px 32px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
    transition: background 0.25s, transform 0.25s cubic-bezier(0.25,1,0.5,1) !important;
}
.hero-classic__cta-primary:hover {
    background: var(--accent-hover) !important;
    transform: translateX(3px) !important;
}

.hero-classic__cta-secondary {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(245,241,235,0.6) !important;
    text-decoration: none !important;
}
.hero-classic__cta-secondary:hover { color: #F5F1EB !important; }

/* Background du hero : virer la grille + glow (DA est sobre) */
.hero-classic__grid { opacity: 0.12 !important; }
.hero-classic__glow { opacity: 0.35 !important; }
.hero-classic__noise { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   V25 — VRAIE DA wa.company v1
   Inter + JetBrains Mono ONLY · Zéro italique · #E31E24
   Light par défaut · Radius 0 · Pas de gradient/glow
   ═══════════════════════════════════════════════════════════════ */

:root {
    --font-display: 'Inter', system-ui, sans-serif !important;
    --font-sans:    'Inter', system-ui, sans-serif !important;
    --font-serif:   'Inter', system-ui, sans-serif !important;
    --font-mono:    'JetBrains Mono', monospace !important;
    --accent:       #E31E24 !important;
    --accent-hover: #FF3B41 !important;
    --accent-soft:  rgba(227,30,36,0.10) !important;
    --bg:           #FFFFFF !important;
    --bg-elev:      #FAFAFA !important;
    --text:         #000000 !important;
    --text-muted:   rgba(0,0,0,0.55) !important;
    --text-faint:   rgba(0,0,0,0.35) !important;
    --line:         rgba(0,0,0,0.10) !important;
    --line-strong:  rgba(0,0,0,0.25) !important;
}

/* Body Inter */
body, .wa-theme {
    font-family: 'Inter', system-ui, sans-serif !important;
    background: #FFFFFF !important;
    color: #000000 !important;
}

/* ── ZÉRO ITALIQUE PARTOUT ──
 * Retiré `*, *::before, *::after` du selector (2026-07-04) : cassait dashicons
 * dans l'admin bar WP en écrasant la font-family sur les pseudo-éléments.
 * Les classes ci-dessous couvrent tous les cas intentionnels. */
em, i, .pre, .accent,
.hero-classic__title em,
.hero-classic__title .pre,
.cas-slide__name em,
.method__title em,
.services__title em,
.testimonials__quote-text,
.testimonials__author-quote,
.direction__sig-name,
.direction__title em,
.faq__title em,
.briefing__title em,
.why__title em,
.phases__title em,
.cta-final__title em,
.services-v95__title em,
.services-v95__panel-title em,
.cas__sticky h2 em,
.hero-classic__portrait-tag-name {
    font-style: normal !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Accent (em utilisé pour couleur rouge, pas pour italique) */
.hero-classic__title em,
.method__title em,
.cas__sticky h2 em,
.cas-slide__name em,
.why__title em,
.services__title em,
.testimonials__title em,
.direction__title em,
.faq__title em,
.briefing__title em,
.services-v95__title em,
.services-v95__panel-title em {
    color: #E31E24 !important;
    font-weight: inherit !important;
}

/* ── HERO selon la DA ── */
.hero-classic {
    background: #FFFFFF !important;
    color: #000000 !important;
}
.hero-classic__eyebrow {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,0.55) !important;
    font-weight: 500 !important;
}
.hero-classic__eyebrow .accent,
.hero-classic__eyebrow .num { color: #E31E24 !important; }
.hero-classic__eyebrow .dot { background: #E31E24 !important; }

.hero-classic__title {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(48px, 8vw, 104px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    line-height: 0.95 !important;
    color: #000000 !important;
    text-transform: none !important;
    font-style: normal !important;
}
.hero-classic__title .pre {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: #000000 !important;
    font-style: normal !important;
    text-transform: none !important;
    display: block;
}
.hero-classic__title .pre strong {
    font-weight: 700 !important;
    color: #000000 !important;
}

.hero-classic__sub {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(17px, 1.5vw, 21px) !important;
    color: rgba(0,0,0,0.55) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}
.hero-classic__sub strong { color: #000000 !important; font-weight: 600 !important; }

/* KPI — DA simple, plats, bordés, 4 cards en ligne */
.hero-classic__stats {
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 0;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 100% !important;
    width: 100% !important;
}
.hero-classic__stat {
    background: transparent !important;
    padding: 14px 12px !important;
    border-right: 1px solid rgba(0,0,0,0.10) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.hero-classic__stat:last-child { border-right: none !important; }
.hero-classic__stat-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,0.65) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.hero-classic__stat-value {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    font-style: normal !important;
}
.hero-classic__stat-value .unit {
    font-size: 0.5em;
    color: #E31E24;
    margin-left: 3px;
    font-weight: 500;
    font-style: normal !important;
}
.hero-classic__stat-sub {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
    color: rgba(0,0,0,0.35) !important;
    text-transform: uppercase !important;
    font-style: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
@media (max-width: 900px) {
    .hero-classic__stats { grid-template-columns: repeat(2, 1fr) !important; }
    .hero-classic__stat:nth-child(2) { border-right: none !important; }
    .hero-classic__stat:nth-child(1),
    .hero-classic__stat:nth-child(2) { border-bottom: 1px solid rgba(0,0,0,0.10) !important; }
}
@media (max-width: 480px) {
    .hero-classic__stats { grid-template-columns: 1fr !important; }
    .hero-classic__stat { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.10) !important; }
    .hero-classic__stat:last-child { border-bottom: none !important; }
}

/* CTA Primary — DA boutons rectangulaires mono UPPERCASE */
.hero-classic__cta-primary {
    background: #E31E24 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0;
    padding: 18px 32px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
    transition: background 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1) !important;
}
.hero-classic__cta-primary:hover {
    background: #FF3B41 !important;
    transform: translateY(-1px) !important;
}

.hero-classic__cta-secondary {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,0.55) !important;
    text-decoration: none !important;
    font-style: normal !important;
}
.hero-classic__cta-secondary:hover { color: #000000 !important; }

/* Background hero : virer noise/glow décoratifs (DA dit pas de gradient) */
.hero-classic__noise { display: none !important; }
.hero-classic__glow { display: none !important; }
.hero-classic__grid { opacity: 0.04 !important; }
.hero-classic__grid { background-image: linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px) !important; }

/* Portrait tag — pas d'italique */
.hero-classic__portrait-tag-name {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

/* Headers tags */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-style: normal !important;
}


/* ═══════════════════════════════════════════════════════════════
   V26 — Background hero éditorial enrichi (sobre, respect DA)
   ═══════════════════════════════════════════════════════════════ */

/* Grille un peu plus visible (8% au lieu de 4%) */
.hero-classic__grid {
    opacity: 1 !important;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.07) 1px, transparent 1px) !important;
    background-size: 80px 80px !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Bande verticale rouge à gauche du hero (signature éditoriale) */
.hero-classic::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: #E31E24 !important;
    z-index: 1 !important;
}

/* Index "00 / HERO" en haut à gauche en marquage technique */
.hero-classic::after {
    content: "00 / HERO" !important;
    position: absolute !important;
    top: 96px !important;
    left: 32px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    color: rgba(0,0,0,0.30) !important;
    text-transform: uppercase !important;
    z-index: 2 !important;
}

/* Coordonnées en haut droit */
.hero-classic__inner::before {
    content: attr(data-coord-tag) !important;
    position: absolute !important;
    top: -64px !important;
    right: -clamp(40px, 6vw, 80px) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    color: rgba(0,0,0,0.30) !important;
    text-transform: uppercase !important;
    z-index: 2 !important;
    white-space: nowrap !important;
}

/* Le hero a un padding-left supplémentaire pour respirer après la bande rouge */
.hero-classic {
    padding-left: clamp(48px, 6vw, 96px) !important;
}

/* Ajustement de la mosaïque pour rester équilibrée */
.hero-classic__portrait,
.hero-classic__visual {
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   V27 — Faux YT live : fix bugs visuels + plus réaliste
   ═══════════════════════════════════════════════════════════════ */

/* ── Logo WA●COMPANY visible dans la topnav YT (cf brand-wa--yt) ── */
.live-reveal .brand-wa--yt,
.yt-live-wrap .brand-wa--yt {
    color: #fff !important;
}
.live-reveal .brand-wa--yt .brand-wa__wa,
.live-reveal .brand-wa--yt .brand-wa__co,
.yt-live-wrap .brand-wa--yt .brand-wa__wa,
.yt-live-wrap .brand-wa--yt .brand-wa__co {
    color: #fff !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: -0.01em !important;
}
.live-reveal .brand-wa--yt .brand-wa__dot,
.yt-live-wrap .brand-wa--yt .brand-wa__dot {
    background: #E31E24 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 0;
    margin: 0 4px !important;
}

/* ── Badge verified ✓ : virer le bleu, mettre gris-clair YT-like ── */
.yt-verified, .yt-channel__name .yt-verified {
    background: #AAAAAA !important;
    color: #0F0F0F !important;
}
[data-theme="light"] .yt-verified,
.yt-channel__name .yt-verified {
    background: #606060 !important;
    color: #FFFFFF !important;
}

/* ── Message épinglé : layout propre ── */
.yt-chat__msg--pinned,
.yt-chat__pinned,
.yt-chat__messages .pinned {
    background: rgba(227,30,36,0.12) !important;
    border-left: 3px solid #E31E24 !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    border-radius: 0;
}
.yt-chat__msg-pin-label {
    display: block !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.55) !important;
    margin-bottom: 6px !important;
}
[data-theme="light"] .yt-chat__msg-pin-label { color: rgba(0,0,0,0.55) !important; }

/* ── Modérateur badge style YT (couleur vert YT pour modos) ── */
.yt-chat__msg--mod .yt-chat__msg-user,
.yt-chat__msg-user.is-mod {
    color: #5CB85C !important;
}
.yt-chat__msg-mod-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    background: #5CB85C;
    color: #fff;
    margin-right: 4px;
    font-size: 9px;
    border-radius: 0;
}

/* ── Liens noms cliquables : neutralise le bleu, passe en text-color ── */
.yt-link, .yt-chat__msg-user {
    color: var(--yt-text) !important;
}

/* ── Row actions sous le titre vidéo : Like / Dislike / Share / Save ── */
.yt-actions {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    margin-top: 12px !important;
    flex-wrap: wrap;
}
.yt-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--yt-surface-2, #272727);
    color: var(--yt-text, #fff);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: background 200ms ease;
}
.yt-action:hover { background: var(--yt-surface-3, #3F3F3F); }
.yt-action svg { width: 18px; height: 18px; fill: currentColor; }
.yt-action--like .yt-action__count {
    font-variant-numeric: tabular-nums;
}

/* ── Compteur de viewers qui s'incrémente subtil ── */
.yt-meta [data-yt-viewers] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--yt-text, #fff);
}

/* ── Timer live qui tourne ── */
.yt-live-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--yt-text-2, #AAAAAA);
    letter-spacing: 0.04em;
}
.yt-live-timer::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 0;
    background: #E31E24;
    animation: yt-pulse 1.6s ease-in-out infinite;
}
@keyframes yt-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}


/* ═══════════════════════════════════════════════════════════════
   V28 — Logo WA bien lisible + boutons actions pill (player vidéo)
   ═══════════════════════════════════════════════════════════════ */

/* Logo WA●COMPANY topnav du player vidéo : bien lisible */
.live-reveal .yt-logo,
.yt-live-wrap .yt-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 10px !important;
}
.live-reveal .yt-logo .brand-wa--yt,
.yt-live-wrap .yt-logo .brand-wa--yt {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.live-reveal .yt-logo .brand-wa__wa,
.live-reveal .yt-logo .brand-wa__co,
.yt-live-wrap .yt-logo .brand-wa__wa,
.yt-live-wrap .yt-logo .brand-wa__co {
    color: #FFFFFF !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
.live-reveal .yt-logo .brand-wa__dot,
.yt-live-wrap .yt-logo .brand-wa__dot {
    width: 10px !important;
    height: 10px !important;
    background: #E31E24 !important;
    border-radius: 0;
    display: inline-block !important;
    margin: 0 2px !important;
    box-shadow: 0 0 0 0 rgba(227,30,36,0.7);
    animation: yt-brand-pulse 1.8s ease-in-out infinite;
}
@keyframes yt-brand-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227,30,36,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(227,30,36,0); }
}

/* Badge LIVE à côté du logo */
.live-reveal .yt-logo__live,
.yt-live-wrap .yt-logo__live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 8px !important;
    background: #E31E24 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: 0;
}
.live-reveal .yt-logo__live-dot,
.yt-live-wrap .yt-logo__live-dot {
    width: 6px !important; height: 6px !important;
    background: #FFFFFF !important;
    border-radius: 0;
    display: inline-block !important;
    animation: yt-pulse 1.6s ease-in-out infinite;
}

/* ── Boutons actions — style pill moderne (player vidéo) ── */
.yt-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    flex-wrap: wrap !important;
}
.yt-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    background: rgba(255,255,255,0.10) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 0;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background 200ms ease, transform 200ms ease !important;
    line-height: 1 !important;
}
.yt-action:hover {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-1px) !important;
}
.yt-action svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor;
    color: #FFFFFF !important;
}
/* Pour les SVG en stroke (icônes outline comme share) */
.yt-action svg[stroke],
.yt-action svg[fill="none"] {
    fill: none !important;
    stroke: currentColor !important;
}
.yt-action__count {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Like seul (dislike retiré) — pilule pleine, plus de jonction droite */
.yt-action--like { padding-right: 12px !important; }


/* ═══════════════════════════════════════════════════════════════
   V29 — Logo WA dans topnav YT (fond clair) en NOIR + hide pinned résiduel
   ═══════════════════════════════════════════════════════════════ */

/* Logo WA●COMPANY noir sur fond YT light */
.live-reveal .yt-logo .brand-wa__wa,
.live-reveal .yt-logo .brand-wa__co,
.yt-live-wrap .yt-logo .brand-wa__wa,
.yt-live-wrap .yt-logo .brand-wa__co,
.yt-topnav .brand-wa__wa,
.yt-topnav .brand-wa__co {
    color: #0F0F0F !important;
}

/* Le dot rouge reste rouge */
.yt-topnav .brand-wa__dot,
.live-reveal .yt-logo .brand-wa__dot,
.yt-live-wrap .yt-logo .brand-wa__dot {
    background: #E31E24 !important;
}

/* Hide tout pinned message résiduel au cas où */
.yt-msg__pin,
.yt-chat__msg--pinned,
.yt-chat__pinned {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   V30 — Boutons actions (Like/Dislike/Share/Save) noir sur gris clair
   Le YT est en light theme depuis V13. Override les blancs de V28.
   ═══════════════════════════════════════════════════════════════ */

.yt-actions .yt-action,
.yt-actions .yt-action.yt-action--like {
    background: rgba(0,0,0,0.06) !important;
    color: #0F0F0F !important;
}
.yt-actions .yt-action:hover {
    background: rgba(0,0,0,0.12) !important;
}
.yt-actions .yt-action svg {
    fill: #0F0F0F !important;
}
/* Fix 2026-07-04 : icônes outline (Partager = fill=none stroke=currentColor)
   étaient écrasées en blob noir par la règle ci-dessus. Restore stroke look. */
.yt-actions .yt-action svg[stroke],
.yt-actions .yt-action svg[fill="none"] {
    fill: none !important;
    stroke: #0F0F0F !important;
}
.yt-actions .yt-action__count {
    color: #0F0F0F !important;
}

/* Border séparateur Like/Dislike : passer en sombre */
.yt-actions .yt-action--like + .yt-action[aria-label="Je n'aime pas"] {
    border-left: 1px solid rgba(0,0,0,0.18) !important;
}

/* Timer live noir sur fond clair */
.yt-live-timer {
    color: rgba(0,0,0,0.65) !important;
}


/* ═══════════════════════════════════════════════════════════════
   V31 — Retirer marquage technique éditorial du hero (V26)
   ═══════════════════════════════════════════════════════════════ */

.hero-classic::before,
.hero-classic::after,
.hero-classic__inner::before,
.hero-classic__inner::after {
    display: none !important;
    content: none !important;
}

/* Reset le padding-left qui avait été augmenté pour la bande rouge */
.hero-classic {
    padding-left: clamp(32px, 5vw, 80px) !important;
}


/* ═══════════════════════════════════════════════════════════════
   V32 — Remettre la bande rouge verticale à gauche du hero
   (mais pas le 00/HERO ni les coordonnées Dubai)
   ═══════════════════════════════════════════════════════════════ */

.hero-classic::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: #E31E24 !important;
    z-index: 1 !important;
}

/* Garde le padding-left légèrement augmenté pour respirer après la bande */
.hero-classic {
    padding-left: clamp(48px, 6vw, 96px) !important;
}


/* ═══════════════════════════════════════════════════════════════
   V33 — KPI cards fond blanc + ombre subtile, titre .pre une ligne
   ═══════════════════════════════════════════════════════════════ */

/* KPI cards : fond blanc surélevé avec ombre douce pour le relief */
.hero-classic__stats {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06) !important;
}
.hero-classic__stat {
    border-right-color: rgba(0,0,0,0.08) !important;
}

/* Titre .pre : tenir sur une seule ligne (taille réduite, white-space nowrap) */
.hero-classic__title .pre {
    font-size: clamp(18px, 2.1vw, 28px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.005em !important;
}

/* Le titre principal (vous amener au sommet.) reste en grand */
.hero-classic__title {
    font-size: clamp(48px, 8vw, 104px) !important;
    line-height: 0.95 !important;
}




/* ═══════════════════════════════════════════════════════════════
   V34b — Background live-reveal enrichi : glows rouges boostés
   ═══════════════════════════════════════════════════════════════ */

.live-reveal {
    position: relative !important;
    background:
        /* Glow rouge dominant haut-gauche */
        radial-gradient(ellipse 900px 700px at 12% 22%, rgba(227,30,36,0.28), transparent 65%),
        /* Glow rouge bas-droite (régie) */
        radial-gradient(ellipse 800px 600px at 88% 78%, rgba(227,30,36,0.20), transparent 65%),
        /* Glow rouge central très diffus */
        radial-gradient(ellipse 1200px 800px at 50% 50%, rgba(227,30,36,0.08), transparent 70%),
        /* Grille technique */
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px),
        #0A0908 !important;
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        80px 80px,
        80px 80px !important;
}

.live-reveal::before {
    content: attr(data-broadcast-tag) !important;
    position: absolute !important;
    top: 32px !important;
    left: 32px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.45) !important;
    z-index: 4 !important;
}
.live-reveal::after {
    content: "SIGNAL · DUBAI · 24FPS · 1920×1080" !important;
    position: absolute !important;
    top: 32px !important;
    right: 32px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.45) !important;
    z-index: 4 !important;
}

@media (max-width: 700px) {
    .live-reveal::before,
    .live-reveal::after { display: none !important; }
}




/* ═══════════════════════════════════════════════════════════════
   V35.1 — Glows sur .live-reveal__pin (sticky) SANS casser
   le scrollytelling 3D du player (qui reste position: absolute)
   ═══════════════════════════════════════════════════════════════ */

.live-reveal { background: #0A0908 !important; position: relative !important; }

/* Background ambient peint sur le pin sticky (il a déjà isolation: isolate
   et perspective dans live-reveal.css ligne 27 — on ne touche pas) */
.live-reveal__pin::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 70% 60% at 18% 28%, rgba(227,30,36,0.38), transparent 60%),
        radial-gradient(ellipse 60% 55% at 85% 75%, rgba(227,30,36,0.30), transparent 60%),
        radial-gradient(ellipse 90% 70% at 50% 55%, rgba(227,30,36,0.10), transparent 65%),
        linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 80px 80px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Marqueurs régie en haut sur la section globale */
.live-reveal::before {
    content: attr(data-broadcast-tag) !important;
    position: absolute !important;
    top: 32px !important;
    left: 32px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.5) !important;
    z-index: 10 !important;
}
.live-reveal::after {
    content: "SIGNAL · DUBAI · 24FPS · 1920×1080" !important;
    position: absolute !important;
    top: 32px !important;
    right: 32px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.5) !important;
    z-index: 10 !important;
}

@media (max-width: 700px) {
    .live-reveal::before,
    .live-reveal::after { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   V37 — Chat YT : virer vert/bleu, tout en rouge/noir/gris (DA)
   ═══════════════════════════════════════════════════════════════ */

/* Member (était vert #2BA640) → gris neutre */
.yt-msg--member .yt-msg__name {
    color: #6B7280 !important;
}
.yt-msg--member .yt-msg__avatar {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #4B5563 !important;
}

/* Mod (était bleu #5E84F1) → rouge DA */
.yt-msg--mod .yt-msg__name {
    color: var(--yt-red, #E31E24) !important;
}
.yt-msg--mod .yt-msg__avatar {
    background: rgba(227,30,36,0.10) !important;
    border-color: rgba(227,30,36,0.35) !important;
    color: var(--yt-red, #E31E24) !important;
}


/* ═══════════════════════════════════════════════════════════════
   V38 — Like button interactif : état liked + confettis rouges
   ═══════════════════════════════════════════════════════════════ */

.yt-action--like {
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.2s ease !important;
}
.yt-action--like:active {
    transform: scale(0.92) !important;
}
.yt-action--like.is-liked {
    background: rgba(227, 30, 36, 0.12) !important;
    color: var(--yt-red, #E31E24) !important;
}
.yt-action--like.is-liked svg {
    fill: var(--yt-red, #E31E24) !important;
}
.yt-action--like.is-liked .yt-action__count {
    color: var(--yt-red, #E31E24) !important;
    font-weight: 600 !important;
}

/* Confetti particles — position:fixed sur body pour contourner overflow */
/* Portal qui escape le isolation: isolate du pin */
.wa-confetti-portal {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    overflow: visible !important;
}
.wa-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 100;
    will-change: transform, opacity;
}

@keyframes wa-confetti-fly {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    60% { opacity: 1; }
    100% {
        opacity: 0;
        transform:
            translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0)))
            rotate(var(--rot, 360deg))
            scale(0.4);
    }
}


/* ═══════════════════════════════════════════════════════════════
   V39 — Titre yt-info : padding-top + ● mini, like animation polish
   ═══════════════════════════════════════════════════════════════ */

/* Espacement vidéo / titre */
.yt-info__title {
    margin-top: 14px !important;
    padding-top: 4px !important;
}

/* Point ● réduit dans les noms WA●COMPANY */
.wa-mini-dot {
    display: inline-block !important;
    font-size: 0.45em !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -0.12em !important;
    margin: 0 0.15em !important;
    color: var(--yt-red, #E31E24) !important;
    line-height: 1 !important;
}

/* Like button : punch animation au click */
.yt-action--like {
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.yt-action--like:active {
    transform: scale(0.95) !important;
}
.yt-action--like.is-liked {
    background: rgba(227, 30, 36, 0.12) !important;
    color: var(--yt-red, #E31E24) !important;
    animation: wa-like-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.yt-action--like.is-liked svg {
    fill: var(--yt-red, #E31E24) !important;
    animation: wa-like-svg-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.yt-action--like.is-liked .yt-action__count {
    color: var(--yt-red, #E31E24) !important;
    font-weight: 600 !important;
}

@keyframes wa-like-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes wa-like-svg-pop {
    0% { transform: scale(1) rotate(0deg); }
    35% { transform: scale(1.5) rotate(-15deg); }
    70% { transform: scale(0.9) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}


/* ═══════════════════════════════════════════════════════════════
   V40 — Interactivité YT : subscribe, bell, share, profile, chat
   ═══════════════════════════════════════════════════════════════ */

/* ── Subscribe state ── */
.yt-subscribe {
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.yt-subscribe:active { transform: scale(0.95); }
.yt-subscribe.is-subscribed {
    background: rgba(0,0,0,0.08) !important;
    color: #0F0F0F !important;
    animation: wa-like-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Bell toggle ── */
.yt-bell {
    cursor: pointer;
    transition: background 0.2s;
}
.yt-bell.is-active {
    background: rgba(227,30,36,0.10) !important;
}
.yt-bell.is-active svg {
    fill: var(--yt-red, #E31E24) !important;
    animation: wa-bell-shake 600ms ease;
}
@keyframes wa-bell-shake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-15deg); }
    40% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(5deg); }
}

/* ── Search input activé ── */
.yt-search__input {
    cursor: text !important;
}
.yt-search__input:focus {
    outline: none;
    border-color: var(--yt-red, #E31E24) !important;
}

/* ── Toast notification ── */
.wa-toast {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0F0F0F;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 2px 8px rgba(227,30,36,0.2);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}
.wa-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Avatar B clickable + profile dropdown ── */
.yt-avatar {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.yt-avatar:hover { transform: scale(1.05); }

.wa-profile-panel {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0;
    padding: 16px;
    width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    font-family: 'Inter', sans-serif;
    z-index: 998;
    animation: wa-panel-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #0F0F0F;
}
@keyframes wa-panel-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-profile-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.wa-profile-panel__avatar {
    width: 40px; height: 40px;
    border-radius: 0;
    background: var(--yt-red, #E31E24);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.wa-profile-panel__name {
    font-size: 14px;
    font-weight: 600;
}
.wa-profile-panel__email {
    font-size: 12px;
    color: #6B7280;
}
.wa-profile-panel__line {
    padding: 12px 0;
    font-size: 13px;
    color: #4B5563;
}
.wa-profile-panel__line strong {
    color: var(--yt-red, #E31E24);
    font-weight: 600;
}
.wa-profile-panel__cta {
    display: block;
    text-align: center;
    padding: 10px 14px;
    background: #0F0F0F;
    color: #fff !important;
    border-radius: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s;
}
.wa-profile-panel__cta:hover { background: var(--yt-red, #E31E24); }

/* ── Chat send button (remplaçait emoji 😀) ── */
.yt-chat__send {
    background: var(--yt-red, #E31E24) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.15s !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}
.yt-chat__send:hover { background: #B81117 !important; }
.yt-chat__send:active { transform: scale(0.92) !important; }
.yt-chat__send svg { display: block; }

/* ── Chat field activé ── */
.yt-chat__field {
    cursor: text !important;
    opacity: 1 !important;
}
.yt-chat__field:focus {
    outline: none;
    border-color: var(--yt-red, #E31E24) !important;
}

/* ── Mon message dans le chat (yt-msg--me) ── */
.yt-msg--me .yt-msg__name {
    color: var(--yt-red, #E31E24) !important;
    font-weight: 600 !important;
}
.yt-msg--me .yt-msg__avatar {
    background: var(--yt-red, #E31E24) !important;
    border-color: var(--yt-red, #E31E24) !important;
    color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════
   V41 — Float hearts, chat hover, notifs panel, tabs, easter eggs
   ═══════════════════════════════════════════════════════════════ */

/* ── Float heart depuis like ── */
.wa-float-heart {
    position: absolute;
    color: var(--yt-red, #E31E24);
    font-size: 22px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 50;
    user-select: none;
    line-height: 1;
}

/* ── Chat message hover : mini-bar Réagir/Répondre ── */
.yt-msg { position: relative; }
.yt-msg__tools {
    position: absolute;
    top: -8px;
    right: 12px;
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 5;
}
.yt-msg__tools button {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    color: #4B5563;
    transition: background 0.15s, color 0.15s;
}
.yt-msg__tools button:hover {
    background: rgba(227,30,36,0.08);
    color: var(--yt-red, #E31E24);
}
.yt-msg__heart {
    position: absolute;
    bottom: 4px;
    right: 8px;
    color: var(--yt-red, #E31E24);
    font-size: 12px;
    background: rgba(227,30,36,0.10);
    border-radius: 0;
    padding: 2px 6px;
    animation: wa-heart-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wa-heart-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ── Notifications topnav panel ── */
.wa-notif-panel {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0;
    width: 340px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    font-family: 'Inter', sans-serif;
    z-index: 998;
    animation: wa-panel-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #0F0F0F;
    overflow: hidden;
}
.wa-notif-panel__head {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.wa-notif-panel__item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
}
.wa-notif-panel__item:last-child { border-bottom: none; }
.wa-notif-panel__item:hover { background: rgba(0,0,0,0.03); }
.wa-notif-panel__dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--yt-red, #E31E24);
    margin-top: 6px;
    flex-shrink: 0;
}
.wa-notif-panel__title {
    font-size: 13px;
    line-height: 1.4;
    color: #0F0F0F;
}
.wa-notif-panel__title strong { font-weight: 600; }
.wa-notif-panel__time {
    font-size: 11px;
    color: #6B7280;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Tabs Chat en direct / Top chat ── */
.yt-chat__tab {
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

/* ── Dislike state ── */
.yt-action.is-disliked {
    background: rgba(0,0,0,0.08) !important;
    color: #0F0F0F !important;
    transform: scale(1);
    animation: wa-like-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yt-action.is-disliked svg { fill: #0F0F0F !important; }

/* ── Saved state ── */
.yt-action.is-saved {
    background: rgba(227,30,36,0.08) !important;
    color: var(--yt-red, #E31E24) !important;
}
.yt-action.is-saved svg { fill: var(--yt-red, #E31E24) !important; }

/* ── EN DIRECT badge ripple ── */
.wa-ripple {
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: rgba(227,30,36,0.5);
    animation: wa-ripple-fly 700ms ease-out forwards;
    pointer-events: none;
    z-index: 1;
}
@keyframes wa-ripple-fly {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Vraies notifs supprimées : on les rend silencieuses */
.yt-subscribe, .yt-bell, .yt-search__input { /* no toast attached */ }


/* ═══════════════════════════════════════════════════════════════
   V42 — Sidebar YT-style sur burger click (menu du site WA)
   ═══════════════════════════════════════════════════════════════ */

.wa-yt-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    font-family: 'Inter', sans-serif;
    color: #0F0F0F;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.wa-yt-sidebar.is-open { transform: translateX(0); }

.wa-yt-sidebar__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.wa-yt-sidebar__close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #0F0F0F;
    padding: 6px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.wa-yt-sidebar__close:hover { background: rgba(0,0,0,0.06); }
.wa-yt-sidebar__brand {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
}
.wa-yt-sidebar__brand .wa-mini-dot { color: var(--yt-red, #E31E24); }

.wa-yt-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}
.wa-yt-sidebar__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    color: #0F0F0F;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}
.wa-yt-sidebar__item svg { flex-shrink: 0; color: #4B5563; }
.wa-yt-sidebar__item:hover {
    background: rgba(0,0,0,0.04);
    border-left-color: var(--yt-red, #E31E24);
}
.wa-yt-sidebar__item:hover svg { color: var(--yt-red, #E31E24); }
.wa-yt-sidebar__item--cta {
    background: var(--yt-red, #E31E24) !important;
    color: #fff !important;
    margin: 8px 16px;
    border-radius: 0;
    padding: 12px 16px;
    border-left: none !important;
    font-weight: 600;
}
.wa-yt-sidebar__item--cta svg { color: #fff !important; }
.wa-yt-sidebar__item--cta:hover { background: #B81117 !important; }

.wa-yt-sidebar__sep {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin: 8px 0;
}

.wa-yt-sidebar__foot {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 11px;
    color: #6B7280;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
}
.wa-yt-sidebar__meta { margin-top: 4px; font-size: 10px; }
.wa-yt-sidebar__foot .wa-mini-dot { color: var(--yt-red, #E31E24); }


/* ═══════════════════════════════════════════════════════════════
   V43 — Hero classic : vrai grid 2 cols (fix overlap entre 1280-1500px)
   ═══════════════════════════════════════════════════════════════ */

.hero-classic {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 480px) !important;
    column-gap: clamp(32px, 4vw, 72px) !important;
    align-items: center !important;
    padding: 120px clamp(40px, 5vw, 80px) 80px clamp(48px, 6vw, 96px) !important;
}

.hero-classic__inner {
    max-width: none !important;
    margin: 0 !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.hero-classic__visual {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 480px !important;
    grid-column: 2 !important;
    justify-self: end !important;
    aspect-ratio: 4/5 !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
    gap: 10px !important;
    z-index: 2 !important;
}

/* Sous 1100px : stack en single column */
@media (max-width: 1100px) {
    .hero-classic {
        grid-template-columns: 1fr !important;
        padding: 96px clamp(24px, 5vw, 48px) 64px !important;
    }
    .hero-classic__visual {
        max-width: 100% !important;
        margin-top: 32px !important;
        justify-self: stretch !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   CAS-STRIPE — Faux extract Stripe Dashboard (remplace cas-dash)
   Sobre, gris/blanc, violet Stripe #635BFF
   ════════════════════════════════════════════════════════════════ */
.cas-stripe {
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    color: #14171C;
    /* Étire le dashboard sur toute la hauteur du parent .cas-hero */
    height: 100%;
    display: flex;
    flex-direction: column;
    --csa: #E31E24;
    --csa-soft: rgba(227,30,36,0.08);
    --cst: #14171C;
    --cst-sub: #4A4F58;
    --csl: #ECEDEF;
    --csbg: #F9FAFB;
}
/* En mode reverse (photo à droite), le border passe à droite */
.cas-hero--reverse .cas-stripe {
    border-left: none;
    border-right: 1px solid rgba(0,0,0,0.08);
}

/* Topbar sobre maison (sans logo Stripe) */
.cas-stripe__topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 14px;
    border-bottom: 1px solid var(--csl);
    background: var(--csbg);
    font-size: 11px;
    min-height: 28px;
}
.cas-stripe__brand {
    display: flex; align-items: center; gap: 6px;
    font-weight: 500;
    color: var(--cst);
}
.cas-stripe__brand-dot {
    width: 6px; height: 6px;
    border-radius: 0;
    background: var(--csa);
    flex-shrink: 0;
}
.cas-stripe__brand-label {
    font-weight: 600;
    color: var(--cst);
    letter-spacing: -0.005em;
}
.cas-stripe__breadcrumb {
    color: var(--cst-sub);
    font-weight: 400;
    margin-left: 2px;
}
.cas-stripe__env {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--csa);
    background: var(--csa-soft);
    padding: 3px 7px;
    border-radius: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cas-stripe__env-dot {
    width: 5px; height: 5px;
    border-radius: 0;
    background: var(--csa);
    box-shadow: 0 0 0 2px rgba(227,30,36,0.18);
    animation: cstrEnvPulse 2.5s ease-in-out infinite;
}
@keyframes cstrEnvPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(227,30,36,0.18); }
    50%      { box-shadow: 0 0 0 4px rgba(227,30,36,0.06); }
}

/* Header avec metric principal — affiné */
.cas-stripe__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 20px 10px;
    gap: 16px;
}
.cas-stripe__metric {
    display: flex; flex-direction: column; gap: 4px;
}
.cas-stripe__metric-label {
    font-size: 12px;
    color: var(--cst-sub);
    font-weight: 500;
}
.cas-stripe__metric-value {
    font-size: 26px;
    font-weight: 600;
    color: var(--cst);
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cas-stripe__metric-num {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}
.cas-stripe__metric-delta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    color: var(--csa);
}
.cas-stripe__metric-delta svg {
    width: 9px; height: 9px;
    flex-shrink: 0;
}
.cas-stripe__metric-delta-sub {
    color: var(--cst-sub);
    font-weight: 400;
    margin-left: 3px;
    font-size: 11px;
}

.cas-stripe__period-pick { flex-shrink: 0; }
.cas-stripe__period-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff;
    border: 1px solid var(--csl);
    border-radius: 0;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--cst);
    cursor: default;
    font-family: inherit;
}
.cas-stripe__period-btn svg { color: var(--cst-sub); margin-left: 1px; }

/* Chart container — flex-grow pour remplir l'espace dispo */
.cas-stripe__chart {
    position: relative;
    padding: 2px 20px 22px;
    min-height: 200px;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: 1fr 18px;
    gap: 4px 8px;
}
.cas-stripe__yaxis {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    justify-content: space-between;
    text-align: right;
    grid-row: 1;
    grid-column: 1;
    padding: 4px 0;
}
.cas-stripe__yaxis li {
    font-size: 9px;
    color: var(--cst-sub);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0.85;
}
.cas-stripe__svg {
    grid-row: 1;
    grid-column: 2;
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
}
.cas-stripe__xaxis {
    list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: space-between;
    grid-row: 2;
    grid-column: 2;
    padding: 5px 0 0;
}
.cas-stripe__xaxis li {
    font-size: 9px;
    color: var(--cst-sub);
    font-weight: 500;
    opacity: 0.85;
}
/* Grille SVG plus discrète */
.cas-stripe__grid line {
    stroke: #F0F1F3;
    stroke-dasharray: none;
}

/* États initiaux SVG (avant scroll-in) */
.cas-stripe__line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}
.cas-stripe__area    { opacity: 0; }
.cas-stripe__marker  { opacity: 0; }
.cas-stripe__endpoint { opacity: 0; transform-origin: center; transform-box: fill-box; }

/* Anim quand .is-anim — discrète, "Stripe-like" */
.cas-stripe__chart.is-anim .cas-stripe__line {
    animation: stripeDraw 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.cas-stripe__chart.is-anim .cas-stripe__area {
    animation: stripeFadeIn 1.5s ease-out 1.6s forwards;
}
.cas-stripe__chart.is-anim .cas-stripe__marker {
    animation: stripeFadeIn 0.2s ease-out 0.2s forwards;
}
.cas-stripe__chart.is-anim .cas-stripe__endpoint {
    animation: stripeEndIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s forwards;
}

@keyframes stripeDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes stripeFadeIn {
    to { opacity: 1; }
}
@keyframes stripeEndIn {
    0%   { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

/* Footer stats — affiné */
.cas-stripe__footer {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 20px;
    padding: 11px 20px 13px;
    border-top: 1px solid var(--csl);
    background: var(--csbg);
}
.cas-stripe__stat {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.cas-stripe__stat-label {
    font-size: 9px;
    color: var(--cst-sub);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}
.cas-stripe__stat-value {
    font-size: 12px;
    color: var(--cst);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.cas-stripe__stat--period {
    grid-column: 4;
    justify-self: end;
    text-align: right;
}
.cas-stripe__stat--period .cas-stripe__stat-value {
    font-weight: 500;
    color: var(--cst-sub);
    font-size: 11px;
}

@media (max-width: 700px) {
    .cas-stripe__topbar { padding: 6px 12px; font-size: 10px; }
    .cas-stripe__breadcrumb { display: none; }
    .cas-stripe__header { padding: 14px 14px 8px; flex-direction: column; gap: 10px; }
    .cas-stripe__period-pick { align-self: flex-start; }
    .cas-stripe__metric-value { font-size: 22px; }
    .cas-stripe__chart { padding: 2px 14px 22px; height: 170px; grid-template-columns: 32px 1fr; }
    .cas-stripe__footer {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 14px 12px;
    }
    .cas-stripe__stat--period { grid-column: 1 / -1; justify-self: start; text-align: left; }
}


/* ════════════════════════════════════════════════════════════════
   POURQUOI WA — Variant thème clair (.why--light)
   ════════════════════════════════════════════════════════════════ */
.why--light {
    background: var(--bg-white, #fff);
    color: var(--text-on-white, #111);
}
.why--light .why__title {
    color: var(--text-on-white, #111);
}
.why--light .why__title em {
    color: var(--text-on-white, #111);
}
.why--light .why-step {
    border-top-color: rgba(0,0,0,0.1);
}
.why--light .why-step:last-child {
    border-bottom-color: rgba(0,0,0,0.1);
}
.why--light .why-step__title {
    color: var(--text-on-white, #111);
}
.why--light .why-step__body {
    color: rgba(0,0,0,0.65);
}
.why--light .why-step__body strong {
    color: var(--text-on-white, #111);
}
.why--light .eyebrow {
    color: rgba(0,0,0,0.65);
}
.why--light .eyebrow .num {
    color: var(--accent);
}
/* Lead/sub si présent */
.why--light .why__sub,
.why--light .why__lead {
    color: rgba(0,0,0,0.7);
}
/* Le trait rouge sous le num (anim reveal) reste rouge — OK déjà */


/* ════════════════════════════════════════════════════════════════
   SÉLECTION — Horizontal Pinned Scroll, design éditorial
   Le scroll vertical est converti en défilement horizontal des panels
   ════════════════════════════════════════════════════════════════ */
.selection-hs {
    background: #f6f4f0;       /* fond crème léger : permet aux cards blanches de se détacher */
    color: var(--text-on-white, #111);
    position: relative;
}
.selection-hs__track-wrapper {
    position: relative;
    /* height définie en inline-style : N × 100vh */
}
.selection-hs__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;          /* clip horizontal local, pas global */
    display: flex;
    flex-direction: column;
    background: #f6f4f0;
}

/* === HEAD : compact + horizontal === */
.selection-hs__head {
    flex-shrink: 0;
    padding: clamp(28px, 4vh, 48px) clamp(24px, 5vw, 80px) clamp(16px, 2vh, 28px);
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: flex; align-items: baseline; gap: 24px;
    flex-wrap: wrap;
}
.selection-hs__eyebrow {
    display: inline-flex; align-items: baseline; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
    flex-shrink: 0;
    padding-right: 24px;
    border-right: 1px solid rgba(0,0,0,0.12);
}
.selection-hs__eyebrow .num { color: var(--accent); }
.selection-hs__title {
    font: 500 clamp(24px, 3vw, 38px)/1.05 var(--font-sans);
    letter-spacing: -0.025em;
    margin: 0;
    color: #111;
}
.selection-hs__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}
.selection-hs__title .dot { color: var(--accent); }

/* === VIEWPORT + TRACK HORIZONTAL === */
.selection-hs__viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.selection-hs__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
    will-change: transform;
    /* La largeur est inline (N × 100vw) ; pas de transition CSS (JS pilote) */
}

/* === PANEL ÉTAPE === */
/* === PANEL = wrapper qui contient la CARD ===
   Le panel reste à 100vw pour le scroll horizontal pinned, mais la CARD à l'intérieur
   est plus étroite et s'affiche comme un objet qui se détache du fond crème. */
.selpanel {
    flex: 0 0 100vw;
    height: 100%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(40px, 5vh, 60px) clamp(24px, 6vw, 80px);
}

/* La CARD = surface visuelle 2 colonnes : MEDIA gauche + CONTENT droite */
.selpanel__card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow:
        0 1px 2px rgba(16,24,40,0.04),
        0 20px 56px -20px rgba(16,24,40,0.18);
    width: 100%;
    max-width: 1100px;
    height: auto;
    max-height: clamp(320px, 48vh, 440px);
    aspect-ratio: 21/10;
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 0;
    transform: scale(0.93);
    opacity: 0.55;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Card active = pleine ampleur + ombre plus dramatique */
.selpanel.is-active .selpanel__card {
    transform: scale(1);
    opacity: 1;
    box-shadow:
        0 1px 2px rgba(16,24,40,0.04),
        0 36px 88px -24px rgba(16,24,40,0.28),
        0 0 0 1px rgba(0,0,0,0.04);
}

/* Connector entre cards (visible dans le gap entre panels) */
.selpanel__connector {
    position: absolute;
    top: 50%;
    right: clamp(-30px, -2vw, 4px);
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex; align-items: center;
    gap: 8px;
    pointer-events: none;
}
.selpanel__connector-line {
    width: clamp(20px, 2vw, 36px);
    height: 1px;
    background: rgba(0,0,0,0.2);
    position: relative;
}
.selpanel__connector-line::before,
.selpanel__connector-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3px; height: 3px;
    background: rgba(0,0,0,0.3);
    transform: translateY(-50%);
}
.selpanel__connector-line::before { left: -8px; }
.selpanel__connector-line::after  { right: -8px; }
.selpanel__connector-arrow {
    font: 500 14px/1 var(--font-sans);
    color: var(--accent);
}

/* === MEDIA (colonne gauche) === */
.selpanel__media {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0a0a;
    filter: grayscale(85%) contrast(1.05);
    overflow: hidden;
    transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.selpanel__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.15) 0%, rgba(227,30,36,0.18) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.selpanel.is-active .selpanel__media {
    filter: grayscale(60%) contrast(1.08);
    transform: scale(1.02);
}
.selpanel__media-bgnum {
    position: absolute;
    left: clamp(-12px, -0.5vw, -4px);
    bottom: clamp(-40px, -3vw, -16px);
    font: 400 clamp(180px, 22vw, 360px)/0.85 var(--font-serif);
    font-style: italic;
    color: rgba(255,255,255,0.16);
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
    z-index: 2;
    text-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

/* === CONTENT (colonne droite) === */
.selpanel__content {
    position: relative;
    padding: clamp(20px, 2.5vw, 36px) clamp(24px, 3vw, 44px);
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: clamp(10px, 1.2vw, 16px);
    overflow: hidden;
}
.selpanel__inner {
    display: contents; /* legacy fallback */
}

/* Legacy bgnum (n'existe plus dans le markup mais on garde compat) */
.selpanel__bgnum {
    display: none;
}
.selpanel.is-active .selpanel__bgnum {
    display: none;
}

/* Topline : chip + connector vers prochain */
.selpanel__topline {
    display: flex; align-items: center;
    gap: 24px;
}
.selpanel__chip {
    display: inline-flex; align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
}
.selpanel__chip-num {
    font: 400 26px/1 var(--font-serif);
    font-style: italic;
    color: var(--accent);
    letter-spacing: -0.02em;
}
.selpanel__chip-sep {
    color: rgba(0,0,0,0.3);
}
.selpanel__chip-jour {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #111;
}
.selpanel__topline-connector-legacy {
    display: none;
}
.selpanel__topline-connector-legacy-line {
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.15);
    position: relative;
}
.selpanel__connector-arrow {
    font: 500 18px/1 var(--font-sans);
    color: rgba(0,0,0,0.35);
}

/* Body */
.selpanel__body {
    display: flex; flex-direction: column;
    gap: 14px;
}
.selpanel__tag {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
}
.selpanel__tag .dot-accent { color: var(--accent); font-size: 0.85em; }
.selpanel__title {
    font: 400 clamp(32px, 3.8vw, 54px)/0.98 var(--font-serif);
    font-style: italic;
    color: #111;
    letter-spacing: -0.03em;
    margin: 0;
}
.selpanel__dot { color: var(--accent); font-style: normal; }
.selpanel__desc {
    font: 400 clamp(15px, 1.1vw, 17px)/1.55 var(--font-sans);
    color: rgba(0,0,0,0.7);
    max-width: 520px;
    margin: 0;
}

/* Foot */
.selpanel__foot { margin-top: 8px; }
.selpanel__hint {
    display: inline-flex; align-items: center; gap: 10px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.62);
}
.selpanel__hint-arrow {
    font: 500 14px/1 var(--font-sans);
    color: var(--accent);
    animation: hintBounce 1.8s ease-in-out infinite;
}
@keyframes hintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}
.selpanel__cta {
    display: inline-flex; align-items: center;
    gap: 14px;
    background: var(--accent);
    color: #fff;
    padding: 20px 32px;
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.3s, gap 0.3s, transform 0.3s;
}
.selpanel__cta:hover {
    background: #c91920;
    gap: 18px;
    transform: translateY(-2px);
}
.selpanel__cta-dot {
    width: 6px; height: 6px;
    border-radius: 0;
    background: #fff;
    flex-shrink: 0;
}
.selpanel__cta-arrow { font-size: 14px; }

/* === Panel FINAL (étape 05) : thème inversé noir === */
/* Panel FINAL : la card devient noire, le wrapper panel reste crème */
/* Panel FINAL : card avec content droite en noir, media gauche reste photo */
.selpanel--final { color: #fff; }
.selpanel--final .selpanel__card {
    border-color: rgba(0,0,0,0.08);
}
.selpanel--final .selpanel__content {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}
.selpanel--final .selpanel__chip {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
}
.selpanel--final .selpanel__chip-jour { color: #fff; }
.selpanel--final .selpanel__chip-sep { color: rgba(255,255,255,0.4); }
.selpanel--final .selpanel__title { color: #fff; }
.selpanel--final .selpanel__tag { color: rgba(255,255,255,0.6); }
.selpanel--final .selpanel__desc { color: rgba(255,255,255,0.78); }
.selpanel--final .selpanel__media-bgnum { color: rgba(227,30,36,0.4); }

/* === PROGRESS (bar + counter + dots) === */
.selection-hs__progress {
    flex-shrink: 0;
    padding: clamp(20px, 3vh, 36px) clamp(24px, 5vw, 80px);
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.selection-hs__counter {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    color: rgba(0,0,0,0.62);
    display: inline-flex; align-items: baseline; gap: 6px;
}
.selection-hs__counter b {
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
}
.selection-hs__counter-sep {
    color: rgba(0,0,0,0.2);
}
.selection-hs__bar {
    position: relative;
    height: 1px;
    background: rgba(0,0,0,0.1);
}
.selection-hs__bar-fill {
    position: absolute;
    left: 0; top: -1px;
    height: 3px;
    width: 20%;
    background: var(--accent);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px rgba(227,30,36,0.5);
}
.selection-hs__dots {
    display: inline-flex; align-items: center; gap: 8px;
}
.selection-hs__dot {
    width: 7px; height: 7px;
    border-radius: 0;
    background: rgba(0,0,0,0.15);
    transition: background 0.3s, transform 0.3s;
    cursor: pointer;
}
.selection-hs__dot.is-active {
    background: var(--accent);
    transform: scale(1.3);
}

/* === Mobile : désactive le horizontal pin, retour vertical === */
@media (max-width: 900px) {
    .selection-hs__track-wrapper {
        height: auto !important;
    }
    .selection-hs__sticky {
        position: relative;
        height: auto;
        overflow: visible;
    }
    .selection-hs__viewport {
        overflow: visible;
        flex: 0 0 auto;
    }
    .selection-hs__track {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100% !important;
        transform: none !important;
        gap: 1px;
        background: rgba(0,0,0,0.08);
    }
    .selpanel {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 24px);
    }
    .selpanel__card {
        max-height: none;
        transform: none;
        opacity: 1;
        aspect-ratio: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 220px auto;
    }
    .selpanel__media-bgnum { font-size: 180px; }
    .selpanel__content { padding: clamp(28px, 5vw, 40px); }
    .selpanel--final .selpanel__card {
        background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    }
    .selpanel__title { font-size: clamp(40px, 12vw, 80px); }
    .selpanel__bgnum { font-size: clamp(180px, 50vw, 280px); }
    .selpanel__connector { display: none; }
    .selection-hs__progress { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   YT-LIVE — Force 90° (rectangle pur) dans tout l'univers de marque
   Override de tous les border-radius dans le faux YT live
   ════════════════════════════════════════════════════════════════ */
.live-reveal,
.live-reveal *,
.yt-live-wrap,
.yt-live-wrap *,
[data-cockpit-wrap],
[data-cockpit-wrap] * {
    border-radius: 0;
}

/* Cas particuliers : forcer carré sur les éléments connus pour leur rondeur */
.yt-channel__avatar,
.yt-channel__avatar *,
.wa-yt-msg__avatar,
.yt-chat__avatar,
.yt-action,
.yt-action--like,
.yt-action--share,
.yt-action--save,
.yt-action--bell,
.yt-subscribe,
.yt-bell,
.yt-verified,
.yt-search,
.yt-search__input,
.yt-chat__field,
.yt-chat__input,
.yt-desc,
.live-dot,
.live-reveal__copy-cta,
.yt-live-badge,
.yt-live-badge__dot,
.yt-info__title,
.wa-yt-chat,
.wa-yt-chat *,
.wa-yt-msg,
.wa-yt-msg *,
.wa-yt-burger,
.wa-yt-sidebar,
.wa-yt-sidebar * {
    border-radius: 0;
}

/* Avatars chat (les ronds avec lettres) → carrés avec rouge brand sur fond noir */
.wa-yt-msg__avatar,
.yt-chat__avatar {
    border-radius: 0;
    background: var(--accent, #E31E24) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Le dot LIVE rouge (le seul rond légitime → on le carre aussi) */
.yt-live-badge__dot,
.live-dot {
    border-radius: 0;
    width: 8px !important;
    height: 8px !important;
}

/* Bouton S'abonner & bell : carré strict */
.yt-subscribe,
.yt-bell {
    border-radius: 0;
}

/* Bouton "12,3K" like + Partager + Enregistrer : tous carrés
   (avant : pill rounded, maintenant rectangle) */
.yt-actions .yt-action,
.yt-action {
    border-radius: 0;
}
.yt-action--like { border-radius: 0; }
.yt-action--like-divider { border-radius: 0; }

/* Champ recherche en haut : rectangulaire */
.yt-search,
.yt-search__input,
.yt-search__btn {
    border-radius: 0;
}

/* ════════════════════════════════════════════════════════════════
   BRAND-WA — Le DOT entre WA et COMPANY + le badge EN DIRECT en carrés
   Cible : header global + topnav YT mockup + footer (brand-wa partout)
   ════════════════════════════════════════════════════════════════ */
.brand-wa__dot,
.brand-wa .brand-wa__dot,
.site-header .brand-wa__dot,
.yt-live-wrap .brand-wa__dot,
.live-reveal .brand-wa__dot,
.brand-wa--yt .brand-wa__dot,
.brand-wa--yt-channel .brand-wa__dot,
#wa-header .brand-wa__dot {
    border-radius: 0;
    width: 6px !important;
    height: 6px !important;
}

/* Pulse box-shadow → on garde le pulse mais carré */
@keyframes brand-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227,30,36,0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(227,30,36,0.0); }
}

/* Badge "EN DIRECT" pill → carré */
.yt-logo__live,
.yt-logo__live-dot,
.yt-live-badge,
.yt-live-badge__dot,
.live-reveal__disclaim,
.live-reveal__disclaim .dot {
    border-radius: 0;
}
.yt-logo__live-dot,
.yt-live-badge__dot {
    width: 6px !important;
    height: 6px !important;
}

/* WA●COMPANY footer */
.aw-footer__logo-dot,
.aw-header__brand-dot,
.aw-header__cta-dot,
.aw-footer__email-cta-dot,
.aw-footer__dot-accent {
    border-radius: 0;
}

/* Tout dot rouge dans le brand → carré */
.dot,
.dot-accent {
    border-radius: 0;
}

/* ════════════════════════════════════════════════════════════════
   PREMIUM UX — Header hide-on-scroll + Revealing footer v2
   ════════════════════════════════════════════════════════════════ */

/* === HEADER hide-on-scroll-down === */
.site-header {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s, backdrop-filter 0.3s !important;
    will-change: transform;
}
body.header-hidden-scroll .site-header {
    transform: translateY(-100%) !important;
}

/* === REVEALING FOOTER v2 ===
   Approche : le footer est en sticky bottom (reste collé au bas du viewport
   pendant le scroll) avec un z-index inférieur au main.
   Le main est en position relative avec un background opaque + z-index supérieur.
   Quand le visiteur arrive en bas, le main "passe par-dessus" le footer
   qui reste en place → effet révélation.

   PAS de body bg override (évite les bugs précédents).
   Le main garde son flow normal (pas de padding-bottom dynamique). */

.footer-trust {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: #0a0a0a;
    color: #fff;
}
/* Le wrap qui contient le main doit avoir une position relative
   pour que le z-index du main fonctionne au-dessus du footer */
main#main {
    position: relative;
    z-index: 2;
    background: var(--bg-white, #fff);
    /* Ombre sous le bord inférieur du main → visible quand le footer se révèle */
    box-shadow:
        0 -1px 0 0 rgba(0,0,0,0.06),       /* hairline subtle au top */
        0 12px 32px -8px rgba(0,0,0,0.35),  /* ombre douce au bas (sur le footer) */
        0 32px 64px -16px rgba(0,0,0,0.22); /* ombre étendue qui amplifie le détachement */
}

/* Sur mobile, on désactive le sticky (revealing footer = effet desktop) */
@media (max-width: 700px) {
    .footer-trust {
        position: relative;
    }
}


/* ═══════════════════════════════════════════════════════════════
   V41 — CTA "→ BRIEFING" hover inversé (2026-07-04)
   Effet miroir vs items nav : les autres passent noir → rouge au hover,
   le CTA fait l'inverse : rouge → noir avec texte et flèche rouges.
   ═══════════════════════════════════════════════════════════════ */
html body #wa-header .nav-link--cta {
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
html body #wa-header .nav-link--cta:hover {
    background: #0F0F0F !important;
    color: var(--accent) !important;
    border-left: 1px solid var(--accent) !important;
}