/* MGF — Surcharges CSS spécifiques vp_neoteric_mgf */

/* LayerSlider : clip le débordement sans toucher aux calculs internes JS (positions en px absolus) */
.slider-section {
    overflow: hidden;
}

/* Barre de navigation mobile : correction débordement horizontal
   La template réinitialise margin/padding-right uniquement à ≥992px.
   Sur mobile, forcer les items à occuper l'espace disponible sans dépasser */
@media (max-width: 991.98px) {
    .header-right-lg.fixed-bottom {
        padding-right: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    .header-right-lg.fixed-bottom > * {
        min-width: 0;
    }
}
/* ═══════════════════════════════════════════════════
   1. LAYOUT GLOBAL
   ═══════════════════════════════════════════════════ */

/* Réduction margin-bottom paragraphes (template surcharge Bootstrap 1rem → 2rem) */
p {
    margin-bottom: 1rem;
}



/* Zone contenu principal — padding intérieur + cap largeur grands écrans (27"+) */
.main-content-area {
    padding: 2.5rem;
}
.main-content-area > .container-fluid {
    max-width: 1550px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 992px) {
    /* Padding horizontal élargi en desktop : les blocs col (fonds blancs) s'alignent
       à 1.5rem + 1em des bords sur toutes les vues (fiche produit et catégorie) */
    .main-content-area {
        padding-left: calc(1.5rem + 1em);
        padding-right: calc(1.5rem + 1em);
        padding-top: 1rem; /* réduit l'espace sous le breadcrumb (défaut shorthand : 2.5rem) */
        padding-bottom: 1rem; /* symétrie verticale avec padding-top (défaut shorthand : 2.5rem) */
    }
}

/* Mobile global — supprime le padding latéral de .main-content-area sur toutes les pages.
   Le gutter Bootstrap (.container-xxl --gutter-x: 2em) assure l'espacement latéral. */
@media (max-width: 575px) {
    .main-content-area {
        padding-left: 0;
        padding-right: 0;
    }
}

/* largeur en mode affichage statique */
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	max-width: 1550px;
}

/* Respiration verticale de la section principale */
.main-section {
    padding-top: 0;
}

/* En-tête de page (h1) — respiration en haut du bloc blanc */
#content .page-header {
    padding-top: 1rem;
}

/* Titre produit (h1) */
.productdetails-view .product-page-title {
    font-size: 2rem;
}

@media (max-width: 575.98px) {
    /* Réduit l'espace sous le h1 de catégorie (2.5rem → 1.5rem) */
    .page-header .h1,
    .page-header h1 {
        margin-bottom: 1.5rem;
    }
    /* Réduit la marge sous la description catégorie (3rem → 1.5rem) */
    .category_description.mb-5 {
        margin-bottom: 1.5rem !important;
    }
    /* Masque le label "Trier par" pour préserver la toolbar sur très petits écrans */
    .orderby-container .col-form-label {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════
   2. NAVIGATION — MEGA MENU
   ═══════════════════════════════════════════════════ */

/* Bordure mega-menu : transparent (le sélecteur de la template ne permet pas cette valeur) */
.mega-menu-container {
    --megamenu-border-color: none;
}

/* Stickers (badges) : léger arrondi */
.mod-megamenu--sticker {
    border-radius: 0.2rem;
    z-index: 1;
}

/* ─── Offcanvas mobile ─────────────────────────────
   Overrides du module mod_vpprime_offcanvas_menu.
   ─────────────────────────────────────────────── */

/* 1. Sentence case — le module impose uppercase sur niveau 1, illisible sur mobile */
.mod-offcanvas-menu--level-1 > .mod-offcanvas-menu--item-anchor {
    text-transform: none;
}

/* 2. Touch target confortable (natif : 0.9rem 1rem) */
.mod-offcanvas-menu--item-inner {
    padding: 1rem 1.2rem;
}

/* 3. Icone : espacement + taille (natif : margin-right 0.3rem, pas de font-size) */
.mod-offcanvas-menu--item-icon {
    font-size: 1.2em;
    margin-right: 0.7rem;
    flex-shrink: 0;
}

/* 4. Item actif : bordure gauche couleur primaire */
.mod-offcanvas-menu--current > .mod-offcanvas-menu--item-anchor {
    border-left: 3px solid var(--template-primary-color);
}
.mod-offcanvas-menu--current > .mod-offcanvas-menu--item-anchor .mod-offcanvas-menu--item-inner {
    padding-left: calc(1.2rem - 3px); /* compense la bordure pour aligner le texte */
}

/* 5. Sous-items : indentation visuelle + poids reduit */
.mod-offcanvas-menu--sub .mod-offcanvas-menu--item-inner {
    padding-left: 2rem;
    font-weight: 400;
}

/* Lisibilité des items niveau 1 en uppercase : letter-spacing aéré */
.mod-megamenu--item.mod-megamenu--level-1 > .mod-megamenu--item-anchor .mod-megamenu--item-title {
    letter-spacing: 0.04em;
}

@media (min-width: 992px) {
    /* Classes utilitaires appliquées via admin Joomla sur les ancres du mega-menu.
       Scope mega-menu uniquement : les mêmes classes sont présentes sur l'offcanvas
       (mobile ET desktop depuis headroom) → sans ce scope elles cassent l'offcanvas. */
    .mega-menu-container .menu-font-16 {
        font-size: 1rem;
    }
    .mega-menu-container .pad-16 {
        padding: 1rem 1.2rem;
    }
    .mega-menu-container .pad-sub-16 {
        padding: 0.6rem 1.5rem;
    }
    /* Numéro de téléphone dans le mega-menu : emphase visuelle (bold uniquement) */
    .mega-menu-container .mod-megamenu--item-anchor.menu-phone .mod-megamenu--item-title {
        font-weight: 700;
        font-size: 1.2em;
        display: contents;
    }
    /* En-tête de colonne mega-menu : classe posée sur l'ancre (span) par Joomla, pas sur le li */
    .menu-col-header .mod-megamenu--item-title {
        color: var(--template-primary-color);
        font-size: 0.875rem;
        letter-spacing: 0.08em;
    }


    /* Effet pilule hover — opt-in via classe "menu-pill" sur l'ancre du GROUP header (alias).
       Le ~ cible le container frere de cet alias → seule cette colonne est affectee.
       Permet de mixer colonnes natives (menu-pill) et colonnes mod_vertical_menu dans un meme dropdown. */
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item:not(.mod-megamenu--group) > .mod-megamenu--item-anchor {
        border-radius: 22px;
        margin: 2px 7px;
        font-size: 16px;
        font-weight: 500;
        transition: background-color .15s ease-in-out;
    }
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item:not(.mod-megamenu--group) > .mod-megamenu--item-anchor:hover,
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item:not(.mod-megamenu--group).mod-megamenu--current > .mod-megamenu--item-anchor {
        background-color: var(--template-primary-color);
    }
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item:not(.mod-megamenu--group) > .mod-megamenu--item-anchor:hover .mod-megamenu--item-title,
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item:not(.mod-megamenu--group).mod-megamenu--current > .mod-megamenu--item-anchor .mod-megamenu--item-title {
        color: #ffffff;
    }
    /* Chevron blanc quand un item pill avec sous-menu est hover / current / active —
       reproduit le contraste du chevron blanc du mod_vertical_menu (screen de référence).
       Le chevron de base est `color: #aaa` (media/mod_vpprime_mega_menu/css/menu.css:212),
       illisible sur le fond vert du pill. */
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item.mod-megamenu--deeper:not(.mod-megamenu--group) > .mod-megamenu--item-anchor:hover::after,
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item.mod-megamenu--deeper:not(.mod-megamenu--group).mod-megamenu--current > .mod-megamenu--item-anchor::after,
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item.mod-megamenu--deeper:not(.mod-megamenu--group).mod-megamenu--active > .mod-megamenu--item-anchor::after {
        color: #fff;
    }
    /* Chevron sous-menu pill : taille 1rem + line-height 1 pour un centrage vertical
       précis dans le pill (le translateY(-50%) de base anticipe une hauteur = font-size,
       line-height indéfini ajoutait un offset optique). */
    .menu-pill ~ .mod-megamenu--container .mod-megamenu--item.mod-megamenu--deeper:not(.mod-megamenu--group) > .mod-megamenu--item-anchor::after {
        font-size: 1rem;
        line-height: 1;
    }
    /* Bulle du sous-menu plus "présente" — l'ombre de base
       (box-shadow: 0 0 3px rgb(0 0 0 / 15%) ligne 84 du CSS du module) est trop timide
       sur de petites bulles. On renforce pour les sous-dropdowns niveau 2+ uniquement. */
    .mod-megamenu--sub .mod-megamenu--expand > .mod-megamenu--container {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
        border-radius: var(--megamenu-dropdown-border-radius, 0.5rem);
    }

    /* Items alignés à gauche, sans gap (le padding des ancres suffit) */
    .mega-menu-container .mod-megamenu {
        justify-content: flex-start;
    }

    /* Dernier item poussé à droite (les autres restent flush) */
    .mega-menu-container .mod-megamenu > .mod-megamenu--item:last-child {
        margin-left: auto;
    }

    /* Premier item : le lien s'étend jusqu'au bord gauche du container-xxl,
       avec padding-left compensé pour que l'icône garde sa position normale */
    .mega-menu-container .mod-megamenu > .mod-megamenu--item:first-child {
        margin-left: -14px;
    }
    .mega-menu-container .mod-megamenu > .mod-megamenu--item:first-child > .mod-megamenu--item-anchor {
        padding-left: 30px;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
    }

    /* Alignement icône/texte : flex sur item-inner pour un centrage vertical parfait.
       Remplace l'ancien vertical-align: middle + line-height: 0 (moins fiable). */
    .mod-megamenu--level-1 > .mod-megamenu--item-anchor .mod-megamenu--item-inner {
        display: flex;
        align-items: center;
        gap: 0.4em;
    }

    /* Icônes niveau 1 : taille augmentée (1.1em → 1.3em), flex-shrink pour éviter l'écrasement */
    .mod-megamenu--level-1 > .mod-megamenu--item-anchor .mod-megamenu--item-icon {
        font-size: 1.3em;
        flex-shrink: 0;
    }

    /* Caret dropdown : taille augmentée (0.6rem → 0.75rem) */
    .mod-megamenu--deeper:not(.mod-megamenu--group) > .mod-megamenu--item-anchor::after {
        font-size: 0.75rem;
    }

    /* Les ancres niveau 1 remplissent la hauteur du <li> — sinon l'item "menu-phone"
       (font-size: 1.2em) impose une hauteur de row plus grande et un strip #454545
       apparait en dessous des autres items (surtout visible sur Chrome) */
    .mod-megamenu--level-1 > .mod-megamenu--item-anchor {
        height: 100%;
        display: flex;
        align-items: center;
    }

    /* Fond vert au hover et sur l'item actif */
    .mod-megamenu--level-1:hover > .mod-megamenu--item-anchor,
    .mod-megamenu--level-1.mod-megamenu--active > .mod-megamenu--item-anchor {
        background: var(--template-primary-color);
    }

    /* Texte et icône blancs (surcharge --megamenu-top-item-hover/active-color) */
    .mod-megamenu--level-1:hover > .mod-megamenu--item-anchor .mod-megamenu--item-title,
    .mod-megamenu--level-1:hover > .mod-megamenu--item-anchor .mod-megamenu--item-icon,
    .mod-megamenu--level-1.mod-megamenu--active > .mod-megamenu--item-anchor .mod-megamenu--item-title,
    .mod-megamenu--level-1.mod-megamenu--active > .mod-megamenu--item-anchor .mod-megamenu--item-icon {
        color: #fff !important;
    }

    /* Caret dropdown blanc */
    .mod-megamenu--level-1:hover > .mod-megamenu--item-anchor::after,
    .mod-megamenu--level-1.mod-megamenu--active > .mod-megamenu--item-anchor::after {
        color: #fff;
    }
}


/* ═══════════════════════════════════════════════════
   3. SIDEBAR ET PAGES CATÉGORIE
   ═══════════════════════════════════════════════════ */

/* Sidebar et bloc contenu — fond blanc et coins arrondis
   col-lg-9 : catégorie avec sidebar | col-12 : catégorie sans sidebar
   (sur fiche produit, .view-productdetails #content.col-12 surcharge avec #F4F5F7) */
#left-aside,
#content.col-lg-9,
#content.col-12 {
    background: #fff;
    border-radius: 1rem;
    padding-top: 1rem;
}
/* Fiche produit : #content.col-12 est un conteneur gris (pas un bloc blanc à padder) */
.view-productdetails #content.col-12 {
    padding-top: 0;
}
@media (min-width: 992px) {
    /* Desktop : sidebar à gauche + espace entre les blocs */
    #left-aside {
        margin-right: 1rem;
        width: calc(25% - 1rem); /* (25% - 1rem) + 1rem marge + 75% = 100% */
    }
}
@media (max-width: 991.98px) {
    /* Mobile : blocs empilés — margin-bottom sous le content */
    #content.col-lg-9 {
        margin-bottom: 1.5rem;
    }
}

/* Barre de recherche VM — respiration verticale */
.vm-list-search {
    padding-top: 1rem;
}

/* Pagination VM — empêche le débordement horizontal sur mobile.
   La <ul class="pagination"> Bootstrap 5 est flex sans flex-wrap par défaut :
   quand le nombre de pages est élevé, les items débordent du viewport.
   flex-wrap:wrap + max-width:100% les font revenir à la ligne proprement. */
.vm-pagination .pagination {
    flex-wrap: wrap;
    max-width: 100%;
}

/* Correction largeur col-lg-1 pour icônes catégories accueil */
@media (min-width: 1200px) {
    .col-lg-1 {
        width: 9.9%;
    }
}

/* description et accordeon categorie */
.faq-accordion {
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: -3px 0 0 #8fc400;
}

.faq-accordion summary {
    font-weight: bold;
    cursor: pointer;
    display: list-item;
}

.faq-accordion p {
	margin-bottom: 1rem;
}

.faq-accordion h3 {
	font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════
   4. FICHE PRODUIT
   ═══════════════════════════════════════════════════ */

/* --- 4a. Blocs carte (carousel + description) ---- */

/* #content.col-12 sert de conteneur gris avec overflow:hidden.
   overflow:hidden clippe les marges négatives des .row Bootstrap intérieurs,
   ce qui aligne le fond blanc des blocs internes avec les bords du col-12.
   Le gap gris entre les deux cartes est assuré par le mb-5 natif du .row VM. */
.view-productdetails #content.col-12 {
    background: #F4F5F7;
    border-radius: 1rem;
    overflow: clip; /* clip les debordements .row sans creer de scroll container → position:sticky preserve */
    /* Si scroll saccade sous Firefox : tester "overflow: visible" pour isoler la cause */
}

/* Bloc image + infos produit */
.view-productdetails [data-vm="product-child-container"] {
    background: #fff;
    border-radius: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem !important; /* override mb-5 (3rem Bootstrap) */
}

/* Bloc description (onglets + contenu) */
.view-productdetails #product-details-tab {
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    padding: 0.5rem 0 0;
}
.view-productdetails .tab-content {
    background: #fff;
    border-radius: 0 0 1rem 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* --- 4b. Prix ------------------------------------ */

/* Label HT/TTC inline à côté du prix */
.vm-prices-info {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 0.2em;
    font-weight: bold;
}

/* Même couleur que le prix (!important requis : .text-muted Bootstrap utilise !important) */
.product-price .vm-prices-info {
    color: var(--neoteric-color-primary) !important;
}

/* Font-size prix principal HT et TTC */
.productdetails-view .product-prices-wrapper .product-sales-price,
.productdetails-view .product-prices-wrapper .product-sales-price div {
    font-size: 2.2rem;
}
.productdetails-view .product-prices-wrapper .product-salesprice-ttc,
.productdetails-view .product-prices-wrapper .product-salesprice-ttc div {
    font-size: 1.8rem;
}

/* Labels HT/TTC plus petits que le prix (hiérarchie visuelle) */
.productdetails-view .product-prices-wrapper .vm-prices-info {
    font-size: 1.1rem;
}

/* Mobile : force le prix barré seul sur sa ligne, et garde "HT" inline avec le
   prix courant orange. Template.css met .product-price-before-discount et
   .product-sales-price en inline-block ; sur les écrans larges type Pixel 10 Pro
   (~1080px CSS) ils cohabitent sur la même ligne, ce qui pousse "HT" en 3e ligne
   orphelin. En forçant seulement le prix barré en block et en gardant
   .product-sales-price + .vm-prices-info en inline-block, on obtient :
   Ligne 1 : prix barré | Ligne 2 : prix courant HT (groupés). */
@media (max-width: 767.98px) {
    .productdetails-view .product-price-before-discount {
        display: block;
    }
    .productdetails-view .product-sales-price + .vm-prices-info {
        display: inline-block;
        vertical-align: baseline;
        margin-left: 0.25rem;
    }
}

/* Prix TTC secondaire : nouvelle ligne, couleur avant-remise */
.product-salesprice-ttc {
    display: block;
    color: var(--template-product-price-before-discount-color);
}
.product-salesprice-ttc div {
    display: inline-block;
    vertical-align: baseline;
    color: var(--template-product-price-before-discount-color);
}
.product-salesprice-ttc .vm-prices-info {
    color: var(--template-product-price-before-discount-color) !important;
    font-weight: normal;
}

/* Couleur prix principal HT — redéfinit --neoteric-color-primary dans .product-price */
.product-price {
    --neoteric-color-primary: #ff8010;
}

/* Badge montant de remise */
.product-discount-amount {
    display: inline-block;
    color: #fff;
    background: #00ab2c;
    padding: 0.3em 0.5em;
    border-radius: .25rem;
}
.product-discount-amount .PricediscountAmount.vm-price-value {
    display: inline;
    color: #fff;
}
.product-discount-amount .PricediscountAmount.vm-price-value span {
    color: #fff;
}

/* --- 4a-bis. Position custom "tradein" --------------------------
   Champ custom VM rangé en layout_pos=tradein (ex: "Reprise incluse").
   Rendu inline dans .product-prices-wrapper, à côté de .product-discount-amount
   (badge "Vous économisez") avec une teinte bleue pour différencier sémantique-
   ment la reprise de la remise. Popover Bootstrap sur custom_tip. */
.product-tradein {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3em 0.5em;
    margin: 0.35rem 0 0 0.5rem;
    background: #dbeafe;
    color: #1e3a8a;
    border-radius: .25rem;
}
.product-tradein-label {
    font-weight: 500;
}
.product-tradein-value {
    font-weight: 700;
}
.product-tradein-tip {
    display: inline-flex;
    align-items: center;
    color: #3b82f6;
    cursor: help;
    line-height: 1;
}
.product-tradein-tip:hover,
.product-tradein-tip:focus {
    color: #1e40af;
}
.availability {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.availability-date-tip {
    color: #3b82f6;
    cursor: help;
    margin-right: 0.25rem;
    font-size: 0.9em;
    line-height: 1;
}
.availability-date-tip:hover,
.availability-date-tip:focus {
    color: #1e40af;
}

/* --- 4b. Galerie images -------------------------- */

/* Coins arrondis et clip pour les images.
   Rayon aligné sur .5rem (et NON 1rem) : le coin haut-droit de l'image principale
   (col-lg-9.order-lg-last en galerie multiple) coïncide avec le coin de ce
   conteneur, et son overflow:hidden ne peut que rogner PLUS — un .5rem sur l'image
   enfant ne pourrait pas « dé-rogner » un 1rem parent. En image seule, item-inner a
   la même taille que ce conteneur : à 1rem le parent gagnait sur les 4 coins.
   Le cadre blanc visible reste à 1rem (.col-md-6, élément distinct autour). */
.product-image-gallery {
    border-radius: .5rem;
    overflow: hidden;
}

/* Rayon appliqué directement sur l'<img> de la galerie principale : le conteneur
   .product-image-gallery__item-inner est plus large que l'image (ex. 733px vs 630px,
   image centrée) → un rayon sur le conteneur arrondit du vide autour de l'image.
   Sur une image (élément remplacé), border-radius clippe les pixels eux-mêmes,
   quelle que soit la largeur du conteneur. Scopé __main pour ne pas toucher les
   miniatures (rayon propre 0.6rem). Couvre image seule ET toutes les vues du
   carrousel (toutes portent .product-image). */
.product-image-gallery__main .product-image {
    border-radius: .5rem;
}

/* Miniatures : évite la déformation par les attributs HTML width="420" height="420"
   (ratio 1:1 carré) alors que les images sont en portrait (420×448).
   width: auto en CSS prime sur l'attribut HTML et rétablit le ratio naturel du fichier. */
.product-image-gallery__thumbnails .product-image-gallery__item-inner img {
    width: auto;
}

/* Coins arrondis des miniatures individuelles — cohérent avec .yt-gallery-static (yt.css) */
.product-image-gallery__thumbnails .product-image-gallery__item-inner {
    border-radius: 0.6rem;
    overflow: hidden;
}

/* Rayon directement sur l'<img> de la miniature : même cas que l'image principale,
   l'item-inner est plus large que l'image (width:auto → portrait dans un carré),
   donc l'arrondi du conteneur tombe sur du vide. .5rem aligné sur l'image principale. */
.product-image-gallery__thumbnails .product-image-gallery__item-inner img {
    border-radius: .5rem;
}

/* Boutons flèche haut/bas du scroller de miniatures */
.product-image-gallery__thumbnails-controls .btn-nobg {
    border-radius: var(--border-radius-lg);
}

.product-backdrop {
    border-radius: 1rem;
    overflow: hidden;
    z-index: 100;
}

/* Hover image-bords — sublayout products_hover uniquement (classe vm-cards-hover sur .row).
   Le backdrop s'étend avec des marges négatives au-delà du product-container ;
   on applique les mêmes marges négatives à product-list-images pour que l'image
   couvre ces zones. overflow:hidden + border-radius clippent aux coins arrondis. */
.vm-cards-hover .product-container.add-hover-effect .product-list-images {
    border-radius: 0.35rem;
    transition: border-radius 0.3s ease, margin 0.3s ease;
}
.vm-cards-hover .product-container.add-hover-effect:hover .product-list-images,
.vm-cards-hover .product-container.add-hover-effect.state-hover .product-list-images {
    border-radius: 1rem 1rem 0 0;
    margin-left: calc(-0.25 * var(--gutter-x));
    margin-right: calc(-0.25 * var(--gutter-x));
    margin-top: calc(-0.25 * var(--gutter-x));
}
@media (min-width: 992px) {
    .vm-cards-hover .product-container.add-hover-effect:hover .product-list-images,
    .vm-cards-hover .product-container.add-hover-effect.state-hover .product-list-images {
        margin-left: calc(-0.5 * var(--gutter-x));
        margin-right: calc(-0.5 * var(--gutter-x));
        margin-top: calc(-0.5 * var(--gutter-x));
    }
}
.vm-cards-hover .product-container.add-hover-effect:hover .product-image-default,
.vm-cards-hover .product-container.add-hover-effect.state-hover .product-image-default {
    width: 100%;
}
.vm-cards-hover .product-container.add-hover-effect:hover .product-image-default img.product-image,
.vm-cards-hover .product-container.add-hover-effect.state-hover .product-image-default img.product-image {
    width: 100%;
    height: auto;
}

/* Vue liste (products_hover déléguant à products_horizon) : juste un border-radius
   statique sur l'image. Pas d'effet hover car la card liste ne se transforme pas. */
.vm-cards-hover-list .product-list-images {
    border-radius: 0.35rem;
}

/* --- 4c. Blocs galerie / infos produit ----------- */

/* Compense l'asymétrie gap gauche/droit en desktop : la galerie est DANS son col-md-6
   (padding col de 1em côté gauche) mais le bloc infos a son background au niveau du col-element
   (pas de padding côté droit). Les rows internes (tabs, produits liés) ont margin-right: -1em
   qui annule ce padding → aucun effet de bord sur ces blocs. */
@media (min-width: 768px) {
    .productdetails-view {
        padding-right: 1em;
    }
}

/* Fond blanc, coins arrondis, respiration verticale sur les deux cols */
.productdetails-view [data-vm="product-child-container"] > .col-md-6 {
    background: #fff;
    border-radius: 1rem;
    padding-top: 1rem;
}
/* Mobile : remonte le bloc infos produit (2e col) pour réduire l'écart visuel
   avec la miniature vidéo YouTube qui termine le bloc gauche en version mobile
   (ordre mobile : image principale → carrousel vignettes → miniature vidéo → titre produit).
   Le padding-top: 1rem est conservé, le bloc entier glisse simplement plus haut. */
@media (max-width: 767.98px) {
    .productdetails-view [data-vm="product-child-container"] > .col-md-6:nth-child(2) {
        margin-top: -0.5rem;
    }
}
/* Gap entre les deux blocs (sans gap ils sont collés car backgrounds au niveau du col) */
@media (min-width: 768px) {
    .productdetails-view [data-vm="product-child-container"] {
        column-gap: 1rem;
/*        background: #fff;*/
        border-radius: 1rem;
    }
    .productdetails-view [data-vm="product-child-container"] > .col-md-6 {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }
    /* Bloc gauche : carré + sticky.
       align-self:flex-start est requis pour les deux : empêche align-items:stretch de Bootstrap
       d'étirer le bloc à la hauteur du bloc droit (sinon ni aspect-ratio ni sticky ne fonctionnent).
       Le sticky s'arrête naturellement quand le bas du .row (= bas du bloc droit) quitte le viewport.
       ⚠ Si une barre ATC sticky est ajoutée, augmenter top à la hauteur de cette barre. */
    .productdetails-view [data-vm="product-child-container"] > .col-md-6:first-child {
        /*aspect-ratio: 1 / 1;*/
        align-self: flex-start;
        overflow: hidden;
        position: sticky;
        top: 1rem;
    }
}

/* --- 4d. Onglets --------------------------------- */

/* Fond blanc, même alignement que les blocs galerie/infos.
   margin -1em compense le padding du col-12 parent (même principe que les Bootstrap rows)
   pour aligner les bords sur ceux des col-md-6 (1.5rem + 1em depuis les bords de page). */
.productdetails-view .nav-tabs-simple,
.productdetails-view .tab-content {
    margin-left: -1em;
    margin-right: -1em;
    background: #fff;
    padding-left: 1em;
    padding-right: 1em;
}
/* Carte unifiée : coins arrondis en haut sur la nav, en bas sur le contenu */
.productdetails-view .nav-tabs-simple {
    border-radius: 1rem 1rem 0 0;
    padding-top: 0.5rem;
    margin-top: 1rem;
}
.productdetails-view .tab-content {
    border-radius: 0 0 1rem 1rem;
    padding-bottom: 1rem;
}
/* Neutralise le mb-4 Bootstrap (1.5rem) appliqué sur .tab-content : le padding-bottom
   interne ci-dessus suffit pour la respiration dans la carte. Résultat : gap total
   carte → carousel manufacturers = 1rem (.main-content-area pb) + 1rem (.bottom-slider-section pt) = 2rem. */
.productdetails-view .tab-content.mb-4 {
    margin-bottom: 0;
}

/* --- 4e. Champs custom type S (pill-toggle) ------ */

/* Flow multi-colonnes : les champs type-S s'alignent cote a cote quand la place le permet,
   les autres types (E, etc.) restent en pleine largeur. */
.productdetails-view .addtocart-area .product-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Espacement avant la barre add-to-cart porté par le conteneur, pas par la
       derniere carte : sous align-items:stretch, une margin-bottom sur l'item
       last-child rabote sa hauteur (border-box = ligne - marges) et casse
       l'egalite de hauteur des cartes type-S cote a cote. */
    margin-bottom: 1.25rem;
}
.productdetails-view .addtocart-area .product-fields > .product-field {
    flex: 1 1 100%;
    margin: 0;
}
.productdetails-view .addtocart-area .product-fields .custom-field-C-container {
    margin: 0 0 -0.7rem 0;
}
.productdetails-view .add-to-cart-container .addtocart-area .product-fields .custom-field-C-container {
    margin: 0.7rem 0 -0.7rem 0.85rem;
}
.productdetails-view .add-to-cart-container .addtocart-area .product-fields .custom-field-C-container .vm-cmv-label {
    font-size: 1.125rem;
    font-weight: 600;
}
.productdetails-view .addtocart-area .product-fields > .product-field.product-field-type-S {
    flex: 1 1 240px;
}

/* Override padding-bottom plugin vmqtypricing + mb-4 parent quand tableau présent */
.vmqtypricing-container {
    padding-bottom: 0 !important;
}
.productdetails-view .product-short-description:has(.vmqtypricing-container) {
    margin-bottom: 0 !important;
}

/* Conteneur */
.product-field.product-field-type-S {
    background: #FAFAFA;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 0.75rem 1rem 0.6rem;
    border-radius: 1rem;
}

/* Titre du champ */
.product-field.product-field-type-S .product-fields-title-wrapper {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Options en flex avec espacement */
.product-field.product-field-type-S .vm-field-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Supprimer marges Bootstrap form-check-inline */
.product-field.product-field-type-S .form-check-inline {
    margin: 0;
    padding: 0;
}

/* Radio natif masqué visuellement mais fonctionnel (événements JS + accessibilité clavier) */
.product-field.product-field-type-S .form-check-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Pill label */
.product-field.product-field-type-S .form-check-label {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid #d5d9d0;
    border-radius: 0.75rem;
    /*font-size: 1.2rem;*/
    cursor: pointer;
    background: #fff;
    color: #444;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s ease;
    user-select: none;
}

/* Prix — inline à droite du titre dans la pill */
.product-field.product-field-type-S .form-check-label-price {
    font-size: 1rem;
    color: #888;
    margin-top: 0;
}

/* État sélectionné */
.product-field.product-field-type-S .form-check-input:checked + .form-check-label {
    border-color: var(--template-primary-color);
    /*background: #f4f9e8;*/
    /*color: #3d6000;*/
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.product-field.product-field-type-S .form-check-input:checked + .form-check-label .form-check-label-price {
    /*color: #5a8500;*/
    color: #ff8010;
}

/* Hover état non-sélectionné */
.product-field.product-field-type-S .form-check-label:hover {
    border-color: #aab89a;
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}

/* Choices.js dropdown (type-S avec <select>) — largeur adaptée au contenu */
.product-field.product-field-type-S .choices {
    width: fit-content;
    min-width: 180px;
    max-width: 100%;
}

/* --- 4e2. Champs custom type E (extra_product / buy_together) -- */

/* Conteneur — même traitement visuel que le type-S */
.product-field.product-field-type-E {
    background: #FAFAFA;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 0.75rem 1rem 0.6rem;
    border-radius: 1rem;
    margin: 0 0.5rem 0.5rem 0;
}

/* Titre du champ */
.product-field.product-field-type-E .product-fields-title-wrapper {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Quand le layout compact est à l'intérieur du conteneur type-E,
   sa propre bordure et son fond sont déjà fournis par le parent */
.product-field.product-field-type-E .bt-compact,
.product-field.product-field-type-E .ep-compact {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* buy_together compact — carte entière cliquable (toggle) + icône info en coin
   Le <a> vers la fiche produit a été remplacé par un <span.bt-item-toggle> :
   clic n'importe où sur la carte = bascule la sélection. Un petit lien
   .bt-info en coin haut-droit permet d'ouvrir la fiche produit dans un
   nouvel onglet sans déclencher le toggle. */
.bt-item-toggle {
    position: relative;
    cursor: pointer;
}
.bt-item-toggle .bt-info {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 50%;
    line-height: 1;
    z-index: 2;
    text-decoration: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bt-item-toggle .bt-info svg {
    display: block;
}
.bt-item-toggle .bt-info:hover {
    color: var(--template-primary-color, #8fc400);
    border-color: var(--template-primary-color, #8fc400);
    background: #fff;
}

/* Fusion buy_together → bouton ATC principal :
   Quand le widget bt est dans un form.product (cas standard fiche produit),
   on masque le bloc de totaux + bouton dédié de bt et on affiche les totaux
   au-dessus de la barre ATC principale via un slot injecté en JS. */
.bt-compact-fusion .bt-summary {
    display: none;
}
form.product:has(.bt-compact-fusion) .bt-main-totals {
    display: none; /* masqué par défaut, JS l'affiche quand >= 1 accessoire coché */
    margin: 0.75rem 0 0.5rem;
    font-weight: 600;
}
form.product:has(.bt-compact-fusion) .bt-main-totals .bt-main-total-ht {
    font-size: 1.15rem;
    color: #ff8010;
}
form.product:has(.bt-compact-fusion) .bt-main-totals .bt-main-total-ttc {
    font-size: 1rem;
    color: var(--template-product-price-before-discount-color, #6c757d);
    font-weight: 500;
}
form.product:has(.bt-compact-fusion) .bt-main-totals .bt-main-price-ht,
form.product:has(.bt-compact-fusion) .bt-main-totals .bt-main-price-ttc {
    margin-left: 0.4em;
}

/* --- 4f. Bouton Ajouter au panier ---------------- */

/* Forme pill + typographie uniquement — couleurs gérées par les variables template
   (--template-primary-color / --template-primary-hover-color via .btn-primary) */
.addtocart-button {
    border-radius: 2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.75rem 2rem;
    /* Étend la transition Bootstrap pour inclure transform */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
                transform 0.1s ease;
}
.addtocart-button:hover {
    transform: translateY(-1px);
}
.addtocart-button:active {
    transform: translateY(0);
}

.btn-vme-round > i {
    border-radius: var(--border-radius-lg)!important;
}

/* --- 4g. Bloc références produit (SKU, MPN, GTIN, boîte) --- */

.product-stock {
    font-weight: 600;
}
.product-refs-block {
    font-size: 0.875rem;
}

/* Mobile : stack vertical des deux colonnes (col-5 stock + col-7 refs natif VM).
   En dessous de 576px, la col-5 fait ~160px — trop étroit pour "Réapprovisionnement"
   + "Livré à partir du JJ-MM-AAAA" qui wrappe agressivement mot par mot. */
@media (max-width: 575.98px) {
    .productdetails-view .product-stock,
    .productdetails-view .product-refs-block {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
    /* Espacement homogène 0.75rem entre les 3 lignes empilées :
       - override Bootstrap mt-4 (1.5rem !important) de .availability → 0.75rem
       - margin-bottom du bloc stock → 0.75rem (même gap que ci-dessus) */
    .productdetails-view .product-stock .availability.mt-4 {
        margin-top: 0.75rem !important;
    }
    .productdetails-view .product-stock {
        margin-bottom: 0.75rem;
    }
    /* Réf. alignée sur la taille du corps pour éviter le contraste trop fort
       avec le texte bold du stock une fois empilés */
    .productdetails-view .product-refs-block {
        font-size: 1rem;
    }
}

/* --- 4h. Position backlink (à droite du lien Retour) */

.productdetails-view .backlink-fields-container .product-field {
    margin-bottom: 0;
}
.productdetails-view .backlink-fields-container .product-fields {
    padding-bottom: 0;
}

/* --- 4h-bis. Utilités produit (wishlist / compare / poser une question) ----
   Le core template utilise `display:inline-block; margin-right:2rem` sur
   .product-utility-item. Inline-block = aucun gap vertical lors du wrap sur
   viewport étroit. Passe le conteneur en flex-wrap avec gap row/column séparé. */
.productdetails-view .product-utilities-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 0.5rem;
}
.productdetails-view .product-utilities-container .product-utility-item {
    margin-right: 0;
}
/* Masque les .product-utility-item vides — les conditions PHP du template
   (default.php lignes 175-185) sortent le wrapper dès que enable_wishlist /
   enable_compare sont activés en admin, mais `HTMLHelper::_('vmessentials...')`
   peut retourner une chaîne vide pour certains produits (ex: discontinued).
   Sans ce fix, column-gap crée un offset avant le seul item non-vide présent. */
.productdetails-view .product-utility-item:not(:has(*)) {
    display: none;
}

/* --- 4i. Produits complémentaires ---------------- */

/* Resserre le gap titre → contenu, uniquement sur les 2 sections VM de la fiche produit.
   Override scopé : la règle core `template.css` .header-group {margin-bottom:2.5rem}
   s'applique aussi aux chromes Joomla (modules) partout dans le site — ne pas toucher
   au global. Ici on cible uniquement `.product-related-products` et `.product-related-categories`. */
.product-related-products > .header-group,
.product-related-categories > .header-group {
    margin-bottom: 1.25rem;
}

/* Bouton ATC contenu dans les cartes hover (largeur contrainte) */
.vm-cards-hover .product-container.add-hover-effect .addtocart-bar {
    flex-wrap: wrap;
}
.vm-cards-hover .product-container.add-hover-effect .addtocart-button-container {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}
.vm-cards-hover .product-container.add-hover-effect .addtocart-button {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fond blanc et coins arrondis (même alignement que les onglets) */
.productdetails-view .related_products-fields-container {
    margin-left: -1em;
    margin-right: -1em;
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 1em;
}

/* Prix des produits complémentaires plus lisibles */
.related_products-fields-container .product-sales-price {
    font-size: 1.15rem;
}

/* Zone image à hauteur constante pour aligner le nom produit sur toutes les cartes
   (on ne cherche pas à équilibrer la hauteur totale des cartes : tns.js ne stretche pas
   les .tns-item en flex, les CTA s'alignent naturellement sur le haut — acceptable pour
   des cartes à contenus différents customfields/variants) */
.product-related-products .product-list-images {
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Plafonne la hauteur image + préserve ratio (évite les "towers" verticaux type rouleau A0) */
.product-related-products .product-list-images img {
    max-height: 160px;
    width: auto;
    object-fit: contain;
    border-radius: 0.35rem;

}

/* Harmonise la typo du nom produit avec la densité de la carte */
.product-related-products .product-name {
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Flèches tns positionnées hors des slides, dans une zone qui EXCLUT la rangée de dots
   en bas (sinon top:50% tombe trop bas car englobe la nav) */
.product-related-products .tns-outer {
    position: relative;
    padding: 0 3rem 2rem;
}
.product-related-products .tns-controls {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 2rem;
    pointer-events: none;
    z-index: 8;
}
.product-related-products .tns-controls button[data-controls] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: #f4f5f7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #333;
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: auto;
    z-index: 9;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.product-related-products .tns-controls button[data-controls]:hover {
    background: var(--template-primary-color);
    color: #fff;
    border-color: var(--template-primary-color);
}
.product-related-products .tns-controls button[data-controls="prev"] { left: 0; }
.product-related-products .tns-controls button[data-controls="next"] { right: 0; }
.product-related-products .tns-controls button[data-controls]:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Mobile : 1 item/slide (default PHP $per_row_xs=1) — flèches masquées, swipe tactile suffit */
@media (max-width: 575.98px) {
    .product-related-products .tns-controls { display: none; }
    .product-related-products .tns-outer { padding: 0 0 2rem; }
    .product-related-products .product-list-images { min-height: 180px; }
    .product-related-products .product-list-images img { max-height: 170px; }
}

/* Catégories liées — même card que les produits liés */
.productdetails-view .related_categories-fields-container {
    margin-left: -1em;
    margin-right: -1em;
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 1em;
}

/* ── Mode card (par défaut) — utilisé si wImage ou wDescr actif côté customfield VM.
   Grille Bootstrap native conservée (col-lg-4/col-md-4/col-sm-6/col-6 déjà sur .category). */
.product-related-categories .item-container {
    padding: 1rem;
    background: #f4f5f7;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease;
}
.product-related-categories .item-container:hover {
    border-color: var(--template-primary-color);
}
.product-related-categories .category-image {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-related-categories .category-image img {
    max-height: 120px;
    width: auto;
    object-fit: contain;
}
.product-related-categories .category-name {
    font-size: 1rem;
}
.product-related-categories .category-name a {
    text-decoration: none;
    color: var(--body-color);
}
.product-related-categories .item-container:hover .category-name a {
    color: var(--template-primary-color);
}
.product-related-categories .category-description {
    font-size: 0.85rem;
    color: var(--gray-600, #6c757d);
}
.product-related-categories .item-backdrop { display: none; }

/* ── Mode pill/chip (override) — activé automatiquement si ni image ni description.
   Utilise :has() (Chrome 105+, Safari 15.4+, Firefox 121+). Neutralise la grille
   Bootstrap et transforme chaque item en tag rond compact. */
.product-related-categories:not(:has(.category-image)):not(:has(.category-description)) .virtuemart-categories .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
}
.product-related-categories:not(:has(.category-image)):not(:has(.category-description)) .virtuemart-categories .row > .category {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
.product-related-categories:not(:has(.category-image)):not(:has(.category-description)) .item-container {
    width: auto !important;
    margin: 0 !important;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #f4f5f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.product-related-categories:not(:has(.category-image)):not(:has(.category-description)) .item-container:hover {
    background: var(--template-primary-color);
    border-color: var(--template-primary-color);
}
.product-related-categories:not(:has(.category-image)):not(:has(.category-description)) .item-container:hover .category-name a {
    color: #fff;
}
.product-related-categories:not(:has(.category-image)):not(:has(.category-description)) .category-name {
    margin: 0 !important;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
}

/* --- 4j. Pages formulaire inline fiche produit (notify / askquestion / recommend) ---
   Le HTML core VP Neoteric de ces layouts (`productdetails/notify.php`,
   `askquestion/form.php`, `recommend/form.php`) n'impose ni largeur ni carte visuelle
   — les champs s'étalent sur toute la largeur du content (jusqu'à 1550px sur desktop).
   Application d'un pattern card cohérent avec les autres sections (tab-content,
   related-products, etc.) : fond blanc, coins arrondis, padding, max-width pour la
   lisibilité du formulaire court. */
.product-notify-page,
.ask-product,
.recommend-product {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
}
/* Captcha : input "Entrez le code" ne devrait pas remplir toute la ligne
   (5-6 caractères attendus, pas besoin de 600+ px) */
.product-notify-page input[name="ask_captcha"],
.ask-product input[name="ask_captcha"],
.recommend-product input[name="ask_captcha"] {
    max-width: 280px;
}
/* Card aperçu produit dans ask/recommend — retire la bordure Bootstrap
   (rgba(0,0,0,.125)) qui donnait l'effet "cadre gris collé à la miniature".
   Card blanche (même fond que la thumbnail → miniature ne "flotte" pas dans une
   zone grise) + ombre douce pour détacher le bloc du fond. Pattern moderne
   Shopify / Apple Store. `overflow:hidden` pour que l'image rounded-start
   respecte les coins. */
.ask-product .card,
.recommend-product .card {
    border: none;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
/* Air autour de la miniature : le HTML utilise `.row.g-0 > .col-md-3` avec image
   en h-100 w-100 object-fit-cover → elle touche les 4 bords du col. On padde
   le col pour que l'image respire, l'image fill l'espace padded naturellement. */
.ask-product .card > .row > .col-md-3,
.recommend-product .card > .row > .col-md-3 {
    padding: 0.75rem;
}
/* Harmonise le border-radius 4 coins (override du `rounded-start !important`
   Bootstrap qui n'arrondit que la gauche à 0.25rem) et passe `object-fit` de
   cover → contain pour éviter le crop du packshot produit dans un col non-carré. */
.ask-product .card .product-image,
.recommend-product .card .product-image {
    border-radius: 0.5rem !important;
    object-fit: contain !important;
    background: #fff;
}
/* Mobile : plein écran (rien à centrer, pas de border-radius) */
@media (max-width: 575.98px) {
    .product-notify-page,
    .ask-product,
    .recommend-product {
        padding: 1.25rem;
        border-radius: 0;
        max-width: 100%;
    }
}

/* Lightbox GLightbox — les "modal-link" (ask / recommend / pdf preview)
   sont override `border-radius: 0` par template.css:13270. On rétablit les
   4 coins arrondis avec overflow hidden pour que le contenu iframe respecte
   le clipping. Cohérent avec le border-radius 1rem des autres blocs MGF. */
.glightbox-clean.modal-link .gslide-external {
    border-radius: 1rem;
    overflow: hidden;
}

/* Quickview GLightbox — correction galerie image.
   Le panel image est à gauche dans une modale 2 colonnes :
   - Coins gauche 1rem (matches bord modale), coins droit carrés (adjacent panel infos)
   - Retrait padding Bootstrap du col image → galerie au ras du bord gauche de la modale,
     le border-radius de la galerie s'aligne avec le coin de la modale
   - Flex-column sur product-images-section → galerie prend tout l'espace sous la nav */
@media (min-width: 768px) {
    .quickview-body > .col-md-6:first-child {
        padding-left: 0;
        padding-right: 0;
    }
    .quickview-body .product-images-section {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .quickview-body .product-image-gallery {
        flex: 1;
        border-radius: 1rem 0 0 1rem;
        overflow: hidden;
        min-height: 0;
    }
    /* Propage height:100% à travers les wrappers TNS slider pour que l'image
       puisse atteindre les 4 bords de la galerie. */
    .quickview-body .product-image-gallery__main-wrapper,
    .quickview-body .product-image-gallery .tns-outer,
    .quickview-body .product-image-gallery .tns-ovh,
    .quickview-body .product-image-gallery .tns-inner,
    .quickview-body .product-image-gallery__main,
    .quickview-body .product-image-gallery__item,
    .quickview-body .product-image-gallery__item-inner {
        height: 100%;
        margin: 0;
        min-height: 0;
    }
    /* L'image couvre le conteneur (recadrage léger sur les côtés selon ratio).
       Sans cover, l'image carrée 630×672 dans un panel portrait laisse du blanc
       en haut/bas. Le ratio image vs panel est généralement proche, le crop
       reste minime sur des photos produit. */
    .quickview-body .product-image-gallery__item-inner img.product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
/* Mobile : image empilée en haut → coins top arrondis seulement */
@media (max-width: 767.98px) {
    .quickview-body .product-image-gallery {
        border-radius: 1rem 1rem 0 0;
    }
}

/* Coins arrondis sur les images ouvertes en lightbox (galerie produit, etc.).
   Rayon .5rem volontairement plus discret que le 1rem des petits blocs MGF :
   sur un grand visuel, un rayon perçu reste proportionnel à la taille de
   l'élément, donc .5rem suffit à adoucir l'angle sans alourdir le rendu. */
.glightbox-clean .gslide-image img {
    border-radius: .5rem;
}

/* Mobile portrait : sur un visuel haut, c'est la largeur (max-width:100vw du
   vendor) qui sature → l'image touche les bords gauche/droite et ne se détache
   pas du fond noir. On réduit max-width pour créer une gouttière latérale (image
   centrée par margin:auto → ~1.25rem de chaque côté). En paysage, c'est la
   hauteur qui borne l'image → marges latérales déjà présentes, on ne touche pas. */
@media (max-width: 767.98px) and (orientation: portrait) {
    .glightbox-clean .gslide-image img {
        max-width: calc(100vw - 2.5rem);
    }
}

/* Variante iframe `tmpl=component` (body `.tmpl-component`, cf
   vp_neoteric/component.php:221) pour les formulaires ouverts en lightbox.
   Retire les contraintes internes : la lightbox sert déjà de conteneur visuel
   (card + radius + ombre) et de borne de largeur — `max-width: 720px` interne
   créait une double contrainte qui gaspillait ~180px dans une modale de ~900px. */
.tmpl-component .product-notify-page,
.tmpl-component .ask-product,
.tmpl-component .recommend-product {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Mobile en lightbox : padding 0 — la lightbox a son propre padding extérieur,
   le nôtre s'additionnait et grignotait l'espace utile sur petit écran. */
@media (max-width: 575.98px) {
    .tmpl-component .product-notify-page,
    .tmpl-component .ask-product,
    .tmpl-component .recommend-product {
        padding: 0;
    }
}

/* Scroll arrière-plan quand lightbox ouverte : GLightbox pose `overflow: hidden`
   sur `body.glightbox-open` seulement, mais la scrollbar de la page reste visible
   et la page scrolle malgré tout (desktop inclus). Cause probable : un wrapper
   enfant du body a son propre scroll qui n'est pas bloqué par overflow:hidden
   du parent. On étend la règle à `<html>` (GLightbox y ajoute aussi la classe,
   cf glightbox.js:2626-2628) et on ajoute `overscroll-behavior: none` pour
   bloquer la propagation tactile iOS/Android (overflow:hidden ne suffit pas
   seul sur ces OS). Scope `.tmpl-component` pour l'iframe formulaire. */
html.glightbox-open,
body.glightbox-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}
.tmpl-component {
    overscroll-behavior: contain;
}

/* --- 4i. Tableau prix dégressifs (vmqtypricing) --- */

/* !important nécessaire : style.css du plugin est chargé après custom.css.
   border-collapse:separate requis pour border-radius sur cellules de coin.
   overflow:hidden inopérant sur <table> → coins via border-radius sur cellules. */
.vmqtypricing-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
}

/* Coins arrondis sur les 4 cellules de coin */
.vmqtypricing-table > thead > tr:first-child > th:first-child { border-radius: 0.75rem 0 0 0; }
.vmqtypricing-table > thead > tr:first-child > th:last-child  { border-radius: 0 0.75rem 0 0; }
.vmqtypricing-table > tbody > tr:last-child  > td:first-child { border-radius: 0 0 0 0.75rem; }
.vmqtypricing-table > tbody > tr:last-child  > td:last-child  { border-radius: 0 0 0.75rem 0; }

/* Annule les bordures de lignes du plugin, remplace par border-bottom sur cellules */
.vmqtypricing-table > :not(caption) > * {
    border-width: 0 !important;
}
.vmqtypricing-table > :not(caption) > * > * {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.vmqtypricing-table > tbody > tr:last-child > * {
    border-bottom: none !important;
}

/* En-tête : fond cool-grey, label discret */
.vmqtypricing-table th {
    background-color: #F4F5F7 !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Ligne sélectionnée : tint vert primaire */
.vmqtypricing-table > :not(caption) > .selected-quantity > * {
    background-color: color-mix(in srgb, var(--neoteric-color-primary) 10%, transparent) !important;
}

/* Hover sur lignes cliquables */
.vmqtypricing-table .is-clickable:hover > * {
    background-color: #F4F5F7 !important;
    transition: background-color 0.15s ease;
}


/* ═══════════════════════════════════════════════════
   5. COMPOSANTS GÉNÉRIQUES — FLAT BLOCKS
   ═══════════════════════════════════════════════════ */

.padtxt {
    padding-top: 0.625rem;
}

.flat-block-grey {
    background: #575757;
}

.flat-block-light-grey {
    color: #575757 !important;
    background: #f5f5f5;
}

.flat-block-green {
    background: var(--template-primary-color);
}

.flat-block-green:hover {
    background: #f5f5f5 !important;
    color: var(--template-primary-color) !important;
}

.flat-block {
    padding: 20px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    width: 110px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.flat-block-small {
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    height: 90px;
    padding: 17px 10px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    width: 90px;
}

.flat-block:hover {
    -webkit-animation: jump .4s ease;
    -moz-animation: jump .4s ease;
    -o-animation: jump .4s ease;
    animation: jump .4s ease;
    background: #f5f5f5;
    color: #454545;
}

.flat-block-small:hover {
    -webkit-animation: jump .4s ease;
    -moz-animation: jump .4s ease;
    -o-animation: jump .4s ease;
    animation: jump .4s ease;
    background: #f5f5f5;
    color: #454545;
}

a:has(.flat-block),
a:has(.flat-block-small) {
    color: var(--gray-800);
}

a:has(.flat-block):hover,
a:has(.flat-block-small):hover {
    color: #ff8010;
}

/* ═══════════════════════════════════════════════════
   6. TOOLTIPS BOOTSTRAP 5
   ═══════════════════════════════════════════════════ */

/* Jonction visuelle flèche ↔ bulle : le ::before de template.css chevauche l'inner
   de 1px mais ce joint est insuffisant sur les écrans haute densité / zoom ≠ 100%.
   On passe à -3px pour couvrir les cas sub-pixel sans altérer l'aspect visuel.
   Couvre les 4 placements (top/bottom/left/right) — VMessentials utilise placement="left"
   sur les boutons icon-only des cards, où la flèche est sur l'axe horizontal.
   Note : ne pas dépasser -3px sinon la pointe disparaît (flèche = 6.4px). */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    top: -3px;
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -3px;
}
/* Placement="left" → flèche à droite de la bulle (bs-tooltip-start) */
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
    left: -3px;
}
/* Placement="right" → flèche à gauche de la bulle (bs-tooltip-end) */
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
    right: -3px;
}


/* ═══════════════════════════════════════════════════
   7. FOOTER — bottom-section
   ═══════════════════════════════════════════════════ */

/* Aligne le h4 du module Articles (Dernières News) sur la taille des liens de liste */
.bottom-section .mod-articles-title {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   8. DOCUMENTATION PRODUIT — vpfileupload chips
   ═══════════════════════════════════════════════════ */

.vpfu-doc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0;
}
.vpfu-doc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border: 1.5px solid #dee2e6;
	border-radius: 2rem;
	background: #fff;
	color: #333;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	max-width: 280px;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.vpfu-doc-chip:hover {
	border-color: var(--template-primary-color, #418db5);
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	background: #f8f9fa;
	color: #111;
	text-decoration: none;
}
.vpfu-doc-chip > .fas:first-child {
	font-size: 1.05em;
	flex-shrink: 0;
}
.vpfu-doc-chip-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vpfu-doc-chip-dl {
	font-size: 0.75em;
	color: #adb5bd;
	flex-shrink: 0;
	margin-left: 2px;
	transition: color .15s;
}
.vpfu-doc-chip:hover .vpfu-doc-chip-dl {
	color: var(--template-primary-color, #418db5);
}


@-webkit-keyframes jump {
    0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}
@keyframes jump {
    0%, 100% { -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
    50% { -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
}

.itemid-101 .mb-5 {
	margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════
   8. PAGE D'ACCUEIL — mise en page modules
   ═══════════════════════════════════════════════════ */

/* Module à fond blanc — classe admin (Module Class Suffix).
   Même largeur que le Bootstrap .row (qui a margin: -1em chaque côté via --gutter-x: 2em).
   Pas de margin-top négatif : il masquait le padding-top derrière le slider
   → l'espace visible au-dessus des tuiles était 0 alors que l'espace en bas était 2.5rem. */
.mod-block-white {
    background-color: #fff;
    border-radius: 0 0 1rem 1rem;
    padding: 2.5rem;
    margin-left: calc(-0.5 * var(--gutter-x));
    margin-right: calc(-0.5 * var(--gutter-x));
}

/* Page d'accueil — supprime le padding horizontal de .main-content-area.
   Restaure la largeur d'origine du module icônes (.mod-block-white) :
   le .container-xxl assure son propre gutter (--gutter-x: 2em = 1em/côté). */
.itemid-101 .main-content-area {
    padding-left: 0;
    padding-right: 0;
}

/* Rapprocher le module icônes du slider (réduit le margin-top de 4rem à 1.5rem) */
.itemid-101 .main-top-vertical-section {
    margin-top: -1.5rem;
}

/* Menu à cheval — toutes les pages, desktop uniquement (mega-menu masqué sous 992px)
   Sur la home : le menu chevauche le slider.
   Sur les autres pages : le menu chevauche le breadcrumb (fond gris page). */
@media (min-width: 992px) {
    .header-content {
        position: relative; /* containing block pour le mega-menu absolu */
        z-index: 100;
    }
    /* Restaurer position:sticky quand le sticky header est activé dans les params template */
    .header-content.sticky-top {
        position: sticky;
    }
    /* mod_vertical_menu (menu off-canvas "push") enveloppe le contenu et pose overflow:auto
       sur <body class="sm-container">. Cela transforme le body en conteneur de défilement qui,
       lui, ne scrolle jamais (le scroll réel se fait sur <html>) → le header sticky s'y accroche
       et ne colle donc plus du tout. On rétablit overflow:visible pour rendre le viewport
       conteneur de scroll du header. Le verrouillage de fond du menu mobile ouvert
       (html.sm-full-XXX body { overflow:hidden !important }, spécificité supérieure) reste
       prioritaire → aucune régression sur l'off-canvas. */
    body.sm-container {
        overflow: visible !important;
    }
    .header-main {
        padding-bottom: 1.2rem; /* espace pour l'effet à cheval — indépendant du centrage logo */
    }
    .header-main .container-inner {
        padding-top: 1rem;
        padding-bottom: 1rem; /* symétrique → logo/search centré */
    }
    /* position:absolute sort le menu du flux → le header se réduit à .header-main seul
       bottom:-25px positionne le menu à cheval : moitié dans le header, moitié sur le contenu */
    .mega-menu-container {
        position: absolute;
        bottom: -25px;
        left: 0;
        right: 0;
        background-color: transparent;
    }
    .mega-menu-container .container-xxl {
        background-color: var(--megamenu-bg);
        border-radius: 8px;
    }
    /* Dropdown : effet flottant + coins arrondis + ombre portée */
    .mega-menu-container {
        --megamenu-dropdown-border-radius: 0.85rem;
    }
    .mod-megamenu--level-1.mod-megamenu--expand > .mod-megamenu--container {
        margin-top: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
    }
    /* Pont invisible sur le gap : maintient le :hover pendant le passage dans l'espace */
    .mod-megamenu--level-1.mod-megamenu--expand > .mod-megamenu--container::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 0;
        right: 0;
        height: 6px;
    }

    /* ─── Headroom ───────────────────────────────────────────────────────────
       Comportement hide/show du header au scroll (inspiré materiel.net).
       Scroll bas → header disparaît (translateY inclut -25px du mega-menu débordant).
       Scroll haut → header réapparaît en version compacte.
       Le JS (index.php) pose body.headroom-active + les classes headroom--*. */
    .header-content {
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    /* Headroom actif : on bascule en fixed pour que translateY fonctionne */
    body.headroom-active .header-content {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1030;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }
    /* Scroll bas : cache tout le header y compris les 25px débordant du mega-menu */
    body.headroom-active .header-content.headroom--unpinned {
        transform: translateY(calc(-100% - 25px));
    }
    /* Scroll haut (header revenu, pas au top) : version compacte */
    body.headroom-active .header-content.headroom--pinned .header-main {
        padding-bottom: 0.4rem !important;
    }
    body.headroom-active .header-content.headroom--pinned .header-main .container-inner {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    /* Compact pinned : hamburger à gauche du logo, mega-menu masqué */
    body.headroom-active .header-content.headroom--pinned .headroom-burger {
        display: flex !important;
        align-items: center;
    }
    body.headroom-active .header-content.headroom--pinned .mega-menu-container {
        display: none !important;
    }
}

/* ─── Layout hamburger 992–1274px ───────────────────────────────────────
   iPad Pro paysage (1024px), petits laptops, zoom ≥110% sur 1280–1366px :
   le mega-menu déborde sur 2 lignes. On applique le même layout que le mode
   compact headroom : hamburger + logo + recherche + icônes, sans mega-menu. */
@media (min-width: 992px) and (max-width: 1274px) {
    .mega-menu-container {
        display: none !important;
    }
    .headroom-burger {
        display: flex !important;
        align-items: center;
    }
}

/* ─── Fix overflow header 1275–1399px ───────────────────────────────────
   À 1280-1399px le mega-menu tient sur une ligne mais l'item téléphone
   débordait. On affiche l'icône uniquement et on réduit l'espacement. */
@media (min-width: 1275px) and (max-width: 1399px) {
    /* Icône téléphone uniquement : masquer le texte, garder l'icône */
    .mega-menu-container .mod-megamenu--item-anchor.menu-phone .mod-megamenu--item-title {
        display: none !important;
    }
    /* Réduire légèrement espacement + taille des items niveau 1 */
    .mod-megamenu--level-1 > .mod-megamenu--item > .mod-megamenu--item-anchor {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.82rem;
    }
}

/* Breadcrumb flottant — fond identique au fond de page, sans bordure (style materiel.net)
   Crée l'illusion que le header s'arrête au centre du menu, comme le slider sur la home.
   padding-top compense le débordement de 25px du menu à cheval */
@media (min-width: 992px) {
    .breadcrumbs-section {
        background-color: #F4F5F7 !important;
        border-bottom: none !important;
        padding-top: 2rem;
        padding-bottom: 0;
    }
    /* Réduction du padding-top sur les pages avec breadcrumb (hors accueil) */
    .breadcrumbs-section ~ * .main-content-area,
    .breadcrumbs-section + .main-section .main-content-area {
        padding-top: 1rem;
    }
}

/* Banniere utility-wide — padding natif 5rem trop large sur mobile (cause overflow horizontal).
   .banner-container { padding: 5rem } + .banner-contents { padding: 4rem 5rem } = debordement sur < 768px */
@media (max-width: 767.98px) {
    .banner-container {
        padding: 2rem 1rem;
    }
    .banner-contents {
        padding: 1.5rem 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    .banner-title {
        font-size: 1.5rem;
    }
}

/* SPPageBuilder — sections avec marges negatives (-20px) sur tablet/desktop.
   SPPB ne les resets pas pour mobile → overflow horizontal.
   overflow-x:clip clipe les debordements internes (ex: LayerSlider en px fixe dans SPPB)
   sans creer de scroll container (position:sticky preserve). */
@media (max-width: 767.98px) {
    .sppb-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: clip;
    }
    /* LayerSlider en inline style width:Npx dans une section SPPB */
    .sppb-addon-content .ls-wp-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* SPPageBuilder — supprime les stacking contexts créés par z-index:0/N sur les sections et
   éléments internes. z-index:0 sur position:relative crée un stacking context qui piège
   les enfants : un enfant avec z-index:N élevé ne peut pas sortir au-dessus du parent.
   z-index:auto ne crée PAS de stacking context → les éléments positionnés (ex: .product-backdrop)
   sont libres de compétir dans le contexte racine.
   ATTENTION : si data-sppb-parallax="on" fait appliquer transform:translateY() par JS au scroll,
   ce stacking context est inévitable en CSS — seul un déplacement DOM résoudrait ce cas. */
#sp-page-builder .page-content .sppb-section,
#sp-page-builder .sppb-section,
.mod-sppagebuilder .sppb-section,
.sppb-row-overlay,
.sppb-col-md-12,
.sppb-column,
.sppb-column-addons,
.sppb-addon-wrapper,
.sp-pagebuilder-section-inner .sppb-row,
.sppb-container-inner,
.sppb-row-container {
    z-index: auto !important;
}

/* Mobile — page d'accueil */
@media (max-width: 575px) {
    .itemid-101 .main-content-area {
        padding-top: 0;
    }
    .itemid-101 .main-top-vertical-section {
        margin-top: 0;
    }
    .itemid-101 .main-content-area .container-xxl {
        --gutter-x: 0;
    }
    /* --gutter-x: 0 sur le container supprime son padding compensateur.
       Le .row VP Neoteric redeclare --gutter-x: 2em independamment → margin:-1em depasse du viewport.
       Fix: aussi mettre --gutter-x: 0 sur le .row pour annuler ses marges negatives. */
    .itemid-101 .main-content-area .main-section > .row {
        --gutter-x: 0;
    }
    .mod-block-white {
        border-radius: 0;
    }
}

/* SAL (Shack Article Layouts) — cartes articles/produits layout-wide.
   Remplace l'ombre "halo" 360° par une ombre directionnelle basse + coins arrondis cohérents. */
.sal-wrapper.layout-wide .sal-grid > .sal-item > .sal-inner-item,
.sal-wrapper.layout-blocks .sal-grid > .sal-item .sal-inner-item {
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden; /* clip le contenu aux coins arrondis (image) */
}

.sal-wrapper.layout-wide .sal-grid > .sal-item > .sal-inner-item:hover,
.sal-wrapper.layout-blocks .sal-grid > .sal-item .sal-inner-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
    transform: translateY(-2px);
}

/* Fix : matchHeight calcule min-height au DOMContentLoaded, avant que SP Page Builder
   ait initialisé sa grille et que JSpeed ait chargé les images lazy → min-height trop
   grand → espace vide sous les cartes au premier rendu.
   Remplacement par flexbox natif : .sal-item = colonne flex, .sal-inner-item prend
   toute la hauteur disponible. Le !important écrase le style inline posé par matchHeight. */
.sal-wrapper.layout-blocks .sal-grid > .sal-item {
    display: flex;
    flex-direction: column;
}
.sal-wrapper.layout-blocks .sal-grid > .sal-item .sal-inner-item {
    flex: 1;
    min-height: unset !important;
}

/* ═══════════════════════════════════════════════════
   9. TUILES CATÉGORIES B2B / Lucide icons
   WCAG AA : icône + texte var(--gray-800) sur #fff ≈ 9.5:1
             blanc sur primary hover : à vérifier selon valeur primary
   ═══════════════════════════════════════════════════ */

/* Grille CSS Grid — largeurs identiques quelle que soit la ligne */
#mod-custom204 .row {
    display: grid !important;
    gap: 0.625rem;
    margin: 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

#mod-custom204 [class*="col-"] {
    flex: unset;
    max-width: none;
    padding: 0;
    width: auto;
}

/* Tuile */
a.category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 1.25rem 0.625rem 1rem;
    background: #fff;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.22s ease, border-color 0.22s ease,
                transform 0.22s ease, box-shadow 0.22s ease;
}

/* SVG Lucide : forcer block pour éviter l'inline par défaut */
a.category-tile svg {
    display: block;
    width: 40px;
    height: 40px;
    stroke: var(--gray-800);   /* ≈ #363b40 — contraste ~9.5:1 sur #fff ✓ WCAG AAA */
    stroke-width: 2;
    flex-shrink: 0;
    transition: stroke 0.22s ease;
}

a.category-tile span {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    color: var(--gray-800);
    transition: color 0.22s ease;
}

/* Hover : fond primary, icône + texte blancs */
a.category-tile:hover {
    background: var(--template-primary-color);
    border-color: var(--template-primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    text-decoration: none;
}

a.category-tile:hover svg {
    stroke: #fff;
}

a.category-tile:hover span {
    color: #fff;
}

/* Tuile "Obsolètes" — atténuée visuellement */
a.category-tile.tile-muted {
    background: #f5f6f7;
    border-color: #e2e5e9;
}

a.category-tile.tile-muted svg {
    stroke: var(--gray-500);   /* atténué mais lisible */
}

a.category-tile.tile-muted span {
    color: var(--gray-600);
}

a.category-tile.tile-muted:hover {
    background: var(--gray-700);
    border-color: var(--gray-700);
}

/* Mobile : forcer 2 par ligne */
@media (max-width: 575px) {
    #mod-custom204 .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════
   AJAX SEARCH — mod_vpprime_ajax_search
   ═══════════════════════════════════════════════════ */

/* Prix : couleur orange identique aux pages produit */
.searched-product-price {
    color: #ff8010;
    font-size: 0.875rem;
    margin-top: 4px;
}

/* Titre produit */
.searched-product-title {
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Image : conteneur carré constant pour une miniature uniforme quel que soit
   l'aspect ratio de la source ou la longueur du titre */
.vpprimeajaxsearch-container .searched-product-image {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.vpprimeajaxsearch-container .searched-product-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.vpprimeajaxsearch-container .searched-product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.vpprimeajaxsearch-container .searched-product-info {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 15px;
}

/* Indicateur de stock (override result.php) */
.searched-product-stock {
    margin: 3px 0;
    font-size: 0.85rem;
    line-height: 1.25;
}
.stock-badge strong {
    font-weight: 700;
}
.stock-badge.stock-in {
    color: #15803d; /* green-700, WCAG AA sur fond blanc */
}
.stock-badge.stock-soon {
    color: #b45309; /* amber-700, WCAG AA sur fond blanc */
}
.stock-badge.stock-order {
    color: #4b5563; /* gray-600, WCAG AA sur fond blanc */
}

/* Tailles lisibles pour les résultats de recherche (WCAG) */
.searched-product-title {
    font-size: 0.95rem;
    line-height: 1.3;
}
.searched-product-category {
    font-size: 0.82rem;
    line-height: 1.25;
    color: #4b5563;
}
.searched-product-price {
    font-size: 1rem;
}

/* SKU révélé au hover — overlay absolu pour éviter le décalage de la grille */
.searched-product {
    position: relative;
}
.searched-product-sku {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    pointer-events: none;
    background: rgba(17, 24, 39, 0.88);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 3px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}
.searched-product:hover .searched-product-sku,
.searched-product:focus-within .searched-product-sku {
    opacity: 1;
    transform: translateY(0);
}
.searched-product-sku strong {
    font-weight: 700;
    color: #fff;
}
@media (max-width: 991.98px) {
    .searched-product-sku {
        display: none;
    }
}

/* Footer du panneau ajax search : compteur à gauche, CTA bouton à droite.
   Sticky bottom pour rester visible sans scroller jusqu'en bas du panneau. */
.vpprimeajaxsearch-container .vpprimeajaxsearch-suggestion-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    background: #fff;
}
.vpprimeajaxsearch-container .vpprimeajaxsearch-count {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.2;
}
.vpprimeajaxsearch-container .vpprimeajaxsearch-count strong {
    color: #111827;
    font-weight: 700;
}
.vpprimeajaxsearch-container .vpprimeajaxsearch-suggestion-footer .vpprimeajaxsearch-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--btn-primary-bg, var(--template-primary-color, #8fc400));
    color: var(--btn-primary-color, #fff);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}
.vpprimeajaxsearch-container .vpprimeajaxsearch-suggestion-footer .vpprimeajaxsearch-viewall:hover,
.vpprimeajaxsearch-container .vpprimeajaxsearch-suggestion-footer .vpprimeajaxsearch-viewall:focus {
    background: var(--btn-primary-hover-bg, #7aa800);
    color: var(--btn-primary-color, #fff);
    text-decoration: none;
}
.vpprimeajaxsearch-container .vpprimeajaxsearch-suggestion-footer .vpprimeajaxsearch-viewall::after {
    content: "\2192";
    font-size: 1em;
    line-height: 1;
}

/* Remonter le containing block au conteneur search (#headerSearch)
   pour que le panneau résultats s'aligne sur toute la zone search */
@media (min-width: 992px) {
    .mod-vpprime-ajax-search {
        position: static;
    }
    #headerSearch {
        position: relative;
    }
    .vpprimeajaxsearch-container {
        z-index: 400;
        margin: 6px 0 0 0;
        border-radius: 0.85rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
    }
}

/* Mobile : élargir uniquement le panneau résultats via position fixed, sans
   toucher au champ de recherche ni à son parent. Top indicatif (≈ hauteur
   header) à ajuster si besoin. */
@media (max-width: 991.98px) {
    .vpprimeajaxsearch-container {
        position: fixed !important;
        top: 4.75rem !important;
        left: 10px !important;
        right: 10px !important;
        /* Contraint le bas au-dessus de la barre mobile fixe
           .footer-toolbar.fixed-bottom (accueil/compte/wishlist/compare/
           panier). Cette barre a height: fit-content sur les icônes
           (≈60-75px selon device) + env(safe-area-inset-bottom) sur iOS.
           La var est surchargeable si besoin sur un device particulier. */
        bottom: calc(var(--ajax-search-bottom-offset, 4.75rem) + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        /* Override le max-height inline (842px) du module pour que le
           "Voir tout" soit atteignable dans la zone visible */
        max-height: none !important;
        height: auto !important;
        /* Fond opaque pour empêcher la transparence (flèches galerie, badges
           promo visibles en dessous) */
        background: #fff;
        /* Empêcher le scroll chaining : quand on atteint la fin du panneau,
           la page en arrière-plan ne doit pas se mettre à scroller */
        overscroll-behavior: contain;
        border-radius: 0.85rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
        z-index: 99999;
    }
    /* Scrollbar mobile : plus large (préhensible au doigt) et marge haut/bas
       pour ne pas chevaucher les coins arrondis */
    .vpprimeajaxsearch-container::-webkit-scrollbar {
        width: 10px;
    }
    .vpprimeajaxsearch-container::-webkit-scrollbar-track {
        background: transparent;
        margin: 0.85rem 0;
    }
    .vpprimeajaxsearch-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.28);
        border-radius: 5px;
    }
    .vpprimeajaxsearch-container::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* --- Modules sidebar : titre centré, casse normale, espacement haut --- */
.mod-header-group {
    margin-top: 1.2rem;
}
.mod-header .mod-title.mod-block-title {
    text-align: center;
    text-transform: none;
    font-size: 1.5rem;
    font-weight: var(--neoteric-font-weight-headings, 700);
}

#mod-custom276 {
	margin-top: 10px;
}

#cf_ce_submit_button_reset {
	margin-left: 1rem;
}

/* --- 5. Modale "Produit ajouté au panier" (virtuemart-dialog) -------------------
   Shell construit par vp_neoteric/js/vmprices.js (classes Bootstrap `bg-info
   text-white` sur le header pour le statut "succès"). Contenu = layout
   com_virtuemart/cart/padded.php (message + related products type R + boutons).
   Harmonisation MGF : header passe au primary vert, cards avec ombre douce,
   badge "Vous économisez" rendu plus discret (bloc vert trop dominant en contexte
   multi-cards). Scope `.virtuemart-dialog` pour ne pas affecter les autres modales. */

/* Coins arrondis cohérents avec les autres cards du site */
.virtuemart-dialog .modal-content {
    border-radius: 1rem;
    border: none;
    overflow: hidden;
}

/* Header : neutralise le bg-info Bootstrap (bleu) au profit du primary MGF.
   `text-white` posé par le JS reste en place → texte blanc sur fond vert. */
.virtuemart-dialog .modal-header.bg-info {
    background-color: var(--neoteric-color-primary) !important;
    border-bottom: none;
    padding: 0.75rem 1rem;
}
.virtuemart-dialog .modal-title {
    font-weight: 600;
    line-height: 1.5;
}
.virtuemart-dialog .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* Corps : un peu d'air */
.virtuemart-dialog .modal-body {
    padding: 1.5rem;
}

/* Lignes de confirmation "N produit a (ont) été ajouté(s) à votre panier" :
   coche verte en prefix pour renforcer le feedback "succès" par produit ajouté
   (le header vert donne déjà le signal global, mais chaque ligne mérite son
   propre marker si plusieurs produits). Flex pour garder coche + texte alignés
   même si le texte wrap sur plusieurs lignes. */
.virtuemart-dialog .cart-popup-message p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;
}
.virtuemart-dialog .cart-popup-message p::before {
    content: '';
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238fc400'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Titre des produits suggérés : taille maîtrisée, moins écrasant */
.virtuemart-dialog .cart-popup-related-products h4 {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem !important;
}

/* Cards produits : ombre + radius + padding, cohérent avec la section 4i
   (produits complémentaires) de la fiche produit */
.virtuemart-dialog .cart-popup-related-products .product-field-display {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: clip;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.virtuemart-dialog .cart-popup-related-products .product-field-display:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Badge "Vous économisez" : version discrète en card. Le style bloc vert
   défini section 4b reste pertinent sur la fiche produit unique (attire l'œil
   sur LA promo), mais en modale multi-cards il surcharge. On garde la couleur
   sémantique mais sous forme de texte simple. */
.virtuemart-dialog .product-discount-amount {
    display: inline-block;
    background: transparent;
    color: var(--template-product-discount-color, #00ab2c);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
    margin-top: 0.25rem;
    border-radius: 0;
}
.virtuemart-dialog .product-discount-amount .PricediscountAmount.vm-price-value,
.virtuemart-dialog .product-discount-amount .PricediscountAmount.vm-price-value span {
    color: inherit;
}

/* Footer : séparation visuelle + gap entre boutons */
.virtuemart-dialog .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    gap: 0.75rem;
    padding: 1rem 1.5rem;
}

/* =====================================================
   Section hero SP Page Builder #section-id-1523429110056 (banner MGF Prime)
   - border-radius haut étendu à toutes les vues < 992px (mobile + tablette)
   - suppression bande grise top + neutralisation margin-top: -1rem SP PB
     uniquement sur mobile (≤ 575px) où padding-top: 0
   ===================================================== */
@media (max-width: 991.98px) {
    .sp-page-builder .page-content #section-id-1523429110056 {
        border-radius: 1rem 1rem 0 0;
        overflow: hidden;
    }
}
@media (max-width: 575.98px) {
    .main-content-area {
        padding-top: 0;
    }
    .sp-page-builder .page-content #section-id-1523429110056 {
        margin-top: 0 !important;
    }
}

/* =====================================================
   Section 7. Uniformisation visuelle des modales tierces
   Aligne plg_vmuserfield_privacy (custom CSS) et vponepagecheckout (Fancybox v1.3.4)
   sur le style des modales BS5 du template (border-radius 1rem, centrage,
   ombre, casse normale du titre, structure header/body cohérente).
   ===================================================== */

/* --- 7a. Modale Privacy (plg_vmuserfield_privacy) --- */
/* Le plugin toggle via la classe .pluginprivacy-fade (display:block dans style.css),
   puis .pluginprivacy-in (opacity:1). La modale est déjà position:fixed couvrant
   tout le viewport (top:0;left:0;bottom:0;right:0). On remplace display:block par
   flex pour centrer le dialog verticalement sans toucher au JS du plugin. */
.pluginprivacy-modal.pluginprivacy-fade {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.pluginprivacy-modal.pluginprivacy-fade .pluginprivacy-modal-dialog {
    margin: 1rem auto !important;
    max-width: 800px;
    width: calc(100% - 2rem);
}
.pluginprivacy-modal-inner {
    border-radius: 1rem !important;
    border: none !important;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2) !important;
    background: #fff;
}
.pluginprivacy-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    align-items: center;
    /* Pas de justify-content: space-between — le bouton × est 1er dans le DOM
       (avant h3), on le déplace visuellement à droite via order + flex:1 sur h3. */
}
.pluginprivacy-modal-header h3,
.pluginprivacy-modal-header > h3 {
    flex: 1;        /* prend tout l'espace disponible → titre à gauche */
    order: 1;       /* 1er visuellement même s'il est 2e dans le DOM */
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.5;
}
.pluginprivacy-modal-close {
    order: 2;           /* après le titre visuellement → bouton à droite */
    flex-shrink: 0;
    margin-left: 1rem;
    float: none !important;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    opacity: 0.6 !important;
    filter: none !important;
    transition: opacity 0.15s ease;
}
.pluginprivacy-modal-close:hover { opacity: 1 !important; }
.pluginprivacy-modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}
/* Backdrop semi-transparent */
.pluginprivacy-modal-bg {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* --- 7b. Modale CGV (vponepagecheckout / Fancybox v1.3.4) --- */
/* Fancybox v1.3.4 utilise des IDs (#fancybox-outer, #fancybox-wrap, #fancybox-close).
   Les sélecteurs de classe .fancybox-skin / .fancybox-content / .fancybox-inner
   sont spécifiques à Fancybox v3+ et sont sans effet ici.
   La largeur est pilotée par autoDimensions:true (JS mesure le conteneur de contenu
   #proopc-tos-fancy) — on la fixe ici pour correspondre à la Privacy modal (800px). */
div#proopc-tos-fancy {
    width: 800px;
    max-width: calc(100vw - 40px); /* responsive : 20px de marge de chaque côté */
}
#fancybox-outer {
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2) !important;
}
/* Le close (#fancybox-close) est enfant de #fancybox-outer dans Fancybox v1.3.4
   → overflow:hidden + border-radius ci-dessus clipperaient le bouton placé par
   défaut à top:-15px / right:-15px. On le repositionne dans la zone visible. */
#fancybox-close {
    top: 8px !important;
    right: 8px !important;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
#fancybox-close:hover {
    opacity: 1;
}
/* Réserver l'espace en haut à droite pour ne pas que le close chevauche
   le contenu (ex: cart-popup du plugin catproduct, message CGV, etc.) */
#fancybox-content > div > .cart-popup,
#fancybox-content > div > .cart-popup-content {
    padding-right: 2.5rem;
}
/* Boutons du popup catproduct dans Fancybox : alignement propre côte-à-côte
   (wrap en colonne si trop étroit), centrés, largeurs équilibrées. */
#fancybox-content .cart-popup-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
#fancybox-content .cart-popup-buttons .btn {
    flex: 1 1 auto;
    min-width: 11rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
    text-align: center;
}

/* --- 7c. Lien "Gestion des cookies" (sans href → pas de cursor:pointer natif) --- */
.cc-custom-revoke {
    cursor: pointer;
}

/* --- 7c2. Supprime le flash du bouton .cc-revoke avant init cookieconsent.js ---
   Le bouton est rendu visible (position:fixed, transform:none) avant que JS ajoute
   .cc-animate + .cc-top qui le glissent hors écran. Ce rule le cache pendant ce gap. */
div.cc-revoke:not(.cc-animate) {
    opacity: 0 !important;
    transition: none !important;
}

/* --- 7d. Champs custom panier (VP Onepage Checkout) --- */
.vm-customfield-cart {
    text-transform: capitalize;
}

/* ============================================================
   8. FOOTER (bottom-horizontal — 4 colonnes)
   ============================================================ */

/* --- 8a. Restaurer mb-5 sur les modules footer (écrasé par la règle globale itemid-101) --- */
.itemid-101 .bottom-horizontal-section .mb-5 {
    margin-bottom: 3rem !important;
}

/* --- 8b. Colonne "À propos" — liste de liens sans puces navigateur --- */
.bottom-horizontal-section #mainlevel-nav {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.bottom-horizontal-section #mainlevel-nav a,
.bottom-horizontal-section #mainlevel-nav .cc-custom-revoke {
    color: inherit;
    text-decoration: none;
}
.bottom-horizontal-section #mainlevel-nav a:hover,
.bottom-horizontal-section #mainlevel-nav .cc-custom-revoke:hover {
    text-decoration: underline;
}

/* --- 8c. Colonne "Réseaux sociaux" — icônes FA6 --- */
.bottom-horizontal-section .list-inline {
    padding-left: 0;
    margin-bottom: 1rem;
}
.bottom-horizontal-section .list-inline > li {
    display: inline-block;
    margin-right: 1.25rem;
}
.bottom-horizontal-section .list-inline a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.15s ease;
}
.bottom-horizontal-section .list-inline a:hover {
    color: #fff;
}

/* --- 8d. Mobile <768px : respiration latérale sur les modules empilés --- */
@media (max-width: 767px) {
    .bottom-horizontal-section .mod-position-bottom-horizontal {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* --- 8e. Tablettes 768–991px : 2 colonnes par rangée (au lieu de 1) --- */
@media (min-width: 768px) and (max-width: 991px) {
    .bottom-horizontal-section .mod-position-bottom-horizontal {
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* Respiration latérale gauche : les colonnes paires (DERNIÈRES NEWS, RÉSEAUX SOCIAUX)
       ont naturellement de l'espace via le gutter inter-colonnes ;
       les colonnes impaires (À PROPOS, CONTACTEZ-NOUS) sont trop proches du bord. */
    .bottom-horizontal-section .mod-position-bottom-horizontal:nth-child(odd) {
        padding-left: 2.5rem;
    }
}

/* =====================================================
   Section 9. Vue article com_content (blog Traceurs)
   - Neutralise float:left/right sur l'image d'illustration de l'article :
     sur la zone de contenu large du nouveau site, le wrap collait premier
     paragraphe + sommaire à droite de l'image. Image pleine colonne, contenu
     en-dessous comme sur l'ancien site.
   ===================================================== */
.com-content-article .item-image.left,
.com-content-article .item-image.right {
    float: none;
    margin: 0 auto 1rem;
}

/* Quick Index (plg_system_quickindex) — hover sommaire : barre verticale + translate */
.rl_quickindex .index-link {
    display: inline-block;
    padding: 2px 6px 2px 8px;
    border-left: 3px solid transparent;
    border-radius: 0 3px 3px 0;
    text-decoration: none;
    transition: color 180ms ease,
                border-color 180ms ease,
                background-color 180ms ease,
                transform 180ms ease;
}

.rl_quickindex .index-link:hover,
.rl_quickindex .index-link:focus-visible {
    color: var(--template-primary-color, #8fc400);
    border-left-color: var(--template-primary-color, #8fc400);
    background-color: rgba(143, 196, 0, .08);
    transform: translateX(4px);
    text-decoration: none;
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Section : Inscription — sélecteur Particulier / Professionnel
   Fichier  : templates/vp_neoteric_mgf/html/com_virtuemart/user/edit.php
   ───────────────────────────────────────────────────────────────────────────── */

.vm-account-type-label {
    font-weight: 600;
    margin-bottom: .5rem;
}

.vm-account-type-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.25rem;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    cursor: pointer;
    width: 100%;
    font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease;
    user-select: none;
    margin-bottom: 0;
}

.vm-account-type-card input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    accent-color: var(--template-primary-color, #8fc400);
    cursor: pointer;
}

.vm-account-type-card.active,
.vm-account-type-card:has(input:checked) {
    border-color: var(--template-primary-color, #8fc400);
    background-color: rgba(143, 196, 0, .06);
}

.vm-account-type-card:hover:not(.active) {
    border-color: var(--template-primary-color, #8fc400);
    opacity: .8;
}

/* Lien "Déjà client ?" au-dessus du formulaire d'inscription */
.vm-already-member {
    font-size: 1rem;
}

/* Champ username masqué à l'inscription — auto-rempli avec l'email (voir edit.php) */
#adminForm:has(input#vm_account_type) .control-group:has(label.username-label) {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Section : Inscription — mise en page 2 colonnes (flexbox)
   Scopé via :has(input#vm_account_type) — présent uniquement à l'inscription
   ───────────────────────────────────────────────────────────────────────────── */

/* Conteneur flex — couvre le formulaire et les fieldsets non-pro
   (gère le cas où les control-groups sont dans un fieldset auto-ouvert) */
#adminForm:has(input#vm_account_type),
#adminForm:has(input#vm_account_type) > fieldset:not(.vm-pro-field) {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    align-items: flex-start;
}

/* Pleine largeur par défaut : enfants directs du formulaire ET des fieldsets non-pro */
#adminForm:has(input#vm_account_type) > .control-group,
#adminForm:has(input#vm_account_type) > fieldset,
#adminForm:has(input#vm_account_type) > #recaptcha_wrapper,
#adminForm:has(input#vm_account_type) > fieldset:not(.vm-pro-field) > .control-group {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
}

/* Paires en demi-largeur : Prénom + Nom, Téléphone + Portable */
#adminForm:has(input#vm_account_type) .control-group:has(label.first_name-label),
#adminForm:has(input#vm_account_type) .control-group:has(label.last_name-label),
#adminForm:has(input#vm_account_type) .control-group:has(label.phone_1-label),
#adminForm:has(input#vm_account_type) .control-group:has(label.phone_2-label) {
    flex: 0 0 calc(50% - .5rem);
    max-width: calc(50% - .5rem);
    min-width: 0;
}

/* Code postal ~1/3 (formats 4–8 chars selon pays) + Ville ~2/3 */
#adminForm:has(input#vm_account_type) .control-group:has(label.zip-label) {
    flex: 0 0 calc(33.333% - .5rem);
    max-width: calc(33.333% - .5rem);
    min-width: 0;
}

#adminForm:has(input#vm_account_type) .control-group:has(label.city-label) {
    flex: 0 0 calc(66.667% - .5rem);
    max-width: calc(66.667% - .5rem);
    min-width: 0;
}

/* Inputs dans les paires : occupent toute la largeur de leur colonne */
#adminForm:has(input#vm_account_type) .control-group:has(label.first_name-label) input,
#adminForm:has(input#vm_account_type) .control-group:has(label.last_name-label) input,
#adminForm:has(input#vm_account_type) .control-group:has(label.zip-label) input,
#adminForm:has(input#vm_account_type) .control-group:has(label.city-label) input,
#adminForm:has(input#vm_account_type) .control-group:has(label.phone_1-label) input,
#adminForm:has(input#vm_account_type) .control-group:has(label.phone_2-label) input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Mode Pro : section Pro remonte en tête */
#adminForm.vm-mode-pro:has(input#vm_account_type) > fieldset.vm-pro-field {
    order: -1;
}

/* Encadrement de la section Adresse de facturation */
fieldset.vm-billing-field {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}

fieldset.vm-billing-field legend {
    float: none;
    width: auto;
    padding: 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    margin-bottom: .75rem;
}

/* Encadrement de la section Informations société */
fieldset.vm-pro-field {
    border: 1px solid var(--template-primary-color, #8fc400);
    border-radius: .5rem;
    padding: 1rem 1.25rem 1.25rem;
    background-color: rgba(143, 196, 0, .04);
    margin-bottom: 1rem;
}

fieldset.vm-pro-field legend {
    float: none;
    width: auto;
    padding: 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--template-primary-color, #8fc400);
    margin-bottom: .75rem;
}

.page-container-box {
    border-radius: 1rem;
}

/* name_field verrouillé tant que Prénom ou Nom est vide */
#adminForm:has(input#vm_account_type) #name_field[readonly] {
    cursor: not-allowed;
    background-color: var(--bs-secondary-bg, #e9ecef) !important;
    color: var(--bs-secondary-color, #6c757d) !important;
    opacity: 1;
}

/* Mobile ≤ 480px : 1 colonne pour les paires */
@media (max-width: 480px) {
    #adminForm:has(input#vm_account_type) .control-group:has(label.first_name-label),
    #adminForm:has(input#vm_account_type) .control-group:has(label.last_name-label),
    #adminForm:has(input#vm_account_type) .control-group:has(label.zip-label),
    #adminForm:has(input#vm_account_type) .control-group:has(label.city-label),
    #adminForm:has(input#vm_account_type) .control-group:has(label.phone_1-label),
    #adminForm:has(input#vm_account_type) .control-group:has(label.phone_2-label) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════
   10. FICHE COMMANDE VM (orders/details)
   ═══════════════════════════════════════════════════ */

/* Conteneur fiche commande / liste (regroupé ici depuis le préambule) */
.vm-orders-list-view,
.vm-order-details-view {
	padding: 1rem;
	background: #fff;
	border-radius: 1rem;
}

/* Panneau en-tête commande */
.order-details__header.mb-4 {
	border: 1px solid #e6e7e3;
	border-radius: 1rem;
	padding: 1.25rem;
}

/* #4 — En-tête structuré : bandeau méta (n° + statut + dates) */
.vm-order-details-view .order-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid #eceeef;
}
.vm-order-details-view .order-head__main {
	display: flex;
	align-items: center;
	gap: .85rem;
}
.vm-order-details-view .order-head__number {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.1;
}
.vm-order-details-view .order-head__label {
	display: block;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #8a9099;
	margin-bottom: .15rem;
}
.vm-order-details-view .order-head__status {
	align-self: center;
}
.vm-order-details-view .order-head__dates {
	display: flex;
	gap: 1.75rem;
}
.vm-order-details-view .order-head__date {
	font-weight: 500;
}

/* Cartes Livraison / Paiement / Total */
.vm-order-details-view .order-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.vm-order-details-view .order-card {
	background: #f7f8f9;
	border-radius: .6rem;
	padding: .85rem 1rem;
}
.vm-order-details-view .order-card__label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #8a9099;
	margin-bottom: .35rem;
}
.vm-order-details-view .order-card__value {
	font-weight: 500;
}
.vm-order-details-view .order-card--total {
	background: oklch(0.96 0.03 148);
}
.vm-order-details-view .order-card__amount {
	font-size: 1.3rem;
	font-weight: 700;
	color: oklch(0.46 0.14 148);
}

/* Note client (conditionnelle) */
.vm-order-details-view .order-note {
	margin-top: 1rem;
	padding: .7rem 1rem;
	background: #fffdf3;
	border-left: 3px solid #ffd54a;
	border-radius: .4rem;
}
.vm-order-details-view .order-note__label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #8a9099;
	margin-bottom: .2rem;
}

/* Adresses (facturation / livraison) en cartes */
.vm-order-details-view .order-addresses {
	margin-top: 1.25rem;
}
.vm-order-details-view .order-addresses fieldset {
	height: 100%;
	background: #f7f8f9;
	border: 0;
	border-radius: .6rem;
	padding: .85rem 1rem;
}
.vm-order-details-view .order-addresses legend {
	float: none;
	width: auto;
	font-size: .8rem;
	color: #41464b;
	margin-bottom: .5rem;
	padding: 0;
}
.vm-order-details-view .order-addresses .table,
.vm-order-details-view .order-addresses .table > tbody > tr,
.vm-order-details-view .order-addresses .table > tbody > tr > * {
	--bs-table-bg: transparent;
	background-color: transparent !important;
	box-shadow: none !important;
}
.vm-order-details-view .order-addresses .field-name {
	color: #6c757d;
	font-weight: 500;
}
/* Note « livraison à la même adresse » sous la carte facturation (pleine largeur) */
.vm-order-details-view .order-addresses__same {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-top: .65rem;
	padding-top: .65rem;
	border-top: 1px solid #e6e7e3;
	font-size: .85rem;
	color: #6c757d;
}
.vm-order-details-view .order-addresses__same i {
	color: oklch(0.52 0.14 148);
}

/* --- Lien retour « Liste des commandes » (Option A : au-dessus du titre) --- */
.wk-back-to-orders {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--bs-link-color, #2a69b8);
}
.wk-back-to-orders:hover,
.wk-back-to-orders:focus-visible {
	text-decoration: underline;
}
.wk-back-to-orders i {
	font-size: .85em;
}

/* --- Badges de statut de commande (pilules sémantiques) --- */
.vm-ostatus {
	display: inline-block;
	padding: .25em .7em;
	border-radius: 50rem;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.vm-ostatus--success { background: #d4edda; color: #155724; }
.vm-ostatus--info    { background: #cfe2ff; color: #0a3678; }
.vm-ostatus--warning { background: #fff3cd; color: #7a5b00; }
.vm-ostatus--danger  { background: #f8d7da; color: #842029; }
.vm-ostatus--neutral { background: #e9ecef; color: #41464b; }

/* --- Onglets fusionnés avec le panneau de contenu (carte unifiée) --- */
/* Bug template parent : `.nav-tabs-basic .nav-link { margin-bottom: -var(--border-width) }`
   est une syntaxe CSS invalide (`-var()` n'existe pas) → la marge négative n'est jamais
   appliquée, l'onglet actif ne recouvre pas la ligne grise du bas → barrière visuelle.
   On corrige la marge, on supprime le mb-4 et on encadre le contenu en carte. */
.vm-order-details-view .order-details__section .nav-tabs-basic {
	margin-bottom: 0 !important;
	border-bottom-color: #dee2e6;
}
.vm-order-details-view .order-details__section .nav-tabs-basic .nav-link {
	margin-bottom: calc(-1 * var(--border-width, 1px));
}
.vm-order-details-view .order-details__section .nav-tabs-basic .nav-link.active {
	border-color: #dee2e6 #dee2e6 #fff;
}
.vm-order-details-view .order-details__section .tab-content {
	border: 1px solid #dee2e6;
	border-top: 0;
	border-radius: 0 0 .75rem .75rem;
	padding: 1rem 1rem .25rem;
	background: #fff;
}

/* --- Tableau d'articles : dé-grisage (lignes produit blanches) --- */
/* Neutralise le zébrage Bootstrap (box-shadow inset) de façon déterministe, toutes tailles */
.vm-order-details-view .order-items-table > tbody > tr.order-items-row > * {
	--bs-table-bg-type: transparent;
	box-shadow: none;
	background-color: #fff;
}
/* En-tête harmonisé pour les tables de la section (articles ET historique) */
.vm-order-details-view .order-details__section thead > tr > th {
	background-color: #f7f8f9;
	border-bottom: 2px solid #dee2e6;
	color: #41464b;
	padding-left: .65rem;
	padding-right: .65rem;
}
/* Respiration verticale des lignes produit ; le nom reste aligné en haut,
   les cellules courtes (statut, prix, qté…) se centrent verticalement. */
.vm-order-details-view .order-items-table > tbody > tr.order-items-row > td {
	padding-top: .65rem;
	padding-bottom: .65rem;
	padding-left: .65rem;
	padding-right: .65rem;
}
.vm-order-details-view .order-items-table > tbody > tr.order-items-row > td:not(:first-child) {
	vertical-align: middle !important;
}
/* Colonnes statut/prix/qté/TVA/remise/total ajustées au contenu → la colonne Nom
   absorbe l'espace restant (moins de retours à la ligne, rangées plus basses, gaps réduits).
   Surcharge les width="X%" inline du template. */
.vm-order-details-view .order-items-table thead th:not(:first-child),
.vm-order-details-view .order-items-table > tbody > tr.order-items-row > td:not(:first-child) {
	width: 1%;
	white-space: nowrap;
}
/* Hiérarchie produit : nom en valeur, réf en sous-texte */
.vm-order-details-view .ordered-product-name {
	font-weight: 700;
}
.vm-order-details-view .ordered-product-name a {
	text-decoration: none;
}
.vm-order-details-view .ordered-product-name a:hover {
	text-decoration: underline;
}
.vm-order-details-view .ordered-product-sku {
	font-size: .8125rem;
	color: #6c757d;
}

/* --- Récap totaux : carte compacte alignée à droite (sortie du tableau) --- */
.vm-order-details-view .order-summary-wrap {
	max-width: 380px;
	margin: 1.25rem 0 0 auto;
}
.vm-order-details-view .order-summary__line {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .4rem .65rem;
	border-bottom: 1px solid #f0f1f2;
}
.vm-order-details-view .order-summary__line:last-child {
	border-bottom: 0;
}
.vm-order-details-view .order-summary__label {
	color: #555;
}
.vm-order-details-view .order-summary__value {
	white-space: nowrap;
	text-align: right;
}
.vm-order-details-view .order-summary__line--total {
	margin-top: .15rem;
	padding-top: .6rem;
	border-top: 2px solid #dee2e6;
	border-bottom: 0;
	font-size: 1.15rem;
	font-weight: 700;
}
.vm-order-details-view .order-summary__line--total .order-summary__label {
	color: inherit;
}
.vm-order-details-view .order-summary__line--total.order-balance--unpaid {
	color: #b02a37;
}
.vm-order-details-view .order-summary__line--total.order-balance--paid {
	color: #146c43;
}

/* Bloc Balance (état de paiement) coloré */
.vm-order-details-view .order-summary__balance {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	align-items: center;
	margin-top: .85rem;
	padding: .6rem .85rem;
	border-radius: .5rem;
	font-weight: 600;
}
.vm-order-details-view .order-summary__balance.order-balance--unpaid {
	background: #fff5f5;
	color: #b02a37;
}
.vm-order-details-view .order-summary__balance.order-balance--paid {
	background: #f0f9f2;
	color: #146c43;
}

/* Détail remboursement / paiement partiel */
.vm-order-details-view .order-summary--payment {
	margin-top: .75rem;
}
.vm-order-details-view .order-summary__refund {
	margin-top: .75rem;
	font-size: .9rem;
}
.vm-order-details-view .order-summary__refund-title {
	font-weight: 600;
	margin-bottom: .25rem;
}

/* --- Historique : largeurs de colonnes (date sur une ligne, pas de wrap) --- */
.vm-order-details-view .order-history-table th:first-child,
.vm-order-details-view .order-history-table td:first-child {
	width: 1%;
	white-space: nowrap;
}
.vm-order-details-view .order-history-table th:nth-child(2),
.vm-order-details-view .order-history-table td:nth-child(2) {
	width: 1%;
	white-space: nowrap;
	text-align: center;
}
.vm-order-details-view .order-history-table > tbody > tr > td {
	padding-left: .65rem;
	padding-right: .65rem;
}

/* --- Lien de suivi colis (lien dans .stm-decoded, décodé par plg_system_shipmenttracking) --- */
/* Le plugin transforme le commentaire en <span class="stm-decoded">…<a target="_blank">…</a></span>
   (l'<a> n'a pas de classe). Reproduit le bouton « wk-btn-track » du dashboard
   com_advanceshopperdashboard (mêmes verts oklch) sans dépendre de sa CSS. */
.vm-order-details-view .stm-decoded a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .6rem;
	border: 1px solid oklch(0.88 0.08 148);
	border-radius: .375rem;
	background: oklch(0.96 0.03 148);
	color: oklch(0.52 0.14 148);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.vm-order-details-view .stm-decoded a:hover,
.vm-order-details-view .stm-decoded a:focus-visible {
	background: oklch(0.52 0.14 148);
	border-color: oklch(0.52 0.14 148);
	color: #fff;
	text-decoration: none;
}
.vm-order-details-view .stm-decoded a::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f48b"; /* fa-truck-fast */
	font-size: .9em;
}
.vm-order-details-view .stm-decoded a::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f08e"; /* fa-arrow-up-right-from-square */
	font-size: .75em;
	opacity: .65;
	margin-left: .15rem;
}

/* --- Responsive : tableau → cartes empilées (écran mobile uniquement) --- */
@media screen and (max-width: 767.98px) {
	.vm-order-details-view .order-items-table thead {
		display: none;
	}
	.vm-order-details-view .order-items-table,
	.vm-order-details-view .order-items-table tbody,
	.vm-order-details-view .order-items-table tr,
	.vm-order-details-view .order-items-table td {
		display: block;
		width: 100%;
	}
	.vm-order-details-view .order-items-table tr.order-items-row {
		border: 1px solid #e6e7e3;
		border-radius: .75rem;
		padding: .5rem .75rem;
		margin-bottom: .75rem;
		background: #fff;
	}
	.vm-order-details-view .order-items-table tr.order-items-row > td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		width: 100% !important; /* neutralise la fuite de width:1% (desktop) sur mobile */
		text-align: right;
		padding: .25rem 0;
		border: 0;
	}
	.vm-order-details-view .order-items-table tr.order-items-row > td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: #6c757d;
		text-align: left;
	}
	/* Cellule nom (1ère colonne) en pleine largeur, sans libellé */
	.vm-order-details-view .order-items-table tr.order-items-row > td:nth-child(1) {
		display: block;
		text-align: left;
	}
	.vm-order-details-view .order-items-table tr.order-items-row > td:nth-child(1)::before {
		display: none;
	}
	/* En-tête : cartes empilées + bandeau méta en colonne */
	.vm-order-details-view .order-cards {
		grid-template-columns: 1fr;
	}
	.vm-order-details-view .order-head {
		flex-direction: column;
		gap: .85rem;
	}
	.vm-order-details-view .order-head__dates {
		gap: 1.25rem;
	}

	/* Récap totaux en pleine largeur sur mobile */
	.vm-order-details-view .order-summary-wrap {
		max-width: none;
	}
	/* Onglets en PILLS sur mobile : pas de fusion de bordure (donc pas de barrière
	   grise), chaque onglet autonome, actif rempli en vert. Scroll horizontal si besoin. */
	.vm-order-details-view .order-details__section .nav-tabs-basic {
		border-bottom: 0;
		gap: .4rem;
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-bottom: .6rem !important;
	}
	.vm-order-details-view .order-details__section .nav-tabs-basic .nav-link {
		margin-bottom: 0;
		border: 1px solid #dee2e6;
		border-radius: 50rem;
		padding: .4rem .9rem;
		font-size: .85rem;
		white-space: nowrap;
	}
	.vm-order-details-view .order-details__section .nav-tabs-basic .nav-link.active {
		border-color: oklch(0.52 0.14 148);
		background: oklch(0.52 0.14 148);
		color: #fff;
	}
	/* Panneau redevient une carte fermée (plus de fusion → bordure haute rétablie) */
	.vm-order-details-view .order-details__section .tab-content {
		border-top: 1px solid #dee2e6;
		border-radius: .75rem;
		padding: .6rem .5rem .1rem;
	}
}

/* ═══════════════════════════════════════════════════
   PERF — PageSpeed / LCP (juin 2026)
   ═══════════════════════════════════════════════════ */

/*
 * #2b LCP fix — galerie multi-images : contourne le « display:none »
 * que tiny-slider applique via .is-tns-gallery:not(.tns-slider).
 * Sans ce fix, la 1ʳᵉ image reste invisible jusqu'à l'init JS de tns
 * → elementRenderDelay ~950 ms.
 * Comportement :
 *   - Avant init tns (.tns-slider absent) : affiche seulement la 1ʳᵉ slide.
 *   - Après init tns (.tns-slider présent) : la règle ne s'applique plus,
 *     tns reprend le contrôle normal.
 */
.product-image-gallery__main-multiple.is-tns-gallery:not(.tns-slider) {
    display: block !important;
    overflow: hidden;
}
.product-image-gallery__main-multiple.is-tns-gallery:not(.tns-slider) .product-image-gallery__item {
    display: none;
}
.product-image-gallery__main-multiple.is-tns-gallery:not(.tns-slider) .product-image-gallery__item:first-child {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section 11 — Panier / Checkout VirtueMart
   Plugin : plg_system_vponepagecheckout (VirtuePlanet) — SOURCE NON MODIFIÉE.
   Méthode : restyling 100 % CSS, scopé sous #ProOPC (conteneur unique du plugin).
             Aucun markup, aucun JS, aucune classe supprimée → non-régressif et
             résistant aux mises à jour du plugin.
   Layout  : variante B — formulaire à gauche, récapitulatif panier + totaux
             collant (sticky) à droite ≥992px (float robuste, cf. §11.10).
   A11y    : WCAG 2.1 AA / RGAA 4 — focus visibles, cibles ≥24px, contrastes,
             prefers-reduced-motion (cf. §11.12). Le vert marque #8fc400 (ratio
             ~1.9:1 sur blanc) ne sert JAMAIS de texte : uniquement fonds de
             bouton avec texte foncé, bordures et accents non textuels. Le CTA
             et les pastilles utilisent un vert foncé dédié (#3f6212, ~6:1).
   ═══════════════════════════════════════════════════════════════════════════ */

#ProOPC {
    --mgf-co-radius:       .75rem;
    --mgf-co-radius-sm:    .5rem;
    --mgf-co-border-color: var(--bs-border-color, #dee2e6);
    --mgf-co-shadow:       0 .25rem 1rem rgba(0, 0, 0, .05);
    --mgf-co-shadow-card:  0 .5rem 1.5rem rgba(0, 0, 0, .06);
    --mgf-co-brand:        var(--template-primary-color, #8fc400);
    --mgf-co-brand-tint:   rgba(143, 196, 0, .08);
    --mgf-co-brand-tint-2: rgba(143, 196, 0, .04);
    --mgf-co-cta:          #3f6212;   /* vert foncé — texte blanc lisible (AA) */
    --mgf-co-cta-hover:    #365314;
    --mgf-co-text:         var(--bs-body-color, #212529);
    --mgf-co-muted:        #6c757d;
    --mgf-co-bg-soft:      #f7f8f9;
}

/* ─── 11.1 — Conteneur, titres d'étape & pastilles numérotées ─────────────── */

#ProOPC {
    color: var(--mgf-co-text);
}

#ProOPC .cart-page-title,
#ProOPC h1.cart-page-title {
    font-weight: var(--neoteric-font-weight-headings, 700);
}

/* Titre de chaque étape (h3.proopc-process-title) + pastille numéro.
   On NEUTRALISE le bandeau gris du plugin (background:#FAFAFA + border-bottom
   #DDD + padding-left:15px) → l'entête fusionne avec le corps de la carte,
   aligné sur le même retrait que le contenu. */
#ProOPC .proopc-process-title {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 0;
    line-height: 1.3;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mgf-co-text);
}

#ProOPC .proopc-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--mgf-co-cta);   /* vert foncé + blanc = contraste AA */
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
}

/* Sous-titres (h4.proopc-subtitle) */
#ProOPC .proopc-subtitle {
    font-size: .95rem;
    font-weight: 600;
    color: var(--mgf-co-muted);
    margin-bottom: .75rem;
}

/* ─── 11.2 — Cartes d'étape (blocs) ───────────────────────────────────────── */

#ProOPC .proopc-bt-address,
#ProOPC .proopc-st-address,
#ProOPC .proopc-shipments,
#ProOPC .proopc-payments,
#ProOPC .proopc-coupon,
#ProOPC .proopc-confirm-order,
#ProOPC .proopc-register-login,
#ProOPC .proopc-additional-info {
    background: #fff;
    border: 1px solid var(--mgf-co-border-color);
    border-radius: var(--mgf-co-radius);
    box-shadow: var(--mgf-co-shadow);
    padding: 1rem 1.1rem 1.1rem;   /* cadre unique resserré (vs 1.25rem) */
    margin-bottom: 1.25rem;
}

/* CTA : le plugin met .proopc-checkout-box{margin:15px 0 20px} → on retire la
   marge basse (symétrie avec le cadre). La marge haute (15px) sépare le bouton. */
#ProOPC .proopc-confirm-order .proopc-checkout-box {
    margin-bottom: 0;
}
/* VRAIE cause du vide sous le CTA : quand le bouton est disabled (form incomplet),
   un wrapper .disable-button rend .proopc-order-confirmation-notice display:block
   ALORS QU'ELLE EST VIDE → margin-top:20px + padding:10px = ~40px de vide. On la
   masque tant qu'elle n'a pas de message (:empty). Dès qu'un message est injecté,
   :empty ne matche plus → elle réapparaît normalement (aria-live préservé). */
#ProOPC .proopc-order-confirmation-notice:empty {
    display: none !important;
}

/* Cadre UNIQUE : on supprime tous les sous-boîtages du plugin à l'intérieur
   de la carte login/inscription (boîte-dans-la-boîte = place gaspillée +
   contenu désaligné du titre). La carte extérieure fait seule le cadre. */
#ProOPC .proopc-register-login .proopc-register,
#ProOPC .proopc-register-login .proopc-login,
#ProOPC .proopc-register-login .proopc-inner,
#ProOPC .proopc-register-login .proopc-guest-form,
#ProOPC .proopc-register-login .proopc-reg-form {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
/* Séparateur léger entre la zone inscription et la zone connexion */
#ProOPC .proopc-register-login .proopc-login {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--mgf-co-border-color);
}

/* ─── 11.3 — Tableau récapitulatif (lignes panier) ────────────────────────── */

#ProOPC #proopc-pricelist {
    background: #fff;
    border: 1px solid var(--mgf-co-border-color);
    border-radius: var(--mgf-co-radius);
    box-shadow: var(--mgf-co-shadow-card);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

#ProOPC table.cart-summary {
    margin: 0;
    border-collapse: collapse;
    font-family: 'Roboto', Verdana, Helvetica, sans-serif;
    font-size: .875rem;
    line-height: 1.5;
}

/* Neutralise la bordure propre de la table du plugin (#DDD) → évite la
   double-bordure à l'intérieur de la carte #proopc-pricelist. */
#ProOPC #proopc-pricelist .proopc-table-striped,
#ProOPC table.cart-summary.proopc-table-striped {
    border: 0;
    margin-bottom: 0;
}

#ProOPC table.cart-summary thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mgf-co-muted);
    background: transparent;     /* retire le #FAFAFA du plugin */
    border-top: 0;
    border-bottom: 2px solid var(--mgf-co-border-color);
    padding: .5rem .5rem .65rem;
    vertical-align: bottom;
}

#ProOPC table.cart-summary tbody td {
    padding: .75rem .5rem;
    background: transparent;     /* retire le #FFF/gris du plugin */
    border-bottom: 1px solid var(--mgf-co-border-color);
    border-top: 0;
    vertical-align: middle;
    text-transform: none;        /* noms produits en casse naturelle (lisibles) */
}

/* Desktop (table-layout:auto) : la colonne NOM absorbe tout l'espace excédentaire
   → les colonnes numériques (réf/prix/qté/tva/remise/total) restent à la largeur
   de leur contenu et se resserrent à droite, sans vide entre elles. En mobile la
   carte est en grille → width réinitialisé (cf. §11.15 td.col-name). */
#ProOPC table.cart-summary :is(th, td).col-name {
    width: 100%;
}
/* col-sku (Réf.) : ne JAMAIS casser le SKU. Sans ça, le width:100% sur col-name
   réduit col-sku à sa largeur min et le word-break:break-word (§11.10) l'écrase
   caractère par caractère. nowrap = elle garde la largeur de son contenu. */
#ProOPC table.cart-summary :is(th, td).col-sku {
    white-space: nowrap;
    word-break: normal;
}

/* Vignette produit arrondie */
#ProOPC .cart-images img,
#ProOPC .cart-product-description.with-image .cart-images img {
    border-radius: var(--mgf-co-radius-sm);
    border: 1px solid var(--mgf-co-border-color);
    max-width: 56px;
    height: auto;
}

/* Le plugin réservait 70px à gauche via padding-left:70px sur .with-image et
   compensait avec margin-left:-70px sur .cart-images. On supprime les deux :
   l'image flotte à 0 et le texte s'écoule naturellement à droite du float.
   `div` dans le sélecteur → spéc. 1,2,1 > plugin 1,2,0 (chargé après). */
#ProOPC div.cart-product-description.with-image {
    padding-left: 0;
}
#ProOPC .cart-product-description.with-image .cart-images {
    float: left;
    margin: 0 .6rem .25rem 0;
}

/* Cadre UNIQUE : on supprime le « polaroïd » du plugin sur le conteneur
   (padding 3px + fond blanc + box-shadow + width 55px + margin-left -70px).
   Seule l'<img> porte la bordure fine + radius. */
#ProOPC .cart-images {
    width: auto;
    margin-left: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
#ProOPC .cart-product-description {
    overflow: hidden;   /* contient le float, le texte ne passe pas dessous */
}

#ProOPC .cart-p-list .col-name a {
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
}
#ProOPC .cart-p-list .col-name a:hover {
    text-decoration: underline;
}

#ProOPC .product-sku-text {
    color: var(--mgf-co-muted);
    font-size: .85rem;
}

/* Lignes vides du plugin : on retire la bordure parasite */
#ProOPC table.cart-summary tr.blank-row td {
    border-bottom: 0;
    padding: .25rem .5rem;
}

/* Sélecteur quantité — même pattern Bootstrap input-group que la fiche produit */

/* Container : JS ajoute .input-group.
   Le plugin impose display:inline sur .cart-summary .proopc-input-append à spéc.(0,3,0) —
   Bootstrap .input-group {display:flex} perd. Notre règle (1,2,0) gagne : forcer inline-flex. */
#ProOPC .proopc-input-append.input-group {
    display: inline-flex;
    vertical-align: middle;
    width: auto;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Border-radius : .proopc-btn déclare border-radius:4px sur tous ses enfants,
   ce qui écrase la logique :first-child/:last-child de Bootstrap — forcer manuellement */
#ProOPC .proopc-input-append.input-group > * {
    border-radius: 0;
}
#ProOPC .proopc-input-append.input-group > :first-child {
    border-top-left-radius: var(--mgf-co-radius);
    border-bottom-left-radius: var(--mgf-co-radius);
}
#ProOPC .proopc-input-append.input-group > :last-child {
    border-top-right-radius: var(--mgf-co-radius);
    border-bottom-right-radius: var(--mgf-co-radius);
}

/* Input quantité : .input-ultra-mini (plugin) prime sur .form-control (Bootstrap charge avant).
   Sélecteur input[type="number"].proopc-qty-input → spécificité (1,2,2) > règles plugin ≤ (1,2,1).
   Hauteur explicite 2.5rem = min-height imposé aux boutons ± par WCAG (flex-stretch ne suffit pas). */
#ProOPC .proopc-input-append input[type="number"].proopc-qty-input {
    width: 4rem;
    height: 2.5rem;
    padding: .375rem .5rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: .2rem solid #cdd3d9;
    -moz-appearance: textfield;
    appearance: textfield;
}
#ProOPC .proopc-input-append input[type="number"].proopc-qty-input::-webkit-outer-spin-button,
#ProOPC .proopc-input-append input[type="number"].proopc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#ProOPC .proopc-input-append input[type="number"].proopc-qty-input:focus {
    border-color: var(--mgf-co-brand);
    box-shadow: 0 0 0 .2rem var(--mgf-co-brand-tint);
}

/* Bouton refresh (↺) : JS ajoute .btn.btn-outline-secondary
   — reset gradient/ombre .proopc-btn + padding identique au delete */
#ProOPC .proopc-task-updateqty.btn {
    padding: .375rem .625rem;
    font-size: 1rem;
    line-height: 1.5;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
}
/* Icône refresh : plugin impose margin ±5px qui rétrécit le bouton — remettre à 0 */
#ProOPC .cart-p-qty .proopc-btn .proopc-icon-refresh {
    margin-left: 0;
    margin-right: 0;
}

/* Bouton suppression (🗑) : hors input-group — mêmes padding/taille que le refresh */
#ProOPC td.col-qty .remove_from_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: .375rem;
    border: 1px solid #ffcdd2;
    border-radius: var(--mgf-co-radius);
    background: #fff;
    background-image: none;
    color: #c62828;
    font-size: 1rem;
    line-height: 1.5;
    margin-left: .25rem;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-shadow: none;
    box-shadow: none;
}
#ProOPC td.col-qty .remove_from_cart:hover:not([disabled]) {
    background: #ffebee;
    background-image: none;
    border-color: #c62828;
    color: #7f0000;
}

/* Desktop ≥768px : compacité — se caler sur la hauteur naturelle du bouton suppression */
@media (min-width: 768px) {
    /* Input quantité : laisser align-items:stretch décider, réduire font-size/padding */
    #ProOPC .proopc-input-append input[type="number"].proopc-qty-input {
        height: auto;
        padding: .2rem .4rem;
        font-size: .875rem;
        line-height: 1.4;
    }
    /* Boutons +/- et refresh à l'intérieur de l'input-group */
    #ProOPC .proopc-input-append.input-group .btn {
        padding: .2rem .4rem;
        font-size: .875rem;
        line-height: 1.4;
    }
    /* Bouton suppression : aspect-ratio:1 déjà sur la règle de base — juste réduire la taille */
    #ProOPC td.col-qty .remove_from_cart {
        padding: .2rem;
        font-size: .875rem;
        line-height: 1.4;
    }
    /* WCAG min-height 2.5rem → desktop = souris, cible tactile non requise */
    #ProOPC .proopc-input-append .proopc-btn,
    #ProOPC .proopc-input-append .quantity-controls,
    #ProOPC .remove_from_cart {
        min-height: 0;
    }
}

/* ─── 11.4 — Totaux ───────────────────────────────────────────────────────── */

#ProOPC table.cart-summary tr.cart-sub-total td,
#ProOPC table.cart-summary tr.shipping-row td,
#ProOPC table.cart-summary tr.payment-row td,
#ProOPC table.cart-summary tr.cart-coupon-row td,
#ProOPC table.cart-summary tr.tax-per-bill td {
    border-bottom: 0;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

#ProOPC table.cart-summary tr .sub-headings span {
    color: var(--mgf-co-muted);
    font-weight: 600;
}

/* Total général (TTC) : emphase en vert — SANS la bande grise du plugin
   (#e9e9e9 + bordures #c4c4c4 → retirées). Filet haut net + ligne épurée. */
#ProOPC table.cart-summary tr.grand-total td,
#ProOPC table.cart-summary tr.grand-total-p-currency td {
    background: transparent;
    border-bottom: 0;
}
#ProOPC table.cart-summary tr.grand-total td {
    border-top: 2px solid var(--mgf-co-border-color);
    padding: .7rem .5rem;
    vertical-align: middle;   /* label, TVA et total sur le même axe → ligne cohérente */
}
/* Libellé : casse normale (cohérent avec le mobile), Roboto, gras, sobre.
   Plus d'uppercase ni de letter-spacing → la ligne n'a qu'un seul accent (le total vert). */
#ProOPC table.cart-summary tr.grand-total .sub-headings span {
    font-family: 'Roboto', Verdana, Helvetica, sans-serif;
    color: var(--mgf-co-text);
    font-weight: 700;
    font-size: 1.125rem;
}
/* TVA totale : conservée mais subordonnée — muted + poids medium (plus 'très fine'),
   alignée en colonne sous l'en-tête TVA. Lisible sans concurrencer le total. */
#ProOPC table.cart-summary tr.grand-total .col-tax,
#ProOPC table.cart-summary tr.grand-total .col-tax .PricebillTaxAmount {
    color: var(--mgf-co-muted);
    font-weight: 500;
    font-size: .95rem;
}
/* Total TTC : point focal unique — vert, gras, dominant (inchangé). */
#ProOPC table.cart-summary tr.grand-total .col-total {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--mgf-co-cta);   /* vert foncé : contraste AA garanti */
}

/* Prix barré (avant remise) discret */
#ProOPC .line-through {
    color: var(--mgf-co-muted);
    font-size: .85em;
}

/* ─── 11.5 — Champs de formulaire ─────────────────────────────────────────── */

/* :not(.proopc-qty-input) toujours vrai pour email/tel/password/search → spéc. (1,2,1)
   bat le plugin (#ProOPC input[type=*] à 1,1,1 chargé après) pour tous les champs
   y compris ceux avec .form-control (registration Joomla/Bootstrap). */
#ProOPC input[type="text"]:not(.proopc-qty-input),
#ProOPC input[type="email"]:not(.proopc-qty-input),
#ProOPC input[type="tel"]:not(.proopc-qty-input),
#ProOPC input[type="password"]:not(.proopc-qty-input),
#ProOPC input[type="search"]:not(.proopc-qty-input),
#ProOPC input:not([type]):not(.proopc-qty-input),
#ProOPC .inputbox:not(textarea),
#ProOPC select,
#ProOPC textarea {
    width: 100%;
    min-height: 2.5rem;          /* hauteur homogène inputs / selects */
    padding: .55rem .75rem;
    border: 1px solid var(--mgf-co-border-color);
    border-radius: var(--mgf-co-radius-sm);
    background-color: #fff;
    color: var(--mgf-co-text);
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Select : chevron explicite (la liste déroulante doit se voir) */
#ProOPC select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: .85rem;
}

/* VM pose style="width:Xpx" inline sur certains <select> (ex: virtuemart_country_id).
   Un style inline bat toute règle CSS — seul !important peut le surpasser.
   Bootstrap .form-select impose aussi son propre chevron / border-radius → on réaffirme les nôtres. */
#ProOPC select.form-select {
    width: 100% !important;
    min-height: 2.5rem;
    padding: .55rem 2rem .55rem .75rem;
    border: 1px solid var(--mgf-co-border-color);
    border-radius: var(--mgf-co-radius-sm);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: .85rem;
    color: var(--mgf-co-text);
    line-height: 1.4;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#ProOPC input[type="text"]:not(.proopc-qty-input):focus-visible,
#ProOPC input[type="email"]:not(.proopc-qty-input):focus-visible,
#ProOPC input[type="tel"]:not(.proopc-qty-input):focus-visible,
#ProOPC input[type="password"]:not(.proopc-qty-input):focus-visible,
#ProOPC input[type="search"]:not(.proopc-qty-input):focus-visible,
#ProOPC input:not([type]):not(.proopc-qty-input):focus-visible,
#ProOPC .inputbox:focus-visible,
#ProOPC select:focus-visible,
#ProOPC textarea:focus-visible {
    border-color: var(--mgf-co-brand);
    box-shadow: 0 0 0 .2rem var(--mgf-co-brand-tint);
    outline: 2px solid transparent;   /* visible en mode contraste forcé */
    outline-offset: 2px;
}

/* Champs en input-group Bootstrap (recherche SIRET) : on NE force PAS le
   100% (réservé via :not(.form-control)) et on restaure le flex pour que le
   bouton reste sur la MÊME ligne, collé à droite de l'input. */
#ProOPC .input-group {
    flex-wrap: nowrap;
}
#ProOPC .input-group > input.form-control,
#ProOPC .input-group > select.form-control {
    width: 1%;
    flex: 1 1 auto;
}

#ProOPC label {
    font-weight: 500;
    margin-bottom: .3rem;
}
#ProOPC label .asterisk,
#ProOPC label .required {
    color: #b00020;
    margin-left: .15rem;
}

/* ─── 11.6 — Livraison / Paiement (options en cartes cliquables) ──────────── */

#ProOPC #proopc-shipments input[type="radio"],
#ProOPC #proopc-payments input[type="radio"],
#ProOPC .proopc-switch input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    accent-color: var(--mgf-co-brand);
    cursor: pointer;
    flex: 0 0 auto;
}

/* Chaque méthode (label VM) → carte ; bordure + tint sur sélection.
   Dégradation gracieuse si la structure VM diffère (reste fonctionnel). */
#ProOPC #proopc-shipments fieldset > label,
#ProOPC #proopc-payments fieldset > label {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1rem;
    margin: 0 0 .6rem;
    border: 1.5px solid var(--mgf-co-border-color);
    border-radius: var(--mgf-co-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
#ProOPC #proopc-shipments fieldset > label:hover,
#ProOPC #proopc-payments fieldset > label:hover {
    border-color: var(--mgf-co-brand);
}
#ProOPC #proopc-shipments fieldset > label:has(input:checked),
#ProOPC #proopc-payments fieldset > label:has(input:checked) {
    border-color: var(--mgf-co-brand);
    background: var(--mgf-co-brand-tint-2);
    /* Repère non chromatique (RGAA 3 — pas de couleur seule) */
    box-shadow: inset .25rem 0 0 0 var(--mgf-co-brand);
}

/* Mode A : libellé du mode de paiement conservé mais DISCRET — le logo porte
   l'info principale, le texte reste comme clarificateur (utile pour « Virement
   Bancaire » non universel) + accessibilité (label visible du radio). */
#ProOPC #proopc-payments .vmpayment_name {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--mgf-co-muted);
}

/* Toggle invité / inscription */
#ProOPC .proopc-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

/* ─── 11.7 — Coupon / code promo ──────────────────────────────────────────── */

#ProOPC #proopc-coupon .proopc-input-append {
    display: flex;
    flex-wrap: wrap;   /* bouton « Sauvegarder » passe sous le champ si pas de place */
    gap: .5rem;
}
#ProOPC #proopc-coupon-code {
    flex: 1 1 9rem;    /* grandit ; sous ~9rem + bouton, le bouton wrappe dessous */
    min-width: 0;      /* autorise l'input à rétrécir (sinon size=20 bloque le wrap) */
}
/* Le plugin met le bouton en float:left + margin-left:-1px → on neutralise pour
   qu'il se comporte en item flex (et wrappe proprement sous l'input). */
#ProOPC #proopc-coupon .proopc-input-append button.proopc-btn {
    float: none;
    margin-left: 0;
    flex: 0 0 auto;
}

/* ─── 11.8 — Boutons (système unifié) ─────────────────────────────────────── */

/* Baseline visuelle commune SANS toucher au gabarit/taille des boutons-icônes */
#ProOPC .proopc-btn {
    border-radius: var(--mgf-co-radius-sm);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* CTA principal « Confirmer la commande » — vert foncé, texte blanc (AA) */
#ProOPC #proopc-order-submit {
    display: block;
    width: 100%;
    padding: .85rem 1.25rem;
    background: var(--mgf-co-cta);
    border: 1px solid var(--mgf-co-cta);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: var(--mgf-co-radius-sm);
    box-shadow: none;
}
#ProOPC #proopc-order-submit:not([disabled]):hover,
#ProOPC #proopc-order-submit:not([disabled]):focus-visible {
    background: var(--mgf-co-cta-hover);
    border-color: var(--mgf-co-cta-hover);
    color: #fff;
}
#ProOPC #proopc-order-submit[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* Bouton secondaire « Enregistrer » du coupon → outline neutre */
#ProOPC #proopc-task-savecoupon {
    padding: .55rem 1rem;
    background: #fff;
    border: 1px solid var(--mgf-co-border-color);
    color: var(--mgf-co-text);
}
#ProOPC #proopc-task-savecoupon:not([disabled]):hover {
    border-color: var(--mgf-co-brand);
    background: var(--mgf-co-brand-tint);
}

/* Liens utilitaires (continuer mes achats, vider le panier) */

/* "Poursuivre vos achats" — action positive, vert brand */
#ProOPC .proopc-continue-link a {
    color: var(--mgf-co-brand);
    font-weight: 500;
    font-size: .9rem;
    text-decoration: none;
    transition: color .15s ease;
}
#ProOPC .proopc-continue-link a::after {
    content: " →";
    font-weight: 400;
}
#ProOPC .proopc-continue-link a:hover {
    color: var(--mgf-co-cta);
    text-decoration: underline;
}

/* "Vider Le Panier" — action destructive secondaire, discrète par défaut */
#ProOPC .proopc-clear-cart {
    color: #adb5bd;
    font-size: .8125rem;
    font-weight: 400;
    text-decoration: none;
    transition: color .15s ease;
}
#ProOPC .proopc-clear-cart:hover {
    color: #c62828;
    text-decoration: underline;
}

/* ─── 11.9 — Cases CGV / confidentialité ──────────────────────────────────── */

/* NB : taille/design des cases consolidés plus bas dans le bloc unique
   « Design uniforme de TOUTES les cases à cocher » (avec !important pour battre
   plugin + héritage). Ici on ne garde que le layout flex des libellés. */
#ProOPC .cart-tos-group label.checkbox,
#ProOPC .cart-fields-group label.checkbox,
#ProOPC label.proopc-row.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding-left: 0;
    font-weight: 400;
}

/* Zone notes / commentaire client */
#ProOPC .customer-comment-group textarea,
#ProOPC .proopc-customer-comment {
    min-height: 5rem;
    resize: vertical;
}

/* Alertes du plugin alignées sur la sémantique du site */

/* Base commune : flex, radius, animation d'entrée */
#ProOPC .proopc-alert {
    position: relative;       /* ancre le .close absolu */
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 2.75rem .7rem 1rem;   /* droite = place pour le bouton × */
    border: 1px solid;
    border-radius: var(--mgf-co-radius);
    font-size: .9375rem;
    line-height: 1.5;
    animation: proopc-alert-in .2s ease both;
}
@keyframes proopc-alert-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Icône auto (FA) — flex-shrink:0 pour ne pas se comprimer */
#ProOPC .proopc-warning-msg::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    content: "\f058";   /* fa-circle-check */
    font-size: 1rem;
    flex-shrink: 0;
}
#ProOPC .proopc-alert-error::before,
#ProOPC .proopc-error-msg::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    content: "\f057";   /* fa-circle-xmark */
    font-size: 1rem;
    flex-shrink: 0;
}

/* Le texte <span> remplit l'espace disponible */
#ProOPC .proopc-alert > span { flex: 1; }

/* Bouton × : position:absolute pour s'abstraire du float:right du plugin */
#ProOPC .proopc-alert .close {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: .25rem;
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 400;
    color: inherit;
    opacity: .5;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}
#ProOPC .proopc-alert .close:hover {
    opacity: 1;
    background: rgba(0,0,0,.06);
}
@media (max-width: 767px) {
    #ProOPC .proopc-alert { padding-right: 3.25rem; }
    #ProOPC .proopc-alert .close {
        width: 2.5rem;
        height: 2.5rem;
        right: .375rem;
        font-size: 1.3rem;
    }
}

/* Warning → succès (confirmation d'action réussie) : vert brand */
#ProOPC .proopc-warning-msg {
    background: #f3fae6;
    border-color: #c3e39b;
    color: #3a6318;
}

/* Erreur — ces alertes n'ont PAS la classe .proopc-alert (donc ni flex, ni gap,
   ni radius hérités). On leur applique le même traitement : flex pour espacer
   l'icône ::before (fa-circle-xmark) du texte, bordure visible (le plugin met
   border:0) et border-radius. justify-content:center conserve le centrage plugin. */
#ProOPC .proopc-alert-error,
#ProOPC .proopc-error-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    border-radius: var(--mgf-co-radius-sm);
}

/* Info */
#ProOPC .proopc-info-msg {
    background: #cff4fc;
    color: #055160;
    border-color: #b6effb;
}

/* ─── 11.10 — Mise en page 2 colonnes (desktop ≥992px) ────────────────────── */
/* Formulaire à gauche (~60%), récapitulatif panier collant à droite (~38%).
   Technique : float (prévisible, sans réordonner le DOM) + position:sticky.
   #proopc-pricelist précède les colonnes dans le source → float:right le hisse
   en haut à droite ; les .proopc-column3 (>50% de large) s'empilent à gauche. */

/* Garde :has(> form...) — la grille 2 colonnes ne s'active QUE lorsque le
   panier est un enfant direct de .proopc-finalpage (plugin styles 2 et 4).
   En style 3, le panier est déjà dans la colonne de droite (.proopc-column3
   .last) → le garde échoue → on conserve la disposition native du plugin. */
@media (min-width: 992px) {

    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) {
        display: flow-root;   /* contient les floats, pas de clearfix requis */
    }

    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form {
        float: right;
        width: 58%;              /* récap élargi → noms produits aérés */
        margin: 0 0 1.25rem 2%;  /* bas réduit → aligne le pied de colonne droite */
        position: sticky;
        top: 1.5rem;
    }

    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > .proopc-column3 {
        float: left;
        clear: left;          /* empile verticalement la colonne formulaire */
        width: 40%;           /* formulaire resserré (largeur checkout standard) */
        margin: 0;
    }

    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form #proopc-pricelist {
        padding: 1rem;
        margin-bottom: 0;   /* neutralise le 1.5rem global EN DESKTOP seulement →
                               aligne le pied de la colonne droite ; le mobile garde
                               son espace sous le récap (règle de base inchangée). */
    }
    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form table.cart-summary {
        font-size: .82rem;
        width: 100%;
    }
    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form table.cart-summary thead th,
    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form table.cart-summary tbody td {
        padding-left: .3rem;
        padding-right: .3rem;
        word-break: break-word;
    }
    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form .cart-images img {
        max-width: 40px;
    }

}

/* ─── 11.11 — Mobile / tablette (<992px) ──────────────────────────────────── */
/* Pas de float : empilement vertical naturel (panier en haut, puis étapes).
   Le plugin bascule déjà sa table en mode « cartes » sous 767px. */

@media (max-width: 991.98px) {
    #ProOPC .proopc-process-title {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    #ProOPC .proopc-bt-address,
    #ProOPC .proopc-st-address,
    #ProOPC .proopc-shipments,
    #ProOPC .proopc-payments,
    #ProOPC .proopc-coupon,
    #ProOPC .proopc-confirm-order,
    #ProOPC .proopc-register-login,
    #ProOPC .proopc-additional-info,
    #ProOPC #proopc-pricelist {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ─── 11.12 — Accessibilité transverse ────────────────────────────────────── */

/* Focus visible homogène sur tous les éléments interactifs (RGAA 10.7) */
#ProOPC a:focus-visible,
#ProOPC button:focus-visible,
#ProOPC .proopc-btn:focus-visible,
#ProOPC input[type="radio"]:focus-visible,
#ProOPC input[type="checkbox"]:focus-visible,
#ProOPC .proopc-switch:focus-within {
    outline: 2px solid var(--mgf-co-cta);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Cibles tactiles minimales (WCAG 2.5.8) sur les actions de ligne */
#ProOPC .proopc-input-append .proopc-btn,
#ProOPC .proopc-input-append .quantity-controls,
#ProOPC .remove_from_cart,
#ProOPC #proopc-shipments fieldset > label,
#ProOPC #proopc-payments fieldset > label {
    min-height: 2.5rem;
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #ProOPC *,
    #ProOPC *::before,
    #ProOPC *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ─── 11.13 — Correctifs d'itération ──────────────────────────────────────────
   Surcharges ciblées placées en DERNIER (gagne les égalités de spécificité)
   et montées en spécificité quand le plugin est plus fort. ───────────────────*/

/* #1 — Toutes les bannières d'étape : le plugin a #ProOPC .proopc-process-title
   (spéc. 1,1,0) chargé APRÈS custom.css → gagne au niveau de cascade pour les
   règles à égale spécificité (§11.1 utilisait le même sélecteur).
   Fix : h3.proopc-process-title → 1,1,1 > 1,1,0 → gagne sur toutes les sections.
   Section 1 couverte en plus par #proopc-entry-single (2,2,1) et les fallbacks. */
#ProOPC h3.proopc-process-title {
    background: transparent;
    border: 0;
    border-bottom: 0;
    padding: 0;
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}
#ProOPC #proopc-entry-single h3.proopc-process-title,
#ProOPC .proopc-finalpage .proopc-column3 .proopc-register-login h3.proopc-process-title,
#ProOPC .proopc-finalpage .proopc-register-login h3,
#ProOPC .proopc-register-login h3:not(.modal-title) {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}

/* #2 / #3 — Unification de TOUS les inputs textuels dans #ProOPC.
   §11.5 excluait .form-control → les champs VM d'adresse (form-control, hors
   .proopc-input-append) restaient Bootstrap-style (padding:.375rem, sans min-height).
   Ici, on cible SANS garde :not(.form-control) : rendu homogène sur toute la page.
   Le layout 40/60 du plugin est aussi déstratifié (label au-dessus, pleine largeur). */
#ProOPC .proopc-group .proopc-input-group-level,
#ProOPC .proopc-group .proopc-input {
    width: 100%;
    display: block;
}
#ProOPC .proopc-input-append {
    position: relative;
}
#ProOPC input[type="text"]:not(.proopc-qty-input),
#ProOPC input[type="email"],
#ProOPC input[type="tel"],
#ProOPC input[type="password"],
#ProOPC input[type="search"],
#ProOPC input:not([type]):not(.proopc-qty-input) {
    min-height: 2.5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--mgf-co-border-color);
    border-radius: var(--mgf-co-radius-sm);
    background-color: #fff;
    color: var(--mgf-co-text);
    line-height: 1.4;
    box-sizing: border-box;
}
/* Focus ring étendu à tous les inputs textuels (y compris .form-control — RGAA 10.7) */
#ProOPC input[type="text"]:not(.proopc-qty-input):focus-visible,
#ProOPC input[type="email"]:focus-visible,
#ProOPC input[type="tel"]:focus-visible,
#ProOPC input[type="password"]:focus-visible,
#ProOPC input[type="search"]:focus-visible,
#ProOPC input:not([type]):not(.proopc-qty-input):focus-visible {
    border-color: var(--mgf-co-brand);
    box-shadow: 0 0 0 .2rem var(--mgf-co-brand-tint);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* #4 — Radio livraison/paiement DANS la carte : la carte passe en bloc pleine
   largeur, le radio (frère flottant qui précède) retombe dans son padding
   gauche. Surlignage de la carte sélectionnée via le frère adjacent. */
#ProOPC #proopc-shipments fieldset input[type="radio"],
#ProOPC #proopc-payments fieldset input[type="radio"] {
    float: left;
    margin: .85rem .6rem 0 .7rem;
    position: relative;
    z-index: 1;
}
#ProOPC #proopc-shipments fieldset > label,
#ProOPC #proopc-payments fieldset > label {
    display: block;
    float: none;
    max-width: none;
    padding: .7rem 1rem .7rem 2.6rem;
}
#ProOPC #proopc-shipments fieldset input[type="radio"]:checked + label,
#ProOPC #proopc-payments fieldset input[type="radio"]:checked + label {
    border-color: var(--mgf-co-brand);
    background: var(--mgf-co-brand-tint-2);
    box-shadow: inset .25rem 0 0 0 var(--mgf-co-brand);
}

/* #5 — Cases CGV + confidentialité : alignées et homogènes (les deux sont
   rendues dans .proopc-confirm-order, via des wrappers différents).
   CGV = <label class="checkbox"> (flex direct). Confidentialité = .gdpr-checkbox
   (que des <div>, flux inline par défaut → case décalée). On force le MÊME flex
   sur .gdpr-checkbox → case en 1er item à x=0, alignée verticalement avec la CGV. */
/* Layout des libellés de cases (CGV, confidentialité, « Même adresse », champs
   custom) : flex + gap pour un alignement case/texte homogène ; padding-left:0
   annule le .checkbox{padding-left:20px} Bootstrap du plugin (inutile en flex). */
#ProOPC .proopc-confirm-order label.checkbox,
#ProOPC .proopc-confirm-order .cart-tos-group label,
#ProOPC .proopc-confirm-order [class^="cart-"] label.checkbox,
#ProOPC .proopc-confirm-order .gdpr-checkbox,
#ProOPC .st-same-checkbox,
#ProOPC label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .55rem;
    padding-left: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* Design uniforme de TOUTES les cases à cocher de l'OPC : taille confortable
   (1.2rem ≈ cible tactile correcte), coche en couleur marque (accent-color natif),
   curseur main. Le 2e sélecteur (#ProOPC .checkbox input, spéc.1,1,1) neutralise
   le pattern Bootstrap du plugin (float:left + margin-left:-20px + margin-top:2px)
   qui décalait/cassait l'alignement — il égale sa spécificité et gagne par l'ordre. */
#ProOPC input[type="checkbox"],
#ProOPC .checkbox input[type="checkbox"],
#ProOPC input.terms-of-service,
#ProOPC .gdpr-checkbox input[type="checkbox"].plugin-privacy {
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin: .1rem 0 0 !important;   /* annule margin-left:-20px + margin-top:2px/4px du plugin */
    float: none !important;          /* annule float:left du plugin (.checkbox/.terms-of-service) */
    flex: 0 0 auto;
    accent-color: var(--mgf-co-brand);
    cursor: pointer;
}

/* Plugin privacy (media/plg_vmuserfield_privacy/css/style.css) : impose son
   pattern Bootstrap en !important (padding-left:20px sur .gdpr-checkbox ;
   width:auto + margin-left:-20px + float:left sur l'input) → case confidentialité
   décalée et de taille différente. On la réaligne sur le design uniforme : ces
   sélecteurs à spéc. ID battent les !important du plugin (colonne ID prioritaire). */
#ProOPC .gdpr-checkbox {
    padding-left: 0 !important;   /* annule .gdpr-checkbox{padding-left:20px!important} du plugin
                                     (l'input lui-même est traité dans la règle unique ci-dessus) */
}

/* Label CGV : le plugin met .checkbox{padding-left:20px} → la case CGV restait
   décalée de 20px à droite (alors que son input -20px est, lui, bien neutralisé).
   On force le padding gauche à 0 en !important sur TOUS les labels de cases →
   case alignée à x=0, identique à la confidentialité et à « Même adresse ». */
#ProOPC .cart-tos-group label.checkbox,
#ProOPC .st-same-checkbox,
#ProOPC label.checkbox {
    padding-left: 0 !important;
}

/* Fine-tuning confidentialité : après neutralisation des paddings/marges, il
   reste un résidu structurel (~.465rem) du wrapper .gdpr-checkbox → la case est
   ce poil à gauche de la CGV. On la recale à droite de cette valeur (validée
   visuellement). Sélecteur + tardif et même spéc. (1,3,1) que la règle
   consolidée → l'emporte sur son margin:.1rem 0 0 pour le seul margin-left. */
#ProOPC .gdpr-checkbox input[type="checkbox"].plugin-privacy {
    margin-left: .465rem !important;
}

/* #4 — Lisibilité des mentions légales (CGV + confidentialité).
   Le texte des deux cases est un lien (ouverture modale CGV / article privacy) →
   il héritait du vert de lien marque, faible contraste sur blanc. Une mention
   légale obligatoire doit être LUE : on passe le texte en gris foncé (contraste
   AA), les liens restent identifiables (soulignés), vert foncé au survol. */
#ProOPC .proopc-confirm-order label.checkbox,
#ProOPC .proopc-confirm-order .cart-tos-group label,
#ProOPC .proopc-confirm-order [class^="cart-"] label.checkbox,
#ProOPC .proopc-confirm-order .terms-of-service-cont,
#ProOPC .proopc-confirm-order .privacy-checkbox,
#ProOPC .proopc-confirm-order .gdpr-checkbox {
    color: var(--mgf-co-text);
    font-size: .9rem;
}
/* Liens des deux mentions : CGV (a.terms-of-service) ET confidentialité
   (a.pluginprivacy-policy-link > span, plugin vmuserfield/privacy). */
#ProOPC .proopc-confirm-order label a,
#ProOPC .proopc-confirm-order a.terms-of-service,
#ProOPC .proopc-confirm-order a.pluginprivacy-policy-link,
#ProOPC .proopc-confirm-order a.pluginprivacy-policy-link span {
    color: var(--mgf-co-text);
    text-decoration: none;   /* souligné réservé au survol/focus (lien autonome) */
}
#ProOPC .proopc-confirm-order label a:hover,
#ProOPC .proopc-confirm-order label a:focus-visible,
#ProOPC .proopc-confirm-order a.terms-of-service:hover,
#ProOPC .proopc-confirm-order a.terms-of-service:focus-visible,
#ProOPC .proopc-confirm-order a.pluginprivacy-policy-link:hover,
#ProOPC .proopc-confirm-order a.pluginprivacy-policy-link:focus-visible,
#ProOPC .proopc-confirm-order a.pluginprivacy-policy-link:hover span,
#ProOPC .proopc-confirm-order a.pluginprivacy-policy-link:focus-visible span {
    color: var(--mgf-co-cta);   /* vert foncé : contraste AA garanti */
    text-decoration: underline;
}

/* #3 — Bouton lookup SIRET « Remplir automatiquement » : action UTILITAIRE,
   ne doit pas concurrencer le CTA vert « Confirmer la commande ». Le plugin le
   rend en .btn-primary (vert marque) → on le repasse en secondaire (outline
   neutre). Spéc. ID #ProOPC #siret-search-btn bat .btn-primary sans !important.
   Survol : fond vert très clair + bordure marque, texte gardé foncé (lisible). */
#ProOPC #siret-search-btn {
    background-color: #fff;
    color: var(--mgf-co-text);
    border: 1px solid var(--mgf-co-border-color);
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#ProOPC #siret-search-btn:hover,
#ProOPC #siret-search-btn:focus-visible {
    background-color: #f3fae6;   /* vert très clair, cohérent avec les alertes succès */
    border-color: var(--mgf-co-brand);
    color: var(--mgf-co-text);
}

/* #8 — Bande de réassurance (injectée par user.js en bas du récap #proopc-pricelist).
   Compacte, inline, séparée du total par un filet. Desktop : le récap est sticky
   → la bande est co-visible avec le CTA au moment de la décision. Wrap auto :
   1 ligne sur récap large, 2×2 si étroit/mobile. Seul « Service client » (a.) est
   cliquable → affordance au survol. */
#ProOPC .mgf-trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.1rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--mgf-co-border-color);
}
#ProOPC .mgf-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--mgf-co-text);
    text-decoration: none;
    white-space: nowrap;
}
#ProOPC .mgf-trust-item i {
    font-size: 1rem;
    color: var(--mgf-co-brand);
}
#ProOPC a.mgf-trust-item:hover,
#ProOPC a.mgf-trust-item:focus-visible {
    color: var(--mgf-co-cta);
    text-decoration: underline;
}
#ProOPC a.mgf-trust-item:hover i,
#ProOPC a.mgf-trust-item:focus-visible i {
    color: var(--mgf-co-cta);
}

/* #6 + #7 — Récap : padding resserré, table pleine largeur jusqu'aux bords.
   On cible .col-name/.col-total par CLASSE (plus fiable que :first/:last-child
   qui pointerait col-sku s'il était DOM-premier). La version haute-spécificité
   dans le @media bat §11.10 (spéc. 3,2,5) pour le récap sticky. */
#ProOPC #proopc-pricelist {
    padding: .85rem .9rem;
}
#ProOPC #proopc-pricelist table.cart-summary {
    width: 100%;
}
#ProOPC table.cart-summary :is(th, td).col-name {
    padding-left: 0;
}
#ProOPC table.cart-summary :is(th, td).col-total {
    padding-right: .5rem;
}
@media (min-width: 992px) {
    /* spéc. 3,3,4 — dépasse §11.10 (3,2,5) pour le récap sticky */
    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form table.cart-summary :is(th, td).col-name {
        padding-left: 0;
    }
    #ProOPC .proopc-finalpage:has(> form#proopc-carttable-form) > form#proopc-carttable-form table.cart-summary :is(th, td).col-total {
        padding-right: .5rem;
    }
}

/* #7 — box-shadow / cadre « polaroïd » des vignettes : retiré définitivement
   (spéc. 1,3,1 pour battre la règle responsive du plugin). */
#ProOPC table.cart-summary.proopc-table-striped .cart-images {
    box-shadow: none;
    background: transparent;
    padding: 0;
    border: 0;
    width: auto;
    margin-left: 0;
}

/* #9 — Ratio zip/city : 22/78 (5 chiffres CP ≠ ville) + gouttière via .inner */
#ProOPC .group-enabled .zip-group,
#ProOPC .group-enabled .shipto_zip-group {
    width: 22%;
}
#ProOPC .group-enabled .city-group,
#ProOPC .group-enabled .shipto_city-group {
    width: 78%;
}
/* Gouttière 1rem totale entre les deux champs (.5rem de chaque côté via .inner) */
#ProOPC .group-enabled .zip-group .inner,
#ProOPC .group-enabled .shipto_zip-group .inner {
    padding-right: .5rem;
}
#ProOPC .group-enabled .city-group .inner,
#ProOPC .group-enabled .shipto_city-group .inner {
    padding-left: .5rem;
}

/* #8 — Prix : on sort du rouge criard du plugin (#FE5252). Lignes en couleur
   de texte, TOTAL TTC en vert marque foncé, bien marqué (premium, lisible AA). */
#ProOPC .cart-p-list .col-total .PricesalesPrice,
#ProOPC table.cart-summary .cart-sub-total .col-total .PricesalesPrice,
#ProOPC table.cart-summary .shipping-row .col-total,
#ProOPC table.cart-summary .payment-row .col-total {
    color: var(--mgf-co-text);
    font-weight: 600;
}
#ProOPC table.cart-summary tr.grand-total .col-total,
#ProOPC table.cart-summary tr.grand-total .col-total .PricesalesPrice,
#ProOPC table.cart-summary tr.grand-total .PricebillTotal {
    color: var(--mgf-co-cta);
    font-weight: 800;
    font-size: 1.2rem;
}

/* ─── 11.14 — Hiérarchie visuelle : options produit · sous-totaux · TOTAL TTC ─ */

/* #3 — Options/variantes sous le nom produit dans le tableau panier.
   VM encapsule chaque attribut cart dans <span class="product-field-type-{X}">
   à l'intérieur d'un <div class="vm-customfield-cart">.
   On grise et réduit la taille pour que le nom (font-weight:600) domine. */
#ProOPC .cart-p-list .col-name .vm-customfield-cart {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--mgf-co-muted);
    line-height: 1.4;
}

/* #4 — Zone sous-totaux : fond très léger + label légèrement plus lourd.
   Crée une zone visuelle "totaux" distincte des lignes produit (pattern reçu).
   Spéc. 1,1,3 > §11.3 tbody td (1,0,3) → background appliqué correctement. */
#ProOPC table.cart-summary tr.cart-sub-total td,
#ProOPC table.cart-summary tr.shipping-row td,
#ProOPC table.cart-summary tr.payment-row td,
#ProOPC table.cart-summary tr.cart-coupon-row td,
#ProOPC table.cart-summary tr.tax-per-bill td {
    background-color: var(--mgf-co-bg-soft);   /* #f7f8f9, très subtil */
}
/* #5 — TOTAL TTC : ancrage visuel renforcé. Montant en 1.4rem. */
#ProOPC table.cart-summary tr.grand-total .col-total,
#ProOPC table.cart-summary tr.grand-total .col-total .PricesalesPrice,
#ProOPC table.cart-summary tr.grand-total .PricebillTotal {
    font-size: 1.4rem;   /* was 1.2rem — ancre mieux le regard */
}

/* #2-padding — Fond teinté visible sur sous-totaux → padding latéral généreux.
   Cible aussi grand-total (même fond et même besoin de respiration).
   Spéc. 1,1,3 = même que §11.4 → cascade (déclaré après) → appliqué en dernier. */
#ProOPC table.cart-summary tr.cart-sub-total td,
#ProOPC table.cart-summary tr.shipping-row td,
#ProOPC table.cart-summary tr.payment-row td,
#ProOPC table.cart-summary tr.cart-coupon-row td,
#ProOPC table.cart-summary tr.tax-per-bill td,
#ProOPC table.cart-summary tr.grand-total td {
    padding-left:  .75rem;
    padding-right: .75rem;
}

/* Chiffres alignés dans les colonnes prix (tabular-nums, sans Roboto) */
#ProOPC table.cart-summary .col-price,
#ProOPC table.cart-summary .col-total,
#ProOPC table.cart-summary .col-tax,
#ProOPC table.cart-summary .col-discount,
#ProOPC table.cart-summary .col-qty {
    font-variant-numeric: tabular-nums;
}

/* Carte produit mobile — chevron « Détails » (options produit) : injecté par
   user.js, masqué HORS mobile (en desktop les champs custom restent visibles
   normalement dans col-name). Le @media ≤767px le réaffiche + replie le panneau. */
#ProOPC .mgf-card-details-toggle {
    display: none;            /* desktop : caché ; le @media mobile met display:inline-flex */
    align-items: center;
    gap: .35rem;
    min-height: 2.5rem;      /* cible tactile ~40px (WCAG 2.5.8 AA largement respecté) */
    padding: .3rem .85rem;
    margin: .15rem 0;
    background: var(--mgf-co-brand-tint, rgba(143, 196, 0, .1));
    border: 1px solid var(--mgf-co-border-color);
    border-radius: 999px;    /* pill */
    color: var(--mgf-co-cta);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
#ProOPC .mgf-card-details-toggle:hover,
#ProOPC .mgf-card-details-toggle:focus-visible {
    background: #f3fae6;
    border-color: var(--mgf-co-brand);
}
#ProOPC .mgf-card-details-toggle i {
    font-size: .7rem;
    transition: transform .2s ease;
}
#ProOPC .cart-p-list.is-expanded .mgf-card-details-toggle i {
    transform: rotate(180deg);
}
/* Desktop : les wrappers injectés par le JS (.mgf-card-details / -panel) sont rendus
   TRANSPARENTS → les options produit s'affichent exactement comme avant (inline +
   <br>, dans .cart-product-description, float image géré par le plugin). Sinon mes
   règles mobiles (spans block, <br> masqués) décalaient les options en desktop.
   Le @media ≤767px leur redonne un display réel + replie/resserre. */
#ProOPC .mgf-card-details,
#ProOPC .mgf-card-details-panel {
    display: contents;
}
/* Desktop : le plugin floate l'image (.cart-images float:left) → le bloc options
   coule autour (1ʳᵉ option indentée, 2ᵉ pleine largeur = décalage). clear:left les
   place SOUS l'image, alignées. Inoffensif en mobile (image en float:none). */
#ProOPC .cart-p-list .cart-product-description .vm-customfield-cart {
    clear: left;
}

/* ─── 11.15 — Mode carte mobile (≤767px) — reset des conflits ──────────────── */
/* responsive-procheckout.css transforme la table en blocs (display:block,
   padding-left:45% pour ::before labels en position:absolute, tr{border:1px solid}).
   Nos règles desktop (§11.3/§11.4/§11.14) ont une spécificité plus haute
   → le CSS mobile du plugin est écrasé → labels superposés aux valeurs + double cadre.
   Ce bloc neutralise exactement les propriétés en conflit, sans modifier les autres. */
@media (max-width: 767px) {

    /* Conteneur : retire notre cadre carte — le plugin ajoute tr{border:1px solid #ccc}
       sur chaque ligne-carte → notre border(#proopc-pricelist) créait un double cadre. */
    #ProOPC #proopc-pricelist {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Border-radius sur chaque ligne-carte (tr en display:block) */
    #ProOPC table.cart-summary tbody tr:not(.blank-row) {
        border-radius: var(--mgf-co-radius-sm);
        overflow: hidden;
    }

    /* Toutes les cellules tbody : rétablit padding-left:45% (espace pour ::before labels).
       Notre §11.3 padding:.75rem .5rem (spéc.1,0,3) l'écrasait → superposition. */
    #ProOPC table.cart-summary tbody td {
        padding: 8px 8px 8px 45%;
        background-color: transparent;
        border: none;
        border-bottom: 1px dotted #eee;
    }

    /* Étiquettes de section : pas de décalage 45% — couvre sub-headings,
       shipping-payment-heading (livraison/paiement) et coupon-form-col. */
    #ProOPC table.cart-summary tbody td.sub-headings,
    #ProOPC table.cart-summary tbody td.shipping-payment-heading,
    #ProOPC table.cart-summary tbody td.coupon-form-col {
        padding-left: 8px;
    }

    /* ═══ Carte produit COMPACTE ═══════════════════════════════════════════════
       image · nom/réf · prix · qté · total sur ~3 rangées (vs 7). TVA & remise par
       ligne masquées (présentes dans les totaux ; B2B prix HT). Options produit
       (champs custom) repliées derrière un chevron « Détails » injecté par user.js. */

    /* TVA + remise par ligne : masquées */
    #ProOPC table.cart-summary .cart-p-list td.col-tax,
    #ProOPC table.cart-summary .cart-p-list td.col-discount {
        display: none !important;
    }
    /* Labels ::before des cellules produit : masqués (Réf réintroduit plus bas) */
    #ProOPC table.cart-summary .cart-p-list td::before {
        content: none !important;
    }

    /* Carte = grille compacte. position:relative ancre le 🗑 (absolu). */
    #ProOPC table.cart-summary tr.cart-p-list {
        display: grid !important;
        grid-template-columns: auto 1fr auto;   /* prix · (stepper centré) · total */
        grid-template-areas:
            "name  name  name"
            "sku   sku   sku"
            "price qty   total";
        column-gap: .6rem;
        row-gap: .3rem;
        align-items: center;
        padding: .75rem;
        position: relative !important;
    }

    /* Bloc image + nom (col-name) : image à gauche, nom + chevron empilés à droite.
       padding-right réserve la place du 🗑 absolu (2.25rem + .5rem offset) → le nom
       wrappe AVANT le bouton au lieu de passer dessous. */
    #ProOPC table.cart-summary .cart-p-list td.col-name {
        grid-area: name;
        width: auto;   /* annule le width:100% desktop → la grille gère la largeur */
        padding: 0 2.5rem 0 0 !important;
    }
    #ProOPC table.cart-summary .cart-p-list td.col-name .cart-product-description {
        display: grid;
        grid-template-columns: 3.25rem 1fr;
        column-gap: .6rem;
        row-gap: .15rem;
        align-items: start;
        margin: 0;
    }
    #ProOPC table.cart-summary .cart-p-list td.col-name .cart-images {
        grid-column: 1;
        grid-row: 1;
        width: 3.25rem;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        float: none;
    }
    #ProOPC table.cart-summary .cart-p-list td.col-name .cart-images img {
        width: 100%;
        height: auto;
        border-radius: var(--mgf-co-radius-sm);
        border: 1px solid var(--mgf-co-border-color);
    }
    #ProOPC table.cart-summary .cart-p-list td.col-name .cart-product-description > a {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-weight: 600;
        font-size: .9rem;
        line-height: 1.3;
        text-transform: none;
    }
    #ProOPC table.cart-summary .cart-p-list td.col-name .mgf-card-details {
        display: block;   /* annule le display:contents de base → vrai item de grille */
        grid-column: 2;
    }

    /* Réf (col-sku) : sous le nom, alignée past l'image, light */
    #ProOPC table.cart-summary .cart-p-list td.col-sku {
        grid-area: sku;
        padding: 0 0 0 calc(3.25rem + .6rem) !important;
        margin: 0;
    }
    #ProOPC table.cart-summary .cart-p-list td.col-sku::before {
        content: "Réf. " !important;
        position: static !important;   /* le plugin met le ::before en absolute (top/left/width)
                                          → on le remet en flux inline pour qu'il colle au SKU */
        top: auto !important;
        left: auto !important;
        width: auto !important;
        padding: 0 !important;
        color: var(--mgf-co-muted);
        font-size: .75rem;
    }
    #ProOPC table.cart-summary .cart-p-list td.col-sku .product-sku-text {
        font-size: .75rem;
        color: var(--mgf-co-muted);
        font-weight: 400;
        text-transform: none;
    }

    /* Prix unitaire (HT) — discret, à gauche */
    #ProOPC table.cart-summary .cart-p-list td.col-price {
        grid-area: price;
        padding: 0 !important;
        font-size: .85rem;
        color: var(--mgf-co-muted);
        text-align: left;
    }
    /* Quantité — stepper centré ; static pour que le 🗑 s'échappe vers le tr */
    #ProOPC table.cart-summary .cart-p-list td.col-qty {
        grid-area: qty;
        position: static;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
    }
    /* Total — gras, à droite */
    #ProOPC table.cart-summary .cart-p-list td.col-total {
        grid-area: total;
        padding: 0 !important;
        text-align: right;
        font-weight: 700;
        font-size: .95rem;
    }

    /* 🗑 → coin haut-droite de la carte */
    #ProOPC table.cart-summary tr.cart-p-list .remove_from_cart.proopc-task-deleteproduct {
        position: absolute !important;
        top: .5rem !important;
        right: .5rem !important;
        left: auto !important;
        margin: 0 !important;
        z-index: 2;
        width: 2.25rem;
        height: 2.25rem;
        min-height: 0;   /* neutralise le min-height:2.5rem global → carré net */
        padding: 0;
    }

    /* Chevron « Détails » (pill) réaffiché en mobile + panneau options replié par défaut */
    #ProOPC .cart-p-list .mgf-card-details-toggle {
        display: inline-flex;
    }
    #ProOPC .cart-p-list .mgf-card-details-panel {
        display: none;   /* annule le display:contents de base ; replié par défaut */
        padding-top: .35rem;
    }
    #ProOPC .cart-p-list.is-expanded .mgf-card-details-panel {
        display: block;
    }
    /* Options (mobile uniquement) : <br> du plugin masqués (redondants avec block)
       → fini le double espacement ; spans en block resserrés. */
    #ProOPC .cart-p-list .mgf-card-details-panel br {
        display: none;
    }
    #ProOPC .cart-p-list .mgf-card-details-panel .product-field-type-S {
        display: block;
        font-size: .8rem;
        line-height: 1.4;
        color: var(--mgf-co-muted);
    }
    #ProOPC .cart-p-list .mgf-card-details-panel .product-field-type-S + .product-field-type-S {
        margin-top: .15rem;
    }

    /* col-name (hors cart-p-list, ex. thead) : restaure le 45% — notre 0 l'écrasait */
    #ProOPC table.cart-summary :is(th, td).col-name {
        padding-left: 45%;
    }
    /* col-total : retire notre padding-right:0 — inutile en display:block */
    #ProOPC table.cart-summary :is(th, td).col-total {
        padding-right: 8px;
    }

    /* Lignes sous-total : retire fond teinté §11.14 (spéc.1,1,3) + restaure padding plugin */
    #ProOPC table.cart-summary tr.cart-sub-total td,
    #ProOPC table.cart-summary tr.shipping-row td,
    #ProOPC table.cart-summary tr.payment-row td,
    #ProOPC table.cart-summary tr.cart-coupon-row td,
    #ProOPC table.cart-summary tr.tax-per-bill td {
        background-color: transparent;
        padding: 8px 8px 8px 45%;
    }
    /* Étiquettes dans les lignes sous-total : pas de 45% (spéc.1,2,3 > tr.*-row td 1,1,3) */
    #ProOPC table.cart-summary tr.cart-sub-total td.sub-headings,
    #ProOPC table.cart-summary tr.cart-sub-total td.shipping-payment-heading,
    #ProOPC table.cart-summary tr.shipping-row td.sub-headings,
    #ProOPC table.cart-summary tr.shipping-row td.shipping-payment-heading,
    #ProOPC table.cart-summary tr.payment-row td.sub-headings,
    #ProOPC table.cart-summary tr.payment-row td.shipping-payment-heading,
    #ProOPC table.cart-summary tr.cart-coupon-row td.sub-headings,
    #ProOPC table.cart-summary tr.cart-coupon-row td.coupon-form-col,
    #ProOPC table.cart-summary tr.tax-per-bill td.sub-headings {
        padding-left: 8px;
    }

    /* grand-total : retire fond et filet ET RESTAURE le décalage 45% du card layout.
       Indispensable : §11.4 (hors media, spéc.1,2,3) impose padding:.85rem .5rem .25rem
       et bat le plugin (0,2,3) → sans cette règle, le label ::before (left:8px,width:45%)
       se superpose à la valeur. Ici même spéc.(1,2,3) mais source plus tardive → gagne. */
    /* Grand-total mis en boîte (carte distincte) — uniquement mobile, où le <tr>
       est display:block (en desktop il reste table-row → bordure non fiable).
       var projet plutôt que #ccc en dur (règle CSS vars de la template). */
    #ProOPC table.cart-summary tr.grand-total {
        border: 2px solid var(--mgf-co-border-color);
        border-radius: var(--mgf-co-radius-sm);
        padding: 2px 4px;
        margin-top: .6rem;
    }
    #ProOPC table.cart-summary tr.grand-total td {
        padding: 8px 8px 8px 45%;
        border-top: none;
        border-bottom: none;
        background-color: transparent;
    }
    /* sub-headings du grand-total : masqué en mobile — redondant avec le label
       ::before "Total TTC" de la ligne col-total. !important pour battre le
       display:block !important du plugin (card layout). */
    #ProOPC table.cart-summary tr.grand-total td.sub-headings {
        display: none !important;
    }

    /* ── Alignement label/montant sur le même axe vertical ──
       Le plugin pose le label en ::before { position:absolute; top:8px (15px pour
       grand-total) } pendant que le montant est dans le flux → jamais centrés.
       Solution : on passe chaque CELLULE de valeur en flex (PAS le <tr> → régression)
       et on repasse le ::before en position:static pour qu'il devienne un item flex,
       centré verticalement avec le montant. align-items:center fait le reste, même
       si le montant est plus grand (cf. grand-total agrandi). */
    #ProOPC table.cart-summary
        :is(tr.cart-sub-total, tr.shipping-row, tr.payment-row, tr.cart-coupon-row, tr.tax-per-bill, tr.grand-total)
        :is(td.col-tax, td.col-discount, td.col-total) {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 6px 8px !important;   /* annule le décalage 45% du card layout */
    }
    #ProOPC table.cart-summary
        :is(tr.cart-sub-total, tr.shipping-row, tr.payment-row, tr.cart-coupon-row, tr.tax-per-bill, tr.grand-total)
        :is(td.col-tax, td.col-discount, td.col-total)::before {
        position: static !important;
        top: auto;
        left: auto;
        width: auto !important;
        padding-right: 0;
        white-space: nowrap;
    }

    /* Cellules vides (col-*.cell-empty) : le plugin les masque (display:none),
       mais nos règles flex ci-dessus (spéc. ID 1,3,3) les réaffichaient → label
       "TVA 20%"/"Total" sans montant (ex. ligne mode de paiement). On re-masque :
       même spécificité (1,3,3) mais source plus tardive → l'emporte. */
    #ProOPC table.cart-summary tr td.col-tax.cell-empty,
    #ProOPC table.cart-summary tr td.col-discount.cell-empty,
    #ProOPC table.cart-summary tr td.col-total.cell-empty {
        display: none !important;
    }

    /* Montant total agrandi : il doit dominer visuellement le récap mobile.
       Le label (::before) reste à taille normale → contraste de hiérarchie net. */
    #ProOPC table.cart-summary tr.grand-total td.col-total {
        font-size: .9375rem;   /* base du label "Total TTC" */
    }
    #ProOPC table.cart-summary tr.grand-total .PricebillTotal,
    #ProOPC table.cart-summary tr.grand-total .col-total .PricesalesPrice {
        font-size: 1.125rem;   /* 18px — montant total dominant mais sobre */
        line-height: 1.2;
    }
    /* col-tax (TVA) + col-discount (remise) : discrets, taille de base */
    #ProOPC table.cart-summary tr.grand-total td.col-tax,
    #ProOPC table.cart-summary tr.grand-total td.col-discount {
        font-size: .875rem;
    }

    /* #9 mobile — CP + Ville empilés : 22%/78% desktop → 100% chacun en colonne.
       Le plugin flotte ces groupes (float:left) — on annule float et gouttière. */
    #ProOPC .group-enabled .zip-group,
    #ProOPC .group-enabled .shipto_zip-group,
    #ProOPC .group-enabled .city-group,
    #ProOPC .group-enabled .shipto_city-group {
        width: 100%;
        float: none;
    }
    #ProOPC .group-enabled .zip-group .inner,
    #ProOPC .group-enabled .shipto_zip-group .inner {
        padding-right: 0;
    }
    #ProOPC .group-enabled .city-group .inner,
    #ProOPC .group-enabled .shipto_city-group .inner {
        padding-left: 0;
    }
}

/* ═══════════════════════════════════════════════════
   12. PAGE DE COMPARAISON (com_vmessentials)
   ═══════════════════════════════════════════════════ */

/* Zone image uniforme — homothétie garantie.
   Le CSS du composant (.vme-image : max-width:100% + max-height:250px + min-width:90px)
   affiche chaque visuel à la taille de son fichier source → tailles hétérogènes
   d'une colonne à l'autre, et le min-width:90px peut déformer les petites images.
   Ici : cadre de hauteur fixe identique pour toutes les colonnes, visuel mis à
   l'échelle proportionnellement dedans (object-fit:contain, centré par défaut). */
.vme-table tr.vmevar_image .vme-image {
    display: block;
    width: 100%;
    height: 200px;
    max-height: none;
    min-width: 0;
    object-fit: contain;
}
@media (max-width: 767px) {
    .vme-table tr.vmevar_image .vme-image {
        height: 140px;
    }
}

/* ═══════════════════════════════════════════════════
   13. MODULE VP PRIME PRODUCT LIST (mod_vpprime_product_list)
   ═══════════════════════════════════════════════════ */

/* Le cadre image a une bordure mais pas de coins arrondis dans la template parente.
   overflow:hidden clippe la vignette aux coins arrondis du conteneur. */
.vppl-image-cont {
    border-radius: 0.5rem;
    overflow: hidden;
}
.vppl-image-cont img {
    border-radius: 0.5rem;
}

/* ═══════════════════════════════════════════════════
   14. MODALE « ENREGISTRER LE PANIER » (com_vpacr)
   ═══════════════════════════════════════════════════ */

/* Composant tiers VP Abandoned Cart Recovery : modale pilotée par variables CSS.
   Alignement charte MGF (vert) — le composant sort en bleu Bootstrap (#007bff)
   qui jure avec le reste du site et avec la modale "Produit ajouté" (cf. §5).
   Aucune modif du core : on ne fait que redéfinir des variables/propriétés. */

/* Focus du champ e-mail + radius : variables réellement consommées par le composant */
.vpacr-modal {
    --vpacr-input-focus-border-color: var(--template-primary-color, #8fc400);
    --vpacr-input-focus-box-shadow: 0 0 0 0.2rem rgba(143, 196, 0, 0.25);
    --vpacr-success-content-color: var(--template-primary-color, #8fc400);
    --vpacr-border-radius: 1rem; /* cohérent avec .modal-content du site (§5) */
}

/* Bouton "Confirmer" : .vpacr-btn-primary hardcode les --btn-* en bleu →
   on surcharge ces vars internes (specificité 0,2,0, pas de !important). */
.vpacr-modal .vpacr-btn-primary {
    --btn-color: #fff;
    --btn-bg: var(--template-primary-color, #8fc400);
    --btn-border-color: var(--template-primary-color, #8fc400);
    --btn-hover-color: #fff;
    --btn-hover-bg: #7aa800;
    --btn-box-shadow: 0 0 0 0.2rem rgba(143, 196, 0, 0.4);
    --btn-focus-box-shadow: 0 0 0 0.2rem rgba(143, 196, 0, 0.4);
}