/* =====================================================================
   responsive-lv.css  —  Refonte MOBILE + TABLETTE La Vivrière (dev-v9)
   ---------------------------------------------------------------------
   Fichier DÉDIÉ, hand-written, chargé en dernier (priority 1000) pour
   surcharger theme.css / custom.css. Aucune compilation webpack.
   Breakpoints :  phone <=767px · tablette 768-1199px · desktop >=1200px
   Palette     :  orange #e9621e · orange clair #ff9a52 · vert #8cc63f
                  violet foncé (checkout) #5b0e2d
   Plan        :  /var/www/dev-v9/PLAN-MOBILE-TABLETTE-2026-06-02.md
   ===================================================================== */

/* =====================================================================
   PHASE 1 — BANNIÈRE DISTRIBUTION / COMPTE À REBOURS  (.lv-countdown)
   Réf. mockups : accueil_*, produit_*, panier_phone, plus_dinfo_*
   (0 CSS existant dans le thème actif — composant construit ici)
   ===================================================================== */

.header-banner { width: 100%; }

.lv-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  background: #e9621e;
  color: #fff;
  padding: 11px 18px;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  line-height: 1.25;
  text-align: center;
}

.lv-countdown__bell { display: none; }

.lv-countdown__vente { font-weight: 500; }
.lv-countdown__vente strong { font-weight: 700; }

/* Pastille « Se termine dans XJ XH XMN » */
.lv-countdown__timer {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  white-space: nowrap;
}
.lv-countdown__timer .lv-countdown__text { opacity: .92; }
.lv-countdown__timer strong { font-weight: 700; letter-spacing: .3px; }

/* Bouton CTA (VOIR LES PRODUITS / Commander) */
.lv-countdown__cta {
  display: inline-block;
  background: #fff;
  color: #e9621e;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .4px;
  padding: 8px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lv-countdown__cta:hover { background: #fff3ec; color: #cf4f12; text-decoration: none; }

/* État « pas de vente en cours » */
.lv-countdown--inactive {
  background: #f3f3f3;
  color: #8a8a8a;
  font-style: italic;
  font-size: 14px;
  padding: 9px 16px;
}

/* ---------- PHONE : vente à gauche, pastille à droite, pas de bouton ---------- */
@media (max-width: 767px) {
  .lv-countdown {
    justify-content: space-between;
    flex-wrap: nowrap;
    text-align: left;
    gap: 10px;
    padding: 9px 14px;
    font-size: 14px;
  }
  .lv-countdown__vente { flex: 1 1 auto; min-width: 0; }
  .lv-countdown__timer { flex: 0 0 auto; font-size: 12px; padding: 5px 11px; }
  .lv-countdown__cta   { display: none; }
}

/* ---------- TABLETTE : centré, bouton visible ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .lv-countdown { gap: 14px 22px; font-size: 16px; padding: 12px 22px; }
}


/* =====================================================================
   TOP-BAR STICKY (mobile + tablette) — Phase 1 (v3, sans JS)
   #header ne contient plus que la top-bar (banniere + categories sorties
   dans header-banner.tpl / header-top.tpl, autour de #header). Son parent
   <main> est haut -> position:sticky voyage. Seule la top-bar reste collee ;
   banniere et categories defilent au-dessus/en-dessous et disparaissent.
   ===================================================================== */
@media (max-width: 1199px) {
  #header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;            /* au-dessus du contenu, sous les modales (1050) */
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
  }
}


/* =====================================================================
   VISIBILITE CATBAR vs MEGA-MENU DESKTOP
   La barre .lv-catbar (icones/pills) REMPLACE le mega-menu vert #main_menu
   sur mobile + tablette. Desktop (>=1200px) garde #main_menu et masque la
   catbar (sinon elle sort en texte brut non stylise). #main_menu masque
   jusqu'a 1199px pour ne pas afficher les deux sur tablette.
   ===================================================================== */
.lv-catbar { display: none; }                 /* desktop : catbar masquee */
@media (max-width: 1199px) {
  .lv-catbar { display: block; }              /* mobile + tablette : catbar visible */
  #main_menu { display: none !important; }    /* mega-menu desktop masque */
}

/* =====================================================================
   PHASE 3 — BARRE CATEGORIES (.lv-catbar)
   Tablette 768-1199px : barre horizontale fond VERT, icone au-dessus du
                          libelle, item actif en surbrillance vert-jaune.
   Phone  <=767px       : PILLS arrondies scrollables (pas de fond vert),
                          icone masquee, "Tout" = pill pleine violet fonce.
   Desktop >=1200px     : NON TOUCHE (aucune regle de base hors @media).

   NB sprite icones : .lv-catbar__icon a un background-size 80px x 40px,
   position -40px 0 = etat gris ; position 0 0 = etat colore (hover/actif).
   ===================================================================== */

/* ---------------------------------------------------------------------
   TABLETTE  (768px -> 1199px)
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Fond vert pleine largeur de la barre */
  .lv-catbar {
    width: 100%;
    background: #9BC150; /* vert menu */
  }

  .lv-catbar__container {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 8px;
    gap: 6px;
  }

  /* Les items : repartis, scroll horizontal de secours si trop nombreux */
  .lv-catbar__items {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lv-catbar__items::-webkit-scrollbar { display: none; }

  /* Item = icone au-dessus du libelle blanc */
  .lv-catbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 8px;
    min-width: 78px;
    flex: 1 1 auto;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: background 0.2s ease;
  }

  .lv-catbar__icon {
    width: 34px;
    height: 34px;
    display: inline-block;
    background-size: 68px 34px;   /* sprite : 2 etats cote a cote */
    background-position: -34px 0; /* etat gris par defaut */
    background-repeat: no-repeat;
    border: none;
    transition: background-position 0.2s ease;
  }

  .lv-catbar__name {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
  }

  /* Survol */
  .lv-catbar__item:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff !important;
  }
  .lv-catbar__item:hover .lv-catbar__icon {
    background-position: 0 0; /* etat colore */
  }

  /* Etat ACTIF : surbrillance vert-jaune vif + icone coloree.
     Cible la classe .active si ajoutee cote PHP (cf templateChanges),
     sinon fallback sur le 1er item ("Tout"). */
  .lv-catbar__item.active,
  .lv-catbar__items:not(:hover) .lv-catbar__item.lv-catbar__item--current {
    background: #c8e06a; /* vert-jaune clair vif */
    color: #3d5113 !important;
  }
  .lv-catbar__item.active .lv-catbar__name { color: #3d5113; }
  .lv-catbar__item.active .lv-catbar__icon { background-position: 0 0; }

  /* Actions (favoris / recherche) a droite */
  .lv-catbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    flex-shrink: 0;
  }
  .lv-catbar__action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: none;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: background 0.2s ease;
  }
  .lv-catbar__action-btn:hover { background: rgba(255, 255, 255, 0.4); }
  .lv-catbar__action-btn .material-icons { font-size: 21px; }
}

/* ---------------------------------------------------------------------
   PHONE  (<= 767px)
   PILLS arrondies scrollables. Pas de fond vert sur la barre.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {

  .lv-catbar {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
  }

  .lv-catbar__container {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
    padding: 8px 10px;
    gap: 8px;
  }

  /* Rangee de pills scrollable horizontalement, scrollbar masquee */
  .lv-catbar__items {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
    /* leger fondu sur les bords pour suggerer le scroll */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .lv-catbar__items::-webkit-scrollbar { display: none; }

  /* Chaque item devient une PILL */
  .lv-catbar__item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;        /* ne se compresse pas : force le scroll */
    gap: 0;
    padding: 7px 16px;
    min-width: 0;
    border: 1.5px solid #d9d9d9;
    border-radius: 999px;  /* pill */
    background: #fff;
    color: #444 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  /* Icone masquee sur phone : on n'affiche que le libelle */
  .lv-catbar__icon {
    display: none !important;
  }

  .lv-catbar__name {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    color: inherit;
  }

  .lv-catbar__item:active,
  .lv-catbar__item:hover {
    border-color: #5b0e2d;
    color: #5b0e2d !important;
  }

  /* Pill ACTIVE : pleine violet fonce, texte blanc.
     Cible .active si ajoutee cote PHP, sinon le 1er item ("Tout"). */
  .lv-catbar__item.active,
  .lv-catbar__item:first-child {
    background: #5b0e2d;    /* violet fonce checkout */
    border-color: #5b0e2d;
    color: #fff !important;
  }
  .lv-catbar__item.active .lv-catbar__name,
  .lv-catbar__item:first-child .lv-catbar__name {
    color: #fff;
  }
  /* Si une vraie classe active existe ailleurs, elle reste violette ;
     on neutralise alors l'auto-violet du 1er item pour eviter 2 pills pleines. */
  .lv-catbar__items.has-active .lv-catbar__item:first-child:not(.active) {
    background: #fff;
    border-color: #d9d9d9;
    color: #444 !important;
  }
  .lv-catbar__items.has-active .lv-catbar__item:first-child:not(.active) .lv-catbar__name {
    color: #444;
  }

  /* Actions favoris / recherche : 2 icones discretes a droite (filtre + loupe) */
  .lv-catbar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    flex-shrink: 0;
  }
  .lv-catbar__action-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #5b0e2d !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: background 0.2s ease;
  }
  .lv-catbar__action-btn:hover { background: rgba(91, 14, 45, 0.08); }
  .lv-catbar__action-btn .material-icons { font-size: 23px; }
}


/* =========================================================================
   LA VIVRIERE — REFONTE RESPONSIVE / PHASE LISTE PRODUITS (cartes)
   Chargé en dernier (priorité 1000). Override theme.css.
   Breakpoints : phone <=767px (2 col) | tablette 768-1199px (4 col).
   Desktop >=1200px : AUCUNE règle de base ici, tout est en @media.
   NB: theme.css déclare `.products{display:grid !important; repeat(5,1fr)}`
       -> on doit utiliser !important pour battre le `!important` existant.
       Idem theme.css a des @media (1080/890/790px) qui rechangent les
       colonnes : nos @media chargés APRES gagnent dans leur plage.
   ========================================================================= */


/* =========================================================================
   1) GRILLE — commun phone + tablette (<=1199px)
   ========================================================================= */
@media (max-width: 1199px) {

    /* La grille passe en cartes "blocs" : on neutralise les paddings
       desktop et on resserre l'écart. */
    #products {
        padding: 0 12px;
    }

    /* Chaque cellule produit ne doit plus être bridée par le max-width 280px
       desktop : on laisse la carte remplir sa colonne. */
    #products .product,
    .featured-products .product,
    .product-accessories .product {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        height: 100%;
    }

    /* ---------------------------------------------------------------------
       LA CARTE
       --------------------------------------------------------------------- */
    #products .product-miniature,
    .featured-products .product-miniature,
    .product-accessories .product-miniature {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        margin: 0 !important;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 14px;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        overflow: hidden;
        position: relative;
    }

    /* ---------------------------------------------------------------------
       IMAGE (carré en haut, coins arrondis suivant la carte)
       --------------------------------------------------------------------- */
    .product-miniature .lv_product_image {
        position: relative;
        margin-bottom: 0;          /* annule le margin-bottom:20px desktop */
        width: 100%;
        aspect-ratio: 1 / 1;       /* image carrée du mockup */
        overflow: visible;         /* laisse dépasser badge bio / favori */
        background: #f7f7f5;
    }
    .product-miniature .lv_product_image .quick-view {
        display: block;
        width: 100%;
        height: 100%;
    }
    .product-miniature .lv_product_image img {
        width: 100% !important;
        height: 100%;
        object-fit: cover;         /* remplit le carré sans déformer */
        display: block;
    }

    /* ---------------------------------------------------------------------
       ÉTOILE FAVORI (blanche, en haut-droite de l'image)
       (réactiver le hook displayFavori côté template — voir templateChanges)
       --------------------------------------------------------------------- */
    .product-miniature .add-to-favorite {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 4;
        width: 32px;
        height: 32px;
        margin: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.18);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        line-height: 1;
    }
    /* Icône étoile dessinée en CSS (le <a> est vide dans favori.tpl) */
    .product-miniature .add-to-favorite::before {
        content: "\2606";          /* étoile vide ☆ */
        font-size: 18px;
        color: #e9621e;
        line-height: 1;
    }
    .product-miniature .add-to-favorite.in_favoris::before {
        content: "\2605";          /* étoile pleine ★ */
        color: #e9621e;
    }

    /* ---------------------------------------------------------------------
       BADGE BIO (featured-icons) — pastille ronde verte en haut-droite image
       --------------------------------------------------------------------- */
    .product-miniature .featured-icons {
        position: absolute;
        top: 8px;
        left: 8px;            /* à gauche pour ne pas chevaucher l'étoile */
        bottom: auto;         /* annule bottom:-21px desktop */
        right: auto;
        width: auto;
        margin: 0;
        text-align: left;
        display: flex;
        gap: 4px;
        z-index: 3;
    }
    .product-miniature .featured-icons img,
    .product-miniature .feature-icon {
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        border-radius: 50%;
        background: #9BC150;     /* fond vert "bio" */
        padding: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
        object-fit: contain;
    }

    /* ---------------------------------------------------------------------
       CORPS DE CARTE (description)
       --------------------------------------------------------------------- */
    .product-miniature .product-description {
        position: relative;
        height: auto !important;     /* annule height:213px desktop */
        width: 100%;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding: 10px 10px 12px;
        background: #fff;
        text-align: left;
    }

    /* TITRE — gras, aligné à gauche, tronqué proprement */
    #products .product-title,
    .product-miniature .product-title {
        margin: 0 0 4px !important;
        text-align: left;
        text-transform: none;
    }
    #products .product-title a:first-child,
    .product-miniature .product-title a:first-child {
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 18px;
        font-weight: 700 !important;
        color: #2b2b2b !important;
        display: block;
        /* max 2 lignes */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* BADGE PRODUCTEUR "Fruits en Direct" (+ drapeau pays, cf templateChanges) */
    .product-miniature .lvm-product-seller-badge,
    .product-miniature .product_seller {
        display: flex !important;
        align-items: center;
        gap: 5px;
        margin: 2px 0 4px !important;
        padding: 0 !important;
        top: 0 !important;
        font-size: 12px !important;
        font-style: normal;
        font-weight: 500;
        color: #7a7a7a !important;
        text-decoration: none;
        line-height: 1.3;
    }
    .product-miniature .lvm-product-seller-badge__icon {
        font-size: 12px;
        line-height: 1;
    }
    /* drapeau pays injecté dans le badge (img ou span ajouté au template) */
    .product-miniature .lvm-product-seller-badge img,
    .product-miniature .lvm-product-seller-badge .seller-flag {
        width: 16px;
        height: 11px;
        object-fit: cover;
        border-radius: 2px;
        flex: 0 0 auto;
    }

    /* "Conservation : X jours" */
    .product-miniature .features-product {
        font-size: 12px;
        color: #7a7a7a;
        margin: 0 0 6px;
        line-height: 1.3;
    }

    /* Description longue : on la masque sur la carte mobile (place limitée) */
    .product-miniature .lv_prod_desc {
        display: none;
    }

    /* ---------------------------------------------------------------------
       PRIX + BOUTON QTÉ (bas de carte)
       --------------------------------------------------------------------- */
    .product-miniature .lv_prod_price {
        position: relative;      /* annule le position:absolute desktop */
        bottom: auto;
        width: 100%;
        margin-top: auto;        /* colle le bloc en bas de la carte flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Prix gras en bas-gauche */
    .product-miniature .lv_price {
        float: none !important;
        width: auto !important;
        padding: 0 !important;
        height: auto !important;
        text-align: left;
        line-height: 1.1;
    }
    .product-miniature .lv_price .price {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #2b2b2b !important;
    }
    .product-miniature .lv_price .unity_price,
    .product-miniature .lv_qty .lv_qty_unit {
        display: block;
        font-size: 11px;
        font-style: italic;
        color: #9a9a9a;
        top: 0;
    }

    /* Conteneur qté à droite */
    .product-miniature .lv_qty {
        float: none !important;
        width: auto !important;
        padding: 0 !important;
        text-align: right;
        flex: 0 0 auto;
    }
    .product-miniature .lv_qty form {
        margin: 0;
    }

    /* ---------------------------------------------------------------------
       BOUTON QTÉ -> bouton "+" ROND ORANGE
       Le markup = <span nav_moins>-</span><input qtyadd><span nav_plus>+</span>
       Mockup : on n'affiche que le "+" rond orange tant que qté = 0,
       l'input et le "-" restent dispo (le JS gère l'incrément).
       Approche robuste : on stylise le container en pilule compacte.
       --------------------------------------------------------------------- */
    .product-miniature .qtadd_container {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        height: 36px;
    }

    /* "+" : bouton rond orange */
    .product-miniature .nav_plus {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px;
        border: none !important;
        border-radius: 50% !important;
        background: #e9621e;
        color: #fff !important;
        font-size: 22px;
        font-weight: 400;
        line-height: 36px !important;
        text-align: center;
        cursor: pointer;
        float: none !important;
        order: 3;            /* toujours à droite */
        box-shadow: 0 2px 5px rgba(233,98,30,.35);
        transition: background .15s ease;
    }
    .product-miniature .nav_plus:hover {
        background: #ff9a52 !important;
        color: #fff !important;
    }

    /* "-" : petit bouton rond clair, visible uniquement quand qté > 0
       (sinon il encombre). On le compacte et on l'aligne avant l'input. */
    .product-miniature .nav_moins {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px;
        border: 1px solid #e0e0e0 !important;
        border-radius: 50% !important;
        background: #fff;
        color: #e9621e !important;
        font-size: 18px;
        line-height: 26px !important;
        text-align: center;
        cursor: pointer;
        float: none !important;
        order: 1;
    }
    .product-miniature .nav_moins:hover {
        background: #fff5ef !important;
        color: #e9621e !important;
    }

    /* Input quantité : compact, sans bordure parasite, entre - et + */
    .product-miniature .qtyadd {
        width: 26px !important;
        height: 36px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 15px !important;
        font-weight: 700;
        color: #2b2b2b;
        text-align: center;
        float: none !important;
        order: 2;
        padding: 0 !important;
    }

    /* overlay de chargement aligné sur la pilule */
    .product-miniature .cache_op {
        height: 36px !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* rupture de stock : petit label rouge à droite */
    .product-miniature .rupture {
        font-size: 12px;
        width: auto;
        text-align: right;
    }
}


/* =========================================================================
   2) PHONE — <=767px : grille 2 COLONNES
   ========================================================================= */
@media (max-width: 767px) {

    .products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 12px !important;
        gap: 12px !important;
    }

    #products {
        padding: 0 10px;
    }

    /* Sur petit écran, titre un poil plus petit pour 2 colonnes serrées */
    #products .product-title a:first-child,
    .product-miniature .product-title a:first-child {
        font-size: 13px !important;
        line-height: 17px;
    }

    .product-miniature .lv_price .price {
        font-size: 16px !important;
    }

    /* Bouton + légèrement réduit pour tenir dans la colonne étroite */
    .product-miniature .nav_plus {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px;
        line-height: 34px !important;
        font-size: 20px;
    }
    .product-miniature .product-description {
        padding: 8px 8px 10px;
    }
}


/* =========================================================================
   3) TABLETTE — 768px à 1199px : grille 4 COLONNES
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1199px) {

    .products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-gap: 16px !important;
        gap: 16px !important;
    }

    #products {
        padding: 0 16px;
    }

    /* Un peu plus d'air sur tablette */
    .product-miniature .product-description {
        padding: 12px 12px 14px;
    }
    #products .product-title a:first-child,
    .product-miniature .product-title a:first-child {
        font-size: 14px !important;
        line-height: 19px;
    }
    .product-miniature .lv_price .price {
        font-size: 19px !important;
    }
}


/* =============================================================
   LA VIVRIERE - QUICKVIEW "PLUS D'INFO" - PHONE + TABLETTE
   Cible le markup reel : themes/lavivriere/templates/catalog/_partials/quickview.tpl
   Le desktop (>=1200px) n'est JAMAIS touche : tout est sous @media.
   Charge en priorite 1000 (apres theme.css).
   ============================================================= */

/* -------------------------------------------------------------
   PHONE  (<= 767px)  : modal quasi plein ecran
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  /* --- Conteneur plein ecran, marges 0 --- */
  .modal.quickview .modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    height: 100%;
    /* bootstrap centre la dialog : on l'aligne en haut, plein ecran */
    display: flex;
    align-items: stretch;
  }

  .modal.quickview .modal-content {
    width: 100%;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    /* on empile : image (header zone) puis contenu blanc */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
  }

  /* --- En-tete : on neutralise la barre header par defaut, la croix
         sera repositionnee en overlay sur l'image --- */
  .modal.quickview .modal-header {
    position: static;
    border: 0;
    padding: 0;
    min-height: 0;
  }

  /* Croix de fermeture : pastille blanche en haut-droite, par dessus l'image */
  .modal.quickview .modal-header .close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b0e2d;
    font-size: 26px;
    line-height: 1;
    border: 0;
    text-shadow: none;
  }
  .modal.quickview .modal-header .close span { color: inherit; }

  /* --- Corps : zero padding, le contenu blanc gere ses propres marges --- */
  .modal.quickview .modal-body {
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /* L'ordre DOM est : row(titre+seller) puis row(image + desc/prix).
     On veut visuellement : IMAGE en haut, puis titre/seller/desc/prix.
     => on transforme .modal-body en flex colonne et on reordonne. */
  .modal.quickview .modal-body > .row {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* La 2e row contient l'image (.col-md-5) qu'on remonte au-dessus de tout */
  .modal.quickview .modal-body > .row:nth-of-type(2) {
    order: 1;
    flex-direction: column;
  }
  /* La 1ere row (titre + seller) passe SOUS l'image */
  .modal.quickview .modal-body > .row:nth-of-type(1) {
    order: 2;
    padding: 16px 18px 0;
  }

  /* --- AFFICHER l'image en phone (override hidden-xs-down) --- */
  .modal.quickview .col-md-5.hidden-xs-down {
    display: block !important;   /* bat la regle utilitaire .hidden-xs-down */
    order: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 0;
    position: relative;
    background: #f4f4f4;
  }

  /* Image cover plein largeur, ratio paysage genereux */
  .modal.quickview .col-md-5.hidden-xs-down img,
  .modal.quickview .col-md-5.hidden-xs-down .product-cover img,
  .modal.quickview .col-md-5.hidden-xs-down .images-container img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 46vh;
    object-fit: cover;
    margin: 0;
  }

  /* Masquer les fleches up/down et les miniatures sur phone (image unique) */
  .modal.quickview .col-md-5.hidden-xs-down .arrows,
  .modal.quickview .col-md-5.hidden-xs-down .js-arrows,
  .modal.quickview .col-md-5.hidden-xs-down .thumbnails,
  .modal.quickview .col-md-5.hidden-xs-down .product-images {
    display: none;
  }

  /* Overlays sur l'image : badge pays bas-gauche, badge bio bas-droite.
     Ces blocs n'existent pas encore (cf templateChanges) -> classes pretes. */
  .modal.quickview .lv-quickview-flag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: #5b0e2d;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  .modal.quickview .lv-quickview-flag img { width: 20px; height: auto; border-radius: 3px; }

  .modal.quickview .lv-quickview-bio {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #9BC150;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.05;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }

  /* --- La colonne texte (.col-md-7) repasse pleine largeur sous l'image --- */
  .modal.quickview .col-md-7 {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    padding: 0 18px 18px;
    order: 1;
  }

  /* --- Producteur en ORANGE (.lv_prod_seller + badge du hook additional info) --- */
  .modal.quickview .lv_prod_seller,
  .modal.quickview .lvm-product-seller-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e9621e;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    margin-bottom: 6px;
  }
  .modal.quickview .lvm-product-seller-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff4ec;
    font-size: 15px;
    flex: 0 0 auto;
  }

  /* --- Titre produit : gras, grand --- */
  .modal.quickview .modal-body h1.h1 {
    color: #2b2b2b;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    margin: 4px 0 8px;
    padding: 0;
  }

  /* --- Description courte --- */
  .modal.quickview #product-description-short {
    color: #7a7a7a;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 10px;
  }

  /* --- Bloc "A propos du producteur" (n'existe pas encore : classes pretes) --- */
  .modal.quickview .lv-quickview-about {
    background: #f6f6f6;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 4px;
    font-size: 13.5px;
    color: #6a6a6a;
    line-height: 1.5;
  }
  .modal.quickview .lv-quickview-about__title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 700;
    color: #9a9a9a;
    margin-bottom: 4px;
  }
  .modal.quickview .lv-quickview-about__more {
    color: #e9621e;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  /* --- Bloc prix + bouton add : prix bas-gauche, FAB rond bas-droite --- */
  .modal.quickview .lv_prod_price {
    position: relative !important;     /* bat le style inline existant */
    margin-top: 14px !important;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
  }

  .modal.quickview .lv_prod_price .lv_price {
    padding-left: 0;
    flex: 1 1 auto;
  }
  .modal.quickview .lv_prod_price .price {
    color: #2b2b2b;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
  }
  .modal.quickview .lv_prod_price .unity_price {
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 500;
  }

  /* La zone quantite/add -> bouton FAB rond orange.
     Markup reel : .lv_qty > form > .qtadd_container avec -, input, +.
     On compacte en pastille ronde orange façon FAB. */
  .modal.quickview .lv_prod_price .lv_qty {
    padding-right: 0;
    flex: 0 0 auto;
    margin: 0;
  }

  .modal.quickview .lv_qty .qtadd_container {
    display: inline-flex;
    align-items: center;
    background: #e9621e;
    border-radius: 28px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(233, 98, 30, 0.35);
    min-height: 52px;
  }

  /* Boutons - / + en blanc sur fond orange, gros tactiles */
  .modal.quickview .lv_qty .nav_qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border: 0;
  }
  .modal.quickview .lv_qty .nav_plus {
    background: rgba(255, 255, 255, 0.18);
  }

  /* Champ quantite : compact, blanc, au centre */
  .modal.quickview .lv_qty .qtyadd {
    width: 34px;
    height: 44px;
    text-align: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    padding: 0;
    -moz-appearance: textfield;
  }
  .modal.quickview .lv_qty .qtyadd::-webkit-outer-spin-button,
  .modal.quickview .lv_qty .qtyadd::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Etat rupture : pastille grise lisible */
  .modal.quickview .lv_qty .rupture {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 22px;
    background: #ececec;
    color: #8a8a8a;
    font-weight: 600;
    font-size: 13px;
  }
}

/* -------------------------------------------------------------
   TABLETTE  (768px - 1199px)  : carte centree, plus etroite
   ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {

  /* --- Dialog centree facon carte --- */
  .modal.quickview .modal-dialog {
    max-width: 620px;
    width: calc(100% - 40px);
    margin: 40px auto;
  }

  .modal.quickview .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    background: #fff;
  }

  /* Header : barre fine, croix discrete a droite */
  .modal.quickview .modal-header {
    border: 0;
    padding: 10px 14px 0;
    min-height: 0;
    position: relative;
  }
  .modal.quickview .modal-header .close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f2f2f2;
    color: #5b0e2d;
    opacity: 1;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    text-shadow: none;
    margin: 0;
  }

  .modal.quickview .modal-body {
    padding: 6px 22px 22px;
  }
  .modal.quickview .modal-body > .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* --- En-tete : producteur orange a GAUCHE + vignette ronde a DROITE ---
     La 1ere row porte titre + seller. On la met en flex pour aligner
     une vignette (a injecter, cf templateChanges) a droite. */
  .modal.quickview .modal-body > .row:nth-of-type(1) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .modal.quickview .modal-body > .row:nth-of-type(1) .col-md-12 {
    width: 100%;
    padding: 0;
    position: relative;
  }

  /* Producteur orange */
  .modal.quickview .lv_prod_seller,
  .modal.quickview .lvm-product-seller-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e9621e;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
  }
  .modal.quickview .lvm-product-seller-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff4ec;
    font-size: 14px;
  }

  /* Vignette ronde producteur/produit en haut-droite (classe prete) */
  .modal.quickview .lv-quickview-thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: #f4f4f4;
  }

  /* --- Badges pays + conservation (classes pretes) --- */
  .modal.quickview .lv-quickview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 6px;
  }
  .modal.quickview .lv-quickview-flag,
  .modal.quickview .lv-quickview-keep {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    background: #f4f4f4;
    color: #5b0e2d;
    font-size: 12.5px;
    font-weight: 600;
  }
  .modal.quickview .lv-quickview-flag img { width: 18px; height: auto; border-radius: 3px; }
  .modal.quickview .lv-quickview-keep { color: #6a6a6a; }

  /* Titre gras */
  .modal.quickview .modal-body h1.h1 {
    color: #2b2b2b;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    margin: 6px 0 10px;
    padding-right: 76px;   /* place pour la vignette ronde a droite */
  }

  /* --- En tablette : on masque la grande colonne image (carte compacte),
         l'apercu se fait via la vignette ronde. Override de la grille. --- */
  .modal.quickview .modal-body > .row:nth-of-type(2) {
    display: block;
  }
  .modal.quickview .col-md-5.col-sm-5 {
    display: none;   /* carte etroite : pas de grande cover en tablette */
  }
  .modal.quickview .col-md-7.col-sm-7 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
  }

  /* Description */
  .modal.quickview #product-description-short {
    color: #7a7a7a;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  /* --- Bloc "A PROPOS DU PRODUCTEUR" encadre gris + "Lire plus" --- */
  .modal.quickview .lv-quickview-about {
    background: #f6f6f6;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 12px 0;
    font-size: 14px;
    color: #6a6a6a;
    line-height: 1.55;
  }
  .modal.quickview .lv-quickview-about__title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    font-weight: 700;
    color: #9a9a9a;
    margin-bottom: 6px;
  }
  .modal.quickview .lv-quickview-about__more {
    color: #e9621e;
    font-weight: 700;
    text-decoration: none;
  }
  .modal.quickview .lv-quickview-about__more:hover { text-decoration: underline; }

  /* --- Prix + bouton FAB rond orange --- */
  .modal.quickview .lv_prod_price {
    position: relative !important;
    margin-top: 16px !important;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
  }
  .modal.quickview .lv_prod_price .lv_price { padding-left: 0; flex: 1 1 auto; }
  .modal.quickview .lv_prod_price .price {
    color: #2b2b2b;
    font-weight: 800;
    font-size: 24px;
  }
  .modal.quickview .lv_prod_price .unity_price {
    color: #9a9a9a;
    font-size: 12.5px;
  }
  .modal.quickview .lv_prod_price .lv_qty { padding-right: 0; flex: 0 0 auto; margin: 0; }

  .modal.quickview .lv_qty .qtadd_container {
    display: inline-flex;
    align-items: center;
    background: #e9621e;
    border-radius: 26px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(233, 98, 30, 0.35);
  }
  .modal.quickview .lv_qty .nav_qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border: 0;
  }
  .modal.quickview .lv_qty .nav_plus { background: rgba(255, 255, 255, 0.18); }
  .modal.quickview .lv_qty .qtyadd {
    width: 32px;
    height: 40px;
    text-align: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    padding: 0;
    -moz-appearance: textfield;
  }
  .modal.quickview .lv_qty .qtyadd::-webkit-outer-spin-button,
  .modal.quickview .lv_qty .qtyadd::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .modal.quickview .lv_qty .rupture {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 22px;
    background: #ececec;
    color: #8a8a8a;
    font-weight: 600;
    font-size: 13px;
  }
}


/* =========================================================================
   LA VIVRIERE - REFONTE RESPONSIVE / PHASE ACCUEIL
   Producteurs (currentsellers.tpl) + Hero slider (ps_imageslider .rslides)
   Mobile-first : tout est dans @media phone (<=767) / tablette (768-1199).
   Desktop >=1200 NON touche.
   Charge en dernier (priorite 1000). On double parfois le selecteur avec
   #module-lvmarketplace-producteurs pour battre la specificite id existante,
   mais ces regles restent dans nos breakpoints donc le desktop reste intact.
   ========================================================================= */

/* -------------------------------------------------------------------------
   PHONE  (<= 767px)
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* --- Titre section "Ils nous livrent cette semaine" --- */
    .lvh_title {
        font-size: 26px;          /* reduit vs 44px desktop */
        line-height: 1.25;
        margin: 22px 0 18px;
        padding: 0 14px;
        color: #9BC150;           /* vert, comme desktop */
    }

    /* --- Grille producteurs : 1 colonne, cartes pleine largeur --- */
    #module-lvmarketplace-producteurs .all_sellers_home,
    .all_sellers_home {
        grid-template-columns: 1fr !important;  /* bat les anciens breakpoints */
        grid-gap: 14px;
        margin: 18px auto;
        padding: 0 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Carte producteur : image de fond haute, coins arrondis */
    .all_sellers_home .one_producteur {
        display: block !important;   /* sort du display:table */
        min-height: 280px;           /* carte bien haute facon mockup */
        border-radius: 10px;
        overflow: hidden;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat;
    }

    /* Overlay sombre + centrage vertical du contenu (flex remplace table-cell) */
    .all_sellers_home .one_producteur_pic {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 280px;
        padding: 24px 18px;
        box-sizing: border-box;
        text-align: center;
        background: rgba(0, 0, 0, 0.45);
    }

    /* Nom du producteur : blanc, centre, lisible */
    .all_sellers_home .seller_name {
        display: block;
        margin: 0 0 18px;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.25;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Bouton "VOIR LES PRODUITS" : bordure blanche, fond transparent */
    .all_sellers_home .see_products,
    .all_sellers_home .all_producteurs_home a {
        display: inline-block;
        margin: 0;
        padding: 11px 26px;
        border: 1px solid #fff;
        border-radius: 4px;
        background: transparent;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        line-height: 1.2;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .all_sellers_home .see_products:active,
    .all_sellers_home .see_products:hover,
    .all_sellers_home .all_producteurs_home a:active,
    .all_sellers_home .all_producteurs_home a:hover {
        background: #fff;
        color: #e9621e;          /* texte orange marque au survol/tap */
    }

    /* Carte "Voir tous les producteurs" : meme format plein largeur que les autres */
    .all_sellers_home .one_producteur.all_producteurs_home {
        min-height: 200px;
        background-color: #f4f4f4;
        background-size: contain !important;
        background-position: center center !important;
    }
    .all_sellers_home .one_producteur.all_producteurs_home .one_producteur_pic {
        min-height: 200px;
        background: rgba(255, 255, 255, 0.55) !important; /* fond clair, logo how-5 visible */
    }
    .all_sellers_home .one_producteur.all_producteurs_home .one_producteur_pic a {
        color: #5b0e2d;            /* texte violet fonce lisible sur fond clair */
        border-color: #5b0e2d;
    }
    .all_sellers_home .one_producteur.all_producteurs_home .one_producteur_pic a:active,
    .all_sellers_home .one_producteur.all_producteurs_home .one_producteur_pic a:hover {
        background: #5b0e2d;
        color: #fff;
    }

    /* --- HERO SLIDER (ps_imageslider .rslides) --- */
    .homeslider-container {
        margin-bottom: 26px;
    }

    /* Image : recadrage propre, hauteur raisonnable sur mobile */
    .rslides li img,
    .homeslider li img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        object-position: center;
    }

    /* Caption centree, lisible, sans deborder */
    .rslides .caption,
    .homeslider .caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        padding: 16px 18px;
        background: rgba(0, 0, 0, 0.45);
        text-align: center;
    }

    /* Gros titre "UNE SELECTION DURABLE" lisible */
    .rslides .caption h2,
    .homeslider .caption h2 {
        margin: 0 0 6px;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    /* Texte descriptif reduit (2 lignes max) pour ne pas surcharger */
    .rslides .caption div,
    .homeslider .caption div {
        margin: 0;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 13px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Fleches de navigation un peu en retrait pour ne pas gener le tap */
    .homeslider_nav,
    .rslides_nav {
        opacity: 0.85;
    }
}

/* -------------------------------------------------------------------------
   TABLETTE  (768px - 1199px)
   Grille compacte de cartes producteurs, meme style nom + bouton.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {

    .lvh_title {
        font-size: 34px;
        line-height: 1.25;
        margin: 28px 0 22px;
        color: #9BC150;
    }

    /* 3 colonnes en bas de plage, 4 en haut */
    #module-lvmarketplace-producteurs .all_sellers_home,
    .all_sellers_home {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 10px;
        margin: 24px auto;
        padding: 0 14px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Carte plus petite mais meme principe (overlay + centrage flex) */
    .all_sellers_home .one_producteur {
        display: block !important;
        min-height: 230px;
        border-radius: 8px;
        overflow: hidden;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat;
    }

    .all_sellers_home .one_producteur_pic {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 230px;
        padding: 18px 14px;
        box-sizing: border-box;
        text-align: center;
        background: rgba(0, 0, 0, 0.45);
    }

    .all_sellers_home .seller_name {
        display: block;
        margin: 0 0 14px;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.25;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .all_sellers_home .see_products,
    .all_sellers_home .all_producteurs_home a {
        display: inline-block;
        padding: 9px 18px;
        border: 1px solid #fff;
        border-radius: 4px;
        background: transparent;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1.2;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .all_sellers_home .see_products:hover,
    .all_sellers_home .all_producteurs_home a:hover {
        background: #fff;
        color: #e9621e;
    }

    /* Carte "Voir tous les producteurs" en tablette */
    .all_sellers_home .one_producteur.all_producteurs_home .one_producteur_pic {
        background: rgba(255, 255, 255, 0.55) !important;
    }
    .all_sellers_home .one_producteur.all_producteurs_home .one_producteur_pic a {
        color: #5b0e2d;
        border-color: #5b0e2d;
    }
    .all_sellers_home .one_producteur.all_producteurs_home .one_producteur_pic a:hover {
        background: #5b0e2d;
        color: #fff;
    }

    /* --- HERO SLIDER tablette --- */
    .rslides li img,
    .homeslider li img {
        width: 100%;
        height: 340px;
        object-fit: cover;
        object-position: center;
    }

    .rslides .caption,
    .homeslider .caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        padding: 22px 28px;
        background: rgba(0, 0, 0, 0.4);
        text-align: center;
    }

    .rslides .caption h2,
    .homeslider .caption h2 {
        margin: 0 0 8px;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .rslides .caption div,
    .homeslider .caption div {
        margin: 0 auto;
        max-width: 640px;
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 15px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* =====================================================================
   MOCKUP accueil_phone — banniere distribution + masquage catbar (phone)
   v2 (02/06/2026) : scope #horloge + !important pour BATTRE front.css:1203
   (.current_vente > div{display:block!important;width:100%!important} cassait
   le flex de .lv-distrib ; line-height:40px herite ecrasait la hauteur).
   ===================================================================== */
.lv-distrib { display: none; }   /* desktop + tablette : vue mobile masquee */

@media (max-width: 767px) {
    /* catbar masquee UNIQUEMENT sur l'accueil (mockup accueil) ; reste visible sur les pages categorie */
    #index .lv-catbar { display: none !important; }

    /* conteneur horloge pleine largeur */
    #horloge { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
    #horloge .container, #horloge .row, #horloge .col-lg-12 {
        padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important;
    }
    #horloge .current_vente {
        display: block !important; min-width: 0 !important; width: 100% !important;
        height: auto !important; line-height: 1.3 !important; margin: 0 !important; border: none !important;
    }
    /* masque la vue desktop (nom + horloge live + lien) sur phone */
    #horloge .current_vente .clock_vente_name,
    #horloge .current_vente .clock_vente_clock,
    #horloge .current_vente .clock_vente_link { display: none !important; }

    /* ---- banniere mobile : carte peche, propre & compacte ---- */
    #horloge .current_vente .lv-distrib {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        line-height: 1.3 !important;
        background: #fcead9;
        border-radius: 12px;
        padding: 12px 14px;
        margin: 12px;
        box-sizing: border-box;
    }
    #horloge .lv-distrib__info { flex: 1 1 auto; min-width: 0; }
    #horloge .lv-distrib__status {
        color: #7a4a2e;
        font-family: 'Raleway', sans-serif;
        font-size: 15px; font-weight: 700; line-height: 1.3;
    }
    #horloge .lv-distrib__when {
        margin-top: 6px;
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        line-height: 1.3;
    }
    #horloge .lv-distrib__date {
        color: #e9621e;
        font-family: 'Raleway', sans-serif;
        font-size: 14px; font-weight: 700; white-space: nowrap;
    }
    #horloge .lv-distrib__pill {
        background: #f3d2b3; color: #b9521c;
        font-family: 'Raleway', sans-serif;
        font-size: 12px; font-weight: 600;
        padding: 2px 10px; border-radius: 12px;
        white-space: nowrap; line-height: 1.6;
    }
    #horloge .lv-distrib__cta {
        flex: 0 0 auto;
        display: inline-block !important;
        width: auto !important; height: auto !important;
        background: #e9621e !important;
        color: #fff !important;
        font-family: 'Raleway', sans-serif;
        font-size: 14px; font-weight: 700;
        text-decoration: none; text-transform: none;
        padding: 10px 20px !important;
        border-radius: 22px;
        line-height: 1.1 !important;
        white-space: nowrap;
    }
    #horloge .lv-distrib__cta:active,
    #horloge .lv-distrib__cta:hover { background: #d2531a !important; color: #fff !important; }
}


/* =====================================================================
   MOCKUP produit_phone — banniere distribution ORANGE sur pages categorie
   (#category). L'accueil (#index) garde la version peche. Ajoute 02/06/2026.
   ===================================================================== */
@media (max-width: 767px) {
    #category #horloge .current_vente .lv-distrib {
        background: #e9621e !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 14px 16px !important;
    }
    #category #horloge .lv-distrib__status {
        color: #ffe3d2 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    #category #horloge .lv-distrib__date {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    #category #horloge .lv-distrib__when { margin-top: 2px !important; }
    #category #horloge .lv-distrib__pill--end {
        background: rgba(255, 255, 255, 0.18) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.6);
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 6px 14px !important;
        border-radius: 18px !important;
        white-space: nowrap;
        line-height: 1.3;
    }
}


/* =====================================================================
   MOCKUP produit_phone — barre Retour + barre listing (compteur/filtre/
   recherche) + bouton "+" seul (widget qty replie). Ajoute 02/06/2026.
   ===================================================================== */
.lv-listing-bar { display: none; }   /* desktop : barre mobile masquee */

@media (max-width: 767px) {
    /* --- Barre Retour (pages categorie) --- */
    #category #horloge .lv-back {
        display: flex;
        align-items: center;
        padding: 11px 16px;
        background: #f3f3f3;
        color: #555;
        font-family: 'Raleway', sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }
    #category #horloge .lv-back:active { background: #e9e9e9; }

    /* --- Barre listing : "X produits" + filtre + recherche --- */
    .lv-listing-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 14px 8px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .lv-listing-bar__count {
        font-family: 'Raleway', sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #333;
    }
    .lv-listing-bar__actions { display: flex; gap: 10px; }
    .lv-listing-bar__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 38px;
        background: #fcead9;
        border: none;
        border-radius: 9px;
        color: #b9521c;
        cursor: pointer;
        text-decoration: none;
        padding: 0;
    }
    .lv-listing-bar__btn .material-icons { font-size: 22px; line-height: 1; }
    .lv-listing-bar__btn:active { background: #f4d3b5; }

    /* --- Widget quantite replie : seul le "+" tant que qty = 0 --- */
    .product-miniature .qtadd_container.lv-qty-collapsed .nav_moins,
    .product-miniature .qtadd_container.lv-qty-collapsed .qtyadd {
        display: none !important;
    }
}


/* =====================================================================
   RAFFINEMENTS CARTES PRODUITS (mockup) - 02/06/2026
   fond blanc page, image plein haut + arrondi, titre plus gros,
   badges bio en ligne titre (1 + "i"), vendeur sans contour, prix /unite.
   ===================================================================== */
@media (max-width: 767px) {
    /* Fond de page blanc sur la categorie */
    #category, #category #wrapper, #category #content-wrapper,
    #category #main, #category #products, #category .products {
        background: #fff !important;
    }

    /* La carte : on enleve overflow:hidden (sinon le popover bio est coupe) ;
       l'arrondi est gere image (haut) + description (bas). */
    #products .product-miniature {
        overflow: visible !important;
        background: #fff !important;
    }
    .product-miniature .lv_product_image {
        overflow: hidden !important;
        border-radius: 14px 14px 0 0;
        background: #f1f1ef;
    }
    .product-miniature .product-description {
        border-radius: 0 0 14px 14px;
    }

    /* Ligne titre : titre a gauche, badges bio a droite */
    .product-miniature .lv-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }
    .product-miniature .product-title { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
    #products .product-title a:first-child,
    .product-miniature .product-title a:first-child {
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        color: #2b2b2b !important;
    }

    /* Badges bio dans la ligne titre (plus en absolute sur l'image) */
    .product-miniature .lv-title-row .featured-icons {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
    }
    .product-miniature .lv-title-row .feature-icon {
        width: 26px !important;
        height: 26px !important;
    }
    /* bouton info "i" */
    .product-miniature .lv-bio-info {
        width: 19px; height: 19px;
        border-radius: 50%;
        border: 1px solid #c4c4c4;
        background: #fff;
        color: #777;
        font-size: 11px; font-weight: 700; font-style: italic;
        line-height: 1; cursor: pointer; padding: 0;
        flex: 0 0 auto;
    }
    /* popover liste des labels */
    .product-miniature .lv-bio-popover {
        display: none;
        position: absolute;
        right: 0; top: 30px;
        z-index: 20;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0,0,0,.16);
        padding: 8px 10px;
        min-width: 150px;
    }
    .product-miniature .lv-bio-popover.open { display: block; }
    .product-miniature .lv-bio-popover__item {
        display: flex; align-items: center; gap: 7px;
        font-size: 12px; color: #444; padding: 3px 0;
        white-space: nowrap;
    }
    .product-miniature .lv-bio-popover__item .feature-icon--xs {
        width: 18px !important; height: 18px !important;
        border-radius: 50%; background: #9BC150; padding: 2px;
    }

    /* PRODUCTEUR : pas de contour, fond transparent, colle a gauche */
    .product-miniature .lvm-product-seller-badge,
    .product-miniature .product_seller {
        border: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 2px 0 6px !important;
        justify-content: flex-start;
    }

    /* PRIX : "/unite" accole au prix */
    .product-miniature .lv_price .lv_unit {
        font-size: 13px;
        font-weight: 600;
        color: #555;
        margin-left: 1px;
    }
}

/* Fix 02/06/2026 : theme.css centre .product-title a -> on force a gauche */
@media (max-width: 767px) {
    #products .product-title,
    #products .product-title a,
    #products .product-title a:first-child,
    .product-miniature .product-title,
    .product-miniature .product-title a,
    .product-miniature .product-title a:first-child {
        text-align: left !important;
    }
}


/* =====================================================================
   02/06/2026 : suppr. gros bouton filtre + actions catbar ; recolor
   des boutons filtre/recherche de la barre "X produits".
   ===================================================================== */
@media (max-width: 767px) {
    /* gros bouton "filtrer" du theme : masque (remplace par l'icone funnel de la barre) */
    #toggle_mobile_filters { display: none !important; }

    /* catbar : on retire les actions (loupe + favoris) a droite des pills */
    .lv-catbar .lv-catbar__actions { display: none !important; }

    /* boutons filtre + recherche facon mockup : pastilles rose clair, icones bordeaux */
    .lv-listing-bar__btn {
        width: 44px !important;
        height: 40px !important;
        background: #f2e8ee !important;
        border-radius: 9px !important;
        color: #5b0e2d !important;
    }
    .lv-listing-bar__btn .material-icons { color: #5b0e2d !important; }
    .lv-listing-bar__btn:active { background: #e9d9e3 !important; }
}

/* 02/06/2026 : reduit la grosse marge au-dessus de la barre listing (#wrapper padding-top) */
@media (max-width: 767px) {
    #category #wrapper { padding-top: 8px !important; }
    .lv-listing-bar { padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* 02/06/2026 : neutralise la grosse marge au-dessus de la barre listing (mobile) */
@media (max-width: 767px) {
    #category #wrapper { padding-top: 6px !important; }
    #category .container { padding-top: 0 !important; }
    #category #content-wrapper,
    #category #main,
    #category #products { margin-top: 0 !important; padding-top: 0 !important; }
    /* facettes masquees par defaut sur mobile (le bouton funnel les ouvre) ; PAS de !important pour laisser le JS toggle agir */
    #category #left-column { display: none; }
    .lv-listing-bar { margin-top: 0 !important; padding-top: 6px !important; }
}


/* 02/06/2026 : favori = coeur (wishlist) en haut-droite de chaque produit, rempli/vide */
@media (max-width: 767px) {
    .product-miniature .add-to-favorite::before {
        font-family: 'Material Icons';
        content: "\e87e";   /* favorite_border (coeur contour) */
        color: #e9621e;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
    }
    .product-miniature .add-to-favorite.in_favoris::before {
        font-family: 'Material Icons';
        content: "\e87d";   /* favorite (coeur plein) */
        color: #e9621e;
    }
}

/* 02/06/2026 : coeur favori au meme design que les boutons filtre/recherche (rose clair, carre arrondi, icone bordeaux) */
@media (max-width: 767px) {
    .product-miniature .add-to-favorite {
        background: #f2e8ee !important;
        border-radius: 9px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
        width: 34px !important;
        height: 34px !important;
    }
    .product-miniature .add-to-favorite::before,
    .product-miniature .add-to-favorite.in_favoris::before {
        color: #5b0e2d !important;
    }
}

/* 02/06/2026 : un peu de marge autour du coeur dans la pastille (sans exces) */
@media (max-width: 767px) {
    .product-miniature .add-to-favorite {
        width: 36px !important;
        height: 36px !important;
    }
    .product-miniature .add-to-favorite::before,
    .product-miniature .add-to-favorite.in_favoris::before {
        font-size: 18px !important;
    }
}

/* ===== Page confirmation de commande : titre + ligne email en vert de marque La Vivriere (#9BC150) ===== */
.lv-oc-confirm .page-title-section,
.lv-oc-confirm .lv-oc-email {
    color: #9BC150 !important;
}


/* =========================================================================
   Page confirmation de commande - refonte design La Vivriere
   ========================================================================= */
#order-confirmation .breadcrumb__wrapper { display: none !important; }
#order-confirmation #left-column,
#order-confirmation #right-column { display: none !important; }
#order-confirmation #center-column {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#order-confirmation .lv-oc-confirm {
  background: #ffffff;
  border: 1px solid #ece6df;
  border-radius: 18px;
  text-align: center;
  padding: 2.75rem 1.5rem 2.25rem;
  margin: 1.5rem 0;
  box-shadow: 0 6px 22px rgba(73, 0, 41, .06);
}
#order-confirmation .lv-oc-confirm__icon {
  font-size: 4.5rem;
  line-height: 1;
  color: #9BC150;
  display: block;
  margin-bottom: .5rem;
}
#order-confirmation .lv-oc-confirm__title {
  color: #9BC150 !important;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: .25rem 0 .75rem;
}
#order-confirmation .lv-oc-confirm__email {
  color: #9BC150 !important;
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 36rem;
}
#order-confirmation .lv-oc-confirm__invoice { margin: .9rem 0 0; }
#order-confirmation .lv-oc-confirm__invoice-link {
  color: #E9621E;
  font-weight: 600;
  text-decoration: underline;
}

#order-confirmation .order-confirmation__details.card,
#order-confirmation .card {
  border: 1px solid #ece6df !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 22px rgba(73, 0, 41, .06);
}
#order-confirmation .order-confirmation__details .card-body { padding: 1.75rem; }
#order-confirmation .order-confirmation__details h2 {
  color: #490029;
  border-bottom: 2px solid #9BC150;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}
#order-confirmation .order-confirmation__details-list { list-style: none; padding-left: 0; }
#order-confirmation .order-confirmation__details-list li { padding: .15rem 0; }

/* ============================================================
   LISTES DE COURSES REUTILISABLES (save panier / Mes listes)
   ============================================================ */

/* Toast de confirmation */
.lv-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);z-index:10050;
  max-width:min(92vw,520px);background:#1f3d2b;color:#fff;padding:14px 18px;border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);font-size:.95rem;line-height:1.4;opacity:0;
  transition:opacity .3s ease,transform .3s ease;pointer-events:auto}
.lv-toast.is-shown{opacity:1;transform:translate(-50%,0)}
.lv-toast.is-error{background:#7a2230}
.lv-toast a{color:#bdf0c8;text-decoration:underline;font-weight:600;white-space:nowrap}

/* Modal "Enregistrer comme liste" */
.lv-savelist-modal{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;
  background:rgba(15,25,18,.55);padding:18px}
.lv-savelist__box{position:relative;width:min(94vw,460px);background:#fff;border-radius:16px;
  padding:24px 22px 20px;box-shadow:0 24px 60px rgba(0,0,0,.32);animation:lvSlPop .2s ease}
@keyframes lvSlPop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
.lv-savelist__close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.7rem;
  line-height:1;color:#9aa39c;cursor:pointer}
.lv-savelist__title{margin:0 0 14px;font-size:1.25rem;color:#1f3d2b}
.lv-savelist__lbl{display:block;font-size:.82rem;font-weight:600;color:#5b6b60;margin-bottom:5px}
.lv-savelist__input{width:100%;padding:11px 13px;border:1.5px solid #d8e0d8;border-radius:10px;font-size:.98rem}
.lv-savelist__input:focus{outline:none;border-color:#3a8f57}
.lv-savelist__types{display:flex;flex-direction:column;gap:8px;margin:14px 0 6px}
.lv-savelist__type{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid #e3e9e3;
  border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.lv-savelist__type:hover{border-color:#bcd6c4}
.lv-savelist__type input{margin-top:3px}
.lv-savelist__type input:checked + span strong{color:#2f7a48}
.lv-savelist__type:has(input:checked){border-color:#3a8f57;background:#f3faf5}
.lv-savelist__type span{display:flex;flex-direction:column}
.lv-savelist__type strong{font-size:.95rem;color:#26352c}
.lv-savelist__type small{font-size:.8rem;color:#74817a;line-height:1.35}
.lv-savelist__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.lv-savelist__btn{border:0;border-radius:24px;padding:10px 20px;font-weight:600;cursor:pointer;font-size:.92rem}
.lv-savelist__btn--ghost{background:#eef2ee;color:#48564d}
.lv-savelist__btn--primary{background:#3a8f57;color:#fff}
.lv-savelist__btn--primary:disabled{opacity:.6;cursor:default}

/* Page "Mes listes" */
.lvm-lists-wrapper{padding:26px 0 50px}
.lv-lists-note{margin-bottom:22px}
.lv-lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.lv-list-card{background:#fff;border:1px solid #e6ece6;border-radius:16px;padding:16px 16px 14px;
  box-shadow:0 4px 16px rgba(31,61,43,.05);display:flex;flex-direction:column}
.lv-list-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.lv-list-card__title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lv-list-card__name{font-weight:700;font-size:1.08rem;color:#1f3d2b}
.lv-list-card__count{font-size:.8rem;color:#7c887f;white-space:nowrap;padding-top:4px}
.lv-list-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:3px 8px;border-radius:20px}
.lv-list-badge--auto{background:#e4f0fb;color:#1f6aa8}
.lv-list-badge--sub{background:#fbeede;color:#b3701a}
.lv-list-card__items{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;
  max-height:230px;overflow:auto}
.lv-list-item{display:flex;align-items:center;gap:10px;font-size:.9rem}
.lv-list-item__img{width:34px;height:34px;object-fit:cover;border-radius:7px;flex:0 0 auto;background:#f1f4f1}
.lv-list-item__name{flex:1;color:#34433a;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-list-item__qty{font-weight:600;color:#56655b}
.lv-list-item.is-unavailable{opacity:.55}
.lv-list-item__flag{font-size:.68rem;font-weight:600;color:#a23b3b;background:#fbe7e7;padding:2px 7px;border-radius:12px}
.lv-list-card__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;
  padding-top:10px;border-top:1px dashed #e6ece6}
.lv-list-act{border:0;background:none;color:#5b6b60;font-size:.85rem;cursor:pointer;display:inline-flex;
  align-items:center;gap:4px;padding:6px 6px}
.lv-list-act:hover{color:#2f7a48}
.lv-list-act--danger:hover{color:#b3322f}
.lv-list-card__actions .btn-lvm-green-pill{margin-right:auto}
.lv-list-card__actions .btn-lvm-green-pill:disabled{opacity:.5;cursor:default}

/* Bloc resultat (X ajoutes / Y ignores) */
.lv-list-result{margin-top:22px;padding:16px 18px;border-radius:12px;font-size:.95rem;line-height:1.5}
.lv-list-result.is-ok{background:#eef9f1;border:1px solid #bfe6cb;color:#1f5e36}
.lv-list-result.is-warn{background:#fff6e6;border:1px solid #f0d9a8;color:#7a5410}
.lv-list-result.is-error{background:#fbecec;border:1px solid #eebcbc;color:#8a2a2a}
.lv-list-result__skipped{margin-top:8px;font-size:.88rem}
.lv-list-result__skipped ul{margin:4px 0 0;padding-left:20px}
.lv-list-result__skipped em{color:#9a6a1a;font-style:normal}
.lv-list-result__cta{margin-top:12px}

/* Carte "Mes listes" dans Mon compte */
.lv-acc-mylists{margin:0 0 18px}
.lv-acc-card--lists{display:flex}

/* ===== Compte client : Mes bons de distribution + signalement remboursements ===== */
.lv-acc-ventes{margin:0 0 1.5rem}
.lv-acc-ventes__title{font-weight:700;font-size:1.05rem;color:#490029;margin:0 0 .75rem;padding-bottom:.4rem;border-bottom:2px solid #9BC150}
.lv-acc-ventes__list{display:flex;flex-direction:column;gap:.6rem}
.lv-acc-vrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;border:1px solid #eee;border-radius:12px;padding:.75rem 1rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.lv-acc-vrow__name{font-weight:600;color:#333;display:block}
.lv-acc-vrow__date{font-size:.85rem;color:#888}
.lv-acc-vrow__actions{display:flex;gap:.5rem;flex-wrap:wrap}
.lv-acc-vbtn{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;text-decoration:none;padding:.45rem .8rem;border-radius:20px;background:#490029;color:#fff!important;white-space:nowrap}
.lv-acc-vbtn .material-icons{font-size:1.1rem}
.lv-acc-vbtn:hover{opacity:.92}
.lv-acc-vbtn--warn{background:#E9621E}
@media(max-width:575px){.lv-acc-vrow{flex-direction:column;align-items:stretch}.lv-acc-vrow__actions{justify-content:stretch}.lv-acc-vbtn{flex:1;justify-content:center}}