/* ═══════════════════════════════════════════════════════════════════
   DinExtra Landing — Modern 2026 refresh
   Standalone CSS (pas lié au DS client). Tokens préfixés --l-*.
   Supporte : light/dark auto (prefers-color-scheme), RTL, reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens — thème « Élégant Sombre » (DS elegant-dark, tokens.css) ─── */
:root {
    --l-primary: #d4a853;
    --l-primary-light: #e2c87e;
    --l-primary-dark: #b8902e;
    --l-primary-glow: rgba(212, 168, 83, 0.15);
    --l-primary-strong-glow: rgba(212, 168, 83, 0.3);
    --l-accent: #f0ebe0;
    --l-accent-light: #1e1e35;

    --l-bg: #0f0f1a;
    --l-bg-elev: #151525;
    --l-surface: #1e1e35;
    --l-surface-2: #252540;
    --l-text: #f0ebe0;
    --l-text-muted: #9a94b0;
    --l-text-faint: #6a6480;
    --l-border: #2d2d50;
    --l-border-strong: #3a3a63;

    --l-radius: 14px;
    --l-radius-sm: 8px;
    --l-radius-lg: 20px;
    --l-radius-xl: 24px;
    --l-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35);
    --l-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --l-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
    --l-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65);
    --l-shadow-glow: 0 8px 32px rgba(212, 168, 83, 0.28);

    /* Typo : corps DM Sans, titres display serif (Cormorant Garamond) */
    --l-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --l-font-display: 'Cormorant Garamond', 'DM Sans', Georgia, serif;

    --l-nav-h: 68px;

    /* Couleur de marque WhatsApp (exemptée frontend.md) — boutons, icônes */
    --l-whatsapp: #25d366;
    --l-whatsapp-strong: #128c7e;

    /* Famille carte tuile accueil DS (features/accueil.css + components/card.css) */
    --l-card-gradient: linear-gradient(170deg, color-mix(in srgb, var(--l-surface), #fff 4%) 0%, var(--l-surface) 60%);
    --l-glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --l-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --l-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
    --l-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    /* Pourtour ouvragé (double cadre) — encre dérivée de l'accent or */
    --l-ornate-ink: color-mix(in srgb, var(--l-primary-light), transparent 70%);

    /* Pattern de fond elegant-dark : couverts, champagne, étoiles (tokens.css) */
    --l-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d4a853' opacity='0.5'%3E%3Cpath d='M15 10 L15 22 Q12 25 15 28 L15 35' stroke-width='0.6'/%3E%3Cpath d='M22 10 L22 35' stroke-width='0.6'/%3E%3Cpath d='M9 10 L9 14 Q9 16 11 16 L19 16 Q21 16 21 14 L21 10' stroke-width='0.6'/%3E%3Cpath d='M52 8 L52 24' stroke-width='0.6'/%3E%3Cpath d='M58 8 L58 24' stroke-width='0.6'/%3E%3Cpath d='M49 12 Q55 30 61 12' stroke-width='0.6'/%3E%3Cpath d='M90 10 L90 20 Q90 22 93 22 L97 22 Q100 22 100 20 L100 10' stroke-width='0.6'/%3E%3Cpath d='M82 10 L82 24' stroke-width='0.6'/%3E%3Cpath d='M81 5 L99 5 M90 24 L90 34' stroke-width='0.6'/%3E%3Cpath d='M85 38 L93 46 M93 38 L85 46' stroke-width='0.6'/%3E%3Cpath d='M8 60 L8 80' stroke-width='0.6'/%3E%3Cpath d='M8 62 Q5 65 8 68 L8 72' stroke-width='0.6'/%3E%3Cpath d='M60 62 L60 84' stroke-width='0.6'/%3E%3Cpath d='M52 62 Q60 56 68 62' stroke-width='0.6'/%3E%3Cpath d='M52 62 Q60 66 68 62' stroke-width='0.6'/%3E%3Cpath d='M100 58 L100 82' stroke-width='0.6'/%3E%3Cpath d='M94 58 Q100 52 106 58' stroke-width='0.6'/%3E%3Cpath d='M25 100 L25 110 Q25 113 28 113 L34 113 Q37 113 37 110 L37 100' stroke-width='0.6'/%3E%3Cpath d='M31 95 L31 100' stroke-width='0.6'/%3E%3Cpath d='M15 45 L21 45' stroke-width='0.6'/%3E%3Ccircle cx='105' cy='105' r='3' opacity='0.3' stroke-width='0.6'/%3E%3Ccircle cx='50' cy='40' r='2' opacity='0.35' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E");
    --l-pattern-opacity: 0.08;
    --l-pattern-size: 200px;

    /* Tokens conservés pour compatibilité avec le code existant (halos, badges) */
    --l-violet: var(--l-primary);
    --l-violet-glow: var(--l-primary-glow);
    --l-orange: var(--l-primary);
    --l-orange-glow: var(--l-primary-glow);
    --l-coral: var(--l-primary);
}

@media (prefers-color-scheme: light) {
    /* Auto light (OS en clair, aucun choix forcé) — dark-first sinon */
    :root:not([data-theme-force]) {
        --l-bg: #f7f4ee;
        --l-bg-elev: #ffffff;
        --l-surface: #ffffff;
        --l-surface-2: #efe9dc;
        --l-text: #23233a;
        --l-text-muted: #5f5d75;
        --l-text-faint: #8a87a0;
        --l-border: #e2dccd;
        --l-border-strong: #c9c0ab;

        --l-primary: #a37e1f;
        --l-primary-light: #b8902e;
        --l-primary-dark: #8a6a1f;
        --l-primary-glow: rgba(163, 126, 31, 0.12);
        --l-primary-strong-glow: rgba(163, 126, 31, 0.22);

        --l-shadow-sm: 0 1px 3px rgba(35, 35, 58, 0.06);
        --l-shadow: 0 4px 16px rgba(35, 35, 58, 0.08);
        --l-shadow-md: 0 10px 30px rgba(35, 35, 58, 0.10);
        --l-shadow-lg: 0 20px 50px rgba(35, 35, 58, 0.14);

        --l-card-gradient: linear-gradient(170deg, color-mix(in srgb, var(--l-surface), #000 3%) 0%, var(--l-surface) 100%);
        --l-glass-border: 1px solid rgba(35, 35, 58, 0.10);
        --l-glass-highlight: inset 0 1px 0 rgba(35, 35, 58, 0.05);
        --l-elevation-2: 0 4px 6px rgba(35, 35, 58, 0.06), 0 2px 4px rgba(35, 35, 58, 0.04);
        --l-elevation-3: 0 10px 20px rgba(35, 35, 58, 0.08), 0 4px 8px rgba(35, 35, 58, 0.04);
        --l-ornate-ink: color-mix(in srgb, var(--l-primary), transparent 60%);
    }
}
/* Light FORCÉ par le toggle (indépendant de l'OS) */
:root[data-theme-force="light"] {
    --l-bg: #f7f4ee;
    --l-bg-elev: #ffffff;
    --l-surface: #ffffff;
    --l-surface-2: #efe9dc;
    --l-text: #23233a;
    --l-text-muted: #5f5d75;
    --l-text-faint: #8a87a0;
    --l-border: #e2dccd;
    --l-border-strong: #c9c0ab;

    --l-primary: #a37e1f;
    --l-primary-light: #b8902e;
    --l-primary-dark: #8a6a1f;
    --l-primary-glow: rgba(163, 126, 31, 0.12);
    --l-primary-strong-glow: rgba(163, 126, 31, 0.22);

    --l-shadow-sm: 0 1px 3px rgba(35, 35, 58, 0.06);
    --l-shadow: 0 4px 16px rgba(35, 35, 58, 0.08);
    --l-shadow-md: 0 10px 30px rgba(35, 35, 58, 0.10);
    --l-shadow-lg: 0 20px 50px rgba(35, 35, 58, 0.14);

    --l-card-gradient: linear-gradient(170deg, color-mix(in srgb, var(--l-surface), #000 3%) 0%, var(--l-surface) 100%);
    --l-glass-border: 1px solid rgba(35, 35, 58, 0.10);
    --l-glass-highlight: inset 0 1px 0 rgba(35, 35, 58, 0.05);
    --l-elevation-2: 0 4px 6px rgba(35, 35, 58, 0.06), 0 2px 4px rgba(35, 35, 58, 0.04);
    --l-elevation-3: 0 10px 20px rgba(35, 35, 58, 0.08), 0 4px 8px rgba(35, 35, 58, 0.04);
    --l-ornate-ink: color-mix(in srgb, var(--l-primary), transparent 60%);
}

/* ─── Reset + base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--l-nav-h) + 16px);
    color-scheme: dark;
}
:root[data-theme-force="light"] {
    color-scheme: light;
}

body {
    font-family: var(--l-font);
    color: var(--l-text);
    background: var(--l-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* Pattern de fond elegant-dark (couverts/champagne or) — subliminal, façon papier de soie */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--l-pattern);
    background-size: var(--l-pattern-size);
    opacity: var(--l-pattern-opacity);
    pointer-events: none;
}

/* Peint le contenu au-dessus du pattern fixed (z:0) sans créer de stacking
   context ; les widgets fixed (nav/progress/sticky/back-to-top) gardent
   leur position/z-index (exclure .nav : son `position: fixed; z-index: 100`
   doit survivre, sinon dropdown langue + menu mobile passent sous le hero). */
body > *:not(.nav):not(.scroll-progress):not(.sticky-cta):not(.back-to-top) {
    position: relative;
    z-index: auto;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Scroll progress bar ─── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--l-primary), var(--l-primary-light));
    z-index: 150;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ─── NAV ─── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--l-bg) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, background 0.3s;
}
.nav.scrolled {
    background: color-mix(in srgb, var(--l-bg) 88%, transparent);
    border-bottom-color: var(--l-border);
}
.nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--l-nav-h);
    gap: 16px;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.nav-logo-img {
    height: 34px;
    width: auto;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}
.nav-links a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--l-text-muted);
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.nav-links a:hover {
    color: var(--l-text);
    background: var(--l-surface-2);
}
.nav-cta {
    background: var(--l-primary) !important;
    color: var(--l-bg) !important;
    padding: 9px 18px !important;
    border-radius: var(--l-radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px var(--l-primary-strong-glow);
    transition: transform 0.15s, box-shadow 0.2s !important;
}
.nav-cta:hover {
    transform: translateY(-1px);
    background: var(--l-primary) !important;
    color: var(--l-bg) !important;
    box-shadow: 0 8px 20px var(--l-primary-strong-glow);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--l-surface-2);
    border: 1px solid var(--l-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--l-text-muted);
    transition: color 0.2s, background 0.2s, transform 0.15s;
}
.theme-toggle:hover {
    color: var(--l-text);
    transform: rotate(12deg);
}
/* Theme toggle — dark-first : on affiche l'icône de la DESTINATION du clic.
   Défaut = sombre → soleil (aller vers le clair) ; light forcé → lune. */
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: inline-flex; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme-force="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme-force="light"] .theme-toggle .icon-moon { display: inline-flex; }
/* Auto : OS en clair sans choix forcé → page claire → lune */
@media (prefers-color-scheme: light) {
    :root:not([data-theme-force]) .theme-toggle .icon-sun { display: none; }
    :root:not([data-theme-force]) .theme-toggle .icon-moon { display: inline-flex; }
}

/* Lang picker */
.lang-picker { position: relative; }
.lang-picker-btn {
    background: var(--l-surface-2);
    border: 1px solid var(--l-border);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 1.05rem;
    line-height: 1;
    transition: border-color 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--l-text);
}
.lang-picker-btn:hover { border-color: var(--l-primary-light); }
.lang-picker-btn::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.6;
    margin-left: 2px;
}
.lang-picker-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-sm);
    box-shadow: var(--l-shadow-lg);
    min-width: 180px;
    z-index: 200;
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}
.lang-picker-dropdown.lang-open {
    display: flex;
    flex-direction: column;
}
.lang-option {
    padding: 9px 12px;
    font-size: 0.88rem;
    color: var(--l-text);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.lang-option:hover { background: var(--l-surface-2); }
.lang-option.active {
    color: var(--l-primary);
    font-weight: 600;
    background: var(--l-primary-glow);
}

/* Burger (mobile) */
.nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: var(--l-surface-2);
    border: 1px solid var(--l-border);
    border-radius: 10px;
    padding: 10px;
}
.nav-burger span {
    width: 18px;
    height: 2px;
    background: var(--l-text);
    border-radius: 2px;
    transition: 0.3s;
}

/* ─── HERO ─── */
.hero {
    position: relative;
    min-height: 100vh;
    padding: calc(var(--l-nav-h) + 60px) 24px 60px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 40% at 78% 18%, var(--l-primary-glow), transparent 70%),
        radial-gradient(ellipse 42% 34% at 18% 78%, var(--l-primary-glow), transparent 70%);
    pointer-events: none;
}
.hero-mesh::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--l-text) 8%, transparent) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 80%);
    opacity: 0.5;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--l-primary-dark);
    background: var(--l-primary-glow);
    border: 1px solid color-mix(in srgb, var(--l-primary) 25%, transparent);
    border-radius: 999px;
    margin-bottom: 20px;
}
.hero-kicker .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--l-primary);
    box-shadow: 0 0 0 4px var(--l-primary-glow);
}
.hero-title {
    font-family: var(--l-font-display);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--l-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.hero-title .hero-title-accent {
    color: var(--l-primary);
    font-style: italic;
}
.hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: var(--l-text-muted);
    max-width: 540px;
    margin-bottom: 28px;
    line-height: 1.7;
}
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--l-text);
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 999px;
    box-shadow: var(--l-shadow-sm);
}
.hero-badge-icon {
    color: var(--l-primary);
    display: inline-flex;
}
.hero-badge-icon svg { width: 14px; height: 14px; }
.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.82rem;
    color: var(--l-text-faint);
    align-items: center;
}
.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero-trust svg { width: 14px; height: 14px; color: var(--l-primary); }

/* ─── Phone mockup (hero) ─── */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.phone-frame {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 9 / 18;
    background: linear-gradient(145deg, #252540, #151525);
    border-radius: 40px;
    padding: 12px;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
    /* GPU compositing → supprime l'aliasing sur la rotation/translation */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.phone-frame::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 22px;
    background: #000;
    border-radius: 12px;
    z-index: 3;
}
.phone-screen {
    width: 100%;
    height: 100%;
    background: #e5ddd5;
    background-image:
        linear-gradient(rgba(229, 221, 213, 0.95), rgba(229, 221, 213, 0.92)),
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 13px);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
[data-theme="dark"] .phone-screen,
.phone-screen { background-color: #e5ddd5; } /* WhatsApp wallpaper always light for authenticity */

/* ─── Cadre des captures de la webapp ───
   Sobre et unique : un trait, un rayon, une ombre douce. Ni reflet ni dégradé —
   c'est la capture qui doit se voir, pas le cadre. Réutilisé par le hero, le
   parcours et les sections client/gérant. */
.phone-shell {
    position: relative;
    border: 1px solid var(--l-border-strong);
    border-radius: 26px;
    overflow: hidden;
    background: var(--l-surface);
    box-shadow: var(--l-shadow-md);
}
.phone-shell img {
    display: block;
    width: 100%;
    height: auto;
}

/* ─── Duo du hero : la conversation WhatsApp, la webapp au premier plan ─── */
.hero-duo {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    align-items: center;
    width: 100%;
}
.hero-duo-chat {
    justify-self: end;
    min-width: 0;
}
.hero-duo-chat .phone-frame { width: 100%; max-width: 220px; }
.hero-duo-app {
    justify-self: start;
    width: 100%;
    max-width: 252px;
    /* La webapp chevauche la conversation et passe devant. Propriété logique :
       le chevauchement s'inverse de lui-même en RTL. */
    margin-inline-start: -30px;
    z-index: 2;
}
/* La capture fait 720×1558 mais l'écran d'accueil ne remplit pas toute la
   hauteur : son dernier huitième n'est que le motif de fond pointillé. Dans le
   hero, où le cadre est isolé, ce vide se voit — on le rogne par le bas plutôt
   que de recadrer les 357 captures. */
.hero-duo-app img {
    aspect-ratio: 720 / 1372;
    object-fit: cover;
    object-position: top center;
}

/* WhatsApp header */
.wa-header {
    background: #075e54;
    color: #fff;
    padding: 36px 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.wa-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.wa-name {
    flex: 1;
    min-width: 0;
}
.wa-name-primary {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-name-status {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
}
.wa-icons {
    display: flex;
    gap: 10px;
    color: rgba(255,255,255,0.85);
}
.wa-icons svg { width: 14px; height: 14px; }

/* WhatsApp chat — 3 scènes cyclables (résa / préco / emporter) */
.wa-chat {
    position: relative;
    flex: 1;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #111827;
}
.wa-scene {
    position: absolute;
    inset: 0;
    /* Bas plus épais : les bulles ne doivent pas buter sur les pastilles de
       scène, ancrées à 10 px du bas. */
    padding: 12px 10px 26px;
    display: flex;
    flex-direction: column;
    /* Une conversation se lit du bas : les bulles s'empilent depuis le bas de
       l'écran. Sans cela, un téléphone étroit affiche un grand vide sous
       l'en-tête, et les scènes courtes paraissent inachevées. */
    justify-content: flex-end;
    gap: 7px;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.wa-scene.active {
    opacity: 1;
    pointer-events: auto;
    animation: sceneEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sceneEnter {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Bulles : animation déclenchée quand la scène devient active (staggered) */
.wa-scene.active .chat-bubble {
    animation: bubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.wa-scene.active .chat-bubble:nth-child(1) { animation-delay: 0.3s; }
.wa-scene.active .chat-bubble:nth-child(2) { animation-delay: 1.0s; }
.wa-scene.active .chat-bubble:nth-child(3) { animation-delay: 1.7s; }
.wa-scene.active .chat-bubble:nth-child(4) { animation-delay: 2.4s; }
.wa-scene.active .chat-bubble:nth-child(5) { animation-delay: 3.1s; }
@keyframes bubbleIn {
    from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.96); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.chat-bubble {
    max-width: 82%;
    padding: 7px 10px;
    border-radius: 10px;
    position: relative;
    opacity: 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.08);
    word-wrap: break-word;
    will-change: transform, opacity;
}
.chat-bubble.bubble-in {
    align-self: flex-start;
    background: #fff;
    border-bottom-left-radius: 3px;
}
.chat-bubble.bubble-out {
    align-self: flex-end;
    background: #dcf8c6;
    border-bottom-right-radius: 3px;
}
.chat-bubble .bubble-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    font-size: 0.6rem;
    color: rgba(0,0,0,0.45);
    text-align: right;
    margin-top: 2px;
}
.chat-bubble .bubble-check {
    color: #34b7f1;
    font-weight: 700;
    letter-spacing: -1px;
    font-size: 0.62rem;
    line-height: 1;
}

/* Bulle CTA style "bouton interactif WhatsApp" */
.chat-bubble.has-cta {
    padding: 0;
    overflow: hidden;
    max-width: 85%;
}
.chat-bubble.has-cta .bubble-body {
    padding: 7px 10px 6px;
}
.chat-bubble.has-cta .bubble-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #0d9f6e;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.65);
}
.chat-bubble.has-cta .bubble-cta-btn svg {
    width: 13px;
    height: 13px;
}
.chat-bubble.bubble-out.has-cta .bubble-cta-btn {
    color: #075e54;
}

/* Indicateur de scène (petits dots en bas du téléphone) */
.wa-scene-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}
.wa-scene-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
    transition: background 0.3s, transform 0.3s;
}
.wa-scene-dots span.active {
    background: #25d366;
    transform: scale(1.3);
}

/* Stickers autour du téléphone (statiques, discrets) */
.hero-sticker {
    position: absolute;
    /* Au-dessus du duo de téléphones : sans cela le duo, plus bas dans le DOM,
       recouvre les pastilles et les tronque. */
    z-index: 3;
    padding: 10px 14px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 14px;
    box-shadow: var(--l-shadow-md);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--l-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-sticker.sticker-1 {
    top: 10%;
    left: -4%;
    color: var(--l-primary-dark);
}
.hero-sticker.sticker-2 {
    bottom: 15%;
    right: -4%;
    color: var(--l-primary-dark);
}
.hero-sticker.sticker-3 {
    display: none;
}
.hero-sticker-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--l-primary-glow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hero-sticker svg { width: 16px; height: 16px; }

/* ─── BUTTONS ─── */
.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--l-radius-sm);
    background: var(--l-primary);
    color: var(--l-bg);
    border: 1.5px solid var(--l-primary);
    box-shadow: 0 4px 12px var(--l-primary-strong-glow);
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--l-primary-strong-glow);
    color: var(--l-bg);
}
.btn-hero svg { width: 16px; height: 16px; }

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--l-radius-sm);
    background: transparent;
    color: var(--l-text);
    border: 1.5px solid var(--l-border);
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.btn-hero-secondary:hover {
    border-color: var(--l-primary);
    background: var(--l-primary-glow);
    transform: translateY(-1px);
}
.btn-hero-light {
    background: var(--l-bg);
    color: var(--l-primary-dark);
    border-color: var(--l-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.btn-hero-light:hover {
    background: var(--l-bg-elev);
    color: var(--l-primary-dark);
    transform: translateY(-1px);
}

/* ─── STATS strip ─── */
.stats {
    padding: 48px 0;
    position: relative;
    background: var(--l-bg);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 32px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-lg);
    box-shadow: var(--l-shadow);
    position: relative;
    overflow: hidden;
}
.stats-grid::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--l-primary) 50%, transparent);
    opacity: 0.6;
}
.stat {
    text-align: center;
}
.stat-value {
    font-family: var(--l-font-display);
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--l-text);
    display: inline-block;
    line-height: 1.1;
}
.stat:nth-child(2) .stat-value { color: var(--l-primary); }
.stat:nth-child(3) .stat-value { color: var(--l-primary); }
.stat-label {
    font-size: 0.82rem;
    color: var(--l-text-muted);
    font-weight: 500;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── PARCOURS (de WhatsApp à la webapp) ─── */
.parcours {
    padding: 80px 0;
}
.parcours-steps {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}
.parcours-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}
.parcours-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* Sans-serif : les chiffres elzéviriens de Cormorant se lisent mal isolés. */
    font-family: var(--l-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--l-primary);
    background: var(--l-primary-glow);
    border: 1px solid color-mix(in srgb, var(--l-primary) 25%, transparent);
}
.parcours-shot {
    width: 100%;
    max-width: 220px;
}
.parcours-label {
    max-width: 260px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--l-text-muted);
}
/* Premier temps : la conversation, reconstituée en CSS (mêmes teintes que le
   mockup du hero) plutôt qu'en capture — WhatsApp n'est pas notre écran. */
.parcours-chat {
    aspect-ratio: 720 / 1558;
    background: #e5ddd5;
    display: flex;
    flex-direction: column;
}
.pc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--l-whatsapp-strong);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}
.pc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--l-whatsapp);
    font-size: 0.72rem;
}
.pc-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 12px;
}
.pc-bubble {
    max-width: 86%;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #111;
    text-align: start;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.pc-in {
    align-self: flex-start;
    background: #fff;
    border-bottom-left-radius: 3px;
}
.pc-out {
    align-self: flex-end;
    background: #dcf8c6;
    border-bottom-right-radius: 3px;
}
/* Bouton interactif WhatsApp, en bas de la dernière bulle. */
.pc-cta {
    align-self: flex-end;
    max-width: 86%;
    margin-top: -6px;
    padding: 7px 10px;
    border-radius: 0 0 10px 10px;
    background: #f2fbe9;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--l-whatsapp-strong);
    text-align: center;
}

/* ─── RANGÉES ILLUSTRÉES (capture ⇄ texte) ─── */
.rangees {
    display: flex;
    flex-direction: column;
    gap: 72px;
}
.rangee {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}
/* Une rangée sur deux, la capture passe à droite. `direction` inverserait le
   texte : on réordonne les cases de la grille, pas le flux d'écriture. */
.rangee.inverse .rangee-shot { grid-column: 2; grid-row: 1; }
.rangee.inverse .rangee-texte { grid-column: 1; grid-row: 1; }
.rangee-shot {
    width: 100%;
    max-width: 260px;
    justify-self: center;
}
.rangee-texte h3 {
    font-family: var(--l-font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--l-text);
    margin-bottom: 12px;
}
.rangee-texte p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--l-text-muted);
    max-width: 46ch;
}

/* ─── SECTION SOMBRE (côté gérant) ───
   Sombre dans les deux thèmes. Plutôt que d'écrire des couleurs en dur dans
   chaque règle, on redéclare localement les tokens de la palette sombre : tous
   les descendants (phone-shell, rangee-texte, section-header…) suivent seuls.
   Contraste texte/fond : 16:1 pour --l-text, 5,9:1 pour --l-text-muted. */
.section-sombre {
    --l-bg: #0f0f1a;
    --l-bg-elev: #151525;
    --l-surface: #1e1e35;
    --l-surface-2: #252540;
    --l-text: #f0ebe0;
    --l-text-muted: #9a94b0;
    --l-text-faint: #6a6480;
    --l-border: #2d2d50;
    --l-border-strong: #3a3a63;
    --l-primary: #d4a853;
    --l-primary-light: #e2c87e;
    --l-primary-dark: #e2c87e;
    --l-primary-glow: rgba(212, 168, 83, 0.15);
    background: var(--l-bg);
    color: var(--l-text);
}
.gerant-vitrine {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    margin: 0 0 72px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--l-border);
}
.gerant-vitrine-shot {
    width: 100%;
    max-width: 300px;
    justify-self: center;
}
.gerant-vitrine-texte h3 {
    font-family: var(--l-font-display);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--l-text);
    margin-bottom: 14px;
}
.gerant-vitrine-texte p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--l-text-muted);
    max-width: 46ch;
}

/* ─── CE QUE ÇA REMPLACE ─── */
.remplace {
    padding: 80px 0;
}
.remplace-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}
.remplace-avant {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.remplace-avant li {
    padding: 14px 18px;
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    background: var(--l-surface);
    /* --l-text-faint tomberait à 3,2:1 sur le fond clair : ces lignes restent
       du contenu, pas de la décoration. */
    color: var(--l-text-muted);
    font-size: 0.98rem;
    line-height: 1.5;
}
.remplace-avant s {
    text-decoration-color: color-mix(in srgb, var(--l-text-muted) 70%, transparent);
}
.remplace-apres {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 24px;
    border: 1px solid color-mix(in srgb, var(--l-primary) 35%, transparent);
    border-radius: var(--l-radius-lg);
    background: var(--l-primary-glow);
    color: var(--l-text);
    font-family: var(--l-font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
}
.remplace-apres-icone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--l-primary);
    color: var(--l-bg);
}
.remplace-apres-icone svg { width: 20px; height: 20px; }

/* ─── MUR MULTILINGUE ─── */
.mur-langues-section {
    padding: 80px 0;
    overflow: hidden;
}
.mur-langues {
    /* Le débordement reste confiné ici : la page, elle, ne défile jamais
       horizontalement. */
    overflow: hidden;
    padding: 8px 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mur-langues-piste {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: mur-defile 60s linear infinite;
}
.mur-langues:hover .mur-langues-piste,
.mur-langues:focus-within .mur-langues-piste {
    animation-play-state: paused;
}
.mur-shot {
    width: 190px;
    flex: 0 0 auto;
}
@keyframes mur-defile {
    /* -50 % laisserait un demi-`gap` de décalage à chaque boucle (la piste
       compte 2N-1 intervalles pour 2N captures) : on le rattrape ici. */
    to { transform: translateX(calc(-50% - 10px)); }
}
@media (prefers-reduced-motion: reduce) {
    .mur-langues-piste { animation: none; }
    .mur-langues { overflow-x: auto; }
}

/* ─── VALUES ─── */
.values {
    padding: 90px 0 50px;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.value-card {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    padding: 32px 28px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}
.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--l-shadow-md);
    border-color: color-mix(in srgb, var(--l-primary) 30%, transparent);
}
.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle, var(--l-primary-glow), transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}
.value-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.value-icon svg { width: 26px; height: 26px; }
.value-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.value-card p {
    font-size: 0.92rem;
    color: var(--l-text-muted);
    line-height: 1.65;
}

/* ─── Section headers ─── */
.section-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.section-badge {
    display: inline-block;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l-primary-dark);
    background: var(--l-primary-glow);
    border: 1px solid color-mix(in srgb, var(--l-primary) 20%, transparent);
    border-radius: 999px;
    margin-bottom: 14px;
}
.badge-gerant {
    color: var(--l-primary-dark);
    background: var(--l-primary-glow);
    border-color: color-mix(in srgb, var(--l-primary) 20%, transparent);
}
.badge-violet {
    color: var(--l-primary-dark);
    background: var(--l-primary-glow);
    border-color: color-mix(in srgb, var(--l-primary) 20%, transparent);
}
.section-header h2 {
    font-family: var(--l-font-display);
    font-size: clamp(2rem, 3.8vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    line-height: 1.15;
}
.section-sub {
    font-size: 1.05rem;
    color: var(--l-text-muted);
    max-width: 560px;
    margin: 0 auto;
}

/* ─── BENTO features ─── */
.features-bento {
    padding: 80px 0;
}
.features-bento.alt {
    background: var(--l-surface);
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 18px;
}
.bento-card {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    padding: 28px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}
.features-bento.alt .bento-card { background: var(--l-bg); }
.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--l-shadow-md);
    border-color: color-mix(in srgb, var(--l-primary) 25%, transparent);
}
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-2-row { grid-row: span 2; }
.bento-card.featured {
    background: linear-gradient(180deg, var(--l-surface), var(--l-bg-elev));
    color: var(--l-text);
    border-color: color-mix(in srgb, var(--l-primary) 45%, transparent);
}
.bento-card.featured::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, var(--l-primary-light) 50%, transparent 95%);
    opacity: 0.7;
    pointer-events: none;
}
.bento-card.featured h3,
.bento-card.featured p { color: var(--l-text); }
.bento-card.featured p { color: var(--l-text-muted); }
.bento-card.featured .bento-icon {
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
}
.bento-card.featured h3 {
    color: var(--l-primary-light);
}

.bento-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.bento-icon svg { width: 22px; height: 22px; }
.features-bento.alt .bento-icon {
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
}
.bento-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.bento-card.featured h3 {
    font-size: 1.4rem;
}
.bento-card p {
    font-size: 0.92rem;
    color: var(--l-text-muted);
    line-height: 1.6;
    flex: 1;
}

/* Bento visuals */
.bento-visual {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bento-lang-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--l-primary-glow);
    color: var(--l-primary-light);
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--l-primary) 30%, transparent);
}
.bento-lang-chip.more {
    background: color-mix(in srgb, var(--l-primary) 25%, transparent);
    font-weight: 700;
}

/* ─── HOW IT WORKS ─── */
.how {
    padding: 90px 0;
}
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}
.steps::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 16%;
    right: 16%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--l-primary) 25%, var(--l-primary-light) 50%, var(--l-primary) 75%, transparent);
    opacity: 0.35;
    z-index: 0;
}
.step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    padding: 40px 24px 32px;
    transition: transform 0.25s, box-shadow 0.25s;
}
.step:hover {
    transform: translateY(-4px);
    box-shadow: var(--l-shadow-md);
}
.step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--l-primary);
    color: var(--l-bg);
    font-weight: 700;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px var(--l-primary-strong-glow);
    position: relative;
}
.step:nth-child(2) .step-num,
.step:nth-child(3) .step-num {
    background: var(--l-primary);
    box-shadow: 0 4px 12px var(--l-primary-strong-glow);
}
.step h3 {
    font-size: 1.08rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.step p {
    font-size: 0.92rem;
    color: var(--l-text-muted);
    line-height: 1.6;
}

/* ─── FAQ ─── */
.faq {
    padding: 90px 0;
    background: var(--l-surface);
}
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] {
    border-color: color-mix(in srgb, var(--l-primary) 40%, transparent);
    box-shadow: var(--l-shadow-sm);
}
.faq-item summary {
    list-style: none;
    padding: 18px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--l-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '';
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--l-text-muted);
    border-bottom: 2px solid var(--l-text-muted);
    transform: rotate(45deg);
    transition: transform 0.25s;
    flex-shrink: 0;
    margin-right: 4px;
    margin-top: -4px;
}
.faq-item[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
    border-color: var(--l-primary);
}
.faq-item .faq-answer {
    padding: 0 24px 20px;
    color: var(--l-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    animation: faqFadeIn 0.3s ease;
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── ADVANTAGES (Fidélité + Parrainage) ─── */
.advantages {
    padding: 90px 0;
    background: var(--l-surface);
}
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}
.advantage-card {
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-lg);
    padding: 36px 32px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--l-shadow-md);
    border-color: color-mix(in srgb, var(--l-primary) 30%, transparent);
}
.advantage-card:nth-child(2):hover {
    border-color: color-mix(in srgb, var(--l-primary) 30%, transparent);
}
.advantage-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;
}
.advantage-icon svg { width: 26px; height: 26px; }
.advantage-icon-violet {
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
}
.advantage-card h3 {
    font-family: var(--l-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.advantage-card > p {
    font-size: 0.96rem;
    color: var(--l-text-muted);
    line-height: 1.65;
    margin-bottom: 22px;
}
.advantage-list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.advantage-list li {
    position: relative;
    padding-left: 28px;
    font-size: 0.92rem;
    color: var(--l-text);
    line-height: 1.5;
}
.advantage-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--l-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/85% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/85% no-repeat;
}
.advantage-card:nth-child(2) .advantage-list li::before {
    background: var(--l-primary);
}

/* ─── GROUP FLOW ─── */
.group-flow {
    padding: 90px 0;
}
.group-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
}
.group-steps::before {
    content: '';
    position: absolute;
    top: 52px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--l-primary) 20%, var(--l-primary-light) 50%, var(--l-primary) 80%, transparent);
    opacity: 0.3;
    z-index: 0;
}
.group-step {
    position: relative;
    z-index: 1;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    padding: 32px 22px 26px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.group-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--l-shadow-md);
    border-color: color-mix(in srgb, var(--l-primary) 25%, transparent);
}
.group-step-num {
    width: 44px;
    height: 44px;
    border-radius: var(--l-radius-sm);
    background: var(--l-primary);
    color: var(--l-bg);
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px var(--l-primary-strong-glow);
}
.group-step:nth-child(2) .group-step-num,
.group-step:nth-child(3) .group-step-num,
.group-step:nth-child(4) .group-step-num {
    background: var(--l-primary);
    box-shadow: 0 4px 12px var(--l-primary-strong-glow);
}
.group-step h3 {
    font-size: 1rem;
    font-weight: 750;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.group-step p {
    font-size: 0.88rem;
    color: var(--l-text-muted);
    line-height: 1.55;
}

/* ─── PRICING ─── */
.pricing {
    padding: 90px 0;
}
.pricing-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto 36px;
}
.pricing-card {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-lg);
    padding: 40px 36px;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: var(--l-shadow-md);
    display: flex;
    flex-direction: column;
}
.pricing-card-free::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--l-primary-light), var(--l-primary-dark));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.pricing-card-comm::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--l-primary-light), var(--l-primary-dark));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.pricing-tag {
    align-self: flex-start;
    display: inline-block;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l-bg);
    border-radius: 999px;
    margin-bottom: 18px;
}
.pricing-tag-free { background: var(--l-primary); }
.pricing-tag-comm { background: var(--l-primary); }
.pricing-card-title {
    font-family: var(--l-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--l-text);
}
.pricing-cta-row {
    text-align: center;
}

/* legacy pricing layout (centered single card) — preserved for older revisions */
.pricing-card-legacy {
    max-width: 580px;
    margin: 0 auto;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-lg);
    padding: 52px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--l-shadow-md);
}
.pricing-list {
    list-style: none;
    text-align: left;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 2px;
    flex: 1;
}
.pricing-list li {
    padding: 10px 0;
    font-size: 0.95rem;
    color: var(--l-text);
    border-bottom: 1px solid var(--l-border);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.45;
}
.pricing-list li:last-child { border-bottom: none; }
.pricing-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--l-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/85% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/85% no-repeat;
}
.pricing-list-comm li::before {
    background: var(--l-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/85% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/85% no-repeat;
}
.pricing-commission {
    background: var(--l-primary-glow);
    border-radius: var(--l-radius-sm);
    padding: 16px 20px;
    margin-top: auto;
    font-size: 0.9rem;
    color: var(--l-primary-dark);
    font-weight: 500;
    line-height: 1.55;
}
.pricing-commission-alt {
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
}

/* ─── PARTNERS ─── */
.partners {
    padding: 60px 0 20px;
    text-align: center;
}
.partners-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--l-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 28px;
}
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px 56px;
    opacity: 0.75;
    transition: opacity 0.3s;
}
.partners-grid:hover { opacity: 1; }
.partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--l-text-muted);
    transition: color 0.2s, transform 0.2s;
}
.partner:hover {
    color: var(--l-text);
    transform: translateY(-2px);
}
.partner-logo {
    height: 24px;
    width: auto;
}
.partner-sub {
    font-size: 0.72rem;
    color: var(--l-text-faint);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* ─── STICKY CTA (mobile) ─── */
.sticky-cta {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    padding: 12px 18px 12px 14px;
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--l-primary);
    color: var(--l-bg);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 12px 40px -8px rgba(212, 168, 83, 0.55), 0 4px 12px rgba(0,0,0,0.25);
    transform: translateY(120%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.sticky-cta svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.sticky-cta.visible {
    transform: translateY(0);
}
.sticky-cta:hover {
    color: var(--l-bg);
    box-shadow: 0 18px 50px -8px rgba(212, 168, 83, 0.7), 0 4px 12px rgba(0,0,0,0.3);
}
@media (max-width: 640px) {
    .sticky-cta { display: inline-flex; }
}
[dir="rtl"] .sticky-cta { right: auto; left: 16px; }

/* ─── BACK TO TOP ─── */
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 85;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--l-border);
    background: var(--l-surface);
    color: var(--l-text);
    box-shadow: var(--l-shadow-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background 0.2s;
}
.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
}
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
    .back-to-top { display: none; } /* Hidden on mobile — sticky CTA takes the spot */
}
[dir="rtl"] .back-to-top { right: auto; left: 16px; }

/* ─── FINAL CTA ─── */
.final-cta {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, var(--l-primary-glow), transparent 70%),
        var(--l-bg-elev);
    border-top: 1px solid var(--l-border);
    border-bottom: 1px solid var(--l-border);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.final-cta-content {
    position: relative;
    z-index: 1;
}
.final-cta-content h2 {
    font-family: var(--l-font-display);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 600;
    color: var(--l-text);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.final-cta-content p {
    font-size: 1.12rem;
    color: var(--l-text-muted);
    margin-bottom: 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── FOOTER ─── */
.footer {
    padding: 52px 0 calc(32px + env(safe-area-inset-bottom, 0px));
    background: #0a0a14;
    color: rgba(255,255,255,0.7);
}
.footer-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-logo-img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}
.footer-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.footer-links {
    display: flex;
    gap: 28px;
    justify-content: center;
}
.footer-links a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    transition: color 0.2s;
}
.footer-links a:hover { color: #fff; }
.footer-socials {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.footer-social {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    transition: background 0.2s, color 0.2s;
}
.footer-social:hover { background: rgba(255,255,255,0.12); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }
.footer-copy {
    padding-top: 24px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    text-align: center;
}
.footer-legal {
    padding-top: 10px;
    font-size: 0.72rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.35);
    text-align: center;
}
.footer-legal a {
    color: rgba(255,255,255,0.5);
    transition: color 0.2s;
}
.footer-legal a:hover { color: #fff; }

/* ─── CONTACT PAGE ─── */
.contact-section {
    padding: calc(var(--l-nav-h) + 60px) 0 80px;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 30% at 12% 12%, var(--l-primary-glow), transparent 70%),
        radial-gradient(ellipse 40% 30% at 90% 85%, var(--l-primary-glow), transparent 70%);
    pointer-events: none;
}
.contact-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.contact-info--center {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.contact-info--center .contact-badges { justify-content: center; }
.contact-mailto-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 28px;
}
.contact-mailto-btn svg { width: 18px; height: 18px; }

/* Bouton WhatsApp (couleur de marque externe — exemptée frontend.md) */
.contact-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    background: var(--l-whatsapp);
    color: #063f34;
    border: 1.5px solid var(--l-whatsapp);
}
.contact-wa-btn:hover {
    background: var(--l-whatsapp-strong);
    border-color: var(--l-whatsapp-strong);
    color: #fff;
}
.contact-wa-btn svg { width: 18px; height: 18px; }

/* Rangée d'actions contact : mail + WhatsApp côte à côte */
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    align-items: center;
}

/* Refus du démarchage commercial */
.contact-nosolicit {
    margin-top: 4px;
    margin-bottom: 28px;
    font-size: 0.82rem;
    color: var(--l-text-faint);
    line-height: 1.6;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.contact-info h1 {
    font-family: var(--l-font-display);
    font-size: clamp(2.4rem, 4.2vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    line-height: 1.1;
    color: var(--l-text);
}
.contact-info > p {
    font-size: 1.05rem;
    color: var(--l-text-muted);
    line-height: 1.7;
    margin-bottom: 28px;
}
.contact-details { margin-bottom: 24px; }
.contact-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--l-text);
    margin-bottom: 10px;
    padding: 12px 16px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
}
.contact-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--l-primary-glow);
    color: var(--l-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-detail-icon svg { width: 16px; height: 16px; }
.contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.contact-badge {
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--l-primary-dark);
    background: var(--l-primary-glow);
    border: 1px solid color-mix(in srgb, var(--l-primary) 18%, transparent);
    border-radius: 999px;
}

/* ─── FORM ─── */
.contact-form-wrap {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-lg);
    padding: 40px 36px;
    box-shadow: var(--l-shadow-md);
    position: relative;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-group {
    margin-bottom: 16px;
    position: relative;
}
.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--l-text);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 13px 16px;
    font-size: 0.95rem;
    font-family: var(--l-font);
    color: var(--l-text);
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: var(--l-radius-sm);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--l-text-faint); }
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--l-primary);
    box-shadow: 0 0 0 4px var(--l-primary-glow);
    background: var(--l-surface);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-error {
    display: block;
    font-size: 0.8rem;
    color: var(--l-danger, #fc8181);
    margin-top: 4px;
}
.btn-submit {
    width: 100%;
    padding: 16px;
    font-size: 1.02rem;
    margin-top: 6px;
}

/* ─── CONTACT SUCCESS ─── */
.contact-success {
    text-align: center;
    padding: 40px 20px;
}
.contact-success-icon {
    width: 72px;
    height: 72px;
    background: var(--l-primary);
    color: var(--l-bg);
    border-radius: 50%;
    font-size: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: var(--l-shadow-glow);
    animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes successPop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.contact-success h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.contact-success p {
    color: var(--l-text-muted);
    margin-bottom: 28px;
}

/* ─── FAMILLE CARTE « tuile accueil » DS ───
   Même grammaire que les tuiles de l'accueil webapp (features/accueil.css +
   components/card.css) : fond card-gradient, pourtour glass-border, reflet
   glass-highlight + elevation-2, et double cadre ouvragé (--ornate-ink). */
.stats-grid,
.value-card,
.bento-card,
.step,
.group-step,
.advantage-card,
.pricing-card,
.pricing-card-legacy,
.faq-item,
.contact-detail,
.contact-form-wrap {
    background: var(--l-card-gradient);
    border: var(--l-glass-border);
    box-shadow: var(--l-glass-highlight), var(--l-elevation-2);
}
.stats-grid,
.value-card,
.bento-card,
.step,
.group-step,
.advantage-card,
.pricing-card,
.pricing-card-legacy,
.faq-item,
.contact-detail {
    position: relative;
}
/* Pourtour ouvragé : micro-cadre intérieur 1px teinté accent (garde-fou #2 :
   aucun z-index numérique, pointer-events none). */
.stats-grid::after,
.value-card::after,
.bento-card:not(.featured)::after,
.step::after,
.group-step::after,
.advantage-card::after,
.faq-item::after,
.contact-detail::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid var(--l-ornate-ink);
    border-radius: calc(var(--l-radius) - 5px);
    pointer-events: none;
}
/* Pourtour aligné sur les cartes en radius-lg (20px → cadre 15px) */
.stats-grid::after,
.advantage-card::after {
    border-radius: calc(var(--l-radius-lg) - 5px);
}
/* Les cartes pricing ont déjà leur bordure masquée en ::before (mask-composite) —
   le double cadre y est trop chargé ; on le retire. */
.pricing-card::after,
.pricing-card-legacy::after { display: none; }
/* Hover : élévation DS (elevation-3), on garde le pourtour. */
.stats-grid:hover,
.value-card:hover,
.bento-card:hover,
.step:hover,
.group-step:hover,
.advantage-card:hover {
    border-color: var(--l-glass-border);
    box-shadow: var(--l-glass-highlight), var(--l-elevation-3);
}

/* ─── REVEAL animation ─── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal[data-stagger="1"] { transition-delay: 0.08s; }
.reveal[data-stagger="2"] { transition-delay: 0.16s; }
.reveal[data-stagger="3"] { transition-delay: 0.24s; }
.reveal[data-stagger="4"] { transition-delay: 0.32s; }
.reveal[data-stagger="5"] { transition-delay: 0.40s; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { order: 2; }
    .hero-text { order: 1; text-align: center; }
    .hero-badges, .hero-ctas, .hero-trust { justify-content: center; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .phone-frame { width: 280px; }
    .hero-sticker.sticker-3 { display: none; }

    .values-grid,
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-card.span-2 { grid-column: span 2; }
    .bento-card.span-2-row { grid-row: auto; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .steps::before { display: none; }

    .advantages-grid { grid-template-columns: 1fr; }
    .group-steps { grid-template-columns: repeat(2, 1fr); }
    .group-steps::before { display: none; }
    .pricing-split { grid-template-columns: 1fr; }

    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    /* .footer-brand est un flex : `text-align: center` sur le parent ne le
       centre pas, il faut son propre justify-content — sans quoi le logo reste
       collé à gauche pendant que tout le reste est centré. */
    .footer-brand, .footer-links, .footer-socials { justify-content: center; }
    /* Sans repli, les quatre liens se serrent sur une ligne trop étroite et
       « Comment ça marche » se casse mot par mot. */
    .footer-links { flex-wrap: wrap; gap: 12px 22px; }
}

@media (max-width: 640px) {
    .nav-links {
        display: none;
        position: absolute;
        top: var(--l-nav-h);
        left: 12px;
        right: 12px;
        flex-direction: column;
        padding: 16px;
        gap: 4px;
        background: var(--l-surface);
        border: 1px solid var(--l-border);
        border-radius: var(--l-radius);
        box-shadow: var(--l-shadow-lg);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 14px; }
    .nav-burger { display: flex; }

    .hero { padding: calc(var(--l-nav-h) + 40px) 20px 40px; min-height: auto; }
    .phone-frame { width: 240px; }
    /* Les pastilles sont ancrées aux bords du visuel : empilé, le duo les fait
       chevaucher les téléphones et déborder à droite. Décoratives, on les retire. */
    .hero-sticker { display: none; }

    /* Une seule colonne : la webapp passe devant, la conversation la suit. */
    .hero-duo { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
    .hero-duo-app { justify-self: center; order: 1; margin-inline-start: 0; max-width: 258px; }
    .hero-duo-chat { justify-self: center; order: 2; }

    .parcours { padding: 60px 0; }
    .parcours-steps { grid-template-columns: 1fr; gap: 36px; }

    /* Empilé, la capture passe au-dessus de son texte — y compris sur les
       rangées inversées, dont on annule le placement explicite. */
    .rangees { gap: 52px; }
    .rangee { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
    .rangee.inverse .rangee-shot,
    .rangee.inverse .rangee-texte { grid-column: 1; grid-row: auto; }
    .rangee-texte p { margin-inline: auto; }

    .mur-langues-section { padding: 60px 0; }
    .mur-shot { width: 150px; }

    .gerant-vitrine { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; margin-bottom: 52px; }
    .gerant-vitrine-texte p { margin-inline: auto; }

    .remplace { padding: 60px 0; }
    .remplace-duo { grid-template-columns: 1fr; gap: 24px; }

    .values-grid,
    .bento-grid,
    .form-row { grid-template-columns: 1fr; }
    .bento-card.span-2 { grid-column: auto; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); padding: 22px 18px; gap: 20px 14px; }
    .stat-value { font-size: 1.5rem; }

    .values { padding: 60px 0 30px; }
    .features-bento { padding: 60px 0; }
    .how { padding: 60px 0; }
    .faq { padding: 60px 0; }
    .pricing { padding: 60px 0; }
    .pricing-card { padding: 32px 22px; }
    .pricing-card-title { font-size: 1.1rem; margin-bottom: 18px; }

    .advantages { padding: 60px 0; }
    .advantage-card { padding: 28px 22px; }

    .group-flow { padding: 60px 0; }
    .group-steps { grid-template-columns: 1fr; }
    .group-step { padding: 26px 22px 22px; }

    .final-cta { padding: 70px 0; }

    .contact-section { padding: calc(var(--l-nav-h) + 32px) 0 50px; }
    .contact-form-wrap { padding: 28px 22px; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .phone-frame,
    .hero-mesh,
    .hero-sticker,
    .hero-kicker .dot,
    .chat-bubble { animation: none !important; opacity: 1 !important; transform: none !important; }}

/* ═══ RTL ═══ */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] .hero-text { text-align: right; }
[dir="rtl"] .hero-badges,
[dir="rtl"] .hero-ctas,
[dir="rtl"] .hero-trust { justify-content: flex-start; }
[dir="rtl"] .chat-bubble.bubble-in { align-self: flex-end; border-bottom-right-radius: 3px; border-bottom-left-radius: 10px; }
[dir="rtl"] .chat-bubble.bubble-out { align-self: flex-start; border-bottom-left-radius: 3px; border-bottom-right-radius: 10px; }
[dir="rtl"] .section-header,
[dir="rtl"] .step,
[dir="rtl"] .value-card,
[dir="rtl"] .pricing-card,
[dir="rtl"] .final-cta-content,
[dir="rtl"] .contact-success,
[dir="rtl"] .stat { text-align: center; }
[dir="rtl"] .pricing-list li,
[dir="rtl"] .contact-detail { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .pricing-card,
[dir="rtl"] .advantage-card,
[dir="rtl"] .group-step { text-align: right; }
[dir="rtl"] .advantage-list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .advantage-list li::before { left: auto; right: 0; }
[dir="rtl"] .form-group label { text-align: right; }
[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea { text-align: right; }
[dir="rtl"] .faq-item summary { flex-direction: row-reverse; }

@media (max-width: 980px) {
    [dir="rtl"] .hero-text { text-align: center; }
}

/* ═══ Page légale (politique de confidentialité) ═══════════════════════════ */
.legal-section {
    padding: calc(var(--l-nav-h) + 48px) 0 64px;
    background: var(--l-bg);
    min-height: 60vh;
}
.legal-container { max-width: 760px; }
.legal-section h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 850;
    color: var(--l-text);
    margin-bottom: 8px;
}
.legal-updated {
    color: var(--l-text-faint);
    font-size: 0.9rem;
    margin-bottom: 32px;
}
.legal-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--l-text);
    margin: 28px 0 10px;
}
.legal-section p {
    color: var(--l-text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}
.legal-section a { color: var(--l-primary-light); text-decoration: underline; }
:root[data-theme-force="light"] .legal-section a { color: var(--l-primary-dark); }
[dir="rtl"] .legal-section { text-align: right; }

/* ═══ Bandeau consentement cookies (DORMANT — CONSENT_BANNER_ENABLED) ══════ */
.cookie-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 560px;
    margin: 0 auto;
    background: var(--l-bg-elev);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    box-shadow: var(--l-shadow-md);
    padding: 16px 20px;
    display: none;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.cookie-consent.is-visible { display: flex; }
.cookie-consent-text {
    color: var(--l-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    flex: 1 1 260px;
    margin: 0;
}
.cookie-consent-text a { color: var(--l-primary-light); text-decoration: underline; }
:root[data-theme-force="light"] .cookie-consent-text a { color: var(--l-primary-dark); }
.cookie-consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cookie-consent-btn {
    border: 1px solid var(--l-border-strong);
    background: var(--l-surface);
    color: var(--l-text);
    border-radius: var(--l-radius-sm);
    padding: 8px 16px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.cookie-consent-btn--accept {
    background: var(--l-primary);
    border-color: var(--l-primary);
    color: #fff;
}