/* =============================================================================
   CYB — direction artistique du site public (cyb-shop.com)
   Source unique : page d'accueil, pages légales et guides lisent ce fichier.
   Avant, chaque page embarquait sa copie du thème — c'est ainsi que les pages
   légales sont restées en thème sombre quand l'accueil est passé au blanc.
   Modifier ici, et nulle part ailleurs. Penser à incrémenter le ?v= des pages.
   ============================================================================= */
        /* ===================================================== écran de chargement
           Il couvre la page le temps que les polices, le tableau de bord embarqué et les
           vitrines arrivent. Une seconde visite dans le même onglet ne le revoit pas. */
        .cyb-loader {
            position: fixed;
            inset: 0;
            z-index: 100000;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 26px;
            transition: opacity .55s ease, visibility .55s ease;
        }
        .cyb-loader.parti { opacity: 0; visibility: hidden; }
        .cyb-loader-halo {
            position: absolute;
            width: 520px; height: 520px; border-radius: 50%;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, transparent 68%);
            filter: blur(20px);
            animation: cyb-loader-pulse 2.6s ease-in-out infinite;
        }
        .cyb-loader-logo {
            position: relative;
            width: 92px;
            animation: cyb-loader-flotte 2.6s ease-in-out infinite;
        }
        .cyb-loader-logo img { width: 100%; filter: brightness(0); }
        .cyb-loader-bar {
            position: relative;
            width: 168px; height: 4px;
            border-radius: 9999px;
            background: #eef0f4;
            overflow: hidden;
        }
        .cyb-loader-bar i {
            position: absolute;
            inset: 0 auto 0 0;
            width: 40%;
            border-radius: inherit;
            background: linear-gradient(90deg, #8b5cf6, #7c3aed);
            animation: cyb-loader-course 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        }
        .cyb-loader-mot {
            position: relative;
            font-size: 13.5px;
            color: #94a3b8;
            letter-spacing: 0.01em;
        }
        @keyframes cyb-loader-course {
            0% { left: -42%; width: 42%; }
            50% { width: 58%; }
            100% { left: 100%; width: 42%; }
        }
        @keyframes cyb-loader-flotte {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }
        @keyframes cyb-loader-pulse {
            0%, 100% { transform: scale(1); opacity: .85; }
            50% { transform: scale(1.08); opacity: 1; }
        }
        /* Deuxième visite dans l'onglet : on ne rejoue pas l'animation. */
        .cyb-loader.rapide { transition-duration: .2s; }
        @media (prefers-reduced-motion: reduce) {
            .cyb-loader-logo, .cyb-loader-halo { animation: none; }
        }

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

        :root {
            /* — thème blanc CYB, accents de la marque — */
            --ink: #0f172a;
            --ink-2: #334155;
            --muted: #64748b;
            --faint: #94a3b8;
            --line: #e8eaef;
            --line-soft: #f1f3f7;
            --soft: #f7f8fa;

            --violet: #7c3aed;
            --violet-2: #8b5cf6;
            --violet-soft: #f4f1ff;
            --green: #10b981;
            --green-dark: #047857;
            --green-soft: #ecfdf5;
            --amber: #f59e0b;
            --amber-ink: #92400e;
            --amber-soft: #fff8ea;
            --coral: #fb7185;
            --coral-soft: #fff1f3;
            --red: #dc2626;

            --font-b: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
            --font-d: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
            --font-s: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-md: 0 14px 30px -18px rgba(15, 23, 42, 0.35);
            --shadow-lg: 0 34px 70px -34px rgba(15, 23, 42, 0.42);
            --shadow-float: 0 18px 40px -20px rgba(15, 23, 42, 0.28);

            /* alias utilisés par l'en-tête, le pied de page et le tunnel d'inscription partagés */
            --bg: #ffffff;
            --surface: #ffffff;
            --border: #e8eaef;
            --text: #0f172a;
            --text-dim: #64748b;
            --text-muted: #94a3b8;
            --neon: #7c3aed;
            --neon-bright: #6d28d9;
            --neon-hot: #8b5cf6;
            --neon-deep: #5b21b6;
            --neon-soft: rgba(124, 58, 237, 0.10);
            --neon-glow: rgba(124, 58, 237, 0.28);
            --neon-line: rgba(124, 58, 237, 0.24);
        }

        html {
            scroll-behavior: smooth;
            overflow-x: clip;
            width: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: var(--font-b);
            color: var(--ink);
            background: #ffffff;
            line-height: 1.6;
            overflow-x: clip;
            width: 100%;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; display: block; }
        button { font-family: var(--font-b); cursor: pointer; }
        svg { flex-shrink: 0; }
        ::selection { background: rgba(124, 58, 237, 0.18); }

        .container {
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 24px;
        }
        @media (max-width: 640px) { .container { padding: 0 18px; } }

        /* ===================================================== apparitions & animations */

        .sr {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .75s var(--ease), transform .75s var(--ease);
        }
        .sr.vis { opacity: 1; transform: none; }
        .sr-d1 { transition-delay: .07s; }
        .sr-d2 { transition-delay: .14s; }
        .sr-d3 { transition-delay: .21s; }
        .sr-d4 { transition-delay: .28s; }

        @keyframes cyb-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-11px); }
        }
        @keyframes cyb-float-soft {
            0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
            50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
        }
        @keyframes cyb-pulse {
            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
            70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }
        @keyframes cyb-marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        @keyframes cyb-blob {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(14px, -18px) scale(1.06); }
        }

        @media (prefers-reduced-motion: reduce) {
            .sr { opacity: 1; transform: none; transition: none; }
            html { scroll-behavior: auto; }
            .float, .stage-blob, .marquee-track { animation: none !important; }
            .hero-scene [class*="illu-"] {
                animation: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        /* ===================================================== boutons */

        .btn-neon,
        .btn-outline,
        .btn-soft {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 9999px;
            font-size: 15px;
            font-weight: 600;
            padding: 13px 24px;
            border: 1px solid transparent;
            transition: background .18s ease, border-color .18s ease, color .18s ease,
                        transform .22s var(--ease), box-shadow .22s ease;
            white-space: nowrap;
        }

        .btn-neon {
            background: var(--ink);
            color: #fff;
            box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.8);
        }
        .btn-neon:hover { background: #1e293b; transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(15, 23, 42, 0.6); }
        .btn-neon-lg { padding: 16px 32px; font-size: 16px; }

        .btn-outline {
            background: #fff;
            color: var(--ink-2);
            border-color: var(--line);
        }
        .btn-outline:hover { border-color: #cbd5e1; color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

        .btn-soft {
            background: var(--violet-soft);
            color: var(--violet);
            border-color: rgba(124, 58, 237, 0.18);
        }
        .btn-soft:hover { background: #ece6ff; transform: translateY(-2px); }

        .ac { display: inline-flex; align-items: center; }
        .ac svg { width: 15px; height: 15px; }

        /* reflet qui balaie le badge du hero */
        .hero-badge { position: relative; overflow: hidden; }
        .hero-badge::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0; left: -60%;
            width: 45%;
            background: linear-gradient(100deg, transparent, rgba(124, 58, 237, 0.13), transparent);
            transform: skewX(-18deg);
            animation: cyb-sweep 4.6s ease-in-out infinite;
        }
        @keyframes cyb-sweep {
            0%, 65% { left: -60%; }
            100% { left: 130%; }
        }

        /* bouton légèrement magnétique : il se décale vers le curseur */
        .btn-neon, .hdr-btn-pill { will-change: transform; }

        /* ===================================================== en-tête (composant partagé) */

        .hdr {
            position: sticky;
            top: 0;
            z-index: 900;
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: saturate(180%) blur(16px);
            -webkit-backdrop-filter: saturate(180%) blur(16px);
            border-bottom: 1px solid transparent;
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .hdr.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -20px rgba(15, 23, 42, 0.5); }

        .hdr-in {
            max-width: 1180px;
            margin: 0 auto;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .hdr .logo { display: flex; align-items: center; gap: 9px; }
        .hdr .logo img { height: 30px; }

        .nav { display: flex; align-items: center; gap: 28px; margin-right: auto; }
        .nav a {
            position: relative;
            font-size: 15px;
            font-weight: 500;
            color: var(--muted);
            transition: color .15s ease;
        }
        .nav a::after {
            content: '';
            position: absolute;
            left: 0; right: 100%; bottom: -5px;
            height: 2px;
            border-radius: 2px;
            background: var(--violet);
            transition: right .25s var(--ease);
        }
        .nav a:hover { color: var(--ink); }
        .nav a:hover::after { right: 0; }

        .hdr-r { display: flex; align-items: center; gap: 10px; }

        .btn-ghost {
            font-size: 15px;
            font-weight: 500;
            color: var(--ink-2);
            padding: 9px 15px;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            transition: background .15s ease, color .15s ease;
        }
        .btn-ghost:hover { background: var(--line-soft); color: var(--ink); }

        .hdr-btn-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--ink);
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            padding: 11px 20px;
            border-radius: 9999px;
            transition: background .18s ease, transform .2s var(--ease), box-shadow .2s ease;
        }
        .hdr-btn-pill:hover { background: #1e293b; transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(15, 23, 42, 0.7); }

        .user-av {
            width: 28px; height: 28px; border-radius: 50%;
            background: linear-gradient(135deg, var(--violet-2), var(--violet));
            color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700;
        }

        .user-dd, .login-dd {
            position: absolute;
            top: calc(100% + 14px);
            right: 0;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
            padding: 8px;
            min-width: 250px;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: opacity .2s ease, transform .2s var(--ease);
            z-index: 950;
        }
        .user-dd.show, .login-dd.show { opacity: 1; transform: none; pointer-events: auto; }

        .user-dd-header { padding: 12px 14px 13px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
        .user-dd-name { font-size: 14px; font-weight: 600; color: var(--ink); }
        .user-dd-email { font-size: 12.5px; color: var(--muted); word-break: break-all; }
        .user-dd-item {
            display: flex; align-items: center; gap: 10px;
            padding: 11px 14px; border-radius: 12px;
            font-size: 14px; color: var(--ink-2);
            transition: background .15s ease, color .15s ease;
        }
        .user-dd-item:hover { background: var(--violet-soft); color: var(--violet); }
        .user-dd-item.danger { color: var(--red); }
        .user-dd-item.danger:hover { background: #fef2f2; }

        .login-dd { width: 352px; padding: 22px; }
        .login-dd-card { width: 100%; }

        .auth-g { display: flex; flex-direction: column; gap: 8px; }
        .auth-g-btn {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            width: 100%; padding: 12px 14px;
            background: #fff; border: 1px solid var(--line); border-radius: 14px;
            font-size: 14px; font-weight: 500; color: var(--ink);
            transition: border-color .15s ease, background .15s ease, transform .15s ease;
        }
        .auth-g-btn:hover { border-color: #cbd5e1; background: var(--soft); transform: translateY(-1px); }
        .auth-g-btn svg { width: 17px; height: 17px; }

        .auth-sep {
            display: flex; align-items: center; gap: 12px;
            margin: 16px 0; font-size: 12px; color: var(--faint);
        }
        .auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

        .auth-f { display: flex; flex-direction: column; gap: 12px; width: 100%; }

        .auth-inp {
            width: 100%;
            padding: 13px 15px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 14px;
            font-size: 14.5px;
            font-family: var(--font-b);
            color: var(--ink);
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .auth-inp::placeholder { color: var(--faint); }
        .auth-inp:focus {
            outline: none;
            border-color: var(--violet-2);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
        }

        .auth-btn {
            width: 100%;
            padding: 13px 18px;
            background: var(--ink);
            color: #fff;
            border: 0;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 600;
            transition: background .18s ease, transform .15s ease;
        }
        .auth-btn:hover { background: #1e293b; transform: translateY(-1px); }
        .auth-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

        .auth-btn-secondary {
            width: 100%;
            padding: 12px 18px;
            background: #fff;
            color: var(--ink-2);
            border: 1px solid var(--line);
            border-radius: 14px;
            font-size: 14px;
            font-weight: 600;
        }
        .auth-btn-secondary:hover { border-color: #cbd5e1; color: var(--ink); }

        .mob-btn { display: none; background: transparent; border: 0; color: var(--ink); padding: 6px; }
        .mob-btn svg { width: 24px; height: 24px; }

        .mob-menu {
            display: none;
            flex-direction: column;
            gap: 2px;
            padding: 8px 24px 26px;
            border-top: 1px solid var(--line);
            background: #fff;
        }
        .mob-menu a { padding: 14px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
        .hdr.nav-open .mob-menu { display: flex; }

        @media (max-width: 960px) {
            .nav { display: none; }
            .mob-btn { display: block; margin-left: auto; }
            .hdr-in { gap: 12px; }
        }

        /* ===================================================== rythme des sections */

        .sec { padding: 96px 0; position: relative; }
        .sec-soft { background: var(--soft); }
        .sec-violet { background: var(--violet-soft); }
        .sec-mint { background: var(--green-soft); }
        @media (max-width: 720px) { .sec { padding: 64px 0; } }

        .shc { max-width: 700px; margin: 0 auto 48px; text-align: center; }
        .shc-left { margin-left: 0; margin-right: auto; text-align: left; }

        .sl {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--violet);
            background: var(--violet-soft);
            border: 1px solid rgba(124, 58, 237, 0.14);
            padding: 6px 14px;
            border-radius: 9999px;
            margin-bottom: 18px;
        }

        .st {
            font-family: var(--font-d);
            font-size: clamp(30px, 4.2vw, 46px);
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.12;
            color: var(--ink);
        }
        .st .thin { font-weight: 400; color: var(--muted); }
        .glow { color: var(--violet); }
        .glow-green { color: var(--green-dark); }

        .sd { margin-top: 18px; font-size: 17px; color: var(--muted); line-height: 1.65; }

        /* soulignement dessiné à la main sous un mot clé */
        .underline-mark {
            position: relative;
            display: inline-block;
            white-space: nowrap;
        }
        .underline-mark::after {
            content: '';
            position: absolute;
            left: 2%; right: 2%; bottom: -2px;
            height: 10px;
            background: rgba(245, 158, 11, 0.35);
            border-radius: 9999px;
            z-index: -1;
        }

        /* ===================================================== HERO */

        .hero {
            position: relative;
            padding: 28px 0 72px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 16px 6px 7px;
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 9999px;
            font-size: 13.5px;
            font-weight: 500;
            color: var(--ink-2);
            box-shadow: var(--shadow-sm);
        }
        .hero-badge b {
            background: var(--violet);
            color: #fff;
            font-size: 11.5px;
            font-weight: 700;
            padding: 4px 11px;
            border-radius: 9999px;
            letter-spacing: 0.02em;
        }

        .hero-col { max-width: 620px; }

        .hero-title {
            font-family: var(--font-d);
            font-size: clamp(38px, 5.6vw, 64px);
            font-weight: 700;
            letter-spacing: -0.035em;
            line-height: 1.06;
            margin: 20px 0 0;
            color: var(--ink);
        }
        .hero-title .thin {
            display: block;
            margin-top: 18px;
            font-size: 0.5em;
            font-weight: 400;
            line-height: 1.25;
            letter-spacing: -0.02em;
            color: var(--muted);
        }

        .hero-sub {
            margin: 22px 0 0;
            font-size: clamp(16px, 1.6vw, 18.5px);
            color: var(--muted);
            line-height: 1.6;
            max-width: 620px;
        }

        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

        .hero-proof {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 26px;
            margin-top: 26px;
            font-size: 14px;
            color: var(--muted);
        }
        .hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
        .hero-proof svg { width: 16px; height: 16px; color: var(--green); }

        /* --- visuel du hero : photo + illustration, à hauteur du titre --- */

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
            gap: 56px;
            align-items: center;
        }
        @media (max-width: 1000px) {
            .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
            .hero-col { text-align: center; }
            .hero-actions, .hero-proof { justify-content: center; }
            .hero-sub { margin-left: auto; margin-right: auto; }
        }

        .hero-visual { position: relative; }

        .hero-scene {
            width: 100%;
            height: auto;
            display: block;
            filter: drop-shadow(0 34px 60px rgba(76, 29, 149, 0.16));
        }

        /* --- petites animations de l'illustration (repères en unités du viewBox) --- */

        .hero-scene [class*="illu-"] { transform-box: view-box; }

        @keyframes illu-balance {
            0%, 100% { transform: rotate(-1.7deg); }
            50%      { transform: rotate(1.7deg); }
        }
        @keyframes illu-lueur {
            0%, 100% { opacity: .22; transform: scale(1); }
            50%      { opacity: .55; transform: scale(1.2); }
        }
        @keyframes illu-reflet {
            0%, 100% { opacity: .35; transform: translate(0, 0); }
            50%      { opacity: .8;  transform: translate(7px, -7px); }
        }
        @keyframes illu-brise {
            0%, 100% { transform: rotate(-2.6deg); }
            50%      { transform: rotate(2.6deg); }
        }
        @keyframes illu-carte-entree {
            from { opacity: 0; transform: translate(26px, -16px) scale(.93); }
            to   { opacity: 1; transform: translate(0, 0) scale(1); }
        }
        @keyframes illu-flotte {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-7px); }
        }
        @keyframes illu-coche {
            0%, 72%, 100% { transform: scale(1); }
            80%           { transform: scale(1.28); }
            88%           { transform: scale(.96); }
        }

        /* la suspension se balance, son halo respire */
        .illu-lampe {
            transform-origin: 389px 28px;
            animation: illu-balance 7s ease-in-out infinite;
        }
        .illu-lueur {
            transform-origin: 389px 131px;
            animation: illu-lueur 4.5s ease-in-out infinite;
        }

        /* reflet du miroir */
        .illu-reflet {
            transform-origin: 140px 176px;
            animation: illu-reflet 9s ease-in-out infinite;
        }

        /* les plantes bougent chacune à son rythme */
        .illu-brise { animation: illu-brise 6s ease-in-out infinite; }
        .illu-brise-1 { transform-origin: 66px 276px; animation-duration: 5.2s; animation-delay: -.8s; }
        .illu-brise-2 { transform-origin: 582px 392px; animation-duration: 7.4s; animation-delay: -2.1s; }
        .illu-brise-3 { transform-origin: 271px 422px; animation-duration: 6.3s; animation-delay: -3.4s; }

        /* la réservation arrive, puis flotte */
        .illu-carte {
            opacity: 0;
            transform-origin: 524px 85px;
            animation: illu-carte-entree .9s cubic-bezier(.22, 1, .36, 1) .55s both;
        }
        .illu-carte-flotte {
            transform-origin: 524px 85px;
            animation: illu-flotte 6s ease-in-out 1.5s infinite;
        }
        .illu-coche {
            transform-origin: 600px 60px;
            animation: illu-coche 5s ease-in-out 1.8s infinite;
        }

        @media (max-width: 1000px) {
            .hero-visual { max-width: 520px; margin: 0 auto; }
        }

        /* ===================================================== bandeau de preuve */

        .proof-band {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: #fff;
            padding: 26px 0;
            overflow: hidden;
        }
        .marquee { overflow: hidden; position: relative; }
        .marquee::before, .marquee::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0; width: 90px; z-index: 2;
            pointer-events: none;
        }
        .marquee::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
        .marquee::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
        .marquee-track {
            display: flex;
            width: max-content;
            animation: cyb-marquee 34s linear infinite;
        }
        .marquee:hover .marquee-track { animation-play-state: paused; }
        .marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            padding: 0 26px;
            font-size: 15px;
            color: var(--ink-2);
            white-space: nowrap;
        }
        .marquee-item b { font-family: var(--font-d); font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
        .marquee-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }

        /* ===================================================== bac à sable */

        .demo { padding: 90px 0; background: var(--soft); }
        .demo-head { max-width: 720px; margin: 0 auto 34px; text-align: center; }


        /* ===================================================== démonstration (vrai tableau de bord) */

        .demo-banner {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            padding: 12px 18px;
            margin: 0 auto 22px;
            max-width: 940px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            font-size: 14px;
            color: var(--ink-2);
            box-shadow: var(--shadow-sm);
        }
        .demo-banner p { margin: 0; flex: 1 1 320px; line-height: 1.5; }
        .demo-banner strong { color: var(--ink); font-weight: 600; }
        .demo-banner-dot {
            width: 9px; height: 9px; border-radius: 50%; background: var(--green);
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16); flex-shrink: 0;
        }
        .demo-banner-btn {
            border: 1px solid var(--line); background: #fff; color: var(--ink-2);
            font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 9999px;
            cursor: pointer; transition: border-color .15s ease, color .15s ease;
        }
        .demo-banner-btn:hover { border-color: var(--violet); color: var(--violet); }

        .demo-stage { position: relative; padding: 6px 0 0; }

        .demo-frame {
            position: relative;
            z-index: 2;
            border: 1px solid var(--line);
            border-radius: 20px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 40px 80px -40px rgba(15, 23, 42, 0.45), 0 2px 6px rgba(15, 23, 42, 0.05);
            max-width: 760px;
            margin: 0 auto;
        }
        .demo-frame-bar {
            display: flex; align-items: center; gap: 14px;
            padding: 11px 16px;
            background: var(--soft);
            border-bottom: 1px solid var(--line);
        }
        .demo-dots { display: flex; gap: 6px; }
        .demo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; display: block; }
        .demo-url {
            font-size: 12px; color: var(--muted);
            font-family: ui-monospace, Menlo, monospace;
            background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px;
        }
        .demo-open {
            margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--violet);
            white-space: nowrap;
        }
        .demo-open:hover { text-decoration: underline; }

        .demo-frame-body {
            position: relative;
            background: #f7f8fa;
            overflow: hidden;
            height: 560px;
        }
        /* Le tableau de bord est rendu en 1280 px — sa vraie largeur de bureau, avec sa barre
           latérale — puis mis à l'échelle de son cadre. En dessous, il basculerait en affichage
           mobile et le visiteur ne verrait pas le produit qu'il aura.
           Les dimensions sont portées par l'identifiant : l'iframe voyage entre le cadre réduit
           et la fenêtre agrandie, elle doit garder sa taille de rendu dans les deux. */
        #cybDemoFrame {
            display: block;
            width: 1280px;
            height: 950px;
            border: 0;
            transform-origin: top left;
        }
        .demo-fallback { padding: 60px 20px; text-align: center; color: var(--muted); }
        .demo-mobile-open { display: none; }

        .demo-note {
            margin: 26px auto 0;
            max-width: 780px;
            text-align: center;
            font-size: 14px;
            color: var(--muted);
            line-height: 1.7;
        }
        .demo-note strong { color: var(--ink); font-weight: 600; }

        /* --- mise en page : l'écran à gauche, le propos à droite --- */

        .demo-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 300px;
            gap: 32px;
            align-items: start;
        }
        @media (max-width: 1040px) {
            .demo-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
        }

        .demo-aside { padding-top: 6px; }
        .demo-aside-kicker {
            display: inline-block;
            font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--violet); background: var(--violet-soft);
            padding: 5px 13px; border-radius: 9999px; margin-bottom: 14px;
        }
        .demo-aside h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; margin-bottom: 10px; }
        .demo-aside p { font-size: 14.5px; color: var(--muted); line-height: 1.65; }
        .demo-aside-list {
            list-style: none;
            margin: 18px 0 22px;
            display: flex; flex-direction: column; gap: 10px;
            font-size: 14px; color: var(--ink-2);
        }
        .demo-aside-list li { position: relative; padding-left: 24px; line-height: 1.45; }
        .demo-aside-list li::before {
            content: '';
            position: absolute; left: 0; top: 6px;
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--violet);
        }
        .demo-aside-btn { width: 100%; }
        .demo-aside-note { margin-top: 14px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }

        /* --- aperçu inerte + invitation au survol --- */

        /* Inline, le tableau de bord se regarde mais ne se manipule pas : impossible de dérégler
           la démonstration au passage de la souris, et rien ne capte le clavier. */
        #cybDemoFrame { pointer-events: none; }
        #demoModalSlot #cybDemoFrame { pointer-events: auto; }

        .demo-invite {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: rgba(244, 241, 255, 0.55);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            opacity: 0;
            transition: opacity .28s ease;
        }
        .demo-frame.propose .demo-invite { opacity: 1; }

        .demo-invite-card {
            display: flex;
            align-items: center;
            gap: 13px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 9999px;
            padding: 14px 24px;
            box-shadow: 0 24px 50px -24px rgba(76, 29, 149, 0.6);
            transform: translateY(6px);
            transition: transform .28s var(--ease);
        }
        .demo-frame.propose .demo-invite-card { transform: none; }
        .demo-invite-card svg { width: 20px; height: 20px; color: var(--violet); }
        .demo-invite-card strong { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
        .demo-invite-card em { font-style: normal; font-size: 12.5px; color: var(--muted); }

        /* Sans survol (écran tactile), l'invitation reste discrète mais visible. */
        @media (hover: none) {
            .demo-invite { opacity: 1; background: transparent; backdrop-filter: none; align-items: flex-end; padding-bottom: 14px; }
            .demo-invite-card { transform: none; padding: 10px 18px; }
            .demo-invite-card em { display: none; }
        }

        /* Le bouton de la barre suit l'invitation. */
        .demo-frame.propose .demo-expand { border-color: var(--violet); color: var(--violet); }

        /* --- fenêtre d'agrandissement (80 % de l'écran) --- */

        .demo-expand {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border: 1px solid var(--line);
            background: #fff;
            color: var(--ink-2);
            border-radius: 9999px;
            padding: 7px 15px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: border-color .15s ease, color .15s ease, transform .15s ease;
        }
        .demo-expand svg { width: 15px; height: 15px; }
        .demo-expand:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }

        .demo-modal {
            position: fixed;
            inset: 0;
            z-index: 10050;
            padding: 0;
            background: rgba(15, 23, 42, 0.58);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease;
        }
        .demo-modal.show { opacity: 1; pointer-events: auto; }

        .demo-modal-card {
            width: 100vw;
            height: 100vh;
            background: #fff;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 50px 100px -40px rgba(15, 23, 42, 0.7);
            display: flex;
            flex-direction: column;
            transform: scale(0.97);
            transition: transform .28s var(--ease);
        }
        .demo-modal.show .demo-modal-card { transform: none; }

        .demo-modal-bar {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 7px 14px;
            background: var(--soft);
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }
        .demo-modal-hint { margin-left: auto; font-size: 12.5px; color: var(--muted); }
        .demo-modal-close {
            width: 32px; height: 32px; border-radius: 50%;
            border: 1px solid var(--line); background: #fff; color: var(--muted);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; cursor: pointer;
            transition: border-color .15s ease, color .15s ease, transform .2s ease;
        }
        .demo-modal-close:hover { border-color: var(--ink); color: var(--ink); transform: rotate(90deg); }

        .demo-modal-body { flex: 1 1 auto; overflow: hidden; position: relative; background: #f7f8fa; }

        @media (max-width: 720px) {
            .demo-modal-hint { display: none; }
        }

        @media (max-width: 900px) {
            .demo-mobile-open {
                display: block;
                width: calc(100% - 32px);
                margin: 0 16px 16px;
                background: var(--ink);
                color: #fff;
                border: 0;
                border-radius: 12px;
                padding: 13px;
                font-size: 14.5px;
                font-weight: 600;
            }
            .demo-open { display: none; }
        }

        /* ===================================================== blocs bénéfices */

        .val-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }
        @media (max-width: 960px) { .val-grid { grid-template-columns: 1fr; } }

        .val-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: 0 0 28px;
            overflow: hidden;
            transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
            display: flex;
            flex-direction: column;
        }
        .val-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); }

        .val-visual {
            height: 190px;
            margin: 0;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
        }
        .val-visual-violet { background: var(--violet-soft); }
        .val-visual-mint { background: var(--green-soft); }
        .val-visual-amber { background: var(--amber-soft); }

        .val-body { padding: 24px 28px 0; }
        .val-card h3 { font-size: 19px; font-weight: 650; margin-bottom: 10px; letter-spacing: -0.02em; line-height: 1.25; }
        .val-card p { font-size: 15px; color: var(--muted); line-height: 1.65; }
        .val-tag {
            display: inline-block;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            padding: 4px 11px;
            border-radius: 9999px;
            margin-bottom: 12px;
        }
        .val-tag-violet { background: var(--violet-soft); color: var(--violet); }
        .val-tag-mint { background: var(--green-soft); color: var(--green-dark); }
        .val-tag-amber { background: var(--amber-soft); color: var(--amber-ink); }

        /* mini-maquettes dans les cartes */
        .mini {
            background: #fff;
            border-radius: 16px;
            box-shadow: var(--shadow-float);
            width: 100%;
            max-width: 260px;
            padding: 14px;
            font-size: 12px;
        }
        .mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .mini-title { font-size: 12.5px; font-weight: 650; }
        .mini-sub { font-size: 11px; color: var(--faint); }
        .mini-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 7px 9px; border-radius: 10px; background: var(--soft);
            margin-bottom: 6px; font-size: 11.5px;
        }
        .mini-row:last-child { margin-bottom: 0; }
        .mini-row.on { background: var(--violet-soft); color: var(--violet); font-weight: 600; }
        .mini-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
        .mini-slot {
            text-align: center; font-size: 10.5px; font-weight: 600;
            padding: 6px 0; border-radius: 8px; background: var(--soft); color: var(--ink-2);
        }
        .mini-slot.on { background: var(--ink); color: #fff; }
        .mini-slot.off { opacity: .4; text-decoration: line-through; }

        .mini-sms {
            display: flex; flex-direction: column; gap: 7px;
        }
        .mini-bubble {
            max-width: 88%;
            padding: 8px 11px;
            border-radius: 14px;
            font-size: 11.5px;
            line-height: 1.4;
        }
        .mini-bubble-in { background: var(--soft); border-bottom-left-radius: 5px; }
        .mini-bubble-out { background: var(--green); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
        .mini-cost {
            margin-top: 4px;
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--green-dark);
        }

        .mini-ticket { font-family: ui-monospace, Menlo, monospace; }
        .mini-ticket-line { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; color: var(--ink-2); }
        .mini-ticket-total {
            display: flex; justify-content: space-between;
            border-top: 1px dashed #cbd5e1; margin-top: 7px; padding-top: 7px;
            font-size: 12.5px; font-weight: 700; color: var(--ink);
        }

        /* ===================================================== SMS */

        .sms-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            align-items: stretch;
        }
        @media (max-width: 880px) { .sms-grid { grid-template-columns: 1fr; } }

        .sms-card {
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: 32px;
            background: #fff;
            display: flex;
            flex-direction: column;
            gap: 16px;
            transition: transform .25s var(--ease), box-shadow .25s ease;
        }
        .sms-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
        .sms-card-win { border-color: rgba(16, 185, 129, 0.3); background: linear-gradient(180deg, #fff 0%, var(--green-soft) 120%); }

        .sms-tag {
            align-self: flex-start;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            padding: 6px 13px;
            border-radius: 9999px;
            background: var(--line-soft);
            color: var(--muted);
        }
        .sms-card-win .sms-tag { background: rgba(16, 185, 129, 0.14); color: var(--green-dark); }

        .sms-price { font-family: var(--font-d); font-size: 46px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
        .sms-price span { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
        .sms-card h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
        .sms-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
        .sms-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
        .sms-list svg { width: 17px; height: 17px; margin-top: 3px; }
        .sms-list .ok { color: var(--green); }
        .sms-list .ko { color: var(--faint); }

        /* Le calcul d'économies : bloc clair, la somme sauvée mise en avant en vert. */
        .sms-math {
            margin-top: 22px;
            border-radius: 28px;
            padding: 30px 34px;
            background: linear-gradient(120deg, #ffffff 0%, var(--green-soft) 100%);
            border: 1px solid rgba(16, 185, 129, 0.28);
            box-shadow: var(--shadow-md);
            color: var(--ink-2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
        }
        .sms-math p { font-size: 16px; color: var(--ink-2); line-height: 1.6; max-width: 620px; }
        .sms-math strong { color: var(--ink); font-weight: 650; }
        .sms-math-out {
            display: inline-flex;
            align-items: baseline;
            font-family: var(--font-d);
            font-size: 30px;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: var(--green-dark);
            white-space: nowrap;
            background: #fff;
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 9999px;
            padding: 14px 24px;
            box-shadow: 0 12px 26px -16px rgba(16, 185, 129, 0.9);
        }

        /* ===================================================== comparatif */

        .cmp {
            border: 1px solid var(--line);
            border-radius: 28px;
            overflow: hidden;
            background: #fff;
            box-shadow: var(--shadow-md);
        }
        .cmp table { width: 100%; border-collapse: collapse; }
        .cmp th, .cmp td {
            padding: 18px 22px;
            text-align: left;
            font-size: 15px;
            border-bottom: 1px solid var(--line-soft);
            vertical-align: top;
        }
        .cmp thead th {
            background: var(--soft);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--muted);
            border-bottom: 1px solid var(--line);
        }
        .cmp thead th.cmp-us { color: #fff; background: var(--ink); }
        .cmp td.cmp-us { background: rgba(124, 58, 237, 0.045); font-weight: 550; color: var(--ink); }
        .cmp td.cmp-them { color: var(--muted); }
        .cmp tbody tr:last-child td { border-bottom: 0; }
        .cmp tbody tr { transition: background .15s ease; }
        .cmp tbody tr:hover td { background: var(--soft); }
        .cmp tbody tr:hover td.cmp-us { background: rgba(124, 58, 237, 0.075); }
        .cmp-crit { font-weight: 600; color: var(--ink); }
        .cmp-note { font-size: 13px; color: var(--muted); margin-top: 16px; line-height: 1.6; text-align: center; }

        @media (max-width: 800px) {
            .cmp { overflow-x: auto; }
            .cmp table { min-width: 660px; }
        }

        /* ===================================================== standardiste vocal */

        .voice-wrap {
            background: var(--ink);
            border-radius: 36px;
            padding: 52px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .voice-wrap::before {
            content: '';
            position: absolute;
            width: 420px; height: 420px; border-radius: 50%;
            background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, transparent 68%);
            top: -160px; right: -90px;
            filter: blur(20px);
        }
        @media (max-width: 720px) { .voice-wrap { padding: 32px 22px; border-radius: 28px; } }

        .voice-wrap .sl { background: rgba(255, 255, 255, 0.08); color: #c4b5fd; border-color: rgba(255, 255, 255, 0.12); }
        .voice-wrap .st { color: #fff; }
        .voice-wrap .st .thin { color: #94a3b8; }
        .voice-wrap .sd { color: #cbd5e1; }

        .voice-grid {
            display: grid;
            grid-template-columns: 240px minmax(0, 1fr);
            gap: 40px;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        @media (max-width: 860px) { .voice-grid { grid-template-columns: 1fr; gap: 26px; } }

        .ai-orb-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 220px;
        }
        .ai-orb {
            width: 150px; height: 150px; border-radius: 50%;
            background: radial-gradient(circle at 34% 30%, #ffffff 0%, #c4b5fd 38%, #7c3aed 100%);
            box-shadow: 0 0 0 12px rgba(124, 58, 237, 0.16), 0 24px 60px -20px rgba(124, 58, 237, 0.8);
            transition: transform .18s ease, box-shadow .3s ease;
            animation: cyb-float 6s ease-in-out infinite;
        }
        .ai-orb-container.speaking .ai-orb {
            box-shadow: 0 0 0 20px rgba(124, 58, 237, 0.22), 0 24px 70px -16px rgba(124, 58, 237, 0.95);
        }

        .dialog-bubble {
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 18px;
            padding: 14px 17px;
            font-size: 14.5px;
            line-height: 1.55;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.04);
            max-width: 540px;
            transition: border-color .25s ease, background .25s ease, transform .25s var(--ease), color .25s ease;
        }
        .dialog-bubble + .dialog-bubble { margin-top: 10px; }
        .dialog-bubble.client { margin-left: auto; background: rgba(255, 255, 255, 0.02); }
        .dialog-bubble.highlight {
            border-color: rgba(167, 139, 250, 0.55);
            background: rgba(124, 58, 237, 0.18);
            color: #fff;
            transform: translateX(3px);
        }
        .dialog-speaker {
            display: block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: #a78bfa;
            margin-bottom: 4px;
        }
        .dialog-bubble.client .dialog-speaker { color: #64748b; }

        .voice-btn {
            display: inline-flex; align-items: center; gap: 9px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.06);
            border-radius: 9999px; padding: 12px 24px;
            font-size: 14.5px; font-weight: 600; color: #fff;
            transition: background .18s ease, border-color .18s ease, transform .18s ease;
        }
        .voice-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }

        /* ===================================================== tarifs */

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
            align-items: stretch;
        }
        @media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

        .pricing-tier-card {
            position: relative;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: 34px 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
        }
        .pricing-tier-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
        .pricing-tier-card.popular {
            border-color: transparent;
            background: var(--ink);
            color: #fff;
            box-shadow: var(--shadow-lg);
        }
        .pricing-tier-card.popular .tier-desc,
        .pricing-tier-card.popular .tier-price-per { color: #94a3b8; }
        .pricing-tier-card.popular .tier-list { color: #e2e8f0; }
        .pricing-tier-card.popular .tier-list strong { color: #fff; }
        .pricing-tier-card.popular .tier-list svg { color: #6ee7b7; }
        .pricing-tier-card.popular .tier-price { border-bottom-color: rgba(255, 255, 255, 0.12); }
        .pricing-tier-card.popular .btn-outline { background: #fff; color: var(--ink); border-color: #fff; }
        .pricing-tier-card.popular .btn-neon { background: #fff; color: var(--ink); }
        .pricing-tier-card.popular .btn-neon:hover { background: #ede9fe; }

        .tier-badge {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--violet);
            color: #fff;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 6px 16px;
            border-radius: 9999px;
            white-space: nowrap;
            box-shadow: 0 10px 22px -12px rgba(124, 58, 237, 0.9);
        }
        .tier-tag {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--violet);
            margin-bottom: 10px;
        }
        .pricing-tier-card.popular .tier-tag { color: #c4b5fd; }
        .tier-name { font-family: var(--font-d); font-size: 23px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 8px; }
        .tier-desc { font-size: 14.5px; color: var(--muted); line-height: 1.55; min-height: 46px; margin-bottom: 22px; }
        .tier-price {
            display: flex; align-items: baseline; gap: 7px;
            padding-bottom: 22px; margin-bottom: 22px;
            border-bottom: 1px solid var(--line-soft);
        }
        .tier-price-val { font-family: var(--font-d); font-size: 46px; font-weight: 700; letter-spacing: -0.04em; }
        .tier-price-per { font-size: 14px; color: var(--muted); }
        .tier-list { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 28px; }
        .tier-list li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.5; }
        .tier-list svg { width: 17px; height: 17px; color: var(--green); margin-top: 3px; }
        .tier-list strong { font-weight: 600; color: var(--ink); }

        .pricing-foot { margin-top: 30px; text-align: center; font-size: 14.5px; color: var(--muted); }

        /* ===================================================== FAQ */

        .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
        .faq-item {
            border: 1px solid var(--line);
            border-radius: 20px;
            background: #fff;
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .faq-item:hover { border-color: #d7dbe2; }
        .faq-item.open { border-color: var(--violet); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18); }
        .faq-q {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 20px 24px;
            background: transparent;
            border: 0;
            text-align: left;
            font-size: 16.5px;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -0.01em;
            font-family: var(--font-b);
        }
        .faq-q span.ico {
            width: 26px; height: 26px; flex-shrink: 0;
            border-radius: 50%; background: var(--soft);
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; color: var(--muted);
            transition: transform .25s var(--ease), background .2s ease, color .2s ease;
        }
        .faq-item.open .faq-q span.ico { transform: rotate(45deg); background: var(--violet); color: #fff; }
        .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
        .faq-a p { padding: 0 24px 22px; font-size: 15.5px; color: var(--muted); line-height: 1.7; }
        .faq-item.open .faq-a { max-height: 460px; }

        /* ===================================================== CTA final */

        .cta { padding: 0 0 96px; text-align: center; }
        .cta-box {
            background: linear-gradient(135deg, #0f172a 0%, #2e1065 60%, #4c1d95 100%);
            border-radius: 36px;
            padding: 72px 40px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .cta-box::after {
            content: '';
            position: absolute;
            width: 380px; height: 380px; border-radius: 50%;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 70%);
            bottom: -180px; left: -80px;
            filter: blur(10px);
        }
        .cta-t {
            font-family: var(--font-d);
            font-size: clamp(30px, 4.4vw, 48px);
            font-weight: 700;
            letter-spacing: -0.035em;
            line-height: 1.1;
            position: relative;
            z-index: 1;
        }
        .cta-s { margin: 18px auto 32px; font-size: 17.5px; color: #cbd5e1; max-width: 560px; position: relative; z-index: 1; }
        .cta-box .btn-neon { background: #fff; color: var(--ink); position: relative; z-index: 1; }
        .cta-box .btn-neon:hover { background: #ede9fe; }
        .cta-note { margin-top: 18px; font-size: 13.5px; color: #94a3b8; position: relative; z-index: 1; }
        @media (max-width: 720px) { .cta-box { padding: 48px 24px; border-radius: 28px; } }

        /* ===================================================== pied de page */

        .footer { border-top: 1px solid var(--line); background: var(--soft); padding: 72px 0 28px; }
        .footer-top { display: grid; grid-template-columns: minmax(260px, 1fr) 2.35fr; gap: 64px; }
        .ft-brand { max-width: 320px; }
        /* Quatre colonnes, et quatre seulement : les liens légaux ont leur propre
           ligne en bas. Une cinquième colonne ici retombait seule sous la première. */
        .ft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; }
        .ft-col ul { list-style: none; }
        @media (max-width: 1040px) { .footer-top { grid-template-columns: 1fr; gap: 40px; } }
        @media (max-width: 640px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }

        .ft-logo img { height: 28px; margin-bottom: 16px; }
        .ft-desc { font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 330px; }
        .ft-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
        .ft-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
        .ft-links a, .ft-col a { font-size: 14px; color: var(--muted); transition: color .15s ease; }
        .ft-links a:hover, .ft-col a:hover { color: var(--violet); }
        .ft-socials { display: flex; gap: 10px; margin-top: 22px; }
        .ft-socials a {
            width: 36px; height: 36px; border-radius: 12px;
            border: 1px solid var(--line); background: #fff;
            display: flex; align-items: center; justify-content: center;
            color: var(--muted); transition: border-color .15s ease, color .15s ease, transform .15s ease;
        }
        .ft-socials a:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px); }
        .ft-status { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); margin-top: 18px; }
        .ft-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: cyb-pulse 2.8s ease-out infinite; }
        /* — Bandeau légal : la ligne que l'œil cherche en bas de page — */
        .ft-legal {
            margin-top: 52px; padding-top: 26px;
            border-top: 1px solid var(--line);
            display: flex; align-items: center; flex-wrap: wrap;
            gap: 10px 22px;
        }
        .ft-legal a { font-size: 13.5px; color: var(--muted); transition: color .15s ease; }
        .ft-legal a:hover { color: var(--violet); }
        .ft-cookie-btn {
            display: inline-flex; align-items: center; gap: 7px;
            padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
            background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2);
            cursor: pointer; font-family: inherit;
            transition: border-color .15s ease, color .15s ease;
        }
        .ft-cookie-btn:hover { border-color: var(--violet); color: var(--violet); }
        .ft-cookie-btn svg { width: 14px; height: 14px; }
        .footer-bottom {
            margin-top: 26px; padding-top: 22px;
            border-top: 1px solid var(--line);
            display: flex; align-items: center; justify-content: space-between;
            gap: 16px; flex-wrap: wrap;
            font-size: 13px; color: var(--muted);
        }
        .ft-copy { font-size: 13px; color: var(--muted); line-height: 1.6; }
        .ft-copy span { color: var(--faint); }
        @media (max-width: 640px) {
            .ft-legal { gap: 10px 16px; }
            .footer-bottom { flex-direction: column; align-items: flex-start; }
        }

        /* ===================================================== tunnel d'inscription */

        .auth-modal-ov {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: rgba(15, 23, 42, 0.5);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .22s ease;
            overflow-y: auto;
        }
        .auth-modal-ov.show { opacity: 1; pointer-events: auto; }

        .auth-m {
            position: relative;
            width: 100%;
            max-width: 500px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 28px;
            box-shadow: var(--shadow-lg);
            padding: 34px 30px 30px;
            max-height: 92vh;
            overflow-y: auto;
            transform: translateY(14px) scale(0.98);
            transition: transform .28s var(--ease);
        }
        .auth-modal-ov.show .auth-m { transform: none; }

        .auth-cl {
            position: absolute;
            top: 18px; right: 18px;
            width: 34px; height: 34px;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: #fff;
            color: var(--muted);
            display: flex; align-items: center; justify-content: center;
            transition: border-color .15s ease, color .15s ease, transform .15s ease;
        }
        .auth-cl:hover { border-color: #cbd5e1; color: var(--ink); transform: rotate(90deg); }
        .auth-cl svg { width: 16px; height: 16px; }

        /* Inscription : l'en-tête (titre + fermeture) reste collé en haut de la fenêtre.
           Le bouton Fermer était posé en absolu dans la carte qui défile : dès que le gérant
           descendait dans le formulaire, il n'avait plus aucun moyen visible de refermer.
           Les marges négatives annulent le rembourrage de la carte, pour que le bandeau
           occupe toute sa largeur et masque le contenu qui passe dessous. */
        .auth-head {
            position: sticky;
            top: 0;
            z-index: 11;
            background: #fff;
            margin: -34px -30px 0;
            padding: 34px 30px 20px;
            border-radius: 28px 28px 0 0;
        }

        /* Pas de barre de défilement dans la fenêtre d'inscription : le contenu glisse,
           la barre reste masquée (Firefox, Edge/IE, moteurs WebKit/Blink). */
        #signupModal,
        #signupModal .auth-m {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #signupModal::-webkit-scrollbar,
        #signupModal .auth-m::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        .auth-view { display: none; }
        .auth-view.active { display: block; }

        /* ===================================================== illustrations & emplacements photo */

        .illu { width: 100%; height: auto; display: block; }
        .illu-sm { max-width: 216px; }
        .illu-md { max-width: 280px; }

        /* Emplacement à remplacer par une vraie photo : visible mais propre tant qu'il est vide. */
        .img-slot {
            position: relative;
            border-radius: 24px;
            background:
                repeating-linear-gradient(135deg, var(--soft) 0 12px, #fff 12px 24px);
            border: 1.5px dashed #cbd5e1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-align: center;
            padding: 24px;
            color: var(--faint);
            overflow: hidden;
        }
        .img-slot svg { width: 30px; height: 30px; opacity: .55; }
        .img-slot b { font-size: 13px; font-weight: 600; color: var(--muted); }
        .img-slot span { font-size: 11.5px; max-width: 220px; line-height: 1.45; }
        .img-slot.filled { border: 0; padding: 0; background: none; }
        .img-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

        /* ===================================================== étapes */

        .steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
            position: relative;
        }
        @media (max-width: 960px) { .steps { grid-template-columns: 1fr; } }

        .step {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: 30px 28px 32px;
            position: relative;
            overflow: hidden;
            transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
        }
        .step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
        .step-num {
            position: absolute;
            top: 18px; right: 22px;
            font-family: var(--font-d);
            font-size: 62px;
            font-weight: 800;
            line-height: 1;
            color: var(--line-soft);
            letter-spacing: -0.05em;
        }
        .step-illu { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
        .step h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 9px; }
        .step p { font-size: 15px; color: var(--muted); line-height: 1.65; }
        .step-time {
            display: inline-flex; align-items: center; gap: 7px;
            margin-top: 16px; font-size: 12.5px; font-weight: 600;
            color: var(--violet); background: var(--violet-soft);
            padding: 5px 12px; border-radius: 9999px;
        }

        /* ===================================================== défilement horizontal */

        .hscroll-sec { padding: 96px 0 0; }
        .hscroll-sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        @media (max-width: 900px) { .hscroll-sticky { height: auto; display: block; } }
        .hscroll-viewport { overflow: hidden; padding: 34px 0 96px; }
        .hscroll-track {
            display: flex;
            gap: 20px;
            width: max-content;
            padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
            will-change: transform;
            transition: transform .12s linear;
        }
        .hcard {
            width: 320px;
            flex: 0 0 320px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 26px;
            padding: 26px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 330px;
        }
        .hcard-ico {
            width: 46px; height: 46px; border-radius: 15px;
            display: flex; align-items: center; justify-content: center;
        }
        .hcard-ico svg { width: 23px; height: 23px; }
        .hcard h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
        .hcard p { font-size: 14.5px; color: var(--muted); line-height: 1.6; flex: 1 1 auto; }
        .hcard-tag {
            align-self: flex-start;
            font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
            padding: 5px 11px; border-radius: 9999px;
        }
        .tone-violet { background: var(--violet-soft); color: var(--violet); }
        .tone-mint { background: var(--green-soft); color: var(--green-dark); }
        .tone-amber { background: var(--amber-soft); color: var(--amber-ink); }
        .tone-coral { background: var(--coral-soft); color: #be123c; }
        .tone-ink { background: var(--line-soft); color: var(--ink); }

        .hscroll-progress {
            height: 4px;
            border-radius: 9999px;
            background: var(--line);
            max-width: 220px;
            margin: 0 auto;
            overflow: hidden;
        }
        .hscroll-progress i { display: block; height: 100%; width: 12%; border-radius: inherit; background: var(--violet); transition: width .12s linear; }

        @media (max-width: 900px) {
            .hscroll-sec { padding: 64px 0 0; }
            .hscroll-sticky { position: static; }
            .hscroll-viewport { overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 0 40px; }
            .hscroll-track { transform: none !important; padding-left: 18px; padding-right: 18px; }
            .hcard { scroll-snap-align: center; width: 268px; flex-basis: 268px; }
            .hscroll-progress { display: none; }
        }

        /* ===================================================== galerie de vitrines */

        .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
        @media (max-width: 900px) { .gallery { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
        .gallery-item { margin: 0; }
        .gallery-item .img-slot {
            aspect-ratio: 16 / 10;
            transition: transform .3s var(--ease), box-shadow .3s ease;
        }
        .gallery-item:hover .img-slot { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
        .gallery-item figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }

        /* ===================================================== vitrines réelles (iframe) */

        .site-frame {
            position: relative;
            border: 1px solid var(--line);
            border-radius: 20px;
            overflow: hidden;
            background: #fff;
            box-shadow: var(--shadow-md);
            transition: transform .3s var(--ease), box-shadow .3s ease;
        }
        .gallery-item:hover .site-frame { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

        .site-frame-bar {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 12px;
            background: var(--soft);
            border-bottom: 1px solid var(--line);
        }
        .site-frame-bar i {
            width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; display: block;
        }
        .site-frame-bar span {
            font-size: 10.5px; color: var(--muted);
            font-family: ui-monospace, Menlo, monospace;
            background: #fff; border: 1px solid var(--line); border-radius: 6px;
            padding: 2px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        .site-frame-body {
            position: relative;
            aspect-ratio: 16 / 11;
            overflow: hidden;
            background: var(--soft);
        }
        .site-frame-body iframe {
            position: absolute;
            top: 0; left: 0;
            width: 1280px;
            height: 1000px;
            border: 0;
            transform-origin: top left;
            pointer-events: none;
        }
        .site-frame-link {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 18px;
            background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.5) 100%);
            opacity: 0;
            transition: opacity .25s ease;
        }
        .site-frame-link span {
            background: #fff; color: var(--ink);
            font-size: 13px; font-weight: 600;
            padding: 9px 18px; border-radius: 9999px;
            box-shadow: var(--shadow-md);
        }
        .gallery-item:hover .site-frame-link { opacity: 1; }

        /* ===================================================== témoignage */

        .testi {
            display: grid;
            grid-template-columns: 340px minmax(0, 1fr);
            gap: 44px;
            align-items: center;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 36px;
            padding: 44px;
        }
        @media (max-width: 900px) { .testi { grid-template-columns: 1fr; gap: 26px; padding: 26px; border-radius: 28px; } }

        .testi-photo {
            position: relative;
            aspect-ratio: 4 / 5;
            min-height: 260px;
            margin: 0;
            border-radius: 24px;
            overflow: hidden;
            background: var(--violet-soft);
            box-shadow: 0 30px 60px -34px rgba(15, 23, 42, 0.5);
        }
        .testi-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Cadrage calé à droite : c'est là que se trouve le barbier sur la photo. */
            object-position: right center;
            display: block;
        }
        .testi-photo .img-slot { position: absolute; inset: 0; display: none; border-radius: 24px; }
        .testi-photo.vide { background: transparent; box-shadow: none; }
        .testi-photo.vide .img-slot { display: flex; }
        .testi-photo .img-slot code {
            font-family: ui-monospace, Menlo, monospace;
            font-size: 11px; background: #fff; border: 1px solid var(--line);
            border-radius: 5px; padding: 1px 5px;
        }
        .testi-quote {
            font-family: var(--font-d);
            font-size: clamp(20px, 2.4vw, 27px);
            font-weight: 500;
            line-height: 1.45;
            letter-spacing: -0.02em;
            color: var(--ink);
        }
        .testi-quote span { color: var(--violet); }
        .testi-author { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
        .testi-author-av {
            width: 46px; height: 46px; border-radius: 50%;
            background: linear-gradient(135deg, #0f172a, #4c1d95);
            color: #fff; font-weight: 700; font-size: 15px;
            display: flex; align-items: center; justify-content: center;
        }
        .testi-author strong { display: block; font-size: 15px; }
        .testi-author span { font-size: 13.5px; color: var(--muted); }
        .testi-stats { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
        .testi-stat strong {
            display: block; font-family: var(--font-d); font-size: 30px; font-weight: 700;
            letter-spacing: -0.03em; color: var(--ink);
        }
        .testi-stat span { font-size: 13px; color: var(--muted); }

        /* ===================================================== pour qui */

        .who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
        @media (max-width: 900px) { .who-grid { grid-template-columns: 1fr; } }
        .who-card {
            border-radius: 28px;
            padding: 30px 28px;
            border: 1px solid var(--line);
            background: #fff;
            transition: transform .3s var(--ease), box-shadow .3s ease;
        }
        .who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
        .who-illu { height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
        .who-card h3 { font-size: 18px; font-weight: 650; margin-bottom: 8px; letter-spacing: -0.02em; }
        .who-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
        .who-price { margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--violet); }

        /* ===================================================== compteurs animés */

        .count-up { font-variant-numeric: tabular-nums; }

        /* ===================================================== indice de défilement */

        .scroll-hint {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            margin-top: 34px; font-size: 12.5px; color: var(--faint);
        }
        .scroll-hint i {
            width: 22px; height: 34px; border-radius: 9999px;
            border: 1.5px solid var(--line); position: relative;
        }
        .scroll-hint i::after {
            content: '';
            position: absolute;
            left: 50%; top: 7px; transform: translateX(-50%);
            width: 4px; height: 7px; border-radius: 9999px; background: var(--faint);
            animation: cyb-scrolldot 1.8s ease-in-out infinite;
        }
        @keyframes cyb-scrolldot {
            0% { opacity: 0; transform: translate(-50%, -4px); }
            40% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, 12px); }
        }

        /* ===================================================== téléphone : fenêtres en plein écran
           Sur un petit écran, une fenêtre flottante coupée par le clavier est pénible : la
           connexion et l'inscription prennent tout l'écran, et les champs font 16 px pour que
           le navigateur n'ait aucune raison de zoomer à la mise au point. */

        @media (max-width: 768px) {
            .auth-modal-ov { padding: 0; align-items: stretch; }
            .auth-m {
                max-width: none;
                width: 100%;
                min-height: 100%;
                max-height: none;
                border: 0;
                border-radius: 0;
                padding: 64px 22px 40px;
                transform: translateY(18px);
            }
            .auth-modal-ov.show .auth-m { transform: none; }
            .auth-cl { top: 14px; right: 14px; width: 40px; height: 40px; }
            .auth-head {
                margin: -64px -22px 0;
                padding: 64px 22px 20px;
                border-radius: 0;
            }

            /* Les champs : 16 px minimum, sinon iOS zoome tout seul à la mise au point. */
            .auth-inp,
            .auth-m input,
            .auth-m select,
            .auth-m textarea,
            .login-dd input,
            .login-dd select { font-size: 16px; }
            .auth-btn, .auth-btn-secondary, .auth-g-btn { font-size: 15.5px; }

            /* La fenêtre de connexion du composant partagé suit la même règle. */
            body.presentation-page .login-dd { padding: 0 !important; }
            body.presentation-page .login-dd-card {
                width: 100% !important;
                max-width: none !important;
                height: 100% !important;
                max-height: none !important;
                border-radius: 0 !important;
                border: 0 !important;
                padding: 64px 22px 40px !important;
                display: flex !important;
                flex-direction: column;
                justify-content: center;
            }
            body.presentation-page .login-dd-close {
                position: absolute !important;
                top: 14px; right: 14px;
                width: 40px !important; height: 40px !important;
                font-size: 15px !important;
            }
        }

        /* ===================================================== surcharges des composants partagés */

        body.presentation-page .login-dd-card,
        body.presentation-page .login-dd-card * { color: var(--ink); }
        body.presentation-page .login-dd-card a { color: var(--violet) !important; }
        body.presentation-page .login-dd-close {
            background: var(--line-soft) !important;
            border: 1px solid var(--line) !important;
            color: var(--muted) !important;
        }

        @media (max-width: 768px) {
            body.presentation-page .login-dd { background: rgba(15, 23, 42, 0.5) !important; }
            body.presentation-page .login-dd-card {
                background: #fff !important;
                border: 1px solid var(--line) !important;
                box-shadow: var(--shadow-lg) !important;
            }
            body.presentation-page .mob-menu a.mob-login-btn {
                background: var(--violet-soft);
                color: var(--violet);
                border: 1px solid rgba(124, 58, 237, 0.2);
            }
            body.presentation-page #mobLoggedIn { border-top: 1px solid var(--line) !important; }
            body.presentation-page #mobLoggedIn a,
            body.presentation-page #mobLoggedIn span { color: var(--ink) !important; }
            body.presentation-page #mobLoggedIn a[onclick*="logoutUser"],
            body.presentation-page #mobLoggedIn a[onclick*="logoutUser"] span { color: var(--red) !important; }
            body.presentation-page #mobUserAvatar { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; }
        }

        body.presentation-page .mob-menu a.mob-menu-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: var(--ink); color: #fff;
            border-radius: 9999px; padding: 14px 24px;
            margin-top: 8px; border-bottom: 0; font-weight: 600;
        }

        /* Le bandeau de consentement porte désormais ses propres classes (.cyb-ck-*),
           écrites pour le fond blanc : le rattrapage en !important qui vivait ici n'a plus
           d'objet. */

        /* `body.presentation-page` marque une page du site public — accueil, pages légales
           et guides : c'est elle qui repeint en clair les éléments partagés hérités du
           thème sombre. Toute nouvelle page du site doit la porter.
           logo partagé : l'aplat noir rend le tracé net sur fond blanc */
        body.presentation-page .hdr .logo img,
        body.presentation-page .ft-logo img { filter: brightness(0); }                        /* Cartes de formule du tunnel d'inscription — thème blanc. */
                        .auth-back-btn {
                            position: absolute;
                            left: 0;
                            top: 2px;
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            border: 1px solid #e6e8ec;
                            background: #fff;
                            color: #64748b;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: border-color .15s ease, color .15s ease;
                        }

                        .auth-back-btn:hover { border-color: #cbd5e1; color: #0f172a; }

                        #modalPmList {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            max-height: 46vh;
                            overflow-y: auto;
                            padding: 4px 4px 4px 0;
                            margin-bottom: 18px;
                        }

                        #modalPmList::-webkit-scrollbar { width: 6px; }
                        #modalPmList::-webkit-scrollbar-track { background: transparent; }
                        #modalPmList::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 9999px; }

                        .pm-card {
                            position: relative;
                            border: 1px solid #e6e8ec;
                            border-radius: 16px;
                            background: #fff;
                            padding: 16px;
                            cursor: pointer;
                            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
                        }

                        .pm-card:hover { border-color: #cbd5e1; transform: translateY(-1px); }

                        .pm-card.on {
                            border-color: #0f172a;
                            box-shadow: 0 0 0 1px #0f172a, 0 12px 28px -18px rgba(15, 23, 42, 0.35);
                        }

                        .pm-card.popular.on { border-color: #0f172a; }

                        .pm-badge {
                            position: absolute;
                            top: -10px;
                            left: 16px;
                            display: inline-flex;
                            align-items: center;
                            gap: 6px;
                            background: #0f172a;
                            color: #fff;
                            font-size: 10px;
                            font-weight: 700;
                            letter-spacing: 0.06em;
                            text-transform: uppercase;
                            padding: 4px 10px;
                            border-radius: 9999px;
                            white-space: nowrap;
                        }

                        .pm-badge-dot {
                            width: 5px;
                            height: 5px;
                            border-radius: 50%;
                            background: #34d399;
                        }

                        .pm-card-body {
                            display: flex;
                            align-items: center;
                            gap: 14px;
                        }

                        .pm-icon-wrap {
                            width: 40px;
                            height: 40px;
                            flex-shrink: 0;
                            border-radius: 12px;
                            border: 1px solid #e6e8ec;
                            background: #f8fafc;
                            color: #64748b;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: background .18s ease, color .18s ease, border-color .18s ease;
                        }

                        .pm-card.on .pm-icon-wrap {
                            background: #ecfdf5;
                            border-color: rgba(16, 185, 129, 0.35);
                            color: #047857;
                        }

                        .pm-icon-wrap svg { width: 20px; height: 20px; }

                        .pm-content { flex: 1 1 auto; min-width: 0; }

                        .pm-title {
                            font-size: 15px;
                            font-weight: 700;
                            color: #0f172a;
                            letter-spacing: -0.015em;
                        }

                        .pm-desc {
                            font-size: 12.5px;
                            color: #64748b;
                            line-height: 1.5;
                            margin-top: 3px;
                        }

                        .pm-action-area {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            flex-shrink: 0;
                        }

                        .pm-price-block { text-align: right; }

                        .pm-price-val {
                            display: block;
                            font-size: 20px;
                            font-weight: 800;
                            letter-spacing: -0.03em;
                            color: #0f172a;
                        }

                        .pm-price-per { font-size: 11px; color: #94a3b8; }

                        .pm-select-indicator {
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                            border: 1.5px solid #e2e8f0;
                            background: #fff;
                            color: transparent;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: border-color .18s ease, background .18s ease, color .18s ease;
                        }

                        .pm-card:hover .pm-select-indicator { border-color: #cbd5e1; }

                        .pm-select-indicator .pm-check-icon { width: 14px; height: 14px; }

                        .pm-card.on .pm-select-indicator,
                        .pm-select-indicator.on {
                            background: #0f172a;
                            border-color: #0f172a;
                            color: #fff;
                        }

                        @media (max-width: 540px) {
                            .pm-card { padding: 14px; }
                            .pm-card-body { gap: 10px; }
                            .pm-icon-wrap { width: 34px; height: 34px; }
                            .pm-title { font-size: 14px; }
                            .pm-desc { font-size: 11.5px; }
                            .pm-price-val { font-size: 17px; }
                        }
/* ==========================================================================
   PAGES SECONDAIRES — mentions légales, CGV/CGU, RGPD, cookies, guides
   Même grammaire que la page d'accueil : fond blanc, encres ardoise, violet
   de marque. Ces pages partagent un seul gabarit : .legal-wrapper.
   ========================================================================== */

.page-lede {
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(1100px 380px at 12% -40%, rgba(124, 58, 237, 0.07), transparent 65%),
        var(--soft);
    padding: 52px 0 44px;
}

.page-lede .container { max-width: 1180px; }

.page-fil {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--faint);
    margin-bottom: 18px;
}

.page-fil a { color: var(--muted); transition: color .15s ease; }
.page-fil a:hover { color: var(--violet); }
.page-fil span { color: var(--faint); }

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 16px;
}

.page-lede h1 {
    font-family: var(--font-d);
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: var(--ink);
    max-width: 22ch;
}

.page-lede .page-sub {
    margin-top: 14px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 68ch;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--muted);
}

.page-meta strong { color: var(--ink-2); font-weight: 600; }

/* — La grille : navigation collante à gauche, texte à droite — */
.legal-wrapper {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr);
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}

.legal-sidebar { position: sticky; top: 88px; align-self: start; }

.legal-sidebar h3 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 14px;
}

.legal-sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.legal-sidebar a {
    display: block;
    padding: 9px 13px;
    border-radius: 9px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.legal-sidebar a:hover { background: var(--line-soft); color: var(--ink); }

.legal-sidebar a.active {
    background: var(--violet-soft);
    border-left-color: var(--violet);
    color: var(--violet);
    font-weight: 600;
}

.legal-sidebar .legal-nav-sep {
    height: 1px;
    background: var(--line);
    margin: 20px 0 16px;
}

/* — Le texte. Mesure courte : ces pages se lisent, elles ne se survolent pas. — */
.legal-content { max-width: 74ch; font-size: 16px; line-height: 1.75; color: var(--ink-2); }

.legal-content > h1 {
    font-family: var(--font-d);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 18px;
}

.legal-content h2 {
    font-family: var(--font-d);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--ink);
    margin: 48px 0 16px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 88px;
}

.legal-content > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }

.legal-content h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 30px 0 10px;
    scroll-margin-top: 88px;
}

.legal-content p { margin-bottom: 16px; }
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content em { color: var(--ink-2); }

.legal-content a {
    color: var(--violet);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(124, 58, 237, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease;
}

.legal-content a:hover { text-decoration-color: var(--violet); }

.legal-content ul, .legal-content ol { margin: 0 0 18px 2px; padding-left: 20px; }
.legal-content ul { list-style: none; padding-left: 0; }

.legal-content ul > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 9px;
}

.legal-content ul > li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--violet);
    opacity: .55;
}

.legal-content ol > li { margin-bottom: 9px; padding-left: 4px; }
.legal-content ol > li::marker { color: var(--violet); font-weight: 600; }

/* Encadré d'avertissement ou de préambule. */
.legal-note {
    border: 1px solid var(--line);
    border-left: 3px solid var(--violet);
    border-radius: 12px;
    background: var(--violet-soft);
    padding: 18px 22px;
    margin: 24px 0 32px;
}

.legal-note p:last-child { margin-bottom: 0; }

.legal-note.is-warn { border-left-color: var(--amber); background: var(--amber-soft); }
.legal-note.is-warn strong { color: var(--amber-ink); }

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 28px;
    font-size: 14.5px;
}

.legal-content th, .legal-content td {
    border: 1px solid var(--line);
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
}

.legal-content th {
    background: var(--soft);
    font-weight: 700;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.legal-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.5px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--ink);
}

/* Sommaire d'un guide, injecté par seoPlateformeService. */
.guide-sommaire {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
    margin-bottom: 40px;
}

.guide-sommaire h2 {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    font-size: 12px;
    font-family: var(--font-b);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 700;
}

.guide-sommaire ol { margin: 0; padding-left: 18px; }
.guide-sommaire li { margin-bottom: 7px; font-size: 14.5px; }

/* Appel à l'action de fin de page. */
.page-cta {
    margin-top: 56px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        radial-gradient(700px 240px at 100% 0%, rgba(124, 58, 237, 0.08), transparent 60%),
        var(--soft);
    padding: 32px 34px;
}

.page-cta h2 {
    border: 0;
    padding: 0;
    margin: 0 0 8px;
    font-size: 21px;
}

.page-cta p { color: var(--muted); margin-bottom: 20px; max-width: 54ch; }
.page-cta .page-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 960px) {
    .page-lede { padding: 36px 0 32px; }
    .legal-wrapper { grid-template-columns: 1fr; gap: 32px; padding: 36px 20px 72px; }
    .legal-sidebar {
        position: static;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        padding: 16px 14px;
    }
    .legal-content { max-width: none; }
}

/* ==========================================================================
   CONSENTEMENT AUX COOKIES — bandeau, préférences, confirmation
   Ces éléments s'affichent sur toutes les pages du site : ils suivent la même
   DA. Styles ici, pas en inline, pour qu'un changement de thème les emporte.
   ========================================================================== */

.cyb-ck-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(28px);
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-family: var(--font-b); font-size: 13.5px; font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 1000000; opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cyb-ck-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.cyb-ck-toast svg { width: 15px; height: 15px; color: #a78bfa; flex-shrink: 0; }

.cyb-ck-ov {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: center; justify-content: center; padding: 18px;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .25s ease;
}
.cyb-ck-ov.is-open { opacity: 1; }

.cyb-ck-card {
    width: 100%; max-width: 540px;
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    padding: 26px; box-shadow: var(--shadow-lg);
    font-family: var(--font-b); color: var(--ink);
    transform: scale(.97); transition: transform .25s var(--ease);
    max-height: calc(100vh - 36px); overflow-y: auto;
}
.cyb-ck-ov.is-open .cyb-ck-card { transform: scale(1); }

.cyb-ck-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 20px; }
.cyb-ck-mark {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: var(--violet-soft); border: 1px solid rgba(124, 58, 237, 0.2);
    display: flex; align-items: center; justify-content: center; color: var(--violet);
}
.cyb-ck-mark svg { width: 20px; height: 20px; }
.cyb-ck-head h3 { margin: 0; font-family: var(--font-d); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.cyb-ck-head .cyb-ck-sur { font-size: 12.5px; color: var(--violet); font-weight: 600; margin-top: 2px; }
.cyb-ck-x {
    margin-left: auto; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.cyb-ck-x:hover { border-color: var(--violet); color: var(--violet); }
.cyb-ck-x svg { width: 14px; height: 14px; }

.cyb-ck-intro { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-bottom: 18px; }
.cyb-ck-intro a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }

.cyb-ck-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--soft);
    padding: 14px 16px; margin-bottom: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.cyb-ck-opt.is-clickable { cursor: pointer; }
.cyb-ck-opt.is-clickable:hover { border-color: rgba(124, 58, 237, 0.35); background: #fff; }
.cyb-ck-opt h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cyb-ck-opt p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.cyb-ck-sw {
    width: 44px; height: 25px; border-radius: 999px; flex-shrink: 0;
    background: var(--line); display: flex; align-items: center; padding: 3px;
    transition: background .22s var(--ease);
}
.cyb-ck-sw > span {
    width: 19px; height: 19px; border-radius: 50%; background: #fff;
    box-shadow: var(--shadow-sm); transform: translateX(0);
    transition: transform .22s var(--ease);
}
.cyb-ck-sw.is-on { background: var(--violet); }
.cyb-ck-sw.is-on > span { transform: translateX(19px); }
.cyb-ck-sw.is-locked { opacity: .55; cursor: not-allowed; }

.cyb-ck-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px;
}
.cyb-ck-foot .cyb-ck-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cyb-ck-btn {
    font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 10px 16px; border-radius: 11px;
    border: 1px solid var(--line); background: #fff; color: var(--ink-2);
    transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.cyb-ck-btn:hover { border-color: var(--violet); color: var(--violet); }
.cyb-ck-btn.is-ghost { border-color: transparent; background: transparent; color: var(--muted); text-decoration: underline; }
.cyb-ck-btn.is-ghost:hover { color: var(--violet); }
.cyb-ck-btn.is-primary {
    border-color: var(--violet); background: var(--violet); color: #fff; font-weight: 700;
    box-shadow: var(--shadow-md);
}
.cyb-ck-btn.is-primary:hover { background: var(--neon-bright); border-color: var(--neon-bright); color: #fff; transform: translateY(-1px); }

.cyb-ck-banner {
    position: fixed; bottom: 24px; left: 24px; right: 24px;
    max-width: 520px; margin: 0 auto 0 0; z-index: 99999;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 20px 22px; box-shadow: var(--shadow-lg);
    font-family: var(--font-b); color: var(--ink);
    opacity: 0; transform: translateY(22px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cyb-ck-banner.is-open { opacity: 1; transform: translateY(0); }
.cyb-ck-banner .cyb-ck-head { margin-bottom: 14px; }
.cyb-ck-banner h3 { font-family: var(--font-b); font-size: 14.5px; font-weight: 700; }
.cyb-ck-banner p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.cyb-ck-banner p a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.cyb-ck-banner .cyb-ck-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
    .cyb-ck-banner { left: 14px; right: 14px; bottom: 14px; padding: 18px; }
    .cyb-ck-foot { flex-direction: column; align-items: stretch; }
    .cyb-ck-foot .cyb-ck-right { justify-content: stretch; }
    .cyb-ck-foot .cyb-ck-btn { flex: 1; }
}

/* — Éléments propres aux guides, produits par seoPlateformeService — */

.legal-content .guide-lead {
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-2);
    border-left: 3px solid var(--violet);
    padding-left: 18px;
    margin: 0 0 32px;
}

.legal-content .guide-faq { margin-top: 8px; }

.legal-content .guide-faq h3 {
    margin-top: 26px;
    color: var(--ink);
}

.legal-content .guide-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 12px;
    background: var(--violet);
    border: 1px solid var(--violet);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: background .15s ease, transform .15s ease;
}

.legal-content .guide-cta:hover { background: var(--neon-bright); color: #fff; transform: translateY(-1px); }
.legal-content p:has(> .guide-cta) { margin: 36px 0; }

.legal-content .guide-maj {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--faint);
}

.legal-content .guide-table th:not(:first-child),
.legal-content .guide-table td:not(:first-child) { text-align: center; }

.legal-content .guide-note {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    border-left: 2px solid var(--line);
    padding-left: 14px;
    margin: -8px 0 28px;
}

/* Tableau large : il défile seul plutôt que de pousser la page. */
.legal-content .legal-scroll { overflow-x: auto; margin: 20px 0; }
.legal-content .legal-scroll table { margin: 0; }

/* Encadré qui porte une action (page cookies). */
.legal-note-action {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.legal-note-action h3 { margin: 0 0 3px; font-size: 15.5px; }
.legal-note-action p { margin: 0; font-size: 13.5px; color: var(--muted); }