/* home.css — spécifique accueil */

.hero .wrap {
    padding: 92px 0 60px;
}

.hero-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    padding: 18px;
    backdrop-filter: blur(10px);
}

.hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.kpi {
    border-radius: 16px;
    padding: 14px;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.10);
}

    .kpi .v {
        font-weight: 900;
        font-size: 1.05rem;
    }

    .kpi .l {
        color: rgba(255,255,255,.70);
        font-size: .9rem;
    }

.trust-strip {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-top: 1px solid rgba(2,6,23,.06);
    border-bottom: 1px solid rgba(2,6,23,.06);
    padding: 20px 0;
}

/* ✅ Mobile: trust pills en scroll horizontal fluide */
.trust-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(2,6,23,.08);
    color: rgba(15,23,42,.82);
    font-weight: 800;
    font-size: .92rem;
}

.feature-card {
    height: 100%;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 12px 28px rgba(2,6,23,.06);
    transition: transform .15s ease, box-shadow .15s ease;
    overflow: hidden;
}

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(2,6,23,.10);
    }

.icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(116,81,56,.14);
    color: var(--moka-copper);
    border: 1px solid rgba(116,81,56,.28);
    font-weight: 900;
}

/* About card (home) */
.about-card {
    padding: 20px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(15,23,42,.10);
    background: linear-gradient(180deg,#fff,#f8fafc);
    box-shadow: 0 12px 28px rgba(2,6,23,.06);
}

.soft-bg {
    background: #f8fafc;
}

.cta {
    color: #fff;
    background: radial-gradient(1000px 420px at 20% 0%, rgba(116,81,56,.28), transparent 55%), linear-gradient(180deg, var(--moka-navy), var(--moka-navy-2));
    border-radius: calc(var(--radius-xl) + 6px);
    box-shadow: var(--shadow-soft);
    padding: 42px;
    border: 1px solid rgba(255,255,255,.12);
}

    .cta .cta-sub {
        color: rgba(255,255,255,.78);
    }

/* ✅ Desktop spacing */
.home main section {
    padding-top: 110px;
    padding-bottom: 110px;
}

/* Hero → première section (si besoin, mais ici main existe) */
.home header.hero + main section {
    padding-top: 140px;
}

/* ✅ Responsive: tablette */
@media (max-width: 992px) {
    .hero .wrap {
        padding: 72px 0 46px;
    }

    .hero-kpis {
        grid-template-columns: 1fr;
    }

    .home main section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .home header.hero + main section {
        padding-top: 96px;
    }

    .cta {
        padding: 28px;
    }
}

/* =========================
   MOBILE OPTIMISATION – HOME
   ========================= */
@media (max-width: 768px) {

    /* HERO */
    .hero .wrap {
        padding: 64px 0 36px;
    }

    .hero h1 {
        font-size: 2rem; /* plus compact */
        line-height: 1.15;
    }

    .hero p {
        font-size: 1rem;
        line-height: 1.55;
    }

    /* Boutons du hero */
    .hero .btn {
        width: 100%;
        justify-content: center;
    }

        .hero .btn + .btn {
            margin-top: 10px;
        }

    /* Carte KPI */
    .hero-card {
        padding: 14px;
    }

    .hero-kpis {
        gap: 10px;
    }

    .kpi {
        padding: 12px;
    }

        .kpi .v {
            font-size: 1rem;
        }

        .kpi .l {
            font-size: .85rem;
        }

    /* TRUST STRIP */
    .trust-strip {
        padding: 16px 0;
    }

    .trust-pill {
        font-size: .85rem;
        padding: .45rem .75rem;
    }

    /* SECTIONS */
    .home main section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .home header.hero + main section {
        padding-top: 88px;
    }

    /* TITRES DE SECTION */
    .section-title {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .section-lead {
        font-size: 1rem;
    }

    /* FEATURE CARDS (Ce que nous faisons) */
    .feature-card {
        box-shadow: 0 10px 22px rgba(2,6,23,.06);
    }

    /* CTA FINAL */
    .cta {
        padding: 28px;
        text-align: center;
    }

        .cta .btn {
            width: 100%;
        }
}