:root {

    --teksi-orange: #F0972F;

    --teksi-light: #fff8f3;

}



body {

    font-family: 'Poppins', sans-serif;

    background-color: white;

    padding-bottom: 160px;

}



.header-logo {

    height: 50px;

    width: auto;

}



.teksi-bg {

    background-color: var(--teksi-orange);

    color: white;

}



/* Conteneur principal des produits */

.products-container {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    gap: 15px;

    padding: 15px 10px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

}



.products-container::-webkit-scrollbar {

    display: none;

}



/* Carte produit */

.product-card {

    flex: 0 0 85%;

    max-width: 85%;

    scroll-snap-align: start;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 3px 10px rgba(0,0,0,0.1);

    background-color: white;

    display: flex;

    flex-direction: column;

    height: auto;

}



/* Conteneur d'image responsive */

.product-image-container {

    position: relative;

    width: 100%;

    padding-bottom: 80%; /* Ratio 4:5 */

    background-color: #f8f8f8;

    overflow: hidden;

}



.product-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 0px 15px;

    box-sizing: border-box;

}



/* Contenu texte */

.product-info {

    padding: 15px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.product-name {

    font-size: 1rem;

    margin-bottom: 8px;

    line-height: 1.3;

    font-weight: 500;

    flex-grow: 1;

}



.product-price {

    color: var(--teksi-orange);

    font-weight: 600;

    margin-bottom: 12px;

    font-size: 1.1rem;

}



/* Bouton */

.btn-teksi {

    background-color: var(--teksi-orange);

    color: white;

    font-weight: 500;

    padding: 10px;

    font-size: 0.95rem;

    border: none;

    border-radius: 5px;

    width: 100%;

    transition: background-color 0.3s;

}



.btn-teksi:hover {

    background-color: #e08a25;

}



/* Section promo */

.promo-slide {

    background-color: var(--teksi-light);

    border-radius: 10px;

    padding: 20px;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    height: 100%;

}



/* Badges de téléchargement */

.download-badge-container {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 15px;

    flex-wrap: wrap;

}



.download-badge {

    height: 50px;

    width: auto;

    max-width: 150px;

}



/* Footer */

.footer {

    position: fixed;

    bottom: 0;

    width: 100%;

    z-index: 1000;

    padding: 15px 0;

    background-color: var(--teksi-orange);

}



.social-icons {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 15px;

}



.social-icon {

    color: white;

    font-size: 20px;

}



/* Responsive pour tablettes */

@media (min-width: 768px) {

    .product-card {

        flex: 0 0 45%;

        max-width: 45%;

    }

    

    .products-container {

        flex-wrap: wrap;

        justify-content: center;

        overflow-x: visible;

    }

    

    body {

        padding-bottom: 140px;

    }

}



/* Responsive pour mobiles */

@media (max-width: 767px) {

    .header-logo {

        height: 40px;

    }

    

    .product-card {

        flex: 0 0 80%;

        max-width: 80%;

    }

    

    .product-image-container {

        padding-bottom: 90%;

    }

    

    .product-name {

        font-size: 0.95rem;

    }

    

    .product-price {

        font-size: 1rem;

    }

}



/* Très petits écrans */

@media (max-width: 400px) {

    .product-card {

        flex: 0 0 85%;

        max-width: 85%;

    }

    

    .product-image-container {

        padding-bottom: 100%;

    }

    

    .product-info {

        padding: 12px;

    }

    

    .btn-teksi {

        padding: 8px;

        font-size: 0.9rem;

    }

    

    .download-badge {

        max-width: 130px;

    }

}