/* ========================================
   BIHELIA - Charte Graphique Personnalisée
   Couleurs élégantes et raffinées
   ======================================== */

:root {
    /* Couleurs principales Bihelia */
    --bihelia-primary: #C9A961;      /* Or élégant */
    --bihelia-secondary: #8B7355;    /* Marron clair */
    --bihelia-dark: #3D3D3D;         /* Gris foncé */
    --bihelia-light: #F5F1E8;        /* Beige clair */
    --bihelia-accent: #D4AF37;       /* Or brillant */
    --bihelia-white: #FFFFFF;
    --bihelia-black: #1A1A1A;
    
    /* Couleurs de texte */
    --text-primary: #3D3D3D;
    --text-secondary: #6B6B6B;
    --text-light: #999999;

    /* Polices */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

/* Global font */
body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

/* Top bar */
.header__topbar {
    background: #283519 !important;
    color: #FFFFFF !important;
}

.header__topbar a {
    color: #FFFFFF !important;
}

.header__topbar a:hover {
    color: var(--bihelia-accent) !important;
}

.header__topbar__left ul li {
    color: #FFFFFF !important;
}

.header__topbar__left svg {
    color: #FFFFFF !important;
}

.header__topbar__language {
    color: #FFFFFF !important;
}

/* Menu déroulant des langues - fond blanc, texte noir */
.header__topbar__language__inner {
    background: #FFFFFF !important;
}

.header__topbar__language__inner ul {
    background: #FFFFFF !important;
}

.header__topbar__language__inner ul li a {
    color: #000000 !important;
    background: #FFFFFF !important;
}

.header__topbar__language__inner ul li a:hover {
    color: #FFFFFF !important;
    background: #D4AF37 !important;
}

.header__topbar__language__inner ul li.active a {
    color: #FFFFFF !important;
    background: #283519 !important;
}

.header__topbar__social__icon ul li a {
    color: #FFFFFF !important;
}

.header__topbar__social__icon ul li a:hover {
    color: var(--bihelia-accent) !important;
}

/* Header principal */
.headerarea {
    background: var(--bihelia-white);
    border-bottom: 1px solid var(--bihelia-light);
}

/* Menu navigation */
.headerarea__main__menu nav > ul > li > a {
    color: var(--bihelia-dark);
    font-weight: 500;
    font-size: 13px;
    padding: 10px 8px;
}

/* Flèche dropdown dans le navbar - positionnée après le texte */
.headerarea__has__dropdown::before {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: 5px;
    font-size: 9px;
    vertical-align: middle;
}

.headerarea__main__menu nav > ul > li > a:hover {
    color: var(--bihelia-primary);
}

/* Labels dans le menu */
.header__label {
    background: var(--bihelia-primary);
    color: var(--bihelia-white);
}

.header__label.hot__color {
    background: var(--bihelia-accent);
}

/* Mega menu */
.headerarea__megamenu {
    border-top: 3px solid var(--bihelia-primary);
}

.menu__title {
    color: var(--bihelia-dark);
    font-weight: 600;
}

.menu__title:hover {
    color: var(--bihelia-primary);
}

/* ========================================
   BOUTONS
   ======================================== */

.default__button {
    background: var(--bihelia-primary);
    color: var(--bihelia-white);
    border: 2px solid var(--bihelia-primary);
    padding: 12px 35px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.default__button:hover {
    background: var(--bihelia-dark);
    border-color: var(--bihelia-dark);
    color: var(--bihelia-white);
}

.btn__black {
    background: var(--bihelia-dark);
    border-color: var(--bihelia-dark);
}

.btn__black:hover {
    background: var(--bihelia-primary);
    border-color: var(--bihelia-primary);
}

/* ========================================
   BANNIÈRE VIDÉO
   ======================================== */

.ltn__banner-area .slide-title {
    color: var(--bihelia-white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 700;
}

.full-width-banner-info {
    background: rgba(61, 61, 61, 0.4);
}

/* ========================================
   SECTIONS
   ======================================== */

.section__title h2 {
    color: var(--bihelia-dark);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.section__title h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--bihelia-primary);
    border-radius: 2px;
}

.section__title p {
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 0;
    clear: both;
    display: block;
}

/* ========================================
   PRODUITS
   ======================================== */

/* Cartes produits */
.grid__wraper {
    border: 1px solid var(--bihelia-light);
    transition: all 0.3s ease;
}

.grid__wraper:hover {
    box-shadow: 0 5px 20px rgba(201, 169, 97, 0.2);
    border-color: var(--bihelia-primary);
}

/* Titres produits */
.grid__wraper__tittle a {
    color: var(--bihelia-dark);
    font-weight: 600;
}

.grid__wraper__tittle a:hover {
    color: var(--bihelia-primary);
}

/* Prix */
.grid__wraper__price span {
    color: var(--bihelia-primary);
    font-weight: 700;
    font-size: 18px;
}

.grid__wraper__price del {
    color: var(--text-light);
}

/* Badges */
.new__badge {
    background: var(--bihelia-primary);
    color: var(--bihelia-white);
}

.sale__badge {
    background: var(--bihelia-accent);
    color: var(--bihelia-white);
}

/* Icônes d'action */
.grid__wraper__icon ul li a {
    background: var(--bihelia-white);
    color: var(--bihelia-dark);
    border: 1px solid var(--bihelia-light);
}

.grid__wraper__icon ul li a:hover {
    background: var(--bihelia-primary);
    color: var(--bihelia-white);
    border-color: var(--bihelia-primary);
}

/* ========================================
   BANNIÈRES
   ======================================== */

.banner__3__text h2 a {
    color: var(--bihelia-white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 700;
}

.banner__3__text h2 a:hover {
    color: var(--bihelia-accent);
}

.banner__info h2 a {
    color: var(--bihelia-white);
    font-weight: 700;
}

.banner__info h2 a:hover {
    color: var(--bihelia-accent);
}

/* ========================================
   INSTAGRAM
   ======================================== */

.instagram .section__title h2 {
    color: var(--bihelia-dark);
}

.instagram .section__title a {
    color: var(--bihelia-primary);
    font-weight: 600;
}

.instagram .section__title a:hover {
    color: var(--bihelia-accent);
}

.instagram__img {
    border: 3px solid var(--bihelia-light);
    transition: all 0.3s ease;
}

.instagram__img:hover {
    border-color: var(--bihelia-primary);
    transform: scale(1.05);
}

/* ========================================
   CARACTÉRISTIQUES
   ======================================== */

.feature__2__single {
    border: 1px solid var(--bihelia-light);
    padding: 30px;
    transition: all 0.3s ease;
}

.feature__2__single:hover {
    border-color: var(--bihelia-primary);
    box-shadow: 0 5px 15px rgba(201, 169, 97, 0.15);
}

.feature__2__text h4 {
    color: var(--bihelia-dark);
    font-weight: 600;
}

.feature__2__text p {
    color: var(--text-secondary);
}

.feature__2__text strong {
    color: var(--bihelia-primary);
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
    background: #283519 !important;
    color: #FFFFFF !important;
}

.footer__title {
    color: #FFFFFF !important;
    font-weight: 600;
    position: relative;
    padding-bottom: 15px;
}

.footer__title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--bihelia-primary);
}

.footer__content p {
    color: #FFFFFF !important;
}

.footer__menu ul li a {
    color: #FFFFFF !important;
}

.footer__menu ul li a:hover {
    color: var(--bihelia-accent) !important;
    padding-left: 5px;
}

.footer__social__icon ul li a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.footer__social__icon ul li a:hover {
    background: var(--bihelia-primary) !important;
    color: #FFFFFF !important;
}

.footer__bottom h5 {
    color: #FFFFFF !important;
}

.copyright {
    background: #1a2410 !important;
    color: #FFFFFF !important;
}

.copyright__text p {
    color: #FFFFFF !important;
}

.copyright strong {
    color: var(--bihelia-accent) !important;
}

/* ========================================
   PANIER (MINICART)
   ======================================== */

.minicart {
    background: var(--bihelia-white);
}

.minicart__cart__text strong {
    color: var(--bihelia-dark);
}

.minicart__single__content h4 a {
    color: var(--bihelia-dark);
}

.minicart__single__content h4 a:hover {
    color: var(--bihelia-primary);
}

.minicart__subtotal {
    border-top: 2px solid var(--bihelia-primary);
}

.subtotal__amount {
    color: var(--bihelia-primary);
    font-weight: 700;
}

/* ========================================
   RECHERCHE
   ======================================== */

.headersearch__active {
    background: rgba(61, 61, 61, 0.95);
}

.header__form__search input {
    border: 2px solid var(--bihelia-light);
}

.header__form__search input:focus {
    border-color: var(--bihelia-primary);
}

.header__form__search button {
    background: var(--bihelia-primary);
    color: var(--bihelia-white);
}

.header__form__search button:hover {
    background: var(--bihelia-accent);
}

/* ========================================
   MENU MOBILE
   ======================================== */

.mobile-off-canvas-active {
    background: var(--bihelia-white);
}

.mobile-menu li a {
    color: var(--bihelia-dark);
}

.mobile-menu li a:hover {
    color: var(--bihelia-primary);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    .default__button {
        padding: 10px 25px;
        font-size: 14px;
    }
    
    .section__title h2 {
        font-size: 24px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated {
    animation: fadeInUp 0.8s ease;
}

/* ========================================
   SCROLLBAR PERSONNALISÉE
   ======================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bihelia-light);
}

::-webkit-scrollbar-thumb {
    background: var(--bihelia-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bihelia-accent);
}

/* ========================================
   SÉLECTION DE TEXTE
   ======================================== */

::selection {
    background: var(--bihelia-primary);
    color: var(--bihelia-white);
}

::-moz-selection {
    background: var(--bihelia-primary);
    color: var(--bihelia-white);
}


/* ========================================
   REMPLACEMENT DES COULEURS ROUGES PAR OR DORÉ
   Règles avec !important pour forcer le changement
   ======================================== */

/* Remplacer TOUTES les nuances de rouge */
*[style*="color: red"],
*[style*="color:#ff0000"],
*[style*="color: #f00"],
*[style*="color:#FF0000"],
*[style*="color: #FF0000"],
*[style*="color:red"],
*[style*="color:#dc3545"],
*[style*="color: #dc3545"],
*[style*="color:#e74c3c"],
*[style*="color: #e74c3c"],
*[style*="color:#c0392b"],
*[style*="color: #c0392b"] {
    color: #D4AF37 !important;
}

/* Backgrounds rouges */
*[style*="background: red"],
*[style*="background:#ff0000"],
*[style*="background-color: red"],
*[style*="background-color:#ff0000"],
*[style*="background-color: #FF0000"],
*[style*="background-color:#FF0000"],
*[style*="background:#dc3545"],
*[style*="background-color:#dc3545"],
*[style*="background:#e74c3c"],
*[style*="background-color:#e74c3c"] {
    background-color: #D4AF37 !important;
}

/* Bordures rouges */
*[style*="border-color: red"],
*[style*="border-color:#ff0000"],
*[style*="border-color: #FF0000"],
*[style*="border-color:#dc3545"],
*[style*="border-color:#e74c3c"],
*[style*="border: 1px solid red"],
*[style*="border: 2px solid red"] {
    border-color: #D4AF37 !important;
}

/* Classes Bootstrap danger */
.text-danger {
    color: #D4AF37 !important;
}

.bg-danger {
    background-color: #D4AF37 !important;
}

.border-danger {
    border-color: #D4AF37 !important;
}

.badge-danger,
.badge.bg-danger {
    background-color: #D4AF37 !important;
    color: #FFFFFF !important;
}

.btn-danger {
    background-color: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #FFFFFF !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #C9A961 !important;
    border-color: #C9A961 !important;
    color: #FFFFFF !important;
}

.alert-danger {
    background-color: rgba(212, 175, 55, 0.15) !important;
    border-color: #D4AF37 !important;
    color: #283519 !important;
}

/* Classes spécifiques */
.red,
.color-red,
.bg-red,
.text-red {
    color: #D4AF37 !important;
}

.bg-red,
.background-red {
    background-color: #D4AF37 !important;
}

/* Badges de vente */
.sale__badge,
.hot__badge,
.promo__badge,
.discount__badge {
    background: #D4AF37 !important;
    color: #FFFFFF !important;
}

/* Labels dans le menu */
.header__label.hot__color {
    background: #D4AF37 !important;
    color: #FFFFFF !important;
}

/* Icônes */
.fa-heart,
.icon-heart,
i.fa-heart,
i.icon-heart {
    color: #D4AF37 !important;
}

/* Prix en promotion */
.price-sale,
.sale-price,
.discount-price,
.special-price {
    color: #D4AF37 !important;
}

/* Compteurs et notifications */
.notification-badge,
.counter-badge,
.bigcounter,
.cart-count,
.wishlist-count {
    background-color: #D4AF37 !important;
    color: #FFFFFF !important;
}

/* Boutons d'action */
.btn-red,
.button-red,
.action-red {
    background-color: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #FFFFFF !important;
}

/* Étoiles de notation */
.rating-star,
.star-rating,
.fa-star,
i.fa-star {
    color: #D4AF37 !important;
}

/* Progress bars */
.progress-bar-danger,
.progress-bar.bg-danger {
    background-color: #D4AF37 !important;
}

/* Forms validation */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #D4AF37 !important;
}

.invalid-feedback {
    color: #D4AF37 !important;
}

/* Pagination active */
.pagination .page-item.active .page-link {
    background-color: #D4AF37 !important;
    border-color: #D4AF37 !important;
}

/* Dropdown active */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #D4AF37 !important;
    color: #FFFFFF !important;
}

/* Nav pills active */
.nav-pills .nav-link.active {
    background-color: #D4AF37 !important;
}

/* List group active */
.list-group-item.active {
    background-color: #D4AF37 !important;
    border-color: #D4AF37 !important;
}

/* Slick slider */
.slick-dots li.slick-active button:before {
    color: #D4AF37 !important;
}

.slick-prev:hover,
.slick-next:hover {
    color: #D4AF37 !important;
}

/* Countdown */
.grid__wraper__countdown {
    background: rgba(212, 175, 55, 0.9) !important;
}

.grid__wraper__countdown .count p {
    color: #FFFFFF !important;
}

/* Required fields */
.required,
.required-field,
label .required {
    color: #D4AF37 !important;
}

/* Error messages */
.error-message,
.error-text,
.error {
    color: #D4AF37 !important;
}

/* Forcer le changement sur tous les éléments avec classe contenant 'red' */
[class*="red"],
[class*="Red"],
[class*="RED"] {
    color: #D4AF37 !important;
}

[class*="bg-red"],
[class*="background-red"] {
    background-color: #D4AF37 !important;
}

/* Forcer sur les SVG rouges */
svg[fill="red"],
svg[fill="#ff0000"],
svg[fill="#FF0000"],
svg[fill="#dc3545"],
svg[fill="#e74c3c"] {
    fill: #D4AF37 !important;
}

svg[stroke="red"],
svg[stroke="#ff0000"],
svg[stroke="#FF0000"],
svg[stroke="#dc3545"],
svg[stroke="#e74c3c"] {
    stroke: #D4AF37 !important;
}

/* Forcer sur les paths SVG */
path[fill="red"],
path[fill="#ff0000"],
path[fill="#FF0000"],
path[fill="#dc3545"],
path[fill="#e74c3c"] {
    fill: #D4AF37 !important;
}

path[stroke="red"],
path[stroke="#ff0000"],
path[stroke="#FF0000"],
path[stroke="#dc3545"],
path[stroke="#e74c3c"] {
    stroke: #D4AF37 !important;
}

/* About Section */
.about__section {
    padding-top: 60px;
}

.about__content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.about__content h1,
.about__content h2,
.about__content h3 {
    color: var(--bihelia-dark);
    margin-bottom: 15px;
}

.about__content p {
    margin-bottom: 15px;
}

.about__content ul,
.about__content ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

/* Respecter l'alignement choisi dans l'éditeur (Quill) */
.about__content .ql-align-center {
    text-align: center;
}
.about__content .ql-align-right {
    text-align: right;
}
.about__content .ql-align-justify {
    text-align: justify;
}

/* Image centrée verticalement par rapport au texte */
.about__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.about__image img {
    max-height: 450px;
}

/* Why Choose Section */
.why__choose__section {
    padding-top: 60px;
}

.why__choose__content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    text-align: center;
}

.why__choose__content h1,
.why__choose__content h2,
.why__choose__content h3 {
    color: var(--bihelia-dark);
    margin-bottom: 15px;
}

.why__choose__content p {
    margin-bottom: 15px;
}

.why__choose__content ul,
.why__choose__content ol {
    text-align: left;
    display: inline-block;
    margin-bottom: 15px;
}

/* ========================================
   ORGANIC SECTION DIVIDERS - Soft natural waves
   Premium botanical / cosmetic feel
   ======================================== */

/* Alternating section backgrounds */
.section--beige {
    background-color: #f8f3eb;
}

.section--white {
    background-color: #ffffff;
}

.section--cream {
    background-color: #fdf8f0;
}

.section--light-green {
    background-color: #f7f3ec;
}

.section--soft-gold {
    background-color: #faf6ee;
}

.section--pale {
    background-color: #f9f5ef;
}

/* White empty space between sections (no wave) */
.section__spacer {
    width: 100%;
    height: 90px;
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .section__spacer {
        height: 55px;
    }
}

/*
   Each divider renders a soft organic wave in SVG.
   The wave "fills" with the color of the section that follows,
   so the transition reads as one surface melting into the next.
   The fill color is set per-variant below.
*/
.section__divider {
    position: relative;
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
    line-height: 0;
    display: block;
}

/* The organic wave surface */
.section__divider::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    /* default fill = cream, overridden by variants */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fdf8f0' d='M0,40 C240,95 480,0 720,30 C960,60 1200,100 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}

/* A second, lighter wave layer for depth (soft, organic) */
.section__divider::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23C9A961' fill-opacity='0.12' d='M0,55 C300,20 560,80 820,50 C1080,20 1260,70 1440,55 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}

/* Hide any legacy inner dot markup */
.section__divider .divider__inner,
.divider__dot,
.divider__diamond,
.divider__leaf {
    display: none !important;
}

/* ---- Wave fill color variants (color = next section bg) ---- */
.section__divider--to-white::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,40 C240,95 480,0 720,30 C960,60 1200,100 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}
.section__divider--to-beige::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f3eb' d='M0,40 C240,95 480,0 720,30 C960,60 1200,100 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}
.section__divider--to-cream::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fdf8f0' d='M0,40 C240,95 480,0 720,30 C960,60 1200,100 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}
.section__divider--to-green::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f3ec' d='M0,40 C240,95 480,0 720,30 C960,60 1200,100 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}
.section__divider--to-gold::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23faf6ee' d='M0,40 C240,95 480,0 720,30 C960,60 1200,100 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}
.section__divider--to-pale::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23f9f5ef' d='M0,40 C240,95 480,0 720,30 C960,60 1200,100 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}

/* Plain decorative dividers (no --to-* variant): soft leaf accent */
.section__divider:not([class*="--to-"]) {
    height: 70px;
}
.section__divider:not([class*="--to-"])::before {
    background: none;
    /* a soft centered botanical leaf motif */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='40' viewBox='0 0 150 40'%3E%3Cg fill='none' stroke='%23C9A961' stroke-opacity='0.55' stroke-width='1.4'%3E%3Cpath d='M10 20 H58'/%3E%3Cpath d='M92 20 H140'/%3E%3C/g%3E%3Cg fill='%23C9A961' fill-opacity='0.75'%3E%3Cpath d='M75 10 C82 15 82 25 75 30 C68 25 68 15 75 10 Z'/%3E%3C/g%3E%3Cpath d='M75 10 L75 30' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='0.8'/%3E%3Ccircle cx='64' cy='20' r='1.6' fill='%23C9A961' fill-opacity='0.6'/%3E%3Ccircle cx='86' cy='20' r='1.6' fill='%23C9A961' fill-opacity='0.6'/%3E%3C/svg%3E");
}
.section__divider:not([class*="--to-"])::after {
    display: none;
}

/* ---- Preceding-section color (fills the area above the wave) ----
   Ensures the top of the wave melts out of the previous section
   with no visible band, whatever the page background is. */
.section__divider--from-white { background-color: #ffffff; }
.section__divider--from-beige { background-color: #f8f3eb; }
.section__divider--from-cream { background-color: #fdf8f0; }
.section__divider--from-green { background-color: #f7f3ec; }
.section__divider--from-gold { background-color: #faf6ee; }
.section__divider--from-pale { background-color: #f9f5ef; }

/* ---- Subtle botanical background decorations on sections ---- */
.feture__section,
.about__section,
.why__choose__section,
.customer__reviews {
    position: relative;
    overflow: hidden;
}

/* Soft blurred organic gradient blobs + faint leaf, non-intrusive */
.feture__section::before,
.about__section::before,
.why__choose__section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at center, rgba(201, 169, 97, 0.10) 0%, rgba(201, 169, 97, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(6px);
}

.feture__section::after,
.about__section::after,
.why__choose__section::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -70px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at center, rgba(40, 53, 25, 0.06) 0%, rgba(40, 53, 25, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(4px);
}

/* Keep section content above the decorative layers */
.feture__section > .container,
.about__section > .container,
.why__choose__section > .container,
.customer__reviews > .container {
    position: relative;
    z-index: 1;
}

/* Responsive: shrink waves & blobs on mobile */
@media (max-width: 768px) {
    .section__divider {
        height: 55px;
    }
    .section__divider:not([class*="--to-"]) {
        height: 50px;
    }
    .section__divider:not([class*="--to-"])::before {
        background-size: 120px auto;
    }
    .feture__section::before,
    .about__section::before,
    .why__choose__section::before {
        width: 180px;
        height: 180px;
        top: -40px;
        right: -50px;
    }
    .feture__section::after,
    .about__section::after,
    .why__choose__section::after {
        width: 150px;
        height: 150px;
    }
}

/* ========================================
   SCROLL ANIMATIONS - Sections fade/slide in
   ======================================== */

/* Base state for animated elements */
.section-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-animate.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations for child elements */
.section-animate .section__title {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.section-animate.animate-visible .section__title {
    opacity: 1;
    transform: translateY(0);
}

.section-animate .grid__wraper,
.section-animate .soin__circle__item,
.section-animate .review__item {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.section-animate.animate-visible .grid__wraper,
.section-animate.animate-visible .soin__circle__item,
.section-animate.animate-visible .review__item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger delays for grid items */
.section-animate.animate-visible .col-xl-3:nth-child(1) .grid__wraper,
.section-animate.animate-visible .col-xl-3:nth-child(1) .soin__circle__item { transition-delay: 0.1s; }
.section-animate.animate-visible .col-xl-3:nth-child(2) .grid__wraper,
.section-animate.animate-visible .col-xl-3:nth-child(2) .soin__circle__item { transition-delay: 0.2s; }
.section-animate.animate-visible .col-xl-3:nth-child(3) .grid__wraper,
.section-animate.animate-visible .col-xl-3:nth-child(3) .soin__circle__item { transition-delay: 0.3s; }
.section-animate.animate-visible .col-xl-3:nth-child(4) .grid__wraper,
.section-animate.animate-visible .col-xl-3:nth-child(4) .soin__circle__item { transition-delay: 0.4s; }

/* About section animation */
.section-animate .about__image {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

.section-animate.animate-visible .about__image {
    opacity: 1;
    transform: translateX(0);
}

.section-animate .about__content {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;
}

.section-animate.animate-visible .about__content {
    opacity: 1;
    transform: translateX(0);
}

/* Divider animation - gentle fade/rise, keeps organic wave shape intact */
.section__divider {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section__divider.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Why choose / Reviews animations */
.section-animate .why__choose__content,
.section-animate .reviews__slider__wrapper,
.section-animate .partner__images__wrap {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

.section-animate.animate-visible .why__choose__content,
.section-animate.animate-visible .reviews__slider__wrapper,
.section-animate.animate-visible .partner__images__wrap {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   PROMO BANNERS - Grid side-by-side style
   ======================================== */

.promo__banners__section {
    padding: 80px 0;
    background: linear-gradient(135deg, #fefdfb 0%, #f9f5ee 100%);
}

.promo__banner__item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 320px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.promo__banner__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.15);
}

.promo__banner__link {
    display: block;
    position: relative;
    height: 100%;
    text-decoration: none;
}

.promo__banner__img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.promo__banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.promo__banner__item:hover .promo__banner__img img {
    transform: scale(1.06);
}

.promo__banner__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    padding: 35px;
    background: linear-gradient(160deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.35) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    transition: background 0.4s ease;
}

.promo__banner__item:hover .promo__banner__overlay {
    background: linear-gradient(160deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.45) 100%);
}

.promo__banner__title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.promo__banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #333333;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.promo__banner__item:hover .promo__banner__btn {
    background: var(--bihelia-primary, #C9A961);
    color: #ffffff;
    box-shadow: 0 5px 20px rgba(201, 169, 97, 0.4);
    transform: translateX(4px);
}

.promo__banner__btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.promo__banner__item:hover .promo__banner__btn i {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 991px) {
    .promo__banners__section {
        padding: 60px 0;
    }
    .promo__banner__item {
        height: 260px;
    }
    .promo__banner__overlay {
        padding: 25px;
    }
    .promo__banner__title {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .promo__banners__section {
        padding: 40px 0;
    }
    .promo__banner__item {
        height: 220px;
        border-radius: 12px;
    }
    .promo__banner__overlay {
        padding: 20px;
    }
    .promo__banner__title {
        font-size: 17px;
        margin-bottom: 12px;
    }
    .promo__banner__btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Customer Reviews Slider */
.customer__reviews {
    background-color: #f8f9fa;
    overflow: hidden;
}

.reviews__slider__wrapper {
    overflow: hidden;
    white-space: nowrap;
}

.reviews__slider {
    display: inline-flex;
    animation: scroll-reviews 30s linear infinite;
    gap: 30px;
}

.review__item {
    display: inline-flex;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 350px;
    white-space: normal;
    gap: 15px;
}

.review__avatar {
    flex-shrink: 0;
}

.review__avatar i {
    font-size: 50px;
    color: #C9A961;
}

.review__content h5 {
    margin: 0 0 8px 0;
    color: #283519;
    font-weight: 600;
    font-size: 16px;
}

.review__content p {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.review__stars {
    display: flex;
    gap: 2px;
}

.review__stars i {
    color: #D4AF37;
    font-size: 12px;
}

@keyframes scroll-reviews {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause animation on hover */
.reviews__slider:hover {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
    .review__item {
        min-width: 280px;
        padding: 15px;
    }
    
    .review__avatar i {
        font-size: 40px;
    }
    
    .review__content h5 {
        font-size: 14px;
    }
    
    .review__content p {
        font-size: 13px;
    }
}

/* Account Dropdown Styles */
.setting__wrap {
    position: relative;
}

.account__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid #e0e0e0;
}

.setting__wrap:hover .account__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account__dropdown ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.account__dropdown li {
    margin: 0;
}

.account__dropdown a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.account__dropdown a:hover {
    background-color: #f8f9fa;
    color: #C9A961;
}

.account__dropdown form {
    margin: 0;
}

.account__dropdown form a {
    cursor: pointer;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .account__dropdown {
        right: -20px;
        min-width: 180px;
    }
}


/* Partner Images Section */
.partner__images__section {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.partner__images__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.partner__image__item {
    flex: 0 0 calc(100% / 7 - 20px);
    max-width: calc(100% / 7 - 20px);
    text-align: center;
}

.partner__image__item img {
    max-height: 160px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.partner__image__item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .partner__image__item {
        flex: 0 0 calc(100% / 4 - 20px);
        max-width: calc(100% / 4 - 20px);
    }
}

@media (max-width: 575px) {
    .partner__image__item {
        flex: 0 0 calc(100% / 3 - 15px);
        max-width: calc(100% / 3 - 15px);
    }
    
    .partner__image__item img {
        max-height: 60px;
    }
}


/* Soins Card Style - Rectangular, no border, image cutout ready */
.soin__circle__item {
    padding: 10px;
}

.soin__circle__item a {
    text-decoration: none;
    color: #333;
    display: block;
}

.soin__circle__img {
    width: 100%;
    height: 220px;
    border-radius: 0;
    overflow: hidden;
    margin: 0 auto 12px;
    border: none;
    transition: all 0.3s ease;
}

.soin__circle__item:hover .soin__circle__img {
    transform: scale(1.03);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.soin__circle__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.soin__circle__name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin: 0;
    transition: color 0.3s ease;
}

.soin__circle__item:hover .soin__circle__name {
    color: #C9A961;
}

@media (max-width: 767px) {
    .soin__circle__img {
        height: 200px;
    }
    .soin__circle__img img {
        object-fit: contain;
    }
    .soin__circle__item {
        text-align: center;
    }
}

/* ========================================
   BREADCRUMB WITH BACKGROUND IMAGE
   ======================================== */

.breadcrumb--has-image {
    position: relative;
    padding-top: 30px !important;
    padding-bottom: 80px !important;
    min-height: 250px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

/* Desktop : l'image remplit tout le bandeau (cover) */
.breadcrumb__bg__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.breadcrumb__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.breadcrumb--has-image .breadcrumb__title h1 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.breadcrumb--has-image .breadcrumb__title ul li {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.breadcrumb--has-image .breadcrumb__title ul li a {
    color: rgba(255, 255, 255, 0.85);
}

.breadcrumb--has-image .breadcrumb__title ul li a:hover {
    color: #ffffff;
}

.breadcrumb--has-image .breadcrumb__title ul li.breadcrumb__active {
    color: #ffffff;
}

@media (min-width: 768px) {
    .breadcrumb--has-image {
        padding-top: 35px !important;
        padding-bottom: 100px !important;
        min-height: 280px;
    }
}

@media (max-width: 767px) {
    /* Mobile : afficher l'image ENTIERE (pas de rognage) */
    .breadcrumb--has-image {
        padding: 0 !important;
        min-height: 0;
        display: block;
    }
    .breadcrumb__bg__img {
        position: static;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    /* Le texte passe SOUS l'image sur mobile */
    .breadcrumb--has-image .container {
        position: relative;
        z-index: 2;
        padding-top: 20px;
        padding-bottom: 20px;
        background: #283519;
    }
    .breadcrumb--has-image .breadcrumb__overlay {
        display: none;
    }
    .breadcrumb--has-image .breadcrumb__title h1 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .breadcrumb--has-image .breadcrumb__title h1 {
        font-size: 18px;
    }
    .breadcrumb--has-image .breadcrumb__title ul li {
        font-size: 12px;
    }
}

/* ========================================
   PRODUCT DETAIL - Image centrée verticalement
   ======================================== */

.product__image__col {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.product__image__col .featurearea__details__img {
    width: 100%;
}

@media (max-width: 991px) {
    .product__image__col {
        margin-bottom: 30px;
    }
}

/* ========================================
   BREADCRUMB - Alignement à gauche + titre gras
   ======================================== */

.breadcrumb__title {
    text-align: left !important;
}

.breadcrumb__title h1 {
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Supprimer le séparateur incliné du fil d'ariane */
.breadcrumb__title ul li::before {
    display: none !important;
}

/* Espacement propre entre les éléments du fil d'ariane */
.breadcrumb__title ul {
    padding-left: 0;
    margin: 0;
}

.breadcrumb__title ul li {
    margin-right: 8px;
    font-size: 15px;
}

/* Ajouter un séparateur ">" simple entre les items */
.breadcrumb__title ul li:not(:last-child)::after {
    content: '/';
    margin-left: 12px;
    color: inherit;
    opacity: 0.6;
}

/* Version avec image de fond : titre petit, en haut à gauche */
.breadcrumb--has-image .breadcrumb__title {
    text-align: left !important;
}

.breadcrumb--has-image .breadcrumb__title h1 {
    font-size: 26px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .breadcrumb__title h1 {
        font-size: 30px;
    }
    .breadcrumb--has-image .breadcrumb__title h1 {
        font-size: 20px;
    }
}
