:root {
    --brown: #6b3f2b;
    /* couleur principale marron */
    --brown-dark: #472618;
    --brown-light: #f7efe7;
}

/* Global */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background-color: #ffffff;
    color: #222;
}

.text-brown {
    color: var(--brown) !important;
}

.btn-brown {
    background-color: var(--brown);
    border-color: var(--brown);
}

.btn-brown:hover {
    background-color: var(--brown-dark);
    border-color: var(--brown-dark);
}

.btn-outline-brown {
    color: var(--brown);
    border: 1px solid var(--brown);
}

.btn-outline-brown:hover {
    background-color: var(--brown);
    color: #fff;
}

.bg-brown {
    background-color: var(--brown);
}

.bg-hero {
    background: linear-gradient(180deg, #fff 0%, var(--brown-light) 100%);
}

/* Navbar gradient (marron -> beige/blanc cassé) */
.navbar-gradient {
    /* dégradé inversé : clair (gauche) -> marron (droite) */
    background: linear-gradient(90deg, var(--brown-light) 0%, var(--brown) 100%);
}

.navbar-gradient .navbar-brand,
.navbar-gradient .nav-link,
.navbar-gradient .navbar-toggler {
    color: #fff;
    /* texte par défaut en clair pour contraste sur la partie marron */
}

/* Lorsqu'on est sur la partie claire du dégradé, mieux utiliser une teinte marron foncé */
@media (min-width: 0px) {
    .navbar-gradient .nav-link {
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    }
}

.navbar-gradient .nav-link:hover {
    color: var(--brown-dark);
}

/* Toggle icon visibility */
.navbar-gradient .navbar-toggler-icon {
    filter: invert(1) brightness(0.9);
}

.card-img-top {
    height: 220px;
    object-fit: cover;
}

/* .videoframe : style pour les vidéos intégrées */
.videoframe {
    width: 100%;
    max-height: 320px;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Small layout tweaks */
@media (max-width: 767px) {
    .card-img-top {
        height: 180px;
    }

    .videoframe {
        max-height: 200px;
    }
}

/* Footer text contrast */
footer.bg-brown {
    background-color: var(--brown);
}

/* Utility */
.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

/* Footer social icons */
.social-icons {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

/* smaller, square social buttons for footer */
.social-link {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    background: transparent;
    transition: background .15s, color .15s;
}

.social-link svg {
    width: 110px;
    height: 110px;
    color: #fff;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}


/* optional brand-specific tweaks */
.social-link.instagram svg {
    border-radius: 3px;
    width: 30px;
    height: 30px;
}

.social-link.tiktok svg {
    border-radius: 3px;
    width: 80px;
    height: 80px;
}



/* If icons are images (png/svg), make sure they are resized appropriately */
.social-icons img.social-link {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

/* Lightbox Modal Styles */
.product-image {
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.product-image:hover {
    transform: scale(1.05);
    filter: brightness(0.9);
}

#lightboxModal .modal-dialog {
    max-width: 800px;
}

#lightboxModal .modal-body {
    padding: 30px;
}

#lightboxImage {
    max-height: 80vh;
    object-fit: contain;
}