/* ============================================
       STYLES HERO (hérité de hero.php)
       ============================================ */
    .hero {
        text-align: center;
        padding: 140px 0 60px 0;
        margin-top: 0;
    }

    .hero-tag {
        background: var(--bg-sub);
        padding: 6px 16px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-title);
        display: inline-block;
        margin-bottom: 24px;
        border: 1px solid var(--border);
    }

    .hero h1 {
        font-size: 64px;
        color: var(--text-titre);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.03em;
        max-width: 940px;
        margin: 0 auto 24px auto;
    }

    .hero h1 em {
        font-style: italic;
        color: var(--text-titre);
    }

    .hero h1 strong {
        font-weight: 800;
        color: var(--text-titre);
    }

    .hero h1 span.highlight {
        color: var(--text-titre);
    }

    .hero p {
        font-size: 19px;
        color: var(--text-muted);
        max-width: 760px;
        margin: 0 auto 0 auto;
        line-height: 1.6;
    }

    /* ============================================
       DARK MODE - Support (hérité de hero.php)
       ============================================ */
    [data-theme="dark"] .hero h1 {
        color: #ffffff;
    }

    [data-theme="dark"] .hero h1 em {
        color: var(--accent);
    }

    [data-theme="dark"] .hero h1 strong {
        color: var(--accent);
    }

    [data-theme="dark"] .hero h1 span.highlight {
        color: var(--accent);
    }

    [data-theme="dark"] .hero p {
        color: rgba(255, 255, 255, 0.7);
    }

    [data-theme="dark"] .hero-tag {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.8);
    }

    /* ============================================
       TAILLES DE TITRE (display-1 à display-6)
       ============================================ */
    .hero h1.display-1 {
        font-size: 80px;
    }

    .hero h1.display-2 {
        font-size: 72px;
    }

    .hero h1.display-3 {
        font-size: 64px;
    }

    .hero h1.display-4 {
        font-size: 56px;
    }

    .hero h1.display-5 {
        font-size: 48px;
    }

    .hero h1.display-6 {
        font-size: 40px;
    }

    /* ============================================
       RESPONSIVE (hérité de hero.php)
       ============================================ */
    @media (max-width: 968px) {
        .hero {
            padding: 120px 0 40px 0;
        }

        .hero h1 {
            font-size: 42px;
        }

        .hero h1.display-1 {
            font-size: 56px;
        }

        .hero h1.display-2 {
            font-size: 50px;
        }

        .hero h1.display-3 {
            font-size: 44px;
        }

        .hero h1.display-4 {
            font-size: 38px;
        }

        .hero h1.display-5 {
            font-size: 34px;
        }

        .hero h1.display-6 {
            font-size: 30px;
        }

        .hero p {
            font-size: 17px;
            max-width: 600px;
        }
    }

    @media (max-width: 600px) {
        .hero {
            padding: 100px 0 30px 0;
        }

        .hero h1 {
            font-size: 32px;
        }

        .hero h1.display-1 {
            font-size: 40px;
        }

        .hero h1.display-2 {
            font-size: 36px;
        }

        .hero h1.display-3 {
            font-size: 32px;
        }

        .hero h1.display-4 {
            font-size: 28px;
        }

        .hero h1.display-5 {
            font-size: 26px;
        }

        .hero h1.display-6 {
            font-size: 24px;
        }

        .hero p {
            font-size: 16px;
            max-width: 100%;
            padding: 0 4px;
        }
    }