/* ═══════════════════════════════════════════════════════
   COVOITURAGE FACILE — Styles globaux
   Palette inspirée NDF (verts naturels)
   ═══════════════════════════════════════════════════════ */

body {
    background-color: #f5faf7;
    font-family: 'Manrope', sans-serif;
    margin: 0;
    color: #1a2e23;
}

h1:focus {
    outline: none;
}

/* ─── Hero header en gradient vert (page d'accueil) ─── */
.cvf-hero {
    background: linear-gradient(135deg, #6b9b7f 0%, #5a8570 100%);
    padding: 3rem 2rem 5rem 2rem;
    margin: 0 -16px 0 -16px;
    position: relative;
    overflow: hidden;
    color: white;
    border-radius: 0 0 24px 24px;
}

    .cvf-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: 15%;
        width: 400px;
        height: 400px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
    }

    .cvf-hero::after {
        content: '';
        position: absolute;
        bottom: -30%;
        right: 8%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 50%;
    }

    .cvf-hero h1,
    .cvf-hero h2,
    .cvf-hero h3,
    .cvf-hero h4 {
        color: white;
        font-family: 'Crimson Pro', serif;
    }

    .cvf-hero p {
        color: rgba(255, 255, 255, 0.92);
    }

/* ─── Cartes qui chevauchent le hero (effet overlap) ─── */
.cvf-stats-overlap {
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

/* ─── Animations fade-in-up à l'apparition ─── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
}

.fade-in-up-1 { animation-delay: 0.05s; }
.fade-in-up-2 { animation-delay: 0.10s; }
.fade-in-up-3 { animation-delay: 0.15s; }
.fade-in-up-4 { animation-delay: 0.20s; }
.fade-in-up-5 { animation-delay: 0.25s; }
.fade-in-up-6 { animation-delay: 0.30s; }

/* ─── Hover sur cartes (effet relief) ─── */
.cvf-card {
    transition: all 0.3s ease;
}

    .cvf-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(107, 155, 127, 0.18) !important;
    }

/* ─── Bouton BuyMeACoffee : hover doré ─── */
.bmc-button {
    transition: all 0.2s ease;
}

    .bmc-button:hover {
        background-color: #FFE033 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 221, 0, 0.4);
    }

/* ─── Section secondaire (équivalents concrets) ─── */
.cvf-eco-card {
    background-color: #f0f9f4 !important;
    border: 1px solid rgba(107, 155, 127, 0.15);
    text-align: center;
}

/* ─── Footer ─── */
.cvf-footer {
    margin-top: 4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(107, 155, 127, 0.2);
    background-color: #f0f9f4;
}

/* ─── Erreurs Blazor ─── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Une erreur s'est produite."
    }