/*
HIGHLOVE - Palette de couleurs

PRIMARY (Or/Gold):
- Base:  hsl(36, 38%, 46%)  = #A0824C  (driftwood)
- Light: hsl(36, 38%, 68%)  = #C9B892
- Dark:  hsl(36, 40%, 39%)  = #8A6D3C

SECONDARY (Bordeaux):
- Base:  hsl(1, 45%, 37%)   = #883433  (sanguine brown)
- Light: hsl(3, 25%, 65%)   = #B59B9A
- Dark:  hsl(358, 37%, 34%) = #773736  (lotus)

BEIGE (Fonds de section):
- Base:  hsl(30, 22%, 95%)  = #F5F3F0  (pampas)
- Light: hsl(40, 100%, 98%) = #FFFCF4  (quarter pearl lusta)
- Dark:  hsl(32, 38%, 92%)  = #F1E7DC  (merino)
- BG:    hsl(22, 68%, 85%)  = #F3D6C0

STATUS COLORS:
- Info:    hsl(200, 25%, 52%) - Bleu ardoise doux
- Warning: hsl(32, 60%, 58%)  - Orange doré
- Success: hsl(105, 25%, 48%) - Vert sauge
- Danger:  hsl(5, 55%, 55%)   - Rouge brique
*/

:root{
    /* Or/Gold pour boutons et accents */
    --color-primary:  hsl( 36,  38%, 46%); --color-primary-light:  hsl( 36,  38%, 68%); --color-primary-dark:  hsl( 36,  40%, 30%); --color-primary-transparent:  hsla( 36,  38%, 46%, 0.75);
    /* Bordeaux pour titres, footer, CTAs */
    --color-secondary:hsl(  1,  45%, 37%); --color-secondary-light:hsl(  3,  25%, 65%); --color-secondary-dark:hsl(358,  37%, 17%); --color-secondary-transparent:hsla(  1,  45%, 37%, 0.75);

    /* Beiges pour fonds de section */
    --color-beige:hsl( 30,  22%, 95%); --color-beige-light:hsl( 40,  100%, 98%); --color-beige-dark:hsl( 32,  38%, 92%);
    --color-beige-bg:hsl( 22,  68%, 85%);

    /* Info - Bleu ardoise doux (complémentaire chaud du bordeaux) */
    --color-info:   hsl(200,  25%, 52%); --color-info-light:   hsl(200,  35%, 80%); --color-info-dark:   hsl(200,  30%, 35%); --color-info-transparent:   hsla(200,  25%, 52%, 0.75);
    /* Warning - Orange doré (proche du primary, plus chaud) */
    --color-warning:hsl( 32,  60%, 58%); --color-warning-light:hsl( 32,  70%, 82%); --color-warning-dark:hsl( 32,  58%, 42%); --color-warning-transparent:hsla( 32,  60%, 58%, 0.75);
    /* Success - Vert sauge (tonalité terreuse harmonieuse) */
    --color-success:hsl(105,  25%, 48%); --color-success-light:hsl(105,  35%, 75%); --color-success-dark:hsl(105,  28%, 35%); --color-success-transparent:hsla(105,  25%, 48%, 0.75);
    /* Danger - Rouge brique (cohérent avec secondary, plus vif) */
    --color-danger: hsl(  5,  55%, 55%); --color-danger-light: hsl(  5,  60%, 78%); --color-danger-dark: hsl(  5,  58%, 40%); --color-danger-transparent: hsla(  5,  55%, 55%, 0.75);

    --color-white:        #ffffff;
    --color-black:        #000000;
    --color-text:         #3B332A; /*hsl(20, 8%, 21%);*/
    --color-text-dark:    #272321; /*hsl(20, 8%, 14%);*/
    --color-text-medium:  #6B6359; /*hsl(20, 8%, 41%)*/
    --color-text-light:   #9B9389; /*hsl(20, 8%, 61%)*/
    --color-text-lighter: #D1CCCA; /*hsl(20, 8%, 82%)*/
    --color-text-lightest:#E7E5E3; /*hsl(20, 8%, 90%)*/
    --color-link:         var(--color-secondary);
    --color-link-hover:   var(--color-secondary-dark);
    --color-footer-bg:    var(--color-secondary);
    --color-footer-text:  var(--color-white);
    --color-gray:         hsl(0, 0%, 53%); --color-gray-light:hsl(0, 0%, 78%); --color-gray-dark:hsl(0, 0%, 28%);

    /* Couleurs spécifiques BandeauTop */
    --color-bandeau-left: #AC8347;  /* Or/doré pour FirstCol */
    --color-bandeau-mid:  #B36E62;  /* Rose/saumon pour MidCol */

    --font-family:"Roboto", sans-serif;
    --font-family-title:"Dela Gothic One", sans-serif;
    --font-family-subtitle:"League Spartan", sans-serif;
}

::selection{
    background-color:var(--color-secondary-dark);
    color:var(--color-white);
}
::-moz-selection{
    background-color:var(--color-secondary-dark);
    color:var(--color-white);
}
*::-webkit-scrollbar{
    width:8px;
    height:4px;
}
*::-webkit-scrollbar-thumb{
    background-color:var(--color-secondary);
    border-radius:50rem;
}
::-webkit-scrollbar-thumb:hover{
    background-color:var(--color-secondary-dark);
}
*::-webkit-scrollbar-track{
    background:var(--color-beige-dark);
}


body{
    background-color:var(--color-white);
    color:var(--color-text);
    font-family:var(--font-family);
    font-size:15px;
    line-height:1.5;
}

.container{
    max-width:100%;
}

body.page-stripe:after{
    display:none
}
.page-stripe .container{
    text-align:center;
}
.page-stripe .container h5{
    font-size:20px;
}

#ecom{
    padding:25px 0;
}

h1, h2{
    font-family:var(--font-family-title);
    color:var(--color-secondary);
    transition:all 0.25s ease;
}
h3, h4, h5, h6{
    font-family:var(--font-family-subtitle);
    font-weight:500;
    color:var(--color-secondary);
    transition:all 0.25s ease;
}
#TitrePage, .TitrePage, .Titre{
    font-family:var(--font-family-title);
    font-weight:500;
    font-size:clamp(22px, 5vw, 36px);
    line-height:1.1;
    color:var(--color-secondary);
    word-wrap:break-word;
    overflow-wrap:break-word;
}
h1{
    font-size:clamp(22px, 5vw, 36px);
    line-height:1.1;
    word-wrap:break-word;
    overflow-wrap:break-word;
}
.TitreModule{
    margin:10px auto;
    padding:0;
    font-family:var(--font-family-subtitle);
    font-weight:300;
}
.TitreModule #TriLstProduit{
    display:block;
    text-align:right;
    margin:5px 0;
    font-family:var(--font-family);
    font-size:13px;
}
.icon-sort{
    color:var(--color-primary);
}
#TriLstProduit select{
    border-radius:0;
    border:1px solid var(--color-text-lighter);
    min-height:24px;
    font-size:12px;
}
#TriLstProduit select option{
    min-height:12px;
}
.TitreModule .Title{
    display:none;
    font-family:var(--font-family-title);
    font-weight:normal;
    color:var(--color-text);
    text-align:left;
    float:none;
}

h2, .h2{
    font-weight:500;
    font-size:24px;
    color:var(--color-link-hover);
}

p{
    font-family:var(--font-family);
}

a{
    color:var(--color-link);
    transition:all 0.25s ease;
}
a:hover,
a:active,
a:focus{
    color:var(--color-link-hover);
    text-decoration:none;
}

img{
    transition:all 0.25s ease;
}

.fs-10{
    font-size:11px;
}
.fs-11{
    font-size:12px;
}
.fs-12{
    font-size:13px;
}
.small, .InfoPetit{
    font-size:11px;
}

.text-subtitle{
    font-family:var(--font-family-subtitle);
}

.btn,
button{
    border-radius:2px;
    background:var(--color-black);
    color:var(--color-white);
    transition:all 0.2s ease-in;
}
.btn:focus,
.btn:hover,
button:focus,
button:hover{
    background:var(--color-primary);
    color:var(--color-black);
    transition:all 0.2s ease-in;
}
button{
    border:1px solid var(--color-gray-light);
}
#BtnOpenMenuMobile:focus,
#BtnOpenMenuMobile:hover{
    background-color:var(--color-beige);
}

.btn-sm:not(.btn-rounded),
.btn-group-sm > .btn:not(.btn-rounded),
.btn-xs:not(.btn-rounded),
.btn-group-xs > .btn:not(.btn-rounded){
    border-radius:0;
}

.form-control{
    height:auto;
    min-height:34px;
    border:1px solid var(--color-text-lighter);
    border-bottom-width:2px;
    border-radius:0;
}

select.form-control,
textarea.form-control,
input[type=text].form-control,
input[type=email].form-control,
input[type=password].form-control{
    padding:10px 20px;
}
select.form-control{
    padding:5px 20px;
}

:focus{
    outline:1px dotted var(--color-secondary-transparent);
}
a:focus,
button:focus,
.btn:focus,
.form-control:focus{
    /*border-color: transparent;*/
    outline:1px dotted var(--color-secondary-transparent);
}
select.form-control:focus,
textarea.form-control:focus,
input[type=text].form-control:focus,
input[type=email].form-control:focus,
input[type=password].form-control:focus{
    border:1px solid transparent;
    border-bottom:2px solid var(--color-primary);
    outline:1px dotted var(--color-secondary-transparent);
    box-shadow:0px 0px 5px rgba(0, 0, 0, 0.25);
}

.bg-white{
    background-color: var(--color-white) !important;
}

.bg-primary{
    background-color:var(--color-primary);
    border-color:var(--color-primary);
    color:var(--color-white);
}
.border-primary{
    border-color:var(--color-primary);
}
.text-primary{
    color:var(--color-primary-dark) !important;
}
.text-primary:hover,
.text-primary:focus{
    color:var(--color-primary) !important;
}
.btn-primary,
.btn-achat{
    color:var(--color-white);
    background:var(--color-primary);
    /*border-color:var(--color-primary);*/
    border:none;
    z-index:1;
    overflow:hidden;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.btn-primary:active:focus,
.btn-primary:focus,
.btn-primary.focus,
.btn-achat:hover,
.btn-achat:active,
.btn-achat.active,
.btn-achat.active:hover,
.btn-achat.active:focus,
.btn-achat.active.focus,
.btn-achat:active:focus,
.btn-achat:focus,
.btn-achat.focus{
    transition:all 0.2s ease-in;
    color:var(--color-white);
    background:var(--color-primary-dark);
    border-color:var(--color-secondary);
    border:none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus{
    color:var(--color-black);
    background:var(--color-primary-light);
    border-color:var(--color-primary-light);
    border:none;
}
.page-stripe .btn-primary{
    border:1px solid var(--color-primary);
    border-bottom-width:2px;
}
.alert-primary{
    color:var(--color-primary-dark) !important;
    background-color:var(--color-primary-light);
    border-color:var(--color-primary-light);
}


.btn-secondary{
    color:var(--color-white);
    background:var(--color-secondary);
    border-color:var(--color-secondary);
    border:none;
    z-index:1;
    overflow:hidden;
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.active:hover,
.btn-secondary.active:focus,
.btn-secondary.active.focus,
.btn-secondary:active:focus,
.btn-secondary:focus,
.btn-secondary.focus{
    transition:all 0.2s ease-in;
    color:var(--color-black);
    background:var(--color-secondary-light);
    border-color:var(--color-secondary);
    border:none;
}
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover,
.btn-secondary.disabled:focus,
.btn-secondary[disabled]:focus,
.btn-secondary.disabled.focus,
.btn-secondary[disabled].focus{
    color:var(--color-black);
    background:var(--color-secondary-dark);
    border-color:var(--color-secondary-dark);
    border:none;
}

.bg-blue{
    background-color:var(--color-info-dark);
    border-color:var(--color-info-dark);
    color:var(--color-white);
}
.text-blue{
    color:var(--color-info-dark) !important;
}
.text-blue:hover,
.text-blue:focus{
    color:var(--color-info) !important;
}

.bg-danger-800{
    background-color:var(--color-danger-dark);
    border-color:var(--color-danger-dark);
    color:var(--color-white);
}

.bg-danger{
    background-color:var(--color-danger);
    border-color:var(--color-danger);
    color:var(--color-white);
}
.border-danger{
    border-color:var(--color-danger);
}
.text-danger{
    color:var(--color-danger) !important;
}
.text-danger:hover,
.text-danger:focus{
    color:var(--color-danger-dark) !important;
}
.btn-danger{
    color:var(--color-white);
    background:var(--color-danger);
    border-color:var(--color-danger);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.active:hover,
.btn-danger.active:focus,
.btn-danger.active.focus,
.btn-danger:active:focus,
.btn-danger:focus,
.btn-danger.focus{
    color:var(--color-white);
    background:var(--color-danger-dark);
    border-color:var(--color-danger-dark);
}
.alert-danger{
    color:var(--color-danger-dark) !important;
    background-color:var(--color-danger-light);
    border:1px solid var(--color-danger);
}

.bg-success{
    background-color:var(--color-success);
    border-color:var(--color-success);
    color:var(--color-black);
}
.border-success{
    border-color:var(--color-success);
}
.text-success{
    color:var(--color-success) !important;
}
.text-success:hover,
.text-success:focus{
    color:var(--color-success-dark) !important;
}
.btn-success{
    color:var(--color-white);
    background:var(--color-success);
    /*border-color:var(--color-success);*/
    border:none;
    z-index:1;
    overflow:hidden;
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.active:hover,
.btn-success.active:focus,
.btn-success.active.focus,
.btn-success:active:focus,
.btn-success:focus,
.btn-success.focus{
    transition:all 0.2s ease-in;
    color:var(--color-white);
    background:var(--color-secondary);
    border-color:var(--color-secondary-dark);
    border:none;
}
.alert-success{
    color:var(--color-success-dark) !important;
    background-color:var(--color-success-light);
    border:1px solid var(--color-success);
}

#TB_Produit .LigneAcheter .btn-achat{
    width:100%;
}

.bg-warning{
    background-color:var(--color-warning);
    border-color:var(--color-warning);
    color:var(--color-black);
}
.border-warning{
    border-color:var(--color-warning);
}
.text-warning{
    color:var(--color-warning) !important;
}
.text-warning:hover,
.text-warning:focus{
    color:var(--color-warning-dark) !important;
}
.btn-warning{
    color:var(--color-black);
    background:var(--color-warning);
    border-color:var(--color-warning);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.active:hover,
.btn-warning.active:focus,
.btn-warning.active.focus,
.btn-warning:active:focus,
.btn-warning:focus,
.btn-warning.focus{
    color:var(--color-black);
    background:var(--color-warning-dark);
    border-color:var(--color-warning-dark);
}
.alert-warning{
    color:var(--color-warning-dark) !important;
    background-color:var(--color-warning-light);
    border:1px solid var(--color-warning);
}

.bg-info{
    background-color:var(--color-info);
    border-color:var(--color-info);
    color:var(--color-white);
}
.border-info{
    border-color:var(--color-info);
}
.text-info{
    color:var(--color-info) !important;
}
.text-info:hover,
.text-info:focus{
    color:var(--color-info-dark) !important;
}
.btn-info{
    color:var(--color-white);
    background:var(--color-info);
    border-color:var(--color-info);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.active:hover,
.btn-info.active:focus,
.btn-info.active.focus,
.btn-info:active:focus,
.btn-info:focus,
.btn-info.focus{
    color:var(--color-white);
    background:var(--color-info-dark);
    border-color:var(--color-info-dark);
}
.alert-info{
    color:var(--color-info-dark) !important;
    background-color:var(--color-info-light);
    border-color:var(--color-info);
}

.border-default{
    border-color:var(--color-gray);
}

.btn-default{
    color:var(--color-text);
    background:var(--color-white);
    border-color:var(--color-gray-light);
}
.btn-default:hover,
.btn-default:active,
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus,
.btn-default.active.focus,
.btn-default:active:focus,
.btn-default:focus,
.btn-default.focus{
    color:var(--color-black);
    background:var(--color-white);
    border-color:var(--color-gray-dark);
    outline:1px solid var(--color-gray-light);
}

.btn-default a{
    color:var(--color-white);
}
.btn-default:hover a,
.btn-default:focus a{
    color:var(--color-black);
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default{
    color:var(--color-gray-dark);
    background:var(--color-gray-light);
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus{
    background:var(--color-gray-light);
}

/* Bandeau Top Desktop */
#BandeauTop{
    background-color:var(--color-bandeau-mid);
    color:var(--color-white);
    margin:0 auto;
    padding:0;
    text-align:center;
    font-size: 14px;
    overflow: hidden;
}

#BandeauTop .d-sm-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#BandeauTop #FirstCol,
#BandeauTop #MidCol,
#BandeauTop #LastCol{
    padding:8px 10px;
    color:var(--color-white);
}

#BandeauTop #FirstCol a,
#BandeauTop #MidCol a,
#BandeauTop #LastCol a{
    color:var(--color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

#BandeauTop a:focus,
#BandeauTop a:hover {
    opacity: 0.8;
}

#BandeauTop #FirstCol{
    background-color:var(--color-bandeau-left);
    flex: 0 0 30%;
    max-width: 30%;
    text-transform: uppercase;
}

#BandeauTop #MidCol{
    background-color:var(--color-bandeau-mid);
    flex: 0 0 40%;
    max-width: 40%;
    text-align: center;
    overflow: hidden;
}

#BandeauTop #LastCol{
    background-color:var(--color-secondary);
    flex: 0 0 30%;
    max-width: 30%;
    text-transform: uppercase;
}

#BandeauHeader,
#BandeauHeader a{
    color:var(--color-white);
    width: 100%;
    overflow: hidden;
}

#BandeauHeader a{
    text-decoration:underline;
}

#BandeauHeader .marquee-content {
    display: block;
    white-space: nowrap;
}

#BandeauHeader .swiper-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

#BandeauHeader .swiper-slide {
    width: 100%;
    text-align: center;
}

/* Pagination du swiper bandeau - à gauche, centrée verticalement */
#BandeauHeader .swiper-pagination-bandeau {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    bottom: auto;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 10;
}

#BandeauHeader .swiper-pagination-bandeau .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: var(--color-white);
    opacity: 1;
    margin: 0;
    transition: all 0.3s ease;
}

#BandeauHeader .swiper-pagination-bandeau .swiper-pagination-bullet-active {
    background-color: var(--color-secondary);
    outline:1px solid var(--color-white);
}

#ContenuBandeauHeader{
    display: none;
}

#ContenuBandeauHeader.hidden {
    display: none;
}

#ContenuBandeauHeader ul{
    margin:0 auto;
    padding-left:0;
    list-style-type:none;
}

#ContenuBandeauHeader ul li{
    display:none;
}

#ContenuBandeauHeader ul li:first-child{
    display:block;
}

#header{
    z-index:1;
}

@media (max-width: 767px) {
    /* Empêcher le scroll horizontal */
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* BandeauTop visible en mobile, seulement MidCol */
    #BandeauTop {
        display: block;
    }

    #BandeauTop .d-sm-flex {
        display: block !important;
    }

    #BandeauTop #FirstCol,
    #BandeauTop #LastCol {
        display: none;
    }

    #BandeauTop #MidCol {
        width: 100%;
        max-width: 100%;
        flex: none;
        padding: 8px 0;
    }

    /* Header mobile : contenu sur une ligne */
    #header .container {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Header mobile : burger, logo, et icônes sur une même ligne */
    #header .header-content {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        gap: 4px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Bouton burger à gauche */
    .btn-open-menu-mobile {
        flex: 0 0 auto;
        /*order: 1;*/
        background: none;
        border: none;
        padding: 4px;
        margin: 0;
        cursor: pointer;
    }

    .btn-open-menu-mobile img {
        width: 24px;
        height: 24px;
        display: block;
    }

    /* Logo au centre */
    #header .logo-container {
        flex: 1 1 auto;
        order: 2;
        text-align: center;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
        position: relative !important;
    }

    #header .logo-container a {
        display: inline-block;
    }

    #header .logo-container a img {
        max-height: 40px;
        margin: 0;
    }

    /* Navigation principale cachée sur mobile */
    #main-nav {
        display: none !important;
    }

    /* Div de navigation cachée sur mobile */
    #header .col-xs-12.col-sm-4.col-md-6.col-lg-8 {
        display: none !important;
    }

    /* Icônes à droite */
    .header-icons-wrapper {
        flex: 0 0 auto;
        order: 3;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        float: none !important;
        position: relative !important;
        z-index: 100;
    }

    .header-icons-wrapper #sec-nav {
        display: block !important;
    }

    .header-icons-wrapper .top-links {
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
        align-items: center;
    }

    .header-icons-wrapper .top-links li {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .header-icons-wrapper .top-links li:before {
        display: none !important;
    }

    .header-icons-wrapper .top-links button,
    .header-icons-wrapper .top-links a {
        background: none;
        border: none;
        padding: 4px;
        margin: 0;
        cursor: pointer;
        display: block;
        position: relative;
    }

    .header-icons-wrapper .top-links img {
        width: 20px;
        height: 20px;
        display: block;
    }

    .header-icons-wrapper .top-links .nb-prod {
        top: 0;
        right: 0;
    }

    /* Reassurance cards : clearfix après chaque paire sur mobile */
    .section-reassurance .reassurance:nth-child(2n+1) {
        clear: left;
    }

    /* Recherche mobile - styles dans Boutique.css */
}

/* Desktop styles */
@media (min-width: 768px) {
    /* Cacher le bouton burger sur desktop */
    .btn-open-menu-mobile {
        display: none !important;
    }

    /* Espacement vertical du header */
    #header {
        padding: 20px 0;
    }

    /* Centrer verticalement tous les éléments du header */
    #header .header-content {
        display: flex;
        align-items: center;
        overflow: visible;
    }

    #header .container {
        overflow: visible;
    }

    #header .logo-container,
    #header #main-nav,
    #header .header-icons-wrapper {
        display: flex;
        align-items: center;
        overflow: visible;
    }
    #header .logo-container,
    #header .header-icons-wrapper {
        justify-content: flex-end;
    }

    /* S'assurer que les icônes sont au-dessus */
    #header .header-icons-wrapper {
        position: relative;
        z-index: 999;
    }

    /* Forcer l'alignement du menu */
    #main-nav {
        flex: 1;
        justify-content: center;
        position: relative;
        z-index: 1;
        overflow: visible;
    }

    #main-menu {
        display: flex !important;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    #main-menu > li {
        display: flex;
        align-items: center;
        padding: 0 !important;
        margin: 0 5px;
        vertical-align: baseline !important;
        line-height: normal !important;
    }

    #main-menu > li > a {
        display: inline-block;
        padding: 8px 12px !important;
    }

    /* Formulaire de recherche */
    .FormRecherche {
        margin: 0;
        position: relative;
        z-index: 1000;
    }

    .FormRecherche .Recherche {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* S'assurer que tous les conteneurs parents du formulaire sont au-dessus */
    #ZoneRechercheTout {
        position: relative;
        z-index: 1000;
    }

    .top-links li:has(#ZoneRechercheTout) {
        position: relative;
        z-index: 1000;
    }

    /* Si le navigateur ne supporte pas :has(), cibler directement */
    .top-links li {
        position: relative;
    }

    .top-links li:first-child {
        z-index: 1000;
    }

    /* Masquer le champ de recherche par défaut */
    .FormRecherche #SaisieMotCle,
    .FormRecherche #TitreRecherche {
        display: none;
    }

    /* Afficher le champ quand le formulaire est actif */
    .FormRecherche.active #SaisieMotCle {
        display: block;
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        width: 250px;
        margin-right: 10px;
        border: 1px solid var(--color-text-lighter);
        border-radius: 4px;
        padding: 10px 15px;
        font-size: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 1001;
        background: var(--color-white);
    }

    .FormRecherche #BtnSubmit {
        background: none;
        border: none;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 32px;
    }

    .FormRecherche #BtnSubmit:focus,
    .FormRecherche #BtnSubmit:hover {
        background: none !important;
        border: none !important;
        outline: none !important;
    }

    .FormRecherche #BtnSubmit img {
        width: 24px;
        height: 24px;
        display: block;
    }

    .FormRecherche .input-group-btn {
        display: flex;
        align-items: center;
    }

    /* Aligner les icônes du header */
    .top-links {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .top-links li {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .top-links li:before {
        display: none !important;
    }

    .top-links li a,
    .top-links li button {
        display: flex;
        align-items: center;
        padding: 4px 8px;
    }

    .top-links img {
        width: 24px;
        height: 24px;
        display: block;
    }
}

/* Section Réassurance */
.section-reassurance {
    background-color: var(--color-white);
    padding: 40px 0;
}

.reassurance-card {
    text-align: center;
    padding: 20px 10px;
}

.reassurance-card img {
    width: auto;
    height: 50px;
    margin-bottom: 15px;
}

.reassurance-card h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 8px;
}

.reassurance-card p {
    font-size: 13px;
    color: var(--color-text-medium);
    margin: 0;
}

@media (min-width: 768px) {
    .reassurance-card img {
        height: 60px;
    }
}

/* Menu Mobile Overlay */
.menu-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.menu-mobile-overlay.in {
    transform: translateX(0);
}

.menu-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-text-lightest);
}

.menu-close {
    background: none;
    border: none;
    padding: 5px;
}

.menu-close img {
    width: 24px;
    height: 24px;
}

.menu-mobile-icons {
    display: flex;
    gap: 20px;
}

.menu-mobile-icons a {
    position: relative;
}

.menu-mobile-icons img {
    width: 24px;
    height: 24px;
}

.menu-mobile-icons .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--color-secondary);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

.menu-mobile-nav {
    padding: 20px;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.menu-list li {
    border-bottom: 1px solid var(--color-text-lightest);
}

.menu-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.menu-ctas {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.menu-ctas .btn {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.menu-ctas .btn-gold {
    background-color: var(--color-primary);
    color: white;
}

.menu-ctas .btn-burgundy {
    background-color: var(--color-secondary);
    color: white;
}

@media (min-width: 768px) {
    .menu-mobile-overlay {
        display: none;
    }
}

/* Footer */
#footer{
    position:relative;
    border:none;
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 1em 0 2em 0;
    z-index:3;
}

#footer a{
    font-family:var(--font-family);
    color:var(--color-footer-text);
}
#footer #footer-main a{
    display:block;
    padding:4px 0;
}
#footer #footer-main a:not(.btn):focus,
#footer #footer-main a:not(.btn):hover{
    text-decoration:underline;
}

#footer #footer-main a.btn-default{
    margin:20px auto 10px auto;
    padding:4px 12px;
    background-color: var(--color-footer-bg);
    border-color: var(--color-footer-text);
    color: var(--color-footer-text);
}
#footer #footer-main a.btn-default:focus,
#footer #footer-main a.btn-default:hover{
    background-color: var(--color-footer-text);
    border-color: var(--color-footer-bg);
    color: var(--color-footer-bg);
}

#footer-main {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

#footer-main nav {
    text-align: left;
}

#footer-main h3 {
    color: var(--color-footer-text);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}

#footer-main ul {
    list-style: none;
    padding-left: 0;
}

#footer-bottom{
    border:none;
    padding-top:30px;
    padding-bottom:40px;
    text-align:left;
    color:var(--color-footer-text);
}
#footer #footer-bottom,
#footer #footer-bottom a{
    font-size:13px;
    text-decoration:underline;
}
#footer #footer-bottom a:focus,
#footer #footer-bottom a:hover{
    text-decoration:none;
}

#footer .social-networks li{
    margin: 10px 5px;
    text-align: center;
    vertical-align: middle;
}
#footer .social-networks li a img,
#footer .social-networks li a svg{
    width:24px;
    height:auto;
    fill:var(--color-footer-text);
}
#footer .social-networks li a:focus img,
#footer .social-networks li a:hover img,
#footer .social-networks li a:focus svg,
#footer .social-networks li a:hover svg{
    fill:var(--color-text-light);
}

#footer-legal{
    text-align:left;
}

#footer-pay{
    margin-top:30px;
    text-align:left;
}
@media (min-width:768px) {
    #footer{
        padding-bottom:1em;
    }
    #footer-pay{
        margin-top:0;
        text-align:right;
    }
}

#footer .pay-icon{
    display:inline-block;
    padding:4px 12px;
}
#footer #StripeIcon{
    height:24px;
}

#legal-nav{
    display:inline;
}
#legal-menu{
    display:inline;
}

.btn-outline-white {
    display: inline-block;
    border: 1px solid var(--color-white);
    border-bottom-width: 2px;
    color: var(--color-white);
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.btn-outline-white:focus,
.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-links{
    list-style:none;
    margin:0;
    text-align:right;
}
.top-links li{
    display:inline-block;
}
.top-links li a{
    color:var(--color-primary);
}
.top-links li a:focus,
.top-links li a:hover{
    background-color:var(--color-text-lightest);
}

#MainContainer{
    min-height:75px;
}

/* Menu mobile offcanvas */
.offcanvas-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
}

.offcanvas-menu.open {
    left: 0;
}

.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Header du menu mobile */
.offcanvas-header {
    background-color: var(--color-secondary);
    padding: 15px 20px;
}

.offcanvas-header .close-offcanvas {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.offcanvas-header .close-offcanvas img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Corps du menu */
.offcanvas-body {
    padding: 0;
}

/* Menu catégories */
.menu-categories {
    padding: 0;
}

.menu-categories .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-text-lighter);
    text-decoration: none;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}

.menu-categories .menu-item:focus,
.menu-categories .menu-item:hover {
    background-color: var(--color-beige);
}

.menu-categories .menu-item span {
    flex: 1;
}

/* Blocs CTA */
.menu-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 0;
    text-decoration: none;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}

.menu-cta:focus,
.menu-cta:hover {
    opacity: 0.9;
}

.menu-cta-party {
    background-color: var(--color-primary);
}

.menu-cta-ambassadrice {
    background-color: var(--color-secondary);
}

#MenuGauche{
    padding:30px 15px;
    background-color:var(--color-beige-light);
    color:var(--color-text);
}
#MenuGauche ul{
    list-style-type:none;
    padding-left:5px;
}
.TitreMenuGauche{
    margin-bottom:15px;
    font-family:var(--font-family-title);
    font-size:24px;
    color:var(--color-secondary);
}

#MenuGauche .dropdown-menu{
    background-color: transparent;
}

#ContainerPromotions > h3{
    text-align:right;
}

#BlocReassurance{
    padding: 25px 0;
}
#HomepageSlider + #BlocReassurance{
    padding-top: 60px;
}
#BlocReassurance .reassurance{
    text-align:center;
}
#BlocReassurance .reassurance img{
    margin-bottom:15px;
}
#BlocReassurance .reassurance h5{
    margin:5px auto 0 auto;
    font-size:18px;
    color:var(--color-text);
}
#BlocReassurance .reassurance p{
    margin:0 auto;
    font-size:14px;
    color:var(--color-text-medium);
}

.page-catalogue #BlocReassurance{
    background-color: var(--color-beige-bg);
}
.page-catalogue #BlocReassurance .reassurance h5,
.page-catalogue #BlocReassurance .reassurance p{
    color:var(--color-secondary);
}

.logo-container{
    text-align:center;
}
.logo-container a{
    display:inline-block;
}
.logo-container a img{
    max-height:100px;
    margin:5px 0;
}
.page-stripe #IMGLogoEntreprise{
    max-height:100px;
}

.nav-dropdown{
    margin-top:0;
    padding:30px;
    text-align:left;
}
ul.sub-menu{
    display:none;
    position:absolute;
    margin:0;
    padding:1.5em;
    min-width:200px;
    max-width:75%;
    background:var(--color-white);
    box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.05);
    z-index:100;
}
ul.sub-menu li{
    display:block;
}
ul.sub-menu li a{
    display:block;
    padding:0.5em 0.25em;
    color:var(--color-text-medium);
}
ul.sub-menu li a:focus,
ul.sub-menu li a:hover{
    color:var(--color-primary-light);
}

#main-menu > li.has-children:focus ul.sub-menu,
#main-menu > li.has-children:hover ul.sub-menu{
    display:inline-block;
}

.navbar-toggle{
    display:none;
    position:absolute;
    top:3em;
    right:1.5em;
    background:var(--color-white);
    border-color:var(--color-white);
}
.navbar-toggle:focus,
.navbar-toggle:hover{
    border-color:var(--color-white);
}
.navbar-toggle .icon-bar{
    background:var(--color-black);
}

.dropdown-menu{
    position:relative;
    margin-bottom:10px;
    box-shadow:none;
    border:none;
}
.dropdown-menu > ul{
    background:transparent;
    box-shadow:none;
    max-width:100%;
}
.dropdown-menu > ul > li > a{
    border:none;
}
.navbar-nav > li > a{
    padding-left:2em;
    text-transform:uppercase;
    font-weight:bold;
    color:var(--color-text);
}
.navbar-nav > li:focus > a,
.navbar-nav > li:hover > a,
.navbar-nav > li.current > a,
.navbar-nav > li.active > a{
    color:var(--color-primary-light);
}

#main-menu{
    display:inline-block;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:0;
    z-index:1;
}
#main-menu > li *{
    font-size:15px;
}
#main-menu > li{
    position:relative;
    display:inline-block;
    padding:5px;
    vertical-align:middle;
}
#main-menu > li > a:not(.btn){
    padding:5px 4px;
    color:var(--color-secondary-dark);
    font-weight:400;
    text-transform:uppercase;
}
#main-menu > li > a:not(.btn):focus,
#main-menu > li > a:not(.btn):hover{
    color:var(--color-secondary);
    text-decoration:underline;
}

#main-nav.collapse.in{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:calc(100vh - 48px);
    display:block;
    background-color:var(--color-beige);
    color:var(--color-secondary);
    z-index:5;
}
#main-nav.collapse.in > #main-menu > li{
    text-align:center;
}
#main-nav.collapse.in > #main-menu > li > img{
    margin:30px auto;
}
#main-nav.collapse.in > #main-menu > li > a{
    font-size:17px;
}

.top-links > li{
    position:relative;
}

.top-links .nb-prod{
    position:absolute;
    display:flex;
    width:15px;
    height:15px;
    justify-content:center;
    align-items:center;
    padding:2px;
    border-radius:50%;
    font-size:12px;
    color:var(--color-white);
    opacity:0.9;
    top:0;
    right:0;
    background-color:var(--color-secondary);
}

.contact,
.social-networks{
    list-style:none;
    padding-left:0;
    display:block;
}
.contact li{
    display:inline-block;
    margin:6px 8px 6px 0;
    line-height:1.5;
}
.contact li:not(:first-child):before{
    content:'•';
    font-size:20px;
    padding-right:12px;
    color:var(--color-primary);
}
.social-networks li{
    display:inline-block;
    margin:6px 18px;
}
#main-menu .social-networks li{
    margin:12px;
}
.social-networks li a{
    display:block;
    padding:6px;
}
.social-networks li a img{
    max-height:24px;
    height:auto;
}
.social-networks li a:focus img,
.social-networks li a:hover img{
    filter:saturate(0) brightness(75%);
}


.table-striped > tbody > tr:nth-of-type(odd){
    background-color:var(--color-white);
}
.table-striped > tbody > tr:nth-of-type(even){
    background-color:var(--color-beige-light);
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th{
    border:none;
}

.nav-tabs > li > a{
    color:var(--color-link);
}
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover{
    color:var(--color-link-hover);
}

@media (min-width:769px){
    .nav-tabs.nav-tabs-highlight > li.active > a,
    .nav-tabs.nav-tabs-highlight > li.active > a:focus,
    .nav-tabs.nav-tabs-highlight > li.active > a:hover{
        border-top-color:var(--color-primary);
    }
}
@media (max-width:768px){
    .nav-tabs > li.active > a:after,
    .nav-tabs > li.active > a:focus:after,
    .nav-tabs > li.active > a:hover:after{
        background-color:var(--color-primary);
    }
}

@media only screen and (max-width:767px){
    .navbar-toggle{
        display:block;
    }
    .navbar-collapse{
        background:var(--color-white);
        overflow:auto;
        width:100%;
    }
    .navbar-collapse #main-menu{
        height:100%;
    }
    .navbar-collapse #main-menu,
    .navbar-collapse #main-menu > li{
        display:block;
        width:100%;
    }
    #main-menu > li.has-children{
        padding-left:20px;
    }
    .sub-menu-toggle{
        position:absolute;
        left:0;
        top:12px;
        display:inline-block;
    }
    ul.sub-menu{
        position:relative;
        width:100%;
        max-width:100%;
        margin-left:-20px;
    }
    #main-menu > li.has-children:focus ul.sub-menu,
    #main-menu > li.has-children:hover ul.sub-menu{
        display:none;
    }
    #main-menu > li.has-children.ouvert ul.sub-menu{
        display:block;
    }
    #ListeFamilleMenu > li:before, #LstMenuCompte > li:before{
        top:4px;
    }
}

@media (max-width:991px){
    .logo-container a.logo{
        margin-left:15px !important;
        margin-right:15px !important;
    }
    .header .primary .navbar .nav > .parent.active > a,
    .header .primary .navbar .nav > .parent.active:focus > a,
    .header .primary .navbar .nav > .parent.active:hover > a,
    .header .primary .navbar .nav .open-sub span{
        background-color:var(--color-secondary);
    }
    .header .primary .navbar .nav .open-sub span + span{
        height:16px;
        margin:10px 0 0 22px;
        width:2px;
    }
    #MenuGauche{
        margin:1em auto;
    }
    #Produit .Div_BlocProd{
        float:none;
        margin:25px auto 15px auto;
    }
}

@media (min-width:768px){
    #main-nav.navbar-collapse.collapse{
        text-align:center;
    }
    #sec-nav.navbar-collapse.collapse{
        text-align:right;
    }
}

@media (min-width:769px){
    .logo-container a{
        position:absolute;
        width:100%;
    }
    .logo-container a.logo{
        display:block;
    }
    #TitrePage, .TitrePage, .Titre,
    h1{
        font-size:36px;
    }
    h2, .h2{
        font-size:28px;
    }
    .text-right.navbar-collapse{
        text-align:right !important;
    }
    #main-nav.navbar-collapse{
        text-align:center;
    }
    #sec-nav.navbar-collapse{
        text-align:right;
    }
}

@media (min-width:769px) and (max-width:1199px){
    .navbar-collapse #main-menu{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width:992px){
    #header{
        box-shadow:none;
    }
}

@media (min-width:992px) and (max-width:1199px){
    .header .primary .navbar .nav > li > a,
    .header .primary .navbar .nav > li > a:visited{
        font-size:15px;
        padding:10px 5px;
    }
}

@media (min-width:1200px){
    .navbar-collapse #main-menu{
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
    #main-menu > li{
        padding-left:2px;
        padding-right:2px;
    }
    #main-menu > li *{
        font-size:14px;
    }
    .navbar-nav .dropdown-menu,
    .navbar-nav .dropdown.megamenu div.dropdown-menu{
        visibility:visible;
        opacity:1;
        top:auto;
    }
}

@media (min-width:768px) and (max-width:991px){
    .container-wide{
        width:100%;
    }
}

@media (min-width:768px) and (max-width:820px){
    #main-menu > li{
        padding-left:2px;
        padding-right:2px;
    }
    #main-menu > li > a.btn{
        padding:3px;
    }
}

@media (min-width:821px) and (max-width:991px){
    #main-menu > li{
        padding-left:3px;
        padding-right:3px;
    }
}

@media (min-width:1200px){
    .container-wide{
        width:100%;
    }
}

@media (min-width:1320px){
    .container-wide{
        width:90%;
    }
}

@media (min-width:1440px){
    #main-menu > li{
        padding-left:5px;
        padding-right:5px;
    }
}

@media (min-width:1600px){
    .container-wide{
        width:90%;
    }
    #main-menu > li{
        padding-left:7px;
        padding-right:7px;
    }
    #main-menu > li *{
        font-size:15px;
    }
}

@media only screen and (max-width:640px){
    #ecom{
        padding:15px 0 60px 0;
    }
    .contact li{
        display:block;
    }
    .contact li:not(:first-child):before{
        display:none;
    }
}

/* ========================================
   HOMEPAGE HIGHLOVE - STYLES
   ======================================== */

/* Utilitaire : Section pleine largeur dans MainContainer */
.full-width-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
    box-sizing: border-box;
}

/* Container interne pour recentrer le contenu */
.full-width-section .container {
    width: auto !important;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Variante sans container interne (contenu edge-to-edge) */
.full-width-section.no-container {
    padding: 60px 15px;
}

/* Éviter le scroll horizontal causé par 100vw incluant la scrollbar */
body {
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .full-width-section .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .full-width-section.no-container {
        padding: 80px 30px;
    }
}

@media (min-width: 1200px) {
    .full-width-section .container {
        max-width: 1140px;
    }
}

/* Hero Slider */
.section-hero {
    background-color: var(--color-beige);
    padding: 0;
    position: relative;
}

.swiper-hero {
    width: 100%;
    height: clamp(360px, 75vh, 500px);
    position: relative;
}

.swiper-hero .swiper-slide {
    position: relative;
}

.swiper-hero .slide-content {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-hero .slide-overlay {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    max-width: 600px;
    max-height: 85%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.swiper-hero .slide-overlay h2 {
    font-family: var(--font-family-title);
    font-size: 28px;
    color: var(--color-secondary);
    margin-top: 0;
    margin-bottom: 20px;
}

.swiper-hero .slide-overlay p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 20px;
    transition: font-size 0.2s ease;
}

.swiper-hero .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px 40px;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.swiper-hero .btn-primary:focus,
.swiper-hero .btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.swiper-hero .swiper-pagination {
    bottom: 20px !important;
    position: absolute !important;
    width: 100%;
    z-index: 10;
}

.swiper-hero .swiper-pagination-bullet {
    background: var(--color-white);
    box-shadow: 0 0 3px var(--color-text);
    opacity: 0.9;
    width: 12px;
    height: 12px;
}

.swiper-hero .swiper-pagination-bullet-active {
    outline: 1px solid var(--color-white);
    background: var(--color-secondary);
    opacity: 1;
}

.swiper-hero .swiper-button-prev,
.swiper-hero .swiper-button-next {
    color: var(--color-white);
    width: 44px;
    height: 44px;
    padding: 5px;
    border-radius: 5px;
    transition: background 0.3s ease;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 10;
}

.swiper-hero .swiper-button-prev {
    left: 20px !important;
}

.swiper-hero .swiper-button-next {
    right: 20px !important;
}

.swiper-hero .swiper-button-prev:focus,
.swiper-hero .swiper-button-prev:hover,
.swiper-hero .swiper-button-next:focus,
.swiper-hero .swiper-button-next:hover {
    background: rgba(136, 52, 51, 0.5);
}

.swiper-hero .swiper-button-prev:after,
.swiper-hero .swiper-button-next:after {
    font-size: 16px;
}

/* Responsive heights */
@media (max-width: 479px) {
    /* Très petits écrans : max 70vh pour garder de l'espace */
    .swiper-hero {
        height: clamp(300px, 70vh, 400px);
    }

    .swiper-hero .slide-overlay {
        padding: 15px 12px;
        max-width: 92%;
    }

    .swiper-hero .slide-overlay h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .swiper-hero .slide-overlay p {
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .swiper-hero .btn-primary {
        padding: 8px 20px;
        font-size: 13px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    /* Mobiles : max 75vh */
    .swiper-hero {
        height: clamp(340px, 75vh, 450px);
    }

    .swiper-hero .slide-overlay {
        padding: 20px 15px;
        max-width: 90%;
    }

    .swiper-hero .slide-overlay h2 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .swiper-hero .slide-overlay p {
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .swiper-hero .btn-primary {
        padding: 10px 25px;
        font-size: 14px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablettes : plus de hauteur possible */
    .swiper-hero {
        height: clamp(400px, 60vh, 550px);
    }

    .swiper-hero .slide-overlay h2 {
        font-size: 36px;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    /* Desktop standard : bon équilibre */
    .swiper-hero {
        height: clamp(450px, 55vh, 600px);
    }

    .swiper-hero .slide-overlay {
        padding: 50px 30px;
        max-width: 700px;
    }

    .swiper-hero .slide-overlay h2 {
        font-size: 42px;
    }
}

@media (min-width: 1440px) {
    /* Grands écrans : hauteur conséquente */
    .swiper-hero {
        height: clamp(500px, 60vh, 700px);
    }

    .swiper-hero .slide-overlay {
        padding: 60px 40px;
        max-width: 800px;
    }

    .swiper-hero .slide-overlay h2 {
        font-size: 48px;
        margin-bottom: 25px;
    }

    .swiper-hero .slide-overlay p {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .swiper-hero .btn-primary {
        padding: 15px 50px;
        font-size: 16px;
    }
}
/* Section Bienvenue */
.section-bienvenue {
    background-color: var(--color-beige-light);
    padding: 25px 0;
    text-align: center;
}

.section-bienvenue h2 {
    font-family: var(--font-family-title);
    font-size: 28px;
    color: var(--color-secondary);
    margin-bottom: 10px;
}

.section-bienvenue h3 {
    font-family: var(--font-family-subtitle);
    font-size: 26px;
    color: var(--color-secondary);
    font-weight: 400;
    margin-bottom: 25px;
}

.section-bienvenue p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    max-width: 800px;
    margin: 0 auto 15px;
}

.section-bienvenue .vdi-name {
    color: var(--color-primary);
    font-weight: 600;
}

@media (min-width: 768px) {
    .section-bienvenue {
        padding: 25px 0;
    }

    .section-bienvenue h2 {
        font-size: 32px;
    }
}

/* Section Sélection du moment */
.section-selection #SelectionMoment {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}

.section-selection {
    background-color: var(--color-white);
    padding: 25px 0;
}

.section-selection h2 {
    font-family: var(--font-family-title);
    font-size: 32px;
    color: var(--color-secondary);
    text-align: left;
    margin-bottom: 40px;
}

.section-selection .products-carousel {
    position: relative;
}

/* Scrollbar personnalisée pour le carrousel */
.section-selection #SelectionMoment::-webkit-scrollbar {
    height: 10px;
}

/* Firefox */
/*.section-selection #SelectionMoment {
    scrollbar-width: auto;
    scrollbar-color: var(--color-primary) var(--color-beige-bg);
}*/

/* Mobile : carrousel horizontal scrollable */
@media (max-width: 767px) {
    .section-selection #SelectionMoment {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding-bottom: 20px;
    }

    .section-selection .LigneProduit {
        flex: 0 0 250px;
        scroll-snap-align: center;
        width: 250px !important;
        margin: 0 !important;
    }
}

/* Desktop : grille 4 colonnes */
@media (min-width: 768px) {
    .section-selection #SelectionMoment {
        justify-content: space-between;
        gap: 20px;
    }

    .section-selection .LigneProduit {
        flex: 0 0 calc(25% - 15px);
        width: calc(25% - 15px) !important;
        margin: 0 !important;
    }
}

/* Section Pourquoi acheter ici */
.section-pourquoi {
    background-image: url('/images/HIGHLOVE/bg-vague.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0 60px 0;
    position: relative;
    margin-top: 40px;
}

.section-pourquoi h2 {
    font-family: var(--font-family-title);
    font-size: 32px;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 50px;
}

.pourquoi-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: 0;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
    min-height: 280px;
}

.pourquoi-card .card-icon {
    width: 160px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pourquoi-card .card-icon img {
    width: 50%;
    height: auto;
}

.pourquoi-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 15px;
}

.pourquoi-card p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .pourquoi-card {
        margin-bottom: 0;
    }
}

@media (min-width: 992px) {
    .pourquoi-card p {
        padding-left: 2em;
        padding-right: 2em;
    }
}

/* Swiper Pourquoi - Mobile slider */
.swiper-pourquoi {
    overflow: visible;
}

.swiper-pagination-pourquoi {
    display: none;
}

@media (max-width: 767px) {
    .swiper-pourquoi {
        overflow: hidden !important;
        padding-bottom: 50px !important;
    }

    .swiper-pourquoi .swiper-slide {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 8% !important;
    }

    .swiper-pourquoi .pourquoi-card {
        height: auto;
        min-height: 260px;
    }

    .swiper-pagination-pourquoi {
        display: block;
        position: absolute !important;
        bottom: 10px !important;
        left: 0 !important;
        width: 100% !important;
    }

    .swiper-pagination-pourquoi .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: var(--color-white);
        outline:1px solid rgba(0, 0, 0, 0.25);
        opacity: 0.75;
    }

    .swiper-pagination-pourquoi .swiper-pagination-bullet-active {
        background-color: var(--color-secondary);
        outline:1px solid var(--color-white);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .swiper-pourquoi .row-desktop {
        display: flex;
        flex-wrap: wrap;
    }

    .swiper-pourquoi .swiper-slide {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

/* Section Univers produits */
.section-univers {
    background-color: var(--color-white);
    padding: 50px 0;
}

/* Section Formulaire disponibilité */
.section-disponibilite {
    background-color: var(--color-beige-light);
    padding: 25px;
    box-sizing: border-box;
}

.section-disponibilite h2 {
    font-family: var(--font-family-title);
    font-size: 28px;
    color: var(--color-secondary);
    text-align: center;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.section-disponibilite > .container > p {
    text-align: center;
    font-size: 16px;
    color: var(--color-text-medium);
    margin-bottom: 35px;
    box-sizing: border-box;
}

.section-disponibilite .form-control {
    border: 1px solid var(--color-text-lighter);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 10px 15px;
}

.section-disponibilite .btn-primary {
    background-color: var(--color-primary);
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.section-disponibilite .btn-primary:focus,
.section-disponibilite .btn-primary:hover {
    background-color: var(--color-primary-dark);
}