/**

 * Site vitrine Stokko — Inde Imaginarium

 */



.business-app-cta {

    display: inline-flex;

}



.business-hero-banner {

    margin: 0;

    width: 100%;

}



.business-hero-banner-frame {

    position: relative;

    border-radius: 1.25rem;

    overflow: hidden;

    border: 1px solid #d6eaf8;

    background: linear-gradient(145deg, #ebf5fb 0%, #ffffff 100%);

    box-shadow:

        0 4px 6px -1px rgb(52 152 219 / 0.08),

        0 20px 40px -12px rgb(15 23 42 / 0.12);

}



.business-hero-banner-frame::after {

    content: '';

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);

}



.business-hero-banner-img {

    display: block;

    width: 100%;

    max-width: 22rem;

    height: auto;

    margin: 0 auto;

}



@media (min-width: 1024px) {

    .business-hero-banner-frame {

        border-radius: 1.5rem;

    }

    .business-hero-banner-img {

        max-width: 100%;

    }

}



/* Icônes fonctionnalités — styles explicites (fiables sur tous les navigateurs) */

.business-feature-icon {

    width: 2.75rem;

    height: 2.75rem;

    border-radius: 0.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #ebf5fb;

    color: #2980b9;

}



.business-feature-icon svg {

    width: 1.375rem;

    height: 1.375rem;

}



.business-feature-icon--accent {

    background: rgb(243 156 18 / 0.12);

    color: #f39c12;

}



.business-feature-icon--fresh {

    background: rgb(119 179 0 / 0.12);

    color: #77b300;

}



/* Bouton CTA final — contraste garanti */

.business-cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 2rem;

    border-radius: 0.75rem;

    background: #ffffff;

    color: #2471a3;

    font-weight: 700;

    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);

    transition: background 0.15s ease;

}



.business-cta-btn:hover {

    background: #ebf5fb;

}



/* Pied de page — liens en grille sur mobile */

.business-footer-links {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 0.5rem 1.25rem;

}



.business-footer-links a {

    display: inline-block;

}



.business-footer-links a + a::before {

    content: none;

}



/* ─── Mobile (< 768px) ─── */

@media (max-width: 767px) {

    .business-section {

        padding-top: 2.5rem !important;

        padding-bottom: 2.5rem !important;

    }



    .business-hero-inner {

        padding-top: 1.75rem !important;

        padding-bottom: 1.75rem !important;

    }



    .business-hero-banner-img {

        max-width: 11rem;

    }



    .business-hero-banner-frame {

        padding: 0.875rem !important;

    }



    .business-hero-title {

        font-size: 1.625rem !important;

        line-height: 1.2 !important;

    }



    .business-hero-lead {

        font-size: 0.9375rem !important;

        margin-top: 1rem !important;

    }



    .business-section-heading {

        margin-bottom: 1.5rem !important;

    }



    .business-section-heading h2 {

        font-size: 1.375rem !important;

    }



    /* Cartes fonctionnalités — disposition horizontale compacte */

    .business-features-grid {

        gap: 0.625rem !important;

    }



    .business-feature-card {

        display: flex;

        flex-direction: row;

        align-items: flex-start;

        gap: 0.875rem;

        padding: 0.875rem 1rem !important;

        border-radius: 1rem !important;

    }



    .business-feature-card .business-feature-icon {

        margin-bottom: 0 !important;

    }



    .business-feature-card h3 {

        font-size: 0.9375rem;

    }



    .business-feature-card p {

        font-size: 0.8125rem;

        margin-top: 0.25rem !important;

        line-height: 1.45;

    }



    /* Étapes — cartes compactes */

    .business-steps {

        gap: 0.75rem !important;

    }



    .business-step {

        display: flex;

        gap: 0.875rem;

        align-items: flex-start;

        text-align: left !important;

        padding: 1rem;

        border-radius: 1rem;

        background: #fff;

        border: 1px solid #d6eaf8;

    }



    .business-step-num {

        flex-shrink: 0;

        margin-bottom: 0 !important;

    }



    .business-step h3 {

        font-size: 0.9375rem !important;

    }



    .business-step p {

        font-size: 0.8125rem;

    }



    /* Bloc produit */

    .business-product-card {

        padding: 1.25rem !important;

        margin-top: 1.5rem;

    }



    .business-product-card ul {

        gap: 0.625rem;

    }



    /* CTA section */

    .business-cta-section {

        padding-top: 2.5rem !important;

        padding-bottom: 2.5rem !important;

    }



    .business-cta-section h2 {

        font-size: 1.375rem !important;

    }



    .business-cta-btn {

        width: 100%;

        max-width: 20rem;

    }



    #business-app-url {

        font-size: 0.6875rem;

        opacity: 0.85;

    }



    /* Footer mobile */

    .business-footer {

        padding-top: 2rem !important;

        padding-bottom: 2rem !important;

    }



    .business-footer-links {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 0.5rem;

        width: 100%;

        max-width: 20rem;

        margin: 0 auto;

    }



    .business-footer-links a {

        display: block;

        padding: 0.625rem 0.5rem;

        text-align: center;

        font-size: 0.8125rem;

        border: 1px solid rgb(255 255 255 / 0.12);

        border-radius: 0.5rem;

        background: rgb(255 255 255 / 0.05);

    }



    .business-footer-links a:active {

        background: rgb(255 255 255 / 0.1);

    }



    .business-footer-copy {

        margin-top: 1.25rem;

        padding-top: 1.25rem;

        border-top: 1px solid rgb(255 255 255 / 0.1);

        text-align: center;

        width: 100%;

    }

}



@media (min-width: 768px) {

    .business-step {

        display: block;

        padding: 0;

        border: none;

        background: transparent;

    }



    .business-footer-links {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 1.5rem;

        max-width: none;

    }



    .business-footer-links a {

        border: none;

        background: none;

        padding: 0;

    }



    .business-footer-copy {

        margin-top: 0;

        padding-top: 0;

        border-top: none;

        width: auto;

    }

}