/**

 * La Croquetterie Homepage - Styles CSS

 * Charte graphique officielle - Version PROD

 */



/* =====================================================

   POLICE PERSONNALISÉE - FUSE DISPLAY

   ===================================================== */

@font-face {

    font-family: 'Fuse Display';

    src: url('../fonts/fuse-display-black.woff2') format('woff2'),


         url('../fonts/fuse-display-black.otf') format('opentype'); /* woff2 = -40% (v1.5.33) */

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}



/* =====================================================

   VARIABLES CSS - CHARTE GRAPHIQUE LA CROQUETTERIE

   Version uniformisée PROD

   ===================================================== */

:root {

    /* Couleurs officielles */

    --lc-gris: #414142;

    --lc-vert: #a7bc44;

    --lc-vert-dark: #8fa339;

    --lc-kraft: #d9ceb5;

    --lc-kraft-light: #f5f0e6;

    --lc-kraft-accent: #c8b98f;

    --lc-blanc: #ffffff;

    

    /* Gamme Pop */

    --lc-pop-cyan: #00a8b5;

    --lc-pop-magenta: #e6007e;

    --lc-pop-orange: #f39200;

    --lc-pop-jaune: #fdc300;

    --lc-pop-lime: #c4d600;

    --lc-pop-bleu: #0086c8;

    

    /* ===== TYPOGRAPHY UNIFORMISÉE ===== */

    --lc-font-display: 'Fuse Display', sans-serif;

    --lc-font-body: inherit;

    

    /* Desktop */

    --lc-title-size: 1.8rem;

    --lc-subtitle-size: 1.15rem;

    --lc-text-size: 1rem;

    --lc-small-text-size: 0.9rem;

    

    /* ===== SPACING UNIFORMISÉ ===== */

    --lc-section-spacing: 50px;

    --lc-section-padding: 50px 0;

    /* Valeurs partagees par TOUTES les sections (modifier ici = tout change) */

    --lc-section-max-width: 1200px;

    --lc-title-color: #414142;

    --lc-title-align: center;

    

    /* ===== BORDER RADIUS UNIFORMISÉ ===== */

    --lc-radius-lg: 16px;

    --lc-radius-md: 12px;

    --lc-radius-sm: 8px;

    --lc-radius-btn: 6px;

}



/* ===== RESPONSIVE VARIABLES ===== */

@media (max-width: 768px) {

    :root {

        /* Tailles recommandées pour mobile - plus lisibles */

        --lc-title-size: 1.6rem;        /* ~26px */

        --lc-subtitle-size: 1.1rem;     /* ~18px */

        --lc-text-size: 1rem;           /* 16px - minimum recommandé */

        --lc-small-text-size: 0.9rem;   /* ~14px */

        --lc-section-spacing: 35px;

        --lc-section-padding: 35px 0;

    }

}



@media (max-width: 480px) {

    :root {

        /* Petit mobile - garder lisible */

        --lc-title-size: 1.5rem;        /* 24px */

        --lc-subtitle-size: 1.05rem;    /* ~17px */

        --lc-text-size: 1rem;           /* 16px */

        --lc-small-text-size: 0.875rem; /* 14px */

        --lc-section-spacing: 30px;

        --lc-section-padding: 30px 0;

    }

}



/* Forcer l'héritage des polices du site pour le corps */

.lc-hero-slider,

.lc-categories-section,

.lc-bestsellers,

.lc-about-section {

    background: var(--lc-sec-bg, transparent);

    font-family: inherit;

}



/* ============================================================

   Sections pleine largeur (full-bleed) : socle commun factorise

   Chaque section ne conserve que ses props propres (padding, fond...)

   ============================================================ */

.lc-hero-slider, .lc-categories-section, .lc-recipe-section, .lc-bestsellers, .lc-about-section,

.lc-engagements-section, .lc-stores-section, .lc-reassurance-section, .lc-toggle-section, .lc-other-section, .lc-rtop-section {

    width: var(--lc-fullbleed, 100vw) !important;

    max-width: var(--lc-fullbleed, 100vw) !important;

    position: relative;

    left: 50%;

    transform: translateX(-50%);

    margin-left: 0;

    margin-right: 0;

    box-sizing: border-box;

}



/* Classes utilitaires desktop/mobile */

.lc-desktop-only {

    display: block;

}

.lc-mobile-only {

    display: none;

}



@media (max-width: 992px) {

    .lc-desktop-only {

        display: none !important;

    }

    .lc-mobile-only {

        display: block !important;

    }

}



/* Forcer Fuse Display pour tous les titres */

.lc-main-title,

.lc-section-header h2,

.lc-recipe-content h2,

.lc-about-content h2,

.lc-category-label h3 {

    font-family: var(--lc-font-display) !important;

}



/* =====================================================

   STYLE BOUTON UNIFIÉ - Basé sur le thème

   ===================================================== */

.lc-btn {

    display: inline-block;

    text-align: center;

    font-family: var(--lc-font-display);

    font-weight: 700;

    font-size: 1rem;

    line-height: 1.5;

    text-decoration: none;

    border: 1px solid;

    padding: 10px 14px 11px;

    border-radius: 2px;

    transition: .3s;

    transition-property: background-color, border-color, color;

    cursor: pointer;

    white-space: nowrap;

}



@media (min-width: 960px) {

    .lc-btn {

        padding-top: 12px;

        padding-bottom: 12px;

    }

}



/* Bouton primaire - Fond vert */

.lc-btn-primary {

    background-color: var(--lc-vert);

    border-color: var(--lc-vert);

    color: var(--lc-blanc);

}



.lc-btn-primary:hover {

    background-color: var(--lc-vert-dark);

    border-color: var(--lc-vert-dark);

    color: var(--lc-blanc);

    text-decoration: none;

}



/* Bouton secondaire - Fond gris */

.lc-btn-secondary {

    background-color: var(--lc-gris);

    border-color: var(--lc-gris);

    color: var(--lc-blanc);

}



.lc-btn-secondary:hover {

    background-color: #333;

    border-color: #333;

    color: var(--lc-blanc);

    text-decoration: none;

}



/* Bouton outline blanc (pour fonds colorés) */

.lc-btn-outline-white {

    background-color: transparent;

    border-color: var(--lc-blanc);

    color: var(--lc-blanc);

}



.lc-btn-outline-white:hover {

    background-color: var(--lc-blanc);

    border-color: var(--lc-blanc);

    color: var(--lc-gris);

    text-decoration: none;

}



/* Bouton blanc plein (pour fonds sombres) */

.lc-btn-white {

    background-color: var(--lc-blanc);

    border-color: var(--lc-blanc);

    color: var(--lc-gris);

}



.lc-btn-white:hover {

    background-color: var(--lc-vert);

    border-color: var(--lc-vert);

    color: var(--lc-blanc);

    text-decoration: none;

}



/* Bouton kraft (pour fonds clairs) */

.lc-btn-kraft {

    background-color: var(--lc-kraft);

    border-color: var(--lc-kraft);

    color: var(--lc-gris);

}



.lc-btn-kraft:hover {

    background-color: #c9b897;

    border-color: #c9b897;

    color: var(--lc-gris);

    text-decoration: none;

}



/* =====================================================

   FORMES ORGANIQUES DÉCORATIVES (Images charte graphique)

   ===================================================== */

.lc-organic-shape {

    position: absolute;

    z-index: 0;

    opacity: 0.85;

    pointer-events: none;

    object-fit: contain;

}



/* Suppression des anciennes couleurs (on utilise les images) */

.shape-cyan, .shape-magenta, .shape-orange, 

.shape-jaune, .shape-lime, .shape-bleu { 

    background: transparent !important; 

}



/* =====================================================

   SECTION 1: HERO SLIDER - STYLE PREMIUM

   ===================================================== */

.lc-hero-slider {

    height: 550px;

    min-height: 450px;

    max-height: 600px;

    overflow: hidden;

    background: var(--lc-sec-bg, var(--lc-gris));

    box-sizing: border-box;

    /* Espace pour le toggle qui déborde */

    margin-bottom: 0;

    z-index: 1;

}



/* Hauteur réduite sur tablette */

@media (max-width: 992px) {

    .lc-hero-slider {

        height: 420px !important;

        min-height: 380px !important;

        max-height: 450px !important;

    }

}



/* Hauteur mobile - standard e-commerce + espace pour toggle */

@media (max-width: 768px) {

    .lc-hero-slider {

        height: 450px !important;

        min-height: 400px !important;

        max-height: 480px !important;

    }

}



@media (max-width: 480px) {

    .lc-hero-slider {

        height: 420px !important;

        min-height: 380px !important;

        max-height: 450px !important;

    }

}



/* Fix pour PrestaShop themes avec containers */

#content .lc-hero-slider,

.page-content .lc-hero-slider,

#wrapper .lc-hero-slider,

#main .lc-hero-slider,

.container .lc-hero-slider,

[class*="col-"] .lc-hero-slider {

    width: var(--lc-fullbleed, 100vw) !important;

    max-width: var(--lc-fullbleed, 100vw) !important;

    left: 50%;

    transform: translateX(-50%);

    margin-left: 0;

    margin-right: 0;

    padding-left: 0;

    padding-right: 0;

}



.lc-slider-wrapper {

    width: 100%;

    height: 100%;

    position: relative;

}



.lc-slide {

    width: 100%;

    height: 100%;

    display: none;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: 0;

    left: 0;

    background-color: var(--lc-gris);

    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform;

}



/* Image de fond responsive */

.lc-slide-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

}



.lc-slide-bg-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



/* Sur mobile, appliquer le focal point si défini */

@media (max-width: 768px) {

    .lc-slide-bg-img[style*="--mobile-focus"] {

        object-position: var(--mobile-focus) !important;

    }

}



/* Overlay sombre pour lisibilité du texte */

.lc-slide-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



/* Desktop : afficher overlay desktop, masquer mobile */

.lc-overlay-mobile { display: none; }



@media (max-width: 768px) {

    .lc-overlay-desktop { display: none; }

    .lc-overlay-mobile { display: block; }

}



.lc-slide.active {

    display: flex;

    justify-content: center; /* Par défaut centré */

    align-items: center;

}



/* Formes décoratives du slider (images) - Plus subtiles */

.lc-hero-slider .lc-organic-shape {

    opacity: 0.15;

    z-index: 2;

}

.lc-hero-slider .lc-organic-shape.s1 {

    width: 250px; height: auto;

    top: -5%; left: -5%;

    transform: rotate(-15deg);

    animation: lcFloat 12s ease-in-out infinite;

}

.lc-hero-slider .lc-organic-shape.s2 {

    width: 180px; height: auto;

    bottom: 10%; left: 5%;

    transform: rotate(25deg);

    animation: lcFloat 10s ease-in-out infinite -2s;

}

.lc-hero-slider .lc-organic-shape.s3 {

    width: 220px; height: auto;

    top: 5%; right: -3%;

    transform: rotate(10deg);

    animation: lcFloat 11s ease-in-out infinite -4s;

}

.lc-hero-slider .lc-organic-shape.s4 {

    width: 150px; height: auto;

    bottom: 5%; right: 10%;

    transform: rotate(-20deg);

    animation: lcFloat 9s ease-in-out infinite -1s;

}

.lc-hero-slider .lc-organic-shape.s5 {

    width: 120px; height: auto;

    top: 40%; right: 5%;

    animation: lcFloat 13s ease-in-out infinite -3s;

}



@keyframes lcFloat {

    0%, 100% { transform: translateY(0) rotate(0deg); }

    50% { transform: translateY(-20px) rotate(3deg); }

}



/* Contenu du slide - Style Premium */

.lc-slide-content {

    text-align: center;

    color: var(--lc-blanc);

    z-index: 10;

    padding: 40px;

    max-width: 900px;

    position: relative;

}



/* Position du bloc texte (gauche / centre / droite) */

.lc-slide-content.lc-pos-left {

    margin-right: auto;

    margin-left: 5%;

}

.lc-slide-content.lc-pos-center {

    margin-left: auto;

    margin-right: auto;

}

.lc-slide-content.lc-pos-right {

    margin-left: auto;

    margin-right: 5%;

}



/* Alignement du texte */

.lc-slide-content.lc-align-left {

    text-align: left;

}

.lc-slide-content.lc-align-left .lc-surtitle {

    justify-content: flex-start;

}

.lc-slide-content.lc-align-left .lc-subtitle {

    margin-left: 0;

}

.lc-slide-content.lc-align-left .lc-cta-buttons {

    justify-content: flex-start;

}



.lc-slide-content.lc-align-center {

    text-align: center;

}

.lc-slide-content.lc-align-center .lc-surtitle {

    justify-content: center;

}

.lc-slide-content.lc-align-center .lc-cta-buttons {

    justify-content: center;

}



.lc-slide-content.lc-align-right {

    text-align: right;

}

.lc-slide-content.lc-align-right .lc-surtitle {

    justify-content: flex-end;

}

.lc-slide-content.lc-align-right .lc-subtitle {

    margin-left: auto;

    margin-right: 0;

}

.lc-slide-content.lc-align-right .lc-cta-buttons {

    justify-content: flex-end;

}



/* Responsive positionnement texte slider */

@media (min-width: 769px) and (max-width: 1200px) {

    /* Tablette : marges plus prononcées */

    .lc-slide-content.lc-pos-left {

        margin-left: 8%;

    }

    .lc-slide-content.lc-pos-right {

        margin-right: 8%;

    }

}



@media (max-width: 768px) {

    /* Mobile : toujours centré pour meilleure lisibilité */

    .lc-slide-content.lc-pos-left,

    .lc-slide-content.lc-pos-center,

    .lc-slide-content.lc-pos-right {

        margin-left: auto !important;

        margin-right: auto !important;

    }

    

    /* Texte toujours centré sur mobile */

    .lc-slide-content.lc-align-left,

    .lc-slide-content.lc-align-center,

    .lc-slide-content.lc-align-right {

        text-align: center !important;

    }

    

    .lc-slide-content.lc-align-left .lc-surtitle,

    .lc-slide-content.lc-align-right .lc-surtitle {

        justify-content: center !important;

    }

    

    .lc-slide-content.lc-align-left .lc-cta-buttons,

    .lc-slide-content.lc-align-right .lc-cta-buttons {

        justify-content: center !important;

    }

}



/* Surtitre avec drapeau */

.lc-surtitle {

    font-family: inherit;

    font-size: 1rem;

    font-weight: 500;

    letter-spacing: 1px;

    margin-bottom: 20px;

    opacity: 0.95;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



.lc-flag {

    font-size: 1.2rem;

}



/* Titre principal - Police Fuse Display */

.lc-main-title {

    font-family: var(--lc-font-display) !important;

    font-size: clamp(2.5rem, 6vw, 4.5rem);

    font-weight: 700;

    margin-bottom: 20px;

    line-height: 1.15;

    letter-spacing: -0.5px;

    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

    color: var(--lc-blanc, #fff);

}



/* Sous-titre */

.lc-subtitle {

    font-family: inherit;

    font-size: clamp(1rem, 2vw, 1.3rem);

    font-weight: 400;

    margin-bottom: 35px;

    opacity: 0.9;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



/* =====================================================

   BOUTONS CTA - STYLE UNIFORMISÉ

   ===================================================== */

.lc-cta-buttons {

    display: flex;

    gap: 15px;

    justify-content: center;

    flex-wrap: wrap;

}



.lc-cta-btn {

    display: inline-block;

    text-align: center;

    font-family: var(--lc-font-display);

    font-weight: 700;

    font-size: var(--lc-text-size);

    line-height: 1.5;

    text-decoration: none;

    border: 2px solid;

    padding: 12px 28px;

    border-radius: 6px !important; /* Forcé - rectangulaire avec petits coins */

    transition: all 0.3s ease;

    cursor: pointer;

    min-width: 140px;

}



@media (min-width: 960px) {

    .lc-cta-btn {

        padding: 14px 35px;

    }

}



@media (max-width: 480px) {

    .lc-cta-btn {

        padding: 10px 24px;

        min-width: 120px;

        font-size: var(--lc-small-text-size);

    }

}



.lc-cta-btn.lc-cta-primary {

    background-color: var(--lc-blanc);

    border-color: var(--lc-blanc);

    color: var(--lc-gris);

}



.lc-cta-btn.lc-cta-primary:hover {

    background-color: var(--lc-vert);

    border-color: var(--lc-vert);

    color: var(--lc-blanc);

    text-decoration: none;

}



.lc-cta-btn.lc-cta-secondary {

    background-color: transparent;

    border-color: var(--lc-blanc);

    color: var(--lc-blanc);

}



.lc-cta-btn.lc-cta-secondary:hover {

    background-color: var(--lc-blanc);

    border-color: var(--lc-blanc);

    color: var(--lc-gris);

    text-decoration: none;

}



/* Navigation du slider - en bas à droite sur desktop */

.lc-slider-nav {

    position: absolute;

    bottom: 20px;

    right: 20px;

    left: auto;

    transform: none;

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 25; /* Au-dessus du toggle */

}



.lc-slider-prev,

.lc-slider-next {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.5);

    background: rgba(255,255,255,0.15);

    color: white;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 14px;

    position: relative;

    z-index: 25; /* Au-dessus du toggle */

}



.lc-slider-prev:hover,

.lc-slider-next:hover {

    background: var(--lc-vert);

    border-color: var(--lc-vert);

    color: var(--lc-gris);

}



.lc-slider-dots {

    display: none; /* Dots masqués */

}



.lc-dot {

    display: none; /* Dots masqués */

}



.lc-dot.active,

.lc-dot:hover {

    background: var(--lc-vert);

    transform: scale(1.2);

}



/* Mobile : flèches en bas du slider, au-dessus du toggle */

@media (max-width: 768px) {

    .lc-slider-nav {

        top: auto;

        bottom: 70px;

        transform: none;

        left: 15px;

        right: 15px;

        justify-content: space-between;

        width: calc(100% - 30px);

        z-index: 25;

    }

    

    .lc-slider-prev {

        order: 1;

    }

    

    .lc-slider-dots {

        display: none; /* Dots masqués */

    }

    

    .lc-slider-next {

        order: 3;

    }

    

    .lc-slider-prev,

    .lc-slider-next {

        width: 34px;

        height: 34px;

        font-size: 11px;

        background: rgba(255,255,255,0.25);

    }

}



/* =====================================================

   SECTION 2: CATÉGORIES / NOS UNIVERS

   ===================================================== */

.lc-categories-section {

    padding: 40px 15px 30px 15px;

    background: var(--lc-sec-bg, transparent);

    box-sizing: border-box;

}



.lc-categories-section > .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

}



.lc-categories-section .lc-section-header {

    text-align: left;

    margin-bottom: 30px;

}



.lc-categories-section .lc-section-header h2 {

    font-family: var(--lc-font-display);

    color: var(--lc-vert);

    font-size: var(--lc-title-size);

    margin: 0;

    font-weight: 700;

}



/* =====================================================

   SECTION HEADER - STYLE UNIFORMISÉ

   ===================================================== */

.lc-section-header {

    text-align: center;

    margin-bottom: var(--lc-section-spacing);

}



.lc-section-header h2 {

    font-family: var(--lc-font-display);

    font-size: var(--lc-title-size);

    color: var(--lc-gris);

    margin-bottom: 10px;

    font-weight: 700;

    line-height: 1.2;

}



.lc-section-header p {

    color: #666;

    font-size: var(--lc-subtitle-size);

    line-height: 1.5;

}



.lc-categories-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}



.lc-category-card {

    position: relative;

    cursor: pointer;

    transition: transform 0.4s ease;

    text-decoration: none;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.lc-category-card:hover {

    transform: translateY(-8px);

    text-decoration: none;

}



/* Forme kraft en arrière-plan */

.lc-category-bg {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 85%;

    z-index: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



.lc-kraft-shape {

    width: 100%;

    height: 100%;

    object-fit: contain;

    opacity: 1;

    transition: transform 0.4s ease;

}



.lc-category-card:hover .lc-kraft-shape {

    transform: scale(1.05);

}



/* Image de l'animal */

.lc-category-img {

    position: relative;

    z-index: 1;

    width: 100%;

    aspect-ratio: 1/1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.lc-category-img img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    transition: transform 0.4s ease;

}



.lc-category-card:hover .lc-category-img img {

    transform: scale(1.08);

}



.lc-category-placeholder {

    width: 150px;

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 5rem;

}



/* Label sous l'image */

.lc-category-label {

    text-align: center;

    padding: 15px 10px;

    position: relative;

    z-index: 1;

}



.lc-category-label h3 {

    font-family: var(--lc-font-display);

    font-size: 1.2rem;

    margin-bottom: 5px;

    font-weight: 700;

    color: var(--lc-gris);

    transition: color 0.3s ease;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.lc-category-card:hover .lc-category-label h3 {

    color: var(--lc-vert-dark);

}



.lc-category-label span {

    font-size: var(--lc-small-text-size);

    color: var(--lc-vert-dark, #8fa339);

}



/* =====================================================

   SECTION 3: TROUVER SA RECETTE - Design card avec image débordante

   ===================================================== */

.lc-recipe-section {

    padding: 52px 15px 30px;

    background: var(--lc-sec-bg, var(--lc-blanc));

    z-index: 1;

    box-sizing: border-box;

}



.lc-recipe-section > .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

}



.lc-recipe-card {

    position: relative;

    display: flex;

    align-items: stretch;

    min-height: 320px;

    border-radius: var(--lc-radius-lg);

    overflow: visible;

}



/* Formes décoratives subtiles */

.lc-recipe-card .lc-organic-shape.r1 {

    width: 180px; height: auto;

    top: -40px; left: -60px;

    opacity: 0.2;

    animation: lcFloat 12s ease-in-out infinite;

}

.lc-recipe-card .lc-organic-shape.r2 {

    width: 120px; height: auto;

    bottom: -30px; left: 30%;

    opacity: 0.25;

    animation: lcFloat 10s ease-in-out infinite -3s;

}

.lc-recipe-card .lc-organic-shape.r3 {

    width: 80px; height: auto;

    top: 15%; left: 45%;

    opacity: 0.2;

    animation: lcFloat 11s ease-in-out infinite -6s;

}



/* Zone texte - côté gauche */

.lc-recipe-content {

    flex: 1;

    max-width: 50%;

    padding: 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    z-index: 2;

}



.lc-recipe-content h2 {

    font-family: var(--lc-font-display) !important;

    font-size: var(--lc-title-size);

    margin-bottom: 15px;

    font-weight: 700;

    color: var(--lc-recipe-title-color, var(--lc-blanc));

    line-height: 1.2;

}



.lc-recipe-content p {

    font-size: var(--lc-text-size);

    margin-bottom: 25px;

    color: var(--lc-recipe-text-color, var(--lc-blanc));

    line-height: 1.6;

    opacity: 0.9;

}



.lc-recipe-cta {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: var(--lc-font-display);

    font-weight: 700;

    font-size: var(--lc-small-text-size);

    line-height: 1.5;

    text-decoration: none;

    border: 2px solid;

    padding: 12px 24px;

    border-radius: var(--lc-radius-btn);

    transition: all 0.3s ease;

    cursor: pointer;

    background-color: var(--lc-recipe-btn-color, var(--lc-vert));

    border-color: var(--lc-recipe-btn-color, var(--lc-vert));

    color: var(--lc-recipe-btn-text-color, var(--lc-blanc));

    width: fit-content;

}



.lc-recipe-cta:hover {

    filter: brightness(0.93);

    text-decoration: none;

    transform: translateY(-2px);

}



.lc-recipe-cta svg {

    transition: transform 0.3s ease;

}



.lc-recipe-cta:hover svg {

    transform: translateX(4px);

}



/* Zone image - côté droit, transparente */

.lc-recipe-image-zone {

    flex: 0 0 55%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

    pointer-events: none; /* Permettre les clics au travers */

}



.lc-recipe-img {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    max-width: 130%;

    max-height: 160%;

    width: auto;

    height: auto;

    object-fit: contain;

    z-index: 3;

    pointer-events: none; /* Permettre les clics au travers */

}



.lc-recipe-placeholder {

    font-size: 4rem;

    opacity: 0.5;

}



/* Responsive */

@media (max-width: 992px) {

    .lc-recipe-card {

        min-height: 280px;

    }

    

    .lc-recipe-content {

        padding: 40px;

    }

    

    .lc-recipe-content h2 {

        font-size: 26px;

    }

    

    .lc-recipe-img {

        right: -20px;

        max-height: 150%;

        max-width: 120%;

    }

}



@media (max-width: 768px) {

    .lc-recipe-section {

        padding: 0;

        padding-bottom: 30px;

        background: transparent !important;

        margin-left: 0;

        margin-right: 0;

        width: var(--lc-fullbleed, 100vw) !important;

        max-width: var(--lc-fullbleed, 100vw) !important;

        left: 50%;

        transform: translateX(-50%);

        box-sizing: border-box;

    }

    

    .lc-recipe-section > .container {

        max-width: 100% !important;

        width: 100% !important;

        padding: 0 !important;

        margin: 0 !important;

    }

    

    .lc-recipe-card {

        flex-direction: column;

        min-height: auto;

        overflow: visible;

        border-radius: 0;

        position: relative;

        margin: 0;

        width: 100% !important;

    }

    

    .lc-recipe-content {

        max-width: 100%;

        width: 100%;

        padding: 35px 25px 15px;

        position: relative;

        z-index: 2;

        text-align: center;

        align-items: center;

        box-sizing: border-box;

    }

    

    .lc-recipe-content h2 {

        font-size: 22px;

        margin-bottom: 10px;

    }

    

    .lc-recipe-content p {

        font-size: 14px;

        margin-bottom: 15px;

    }

    

    .lc-recipe-image-zone {

        position: relative;

        width: 100%;

        display: flex;

        justify-content: center;

        z-index: 15;

    }

    

    .lc-recipe-img {

        position: relative;

        right: auto;

        top: auto;

        transform: none;

        max-width: 85%;

        width: auto;

        height: auto;

        margin-top: -15px;

        margin-bottom: -42%;

        z-index: 15;

        pointer-events: none;

    }

    

    /* Masquer les formes sur mobile */

    .lc-recipe-card .lc-organic-shape {

        display: none;

    }

}



/* =====================================================

   SECTION 4: MEILLEURES VENTES

   ===================================================== */

.lc-bestsellers {

    padding: 50px 15px 30px 15px; /* Moins de padding en bas */

    background: var(--lc-sec-bg, var(--lc-blanc));

    box-sizing: border-box;

}



/* Section Nouveautés - hérite de bestsellers avec padding ajusté */

.lc-newproducts {

    padding: 30px 15px 50px 15px;

}



/* =====================================================

   NOTE v136 : Les styles des miniatures #new-products sont désormais

   gérés uniquement via les classes partagées (.lc-products-slider,

   .lc-bestsellers, .lc-newproducts) dans la section "MINIATURES PRODUIT"

   plus bas. Plus besoin de dupliquer les styles par ID.

   ===================================================== */



.lc-bestsellers > .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

}



/* Header avec titre à gauche et boutons à droite */

.lc-bestsellers-header {

    display: block;

    text-align: center;

    margin-bottom: 25px;

    position: relative;

    z-index: 20;

    padding: 5px 0;

}



.lc-bestsellers-header h2 {

    font-family: var(--lc-font-display);

    font-size: var(--lc-title-size);

    color: var(--lc-vert);

    margin: 0;

    font-weight: 700;

    padding-right: 0;

}



.lc-bestsellers-header .lc-products-controls {

    margin-top: 0;

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    padding-left: 15px;

}



/* Slider produits horizontal */

.lc-products-slider {

    display: flex !important;

    flex-wrap: nowrap !important;

    gap: 20px;

    overflow-x: auto;

    padding: 20px 0;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    scroll-behavior: smooth;

}



.lc-products-slider::-webkit-scrollbar {

    display: none;

}



/* Adapter les miniatures pour le slider horizontal */

.lc-products-slider.products .product-miniature {

    flex: 0 0 calc((100% - 60px) / 4) !important;

    width: calc((100% - 60px) / 4) !important;

    max-width: calc((100% - 60px) / 4) !important;

    scroll-snap-align: start;

    margin-bottom: 0 !important;

}



/* Contrôles du slider produits */

.lc-products-controls {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 15px;

}



.lc-products-viewport {

    position: relative;

}



.lc-products-btn {

    position: absolute;

    top: 38%;

    transform: translateY(-50%);

    z-index: 5;

    width: 44px;

    height: 44px;

    border-radius: 10px;

    border: none;

    background: var(--lc-vert);

    color: var(--lc-blanc);

    cursor: pointer;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.lc-products-prev,

.lc-newproducts-prev {

    left: -52px;

}



.lc-products-next,

.lc-newproducts-next {

    right: -52px;

}



.lc-products-btn svg {

    width: 20px;

    height: 20px;

}



.lc-products-btn:hover {

    background: var(--lc-vert-dark);

    color: var(--lc-blanc);

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);

    transform: translateY(calc(-50% - 1px));

}



/* Fleches : sans gouttiere suffisante, on les ramene au bord (leger chevauchement) */

@media (max-width: 1273px) {

    .lc-products-prev,

    .lc-newproducts-prev {

        left: 4px;

    }

    

    .lc-products-next,

    .lc-newproducts-next {

        right: 4px;

    }

}



/* Responsive miniatures slider */

@media (max-width: 768px) {

    .lc-bestsellers:not(.lc-newproducts) {

        padding-top: 40px;

        padding-bottom: 30px;

    }

    

    .lc-newproducts {

        padding-top: 20px;

        padding-bottom: 0;

    }

    

    .lc-bestsellers:not(.lc-newproducts) {

        margin-top: 34%; /* descend Meilleures ventes sous l'image recette qui deborde */

    }

    

    .lc-bestsellers-header h2 {

        font-size: 22px;

    }

    

    .lc-products-slider.products .product-miniature {

        flex: 0 0 250px !important;

        width: 250px !important;

        max-width: 250px !important;

    }

}



@media (max-width: 576px) {

    .lc-products-slider.products .product-miniature {

        flex: 0 0 230px !important;

        width: 230px !important;

        max-width: 230px !important;

    }

}





/* ============================================

   MINIATURES PRODUIT - STYLES COMPLETS

   Pour .lc-bestsellers ET .lc-newproducts

   ============================================ */



/* Variable couleur custom */

.lc-products-slider .product-miniature,

.lc-bestsellers .product-miniature,

.lc-newproducts .product-miniature {

    --custom-color: #a7bc44;

}



/* Lien principal en flex column */

.lc-products-slider .product-miniature > a,

.lc-bestsellers .product-miniature > a,

.lc-newproducts .product-miniature > a {

    display: flex !important;

    flex-direction: column !important;

    height: 100% !important;

}



/* Hover sur le titre */

.lc-products-slider .product-miniature > a:hover .product-title,

.lc-products-slider .product-miniature > a:focus .product-title,

.lc-bestsellers .product-miniature > a:hover .product-title,

.lc-bestsellers .product-miniature > a:focus .product-title,

.lc-newproducts .product-miniature > a:hover .product-title,

.lc-newproducts .product-miniature > a:focus .product-title {

    color: var(--custom-color) !important;

}



/* ============================================

   STRUCTURE FLEXBOX PRODUCT-DESCRIPTION

   ============================================ */



.lc-products-slider .product-miniature .product-description,

.lc-bestsellers .product-miniature .product-description,

.lc-newproducts .product-miniature .product-description {

    display: flex !important;

    flex-direction: column !important;

    padding: 0 !important;

    margin: 0 !important;

    gap: 2px !important;

    text-align: left !important;

}



.lc-products-slider .product-miniature .thumbnail-container,

.lc-bestsellers .product-miniature .thumbnail-container,

.lc-newproducts .product-miniature .thumbnail-container {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

    background: #fafafa !important;

    border-radius: 8px !important;

}



/* ============================================

   AVIS CLIENTS (ORDER: 1)

   ============================================ */



.lc-products-slider .product-miniature .product-list-reviews,

.lc-bestsellers .product-miniature .product-list-reviews,

.lc-newproducts .product-miniature .product-list-reviews {

    order: 1 !important;

    display: flex !important;

    align-items: center !important;

    min-height: 16px !important;

    margin: 0 !important;

    padding: 0 !important;

}



.lc-products-slider .product-miniature .product-list-reviews:empty,

.lc-bestsellers .product-miniature .product-list-reviews:empty,

.lc-newproducts .product-miniature .product-list-reviews:empty {

    display: none !important;

}



.lc-products-slider .product-miniature .product-list-reviews .grc-widget-category-stars,

.lc-products-slider .product-miniature .product-list-reviews > div,

.lc-bestsellers .product-miniature .product-list-reviews .grc-widget-category-stars,

.lc-bestsellers .product-miniature .product-list-reviews > div,

.lc-newproducts .product-miniature .product-list-reviews .grc-widget-category-stars,

.lc-newproducts .product-miniature .product-list-reviews > div {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



.lc-products-slider .product-miniature .product-list-reviews .grc-widget-category-stars-icon,

.lc-bestsellers .product-miniature .product-list-reviews .grc-widget-category-stars-icon,

.lc-newproducts .product-miniature .product-list-reviews .grc-widget-category-stars-icon {

    display: none !important;

}



.lc-products-slider .product-miniature .product-list-reviews .grc-widget-category-stars-stars,

.lc-bestsellers .product-miniature .product-list-reviews .grc-widget-category-stars-stars,

.lc-newproducts .product-miniature .product-list-reviews .grc-widget-category-stars-stars {

    display: flex !important;

    align-items: center !important;

    color: #f5a623 !important;

    font-size: 10px !important;

}



.lc-products-slider .product-miniature .product-list-reviews .grc-widget-category-stars-stars::before,

.lc-products-slider .product-miniature .product-list-reviews .grc-widget-category-stars-stars::after,

.lc-bestsellers .product-miniature .product-list-reviews .grc-widget-category-stars-stars::before,

.lc-bestsellers .product-miniature .product-list-reviews .grc-widget-category-stars-stars::after,

.lc-newproducts .product-miniature .product-list-reviews .grc-widget-category-stars-stars::before,

.lc-newproducts .product-miniature .product-list-reviews .grc-widget-category-stars-stars::after {

    /* Laissé volontairement vide : les pseudo-éléments dessinent les étoiles, ne pas les masquer */

}



.lc-products-slider .product-miniature .product-list-reviews p,

.lc-products-slider .product-miniature .product-list-reviews span,

.lc-bestsellers .product-miniature .product-list-reviews p,

.lc-bestsellers .product-miniature .product-list-reviews span,

.lc-newproducts .product-miniature .product-list-reviews p,

.lc-newproducts .product-miniature .product-list-reviews span {

    font-size: 10px !important;

    color: #666 !important;

    margin: 0 !important;

    line-height: 1 !important;

}



.lc-products-slider .product-miniature .product-list-reviews .grc-widget-category-stars p,

.lc-bestsellers .product-miniature .product-list-reviews .grc-widget-category-stars p,

.lc-newproducts .product-miniature .product-list-reviews .grc-widget-category-stars p {

    font-size: 10px !important;

    margin: 0 !important;

}



/* ============================================

   SHORT DESC (ORDER: 2)

   ============================================ */



.lc-products-slider .product-miniature .product-short-desc,

.lc-bestsellers .product-miniature .product-short-desc,

.lc-newproducts .product-miniature .product-short-desc {

    order: 2 !important;

    margin: 0 !important;

    padding: 0 !important;

}



.lc-products-slider .product-miniature .product-short-desc .short-desc-text,

.lc-bestsellers .product-miniature .product-short-desc .short-desc-text,

.lc-newproducts .product-miniature .product-short-desc .short-desc-text {

    font-size: 12px !important;

    line-height: 1.35 !important;

    color: #444 !important;

    max-height: none !important;

    overflow: visible !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

}



/* ============================================

   TITLE (ORDER: 3)

   ============================================ */



.lc-products-slider .product-miniature h2.product-title,

.lc-products-slider .product-miniature h3.product-title,

.lc-bestsellers .product-miniature h2.product-title,

.lc-bestsellers .product-miniature h3.product-title,

.lc-newproducts .product-miniature h2.product-title,

.lc-newproducts .product-miniature h3.product-title {

    order: 3 !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    margin: 5px 0 0 0 !important;

    padding: 0 !important;

    color: #333 !important;

    text-transform: uppercase !important;

}



/* ============================================

   PRICE (ORDER: 4)

   ============================================ */



.lc-products-slider .product-miniature .product-price-and-shipping,

.lc-bestsellers .product-miniature .product-price-and-shipping,

.lc-newproducts .product-miniature .product-price-and-shipping {

    order: 4 !important;

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: baseline !important;

    gap: 4px !important;

    margin: 4px 0 0 0 !important;

}



.lc-products-slider .product-miniature .lc-best-price-widget,

.lc-products-slider .product-miniature .price-line,

.lc-bestsellers .product-miniature .lc-best-price-widget,

.lc-bestsellers .product-miniature .price-line,

.lc-newproducts .product-miniature .lc-best-price-widget,

.lc-newproducts .product-miniature .price-line {

    display: flex !important;

    align-items: baseline !important;

    gap: 4px !important;

}



.lc-products-slider .product-miniature .price-label,

.lc-bestsellers .product-miniature .price-label,

.lc-newproducts .product-miniature .price-label {

    font-size: 12px !important;

    color: #666 !important;

    font-weight: 400 !important;

}



.lc-products-slider .product-miniature .price-line .price,

.lc-products-slider .product-miniature .lc-best-price-widget .price,

.lc-bestsellers .product-miniature .price-line .price,

.lc-bestsellers .product-miniature .lc-best-price-widget .price,

.lc-newproducts .product-miniature .price-line .price,

.lc-newproducts .product-miniature .lc-best-price-widget .price {

    font-size: 16px !important;

    font-weight: 700 !important;

    color: var(--lc-vert-dark, #8fa339) !important;

}



.lc-products-slider .product-miniature .price-per-kg,

.lc-products-slider .product-miniature .lc-price-per-kg,

.lc-bestsellers .product-miniature .price-per-kg,

.lc-bestsellers .product-miniature .lc-price-per-kg,

.lc-newproducts .product-miniature .price-per-kg,

.lc-newproducts .product-miniature .lc-price-per-kg {

    font-size: 11px !important;

    font-weight: 400 !important;

    color: #888 !important;

    margin-left: 2px !important;

}



.lc-products-slider .product-miniature .regular-price,

.lc-bestsellers .product-miniature .regular-price,

.lc-newproducts .product-miniature .regular-price {

    font-size: 12px !important;

    color: #999 !important;

    text-decoration: line-through !important;

    font-weight: 400 !important;

    margin-right: 4px !important;

}



.lc-products-slider .product-miniature .price-conditioning,

.lc-bestsellers .product-miniature .price-conditioning,

.lc-newproducts .product-miniature .price-conditioning {

    display: none !important;

}



/* =====================================================

   SECTION 6: LA CROQUETTERIE - 2 colonnes, fond blanc

   ===================================================== */

.lc-about-section {

    padding: 48px 15px 56px;

    background: var(--lc-sec-bg, var(--lc-blanc));

    box-sizing: border-box;

}



.lc-about-section > .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

}



.lc-about-split {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 50px;

    align-items: center;

}



/* Placement : texte a gauche (col 1), photo a droite (col 2) */

.lc-about-photo  { grid-column: 2; grid-row: 1; }



/* Photo a gauche - masquee en blob "galet", accent kraft decale derriere */

.lc-about-photo {

    position: relative;

}



.lc-about-photo::before {

    content: "";

    position: absolute;

    inset: -8px -14px -26px -2px;

    background-color: var(--lc-kraft-accent, #c8b98f);

    -webkit-mask: url(../img/semi-shape-3.png) center / contain no-repeat;

    mask: url(../img/semi-shape-3.png) center / contain no-repeat;

    z-index: 0;

}



.lc-about-photo img {

    position: relative;

    z-index: 1;

    width: 100%;

    height: auto;

    display: block;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    -webkit-mask: url(../img/semi-shape-3.png) center / contain no-repeat;

    mask: url(../img/semi-shape-3.png) center / contain no-repeat;

    filter: drop-shadow(0 14px 22px rgba(65, 65, 66, 0.22));

}



/* Contenu à droite - texte aligné à gauche */

.lc-about-content {

    grid-column: 1;

    grid-row: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 0;

}



.lc-about-inner {

    max-width: 100%;

}



/* Logo cercle */

.lc-about-logo-circle {

    width: 80px;

    height: 80px;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

}



.lc-about-logo-img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.lc-about-content h2 {

    font-family: var(--lc-font-display);

    font-size: var(--lc-title-size);

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--lc-gris);

    text-align: left;

}



.lc-about-tagline {

    font-style: italic;

    font-size: var(--lc-subtitle-size);

    color: var(--lc-vert);

    margin-bottom: 20px;

    text-align: left;

}



/* Zone de texte */

.lc-about-text {

    margin-bottom: 25px;

}



.lc-about-text p {

    color: #555;

    font-size: var(--lc-text-size);

    line-height: 1.7;

    margin: 0;

    text-align: left;

}



/* Features en ligne */

.lc-about-features {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 30px;

}



.lc-about-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--lc-gris);

    font-weight: 500;

    font-size: var(--lc-small-text-size);

}



.lc-about-feature-icon {

    width: 28px;

    height: 28px;

    background: var(--lc-vert);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--lc-blanc);

    font-size: 0.85rem;

    flex-shrink: 0;

}



/* Bouton CTA */

.lc-about-cta {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: var(--lc-font-display);

    font-weight: 700;

    font-size: var(--lc-text-size);

    text-decoration: none;

    padding: 14px 28px;

    border-radius: var(--lc-radius-btn);

    transition: all 0.3s ease;

    background-color: var(--lc-vert);

    color: var(--lc-blanc);

}



.lc-about-cta:hover {

    background-color: var(--lc-vert-dark);

    color: var(--lc-blanc);

    text-decoration: none;

    transform: translateY(-2px);

}



.lc-about-cta svg {

    transition: transform 0.3s ease;

}



.lc-about-cta:hover svg {

    transform: translateX(4px);

}



/* Responsive La Croquetterie */

@media (max-width: 992px) {

    .lc-about-section {

        padding: 34px 15px;

    }

    

    .lc-about-split {

        grid-template-columns: 1fr;

        gap: 22px;

    }

    

    .lc-about-photo {

        max-width: 320px;

        margin: 0 auto;

        grid-column: auto;

        grid-row: auto;

    }

    

    .lc-about-content {

        text-align: center;

        grid-column: auto;

        grid-row: auto;

    }

    

    .lc-about-inner {

        max-width: 100%;

    }

    

    .lc-about-logo-circle {

        margin: 0 auto 20px;

    }

    

    .lc-about-content h2,

    .lc-about-tagline,

    .lc-about-text p {

        text-align: center;

    }

    

    .lc-about-features {

        justify-content: center;

    }

    

    .lc-about-cta {

        margin: 0 auto;

    }

}



@media (max-width: 768px) {

    .lc-about-section {

        padding: 26px 15px;

    }

    

    .lc-about-features {

        flex-direction: column;

        align-items: center;

        gap: 12px;

    }

}





/* =====================================================

   RESPONSIVE

   ===================================================== */

@media (max-width: 992px) {

    .lc-categories-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }

    

    .lc-recipe-content p {

        margin: 0 auto 30px;

    }

    

    .lc-recipe-illustration {

        flex: none;

        width: 100%;

        max-width: 380px;

    }

    

    .lc-about-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .lc-about-image {

        order: -1;

    }

    

    .lc-about-image img {

        width: 80%;

        max-width: 400px;

        margin: 0 auto;

        display: block;

    }

    

    .lc-about-content {

        text-align: center;

        padding: 20px 0;

    }

    

    .lc-about-logo-circle {

        margin: 0 auto 25px;

    }

    

    .lc-about-values {

        justify-content: center;

    }

    

    .lc-about-cta {

        margin: 30px auto 0;

    }

    

    .lc-about-list {

        justify-content: center;

    }

    

    .lc-about-features {

        justify-content: center;

    }

    

    /* Slider responsive */

    .lc-hero-slider .lc-organic-shape {

        opacity: 0.1;

    }

}



@media (max-width: 768px) {

    :root {

        --lc-section-padding: 50px 0;

    }

    

    .lc-hero-slider {

        /* Hauteur déjà gérée par les media queries plus haut (400px/380px) */

    }

    

    .lc-hero-slider .lc-organic-shape {

        transform: scale(0.5);

        opacity: 0.08;

    }

    

    .lc-slide-content {

        padding: 30px 20px;

    }

    

    .lc-surtitle {

        font-size: 0.9rem;

    }

    

    .lc-main-title {

        font-size: clamp(2rem, 8vw, 3rem);

    }

    

    .lc-subtitle {

        font-size: 1rem;

        margin-bottom: 25px;

    }

    

    .lc-cta-buttons {

        flex-direction: column;

        align-items: center;

        gap: 12px;

    }

    

    .lc-cta-btn {

        width: 100%;

        max-width: 280px;

    }

    

    /* Catégories alimentation - plus aérées sur mobile */

    .lc-categories-section {

        padding: 30px 15px 20px 15px;

    }

    

    .lc-categories-section > .container {

        padding: 0 15px;

    }

    

    .lc-categories-grid {

        gap: 15px;

    }

    

    .lc-category-label {

        padding: 10px 5px;

    }

    

    .lc-category-label h3 {

        font-size: 1.05rem;

        margin-bottom: 2px;

    }

    

    /* Réduire la forme kraft pour ne pas déborder sur les labels */

    .lc-category-bg {

        height: 75%;

    }

    

    .lc-category-img img {

        max-width: 85%;

        max-height: 85%;

    }

}



@media (max-width: 576px) {

    .lc-hero-slider {

        /* Hauteur déjà gérée par les media queries plus haut */

    }

    

    .lc-hero-slider .lc-organic-shape {

        display: none;

    }

    

    .lc-main-title {

        font-size: 1.8rem;

    }

    

    .lc-categories-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }

    

    .lc-category-label h3 {

        font-size: 1.1rem; /* Plus grand pour lisibilité */

    }

    

    .lc-category-label span {

        font-size: 0.95rem; /* Plus grand */

    }

    

    /* Features en grille 2x2 sur mobile */

    .lc-about-features {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    

    .lc-about-feature {

        padding: 10px 12px;

        flex: none;

    }

    

    .lc-about-feature-icon {

        width: 36px;

        height: 36px;

        font-size: 1rem;

    }

    

    .lc-about-feature span {

        font-size: 0.8rem;

    }

    

    .lc-about-section {

        padding: 60px 15px;

    }

    

    .lc-about-image img {

        width: 90%;

        max-width: 350px;

    }

    

    .lc-about-logo-circle {

        width: 70px;

        height: 70px;

    }

    

    .lc-about-values {

        gap: 20px;

    }

    

    .lc-about-value-icon {

        font-size: 1.5rem;

    }

    

    .lc-about-value-text {

        font-size: 0.8rem;

    }

    

    .lc-about-list {

        gap: 15px;

    }

    

    .lc-about-list-text {

        font-size: 0.85rem;

        white-space: normal;

    }

    

    .lc-slider-nav {

        bottom: 15px;

        gap: 10px;

    }

    

    .lc-slider-prev,

    .lc-slider-next {

        width: 38px;

        height: 38px;

    }

}



/* =====================================================

   SECTION 7: NOS ENGAGEMENTS - 3 colonnes avec séparateurs

   ===================================================== */

.lc-engagements-section {

    padding: 48px 15px;

    background: var(--lc-sec-bg, #f8f8f8);

    box-sizing: border-box;

    margin-bottom: 50px;

}



.lc-engagements-grid {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

}



/* Contenu centré */

.lc-engagements-content {

    width: 100%;

}



.lc-engagements-content h2 {

    font-family: var(--lc-font-display);

    font-size: var(--lc-title-size);

    color: var(--lc-gris);

    margin: 0 0 10px 0;

    font-weight: 700;

    text-align: center;

}



.lc-engagements-subtitle {

    font-style: italic;

    color: var(--lc-vert-dark, #8fa339);

    margin-bottom: 40px;

    font-size: var(--lc-subtitle-size);

    text-align: center;

}



/* Liste des engagements - 3 colonnes */

.lc-engagements-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

}



.lc-engagements-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin: 0;

    padding: 30px 25px;

    border-right: none;

    border-bottom: none;

}



.lc-engagements-item:last-child {

    border-right: none;

}



.lc-engagements-item-icon {

    position: relative;

    width: 132px;

    height: 132px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

}



.lc-engagements-item-icon::before {

    content: "";

    position: absolute;

    inset: 0;

    background-color: var(--lc-eng-blob1, #c8b98f);

    -webkit-mask: url(../img/eng-blob-1.png) center/contain no-repeat;

    mask: url(../img/eng-blob-1.png) center/contain no-repeat;

    z-index: 0;

}



.lc-engagements-item:nth-child(2) .lc-engagements-item-icon::before {

    background-color: var(--lc-eng-blob2, #c8b98f);

}



.lc-engagements-item:nth-child(3) .lc-engagements-item-icon::before {

    background-color: var(--lc-eng-blob3, #c8b98f);

}



.lc-engagements-item-icon .lc-eng-ico {

    position: relative;

    z-index: 1;

    width: 44%;

    height: 44%;

    background-color: var(--lc-eng-icon, #8fa339);

    -webkit-mask: var(--lc-eng-ico-src) center/contain no-repeat;

    mask: var(--lc-eng-ico-src) center/contain no-repeat;

}



.lc-engagements-item-content {

    flex: 1;

}



.lc-engagements-item-content h3 {

    font-family: var(--lc-font-display);

    font-size: 1.1rem;

    color: var(--lc-gris);

    margin: 0 0 10px 0;

    font-weight: 700;

    text-transform: uppercase;

}



.lc-engagements-item-content p {

    color: #666;

    font-size: var(--lc-small-text-size);

    line-height: 1.6;

    margin: 0;

}



/* Bouton CTA engagements */

.lc-engagements-cta {

    text-align: center;

    margin-top: 40px;

}



.lc-engagements-cta .lc-cta-btn.lc-cta-vert {

    background-color: var(--lc-eng-btn, #3a352f);

    border-color: var(--lc-eng-btn, #3a352f);

}



.lc-engagements-cta .lc-cta-btn.lc-cta-vert:hover {

    background-color: var(--lc-eng-btn, #3a352f);

    border-color: var(--lc-eng-btn, #3a352f);

    filter: brightness(0.88);

}



.lc-cta-btn.lc-cta-vert {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background-color: var(--lc-vert);

    border-color: var(--lc-vert);

    color: var(--lc-blanc);

}



.lc-cta-btn.lc-cta-vert:hover {

    background-color: var(--lc-vert-dark);

    border-color: var(--lc-vert-dark);

    color: var(--lc-blanc);

    transform: translateY(-2px);

}



.lc-cta-btn.lc-cta-vert svg {

    transition: transform 0.3s ease;

}



.lc-cta-btn.lc-cta-vert:hover svg {

    transform: translateX(4px);

}



/* Responsive Engagements */

@media (max-width: 992px) {

    .lc-engagements-section {

        padding: 36px 15px;

    }

    

    .lc-engagements-list {

        grid-template-columns: repeat(3, 1fr);

    }

    

    .lc-engagements-item {

        padding: 20px 15px;

    }

    

    .lc-engagements-item-icon {

        width: 110px;

        height: 110px;

    }

    

    .lc-engagements-item-content h3 {

        font-size: 1rem;

    }

}



@media (max-width: 768px) {

    .lc-engagements-section {

        padding: 30px 15px;

    }

    

    .lc-engagements-list {

        grid-template-columns: 1fr;

        gap: 0;

    }

    

    .lc-engagements-item {

        border-right: none;

        border-bottom: none;

        padding: 25px 20px;

    }

    

    .lc-engagements-item:last-child {

        border-bottom: none;

    }

    

    .lc-engagements-item-icon {

        width: 116px;

        height: 116px;

        margin-bottom: 14px;

    }

}



/* Ancien hover supprimé - le hover est géré par .lc-cta-btn.lc-cta-vert:hover */



.lc-engagements-cta svg {

    transition: transform 0.3s ease;

}



.lc-engagements-cta:hover svg {

    transform: translateX(4px);

}



/* Ancien accordéon conservé pour rétrocompatibilité */

.lc-accordion {

    margin-bottom: 25px;

}



.lc-accordion-item {

    border-bottom: 1px solid rgba(0,0,0,0.1);

}



.lc-accordion-item:first-child {

    border-top: 1px solid rgba(0,0,0,0.1);

}



.lc-accordion-header {

    display: flex;

    align-items: center;

    padding: 15px 0;

    cursor: pointer;

    transition: all 0.3s ease;

}



.lc-accordion-header:hover {

    color: var(--lc-vert);

}



.lc-accordion-icon {

    font-size: 1.5rem;

    margin-right: 15px;

    width: 40px;

    height: 40px;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.lc-accordion-icon img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.lc-accordion-title {

    flex: 1;

    font-weight: 600;

    font-size: 1.1rem;

}



.lc-accordion-toggle {

    font-size: 1.5rem;

    font-weight: 300;

    color: var(--lc-vert);

    transition: transform 0.3s ease;

}



.lc-accordion-item.active .lc-accordion-toggle {

    transform: rotate(45deg);

}



.lc-accordion-body {

    display: none;

    padding: 0 0 15px 55px;

}



.lc-accordion-body p {

    margin: 0;

    color: #666;

    line-height: 1.6;

}



/* Responsive Engagements */

@media (max-width: 992px) {

    .lc-engagements-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .lc-engagements-image {

        order: -1;

        max-width: 500px;

        margin: 0 auto;

    }

    

    .lc-engagements-content {

        padding: 0 20px;

        text-align: left;

    }

}



@media (max-width: 768px) {

    .lc-engagements-section {

        padding: 40px 0;

    }

    

    .lc-engagements-content {

        padding: 0 15px;

    }

    

    .lc-engagements-item {

        padding: 20px 0;

    }

    

    .lc-engagements-item-icon {

        width: 116px;

        height: 116px;

    }

    

    .lc-engagements-item-content h3 {

        font-size: 1.05rem;

    }

    

    .lc-engagements-item-content p {

        font-size: 0.95rem;

    }

}



/* Engagements : carrousel defilant une ligne sur mobile + tablette (<=991px) */

@media (max-width: 991px) {

    .lc-engagements-list {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        gap: 14px;

        margin: 0;

        padding: 4px 14px 16px;

        scroll-padding-left: 14px;

        scrollbar-width: none;

    }

    .lc-engagements-list::-webkit-scrollbar { display: none; }

    .lc-engagements-item {

        flex: 0 0 82%;

        box-sizing: border-box;

        scroll-snap-align: start;

        margin: 0;

        padding: 24px 20px;

    }

}



/* =====================================================

   SECTION 5: NOS MAGASINS - Style Split Screen

   ===================================================== */

.lc-stores-section {

    padding: 0;

    box-sizing: border-box;

    overflow: hidden;

}



/* Confettis pour la section magasins */

.lc-stores-section .lc-organic-shape {

    position: absolute;

    z-index: 1;

    pointer-events: none;

}



.lc-stores-section .lc-organic-shape.s1 {

    width: 150px; height: auto;

    top: 10%; left: 5%;

    transform: rotate(-15deg);

    animation: lcFloat 12s ease-in-out infinite;

}

.lc-stores-section .lc-organic-shape.s2 {

    width: 100px; height: auto;

    bottom: 15%; left: 8%;

    transform: rotate(20deg);

    animation: lcFloat 10s ease-in-out infinite -3s;

}

.lc-stores-section .lc-organic-shape.s3 {

    width: 80px; height: auto;

    top: 20%; right: 10%;

    animation: lcFloat 11s ease-in-out infinite -5s;

}

.lc-stores-section .lc-organic-shape.s4 {

    width: 120px; height: auto;

    bottom: 20%; right: 5%;

    transform: rotate(10deg);

    animation: lcFloat 13s ease-in-out infinite -7s;

}



.lc-stores-container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

    position: relative;

    z-index: 2;

}



.lc-stores-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 550px;

    align-items: center;

}



/* Côté gauche : Contenu */

.lc-stores-content {

    padding: 70px 60px 70px 40px;

    color: inherit;

}



.lc-stores-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--stores-accent, var(--lc-vert));

    color: var(--lc-blanc, #ffffff);

    padding: 10px 18px;

    border-radius: 30px;

    font-size: var(--lc-small-text-size);

    font-weight: 600;

    margin-bottom: 25px;

}



.lc-stores-badge-icon {

    font-size: 1.1rem;

}



.lc-stores-content h2 {

    font-family: var(--lc-font-display);

    font-size: var(--lc-title-size);

    color: inherit;

    margin: 0 0 10px 0;

    font-weight: 700;

    line-height: 1.2;

}



.lc-stores-tagline {

    font-style: italic;

    color: var(--stores-accent, inherit);

    margin-bottom: 20px;

    font-size: var(--lc-subtitle-size);

}



.lc-stores-description {

    color: inherit;

    opacity: 0.9;

    line-height: 1.7;

    margin-bottom: 30px;

    font-size: var(--lc-text-size);

    max-width: 480px;

}



/* Statistiques */

.lc-stores-stats {

    display: flex;

    gap: 50px;

    margin-bottom: 35px;

}



.lc-stores-stat {

    text-align: center;

}



.lc-stores-stat-number {

    font-family: var(--lc-font-display);

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--stores-accent, inherit);

    line-height: 1;

}



.lc-stores-stat-label {

    font-size: 1rem;

    color: inherit;

    opacity: 0.85;

    margin-top: 8px;

}



/* Bouton CTA */

.lc-stores-cta {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: var(--stores-accent, var(--lc-vert));

    color: var(--lc-blanc, #ffffff);

    padding: 14px 28px;

    border-radius: var(--lc-radius-btn);

    text-decoration: none;

    font-family: var(--lc-font-display);

    font-weight: 700;

    font-size: var(--lc-text-size);

    transition: all 0.3s ease;

}



.lc-stores-cta:hover {

    background: var(--stores-accent, var(--lc-vert-dark));

    color: var(--lc-blanc, #ffffff);

    text-decoration: none;

    transform: translateY(-2px);

    opacity: 0.85;

}



.lc-stores-cta svg {

    transition: transform 0.3s ease;

}



.lc-stores-cta:hover svg {

    transform: translateX(4px);

}



/* Côté droit : Carte */

.lc-stores-map {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    min-height: 500px;

}



.lc-stores-map-img {

    max-width: 100%;

    max-height: 480px;

    width: auto;

    height: auto;

    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));

    transition: transform 0.5s ease;

}



.lc-stores-map:hover .lc-stores-map-img {

    transform: scale(1.03);

}



/* Badge flottant - Sans animation */

.lc-stores-floating-card {

    position: absolute;

    bottom: 30px;

    right: 30px;

    background: white;

    padding: 15px 20px;

    border-radius: var(--lc-radius-md);

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    display: flex;

    align-items: center;

    gap: 12px;

}



.lc-stores-floating-icon {

    font-size: 1.5rem;

}



.lc-stores-floating-text {

    display: flex;

    flex-direction: column;

}



.lc-stores-floating-number {

    font-family: var(--lc-font-display);

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--lc-gris);

}



.lc-stores-floating-label {

    font-size: 0.85rem;

    color: #666;

}



/* Responsive Magasins */

@media (max-width: 992px) {

    /* Inversion mobile : les blobs foncés (s2, s4) passent en haut,

       les blobs clairs (s1, s3) passent en bas, sous la carte de France,

       pour ne plus gêner la lisibilité du texte. */

    .lc-stores-section .lc-organic-shape.s1 {

        top: auto;

        bottom: 15%;

        left: 8%;

        transform: rotate(20deg);

    }

    .lc-stores-section .lc-organic-shape.s2 {

        bottom: auto;

        top: 10%;

        left: 5%;

        transform: rotate(-15deg);

    }

    .lc-stores-section .lc-organic-shape.s3 {

        top: auto;

        bottom: 20%;

        right: 5%;

        transform: rotate(10deg);

    }

    .lc-stores-section .lc-organic-shape.s4 {

        bottom: auto;

        top: 20%;

        right: 10%;

        transform: rotate(0deg);

    }



    .lc-stores-grid {

        grid-template-columns: 1fr;

        min-height: auto;

    }

    

    .lc-stores-content {

        padding: 50px 30px;

        text-align: center;

    }

    

    .lc-stores-badge {

        margin-left: auto;

        margin-right: auto;

    }

    

    .lc-stores-tagline {

        font-size: 1.2rem;

    }

    

    .lc-stores-description {

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

        font-size: 1.05rem;

    }

    

    .lc-stores-stats {

        justify-content: center;

    }

    

    .lc-stores-stat-number {

        font-size: 2.5rem;

    }

    

    .lc-stores-cta {

        margin: 0 auto;

    }

    

    .lc-stores-map {

        padding: 20px 30px 80px;

        min-height: auto;

    }

    

    .lc-stores-map-img {

        max-height: 350px;

    }

    

    .lc-stores-floating-card {

        bottom: 20px;

        right: 50%;

        transform: translateX(50%);

    }

}



@media (max-width: 576px) {

    .lc-stores-content {

        padding: 40px 20px;

    }

    

    .lc-stores-content h2 {

        font-size: 24px;

    }

    

    .lc-stores-tagline {

        font-size: 1.1rem;

    }

    

    .lc-stores-description {

        font-size: 1rem;

    }

    

    .lc-stores-stats {

        gap: 30px;

    }

    

    .lc-stores-stat-number {

        font-size: 2.2rem;

    }

    

    .lc-stores-map {

        padding: 15px 20px 90px;

    }

    

    .lc-stores-map-img {

        max-height: 280px;

    }

    

    .lc-stores-floating-card {

        padding: 12px 16px;

        bottom: 25px;

    }

    

    .lc-stores-floating-number {

        font-size: 1rem;

    }

}



/* =====================================================

   SECTION 8: RÉASSURANCE

   ===================================================== */

.lc-reassurance-section {

    background: var(--lc-sec-bg, transparent);

    padding: var(--lc-section-padding);

    padding-left: 15px;

    padding-right: 15px;

    margin-top: 30px;

    margin-bottom: 0;

    box-sizing: border-box;

}



.lc-reassurance-section > .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

}



.lc-reassurance-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

}



.lc-reassurance-item {

    display: flex;

    align-items: center;

    gap: 20px;

}



.lc-reassurance-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.lc-reassurance-icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.lc-reassurance-text {

    display: flex;

    flex-direction: column;

}



.lc-reassurance-text strong {

    color: var(--lc-gris);

    font-size: var(--lc-text-size);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 3px;

}



.lc-reassurance-text span {

    color: var(--lc-gris);

    opacity: 0.7;

    font-size: var(--lc-small-text-size);

}



/* Responsive Réassurance */

@media (max-width: 992px) {

    .lc-reassurance-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    

    .lc-reassurance-item {

        justify-content: center;

        text-align: left;

    }

}



@media (max-width: 576px) {

    .lc-reassurance-item {

        flex-direction: column;

        text-align: center;

    }

    

    .lc-reassurance-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

}



/* =====================================================

   TOGGLE CHIEN/CHAT - STYLE INTERRUPTEUR AGRANDI

   Déborde de moitié sur le slider

   ===================================================== */

.lc-toggle-section {

    box-sizing: border-box;

    

    /* Décalage vers le haut pour chevaucher le slider */

    margin-top: -45px;

    padding: 0 0 25px 0;

    background: var(--lc-sec-bg, transparent);

    z-index: 5; /* Sous le menu mobile (z-index ~100+) */

    /* Permettre les clics à travers la zone vide */

    pointer-events: none;

}



/* Retirer le background pattern */

.lc-toggle-section::before {

    display: none;

}



.lc-toggle-section > .container {

    position: relative;

    z-index: 1;

    pointer-events: none;

}



.lc-toggle-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    pointer-events: none;

}



/* Container de l'interrupteur - AGRANDI - Réactiver les clics */

.lc-toggle-switch {

    display: inline-flex;

    background: var(--lc-gris);

    border-radius: 14px;

    padding: 8px;

    position: relative;

    box-shadow: 0 6px 25px rgba(0,0,0,0.25);

    pointer-events: auto; /* Réactiver les clics sur le switch */

    z-index: 5; /* Sous le menu mobile */

}



/* Boutons de l'interrupteur - AGRANDIS */

.lc-toggle-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 22px 70px;

    background: transparent;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    color: rgba(255, 255, 255, 0.7);

    position: relative;

    z-index: 2;

    outline: none;

}



/* Retirer le cercle noir au focus/click */

.lc-toggle-btn:focus,

.lc-toggle-btn:focus-visible {

    outline: none;

    box-shadow: none;

}



.lc-toggle-btn:hover:not(.active) {

    background: rgba(255, 255, 255, 0.15);

    color: var(--lc-blanc);

}



.lc-toggle-btn.active {

    background: var(--lc-blanc);

    color: var(--lc-gris);

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}



.lc-toggle-btn.active:focus,

.lc-toggle-btn.active:focus-visible {

    outline: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}



.lc-toggle-text {

    font-family: var(--lc-font-display);

    font-size: 1.2rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Responsive toggle */

@media (max-width: 768px) {

    .lc-toggle-section {

        margin-top: -40px;

        padding: 0 0 20px 0;

    }

    

    .lc-toggle-switch {

        padding: 6px;

        border-radius: 12px;

    }

    

    .lc-toggle-btn {

        padding: 18px 45px;

        border-radius: 8px;

    }

    

    .lc-toggle-text {

        font-size: 1.1rem;

    }

}



@media (max-width: 480px) {

    .lc-toggle-section {

        margin-top: -35px;

        padding: 0 0 15px 0;

    }

    

    .lc-toggle-switch {

        padding: 5px;

        border-radius: 10px;

    }

    

    .lc-toggle-btn {

        padding: 16px 35px;

        border-radius: 6px;

    }

    

    .lc-toggle-text {

        font-size: 1rem;

        letter-spacing: 0.5px;

    }

}



/* =====================================================

   SECTIONS DYNAMIQUES - Animation

   ===================================================== */

.lc-dynamic-section .lc-dynamic-content {

    display: none;

    opacity: 0;

    transition: opacity 0.4s ease;

}



.lc-dynamic-section .lc-dynamic-content.active {

    display: block;

    opacity: 1;

}



/* =====================================================

   BANNIÈRE PROMO - 2 images carrées côte à côte

   ===================================================== */

.lc-promo-section {

    padding: 50px 15px 30px;

    background: var(--lc-sec-bg, var(--lc-blanc));

}



.lc-promo-section .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0;

}



/* Grille 2 colonnes pour les images */

.lc-promo-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

}



/* Cards images carrées */

.lc-promo-card {

    position: relative;

    border-radius: 16px;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    display: block;

}



.lc-promo-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;

}



/* Image promo cliquable à gauche */

.lc-promo-card-left {

    text-decoration: none;

    cursor: pointer;

}



.lc-promo-card-left:hover img {

    transform: scale(1.03);

}



.lc-promo-card-left:hover {

    box-shadow: 0 8px 30px rgba(0,0,0,0.15);

}



/* Image lifestyle à droite (non cliquable) */

.lc-promo-card-right {

    pointer-events: none;

}



/* Placeholder si pas d'image */

.lc-promo-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f0f0f0;

    font-size: 4rem;

    color: #ccc;

}



/* Responsive Promo */

@media (max-width: 768px) {

    .lc-promo-section {

        padding: 25px 15px 20px;

    }

    

    .lc-promo-grid {

        gap: 15px;

    }

    

    .lc-promo-card {

        border-radius: 12px;

    }

}



@media (max-width: 576px) {

    .lc-promo-section {

        padding: 20px 0 15px;

        /* Forcer le fullwidth */

        width: var(--lc-fullbleed, 100vw) !important;

        max-width: var(--lc-fullbleed, 100vw) !important;

        position: relative;

        left: 50%;

        transform: translateX(-50%);

        margin-left: 0;

        margin-right: 0;

    }

    

    .lc-promo-section .container {

        padding: 0;

        max-width: 100%;

    }

    

    .lc-promo-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    

    /* Image promo garde le ratio 1:1 avec marges */

    .lc-promo-card-left {

        aspect-ratio: 1 / 1;

        margin: 0 15px;

        border-radius: 12px;

    }

    

    /* Image lifestyle en vrai fullwidth - sans aucune marge */

    .lc-promo-card-right {

        aspect-ratio: 1 / 1;

        border-radius: 0;

        margin: 0;

        width: var(--lc-fullbleed, 100vw);

        max-width: var(--lc-fullbleed, 100vw);

        margin-left: 0;

        margin-right: 0;

    }

}



/* =====================================================

   SECTION AUTRES PRODUITS - IDENTIQUE À ALIMENTATION

   ===================================================== */

.lc-other-section {

    padding: 48px 15px 56px 15px;

    background: var(--lc-sec-bg, var(--lc-blanc));

    box-sizing: border-box;

}



.lc-other-section > .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

}



.lc-other-section .lc-section-header {

    text-align: left;

    margin-bottom: 30px;

}



.lc-other-section .lc-section-header h2 {

    font-family: var(--lc-font-display);

    font-size: var(--lc-title-size);

    color: var(--lc-vert);

    margin: 0;

    font-weight: 700;

}



/* =====================================================

   SECTION AUTRES PRODUITS - Style avec pictogrammes

   ===================================================== */

.lc-other-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

}

/* Variante avec bloc intro a gauche (4 col : intro + 3 tuiles/ligne) */

.lc-other-grid.lc-has-intro {

    grid-template-columns: repeat(4, 1fr);

}

.lc-other-intro {

    grid-column: 1;

    grid-row: 1 / 3;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: var(--lc-radius-lg);

    padding: 30px 26px;

    color: var(--lc-blanc, #fff);

    box-sizing: border-box;

}

.lc-other-intro-title {

    font-family: var(--lc-font-display);

    font-size: 1.45rem;

    font-weight: 700;

    text-transform: uppercase;

    line-height: 1.15;

    margin: 0 0 14px;

    color: var(--lc-other-intro-title-color, #fff);

}

.lc-other-intro-text {

    font-size: 0.95rem;

    line-height: 1.55;

    color: var(--lc-other-intro-text-color, #fff);

    opacity: 0.95;

}



/* Card rectangulaire */

.lc-other-card {

    display: flex;

    flex-direction: column-reverse;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 14px;

    padding: 24px 14px;

    border-radius: var(--lc-radius-lg);

    text-decoration: none;

    transition: all 0.3s ease;

    min-height: 160px;

    overflow: hidden;

    position: relative;

    width: 100%;

    box-sizing: border-box;

}



.lc-other-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.12);

    text-decoration: none;

}



/* 5e élément : demi-largeur et centré */

.lc-other-card-full {

    grid-column: auto;

    max-width: none;

    justify-self: stretch;

}



/* Contenu texte à gauche */

.lc-other-card-content {

    flex: none;

    z-index: 2;

    position: relative;

    text-align: center;

}



.lc-other-card-title {

    font-family: var(--lc-font-display);

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--lc-blanc, #fff);

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    text-shadow: 0 1px 2px rgba(0,0,0,0.15);

}



.lc-other-card-subtitle {

    font-size: 0.85rem;

    color: rgba(255,255,255,0.8);

    display: none;

}



/* Pictogramme à droite */

.lc-other-card-img {

    position: relative;

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1;

    flex-shrink: 0;

}



.lc-other-card-img img {

    max-height: 65px;

    max-width: 65px;

    width: auto;

    height: auto;

    object-fit: contain;

    transition: transform 0.3s ease;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

    opacity: 0.9;

}



.lc-other-card:hover .lc-other-card-img img {

    transform: scale(1.1);

    opacity: 1;

}



/* Card pleine largeur - mêmes dimensions */

.lc-other-card-full .lc-other-card-content {

    flex: 1;

}



.lc-other-card-full .lc-other-card-img {

    width: 80px;

}



/* Responsive */

@media (max-width: 992px) {

    .lc-other-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .lc-other-grid.lc-has-intro {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .lc-other-intro {

        display: none; /* bloc intro masque sur mobile/tablette */

    }

    

    .lc-other-card {

        padding: 22px 12px;

        min-height: 150px;

    }

    

    .lc-other-card-title {

        font-size: 1.1rem;

    }

    

    .lc-other-card-img {

        width: 60px;

        height: 60px;

    }

    

    .lc-other-card-img img {

        max-height: 50px;

        max-width: 50px;

    }

}



@media (max-width: 768px) {

    .lc-other-section {

        padding: 48px 15px 56px;

    }



    .lc-other-grid {

        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur mobile (2x2 max) */

        gap: 12px;

    }

    

    .lc-other-card {

        padding: 18px 20px;

        min-height: 70px;

        border-radius: 12px;

        width: 100%;

    }

    

    .lc-other-card-content {

        flex: 1;

    }

    

    .lc-other-card-title {

        font-size: 1rem;

    }

    

    .lc-other-card-subtitle {

        display: none;

    }

    

    .lc-other-card-img {

        width: 55px;

        height: 55px;

    }

    

    .lc-other-card-img img {

        max-height: 45px;

        max-width: 45px;

    }

    

    /* Sur mobile 1 colonne, le dernier élément impair (.lc-other-card-full)

       doit être STRICTEMENT identique aux autres cartes : on annule tous

       les styles desktop de centrage / dimensionnement hérités. */

    .lc-other-card-full {

        grid-column: auto !important;

        max-width: 100% !important;

        width: 100% !important;

        justify-self: stretch !important;

        padding: 18px 20px !important;

        min-height: 70px !important;

        border-radius: 12px !important;

    }

    

    .lc-other-card-full .lc-other-card-img {

        width: 55px !important;

        height: 55px !important;

    }

    

    .lc-other-card-full .lc-other-card-img img {

        max-height: 45px !important;

        max-width: 45px !important;

    }

}



@media (max-width: 480px) {

    .lc-other-grid {

        gap: 10px;

    }

    

    .lc-other-card {

        padding: 15px 15px;

        min-height: 60px;

        border-radius: 10px;

    }

    

    .lc-other-card-title {

        font-size: 0.9rem;

        letter-spacing: 0.3px;

    }

    

    .lc-other-card-img {

        width: 45px;

        height: 45px;

    }

    

    .lc-other-card-img img {

        max-height: 38px;

        max-width: 38px;

    }

    

    /* La carte impaire reste identique aux autres à 480px aussi */

    .lc-other-card-full {

        max-width: 100% !important;

        width: 100% !important;

        padding: 15px 15px !important;

        min-height: 60px !important;

        border-radius: 10px !important;

    }

    

    .lc-other-card-full .lc-other-card-img {

        width: 45px !important;

        height: 45px !important;

    }

    

    .lc-other-card-full .lc-other-card-img img {

        max-height: 38px !important;

        max-width: 38px !important;

    }

}



/* =====================================================

   OVERRIDES MOBILE - TAILLES DE TEXTE FORCÉES

   ===================================================== */

@media (max-width: 768px) {

    /* Titres de sections - FORCÉS PLUS GRANDS */

    .lc-section-header h2,

    .lc-categories-section .lc-section-header h2,

    .lc-bestsellers-header h2,

    .lc-other-section .lc-section-header h2,

    .lc-about-content h2,

    .lc-engagements-content h2,

    .lc-stores-content h2,

    .lc-recipe-content h2 {

        font-size: 24px !important;

        line-height: 1.2 !important;

    }

    

    /* Sous-titres - FORCÉS */

    .lc-section-header p,

    .lc-about-tagline,

    .lc-stores-tagline,

    .lc-engagements-subtitle {

        font-size: 16px !important;

    }

    

    /* ============================================

       LABELS CATÉGORIES ALIMENTATION - TRÈS FORCÉS

       ============================================ */

    .lc-categories-section .lc-category-label h3,

    .lc-category-label h3 {

        font-size: 16px !important;

        font-weight: 700 !important;

        font-family: var(--lc-font-display) !important;

        text-transform: uppercase !important;

        letter-spacing: 0.5px !important;

        color: var(--lc-gris, #414142) !important;

        margin-bottom: 4px !important;

    }

    

    .lc-categories-section .lc-category-label span,

    .lc-category-label span {

        font-size: 14px !important;

        color: var(--lc-vert-dark, #8fa339) !important;

    }

    

    /* Texte courant - FORCÉ à 16px minimum */

    .lc-about-text p,

    .lc-stores-description,

    .lc-recipe-content p,

    .lc-engagements-item-content p {

        font-size: 16px !important;

        line-height: 1.6 !important;

    }

}



@media (max-width: 480px) {

    /* Petit mobile */

    .lc-section-header h2,

    .lc-categories-section .lc-section-header h2,

    .lc-bestsellers-header h2,

    .lc-other-section .lc-section-header h2,

    .lc-about-content h2,

    .lc-engagements-content h2,

    .lc-stores-content h2,

    .lc-recipe-content h2 {

        font-size: 24px !important;

    }

    

    .lc-category-label h3 {

        font-size: 14px !important;

    }

    

    .lc-category-label span {

        font-size: 13px !important;

    }

}



/* =====================================================

   TITRES DE SECTION - CENTRALISES (couleur + alignement)

   Pilotes par --lc-title-color / --lc-title-align (:root).

   Surchargeables par section via --lc-sec-title-color sur la section.

   ===================================================== */

/* Exclus volontairement (design specifique) : .lc-recipe-content h2 et

   .lc-stores-content h2 (titres blancs sur fond fonce), .lc-about-content h2

   (mise en page 2 colonnes, aligne a gauche). */

.lc-section-header h2,

.lc-categories-section .lc-section-header h2,

.lc-other-section .lc-section-header h2,

.lc-bestsellers-header h2,

.lc-engagements-content h2 {

    color: var(--lc-sec-title-color, var(--lc-title-color)) !important;

    text-align: var(--lc-sec-title-align, var(--lc-title-align)) !important;

}



/* Casse uniforme : TOUS les titres de section en MAJUSCULES */

.lc-section-header h2,

.lc-categories-section .lc-section-header h2,

.lc-other-section .lc-section-header h2,

.lc-bestsellers-header h2,

.lc-engagements-content h2,

.lc-recipe-content h2,

.lc-stores-content h2,

.lc-about-content h2 {

    text-transform: uppercase !important;

}



/* =====================================================

   FOND PAR SECTION (systeme unifie) - pleine largeur

   Pilote par --lc-sec-bg injecte sur le wrapper .lc-sec-wrap.

   ===================================================== */

.lc-sec-wrap {

    /* le fond est applique sur la section elle-meme (full-bleed var(--lc-fullbleed, 100vw)) */

}





/* =====================================================

   BANDE REASSURANCE (HAUT DE PAGE)

   ===================================================== */

.lc-rtop-section {

    background: var(--lc-rtop-bg, #fff);

    padding: 28px 15px 28px;

    border-bottom: 1px solid #eee;

    box-sizing: border-box;

}

.lc-rtop-section > .container {

    max-width: var(--lc-section-max-width);

    margin: 0 auto;

    padding: 0 15px;

}

.lc-rtop-title {

    text-align: center;

    font-family: var(--lc-font-display);

    font-size: 1.5rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--lc-gris, #414142);

    letter-spacing: 0.5px;

    margin: 0 0 16px;

}

.lc-rtop-grid {

    margin: 0 auto;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0;

}

.lc-rtop-item {

    flex: 1 1 0;

    min-width: 140px;

    max-width: 240px;

    padding: 4px 26px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 11px;

}

.lc-rtop-icon {

    width: 46px;

    height: 46px;

    color: var(--lc-vert, #a7bc44);

}

.lc-rtop-icon svg {

    width: 100%;

    height: 100%;

    display: block;

}

.lc-rtop-icon img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

}

.lc-rtop-text strong {

    display: block;

    font-weight: 700;

    color: var(--lc-gris, #414142);

    font-size: 0.95rem;

    line-height: 1.2;

}

.lc-rtop-text span {

    display: block;

    color: #666;

    font-size: 0.85rem;

    margin-top: 3px;

    line-height: 1.3;

}

/* Groupes marquee : transparents sur desktop, les items remontent dans la grille */

.lc-rtop-mq { display: contents; }

.lc-rtop-grid > .lc-rtop-mq-dup { display: none; }

@media (max-width: 991px) {

    .lc-rtop-section { padding: 14px 0 14px; overflow: hidden; }

    .lc-rtop-section > .container { max-width: none; padding: 0; }

    /* Titre conserve dans le DOM (SEO) mais masque sur mobile : doublon avec les items + gain de hauteur */

    .lc-rtop-title { display: none; }

    /* Bande fine : une seule ligne defilante (marquee seamless) */

    .lc-rtop-grid {

        max-width: none;

        width: max-content;

        flex-wrap: nowrap;

        justify-content: flex-start;

        gap: 0;

        animation: lc-rtop-marquee 22s linear infinite;

        will-change: transform;

    }

    .lc-rtop-mq,

    .lc-rtop-grid > .lc-rtop-mq-dup {

        display: flex;

        flex-wrap: nowrap;

        align-items: center;

        gap: 34px;

        padding-right: 34px; /* meme espace que le gap -> couture invisible */

    }

    .lc-rtop-item {

        flex: 0 0 auto;

        width: auto;

        min-width: 0;

        max-width: none;

        flex-direction: row;

        align-items: center;

        text-align: left;

        gap: 10px;

        padding: 0;

        border-left: none;

    }

    .lc-rtop-icon { width: 30px; height: 30px; flex-shrink: 0; }

    .lc-rtop-text strong { font-size: 0.95rem; line-height: 1.15; white-space: nowrap; }

    .lc-rtop-text span { font-size: 0.84rem; margin-top: 1px; white-space: nowrap; }

    .lc-rtop-grid:active { animation-play-state: paused; } /* pause au toucher */

}

@keyframes lc-rtop-marquee {

    from { transform: translateX(0); }

    to   { transform: translateX(-50%); }

}

@media (prefers-reduced-motion: reduce) {

    .lc-rtop-grid { animation: none !important; }

}





/* Option B : bande collee au banner, le toggle devient l'en-tete de l'alimentation (sans chevauchement) */

.lc-has-rtop .lc-toggle-section {

    margin-top: 0;

    padding-top: 30px;

}



/* ============================================================

   ZOOM DESKTOP +10% (rendu type zoom navigateur 110%)

   - desktop uniquement (>=1200px), mobile/tablette inchanges

   - les sections pleine largeur sont compensees via --lc-fullbleed

     pour rester a la largeur ecran (pas de scroll horizontal)

   ============================================================ */

@media (min-width: 1200px) {

    html, body { overflow-x: clip; }

    .lc-homepage {

        zoom: 1.1;

        --lc-fullbleed: calc(100vw / 1.1);

    }

}



/* ===== Passe mobile v2 : aeration verticale Favoris / Nouveautes ===== */

@media (max-width: 768px) {

    .lc-bestsellers { padding-bottom: 64px; }

    .lc-newproducts { padding-top: 40px; padding-bottom: 64px; }

}



/* ============================================================

   Tablette (769-1199px) : rythme vertical harmonise entre sections

   Avant, seules engagements + a-propos etaient ajustees -> rythme irregulier.

   On aligne toutes les sections de contenu sur un meme pas (36px),

   en preservant la paire favoris/nouveautes (rapprochee volontairement).

   ============================================================ */

@media (min-width: 769px) and (max-width: 1199px) {

    .lc-categories-section,

    .lc-recipe-section,

    .lc-other-section,

    .lc-engagements-section,

    .lc-about-section,

    .lc-promo-section {

        padding-top: 36px;

        padding-bottom: 36px;

    }

    .lc-bestsellers { padding-top: 36px; padding-bottom: 20px; }

    .lc-newproducts { padding-top: 20px; padding-bottom: 36px; }

}