/* ═══════════════════════════════════════════════════════
   BASE — DM Sans · Villa Page Airbnb Style · Utlibri
   ═══════════════════════════════════════════════════════ */

/* ── Google Fonts — DM Sans ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
    /* Palette */
    --vp-bg:          #ffffff;
    --vp-white:       #FFFFFF;
    --vp-black:       #1A1A1A;
    --vp-gray:        #717171;
    --vp-border:      #DDDDDD;
    --vp-border-light:#EEEEEE;

    /* Typographie */
    --vp-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Espacement */
    --vp-gap:    2.5rem;
    --vp-radius: 8px;
    --vp-radius-sm: 4px;

    /* Ombres */
    --vp-shadow:    0 1px 6px rgba(0,0,0,0.12);
    --vp-shadow-md: 0 4px 24px rgba(0,0,0,0.10);
    --vp-shadow-lg: 0 8px 40px rgba(0,0,0,0.14);
}

/* ── Reset scoped .vp-page ────────────────────────────── */
.vp-page {
    font-family: var(--vp-font);
    font-size: 16px;
    color: var(--vp-black);
    background: var(--vp-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ── Typographic helpers ──────────────────────────────── */
.vp-heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vp-black);
    margin: 0 0 1.25rem;
    line-height: 1.2;
}

.vp-subheading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vp-black);
    margin: 0 0 0.5rem;
}

.vp-text {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--vp-gray);
    line-height: 1.7;
}

/* ── Séparateur ───────────────────────────────────────── */
.vp-divider {
    border: none;
    border-top: 1px solid var(--vp-border);
    margin: 2.5rem 0;
}

/* ── Bouton outline ───────────────────────────────────── */
.vp-btn-outline {
    background: transparent;
    border: 1px solid var(--vp-black);
    padding: 0.75rem 1.5rem;
    font-family: var(--vp-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vp-black);
    cursor: pointer;
    border-radius: var(--vp-radius);
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
    display: inline-block;
}

.vp-btn-outline:hover {
    background: var(--vp-black);
    color: var(--vp-white);
}

/* ── Bouton CTA plein ─────────────────────────────────── */
.vp-btn-cta {
    background: var(--vp-black);
    border: none;
    padding: 0.9rem 1.5rem;
    font-family: var(--vp-font);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--vp-white);
    cursor: pointer;
    border-radius: var(--vp-radius);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: opacity 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.vp-btn-cta:hover {
    opacity: 0.85;
}

/* ── Scroll reveal ────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }