/**
 * Custom CSS overrides - MotoShopping
 *
 * Ce fichier est chargé après les CSS du thème (priority 200).
 * Il permet de surcharger les styles sans modifier le thème.
 */
.thumbnail-container .product-image .product-thumbnail {
    display: block;
    width: 50%;
    text-align: center;
    transform: translateX(50%);
}

.dtscustomprice-after-price {
    font-size: 12px;
    font-style: italic;
    line-height: 1.75;
    font-weight: 400;
    color: var(--text-color);
}

.product-price-and-shipping .price {
    color: #bb9541;
    font-weight: bold;
}


article.product-miniature .product-image .button__group {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-top: -80px;
    z-index: 9;
    position: relative;
    background: #d3d3d352;
    border-radius: 5px;
    padding: 10px;
    display: none;
}

article.product-miniature:hover .product-image .button__group {
    display: flex;
}

.quickview a {
    color: black;
}

/* ETS Crosssell - Style identique au thème Leo */
.ets_crosssell_block .ets_crosssell_title {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0.625rem 0 2.5rem;
    text-transform: none;
    text-align: center;
}

/* Fiche produit : le crossselling suit directement la description (onglets) ;
   on ajoute une marge au-dessus pour ne pas le coller au texte. */
#product .ets_crosssell_block {
    margin-top: 3rem;
}


#blockcart-modal .modal-content {
    opacity: 1 !important;
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
}

#blockcart-modal::before {
    display: none !important;
}


.product-miniature .thumbnail-container .product-thumbnail img {
    width: auto !important;
    min-height: 200px;
    height: 200px;
    max-width: none;
}


.product-info-card .alma-pp-container {
    width: 100% !important;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Le widget Alma est injecté dans .alma_container, enfant flex de .product-prices
   (flex-wrap) : on lui donne toute la largeur pour qu'il passe SOUS le prix. */
.product-prices .alma_container {
    flex-basis: 100%;
    width: 100%;
    margin-top: 15px;
}

/* Le conteneur du widget injecté par Alma garde une largeur fixe : on l'étire à 100%. */
.alma_container > div:first-child {
    width: 100% !important;
    border: none;
    flex-direction: row;
    align-items: center;
}

.alma_container > div:first-child > div:first-child {
    width: 50%;
}

.alma_container > div:first-child > div:first-child > div:last-child{
    padding-top: 3px;
}

/* =========================================================================
   Fiche produit : mise en page moderne (séparateurs, tailles, logo marque)
   ========================================================================= */

/* Logo de la marque au-dessus du titre */
#product .product-brand-logo {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
#product .product-brand-logo img {
    max-height: 45px;
    width: auto;
}

/* Séparateurs fins entre les sections (Alma / tailles / dispo+panier / coloris) */
#product .product-sep {
    border: 0;
    border-top: 1px solid #e6e2e0;
    margin: 22px 0;
}

/* On neutralise la bordure/espacement par défaut de .product-actions :
   la séparation est désormais gérée par les .product-sep. */
#product .product-actions {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* Tailles plus grandes, disposées en grille souple */
#product .product-variants .product-variants-item > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#product .product-variants .product-variants-item .input-container {
    float: none !important;
    margin: 0;
}
#product .product-variants .radio-label {
    box-shadow: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 20px;
    min-width: 58px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
}
#product .product-variants .input-radio:checked + .radio-label,
#product .product-variants .input-radio:hover + .radio-label {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* Tailles indisponibles (stock <= 0) : grisées et non sélectionnables */
#product .product-variants .input-container.unavailable {
    opacity: 0.5;
}
#product .product-variants .input-container.unavailable .radio-label,
#product .product-variants .input-container.unavailable .input-radio:hover + .radio-label {
    background: #f5f5f5;
    color: #9b9b9b;
    border-color: #e5e5e5;
    cursor: not-allowed;
}
#product .product-variants .input-container.unavailable .input-color {
    cursor: not-allowed;
}

/* Guide des tailles rattaché au bloc Taille : bouton compact posé sur la
   ligne du titre « Taille » (en haut à droite du bloc). */
#product .product-variants {
    position: relative;
}
#product .product-variants .sizechart {
    position: absolute;
    top: -10px;
    right: 0;
    margin: 0;
}
#product .product-variants .ds-sizeguide-btn {
    padding: 5px 12px;
    font-size: 11px;
}

/* Bouton « Ajouter au panier » centré */
#product .product-add-to-cart .product-quantity {
    justify-content: center;
}

/* Bloc « Paiements » (mêmes logos que le footer) */
#product .product-payments-title {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #1a1a1a;
}
#product .product-payments-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#product .product-payments-logos li {
    display: flex;
    align-items: center;
}
#product .product-payments-logos img {
    display: block;
    width: auto;
    height: 26px;
    max-width: 100%;
    /* Noir & blanc par défaut */
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.25s ease, opacity 0.25s ease;
}
#product .product-payments-logos img:hover {
    /* Couleur au survol */
    filter: grayscale(0);
    opacity: 1;
}

/* Sections repliables de la sidebar (description / détails produit) */
#product .product-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
}
#product .product-section-title .product-section-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 2px solid #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
}
#product .product-section-title[aria-expanded="true"] .product-section-chevron {
    transform: translateY(2px) rotate(-135deg);
}
#product .product-section-content {
    margin-top: 12px;
}
#product .product-section-content[hidden] {
    display: none;
}
/* Le partiel « détails » garde des classes d'onglet : on force l'affichage hors tabs */
#product .product-section-content .tab-pane {
    display: block;
    opacity: 1;
}
#product .product-section-content .product-description {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

#product #main .product-flags {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-bottom: 10px;
}

#product #main .product-quantity .qty {
    display: none;
}

#subcategories ul li .subcategory-name {
    font-size: 12px;
}

#subcategories ul li .subcategory-image {
    display: none;
}

.category__style--2 #subcategories ul li, .category__style--3 #subcategories ul li, .category__style--4 #subcategories ul li {
    width: calc(100% / 8);
}


/* ==========================================================================
   HEADER — reconstruction native (indépendante du module leoelements)
   --------------------------------------------------------------------------
   Barre unique, auto-suffisante (markup _partials/header.tpl) :
   - burger « Menu » (module dsmobilemenu, hook displayNav) ancré à gauche ;
   - logo centré ;
   - actions à droite : wishlist (leofeature), recherche (leoproductsearch),
     panier (ps_shoppingcart), dropdown « Réglage » (compte/langue/devise).
   Aucune dépendance aux classes elementor : le header survit à la
   désactivation de leoelements. La sticky est gérée en CSS (cf. plus bas).
   ========================================================================== */
:root {
    --ms-header-gold: #ba933e; /* doré de la marque (= theme-color-default) */
    --ms-header-icon-size: 23px; /* taille des icônes de la barre */
    --ms-header-icon-gap: 26px; /* espacement entre icônes */
    --ms-header-logo-height: 72px; /* hauteur du logo desktop */
    --ms-header-pad-y: 14px; /* respiration verticale de la barre */
    --ms-header-pad-x: 30px; /* marges latérales de la barre */
}

/* --- Sticky en CSS (remplace le function.js de leoelements) ------------ */
/* Tant que leoelements est actif, son function.js ajoute la classe
   `.navbar-fixed-top` (position:fixed) à #header : on lui laisse la main via
   `:not(.navbar-fixed-top)`. Sans Leo, la classe n'est jamais posée → la
   sticky CSS prend le relais (et `position:sticky` réserve l'espace, donc pas
   de compensation de padding nécessaire). */
/* z-index élevé : le contenu de la page monte jusqu'à ~1030 (mega-menu,
   slideshow, bandeaux). À 50, le header sticky passait DERRIÈRE ces éléments
   au scroll et ne semblait pas flotter. 1040 le place au-dessus de tout le
   contenu, tout en restant sous les modales / menu mobile (4000-10000). */
#header:not(.navbar-fixed-top) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1040;
}

/* CORRECTIF STICKY : le thème pose `#page { overflow: hidden }` (theme.css,
   pour clipper les débords horizontaux des blocs pleine largeur). `overflow:
   hidden` fait de #page un conteneur de défilement → un enfant en
   `position: sticky` (#header) s'y ancre mais #page ne défile jamais lui-même,
   donc le header défilait avec la page (sticky inopérant en prod).
   `overflow-x: clip` clippe l'horizontal SANS créer de conteneur de
   défilement : le sticky redevient relatif au viewport et fonctionne.
   (clip : Chrome 90+, Firefox 81+, Safari 16+.) */
#page {
    overflow: visible; /* fallback navigateurs sans support de `clip` */
    overflow-x: clip;
    overflow-y: visible;
}

/* Bannière promo : masquée si aucun module ne l'alimente (évite un bandeau
   vide maintenant que leoelements ne remplit plus displayBanner). */
.header-banner:empty {
    display: none;
}

/* --- Barre principale -------------------------------------------------- */
.header-top {
    position: relative;
    z-index: 6;
    background: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Barre en 3 colonnes : menu (gauche) | logo (centre) | actions (droite).
   Les colonnes gauche/droite partagent la même base flex (flex:1) → le logo,
   colonne centrale, est réellement centré horizontalement. `align-items:center`
   garantit le centrage vertical de chaque colonne (donc du logo).
   `.ms-header__bar` reste `position:relative` car le burger de dsmobilemenu
   (`.ds-menu-toggle`, absolu) s'y ancre. */
.ms-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--ms-header-logo-height);
    padding: var(--ms-header-pad-y) var(--ms-header-pad-x);
}

/* Colonne menu : réserve le tiers gauche (équilibre les actions à droite) ;
   le burger absolu de dsmobilemenu flotte par-dessus. */
.ms-header__menu {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Logo : colonne centrale, centré vertical + horizontal. */
.ms-header__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.ms-header__logo .logo {
    display: block;
    max-height: var(--ms-header-logo-height);
    height: auto;
    width: auto;
}

/* Colonne actions (tiers droit). `min-width: 0` (comme la colonne menu) garantit
   que les deux colonnes latérales gardent une largeur strictement égale → le
   logo central reste parfaitement centré même si le contenu des actions varie
   (locale, wishlist, panier actif…). */
.ms-header__actions-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* <details> ne doit pas casser l'alignement : il se comporte comme un conteneur
   flex transparent qui pousse les actions à droite. */
.ms-header__more-details {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

/* Déclencheur « … » : masqué en desktop (les actions sont affichées en ligne),
   affiché uniquement en mobile (cf. media query). */
.ms-header__more {
    display: none;
    cursor: pointer;
    list-style: none;
    align-items: center;
    color: #1a1a1a;
}

.ms-header__more::-webkit-details-marker {
    display: none;
}

/* retire la flèche native */

/* Actions : regroupées à droite avec un espacement maîtrisé.
   NB : on ne fixe PAS `display` ici — il est piloté par breakpoint (inline en
   desktop, dropdown en mobile) pour ne pas écraser le masquage de <details>
   sur les navigateurs qui masquent son contenu via `display:none`. */
.ms-header__actions {
    align-items: center;
    justify-content: flex-end;
    gap: var(--ms-header-icon-gap);
}

.ms-header__action {
    display: flex;
    align-items: center;
}

/* Icônes du header en SVG inline (wishlist, recherche, panier, compte) : même
   style/poids, indépendantes de Font Awesome (Leo). Taille homogène + alignement. */
.ms-header__actions .ms-header__svg {
    width: var(--ms-header-icon-size);
    height: var(--ms-header-icon-size);
    display: block;
    color: #1a1a1a;
    transition: color .2s ease;
    vertical-align: middle;
}

.ms-header__action a:hover .ms-header__svg,
.ms-header__search .icon__search:hover .ms-header__svg {
    color: var(--theme-color-default, var(--ms-header-gold));
}

/* La loupe est un SVG : on neutralise l'ancien glyphe police. */
.ms-header__search .icon__search {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #1a1a1a;
}

.ms-header__search .icon__search::before {
    content: none;
}

/* Le SVG ne capte pas le clic : le module Motive reste déclenché sur .icon__search. */
.ms-header__search .icon__search .ms-header__svg {
    pointer-events: none;
}

/* Compteur panier : pastille dorée lisible, en exposant sur l'icône.
   Ancrée sur le lien serré autour du SVG (et non sur .header, trop large). */
.ms-header__actions #_desktop_cart .header,
.ms-header__actions #_desktop_cart .header > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.ms-header__actions #_desktop_cart .cart-products-count {
    position: absolute;
    top: -7px;
    right: -8px;
    left: auto; /* neutralise tout `left` hérité */
    margin: 0;
    /* IMPORTANT : annule le margin-top:-12px / margin-left:2px du thème
                     (theme.css #_desktop_cart .cart-products-count) qui décollait la
                     pastille de l'icône (effet « décalage » constaté). */
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--theme-color-default, var(--ms-header-gold));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.ms-header__actions .ap-total-wishlist {
    font-size: 12px;
}

/* Dropdown « Réglage » : les sélecteurs langue/devise sont empilés sous les
   liens de compte dans le popup. */
.ms-header__settings .popup-content {
    min-width: 220px;
}

.ms-header__selectors {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ececec;
}

/* --- Desktop (≥768px) : le menu « … » est inactif ---------------------- */
/* <details> masque nativement son contenu quand il n'est pas [open] : on force
   l'affichage en ligne des actions et on cache le déclencheur « … ». */
@media (min-width: 768px) {
    .ms-header__more-details > summary.ms-header__more {
        display: none;
    }

    .ms-header__more-details > .ms-header__actions {
        display: flex; /* navigateurs qui masquent le contenu de <details> via display:none */
    }

    /* Chrome/Safari récents masquent le contenu de <details> fermé via
       `content-visibility:hidden` sur le pseudo ::details-content (et NON via
       display:none sur l'enfant) : sans cette règle, les icônes restent
       invisibles en desktop tant que <details> n'a pas été ouvert une fois.
       On force donc le rendu du contenu en desktop. */
    .ms-header__more-details::details-content {
        content-visibility: visible;
    }
}

/* --- Responsive : tailles / espacements -------------------------------- */
@media (max-width: 991px) {
    :root {
        --ms-header-icon-gap: 18px;
        --ms-header-logo-height: 58px;
        --ms-header-pad-y: 12px;
        --ms-header-pad-x: 20px;
    }
}

/* --- Mobile / tablette (≤767px) : icônes de droite repliées dans « … » --- */
@media (max-width: 767px) {
    /* Déclencheur « … » visible et dimensionné comme les autres icônes. */
    .ms-header__more {
        display: inline-flex;
        justify-content: center;
    }

    .ms-header__more .ms-header__svg {
        width: var(--ms-header-icon-size);
        height: var(--ms-header-icon-size);
        color: #1a1a1a;
    }

    /* Ancre du dropdown. */
    .ms-header__more-details {
        position: relative;
    }

    /* Fermé : masquage explicite (indépendant du comportement natif de <details>,
       qui varie selon les navigateurs). */
    .ms-header__more-details:not([open]) > .ms-header__actions {
        display: none;
    }

    /* Panneau déroulant : affiché uniquement quand <details> est ouvert. */
    .ms-header__more-details[open] > .ms-header__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 200px;
        padding: 8px;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
        z-index: 1050;
    }

    /* Chaque action devient une ligne cliquable (icône + libellé). */
    .ms-header__more-details[open] > .ms-header__actions .ms-header__action {
        width: 100%;
    }

    .ms-header__more-details[open] > .ms-header__actions .ms-header__action a,
    .ms-header__more-details[open] > .ms-header__actions .ms-header__action .icon__search {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        color: #1a1a1a;
    }

    .ms-header__more-details[open] > .ms-header__actions .ms-header__action a:hover,
    .ms-header__more-details[open] > .ms-header__actions .ms-header__action .icon__search:hover {
        background: #f6f6f6;
    }

    /* Dans le dropdown, on révèle les libellés (.hidden) à côté des icônes. */
    .ms-header__more-details[open] > .ms-header__actions .ms-header__action .hidden {
        position: static !important;
        display: inline !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        font-size: 14px;
        color: inherit;
    }

    /* Libellé « Rechercher » injecté pour la loupe (qui n'a pas de texte propre). */
    .ms-header__more-details[open] > .ms-header__actions .ms-header__search .icon__search::after {
        content: "Rechercher";
        font-size: 14px;
    }

    /* Ligne panier du dropdown : icône + libellé à gauche, compteur en chip à
       droite (évite le chevauchement de la pastille sur le texte « Panier »). */
    .ms-header__more-details[open] > .ms-header__actions .ms-header__cart .header {
        justify-content: flex-start;
        width: 100%;
    }

    .ms-header__more-details[open] > .ms-header__actions .ms-header__cart .cart-products-count {
        position: static;
        top: auto;
        right: auto;
        margin-left: auto; /* pousse le compteur en fin de ligne */
    }
}

@media (max-width: 575px) {
    :root {
        --ms-header-icon-gap: 12px;
        --ms-header-icon-size: 21px;
        --ms-header-logo-height: 44px;
        --ms-header-pad-y: 10px;
        --ms-header-pad-x: 12px;
    }
}


/* ===================================================================== */
/* Bloc « Explore nos univers » (home) : icône motard au survol +        */
/* meilleure gestion responsive du titre.                                */
/* Tout est scopé sous .elementor-element-b3b3d52 (id stable du bloc).   */
/* Les icônes sont hébergées dans le module : views/img/univers/*.png    */
/* (chemin relatif depuis ce fichier CSS → ../img/univers/).             */
/* ===================================================================== */

/* Repère de positionnement sur chaque bannière + masque du débord de l'icône. */
.elementor-element-b3b3d52 .banner__effect {
    position: relative;
    overflow: hidden;
}

/* Pseudo-élément icône : CENTRÉ dans l'image (vertical + horizontal),
   AFFICHÉ EN PERMANENCE. Taille fluide adaptée à la largeur d'écran. */
.elementor-element-b3b3d52 .banner__effect::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* centrage parfait dans la vignette */
    width: clamp(70px, 9vw, 140px); /* taille fluide */
    height: clamp(70px, 9vw, 140px);
    background: center / contain no-repeat;
    opacity: 1;
    transition: transform .35s ease;
    pointer-events: none;
}

/* Desktop (souris) : au survol, léger zoom de l'icône et disparition du titre. */
@media (hover: hover) {
    .elementor-element-b3b3d52 .banner__effect:hover::after {
        transform: translate(-50%, -50%) scale(1.08);
    }

    .elementor-element-b3b3d52 .elementor-heading-title {
        transition: opacity .3s ease;
    }

    .elementor-element-b3b3d52 .banner__effect:hover .elementor-heading-title {
        opacity: 0;
    }
}

/* Mapping icône → univers (ciblage par le data-id de chaque colonne). */
.elementor-element-b3b3d52 .elementor-element-eaeb402 .banner__effect::after {
    background-image: url('../img/univers/street.png');
}

.elementor-element-b3b3d52 .elementor-element-d1a6995 .banner__effect::after {
    background-image: url('../img/univers/vintage.png');
}

.elementor-element-b3b3d52 .elementor-element-c5d3010 .banner__effect::after {
    background-image: url('../img/univers/adventure.png');
}

.elementor-element-b3b3d52 .elementor-element-0c1a040 .banner__effect::after {
    background-image: url('../img/univers/racing.png');
}

.elementor-element-b3b3d52 .elementor-element-2f859b1 .banner__effect::after {
    background-image: url('../img/univers/roadster.png');
}

.elementor-element-b3b3d52 .elementor-element-4bdf0f4 .banner__effect::after {
    background-image: url('../img/univers/urbain.png');
}

/* On neutralise le positionnement des conteneurs intermédiaires (container, row,
   colonne interne, widget-wrap) pour que le titre absolu s'ancre directement sur
   la vignette .banner__effect (hauteur ≈440px). Sinon il s'ancre sur la colonne
   interne (centrée verticalement) → le « bas » tombait au milieu de l'image. */
.elementor-element-b3b3d52 .banner__effect .elementor-container,
.elementor-element-b3b3d52 .banner__effect .elementor-row,
.elementor-element-b3b3d52 .banner__effect .elementor-inner-column,
.elementor-element-b3b3d52 .banner__effect .elementor-inner-column > .elementor-element-populated,
.elementor-element-b3b3d52 .banner__effect .elementor-inner-column .elementor-widget-wrap {
    position: static !important;
}

/* Titre des univers : on force chaque heading (positionné en absolu par Elementor)
   à occuper toute la largeur de la vignette, centré et ANCRÉ EN BAS.
   NB : le sélecteur inclut .banner__effect pour avoir une spécificité (0,4,0)
   supérieure à la règle Elementor `width:330px !important` (0,3,0), qui sinon
   gagne par ordre de chargement et décale le texte à gauche (surtout mobile). */
.elementor-element-b3b3d52 .banner__effect .elementor-widget-heading.elementor-absolute {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    text-align: center !important;
}

.elementor-element-b3b3d52 .banner__effect .elementor-widget-heading .elementor-widget-container {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Taille de titre fluide, plafonnée pour tenir dans les colonnes étroites du
   desktop (6 colonnes). !important indispensable : la règle Elementor
   (font-size:34px sur l'id de l'élément) a une spécificité plus forte. */
.elementor-element-b3b3d52 .elementor-heading-title,
.elementor-element-b3b3d52 .elementor-heading-title a {
    font-size: clamp(0.85rem, 1.6vw, 1.3rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding: 0 6px;
}

/* Tailles intermédiaires (≈600px → 1024px) : grille de 3 colonnes au lieu des
   6 colonnes trop étroites du desktop, et AVANT l'empilement en 1 colonne du
   mobile (< 600px). Les 6 univers se répartissent ainsi sur 2 rangées de 3. */
@media (min-width: 600px) and (max-width: 1024px) {
    /* gap uniforme → marges EXACTEMENT identiques en horizontal et en vertical. */
    .elementor-element-b3b3d52 .elementor-row {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    /* 3 colonnes + 2 gaps de 15px = (100% - 30px) / 3. */
    .elementor-element-b3b3d52 .elementor-row > .elementor-top-column {
        width: calc((100% - 30px) / 3) !important;
        max-width: calc((100% - 30px) / 3) !important;
        flex: 0 0 calc((100% - 30px) / 3) !important;
    }

    /* On annule le padding-right asymétrique des colonnes (sinon marge double/inégale). */
    .elementor-element-b3b3d52 .elementor-row > .elementor-top-column > .elementor-element-populated {
        padding: 0 !important;
    }

    /* Colonnes larges → on profite de la place : icône et titre plus grands. */
    .elementor-element-b3b3d52 .banner__effect::after {
        width: clamp(120px, 17vw, 190px);
        height: clamp(120px, 17vw, 190px);
    }

    .elementor-element-b3b3d52 .elementor-heading-title,
    .elementor-element-b3b3d52 .elementor-heading-title a {
        font-size: clamp(1.3rem, 3.2vw, 2rem) !important;
    }
}

/* Mobile (< 600px) : empilement 1 colonne → on ajoute le même espace vertical
   entre chaque vignette (l'espace horizontal des colonnes vient du padding-right). */
@media (max-width: 599px) {
    .elementor-element-b3b3d52 .elementor-top-column:not(:last-child) {
        margin-bottom: 15px;
    }

    /* Vignette pleine largeur → icône et titre nettement plus grands pour
       remplir l'espace disponible. */
    .elementor-element-b3b3d52 .banner__effect::after {
        width: clamp(150px, 42vw, 230px);
        height: clamp(150px, 42vw, 230px);
    }

    .elementor-element-b3b3d52 .elementor-heading-title,
    .elementor-element-b3b3d52 .elementor-heading-title a {
        font-size: clamp(1.5rem, 7vw, 2.3rem) !important;
    }
}


/* ==========================================================================
   FOOTER — reconstruction native (indépendante du module leoelements)
   --------------------------------------------------------------------------
   Markup _partials/footer.tpl : 4 colonnes de liens + bloc contact, puis une
   barre basse (réseaux sociaux, moyens de paiement, copyright). Icônes en SVG
   inline → aucune dépendance à une police d'icônes.
   ========================================================================== */
.ms-footer {
    background: #1a1a1a;
    color: #ffffff;
    padding: 48px 0 24px;
}

.ms-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.ms-footer__cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}

.ms-footer .ms-footer__title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 16px;
}

.ms-footer__contact .ms-footer__title:not(:first-child) {
    margin-top: 24px;
}

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

.ms-footer__list li {
    margin-bottom: 10px;
}

.ms-footer .ms-footer__list a,
.ms-footer .ms-footer__contact a {
    color: #e6e6e6;
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease;
}

.ms-footer .ms-footer__list a:hover,
.ms-footer .ms-footer__contact a:hover {
    color: var(--ms-header-gold, #ba933e);
}

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

.ms-footer .ms-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #e6e6e6;
}

.ms-footer__icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ms-header-gold, #ba933e);
}

/* --- Barre basse : social + paiement + copyright ---------------------- */
.ms-footer__bottom {
    background: #111;
    padding: 20px 0;
}

.ms-footer__bottom .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.ms-footer__social {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-footer__social a {
    color: #ffffff;
    display: inline-flex;
    transition: color .2s ease;
}

.ms-footer__social a:hover {
    color: var(--ms-header-gold, #ba933e);
}

.ms-footer__payment img {
    max-height: 30px;
    width: auto;
}

.ms-footer__copyright {
    margin: 0;
    font-size: 13px;
    color: #d9d9d9;
    width: 100%;
    text-align: center;
}

/* --- Responsive footer ------------------------------------------------- */
@media (max-width: 991px) {
    .ms-footer__cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

@media (max-width: 575px) {
    .ms-footer__cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .ms-footer__bottom .container {
        flex-direction: column;
        text-align: center;
    }
}


/* ==========================================================================
   FILTRE CATÉGORIE — drawer off-canvas (indépendant de Leo Elements)
   --------------------------------------------------------------------------
   Reprend les règles essentielles de modules/leoelements/assets/css/function.css
   pour que le toggle du filtre fonctionne même quand le module Leo est désactivé.
   theme.css fournit déjà le style du bouton et la version mobile ; on ajoute ici
   le positionnement off-canvas + l'overlay. Valeurs identiques à Leo → aucun
   conflit si Leo est encore actif.
   ========================================================================== */
#content-wrapper.filter-toggle {
    width: 100%;
}

.filter-toggle .filter-toggle-button {
    position: absolute;
}

#left-column.filter-toggle,
#right-column.filter-toggle {
    position: fixed;
    top: 0;
    left: -235px;
    width: 235px;
    height: 100%;
    z-index: 99999;
    text-align: left;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.6s ease 0s;
}

#left-column.filter-toggle .close,
#right-column.filter-toggle .close {
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    right: 0;
}

#left-column.filter-toggle.active-filter,
#right-column.filter-toggle.active-filter {
    left: 0;
    transition: all 0.6s;
}

#left-column.hidden-md-up.active-filter,
#right-column.hidden-md-up.active-filter {
    display: block !important;
}

.overlay-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, .7);
    transition: opacity .25s ease, visibility 0s ease;
}

.overlay-filter.active {
    opacity: 1;
    visibility: visible;
}

#horizontal_filters.filter-toggle {
    display: none;
}


/* ==========================================================================
   ONGLETS FICHE PRODUIT — style doré centré (indépendant de Leo Elements)
   --------------------------------------------------------------------------
   Reproduit le rendu « avec module » (onglets centrés, actif doré + soulignement)
   sur le layout figé. Scopé à .product-tabs-fullwidth → aucun impact quand Leo
   est actif (il utilise sub/product_info/tab.tpl).
   ========================================================================== */
.product-tabs-fullwidth .nav-tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 1px solid #e1e1e1;
}

.product-tabs-fullwidth .nav-tabs .nav-item {
    float: none;
    margin: 0;
}

.product-tabs-fullwidth .nav-tabs .nav-link {
    position: relative;
    padding: 0 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.product-tabs-fullwidth .nav-tabs .nav-link.active,
.product-tabs-fullwidth .nav-tabs .nav-link.active:focus,
.product-tabs-fullwidth .nav-tabs .nav-link.active:hover,
.product-tabs-fullwidth .nav-tabs .nav-link:hover {
    color: var(--theme-color-default, #ba933e);
    background: transparent;
    border: 0;
}

.product-tabs-fullwidth .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--theme-color-default, #ba933e);
}

.product-tabs-fullwidth .tab-content {
    padding-top: 24px;
}


/* ==========================================================================
   DROPDOWN PANIER (leofeature) — nettoyage du toggle « voir attributs »
   --------------------------------------------------------------------------
   Le bouton chevron doré (.view-additional) était mal positionné et son clic
   surlignait la ligne en bleu (.high-light). On masque le toggle + l'overlay,
   on retire le bleu, et on affiche les attributs (taille…) en ligne, discret.
   ========================================================================== */
.leo-dropdown-cart-item .view-additional,
.leo-dropdown-cart-item .leo-dropdown-overlay {
    display: none !important;
}

.leo-dropdown-cart-item.high-light,
.leo-dropdown-cart-item.show-additional,
.leo-dropdown-cart-item.show-combination,
.leo-dropdown-cart-item.show-customization {
    background-color: transparent !important;
}

.leo-dropdown-cart-item .leo-dropdown-additional {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.leo-dropdown-cart-item .leo-dropdown-additional .view-combination,
.leo-dropdown-cart-item .leo-dropdown-additional .view-customization {
    display: none !important;
}

.leo-dropdown-cart-item .leo-dropdown-additional .product-line-info {
    font-size: 12px;
    color: #777;
}

/* Mini-panier en LECTURE SEULE : on retire les boutons +/- et la suppression.
   L'édition de la quantité / la suppression se font uniquement sur la page panier. */
.leo-dropdown-cart-item .leo-bt-product-quantity,
.leo-dropdown-cart-item .leo-remove-from-cart {
    display: none !important;
}

/* La quantité reste affichée mais non modifiable depuis le dropdown. */
.leo-dropdown-cart-item .leo-input-product-quantity {
    pointer-events: none;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 600;
    text-align: left;
}

.leo-dropdown-cart-item .product-quantity:has(.leo-input-product-quantity)::before {
    content: "Qté : ";
    color: #777;
    font-weight: 400;
}

/* =========================================================================
   Page Marques (/marques) — reskin abécédaire : logos seuls, groupés A→Z
   Markup : themes/vt_interior_elements/templates/catalog/brands.tpl
   ========================================================================= */
.ms-brands {
    padding: 0 0 60px;
}

.ms-brands__header {
    text-align: center;
    margin: 10px 0 24px;
}

.ms-brands__title {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}

/* --- Barre abécédaire (sticky) --- */
.ms-brands__index {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    margin-bottom: 32px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.ms-brands__index-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

a.ms-brands__index-letter {
    color: #232323;
    background: #f4f4f4;
}

a.ms-brands__index-letter:hover {
    color: #fff;
    background: #ba933e; /* doré accent du thème */
}

.ms-brands__index-letter.is-empty {
    color: #cfcfcf;
    background: transparent;
    cursor: default;
    pointer-events: none;
}

/* --- Groupes par lettre --- */
.ms-brands__group {
    scroll-margin-top: 70px; /* compense la barre sticky à l'ancre */
    margin-bottom: 40px;
}

.ms-brands__group-letter {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 22px;
    font-weight: 800;
    color: #ba933e; /* doré accent du thème */
    margin: 0 0 18px;
}

.ms-brands__group-letter::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #ececec;
}

/* --- Grille de logos (sans cadre, logos agrandis) --- */
/* Sélecteur `#manufacturer #main .ms-brands__grid` (spécificité 2,1,0) pour
   battre la règle du thème `#manufacturer #main ul { display:grid; ... }`
   (2,0,1) qui forçait sinon 3 colonnes. */
#manufacturer #main .ms-brands__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* au moins 5 par ligne sur desktop */
    gap: 28px 12px;
}

#manufacturer #main .ms-brands__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-brands__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    padding: 8px;
    text-decoration: none;
    transition: transform .18s ease;
}

.ms-brands__link:hover {
    transform: translateY(-3px);
}

.ms-brands__logo {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* niveaux de gris au repos, couleur au survol : effet premium */
    filter: grayscale(100%);
    opacity: .8;
    transition: filter .18s ease, opacity .18s ease;
}

.ms-brands__link:hover .ms-brands__logo {
    filter: grayscale(0);
    opacity: 1;
}

/* --- Apparition au scroll (activée par JS via .js-reveal ; sans JS = visible) --- */
.ms-brands.js-reveal .ms-brands__item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: var(--ms-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.ms-brands.js-reveal .ms-brands__item.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ms-brands.js-reveal .ms-brands__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* La page marques est rendue en layout pleine largeur (voir brands.tpl :
   {extends file='layouts/layout-full-width.tpl'}) : plus aucune colonne gauche,
   donc pas de CSS de sidebar/sticky à gérer ici. */

/* --- Responsive de la grille (au moins 5/ligne sur desktop) --- */
@media (min-width: 1600px) {
    #manufacturer #main .ms-brands__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 999px) {
    #manufacturer #main .ms-brands__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    #manufacturer #main .ms-brands__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ms-brands__index-letter {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    #manufacturer .ms-brands__link {
        height: 90px;
    }
}

@media (max-width: 479px) {
    #manufacturer #main .ms-brands__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   PAGE PANIER — refonte visuelle
   --------------------------------------------------------------------------
   Objectifs :
   - séparer clairement les blocs (cartes plates, coins arrondis, bord léger) ;
   - aérer les lignes produit et le récapitulatif ;
   - code promo affiché au-dessus du récap (sorti du bloc total) ;
   - masquer le cross-sell vide (« Aucun produit disponible ») et restyler le
     bloc We Ride.
   Portée : uniquement #cart pour ne pas impacter les autres pages.
   ========================================================================== */

#cart #main {
    --ms-accent: #bb9541;
    --ms-border: #ececec;
    --ms-radius: 12px;
    /* Décolle le contenu du header sticky */
    padding-top: 2.5rem;
}

#cart .cart-grid {
    margin-bottom: 2.5rem;
}

/* --- Cartes principales : produits + code promo + récapitulatif --------- */
#cart .card.cart-container,
#cart .card.cart-voucher-card,
#cart .card.cart-summary {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: none;
    overflow: hidden;
}

/* Aucune ombre sur tout le contenu de la page panier (boutons, inputs,
   images, cartes, spinner quantité…). Portée #main pour épargner le header. */
#cart #main *,
#cart #main *::before,
#cart #main *::after {
    box-shadow: none !important;
}

#cart .card.cart-container .card-block {
    padding: 1.5rem 1.75rem 0.25rem;
}

#cart .cart-container h1.h1 {
    font-size: 1.65rem;
    margin: 0;
    letter-spacing: -0.01em;
}

#cart .cart-container hr.separator {
    margin: 0;
    border: 0;
    border-top: 1px solid #f0f0f0;
}

/* Le thème ajoute par défaut une bordure + un padding sur .cart-overview, ce qui
   crée une seconde bordure imbriquée à l'intérieur de la carte. On la supprime :
   la carte .cart-container fournit déjà l'encadrement. */
#cart .cart-grid-body .cart-overview {
    border: 0;
    padding: 0;
}

/* --- Lignes produit : séparateur + respiration -------------------------- */
#cart .cart-items {
    margin: 0;
    padding: 0.5rem 1.75rem 1rem;
    list-style: none;
}

#cart .cart-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid #f1f1f1;
}

#cart .cart-item:last-child {
    border-bottom: 0;
}

#cart .cart-item .product-line-grid {
    align-items: center;
}

#cart .cart-item .product-image img {
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 0;
}

#cart .cart-item .product-line-info .label {
    font-weight: 600;
    color: #1a1a1a;
}

#cart .cart-item .product-price .current-price .price {
    color: var(--ms-accent);
    font-weight: 700;
}

#cart .cart-item .product-line-info.product-price {
    margin-top: 0.35rem;
}

/* Quantité + prix ligne alignés proprement */
#cart .cart-item .gr__qty--price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

/* Sélecteur quantité (touchspin) : input + flèches soudés en un seul bloc,
   même couleur de bord, coins arrondis uniquement à l'extérieur.
   Hauteur de référence unique pour input et colonne de boutons. */
#cart .product-line-grid-right .bootstrap-touchspin {
    display: inline-flex;
    align-items: stretch;
    height: 42px;
    float: none;
    width: auto;
    vertical-align: middle;
}

#cart .cart-item .js-cart-line-product-quantity,
#cart .product-line-grid-right .bootstrap-touchspin > .form-control {
    flex: 0 0 auto;
    height: 42px;
    width: 2.75rem;
    margin: 0;
    border: 1px solid var(--ms-border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    text-align: center;
    font-weight: 700;
    box-shadow: none;
}

/* Colonne des flèches : même hauteur que l'input, étirée par align-items:stretch */
#cart .product-line-grid-right .input-group-btn-vertical {
    display: flex;
    flex-direction: column;
    float: none;
    width: 28px;
    height: 42px;
    position: static;
    vertical-align: middle;
}

/* Chaque bouton occupe exactement la moitié de la hauteur. On neutralise les
   marges négatives par défaut du plugin (margin-left:-1px / margin-top:-2px) qui
   décalaient les flèches par rapport à l'input. */
#cart .product-line-grid-right .bootstrap-touchspin .btn-touchspin {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: 28px;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--ms-border);
    color: #333;
    line-height: 1;
    transition: background 0.15s ease;
}

#cart .product-line-grid-right .bootstrap-touchspin .btn-touchspin:hover {
    background: #f6f6f6;
    color: #000;
}

/* Icône flèche recentrée (le plugin la positionne en absolute par défaut) */
#cart .product-line-grid-right .bootstrap-touchspin .input-group-btn-vertical i {
    position: static;
    top: auto;
    left: auto;
    margin: 0;
    font-size: 16px;
    line-height: 1;
}

#cart .product-line-grid-right .bootstrap-touchspin .bootstrap-touchspin-up {
    border-radius: 0 8px 0 0;
    border-bottom: 0;
}

#cart .product-line-grid-right .bootstrap-touchspin .bootstrap-touchspin-down {
    border-radius: 0 0 8px 0;
}

#cart .cart-item .cart-line-product-actions .remove-from-cart {
    color: #b0b0b0;
    transition: color 0.15s ease;
}

#cart .cart-item .cart-line-product-actions .remove-from-cart:hover {
    color: #e02b2b;
}

/* --- Lien « Continuer vos achats » -------------------------------------- */
#cart .cart-grid-body > .label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 1rem 0 0;
    font-weight: 600;
    color: #1a1a1a;
}

#cart .cart-grid-body > .label:hover {
    color: var(--ms-accent);
}

/* --- Récapitulatif (colonne droite) ------------------------------------- */
#cart .card.cart-summary .card-block {
    padding: 1.25rem 1.5rem;
}

#cart .cart-summary .cart-summary-line {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

#cart .cart-summary .cart-summary-line .label {
    flex: 1 1 auto;
    text-align: left;
}

#cart .cart-summary .cart-summary-line .value {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

/* Pas de bordure ici : le séparateur avant « Total » est déjà fourni par le
   thème via `.cart-detailed-subtotals + .cart-summary-totals .cart-total`
   (border-top). Un border-bottom ici créerait un double trait. */
#cart .cart-summary .cart-detailed-subtotals {
    border-bottom: 0;
}

#cart .cart-summary .cart-total {
    padding-top: 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

#cart .cart-summary .cart-total .value {
    color: var(--ms-accent);
}

/* Bouton Commander : pleine largeur, bien visible */
#cart .cart-detailed-actions .btn-primary {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Code promo : bloc dédié, détaché du récap, toujours ouvert ---------- */
/* Bloc code promo : styles partagés entre la page panier (#cart) et la page
   commande (body#checkout). Le markup est le même partiel réutilisé dans les
   deux templates (checkout/_partials/cart-voucher.tpl). */

/* Habillage carte du bloc promo sur la page commande (le panier l'obtient via
   la règle groupée #cart .card.cart-voucher-card plus haut). */
body#checkout .card.cart-voucher-card {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: none;
    overflow: hidden;
}

#cart .cart-voucher-card,
body#checkout .cart-voucher-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
}

#cart .cart-voucher-card__title,
body#checkout .cart-voucher-card__title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* On masque le déclencheur « Avez-vous un code ? » et « Fermer » : le champ
   est affiché en permanence (plus de collapse au clic). */
#cart .cart-voucher-card .promo-code-button,
#cart .cart-voucher-card .cancel-promo,
body#checkout .cart-voucher-card .promo-code-button,
body#checkout .cart-voucher-card .cancel-promo {
    display: none !important;
}

/* Force l'ouverture du panneau collapse */
#cart .cart-voucher-card #promo-code.collapse,
body#checkout .cart-voucher-card #promo-code.collapse {
    display: block !important;
    height: auto !important;
}

#cart .cart-voucher-card .promo-code,
body#checkout .cart-voucher-card .promo-code {
    padding: 0;
    background: transparent;
}

#cart .cart-voucher-card .promo-code form,
body#checkout .cart-voucher-card .promo-code form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
}

#cart .cart-voucher-card .promo-input,
body#checkout .cart-voucher-card .promo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    padding: 0 0.85rem;
    box-shadow: none;
}

#cart .cart-voucher-card .promo-code .btn-primary,
body#checkout .cart-voucher-card .promo-code .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 1.2rem;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: none;
}

/* Codes promo déjà appliqués */
#cart .cart-voucher-card .promo-name,
body#checkout .cart-voucher-card .promo-name {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

#cart .cart-voucher-card .promo-name .cart-summary-line,
body#checkout .cart-voucher-card .promo-name .cart-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Message d'erreur voucher */
#cart .cart-voucher-card .js-error,
body#checkout .cart-voucher-card .js-error {
    margin-top: 0.6rem;
    margin-bottom: 0;
}

/* --- Cross-sell / We Ride en bas de page -------------------------------- */
/* Masque un bloc de cross-sell qui n'a aucun produit (« Aucun produit disponible ») */
#cart .ets_crosssell_list_blocks:has(.no-product) {
    display: none;
}

/* Si le bloc entier est vide, on masque tout le conteneur */
#cart .ets_crosssell_block:not(:has(.crosssell_product_list_wrapper:not(.no-product))) {
    display: none;
}

#cart .ets_crosssell_block {
    margin-top: 0;
    padding: 1.75rem;
    background: #fafafa;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
}

#cart .ets_crosssell_block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#cart .ets_crosssell_list_blocks + .ets_crosssell_list_blocks {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ms-border);
}

#cart .ets_crosssell_block .ets_crosssell_title {
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 700;
    color: #1a1a1a;
    text-align: left;
    margin: 0 0 1.5rem;
}

/* NB : le style du bloc « We Ride » (dsdiscountprogram) en sidebar panier a été
   déplacé dans le module lui-même (views/sources/css/global.css + sources scss),
   pour rester autonome et versionné avec le module. */

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
    #cart .card.cart-container .card-block {
        padding: 1.25rem 1.25rem 0.25rem;
    }

    #cart .cart-items {
        padding: 0.25rem 1.25rem 0.75rem;
    }

    /* Ligne produit : chaque bloc (image, texte, actions) s'empile sur sa propre
       ligne pleine largeur. L'image passe AU-DESSUS du texte pour libérer toute
       la largeur au libellé/prix (au lieu de la colonne étroite col-xs-4).
       NB : la grille du thème est en float+width (pas flexbox) → on surcharge
       avec float:none + width:100%, sinon les colonnes gardent leur largeur. */
    #cart .cart-item .product-line-grid-left,
    #cart .cart-item .product-line-grid-body,
    #cart .cart-item .product-line-grid-right {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    #cart .cart-item .product-line-grid-left {
        margin-bottom: 0.85rem;
    }

    #cart .cart-item .product-image {
        display: block;
        text-align: center;
    }

    #cart .cart-item .product-image img {
        width: auto;
        max-width: 110px;
    }

    /* Quantité (à gauche) + total ligne (à droite) sur toute la largeur. */
    #cart .cart-item .gr__qty--price {
        justify-content: space-between;
        margin-top: 0.5rem;
    }
}

/* ==========================================================================
   PAGE COMMANDE (body#checkout)
   - Blocs (accordéon) et sommaire présentés en cartes arrondies (façon panier).
   - Sommaire de droite qui suit le scroll (sticky).
   - Étape 1 (infos perso) : moins de vide quand l'utilisateur est connecté.
   - Boutons & radios : couleurs de marque (noir / doré) au lieu du bleu.
   - Badge d'étape : carré doré, numéro centré (fini le carré vert).
   - Retrait magasin (dtspickupstore) : grille de mini-cartes sélectionnables.
   - Paiement : options présentées en cartes.
   ========================================================================== */

body#checkout {
    --ms-gold: #ba933e;
    --ms-black: #1a1a1a;
    --ms-line: #ececec;
    --ms-border: #ececec; /* alias utilisé par le bloc code promo partagé avec le panier */
    --ms-tint: #fbf8f1;
    --ms-radius: 12px;
}

/* --- Blocs façon page panier : cartes arrondies + sommaire sticky --------- */
/* Chaque étape (accordéon) devient une carte blanche arrondie, espacée. */
body#checkout section.checkout-step {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    margin-bottom: 1.25rem;
    padding: 1.4rem 1.6rem;
    box-shadow: none;
    overflow: hidden;
}

/* Le contenu s'aligne sur le titre (l'indentation par défaut est supprimée) */
body#checkout section.checkout-step .content {
    padding-left: 0;
    padding-right: 0;
}

/* Sommaire de droite : même carte arrondie que le panier.
   Le thème force padding L/R:0 sur les .card-block de la colonne droite (ok sans
   bordure) : on rétablit une marge intérieure pour ne pas coller au cadre. */
body#checkout #js-checkout-summary.card {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: none;
    overflow: hidden;
    padding: 0 1.25rem 1rem;
}

/* La colonne de droite (sommaire + réassurance) suit le scroll (desktop) */
@media (min-width: 992px) {
    body#checkout .cart-grid-right {
        position: sticky;
        top: 110px;
        align-self: flex-start;
    }
}

/* --- Radios/cases natifs : couleur de marque (fini le bleu système) ------ */
body#checkout input[type="radio"],
body#checkout input[type="checkbox"] {
    accent-color: var(--ms-gold);
}

/* --- Boutons : noir de marque, survol doré -------------------------------- */
body#checkout .checkout-step .btn-primary,
body#checkout .checkout-step button.continue,
body#checkout #payment-confirmation .btn-primary {
    background-color: var(--ms-black);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 0.7rem 1.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

body#checkout .checkout-step .btn-primary:hover,
body#checkout .checkout-step .btn-primary:focus,
body#checkout .checkout-step button.continue:hover,
body#checkout #payment-confirmation .btn-primary:hover {
    background-color: var(--ms-gold);
    color: #fff;
}

body#checkout #payment-confirmation .btn-primary.disabled,
body#checkout #payment-confirmation .btn-primary:disabled {
    background-color: #d9d9d9;
    color: #fff;
    cursor: not-allowed;
}

/* Marge sous le header : le contenu ne colle plus à la barre */
body#checkout #content {
    margin-top: 2rem;
}

/* Respiration entre le titre de chaque étape et son contenu */
body#checkout section.checkout-step .content {
    padding-top: 1.25rem;
}

/* --- Étape 1 : compacter l'affichage « connecté comme … » ---------------- */
body#checkout #checkout-personal-information-step .content {
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
}

body#checkout #checkout-personal-information-step .content > p {
    margin-bottom: 0.4rem;
}

body#checkout #checkout-personal-information-step .content .identity {
    font-size: 1.05rem;
}

body#checkout #checkout-personal-information-step .content small {
    display: inline-block;
    margin-top: 0.25rem;
}

body#checkout #checkout-personal-information-step .content .clearfix {
    margin-top: 0.75rem;
}

/* --- En-tête d'étape + badge casque --------------------------------------- */
body#checkout section.checkout-step .step-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Le lien « Modifier » reste calé à droite malgré le flex */
body#checkout section.checkout-step .step-title .step-edit {
    margin-left: auto;
}

/* Badge d'étape : carré doré avec le numéro centré, quel que soit l'état.
   !important pour neutraliser la règle -current.-reachable.-complete du thème
   (display:inline-block) qui décalait le chiffre en haut à gauche. */
body#checkout section.checkout-step .step-title .step-number {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    border-radius: 8px;
    background: var(--ms-gold);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

body#checkout section.checkout-step.-reachable.-complete h1 .step-number {
    background: var(--ms-gold);
}

/* Neutralise toute trace verte native du thème (coche/carré d'étape validée) */
body#checkout section.checkout-step .done {
    display: none !important;
}

/* --- Retrait en magasin : mini-cartes sélectionnables --------------------- */
body#checkout .carrier-extra-content {
    border: 0;
    padding: 0.25rem 0 0.75rem;
}

body#checkout .dts-pickup__title {
    font-weight: 600;
    margin-bottom: 0.85rem;
}

body#checkout .dts-pickup__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}

body#checkout .dts-pickup__item {
    position: relative;
}

body#checkout .dts-pickup__radio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

body#checkout .dts-pickup__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    margin: 0;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body#checkout .dts-pickup__card:hover {
    border-color: var(--ms-gold);
    transform: translateY(-1px);
}

body#checkout .dts-pickup__radio:checked + .dts-pickup__card {
    border-color: var(--ms-gold);
    box-shadow: inset 0 0 0 1px var(--ms-gold);
    background: var(--ms-tint);
}

body#checkout .dts-pickup__radio:focus-visible + .dts-pickup__card {
    outline: 2px solid var(--ms-gold);
    outline-offset: 2px;
}

body#checkout .dts-pickup__check {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 18px;
    height: 18px;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.18s ease, background 0.18s ease;
}

body#checkout .dts-pickup__radio:checked + .dts-pickup__card .dts-pickup__check {
    border-color: var(--ms-gold);
    background: var(--ms-gold);
}

body#checkout .dts-pickup__radio:checked + .dts-pickup__card .dts-pickup__check::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body#checkout .dts-pickup__name {
    padding-right: 1.6rem;
    font-weight: 700;
    color: var(--ms-black);
}

body#checkout .dts-pickup__addr {
    font-size: 0.9rem;
    line-height: 1.35;
    color: #555;
}

body#checkout .dts-pickup__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ms-gold);
}

body#checkout .dts-pickup__phone .material-icons {
    font-size: 1rem;
}

/* --- Paiement : options en cartes ---------------------------------------- */
body#checkout section.checkout-step .payment-options .payment-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ms-line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Toute la carte est cliquable : le label (for="{id}") s'étend sur la zone.
   Le radio reste au-dessus pour rester cliquable directement. */
body#checkout section.checkout-step .payment-options .payment-option label::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

body#checkout section.checkout-step .payment-options .payment-option .custom-radio {
    position: relative;
    z-index: 2;
}

body#checkout section.checkout-step .payment-options .payment-option:hover {
    border-color: var(--ms-gold);
}

body#checkout section.checkout-step .payment-options .payment-option:has(input:checked) {
    border-color: var(--ms-gold);
    box-shadow: inset 0 0 0 1px var(--ms-gold);
    background: var(--ms-tint);
}

body#checkout section.checkout-step .payment-options .payment-option label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    margin: 0;
    font-weight: 600;
    color: var(--ms-black);
    cursor: pointer;
}

/* Logo du moyen de paiement aligné à droite de la carte */
body#checkout section.checkout-step .payment-options .payment-option label img {
    max-height: 26px;
    width: auto;
    margin-left: auto;
}

body#checkout section.checkout-step .payment-options .custom-radio {
    margin: 0;
    flex: 0 0 auto;
}

body#checkout .js-additional-information,
body#checkout .js-payment-option-form {
    padding-left: 1.25rem;
}

/* --- Transporteurs : ligne sélectionnée mise en avant --------------------- */
body#checkout .delivery-option {
    border: 1px solid var(--ms-line);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.18s ease;
}

body#checkout .delivery-option:has(input:checked) {
    border-color: var(--ms-gold);
    box-shadow: inset 0 0 0 1px var(--ms-gold);
}

.tabs.product-tabs-fullwidth {
    margin-bottom: 50px;
}

/* ==========================================================================
   PAGE CONFIRMATION DE COMMANDE (body#order-confirmation)
   --------------------------------------------------------------------------
   Même langage visuel que le panier et le tunnel de commande :
   cartes blanches arrondies, accents noir/doré, grille 8/4 avec colonne de
   droite sticky. Le markup vient de :
     themes/vt_interior_elements/templates/checkout/order-confirmation.tpl
     themes/vt_interior_elements/templates/checkout/_partials/order-confirmation-products.tpl
   ========================================================================== */

body#order-confirmation {
    --ms-gold: #ba933e;
    --ms-black: #1a1a1a;
    --ms-line: #ececec;
    --ms-tint: #fbf8f1;
    --ms-muted: #8a8a8a;
    --ms-radius: 12px;
}

body#order-confirmation #main {
    /* Décolle le contenu du header sticky */
    padding-top: 2.5rem;
}

body#order-confirmation .oc-grid {
    margin-bottom: 2.5rem;
}

/* Neutralise les règles héritées du thème sur les ids historiques
   (bordure droite sur #order-items, retrait gauche sur #order-details). */
body#order-confirmation #order-items {
    border-right: 0;
    border-left: 0;
}

/* Le thème pose padding-left: 1.3rem (et padding-right en RTL) sur #order-details :
   on rétablit le padding de .oc-card pour aligner son contenu sur les autres cartes. */
body#order-confirmation #order-details {
    padding: 1.4rem 1.6rem;
    margin-top: 0;
}

.rtl body#order-confirmation #order-details {
    padding: 1.4rem 1.6rem;
}

/* --- Carte générique ------------------------------------------------------ */
body#order-confirmation .oc-card {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.25rem;
    box-shadow: none;
}

body#order-confirmation .oc-card__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-black);
}

body#order-confirmation .oc-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--ms-tint);
    color: var(--ms-gold);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* --- Bandeau de confirmation --------------------------------------------- */
body#order-confirmation .oc-hero {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem 1.75rem 1.6rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

body#order-confirmation .oc-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ms-gold);
    color: #fff;
}

body#order-confirmation .oc-hero__body {
    min-width: 0;
}

body#order-confirmation .oc-hero__title {
    margin: 0 0 0.6rem;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ms-black);
}

body#order-confirmation .oc-hero__text {
    margin: 0 0 0.35rem;
    color: #555;
}

body#order-confirmation .oc-hero__ref {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body#order-confirmation .oc-hero__ref strong {
    color: var(--ms-black);
    letter-spacing: 0.06em;
}

body#order-confirmation .oc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
    margin-top: 1.2rem;
}

/* --- Boutons -------------------------------------------------------------- */
body#order-confirmation .oc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 1.4rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body#order-confirmation .oc-btn__icon {
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

body#order-confirmation .oc-btn--primary {
    background: var(--ms-black);
    color: #fff;
}

body#order-confirmation .oc-btn--primary:hover,
body#order-confirmation .oc-btn--primary:focus {
    background: var(--ms-gold);
    color: #fff;
}

body#order-confirmation .oc-btn--ghost {
    background: #fff;
    border-color: var(--ms-line);
    color: var(--ms-black);
}

body#order-confirmation .oc-btn--ghost:hover,
body#order-confirmation .oc-btn--ghost:focus {
    border-color: var(--ms-gold);
    color: var(--ms-gold);
}

body#order-confirmation .oc-hero__link {
    font-weight: 600;
    color: #666;
}

body#order-confirmation .oc-hero__link:hover {
    color: var(--ms-gold);
}

/* Hooks de modules injectés juste sous le bandeau */
body#order-confirmation .oc-hook:not(:empty) {
    margin-bottom: 1.25rem;
}

/* --- Liste des articles --------------------------------------------------- */
body#order-confirmation .oc-items__head,
body#order-confirmation .oc-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 7rem 4.5rem 7rem;
    gap: 1rem;
    align-items: center;
}

body#order-confirmation .oc-items__head {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ms-line);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-muted);
}

body#order-confirmation .oc-items__head-cell {
    text-align: right;
}

body#order-confirmation .oc-items__head-cell--product {
    grid-column: 1 / span 2;
    text-align: left;
}

body#order-confirmation .oc-item {
    padding: 1.15rem 0;
    border-bottom: 1px solid #f3f3f3;
}

body#order-confirmation .oc-item:last-of-type {
    border-bottom: 0;
}

body#order-confirmation .oc-item__media img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 10px;
}

body#order-confirmation .oc-item__name {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ms-black);
}

body#order-confirmation a.oc-item__name:hover {
    color: var(--ms-gold);
}

body#order-confirmation .oc-item__customization {
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

body#order-confirmation .oc-item__cell {
    text-align: right;
}

body#order-confirmation .oc-item__cell-label {
    display: none;
}

body#order-confirmation .oc-item__cell-value {
    color: #444;
}

body#order-confirmation .oc-item__cell--total .oc-item__cell-value {
    font-weight: 700;
    color: var(--ms-black);
}

/* --- Totaux (pied de la carte articles) ---------------------------------- */
body#order-confirmation .oc-totals {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ms-line);
}

body#order-confirmation .oc-totals__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    color: #555;
}

body#order-confirmation .oc-totals__value {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ms-black);
}

body#order-confirmation .oc-totals__line--grand {
    margin-top: 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ms-line);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ms-black);
}

body#order-confirmation .oc-totals__line--grand .oc-totals__label {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body#order-confirmation .oc-totals__line--grand .oc-totals__value {
    color: var(--ms-gold);
    font-size: 1.2rem;
}

body#order-confirmation .oc-totals__tax {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--ms-muted);
}

/* --- Détails de la commande ---------------------------------------------- */
body#order-confirmation .oc-details {
    margin: 0;
}

body#order-confirmation .oc-details dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-muted);
}

body#order-confirmation .oc-details dd {
    margin: 0.15rem 0 0.95rem;
    font-weight: 600;
    color: var(--ms-black);
}

body#order-confirmation .oc-details dd:last-child {
    margin-bottom: 0;
}

body#order-confirmation .oc-details__delay {
    display: block;
    margin-top: 0.15rem;
    font-style: normal;
    font-weight: 400;
    font-size: 0.9rem;
    color: #666;
}

body#order-confirmation .oc-details__note {
    margin: 0.9rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ms-line);
    font-size: 0.9rem;
    color: #666;
}

/* --- Adresses ------------------------------------------------------------ */
body#order-confirmation .oc-addresses {
    display: grid;
    gap: 1.1rem;
}

body#order-confirmation .oc-address__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-muted);
}

body#order-confirmation .oc-address address {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
    color: #333;
}

/* --- Bloc d'information de paiement (HOOK_PAYMENT_RETURN) ---------------- */
body#order-confirmation .oc-card--note {
    background: var(--ms-tint);
    border-color: #ecdfc4;
}

body#order-confirmation .oc-note p,
body#order-confirmation .oc-note div {
    margin: 0 0 0.7rem;
    line-height: 1.55;
    color: #444;
}

body#order-confirmation .oc-note p:last-child,
body#order-confirmation .oc-note div:last-child {
    margin-bottom: 0;
}

body#order-confirmation .oc-note strong,
body#order-confirmation .oc-note b {
    color: var(--ms-black);
}

body#order-confirmation .oc-note a {
    color: var(--ms-gold);
    font-weight: 600;
}

/* Le hook peut renvoyer des titres (h3/h4) : on les aligne sur les cartes. */
body#order-confirmation .oc-note h1,
body#order-confirmation .oc-note h2,
body#order-confirmation .oc-note h3,
body#order-confirmation .oc-note h4 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ms-black);
}

/* --- Colonne de droite sticky (desktop) ---------------------------------- */
@media (min-width: 992px) {
    body#order-confirmation .oc-grid__right {
        position: sticky;
        top: 110px;
        align-self: flex-start;
    }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    body#order-confirmation .oc-items__head,
    body#order-confirmation .oc-item {
        grid-template-columns: 64px minmax(0, 1fr) 6.5rem 3.5rem 6.5rem;
        gap: 0.75rem;
    }
}

@media (max-width: 767px) {
    body#order-confirmation #main {
        padding-top: 1.5rem;
    }

    body#order-confirmation .oc-card,
    body#order-confirmation .oc-hero,
    body#order-confirmation #order-details {
        padding: 1.25rem 1.15rem;
    }

    body#order-confirmation .oc-hero {
        gap: 1rem;
    }

    body#order-confirmation .oc-hero__badge {
        width: 42px;
        height: 42px;
    }

    body#order-confirmation .oc-hero__title {
        font-size: 1.3rem;
    }

    /* Colonnes de prix repliées sous le libellé, avec leur intitulé. */
    body#order-confirmation .oc-items__head {
        display: none;
    }

    body#order-confirmation .oc-item {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 0.35rem 1rem;
        align-items: start;
    }

    body#order-confirmation .oc-item__media {
        grid-row: 1 / -1;
    }

    body#order-confirmation .oc-item__info,
    body#order-confirmation .oc-item__cell {
        grid-column: 2;
    }

    body#order-confirmation .oc-item__info {
        margin-bottom: 0.35rem;
    }

    body#order-confirmation .oc-item__cell {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        text-align: left;
    }

    body#order-confirmation .oc-item__cell-label {
        display: inline;
        font-size: 0.85rem;
        color: var(--ms-muted);
    }
}

/* ==========================================================================
   ESPACE CLIENT — refonte visuelle de toutes les pages « mon compte »
   --------------------------------------------------------------------------
   Même langage visuel que le panier et la confirmation de commande :
   cartes blanches arrondies, bord fin, accents noir/doré, titres en capitales
   espacées, aucune ombre portée.

   Portée : `body.page-customer-account` — classe posée par FrontController
   (address, authentication, discount, history, identity, order-follow,
   order-slip, password, registration, guest-tracking) — complétée par les ids
   des pages qu'elle oublie : my-account, addresses, order-detail, order-return.

   Markup : themes/vt_interior_elements/templates/customer/*.tpl
   ========================================================================== */

/* --- Jetons + respiration générale --------------------------------------- */
body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) {
    --ms-gold: #ba933e;
    --ms-black: #1a1a1a;
    --ms-line: #ececec;
    --ms-tint: #fbf8f1;
    --ms-muted: #8a8a8a;
    --ms-radius: 12px;
}

/* padding-top : décolle du header sticky ; padding-bottom : décolle du footer
   (le thème collait le pied de page au dernier bloc de contenu). */
body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #main {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #main .page-header {
    margin-bottom: 1.75rem;
}

body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #main .page-header > h1 {
    letter-spacing: 0.02em;
}

/* Chapeau explicatif des pages listes (historique, avoirs, retours) */
body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #main .page-content h6 {
    margin: 0 0 1.4rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ms-muted);
}

/* --- Carte de contenu ----------------------------------------------------
   Uniquement pour les pages « une seule zone » (formulaires, tableaux).
   my-account / addresses / order-detail / order-return / guest-tracking en sont
   exclues : leurs enfants (tuiles, adresses, .box) sont déjà des cartes.
   (guest-tracking étend customer/order-detail.tpl, d'où l'exclusion.) */
body.page-customer-account:not(#guest-tracking) #content.page-content {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    padding: 1.6rem 1.75rem;
    box-shadow: none;
}

/* Pages à formulaire court : on resserre la carte plutôt que d'étirer les
   champs sur toute la largeur du conteneur. */
#identity #content.page-content {
    max-width: 720px;
}

/* Le thème sort les notifications de la carte avec des marges négatives :
   inutile ici, et cela déborde des pages en grille (adresses). */
body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #main .page-content #notifications {
    margin-left: 0;
    margin-right: 0;
}

/* --- Formulaires ---------------------------------------------------------
   La grille du thème est en float (label col-md-3 / champ col-md-6 /
   commentaire col-md-3) : on l'aplatit pour empiler label puis champ. */
body:is(.page-customer-account, #order-detail, #order-return) #content .form-group.row {
    display: block;
    margin: 0 0 1.15rem;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .form-group.row > [class*="col-"] {
    float: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Les décalages Bootstrap (offset-md-*) de la page « nouveau mot de passe »
   n'ont plus de sens une fois la grille aplatie. */
body:is(.page-customer-account, #order-detail, #order-return) #content .form-group.row > [class*="offset-"] {
    margin-left: 0;
    margin-right: 0;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .form-group .form-control-label {
    display: block;
    margin: 0 0 0.4rem;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-black);
}

body:is(.page-customer-account, #order-detail, #order-return) #content .form-group .form-control-label.required::after {
    content: " *";
    color: var(--ms-gold);
}

/* Sur une ligne « case à cocher », le thème rend un <label> vide (le libellé est
   porté par la case elle-même) : on le masque pour éviter un astérisque orphelin
   et un espace blanc. */
body:is(.page-customer-account, #order-detail, #order-return) #content .form-group.row:has(.custom-checkbox) .form-control-label {
    display: none;
}

body:is(.page-customer-account, #order-detail, #order-return) #content :is(.form-control, .form-control-select) {
    min-height: 46px;
    border: 1px solid var(--ms-line);
    border-radius: 8px;
    box-shadow: none;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .form-control:focus {
    border-color: var(--ms-gold);
    box-shadow: 0 0 0 3px rgba(186, 147, 62, 0.12);
}

/* Mention « Optionnel » / aide : sous le champ, discrète */
body:is(.page-customer-account, #order-detail, #order-return) #content .form-group .form-control-comment {
    margin-top: 0.35rem;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ms-muted);
}

/* Boutons radio (civilité) et cases à cocher : alignés sur une ligne aérée */
body:is(.page-customer-account, #order-detail, #order-return) #content .radio-inline {
    margin: 0 1.25rem 0 0;
    padding: 0;
    font-size: 0.95rem;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .custom-checkbox label {
    margin: 0;
    padding: 0;
    text-align: left;
    font-weight: 400;
}

/* Champ mot de passe : l'input et le bouton « Afficher » soudés */
body:is(.page-customer-account, #order-detail, #order-return) #content .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .input-group-btn > .btn {
    height: 100%;
    min-height: 46px;
    padding: 0 1rem;
    background: #fafafa;
    border: 1px solid var(--ms-line);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    color: var(--ms-black);
    font-size: 0.85rem;
    font-weight: 600;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .input-group-btn > .btn:hover {
    background: #f1f1f1;
}

/* Pied de formulaire : séparateur + CTA aligné à droite */
body:is(.page-customer-account, #order-detail, #order-return) #content .form-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.6rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--ms-line);
}

body:is(.page-customer-account, #order-detail, #order-return) #content .form-footer .btn-primary {
    float: none;
    min-width: 220px;
    padding: 0.85rem 1.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Formulaire d'adresse : deux colonnes en desktop --------------------- */
@media (min-width: 768px) {
    #address #content .form-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.5rem;
    }

    /* Cases à cocher et blocs d'aide sur toute la largeur */
    #address #content .form-fields > .form-group.row:has(.custom-checkbox) {
        grid-column: 1 / -1;
    }
}

/* --- Tableaux (historique, avoirs, bons, retours) ------------------------ */
body:is(.page-customer-account, #order-detail, #order-return) #content .table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    border-collapse: separate;
    border-spacing: 0;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .table > thead > tr > th {
    padding: 0.9rem 1rem;
    background: #fafafa;
    border: 0;
    border-bottom: 1px solid var(--ms-line);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--ms-muted);
}

body:is(.page-customer-account, #order-detail, #order-return) #content .table > thead > tr > th:first-child {
    border-top-left-radius: var(--ms-radius);
}

body:is(.page-customer-account, #order-detail, #order-return) #content .table > thead > tr > th:last-child {
    border-top-right-radius: var(--ms-radius);
}

body:is(.page-customer-account, #order-detail, #order-return) #content .table > tbody > tr > :is(td, th) {
    padding: 0.9rem 1rem;
    background: transparent;
    border: 0;
    border-top: 1px solid #f4f4f4;
    vertical-align: middle;
    font-size: 0.9rem;
    font-weight: 400;
    color: #444;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .table > tbody > tr:first-child > :is(td, th) {
    border-top: 0;
}

/* Le zébrage du thème brouille la lecture : seul le survol marque la ligne. */
body:is(.page-customer-account, #order-detail, #order-return) #content .table.table-striped > tbody > tr:nth-of-type(odd) > :is(td, th) {
    background: transparent;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .table > tbody > tr:hover > :is(td, th) {
    background: #fcfbf8;
}

/* Référence de commande : mise en avant discrète */
body:is(.page-customer-account, #order-detail, #order-return) #content .table > tbody > tr > th[scope="row"] {
    font-weight: 700;
    color: var(--ms-black);
}

/* Pastille de statut (couleur de fond posée en inline par PrestaShop) */
body:is(.page-customer-account, #order-detail, #order-return) #content .label-pill {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Actions de ligne (Détails / Commander à nouveau) en pastilles cliquables */
body:is(.page-customer-account, #order-detail, #order-return) #content .order-actions {
    white-space: nowrap;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .order-actions a {
    display: inline-block;
    margin: 0.15rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--ms-line);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ms-black);
    transition: border-color 0.15s ease, color 0.15s ease;
}

body:is(.page-customer-account, #order-detail, #order-return) #content .order-actions a:hover {
    border-color: var(--ms-gold);
    color: var(--ms-gold);
}

/* --- Variantes mobiles des tableaux (cartes empilées) ------------------- */
body:is(.page-customer-account, #order-detail, #order-return) #content :is(.orders, .credit-slips, .cart-rules, .order-returns) {
    margin: 0;
}

body:is(.page-customer-account, #order-detail, #order-return) #content :is(.order, .credit-slip, .cart-rule, .order-return) {
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-bottom: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

body:is(.page-customer-account, #order-detail, #order-return) #content :is(.credit-slip, .cart-rule, .order-return) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body:is(.page-customer-account, #order-detail, #order-return) #content :is(.credit-slip, .cart-rule, .order-return) li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

body:is(.page-customer-account, #order-detail, #order-return) #content :is(.credit-slip, .cart-rule, .order-return) li strong {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ms-muted);
}

#history #content .orders .order a h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ms-black);
}

#history #content .orders .order .total {
    font-weight: 700;
    color: var(--ms-gold);
}

/* --- Messages d'information (aucune commande, aucun bon…) --------------- */
body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #content .alert-info {
    padding: 1rem 1.15rem;
    background: var(--ms-tint);
    border: 1px solid #efe3c9;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #6b5a33;
}

body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #content .alert-info a {
    font-weight: 700;
    color: var(--ms-gold);
    text-decoration: underline;
}

/* --- Pied de page : liens de navigation en pastilles -------------------- */
body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) .page-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) .page-footer .account-link {
    margin: 0;
    padding: 0.6rem 1.15rem;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease;
}

body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) .page-footer .account-link:hover {
    border-color: var(--ms-gold);
    color: var(--ms-gold);
}

/* ==========================================================================
   PAGE « TON COMPTE » (body#my-account) : tuiles de navigation
   ========================================================================== */

/* Le `.row` du thème porte des marges négatives compensées par le padding des
   colonnes : la grille les remplaçant, on remet les marges à zéro. */
#my-account #content > .row {
    margin-left: 0;
    margin-right: 0;
}

#my-account #content .links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Les liens sont des colonnes flottantes (col-lg-4…), y compris ceux injectés
   par les modules via displayCustomerAccount : on neutralise float/width. */
#my-account #content .links a {
    display: block;
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ms-black);
}

#my-account #content .links a span.link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    height: 100%;
    min-height: 152px;
    padding: 1.75rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    text-align: center;
    line-height: 1.35;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* L'icône du thème occupait toute la largeur avec 3.4rem de padding bas :
   on la ramène à une pastille dorée centrée. */
#my-account #content .links a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    padding: 0;
    background: var(--ms-tint);
    border-radius: 50%;
    font-size: 1.6rem;
    color: var(--ms-gold);
    transition: background 0.15s ease, color 0.15s ease;
}

/* Repli : un lien injecté par un module sans <span class="link-item"> garde
   malgré tout l'apparence d'une tuile. */
#my-account #content .links a:not(:has(.link-item)) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 152px;
    padding: 1.75rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    text-align: center;
    line-height: 1.35;
    transition: border-color 0.15s ease;
}

#my-account #content .links a:not(:has(.link-item)):hover {
    border-color: var(--ms-gold);
}

#my-account #content .links a:hover span.link-item {
    border-color: var(--ms-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

#my-account #content .links a:hover i {
    background: var(--ms-gold);
    color: #fff;
}

/* Déconnexion : CTA centré, détaché du contenu et du footer */
#my-account .page-footer {
    justify-content: center;
    margin-top: 2.5rem;
}

#my-account .page-footer .text-sm-center {
    width: 100%;
    text-align: center;
}

#my-account .page-footer .text-sm-center a {
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   PAGE « VOS ADRESSES » (body#addresses)
   ========================================================================== */

/* #content devient la grille : les adresses occupent une cellule, tout le
   reste (notifications, alerte, pied) prend la largeur complète. */
#addresses #content.page-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

#addresses #content.page-content > * {
    grid-column: 1 / -1;
}

#addresses #content.page-content > [class*="col-"] {
    grid-column: auto;
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
}

#addresses #content.page-content > .clearfix {
    display: none;
}

#addresses #content .address {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: none;
    overflow: hidden;
}

#addresses #content .address .address-body {
    flex: 1 1 auto;
    padding: 1.35rem 1.4rem;
}

#addresses #content .address .address-body h4 {
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-black);
}

/* Le thème imposait 9rem de hauteur minimale : inutile, la grille aligne déjà
   les cartes entre elles. */
#addresses #content .address .address-body address {
    min-height: 0;
    margin: 0;
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #555;
}

#addresses #content .address .address-footer {
    display: flex;
    gap: 1.25rem;
    padding: 0.85rem 1.4rem;
    background: #fcfcfc;
    border-top: 1px solid var(--ms-line);
}

#addresses #content .address .address-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ms-black);
    transition: color 0.15s ease;
}

#addresses #content .address .address-footer a:hover {
    color: var(--ms-gold);
}

#addresses #content .address .address-footer a[data-link-action="delete-address"]:hover {
    color: #e02b2b;
}

#addresses #content .address .address-footer a i {
    font-size: 1rem;
}

/* « Créer une nouvelle adresse » : bouton noir plutôt qu'un lien discret */
#addresses #content .addresses-footer {
    margin: 0.5rem 0 0;
}

#addresses #content .addresses-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.5rem;
    background: var(--ms-black);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    transition: background 0.15s ease;
}

#addresses #content .addresses-footer a:hover {
    background: var(--ms-gold);
    color: #fff;
}

#addresses #content .addresses-footer a span {
    margin: 0;
    font-size: inherit;
    vertical-align: baseline;
}

/* ==========================================================================
   CONNEXION / INSCRIPTION / MOT DE PASSE
   ========================================================================== */

body:is(#authentication, #registration) #content.page-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 2.1rem;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

#password #content.page-content {
    max-width: 600px;
    padding: 2rem 2.1rem;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

/* Un seul bouton : il prend toute la largeur du formulaire. */
body:is(#authentication, #registration, #password) #content .form-footer {
    display: block;
    padding-top: 1.35rem;
}

body:is(#authentication, #registration, #password) #content .form-footer .btn-primary {
    display: block;
    width: 100%;
    min-width: 0;
}

body:is(#authentication, #registration) #content :is(.forgot-password, .no-account) {
    margin-top: 1.25rem;
    padding: 0;
    text-align: center;
    font-size: 0.9rem;
}

body:is(#authentication, #registration) #content :is(.forgot-password, .no-account) a {
    font-weight: 600;
    color: var(--ms-black);
    text-decoration: underline;
}

body:is(#authentication, #registration) #content :is(.forgot-password, .no-account) a:hover {
    color: var(--ms-gold);
}

body:is(#authentication, #registration) #content hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--ms-line);
}

#authentication #content .login-form {
    margin-top: 0;
}

/* Mot de passe oublié : le thème décalait le bouton de 50px et le label. */
#password #content .forgotten-password .form-fields .center-email-fields {
    margin: 0;
}

#password #content .forgotten-password [type="submit"],
#password #content .renew-password [type="submit"] {
    margin: 1rem 0 0;
}

#password #content .renew-password {
    margin-left: 0;
}

#password #content .send-renew-password-link {
    margin: 0 0 1.4rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ms-muted);
}

/* Le lien « Retour à la connexion » vit dans .page-footer : il hérite déjà du
   style « pastille » commun aux .account-link, on ne fait que le centrer. */
#password .page-footer {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   DÉTAIL DE COMMANDE / RETOUR (body#order-detail, body#order-return)
   ========================================================================== */

body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) {
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: none;
}

/* .card-block ajoute son propre padding : la carte le porte déjà. */
body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) > .card-block {
    padding: 0;
}

body:is(#order-detail, #order-return, #guest-tracking) #content :is(h3, .card-title) {
    margin: 0 0 1.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-black);
}

body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) h4 {
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-black);
}

body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) > ul > li {
    padding: 0.3rem 0;
    font-size: 0.92rem;
}

body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) address {
    margin: 0;
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #555;
}

/* Tableau imbriqué dans une carte : la carte fournit déjà l'encadrement. */
body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) .table {
    border: 0;
}

/* Adresses de livraison / facturation : deux colonnes réelles */
#order-detail #content .addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
}

#order-detail #content .addresses > [class*="col-"] {
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
}

#order-detail #content .addresses .box {
    height: 100%;
    margin: 0;
}

#order-detail #content .button-primary {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--ms-black);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    transition: background 0.15s ease;
}

#order-detail #content .button-primary:hover {
    background: var(--ms-gold);
    color: #fff;
}

#order-detail #content #order-history .history-lines .history-line {
    padding: 0.6rem 0;
    border-bottom: 1px solid #f4f4f4;
}

#order-detail #content .messages .message {
    padding: 0.75rem 0;
    margin: 0;
    border-bottom: 1px solid #f4f4f4;
}

/* ==========================================================================
   ESPACE CLIENT — responsive
   ========================================================================== */

@media (max-width: 991px) {
    #my-account #content .links,
    #addresses #content.page-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) #main {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    body.page-customer-account:not(#guest-tracking) #content.page-content,
    body:is(#authentication, #registration) #content.page-content,
    #password #content.page-content {
        padding: 1.25rem 1.15rem;
    }

    body:is(#order-detail, #order-return, #guest-tracking) #content :is(.box, .card) {
        padding: 1.15rem 1.15rem;
    }

    #order-detail #content .addresses {
        grid-template-columns: minmax(0, 1fr);
    }

    body:is(.page-customer-account, #order-detail, #order-return) #content .form-footer .btn-primary {
        width: 100%;
        min-width: 0;
    }

    body:is(.page-customer-account, #my-account, #addresses, #order-detail, #order-return) .page-footer .account-link {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    #my-account #content .links,
    #addresses #content.page-content {
        grid-template-columns: minmax(0, 1fr);
    }

    #my-account #content .links a span.link-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        min-height: 0;
        padding: 1.1rem 1.25rem;
        text-align: left;
    }

    #my-account #content .links a i {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }
}