/* Source unique du CSS maison (front et backoffice), voir docs/front-assets.md.
   Audit D01 (4 sept. 2026) : les !important restants l'emportent sur des !important
   du thème Molla ou d'utilitaires Bootstrap (px-*, pb-*, mr-lg-*, d-*), ou sur les
   styles en ligne des vues ; ils ont été vérifiés un à un par comparaison de styles
   calculés. Ne pas en ajouter sans la même vérification. */

/* ==========================================================================
   Palette Adhimi : SOURCE UNIQUE des couleurs de marque (front)
   ==========================================================================
   Les deux teintes du logo (public/assets/images/logo.png : orange #f49719,
   violet #652c90) et des neutres. Aucune autre couleur de marque n'existe :
   toute règle du front passe par var(--adh-…), jamais par une valeur écrite
   en dur. tests/Unit/BrandPaletteTest.php échoue sinon, et vérifie aussi que
   le thème Molla ne réintroduit pas son or (#c96, #cc9966) ni son jaune
   (#fcb941) : ils ont été remplacés dans ses feuilles (docs/front-assets.md).
   - L'orange du logo ne fait que 2,3:1 sur blanc : il habille les aplats
     (boutons, badges, pastilles), les icônes décoratives, les étoiles, les
     bordures et fonds d'état, jamais un texte sur fond clair. Tout texte
     posé sur l'orange est en encre (7,9:1).
   - Le texte coloré (liens, .text-primary) prend le violet du logo (9,1:1).
   - Les prix et totaux sont en encre.
   Ratios WCAG 2 calculés sur blanc (AA = 4,5:1). */
:root {
    --adh-orange: #f49719;                      /* logo : aplats, icônes, bordures d'état */
    --adh-orange-rgb: 244, 151, 25;             /* pour rgba(var(--adh-orange-rgb), .x) : halos, ombres */
    --adh-orange-soft: rgba(244, 151, 25, .14); /* fond d'état translucide (survol, sélection) */
    --adh-orange-tint: #fdf0df;                 /* le même, opaque : badges posés sur une photo */
    --adh-orange-light: #fcd9a8;                /* icône orangée sur fond sombre (bandeau hors ligne) */
    --adh-purple: #652c90;                      /* logo : texte coloré, liens, survols, focus : 9,1:1 */
    --adh-ink: #14181f;                         /* texte, prix, texte sur l'orange : 7,9:1 */
    --adh-muted: #5b6678;                       /* textes secondaires : 5,8:1 */
    --adh-muted-2: #64748b;                     /* placeholders, icônes : 4,8:1 */
    --adh-danger-text: #be123c;                 /* erreurs, suppression : 6,3:1 */
    --adh-danger-text-rgb: 190, 18, 60;         /* halos des champs en erreur */
    --adh-danger-fill: #dc2626;                 /* badges remise et panier, texte blanc dessus : 4,8:1 */
    --adh-danger-fill-rgb: 220, 38, 38;
    --adh-success: #15803d;                     /* statut positif (en stock, neuf, confirmation) : 5,0:1 */
    --adh-success-rgb: 21, 128, 61;
    --adh-success-bg: #ecfdf5;                  /* fond des messages et badges positifs (4,8:1 avec le texte) */
    --adh-success-border: #a7f3d0;

    /* Icônes d'état sur fond sombre (toasts). */
    --adh-success-on-dark: #4ade80;
    --adh-info-on-dark: #93c5fd;
    --adh-danger-on-dark: #f87171;

    /* Marques tierces, reprises telles quelles pour être reconnues. */
    --adh-whatsapp: #25d366;                    /* bordure du bouton de partage */
    --adh-whatsapp-dark: #128c4a;               /* icône WhatsApp sur blanc : 4,3:1 (icône, seuil 3:1) */
    --adh-ios-blue: #0a66d8;                    /* icône « Partager » d'iOS (guide d'installation) */
}


#instruction-area {
    height : 75px;
    max-height: 430px;
}

#instruction-field {
    height: 45px;
    max-height: 400px;
    overflow: hidden;
}

.pre {
    display: block;
    font-weight: bold;
    white-space:pre-wrap;
    margin: 1em 0;
}

.table td {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ==========================================================================
   Header & Navigation Menu Custom Styles
   ========================================================================== */

/* La nav desktop porte d-none d-lg-block : le display:flex !important ne doit
   s'appliquer qu'à partir du seuil lg (992px — audit F07 : interface desktop
   dès la tablette en paysage), sinon il écrase d-none et le menu desktop
   déborde de l'écran sur mobile. */
@media (min-width: 992px) {
    .main-nav {
        display: flex !important;
        align-items: center;
    }
}

.main-nav .menu,
.main-nav .menu ul,
.main-nav .menu li {
    list-style: none;
    list-style-type: none;
}

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

.main-nav .menu > li {
    position: relative;
    margin-right: 12px;
}

.main-nav .menu > li > a {
    display: inline-flex !important;
    align-items: center;
    padding: 8px 12px !important;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.main-nav .menu > li > a:hover {
    color: var(--adh-ink) !important;
    background-color: var(--adh-orange-soft);
}

/* Dropdown menus (Categories & subcategories) */
.main-nav .menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 240px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #ebebeb;
    padding: 6px 0;
    margin: 0;
}

.main-nav .menu li:hover > ul {
    display: block;
}

.main-nav .menu ul li {
    position: relative;
    margin: 0;
    padding: 0;
}

.main-nav .menu ul li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #444444;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.main-nav .menu ul li > a:hover {
    background-color: var(--adh-orange-soft);
    color: var(--adh-ink);
    padding-left: 19px;
}

/* Nested submenus (categories within groups) */
.main-nav .menu ul li ul {
    top: 0;
    left: 100%;
    margin-left: 2px;
    border-radius: 8px;
}

/* Arrow indicator on items with submenus */
.main-nav .menu .sf-with-ul::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    margin-left: 6px;
    font-size: 11px;
}

.main-nav .menu ul .sf-with-ul::after,
.main-nav .menu ul li:has(ul) > a::after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    margin-left: auto;
    padding-left: 10px;
    font-size: 11px;
    color: #999;
}

/* Header search bar pill styling */
.header-search .header-search-wrapper {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.header-search .header-search-wrapper input {
    background: transparent;
    border: none !important;
    outline: none;
    box-shadow: none;
    font-size: 13.5px;
    padding-left: 12px;
}

/* ==========================================================================
   Product Cards & Product Image Display Styles
   ========================================================================== */

.product-touch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.product-touch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

/* Product Media & Image Container */
.card-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f1f5f9;
}

.card-media-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform 0.35s ease;
}

.product-touch-card:hover .product-image {
    transform: scale(1.05);
}

/* Badges */
.badge-condition {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 6px;
    pointer-events: none;
}

.badge-new {
    background-color: var(--adh-success-bg);
    color: var(--adh-success);
    border: 1px solid var(--adh-success-border);
}

.badge-used {
    background-color: var(--adh-orange-tint);
    color: var(--adh-ink);
    border: 1px solid var(--adh-orange);
}

.badge-discount {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--adh-danger-fill);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(var(--adh-danger-fill-rgb), 0.35);
    pointer-events: none;
}

/* Card Body Content */
.card-body-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 12px 14px 14px;
}

.product-category-link {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #5b6678;
    text-decoration: none;
    margin-bottom: 4px;
    transition: color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.product-category-link:hover {
    color: var(--adh-purple);
}

.product-name-heading {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 38px;
}

.product-name-heading a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.15s ease;
}

.product-name-heading a:hover {
    color: var(--adh-purple);
}

/* Price Row */
.price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 12px;
}

.current-price {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--adh-ink);
}

.old-price {
    font-size: 12px;
    color: #64748b;
    text-decoration: line-through;
}

/* 1-Tap Cart Button */
.touch-btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.touch-btn-cart:hover {
    background-color: var(--adh-orange);
    color: #14181f;
    border-color: var(--adh-orange);
    box-shadow: 0 4px 12px rgba(var(--adh-orange-rgb), 0.25);
}

.touch-btn-cart:active {
    transform: scale(0.97);
}

/* Product Detail Page Image Styling */
.product-gallery .product-main-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 440px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.product-gallery .product-main-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* ==========================================================================
   Header & Mobile Top Navigation Styles
   ========================================================================== */

/* Bande du menu principal : hauteur réduite
   (les marges verticales par défaut du logo, 2.55rem/2.95rem, gonflent
   la bande sur toutes les tailles d'écran)
   Ce sont ces marges qui fixent la hauteur de la bande : le logo est
   l'élément le plus haut de la rangée, devant la barre de recherche (50px)
   et les icônes de droite. 22px -> 16px allège la bande d'environ 12 %
   sur toutes les tailles d'écran, sans rien rogner sur son contenu. */
.header .logo {
    margin-top: 16px;
    margin-bottom: 16px;
}

.header-brand-logo {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

/* Icones de droite (compte, panier) : allegees et resserrees.
   Le theme les affiche en 30px (32px pour le panier) avec 24px d'ecart entre
   chaque bloc ; l'ecart pesait plus lourd que les icones elles-memes dans la
   largeur du groupe. Limite a partir de 992px (interface desktop, audit F07) :
   c'est la seule plage ou ils sont affiches cote a cote, et l'en-tete compact
   mobile/tablette garde ainsi ses cibles tactiles au format actuel. */
@media screen and (min-width: 992px) {
    /* demo-13.css pose l'ecart via .header.header-10.header-intro-clearance
       .compare-dropdown, soit quatre classes : il faut au moins autant de
       specificite pour le reprendre, d'ou le .header-10 ajoute ici. */
    header.header.header-10 .header-dropdown-link .dropdown {
        padding-left: 16px;
    }

    header.header .header-dropdown-link .dropdown-toggle i {
        font-size: 22px;
    }

    header.header .header-dropdown-link .cart-dropdown .dropdown-toggle i {
        font-size: 23px;
    }
}

/* Icônes de droite sous 992 px (langue, panier) : le thème les affiche en 30 et
   32 px, empile « FR » sous le globe (qui déborde alors de sa zone) et centre le
   panier : les deux icônes ne sont ni à la même taille ni à la même hauteur.
   Ici, même gabarit pour tout le groupe : zones tactiles de 40 px centrées,
   icônes de 20 px alignées sur le burger, code langue posé à côté du globe et
   pastille du panier ancrée sur l'icône. Les sélecteurs reprennent la
   spécificité de demo-13.css (.header.header-10.header-intro-clearance…). */
@media (max-width: 991.98px) {
    header.header.header-10 .header-dropdown-link {
        gap: 4px;
    }

    body.has-bottom-nav header.header.header-10.header-intro-clearance .header-dropdown-link .dropdown {
        padding-left: 0;
        align-self: center;
    }

    body.has-bottom-nav header.header.header-10.header-intro-clearance .header-dropdown-link .dropdown > .dropdown-toggle {
        position: relative;
        flex-direction: row;
        gap: 4px;
        min-width: 40px;
        min-height: 40px;
        padding: 0 8px;
        border-radius: 8px;
        color: var(--adh-ink);
        font-size: 20px;
        line-height: 1;
    }

    body.has-bottom-nav header.header.header-10.header-intro-clearance .header-dropdown-link .dropdown > .dropdown-toggle i {
        margin: 0;
        font-size: 20px;
        line-height: 1;
    }

    body.has-bottom-nav header.header.header-10.header-intro-clearance .header-dropdown-link .compare-txt {
        margin: 0;
        color: var(--adh-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1;
    }

    body.has-bottom-nav header.header.header-10.header-intro-clearance .cart-dropdown .cart-count {
        top: 2px;
        right: 0;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: 12px;  /* plancher de 12 px (bilan de clôture, sept. 2026) */
        line-height: 18px;
    }
}

.mobile-menu-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: #1e293b;
    font-size: 19px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mobile-menu-toggler:hover,
.mobile-menu-toggler:active {
    background-color: #f1f5f9;
    color: var(--adh-ink);
}

/* Mobile Search Pill in Dedicated Header Row */
.mobile-search-row {
    border-bottom: 1px solid #edf2f7;
    /* Bande du menu principal : hauteur réduite de 10 % (pb-2 du thème = 2rem) */
    padding-bottom: 14px !important;
}

.mobile-search-pill {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 3px 12px;
    transition: all 0.2s ease;
}

.mobile-search-pill:focus-within {
    background: #ffffff;
    border-color: var(--adh-orange);
    box-shadow: 0 0 0 3px rgba(var(--adh-orange-rgb), .25);
}

.mobile-search-icon {
    color: #64748b;
    font-size: 13.5px;
    margin-right: 6px;
    flex-shrink: 0;
}

.mobile-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13.5px;
    color: #1e293b;
    /* Bande du menu principal : hauteur réduite de 10 % (6px -> 5px) */
    padding: 5px 0;
    width: 100%;
}

.mobile-search-input::placeholder {
    color: #64748b;
    font-size: 13px;
}

.mobile-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -12px;
    font-size: 16px;
    color: #64748b;
    text-decoration: none;
}

/* ==========================================================================
   Modern Mobile & Tablet Drawer Menu (x-mobile-menu)
   ========================================================================== */

.mobile-menu-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mmenu-active .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-container.modern-mobile-menu {
    position: fixed;
    top: 0;
    left: -320px;
    bottom: 0;
    width: 310px;
    max-width: 85vw;
    background: #ffffff;
    z-index: 9999;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    visibility: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.mmenu-active .mobile-menu-container.modern-mobile-menu {
    visibility: visible;
    transform: translateX(320px);
}

/* Drawer Header with Gradient */
.drawer-header {
    position: relative;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    padding: 22px 18px;
    flex-shrink: 0;
}

.drawer-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drawer-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.drawer-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--adh-orange);
    color: var(--adh-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.drawer-user-text h4 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.3;
}

.drawer-user-text p {
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
}

/* Drawer List Content */
.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-list-item {
    border-bottom: 1px solid #f1f5f9;
}

.drawer-list-item > a,
.drawer-list-item > button.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    color: #1e293b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.drawer-list-item > a:hover,
.drawer-list-item > button.accordion-trigger:hover,
.drawer-list-item > a:active,
.drawer-list-item > button.accordion-trigger:active {
    background: var(--adh-orange-soft);
    color: var(--adh-ink);
}

.drawer-list-item .item-icon {
    width: 22px;
    margin-right: 8px;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.drawer-list-item .fa-chevron-down {
    transition: transform 0.25s ease;
}

.drawer-list-item .accordion-trigger[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.drawer-sublist {
    list-style: none;
    padding: 4px 0 8px 40px;
    margin: 0;
    background: #f8fafc;
}

.drawer-sublist li a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s ease;
}

.drawer-sublist li a:hover {
    color: var(--adh-purple);
    padding-left: 16px;
}

/* Drawer Footer */
.drawer-footer {
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #edf2f7;
    flex-shrink: 0;
}

.btn-logout {
    width: 100%;
    border-radius: 8px;
    padding: 9px;
    font-weight: 600;
    font-size: 13px;
}

/* ==========================================================================
   Mobile & Tablet Bottom Navigation Bar (x-bottom-nav)
   ========================================================================== */

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: #ffffff;
    border-top: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1030;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.05);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Cinq colonnes strictement égales (flex 1 1 0) ; min-width: 0 empêche un
   libellé long (« Boutiques ») d'élargir sa colonne. */
.mobile-bottom-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    height: 100%;
    margin: 0;
    padding: 5px 3px;
}

/* Remise à zéro complète : le bouton « Rayons » héritait du thème une marge
   de 10px à gauche et à droite qui le décalait par rapport aux liens. */
.nav-link-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
    position: relative;
    cursor: pointer;
}

.nav-link-bottom:hover,
.nav-link-bottom:focus {
    color: var(--adh-ink);
    text-decoration: none;
}

.nav-link-bottom:focus-visible {
    outline: 2px solid var(--adh-ink);
    outline-offset: 1px;
}

/* Onglet actif : toute la tuile (icône + libellé) prend l'orange du logo,
   texte et icône en encre foncée (7,9:1). */
.nav-link-bottom.active,
.nav-link-bottom.active:hover,
.nav-link-bottom.active:focus {
    background-color: var(--adh-orange);
    color: var(--adh-ink);
    font-weight: 700;
}

.nav-link-bottom .nav-label {
    display: block;
    max-width: 100%;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-icon-wrapper {
    position: relative;
    height: 22px;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Largeur d'icône fixe : les glyphes FontAwesome n'ont pas tous la même
   largeur, ce qui décentrait visuellement certains onglets. */
.nav-icon-wrapper > i {
    width: 1.25em;
    text-align: center;
}

/* Bulle du panier calée sur le coin supérieur droit de l'icône. */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    background-color: var(--adh-danger-fill);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9999px;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
}

/* Add body padding so bottom bar never obscures content (incl. iOS safe area) */
body.has-bottom-nav {
    padding-bottom: calc(var(--mobile-nav-height, 58px) + var(--mobile-safe-bottom, 0px) + 8px);
}

@media (max-width: 991.98px) {
    body.has-sticky-buy-bar {
        padding-bottom: calc(var(--mobile-nav-height, 58px) + var(--mobile-safe-bottom, 0px) + 80px);
    }
}

@media (min-width: 992px) {
    body.has-bottom-nav,
    body.has-sticky-buy-bar {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   Mobile & Tablet Grid & Component Responsive Refinements
   ========================================================================== */

@media (max-width: 575.98px) {
    .header-brand-logo {
        max-height: 34px;
    }
    
    .card-body-content {
        padding: 8px 10px 10px;
    }
    
    .product-name-heading {
        font-size: 13px;
        height: 36px;
        margin-bottom: 6px;
    }
    
    .current-price {
        font-size: 14px;
    }
    
    .touch-btn-cart {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .cat-block {
        min-height: 120px;
        padding-bottom: 0.8rem;
        margin-bottom: 1.2rem;
    }
    
    .cat-block figure {
        min-height: 80px;
    }
    
    .cat-block-title {
        font-size: 12px;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .header-brand-logo {
        max-height: 38px;
    }
    
    .product-name-heading {
        font-size: 13px;
        height: 36px;
    }
}

/* ==========================================================================
   ADHIMI - Design tokens (compact header range)
   Bottom nav = 58px (70px entre 768 et 991px : barre flottante de 58px posée
   12px au-dessus du bord), en-tête compact <= 144px sous 992px (bande +
   rangée de recherche mobile : 140px sous 576px, 144px jusqu'à 991px ;
   au-delà, interface desktop — audit F07). app.js publie la hauteur réelle
   dans --header-height / --mobile-header-height ; la valeur ci-dessous n'est
   qu'un repli avant le premier calcul.
   Previously only present in custom/css/mobile.css, which was never served.
   ========================================================================== */

:root {
    --mobile-nav-height: 58px;
    --mobile-header-height: 144px;
    --mobile-bg-glass: rgba(255, 255, 255, 0.94);
    --mobile-border-light: rgba(0, 0, 0, 0.08);
    --mobile-touch-target: 48px;
    --mobile-radius: 14px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-top: env(safe-area-inset-top, 0px);
}

/* ==========================================================================
   Global touch & viewport ergonomics (compact header range < 992px)
   ========================================================================== */

@media (max-width: 991.98px) {
    html, body {
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent iOS Safari automatic zoom on input focus */
    input, select, textarea, .form-control {
        font-size: 16px !important;
    }

    /* Smooth touch scrolling */
    .overflow-auto, .table-responsive, .mobile-menu-wrapper, .dropdown-menu {
        -webkit-overflow-scrolling: touch;
    }

    /* Fast tap response */
    a, button, input, select, .nav-link, .btn {
        touch-action: manipulation;
    }

    /* Keep the scroll-to-top button above the bottom navigation */
    #scroll-top {
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px);
        right: 16px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1030;
    }
}

/* ==========================================================================
   Sticky buy bar (fiche produit, < 992px — aligné sur d-lg-none dans la vue)
   ========================================================================== */

.product-sticky-buy-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .product-sticky-buy-bar {
        display: flex;
        position: fixed;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        z-index: 1040;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        animation: stickyBarUp 0.3s ease;
    }

    @keyframes stickyBarUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .product-sticky-buy-bar .sticky-price-block {
        display: flex;
        flex-direction: column;
    }

    .product-sticky-buy-bar .sticky-price-label {
        font-size: 12px;
        text-transform: uppercase;
        color: #5b6678;
        font-weight: 600;
    }

    .product-sticky-buy-bar .sticky-price-val {
        font-size: 17px;
        font-weight: 800;
        color: var(--adh-ink);
        line-height: 1.1;
    }

    .product-sticky-buy-bar .sticky-actions-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .product-sticky-buy-bar .btn-sticky-cart {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        transition: all 0.2s;
    }

    .product-sticky-buy-bar .btn-sticky-buy {
        min-height: 44px;
        padding: 10px 20px;
        border-radius: 10px;
        background: var(--adh-orange);
        color: var(--adh-ink);
        font-size: 14px;
        font-weight: 700;
        border: none;
        box-shadow: 0 4px 12px rgba(var(--adh-orange-rgb), 0.35);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .product-sticky-buy-bar .btn-sticky-buy:active {
        transform: scale(0.96);
    }
}

/* ==========================================================================
   Catalogue & boutique mobile toolbox (< 992px, aligné sur d-lg-none dans la vue)
   ========================================================================== */

.shop-mobile-toolbox {
    display: none;
}

@media (max-width: 991.98px) {
    .shop-mobile-toolbox {
        display: flex;
        gap: 10px;
        margin-bottom: 16px;
        position: sticky;
        top: var(--mobile-header-height);
        background: #ffffff;
        padding: 10px 0;
        z-index: 1020;
    }

    .shop-mobile-toolbox .btn-toolbox {
        flex: 1;
        padding: 10px 14px;
        border-radius: 10px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        font-size: 13px;
        font-weight: 600;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .shop-mobile-toolbox .btn-toolbox:active {
        background: #e9ecef;
    }
}

/* ==========================================================================
   Touch chips & quantity stepper
   ========================================================================== */

.touch-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}

.touch-chip-btn {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1.5px solid #e0e0e0;
    background: #ffffff;
    color: #444444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.touch-chip-btn.active, .touch-chip-btn:active {
    border-color: var(--adh-orange);
    background: var(--adh-orange-soft);
    color: var(--adh-ink);
}

.touch-stepper-wrapper {
    display: inline-flex;
    align-items: center;
    background: #f4f5f7;
    border-radius: 24px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    padding: 2px;
}

.touch-stepper-btn {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #ffffff;
    border: none;
    color: #222222;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s, transform 0.1s;
}

.touch-stepper-btn:active {
    transform: scale(0.9);
    background-color: #f0f0f0;
}

/* Bornes atteintes (1 et 50) : le script de la fiche produit desactive le
   bouton, l'etat doit se voir. */
.touch-stepper-btn:disabled {
    color: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
}

.touch-stepper-btn:disabled:active {
    transform: none;
    background-color: #ffffff;
}

.touch-stepper-input {
    width: 44px;
    min-height: 44px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 15px;
    color: #222222;
}

/* ==========================================================================
   Bottom sheet modal (achat express & filtres)
   ========================================================================== */

.modal.bottom-sheet-modal .modal-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100vw;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal.bottom-sheet-modal.show .modal-dialog {
    transform: translateY(0);
}

.modal.bottom-sheet-modal .modal-content {
    border-radius: 24px 24px 0 0;
    border: none;
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: calc(var(--mobile-safe-bottom) + 16px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}

.bottom-sheet-drag-handle {
    width: 40px;
    height: 5px;
    background: #dddddd;
    border-radius: 3px;
    margin: 10px auto 4px;
}

/* ==========================================================================
   Cart item touch cards
   ========================================================================== */

.cart-item-touch-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 14px;
    margin-bottom: 14px;
    display: flex;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    position: relative;
}

.cart-item-touch-card .item-thumb {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
    background: #f8f9fa;
    flex-shrink: 0;
}

.cart-item-touch-card .item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cart-item-touch-card .item-title {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 4px;
    line-height: 1.3;
}

.cart-item-touch-card .item-unit-price {
    font-size: 12px;
    color: #5b6678;
    margin-bottom: 8px;
}

.cart-item-touch-card .item-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.cart-item-touch-card .item-total-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--adh-ink);
}

.cart-item-touch-card .btn-remove-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -12px 0 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--adh-danger-text);
    font-size: 16px;
    cursor: pointer;
}

/* ==========================================================================
   Checkout stepper & order summary
   ========================================================================== */

.checkout-step-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.checkout-step-card .step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.checkout-step-card .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--adh-orange);
    color: var(--adh-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.checkout-step-card .step-title {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    margin: 0;
}

.order-collapsible-summary {
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    padding: 14px 16px;
    margin-bottom: 20px;
}

/* ==========================================================================
   Customer order cards
   ========================================================================== */

.order-touch-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease;
}

.order-touch-card .order-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}

.order-touch-card .order-id-badge {
    font-weight: 700;
    color: #222222;
    font-size: 15px;
}

.order-touch-card .order-date-text {
    font-size: 12px;
    color: #5b6678;
}

.order-touch-card .order-details-grid {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.order-touch-card .order-total-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--adh-ink);
}

/* ==========================================================================
   BACKOFFICE responsive (styles served for the first time)
   Source: custom/css/main.css (root) — was never synced to public/custom.
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Listes du backoffice en cartes (audit B01) : seuls les tableaux marqués
       .table-cards par custom/js/main.js (en-tête d'au moins trois colonnes)
       sont transformés. Chaque cellule affiche le libellé de sa colonne
       (data-label, copié depuis l'en-tête), les colonnes secondaires
       (th[data-priority="low"]) sont masquées et se retrouvent dans la fiche,
       les tableaux clé/valeur restent des tableaux défilants. */
    .table-responsive.is-cards {
        border: none;
        overflow-x: visible;
    }

    table.table-cards {
        display: block;
        width: 100%;
        border: none !important;
    }

    table.table-cards thead {
        display: none;
    }

    table.table-cards tbody {
        display: block;
        width: 100%;
    }

    table.table-cards tbody tr {
        display: block;
        position: relative;
        margin-bottom: 14px;
        padding: 12px 14px;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px;
        background: #283046;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    body:not(.dark-layout) table.table-cards tbody tr {
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    table.table-cards tbody tr td {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 8px 0;
        font-size: 13px;
        text-align: right;
        white-space: normal;
    }

    body:not(.dark-layout) table.table-cards tbody tr td {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    table.table-cards tbody tr td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        margin-right: auto;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: left;
        color: #6e6b7b;
    }

    body.dark-layout table.table-cards tbody tr td::before {
        color: #b4b7bd;
    }

    table.table-cards tbody tr td:not([data-label])::before {
        content: none;
    }

    table.table-cards tbody tr td:last-child {
        border-bottom: none;
    }

    /* Colonnes secondaires : détail dans la fiche. */
    table.table-cards tbody tr td.cell-secondary {
        display: none;
    }

    /* Ligne « aucun enregistrement » (une cellule fusionnée). */
    table.table-cards tbody tr td[colspan] {
        display: block;
        text-align: center;
    }

    table.table-cards tbody tr td[colspan]::before {
        content: none;
    }

    /* Cellule des actions : menu à droite, cible de 44 px. */
    table.table-cards tbody tr td.cell-actions .dropdown {
        text-align: right;
    }

    table.table-cards tbody tr td .dropdown-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    table.table-cards tbody tr td > .d-flex {
        justify-content: flex-end;
    }
}

@media (max-width: 991.98px) {
    .form-sticky-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #283046;
        padding: 12px 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
        z-index: 1030;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    body:not(.dark-layout) .form-sticky-actions {
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    .form-sticky-actions .btn {
        flex: 1;
        padding: 12px 16px;
        font-weight: 600;
        border-radius: 8px;
    }

    .has-sticky-form {
        padding-bottom: 74px;
    }

    .header-navbar .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        margin-right: 6px;
        padding: 0;
    }

    .header-navbar .menu-toggle i {
        font-size: 22px;
    }

    .app-content input,
    .app-content select,
    .app-content textarea,
    .app-content .form-control,
    .select2-container .select2-selection--single {
        font-size: 16px;
    }

    .app-content .card-body {
        padding: 1.25rem 1rem;
    }

    .header-navbar .breadcrumb-wrapper {
        display: none;
    }
}

/* ==========================================================================
   Desktop header guard (992–1339px): one row, no horizontal overflow
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1339.98px) {
    header.header .logo {
        margin-right: 12px !important;
    }

    header.header .logo img {
        max-height: 32px;
    }

    /* The logo + desktop-nav cluster must keep its full content width;
       the search column absorbs the remaining space instead. */
    header.header .header-middle .container-fluid > .d-flex > .d-flex:first-child {
        flex-shrink: 0;
    }

    header.header .header-middle .container-fluid > .d-flex > .d-flex:nth-child(2) {
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .main-nav .menu > li {
        margin-right: 6px;
    }

    .main-nav .menu > li > a {
        padding: 8px 5px !important;
        font-size: 12.5px;
        letter-spacing: 0;
    }

    .compare-dropdown .compare-txt,
    .cart-dropdown .cart-txt {
        display: none !important;
    }

    header.header .header-search.header-search-visible {
        max-width: 400px !important;
        min-width: 0;
    }

    .header-search .header-search-wrapper {
        max-width: 100%;
    }

    .header-search-wrapper input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
}

/* Débordement horizontal (carrousels, slides du héros) : coupé sur html
   uniquement. Un overflow-x:hidden posé sur <body> fait de body un conteneur
   de défilement et neutralise tous les position:sticky de la page (en-tête,
   barre Filtres/Trier, récapitulatifs) — c'était le cas jusqu'en sept. 2026.
   overflow:clip ne crée pas de conteneur de défilement : on l'applique aussi
   à body quand il est supporté (iOS Safari ignore parfois overflow-x:hidden
   posé sur html seul). */
html {
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    html, body {
        overflow-x: clip;
    }
}

/* ==========================================================================
   Fiche produit : restauration de la grille Bootstrap (.product-details-top)
   Le thème Porto (style.css, démo 13) transforme .product-details-top > div
   en grille CSS à partir de 992px et applique un padding de 4rem à ses
   enfants. Ici l'enfant direct est un .row Bootstrap : on rétablit le
   comportement flex + gouttières standard, sinon les deux colonnes sont
   écrasées et les boutons se chevauchent.
   ========================================================================== */

.product-details-top > .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    margin-right: -15px;
    margin-left: -15px;
    /* grid-column-gap de Porto (36px) devient column-gap sur le conteneur
       flex et repousse les colonnes à la ligne : on l'annule. */
    column-gap: 0;
    row-gap: 0;
}

.product-details-top > .row > div {
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 0;
}

/* ==========================================================================
   Utilitaires absents du site : le frontoffice tourne sous Bootstrap 4.3.1
   (décision D01 : le thème Molla et ses plugins jQuery en dépendent, pas de
   migration vers Bootstrap 5). Les classes 4.6+/5.x employées par les vues
   (gap-*, g-*, row-cols-*, text-decoration-line-through) sont définies ici ;
   toute nouvelle classe 5.x doit être ajoutée à ce bloc avant usage.
   ========================================================================== */

.text-decoration-line-through {
    text-decoration: line-through !important;
}

.d-flex.gap-2 {
    gap: .5rem;
}

.d-flex.gap-3 {
    gap: 1rem;
}

.row.g-2 {
    margin-right: -.5rem;
    margin-left: -.5rem;
}

.row.g-2 > * {
    padding-right: .5rem;
    padding-left: .5rem;
}

.row.g-3 {
    margin-right: -1rem;
    margin-left: -1rem;
}

.row.g-3 > * {
    padding-right: 1rem;
    padding-left: 1rem;
}

.row.row-cols-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
}

@media (min-width: 768px) {
    .row.row-cols-md-3 > * {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 768px) {
    .row.row-cols-md-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 992px) {
    .row.row-cols-lg-3 > * {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row.row-cols-lg-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row.row-cols-lg-6 > * {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

@media (min-width: 1200px) {
    .row.row-cols-xl-3 > * {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row.row-cols-xl-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Tailles de police héritées du template backoffice (Vuexy) mais utilisées
   par les vues frontoffice. Le thème front (Molla) fixe la racine à 10px :
   exprimées en rem, ces classes donnaient 8px et 9px. Valeurs en pixels,
   limitées au front (body.has-bottom-nav) pour ne pas modifier le backoffice
   qui charge la même feuille. */
body.has-bottom-nav .font-small-2 {
    font-size: 12px !important;
}

body.has-bottom-nav .font-small-3 {
    font-size: 13px !important;
}

body.has-bottom-nav .font-large-1 {
    font-size: 24px !important;
}
/* ==========================================================================
   Page d'accueil - marges laterales elargies (PC uniquement)
   ========================================================================== */

/* Le theme applique aux .container-fluid un padding lateral de 30px a partir
   de 1200px, puis de 70px a partir de 1600px. Sur la page d'accueil ces
   valeurs sont quadruplees (120px / 280px) pour eloigner les produits des
   bords de l'ecran. Le seuil de 1200px correspond au breakpoint xl du theme :
   en dessous (tablettes et telephones) aucune regle n'est ajoutee, donc
   l'affichage mobile/tablette reste celui, deja optimise, du theme.

   La barre de menu est alignee sur ces memes marges. Elle est rendue par le
   layout, partage par tout le front : le marqueur .home-page pose sur le
   <body> restreint l'alignement a l'accueil, pour ne pas decaler l'en-tete
   des autres pages, dont le contenu reste sur les marges du theme.
   Le !important n'est necessaire que sur l'en-tete : sa .container-fluid
   porte dans le markup les utilitaires Bootstrap px-3 px-md-4, eux-memes
   declares !important, qui gagneraient sinon quelle que soit la specificite.

   Le footer n'est pas concerne : il est hors .page-wrapper et garde donc
   les marges du theme sur toutes les pages. */
@media screen and (min-width: 1200px) {
    body.home-page .page-wrapper .container-fluid {
        padding-left: 120px;
        padding-right: 120px;
    }

    body.home-page header.header .header-middle > .container-fluid {
        padding-left: 120px !important;
        padding-right: 120px !important;
    }

    /* La bande ainsi retrecie doit tenir sur une seule ligne. Sans cela le
       champ de recherche (max-width 540px pose en style inline) reclame plus
       que la place restante et fait retrecir le bloc logo + navigation, ce qui
       tronque « Rayons & Categories ». On fige donc ce bloc et on laisse la
       colonne de recherche absorber le manque : c'est le principe deja retenu
       par le garde-fou 1200-1339px, etendu ici a tout le PC. */
    body.home-page header.header .header-middle > .container-fluid > .d-flex > .d-flex:first-child {
        flex-shrink: 0;
    }

    /* Cible par position et non par .d-flex : la colonne centrale porte
       d-xl-flex, pas d-flex. */
    body.home-page header.header .header-middle > .container-fluid > .d-flex > :nth-child(2) {
        min-width: 0;
    }

    /* Le champ doit suivre le retrecissement de sa colonne : sinon la
       .header-search-wrapper conserve sa largeur naturelle (570px), deborde
       de son parent et son bouton loupe passe par-dessus les icones de
       droite. Memes declarations que le garde-fou 1200-1339px. */
    body.home-page header.header .header-search .header-search-wrapper {
        max-width: 100%;
    }

    body.home-page header.header .header-search-wrapper input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
}

@media screen and (min-width: 1600px) {
    body.home-page .page-wrapper .container-fluid {
        padding-left: 280px;
        padding-right: 280px;
    }

    body.home-page header.header .header-middle > .container-fluid {
        padding-left: 280px !important;
        padding-right: 280px !important;
    }
}

/* ==========================================================================
   ACHAT EXPRESS (#checkoutModal) - « Acheter maintenant » sur la fiche produit
   --------------------------------------------------------------------------
   Feuille (bottom sheet) plein cadre sur telephone, boite de dialogue centree
   a partir de 768px. Le contenu est une colonne flex : en-tete et pied de page
   fixes, corps defilant, afin que le bouton de confirmation et le total
   restent toujours visibles quelle que soit la hauteur de l'ecran.
   Namespace `xco-` : n'impacte pas .bottom-sheet-modal (filtres boutique).
   ========================================================================== */

.modal.xco-modal {
    z-index: 1060;
}

/* La barre d'achat collante ne doit pas flotter au-dessus du voile du modal. */
body.xco-sheet-open .product-sticky-buy-bar,
body.xco-sheet-open .mobile-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* --- Coquille : feuille glissante sur telephone ------------------------- */

.modal.xco-modal .modal-dialog {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: 100%;
    margin: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}

.modal.xco-modal.show .modal-dialog {
    transform: translateY(0);
}

.xco-sheet {
    --xco-accent: var(--adh-orange);          /* orange du logo : aplats, icônes, bordures d'état */
    --xco-accent-soft: rgba(var(--adh-orange-rgb), .12);
    --xco-link: var(--adh-purple);            /* violet du logo : texte coloré (9,1:1 sur blanc) */
    --xco-ink: #14181f;
    --xco-ink-2: #4a5568;
    --xco-ink-3: #5b6678;
    --xco-line: #e9edf2;
    --xco-surface-alt: #f6f8fa;
    --xco-danger: var(--adh-danger-text);
    --xco-success: var(--adh-success);

    pointer-events: auto;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    max-height: 92dvh;
    overflow: hidden;
    border: none;
    border-radius: 22px 22px 0 0;
    background: #ffffff;
    color: var(--xco-ink);
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
}

.xco-handle {
    flex: 0 0 auto;
    width: 44px;
    height: 5px;
    margin: 9px auto 0;
    border-radius: 999px;
    background: #dde3ea;
}

/* --- En-tete ------------------------------------------------------------ */

/* Le titre et le bouton de fermeture partagent la premiere ligne, le
   sous-titre occupe toute la largeur en dessous : il ne se casse donc pas
   sur deux lignes a cause de la croix, meme sur un ecran de 320px. */
.xco-head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title close"
        "sub   sub";
    column-gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--xco-line);
}

.xco-title {
    grid-area: title;
    align-self: center;
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--xco-ink);
}

.xco-subtitle {
    grid-area: sub;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--xco-ink-3);
}

.xco-subtitle i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--xco-accent);
    font-size: 11px;
}

.xco-close {
    grid-area: close;
    align-self: center;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--xco-surface-alt);
    color: var(--xco-ink-2);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.xco-close:hover,
.xco-close:focus {
    background: #edf1f5;
    color: var(--xco-ink);
    outline: none;
}

/* --- Structure du formulaire (en-tete fixe / corps defilant / pied fixe) - */

.xco-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}

.xco-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.xco-section {
    margin: 0 0 18px;
}

.xco-section:last-child {
    margin-bottom: 0;
}

.xco-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--xco-ink);
}

.xco-step {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--xco-accent);
    color: var(--xco-ink);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

/* --- Recapitulatif article --------------------------------------------- */

.xco-product {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid var(--xco-line);
    border-radius: 14px;
    background: var(--xco-surface-alt);
}

.xco-product-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.xco-product-thumb {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 11px;
    object-fit: cover;
    background: #ffffff;
    border: 1px solid var(--xco-line);
}

.xco-product-info {
    flex: 1 1 auto;
    min-width: 0;
}

.xco-product-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xco-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.xco-product-unit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--xco-ink);
}

.xco-product-unit s {
    font-size: 12px;
    font-weight: 500;
    color: var(--xco-ink-3);
}

.xco-product-unit em {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    color: var(--xco-ink-3);
}

.xco-promo-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--adh-danger-text-rgb), .1);
    color: var(--xco-danger);
    font-size: 11px;
    font-weight: 700;
}

.xco-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 11px;
    border-top: 1px dashed #dde3ea;
}

.xco-product-foot > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--xco-ink-2);
}

/* --- Selecteur de quantite --------------------------------------------- */

.xco-qty {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--xco-line);
    border-radius: 999px;
    background: #ffffff;
}

.xco-qty-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--xco-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}

.xco-qty-btn:hover {
    background: var(--xco-surface-alt);
}

.xco-qty-btn:active {
    transform: scale(.9);
}

.xco-qty-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    background: transparent;
}

.xco-qty-val {
    min-width: 32px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--xco-ink);
}

/* --- Champs ------------------------------------------------------------- */

.xco-field {
    margin-bottom: 12px;
}

.xco-field:last-child {
    margin-bottom: 0;
}

.xco-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xco-ink-2);
}

.xco-input,
.xco-textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--xco-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--xco-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.xco-textarea {
    min-height: 76px;
    resize: vertical;
}

.xco-input::placeholder,
.xco-textarea::placeholder {
    color: #64748b;
    font-weight: 400;
}

.xco-input:focus,
.xco-textarea:focus {
    outline: none;
    border-color: var(--xco-accent);
    box-shadow: 0 0 0 3px var(--xco-accent-soft);
}

.xco-input-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--xco-line);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.xco-input-group:focus-within {
    border-color: var(--xco-accent);
    box-shadow: 0 0 0 3px var(--xco-accent-soft);
}

.xco-input-prefix {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-right: 1px solid var(--xco-line);
    background: var(--xco-surface-alt);
    color: var(--xco-ink-2);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.xco-input-group .xco-input {
    border: none;
    border-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.xco-input-group .xco-input:focus {
    box-shadow: none;
}

.xco-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--xco-ink-3);
}

.xco-error {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xco-danger);
}

.xco-error:empty {
    display: none;
}

.xco-error::before {
    content: "\f06a";
    flex: 0 0 auto;
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 11px;
    line-height: 1.45;
}

.xco-field.has-error .xco-input,
.xco-field.has-error .xco-textarea,
.xco-field.has-error .xco-input-group {
    border-color: var(--xco-danger);
    box-shadow: 0 0 0 3px rgba(var(--adh-danger-text-rgb), .1);
}

/* --- Cartes de choix (reception, paiement) ------------------------------ */

.xco-options {
    display: grid;
    gap: 10px;
}

.xco-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--xco-line);
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.xco-option:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--adh-orange-rgb), .3);
}

.xco-option.is-selected {
    border-color: var(--xco-accent);
    background: var(--xco-accent-soft);
}

.xco-option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.xco-option-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--xco-surface-alt);
    color: var(--xco-ink-2);
    font-size: 16px;
    transition: background-color .18s ease, color .18s ease;
}

.xco-option.is-selected .xco-option-icon {
    background: #ffffff;
    color: var(--xco-accent);
}

.xco-option-text {
    flex: 1 1 auto;
    min-width: 0;
}

.xco-option-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xco-ink);
}

.xco-option-sub {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--xco-ink-3);
}

.xco-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--adh-success-rgb), .1);
    color: var(--xco-success);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.xco-option-mark {
    flex: 0 0 auto;
    position: relative;
    width: 21px;
    height: 21px;
    border: 2px solid #64748b;
    border-radius: 50%;
    transition: border-color .18s ease, background-color .18s ease;
}

.xco-option.is-selected .xco-option-mark {
    border-color: var(--xco-accent);
    background: var(--xco-accent);
}

.xco-option-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 5px;
    height: 9px;
    margin: auto;
    border: solid var(--xco-ink);
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: opacity .18s ease;
}

.xco-option.is-selected .xco-option-mark::after {
    opacity: 1;
}

/* Deux colonnes des que la feuille est assez large (tablette, desktop,
   telephone en paysage) : la carte passe en pile verticale pour rester lisible. */
@media (min-width: 480px) {
    .xco-options--duo {
        grid-template-columns: 1fr 1fr;
    }

    .xco-options--duo .xco-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        padding: 14px;
        padding-right: 40px;
    }

    .xco-options--duo .xco-option-mark {
        position: absolute;
        top: 13px;
        right: 13px;
    }
}

/* --- Bloc adresse (revele pour la livraison a domicile) ----------------- */

.xco-address {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--xco-line);
    animation: xcoReveal .22s ease;
}

.xco-address[hidden] {
    display: none;
}

@keyframes xcoReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.xco-grid-2 {
    display: grid;
    gap: 12px;
}

@media (min-width: 480px) {
    .xco-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.xco-notes-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 0;
    margin-top: 0;
    min-height: 44px;
    border: none;
    background: none;
    color: var(--xco-link);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.xco-notes-toggle:hover {
    color: var(--xco-ink);
    text-decoration: underline;
}

.xco-notes-toggle[hidden] {
    display: none;
}

/* --- Recapitulatif tarifaire -------------------------------------------- */

.xco-summary {
    padding: 14px;
    border: 1px solid var(--xco-line);
    border-radius: 14px;
    background: var(--xco-surface-alt);
}

.xco-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--xco-ink-2);
}

.xco-summary-row + .xco-summary-row {
    margin-top: 8px;
}

.xco-summary-row > span:last-child {
    font-weight: 600;
    color: var(--xco-ink);
    text-align: right;
    white-space: nowrap;
}

.xco-summary-row .xco-free {
    color: var(--xco-success);
    font-weight: 700;
}

.xco-summary-row--total {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #dde3ea;
}

.xco-summary-row--total > span:first-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--xco-ink);
}

.xco-summary-row--total > span:last-child {
    font-size: clamp(16px, 4.6vw, 19px);
    font-weight: 800;
    color: var(--xco-ink);
}

.xco-summary-row[hidden] {
    display: none;
}

/* --- Reassurance --------------------------------------------------------- */

.xco-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.xco-trust li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--xco-ink-3);
}

.xco-trust i {
    color: var(--xco-accent);
    font-size: 12px;
}

/* --- Etape de connexion (visiteur non identifie) ------------------------ */

.xco-gate {
    padding: 20px 18px;
    border: 1px solid var(--xco-line);
    border-radius: 14px;
    background: var(--xco-surface-alt);
    text-align: center;
}

.xco-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--xco-accent);
    color: var(--xco-ink);
    font-size: 21px;
}

.xco-gate-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--xco-ink);
}

.xco-gate-text {
    margin: 0 auto;
    max-width: 42ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--xco-ink-2);
}

.xco-gate-list {
    display: inline-block;
    margin: 14px 0 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.xco-gate-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--xco-ink-2);
}

.xco-gate-list li + li {
    margin-top: 7px;
}

.xco-gate-list i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--xco-success);
    font-size: 11px;
}

/* --- Pied de page fixe : CTA + total ------------------------------------ */

.xco-foot {
    flex: 0 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--xco-line);
    background: #ffffff;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .05);
}

.xco-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 13px 18px;
    border: none;
    border-radius: 14px;
    background: var(--xco-accent);
    color: var(--xco-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--adh-orange-rgb), .32);
    transition: background-color .18s ease, transform .1s ease, box-shadow .18s ease;
}

.xco-submit:hover,
.xco-submit:focus {
    background: var(--adh-purple);
    color: #ffffff;
    text-decoration: none;
}

.xco-submit:active {
    transform: scale(.985);
}

.xco-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--adh-orange-rgb), .4);
}

.xco-submit-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.xco-submit-main i {
    font-size: 13px;
    opacity: .9;
}

.xco-submit-total {
    flex: 0 0 auto;
    padding-left: 12px;
    border-left: 1px solid rgba(20, 24, 31, .25);
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
}

/* Le libelle complet ne tient pas a cote du total sur les petits ecrans :
   on bascule sur une formulation courte en dessous de 440px. */
.xco-submit-label--long {
    display: none;
}

@media (min-width: 440px) {
    .xco-submit-label--long {
        display: inline;
    }

    .xco-submit-label--short {
        display: none;
    }
}

@media (max-width: 359.98px) {
    .xco-submit {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 14px;
    }

    .xco-submit-total {
        padding-left: 10px;
        font-size: 13.5px;
    }
}

.xco-submit.is-loading {
    pointer-events: none;
    opacity: .85;
}

.xco-submit.is-loading .xco-submit-main,
.xco-submit.is-loading .xco-submit-total {
    visibility: hidden;
}

.xco-submit.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2.5px solid rgba(20, 24, 31, .3);
    border-top-color: #14181f;
    border-radius: 50%;
    animation: xcoSpin .7s linear infinite;
}

@keyframes xcoSpin {
    to { transform: rotate(360deg); }
}

.xco-foot-note {
    margin: 9px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: var(--xco-ink-3);
}

.xco-alt-action {
    display: block;
    width: 100%;
    margin: 6px 0 0;
    padding: 12px 0;
    min-height: 44px;
    border: none;
    background: none;
    color: var(--xco-ink-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.xco-alt-action:hover {
    color: var(--xco-link);
}

/* --- Tablette & desktop : boite de dialogue centree --------------------- */

@media (min-width: 768px) {
    .modal.xco-modal .modal-dialog {
        position: relative;
        display: flex;
        align-items: center;
        width: auto;
        max-width: 560px;
        min-height: calc(100% - 3.5rem);
        margin: 1.75rem auto;
        transform: translateY(28px) scale(.985);
        transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }

    .modal.xco-modal.show .modal-dialog {
        transform: none;
    }

    .xco-sheet {
        width: 100%;
        border-radius: 20px;
        max-height: calc(100vh - 3.5rem);
        max-height: calc(100dvh - 3.5rem);
        box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    }

    .xco-handle {
        display: none;
    }

    .xco-head {
        padding: 20px 24px 16px;
    }

    .xco-title {
        font-size: 21px;
    }

    .xco-body {
        padding: 20px 24px;
    }

    .xco-foot {
        padding: 14px 24px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal.xco-modal .modal-dialog,
    .xco-address,
    .xco-submit,
    .xco-option,
    .xco-qty-btn {
        transition: none;
        animation: none;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F01 sticky, F02 typographie,
   F03 panier AJAX (public/custom/js/frontoffice/app.js)
   ========================================================================== */

/* L'attribut hidden l'emporte sur les display des composants
   (badges de compteur masqués à zéro). */
[hidden] {
    display: none !important;
}

/* Verrou du défilement quand une modale ou le tiroir est ouvert (app.js).
   Posé sur html : body n'étant plus un conteneur de défilement, le
   overflow:hidden de .modal-open (Bootstrap) ne bloque plus la page. */
html.is-locked {
    overflow: hidden !important;
}

/* Hauteur réelle de l'en-tête, publiée par app.js dans --header-height :
   décalage des blocs sticky (récapitulatif panier/commande, filtres). */
.summary-sticky {
    top: calc(var(--header-height, 90px) + 16px) !important;
}

/* En-tête compact (< 992px) : la ligne de recherche se replie au
   défilement vers le bas et revient dès que l'on remonte. */
@media (max-width: 991.98px) {
    header.header .mobile-search-row {
        max-height: 80px;
        overflow: hidden;
        transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
    }

    header.header.is-collapsed .mobile-search-row {
        max-height: 0;
        opacity: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-bottom-width: 0;
        pointer-events: none;
    }
}

/* Panier : états de chargement */
.add-to-cart-form button.is-loading,
.btn-sticky-cart.is-loading,
.cart-remove-form button.is-loading,
.remove-item-form button.is-loading {
    opacity: .65;
    pointer-events: none;
}

.cart-update-form.is-syncing .touch-stepper-input {
    opacity: .5;
}

/* Carte panier : boutons de 40px sans réduction d'échelle (l'ancien scale(.9)
   ramenait les cibles à 36px). */
.touch-stepper-wrapper--sm .touch-stepper-btn {
    width: 40px;
    height: 40px;
}

.touch-stepper-wrapper--sm .touch-stepper-input {
    width: 36px;
}

.touch-stepper-wrapper--table {
    transform: scale(.85);
}

/* Feuille de confirmation (vider le panier) : bottom sheet sur téléphone,
   boîte centrée à partir de 768px. */
@media (min-width: 768px) {
    .modal.bottom-sheet-modal.bottom-sheet-modal--center .modal-dialog {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        max-width: 420px;
        margin: 1.75rem auto;
        transform: none;
    }

    .modal.bottom-sheet-modal.bottom-sheet-modal--center .modal-content {
        border-radius: 16px;
        padding-bottom: 0;
    }

    .modal.bottom-sheet-modal.bottom-sheet-modal--center .bottom-sheet-drag-handle {
        display: none;
    }
}

/* Notifications (toasts) : en bas, au-dessus de la barre de navigation
   et, sur la fiche produit, au-dessus de la barre d'achat. */
.adh-toast-region {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-height, 58px) + var(--mobile-safe-bottom, 0px) + 12px);
    z-index: 1056;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    body.has-sticky-buy-bar .adh-toast-region {
        bottom: calc(var(--mobile-nav-height, 58px) + var(--mobile-safe-bottom, 0px) + 64px + 12px);
    }
}

@media (min-width: 992px) {
    .adh-toast-region {
        left: auto;
        right: 24px;
        bottom: 24px;
        width: 360px;
    }
}

.adh-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #1e293b;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
}

.adh-toast.is-visible {
    opacity: 1;
    transform: none;
}

.adh-toast-icon {
    flex: 0 0 auto;
    font-size: 17px;
}

.adh-toast--success .adh-toast-icon { color: var(--adh-success-on-dark); }
.adh-toast--info .adh-toast-icon { color: var(--adh-info-on-dark); }
.adh-toast--error .adh-toast-icon { color: var(--adh-danger-on-dark); }

.adh-toast-text {
    flex: 1 1 auto;
    min-width: 0;
}

.adh-toast-link {
    flex: 0 0 auto;
    color: var(--adh-orange);
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

.adh-toast-link:hover,
.adh-toast-link:focus {
    color: #ffffff;
}

.adh-toast-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: -8px -10px -8px 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    cursor: pointer;
}

.adh-toast-close:hover,
.adh-toast-close:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    header.header .mobile-search-row,
    .adh-toast {
        transition: none;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F04 contrastes, F05 cibles tactiles
   ========================================================================== */

/* --- F04 + charte logo : le thème (skin demo-13) applique l'orange #f49719
   aux liens, à .text-primary, .bg-primary et aux boutons. Sur fond clair, le
   texte coloré passe au violet du logo ; les aplats gardent l'orange du logo
   avec un texte foncé. Surcharges limitées au front (body.has-bottom-nav).
   :where() garde la spécificité du sélecteur « a » du thème, pour ne pas
   écraser les classes (.btn-*, .dropdown-item, .text-white…). --- */
:where(body.has-bottom-nav) a {
    color: var(--adh-purple);
}

:where(body.has-bottom-nav) a:hover,
:where(body.has-bottom-nav) a:focus {
    color: var(--adh-ink);
}

body.has-bottom-nav .text-primary {
    color: var(--adh-purple) !important;
}

body.has-bottom-nav .bg-primary {
    background-color: var(--adh-orange) !important;
}

body.has-bottom-nav .badge-primary {
    background-color: var(--adh-orange);
    color: var(--adh-ink);
}

body.has-bottom-nav .btn-primary {
    color: var(--adh-ink);
    background-color: var(--adh-orange);
    border-color: var(--adh-orange);
}

body.has-bottom-nav .btn-primary:hover,
body.has-bottom-nav .btn-primary:focus,
body.has-bottom-nav .btn-primary.focus,
body.has-bottom-nav .btn-primary:not(:disabled):not(.disabled):active,
body.has-bottom-nav .btn-primary:not(:disabled):not(.disabled).active,
body.has-bottom-nav .show > .btn-primary.dropdown-toggle {
    color: #ffffff;
    background-color: var(--adh-purple);
    border-color: var(--adh-purple);
}

body.has-bottom-nav .btn-outline-primary,
body.has-bottom-nav .btn-outline-primary-2 {
    color: var(--adh-ink);
    border-color: var(--adh-orange);
    box-shadow: inset 0 0 0 1px var(--adh-orange);
}

body.has-bottom-nav .btn-outline-primary:hover,
body.has-bottom-nav .btn-outline-primary:focus,
body.has-bottom-nav .btn-outline-primary:not(:disabled):not(.disabled):active,
body.has-bottom-nav .btn-outline-primary-2:hover,
body.has-bottom-nav .btn-outline-primary-2:focus,
body.has-bottom-nav .btn-outline-primary-2.focus,
body.has-bottom-nav .btn-outline-primary-2:not(:disabled):not(.disabled):active,
body.has-bottom-nav .btn-outline-primary-2:not(:disabled):not(.disabled).active {
    color: var(--adh-ink);
    background-color: var(--adh-orange);
    border-color: var(--adh-orange);
}

body.has-bottom-nav .breadcrumb-item a {
    color: var(--adh-muted);
}

body.has-bottom-nav .breadcrumb-item a:hover,
body.has-bottom-nav .breadcrumb-item a:focus {
    color: var(--adh-purple);
}

body.has-bottom-nav .page-link:hover,
body.has-bottom-nav .page-link:focus,
body.has-bottom-nav .page-header h1 span {
    color: var(--adh-purple);
}

body.has-bottom-nav .icon-box-icon {
    color: var(--adh-orange);
}

body.has-bottom-nav .custom-control.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--adh-orange);
}

body.has-bottom-nav .custom-control.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--adh-orange);
}

body.has-bottom-nav .custom-control.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--adh-orange);
    border-color: var(--adh-orange);
}

/* Boutons « contour foncé » (« Continuer mes achats », « Retour aux
   commandes ») : le thème passe leur texte à l'orange au survol, soit 2,1:1
   sur fond clair. L'orange va sur la bordure, le texte garde l'encre. */
body.has-bottom-nav .btn-outline-dark:hover,
body.has-bottom-nav .btn-outline-dark:focus,
body.has-bottom-nav .btn-outline-dark.focus,
body.has-bottom-nav .btn-outline-dark:not(:disabled):not(.disabled):active,
body.has-bottom-nav .btn-outline-dark:not(:disabled):not(.disabled).active {
    color: var(--adh-ink);
    border-color: var(--adh-orange);
}

/* Icônes marquées .text-primary : décoratives (le texte voisin porte
   l'information), elles reprennent l'orange du logo. */
body.has-bottom-nav i.text-primary,
body.has-bottom-nav .spinner-border.text-primary {
    color: var(--adh-orange) !important;
}

/* Coche des cases (glyphe de police du thème, blanc par défaut) : foncée
   sur l'orange. */
body.has-bottom-nav .custom-control.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    color: var(--adh-ink);
}

/* Titre du bandeau « Rejoignez Adhimi » : posé sur une photo sombre, il garde
   l'orange du logo (≈ 5:1), comme le sur-titre du héros. */
body.has-bottom-nav .cta-banner-bg .cta-title {
    color: var(--adh-orange) !important;
}

/* Prix et totaux (vues) : encre. */
.text-ink {
    color: var(--adh-ink) !important;
}

/* Couleurs d'état de Bootstrap 4 remplacées par la palette : vert #28a745
   (3,1:1 sur blanc, sous le seuil AA) et rouge #dc3545. !important : les
   utilitaires .text-* de Bootstrap sont eux-mêmes en !important. */
body.has-bottom-nav .text-success {
    color: var(--adh-success) !important;
}

body.has-bottom-nav .text-danger {
    color: var(--adh-danger-text) !important;
}

/* Élément de menu déroulant cliqué : Bootstrap le passe sur son bleu #007bff. */
body.has-bottom-nav .dropdown-item.active,
body.has-bottom-nav .dropdown-item:active {
    background-color: var(--adh-orange-soft);
    color: var(--adh-ink);
}

/* Étoiles de notation : orange du logo (le jaune #fcb941 du thème Molla a été
   remplacé à la source, voir l'en-tête de la palette). */
body.has-bottom-nav .ratings-val,
body.has-bottom-nav .ratings-primary .ratings-val {
    color: var(--adh-orange);
}

/* --- F05 : cibles tactiles. 44 px pour les actions, 40 px pour les variantes
   compactes ; les liens en ligne gagnent une zone de tap par padding compensé
   par des marges négatives, sans déplacer la mise en page. --- */
body.has-bottom-nav .btn:not(.rounded-circle) {
    min-height: 44px;
}

body.has-bottom-nav .btn-sm:not(.rounded-circle) {
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Points des carrousels : la pastille reste petite, la zone de tap passe à 44 px. */
body.has-bottom-nav .owl-dots .owl-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

body.has-bottom-nav .breadcrumb-item a,
body.has-bottom-nav .title-link,
body.has-bottom-nav .forgot-link,
body.has-bottom-nav .product-cat a {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
}

.product-touch-card .product-category-link {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: -8px;
    margin-bottom: -6px;
}

.product-touch-card .touch-btn-cart {
    min-height: 44px;
}

body.has-bottom-nav .social-icon,
body.has-bottom-nav .social-icons-sm .social-icon {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

body.has-bottom-nav .nav.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

body.has-bottom-nav .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
}

body.has-bottom-nav .page-link {
    min-width: 44px;
    height: 44px;
}

body.has-bottom-nav .footer .widget-list li {
    margin-bottom: 0;
}

body.has-bottom-nav .footer .widget-list a,
body.has-bottom-nav .footer .footer-menu a {
    display: inline-block;
    padding: 10px 0;
}

body.has-bottom-nav .rating-picker label {
    padding: 8px 4px;
}

.drawer-footer .btn {
    min-height: 44px;
}

@media (max-width: 991.98px) {
    body.has-bottom-nav header.header .logo {
        min-height: 44px;
    }

    body.has-bottom-nav header.header .header-dropdown-link .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    body.has-bottom-nav .mobile-search-input {
        padding: 8px 0;
    }
}
/* Retouches F04/F05 (cartes produit, lien « Voir plus ») */
body.has-bottom-nav .heading .title-link,
body.has-bottom-nav .title-link {
    color: var(--adh-purple);
}

body.has-bottom-nav .heading .title-link:hover,
body.has-bottom-nav .heading .title-link:focus,
body.has-bottom-nav .title-link:hover,
body.has-bottom-nav .title-link:focus {
    color: var(--adh-purple);
}

/* Lien de catégorie : zone de tap de 40 px ; nom du produit : le lien
   remplit tout le bloc titre (40 px, deux lignes). */
.product-touch-card .product-category-link {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
    margin-bottom: -6px;
}

.product-name-heading {
    height: 40px;
}

.product-name-heading a {
    display: block;
    min-height: 40px;
}

@media (max-width: 575.98px) {
    .product-name-heading {
        height: 40px;
    }
}

/* Onglets (fiche produit) : l'onglet actif du thème est en orange #f49719. */
body.has-bottom-nav .nav.nav-pills .nav-link.active,
body.has-bottom-nav .nav.nav-pills .nav-link:hover,
body.has-bottom-nav .nav.nav-pills .nav-link:focus {
    color: var(--adh-ink);
}

body.has-bottom-nav .product-cat a {
    padding-top: 14px;
    padding-bottom: 14px;
    margin-top: -14px;
    margin-bottom: -14px;
}

/* Carte panier : vignette 76 px et champ de quantité de 32 px pour laisser
   le total sur une ligne ; le nom de l'article gagne une zone de tap. */
.cart-item-touch-card .item-thumb {
    width: 76px;
    height: 76px;
}

.cart-item-touch-card .item-title {
    display: block;
    padding: 8px 0;
    margin: -8px 0;
}

.cart-item-touch-card .item-bottom-row {
    flex-wrap: wrap;
    gap: 6px 10px;
}

.cart-item-touch-card .item-total-price {
    margin-left: auto;
    white-space: nowrap;
}

.touch-stepper-wrapper--sm .touch-stepper-input {
    width: 32px;
}

/* Pied de page : liens du bloc « à propos » et de la ligne de crédits. */
body.has-bottom-nav .footer .widget-about-info a,
body.has-bottom-nav .footer .footer-bottom a {
    display: inline-block;
    padding: 10px 0;
    margin: -6px 0;
}

/* En-tête compact : la zone de tap de 44 px du logo (F05) ne doit pas
   grandir la bande (le thème pose des marges de 16 px autour du logo). */
@media (max-width: 991.98px) {
    body.has-bottom-nav header.header .logo {
        margin-top: 11px;
        margin-bottom: 11px;
    }

    body.has-bottom-nav .mobile-search-row {
        padding-bottom: 10px !important;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F07 tablette
   Interface desktop dès 992px (nav horizontale, recherche pleine largeur,
   compte et panier avec libellé ; barre basse, burger et ligne de recherche
   mobile retirés par d-lg-* dans les vues). Entre 768 et 991px la barre basse
   devient une barre flottante centrée de 480px au plus. Sur la fiche produit,
   la barre d'achat fixe se masque tant que les boutons d'action sont visibles
   (app.js, IntersectionObserver sur [data-sticky-bar-anchor]).
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        /* 58px de barre + 12px de marge dessous : le padding du body, la barre
           d'achat, les toasts et le bouton « haut de page » s'y calent. */
        --mobile-nav-height: 70px;
    }

    .mobile-bottom-nav {
        left: 50%;
        right: auto;
        bottom: calc(12px + var(--mobile-safe-bottom, 0px));
        width: min(480px, calc(100% - 32px));
        transform: translateX(-50%);
        padding-bottom: 0;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .nav-icon-wrapper {
        font-size: 20px;
    }

    .mobile-bottom-nav .nav-item {
        padding: 6px 4px;
    }
}

@media (max-width: 991.98px) {
    .product-sticky-buy-bar {
        transition: transform .25s ease, visibility 0s linear 0s;
    }

    /* Repliée sous la barre basse ; visibility retire les boutons du parcours
       clavier, avec un délai égal à la transition pour laisser le mouvement
       s'achever. */
    .product-sticky-buy-bar.is-hidden {
        transform: translateY(calc(100% + var(--mobile-nav-height, 58px) + var(--mobile-safe-bottom, 0px) + 20px));
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        animation: none;
    }

    body.has-sticky-buy-bar.sticky-bar-hidden .adh-toast-region {
        bottom: calc(var(--mobile-nav-height, 58px) + var(--mobile-safe-bottom, 0px) + 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-sticky-buy-bar,
    .product-sticky-buy-bar.is-hidden {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F09 fiche produit
   Galerie à glissement horizontal, caractéristiques réelles, partage ; barre d'achat différée et en-tête replié à l'ouverture
   dans app.js.
   ========================================================================== */

/* --- Galerie -------------------------------------------------------------- */
.pd-gallery {
    position: relative;
}

.pd-gallery-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 12px;
    font-size: 12px;
}

.pd-gallery-track {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 440px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: 8px;
    background: #ffffff;
}

.pd-gallery-track::-webkit-scrollbar {
    display: none;
}

.pd-gallery-track:focus-visible {
    outline: 2px solid var(--adh-purple);
    outline-offset: 2px;
}

.pd-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pd-gallery-counter {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 24, 31, .72);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.pd-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 4px;
}

.pd-gallery-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pd-gallery-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd2dc;
    transition: transform .2s ease, background .2s ease;
}

.pd-gallery-dot.is-active::before {
    background: var(--adh-orange);
    transform: scale(1.35);
}

.pd-gallery-thumbs {
    display: none;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pd-gallery-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.pd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.pd-gallery-thumb.is-active {
    border-color: var(--adh-orange);
}

@media (min-width: 768px) {
    .pd-gallery-thumbs {
        display: flex;
    }

    .pd-gallery-dots {
        display: none;
    }
}

/* --- Vidéo de présentation ----------------------------------------------- */
.pd-video {
    margin-top: 16px;
}

.pd-video-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--adh-ink, #14181f);
}

.pd-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #140c1f;
}

.pd-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #140c1f;
}

/* --- Caractéristiques ------------------------------------------------------ */
.pd-attributes {
    display: grid;
    gap: 8px;
    margin: 0;
}

.pd-attribute {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.pd-attribute dt {
    flex: 0 0 auto;
    min-width: 72px;
    font-size: 13px;
    font-weight: 700;
    color: var(--adh-ink);
}

.pd-attribute dd {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.pd-attr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--adh-ink);
    font-size: 13px;
    font-weight: 600;
}

.pd-attr-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--swatch, #e2e8f0);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* --- Partage ---------------------------------------------------------------- */
.pd-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.pd-share-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--adh-muted);
}

.pd-share-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-share-native {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: var(--adh-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.pd-share-native:hover,
.pd-share-native:focus {
    border-color: var(--adh-orange);
    color: var(--adh-ink);
}

.pd-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--adh-ink);
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pd-share-icon:hover,
.pd-share-icon:focus {
    border-color: var(--adh-orange);
    color: var(--adh-ink);
    text-decoration: none;
}

.pd-share-icon--whatsapp {
    border-color: var(--adh-whatsapp);
    color: var(--adh-whatsapp-dark);
}

@media (prefers-reduced-motion: reduce) {
    .pd-gallery-track {
        scroll-behavior: auto;
    }

    .pd-gallery-dot::before,
    .pd-share-icon {
        transition: none;
    }
}

/* ==========================================================================
   Fiche produit — mise en page calquée sur Jumia (sept. 2026)
   Fond gris, conteneur de 1184 px, cartes blanches à 4 px d'arrondi séparées
   de 12 px ; dès 992 px, colonne latérale de 282 px (Livraison & retours,
   vendeur, résumé d'achat collant). Classes .pd-* uniquement : les classes
   Molla (.product-details, .product-gallery…) portent leurs propres grilles.
   ========================================================================== */

body.pd-body.bg-light {
    background-color: #f1f1f2 !important;
}

.pd-page {
    padding-bottom: 24px;
}

.pd-container {
    max-width: 1184px;
    margin: 0 auto;
    padding: 0 8px;
}

.pd-breadcrumb {
    padding: 10px 0;
}

.pd-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    padding: 0;
    background: transparent;
    font-size: 12px;
}

.pd-breadcrumb .breadcrumb-item {
    white-space: nowrap;
}

.pd-breadcrumb .breadcrumb-item.active {
    min-width: 0;
    color: var(--adh-muted);
}

/* Téléphone et tablette : une seule colonne où les cartes des deux colonnes
   s'intercalent (achat, puis livraison et vendeur, puis détails et avis). */
.pd-layout {
    display: flex;
    flex-direction: column;
}

.pd-main,
.pd-aside {
    display: contents;
}

.pd-main > .pd-card {
    order: 3;
}

.pd-main > .pd-hero,
.pd-main > .pd-card--padded {
    order: 1;
}

.pd-aside > * {
    order: 2;
}

.pd-main,
.pd-aside {
    min-width: 0;
}

.pd-card {
    margin-bottom: 12px;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .05);
}

.pd-card--padded {
    padding: 12px 16px;
}

.pd-card-title {
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #ededed;
    color: var(--adh-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.pd-card-count {
    color: var(--adh-muted);
    font-weight: 400;
}

.pd-card-body {
    padding: 16px;
}

.pd-aside-title {
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #ededed;
    color: var(--adh-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .pd-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 282px;
        align-items: start;
        gap: 0 12px;
    }

    .pd-main,
    .pd-aside {
        display: block;
    }

    /* La colonne latérale s'étire sur toute la hauteur : le résumé colle jusqu'en bas. */
    .pd-aside {
        align-self: stretch;
    }
}

/* --- Carte principale : galerie + informations d'achat ------------------------ */
.pd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 12px;
}

@media (min-width: 768px) {
    .pd-hero {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 20px;
        padding: 16px;
    }
}

.pd-hero .pd-gallery-track {
    max-height: 380px;
    border-radius: 4px;
}

.pd-hero .pd-share {
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ededed;
}

.pd-hero .pd-share-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pd-hero .pd-share-icon {
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.pd-title {
    margin: 0 0 6px;
    color: var(--adh-ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
}

.pd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 0 0 12px;
    color: var(--adh-muted);
    font-size: 13px;
}

.pd-meta a {
    color: var(--adh-purple);
}

.pd-price-block {
    padding: 12px 0;
    border-top: 1px solid #ededed;
}

.pd-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.pd-price {
    color: var(--adh-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.pd-price-old {
    color: var(--adh-muted);
    font-size: 16px;
    text-decoration: line-through;
}

.pd-discount {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--adh-orange-tint);
    color: var(--adh-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.pd-stock {
    margin: 6px 0 0;
    font-size: 13px;
}

.pd-stock--low {
    color: var(--adh-danger-text);
}

.pd-stock--ok {
    color: var(--adh-success);
}

.pd-delivery-note {
    margin: 4px 0 0;
    color: var(--adh-muted);
    font-size: 12px;
}

.pd-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.pd-rating .ratings {
    margin: 0;
}

.pd-rating-text {
    color: var(--adh-purple);
}

.pd-buy {
    padding-top: 12px;
    border-top: 1px solid #ededed;
}

.pd-buy .pd-attributes {
    margin-bottom: 12px;
}

.pd-buy-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.pd-stepper {
    flex: 0 0 auto;
}

.pd-btn-cart,
.pd-btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Descriptions saisies dans l'éditeur : paragraphes vides en tête fréquents. */
.pd-card-body.product-desc-content > p:empty {
    display: none;
}

.pd-buy-row .pd-btn-cart {
    padding: 0 12px;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    box-shadow: 0 4px 8px rgba(var(--adh-orange-rgb), .3);
}

/* --- Colonne latérale : Livraison & retours, vendeur ----------------------- */
.pd-info-list {
    margin: 0;
    padding: 0 16px;
    list-style: none;
}

.pd-info {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.pd-info + .pd-info {
    border-top: 1px solid #ededed;
}

.pd-info-icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: var(--adh-orange);
    font-size: 15px;
}

.pd-info-title {
    margin: 0 0 2px;
    color: var(--adh-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.pd-info-text {
    margin: 0;
    color: var(--adh-muted);
    font-size: 12px;
    line-height: 1.5;
}

.pd-info-text strong {
    color: var(--adh-ink);
}

.pd-seller {
    padding: 12px 16px;
}

.pd-seller-name {
    margin: 0 0 2px;
    color: var(--adh-ink);
    font-size: 15px;
    font-weight: 600;
}

.pd-seller-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--adh-purple);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.pd-seller-link i {
    font-size: 10px;
}

/* --- Résumé d'achat collant (desktop) -------------------------------------- */
.pd-summary-wrap {
    position: sticky;
    top: 88px;
}

.pd-summary {
    padding: 12px;
}

.pd-summary-head {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.pd-summary-head img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: contain;
}

.pd-summary-name {
    display: -webkit-box;
    margin: 0 0 4px;
    overflow: hidden;
    color: var(--adh-ink);
    font-size: 13px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pd-summary-price {
    margin: 0;
    color: var(--adh-ink);
    font-size: 16px;
    font-weight: 700;
}

.pd-summary-old {
    margin: 2px 0 0;
    color: var(--adh-muted);
    font-size: 12px;
}

.pd-summary-old .pd-discount {
    font-size: 11px;
}

/* --- Fiche technique --------------------------------------------------------- */
.pd-specs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .pd-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pd-specs-box {
    border: 1px solid #ededed;
    border-radius: 4px;
}

.pd-specs-title {
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #ededed;
    color: var(--adh-ink);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.pd-specs-list {
    margin: 0;
    padding: 8px 12px;
}

.pd-specs-list > div {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.pd-specs-list dt {
    flex: 0 0 40%;
    color: var(--adh-muted);
    font-weight: 400;
}

.pd-specs-list dd {
    margin: 0;
    color: var(--adh-ink);
}

/* --- Avis clients ------------------------------------------------------------ */
.pd-reviews {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

@media (min-width: 768px) {
    .pd-reviews {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

.pd-reviews-label {
    margin: 0 0 10px;
    color: var(--adh-ink);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.pd-reviews-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 4px;
    background: #f5f5f5;
    text-align: center;
}

.pd-reviews-note {
    margin: 0;
    color: var(--adh-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.pd-reviews-note span {
    font-size: 16px;
    font-weight: 400;
}

.pd-reviews-score .ratings {
    margin: 4px 0;
}

.pd-reviews-bars {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.pd-reviews-bars li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}

.pd-reviews-bar-label {
    flex: 0 0 30px;
    color: var(--adh-ink);
}

.pd-reviews-bar-label i {
    color: var(--adh-orange);
    font-size: 10px;
}

.pd-reviews-bar {
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: #ededed;
}

.pd-reviews-bar > span {
    display: block;
    height: 100%;
    background: var(--adh-orange);
}

.pd-reviews-bar-count {
    flex: 0 0 32px;
    color: var(--adh-muted);
    text-align: right;
}

.pd-review-form {
    margin-top: 16px;
}

.pd-review {
    padding: 12px 0;
    border-bottom: 1px solid #ededed;
}

.pd-review:first-of-type {
    padding-top: 0;
}

.pd-review .ratings {
    margin: 0;
}

.pd-review-text {
    margin: 6px 0 4px;
    color: var(--adh-ink);
    font-size: 14px;
}

.pd-review-meta {
    margin: 0;
    color: var(--adh-muted);
    font-size: 12px;
}

.pd-reviews-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    color: var(--adh-muted);
    text-align: center;
}

.pd-reviews-empty i {
    font-size: 36px;
}

/* --- Vous aimerez aussi ------------------------------------------------------ */
.pd-related .pd-card-body {
    padding: 12px 12px 4px;
}

/* --- Téléphone : cartes bord à bord, comme l'application Jumia --------------- */
@media (max-width: 767.98px) {
    .pd-container {
        padding: 0;
    }

    .pd-breadcrumb {
        padding: 8px 12px;
    }

    .pd-card {
        margin-bottom: 8px;
        border-radius: 0;
    }

    .pd-title {
        font-size: 18px;
    }

    .pd-btn-cart,
    .pd-btn-buy {
        font-size: 13px;
        letter-spacing: 0;
    }

    /* Le partage passe sous les boutons d'achat. */
    .pd-hero-media {
        display: contents;
    }

    .pd-hero .pd-share {
        order: 2;
        margin-top: 0;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F08 filtres du catalogue boutique
   Chips-cases à cocher de la feuille « Filtres », bouton Filtres actif, barre
   de résultats (compteur + filtres actifs) et pagination.
   ========================================================================== */

/* Case à cocher rendue par un chip : l'input reste focusable pour le clavier
   et les lecteurs d'écran, le libellé porte l'apparence. */
.chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.touch-chip-group label.touch-chip-btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.chip-input:checked + .touch-chip-btn {
    border-color: var(--adh-orange);
    background: var(--adh-orange-soft);
    color: var(--adh-ink);
}

.chip-input:focus-visible + .touch-chip-btn {
    outline: 2px solid var(--adh-purple);
    outline-offset: 2px;
}

.touch-chip-btn .chip-count {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--adh-muted);
}

.chip-input:checked + .touch-chip-btn .chip-count,
.touch-chip-btn.active .chip-count {
    color: inherit;
}

.shop-mobile-toolbox .btn-toolbox.is-active {
    border-color: var(--adh-orange);
    color: var(--adh-ink);
}

.toolbox-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-size: 12px;
    font-weight: 700;
}

.shop-results {
    gap: 8px 12px;
}

.shop-results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-height: 36px;
    font-size: 13px;
    color: var(--adh-muted);
}

.shop-results-count strong {
    color: var(--adh-ink);
}

.shop-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 10px 4px 12px;
    border-radius: 999px;
    background: var(--adh-orange-soft);
    color: var(--adh-ink);
    font-size: 13px;
    font-weight: 600;
}

.shop-filter-pill i {
    font-size: 11px;
}

.shop-filter-pill:hover,
.shop-filter-pill:focus {
    background: rgba(var(--adh-orange-rgb), .28);
    color: var(--adh-ink);
    text-decoration: none;
}

.shop-filter-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--adh-purple);
}

.sidebar-shop fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.sidebar-shop .filter-count {
    color: var(--adh-muted);
    font-weight: 400;
}

.shop-pagination .pagination {
    margin: 0;
}

.filter-sheet-footer {
    padding: 8px 24px calc(16px + var(--mobile-safe-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #edf2f7;
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F10 accueil et pied de page
   Héros plat (un H1, aucune image de démonstration), tuiles de rayons
   vectorielles, rangées chargées à la demande, pied de page en trois blocs.
   ========================================================================== */

/* --- Héros ------------------------------------------------------------------- */
.home-hero {
    background: linear-gradient(135deg, #14181f 0%, #2a1f3d 60%, var(--adh-purple) 140%);
    color: #ffffff;
    padding: 28px 0 24px;
}

.home-hero-inner {
    display: grid;
    gap: 18px;
}

.home-hero-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--adh-orange);
}

.home-hero-title {
    margin: 0 0 10px;
    font-size: clamp(24px, 6vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #ffffff;
}

.home-hero-lede {
    margin: 0 0 18px;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    min-width: 0;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}

.home-hero-cta.btn-primary {
    color: var(--adh-ink);
}

.home-hero-cta--ghost {
    border: 1.5px solid rgba(255, 255, 255, .55);
    background: transparent;
    color: #ffffff;
}

.home-hero-cta--ghost:hover,
.home-hero-cta--ghost:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.home-hero-badges {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hero-badges li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
}

.home-hero-badges i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--adh-orange);
    font-size: 14px;
}

@media (min-width: 768px) {
    .home-hero {
        padding: 40px 0 36px;
    }

    .home-hero-inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: center;
        gap: 32px;
    }

    .home-hero-badges {
        gap: 12px;
    }

    .home-hero-badges li {
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    .home-hero {
        padding: 56px 0 48px;
    }

    .home-hero-lede {
        font-size: 16px;
    }
}

/* --- Tuiles de rayons ------------------------------------------------------- */
.home-groups {
    margin-top: 28px;
}

.home-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-group-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 112px;
    padding: 14px 10px;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    background: #ffffff;
    color: var(--adh-ink);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.home-group-tile:hover,
.home-group-tile:focus {
    border-color: var(--adh-orange);
    box-shadow: 0 4px 14px rgba(20, 24, 31, .08);
    color: var(--adh-ink);
    text-decoration: none;
}

.home-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--adh-orange-soft);
    transition: background-color .15s ease, color .15s ease;
    color: var(--adh-orange);
    font-size: 22px;
}

/* Au survol, la pastille se remplit de l'orange du logo, icône foncée dessus. */
.home-group-tile:hover .home-group-icon,
.home-group-tile:focus .home-group-icon {
    background: var(--adh-orange);
    color: var(--adh-ink);
}

.home-group-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.home-group-count {
    font-size: 12px;
    color: var(--adh-muted);
}

@media (min-width: 480px) {
    .home-groups-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .home-groups-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (min-width: 1200px) {
    .home-groups-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* --- Rangées chargées à la demande ------------------------------------------ */
.home-row-skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.home-row-skeleton span {
    display: none;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    background: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 50%, #eef1f5 100%);
    background-size: 200% 100%;
    animation: homeSkeleton 1.2s ease-in-out infinite;
}

.home-row-skeleton span:nth-child(-n+2) {
    display: block;
}

@media (min-width: 768px) {
    .home-row-skeleton {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-row-skeleton span:nth-child(-n+3) {
        display: block;
    }
}

@media (min-width: 992px) {
    .home-row-skeleton {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-row-skeleton span:nth-child(-n+4) {
        display: block;
    }
}

@media (min-width: 1280px) {
    .home-row-skeleton {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .home-row-skeleton span {
        display: block;
    }
}

@keyframes homeSkeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.home-row--lazy.is-failed .home-row-skeleton {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-row-skeleton span {
        animation: none;
    }
}

/* --- Pied de page ------------------------------------------------------------ */
.site-footer {
    margin-top: 32px;
    padding: 28px 0 calc(20px + var(--mobile-safe-bottom, 0px));
    background: #14181f;
    color: #c3ccd8;
    font-size: 14px;
}

.site-footer a {
    color: #ffffff;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--adh-orange);
    text-decoration: none;
}

.site-footer-grid {
    display: grid;
    gap: 4px;
}

.site-footer-brand {
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-footer-logo-link {
    display: inline-block;
    padding: 6px 0;
}

.site-footer-logo {
    display: block;
    width: auto;
    height: 33px;
}

.site-footer-tagline {
    margin: 10px 0 14px;
    max-width: 48ch;
    line-height: 1.55;
}

.site-footer-payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.site-footer-payments-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8e9bae;
}

.site-footer-payments-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-payments-list li {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 2px 8px;
    border-radius: 8px;
    background: #ffffff;
}

.site-footer-payments-list img {
    width: auto;
    height: 30px;
}

.site-footer-payments-cash {
    gap: 6px;
    color: var(--adh-ink);
    font-size: 12px;
    font-weight: 700;
}

.site-footer-block {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-footer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    list-style: none;
}

.site-footer-title::-webkit-details-marker {
    display: none;
}

.site-footer-title i {
    font-size: 12px;
    transition: transform .2s ease;
}

.site-footer-block[open] .site-footer-title i {
    transform: rotate(180deg);
}

.site-footer-list {
    margin: 0;
    padding: 0 0 10px;
    list-style: none;
}

.site-footer-list li {
    margin: 0;
}

.site-footer-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 0;
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    padding-top: 16px;
    font-size: 13px;
    color: #8e9bae;
}

.site-footer-bottom p {
    margin: 0;
}

.site-footer-bottom a {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
}

@media (min-width: 992px) {
    .site-footer {
        padding: 44px 0 28px;
    }

    .site-footer-grid {
        grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    .site-footer-brand,
    .site-footer-block {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .site-footer-title {
        min-height: 0;
        margin-bottom: 8px;
        pointer-events: none;
    }

    .site-footer-title i {
        display: none;
    }

    .site-footer-list a {
        min-height: 36px;
        padding: 6px 0;
    }
}

/* Héros compact sur téléphone (F10) : surtitre masqué, engagements en chips
   sur une ligne défilante, boutons de 48 px, marges resserrées. */
@media (max-width: 767.98px) {
    .home-hero {
        padding: 22px 0 18px;
    }

    .home-hero-inner {
        gap: 14px;
    }

    .home-hero-eyebrow {
        display: none;
    }

    .home-hero-title {
        margin-bottom: 8px;
    }

    .home-hero-lede {
        margin-bottom: 14px;
        font-size: 14px;
    }

    .home-hero-badges {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -15px;
        padding: 0 15px 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .home-hero-badges::-webkit-scrollbar {
        display: none;
    }

    .home-hero-badges li {
        flex: 0 0 auto;
        gap: 8px;
        padding: 5px 12px 5px 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        font-size: 12px;
        white-space: nowrap;
    }

    .home-hero-badges i {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

.home-hero-cta,
.home-hero-cta.btn {
    height: 48px;
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — A01 accessibilité
   Anneau de focus clavier global, mouvement réduit global, lien d'évitement,
   bouton « Rayons » de la barre basse (dialogue du tiroir : app.js).
   ========================================================================== */

/* Anneau de focus (clavier seulement). Le thème pose « outline: none
   !important » sur les liens de menu : la spécificité est renforcée par deux
   :not(#…) pour l'emporter à importance égale. Violet de marque : 8,4:1 sur
   blanc ; blanc sur les surfaces sombres. */
html:not(#_):not(#_) :focus-visible {
    outline: 2px solid var(--adh-purple) !important;
    outline-offset: 2px !important;
}

html:not(#_):not(#_) .site-footer :focus-visible,
html:not(#_):not(#_) .home-hero :focus-visible,
html:not(#_):not(#_) .drawer-header :focus-visible,
html:not(#_):not(#_) .adh-toast :focus-visible,
html:not(#_):not(#_) .skip-link:focus-visible {
    outline-color: #ffffff !important;
}

/* Aucun anneau au clic souris (Bootstrap garde son ombre sur les boutons). */
html:not(#_):not(#_) :focus:not(:focus-visible) {
    outline: none !important;
}

/* Cible du lien d'évitement : focalisable par script, sans anneau. */
main:focus {
    outline: none !important;
}

/* Lien d'évitement : hors écran jusqu'au focus clavier. */
.skip-link {
    position: absolute;
    top: 8px;
    left: -9999px;
    z-index: 2000;
    padding: 12px 18px;
    border-radius: 10px;
    background: #14181f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 8px;
    color: #ffffff;
    text-decoration: none;
}

/* « Rayons » de la barre basse : bouton natif habillé comme les liens.
   Neutralise les règles du burger d'en-tête (.mobile-menu-toggler : 44×44px,
   survol gris, marge du thème) qu'il partage par sa classe. */
.mobile-bottom-nav button.nav-link-bottom {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.mobile-bottom-nav button.nav-link-bottom:hover,
.mobile-bottom-nav button.nav-link-bottom:focus,
.mobile-bottom-nav button.nav-link-bottom:active {
    background: transparent;
    color: var(--adh-ink);
}

/* Mouvement réduit : animations et transitions instantanées, déplacements au
   survol neutralisés (les états restent visibles par couleur et ombre). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .product-touch-card:hover,
    .touch-btn-cart:hover,
    .touch-btn-cart:active,
    .drawer-close-btn:hover,
    .home-group-tile:hover,
    .product-sticky-buy-bar .btn-sticky-buy:active,
    .xco-submit:active,
    .xco-qty-btn:active,
    .pd-gallery-dot.is-active::before {
        transform: none !important;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — D01 classes remplaçant les styles en ligne
   Seules les valeurs calculées côté serveur restent en style="" (largeur des
   notes en %, pastille de couleur d'attribut, état d'onglet du tiroir).
   Préfixe body.has-bottom-nav : l'emporte sur les règles du thème à deux
   classes, comme le faisaient les styles en ligne.
   ========================================================================== */
.header-sticky { position: sticky; top: 0; z-index: 1040; }
body.has-bottom-nav .header-search-max { max-width: 540px; }
body.has-bottom-nav .btn-search-round { aspect-ratio: 1; width: 38px; height: 38px; flex: 0 0 38px; max-width: 38px; margin: 0; }
/* Nom sans « count » : le thème applique min-width: 1.6rem à tout [class*="count"] des menus de l'en-tête (badges). */
body.has-bottom-nav header.header .dropdown-menu--user { min-width: 200px; }
body.has-bottom-nav header.header .dropdown-menu--cart { width: 320px; }
body.has-bottom-nav .cart-dropdown-scroll { max-height: 260px; overflow-y: auto; }
body.has-bottom-nav .thumb-50 { width: 50px; height: 50px; flex-shrink: 0; }
body.has-bottom-nav .thumb-50-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
body.has-bottom-nav .thumb-54 { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
body.has-bottom-nav .thumb-60 { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
body.has-bottom-nav .avatar-48 { width: 48px; height: 48px; font-size: 20px; }
body.has-bottom-nav .avatar-52 { width: 52px; height: 52px; font-size: 22px; flex-shrink: 0; }
body.has-bottom-nav .page-h1 { font-size: clamp(22px, 5vw, 30px); }
body.has-bottom-nav .page-h1--sm { font-size: clamp(20px, 5vw, 28px); }
body.has-bottom-nav .page-h1--xs { font-size: clamp(20px, 5vw, 26px); }
body.has-bottom-nav .product-title { font-size: clamp(20px, 5vw, 28px); line-height: 1.3; }
body.has-bottom-nav .shop-title { font-size: clamp(20px, 5vw, 30px); }
body.has-bottom-nav .product-desc-content { font-size: 14px; line-height: 1.7; color: #444444; }
body.has-bottom-nav .review-text { line-height: 1.6; color: #444444; }
body.has-bottom-nav .text-12 { font-size: 12px; }
body.has-bottom-nav .text-13 { font-size: 13px; }
body.has-bottom-nav .text-16 { font-size: 16px; }
body.has-bottom-nav .text-18 { font-size: 18px; }
body.has-bottom-nav .text-20 { font-size: 20px; }
body.has-bottom-nav .text-22 { font-size: 22px; }
body.has-bottom-nav .text-24 { font-size: 24px; }
body.has-bottom-nav .mw-60 { max-width: 60%; }
body.has-bottom-nav .mw-65 { max-width: 65%; }
body.has-bottom-nav .mw-180 { max-width: 180px; }
body.has-bottom-nav .mw-200 { max-width: 200px; }
body.has-bottom-nav .w-180 { width: 180px; }
body.has-bottom-nav .cursor-pointer { cursor: pointer; }
body.has-bottom-nav .map-frame { width: 100%; height: 400px; }
body.has-bottom-nav .modal-dialog-400 { max-width: 400px; }
body.has-bottom-nav .page-header--front { background-image: url('../../assets/images/page-header-bg.jpg'); }
body.has-bottom-nav .cta-banner-bg { background-image: url('../../assets/images/backgrounds/bg-1.jpg'); }

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F11 boutiques, recherche, fiche, création
   En-tête de page compact, carte boutique dédiée, fiche sans iframe, formulaire.
   ========================================================================== */

/* --- En-tête de page --------------------------------------------------------- */
.page-head {
    padding: 14px 0 16px;
    margin-bottom: 20px;
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
}

.page-head-crumbs .breadcrumb {
    padding: 0;
    margin: 0 0 6px;
    background: transparent;
    font-size: 13px;
}

.page-head-crumbs .breadcrumb-item.active {
    max-width: 60vw;
}

.page-head-title {
    margin: 0;
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--adh-ink);
    overflow-wrap: anywhere;
}

.page-head-lead {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--adh-muted);
}

/* --- Carte boutique ----------------------------------------------------------- */
.shop-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(20, 24, 31, .05);
}

.shop-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-tile-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-size: 20px;
    font-weight: 700;
}

.shop-tile-id {
    min-width: 0;
}

.shop-tile-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.shop-tile-name a {
    color: var(--adh-ink);
}

.shop-tile-name a:hover,
.shop-tile-name a:focus {
    color: var(--adh-purple);
    text-decoration: none;
}

.shop-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--adh-muted);
}

.shop-tile-rating i {
    color: var(--adh-orange);
    font-size: 12px;
}

.shop-tile-rating--none {
    font-style: italic;
}

.shop-tile-desc,
.shop-tile-address {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--adh-muted-2);
}

.shop-tile-address i {
    margin-right: 4px;
    color: var(--adh-orange);
}

.shop-tile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: auto;
    padding-top: 4px;
}

.shop-tile-cta,
.shop-tile-cta.btn {
    min-width: 0;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.shop-tile-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
    color: var(--adh-purple);
}

/* --- Recherche : boutiques trouvées ------------------------------------------- */
.search-section-title {
    margin: 4px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--adh-ink);
}

.search-shop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 14px 10px;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
}

.search-shop-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-size: 20px;
    font-weight: 700;
}

.search-shop-name {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.search-shop-cta,
.search-shop-cta.btn {
    min-width: 0;
    min-height: 44px;
    margin-top: auto;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

/* --- Fiche boutique ------------------------------------------------------------ */
.shop-info {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    background: #ffffff;
}

.shop-info-desc {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--adh-ink);
}

body.has-bottom-nav .shop-info-cta,
body.has-bottom-nav .shop-info-cta.btn {
    min-width: 0;
    min-height: 48px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}

.shop-info-side {
    padding-top: 16px;
    border-top: 1px solid #edf2f7;
}

.shop-info-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--adh-ink);
}

.shop-info-title i {
    margin-right: 6px;
    color: var(--adh-orange);
}

.shop-info-address {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    font-style: normal;
    color: var(--adh-muted-2);
}

.shop-info-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.shop-info-link,
.shop-info-link.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.shop-info-link--text {
    padding: 8px 4px;
    color: var(--adh-purple);
}

.shop-info-phones {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-info-phones a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 768px) {
    .shop-info {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
    }

    .shop-info-side {
        padding-top: 0;
        padding-left: 24px;
        border-top: 0;
        border-left: 1px solid #edf2f7;
    }
}

/* --- Création de boutique -------------------------------------------------- */
.shop-create-card .card-body {
    padding: 20px 16px;
}

.shop-create-legend {
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--adh-ink);
}

.shop-create-form .form-control {
    min-height: 48px;
    font-size: 16px;
}

.shop-create-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--adh-ink);
}

.shop-create-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

body.has-bottom-nav .shop-create-cancel,
body.has-bottom-nav .shop-create-submit,
body.has-bottom-nav .shop-create-cancel.btn,
body.has-bottom-nav .shop-create-submit.btn {
    min-width: 0;
    min-height: 48px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}

@media (min-width: 768px) {
    .shop-create-card .card-body {
        padding: 32px;
    }
}

/* ==========================================================================
   Connexion, inscription et mot de passe client (audit F12, affiné sept. 2026)
   Un écran par action, sans pied de page ('footer' => false). Libellés masqués
   (.sr-only) : le placeholder dit la valeur attendue, une étoile rouge précède
   les champs obligatoires. Proportions fines : champs de 40 px (42 px et 16 px
   de texte sur téléphone, sinon iOS zoome au focus), boutons de même hauteur.
   ========================================================================== */
body.has-bottom-nav .login-page.auth-page {
    padding: 8px 0 48px;
    background: transparent;
}

.auth-box {
    --auth-control-h: 42px;
    --auth-radius: 6px;
    --auth-placeholder-size: 13px;
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 20px;
    border: 1px solid #e9edf2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(20, 24, 31, .04), 0 8px 24px rgba(20, 24, 31, .04);
}

.auth-panel[hidden] {
    display: none;
}

.auth-title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--adh-ink);
}

.auth-lead {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--adh-muted);
}

/* Titre sans sous-titre (pages mot de passe) : même respiration avant le formulaire. */
.auth-title + .auth-form,
.auth-title + .auth-success {
    margin-top: 16px;
}

.auth-required-note {
    margin: -12px 0 16px;
    font-size: 12px;
    color: var(--adh-muted);
}

.auth-star {
    color: var(--adh-danger-text);
    font-weight: 600;
}

.auth-form .auth-field {
    position: relative;
    margin-bottom: 10px;
}

/* Étoile rouge devant les champs obligatoires, posée dans le champ, avant le placeholder. */
.auth-form .auth-field--required::before {
    content: "*";
    content: "*" / "";
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    height: var(--auth-control-h);
    color: var(--adh-danger-text);
    font-size: var(--auth-placeholder-size);
    font-weight: 600;
    pointer-events: none;
}

body.has-bottom-nav .auth-form .form-control {
    height: var(--auth-control-h);
    min-height: 0;
    padding: 0 12px;
    border: 1px solid #dcdfe4;
    border-radius: var(--auth-radius);
    background-color: #ffffff;
    box-shadow: none;
    color: var(--adh-ink);
    font-size: 16px;
    line-height: calc(var(--auth-control-h) - 2px);
    transition: border-color .15s ease;
}

body.has-bottom-nav .auth-form .auth-field--required .form-control {
    padding-left: 24px;
}

/* Placeholders plus petits que le texte saisi (qui garde 16 px sur téléphone). */
body.has-bottom-nav .auth-form .form-control::placeholder {
    color: var(--adh-muted-2);
    font-size: var(--auth-placeholder-size);
    opacity: 1;
}

body.has-bottom-nav .auth-form .form-control:hover {
    border-color: #c4c9d1;
}

body.has-bottom-nav .auth-form .form-control:focus {
    border-color: var(--adh-purple);
    box-shadow: none;
}

body.has-bottom-nav .auth-form .form-control[aria-invalid="true"] {
    border-color: var(--adh-danger-text);
}

/* Date de naissance : libellé en surimpression tant que le champ est vide et sans focus ;
   le texte natif (jj/mm/aaaa) est alors masqué, l'icône de calendrier reste visible. */
.auth-date {
    position: relative;
}

.auth-date-placeholder {
    position: absolute;
    top: 0;
    left: 13px;
    display: flex;
    align-items: center;
    height: var(--auth-control-h);
    color: var(--adh-muted-2);
    font-size: var(--auth-placeholder-size);
    pointer-events: none;
}

body.has-bottom-nav .auth-form .auth-date.is-empty .form-control:not(:focus) {
    color: transparent;
}

.auth-date.is-empty .form-control:not(:focus)::-webkit-datetime-edit {
    color: transparent;
}

.auth-date:not(.is-empty) .auth-date-placeholder,
.auth-date .form-control:focus + .auth-date-placeholder {
    display: none;
}

/* Liste « Genre » : grisée et à la taille d'un placeholder tant qu'aucune valeur n'est
   choisie. !important l'emporte sur la règle anti-zoom iOS (16 px !important sous 992 px),
   qui reprend la main au focus : pas de zoom à l'ouverture de la liste. */
body.has-bottom-nav .auth-form select.form-control:not(:focus):has(option[value=""]:checked) {
    color: var(--adh-muted-2);
    font-size: var(--auth-placeholder-size) !important;
}

/* Chrome décale le texte d'une liste de 4 px : on compense pour l'aligner sur les champs. */
body.has-bottom-nav .auth-form select.form-control {
    padding-left: 8px;
}

body.has-bottom-nav .auth-form select.form-control option {
    color: var(--adh-ink);
}

.auth-password {
    position: relative;
}

body.has-bottom-nav .auth-password .form-control {
    padding-right: 40px;
}

.auth-eye {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: calc(var(--auth-control-h) - 2px);
    padding: 0;
    border: 0;
    border-radius: 0 var(--auth-radius) var(--auth-radius) 0;
    background: transparent;
    color: var(--adh-muted-2);
    font-size: 13px;
    cursor: pointer;
}

.auth-eye:hover,
.auth-eye[aria-pressed="true"] {
    color: var(--adh-purple);
}

.auth-grid {
    display: grid;
    gap: 0 10px;
}

.auth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 2px 0 16px;
}

.auth-row .custom-control-label {
    font-size: 13px;
    color: var(--adh-muted);
}

.auth-row .custom-control-label::before,
.auth-row .custom-control-label::after,
.auth-consent .custom-control-label::before,
.auth-consent .custom-control-label::after {
    top: 1px;
}

.auth-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 13px;
    font-weight: 500;
    color: var(--adh-purple);
}

.auth-consent {
    margin: 4px 0 18px;
}

.auth-consent .custom-control-label {
    font-size: 12px;
    line-height: 1.5;
    color: var(--adh-muted);
}

body.has-bottom-nav .auth-submit,
body.has-bottom-nav .auth-submit.btn {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--auth-control-h);
    min-height: 0;
    padding: 0 16px;
    border-radius: var(--auth-radius);
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: var(--auth-control-h);
    text-transform: none;
}

.auth-switch {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid #eef0f3;
    font-size: 13px;
    text-align: center;
    color: var(--adh-muted);
}

.auth-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 2px;
    font-weight: 600;
    color: var(--adh-purple);
}

.auth-error {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--adh-danger-text);
}

.auth-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--adh-muted);
}

.auth-success {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: var(--auth-radius, 6px);
    background: var(--adh-success-bg);
    color: var(--adh-success);
    font-size: 13px;
    line-height: 1.5;
}

.auth-success i {
    margin-top: 3px;
}

@media (min-width: 576px) {
    .auth-box {
        padding: 32px 36px;
    }

    .auth-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .auth-box {
        --auth-control-h: 40px;
        --auth-placeholder-size: 12.5px;
    }

    body.has-bottom-nav .auth-form .form-control {
        font-size: 14px;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F13 tiroir « Rayons »
   Recherche et onglets retirés ; sections « Rayons », « Mon compte »,
   « Vendre sur Adhimi » ; accordéons en boutons natifs.
   ========================================================================== */
.drawer-content {
    padding-top: 6px;
}

.drawer-section-title {
    margin: 12px 18px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--adh-muted);
}

.drawer-list + .drawer-section-title {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
}

.drawer-list-item > button.accordion-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.drawer-header-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -10px 0;
    font-size: 13px;
    color: #ffffff;
    text-decoration: underline;
}

.drawer-header-link:hover,
.drawer-header-link:focus {
    color: #ffffff;
}
/* Sous-catégories du tiroir : lignes de 44 px (F13). */
.drawer-sublist li a {
    display: flex;
    align-items: center;
    min-height: 44px;
}


/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — F14 page de commande
   Composants de la feuille d'achat express (cartes d'option, champs de 48 px)
   réutilisés sur la page, barre fixe « total + Confirmer » sous 992 px.
   ========================================================================== */
.checkout-page {
    --xco-accent: var(--adh-orange);          /* orange du logo : aplats, icônes, bordures d'état */
    --xco-accent-soft: rgba(var(--adh-orange-rgb), .12);
    --xco-link: var(--adh-purple);            /* violet du logo : texte coloré (9,1:1 sur blanc) */
    --xco-ink: #14181f;
    --xco-ink-2: #4a5568;
    --xco-ink-3: #5b6678;
    --xco-line: #e9edf2;
    --xco-surface-alt: #f6f8fa;
    --xco-danger: var(--adh-danger-text);
    --xco-success: var(--adh-success);
}

.checkout-page .checkout-step-card > .xco-field:last-child,
.checkout-page .checkout-step-card > .xco-options + .xco-error:last-child {
    margin-bottom: 0;
}

.checkout-page .xco-address[hidden] {
    display: none;
}

.checkout-page .xco-notes-toggle[hidden] {
    display: none;
}

/* Récapitulatif repliable : bouton natif de 44 px. */
.order-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: var(--adh-ink);
    cursor: pointer;
    text-align: left;
}

.order-summary-toggle-total {
    display: inline-flex;
    align-items: center;
    color: var(--adh-ink);
    font-weight: 800;
    white-space: nowrap;
}

.order-summary-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Barre fixe de validation (< 992 px), calée au-dessus de la barre basse. */
.checkout-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .checkout-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--mobile-nav-height, 58px) + var(--mobile-safe-bottom, 0px));
        z-index: 1040;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 64px;
        padding: 8px 16px;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(0, 0, 0, .08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
    }

    /* Le total ne se comprime jamais ; seul le bouton se replie. */
    .checkout-bar-total {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
    }

    .checkout-bar-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        color: #5b6678;
    }

    .checkout-bar-value {
        font-size: 16px;
        font-weight: 800;
        line-height: 1.1;
        color: var(--adh-ink);
        white-space: nowrap;
    }

    /* Le bouton se replie sur deux lignes si le total est long : le montant reste entier. */
    body.has-bottom-nav .checkout-bar-submit,
    body.has-bottom-nav .checkout-bar-submit.btn {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 58%;
        min-height: 44px;
        padding: 6px 14px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: none;
        white-space: normal;
        text-align: center;
    }

    body.xco-sheet-open .checkout-bar {
        opacity: 0;
        pointer-events: none;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — B03 formulaires longs du backoffice
   Barre d'action « Annuler / Sauvegarder » (fixe sous 992 px, règles de base
   plus haut dans ce fichier), section SEO repliable sous 768 px, listes
   Select2 en feuille plein écran au toucher (les !important ci-dessous
   surchargent le positionnement en ligne posé par Select2).
   ========================================================================== */
.form-sticky-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 0;
}

.form-sticky-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
}

.form-sticky-actions .btn svg {
    width: 16px;
    height: 16px;
}

.form-sticky-actions .btn.is-loading {
    pointer-events: none;
    opacity: .7;
}

@media (max-width: 991.98px) {
    .form-sticky-actions {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .form-sticky-actions .btn {
        flex: 1 1 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .form-sticky-actions .btn[type="submit"] {
        flex-grow: 2;
    }

    /* Le corps du thème a une hauteur fixe (100 %) : le dégagement se pose sur
       le pied de page, dernier élément du flux, pour agrandir le document. */
    body.has-sticky-form .footer {
        padding-bottom: 96px;
    }
}

/* Sections de formulaire : titre-bouton, corps replié sous 768 px. */
.form-section {
    margin: 4px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

body:not(.dark-layout) .form-section {
    border-top-color: #ebe9f1;
}

.form-section-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    width: 100%;
    min-height: 48px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

/* Sur ordinateur le titre n'est qu'un intitulé : pas de curseur main. */
.form-section-toggle:not(:disabled) {
    cursor: default;
}

.form-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7367f0;
}

.form-section-hint {
    grid-column: 1;
    font-size: 12px;
    line-height: 1.4;
    color: #b4b7bd;
}

body:not(.dark-layout) .form-section-hint {
    color: #6e6b7b;
}

.form-section-chevron {
    display: none;
    grid-column: 2;
    grid-row: 1 / span 2;
    transition: transform .2s ease;
}

.form-section-chevron svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 767.98px) {
    .form-section-toggle:not(:disabled) {
        cursor: pointer;
    }

    .form-section-chevron {
        display: inline-flex;
    }

    .form-section-toggle[aria-expanded="true"] .form-section-chevron {
        transform: rotate(180deg);
    }

    .form-section-body {
        display: none;
    }

    .form-section.is-open .form-section-body {
        display: flex;
    }
}

/* Select2 en feuille plein écran sous 768 px. */
@media (max-width: 767.98px) {
    .select2-container--open .select2-dropdown--sheet {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: 1061;
    }

    .select2-dropdown--sheet .select2-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px 10px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        font-weight: 600;
    }

    body:not(.dark-layout) .select2-dropdown--sheet .select2-sheet-head {
        border-bottom-color: #ebe9f1;
    }

    .select2-dropdown--sheet .select2-sheet-close {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 8px 16px;
        border: 0;
        border-radius: 8px;
        background: rgba(115, 103, 240, .16);
        color: #7367f0;
        font: inherit;
        font-weight: 600;
    }

    .select2-dropdown--sheet .select2-search--dropdown {
        padding: 10px 16px;
    }

    .select2-dropdown--sheet .select2-search--dropdown .select2-search__field {
        min-height: 48px;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 16px;
    }

    .select2-dropdown--sheet .select2-results {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .select2-dropdown--sheet .select2-results > .select2-results__options {
        max-height: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .select2-dropdown--sheet .select2-results__option {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 15px;
    }

    body.select2-sheet-open {
        overflow: hidden;
    }
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — B04 modale de confirmation unique
   ========================================================================== */
#confirm-modal .modal-body .btn {
    min-height: 44px;
    min-width: 96px;
}

#confirm-modal .modal-header .close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Correctifs audit mobile (sept. 2026) — B05 finitions backoffice
   Titre de page et fil d'Ariane, menu du profil, URL des médias, tableaux
   de bord (tuiles d'indicateurs, dernières commandes).
   ========================================================================== */
.page-heading {
    min-width: 0;
    flex-wrap: nowrap;
}

.page-heading-title {
    min-width: 0;
}

.page-title {
    display: block;
    max-width: calc(100vw - 210px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-crumb {
    font-size: 13px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .page-title {
        max-width: 260px;
    }
}

@media (min-width: 1200px) {
    .page-title {
        max-width: 480px;
    }
}

/* Menu du profil : onglets défilants sous 768 px, libellés sur deux lignes au-delà. */
.profile-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .profile-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -14px 12px;
        padding: 0 14px 6px;
    }

    .profile-nav::-webkit-scrollbar {
        display: none;
    }

    .profile-nav .nav-item {
        flex: 0 0 auto;
    }

    .profile-nav .nav-link {
        white-space: nowrap;
        margin-right: 6px;
    }
}

/* Cartes médias : les URL longues se coupent au lieu de déborder. */
.media-url {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Tableau de bord. */
.dash-welcome .card-body {
    padding: 1rem 1.25rem;
}

.dash-welcome-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.dash-welcome-avatar .avatar-content {
    width: 48px;
    height: 48px;
}

.dash-welcome-title {
    font-size: 1.15rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-welcome-sub {
    font-size: 13px;
    color: #b4b7bd;
}

body:not(.dark-layout) .dash-welcome-sub {
    color: #6e6b7b;
}

.min-w-0 {
    min-width: 0;
}

.dash-tiles > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

.dash-tiles {
    margin-left: -6px;
    margin-right: -6px;
}

.dash-tile {
    margin-bottom: 12px;
    height: calc(100% - 12px);
}

.dash-tile .card-body {
    padding: 1rem;
}

.dash-tile-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.dash-tile-icon .avatar-content {
    width: 40px;
    height: 40px;
}

.dash-tile-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.dash-tile-value.is-compact {
    font-size: 1.1rem;
}

.dash-tile-label {
    margin-top: 2px;
    font-weight: 600;
}

.dash-tile-sub {
    font-size: 12px;
    color: #b4b7bd;
}

body:not(.dark-layout) .dash-tile-sub {
    color: #6e6b7b;
}

.dash-orders .card-header {
    padding-bottom: .75rem;
}

.dash-orders-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
}

.dash-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

body:not(.dark-layout) .dash-order {
    border-top-color: #ebe9f1;
}

.dash-order-customer {
    font-weight: 600;
}

.dash-order-customer a {
    display: inline-block;
    min-height: 24px;
}

.dash-order-meta {
    font-size: 12px;
    color: #b4b7bd;
}

body:not(.dark-layout) .dash-order-meta {
    color: #6e6b7b;
}

.dash-order-side {
    flex: 0 0 auto;
    text-align: right;
}

.dash-order-total {
    font-weight: 700;
    white-space: nowrap;
}

/* ==========================================================================
   Bilan de clôture (sept. 2026) : derniers textes sous 12 px
   ========================================================================== */
header.header .cart-count {
    color: var(--adh-ink);  /* chiffre sur l'orange du logo (blanc = 2,3:1) */
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}

/* ==========================================================================
   BACKOFFICE — Socle mobile (lot 2, 2 octobre 2026)
   Navigation du bas, feuilles coulissantes (x-bo-sheet), création rapide
   de marque et de catégorie, galerie et compression des photos.
   ========================================================================== */

/* --- Barre de navigation du bas (partials/backoffice/bottom-nav) ---
   Sous 992 px : quatre destinations et « Vendre » au centre. Le fond reprend
   la surface des cartes Vuexy (sombre) ou le blanc (thème clair). La barre
   disparaît sur les formulaires longs : leur barre d'action fixe occupe le bas. */
.bo-bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {
    body.bo-has-bottom-nav {
        --bo-nav-height: 64px;
    }

    .bo-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1031;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: calc(var(--bo-nav-height) + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: #283046;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
    }

    body:not(.dark-layout) .bo-bottom-nav {
        background: #ffffff;
        border-top-color: rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    .bo-bottom-nav__item {
        flex: 1 1 0;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        border: 0;
        background: none;
        color: #b4b7bd;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    body:not(.dark-layout) .bo-bottom-nav__item {
        color: var(--adh-muted);
    }

    .bo-bottom-nav__item svg {
        width: 22px;
        height: 22px;
    }

    .bo-bottom-nav__item:hover,
    .bo-bottom-nav__item:focus {
        text-decoration: none;
        color: #ffffff;
    }

    body:not(.dark-layout) .bo-bottom-nav__item:hover,
    body:not(.dark-layout) .bo-bottom-nav__item:focus {
        color: var(--adh-purple);
    }

    .bo-bottom-nav__item:focus-visible {
        outline: 2px solid var(--adh-orange);
        outline-offset: -4px;
        border-radius: 8px;
    }

    /* Onglet actif : icône et libellé orangés sur fond sombre (contraste 7:1),
       violet sur fond clair (l'orange ne sert jamais de texte sur le blanc). */
    .bo-bottom-nav__item.is-active {
        color: var(--adh-orange);
        font-weight: 600;
    }

    body:not(.dark-layout) .bo-bottom-nav__item.is-active {
        color: var(--adh-purple);
    }

    /* Action principale : pastille orange, icône à l'encre. */
    .bo-bottom-nav__sell-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-top: -18px;
        border-radius: 50%;
        background: var(--adh-orange);
        color: var(--adh-ink);
        box-shadow: 0 4px 12px rgba(var(--adh-orange-rgb), 0.45);
    }

    .bo-bottom-nav__sell-icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.5;
    }

    .bo-bottom-nav__sell:active .bo-bottom-nav__sell-icon {
        transform: scale(0.94);
    }

    /* Place réservée sous le contenu et le pied de page. */
    body.bo-has-bottom-nav .app-content,
    body.bo-has-bottom-nav .footer {
        padding-bottom: calc(var(--bo-nav-height) + 16px + env(safe-area-inset-bottom, 0px));
    }

    /* Formulaire long : sa barre d'action fixe remplace la navigation. */
    body.has-sticky-form .bo-bottom-nav {
        display: none;
    }

    body.has-sticky-form.bo-has-bottom-nav .app-content {
        padding-bottom: 0;
    }

    /* Le tiroir du menu passe au-dessus de la barre. */
    body.menu-open .bo-bottom-nav {
        z-index: 1029;
    }
}

/* --- Champs numériques (partials/input/number) : unité F CFA accolée --- */
.input-group > .form-control + .input-group-append .input-group-text {
    min-width: 64px;
    justify-content: center;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    .app-content .input-group .input-group-text {
        min-height: 44px;
        font-size: 14px;
    }
}

/* ==========================================================================
   Lot 2 — Feuilles du backoffice (<x-bo-sheet>, public/custom/js/bo-sheet.js)
   et création rapide (partials/input/ajax-select.blade.php, quick-create.js).
   Sous 992 px : feuille qui coulisse depuis le bas, dégagée de la zone
   sûre (safe-area-inset-bottom). À partir de 992 px : modale centrée.
   Couleurs de marque : var(--adh-…) uniquement ; les neutres du panneau
   (fond, filets, texte) sont des gris locaux, clair et dark-layout Vuexy.
   z-index 1060 : au-dessus de la barre de navigation basse et des modales
   Bootstrap (1050), sous la feuille Select2 (1061) et les toasts.
   ========================================================================== */
.bo-sheet {
    --bo-sheet-bg: #fff;
    --bo-sheet-fg: var(--adh-ink);
    --bo-sheet-line: #ebe9f1;
    --bo-sheet-muted: var(--adh-muted);
    --bo-sheet-accent: var(--adh-purple);
    --bo-sheet-danger: var(--adh-danger-text);
    --bo-sheet-duration: .26s;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

body.dark-layout .bo-sheet {
    --bo-sheet-bg: #283046;
    --bo-sheet-fg: #d0d2d6;
    --bo-sheet-line: rgba(255, 255, 255, .12);
    --bo-sheet-muted: #b4b7bd;
    --bo-sheet-accent: var(--adh-orange-light);
    --bo-sheet-danger: var(--adh-danger-on-dark);
}

.bo-sheet[hidden] {
    display: none;
}

.bo-sheet-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity var(--bo-sheet-duration) ease;
}

.bo-sheet.is-open .bo-sheet-backdrop {
    opacity: 1;
}

.bo-sheet-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    background: var(--bo-sheet-bg);
    color: var(--bo-sheet-fg);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .24);
    transform: translateY(100%);
    transition: transform var(--bo-sheet-duration) cubic-bezier(.2, .8, .2, 1);
    outline: 0;
}

.bo-sheet.is-open .bo-sheet-panel {
    transform: none;
}

/* En-tête : poignée (téléphone), titre, bouton fermer de 44 px. */
.bo-sheet-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 56px;
    padding: 12px 8px 8px 16px;
    border-bottom: 1px solid var(--bo-sheet-line);
}

.bo-sheet-grip {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: var(--bo-sheet-line);
}

.bo-sheet-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    overflow-wrap: anywhere;
}

.bo-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.bo-sheet-close:hover {
    background: var(--bo-sheet-line);
}

.bo-sheet-close:focus {
    outline: 0;
}

.bo-sheet-close:focus-visible,
.bo-sheet-foot .btn:focus-visible,
.bo-quick-trigger:focus-visible {
    outline: 2px solid var(--bo-sheet-accent);
    outline-offset: 2px;
}

/* Corps défilant ; sans pied, c'est lui qui dégage la zone sûre. */
.bo-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.bo-sheet-body:last-child {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.bo-sheet-foot {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bo-sheet-line);
}

.bo-sheet-foot .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 44px;
}

.bo-sheet-foot .btn[type="submit"] {
    flex-grow: 2;
}

.bo-sheet-foot .btn.is-loading {
    pointer-events: none;
    opacity: .7;
}

/* Champs à 16 px : iOS ne zoome pas au focus. */
.bo-sheet .form-control {
    min-height: 48px;
    font-size: 16px;
}

.bo-sheet .form-control:focus {
    border-color: var(--bo-sheet-accent);
    box-shadow: 0 0 0 1px var(--bo-sheet-accent);
}

.bo-sheet label {
    font-size: 14px;
    color: inherit;
}

.bo-sheet .invalid-feedback {
    font-size: 14px;
    color: var(--bo-sheet-danger);
}

.bo-sheet .form-control.is-invalid {
    border-color: var(--bo-sheet-danger);
}

.bo-quick-hint {
    color: var(--bo-sheet-muted);
}

.bo-quick-alert {
    margin-bottom: 16px;
}

html.bo-sheet-open,
body.bo-sheet-open {
    overflow: hidden;
}

/* Bouton « + Nouvelle marque » sous la liste : cible tactile de 44 px. */
.bo-quick-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.bo-quick-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 4px;
    font-weight: 600;
    color: var(--adh-purple);
    text-decoration: none;
}

.bo-quick-trigger:hover,
.bo-quick-trigger:focus {
    color: var(--adh-purple);
    text-decoration: underline;
}

body.dark-layout .bo-quick-trigger,
body.dark-layout .bo-quick-trigger:hover,
body.dark-layout .bo-quick-trigger:focus {
    color: var(--adh-orange-light);
}

body.dark-layout .bo-quick-trigger:focus-visible {
    outline-color: var(--adh-orange-light);
}

/* À partir de 992 px : modale centrée. */
@media (min-width: 992px) {
    .bo-sheet {
        align-items: center;
        padding: 24px;
    }

    .bo-sheet-panel {
        max-width: 560px;
        max-height: calc(100vh - 48px);
        border-radius: 12px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
        opacity: 0;
        transform: translateY(16px) scale(.98);
        transition: transform var(--bo-sheet-duration) ease, opacity var(--bo-sheet-duration) ease;
    }

    .bo-sheet.is-open .bo-sheet-panel {
        opacity: 1;
        transform: none;
    }

    .bo-sheet--sm .bo-sheet-panel {
        max-width: 440px;
    }

    .bo-sheet--lg .bo-sheet-panel {
        max-width: 800px;
    }

    .bo-sheet-grip {
        display: none;
    }

    .bo-sheet-head {
        padding-top: 8px;
    }

    .bo-sheet-body:last-child,
    .bo-sheet-foot {
        padding-bottom: 16px;
    }

    .bo-sheet-foot {
        justify-content: flex-end;
    }

    .bo-sheet-foot .btn {
        flex: 0 0 auto;
        min-width: 120px;
    }

    .bo-sheet-foot .btn[type="submit"] {
        flex-grow: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-sheet {
        --bo-sheet-duration: 0s;
    }
}

/* ==========================================================================
   Backoffice : envoi d'images (lot 2, mobile d'abord)
   ==========================================================================
   Galerie produit (backoffice/{admin,merchant}/products/images.blade.php,
   public/custom/js/multi-images-upload.js) et champs <input data-compress>
   (partials/input/file.blade.php, public/custom/js/image-compress.js).
   Couleurs : jetons --adh-* uniquement. Orange = aplat (barre, bordure d'une
   case en attente), violet = focus et texte coloré, jamais l'orange en texte. */

/* Champ réduit dans le navigateur : le groupe signale le traitement en cours. */
.form-group.is-compressing .custom-file-label {
    opacity: .6;
    cursor: progress;
}
.form-group.is-compressing .custom-file-label::before {
    content: "";
    display: inline-block;
    width: .9rem;
    height: .9rem;
    margin-right: .5rem;
    vertical-align: -2px;
    border: 2px solid var(--adh-orange);
    border-right-color: transparent;
    border-radius: 50%;
    animation: adh-upload-spin .75s linear infinite;
}

@keyframes adh-upload-spin {
    to { transform: rotate(360deg); }
}

.adh-upload-hint {
    margin-bottom: 1rem;
    color: var(--adh-muted);
    font-size: .9rem;
}

/* Grille : 2 cases par ligne sur téléphone (col-6), 3 puis 4 au-delà. */
.adh-upload-grid > [class*="col-"] {
    margin-bottom: 1rem;
}

/* Le vrai champ reste focalisable au clavier mais invisible ; la case
   (<label for>) ouvre le sélecteur de fichiers sans JavaScript. */
.adh-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.adh-upload-slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 44px;              /* cible tactile minimale */
    margin: 0;
    padding: .5rem;
    border: 2px dashed var(--adh-muted-2);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.adh-upload-slot.is-filled {
    border-style: solid;
}
.adh-upload-slot:hover,
.adh-upload-slot:active {
    border-color: var(--adh-purple);
}
.adh-upload-input:focus + .adh-upload-slot,
.adh-upload-input:focus-visible + .adh-upload-slot {
    border-color: var(--adh-purple);
    outline: 2px solid var(--adh-purple);
    outline-offset: 2px;
}

/* Nouvelle photo choisie, pas encore enregistrée. */
.adh-upload-slot.is-pending {
    border-style: solid;
    border-color: var(--adh-orange);
    box-shadow: 0 0 0 3px var(--adh-orange-soft);
}

/* Cadre carré (repli padding-top pour les navigateurs sans aspect-ratio). */
.adh-upload-frame {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    border-radius: .375rem;
    background: var(--adh-orange-soft);
}
.adh-upload-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.adh-upload-slot.is-empty .adh-upload-preview {
    padding: 22%;
    object-fit: contain;
}

/* Réduction en cours dans la case : voile et anneau. */
.adh-upload-slot.is-compressing {
    cursor: progress;
}
.adh-upload-slot.is-compressing .adh-upload-preview {
    opacity: .35;
}
.adh-upload-slot.is-compressing .adh-upload-frame::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid var(--adh-orange);
    border-right-color: transparent;
    border-radius: 50%;
    animation: adh-upload-spin .75s linear infinite;
}

.adh-upload-caption {
    display: block;
    margin-top: .5rem;
    color: var(--adh-ink);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}
.adh-upload-slot.is-pending .adh-upload-caption {
    color: var(--adh-purple);
}

/* Barre de progression, statut et bouton d'envoi. */
.adh-upload-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.adh-upload-progress {
    height: .5rem;
    border-radius: .25rem;
    background: var(--adh-orange-soft);
}
.adh-upload-progress .progress-bar {
    width: 0;
    background-color: var(--adh-orange);
    transition: width .2s linear;
}
.adh-upload-status {
    margin: 0;
    color: var(--adh-muted);
    font-size: .9rem;
}
.adh-upload-status:empty {
    display: none;
}
.adh-upload-status.is-error {
    color: var(--adh-danger-text);
}
.adh-upload-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
}
.adh-upload-submit.d-none {
    display: none !important;      /* l'emporte sur display:inline-flex ci-dessus, comme l'utilitaire Bootstrap */
}
.adh-upload-submit[disabled] {
    cursor: progress;
}

@media (min-width: 768px) {
    .adh-upload-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .adh-upload-progress {
        flex: 1 1 100%;
    }
    .adh-upload-submit {
        width: auto;
        min-width: 12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adh-upload-slot,
    .adh-upload-progress .progress-bar {
        transition: none;
    }
    .form-group.is-compressing .custom-file-label::before,
    .adh-upload-slot.is-compressing .adh-upload-frame::after {
        animation-duration: 2s;
    }
}

/* ==========================================================================
   BACKOFFICE — Assistant « Vendre un article » (lot 3, 3 octobre 2026)
   Vue backoffice/sell/wizard, script custom/js/sell-wizard.js.
   ========================================================================== */

/* ==========================================================================
   Lot 3 — Assistant « Vendre un article » (resources/views/backoffice/sell/
   wizard.blade.php, public/custom/js/sell-wizard.js) et ses points d'entrée
   (tuile du tableau de bord).
   Conçu pour le téléphone : une colonne, cibles de 44 px au moins, champs à
   16 px (pas de zoom iOS), barre d'action fixe en bas sous 992 px
   (.form-sticky-actions, qui masque la navigation du bas : voulu).
   Couleurs de marque : var(--adh-…) uniquement ; les neutres (surfaces,
   filets, textes) sont ceux de Vuexy, sombre (dark-layout) et clair.
   ========================================================================== */
.sell-wizard {
    --sell-surface: #283046;
    --sell-surface-2: #161d31;
    --sell-fg: #d0d2d6;
    --sell-muted: #b4b7bd;
    --sell-line: rgba(255, 255, 255, .12);
    --sell-accent: var(--adh-orange-light);
    --sell-danger: var(--adh-danger-on-dark);

    max-width: 640px;
    margin: 0 auto;
    color: var(--sell-fg);
}

body:not(.dark-layout) .sell-wizard {
    --sell-surface: #fff;
    --sell-surface-2: #f8f8f8;
    --sell-fg: var(--adh-ink);
    --sell-muted: var(--adh-muted);
    --sell-line: #ebe9f1;
    --sell-accent: var(--adh-purple);
    --sell-danger: var(--adh-danger-text);
}

.sell-wizard [hidden] {
    display: none;
}

/* --- Progression ------------------------------------------------------- */
.sell-progress {
    margin-bottom: 16px;
}

.sell-progress__label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sell-muted);
}

.sell-progress__track {
    height: 6px;
    border-radius: 3px;
    background: var(--sell-line);
    overflow: hidden;
}

.sell-progress__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--adh-orange);
    transition: width .3s ease;
}

/* --- Écrans ------------------------------------------------------------ */
.sell-screen {
    padding: 20px 16px;
    border-radius: 12px;
    background: var(--sell-surface);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}

.sell-screen--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.sell-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
}

.sell-title:focus {
    outline: 0;
}

.sell-muted {
    color: var(--sell-muted);
}

.sell-field {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sell-label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: inherit;
}

.sell-wizard .sell-input,
.sell-sheet .sell-input {
    min-height: 48px;
    font-size: 16px;
}

.sell-wizard textarea.sell-input {
    min-height: 96px;
    resize: vertical;
}

.sell-wizard .sell-input:focus,
.sell-sheet .sell-input:focus {
    border-color: var(--sell-accent, var(--bo-sheet-accent));
    box-shadow: 0 0 0 1px var(--sell-accent, var(--bo-sheet-accent));
}

.sell-wizard .sell-input.is-invalid {
    border-color: var(--sell-danger);
}

.sell-error {
    display: none;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sell-danger, var(--bo-sheet-danger));
}

.sell-error.is-visible {
    display: block;
}

.sell-btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
}

.sell-btn-lg svg {
    width: 20px;
    height: 20px;
}

.sell-link {
    min-height: 44px;
    padding: 10px 0;
    font-weight: 600;
    color: var(--sell-accent);
}

.sell-link:hover,
.sell-link:focus {
    color: var(--sell-accent);
}

/* Focus visible commun aux commandes de l'assistant. */
.sell-wizard button:focus-visible,
.sell-wizard a:focus-visible,
.sell-sheet .sell-option:focus-visible {
    outline: 2px solid var(--sell-accent, var(--bo-sheet-accent));
    outline-offset: 2px;
}

/* --- Chargement -------------------------------------------------------- */
.sell-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border: 4px solid var(--sell-line);
    border-top-color: var(--adh-orange);
    border-radius: 50%;
    animation: sell-spin .8s linear infinite;
}

@keyframes sell-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sell-spinner {
        animation-duration: 2.4s;
    }

    .sell-progress__fill {
        transition: none;
    }
}

/* --- Départ : trois tuiles ------------------------------------------- */
.sell-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.sell-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 84px;
    padding: 14px 16px;
    border: 2px solid var(--sell-line);
    border-radius: 12px;
    background: var(--sell-surface-2);
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sell-tile:hover,
.sell-tile:active {
    border-color: var(--adh-orange);
}

.sell-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--adh-orange);
    color: var(--adh-ink);
}

.sell-tile__icon svg {
    width: 26px;
    height: 26px;
}

.sell-tile__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sell-tile__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.sell-tile__hint {
    font-size: 14px;
    color: var(--sell-muted);
}

/* --- Recherche (catalogue, mes articles) -------------------------------- */
.sell-search {
    margin-top: 16px;
}

.sell-search__status {
    min-height: 20px;
    margin: 8px 0;
    font-size: 14px;
}

.sell-results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sell-result {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 8px 4px;
    border: 0;
    border-bottom: 1px solid var(--sell-line);
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sell-result:disabled {
    opacity: .6;
}

.sell-result__img {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--sell-surface-2);
}

.sell-result__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.sell-result__name {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sell-result__meta {
    font-size: 13px;
    color: var(--sell-muted);
}

.sell-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-size: 12px;
    font-weight: 600;
}

/* --- Admin : choix de la boutique ---------------------------------------- */
.sell-choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sell-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 10px 14px;
    border: 2px solid var(--sell-line);
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

.sell-choice input {
    width: 20px;
    height: 20px;
    accent-color: var(--adh-orange);
}

.sell-choice.is-selected {
    border-color: var(--adh-orange);
    background: var(--adh-orange-soft);
}

.sell-choice:focus-within {
    outline: 2px solid var(--sell-accent);
    outline-offset: 2px;
}

/* --- Photos -------------------------------------------------------------- */
.sell-file {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sell-file:focus-visible + label {
    outline: 2px solid var(--sell-accent);
    outline-offset: 2px;
}

.sell-photo-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.sell-photo-actions .sell-btn-lg {
    width: 100%;
    margin: 0;
}

.sell-photo-actions .disabled {
    pointer-events: none;
    opacity: .5;
}

.sell-photo-counter {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sell-muted);
}

.sell-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sell-photo {
    min-width: 0;
    border: 2px solid var(--sell-line);
    border-radius: 10px;
    background: var(--sell-surface-2);
    overflow: hidden;
}

.sell-photo:first-child {
    border-color: var(--adh-orange);
}

.sell-photo.is-error {
    border-color: var(--sell-danger);
}

.sell-photo.is-dragging {
    opacity: .5;
}

.sell-photo__frame {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--sell-surface-2);
}

.sell-photo__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sell-photo.is-uploading .sell-photo__frame img {
    opacity: .6;
}

.sell-photo__main {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-size: 12px;
    font-weight: 700;
}

.sell-photo__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(0, 0, 0, .35);
}

.sell-photo__bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--adh-orange);
    transition: width .2s linear;
}

.sell-photo__status {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 12px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}

.sell-photo__tools {
    display: flex;
    justify-content: space-between;
}

.sell-photo__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.sell-photo__btn:disabled {
    opacity: .3;
    cursor: default;
}

.sell-photo__btn--danger {
    color: var(--sell-danger);
}

@media (min-width: 768px) {
    .sell-photos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sell-photo-actions {
        flex-direction: row;
    }
}

/* --- L'article : sélecteurs en feuille ---------------------------------- */
.sell-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--sell-line);
    border-radius: 6px;
    background: var(--sell-surface-2);
    color: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

body:not(.dark-layout) .sell-picker {
    border-color: #d8d6de;
    background: #fff;
}

.sell-picker__value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sell-picker__value.is-placeholder {
    color: var(--sell-muted);
}

.sell-picker svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--sell-muted);
}

.sell-languages {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sell-line);
}

.sell-languages__summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sell-accent);
    cursor: pointer;
}

/* --- Prix et stock ------------------------------------------------------- */
.sell-price .sell-price__input {
    font-size: 20px;
    font-weight: 700;
    color: inherit;
}

.sell-price .input-group-text {
    min-height: 48px;
    font-size: 15px;
    font-weight: 600;
}

.sell-stepper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 240px;
}

.sell-stepper__btn {
    flex: 0 0 52px;
    width: 52px;
    min-height: 48px;
    border: 1px solid var(--sell-line);
    border-radius: 8px;
    background: var(--sell-surface-2);
    color: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

body:not(.dark-layout) .sell-stepper__btn {
    border-color: #d8d6de;
}

.sell-stepper__btn:active {
    border-color: var(--adh-orange);
    background: var(--adh-orange-soft);
}

.sell-wizard .sell-stepper__input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.sell-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sell-pill {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.sell-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sell-pill span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 2px solid var(--sell-line);
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
}

body:not(.dark-layout) .sell-pill span {
    border-color: #d8d6de;
}

.sell-pill.is-selected span,
.sell-pill input:checked + span {
    border-color: var(--adh-orange);
    background: var(--adh-orange);
    color: var(--adh-ink);
}

.sell-pill input:focus-visible + span {
    outline: 2px solid var(--sell-accent);
    outline-offset: 2px;
}

.sell-existing {
    margin-bottom: 20px;
}

.sell-existing__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--sell-line);
    border-radius: 10px;
    background: var(--sell-surface-2);
}

.sell-existing__card img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

/* --- Aperçu : carte façon vitrine (fond blanc dans les deux thèmes) ---- */
.sell-preview {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.sell-card {
    width: 100%;
    max-width: 260px;
    border-radius: 12px;
    background: #fff;
    color: var(--adh-ink);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.sell-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f4f4f4;
}

.sell-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sell-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-size: 12px;
    font-weight: 700;
}

.sell-card__body {
    padding: 12px 14px 14px;
}

.sell-card .sell-card__category {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--adh-muted);
}

/* Double classe : l'emporte sur « .dark-layout h3 » de Vuexy (texte clair). */
.sell-card .sell-card__name {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--adh-ink);
    overflow-wrap: anywhere;
}

.sell-card .sell-card__price {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--adh-ink);
}

.sell-card .sell-card__shop {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--adh-purple);
}

.sell-notice {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid var(--adh-success);
    border-radius: 6px;
    background: rgba(var(--adh-success-rgb), .12);
    font-size: 15px;
}

.sell-notice.is-review {
    border-left-color: var(--adh-orange);
    background: var(--adh-orange-soft);
}

/* --- Confirmation ------------------------------------------------------- */
.sell-done__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--adh-success);
    color: #fff;
}

.sell-done__message {
    max-width: 420px;
    font-size: 16px;
}

.sell-done__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
}

.sell-done__actions .btn {
    width: 100%;
    margin: 0;
}

/* --- Barre d'action ------------------------------------------------------ */
.sell-actions {
    margin-top: 16px;
}

.sell-actions .sell-actions__next {
    flex-grow: 2;
}

.sell-actions .btn:disabled {
    opacity: .55;
}

@media (max-width: 991.98px) {
    /* Place de la barre fixe sous le dernier écran. */
    .sell-page .content-body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .sell-actions {
        margin-top: 0;
        z-index: 1032;
    }
}

@media (min-width: 992px) {
    .sell-screen {
        padding: 28px;
    }

    .sell-actions {
        justify-content: space-between;
    }

    .sell-actions .btn {
        min-width: 160px;
    }
}

/* --- Feuilles plein écran (catégorie, marque) -------------------------- */
@media (max-width: 991.98px) {
    .bo-sheet--full .bo-sheet-panel {
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .bo-sheet--full .bo-sheet-grip {
        display: none;
    }
}

@media (min-width: 992px) {
    .bo-sheet--full .bo-sheet-panel {
        height: calc(100vh - 48px);
    }
}

.sell-sheet .bo-sheet-body {
    padding-top: 0;
}

.sell-sheet__search {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -16px 8px;
    width: calc(100% + 32px);
    padding-left: 16px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: var(--bo-sheet-bg);
    color: var(--bo-sheet-fg);
}

.sell-sheet__search:focus {
    box-shadow: none;
}

.sell-option-group {
    margin: 16px 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bo-sheet-muted);
}

.sell-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 4px;
    border: 0;
    border-bottom: 1px solid var(--bo-sheet-line);
    background: none;
    color: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.sell-option.is-selected {
    font-weight: 700;
    color: var(--bo-sheet-accent);
}

.sell-option__label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sell-option__meta {
    font-size: 13px;
    font-weight: 400;
    color: var(--bo-sheet-muted);
}

.sell-option__check {
    flex: 0 0 auto;
    font-size: 18px;
}

.sell-option--create {
    font-weight: 600;
    color: var(--bo-sheet-accent);
}

/* --- Tableau de bord : tuile « + Vendre un article » --------------------- */
.dash-sell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    margin-bottom: 1.5rem;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--adh-orange);
    color: var(--adh-ink);
    box-shadow: 0 6px 18px rgba(var(--adh-orange-rgb), .35);
    text-decoration: none;
}

.dash-sell:hover,
.dash-sell:focus {
    color: var(--adh-ink);
    text-decoration: none;
}

.dash-sell:focus-visible {
    outline: 3px solid var(--adh-purple);
    outline-offset: 2px;
}

body.dark-layout .dash-sell:focus-visible {
    outline-color: var(--adh-orange-light);
}

.dash-sell__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--adh-ink);
    color: var(--adh-orange);
}

.dash-sell__icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.5;
}

.dash-sell__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dash-sell__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.dash-sell__hint {
    font-size: 14px;
}

.dash-sell__chevron {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

@media (min-width: 992px) {
    .dash-sell {
        display: inline-flex;
        min-height: 0;
        padding: 10px 18px;
    }
}

/* ==========================================================================
   BACKOFFICE — Brouillons hors ligne de l'assistant (lot 4, 3 octobre 2026)
   Mes brouillons, bandeau hors ligne, écrans « à envoyer » et « reconnexion ».
   ========================================================================== */

/* ==========================================================================
   Lot 4 — Brouillons hors ligne de l'assistant « Vendre un article »
   (resources/views/backoffice/sell/wizard.blade.php, sell-wizard.js) :
   bandeau hors ligne, indicateur « Enregistré sur ce téléphone », liste
   « Mes brouillons », photo en attente de réseau, écran « à envoyer ».
   À placer après le bloc du lot 3 : réutilise ses variables --sell-*
   (sombre par défaut, clair sous body:not(.dark-layout)).
   Couleurs de marque : var(--adh-…) ; neutres : ceux de Vuexy.
   Cibles de 44 px au moins ; ruptures 767.98 / 991.98.
   ========================================================================== */

/* --- Bandeau hors ligne ------------------------------------------------- */
.sell-offline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border-left: 4px solid var(--adh-orange);
    background: #161d31;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.sell-offline svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--adh-orange-light);
}

body:not(.dark-layout) .sell-offline {
    background: var(--adh-ink);
    color: #fff;
}

/* --- Indicateur « Enregistré sur ce téléphone » ------------------------- */
.sell-saved {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--sell-muted);
}

.sell-saved svg {
    color: var(--adh-success-on-dark);
}

body:not(.dark-layout) .sell-saved svg {
    color: var(--adh-success);
}

.sell-saved.is-fresh {
    animation: sell-saved-in .6s ease;
}

@keyframes sell-saved-in {
    from { opacity: .3; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sell-saved.is-fresh {
        animation: none;
    }
}

/* --- Stockage local indisponible ---------------------------------------- */
.sell-store-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 4px solid var(--adh-orange);
    border-radius: 6px;
    background: var(--adh-orange-soft);
    color: var(--sell-fg);
    font-size: 14px;
}

/* --- Mes brouillons ------------------------------------------------------ */
.sell-drafts {
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sell-surface);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}

.sell-drafts__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: inherit;
}

.sell-drafts__notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 4px solid var(--adh-orange);
    border-radius: 6px;
    background: var(--adh-orange-soft);
    font-size: 14px;
}

.sell-drafts__notice .sell-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--sell-accent);
    text-decoration: underline;
}

.sell-drafts__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sell-draft {
    padding: 10px;
    border: 1px solid var(--sell-line);
    border-radius: 10px;
    background: var(--sell-surface-2);
}

.sell-draft.is-failed,
.sell-draft.is-auth_required {
    border-left: 4px solid var(--sell-danger);
}

.sell-draft.is-queued,
.sell-draft.is-sending {
    border-left: 4px solid var(--adh-orange);
}

.sell-draft__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sell-draft__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--sell-surface);
}

.sell-draft__thumb--empty {
    display: block;
    border: 1px dashed var(--sell-line);
}

.sell-draft__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.sell-draft__name {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sell-draft__meta {
    font-size: 13px;
    color: var(--sell-muted);
}

.sell-draft__state {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--sell-line);
    color: var(--sell-fg);
}

.sell-draft__state--queued,
.sell-draft__state--sending {
    background: var(--adh-orange);
    color: var(--adh-ink);
}

.sell-draft__state--published {
    background: rgba(var(--adh-success-rgb), .2);
    color: var(--adh-success-on-dark);
}

.sell-draft__state--failed,
.sell-draft__state--auth_required {
    background: rgba(var(--adh-danger-fill-rgb), .18);
    color: var(--adh-danger-on-dark);
}

body:not(.dark-layout) .sell-draft__state--published {
    background: var(--adh-success-bg);
    color: var(--adh-success);
}

body:not(.dark-layout) .sell-draft__state--failed,
body:not(.dark-layout) .sell-draft__state--auth_required {
    background: rgba(var(--adh-danger-text-rgb), .1);
    color: var(--adh-danger-text);
}

.sell-draft__actions,
.sell-draft__confirm {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.sell-draft__confirm[hidden] {
    display: none;
}

.sell-draft__confirm {
    padding-top: 10px;
    border-top: 1px solid var(--sell-line);
}

.sell-draft__confirm-text {
    flex: 1 0 100%;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.sell-draft__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 44px;
    font-size: 15px;
}

/* --- Photo gardée sur le téléphone (en attente de réseau) --------------- */
.sell-photo.is-local {
    border-color: var(--adh-orange);
}

.sell-photo.is-local .sell-photo__status {
    background: var(--adh-orange);
    color: var(--adh-ink);
}

/* --- Écran « à envoyer » -------------------------------------------------- */
.sell-done__icon--queued {
    background: var(--adh-orange);
    color: var(--adh-ink);
}

/* --- Tablette et plus ------------------------------------------------------ */
@media (min-width: 768px) {
    .sell-draft {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
    }

    .sell-draft__main {
        flex: 1 1 260px;
    }

    .sell-draft__actions {
        flex: 0 0 auto;
        margin-top: 0;
    }

    .sell-draft__btn {
        flex: 0 0 auto;
        min-width: 120px;
    }

    .sell-draft__confirm {
        flex: 1 0 100%;
    }
}

@media (min-width: 992px) {
    .sell-drafts {
        padding: 20px 28px;
    }
}

/* ==========================================================================
   BACKOFFICE — Fiche remplie par l'IA (lot 5, 3 octobre 2026)
   Panneau « Remplir avec l'IA », badges « Suggéré par l'IA », propositions.
   ========================================================================== */

/* ==========================================================================
   Lot 5 — Fiche remplie par l'IA dans l'assistant « Vendre un article »
   (resources/views/backoffice/sell/wizard.blade.php, partials/ai-panel.blade.php,
   sell-wizard.js) : bouton « ✨ Remplir avec l'IA », attente annulable,
   badge « Suggéré par l'IA », cartes « L'IA propose : Remplacer / Garder »,
   marque reconnue, bandeau « Vérifiez et corrigez si besoin ».
   À placer après les blocs des lots 3 et 4 : réutilise les variables --sell-*
   (sombre par défaut, clair sous body:not(.dark-layout)).
   Couleurs de marque : var(--adh-…) ; neutres : ceux de Vuexy. L'orange ne
   sert qu'aux aplats, bordures et icônes, jamais au texte sur fond clair :
   le texte posé sur l'orange est --adh-ink.
   Cibles de 44 px au moins, champs à 16 px ; ruptures 767.98 / 991.98.
   ========================================================================== */

/* --- Panneau IA (étapes Photos et L'article) ----------------------------- */
.sell-ai {
    margin: 0 0 20px;
    padding: 14px;
    border: 1px solid rgba(var(--adh-orange-rgb), .45);
    border-radius: 12px;
    background: var(--adh-orange-soft);
}

.sell-ai--photos {
    margin: 16px 0 12px;
}

.sell-ai--translate {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
}

.sell-ai__hint {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sell-fg);
}

.sell-ai__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    border: 2px solid var(--adh-orange);
    border-radius: 10px;
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: filter .15s ease, box-shadow .15s ease;
}

.sell-ai__btn:hover,
.sell-ai__btn:active {
    filter: brightness(.95);
}

.sell-ai__btn:focus {
    outline: none;
}

.sell-ai__btn:focus-visible {
    box-shadow: 0 0 0 3px var(--sell-surface), 0 0 0 5px var(--sell-accent);
}

.sell-ai__btn:disabled {
    filter: none;
    opacity: .55;
    cursor: not-allowed;
}

.sell-ai__spark {
    font-size: 20px;
    line-height: 1;
}

/* « Traduire », et « L'article » une fois la fiche remplie : bouton secondaire
   (contour orange, texte neutre), sans cadre autour. */
.sell-ai.is-compact {
    padding: 0;
    border: 0;
    background: transparent;
}

.sell-ai.is-compact .sell-ai__btn,
.sell-ai--translate .sell-ai__btn {
    width: auto;
    min-height: 44px;
    padding: 8px 16px;
    background: transparent;
    color: var(--sell-fg);
    font-size: 15px;
}

.sell-ai.is-compact .sell-ai__btn:hover,
.sell-ai.is-compact .sell-ai__btn:active,
.sell-ai--translate .sell-ai__btn:hover,
.sell-ai--translate .sell-ai__btn:active {
    filter: none;
    background: var(--adh-orange-soft);
}

.sell-ai__meta,
.sell-ai__result {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--sell-muted);
}

.sell-ai__meta.is-quota {
    margin-top: 0;
    font-weight: 600;
    color: var(--sell-fg);
}

.sell-ai__result {
    color: var(--sell-fg);
}

.sell-ai__error {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-left: 4px solid var(--sell-danger);
    border-radius: 6px;
    background: rgba(var(--adh-danger-text-rgb), .12);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sell-fg);
}

/* Attente : points animés, texte qui évolue, « Annuler ». */
.sell-ai__busy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 12px;
}

.sell-ai__busy[hidden] {
    display: none;
}

.sell-ai__dots {
    display: inline-flex;
    gap: 5px;
}

.sell-ai__dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--adh-orange);
    animation: sell-ai-dot 1.2s ease-in-out infinite;
}

.sell-ai__dots span:nth-child(2) {
    animation-delay: .15s;
}

.sell-ai__dots span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes sell-ai-dot {
    0%, 80%, 100% {
        transform: scale(.6);
        opacity: .5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.sell-ai__busy-text {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sell-fg);
}

.sell-ai__cancel {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
}

.sell-ai.is-busy .sell-ai__btn {
    opacity: .55;
}

/* --- Bandeau « Vérifiez et corrigez si besoin » -------------------------- */
.sell-ai-notice {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 4px solid var(--adh-orange);
    border-radius: 6px;
    background: var(--adh-orange-soft);
    font-size: 15px;
    line-height: 1.45;
    color: var(--sell-fg);
}

/* --- Badge « Suggéré par l'IA » ------------------------------------------ */
.sell-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid rgba(var(--adh-orange-rgb), .6);
    border-radius: 999px;
    background: var(--adh-orange-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    color: var(--sell-fg);
    white-space: nowrap;
}

.sell-wizard .sell-ai-badge[hidden] {
    display: none;
}

/* --- Carte « L'IA propose : … — Remplacer / Garder » --------------------- */
.sell-ai-proposal,
.sell-ai-brand {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed rgba(var(--adh-orange-rgb), .7);
    border-radius: 8px;
    background: var(--sell-surface-2);
}

.sell-ai-proposal__text {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--sell-fg);
}

.sell-ai-proposal__label {
    font-weight: 600;
    color: var(--sell-muted);
}

.sell-ai-proposal__value {
    display: block;
    max-height: 10.5em;
    margin-top: 2px;
    overflow-y: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.sell-ai-proposal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sell-ai-proposal__btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
}

.sell-wizard .sell-ai-proposal__btn--replace {
    border: 1px solid var(--adh-orange);
    background: var(--adh-orange);
    color: var(--adh-ink);
}

.sell-wizard .sell-ai-proposal__btn--replace:hover,
.sell-wizard .sell-ai-proposal__btn--replace:focus {
    color: var(--adh-ink);
    filter: brightness(.95);
}

.sell-wizard .sell-ai-proposal__btn--replace:disabled {
    opacity: .6;
}

.sell-ai-brand .sell-error {
    margin-top: 6px;
}

/* --- Thème clair ---------------------------------------------------------- */
body:not(.dark-layout) .sell-ai {
    border-color: rgba(var(--adh-orange-rgb), .55);
    background: var(--adh-orange-tint);
}

body:not(.dark-layout) .sell-ai--translate,
body:not(.dark-layout) .sell-ai.is-compact {
    background: transparent;
}

body:not(.dark-layout) .sell-ai-badge {
    background: var(--adh-orange-tint);
    color: var(--adh-ink);
}

body:not(.dark-layout) .sell-ai-proposal,
body:not(.dark-layout) .sell-ai-brand {
    background: #fff;
}

body:not(.dark-layout) .sell-ai__error {
    background: rgba(var(--adh-danger-text-rgb), .07);
}

/* --- Ordinateur : le bouton garde une largeur raisonnable ----------------- */
@media (min-width: 768px) {
    .sell-ai__btn {
        width: auto;
        min-width: 280px;
    }

    .sell-ai-proposal__btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .sell-ai-badge {
        margin-left: 0;
        margin-top: 4px;
    }
}

/* --- Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .sell-ai__dots span {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .sell-ai__btn {
        transition: none;
    }
}

/* ==========================================================================
   BACKOFFICE — Photos retouchées par l'IA (lot 5, 3 octobre 2026)
   Fond blanc par défaut, « Mettre en valeur », comparaison avant/après.
   ========================================================================== */

/* ==========================================================================
   Lot 5 — Photos par IA dans l'assistant « Vendre un article »
   (resources/views/backoffice/sell/wizard.blade.php, sell-wizard.js) :
   fond blanc par défaut sur la photo principale, badge « Fond blanc (IA) »,
   bascule « Revenir à l'original » avec la miniature de l'autre version,
   bouton « ✨ Mettre en valeur », feuille #sell-photo-ai-sheet (consignes,
   idées cliquables, attente annulable, comparaison avant / après) et mention
   de l'aperçu.
   À placer APRÈS les blocs des lots 3, 4 et 5 (fiche par IA) : réutilise
   les variables --sell-* (sombre par défaut, clair sous
   body:not(.dark-layout)) et .sell-ai__btn. La feuille vit hors de
   .sell-wizard : elle reçoit ses --sell-* depuis les --bo-sheet-*.
   Couleurs de marque : var(--adh-…) ; neutres : ceux de Vuexy. L'orange ne
   sert qu'aux aplats, bordures et icônes, jamais au texte sur fond clair :
   le texte posé sur l'orange est --adh-ink.
   Cibles de 44 px au moins, champs à 16 px ; ruptures 767.98 / 991.98.
   ========================================================================== */

/* --- Vignettes : retouche en cours ------------------------------------- */
.sell-photo.is-ai-busy .sell-photo__frame::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(var(--adh-orange-rgb), .28) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: sell-photo-ai-shimmer 1.6s linear infinite;
    pointer-events: none;
}

.sell-photo.is-ai-busy .sell-photo__frame img {
    opacity: .75;
}

@keyframes sell-photo-ai-shimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

/* Version IA publiée : liseré orange discret (la principale l'a déjà). */
.sell-photo.is-ai {
    border-color: rgba(var(--adh-orange-rgb), .65);
}

/* --- Badge « Fond blanc (IA) » sur la vignette ---------------------------- */
.sell-photo__ai-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--adh-orange-tint);
    border: 1px solid var(--adh-orange);
    color: var(--adh-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Ligne IA sous les outils de la vignette ------------------------------ */
.sell-photo__ai {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 6px 6px;
}

.sell-photo__ai-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 4px 8px;
    border: 1px solid var(--sell-line);
    border-radius: 8px;
    background: var(--sell-surface);
    color: var(--sell-fg);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sell-photo__ai-btn:hover,
.sell-photo__ai-btn:active {
    border-color: var(--sell-accent);
}

.sell-photo__ai-btn span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* « ✨ Mettre en valeur » : contour orange, texte neutre. */
.sell-photo__ai-btn--enhance {
    border: 2px solid var(--adh-orange);
    background: transparent;
}

.sell-photo__ai-btn--enhance:hover,
.sell-photo__ai-btn--enhance:active {
    border-color: var(--adh-orange);
    background: var(--adh-orange-soft);
}

/* Miniature de l'autre version (l'original « juste à côté »). */
.sell-photo__ai-thumb {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--sell-line);
    object-fit: cover;
    background: #fff;
}

.sell-photo__ai-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--sell-muted);
}

/* --- Aperçu : mention discrète ------------------------------------------- */
.sell-preview-ai {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--adh-orange);
    border-radius: 0 8px 8px 0;
    background: var(--adh-orange-soft);
    color: var(--sell-fg);
    font-size: 14px;
    line-height: 1.4;
}

.sell-preview-ai::before {
    content: "✨";
    flex: 0 0 auto;
}

/* --- Feuille « Mettre en valeur » ----------------------------------------- */
.sell-pai {
    --sell-surface: var(--bo-sheet-bg);
    --sell-surface-2: #f8f8f8;
    --sell-fg: var(--bo-sheet-fg);
    --sell-muted: var(--bo-sheet-muted);
    --sell-line: var(--bo-sheet-line);
    --sell-accent: var(--bo-sheet-accent);
    --sell-danger: var(--bo-sheet-danger);
}

body.dark-layout .sell-pai {
    --sell-surface-2: #161d31;
}

.sell-pai .bo-sheet-body {
    padding-top: 4px;
    padding-bottom: 24px;
}

.sell-pai__current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.sell-pai__current-img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--sell-line);
    object-fit: cover;
    background: var(--sell-surface-2);
}

.sell-pai__promise {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sell-fg);
}

.sell-pai__white {
    margin: 0 0 20px;
    padding: 12px;
    border: 1px solid var(--sell-line);
    border-radius: 12px;
    background: var(--sell-surface-2);
}

.sell-pai__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
}

.sell-pai__hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sell-muted);
}

.sell-pai .sell-pai__input {
    min-height: 96px;
    font-size: 16px;
    resize: vertical;
}

.sell-pai__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.sell-pai__row .sell-pai__hint {
    margin-top: 6px;
}

.sell-pai__count {
    flex: 0 0 auto;
    margin: 6px 0 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--sell-muted);
}

.sell-pai__examples-title {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sell-fg);
}

.sell-pai__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.sell-pai__chip {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--sell-line);
    border-radius: 22px;
    background: var(--sell-surface);
    color: var(--sell-fg);
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sell-pai__chip:hover,
.sell-pai__chip:active {
    border-color: var(--adh-orange);
    background: var(--adh-orange-soft);
}

.sell-pai__error {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--sell-danger);
    border-radius: 0 8px 8px 0;
    background: rgba(var(--adh-danger-text-rgb), .08);
    color: var(--sell-danger);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.sell-pai .sell-pai__generate {
    width: 100%;
}

.sell-pai__quota {
    margin: 8px 0 0;
    font-size: 14px;
    text-align: center;
    color: var(--sell-muted);
}

.sell-pai__quota.is-quota {
    color: var(--sell-fg);
    font-weight: 600;
}

/* Attente : rassurante, annulable. */
.sell-pai__busy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 8px;
    text-align: center;
}

.sell-pai__busy[hidden] {
    display: none;
}

.sell-pai__spinner {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border: 4px solid var(--sell-line);
    border-top-color: var(--adh-orange);
    border-radius: 50%;
    animation: sell-pai-spin .9s linear infinite;
}

@keyframes sell-pai-spin {
    to {
        transform: rotate(360deg);
    }
}

.sell-pai__busy-text {
    min-height: 48px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sell-fg);
}

.sell-pai__busy .sell-pai__hint {
    max-width: 360px;
    margin: 4px 0 20px;
}

.sell-pai__busy .sell-pai__btn {
    width: auto;
    min-width: 160px;
}

/* Comparaison avant / après, côte à côte même sur téléphone. */
.sell-pai__compare-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--sell-fg);
}

.sell-pai__compare-title:focus {
    outline: none;
}

.sell-pai__compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sell-pai__figure {
    margin: 0;
    min-width: 0;
}

.sell-pai__figure img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--sell-line);
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
}

.sell-pai__figure--after img {
    border-color: var(--adh-orange);
}

.sell-pai__figure figcaption {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--sell-fg);
}

.sell-pai__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.sell-pai__again {
    align-self: center;
    color: var(--sell-accent);
}

.sell-pai__chip:focus-visible,
.sell-pai__btn:focus-visible,
.sell-pai__again:focus-visible,
.sell-photo__ai-btn:focus-visible {
    outline: 2px solid var(--sell-accent);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .sell-photo__ai-btn {
        font-size: 12px;
    }

    .sell-photo__ai-thumb {
        width: 28px;
        height: 28px;
    }
}

@media (min-width: 768px) {
    .sell-pai__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sell-pai__actions .sell-pai__btn {
        width: auto;
        flex: 1 1 0;
    }

    .sell-pai__again {
        flex: 0 0 100%;
    }
}

@media (min-width: 992px) {
    .sell-pai__white .sell-pai__btn {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sell-photo.is-ai-busy .sell-photo__frame::after {
        animation: none;
        background: rgba(var(--adh-orange-rgb), .18);
    }

    .sell-pai__spinner {
        animation-duration: 2.4s;
    }
}

/* ==========================================================================
   BACKOFFICE — File de validation des articles (lot 6, 3 octobre 2026)
   admin/moderation, statut côté marchand, bandeau de refus.
   ========================================================================== */

/* ==========================================================================
   Lot 6 — File de modération (resources/views/backoffice/admin/moderation,
   partials/backoffice/admin/moderation-card, public/custom/js/moderation.js),
   pastille « Validation » de la barre du bas, statut et bandeau de décision
   côté marchand (partials/backoffice/moderation-status, merchant/moderation-banner).
   Sombre par défaut (dark-layout de Vuexy), clair sous body:not(.dark-layout).
   Couleurs de marque : var(--adh-…) ; neutres : ceux de Vuexy.
   Cibles de 44 px au moins ; champs en 16 px (pas de zoom iOS) ;
   ruptures 767.98 / 991.98.
   ========================================================================== */

/* --- En-tête et filtres ---------------------------------------------------- */
.adh-mod__head {
    margin: 0 0 12px;
}

.adh-mod__title {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 600;
    color: #d0d2d6;
}

.adh-mod__intro {
    margin: 0;
    color: #b4b7bd;
    font-size: 14px;
    line-height: 1.45;
}

body:not(.dark-layout) .adh-mod__title {
    color: #5e5873;
}

body:not(.dark-layout) .adh-mod__intro {
    color: #6e6b7b;
}

.adh-mod__filters {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 2px 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.adh-mod__filters::-webkit-scrollbar {
    display: none;
}

.adh-mod__filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #3b4253;
    border-radius: 999px;
    background: #283046;
    color: #d0d2d6;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.adh-mod__filter:hover,
.adh-mod__filter:focus {
    color: #ffffff;
    text-decoration: none;
    border-color: var(--adh-orange);
}

.adh-mod__filter:focus-visible {
    outline: 2px solid var(--adh-orange);
    outline-offset: 2px;
}

.adh-mod__filter.is-active {
    border-color: var(--adh-orange);
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-weight: 600;
}

.adh-mod__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 600;
}

.adh-mod__filter.is-active .adh-mod__filter-count {
    background: rgba(20, 24, 31, 0.16);
}

body:not(.dark-layout) .adh-mod__filter {
    border-color: #ebe9f1;
    background: #ffffff;
    color: #5e5873;
}

body:not(.dark-layout) .adh-mod__filter:hover,
body:not(.dark-layout) .adh-mod__filter:focus {
    color: var(--adh-purple);
    border-color: var(--adh-orange);
}

body:not(.dark-layout) .adh-mod__filter.is-active {
    border-color: var(--adh-orange);
    background: var(--adh-orange);
    color: var(--adh-ink);
}

body:not(.dark-layout) .adh-mod__filter-count {
    background: rgba(20, 24, 31, 0.08);
}

/* --- Barre « Tout sélectionner » ----------------------------------------- */
.adh-mod__toolbar {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
}

.adh-mod__select-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 0 4px;
    color: #b4b7bd;
    font-size: 14px;
    cursor: pointer;
}

body:not(.dark-layout) .adh-mod__select-all {
    color: #6e6b7b;
}

.adh-mod__select-all input,
.adh-mod-card__check {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--adh-orange);
    cursor: pointer;
}

/* --- Liste et cartes ------------------------------------------------------- */
.adh-mod__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .adh-mod__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .adh-mod__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.adh-mod-card {
    min-width: 0;
}

.adh-mod-card[hidden],
.adh-mod-card.is-gone {
    display: none;
}

.adh-mod-card__inner {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
        "media body"
        "actions actions";
    gap: 12px;
    height: 100%;
    padding: 12px;
    border: 1px solid #3b4253;
    border-radius: 12px;
    background: #283046;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.24);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:not(.dark-layout) .adh-mod-card__inner {
    border-color: #ebe9f1;
    background: #ffffff;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
}

.adh-mod-card.is-selected .adh-mod-card__inner {
    border-color: var(--adh-orange);
    box-shadow: 0 0 0 2px rgba(var(--adh-orange-rgb), 0.45);
}

/* Case de sélection : posée sur la photo, zone de 44 px. */
.adh-mod-card__select {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 10px;
    background: rgba(22, 29, 49, 0.72);
    cursor: pointer;
}

.adh-mod-card__select[hidden] {
    display: none;
}

body:not(.dark-layout) .adh-mod-card__select {
    background: rgba(255, 255, 255, 0.9);
}

.adh-mod-card__media {
    grid-area: media;
    position: relative;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 10px;
    background: #161d31;
}

body:not(.dark-layout) .adh-mod-card__media {
    background: #f8f8f8;
}

.adh-mod-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adh-mod-card__no-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    color: #b4b7bd;
    font-size: 11px;
    text-align: center;
}

body:not(.dark-layout) .adh-mod-card__no-photo {
    color: var(--adh-muted);
}

.adh-mod-card__no-photo svg {
    width: 24px;
    height: 24px;
}

/* Photo retouchée par l'IA : à vérifier d'un coup d'œil. */
.adh-mod-card__ai {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 4px;
    border-radius: 6px;
    background: var(--adh-orange-tint);
    color: var(--adh-ink);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.adh-mod-card__ai svg {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    color: var(--adh-ink);
}

.adh-mod-card__body {
    grid-area: body;
    min-width: 0;
}

.adh-mod-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 4px;
    color: #b4b7bd;
    font-size: 12px;
}

body:not(.dark-layout) .adh-mod-card__meta {
    color: var(--adh-muted);
}

.adh-mod-card__kind {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.adh-mod-card__kind--new {
    background: var(--adh-orange);
    color: var(--adh-ink);
}

.adh-mod-card__kind--offer {
    background: rgba(255, 255, 255, 0.1);
    color: #d0d2d6;
}

body:not(.dark-layout) .adh-mod-card__kind--offer {
    background: #f3f2f7;
    color: #5e5873;
}

.adh-mod-card__title {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #d0d2d6;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body:not(.dark-layout) .adh-mod-card__title {
    color: var(--adh-ink);
}

.adh-mod-card__price {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

body:not(.dark-layout) .adh-mod-card__price {
    color: var(--adh-ink);
}

.adh-mod-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.35;
}

.adh-mod-card__facts > div {
    min-width: 0;
}

.adh-mod-card__facts dt {
    margin: 0;
    color: #b4b7bd;
    font-weight: 400;
}

.adh-mod-card__facts dd {
    margin: 0;
    color: #d0d2d6;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.dark-layout) .adh-mod-card__facts dt {
    color: var(--adh-muted);
}

body:not(.dark-layout) .adh-mod-card__facts dd {
    color: var(--adh-ink);
}

.adh-mod-card__desc {
    margin: 0 0 4px;
    color: #b4b7bd;
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body:not(.dark-layout) .adh-mod-card__desc {
    color: var(--adh-muted);
}

.adh-mod-card__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    color: var(--adh-orange-light);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.adh-mod-card__link:hover,
.adh-mod-card__link:focus {
    color: #ffffff;
    text-decoration: underline;
}

body:not(.dark-layout) .adh-mod-card__link,
body:not(.dark-layout) .adh-mod-card__link:hover,
body:not(.dark-layout) .adh-mod-card__link:focus {
    color: var(--adh-purple);
}

.adh-mod-card__link:focus-visible {
    outline: 2px solid var(--adh-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

.adh-mod-card__link svg {
    width: 16px;
    height: 16px;
}

/* Actions au pouce : deux boutons pleine largeur en bas de carte. */
.adh-mod-card__actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-self: end;
}

.adh-mod-card__approve-form {
    margin: 0;
}

.adh-mod-card__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
}

.adh-mod-card__actions .btn svg {
    width: 18px;
    height: 18px;
}

/* --- Pagination ------------------------------------------------------------ */
.adh-mod__pagination {
    margin: 0 0 16px;
}

.adh-mod__pagination[hidden] {
    display: none;
}

/* --- État vide ------------------------------------------------------------- */
.adh-mod__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 8px 0 24px;
    padding: 32px 16px;
    border: 1px dashed #3b4253;
    border-radius: 12px;
    background: #283046;
    text-align: center;
}

.adh-mod__empty[hidden] {
    display: none;
}

body:not(.dark-layout) .adh-mod__empty {
    border-color: #ebe9f1;
    background: #ffffff;
}

.adh-mod__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--adh-orange-soft);
    color: var(--adh-orange);
}

.adh-mod__empty-icon svg {
    width: 32px;
    height: 32px;
}

.adh-mod__empty-title {
    margin: 4px 0 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #d0d2d6;
}

.adh-mod__empty-text {
    max-width: 420px;
    margin: 0;
    color: #b4b7bd;
    font-size: 14px;
    line-height: 1.5;
}

body:not(.dark-layout) .adh-mod__empty-title {
    color: var(--adh-ink);
}

body:not(.dark-layout) .adh-mod__empty-text {
    color: var(--adh-muted);
}

/* --- Barre de sélection multiple et message de retour --------------------- */
.adh-mod-bulk,
.adh-mod-snackbar {
    position: fixed;
    left: 50%;
    z-index: 1032;
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    max-width: 560px;
    transform: translateX(-50%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.adh-mod-bulk[hidden],
.adh-mod-snackbar[hidden] {
    display: none;
}

.adh-mod-bulk {
    bottom: 16px;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--adh-orange);
    background: #283046;
    color: #d0d2d6;
}

body:not(.dark-layout) .adh-mod-bulk {
    background: #ffffff;
    color: var(--adh-ink);
}

.adh-mod-bulk__count {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}

.adh-mod-bulk .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 15px;
    white-space: nowrap;
}

.adh-mod-bulk__clear {
    color: inherit;
}

.adh-mod-snackbar {
    bottom: 16px;
    padding: 6px 6px 6px 16px;
    background: var(--adh-ink);
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform: translate(-50%, 8px);
}

.adh-mod-snackbar.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.adh-mod-has-bulk .adh-mod-snackbar {
    bottom: 80px;
}

.adh-mod-snackbar__text {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    line-height: 1.35;
}

.adh-mod-snackbar__undo {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--adh-orange-light);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.adh-mod-snackbar__undo:hover,
.adh-mod-snackbar__undo:focus {
    background: rgba(255, 255, 255, 0.08);
}

.adh-mod-snackbar__undo:focus-visible {
    outline: 2px solid var(--adh-orange);
    outline-offset: 2px;
}

.adh-mod-snackbar__undo[hidden] {
    display: none;
}

@media (max-width: 991.98px) {
    /* Au-dessus de la barre de navigation du bas. */
    .adh-mod-bulk,
    .adh-mod-snackbar {
        bottom: calc(var(--bo-nav-height, 64px) + 12px + env(safe-area-inset-bottom, 0px));
    }

    body.adh-mod-has-bulk .adh-mod-snackbar {
        bottom: calc(var(--bo-nav-height, 64px) + 76px + env(safe-area-inset-bottom, 0px));
    }

    /* Place pour la barre de sélection sous la dernière carte. */
    body.adh-mod-has-bulk.bo-has-bottom-nav .app-content {
        padding-bottom: calc(var(--bo-nav-height, 64px) + 88px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767.98px) {
    .adh-mod-bulk .adh-mod-bulk__clear {
        display: none;
    }

    .adh-mod-bulk__count {
        font-size: 13px;
    }

    .adh-mod-bulk .adh-mod-bulk__approve {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 15px;
    }
}

/* --- Feuille « Refuser » --------------------------------------------------- */
.adh-mod-refuse__item {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #d0d2d6;
    overflow-wrap: anywhere;
}

.adh-mod-refuse__lead {
    margin: 0 0 12px;
    color: #b4b7bd;
    font-size: 14px;
    line-height: 1.45;
}

body:not(.dark-layout) .adh-mod-refuse__item {
    color: var(--adh-ink);
}

body:not(.dark-layout) .adh-mod-refuse__lead {
    color: var(--adh-muted);
}

.adh-mod-refuse__reasons {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.adh-mod-refuse__reasons legend {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.adh-mod-refuse__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.adh-mod-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.adh-mod-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.adh-mod-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #3b4253;
    border-radius: 999px;
    background: #161d31;
    color: #d0d2d6;
    font-size: 14px;
    line-height: 1.25;
}

body:not(.dark-layout) .adh-mod-chip span {
    border-color: #d8d6de;
    background: #ffffff;
    color: #5e5873;
}

.adh-mod-chip input:checked + span {
    border-color: var(--adh-orange);
    background: var(--adh-orange);
    color: var(--adh-ink);
    font-weight: 600;
}

.adh-mod-chip input:focus-visible + span {
    outline: 2px solid var(--adh-orange);
    outline-offset: 2px;
}

.adh-mod-refuse__note textarea {
    min-height: 96px;
    font-size: 16px;
}

.adh-mod-refuse__error {
    margin: 0;
    color: var(--adh-danger-on-dark);
    font-size: 14px;
    font-weight: 600;
}

.adh-mod-refuse__error[hidden] {
    display: none;
}

body:not(.dark-layout) .adh-mod-refuse__error {
    color: var(--adh-danger-text);
}

#moderation-refuse-sheet .bo-sheet-foot .btn {
    min-height: 48px;
    font-size: 16px;
}

/* --- Pastille de la barre du bas (entrée « Validation ») ------------------ */
@media (max-width: 991.98px) {
    .bo-bottom-nav__item {
        position: relative;
    }

    .bo-bottom-nav__badge {
        position: absolute;
        top: 4px;
        left: calc(50% + 4px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--adh-orange);
        color: var(--adh-ink);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 0 0 2px #283046;
    }

    body:not(.dark-layout) .bo-bottom-nav__badge {
        box-shadow: 0 0 0 2px #ffffff;
    }

    .bo-bottom-nav__badge[hidden] {
        display: none;
    }
}

/* --- Côté marchand : statut et bandeau de décision ------------------------ */
.adh-mod-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.adh-mod-status svg {
    width: 12px;
    height: 12px;
}

.adh-mod-status__reason {
    max-width: 260px;
    margin: 4px auto 0;
    color: var(--adh-danger-on-dark);
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

body:not(.dark-layout) .adh-mod-status__reason {
    color: var(--adh-danger-text);
}

.adh-mod-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #3b4253;
    border-left: 4px solid var(--adh-orange);
    border-radius: 10px;
    background: #161d31;
    color: #d0d2d6;
}

.adh-mod-banner--refused {
    border-left-color: var(--adh-danger-fill);
}

body:not(.dark-layout) .adh-mod-banner {
    border-color: #ebe9f1;
    border-left-color: var(--adh-orange);
    background: var(--adh-orange-tint);
    color: var(--adh-ink);
}

body:not(.dark-layout) .adh-mod-banner--refused {
    border-left-color: var(--adh-danger-fill);
    background: #fdf2f4;
}

.adh-mod-banner__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--adh-orange);
}

.adh-mod-banner--refused .adh-mod-banner__icon {
    color: var(--adh-danger-on-dark);
}

body:not(.dark-layout) .adh-mod-banner--refused .adh-mod-banner__icon {
    color: var(--adh-danger-text);
}

.adh-mod-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}

.adh-mod-banner__title {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
}

.adh-mod-banner__reason {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--adh-danger-on-dark);
    overflow-wrap: anywhere;
}

body:not(.dark-layout) .adh-mod-banner__reason {
    color: var(--adh-danger-text);
}

.adh-mod-banner__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #b4b7bd;
}

body:not(.dark-layout) .adh-mod-banner__text {
    color: var(--adh-muted);
}

.adh-mod-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.adh-mod-banner__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .adh-mod-banner__actions .btn {
        flex: 1 1 100%;
        justify-content: center;
        font-size: 16px;
    }
}

/* --- Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .adh-mod-card__inner,
    .adh-mod-snackbar {
        transition: none;
    }

    .adh-mod-snackbar,
    .adh-mod-snackbar.is-visible {
        transform: translateX(-50%);
    }
}