/* ==========================================================================
   CHARTE GRAPHIQUE — KRÉYÒL BIJOUX
   Noir & Or Rose Métallisé — PrestaShop 9 / Thème BlackWep
   ========================================================================== */

:root {
    /* Le site gère déjà son propre thème sombre : sans ça, Samsung Internet /
       Chrome Android appliquent leur "dark mode forcé" par-dessus, qui gère
       très mal le texte en dégradé transparent (background-clip: text) et
       peut le repeindre dans des teintes aléatoires (rouge/orange) */
    color-scheme: dark;
    --or-sombre:      #B37D6D;
    --or-base:        #C58E7F;
    --or-clair:       #E8B7A8;
    --noir-profond:   #0A0A0A;
    --noir-carte:     #1A1A1A;
    --gris-texte:     #D1D1D1;
    --degrade-gris:   linear-gradient(to bottom, #909090 0%, #E8E8E8 30%, #C8C8C8 50%, #E8E8E8 70%, #909090 100%);
    --blanc:          #FFFFFF;
    --degrade-or:     linear-gradient(to bottom, #B37D6D 0%, #E8B7A8 30%, #C58E7F 50%, #E8B7A8 70%, #B37D6D 100%);
    --degrade-bouton: linear-gradient(to bottom, #E8B7A8 0%, #C58E7F 50%, #B37D6D 100%);
    --bordure-or:     linear-gradient(to bottom, #B37D6D, #E8B7A8, #B37D6D);
    --bordure-or-h:   linear-gradient(to right, rgba(179,125,109,0) 0%, #B37D6D 20%, #E8B7A8 50%, #B37D6D 80%, rgba(179,125,109,0) 100%);
    --trait-or:       linear-gradient(to right, rgba(179,125,109,0) 0%, #B37D6D 20%, #E8B7A8 50%, #B37D6D 80%, rgba(179,125,109,0) 100%);
}

/* ==========================================================================
   POLICE GLOBALE — MARCELLUS
   ========================================================================== */

body, p, li, address, label, .control-label,
.product-description, .product-short-description,
.text-muted, .product-details .label,
.product-features dl.data-sheet dd.value,
.product-quantities span,
td, th, small, em, strong,
input, textarea, select, button,
.btn, .btn-primary, .add-to-cart,
.block-newsletter, .block-contact,
#_desktop_language_selector,
.pagination, .alert, .dropdown-menu,
.footer-container, #footer, #skip-intro {
    font-family: 'Marcellus', Georgia, serif !important;
}

/* ==========================================================================
   PAGES CMS (Mentions légales, CGV, A propos…) — interligne resserré
   ========================================================================== */
.page-cms #content p,
.page-cms .cms-box p,
.page-cms #content div,
.page-cms .cms-box div {
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

/* Images insérées à la main dans l'éditeur de texte des pages CMS —
   elles n'ont pas la classe Bootstrap .img-fluid, donc rien ne les
   empêche de s'afficher à leur taille native (ex: 1024px) et de
   déborder sur mobile */
.page-cms #content img,
.page-cms .cms-box img {
    max-width: 100% !important;
    height: auto !important;
}

/* Tableaux dans les pages CMS — bordures visibles + cellules bien séparées */
.page-cms table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 16px !important;
}

.page-cms table th,
.page-cms table td {
    border: 1px solid var(--or-sombre) !important;
    padding: 8px 12px !important;
    text-align: left !important;
    vertical-align: top !important;
}

.page-cms table th {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}

/* ==========================================================================
   FOND NOIR UNIFORME
   ========================================================================== */

html, body,
#wrapper, #main, #content,
#content-wrapper, #left-column, #right-column,
.container, .page-wrapper, .page-content,
.page-home, .page-category, .page-product,
.page-cms, .page-search, .page-order,
.page-customer-account, section#main, .row,
#header, .header-nav, .header-top,
#footer, .footer-container,
.card, .block, .block-content,
[class*="block-"],
.block-categories, .block-categories .category-top-menu,
.block-categories ul, .block-categories li,
.category-cover, .category-description,
#subcategories, .subcategories-list, .subcategories-list li,
section.featured-products, section.featured-products.clearfix,
.featured-products.clearfix,
#content.page-home, #main.page-home,
.page-home #main, .page-home #content,
.page-home .container, .page-home section,
#js-product-list, #js-product-list-top,
.products-selection, .active-filters,
#search_filters, #search_filters_wrapper,
.facet, .facet-label, .facet-title,
.products-sort-order, .products-nb-per-page,
.sort-by-row, .filter-button, .facets-title,
.total-products, .ui-slider {
    background-color: var(--noir-profond) !important;
    background: var(--noir-profond) !important;
    box-shadow: none !important;
}

.pagination, .pagination li, .pagination .page-list,
.breadcrumb, nav.breadcrumb, .breadcrumb-item,
nav[aria-label="breadcrumb"],
.accordion, .accordion-item, .accordion-header,
.accordion-body, .collapse, .collapsing {
    background: var(--noir-profond) !important;
}

.pagination .page-list li a,
.pagination .page-list li .current {
    background: var(--noir-carte) !important;
    color: var(--gris-texte) !important;
}

.alert, .alert-info, .alert-warning, .alert-success, .alert-danger,
.dropdown-menu, .popover, .tooltip-inner,
.modal-content, .modal-header, .modal-body, .modal-footer {
    background: var(--noir-carte) !important;
    border-color: var(--or-sombre) !important;
    color: var(--gris-texte) !important;
}

table, thead, tbody, tfoot, tr, th, td {
    background: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
    border-color: var(--or-sombre) !important;
}

.nav-tabs, .tab-content, .tab-pane,
.nav-tabs .nav-item, .nav-tabs .nav-link {
    background: var(--noir-profond) !important;
    border-color: var(--or-sombre) !important;
    color: var(--gris-texte) !important;
}

.nav-tabs .nav-link.active {
    background: var(--noir-carte) !important;
    color: var(--or-base) !important;
}

/* ==========================================================================
   TITRES — DÉGRADÉ OR ROSE (Marcellus)
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.block-title, .title_block, .page-title,
.product-title a, .product-name a,
.section-title,
.cart-grid-body .card-block h1 {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));
    display: inline-block;
}

.product-title a:hover, h1 a:hover, h2 a:hover {
    filter: brightness(1.3) drop-shadow(0 0 5px rgba(232,183,168,0.4)) !important;
    transition: all 0.3s ease;
}

/* Pages CMS : les titres doivent rester en bloc (sinon deux titres qui se
   suivent se retrouvent collés sur la même ligne à cause du inline-block
   ci-dessus, pensé pour les titres uniques produit/page) */
.page-cms #content h1,
.page-cms #content h2,
.page-cms #content h3,
.page-cms #content h4,
.page-cms .cms-box h1,
.page-cms .cms-box h2,
.page-cms .cms-box h3,
.page-cms .cms-box h4 {
    display: block !important;
    margin-top: 1.3em !important;
    margin-bottom: 0.5em !important;
}

/* theme.css justifie tout le contenu des pages CMS d'un bloc
   (".page-content.page-cms{text-align:justify}"), hérité par tous les
   descendants — correct pour les paragraphes, mais les titres et
   l'annexe "Formulaire type de rétractation" (une liste <ul><li> de
   lignes à points, ex. "Commandé le : ......") en héritent aussi : les
   points de la liste s'étirent alors de façon irrégulière pour justifier
   la ligne, rendant cette liste illisible/anarchique. On repasse ces deux
   cas en alignement à gauche, le corps de texte restant justifié.
   Même règle reprise pour ".js-checkout-modal" : les CGV/mentions ouvertes
   depuis le lien en bas du panier (fenêtre modale pendant la commande) sont
   injectées dans le tunnel de commande SANS le contexte ".page-cms" (le
   corps de la page reste "body#checkout") — aucune des règles ci-dessus,
   ni même le "text-align: justify" de base de theme.css, ne s'y applique
   sinon : tout le contenu (titres compris) y restait aligné à gauche par
   défaut du navigateur, incohérent avec la page CGV normale. */
.page-cms #content h1, .page-cms #content h2, .page-cms #content h3, .page-cms #content h4,
.page-cms .cms-box h1, .page-cms .cms-box h2, .page-cms .cms-box h3, .page-cms .cms-box h4,
.js-checkout-modal .js-modal-content h1, .js-checkout-modal .js-modal-content h2,
.js-checkout-modal .js-modal-content h3, .js-checkout-modal .js-modal-content h4 {
    text-align: left !important;
}
.js-checkout-modal .js-modal-content p {
    text-align: justify !important;
}
/* Paragraphes utilisant des <br> pour des lignes courtes volontaires
   (coordonnées de la société dans l'Article 1 des CGV : "Siège social :
   ...", "Téléphone : ...", etc., chacune sur sa propre ligne à l'intérieur
   d'un seul <p>) — la justification s'applique à CHAQUE ligne d'un
   paragraphe (sauf la toute dernière), pas seulement au bloc dans son
   ensemble : ces lignes, volontairement courtes, se retrouvaient étirées
   avec des espaces énormes entre les mots pour remplir toute la largeur.
   Règle volontairement globale (pas limitée aux pages CMS/à la fenêtre
   modale) : ce problème peut survenir partout où le site justifie du
   texte — y compris via la classe utilitaire ".text-justify" du thème,
   utilisable sur n'importe quelle page (descriptions produit/catégorie
   incluses). On repasse à gauche uniquement les paragraphes contenant un
   <br>, les vrais paragraphes de texte suivi restant justifiés normalement
   partout ailleurs. */
p:has(br) {
    text-align: left !important;
}

/* Pas de césure automatique (retrait d'un essai) : les mots coupés par un
   trait d'union en fin de ligne ne plaisaient pas. La justification est conservée
   partout, y compris sur mobile (choix du site). */
.page-content.page-cms, #category-description, .product-description,
#product-description-short, .js-checkout-modal .js-modal-content,
.text-justify, .js-confirmation-fr {
    -webkit-hyphens: manual;
    hyphens: manual;
}
/* Même exception à l'intérieur de la popup CGV (lien "Conditions générales
   de vente" en bas du panier pendant la commande) : ".js-checkout-modal
   .js-modal-content p" ci-dessus (2 classes) est plus spécifique que
   "p:has(br)" (0 classe) — sans cette règle dédiée, la popup réétirait les
   lignes courtes de l'Article 1 (coordonnées de la société) malgré la
   règle générale ci-dessus, qui perdait silencieusement la bataille de
   spécificité. */
.js-checkout-modal .js-modal-content p:has(br) {
    text-align: left !important;
}
/* Bouton "Fermer" ajouté par custom.js à la fin du contenu de la popup CGV
   (fonction déclenchée sur "shown.bs.modal") — pour ne pas obliger le
   client à remonter tout en haut de la fenêtre une fois le texte lu. */
.js-checkout-modal .js-modal-content .js-fermer-modal-bas {
    display: block !important;
    margin: 28px auto 4px !important;
}
/* Pages CMS : noms techniques (cookies, etc.) en style code sombre cohérent avec la charte */
.page-cms code, .page-cms #content code, .page-cms .cms-box code {
    background: var(--noir-carte) !important;
    color: var(--or-clair) !important;
    -webkit-text-fill-color: var(--or-clair) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 3px !important;
    padding: 1px 6px !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 0.95em !important;
}

/* ==========================================================================
   TEXTES COURANTS
   ========================================================================== */

/* Tous les textes courants en gris clair — reset global */
body, p, li, address, label, .control-label,
span, small, em, strong, td, th,
.product-description, .product-short-description,
.text-muted, .breadcrumb-item,
.product-details .label,
.product-features dl.data-sheet dd.value,
.product-quantities span,
div, section, article, aside, nav, header, footer,
.card-body, .block-content, .content {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* Titres colorés dans le contenu des pages CMS (ex: guide d'entretien) — même dégradé or rose que les h1-h6 */
.or-titre {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    display: inline-block !important;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));
    text-decoration: underline !important;
    text-decoration-color: var(--or-base) !important;
    font-weight: bold !important;
    /* un titre sur 2 lignes hérite du text-align:justify du paragraphe
       parent — la 1re ligne s'étire alors bizarrement (surtout mobile,
       plus étroit donc titres plus souvent sur 2 lignes) */
    text-align: left !important;
}
/* Sous-titre sans soulignement (ajouter la classe "titre-sans-trait" en plus
   de "or-titre" sur le <strong> concerné) */
.or-titre.titre-sans-trait {
    text-decoration: none !important;
}

/* Badge "Visuel généré par IA" — à poser sur les images concernées (art. 50 AI Act) */
.ia-visual {
    position: relative !important;
    display: inline-block !important;
    line-height: 0 !important;
}

.ia-visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.ia-badge {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: var(--noir-profond) !important;
    color: var(--or-clair) !important;
    -webkit-text-fill-color: var(--or-clair) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: normal !important;
    z-index: 2 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
}

/* Logos moyens de paiement (Visa/Mastercard/PayPal) — fond blanc car ces
   logos sont prévus pour fond clair, illisibles tels quels sur fond noir */
.payment-logos {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 16px 0 !important;
}

.payment-logos img {
    height: 140px !important;
    width: auto !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    display: block !important;
}

/* Phrase d'accroche en tête de description produit — même dégradé, plus grand, sans soulignement */
.or-lead {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    display: inline-block !important;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));
    font-weight: bold !important;
    font-size: 1.4em !important;
}

/* Phrases en créole (ex. "Madinina o ponyèt, fièté an tjè'w.", "An gwo
   mèsi pou konfyans-ou !", "Twa kòd, yon sèl lanmou pou Matinik.") — en
   <em> dans les descriptions produit/catégorie. Taille fixe (rem, pas em)
   pour éviter de cumuler avec le font-size déjà posé en ligne sur le <p>
   parent (1.1em/1.15em selon la page) ; cible toutes ces phrases sans
   avoir à modifier chaque description dans PrestaShop. */
.page-product .product-description em,
.page-category #category-description em,
.page-category .category-additional-description em {
    font-size: 1.2rem !important;
}

/* Description Bracelets : "Ce bracelet est né..." et "L'Excellence du
   Titane..." à la même taille (1.4em). Ciblé via la classe body de la
   catégorie (category-id-4) — le style en ligne (même avec !important) ne
   suffit pas à passer devant cette règle une fois enregistré par
   l'éditeur PrestaShop, qui semble neutraliser le "font-size" en ligne à
   la sauvegarde. Toute taille sur cette page doit donc être réglée ici,
   pas dans le code collé dans l'éditeur. */
body.category-id-4 .or-lead {
    font-size: 1.4em !important;
}
body.category-id-4 .or-titre {
    font-size: 1.4em !important;
}
/* Le titre principal de la collection (même classe .or-titre + une
   classe en plus) reste plus grand que les sous-titres de section —
   sélecteur à 2 classes, plus spécifique que la règle juste au-dessus. */
body.category-id-4 .or-titre.titre-collection-mobile {
    font-size: 1.6em !important;
}
/* Tous les mots en or rose en milieu de texte (Madinina Spirit, Kréyòl
   Bijoux, La magie de l'anodisation) à la même taille. */
body.category-id-4 .or-accent {
    font-size: 1.15em !important;
}
/* Titre principal "COLLECTION MADININA SPIRIT" centré (le titre est en
   display:inline-block via .or-titre, donc c'est le paragraphe parent
   qu'il faut centrer, pas le titre lui-même). */
body.category-id-4 #category-description p:has(> .titre-collection-mobile) {
    text-align: center !important;
}
/* Devise en créole ("Madinina o ponyèt, fièté an tjè'w.") — classe dédiée
   plutôt qu'un font-size en ligne, ignoré par l'éditeur PrestaShop à
   l'enregistrement (voir plus haut). */
/* "#category-description" dans le sélecteur : la règle générale
   "#category-description p { font-size: 17px !important }" (sélecteur à ID)
   l'emportait sinon sur la classe seule — c'est pour cela que la phrase ne
   grossissait pas. Centrage ici aussi, en plus du style en ligne. */
body.category-id-4 #category-description p.or-devise {
    font-size: 1.7em !important;
    text-align: center !important;
}
body.category-id-4 #category-description p.or-devise em {
    font-size: 1em !important;
}
/* Mobile : les tailles ci-dessus sont pensées pour ordinateur, beaucoup trop
   grandes sur un écran de téléphone (même approche que "Notre histoire" :
   tailles fixes réduites). Sélecteurs avec #category-description pour
   passer devant les règles de bureau, et tenir sur peu de lignes. */
@media (max-width: 767px) {
    body.category-id-4 #category-description .or-titre.titre-collection-mobile {
        font-size: 19px !important;
    }
    body.category-id-4 #category-description .or-lead,
    body.category-id-4 #category-description .or-titre,
    body.category-id-4 #category-description .or-accent {
        font-size: 18px !important;
    }
    /* Phrase en créole : un peu plus grosse que le reste sur mobile */
    body.category-id-4 #category-description p.or-devise {
        font-size: 21px !important;
    }
    body.category-id-4 #category-description .or-titre.titre-collection-mobile {
        font-size: 19px !important;
    }
}

/* Description Accessoires : même ajustement que Bracelets ci-dessus. */
body.category-id-5 .or-lead {
    font-size: 1.15em !important;
}
/* Mise en page Accessoires alignée sur Bracelets : texte courant 17px (il
   restait à 15px — cette description est dans ".category-additional-
   description", hors de "#category-description" qui porte la règle 17px),
   sous-titres 1.4em, mots en or rose 1.15em intégrés au texte. Tailles
   gérées ici et non dans le code de l'éditeur, qui supprime les "font-size"
   en ligne à l'enregistrement. */
body.category-id-5 .category-additional-description p {
    font-size: 17px !important;
}
body.category-id-5 .category-additional-description .or-lead,
body.category-id-5 .category-additional-description .or-titre {
    font-size: 1.4em !important;
}
body.category-id-5 .category-additional-description .or-accent {
    font-size: 1.15em !important;
    display: inline !important;
}
/* Titres : hauteur de ligne héritée trop serrée (20px pour du texte de 24px)
   — le dégradé doré, découpé aux lettres, s'arrêtait avec la boîte et
   rognait le bas des lettres (g, q, p...). On donne de la place dessous. */
body.category-id-5 .category-additional-description .or-titre {
    line-height: 1.5 !important;
    padding-bottom: 4px !important;
}
/* Titres centrés (le paragraphe parent, le titre étant en inline-block) et
   titre principal (le 1er) en majuscules — filet de sécurité en plus du code
   source de la description, au cas où l'éditeur modifie le texte. */
body.category-id-5 .category-additional-description p:has(> .or-titre) {
    text-align: center !important;
}
body.category-id-5 .category-additional-description p:first-of-type .or-titre {
    text-transform: uppercase !important;
}
/* Phrase en créole en fin de description (même rendu que sur Bracelets) :
   centrée, grasse, un cran au-dessus du texte courant. */
body.category-id-5 .category-additional-description p.or-devise {
    font-size: 1.55em !important;
    text-align: center !important;
    font-weight: bold !important;
}
body.category-id-5 .category-additional-description p.or-devise em {
    font-size: 1em !important;
}
@media (max-width: 767px) {
    body.category-id-5 .category-additional-description p.or-devise {
        font-size: 21px !important;
    }
}
@media (max-width: 767px) {
    body.category-id-5 .category-additional-description .or-lead,
    body.category-id-5 .category-additional-description .or-titre,
    body.category-id-5 .category-additional-description .or-accent {
        font-size: 18px !important;
    }
}

/* Description "Lot de 3 cordons" : .or-lead et .or-titre alignés sur la
   même taille (1.15em) que les descriptions Bracelets/Accessoires, pour
   une cohérence sur tout le site. */
body.product-id-20 .or-lead {
    font-size: 1.15em !important;
}
body.product-id-20 .or-titre {
    font-size: 1.15em !important;
}

/* Sur les pages produit, une règle globale (.page-product .product-information
   span) écrase .or-lead/.or-accent en gris uni et annule background-clip —
   elle est plus spécifique que la règle .page-product .or-lead ci-dessous
   (2 classes + 1 élément bat 2 classes), donc on ajoute une variante avec
   .product-information pour dépasser sa spécificité */
.page-product .or-lead,
.page-product .or-accent,
.page-product .product-information .or-lead,
.page-product .product-information .or-accent {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
}

/* Page catégorie : afficher la description (card en bas du DOM) tout en
   haut, avant la barre de tri et la grille de produits — les trois blocs
   sont frères dans #main, on les réordonne visuellement via flexbox */
.page-category #main {
    display: flex !important;
    flex-direction: column !important;
}
.page-category #js-product-list-footer {
    order: -1 !important;
}
.page-category #js-product-list-header {
    order: 1 !important;
}
.page-category #products {
    order: 2 !important;
}

/* La description remplit toute la largeur de sa colonne de contenu
   (sans déborder sur la colonne des filtres à gauche) */
.page-category #js-product-list-footer {
    width: 100% !important;
    max-width: 100% !important;
}
.page-category #js-product-list-footer .card,
.page-category #js-product-list-footer .card-block {
    width: 100% !important;
}

/* Cacher le cadre quand la description supplémentaire est vide */
.page-category #js-product-list-footer .card:has(.category-additional-description:empty) {
    display: none !important;
}

/* Cadre de description de catégorie — marges réduites (desktop + mobile),
   le padding global de 20px sur .card était trop généreux ici. Il y a en
   fait DEUX cadres imbriqués (.card extérieur + .card-block intérieur),
   chacun avec son propre padding de 20px — il faut réduire les deux. */
.page-category #js-product-list-footer .card,
.page-category .block-category {
    padding: 15px !important;
}
.page-category #js-product-list-footer .card-block.category-additional-description {
    padding: 0 !important;
}

/* Miniature vidéo cliquable avec bouton "play" — tout en classes CSS car
   l'éditeur PrestaShop supprime position/display/transform des styles en
   ligne (filtre de sécurité), ce qui cassait le centrage et la taille */
.video-thumb-wrap {
    text-align: center !important;
    margin: 30px 0 !important;
}
.video-thumb-link {
    position: relative !important;
    display: inline-block !important;
    max-width: 700px !important;
    width: 100% !important;
}
.video-thumb-img {
    width: 100% !important;
    display: block !important;
    border-radius: 4px !important;
    border: 1px solid #B37D6D !important;
}
.video-thumb-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(40px, 12vw, 70px) !important;
    height: clamp(40px, 12vw, 70px) !important;
    border-radius: 50% !important;
    background: rgba(10,10,10,0.75) !important;
    border: 2px solid #C58E7F !important;
}
.play-triangle {
    width: 0 !important;
    height: 0 !important;
    border-top: solid transparent !important;
    border-bottom: solid transparent !important;
    border-left: 22px solid #C58E7F !important;
    margin-left: 5px !important;
    border-top-width: clamp(8px, 2.4vw, 14px) !important;
    border-bottom-width: clamp(8px, 2.4vw, 14px) !important;
    border-left-width: clamp(13px, 3.8vw, 22px) !important;
}

/* Drapeau de la Martinique en filigrane derrière la description produit */
.watermark-flag {
    position: relative !important;
}
.watermark-flag::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/themes/BlackWep/assets/img/Flag-of-Martinique.svg.webp');
    background-repeat: no-repeat !important;
    /* Positionné juste sous le titre "Trois cordons, trois styles, une
       liberté totale" plutôt qu'au centre du cadre (dont la hauteur varie
       énormément selon la longueur du texte en dessous). --flag-y est
       calculé dynamiquement par custom.js (fonction
       positionnerFiligraneDrapeau) à partir de la position réelle du
       titre — un nombre de pixels fixe en dur ne convient pas : selon
       l'appareil/la police, le texte au-dessus (et le nombre de lignes du
       titre lui-même, 1 ou 2 selon la largeur d'écran) n'a pas exactement
       la même hauteur, ce qui décalait le drapeau au point de chevaucher
       le titre sur certains téléphones. Valeur en dur gardée en secours
       uniquement si le JS ne s'exécute pas. */
    background-position: center var(--flag-y, 285px) !important;
    background-size: contain !important;
    opacity: 0.35 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
@media (max-width: 767px) {
    .watermark-flag::before {
        background-position: center var(--flag-y, 431px) !important;
    }
}
.watermark-flag > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Martinique avec ornements — filigrane pour la description de la
   sous-catégorie Bracelets (même principe que .watermark-flag) */
.watermark-ornement {
    position: relative !important;
}
.watermark-ornement::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/themes/BlackWep/assets/img/contour%20martinique.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 90% !important;
    opacity: 0.35 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Sur mobile, le texte retombe sur beaucoup plus de lignes (bloc bien
   plus haut) : à taille égale en pixels, le filigrane paraît minuscule
   noyé dans tout ce texte — on l'agrandit pour ce format d'écran */
@media (max-width: 767px) {
    .watermark-ornement::before {
        background-size: 160% !important;
    }
}

.watermark-ornement > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Page "Notre histoire" — créée comme catégorie (id_category=13) plutôt
   que page CMS classique : elle récupère donc le cadre ".card" (bordure
   correcte) mais pas l'espacement généreux entre paragraphes des pages
   CMS, et son texte est atténué par la classe générique ".text-muted" du
   thème (prévue pour un texte secondaire discret, pas pour le contenu
   principal d'une page). On restaure une couleur pleine et un espacement
   confortable, et on masque "Aucun produit disponible..." (normal pour une
   catégorie vide, hors sujet ici) — scopé à cette catégorie précise
   (body.category-id-13) pour ne jamais cacher ce message sur une vraie
   catégorie produits vide. */
#category-description.text-muted {
    color: var(--blanc) !important;
    -webkit-text-fill-color: var(--blanc) !important;
}
#category-description p {
    margin-bottom: 18px !important;
    line-height: 1.7 !important;
    font-size: 17px !important;
    text-align: justify !important;
}
#category-description p:has(.or-lead),
#category-description p.or-lead,
#category-description p:has(.or-titre) {
    text-align: left !important;
}
/* Page "Notre histoire" : les deux phrases en or rose (.or-lead, intro et
   clôture) sont centrées, contrairement au reste du texte (justifié) et
   aux autres pages utilisant .or-lead (produits, etc.) qui restent alignées
   à gauche grâce au scope "body.category-id-13". */
body.category-id-13 #category-description p.or-lead {
    text-align: center !important;
}
/* Page Bracelets : ".or-accent" (Madinina Spirit, Kréyòl Bijoux) en milieu
   de phrase justifiée créait un grand vide irrégulier autour de lui dès
   qu'on a ajouté "text-indent" sur le paragraphe (même bug qu'sur "Notre
   histoire" : l'algorithme de justification traite un inline-block comme
   un bloc rigide à contourner). Repassé en inline, qui s'intègre
   normalement dans le texte justifié. */
body.category-id-4 .or-accent {
    display: inline !important;
}
/* Scopées à "Notre histoire" (category-id-13) : ces tailles ne doivent pas
   s'appliquer aux autres pages catégorie (Bracelets, Accessoires...) qui
   gèrent leur propre taille via des styles inline dans leur description —
   sans ce scope, ces règles (!important) écrasaient ces tailles inline
   partout ailleurs. */
body.category-id-13 #category-description .or-lead {
    font-size: 22px !important;
}
body.category-id-13 #category-description .or-titre {
    font-size: 17px !important;
}
body.category-id-13 #category-description .or-accent {
    font-size: 19px !important;
}
/* Le thème applique une bordure basse native de ~0.9px sur #header (visible
   uniquement une fois autre chose ajouté juste au-dessus, comme le bandeau
   ci-dessous) — sans rapport avec nos styles, à neutraliser explicitement. */
/* Bandeau "Livraison gratuite" — rempli par custom.js dans le
   ".header-banner" fourni (vide) par le thème */
.header-banner {
    display: block !important;
    position: relative !important;
    background: var(--noir-profond) !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 11px 15px !important;
    height: 42px !important;
    text-align: center !important;
}
.header-banner-item {
    position: absolute !important;
    left: 15px !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    transition: opacity 0.8s ease !important;
    pointer-events: none !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.header-banner-item.header-banner-item-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.header-banner-orne {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin: 0 3px !important;
    background: var(--degrade-or) !important;
    -webkit-mask-image: url('/img/favicon.ico') !important;
    mask-image: url('/img/favicon.ico') !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
.header-banner-orne-droite {
    transform: scaleX(-1) !important;
    margin-left: -3px !important;
}
.header-banner-or {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    display: inline-block !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}
@media (max-width: 767px) {
    .header-banner {
        height: 38px !important;
        padding: 9px 8px !important;
    }
    .header-banner-item {
        left: 5px !important;
        right: 5px !important;
        font-size: 8px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
    .header-banner-orne {
        width: 12px !important;
        height: 12px !important;
        margin: 0 2px !important;
    }
}
#category-description p:last-child {
    margin-bottom: 0 !important;
}
body.category-id-13 #content.page-not-found {
    display: none !important;
}
/* Vidéo de présentation ajoutée par custom.js (fonction ajouterVideoHistoire)
   juste après le cadre de texte (même colonne), donc même largeur que lui
   nativement, sans avoir à toucher à la mise en page des colonnes. */
body.category-id-13 .js-video-histoire {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important; /* coins carrés, comme le cadre de texte au-dessus */
    border: 1px solid var(--or-sombre) !important;
    margin-top: 20px !important;
}
/* Page d'accueil — bloc "logo K + devise" (image du module Bannière,
   a.banner). Son cadre est dessiné DANS l'image (fine ligne brune, plus
   fine et plus terne que les vrais cadres CSS or rose des autres blocs), et
   l'image a des marges transparentes autour (mesuré sur l'image actuelle,
   1110x214 px : cadre de x=19 à 1095 et de y=21 à 196), ce qui le rendait
   ~3% plus étroit que les autres blocs. On rogne donc l'image 4 px À
   L'INTÉRIEUR de son cadre dessiné (la zone gardée fait 1068x167 px : x de
   23 à 1091, y de 25 à 192 — le logo et le texte en sont très loin), et on
   dessine à la place un vrai cadre CSS, identique à celui de la vidéo et
   des cartes produits. Tout est en % pour suivre toutes les tailles
   d'écran : l'image est agrandie à 1110/1068 = 103,93% de la largeur, et
   décalée de 23/1068 = 2,15% (gauche) et 25/1068 = 2,34% (haut, un
   pourcentage de marge se calcule sur la LARGEUR). Si l'image de la
   bannière est remplacée, ces valeurs sont à revoir (ou à supprimer si la
   nouvelle image n'a plus de cadre ni de marge transparente). */
.page-home > a.banner {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    aspect-ratio: 1068 / 167 !important;
    overflow: hidden !important;
    margin: 26px 0 0 !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 0 !important; /* coins carrés, comme les cartes produits */
    background: var(--noir-profond) !important;
}
.page-home > a.banner img:not(#banner-boost) {
    display: block !important;
    width: 103.9326% !important;
    max-width: none !important;
    height: auto !important;
    margin: -2.3408% 0 0 -2.1536% !important;
}
/* Page d'accueil — vidéo de présentation en grand format, ajoutée par
   custom.js (bloc ".js-video-presentation") juste après le bloc "logo K +
   devise". Cadre or sombre comme les autres vidéos du site ; le bouton son
   reprend le style des boutons or rose (texte noir, rectangle 4px). */
.js-video-presentation {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 30px 0 !important;
    border: none !important; /* essai sans cadre autour de la vidéo */
    border-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    line-height: 0 !important;
}
/* La vidéo actuelle est VERTICALE (1080x1920, format téléphone) : en pleine
   largeur elle ferait ~2000px de haut sur ordinateur. Sa largeur est donc
   limitée pour que sa hauteur ne dépasse pas 85% de l'écran (--vp-ratio =
   largeur/hauteur de la vidéo, renseigné par custom.js dès qu'elle est
   chargée ; 0.5625 = 9/16 en attendant). Une vidéo horizontale, elle,
   remplit tout le cadre ; sur mobile, une vidéo verticale remplit la
   largeur de l'écran. */
.js-video-presentation-zone {
    position: relative !important;
    /* hauteur plafonnée à 70% de l'écran (et 580px max) sur ordinateur */
    width: min(100%, calc(min(70vh, 580px) * var(--vp-ratio, 0.5625))) !important;
}/* Sur mobile, une vidéo verticale remplit la largeur de l'écran : c'est
   exactement le format prévu pour. */
@media (max-width: 767px) {
    .js-video-presentation-zone {
        width: 100% !important;
    }
}
.js-video-presentation-video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
.js-video-presentation-son:not(#vp-boost) {
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: var(--degrade-bouton) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
/* Mobile : la vidéo verticale a du texte sur toute sa hauteur, le bouton y
   chevauchait. Il passe donc SOUS la vidéo, centré, au lieu d'être posé
   dessus. */
@media (max-width: 767px) {
    .js-video-presentation-son:not(#vp-boost) {
        position: static !important;
        display: flex !important;
        width: max-content !important;
        margin: 12px auto 0 !important;
    }
}
/* Filigrane médaillon en fond, même principe que ".watermark-flag" sur les
   fiches produit (image dédiée, semi-transparente, centrée derrière le
   texte). Image fournie par Céline, déjà transparente.
   Taille calée sur la LARGEUR (pas la hauteur) : sur grand écran, ce cadre
   est large mais peu haut (le texte tient sur peu de lignes) — une taille
   calée sur la hauteur y donnait un médaillon plus petit qu'attendu. Calé
   sur la largeur, il grossit logiquement avec la taille de l'écran, quitte
   à rogner légèrement le haut/bas sur les cadres bas — imperceptible à
   cette opacité. */
/* Médaillon dans "#left-column" (la vraie colonne de gauche du gabarit,
   quasi vide sur cette page) — vidéo ajoutée par custom.js (fonction
   ajouterMedaillonHistoire), déjà bien cadrée nativement (contrairement à
   l'image fixe utilisée avant, qui avait une grande marge transparente
   dans le fichier et nécessitait un recadrage en CSS) : pas besoin de
   "transform:scale" ici. */
body.category-id-13 .js-medaillon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}
body.category-id-13 .js-medaillon-histoire {
    display: block !important;
    width: 100% !important;
    border-radius: 4px !important;
}
/* Colonne de gauche réduite (25% → 26%, quasiment inchangée) : le recadrage
   ci-dessus suffit à donner un médaillon bien visible sans avoir besoin
   d'élargir la colonne au détriment du cadre de texte. */
@media (min-width: 992px) {
    body.category-id-13 #left-column {
        width: 26% !important;
        max-width: 26% !important;
        flex: 0 0 26% !important;
    }
    body.category-id-13 #content-wrapper {
        width: 74% !important;
        max-width: 74% !important;
        flex: 0 0 74% !important;
    }
}
/* Sur mobile, la colonne de gauche passe à 100% de large (empilée au-dessus
   du texte) : sans contrainte, le médaillon prend toute la largeur de
   l'écran. De plus, le fichier vidéo contient une grande marge noire/
   transparente autour du médaillon lui-même (mesurée : ~18% de vide en
   haut, ~15% en bas, ~26% à gauche, ~30% à droite) — invisible sur fond
   noir, mais qui agrandit d'autant le bloc affiché. On réduit la taille et
   on recadre avec "object-fit: cover" (sur un cadre dont le ratio correspond
   à la zone réellement utile de la vidéo) pour combler cette marge cachée
   plutôt que de l'agrandir avec le reste. */
@media (max-width: 991px) {
    body.category-id-13 .js-medaillon-wrap {
        display: block !important;
        max-width: 170px !important;
        margin: 0 auto 20px !important;
        aspect-ratio: 518 / 718 !important;
        overflow: hidden !important;
        border-radius: 4px !important;
    }
    body.category-id-13 .js-medaillon-histoire {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 48% 52% !important;
    }
    /* Textes en dégradé or rose de "Notre histoire" (.or-lead/.or-titre/
       .or-accent) : tailles pensées pour desktop (22px/17px/19px dans
       #category-description plus haut), beaucoup trop grandes une fois la
       colonne de texte réduite à la largeur de l'écran en mobile. */
    body.category-id-13 #category-description .or-lead {
        font-size: 17px !important;
    }
    body.category-id-13 #category-description .or-titre {
        font-size: 14px !important;
    }
    body.category-id-13 #category-description .or-accent {
        font-size: 18px !important;
    }
}
/* Centrage vertical du médaillon PAR RAPPORT AU CADRE DE TEXTE SEUL, pas à
   la vidéo qui suit en dessous dans la même colonne de droite. Un simple
   centrage flex sur toute la hauteur de la colonne de droite centrerait par
   rapport à "texte + vidéo" cumulés, plus haut que le texte seul — d'où un
   calcul via JS (custom.js, fonction centrerMedaillonHistoire) qui mesure
   la hauteur du cadre ".block-category.card.card-block" uniquement, et
   pousse le médaillon avec un "margin-top" calculé pour ne centrer que sur
   cette hauteur-là. */

/* Badge Martinique flottant (description Bracelets) — 155×155 sur
   ordinateur ; réduit sur mobile pour laisser au titre "COLLECTION
   MADININA SPIRIT" la place de tenir sur une seule ligne à côté. */
.badge-martinique-bracelets {
    float: right !important;
    /* marge gauche négative = -largeur : la largeur de ce flottant compte
       pour zéro dans la mise en page, il ne rétrécit donc plus les lignes
       du titre, qui se centre ainsi par rapport au cadre entier et non par
       rapport à l'espace restant à gauche du logo. Le logo ne bouge pas
       (il reste calé à droite). */
    margin: -18px -16px 15px -155px !important;
    opacity: 1 !important;
    width: 155px !important;
    height: 155px !important;
}
/* Copie mobile du badge : sur mobile le titre passe AU-DESSUS de l'image
   (au lieu d'à côté sur ordinateur) — comme un float ne peut pas être
   réordonné en CSS seul sans risquer de déplacer aussi la version
   ordinateur, on utilise une deuxième balise <img> dédiée au mobile,
   placée après le titre dans le HTML, chacune des deux images étant
   masquée sur l'autre format d'écran. */
.badge-martinique-bracelets-mobile {
    display: none;
}
@media (max-width: 767px) {
    .badge-martinique-bracelets {
        display: none !important;
    }
    .badge-martinique-bracelets-mobile {
        display: block !important;
        float: right !important;
        width: 95px !important;
        height: 95px !important;
        margin: 0 0 10px 10px !important;
        vertical-align: top !important;
    }
    /* Titre "COLLECTION MADININA SPIRIT" — 1.4em tenait tout juste sur une
       ligne en test (301px pour un cadre de 313px) mais passait à la
       ligne sur l'appareil réel (rendu de police légèrement différent) ;
       réduit à 1.25em pour une marge de sécurité. */
    .titre-collection-mobile {
        font-size: 1.25em !important;
    }
    /* Centré uniquement sur mobile — le titre est en display:inline-block
       (via .or-titre), donc c'est le paragraphe parent qu'il faut centrer,
       pas le titre lui-même. */
    .badge-martinique-bracelets + p {
        text-align: center !important;
    }
    /* Retour à la ligne forcé dans "Ce bracelet est né..." — masqué
       uniquement sur mobile pour laisser le texte s'enrouler naturellement
       autour de l'image ; la version ordinateur garde son saut de ligne
       (ne pas y toucher, déjà validée). */
    .saut-ligne-desktop-uniquement {
        display: none !important;
    }
    /* .or-lead est en display:inline-block (règle de base, utilisée
       partout ailleurs sur le site) — un inline-block ne s'enroule pas
       autour d'un flottant comme du texte normal, il se pousse entièrement
       en dessous si la largeur restante ne lui suffit pas. En "inline",
       le texte s'enroule ligne par ligne autour de l'image comme voulu. */
    .badge-martinique-bracelets-mobile + p .or-lead {
        display: inline !important;
    }
}

/* Cordons Madinina — filigrane pour la description du lot de cordons
   de rechange (même principe que .watermark-flag / .watermark-ornement) */
.watermark-cordons {
    position: relative !important;
}
.watermark-cordons::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/themes/BlackWep/assets/img/cordons%20madinina.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 90% !important;
    opacity: 0.35 !important;
    filter: grayscale(100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
@media (max-width: 767px) {
    .watermark-cordons::before {
        background-size: 160% !important;
    }
}
.watermark-cordons > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Photo de cordon or rose — filigrane pour la description de la
   sous-catégorie Accessoires (même principe que .watermark-cordons, mais
   en couleur — pas de grayscale — et plus grande/plus opaque à la
   demande) */
.watermark-cordon-accessoires {
    position: relative !important;
}
.watermark-cordon-accessoires::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('https://kreyolbijoux.com/img/cms/1000115729.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 65% !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
@media (max-width: 767px) {
    .watermark-cordon-accessoires::before {
        background-size: 110% !important;
        background-position: center top !important;
    }
}
.watermark-cordon-accessoires > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Badge cordon flottant (description Accessoires) — remplace le filigrane
   plein cadre ci-dessus, non utilisé pour ce bloc. Même principe que le
   badge Martinique de la description Bracelets : petite image en haut à
   droite, couleur pleine. Ratio non carré (1536×1024 à l'origine) conservé. */
.badge-cordon-accessoires {
    float: right !important;
    margin: 0 0 5px 8px !important;
    width: 150px !important;
    height: 100px !important;
}
@media (min-width: 768px) {
    .badge-cordon-accessoires {
        margin: 0 -16px 5px 8px !important;
    }
}
@media (max-width: 767px) {
    .badge-cordon-accessoires {
        width: 82px !important;
        height: 55px !important;
        margin: 0 -16px 5px 6px !important;
    }
    /* .or-lead est en display:inline-block (règle de base du site) — un
       inline-block ne s'enroule pas autour d'un flottant comme du texte
       normal, il se pousse entièrement en dessous. En "inline", le texte
       s'enroule ligne par ligne autour de l'image (même correctif que sur
       la description Bracelets). */
    .badge-cordon-accessoires + p .or-lead {
        display: inline !important;
    }
}

/* Mise en valeur ponctuelle (nom d'entreprise, email...) — même dégradé, sans soulignement */
.or-accent {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    display: inline-block !important;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));
    font-weight: bold !important;
}

/* Exclut les boutons (.btn) : cet éclaircissement est pensé pour les liens
   texte simples. Appliqué à un bouton .btn-primary (ex. "COMMANDER" du
   panier, qui est une balise <a> et non <button>), il délave le dégradé
   or au survol au lieu de l'effet de surbrillance normal des boutons
   (translateY + ombre, cf. règle .btn-primary:hover plus bas) — d'où un
   survol différent selon que le bouton est un <a> ou un <button>. */
a:hover:not(.btn), a:hover:not(.btn) span {
    /* même intensité que la surbrillance des boutons (voir
       .btn-primary:hover plus bas) — auparavant 1.4 ici contre 1.15 sur
       les boutons, deux intensités différentes selon l'élément survolé */
    filter: brightness(1.2) !important;
    transition: all 0.3s ease;
}

/* Les liens déjà visités (plan du site, etc.) gardent leur couleur normale
   au lieu de virer orange/rose via le style :visited par défaut du navigateur */
a:visited {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Pas de surbrillance sur la bannière du bas */
a.banner:hover, a.banner:hover img,
.banner-bottom a:hover, .banner-bottom a:hover img {
    filter: none !important;
    opacity: 1 !important;
}

/* Pas de surbrillance sur les images du carrousel */
#carousel a:hover, #carousel a:hover img,
#carousel a:hover span, #carousel img:hover {
    filter: none !important;
    opacity: 1 !important;
}

/* ==========================================================================
   MENU PRINCIPAL — DÉGRADÉ OR (Great Vibes sur catégories racines)
   ========================================================================== */

/* Catégories racines uniquement */
#top-menu > li > a {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-family: 'Great Vibes', cursive !important;
    font-size: 1.95rem !important;
    letter-spacing: 0.04em !important;
}

#top-menu > li > a:hover {
    filter: brightness(1.3) drop-shadow(0 0 5px rgba(232,183,168,0.4)) !important;
    transition: all 0.3s ease;
}

/* Sous-menus — horizontal, sans fond, masqués par défaut */
#top-menu .sub-menu, nav#top-menu .sub-menu,
.top-menu-link .sub-menu, #header .menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
    font-family: 'Marcellus', Georgia, serif !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

/* Sous-menu : ul interne en ligne */
#top-menu .sub-menu ul,
nav#top-menu .sub-menu ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    gap: 8px !important;
}

#top-menu .sub-menu ul li,
nav#top-menu .sub-menu ul li {
    padding: 0 !important;
    margin: 0 !important;
}

/* Afficher au survol du li parent */
#top-menu > li:hover > .sub-menu,
nav#top-menu > li:hover > .sub-menu {
    display: block !important;
}

/* Afficher aussi au clic (persiste sans avoir la souris dessus, jusqu'au
   clic sur une autre catégorie) — classe ajoutée en JS sur "Martinique" */
#top-menu > li > .sub-menu.js-open,
nav#top-menu > li > .sub-menu.js-open {
    display: block !important;
    /* theme.css met .sub-menu à visibility:hidden;opacity:0 par défaut, et
       ne repasse à visible/1 qu'au survol (:hover) — sans ça, le sous-menu
       ouvert par clic reste bien en display:block mais invisible. */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Le li parent doit être en position relative */
#top-menu > li {
    position: relative !important;
}

#top-menu .sub-menu ul li a, nav#top-menu li ul li a,
.top-menu-link .sub-menu a, .top-menu .sub-menu a {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background-clip: unset !important;
    filter: none !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    padding: 6px 14px !important;
    white-space: nowrap !important;
}

.top-menu-link .sub-menu a:hover,
nav#top-menu li ul li a:hover,
#top-menu .sub-menu ul li a:hover {
    filter: brightness(1.6) !important;
    background: none !important;
    transition: filter 0.2s ease !important;
}

/* ==========================================================================
   PRIX
   ========================================================================== */

.price, .current-price, .product-price, .regular-price {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: bold !important;
    display: inline-block;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.btn-primary, .add-to-cart,
.checkout.cart-detailed-actions .btn-primary {
    /* Texte noir comme tous les autres boutons or rose du site (newsletter,
       contact, ajouter au panier en modale, bannière cookies) — "COMMANDER"
       était resté la seule exception en blanc. */
    background: var(--degrade-bouton) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    border: 1px solid var(--or-sombre) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    padding: 12px 25px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover, .add-to-cart:hover,
.checkout.cart-detailed-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(197,142,127,0.4) !important;
    /* légère surbrillance dédiée aux boutons — l'ancienne règle générale
       a:hover (filter: brightness(1.4)) donnait cet effet par accident sur
       les boutons qui sont des <a> (ex. "COMMANDER" du panier), mais
       délavait le dégradé à l'excès ; on l'exclut désormais des boutons
       (voir règle a:hover:not(.btn) plus haut) et on remet un survol
       dédié ici, à la même intensité (1.2) que les liens, plus le
       soulèvement/ombre en plus pour les boutons.
       ".checkout.cart-detailed-actions .btn-primary:hover" est répété
       explicitement : la version de base (3 classes, ligne ~843) a une
       spécificité plus forte que ".btn-primary:hover" seul (2 classes) et
       gagnait TOUJOURS sur le box-shadow, même en survol — le bouton
       "COMMANDER" du panier (dans ce conteneur précis) ne s'allumait
       jamais. Sans ce doublon explicite, le survol resterait invisible
       spécifiquement ici. */
    filter: brightness(1.2) !important;
}

/* PrestaShop désactive brièvement le bouton pendant l'ajout au panier (pour
   éviter un double-clic) — le navigateur affiche alors son curseur
   "interdit" par défaut pour tout bouton désactivé, ce qui ressemble à une
   erreur alors que l'ajout réussit toujours. Curseur "patientez" à la place,
   plus juste puisque c'est un court traitement, pas un blocage. */
.btn-primary:disabled, .add-to-cart:disabled {
    cursor: wait !important;
}

/* ==========================================================================
   ICÔNES — DÉGRADÉ OR ROSE
   ========================================================================== */

.material-icons, .fa, .fas, .far, .fab,
.shopping-cart, #_desktop_cart i, #_desktop_user_info i {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6)) !important;
}

/* ==========================================================================
   RÉSEAUX SOCIAUX — cercles noirs, icônes grises
   ========================================================================== */

/* Twitter et LinkedIn non utilisés — masqués (seuls Facebook/Instagram restent) */
.block-social li.twitter,
.block-social li.linkedin {
    display: none !important;
}

.block-social, .block-social ul {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.block-social li {
    background-color: #000000 !important;
    border: 1px solid var(--gris-texte) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.block-social li:hover {
    background-color: var(--or-base) !important;
    border-color: var(--or-base) !important;
}

/* Neutraliser le dégradé or sur les liens/icônes sociaux */
.block-social li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: none !important;
}

.block-social li a i,
.block-social li a svg,
.block-social li a span:not(.hidden) {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: none !important;
}

.block-social li:hover a i,
.block-social li:hover a svg {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* LinkedIn — overlay absolu sur le li, couvre tout le contenu du thème */
.block-social li.linkedin {
    position: relative !important;
    overflow: hidden !important;
}

/* Overlay noir + icône SVG centré — posé AU-DESSUS du contenu du thème */
.block-social li.linkedin::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    pointer-events: none !important;
    background-color: #000000 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23D1D1D1' d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
    border-radius: 50% !important;
}

.block-social li.linkedin:hover::before {
    background-color: var(--or-base) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E") !important;
}

/* Supprimer les anciens ::before/::after sur le lien (plus nécessaires) */
.block-social li.linkedin a::before,
.block-social li.linkedin a::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   LIGNES OR ROSE — HEADER
   ========================================================================== */

hr, .separator, .divider {
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    border-image: var(--bordure-or-h) 1 !important;
    opacity: 0.8;
}

/* Trait au-dessus du 1er article du panier (page /panier complète) — un
   <hr class="separator"> entre le titre "Panier" (masqué) et la liste des
   articles, superflu puisque le cadre de la carte fait déjà office de
   séparation visuelle */
.cart-container > hr.separator {
    display: none !important;
}

#header .header-nav, .header-nav {
    max-height: none !important;
    height: auto !important;
    border-top: 1px solid transparent !important;
    border-bottom: none !important;
    border-image: var(--bordure-or-h) 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 5px !important;
    display: block !important;
    overflow: visible !important;
}

#header {
    border-bottom: 1px solid transparent !important;
    border-image: var(--bordure-or-h) 1 !important;
    overflow: visible !important;
}
#header .header-nav {
    border-top: none !important;
    border-image: none !important;
}

.header-top { border-bottom: none !important; }

/* ==========================================================================
   CARROUSEL / SLIDER
   ========================================================================== */

/* Verrou visuel tant que le splash n'est pas terminé : seul le slide
   marqué .active par Bootstrap s'affiche (jamais les classes de
   transition .carousel-item-next/-prev/-left/-right), sans la moindre
   animation — quel que soit l'état de l'autoplay en arrière-plan derrière
   la vidéo, aucun glissement/flash n'est jamais visible */
body:not(.intro-finie) #carousel .carousel-item {
    display: none !important;
    transition: none !important;
}
body:not(.intro-finie) #carousel .carousel-item.active {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}

#carousel {
    position: relative !important;
    border-bottom: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    background-color: var(--noir-profond) !important;
}

#carousel::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: 1px !important;
    background: var(--trait-or) !important;
    z-index: 10 !important;
}

#carousel .carousel,
#carousel .carousel-inner,
#carousel ul.carousel-inner,
#carousel .carousel-item,
#carousel li.carousel-item,
#carousel .carousel-slide,
.carousel, .carousel-inner, .carousel-item {
    background-color: var(--noir-profond) !important;
    background: var(--noir-profond) !important;
}

#carousel .carousel,
#carousel .carousel-inner,
#carousel ul.carousel-inner,
#carousel .carousel-item,
#carousel li.carousel-item,
#carousel .carousel-slide {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* .carousel-inner (le conteneur qui empile les slides) DOIT rester
   overflow:hidden, contrairement aux autres éléments ci-dessus : pendant
   la transition entre deux slides, Bootstrap positionne la slide
   "suivante" hors du cadre (translate / classe .carousel-item.next) —
   sans le hidden ici, cette slide en transit reste visible et pousse la
   largeur de TOUTE LA PAGE bien au-delà de l'écran (débordement horizontal
   d'environ 330px constaté sur mobile), rendant le site scrollable
   horizontalement et coupant des éléments à droite plus bas dans la page
   (ex. le bouton "Ok" de la newsletter). */
#carousel .carousel-inner,
#carousel ul.carousel-inner {
    overflow: hidden !important;
}

#carousel figure, #carousel .carousel-item figure,
#carousel li.carousel-item figure {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    display: block !important;
    height: auto !important;
}

#carousel img, #carousel .carousel-item img,
#carousel li.carousel-item img, #carousel figure img,
#carousel .carousel-item figure img,
#carousel .carousel-inner .carousel-item figure img,
#carousel .carousel-inner li figure img,
ul.carousel-inner li.carousel-item figure img {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    display: block !important;
    vertical-align: bottom !important;
    object-fit: cover !important;
    object-position: center center !important;
    line-height: 0 !important;
}

.homeslider-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    background: var(--noir-profond) !important;
}

/* ==========================================================================
   TRAIT OR AU-DESSUS DU FOOTER
   ========================================================================== */

.footer-container, #footer {
    border-top: none !important;
    border-image: none !important;
    position: relative !important;
}

#footer::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: 1px !important;
    background: var(--trait-or) !important;
}

/* ==========================================================================
   CARTES & FORMULAIRES
   ========================================================================== */

.card, .block,
.cart-grid-body, .cart-summary,
.checkout-step, .contact-form,
.featured-products section, .login-form {
    background: var(--noir-profond) !important;
    border: 1px solid transparent !important;
    border-image: var(--bordure-or) 1 !important;
    box-shadow: none !important;
    margin-bottom: 20px;
    padding: 20px !important;
    transition: all 0.3s ease;
}

/* Double cadre dans le tunnel de commande : .cart-grid-body (le grand cadre
   extérieur) contient .checkout-step (un cadre par étape) — les deux
   héritent du cadre or ci-dessus, ce qui donne deux cadres imbriqués. On
   retire seulement le plus grand (extérieur), on garde celui de chaque
   étape. */
.cart-grid-body {
    border: none !important;
    border-image: none !important;
    /* son padding de 20px n'a plus lieu d'être une fois le cadre retiré :
       il décalait le cadre de l'étape (checkout-step) vers le bas/la
       droite par rapport au cadre du récapitulatif de commande à côté,
       qui lui commence directement au bord. #checkout en préfixe : la
       règle générique "PADDING GLOBAL" plus bas dans ce fichier cible
       aussi .cart-grid-body à spécificité égale et gagnait, remettant
       les 20px malgré cette règle-ci (décalage entre le cadre "Informations
       personnelles" et le bandeau d'alerte au-dessus, non alignés). */
    padding: 0 !important;
}
body#checkout .cart-grid-body {
    padding: 0 !important;
}

/* Les deux colonnes (cette carte + le récapitulatif à droite) sont
   adjacentes sans marge en affichage 2 colonnes — leurs bordures or se
   touchaient et donnaient l'impression d'un seul cadre au lieu de deux.
   On réduit légèrement la largeur de celle-ci et on ajoute une marge à
   droite pour créer un vrai espace visuel entre les deux.
   Limité à ≥992px (seuil où Bootstrap passe les colonnes en 2 blocs
   côte à côte, col-lg-8/col-lg-4) : sans cette limite, la largeur
   réduite s'appliquait aussi en mobile où la colonne doit rester pleine
   largeur (col-xs-12), rendant les cadres anormalement étroits. */
@media (min-width: 992px) {
    .cart-grid-body {
        width: calc(66.6667% - 20px) !important;
        margin-right: 20px !important;
    }
}

/* Bandeau d'alerte "Ce transporteur n'a pas encore été configuré" au-dessus
   du tunnel de commande. Alignement asymétrique voulu : à gauche, le cadre
   "Informations personnelles" est collé au bord de sa colonne (son propre
   padding a été mis à 0 plus haut) — donc padding-left:0 ici aussi. Mais
   à droite, le cadre du récapitulatif est en retrait de 15px à l'intérieur
   de SA colonne (padding non touché) — donc padding-right:15px ici pour
   retrouver le même bord, pas 0. Un padding symétrique (0/0 ou 15/15)
   donnait un résultat qui matchait à gauche mais dépassait à droite. */
body#checkout .notifications-container.container {
    padding-left: 0 !important;
    padding-right: 15px !important;
}

/* Bandeaux de notification (ex : "Votre panier contient déjà X de ces
   produits") — même traitement que les autres cadres du site : bordure
   or, fond transparent plutôt que le fond gris uni générique des .alert */
#notifications .alert,
#notifications .alert-info,
#notifications .alert-warning,
#notifications .alert-success,
#notifications .alert-danger {
    background: transparent !important;
}

/* Titre d'étape du tunnel de commande — le thème ajoute un trait clair
   (couleur grise par défaut de Bootstrap) au-dessus ET en dessous du
   titre selon l'étape (étape active : trait dessous ; étapes suivantes
   type "Adresses" pas encore ouvertes : trait au-dessus), qui tranche
   sur le fond sombre dans les deux cas */
.checkout-step .step-title {
    border-top: none !important;
    border-bottom: none !important;
}

/* Sur mobile, "Informations personnelles" (en majuscules) ne tient pas sur
   une ligne à la taille desktop (24px) et retombe à la ligne au milieu du
   mot — cassé visuellement, contrairement aux autres titres d'étape plus
   courts (Adresses, Livraison, Paiement). 17px ne suffisait encore pas :
   descendu à 15px. Le lien "Modifier" (step-edit), inline dans le même
   titre, est repassé en bloc sur sa propre ligne — c'est lui qui, resté
   inline, empêchait "Informations personnelles" de tenir sur une seule
   ligne même à taille réduite. */
@media (max-width: 767px) {
    .checkout-step .step-title {
        font-size: 15px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }
    .checkout-step .step-title .step-edit {
        display: block !important;
        margin-top: 4px !important;
    }
}

/* Phrases d'info du formulaire de commande (mobile) — "Créez votre compte
   (optionnel) / Et gagnez du temps..." et "L'adresse sélectionnée sera
   utilisée à la fois..." retombaient sur 3 lignes au lieu de 2, la colonne
   disponible étant réduite par un double padding (celui de ".checkout-step"
   ET celui de son ".content" interne, cumulés = 70px de marge perdue sur
   375px de large). Marge négative pour regagner cette largeur, plus une
   légère réduction de taille : les deux combinés suffisent à repasser sur
   2 lignes sans police trop petite. */
@media (max-width: 767px) {
    .checkout-step .content .form-informations {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
    }
    .form-informations-title, .form-informations-option, .form-informations-subtitle {
        font-size: 13px !important;
    }
    #checkout-addresses-step .js-address-form form > p {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }
    /* Note "Si vous voulez nous laisser un message..." (étape Mode de
       livraison) : même cause que ci-dessus (double padding), traitement
       regroupé avec le reste du champ de message plus bas dans ce fichier
       (règles "#delivery"). */
}

/* Bas du récapitulatif panier ("Conditions générales de vente" / copyright
   PrestaShop) — la classe Bootstrap ".text-sm-center" ne centre le texte
   qu'à partir du palier "sm" (≥576px) ; en dessous (mobile étroit), elle
   reste alignée à gauche par défaut, malgré son nom qui laisse penser le
   contraire. */
@media (max-width: 767px) {
    .cart-summary .text-sm-center, body#checkout .text-sm-center {
        text-align: center !important;
    }
}

/* Onglets "Commander en tant qu'invité" / "Connexion" — rien ne les
   distinguait visuellement de texte normal ; on marque clairement lequel
   est actif (or, gras, souligné) et lequel ne l'est pas (grisé), pour
   qu'on comprenne que ce sont deux choix cliquables */
.checkout-step .nav.nav-inline .nav-link {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    opacity: 0.55;
    font-weight: 400 !important;
    cursor: pointer !important;
    padding-bottom: 3px !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease;
}
.checkout-step .nav.nav-inline .nav-link:hover {
    opacity: 0.85;
}
.checkout-step .nav.nav-inline .nav-link.active {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--or-base) !important;
}

/* Onglets "Commander en tant qu'invité" / "Connexion" sur mobile — le texte
   "Commander en tant qu'invité" (27 caractères) à la taille desktop (16px)
   ne laisse pas assez de place à "Connexion" sur la même ligne dans une
   colonne mobile (~262px de large disponible) : les <li> du thème sont en
   inline-block (comme des mots dans un paragraphe), donc "Connexion" est
   simplement rejeté à la ligne suivante faute de place — avec un grand
   vide en dessous (margin Y hérité de la classe Bootstrap "my-2", 24px en
   haut ET en bas, pensée pour un onglet sur une seule ligne courte). Un
   texte plus petit fait tenir les deux sur la même ligne, et la marge est
   réduite en conséquence. */
/* Grand vide sous les onglets, avant "Titre" — pas seulement sur mobile :
   le <form> a un margin-top de ~25px (hérité), qui s'ajoute au padding-top
   de 15px du conteneur d'onglet (".tab-content, .tab-pane" plus bas dans
   ce fichier) ET au padding-top de 10px du label — trois espaces empilés
   pour un seul vide visuel, sur ordinateur comme sur mobile. */
.checkout-step .nav.nav-inline {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.checkout-step form {
    margin-top: 0 !important;
}
.checkout-step .form-control-label {
    padding-top: 0 !important;
}
.checkout-step .tab-content {
    padding-top: 6px !important;
}

/* Onglets "Commander en tant qu'invité" / "Connexion" sur mobile — le texte
   "Commander en tant qu'invité" (27 caractères) à la taille desktop (16px)
   ne laisse pas assez de place à "Connexion" sur la même ligne dans une
   colonne mobile (~262px de large disponible) : les <li> du thème sont en
   inline-block (comme des mots dans un paragraphe), donc "Connexion" est
   simplement rejeté à la ligne suivante faute de place. Un texte plus
   petit fait tenir les deux sur la même ligne. */
@media (max-width: 767px) {
    .checkout-step .nav.nav-inline {
        white-space: nowrap !important;
    }
    .checkout-step .nav.nav-inline .nav-item {
        white-space: nowrap !important;
    }
    .checkout-step .nav.nav-inline .nav-link {
        font-size: 13px !important;
        padding-bottom: 3px !important;
    }
}

/* Mode de livraison — trait vertical clair sur la droite : trouvé dans le
   CSS du thème lui-même, ".delivery-options>.row{border-right:.1rem solid
   #c3c3c3}" (couleur claire par défaut, jamais adaptée au thème sombre).
   Sélecteur repris à l'identique (même spécificité) pour être sûr de le
   emporter. */
body#checkout section.checkout-step .delivery-options > .row {
    border-right: none !important;
}

/* Champ message de commande ("Si vous voulez nous laisser un message...")
   — simple <label> + <textarea> sans aucune mise en forme dans le thème,
   collés l'un à l'autre et directement au bouton "Continuer" en dessous. */
#delivery label {
    display: block !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
}
#delivery textarea {
    margin-bottom: 15px !important;
    min-height: 60px !important;
}
#delivery {
    margin-bottom: 15px !important;
}

/* Champ message (mobile) — le texte d'accompagnement et le champ à
   remplir semblaient à l'étroit dans la colonne (double padding hérité de
   ".checkout-step"/".content", cf. règles similaires plus haut dans ce
   fichier) : on leur redonne toute la largeur disponible, et on agrandit
   le champ de saisie pour qu'il soit plus confortable et visuellement
   centré dans le cadre plutôt que perdu sur une seule petite ligne. */
@media (max-width: 767px) {
    /* theme.css impose "body#checkout #delivery { max-width: 100% }" — sans
       la neutraliser aussi, elle plafonne la largeur au 100% du conteneur
       ÉTROIT (celui d'avant l'élargissement), annulant silencieusement le
       "width: calc(100% + 30px)" ci-dessous (règle différente, propriété
       différente : les deux s'appliquent, mais max-width prime). */
    #delivery {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        max-width: calc(100% + 30px) !important;
    }
    #delivery label {
        font-size: 12.5px !important;
    }
    #delivery textarea {
        min-height: 70px !important;
    }
}

/* Récapitulatif panier — "Taxes incluses" (ligne ".sub") ne suivait pas le
   même alignement label-à-gauche/montant-à-droite que Sous-total,
   Livraison et Total TTC ; on force le même alignement sur toutes les
   lignes, quelle que soit leur variante */
.cart-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}

/* Sous-total/Livraison et Total TTC/Taxes incluses n'avaient pas le même
   retrait gauche/droite : leurs conteneurs respectifs
   (.cart-summary-subtotals-container et .cart-summary-totals) ont chacun
   leur propre règle de padding dans le thème, pas forcément identique.
   On fixe le même padding explicite sur les deux pour garantir un
   alignement identique, plutôt que de rajouter du padding sur les lignes
   (essayé d'abord, mais reposait sur une mauvaise hypothèse du nombre de
   niveaux de padding empilés et créait un nouvel écart plutôt que de le
   corriger). */
/* html body en préfixe : cet élément porte aussi la classe générique
   ".card-block", qui reçoit plus loin dans ce fichier (section "PADDING
   GLOBAL") un padding de 20px à spécificité égale et déclaré après —
   il gagnait sur ce padding-ci sans ce préfixe supplémentaire. */
html body .cart-summary-subtotals-container,
html body .cart-detailed-subtotals,
html body .cart-summary-products {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Sur le tunnel de commande (body#checkout), "Total TTC"/"Taxes incluses"
   ont un niveau de conteneur imbriqué EN MOINS que "Sous-total"/
   "Livraison" (pas de ".card-block" intermédiaire) — le wrapper manquant
   avait du padding des deux côtés, d'où +20px de compensation à gauche
   ET à droite. Ce déséquilibre n'existe QUE sur cette page : sur le
   panier complet (page-cart), les deux conteneurs ont exactement la même
   profondeur d'imbrication — appliquer cette compensation partout (comme
   au premier essai) créait donc un décalage inverse sur le panier là où
   il n'y en avait pas besoin. */
body#checkout .card-block.cart-summary-totals {
    padding-left: 30px !important;
    padding-right: 30px !important;
}
.page-cart .card-block.cart-summary-totals {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Le montant ne se collait pas toujours au bord droit avec
   justify-content:space-between (une ligne — "Livraison" — a un 3e enfant
   caché en plus du libellé/montant, ce qui décale tout le monde ; sur la
   page panier complète, une autre classe de conteneur pour "N articles"
   donnait aussi un résultat différent des autres lignes). margin-left:auto
   pousse le montant contre le bord droit indépendamment de ces cas,
   quel que soit le nombre d'enfants dans la ligne. */
.cart-summary-line .value {
    margin-left: auto !important;
}

/* "Taxes incluses" (ligne ".sub") avait 3px de padding propre à sa ligne,
   négligeable seul mais visible cumulé avec d'autres écarts — on force
   0 sur toutes les lignes/labels pour que le seul retrait actif soit
   celui du conteneur parent (déjà égalisé ci-dessus), jamais celui de
   la ligne elle-même. */
.cart-summary-line {
    padding-left: 0 !important;
}
.cart-summary-line .label {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* "Total TTC" en rose, comme demandé, pour ressortir davantage que les
   autres lignes. "Taxes incluses" reste en blanc (demandé explicitement
   après un essai en rose). */
.cart-summary-line.cart-total .label,
.cart-summary-line.cart-total .value {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}

/* Lien "L'adresse de facturation est différente..." / "Utiliser aussi
   cette adresse pour la facturation" à l'étape Adresses — un <a> sans
   aucun signe visuel de clic (pas de soulignement, couleur proche du
   texte normal) */
.js-address-form a[data-link-action] {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

/* Carte "Mon adresse" (choix d'une adresse déjà enregistrée à l'étape
   Adresses) — composant à part du thème, resté sur son fond blanc par
   défaut, qui jurait avec le reste du tunnel sombre */
.address-item {
    background: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
}
.address-item.selected {
    border-color: var(--or-base) !important;
}
.address-item,
.address-item .address,
.address-item .address * {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}
.address-item header,
.address-item h4,
.address-item .h4 {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}
.address-item a {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}

/* Astuce ajoutée en JS sous "Le score minimum doit être de : Fort"
   (voir custom.js) */
.password-requirements-hint {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-size: 12px !important;
    font-style: italic !important;
    margin: 2px 0 0 24px !important;
}

input[type="text"], input[type="email"],
input[type="password"], input[type="tel"],
input[type="number"], input[type="date"],
input[type="search"], textarea, select {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid transparent !important;
    border-image: linear-gradient(to right, var(--or-sombre), var(--or-base)) 1 !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* Dropdown "Trier par" et sélecteurs — fond sombre forcé */
.products-sort-order select,
.products-sort-order .select-title,
select.form-control, select.custom-select,
.sort-by-row select, .form-group select,
.js-product-list-top select,
#js-product-list-top select {
    background-color: var(--noir-carte) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C58E7F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 36px !important;
}

/* Options dans le select — fond sombre (limité selon navigateur) */
select option {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    color: var(--gris-texte) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--gris-texte) !important;
    opacity: 0.7;
}

/* Focus des champs — bordure or rose, pas de surbrillance rouge/jaune */
input:focus, textarea:focus, select:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
input[type="number"]:focus {
    outline: none !important;
    border: 1px solid var(--or-base) !important;
    border-image: none !important;
    box-shadow: 0 0 6px rgba(197,142,127,0.4) !important;
}

/* Supprimer tout outline jaune/orange natif sur liens, images, boutons.
   Le box-shadow:none est exclu des .btn : même spécificité que
   .btn-primary:hover et déclaré après dans le fichier, il gagnait et
   supprimait le halo de survol dès qu'un bouton était aussi "focus" (ex.
   juste après un clic) — cas très courant, pas juste un cas limite. */
a:focus, a:focus-visible,
img:focus, img:focus-visible,
button:focus, button:focus-visible,
.subcategories-list a:focus,
.subcategory-image:focus,
[class*="subcategor"]:focus,
*:focus {
    outline: none !important;
}
a:focus:not(.btn), a:focus-visible:not(.btn),
img:focus, img:focus-visible,
button:focus:not(.btn), button:focus-visible:not(.btn),
.subcategories-list a:focus,
.subcategory-image:focus,
[class*="subcategor"]:focus,
*:focus:not(.btn) {
    box-shadow: none !important;
}

/* Catégorie — image toujours à droite */
.block-category-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.block-category-inner .category-cover {
    order: 2 !important;
    flex-shrink: 0 !important;
    margin-left: 20px !important;
}

.block-category-inner .category-description {
    order: 1 !important;
    flex: 1 !important;
}

/* Titre h1 au-dessus à gauche */
.block-category {
    display: block !important;
}

/* Sous-catégories — image toujours à droite (structure subcategories-list) */
#subcategories .subcategory-image,
.subcategories-list .subcategory-image {
    float: right !important;
    margin-left: 15px !important;
    margin-right: 0 !important;
    clear: none !important;
}

#subcategories a,
.subcategories-list a {
    display: block !important;
    overflow: hidden !important;
}

/* Sous-catégories — aucun cadre, aucune bordure */
#subcategories,
#subcategories *,
.subcategories-list,
.subcategories-list * {
    border: none !important;
    border-image: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#subcategories .subcategory-image,
.subcategory-image {
    background: transparent !important;
    background-color: transparent !important;
}

#subcategories img,
.subcategory-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Barre de recherche — simplifiée */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

input[type="search"] {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    border-radius: 0 !important;
    outline: none !important;
}

/* ==========================================================================
   PAGE CONNEXION / COMPTE
   ========================================================================== */

/* Champ mot de passe — fond sombre (override navigateur) */
input[type="password"] {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
}

/* Autofill Chrome — fond sombre forcé (transition trick) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--noir-carte) inset !important;
    box-shadow: 0 0 0 1000px var(--noir-carte) inset !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    caret-color: var(--gris-texte) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Bouton MONTRER — charte or rose, toutes pages */
button.btn-show-password,
.btn-show-password,
[data-action="show-password"],
.show-password,
input + button,
.input-group button.btn,
.input-group .btn-secondary,
.page-authentication .btn-secondary,
.page-registration .btn-secondary {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    background-image: none !important;
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* Formulaire login — un seul cadre, aucun trait */
.page-authentication .login-form,
.page-authentication .register-form,
.page-authentication #content,
.page-authentication .card,
.page-authentication .block,
.page-authentication #content-wrapper,
.page-authentication hr,
.page-authentication .separator,
.page-authentication .divider {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

.page-authentication hr,
.page-authentication .separator {
    display: none !important;
}

/* Formulaires login/inscription — pas de bordure propre (hérite de .card) */
.login-form, .register-form {
    border: none !important;
    border-image: none !important;
    padding: 25px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Annuler marges négatives Bootstrap dans tous les formulaires */
.login-form .row, .register-form .row,
.login-form .form-group, .register-form .form-group,
.contact-form .row, .contact-form .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Colonnes formulaire — pas de débordement */
.login-form [class*="col-"],
.register-form [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
}

/* "Optionnel" — classe exacte identifiée via inspecteur */
.form-control-comment,
.js-input-column + .col-md-3,
[class*="form-control-comment"] {
    display: none !important;
}

/* Formulaire mobile — labels à gauche, espacement réduit */
@media (max-width: 991px) {
    html body .form-group.row,
    html body .register-form .form-group,
    html body .login-form .form-group {
        flex-direction: column !important;
        margin-bottom: 8px !important;
    }

    html body .customer-form .form-group .col-md-3,
    html body .customer-form .control-label,
    html body .customer-form .form-control-label,
    html body .login-form .form-group .col-md-3,
    html body .login-form .control-label,
    html body .register-form label,
    html body form .control-label {
        text-align: left !important;
        justify-content: flex-start !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-bottom: 2px !important;
        margin-bottom: 2px !important;
    }

    html body .customer-form .form-group .col-md-6,
    html body .login-form .form-group .col-md-6,
    html body .form-group .js-input-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* "Optionnel" mobile */
    html body .form-control-comment {
        display: none !important;
    }
}

/* Bouton CONNEXION / ENREGISTRER — texte noir */
.page-authentication .btn-primary,
.page-authentication input[type="submit"],
.login-form .btn-primary,
.page-customer-account .btn-primary,
.register-form .btn-primary,
.page-registration .btn-primary {
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Cases à cocher et radios — accent-color moderne */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--or-base) !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* Radios natifs pas encore repris en ".custom-radio" (widgets Vue du
   tunnel de commande : choix d'une adresse enregistrée, mode de
   livraison...) — fond noir + bordure or au repos, comme partout
   ailleurs sur le site ; le point une fois sélectionné reste géré par
   accent-color ci-dessus (rendu natif du navigateur). */
input[type="radio"]:not(.custom-radio input) {
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 50% !important;
}

/* Cases à cocher natives brutes, sans structure ".custom-checkbox" du tout
   (ex. "Utiliser aussi cette adresse pour la facturation" à l'étape
   Adresses : juste un <input> + <label>, sans <span> ni icône) — le thème
   ne les prend pas en charge, elles gardaient l'apparence blanche par
   défaut du navigateur.
   Cible : contour or, fond noir, coche blanche — comme partout ailleurs.
   En laissant le rendu NATIF du navigateur gérer l'état coché
   (appearance normal), le contour restait blanc quoi qu'on fasse : la
   plupart des navigateurs imposent leurs propres couleurs de bordure/fond
   une fois la case cochée en mode natif, sans respecter border-color
   posé en CSS. Seul appearance:none donne un contrôle total sur le
   contour — mais alors ::after sur l'<input> pour dessiner la coche
   s'est révélé peu fiable (rendu absent ou mal positionné selon le
   navigateur, ::after n'étant pas garanti sur un élément remplacé comme
   <input>). La coche est donc dessinée en background-image (un SVG),
   une technique fiable sur n'importe quel élément dans tous les
   navigateurs, contrairement à ::after. */
input[type="checkbox"]:not(.custom-checkbox input) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 3px !important;
    outline: none !important;
    box-shadow: none !important;
}
input[type="checkbox"]:not(.custom-checkbox input):checked {
    background-color: var(--noir-carte) !important;
    border-color: var(--or-base) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 60% !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Labels checkbox/radio */
.custom-checkbox label, .custom-radio label,
.ps-shown-by-js label, form .form-check-label,
.page-authentication label, .page-registration label {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 13px !important;
}

/* Alignement texte des checkboxes — texte aligné à gauche, pas sous la case */
span.custom-checkbox label,
.custom-checkbox label {
    display: block !important;
    position: relative !important;
    padding-left: 26px !important;
    text-align: left !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    margin-bottom: 4px !important;
}

/* Case à cocher : on a essayé de dessiner le cadre sur l'input ET de garder
   l'icône du thème à côté pour la coche, mais les deux sont deux éléments
   distincts positionnés en absolu — le moindre écart de taille/position
   entre eux donne l'impression de "deux cases" l'une à côté de l'autre.
   Solution plus robuste : un seul élément visible. L'input devient
   invisible (opacity:0, mais toujours cliquable et fonctionnel — le
   <label> qui l'entoure suffit à le cocher/décocher au clic, peu importe
   où exactement l'input est superposé) ; c'est le <span> voisin (qui
   contient déjà l'icône de coche du thème) qui devient LE cadre visible,
   coché ou non. */
span.custom-checkbox label input[type="checkbox"],
.custom-checkbox label input[type="checkbox"] {
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0 !important;
}

.custom-checkbox label input[type="checkbox"] + span {
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 1px solid var(--or-sombre) !important;
    background-color: var(--noir-carte) !important;
    border-radius: 3px !important;
}

/* Fond noir (pas rempli), juste le contour qui devient or plein — même
   règle simple que les cases natives brutes juste au-dessus : contour
   rose, fond noir, coche blanche. */
.custom-checkbox label input[type="checkbox"]:checked + span {
    background-color: var(--noir-carte) !important;
    border-color: var(--or-base) !important;
}

/* La coche elle-même : icône du thème (glyphe Material Icons "check" cité
   dans un caractère caché, dégradé rose) — rien dans le thème ne la
   cachait quand la case est décochée, elle restait affichée en
   permanence quel que soit l'état réel. On la masque par défaut et on ne
   l'affiche que si la case est vraiment cochée. */
.custom-checkbox label .checkbox-checked {
    display: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
    /* blanche, comme la coche native des autres cases du site — sur fond
       plein or, un blanc franc reste le plus lisible */
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}

.custom-checkbox label input[type="checkbox"]:checked ~ span .checkbox-checked {
    display: block !important;
}

/* Même bug, autre structure HTML : les cases des FILTRES À FACETTES
   (catégorie, ex. "Disponibilité : En stock") utilisent un balisage
   différent — <label class="facet-label"> englobe <span class="custom-
   checkbox"><input>...<span class="ps-shown-by-js"><i class="material-
   icons checkbox-checked">. La règle ci-dessus ne matche pas cette forme
   (le <label> est ici au-dessus de .custom-checkbox, pas en dessous), donc
   l'icône restait affichée en permanence : les filtres semblaient TOUJOURS
   cochés, qu'on les active ou non — d'où l'impression qu'ils "ne
   marchaient pas". Règle générique, indépendante de la structure exacte. */
.checkbox-checked {
    display: none !important;
}
input[type="checkbox"]:checked + span .checkbox-checked,
input[type="checkbox"]:checked ~ span .checkbox-checked {
    display: inline-block !important;
}

span.custom-checkbox label em,
span.custom-checkbox label span,
.custom-checkbox label em,
.custom-checkbox label span {
    display: block !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* Texte explicatif sous certaines cases (newsletter, confidentialité) —
   justifié pour un bloc de texte plus propre sur plusieurs lignes, et taille/
   police harmonisées avec le reste des cases (le <p> imbriqué dans <em> pour
   la case confidentialité hérite sinon d'un rendu de paragraphe à 15px) */
span.custom-checkbox label em,
.custom-checkbox label em {
    text-align: justify !important;
}

span.custom-checkbox label em,
span.custom-checkbox label em p,
.custom-checkbox label em,
.custom-checkbox label em p {
    font-size: 13px !important;
    font-family: 'Marcellus', Georgia, serif !important;
}

/* Boutons radio (Titre M./Mme, etc.) — même structure que les cases à
   cocher (input rendu invisible, le <span> voisin devient le rond visible)
   pour reprendre exactement la même charte : fond sombre + bordure or
   au repos, rond plein or une fois sélectionné. Sans ça le rond restait
   au style par défaut du navigateur (blanc plein), qui jurait avec les
   cases à cocher juste à côté. */
.custom-radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    /* Un anneau blanc "fantôme" restait visible malgré opacity:0 sur
       certaines configurations (probablement le rendu système imposé en
       mode contraste élevé, qui ignore le CSS des cases/radios pour des
       raisons d'accessibilité) — on désactive explicitement cette
       adaptation forcée sur ce contrôle précis, qu'on habille nous-mêmes. */
    forced-color-adjust: none !important;
}
.custom-radio {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex: none !important;
    vertical-align: middle !important;
    /* Le "fantôme" blanc persistant n'était ni le natif du navigateur ni un
       rendu forcé du système : ce conteneur ".custom-radio" (l'enveloppe
       extérieure, différente du <span> intérieur qu'on habille juste en
       dessous) a par défaut un fond blanc et une bordure grise dans le
       thème — jamais neutralisé jusqu'ici puisqu'on ne stylait que le
       rond intérieur. */
    background: transparent !important;
    border: none !important;
}
.custom-radio input[type="radio"] + span {
    display: block !important;
    position: relative !important;
    width: 16px !important;
    height: 16px !important;
    flex: none !important;
    border-radius: 50% !important;
    border: 1px solid var(--or-sombre) !important;
    background-color: var(--noir-carte) !important;
    box-sizing: border-box !important;
    /* Ce rond est purement décoratif et se superpose exactement à
       l'<input> caché juste en dessous. Quand le couple input+span
       n'est PAS entouré d'un <label> (ex: sélection du transporteur au
       checkout, contrairement aux radios "Titre M./Mme" qui elles sont
       dans un <label>), cliquer sur le rond touchait ce <span> au lieu
       de l'input — aucun report natif du clic vers l'input ne se
       produit hors d'un <label>. pointer-events:none fait "passer" le
       clic à travers le rond jusqu'à l'input, quel que soit le contexte. */
    pointer-events: none !important;
}
/* Fond toujours noir (coché ou non) — un point rose au centre indique la
   sélection à la place d'un remplissage plein, comme pour les cases à
   cocher. Le point est généré en CSS et centré par transform : il ne
   dépend donc pas de l'alignement flex du rond autour de lui, ce qui
   évite tout décalage. */
.custom-radio input[type="radio"]:checked + span {
    border-color: var(--or-base) !important;
}
.custom-radio input[type="radio"]:checked + span::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* point plus petit que la première version (8px) : à 16px de diamètre
       total, un point à 8px remplissait visuellement presque tout le
       rond et donnait l'impression d'un remplissage plein au lieu d'un
       point net entouré d'un anneau */
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: var(--or-base) !important;
}

/* Bootstrap custom-checkbox / custom-radio — pseudo-éléments */
.custom-checkbox .custom-control-label::before,
.custom-radio .custom-control-label::before,
.custom-control-label::before {
    background-color: var(--noir-carte) !important;
    background-image: none !important;
    border: 1px solid var(--or-sombre) !important;
    box-shadow: none !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--or-base) !important;
    background-image: none !important;
    border-color: var(--or-base) !important;
}

.custom-checkbox .custom-control-label::after,
.custom-radio .custom-control-label::after,
.custom-control-label::after {
    background-image: none !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%230A0A0A' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%230A0A0A'/%3E%3C/svg%3E") !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px rgba(197,142,127,0.3) !important;
    border-color: var(--or-base) !important;
}

/* ==========================================================================
   ALIGNEMENT FORMULAIRES
   ========================================================================== */

/* Labels alignés à droite sur desktop — formulaires compte */
.customer-form .form-group .col-md-3,
.customer-form .control-label,
.login-form .form-group .col-md-3,
.login-form .control-label {
    text-align: right !important;
    padding-right: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Exception — label Quantité sur la fiche produit */
.page-product .control-label,
.page-product .product-quantity .control-label,
.page-product label.control-label {
    text-align: left !important;
    justify-content: flex-start !important;
    display: block !important;
    padding-right: 0 !important;
}

/* Champs de saisie — pleine largeur dans leur colonne */
.customer-form .form-group .col-md-6,
.login-form .form-group .col-md-6 {
    padding-left: 0 !important;
}

/* "Optionnel" — class identifiée dans l'inspecteur */
.form-control-comment,
.customer-form .form-control-comment {
    display: none !important;
}

/* ==========================================================================
   SPLASH SCREEN
   ========================================================================== */

#splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    height: 100dvh; /* barre d'adresse mobile qui va et vient : 100vh décale le centrage */
    background-color: #000 !important;
    z-index: 10000000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.8s ease;
    overflow: hidden;
}

/* Voile noir sur le splash — masque le flash du premier frame pendant 800ms */
#splash-screen::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: #000 !important;
    z-index: 10000001 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
    transition-delay: 0.5s !important;
}

#splash-screen.video-playing::after {
    opacity: 0 !important;
}

/* Vidéo centrée sur desktop */
#splash-video {
    display: block !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto !important;
    position: relative !important;
}


#splash-screen img {
    display: none !important;
    visibility: hidden !important;
}

body.intro-finie #splash-screen {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body { overflow: hidden !important; }
body.intro-finie { overflow: auto !important; }

#skip-intro {
    position: fixed !important;
    /* alignée avec #sound-toggle, au-dessus du bandeau cookies (la valeur
       CSS ici ne sert que de repli : un style inline !important écrit en
       dur dans le HTML du thème l'emporte — voir le script dans
       javascript.tpl qui réapplique cette même valeur en JS) */
    bottom: 65px !important;
    left: 30px !important;
    background: rgba(0,0,0,0.6) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    border: 1px solid var(--or-base) !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeInButton 1s forwards 1.5s;
}

#skip-intro:hover {
    background: rgba(0,0,0,0.6) !important;
    border-color: var(--or-clair) !important;
    box-shadow: 0 0 10px rgba(197,142,127,0.5) !important;
    color: var(--or-clair) !important;
    -webkit-text-fill-color: var(--or-clair) !important;
}

#sound-toggle {
    position: fixed !important;
    /* alignée avec #skip-intro, au-dessus du bandeau cookies */
    bottom: 65px !important;
    right: 30px !important;
    /* Même style que les boutons or rose du site (dégradé, texte et
       haut-parleur noirs) : avec l'ancien fond sombre translucide, un
       haut-parleur noir aurait été invisible. */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--degrade-bouton) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    border: 1px solid var(--or-sombre) !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    opacity: 0;
    animation: fadeInButton 1s forwards 1.5s;
    transition: all 0.3s ease !important;
}

#sound-toggle:hover {
    background: var(--degrade-bouton) !important;
    border-color: var(--or-clair) !important;
    box-shadow: 0 0 10px rgba(197,142,127,0.5) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    filter: brightness(1.1) !important;
}
/* Filet de sécurité : une fois l'intro terminée (classe "intro-finie" posée
   sur le body par custom.js, y compris quand elle a déjà été vue pendant la
   visite), le bouton son de l'intro ne doit plus jamais s'afficher, même si
   son display:inline-flex !important ci-dessus l'emportait sur le masquage
   fait en JS. */
body.intro-finie #sound-toggle {
    display: none !important;
}

/* Pictogramme haut-parleur des deux boutons "Son" (intro + vidéo d'accueil),
   en SVG (custom.js, majBoutonSon) : noir, quel que soit l'état du son. */
#sound-toggle .icone-son,
.js-video-presentation-son .icone-son {
    width: 1.3em !important;
    height: 1.3em !important;
    flex: none !important;
    fill: var(--noir-profond) !important;
}
/* Le libellé "Son" est dans un <span> : la règle générale du site qui met
   tous les <span> en gris clair (--gris-texte) s'appliquait donc au mot et
   le faisait passer en clair malgré le texte noir du bouton. */
#sound-toggle span,
.js-video-presentation-son span {
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
}

/* Le bandeau cookies prend beaucoup plus de hauteur sur mobile (texte +
   4 boutons qui s'enroulent sur plusieurs lignes) — décalage plus important.
   #skip-intro est imbriqué dans #splash-screen (contexte d'empilement à
   z-index 10000000, largement inférieur à celui du bandeau cookies) : son
   propre z-index élevé ne le fait donc PAS passer au-dessus du bandeau — il
   faut une marge large pour qu'aucun pixel ne se chevauche entre les deux. */
@media (max-width: 767px) {
    #sound-toggle {
        bottom: 140px !important;
    }
    #skip-intro {
        bottom: 140px !important;
    }
}

@keyframes fadeInButton {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   LOGO & HEADER DESKTOP
   ========================================================================== */

#header .header-top .left-nav, #header .logo,
.header-top .col-md-2 {
    max-width: 280px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

#header .logo img {
    width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
    margin-top: -25px !important;
    margin-bottom: 0 !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
}

#header .logo, #header .header-top .left-nav {
    overflow: visible !important;
    z-index: 5 !important;
}

#header .menu, #header nav, .top-menu-link, #top-menu {
    position: relative !important;
    z-index: 20 !important;
}

.header-top, #header .header-top > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

#_desktop_user_info i, #_desktop_cart i,
.user-info i, .shopping-cart i, .header-nav i.material-icons {
    display: inline-block !important;
    height: 35px !important;
    line-height: 35px !important;
    width: auto !important;
    overflow: visible !important;
    padding: 0 5px !important;
    margin-bottom: 5px !important;
    vertical-align: middle !important;
}

#_desktop_user_info .account i { transform: translateY(-2px); }

/* Panier desktop — fond transparent, compteur stylé */
#_desktop_cart .blockcart,
#_desktop_cart .cart-preview {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@media (min-width: 992px) {
    #_desktop_cart .blockcart.cart-preview {
        margin-left: 4px !important;
    }
}

#_desktop_cart .cart-products-count {
    vertical-align: middle !important;
    line-height: 1 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin-left: -10px !important;
    font-family: 'Marcellus', Georgia, serif !important;
    background: var(--degrade-gris) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   SÉLECTEUR DE LANGUE
   ========================================================================== */

#language-selector-label, span#language-selector-label,
.language-selector-label,
#_desktop_language_selector .language-selector-wrapper label,
#_desktop_language_selector label,
#_desktop_language_selector .language-selector-wrapper p,
#_desktop_language_selector p {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

#_desktop_language_selector {
    display: flex !important;
    align-items: center !important;
}

#_desktop_language_selector .language-selector-wrapper {
    display: flex !important;
    align-items: center !important;
}

#_desktop_language_selector .language-selector-wrapper .expand-more,
#_desktop_language_selector span {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    font-size: 18px !important;
}

#_desktop_language_selector .dropdown-menu {
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8) !important;
}

#_desktop_language_selector .dropdown-item {
    color: var(--gris-texte) !important;
    background: transparent !important;
    padding: 8px 15px !important;
}

#_desktop_language_selector .dropdown-item:hover {
    background: var(--or-base) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
}

/* ==========================================================================
   FOOTER — TEXTES
   ========================================================================== */

.block-contact span, .block-contact p,
.block-contact a, .block-contact .mailto, #block-contact_infos a,
.block-contact address, #block-contact_infos p,
#block-contact_infos span, #block-contact_infos address {
    background: var(--degrade-gris) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 3px !important;
    text-decoration: none !important;
}

.block-contact a:hover, #block-contact_infos a:hover {
    filter: brightness(1.6) !important;
}

.footer-container .block-contact a,
#footer .block-contact a,
#block-contact_infos a {
    font-weight: 800 !important;
}

/* Tous les liens footer — dégradé gris
   (exclu des modales : certaines modales PrestaShop, ex. connexion/liste
   d'envies, sont montées dans le DOM sous #footer alors qu'elles s'affichent
   en overlay plein écran — sans l'exclusion elles héritaient à tort du style
   footer via la spécificité de l'ID #footer) */
.footer-container a:not(.modal, .modal *), #footer a:not(.modal, .modal *) {
    background: var(--degrade-gris) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
}

/* Icônes sociales — reset complet avec couleur visible */
.block-social li a,
#footer .block-social li a,
.footer-container .block-social li a {
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    color: var(--gris-texte) !important;
}

.block-social li a *,
#footer .block-social li a *,
.footer-container .block-social li a * {
    -webkit-text-fill-color: var(--gris-texte) !important;
    color: var(--gris-texte) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

.footer-container a:hover, #footer a:hover {
    filter: brightness(1.6) !important;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.block-newsletter, .block-newsletter *,
#footer .block-newsletter, #footer .block-newsletter *,
.footer-container .block-newsletter, .footer-container .block-newsletter *,
[id*="newsletter"], [class*="newsletter"] {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    border-color: var(--or-sombre) !important;
    box-shadow: none !important;
}

.block-newsletter input[type="email"],
.block-newsletter input[type="text"] {
    background: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

.block-newsletter .btn, .block-newsletter button,
.block-newsletter input[type="submit"],
#blockEmailSubscription_displayFooterBefore input[name="submitNewsletter"] {
    background: var(--degrade-bouton) !important;
    background-image: var(--degrade-bouton) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    border: 1px solid var(--or-base) !important;
    border-image: none !important;
    letter-spacing: 1px !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold !important;
}

/* Couleur pleine (pas de dégradé en background-clip:text) : ce titre a
   affiché de façon répétée et persistante (même en navigation privée,
   cache totalement vidé) un bloc plein au lieu d'un texte en dégradé,
   contrairement aux autres titres du footer qui utilisent la même
   technique sans souci — cause non identifiée avec certitude (rendu
   spécifique au navigateur/poste de l'utilisatrice). Une couleur simple
   élimine le risque, quel que soit le navigateur. */
p#block-newsletter-label, #block-newsletter-label {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--or-base) !important;
    background-clip: unset !important;
    color: var(--or-base) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6) !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
}

/* Aligner le label newsletter avec le formulaire */
.block_newsletter .row {
    align-items: center !important;
    justify-content: flex-end !important;
}

.block_newsletter p#block-newsletter-label,
p#block-newsletter-label.col-md-5 {
    margin-bottom: 0 !important;
    text-align: right !important;
    padding-right: 0 !important;
}

/* Texte désabonnement : gris, non gras */
.block-newsletter .col-xs-12 p,
.block-newsletter form p,
#blockEmailSubscription_displayFooterBefore p:not(#block-newsletter-label) {
    font-size: 13px !important;
    font-weight: normal !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
}

/* Masquer "Tous les produits" */
.all-product-link,
.all-product-link i,
.all-product-link:hover,
.all-product-link:hover i {
    display: none !important;
}

.featured-products .products-section-title,
.featured-products h2,
section.featured-products > h2 {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: none !important;
    margin-bottom: 28px !important;
}

/* Masquer les sous-catégories à droite (déjà affichées dans la colonne gauche) */
#subcategories {
    display: none !important;
}

/* Masquer le h1 redondant sur toutes les pages sauf fiche produit (titre déjà dans le fil d'Ariane) */
body:not(.page-product) #main h1,
body:not(.page-product) #main .page-header h1,
body:not(.page-product) #main .block-category h1 {
    display: none !important;
}

/* Le conteneur ".page-header" garde sa marge basse (~25px) même quand son
   h1 est masqué ci-dessus — espace mort avant le contenu, plus visible
   sur mobile où l'écran est étroit */
body:not(.page-product) #main > .page-header {
    margin-bottom: 0 !important;
}

/* Cadre "Description" natif des catégories — sur certaines catégories
   (ex: Bracelets) le vrai texte y est saisi et doit rester visible ;
   sur d'autres (ex: Accessoires) ce champ est vide et le texte réel vit
   dans "Description complémentaire" à la place — dans ce cas le cadre
   ne contient que le h1 (masqué) et s'affiche vide. On ne le masque
   donc que lorsqu'il ne contient pas de vraie description. */
.block-category:not(:has(#category-description)) {
    display: none !important;
}

/* Masquer le titre de catégorie dans la colonne gauche (déjà dans le fil d'Ariane) */
.block-categories .category-top-menu > li:first-child > a,
.block-categories .category-top-menu a.h6,
.block-categories .category-top-menu a.text-uppercase.h6 {
    display: none !important;
}

/* Bouton FILTRER */
.btn-secondary, button.btn-secondary,
[class*="filter"] .btn, .facets-clearfix .btn,
a.btn-secondary, input[type="submit"].btn-secondary {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* "Effacer tout" (filtres à facettes) — .btn-tertiary, jamais repris par
   nos règles existantes (.btn-secondary, [class*="filter"] .btn, qui ne
   matchent ni sa classe ni un ancêtre "filter" — le conteneur a un ID,
   #search_filters, pas une classe), restait donc blanc plein natif. */
.btn-tertiary, button.btn-tertiary, a.btn-tertiary,
.js-search-filters-clear-all {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* "Filtres actifs" — titre + pastilles des filtres sélectionnés (ex.
   "Sélections : Nouveau produit ✕"), non couvertes par le fond sombre
   générique du bloc #search_filters : restaient blanches, natives. */
#js-active-search-filters {
    background: transparent !important;
}
#js-active-search-filters .h6 {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
#js-active-search-filters li.filter-block {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
    margin: 0 6px 6px 0 !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}
#js-active-search-filters li.filter-block .close {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    cursor: pointer !important;
}

/* Bouton "Annuler" dans les modales — même gabarit que le bouton
   principal à côté (ex. "CONNEXION"), qui reçoit padding/taille via
   .btn-primary. Sans ça .btn-secondary retombe sur le padding par défaut
   de Bootstrap, plus petit, et les deux boutons du footer de la modale
   n'ont pas la même taille. */
.modal .btn-secondary, .modal-cancel {
    padding: 12px 25px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Bouton "Retour en haut" */
#back-to-top, .back-to-top, [id*="back-to-top"], [class*="back-to-top"],
a[href="#top"], button.scroll-top, .scroll-top {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   FOOTER — GÉNÉRAL
   ========================================================================== */

/* Tout le footer — style uniforme
   (exclu des modales : cf. explication ci-dessus sur les liens footer) */
#footer *:not(.modal, .modal *), .footer-container *:not(.modal, .modal *) {
    font-weight: bold !important;
    font-style: normal !important;
    font-size: inherit !important;
    font-family: inherit !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Exception — icônes sociales du footer */
#footer .block_social a,
#footer [class*="social"] a,
.footer-container .block_social a,
.footer-container [class*="social"] a {
    font-size: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid var(--or-sombre) !important;
    background-color: #000000 !important;
}

#footer .block_social a i,
#footer [class*="social"] a i,
.footer-container .block_social a i,
.footer-container [class*="social"] a i {
    font-size: 18px !important;
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}

/* Textes infos contact dans le footer — forcer uniformité absolue */
html body #footer .contact-rich,
html body #footer .contact-rich *,
html body #footer .contact-rich a,
html body #footer .block-contact #contact-infos,
html body #footer .block-contact #contact-infos *,
html body #footer .block-contact #contact-infos a,
html body #footer address,
html body #footer address * {
    font-weight: bold !important;
    font-style: normal !important;
    font-size: 16px !important;
    background: var(--degrade-gris) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: normal !important;
}
/* Le dégradé gris s'étalait sur TOUT le bloc (4 lignes : haut et bas sombres,
   milieu clair). On le répète ligne par ligne, avec le même pas que les
   liens des autres colonnes (28,6px), pour un rendu identique à eux. */
html body #footer .block-contact #contact-infos {
    line-height: 28.6px !important;
    margin-bottom: 0 !important;
    background-size: 100% 28.6px !important;
    background-repeat: repeat-y !important;
}

#footer .block, #footer [class*="block-"],
#footer > *, .footer-container > *,
.footer-container .block, .footer-container [class*="block-"],
#footer .card, .footer-container .card,
#footer section, .footer-container section {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   FOOTER — TITRES (dégradé or, Marcellus)
   ========================================================================== */

.footer-container h3, .footer-container h4,
#footer h3, #footer h4,
.footer-container p.h3, .footer-container p.h4,
.footer-container .h3, .footer-container .h4,
#footer p.h3, #footer p.h4, #footer .h3, #footer .h4,
p.h4.block-contact-title, .block-contact-title,
p.h3.myaccount-title, .myaccount-title,
.footer-container p.h3 a, .footer-container p.myaccount-title a,
#block_myaccount_infos p.h3 a, #block_myaccount_infos p.myaccount-title a,
a.text-uppercase {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8)) !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
    /* display géré par media queries desktop/mobile ci-dessous */
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6)) !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   FOOTER — TEXTES & LISTES
   ========================================================================== */

.footer-container ul li a,
#footer ul li a {
    font-size: 14px !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    margin-bottom: 3px !important;
    margin-top: 0 !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Icônes sociales — annuler le display:block sur les liens */
.block-social ul li a,
#footer .block-social ul li a,
.footer-container .block-social ul li a {
    font-size: inherit !important;
    margin: 0 !important;
    border: none !important;
}

/* Pas de traits, pas de padding superflu */
.footer-container .collapse li,
#footer .collapse li,
.footer-container li,
#footer li {
    border-bottom: none !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 0 3px 0 !important;
}
.footer-container ul, #footer ul {
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#contact-infos, #contact-infos p, #contact-infos span,
#contact-infos div, #contact-infos address, #contact-infos a,
.block-contact p, .block-contact span, .block-contact div,
.block-contact address, #block-contact_infos p,
#block-contact_infos span, #block-contact_infos div,
#block-contact_infos address {
    font-size: 16px !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    margin-bottom: 3px !important;
    margin-top: 0 !important;
    background: var(--degrade-gris) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#footer .text-sm-center, .footer-container .text-sm-center {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    opacity: 0.7;
}

/* ==========================================================================
   PRODUITS
   ========================================================================== */

.product-miniature .thumbnail-container,
.product-miniature .product-description,
.product-miniature .product-description-short,
.product-miniature .product-title,
.product-miniature .price,
.product-miniature .product-price-and-shipping,
.product-miniature .highlighted-informations,
.product-miniature .product-flags,
.thumbnail-container,
.product-description {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

/* Badge "Neuf" — automatique (produits récents), indépendant du champ
   "État du produit" ; masqué sur demande */
.product-flag.new {
    display: none !important;
}

/* "Aperçu rapide" retiré sur demande (masquait/gênait la lecture de la
   description produit, l'ouverture de la modale coupant le parcours vers
   la fiche complète) — masqué sur desktop ET mobile. Le cœur "liste
   d'envies" (.wishlist-button-add), élément distinct, n'est pas concerné. */
.product-miniature .highlighted-informations {
    display: none !important;
}

/* Aperçu rapide — fond sombre, texte visible */
.highlighted-informations,
.quick-view {
    background: rgba(0,0,0,0.75) !important;
    background-color: rgba(0,0,0,0.75) !important;
}

.highlighted-informations a,
.highlighted-informations span,
.quick-view span {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-family: 'Marcellus', Georgia, serif !important;
}

/* Nom produit sur carte — lisible */
.product-miniature .product-title a,
.product-miniature .product-title,
.product-miniature .product-description .product-title a {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: none !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Tous les fonds blancs résiduels */
.card-body, .card-header, .card-footer,
.modal-content, .modal-header, .modal-body, .modal-footer,
.modal-dialog,
.quickview-modal,
[id*="quickview"], [class*="quickview"],
.fancybox-content, .fancybox-slide,
.dropdown-menu, .popover, .tooltip-inner {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
    border-color: var(--or-sombre) !important;
}

/* ==========================================================================
   PAGE CONTACT — fond sombre sur tous les blocs
   ========================================================================== */

/* Masquer titres redondants page contact */
.page-contact .contact-form h1,
.page-contact .contact-form h2,
.page-contact .contact-form h3,
.page-contact .contact-form h4,
.page-contact .contact-form .form-title,
.page-contact #left-column h1,
.page-contact #left-column h2,
.page-contact #left-column h3,
.page-contact #left-column h4,
.page-contact #left-column .block-title,
.page-contact #left-column [class*="title"],
.page-contact #left-column p.h3,
.page-contact #left-column p.h4,
.page-contact .contact-rich h4,
.contact-rich h4 {
    display: none !important;
}

/* Infos contact gauche — garder le texte, supprimer les cadres */
.page-contact #left-column .card,
.page-contact #left-column .block,
.page-contact #left-column ul li,
.page-contact .contact-richtext .card,
.page-contact .contact-richtext .block,
.page-contact #contact-infos .card,
.page-contact #contact-infos .block,
.page-contact .block-contact .card,
.page-contact .contact-item {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 8px 0 !important;
}

/* Blocs icône adresse/email — fond sombre, bordure or */
.page-contact .contact-richtext .block,
.page-contact #contact-infos .block,
.page-contact [class*="contact"] .card,
.page-contact .contact-item,
.contact-richtext ul li,
#contact-infos ul li {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
}

/* Textes contact gauche — gris dégradé */
.page-contact #left-column p,
.page-contact #left-column span,
.page-contact #left-column address,
.page-contact #left-column a,
.page-contact #contact-infos p,
.page-contact #contact-infos span,
.page-contact #contact-infos address,
.page-contact #contact-infos a {
    background: var(--degrade-gris) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Icône dans les blocs contact */
.page-contact #left-column i,
.page-contact #contact-infos i {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6)) !important;
}

/* Formulaire contact — fond sombre, un seul cadre */
.page-contact #content,
.page-contact .contact-form,
.page-contact form,
.page-contact .form-group,
.page-contact .contact-form-footer {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
}

/* Supprimer le double cadre et le trait entre colonnes */
.page-contact .card,
.page-contact .card-block,
.page-contact #content > .card,
.page-contact .contact-form.card {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

/* Un seul cadre or sur le formulaire */
.page-contact .contact-form {
    border: 1px solid var(--or-sombre) !important;
}

/* Supprimer le trait vertical entre les colonnes */
.page-contact .row,
.page-contact #left-column,
.page-contact #content-wrapper {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

/* Labels formulaire */
.page-contact label,
.page-contact .control-label {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold !important;
}

/* Bouton "Choisir un fichier" */
.page-contact input[type="file"] + label,
.page-contact .custom-file-label,
.page-contact .file-label,
.page-contact input[type="file"]::-webkit-file-upload-button {
    background: var(--degrade-bouton) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    border: 1px solid var(--or-sombre) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: 700 !important;
}


/* Bouton ENVOYER — texte noir comme S'ABONNER et AJOUTER AU PANIER */
.page-contact .btn-primary,
.page-contact input[type="submit"],
.page-contact button[type="submit"],
.contact-form .btn-primary,
.contact-form input[type="submit"] {
    background: var(--degrade-bouton) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    border: 1px solid var(--or-sombre) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* ==========================================================================
   FICHE PRODUIT — onglets, fiche technique, avis
   ========================================================================== */

/* Conteneur global page produit — tout en sombre */
.page-product #main, .page-product #content,
.page-product #content-wrapper, .page-product .page-content,
.page-product section, .page-product .tabs,
.page-product .tab-content, .page-product .tab-pane,
.page-product #product-details, .page-product .product-additional-info,
.page-product .product-tabs, .page-product .product-information,
.page-product .product-accessories, .page-product .product-manufacturer {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
}

/* Bloc "Détails du produit" — un seul cadre extérieur */
.page-product .tabs {
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    padding: 15px !important;
}

/* Supprimer le cadre intérieur */
.page-product #product-details,
.page-product .tab-content,
.page-product .tab-pane,
.page-product #product-details .card,
.page-product #product-details .card-block {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

/* Titre "Fiche technique" — c'est en réalité un <p class="h6">, pas un h3
   (d'où l'ancien sélecteur ci-dessous qui ne s'appliquait jamais). Une
   règle générale ailleurs (body, p, li, span, div... { -webkit-text-fill-
   color: var(--gris-texte) }) matche ce <p> et écrase le dégradé-texte du
   bloc "TITRES" : le texte redevient opaque PAR-DESSUS le dégradé qui,
   lui, reste appliqué comme fond plein — d'où le bloc rose illisible.
   On regagne la priorité avec un sélecteur à deux classes, plus spécifique. */
/* #product-details en préfixe (pas juste .page-product) : cf. note plus
   bas sur .product-reference span, même souci de spécificité rencontré ici. */
html #product-details.js-product-details .product-features h3,
html #product-details.js-product-details .product-features .h3,
html #product-details.js-product-details .product-features .h6,
html #product-details.js-product-details h3,
html #product-details.js-product-details .h3,
html #product-details.js-product-details .h6 {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--blanc) !important;
    -webkit-text-fill-color: var(--blanc) !important;
    text-decoration: underline !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: normal !important;
    font-size: 1.3rem !important;
    margin-bottom: 15px !important;
}

/* Icônes "Partager" (fiche produit) — deux problèmes distincts :
   1) trop d'espace ENTRE les icônes : le thème cumule un margin-left de
      8px sur chaque <li> ET un gap de 8px sur le <ul> flex qui les
      contient (16px au lieu de 8px voulus) ;
   2) aucun espace entre le mot "Partager" et la 1ère icône : le thème n'a
      pas de gap sur le conteneur flex .social-sharing (span + ul collés). */
.social-sharing {
    gap: 10px !important;
}
.social-sharing ul li {
    margin-left: 0 !important;
}

/* Fiche technique — présentation en tableau (grille 2 colonnes : nom /
   valeur), fond transparent (plus de "fond gris"), simple cadre + traits
   de séparation horizontaux comme un vrai tableau. text-transform:none
   annule la mise en majuscule de chaque mot héritée de theme.css : le
   texte de base ("Matière des cordons") est en minuscules normales. */
.page-product .product-features dl.data-sheet,
.page-product dl.data-sheet {
    display: grid !important;
    grid-template-columns: minmax(140px, 42%) 1fr !important;
    background: transparent !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.page-product .product-features dl.data-sheet dt,
.page-product .product-features dl.data-sheet dd,
.page-product dl.data-sheet dt,
.page-product dl.data-sheet dd,
.product-features dl dt,
.product-features dl dd,
.product-features .name,
.product-features .value {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--or-sombre) !important;
    border-right: none !important;
}
/* Libellé (colonne de gauche) en blanc/gris, valeur (colonne de droite) en
   rose — inversé par rapport à la première version, sur demande */
.page-product .product-features dl.data-sheet dt,
.page-product dl.data-sheet dt,
.product-features dl dt,
.product-features .name {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-weight: 600 !important;
    border-right: 1px solid var(--or-sombre) !important;
}
.page-product .product-features dl.data-sheet dd,
.page-product dl.data-sheet dd,
.product-features dl dd,
.product-features .value {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}
/* dernière ligne du tableau : pas de trait bas, pour un cadre net */
.page-product .product-features dl.data-sheet dt:nth-last-of-type(1),
.page-product .product-features dl.data-sheet dd:nth-last-of-type(1),
.page-product dl.data-sheet dt:nth-last-of-type(1),
.page-product dl.data-sheet dd:nth-last-of-type(1) {
    border-bottom: none !important;
}

/* TTC, prix unitaire, textes secondaires — visibles */
.page-product .tax-shipping-delivery-label,
.page-product .product-minimal-quantity,
.page-product .product-availability,
.page-product .product-reference,
.page-product .product-reference span,
.page-product .unit-price-spec,
.page-product .product-information p:not(.block-title):not(.or-lead):not(.or-titre):not(.or-accent),
.page-product .product-information span:not(.block-title):not(.or-lead):not(.or-titre):not(.or-accent),
.page-product .product-information small {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    /* background-color (et non le raccourci "background") : le raccourci
       réinitialise AUSSI background-position/-image/-size en plus de la
       couleur — ça écrasait le positionnement du filigrane drapeau
       (.watermark-flag), dont le conteneur ou ses <p>/<span> tombent
       aussi sous ce sélecteur générique .product-information p/span.
       :not(.block-title) exclu en plus : ce reset générique écrasait le
       dégradé des titres "Paiement sécurisé"/"Conditions de livraison"/
       "Politique de retour" (.blockreassurance_product, imbriqué dans
       .product-information), qui s'affichaient en bloc plein rose au lieu
       d'un texte en dégradé. */
    background-color: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    font-family: 'Marcellus', Georgia, serif !important;
}

/* Référence / Stock — même logique de lecture que le tableau Fiche
   technique juste en dessous : le libellé en blanc/gris, la valeur en
   rose, pour bien distinguer les deux d'un coup d'oeil */
.page-product .product-reference .label,
.page-product .product-quantities .label {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    font-weight: bold !important;
}
/* #product-details en préfixe est nécessaire ici (pas juste ".page-product") :
   une règle plus haut dans ce fichier cible aussi ".page-product .product-
   reference span" à spécificité rigoureusement égale (2 classes + 1 type),
   et pour une raison non élucidée avec certitude (possiblement liée au
   double chargement de ce fichier, cf. lien versionné en plus du lien
   normal), elle continuait à l'emporter malgré un ordre de déclaration
   pourtant plus tardif ici. Un ID dans le sélecteur règle le problème de
   façon fiable, vérifié en direct. */
#product-details .product-reference span,
#product-details .product-quantities span {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    font-weight: bold !important;
}
/* Deux-points après les libellés — absents du texte de base. "Référence "
   a déjà un espace final dans le HTML (d'où ":" seul ici), pas "En stock"
   (d'où " :" avec l'espace inclus), pour un espacement identique aux deux. */
.page-product .product-reference .label::after {
    content: ":";
}
.page-product .product-quantities .label::after {
    content: " :";
}

/* Bloc personnalisation — textes visibles */
.page-product .product-customization label,
.page-product .product-customization p,
.page-product .product-customization span,
.page-product .product-customization .card-block {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Cadre or rose autour de la section commentaires */
html body #product-comments {
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    padding: 20px !important;
    margin-top: 10px !important;
    display: block !important;
}

/* Supprimer la double ligne sous l'onglet "Détails du produit" */
.page-product .nav-tabs,
.page-product .nav-tabs .nav-link,
.page-product .nav-tabs .nav-item,
.page-product .tab-content,
.page-product .nav-tabs::after,
.page-product .nav-tabs::before {
    border-bottom: none !important;
    border-top: none !important;
    border-image: none !important;
}

.page-product .nav-tabs .nav-link.active,
.page-product .nav-tabs .nav-link:hover {
    border-bottom: 2px solid var(--or-sombre) !important;
    border-image: none !important;
}

/* Section avis — fond sombre, spécificité maximale */
html body #product-comments,
html body #product-comments *,
html body .product-comment-list,
html body .product-comment-list *,
html body section#product-comments,
html body .product-comments-additional-information,
html body #product-comments .card,
html body #product-comments .card-block,
html body #product-comments .block-reviews,
html body .block-reviews,
html body .block-reviews * {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    border-color: var(--or-sombre) !important;
}

/* Photo produit — fond sombre */
.page-product .product-cover img,
.page-product .images-container img,
.page-product figure img {
    background: var(--noir-profond) !important;
    display: block !important;
}

/* ==========================================================================
   FICHE PRODUIT — mêmes corrections que la modale
   ========================================================================== */

/* Titre produit fiche — or rose, grand */
.page-product #main .product-name,
.page-product h1.product-name,
.page-product h1 {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1.3rem !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8)) !important;
}

/* Titre "LOT DE 3 CORDONS MADININA SPIRIT" — trop long pour tenir sur une
   ligne sur mobile à la taille standard des titres produit ; réduit
   uniquement pour ce produit (product-id-20), les autres titres produit
   restent à 1.3rem. */
@media (max-width: 767px) {
    body.product-id-20.page-product h1 {
        font-size: 1.05rem !important;
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
        margin-top: 16px !important;
        margin-bottom: 8px !important;
    }
}

/* Photo principale fiche produit — fond sombre, bordure or */
.page-product .product-cover,
.page-product .images-container,
.page-product .product-images,
.page-product .js-qv-product-images,
.page-product .slick-track,
.product-images-large, .product-images-large img,
.js-product-images-large {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
}

/* Cadre or rose sur la photo principale et les vignettes */
.page-product .product-cover {
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    box-shadow: none !important;
}

.page-product .product-images-thumbs img,
.page-product .js-thumb {
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    box-shadow: none !important;
}

.page-product .js-thumb.selected,
.page-product .js-thumb:hover {
    border-color: var(--or-base) !important;
}

/* Vignettes empilées verticalement au lieu d'être en rangée : le <li>
   natif est en display:inline mais l'image dedans est en display:block,
   ce qui "blockifie" chaque <li> sur toute la largeur — on force la
   liste entière en flexbox plutôt que de dépendre du comportement inline */
.page-product .product-images {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
}
.page-product .thumb-container {
    display: block !important;
    width: auto !important;
}

/* Logo fabricant dans Détails — pas de double cadre */
.page-product #product-details img,
.page-product .product-manufacturer img,
.page-product .manufacturer-logo {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

/* Logo de la marque (onglet "Détails du produit") — agrandi, theme.css le
   limitait à max-height: 4rem (64px) ; marges haut/bas réduites (theme.css
   ajoutait 1rem de margin-bottom sur le logo, en plus de l'espace naturel
   du bloc .product-manufacturer autour).
   height (pas max-height) : l'image source ne fait que 98×98px en réalité
   (variante "small_default" de PrestaShop) — max-height ne fait que
   PLAFONNER une taille, il ne peut jamais AGRANDIR une image déjà plus
   petite que le plafond. Avec seulement max-height, le logo restait donc
   bloqué à 98px quelle que soit la valeur indiquée (4rem, 7rem, 13rem...
   toutes > 98px, donc sans aucun effet visible). height force l'agrandissement réel. */
.page-product .manufacturer-logo {
    height: 9rem !important;
    width: 9rem !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
    transform: scale(1.35) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.page-product .product-manufacturer {
    /* -15px : annule le padding-top de 15px commun à tous les onglets
       (règle ".tab-content, .tab-pane" plus bas dans ce fichier), pour que
       le logo touche directement le haut du cadre au lieu d'en être
       espacé. */
    margin-top: -15px !important;
    margin-bottom: 0 !important;
    /* Le fond noir inclus DANS l'image (le cercle laisse une marge autour
       du colibri) ne peut pas être retiré en CSS en modifiant seulement la
       taille du logo — on simule un recadrage à la place : le conteneur
       masque tout débordement (overflow:hidden) à la même hauteur que le
       logo, et l'image est zoomée au-delà de ce cadre (transform:scale) ;
       la marge vide du cercle se retrouve ainsi repoussée hors du cadre
       visible, sans toucher au fichier image source. */
    overflow: hidden !important;
    height: 9rem !important;
}

/* Bouton Ajouter au panier fiche produit — texte noir */
.page-product .add-to-cart,
.page-product .btn-primary.add-to-cart {
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Boutons "Commander" (panier) / "Continuer" (tunnel de commande) — même
   traitement texte noir que "Ajouter au panier", pour rester dans la charte.
   Le sélecteur .checkout.cart-detailed-actions .btn-primary ci-dessus (plus
   haut dans ce fichier) est plus spécifique qu'un simple ".page-cart
   .btn-primary" : il faut le reprendre explicitement pour le battre. */
.page-cart .btn-primary,
.page-cart .checkout.cart-detailed-actions .btn-primary,
.page-order .btn-primary {
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Tunnel de commande — le rond vert derrière le numéro d'étape est redondant
   avec le check déjà affiché pour une étape terminée */
.step-number {
    background-color: transparent !important;
}

/* Prix fiche produit — plus lisible */
.page-product .current-price .price,
.page-product .price {
    font-size: 1.3rem !important;
}

/* Réduit l'espace entre le prix et "TTC" en dessous (marge par défaut du
   thème, héritée d'un style de titre h5) */
.page-product .product-price {
    margin-bottom: 2px !important;
}

/* Breadcrumb — espace entre le trait header et "Accueil / Madinina Spirit" */
nav.breadcrumb, .breadcrumb,
#wrapper nav.breadcrumb,
#main .breadcrumb {
    padding-top: 18px !important;
    margin-top: 0 !important;
}

.breadcrumb-item, .breadcrumb-item a,
.breadcrumb-item span {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Breadcrumb item actif (nom produit) — or rose */
.breadcrumb-item.active, .breadcrumb-item strong,
.breadcrumb-item:last-child span {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
}

/* Reset texte dans modale — éviter héritage background-clip transparent */
.modal-dialog p, .modal-dialog span, .modal-dialog label,
.modal-dialog div, .modal-dialog small, .modal-dialog em,
.modal-dialog .product-availability,
.modal-dialog .product-minimal-quantity,
.modal-dialog .tax-shipping-delivery-label {
    background: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    color: var(--gris-texte) !important;
}

/* Aperçu rapide — fond général + bordure or rose sur la photo */
.modal-body .layer, .modal-body .images-container,
.modal .product-images, .modal .product-cover,
.modal-body img, .modal .product-cover img,
.modal .images-container, .modal .slick-track,
.modal .js-qv-product-images, .modal .product-images-thumbs,
.modal .product-images-thumbs img {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
}

.modal .product-cover,
.modal .images-container,
.modal .js-qv-product-images,
.modal .product-images-thumbs img,
.modal .js-thumb {
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
}

/* Fond assombri derrière les modales (fenêtre de connexion, liste
   d'envies, aperçu rapide...) — certaines modales du site n'ajoutent jamais
   la classe .show sur le fond (bug JS du module concerné), qui reste alors
   totalement transparent : le contenu de la page derrière (cadre or rose
   de la description de catégorie, etc.) reste visible et donne l'impression
   de "deux cadres" superposés. On force donc l'opacité indépendamment de
   cette classe — MAIS uniquement quand une modale est réellement ouverte
   (.show), car le site laisse traîner plusieurs éléments .modal-backdrop
   dans la page même quand aucune modale n'est affichée ; les assombrir
   sans condition rendait tout le site quasiment noir en permanence. */
body:has(.modal.show) .modal-backdrop {
    opacity: 0.6 !important;
}

/* Prix modal — plus grand */
.modal .current-price .price,
.modal .product-price .price,
.modal .price {
    font-size: 1.3rem !important;
}

/* Titre produit dans la modale — or rose, plus grand */
.modal .product-name, .modal h1, .modal .h1,
.modal .quickview-product-name {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8)) !important;
    letter-spacing: 1px !important;
}

/* Prix dans la modale */
.modal .current-price, .modal .price,
.modal .product-price {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold !important;
}

/* Bouton Ajouter au panier dans la modale — texte noir comme S'ABONNER */
.modal .add-to-cart, .modal .btn-primary {
    background: var(--degrade-bouton) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    border: 1px solid #966154 !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Quantité +/- dans la modale ET la fiche produit */
.modal .product-quantity input,
.modal input[type="number"],
.modal .input-group input,
input[type="number"],
.product-quantity input,
.qty input, .bootstrap-touchspin input,
.input-group input[name="qty"] {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

.modal .input-group-btn .btn,
.modal .bootstrap-touchspin .btn,
.input-group-btn .btn,
.bootstrap-touchspin .btn,
.product-quantity .input-group-btn .btn {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* Bouton ENREGISTRER LA PERSONNALISATION — texte noir */
.page-product .product-customization .btn,
.page-product .product-customization .btn-primary,
.customization-message .btn,
[name="submitCustomizedData"] {
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Icônes sociales de partage (Facebook, Twitter, Pinterest) */
.social-sharing ul {
    display: flex !important;
    gap: 2px !important;
    padding: 0 !important;
    list-style: none !important;
}

.social-sharing li {
    display: inline-flex !important;
    background: none !important;
    border: none !important;
}

.social-sharing li a {
    background-color: #000000 !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    text-indent: -9999px !important;
}

/* Facebook */
.social-sharing li.facebook a,
.social-sharing li[class*="facebook"] a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D1D1D1' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") !important;
}

/* Twitter / X */
.social-sharing li.twitter a,
.social-sharing li[class*="twitter"] a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D1D1D1' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") !important;
}

/* Pinterest */
.social-sharing li.pinterest a,
.social-sharing li[class*="pinterest"] a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D1D1D1' d='M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z'/%3E%3C/svg%3E") !important;
}

/* Instagram */
.social-sharing li.instagram a,
.social-sharing li[class*="instagram"] a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D1D1D1' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") !important;
}

.social-sharing li a:hover {
    border-color: var(--or-base) !important;
    box-shadow: 0 0 8px rgba(197,142,127,0.4) !important;
    background-color: var(--or-base) !important;
}

/* Au survol, icône blanche */
.social-sharing li.instagram a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") !important;
}
.social-sharing li.facebook a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") !important;
}
.social-sharing li.twitter a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") !important;
}
.social-sharing li.pinterest a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z'/%3E%3C/svg%3E") !important;
}

.social-sharing li a i, .social-sharing li a svg {
    display: none !important;
}

/* Masquer X (Twitter) et Pinterest dans "Partager" (fiche produit + aperçu
   rapide) — remplacés par Instagram (icône ajoutée dès que le lien du
   compte est fourni). */
.social-sharing li.twitter, .social-sharing li.pinterest {
    display: none !important;
}

/* Espacement resserré entre les 3 lignes "Paiement sécurisé / Livraison /
   Retour" — le texte (p.block-title) hérite d'un line-height/margin-bottom
   bien trop grands (40px / 16px) pour ce petit bloc à icônes. */
.blockreassurance_product p.block-title {
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
}
/* En flex plutôt qu'en float : l'icône (span.item-product) était en
   float:left sans clearfix sur la ligne, donc les floats s'accumulaient
   d'une ligne à l'autre et décalaient le texte de plus en plus vers la
   droite à chaque ligne. */
.blockreassurance_product > div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 2px !important;
}
.blockreassurance_product .item-product {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.blockreassurance_product {
    margin-top: 10px !important;
}

.products .product-miniature,
.featured-products .product-miniature {
    border: 1px solid #c58e7f !important;
    padding: 15px !important;
    background: var(--noir-profond) !important;
    transition: all 0.3s ease !important;
}

/* Icône favori — charte graphique */
.product-miniature .wishlist-button-add,
.product-miniature [data-button-action="add-to-wishlist"],
.product-miniature .add-to-wishlist,
.wishlist-button-add,
[data-button-action="add-to-wishlist"] {
    background: rgba(0,0,0,0.7) !important;
    background-color: rgba(0,0,0,0.7) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.product-miniature .wishlist-button-add i,
.product-miniature [data-button-action="add-to-wishlist"] i,
.wishlist-button-add i,
[data-button-action="add-to-wishlist"] i,
.product-miniature .wishlist-button-add .material-icons,
.wishlist-button-add .material-icons {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 18px !important;
}

.product-miniature .wishlist-button-add:hover,
[data-button-action="add-to-wishlist"]:hover {
    background: rgba(0,0,0,0.9) !important;
    border-color: var(--or-base) !important;
    box-shadow: 0 0 8px rgba(197,142,127,0.4) !important;
}

.products .product-miniature:hover {
    border-color: var(--or-base) !important;
    transform: translateY(-5px);
}

/* ==========================================================================
   FOOTER Bootstrap 5 — titres/accordéons (hidden-md-up / hidden-sm-down inopérants)
   ========================================================================== */

@media (min-width: 992px) {
    /* Desktop : masquer les boutons accordéon */
    .footer-container .title[data-toggle],
    .footer-container .title[data-bs-toggle],
    .footer-container .title.hidden-md-up,
    #block_myaccount_infos .title,
    .block-contact .title {
        display: none !important;
    }
    /* Afficher les titres statiques sur desktop — sans trait */
    .footer-container h3, .footer-container h4,
    .footer-container p.h3, .footer-container p.h4,
    .footer-container .h3, .footer-container .h4,
    #footer h3, #footer h4, #footer p.h3, #footer p.h4,
    #block_myaccount_infos p.h3, .block-contact p.h4,
    .myaccount-title, .block-contact-title,
    #footer .block-contact .block-contact-title {
        display: block !important;
        padding-bottom: 4px !important;
        margin-bottom: 8px !important;
        border-bottom: none !important;
        border-image: none !important;
        width: 100% !important;
        font-weight: bold !important;
    }
}

/* ==========================================================================
   CLONES JS MOBILE — masqués par défaut
   ========================================================================== */

#mobile-menu-clone { display: none; }

/* Menu déroulant Bracelets/Accessoires : cette règle de base doit être
   hors media query — la règle "display:none" complète vivait uniquement
   dans @media (max-width:991px), donc sur desktop (>991px) cette condition
   ne s'appliquait jamais et l'élément (ajouté à <body> par le JS) retombait
   sur l'affichage par défaut du navigateur pour un <ul> — visible, en bas
   de la page, sans style : exactement le "menu en bas à gauche" signalé
   sur la version ordinateur. */
#mobile-martinique-dropdown { display: none !important; }
#_mobile_user_info { display: none; }

@media (max-width: 991px) {
    #mobile-menu-clone { display: block !important; }

    /* Footer mobile — fond sombre sur tous les titres accordéon */
    #footer .title.hidden-md-up,
    #footer div.title[data-toggle],
    #footer div.title[data-bs-toggle],
    .footer-container .title.hidden-md-up,
    .footer-container div.title[data-toggle],
    .footer-container div.title[data-bs-toggle] {
        background: var(--noir-profond) !important;
        background-color: var(--noir-profond) !important;
        border-top: 1px solid var(--or-sombre) !important;
        padding: 10px 0 !important;
    }
}

/* ==========================================================================
   RESPONSIVE — MOBILE / TABLETTE (≤ 991px)
   ========================================================================== */

@media (max-width: 991px) {

    /* Cadres (.card, .checkout-step, etc.) — leur bordure en dégradé
       (border-image, cf. règle ".card, .block, .checkout-step..." plus
       haut) ne s'affiche pas sur les côtés gauche/droit sur mobile — seuls
       les traits horizontaux (haut/bas) restent visibles, les traits
       verticaux disparaissent. border-color seul ne suffit pas à corriger
       ça (border-image reste prioritaire tant que border-width/style ne
       sont pas AUSSI redéclarés) : il faut repréciser les trois ensemble
       (width/style/color) pour que la bordure repasse en mode couleur
       unie classique, qui s'affiche correctement sur les 4 côtés. */
    .card, .block, .cart-summary,
    .checkout-step, .contact-form, .featured-products section, .login-form,
    #notifications .alert {
        border-width: 2px !important;
        border-style: solid !important;
        border-color: var(--or-sombre) !important;
        border-image: none !important;
    }
    /* Le bandeau d'alerte "Ce transporteur..." a un padding-right:15px
       ajouté plus haut dans ce fichier (".notifications-container.container")
       pour s'aligner avec la colonne "récapitulatif" à droite en version
       ordinateur (mise en page à 2 colonnes). Sur mobile, il n'y a qu'une
       seule colonne pleine largeur : ce décalage à droite n'a plus lieu
       d'être et rendait le cadre de l'alerte visiblement moins large que
       les cadres "Informations personnelles"/"Adresses" en dessous. */
    body#checkout .notifications-container.container {
        padding-right: 0 !important;
    }
    /* .cart-grid-body (le grand cadre EXTÉRIEUR du tunnel de commande) est
       explicitement exclu de la règle ci-dessus : il doit rester sans
       bordure (cf. règle ".cart-grid-body { border: none }" plus haut dans
       ce fichier, qui retire le double cadre autour de chaque étape) —
       l'inclure ici avec border-width/style/color le faisait réapparaître
       spécifiquement sur mobile. */
    .cart-grid-body {
        border: none !important;
        border-image: none !important;
    }
    /* Récapitulatif de commande (colonne de droite en 2 colonnes sur
       ordinateur, ".cart-grid-right") garde son padding Bootstrap de
       colonne (15px de chaque côté) même en 1 seule colonne pleine largeur
       sur mobile — ce padding servait d'espacement entre les 2 colonnes en
       version ordinateur, mais sur mobile il ne fait que rendre son cadre
       visiblement moins large que celui des étapes "Informations
       personnelles"/"Adresses" juste au-dessus, qui elles n'ont plus de
       padding de colonne (cf. ".cart-grid-body { padding: 0 }" plus haut). */
    .cart-grid-right {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Case à cocher "Utiliser aussi cette adresse pour la facturation" —
       le thème aligne ce label à droite (".col-md-9.col-md-offset-3"),
       pensé pour la mise en page horizontale du formulaire d'adresse sur
       ordinateur. Rien ne réinitialise cet alignement à gauche sur mobile :
       le texte, une fois passé sur 2 lignes, semblait décalé/mal aligné. */
    label[for="use_same_address"] {
        text-align: left !important;
        font-size: 12.5px !important;
    }

    /* Logo mobile — taille originale */
    #header #_mobile_logo .logo,
    #header .top-logo img,
    #header .top-logo .logo {
        max-height: 90px !important;
        width: auto !important;
        max-width: 200px !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Header mobile : flex avec order CSS pour forcer logo gauche, icônes droite */
    #header .header-nav .hidden-md-up.mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 6px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: static !important;
        flex-wrap: nowrap !important;
    }

    /* Logo : order -1 → toujours en premier, prend l'espace */
    #header .header-nav .hidden-md-up.mobile .top-logo,
    #header .header-nav .hidden-md-up.mobile #_mobile_logo {
        order: -1 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
        float: none !important;
    }

    /* Éléments cachés qui ne doivent pas prendre de place */
    #header .header-nav .hidden-md-up.mobile #_mobile_user_info {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sélecteur de langue mobile : masqué (module dégreffé) */
    #header .header-nav .hidden-md-up.mobile #_mobile_language_selector,
    #header #_mobile_language_selector,
    #_mobile_language_selector,
    #header .header-nav [id*="language"],
    #header .header-nav .language-selector-wrapper {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Compte : order 10 → avant-dernier */
    #mobile-account-icon {
        order: 10 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        position: static !important;
        margin-right: -26px !important;
        margin-left: 0 !important;
        z-index: 999 !important;
    }

    /* Panier : order 11 → dernier */
    #header .header-nav .hidden-md-up.mobile #_mobile_cart {
        order: 11 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }

    #mobile-account-icon i.material-icons {
        font-size: 26px !important;
        background: var(--degrade-or) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        display: inline-block !important;
        position: relative !important;
        top: 3px !important;
    }

    /* Cacher uniquement les versions desktop sur mobile */
    #header #_desktop_language_selector,
    #header #_desktop_currency_selector,
    #header .currency-selector,
    #header .blockcurrencies {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Cacher les éléments desktop sur mobile */
    #header .header-top #_desktop_logo { display: none !important; }
    /* Menu desktop natif — ne se cache tout seul qu'en dessous de 768px
       (comportement natif du thème via .hidden-sm-down), alors que notre
       mode mobile personnalisé va jusqu'à 991px : entre les deux, les
       deux menus s'affichaient en même temps */
    #header .header-nav .hidden-sm-down,
    #_desktop_top_menu {
        display: none !important;
    }
    #_desktop_user_info,
    #_desktop_language_selector,
    #_desktop_cart,
    #header #_desktop_user_info,
    .header-top #_desktop_user_info {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    #header .header-top .header-top-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    /* Icônes panier / compte — dégradé or rose */
    #header #_mobile_cart i.material-icons,
    #header #_mobile_user_info i.material-icons,
    #header .hidden-md-up i.material-icons,
    #mobile-account-icon i.material-icons {
        height: auto !important;
        line-height: 1 !important;
        font-size: 22px !important;
        padding: 0 4px !important;
        background: var(--degrade-or) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6)) !important;
    }

    #header #_mobile_cart .blockcart,
    #header #_mobile_cart .cart-preview {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #header #_mobile_cart .cart-products-count {
        line-height: 1 !important;
        font-size: 11px !important;
        font-weight: bold !important;
        margin-left: -8px !important;
        vertical-align: middle !important;
        font-family: 'Marcellus', Georgia, serif !important;
        background: var(--degrade-gris) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    /* Masquer burger natif et menu vertical natif */
    #header #menu-icon, #header .menu-icon,
    #header button.menu-toggle {
        display: none !important;
    }

    #header #mobile_top_menu_wrapper,
    #header #_mobile_top_menu,
    #mobile_top_menu_wrapper {
        display: none !important;
    }

    /* Menu clone horizontal */
    #mobile-menu-clone {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        background-color: var(--noir-profond) !important;
        border-top: none !important;
        border-image: none !important;
    }

    div#mobile-menu-clone ul#top-menu-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        list-style: none !important;
        /* "justify-content: center" posait problème dès que les liens ne
           tenaient plus tous sur une ligne (ajout de "Notre histoire") :
           avec un défilement horizontal, centrer un contenu plus large que
           le conteneur coupe les DEUX extrémités dès l'affichage (Martinique
           à gauche ET Notre histoire à droite), sans que la position de
           défilement par défaut (tout à gauche) ne permette de voir le
           début. "flex-start" démarre proprement sur "Martinique", le
           défilement vers la droite reste possible pour voir la suite. */
        justify-content: flex-start !important;
    }

    div#mobile-menu-clone ul#top-menu-mobile::-webkit-scrollbar {
        display: none !important;
    }

    div#mobile-menu-clone ul#top-menu-mobile > li {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        list-style: none !important;
        align-items: center !important;
    }

    /* Liens catégories : Great Vibes dégradé or */
    div#mobile-menu-clone ul#top-menu-mobile > li > a,
    div#mobile-menu-clone ul#top-menu-mobile > li.current > a,
    div#mobile-menu-clone ul#top-menu-mobile > li.active > a,
    div#mobile-menu-clone ul#top-menu-mobile > li:last-child > a {
        display: block !important;
        padding: 6px 6px !important;
        font-family: 'Great Vibes', cursive !important;
        font-size: 1.3rem !important;
        font-weight: normal !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        background: var(--degrade-or) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        border-bottom: none !important;
        line-height: 1.2 !important;
        color: transparent !important;
    }

    /* Masquer sous-menus et chevrons dans le clone */
    #mobile-menu-clone .sub-menu,
    #mobile-menu-clone .collapse-icons,
    #mobile-menu-clone .material-icons,
    #mobile-menu-clone .arrow,
    #mobile-menu-clone span.float-xs-right {
        display: none !important;
    }

    /* Menu déroulant Bracelets/Accessoires (sous-catégories de Martinique)
       — même présentation que le sous-menu au survol sur desktop
       (transparent, disposition horizontale, texte Marcellus gris) ;
       ajouté à <body> en position fixed pour échapper au overflow:hidden
       et au défilement horizontal de la barre de menu mobile */
    #mobile-martinique-dropdown {
        display: none !important;
        position: absolute !important;
        transform: translateY(calc(-100% - 4px)) !important;
        z-index: 999999 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-family: 'Marcellus', Georgia, serif !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #mobile-martinique-dropdown.open {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
    }
    #mobile-martinique-dropdown li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #mobile-martinique-dropdown a {
        display: block !important;
        padding: 4px 0 !important;
        font-family: 'Marcellus', Georgia, serif !important;
        font-size: 14px !important;
        color: var(--gris-texte) !important;
        -webkit-text-fill-color: var(--gris-texte) !important;
        background: transparent !important;
        white-space: nowrap !important;
    }

    /* Flèches slider */
    #carousel .carousel-control {
        opacity: 0.9 !important;
        background: transparent !important;
        border-radius: 0 !important;
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #carousel .carousel-control .material-icons {
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: var(--or-clair) !important;
        filter: none !important;
    }

    /* Splash screen mobile */
    #splash-screen {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100vw !important; height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        margin: 0 !important; padding: 0 !important;
    }

    #splash-video {
        position: relative !important;
        top: auto !important; left: auto !important;
        transform: none !important;
        width: 100vw !important;
        height: auto !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: auto !important;
    }

    /* Grille produits 2 colonnes */
    .featured-products .products.row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .featured-products .products.row .product.col-xs-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        display: flex !important;
    }

    /* Cadres de même hauteur même si un titre produit prend 2 lignes
       au lieu d'une — .row en flex étire déjà les colonnes, il fallait
       aussi étirer la carte elle-même jusqu'au bord de sa colonne */
    .featured-products .products.row .product-miniature {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .featured-products { padding-top: 0 !important; margin-top: 0 !important; }

    /* PRODUITS POPULAIRES + TOUS LES PRODUITS — même style sur mobile */
    .featured-products h2,
    .featured-products .products-section-title,
    section.featured-products > h2,
    #content .featured-products h2,
    .all-product-link {
        font-size: 1.05rem !important;
        letter-spacing: 0 !important;
    }

    /* "Tous les produits" masqué sur mobile aussi */
    .all-product-link,
    a.all-product-link {
        display: none !important;
    }

    /* Texte désabonnement — plus petit sur mobile */
    .block-newsletter .col-xs-12 p,
    .block-newsletter form p,
    #blockEmailSubscription_displayFooterBefore p:not(#block-newsletter-label) {
        font-size: 10px !important;
    }

    /* Recevez nos offres — aligné à gauche sur mobile */
    p#block-newsletter-label, #block-newsletter-label,
    .block_newsletter p#block-newsletter-label,
    p#block-newsletter-label.col-md-5 {
        text-align: left !important;
        padding-right: 0 !important;
    }

    .homeslider-container, .banner-bottom, a.banner {
        width: 100% !important;
        overflow: hidden !important;
        background: var(--noir-profond) !important;
    }

    .homeslider-container img, .banner-bottom img, a.banner img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* Carousel mobile */
    .carousel, #carousel .carousel {
        background-color: var(--noir-profond) !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        left: auto !important;
        width: 100% !important;
    }

    /* Bannière du carrousel très large (format "lettre-boîte", ~3.5:1) —
       à pleine largeur mobile, sa hauteur proportionnelle ne fait qu'une
       centaine de pixels, trop peu pour les points de pagination (à 20px
       du bas, valeur fixe pensée pour desktop) qui finissent par recouvrir
       l'image. Plus simple que de recalculer une hauteur : masquer les
       points sur mobile. */
    #carousel .carousel-indicators {
        display: none !important;
    }

    /* Supprimer les traits dans le footer mobile */
    #footer, .footer-container,
    #footer div, .footer-container div,
    #footer section, .footer-container section,
    #footer ul, .footer-container ul,
    #footer li, .footer-container li,
    #footer p, .footer-container p,
    #footer span, .footer-container span,
    #footer a, .footer-container a,
    #footer hr, .footer-container hr {
        border-top: none !important;
        border-bottom: none !important;
        border-image: none !important;
    }
    #footer hr, .footer-container hr,
    #footer .separator, .footer-container .separator {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
    }
    /* Mention PrestaShop centrée sur mobile */
    #footer .row .col-md-12.text-sm-center,
    #footer p.text-sm-center {
        text-align: center !important;
    }

    /* Restaurer border input newsletter */
    #footer input, .footer-container input {
        border: 1px solid var(--or-sombre) !important;
        border-image: none !important;
    }
    /* Restaurer border accordéons */
    .footer-container [data-bs-toggle="collapse"],
    .footer-container [data-toggle="collapse"],
    #footer [data-bs-toggle="collapse"],
    #footer [data-toggle="collapse"],
    .footer-container .title.hidden-md-up,
    .block-contact .title.hidden-md-up {
        border-bottom: 1px solid rgba(197,142,127,0.2) !important;
        border-image: none !important;
    }

    /* Footer mobile — cacher les titres statiques */
    .footer-container .block > h3,
    .footer-container .block > h4,
    .footer-container .block > p.h3,
    .footer-container .block > p.h4,
    .footer-container .block > .myaccount-title,
    .footer-container .block > .block-contact-title,
    .footer-container .block > .hidden-sm-down,
    #footer .block > h3,
    #footer .block > h4,
    #footer .block > p.h3,
    #footer .block > p.h4,
    #footer .block-contact .block-contact-title,
    .footer-container .block-contact .block-contact-title,
    #footer .block-contact > p.h4,
    .footer-container .block-contact > p.h4 {
        display: none !important;
    }
    /* Afficher les boutons accordéon (hidden-md-up) */
    .footer-container .hidden-md-up,
    .footer-container [data-toggle="collapse"],
    .footer-container [data-bs-toggle="collapse"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(197,142,127,0.2) !important;
        cursor: pointer !important;
    }

    .footer-container,
    #footer .container,
    #footer .footer-container .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .footer-container .col-md-6,
    .footer-container .col-md-3,
    .footer-container [class*="col-md-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .footer-container .title.hidden-md-up,
    #block_myaccount_infos .title.hidden-md-up,
    .block-contact .title.hidden-md-up {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(197,142,127,0.2) !important;
        cursor: default !important;
    }

    .footer-container .title.hidden-md-up .h3,
    #block_myaccount_infos .title.hidden-md-up .h3,
    .block-contact .title.hidden-md-up .h3,
    .footer-container [data-bs-toggle] .h3,
    .footer-container [data-toggle] .h3,
    #footer [data-bs-toggle] .h3,
    #footer [data-toggle] .h3,
    #footer .block-contact .block-contact-title,
    .footer-container .block-contact .block-contact-title {
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        letter-spacing: 1px !important;
        background: var(--degrade-or) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8)) !important;
        display: inline-block !important;
    }

    /* Footer — remplacer les icônes thème par une flèche CSS unique */
    .footer-container .title .collapse-icons,
    .footer-container [data-bs-toggle] .collapse-icons,
    .footer-container [data-toggle] .collapse-icons,
    #footer .title .collapse-icons,
    #footer [data-bs-toggle] .collapse-icons,
    #footer [data-toggle] .collapse-icons {
        display: none !important;
    }
    /* Flèche via ::after — toujours ▼ */
    .footer-container .title[data-bs-toggle]::after,
    .footer-container [data-bs-toggle="collapse"]::after,
    .footer-container [data-toggle="collapse"]::after,
    #footer [data-bs-toggle="collapse"]::after,
    #footer [data-toggle="collapse"]::after,
    #footer .title[data-bs-toggle]::after,
    #footer .title[data-toggle]::after {
        content: "▼" !important;
        font-size: 10px !important;
        color: var(--or-base) !important;
        -webkit-text-fill-color: var(--or-base) !important;
        background: none !important;
        float: right !important;
        display: inline-block !important;
    }

    /* Footer — réduire l'espace entre les sections */
    .footer-container .block,
    #footer .block {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 15px !important;
    }
    .footer-container .row > [class*="col-"],
    #footer .row > [class*="col-"] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .footer-container .collapse,
    .footer-container .collapsing {
        padding: 0 !important;
    }

    /* Bloc contact (INFORMATIONS) mobile — même style que les sous-catégories */
    #footer .block-contact p,
    #footer .block-contact span,
    #footer .block-contact address,
    #footer .block-contact a,
    #block-contact_infos p,
    #block-contact_infos span,
    #block-contact_infos address {
        font-size: 12px !important;
        font-family: 'Marcellus', Georgia, serif !important;
        line-height: 1.6 !important;
        font-weight: bold !important;
        background: transparent !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        color: var(--gris-texte) !important;
        -webkit-text-fill-color: var(--gris-texte) !important;
    }


    /* Sous-catégories footer mobile : Marcellus gris, gras */
    .footer-container .collapse a,
    #footer .collapse a {
        font-family: 'Marcellus', Georgia, serif !important;
        font-size: 14px !important;
        font-weight: bold !important;
        background: var(--degrade-gris) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        line-height: 1.6 !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 0 2px 0 !important;
    }

    .footer-container .collapse li,
    #footer .collapse li {
        line-height: 1.6 !important;
        padding: 0 !important;
        margin: 0 0 2px 0 !important;
        background: none !important;
    }

    /* "Recevez nos offres" plus petit sur mobile */
    p#block-newsletter-label, #block-newsletter-label {
        font-size: 14px !important;
    }

    /* Fiche produit mobile — cadre photo */
    .page-product .product-cover {
        border: 1px solid var(--or-sombre) !important;
        border-image: none !important;
    }

    /* Modale aperçu rapide mobile — plein écran */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* Boutons mobile — taille lisible */
    .btn-primary, .add-to-cart,
    .modal .add-to-cart {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    /* Icônes sociales partager mobile */
    .social-sharing li a {
        width: 32px !important;
        height: 32px !important;
        background-size: 16px 16px !important;
    }

    /* Dropdown suggestions recherche mobile */
    .ui-autocomplete, [class*="autocomplete"],
    [class*="search-suggestion"] {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
    }

    /* Retour en haut mobile */
    #back-to-top, .back-to-top {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }

    /* Section commentaires mobile */
    html body #product-comments {
        padding: 10px !important;
        margin-top: 8px !important;
    }

    /* Formulaire connexion/inscription mobile */
    .page-authentication .login-form,
    .page-authentication .register-form {
        padding: 15px !important;
    }

}

/* Page catégorie mobile — grand espace vide entre le fil d'Ariane et le
   cadre de description : le lien de sous-menu ".block-categories" (qui
   pointe vers la catégorie déjà affichée, donc redondant) est caché en
   display:none, mais son conteneur garde son padding/margin (25px de
   chaque côté) et reste visible, vide. Uniquement en dessous de 768px
   (au-dessus, les filtres réels s'affichent dans cette même colonne). */
@media (max-width: 767px) {
    #left-column .block-categories {
        display: none !important;
    }
}

/* ==========================================================================
   SURCHARGE FINALE — éléments desktop cachés sur mobile (haute spécificité)
   ========================================================================== */
@media screen and (max-width: 991px) {
    html body #header #_desktop_user_info,
    html body #_desktop_user_info {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Neutraliser la règle globale hr dans le footer mobile */
    html body #footer hr,
    html body .footer-container hr,
    html body #footer .separator,
    html body .footer-container .separator {
        display: none !important;
        border: none !important;
        border-image: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   RECHERCHE — DROPDOWN SUGGESTIONS
   ========================================================================== */

.ui-autocomplete, .ui-menu,
.ac-suggestions, .search-widget .dropdown,
[class*="autocomplete"], [class*="search-suggestion"],
.search-bar + div, .search-widget + div,
#search_widget .dropdown-menu,
.search-widget .dropdown-menu,
.js-search-bar + .dropdown,
.search-box .dropdown-menu {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8) !important;
}

.ui-autocomplete li, .ui-menu li,
.ac-suggestions li, [class*="autocomplete"] li,
[class*="search-suggestion"] li,
.search-widget .dropdown-menu li,
.search-widget .dropdown-item {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    border-bottom: 1px solid rgba(179,125,109,0.15) !important;
}

.ui-autocomplete li a, .ui-menu li a,
.ac-suggestions li a, [class*="autocomplete"] li a,
.search-widget .dropdown-item,
[class*="search-suggestion"] a {
    background: transparent !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ui-autocomplete li:hover, .ui-menu li:hover,
.search-widget .dropdown-item:hover,
.ui-state-active, .ui-state-focus {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
}

/* Miniature produit dans suggestion */
[class*="search-suggestion"] img,
.ui-autocomplete img, .ac-suggestions img {
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    background: var(--noir-profond) !important;
}

/* ==========================================================================
   BOUTON RETOUR EN HAUT
   ========================================================================== */

#back-to-top, .back-to-top,
[id*="back-to-top"], [class*="back-to-top"],
.js-back-to-top, #scroll-to-top,
button#back-to-top {
    background: var(--noir-carte) !important;
    background-color: var(--noir-carte) !important;
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    border: 1px solid var(--or-sombre) !important;
    border-image: none !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: bold !important;
    box-shadow: none !important;
}

#back-to-top i, .back-to-top i,
#back-to-top .material-icons {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   PADDING GLOBAL — textes ne mangent pas les cadres
   ========================================================================== */

/* Tout élément avec bordure or-sombre doit avoir du padding interne */
.modal-content, .modal-header, .modal-body, .modal-footer,
.card, .block, .card-block, .card-body,
.page-product .tabs,
.page-contact .contact-form,
.page-authentication .login-form,
.page-authentication .register-form,
.page-registration .register-form,
.alert, .alert-info, .alert-warning,
.checkout-step, .cart-summary, .cart-grid-body,
[class*="block-content"] {
    padding: 20px !important;
}

/* .tab-content et .tab-pane sont imbriqués DANS .page-product .tabs (qui a
   déjà son padding ci-dessus) — leur donner aussi 20px cumulait 3 niveaux
   de marge (60px) au lieu d'un seul */
.tab-content, .tab-pane {
    padding: 15px 0 0 0 !important;
}

/* Modal header et footer — padding réduit */
.modal-header, .modal-footer {
    padding: 12px 20px !important;
}

/* ==========================================================================
   SURCHARGE FINALE — fonds blancs résiduels (avis, modules tiers)
   ========================================================================== */

/* Forcer fond sombre sur tout élément susceptible d'avoir un fond blanc */
[id*="comment"], [class*="comment"],
[id*="review"], [class*="review"],
[id*="avis"], [class*="avis"],
.product-comments, .product-reviews,
.productcomments, #productcomments,
section[id*="comment"], div[id*="comment"] {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

[id*="comment"] *, [class*="comment"] *,
[id*="review"] *, [class*="review"] * {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    border-color: var(--or-sombre) !important;
}

/* Étoiles de notation (avis produit) — le reset ci-dessus écrase le sprite
   d'étoiles (background uni sans image) car ce sont des <div> imbriqués
   dans un conteneur dont l'id contient "comment". On restaure le sprite. */
.star-content div.star,
.star-content div.star-on,
.star-content div.star-hover {
    background: url("/modules/productcomments/views/img/stars.png") 0 0 no-repeat transparent !important;
}
.star-content div.star-on,
.star-content div.star-hover {
    background-position: -24px 0 !important;
}
.small-stars .star-content div.star,
.small-stars .star-content div.star-on,
.small-stars .star-content div.star-hover {
    background: url("/modules/productcomments/views/img/small_stars.png") 0 0 no-repeat transparent !important;
}
.small-stars .star-content div.star-on,
.small-stars .star-content div.star-hover {
    background-position: -19px 0 !important;
}

/* ==========================================================================
   BANDEAU COOKIES TARTEAUCITRON — charte graphique du site
   ========================================================================== */

#tarteaucitronAlertBig {
    background-color: var(--noir-profond) !important;
    border-top: 1px solid var(--or-sombre) !important;
}

#tarteaucitronDisclaimerAlert {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* "Tout accepter" — même traitement que les boutons du site (dégradé +
   texte noir, cf. .btn-primary/.add-to-cart).
   -webkit-text-fill-color doit être répété à chaque fois qu'on force
   "color" ici : une règle générale du site fixe déjà -webkit-text-fill-color
   ailleurs, et sous Chrome/Edge/Safari cette propriété l'emporte sur "color"
   pour le rendu visuel réel du texte (elles peuvent diverger silencieusement,
   "color" reste correct dans les DevTools alors que le texte affiché suit
   -webkit-text-fill-color) — c'est ce qui donnait un texte clair malgré un
   "color" mesuré comme sombre. */
#tarteaucitronAlertBig #tarteaucitronPersonalize2.tarteaucitronAllow {
    background: var(--degrade-bouton) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* "Tout refuser" — bouton secondaire, contour or au lieu du plein */
#tarteaucitronAlertBig #tarteaucitronAllDenied2.tarteaucitronDeny {
    background: transparent !important;
    text-transform: uppercase !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* "Personnaliser" / "Politique de confidentialité" — liens discrets */
#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitron #tarteaucitronPrivacyUrl {
    background: transparent !important;
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    text-decoration: underline !important;
}

/* Panneau "Personnaliser" (liste détaillée des services) — même charte.
   #tarteaucitron et sa ligne d'en-tête (titre + résumé + lien politique de
   confidentialité) ont chacun leur propre fond blanc, en plus de
   .tarteaucitronBorder qui ne couvre que les sections déroulantes en dessous */
#tarteaucitron,
#tarteaucitronMainLineOffset,
.tarteaucitronBorder {
    background-color: var(--noir-carte) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    border-color: var(--or-sombre) !important;
}

/* Sur mobile, le message du bandeau (#tarteaucitronDisclaimerAlert) est en
   "display: inline-flex" avec un texte aligné à gauche (start), alors que
   le bandeau lui-même (#tarteaucitronAlertBig) et ses boutons sont centrés
   — décalage visuel entre le texte et les boutons en dessous.
   box-sizing:border-box est nécessaire : le message a par ailleurs un
   padding horizontal fixe qui, combiné à un simple "display:block" en
   content-box, le fait déborder du viewport (texte tronqué à droite). */
@media (max-width: 767px) {
    #tarteaucitronDisclaimerAlert {
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    #tarteaucitronAlertBig {
        text-align: center !important;
    }
}

#dialogTitle {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}

#tarteaucitronRoot .tarteaucitronAllow {
    background: var(--degrade-bouton) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

#tarteaucitronRoot .tarteaucitronDeny {
    background: transparent !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    text-transform: uppercase !important;
    border: 1px solid var(--or-sombre) !important;
    font-weight: 700 !important;
}

/* tarteaucitron a une règle avec exactement le même sélecteur (id + classe)
   pour font-size, chargée après la nôtre : à spécificité strictement égale,
   la sienne gagne. On rajoute "html body" pour dépasser sa spécificité et
   garantir que notre taille l'emporte, peu importe l'ordre de chargement. */
html body #tarteaucitronRoot .tarteaucitronAllow,
html body #tarteaucitronRoot .tarteaucitronDeny {
    font-size: 13px !important;
}

/* Icône flottante (rouvre le panneau) — logo "citron" du plugin remplacé
   par une icône engrenage (police Material Icons déjà chargée sur le site,
   cf. la coche des cases à cocher) dans les couleurs de la charte */
#tarteaucitronIcon img {
    display: none !important;
}

#tarteaucitronManager {
    background: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 50% !important;
    padding: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#tarteaucitronManager::before {
    content: "settings";
    font-family: "Material Icons";
    font-size: 16px;
    color: var(--or-base);
    line-height: 1;
}

/* Panneau "Personnaliser" — blocs restés en fond blanc : le résumé
   "En autorisant ces services...", le contenu déplié de chaque catégorie
   (ex. "Cookies obligatoires"), le bouton "Politique de confidentialité"
   et les boutons "+ Cookies obligatoires" / "+ APIs" eux-mêmes */
#tarteaucitronPrivacyUrlDialog,
#tarteaucitron .tarteaucitronTitle button,
#tarteaucitronInfo,
#tarteaucitron .tarteaucitronLine,
#tarteaucitronSave,
#tarteaucitron [id^="tarteaucitronDetails"],
#tarteaucitronClosePanel {
    background-color: var(--noir-carte) !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* "Fermer" (coin haut droit du panneau) — simple texte à l'origine, peu
   visible ; on l'agrandit un peu, sans cadre (essayé avec cadre, moins bon
   rendu) */
#tarteaucitronClosePanel {
    border: none !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
}

/* "Enregistrer" — tarteaucitron a une règle ciblant cet id précis (encore
   plus spécifique que #tarteaucitronRoot .tarteaucitronAllow) qui remet la
   taille à 18px. Comme le CSS de tarteaucitron est injecté par son propre
   script APRÈS nos <link>, une spécificité seulement égale à la sienne ne
   suffit pas (à égalité, la règle chargée en dernier gagne, et c'est
   toujours la sienne) : il faut la dépasser, pas juste l'égaler — d'où le
   ".tarteaucitronAllow" en plus ici. */
html body #tarteaucitronRoot button#tarteaucitronSaveButton.tarteaucitronAllow {
    font-size: 13px !important;
}

/* "Politique de confidentialité" dans le panneau — rien n'indiquait que
   c'est cliquable ; soulignement au survol, comme les autres liens du site */
#tarteaucitronPrivacyUrlDialog:hover {
    text-decoration: underline !important;
}

/* Popup "Produit ajouté au panier" sur mobile : "Continuer mes achats" à la
   taille desktop (16px) passe sur 3 lignes dans une colonne aussi étroite,
   ce qui gonfle la hauteur du bouton — et comme les deux boutons ont la
   même hauteur (flex), "Commander" hérite de cette hauteur excessive alors
   que son propre texte tient sur une seule ligne. */
@media (max-width: 767px) {
    #blockcart-modal .cart-content-btn .btn {
        font-size: 12px !important;
        padding: 10px 6px !important;
        line-height: 1.3 !important;
    }
}

/* Récapitulatif panier — quand le nom d'une règle de panier (code promo) est
   long, il passe sur plusieurs lignes et chevauche le badge "Livraison
   gratuite" (positionné en float à droite, pas prévu pour un nom aussi
   long). On empile proprement : nom au-dessus, badge en dessous. */
.promo-name .cart-summary-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}
.promo-name .cart-summary-line .label {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    white-space: normal !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}
.promo-name .cart-summary-line .float-xs-right {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    margin-top: 0 !important;
}
/* Le nom de la règle affiche déjà l'avantage ("Livraison gratuite dès
   79€..."), le badge générique répétant "Livraison gratuite" juste en
   dessous est redondant — masqué, on garde juste l'icône de suppression. */
.promo-name .cart-summary-line .float-xs-right > span {
    display: none !important;
}

/* Champ "code promo" masqué sur la page Panier : à ce stade, aucune adresse
   de livraison n'est encore connue, or nos codes ont une restriction pays
   (France/DROM-COM) qui nécessite cette adresse pour être vérifiée — le
   champ y est donc toujours en échec. Il reste disponible et fonctionnel
   dans le tunnel de commande, une fois l'adresse renseignée. */
body.page-cart .block-promo .cart-voucher {
    display: none !important;
}
body.page-cart .block-promo .js-livraison-offerte-etape-suivante {
    margin-top: 12px !important;
}
body.page-cart .block-promo .js-code-promo-etape-suivante,
body.page-cart .block-promo .js-livraison-offerte-etape-suivante {
    display: block !important;
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    text-decoration: underline !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: left !important;
}

/* Le code promo s'y retrouve accessible avant même d'avoir renseigné
   l'adresse — il échoue alors systématiquement. On le masque tant que
   l'étape Paiement n'est pas atteinte (adresse + transporteur confirmés),
   avec un message à la place. */
body.page-order .block-promo .cart-voucher {
    display: none !important;
}
body.page-order .block-promo .js-code-promo-plus-tard {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    white-space: normal !important;
}
body.page-order:has(#checkout-payment-step.-current) .block-promo .cart-voucher,
body.page-order:has(#checkout-payment-step.-reachable) .block-promo .cart-voucher {
    display: block !important;
}
body.page-order:has(#checkout-payment-step.-current) .block-promo .js-code-promo-plus-tard,
body.page-order:has(#checkout-payment-step.-reachable) .block-promo .js-code-promo-plus-tard {
    display: none !important;
}

/* Tunnel de commande sur mobile : le bloc récapitulatif/code promo
   (.cart-grid-right) reste dans son ordre naturel, après toutes les
   étapes (Informations, Adresses, Livraison, Paiement) une fois empilé.
   Un essai précédent le faisait apparaître EN PREMIER via l'ordre flex,
   ce qui perturbait aussi le défilement automatique du thème après
   chaque étape (il visait le récap au lieu de l'étape suivante, l'ordre
   visuel ne correspondant plus à l'ordre réel du code). Le placer entre
   deux étapes précises (juste avant Paiement) demanderait de déplacer le
   bloc dans le code, ce qui a déjà cassé la navigation du tunnel par le
   passé — volontairement évité ici. */

/* Champ code promo (tunnel de commande) ouvert par défaut, plutôt que
   caché derrière le lien "Vous avez un code promo ?" à cliquer. */
.promo-code-button.display-promo {
    display: none !important;
}
#promo-code.collapse {
    display: block !important;
    height: auto !important;
}

/* Texte descriptif de l'offre "Livraison gratuite dès X€" et le badge de
   type de réduction juste en dessous — centrés par défaut, alignés à
   gauche comme le reste du récapitulatif panier pour rester cohérent. */
.promo-name,
.promo-name .cart-summary-line,
.promo-name .cart-summary-line .label {
    text-align: left !important;
}

/* "Profitez de nos offres exclusives..." (règles mises en avant, pas encore
   appliquées) — texte justifié et un peu plus petit */
.promo-discounts .cart-summary-line {
    list-style: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.promo-discounts .cart-summary-line::before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    background: var(--degrade-or) !important;
    -webkit-mask-image: url('/img/favicon.ico') !important;
    mask-image: url('/img/favicon.ico') !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
.promo-discounts .cart-summary-line .label {
    text-align: left !important;
    font-size: 0.9rem !important;
}
/* Le nom du code (span.code) est collé directement au texte suivant, sans
   séparateur ("COLIBRI972Livraison...") — on ajoute ": " uniquement ici. */
.promo-discounts .cart-summary-line .label .code:not(:empty)::after {
    content: ": ";
}
p.promo-highlighted {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    font-size: 1.05rem !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}
/* Bouton "Fermer" du code promo — inutile puisqu'il reste ouvert en
   permanence (voir règle #promo-code.collapse plus haut) */
.promo-code-button.cancel-promo {
    display: none !important;
}

/* Tunnel de commande sur mobile : le bloc récapitulatif/code promo
   (.cart-grid-right) est déplacé en JS (voir custom.js) juste entre les
   étapes "Mode de livraison" et "Paiement", plutôt que réordonné en CSS. */

/* Ordre du récapitulatif panier : Sous-total, Livraison, puis Réduction(s)
   (au lieu de Sous-total, Réduction(s), Livraison par défaut). */
.cart-summary-subtotals-container,
.cart-detailed-subtotals {
    display: flex !important;
    flex-direction: column !important;
}
.cart-summary-subtotals-container .cart-summary-line,
.cart-detailed-subtotals .cart-summary-line {
    padding-top: 0.15rem !important;
    margin-bottom: 0.1rem !important;
}
.cart-summary-totals {
    padding-top: 8px !important;
}
.cart-summary-totals .cart-summary-line {
    padding-top: 0.15rem !important;
    margin-bottom: 0.1rem !important;
}
/* Panier : le trait est la bordure haute de .cart-total (dans le tunnel il
   est sous le sous-total, avec 30px avant "Total TTC"). Même écart ici. */
.page-cart .cart-summary-line.cart-total {
    padding-top: 29px !important;
}
#cart-subtotal-products {
    order: 1 !important;
}
#cart-subtotal-shipping {
    order: 2 !important;
}
#cart-subtotal-discount {
    order: 3 !important;
}

/* Flèche rouge au-dessus du message d'erreur du code promo (triangle en
   bordure, coloré en dur dans le thème) — en or rose de la charte */
.alert-danger.js-error::after {
    border-bottom-color: var(--or-base) !important;
}

/* Cadre or rose autour du formulaire de paiement Stripe (le contenu reste
   dans l'iframe Stripe, non stylable en CSS — seul le conteneur l'est) */
#js-stripe-payment-element {
    border: 1px solid var(--or-base) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
/* Le formulaire Stripe dessine son propre cadre blanc (dans l'iframe) :
   on le décale de 2px pour que le cadre or rose le recouvre et qu'il n'en
   reste qu'un seul visible */
#js-stripe-payment-element .__PrivateStripeElement {
    margin: -2px !important;
}
#js-stripe-payment-element {
    position: relative !important;
}
#js-stripe-payment-element::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border: 1px solid var(--or-base) !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

/* Page "Votre compte" : tuiles blanches du thème (texte gris clair illisible
   dessus) — passées en carte sombre avec bordure or rose, comme le reste */
.page-my-account #content .links a span.link-item {
    background: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    color: var(--or-clair) !important;
    -webkit-text-fill-color: var(--or-clair) !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}
.page-my-account #content .links a:hover span.link-item {
    background: var(--noir-profond) !important;
    border-color: var(--or-clair) !important;
}
.page-my-account #content .links a:hover {
    color: var(--or-clair) !important;
    -webkit-text-fill-color: var(--or-clair) !important;
}

/* Confirmation de commande : lignes anglaises du module masquées et
   remplacées par un message en français (voir custom.js) */
body#order-confirmation .js-en-masque {
    display: none !important;
}
body#order-confirmation .js-confirmation-fr {
    margin-top: 20px !important;
    padding: 20px 24px !important;
    background: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    text-align: left !important;
}
body#order-confirmation .js-confirmation-fr p {
    margin: 0 0 10px !important;
    line-height: 1.7 !important;
    font-size: 16px !important;
    text-align: justify !important;
}
body#order-confirmation .js-confirmation-fr .js-confirmation-fr-titre {
    text-align: left !important;
}
body#order-confirmation .js-confirmation-fr p:last-child {
    margin-bottom: 0 !important;
}
body#order-confirmation .js-confirmation-fr .js-confirmation-fr-titre {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: bold !important;
}
body#order-confirmation .js-confirmation-fr .js-confirmation-fr-ref {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
}

/* Pastilles d'état de commande : leur couleur de fond vient de chaque état
   (bleu, vert fluo…) en style en ligne, hors charte et illisible avec le
   texte gris clair global. Toutes passées en or rose, texte noir. */
.label-pill,
.label.label-pill {
    background: var(--degrade-bouton) !important;
    background-color: var(--or-base) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    border-radius: 3px !important;
    font-weight: bold !important;
}

/* Suivi de commande (invité) et détail de commande : seul l'état actuel
   (ligne la plus récente, en premier) est affiché, pas l'historique des
   étapes intermédiaires. Limité à ces deux pages pour ne pas toucher la liste
   "Historique des commandes" qui contient aussi des pastilles d'état. */
body#guest-tracking table:has(.label-pill) tbody tr:nth-child(n+2),
body#order-detail table:has(.label-pill) tbody tr:nth-child(n+2) {
    display: none !important;
}

/* Lien "Téléchargez votre facture au format PDF" (suivi et détail de
   commande) : en or rose et souligné pour qu'on voie que c'est cliquable */
a[href*="pdf-invoice"] {
    color: var(--or-clair) !important;
    -webkit-text-fill-color: var(--or-clair) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--or-base) !important;
}
a[href*="pdf-invoice"]:hover {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}

/* Détail de commande / suivi invité, version mobile : le thème remplace les
   tableaux par des blocs sans cadre (".history-lines", ".order-items",
   ".order-totals", ".shipping-lines"). On les met en carte comme les
   tableaux desktop, et on n'affiche que l'état actuel. */
body#guest-tracking .history-lines .history-line:nth-child(n+2),
body#order-detail .history-lines .history-line:nth-child(n+2) {
    display: none !important;
}
body#guest-tracking .order-items,
body#guest-tracking .order-totals,
body#guest-tracking .shipping-lines,
body#guest-tracking .history-lines,
body#order-detail .order-items,
body#order-detail .order-totals,
body#order-detail .shipping-lines,
body#order-detail .history-lines {
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    background: var(--noir-profond) !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
}
body#guest-tracking .order-items *,
body#guest-tracking .order-totals *,
body#guest-tracking .shipping-lines *,
body#guest-tracking .history-lines *:not(.label-pill),
body#order-detail .order-items *,
body#order-detail .order-totals *,
body#order-detail .shipping-lines *,
body#order-detail .history-lines *:not(.label-pill) {
    background-color: transparent !important;
}
body#guest-tracking .order-total,
body#order-detail .order-total {
    padding: 4px 0 !important;
}
body#guest-tracking .shipping-lines ul,
body#order-detail .shipping-lines ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body#guest-tracking .shipping-lines li,
body#order-detail .shipping-lines li {
    padding: 3px 0 !important;
}

/* Cadres et cartes du site : fond noir profond (comme les tableaux et les
   cadres du tunnel) au lieu du gris #1A1A1A. Les champs de saisie, menus
   déroulants et infobulles restent en gris pour se distinguer du fond. */
.alert, .alert-info, .alert-warning, .alert-success, .alert-danger,
.modal-content, .modal-header, .modal-body, .modal-footer,
.address-item,
.page-contact #contact-infos .block,
.page-contact [class*="contact"] .card,
.page-contact .contact-item,
.contact-richtext ul li,
#contact-infos ul li,
.page-my-account #content .links a span.link-item,
body#order-confirmation .js-confirmation-fr {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
}

/* Classe générique ".box" du thème (fond blanc par défaut) : utilisée pour
   entourer de nombreux blocs (tableau produits du détail de commande,
   infos de commande, historique d'état...) jamais neutralisée jusqu'ici —
   d'où un fin trait/liseré blanc visible en bordure de ces blocs. */
.box {
    background: var(--noir-profond) !important;
}

/* Panier vide : le cadre "Il n'y a plus d'articles..." (dans .cart-grid-body)
   ne fait que la hauteur de son contenu, alors que le récapitulatif à côté
   (.cart-grid-right) est plus grand — deux cadres de hauteurs différentes
   côte à côte. On étire les deux colonnes à la même hauteur (comme le fait
   Bootstrap par défaut, mais ce thème n'utilise pas .row en flex), puis on
   étire le cadre lui-même à l'intérieur de sa colonne. */
@media (min-width: 992px) {
    body.page-cart .row:has(> .cart-grid-right) {
        display: flex !important;
        align-items: stretch !important;
    }
    body.page-cart .cart-grid-body {
        display: flex !important;
        flex-direction: column !important;
    }
    body.page-cart .cart-grid-body > .card.cart-container {
        flex: 1 1 auto !important;
    }
}

/* Bandeau mobile "Livraison / Réduction appliquée" (voir custom.js) :
   visible seulement sur mobile, le récapitulatif complet suffit sur
   ordinateur puisqu'il reste visible à côté des étapes. */
.js-mini-recap-livraison {
    display: none;
}
@media (max-width: 991px) {
    body.page-order .js-mini-recap-livraison {
        display: block !important;
        margin: 12px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        color: var(--or-clair) !important;
        -webkit-text-fill-color: var(--or-clair) !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-align: center !important;
    }
}

/* Titre "Votre commande est confirmée" (icône + texte inline, sans balise
   autour du texte) : sur mobile, le texte passe sur 2 lignes et la 2e ligne
   revient sous l'icône (coche) au lieu de s'aligner sous le début du texte.
   display:flex sur le titre transforme le texte qui suit l'icône en bloc
   à part (génération de boîte anonyme par le navigateur pour le nœud de
   texte dans un conteneur flex) : ses lignes suivantes s'alignent alors
   entre elles, sans revenir sous l'icône. */
body#order-confirmation h3.h1.card-title {
    display: flex !important;
    align-items: flex-start !important;
}
body#order-confirmation h3.h1.card-title i.material-icons.done {
    flex: 0 0 auto !important;
    margin-right: 10px !important;
}

/* Page de confirmation de commande : #order-items a une bordure droite
   claire (#f6f6f6) posée en dur dans le thème, jamais neutralisée jusqu'ici
   — d'où le fin trait clair visible à droite du tableau "Articles de la
   commande". .order-confirmation-table a aussi un fond blanc et une
   bordure grise par défaut, repris à la charte par cohérence. */
#order-items {
    border-right: none !important;
}
.order-confirmation-table {
    background-color: var(--noir-profond) !important;
    border: none !important;
}

/* Même page : trait clair (#f6f6f6) codé en dur sous les titres "Articles
   de la commande" et "Détails de la commande" (.card-title) — remplacé par
   la bordure or rose déjà utilisée pour les séparateurs du site. */
#order-details .card-title,
#order-items .card-title {
    border-bottom: none !important;
}

/* Widget Mondial Relay (choix du Point Relais / Locker au checkout) — mis
   à la charte du site. Le bandeau de titre ".MRW-Title" garde son fond
   clair d'origine (#eee) pendant que notre règle globale de couleur de
   texte lui applique du gris clair (--gris-texte) : gris sur gris clair,
   texte quasi invisible. Le bouton "Chercher" et le bouton de
   géolocalisation gardent eux la couleur bordeaux de la marque Mondial
   Relay, qui jure avec le noir + or rose du site. */
/* Conteneur racine du widget (.MR-Widget) : fond blanc jamais ciblé
   jusqu'ici, qui dépassait en fin liseré blanc tout autour du bloc
   (visible en haut, sur les bords...) derrière les éléments internes déjà
   passés en noir un par un. */
/* :not(#mrw-boost) ajouté à (quasiment) tous les sélecteurs de ce bloc :
   le vrai CSS du widget (widget.mondialrelay.com) utilise parfois des
   règles à 3 classes + !important (ex. ".new .btn.pink-border") qui, à
   spécificité égale avec les nôtres, l'emportent selon l'ordre de
   chargement des feuilles de style — plusieurs couleurs "corrigées"
   restaient donc actives côté Mondial Relay sans qu'on le voie dans le
   code. ":not(#id-qui-n-existe-pas)" ajoute un poids de spécificité
   "ID" (toujours vrai, ne filtre rien) qui nous fait gagner à coup sûr,
   sans avoir à dupliquer tout le CSS avec un vrai #id. */
#mondialrelay_widget .MR-Widget:not(#mrw-boost) {
    background-color: var(--noir-profond) !important;
    /* .MR-Widget a aussi "border: solid 1px #ddd !important" dans le CSS
       d'origine (jamais touché jusqu'ici) : un gris très clair qui, sur
       fond sombre, se voit comme un contour blanc tout autour du widget. */
    border: 1px solid var(--or-sombre) !important;
}
#mondialrelay_widget .MRW-Title:not(#mrw-boost) {
    background-color: var(--noir-carte) !important;
    color: var(--or-clair) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-bottom: 1px solid var(--or-sombre) !important;
}
#mondialrelay_widget .MRW-Content:not(#mrw-boost),
#mondialrelay_widget .MRW-Search:not(#mrw-boost),
#mondialrelay_widget .MRW-Results:not(#mrw-boost) {
    background-color: var(--noir-profond) !important;
}
#mondialrelay_widget .MRW-BtGo:not(#mrw-boost),
#mondialrelay_widget .MRW-BtGeoGo:not(#mrw-boost),
#mondialrelay_widget .mondialrelay_save-relay:not(#mrw-boost),
.mondialrelay_save-relay:not(#mrw-boost) {
    /* Doublon volontaire de .mondialrelay_save-relay seule, sans le scope
       #mondialrelay_widget : ce bouton ("Choisir mon point de retrait")
       n'apparaît qu'une fois un relais sélectionné et pourrait être rendu
       hors du conteneur du widget, ce qui le ferait échapper à la règle
       scopée ci-dessus (texte resté en minuscules malgré
       text-transform:uppercase). */
    /* --degrade-or est réservé au texte en dégradé (titres). Le texte
       blanc de "COMMANDER" (panier) est l'exception sur le site — partout
       ailleurs (newsletter, contact, ajouter au panier en modale, bannière
       cookies) le bouton or rose a du texte noir : c'est ce qu'on reprend
       ici. Mondial Relay met aussi ses boutons en pilule (border-radius
       40px) — remplacé par le rectangle à coins légèrement arrondis (4px)
       utilisé partout ailleurs sur le site. */
    background: var(--degrade-bouton) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
/* L'icône de géolocalisation (croix ciblée) est une image PNG fournie par
   Mondial Relay, pas du texte ni un SVG — "color" n'a aucun effet dessus.
   brightness(0) transforme tous les pixels visibles de l'image en noir
   plein (en conservant la transparence), ce qui fonctionne bien pour ce
   type d'icône à deux tons simple. */
#mondialrelay_widget .MRW-BtGeoGo span:not(#mrw-boost) {
    filter: brightness(0) !important;
}
#mondialrelay_widget .MRW-BtGo:hover:not(#mrw-boost),
#mondialrelay_widget .MRW-BtGeoGo:hover:not(#mrw-boost) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(197,142,127,0.4) !important;
}
/* Liste des points relais : nom du point en or clair pour le distinguer
   de l'adresse (--gris-texte), et un fin séparateur or entre chaque
   ligne pour remplacer la liste "à plat" d'origine. */
/* background-color ajouté explicitement (pas seulement hérité de
   .MRW-Results) : la feuille "responsive.min.css" de Mondial Relay remet
   un fond blanc sur la liste en-dessous d'une certaine largeur d'écran
   (mobile), jamais couvert tant qu'on ne déclarait pas le fond ici aussi. */
#mondialrelay_widget .MRW-RList:not(#mrw-boost),
#mondialrelay_widget .PR-List-Item:not(#mrw-boost) {
    background-color: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}
#mondialrelay_widget .PR-List-Item:not(#mrw-boost) {
    border-bottom: 1px solid rgba(179, 125, 109, 0.3) !important;
    padding: 10px 8px !important;
}
#mondialrelay_widget .PR-List-Item:hover:not(#mrw-boost) {
    background-color: var(--noir-carte) !important;
    cursor: pointer !important;
}
#mondialrelay_widget .PR-Name:not(#mrw-boost) {
    color: var(--or-clair) !important;
    font-weight: 600 !important;
}
/* Cadre or rose autour de la carte, sans toucher aux tuiles OpenStreetMap
   elles-mêmes (impossibles à recolorer, ce sont des images du service). */
#mondialrelay_widget .MRW-Map:not(#mrw-boost) {
    border: 1px solid var(--or-sombre) !important;
}

/* Le vrai CSS du widget (.PR-hover, .PR-Selected, .alert-info-consigne,
   .pink, .btn.pink-border...) est chargé depuis le CDN de Mondial Relay
   (widget.mondialrelay.com), pas depuis notre thème — d'où le rose
   bordeaux (#96154a / #ca0047 / #f6abb6) resté partout tant qu'on ne le
   ciblait pas précisément : survol/sélection d'un point relais dans la
   liste, bandeau "Vous avez choisi une livraison en consigne automatique"
   de la pop-up Locker, bouton "Je choisis un autre Point Relais". */
#mondialrelay_widget .PR-hover:not(#mrw-boost),
#mondialrelay_widget .PR-Selected:not(#mrw-boost) {
    background: var(--noir-carte) !important;
    border-left: 2px solid var(--or-base) !important;
}
#mondialrelay_widget .MRW-fl-Select:not(#mrw-boost) {
    border: 1px solid var(--or-sombre) !important;
}
.MRW-LockerModal .alert-info-consigne .surligne:not(#mrw-boost) {
    /* Même traitement que les boutons juste en dessous (dégradé, majuscules,
       Marcellus, gras) pour que les 3 blocs or rose soient cohérents,
       même si celui-ci est un bandeau et pas un bouton cliquable. */
    background: var(--degrade-bouton) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: 700 !important;
}
/* .btn.pink-border retiré de cette liste : une ancienne règle le mettait
   en or clair, en conflit avec le noir uniforme voulu sur tous les
   boutons (cf. règle juste en dessous). */
.MRW-LockerModal .alert-info-consigne .three p.titre:not(#mrw-boost),
.MRW-LockerModal .pink:not(#mrw-boost),
.MRW-LockerModal .modal.pink h4 strong:not(#mrw-boost),
.MRW-LockerModal .modal h4 strong.pink:not(#mrw-boost) {
    color: var(--or-clair) !important;
}
/* Ancienne règle border-color: var(--or-base) retirée d'ici : en pratique
   neutralisée par la règle commune ci-dessous (border: 1px solid
   or-sombre), mais gardée séparée elle créait un flou/micro-écart visuel
   entre les deux boutons. Un seul endroit décide désormais du contour. */
.MRW-LockerModal .btn.green:not(#mrw-boost),
.MRW-LockerModal .btn.pink-border:not(#mrw-boost) {
    /* Même style que le vrai bouton du site (--degrade-bouton) : texte
       noir uniforme (pas blanc, pas or clair), et rectangle à coins
       légèrement arrondis au lieu de la pilule de Mondial Relay — voir la
       note sur .MRW-BtGo plus haut. C'est précisément ici que
       ".new .btn.pink-border { color:#ca0047 !important }" (même
       spécificité, 3 classes) gagnait selon l'ordre de chargement :
       d'où le :not(#mrw-boost) pour trancher dans notre sens à coup sûr. */
    background: var(--degrade-bouton) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    /* .btn.green a une ombre portée verte, .btn.pink-border une autre teinte
       (héritées de Mondial Relay) : même texte noir des deux côtés, elles
       donnaient l'impression de deux couleurs de police différentes. */
    text-shadow: none !important;
}
.MRW-LockerModal .btn.green:hover:not(#mrw-boost),
.MRW-LockerModal .btn.pink-border:hover:not(#mrw-boost) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(197,142,127,0.4) !important;
}
/* La pop-up "consigne automatique" a une hauteur fixe (calculée par le
   widget) avec overflow:hidden — notre police et nos boutons prennent un
   peu plus de place que la police d'origine, ce qui coupait le second
   bouton ("Je choisis un autre Point Relais®"), invisible sous le bord
   inférieur de la pop-up. On repasse en hauteur automatique, scrollable
   si jamais le contenu dépasse la fenêtre. */
.MRW-LockerModal:not(#mrw-boost) {
    height: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}
/* Croix de fermeture (haut de la pop-up) : à l'origine deux barres fines
   pivotées à 45° en background-color, difficiles à recolorer proprement
   (finissaient en petit carré terne plutôt qu'un × net). Remplacées par un
   vrai caractère "×", beaucoup plus lisible et simple à mettre à la
   charte. */
.MRW-LockerModal .close-pop:not(#mrw-boost) {
    position: relative !important;
    color: transparent !important;
    background-color: transparent !important;
}
.MRW-LockerModal .close-pop:not(#mrw-boost)::before,
.MRW-LockerModal .close-pop:not(#mrw-boost)::after {
    display: none !important;
}
.MRW-LockerModal .close-pop:not(#mrw-boost)::before {
    display: block !important;
    content: "\00d7" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    color: var(--or-clair) !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
}

/* Carte Leaflet : les contrôles zoom +/-, l'échelle "2 km" et la pop-up de
   détails (horaires/photo) d'un point relais gardent tous un fond blanc
   par défaut, jamais repris jusqu'ici (seul le cadre extérieur .MRW-Map
   avait été bordé d'or). */
#mondialrelay_widget .leaflet-control-zoom:not(#mrw-boost),
#mondialrelay_widget .leaflet-bar:not(#mrw-boost) {
    border: 1px solid var(--or-sombre) !important;
}
#mondialrelay_widget .leaflet-control-zoom a:not(#mrw-boost),
#mondialrelay_widget .leaflet-bar a:not(#mrw-boost) {
    background-color: var(--noir-carte) !important;
    color: var(--or-clair) !important;
    border-color: var(--or-sombre) !important;
}
/* Ligne de séparation grise entre les boutons "+" et "-", codée en dur par
   Leaflet indépendamment du fond des boutons ci-dessus. */
#mondialrelay_widget .leaflet-control-zoom-in:not(#mrw-boost) {
    border-bottom: 1px solid var(--or-sombre) !important;
}
#mondialrelay_widget .leaflet-control-scale-line:not(#mrw-boost) {
    background-color: rgba(26, 26, 26, 0.85) !important;
    color: var(--gris-texte) !important;
    border-color: var(--or-sombre) !important;
}
#mondialrelay_widget .leaflet-popup-content-wrapper:not(#mrw-boost),
#mondialrelay_widget .leaflet-popup-tip:not(#mrw-boost) {
    background-color: var(--noir-carte) !important;
    border: 1px solid var(--or-sombre) !important;
}
#mondialrelay_widget .leaflet-popup-close-button:not(#mrw-boost) {
    color: var(--gris-texte) !important;
}
/* Onglets "Horaires" / "Photo" de la pop-up : fond gris clair d'origine,
   invisible une fois le fond de la pop-up passé en noir-carte. */
#mondialrelay_widget .Tabs-Btn:not(#mrw-boost) {
    background-color: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
}
#mondialrelay_widget .Tabs-Btn-Selected:not(#mrw-boost) {
    background-color: var(--or-sombre) !important;
    color: var(--noir-profond) !important;
    font-weight: 600 !important;
}

/* ".delivery-options" : conteneur générique de PrestaShop qui enveloppe
   toute l'étape "Mode de livraison" (pas spécifique à Mondial Relay) —
   fond blanc du thème resté visible juste au-dessus de la barre de titre
   du widget, jamais ciblé puisque hors du périmètre "mondialrelay". */
.delivery-options:not(#mrw-boost) {
    background-color: var(--noir-profond) !important;
}

/* Filet de sécurité : plusieurs <div id="mondialrelay_..."> imbriqués
   (widget, content, template caché, loader...) peuvent chacun avoir leur
   propre fond blanc hérité du thème. Plutôt que de les cibler un par un,
   on force le fond noir sur tout conteneur dont l'id commence par
   "mondialrelay". */
div[id^="mondialrelay"]:not(#mrw-boost) {
    background-color: var(--noir-profond) !important;
}

/* Colissimo — choix du point retrait (tunnel de commande).
   1) Le module entoure son bloc "Choisissez votre point retrait" d'un cadre
      bleu : on repasse en or rose (seule la COULEUR des bordures/contours est
      changée, rien n'est ajouté là où il n'y en avait pas).
   2) Le logo Colissimo (img/s/7.jpg…) a son texte en gris foncé, invisible
      sur fond noir : inversion de la luminosité avec rotation de teinte, ce
      qui éclaircit le gris et garde l'orange du cube orange (filtre testé). */
body#checkout .carrier-extra-content,
body#checkout .carrier-extra-content * {
    border-color: var(--or-sombre) !important;
    outline-color: var(--or-sombre) !important;
}
body#checkout .carrier-logo img[alt^="Colissimo"],
body#checkout .logo-container img[alt^="Colissimo"] {
    filter: invert(1) hue-rotate(180deg) brightness(1.15) !important;
}

/* Colissimo — coche verte de validation du numéro de téléphone (point
   retrait) : c'est une image PNG verte (icon_valid.png), pas du texte. Le
   filtre ci-dessous la recolore en or rose #C58E7F (valeurs calculées en
   mesurant la couleur obtenue : 196,142,125 pour 197,142,127 visé). */
body#checkout .carrier-extra-content img.colissimo-mobile-valid {
    filter: brightness(0) saturate(100%) invert(60%) sepia(15%) saturate(822%) hue-rotate(328deg) brightness(99%) contrast(90%) !important;
}

/* Colissimo — fenêtre de choix du point retrait : fond et double cadre.
   1) La règle "Reset texte dans modale" (".modal-dialog div { background:
      transparent !important }") est plus précise que celle qui donne un fond
      noir à ".modal-content" : dans cette fenêtre, le contenu devenait
      transparent et laissait voir la page derrière. On force le fond noir
      sur la fenêtre elle-même (sélecteur plus précis, donc prioritaire).
   2) Un des deux cadres imbriqués est supprimé : on garde le cadre or rose
      du contenu du widget, pas celui de l'enveloppe ".modal-content". */
body#checkout .colissimo-front-widget .modal-content {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
    border: 0 !important;
}

/* Colissimo — fenêtre de choix du point retrait, MOBILE : le contenu du
   widget était décalé vers la droite et dépassait de la fenêtre. Cause : la
   règle globale "PADDING GLOBAL" du site met 20px (!important) à
   ".modal-content / .modal-header / .modal-body", en plus de la largeur propre
   du widget. Sur petit écran, on retire cette marge pour cette fenêtre seule
   (le fond noir reste forcé plus haut) et on laisse défiler si nécessaire. */
@media (max-width: 767px) {
    body#checkout .colissimo-front-widget .modal-content,
    body#checkout .colissimo-front-widget .modal-header,
    body#checkout .colissimo-front-widget .modal-body,
    body#checkout .colissimo-front-widget .modal-footer {
        padding: 0 !important;
    }
    body#checkout .colissimo-front-widget .modal-content {
        overflow-x: auto !important;
        max-width: 100% !important;
    }
}

/* Colissimo — carte des points retrait : barre des catégories (Accès PMR,
   Parking, Samedi, Dimanche, Après 19h). Ces boutons sont en gris foncé
   ("widget_colissimo_grise" = état inactif) : illisibles sur fond noir.
   Texte et pictogrammes passés en gris clair de la charte. */
.widget_colissimo_filter_access_type,
.widget_colissimo_filter_access_type span {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    opacity: 1 !important;
}
.widget_colissimo_filter_access_type svg,
.widget_colissimo_filter_access_type svg path,
.widget_colissimo_filter_access_type svg g,
.widget_colissimo_filter_access_type svg rect {
    fill: var(--gris-texte) !important;
    opacity: 1 !important;
}

/* Colissimo — carte des points retrait : logo en haut. Ce logo a un fond noir
   opaque : une inversion de couleurs le rendait blanc. On se contente
   d'éclaircir : le texte gris ressort davantage, le fond reste noir et le
   cube orange reste orange (un peu plus clair). Sélecteurs larges (tout élément
   "logo" du widget), faute de connaître sa classe exacte. */
.colissimo-front-widget img[src*="logo"],
.colissimo-front-widget [class*="logo"] img,
.colissimo-front-widget [class*="logo"] svg,
.colissimo-front-widget [class*="Logo"] img,
.colissimo-front-widget [class*="Logo"] svg,
#lp-map [class*="logo"] img,
#lp-map [class*="logo"] svg {
    filter: brightness(1.6) !important;
}

/* Colissimo — carte des points retrait : repères numérotés (liste et carte).
   Ce sont des "div.lp-marker" dont le fond est l'image bleue marker.png : une
   couleur de fond ne peut pas les changer, on recolore l'image avec un filtre
   (bleu → or rose, valeurs obtenues par calcul sur le bleu du repère) et on
   passe le numéro, qui était blanc, en noir comme sur les boutons du site. */
#lp-map .lp-marker {
    filter: hue-rotate(165deg) saturate(31%) brightness(114%) !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-weight: bold !important;
}

/* Colissimo — carte des points retrait : bulle d'information ouverte au clic
   sur un point (nom, adresse, horaires). Elle avait un fond blanc, alors que
   le texte du site est en gris clair : illisible. On la passe en noir avec un
   cadre or rose, texte gris clair, et on retire les fonds gris des lignes
   d'horaires. Le bouton "Choisir ce point de retrait" garde son style. */
.maplibregl-popup-content {
    background: var(--noir-profond) !important;
    color: var(--gris-texte) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
}
.maplibregl-popup-content *:not(.lp-parcel-point-button) {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
    background: transparent !important;
    border-color: var(--or-sombre) !important;
}
.maplibregl-popup-close-button {
    color: var(--or-base) !important;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--noir-profond) !important;
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--noir-profond) !important;
}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--noir-profond) !important;
}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--noir-profond) !important;
}

/* Colissimo — carte des points retrait : cadre extérieur. Il était blanc et
   large (environ 10px). On le passe en noir, avec un fin liseré or rose, et
   on réduit la marge intérieure à 4px. Si la marge blanche venait d'un autre
   élément que "#lp-map" / "#lp-map-inner", il faudra son code exact. */
#lp-map,
#lp-map-inner {
    background: var(--noir-profond) !important;
    background-color: var(--noir-profond) !important;
}
#lp-map {
    padding: 0 !important;
    border: 1px solid var(--or-sombre) !important;
}
#lp-map-inner {
    padding: 4px !important;
    box-sizing: border-box !important;
}

/* Colissimo — carte des points retrait, MOBILE. La carte et la liste sont
   côte à côte avec des dimensions fixes, ce qui dépasse d'un écran de
   téléphone. Sous 768px : la fenêtre prend la largeur de l'écran, et la carte
   passe AU-DESSUS de la liste (liste défilante dessous), chacune pleine
   largeur. Éléments connus de ce widget : #lp-map > #lp-map-inner >
   #lp-map-container (carte) et #lp-pp-container (liste). */
@media (max-width: 767px) {
    #lp-map {
        left: 2vw !important;
        right: 2vw !important;
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #lp-map-inner {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #lp-map-container {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        height: 260px !important;
        order: 1 !important;
    }
    #lp-pp-container {
        float: none !important;
        width: 100% !important;
        max-height: 300px !important;
        overflow-y: auto !important;
        order: 2 !important;
    }
}

/* Colissimo — carte des points retrait, MOBILE (suite) : la fenêtre a une
   hauteur fixe qui coupait la liste placée sous la carte. On la laisse
   s'adapter à son contenu (92% de l'écran au plus) avec défilement vertical. */
@media (max-width: 767px) {
    #lp-map {
        height: auto !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* Colissimo — lien "Autre point de retrait" (page livraison) mis en évidence :
   mêmes couleurs que les boutons or rose du site (classe ajoutée par
   custom.js, le lien étant généré par le module). */
.kb-lien-autre-relais {
    display: inline-block !important;
    margin: 14px 0 0 !important;
    padding: 6px 14px !important;
    background: var(--degrade-bouton) !important;
    border: 1px solid var(--or-sombre) !important;
    border-radius: 4px !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.kb-lien-autre-relais:hover {
    filter: brightness(1.1);
}

/* Colissimo — carte des points retrait : la mention de copyright (bande
   blanche "MapLibre | © Boxtal © OpenMapTiles © OpenStreetMap contributors")
   passait par-dessus la bulle d'information. On place la bulle au-dessus et on
   donne à la mention un fond sombre, en gris clair, comme le reste de la
   carte. La mention reste affichée : elle est obligatoire (licence des
   données de la carte). */
.maplibregl-popup {
    z-index: 5 !important;
}
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left {
    z-index: 2 !important;
}
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib.maplibregl-compact {
    background: rgba(10, 10, 10, 0.75) !important;
}
.maplibregl-ctrl-attrib a,
.maplibregl-ctrl-attrib-inner,
.maplibregl-ctrl-attrib-inner * {
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}

/* Colissimo — bloc "Choisissez votre point retrait" (page livraison) : son
   cadre faisait environ 3px, trop épais. On le ramène à 1px, comme les autres
   cadres du site. Seule l'épaisseur est réglée : les éléments sans bordure
   n'en reçoivent pas (la largeur ne compte que si une bordure existe). */
body#checkout .carrier-extra-content,
body#checkout .carrier-extra-content * {
    border-width: 1px !important;
}

/* Colissimo — cadre du point retrait choisi : élément identifié
   (article#colissimo-pickup-point-address-selected). Liseré fin 1px or rose. */
body#checkout #colissimo-pickup-point-address-selected,
#colissimo-pickup-point-address-selected {
    border-width: 1px !important;
    border-color: var(--or-sombre) !important;
}

/* Colissimo — carte des points retrait : croix de fermeture ("lp-close").
   C'était un rond blanc ; on la passe en rond or rose (dégradé des boutons du
   site) avec une croix noire. On garde les dimensions et la position prévues
   par le widget, seul l'habillage change. */
#lp-map .lp-close {
    background-image: none !important;
    background: var(--degrade-bouton) !important;
    border: 2px solid var(--or-sombre) !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#lp-map .lp-close::after {
    content: "\00d7" !important;
    color: var(--noir-profond) !important;
    -webkit-text-fill-color: var(--noir-profond) !important;
    font: 700 28px/1 'Marcellus', Georgia, serif !important;
}

/* Mode catalogue, mobile : le panier est vidé (plus de bouton "Ajouter au
   panier"), mais l'icône "Mon compte" gardait sa marge négative de -26px, qui
   sert à la coller contre le panier. Sans panier, elle sortait donc du bord
   droit de l'écran. On retire cette marge quand le panier est vide. */
@media (max-width: 767px) {
    #mobile-account-icon:has(+ #_mobile_cart:empty) {
        margin-right: 0 !important;
    }
}

/* Menu des catégories sur mobile (Notre histoire, Martinique, Réunion,
   Guadeloupe) : avec 4 liens à 1.3rem (20.8px), le total (403px) dépassait
   un écran de 375px — le menu avait donc été aligné à gauche avec défilement.
   On adapte la taille des lettres à la largeur de l'écran pour que les 4 liens
   tiennent sur une ligne, et on les recentre. "safe center" recentre quand
   ça tient et retombe sur un alignement à gauche (avec défilement) quand ça
   ne tient pas, sans couper le début du menu comme le faisait "center". */
@media (max-width: 767px) {
    div#mobile-menu-clone ul#top-menu-mobile {
        justify-content: safe center !important;
    }
    div#mobile-menu-clone ul#top-menu-mobile > li > a,
    div#mobile-menu-clone ul#top-menu-mobile > li.current > a,
    div#mobile-menu-clone ul#top-menu-mobile > li.active > a,
    div#mobile-menu-clone ul#top-menu-mobile > li:last-child > a {
        font-size: min(1.3rem, calc((100vw - 24px) / 20.5)) !important;
    }
}

/* Bandeau en haut — TEMPORAIRE, pendant le teasing ("Ouverture de la boutique
   prochainement") : phrase très grosse et en gras pour qu'elle saute aux yeux.
   La classe "header-banner-teasing" est ajoutée par custom.js uniquement
   quand TEASING = true : à l'ouverture, ce bloc n'a plus d'effet et le
   bandeau retrouve sa taille normale. */
.header-banner.header-banner-teasing {
    height: 84px !important;
    padding: 20px 15px !important;
}
.header-banner.header-banner-teasing .header-banner-item {
    font-size: min(32px, 3.2vw) !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    line-height: 1.5 !important;
}
.header-banner.header-banner-teasing .header-banner-or {
    font-weight: 800 !important;
    line-height: 1.5 !important;
    padding: 2px 0 8px !important;
}
.header-banner.header-banner-teasing .header-banner-orne {
    width: 44px !important;
    height: 44px !important;
}
/* Mobile : la phrase passe sur 2 lignes (plus grosse que sur une seule) */
@media (max-width: 767px) {
    .header-banner.header-banner-teasing {
        height: 76px !important;
        padding: 6px 6px !important;
    }
    .header-banner.header-banner-teasing .header-banner-item {
        font-size: min(20px, 5.3vw) !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        left: 4px !important;
        right: 4px !important;
    }
    .header-banner.header-banner-teasing .header-banner-orne {
        width: 22px !important;
        height: 22px !important;
        margin: 0 1px !important;
    }
}

/* Bandeau du teasing — EFFET (temporaire, comme le bloc ci-dessus : actif
   seulement tant que custom.js pose la classe "header-banner-teasing").
   "PROCHAINEMENT" : un reflet de lumière traverse le mot en boucle. Les halos
   (lueur de la phrase, colibris) ont été retirés à la demande. L effet reste
   actif même si l appareil demande moins d animations (choix du site pour ce
   bandeau temporaire). */
@keyframes kb-reflet-teasing {
    0%   { background-position: 130% 0; }
    100% { background-position: -130% 0; }
}
.header-banner.header-banner-teasing .header-banner-or {
    background: linear-gradient(100deg, #B37D6D 0%, #C58E7F 38%, #FFF3EC 50%, #C58E7F 62%, #B37D6D 100%) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: kb-reflet-teasing 3.2s linear infinite !important;
}

/* Bandeau du teasing — POLICE et PULSATION (temporaire, même condition que
   les blocs ci-dessus). Police : Marcellus (celle de tout le site), en
   capitales et en gras, avec un espacement de lettres réduit (1,5px).
   Pulsation : toute la phrase grossit et rétrécit doucement (propriété
   "scale", distincte de "transform" que le bandeau utilise déjà pour se
   centrer). */
@keyframes kb-pulsation-teasing {
    0%, 100% { scale: 1; }
    50%      { scale: 1.06; }
}
.header-banner.header-banner-teasing {
    height: 84px !important;
    padding: 20px 15px !important;
}
.header-banner.header-banner-teasing .header-banner-item {
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: min(36px, 3.5vw) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1.5 !important;
    animation: kb-pulsation-teasing 2.2s ease-in-out infinite !important;
}
.header-banner.header-banner-teasing .header-banner-or {
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}
@media (max-width: 767px) {
    .header-banner.header-banner-teasing {
        height: 76px !important;
        padding: 6px 6px !important;
    }
    .header-banner.header-banner-teasing .header-banner-item {
        font-size: min(21px, 5.6vw) !important;
        letter-spacing: 0 !important;
        line-height: 1.3 !important;
    }
    .header-banner.header-banner-teasing .header-banner-or {
        letter-spacing: 0 !important;
    }
}

/* Bandeau du teasing — BRILLANCE DU CONTOUR (temporaire, même condition).
   custom.js enveloppe la phrase dans ".kb-texte" et copie son texte dans
   "data-texte". Une copie transparente de la phrase, posée exactement
   dessus (::after), reçoit un reflet blanc qui la traverse de gauche à
   droite : comme son contour de 1,5px est transparent, le reflet s'applique
   aux lettres ET à leur pourtour, qui scintille. Sur mobile, la phrase passe
   sur deux lignes : cet effet est désactivé (le reflet de "prochainement"
   reste). La graisse est la même partout pour que la copie se superpose sans
   décalage. */
@keyframes kb-contour-teasing {
    0%   { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}
.header-banner.header-banner-teasing .header-banner-or {
    font-weight: 700 !important;
    padding: 0 !important;
}
.kb-texte {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.header-banner.header-banner-teasing .kb-texte::after {
    content: attr(data-texte);
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    pointer-events: none;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.5px transparent;
    background: linear-gradient(100deg, transparent 0%, transparent 38%, #FFFFFF 50%, transparent 62%, transparent 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: kb-contour-teasing 2.6s linear infinite;
}
@media (max-width: 767px) {
    .kb-texte {
        display: inline;
        white-space: normal;
    }
    .header-banner.header-banner-teasing .kb-texte::after {
        display: none;
    }
}

/* Notre histoire — MOBILE : texte un peu plus petit (17px → 15px pour le
   texte courant), phrases en or rose et prénoms réduits dans les mêmes
   proportions. Seule cette page est concernée. */
@media (max-width: 767px) {
    body.category-id-13 #category-description p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
    }
    body.category-id-13 #category-description .or-lead {
        font-size: 16px !important;
    }
    body.category-id-13 #category-description .or-accent {
        font-size: 16px !important;
    }
    body.category-id-13 #category-description p:last-child {
        margin-bottom: 0 !important;
    }
}

/* Bracelets et Accessoires — MOBILE : mêmes réglages que "Notre histoire"
   (texte courant 15px, phrases et mots en or rose 16px, interligne 1,5,
   14px entre les paragraphes), pour harmoniser les trois pages. Le titre
   principal "COLLECTION MADININA SPIRIT" passe à 17px et la phrase en créole
   à 19px (elle reste un cran au-dessus du reste). */
@media (max-width: 767px) {
    body.category-id-4 #category-description p,
    body.category-id-5 .category-additional-description p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
    }
    body.category-id-4 #category-description .or-lead,
    body.category-id-4 #category-description .or-titre,
    body.category-id-4 #category-description .or-accent,
    body.category-id-5 .category-additional-description .or-lead,
    body.category-id-5 .category-additional-description .or-titre,
    body.category-id-5 .category-additional-description .or-accent {
        font-size: 16px !important;
    }
    body.category-id-4 #category-description .or-titre.titre-collection-mobile {
        font-size: 17px !important;
    }
    body.category-id-4 #category-description p.or-devise,
    body.category-id-5 .category-additional-description p.or-devise {
        font-size: 19px !important;
    }
    body.category-id-4 #category-description p:last-child,
    body.category-id-5 .category-additional-description p:last-child {
        margin-bottom: 0 !important;
    }
}

/* Notre histoire — les deux phrases d'introduction en GRIS ("Kréyòl Bijoux est
   née… profonde :" et "Deux parcours… projet :") ont la même taille que les
   phrases en or rose (".or-lead" : 22px sur ordinateur, 16px sur mobile),
   centrées comme elles, couleur du texte courant. Classe "lead-gris" à mettre sur
   le <p> dans le code de la description. */
body.category-id-13 #category-description p.lead-gris {
    font-size: 22px !important;
    text-align: center !important;
    font-weight: bold !important;
    margin-bottom: 2px !important;
    line-height: 1.35 !important;
}
@media (max-width: 767px) {
    body.category-id-13 #category-description p.lead-gris {
        font-size: 16px !important;
    }
}

/* Notre histoire — phrases d'introduction : interligne resserré (1,35) pour
   les phrases en or rose comme pour les phrases en gris, et 2px seulement sous
   la phrase grise, pour que les deux phrases d'une même idée se suivent de
   près (l'espace faisait environ 33px avec l'interligne de 1,7). */
body.category-id-13 #category-description p.or-lead {
    line-height: 1.35 !important;
}
@media (max-width: 767px) {
    body.category-id-13 #category-description p.lead-gris {
        margin-bottom: 2px !important;
        line-height: 1.35 !important;
    }
}

/* Bracelets — "Ce bracelet est né d'une ambition simple :" en GRIS (couleur du
   texte courant), même taille et même graisse que la phrase en or rose qui
   suit ("Devenir l'emblème ultime de la Martinique."). Classe "or-lead-gris"
   posée sur un <span> dans le code de la description. */
body.category-id-4 #category-description .or-lead-gris {
    display: inline-block !important;
    font-size: 1.4em !important;
    font-weight: bold !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}
@media (max-width: 767px) {
    body.category-id-4 #category-description .or-lead-gris {
        font-size: 16px !important;
    }
}

/* Menu des catégories sur mobile — GRAND, avec DÉFILEMENT : lettres de 24px,
   14px d'espace entre deux liens, sans espacement des lettres. Les 4 liens
   (Notre histoire, Martinique, Réunion, Guadeloupe) ne tiennent plus tous sur
   un écran de téléphone : le menu défile alors horizontalement (barre masquée,
   début du menu visible). "safe center" : centré quand ça tient (tablette),
   aligné au début avec défilement sinon. */
@media (max-width: 767px) {
    div#mobile-menu-clone ul#top-menu-mobile {
        flex-wrap: nowrap !important;
        justify-content: safe center !important;
        overflow-x: auto !important;
        padding: 4px 4px !important;
    }
    div#mobile-menu-clone ul#top-menu-mobile > li {
        flex: 0 0 auto !important;
    }
    div#mobile-menu-clone ul#top-menu-mobile > li > a,
    div#mobile-menu-clone ul#top-menu-mobile > li.current > a,
    div#mobile-menu-clone ul#top-menu-mobile > li.active > a,
    div#mobile-menu-clone ul#top-menu-mobile > li:last-child > a {
        font-size: 1.5rem !important;
        letter-spacing: 0 !important;
        padding: 6px 7px !important;
        width: auto !important;
        text-align: center !important;
    }
}

/* Bracelets, MOBILE — phrase d'introduction : (1) "Ce bracelet est né d'une
   ambition simple :" était en "inline-block", qui ne s'enroule pas autour de
   l'image flottante du badge Martinique (il se poussait en dessous, pleine
   largeur) : on le repasse en "inline", comme la phrase en or rose, pour que
   le texte épouse l'image ; (2) le saut de ligne qui suit "simple :" était
   réservé à l'ordinateur : on l'affiche aussi sur mobile, pour que "Devenir
   l'emblème ultime de la Martinique." démarre sur sa propre ligne. */
@media (max-width: 767px) {
    body.category-id-4 #category-description .or-lead-gris {
        display: inline !important;
    }
    body.category-id-4 #category-description .saut-ligne-desktop-uniquement {
        display: inline !important;
    }
}

/* Pages catégories — interligne resserré sur ORDINATEUR (1,7 → 1,5), comme
   sur mobile. Les phrases d'introduction en gros (".or-lead", ".lead-gris")
   gardent leur propre interligne de 1,35, défini plus haut avec un sélecteur
   plus précis. */
@media (min-width: 768px) {
    #category-description p,
    .category-additional-description p {
        line-height: 1.5 !important;
    }
}

/* HARMONISATION des tailles de titres sur ORDINATEUR, pour les trois pages
   (Notre histoire, Bracelets, Accessoires). Mesuré avant : phrases en gros 22px
   (Notre histoire) contre 23,8px (Bracelets, Accessoires), mots en or rose
   19px contre 19,55px. Valeurs communes maintenant : phrases d'introduction,
   sous-titres et phrase en créole 24px ; mots en or rose dans le texte 20px ;
   titre principal "COLLECTION MADININA SPIRIT" 24px, comme les phrases d introduction. Sur mobile, les valeurs
   étaient déjà communes (16px / 16px / 17px / 19px). */
@media (min-width: 768px) {
    body.category-id-13 #category-description .or-lead,
    body.category-id-13 #category-description p.lead-gris,
    body.category-id-4 #category-description .or-lead,
    body.category-id-4 #category-description .or-lead-gris,
    body.category-id-4 #category-description .or-titre,
    body.category-id-4 #category-description p.or-devise,
    body.category-id-5 .category-additional-description .or-lead,
    body.category-id-5 .category-additional-description .or-titre,
    body.category-id-5 .category-additional-description p.or-devise {
        font-size: 24px !important;
    }
    body.category-id-4 #category-description .or-titre.titre-collection-mobile {
        font-size: 24px !important;
    }
    body.category-id-13 #category-description .or-accent,
    body.category-id-4 #category-description .or-accent,
    body.category-id-5 .category-additional-description .or-accent {
        font-size: 20px !important;
    }
}

/* Notre histoire — mots en or rose dans le texte justifié ("Yannick",
   "Céline") : ils étaient en "inline-block", un bloc rigide que la
   justification n'étire pas comme du texte ; l'espace juste avant eux se
   retrouvait démesuré. On les repasse en "inline", comme sur Bracelets et
   Accessoires, pour qu'ils s'intègrent normalement dans la ligne. */
body.category-id-13 #category-description .or-accent {
    display: inline !important;
}

/* Menu "Martinique" — rendre le sous-menu (Bracelets, Accessoires) plus
   intuitif, sur ordinateur et sur mobile :
   1) une petite flèche ▾ SOUS le mot "Martinique" indique qu'il se déplie ;
   2) sur mobile, les deux choix du sous-menu ressemblent à de vrais boutons
      (cadre or rose, fond sombre) au lieu de simple texte gris. */
#top-menu > li#category-3 > a,
div#mobile-menu-clone ul#top-menu-mobile > li#category-3 > a {
    position: relative !important;
}
/* flèche ▾ placée SOUS le mot "Martinique", centrée */
#top-menu > li#category-3 > a::after,
div#mobile-menu-clone ul#top-menu-mobile > li#category-3 > a::after {
    content: "\25BE";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    color: var(--or-base);
    -webkit-text-fill-color: var(--or-base);
    background: none;
}
/* Sous-menu de Martinique : il reste SOUS le mot "Martinique", sans décaler la
   page (il se superpose, comme un menu déroulant). Simples textes, pas de
   boutons ; la page en cours est en or rose, en gras et soulignée. */
@media (max-width: 991px) {
    #mobile-martinique-dropdown {
        transform: none !important;
    }
    #mobile-martinique-dropdown.open {
        gap: 22px !important;
    }
    #mobile-martinique-dropdown a {
        padding: 4px 0 !important;
        font-size: 16px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: var(--gris-texte) !important;
    }
    body.category-id-4 #mobile-martinique-dropdown li:nth-child(1) a,
    body.category-id-5 #mobile-martinique-dropdown li:nth-child(2) a {
        color: var(--or-base) !important;
        -webkit-text-fill-color: var(--or-base) !important;
        font-weight: bold !important;
        text-decoration: underline !important;
        text-underline-offset: 4px !important;
    }
}
@media (min-width: 992px) {
    body.category-id-4 #top-menu #category-4 > a,
    body.category-id-5 #top-menu #category-5 > a {
        color: var(--or-base) !important;
        -webkit-text-fill-color: var(--or-base) !important;
        font-weight: bold !important;
        text-decoration: underline !important;
        text-underline-offset: 4px !important;
    }
}

/* Mobile : la flèche ▾ sous "Martinique" tient dans la marge basse du lien
   (6px) — plus de marge ajoutée sous ce lien seul : elle le faisait remonter
   par rapport aux trois autres titres du menu. */
@media (max-width: 991px) {
    div#mobile-menu-clone ul#top-menu-mobile > li#category-3 > a::after {
        font-size: 11px;
        bottom: -1px;
    }
}

/* Sous-menu de Martinique CENTRÉ sous le mot "Martinique" (mobile : custom.js
   place le milieu du sous-menu sous le milieu du mot, la translation de -50%
   le recentre). La page en cours reste en or rose. */
@media (max-width: 991px) {
    #mobile-martinique-dropdown {
        transform: translateX(-50%) !important;
    }
}

/* Sous-menu de Martinique centré sous le mot, version ORDINATEUR : le
   sous-menu natif ("popover") était calé à gauche du lien avec une marge de
   15px ; on le centre sur le lien (largeur ajustée à son contenu). */
@media (min-width: 992px) {
    #top-menu > li#category-3 > .sub-menu {
        left: 50% !important;
        right: auto !important;
        margin-left: 0 !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        min-width: 0 !important;
    }
}

/* MOBILE : les titres du menu remontent de 8px (sans décaler la suite de la
   page : simple déplacement visuel) pour que le sous-menu de Martinique,
   qui s'affiche juste sous le mot, empiète moins sur le carrousel en dessous.
   Remontée limitée à 8px : à 14px, le haut des grandes lettres du menu
   se retrouvait rogné ("mangé") contre le bas du logo. */
@media (max-width: 767px) {
    #mobile-menu-clone {
        position: relative !important;
        top: -8px !important;
    }
    #mobile-martinique-dropdown a {
        font-size: 14px !important;
        padding: 2px 0 !important;
        line-height: 1.2 !important;
    }
}

/* Sous-catégorie sélectionnée dans le sous-menu de Martinique : or rose en
   DÉGRADÉ (celui des titres du site) au lieu d'un or rose uni, toujours en
   gras et soulignée. Ordinateur : lien du sous-menu natif ; mobile : lien du
   petit menu qui s'ouvre sous "Martinique". */
body.category-id-4 #mobile-martinique-dropdown li:nth-child(1) a,
body.category-id-5 #mobile-martinique-dropdown li:nth-child(2) a {
    background: var(--degrade-or) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--or-base) !important;
    text-decoration-color: var(--or-base) !important;
}
@media (min-width: 992px) {
    body.category-id-4 #top-menu #category-4 > a,
    body.category-id-5 #top-menu #category-5 > a {
        background: var(--degrade-or) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: var(--or-base) !important;
        text-decoration-color: var(--or-base) !important;
    }
}

/* MOBILE — sous-catégories de Martinique AU-DESSUS du trait du bas de l'en-
   tête : elles chevauchaient ce trait (il passait au milieu des mots). Le
   sous-menu démarre 8px plus haut (custom.js), à l'endroit où la petite
   flèche ▾ se trouve entre les deux mots, et le trait est descendu de 5px
   (décalage minime du reste de la page) pour que le sous-menu tienne dessus. */
@media (max-width: 767px) {
    #header .header-top {
        margin-top: 5px !important;
    }
}

/* Sous-menu mobile de Martinique : les deux choix ont la MÊME largeur, de
   sorte que l'espace qui les sépare tombe exactement au centre — pile sous la
   flèche ▾ du mot "Martinique". Avec des largeurs inégales ("Bracelets" est
   plus court que "Accessoires"), le milieu de l'ensemble tombait contre l'un
   des deux mots et la flèche semblait collée à lui. */
@media (max-width: 991px) {
    #mobile-martinique-dropdown.open {
        gap: 20px !important;
    }
    #mobile-martinique-dropdown li {
        flex: 0 0 92px !important;
        width: 92px !important;
        text-align: center !important;
    }
}

/* Réglage fin : "Bracelets" collé à droite de sa case, "Accessoires" collé à
   gauche de la sienne, avec 22px entre les deux : l'espace entre les mots
   est ainsi exactement centré sous la flèche ▾, même si les deux mots n'ont
   pas la même longueur. */
@media (max-width: 991px) {
    #mobile-martinique-dropdown.open {
        gap: 22px !important;
    }
    #mobile-martinique-dropdown li:first-child {
        text-align: right !important;
    }
    #mobile-martinique-dropdown li:last-child {
        text-align: left !important;
    }
}

/* Bandeau teasing mobile : le texte (sur 2 lignes) est centré seul ;
   les colibris sont sortis du flux et posés sur les bords pour ne plus décaler le centrage */
@media (max-width: 767px) {
  .header-banner.header-banner-teasing .header-banner-item { padding: 0 34px !important; box-sizing: border-box !important; }
  .header-banner.header-banner-teasing .header-banner-orne { position: absolute !important; top: 50% !important; margin: 0 !important; width: 24px !important; height: 24px !important; }
  .header-banner.header-banner-teasing .header-banner-orne:not(.header-banner-orne-droite) { left: max(2px, calc(50% - min(151px, 40.3vw) - 28px)) !important; right: auto !important; transform: translateY(-50%) !important; }
  .header-banner.header-banner-teasing .header-banner-orne-droite { right: max(2px, calc(50% - min(151px, 40.3vw) - 28px)) !important; left: auto !important; transform: translateY(-50%) scaleX(-1) !important; }
}

/* Descriptifs produit : alinéa en début des paragraphes de texte (pas sur
   l'accroche .or-lead, les sous-titres .or-titre, la phrase en créole ni le
   dernier paragraphe). Phrase en créole (<em> seul) centrée ; paragraphe
   contenant un lien (tutoriel de nouage) aligné à gauche : le lien insécable
   étirait sinon les espaces de la ligne qui le précède. */
.page-product #description .product-description p:not(:has(> .or-lead, > .or-titre, > em:only-child, > br)):not(:last-child) {
    text-indent: 1.5em !important;
}
.page-product #description .product-description p:has(> em:only-child) {
    text-align: center !important;
}
.page-product #description .product-description p:has(a) {
    text-align: left !important;
}

/* Descriptifs produit : accroche (.or-lead) et sous-titres (.or-titre) en or rose centrés */
.page-product #description .product-description p:has(> .or-lead, > .or-titre) {
    text-align: center !important;
}
.page-product #description .product-description .or-lead,
.page-product #description .product-description .or-titre {
    text-align: center !important;
}

/* Descriptifs produit : ligne du lien tutoriel (👉 + lien, insécable) sur sa
   propre ligne, centrée et un peu descendue (seulement quand le lien est
   seul en fin de paragraphe, repéré par son font-size en ligne — pas quand il
   est au milieu d'une phrase, ex. lot de cordons) ; dernier paragraphe centré */
.page-product #description .product-description p > span[style*="nowrap"]:has(> a[style*="font-size"]) {
    display: block !important;
    text-align: center !important;
    text-indent: 0 !important;
    margin-top: 12px !important;
}
.page-product #description .product-description p:last-child {
    text-align: center !important;
}

/* Descriptifs produit : le dégradé (background-clip:text) coupait le bas des
   lettres (g, q, p) de l'accroche et des sous-titres — interligne et marge
   basse suffisantes pour que le dégradé couvre toute la hauteur des lettres */
.page-product #description .product-description .or-lead,
.page-product #description .product-description .or-titre {
    line-height: 1.5 !important;
    padding-bottom: 4px !important;
}

/* Descriptifs produit mobile : phrase en créole un peu réduite pour tenir sur
   une ligne (le « de fin passait seul à la ligne) ; text-wrap:balance en
   secours si l'écran est vraiment étroit (répartit les lignes, plus d'orphelin) */
.page-product #description .product-description p:has(> em:only-child) {
    text-wrap: balance;
}
@media (max-width: 767px) {
    .page-product #description .product-description p > em:only-child {
        font-size: min(18px, 5.2vw) !important;
    }
}

/* Fiche produit mobile : le titre (ex. MADININA SPIRIT) collait la galerie de
   miniatures juste au-dessus — on le descend un peu */
@media (max-width: 767px) {
    .page-product .product-information-header h1.h1,
    .page-product h1.h1 {
        margin-top: 16px !important;
    }
}

/* Lot de 3 cordons : l'accroche (avec un <br> avant « Madinina Spirit »)
   passait sur 3 lignes (mobile ET ordinateur) — saut de ligne neutralisé et
   lignes équilibrées pour tenir sur 2 lignes ; sur mobile, taille réduite en plus */
body.product-id-20.page-product #description .product-description .or-lead br {
    display: none !important;
}
body.product-id-20.page-product #description .product-description p:has(> .or-lead) {
    text-wrap: balance;
}
@media (max-width: 767px) {
    body.product-id-20.page-product #description .product-description .or-lead {
        font-size: 16px !important;
    }
}

/* Descriptifs produit : .or-accent (ex. « Kréyòl Bijoux ») est un inline-block,
   ce que la justification traite comme un bloc insécable — grand espace avant
   le mot en fin de ligne. En inline, il suit le texte normalement. */
.page-product #description .product-description .or-accent {
    display: inline !important;
}

/* Lot de 3 cordons mobile : phrase en créole plus longue que celle de
   Madinina Spirit — taille calculée sur la largeur de l'écran (texte ≈ 18,6 ×
   la taille de police ; colonne ≈ largeur d écran − 75 px, marge de sécurité 10 px) pour tenir sur une ligne */
@media (max-width: 767px) {
    body.product-id-20.page-product #description .product-description p > em:only-child {
        font-size: min(17px, calc((100vw - 77px) / 17.8)) !important;
        white-space: nowrap !important;
    }
}

/* Lot de 3 cordons : lien « tutoriel détaillé » à la même taille (1.15em) que
   « Découvrir le tutoriel de nouage » de la fiche Madinina Spirit */
body.product-id-20.page-product #description .product-description a.or-accent {
    font-size: 1.15em !important;
}

/* Phrase en créole des catégories Bracelets / Accessoires sur mobile : avec les
   guillemets elle faisait ≈ 16,5 × la taille de police (312 px à 19 px) pour une
   colonne de ≈ 311 px → passait sur 2 lignes. Taille calculée sur la largeur
   d'écran (colonne ≈ écran − 64 px, marge 8 px) et plafonnée à 18 px, sans
   retour à la ligne. */
@media (max-width: 767px) {
    body.category-id-4 #category-description p.or-devise,
    body.category-id-5 .category-additional-description p.or-devise {
        font-size: min(18px, calc((100vw - 72px) / 16.5)) !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   PAGE « CONSEILS D'ENTRETIEN » (CMS id 7) — l'infographie (1024 px) était
   calée à gauche, les textes dessous couraient sur toute la largeur (1110 px).
   Colonne limitée à la largeur de l'infographie et centrée ; image centrée ;
   sous-titres roses centrés (l'intro en gras reste justifiée) ; listes
   (tirets + <br>) laissées alignées à gauche ; interligne 1.5 comme ailleurs.
   ========================================================================== */
body.cms-id-7 .page-content.page-cms-7 {
    max-width: 1064px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.cms-id-7 #content.page-cms-7 > p:first-child {
    text-align: center !important;
}
body.cms-id-7 #content.page-cms-7 > p:first-child img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
}
body.cms-id-7 #content.page-cms-7 p {
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
}
body.cms-id-7 #content.page-cms-7 .or-titre {
    font-size: 20px !important;
    line-height: 1.5 !important;
    padding-bottom: 4px !important;
    text-align: center !important;
}
body.cms-id-7 #content.page-cms-7 p:has(> br) {
    text-align: left !important;
}
@media (max-width: 767px) {
    body.cms-id-7 #content.page-cms-7 .or-titre { font-size: 18px !important; }
}

/* ==========================================================================
   PAGE « TUTORIEL » (CMS id 8) — page courte autour d'une vidéo centrée :
   titre rose et phrases d'intro / de fin centrés au-dessus et au-dessous,
   titre à 24 px comme les titres des pages catégories (20 px sur mobile),
   interligne 1.5, liens .or-accent en ligne (pas d'espace étiré).
   ========================================================================== */
body.cms-id-8 #content.page-cms-8 p {
    text-align: center !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
}
body.cms-id-8 #content.page-cms-8 .or-lead {
    font-size: 24px !important;
    line-height: 1.5 !important;
    padding-bottom: 4px !important;
}
body.cms-id-8 #content.page-cms-8 .or-accent {
    display: inline !important;
}
body.cms-id-8 #content.page-cms-8 .video-thumb-wrap {
    margin: 18px 0 !important;
}
@media (max-width: 767px) {
    body.cms-id-8 #content.page-cms-8 .or-lead { font-size: 20px !important; }
}

/* Page « Conditions de livraison/retour » (CMS id 1) : les liens sont des
   inline-block, ce que la justification traite comme un bloc insécable — sur
   mobile, la phrase « Le formulaire type de rétractation… » (lien vers les CGV)
   avait un espace de 89 px entre deux mots. En inline, le lien suit le texte. */
body.cms-id-1 .page-cms-1 p a {
    display: inline !important;
}

/* Page « Mentions légales » (CMS id 2), mobile uniquement : lignes courtes
   (adresses, numéros) que la justification étirait (40 px d'espace dans
   « N° TVA intracommunautaire : FR63… ») → alignées à gauche ; espacement
   vertical entre les lignes réduit (16 px → 8 px) pour lire l'ensemble comme
   une fiche. */
@media (max-width: 767px) {
    body.cms-id-2 #content.page-cms-2 p {
        text-align: left !important;
        margin-bottom: 8px !important;
    }
}

/* Page « Politique de confidentialité » (CMS id 4), mobile uniquement : la
   justification créait des espaces de 22 à 40 px entre deux mots, surtout dans
   les listes (puces) et les phrases contenant une adresse e-mail ou un lien
   insécable → ces blocs sont alignés à gauche ; les paragraphes de texte
   courant restent justifiés (espace max ≈ 25 px). */
@media (max-width: 767px) {
    body.cms-id-4 #content.page-cms-4 p:has(a),
    body.cms-id-4 #content.page-cms-4 li,
    body.cms-id-4 #content.page-cms-4 ul {
        text-align: left !important;
    }
}

/* Page « Politique de confidentialité » (CMS id 4), mobile : puces « dehors »
   avec retrait — les lignes suivantes d'un point de liste s'alignent sur le
   début du texte et non sous la puce. */
@media (max-width: 767px) {
    body.cms-id-4 #content.page-cms-4 ul {
        list-style-position: outside !important;
        padding-left: 1.2em !important;
    }
}

/* Page « Paiement sécurisé » (CMS id 5), ordinateur : le bandeau de logos
   s'affichait à 532 × 300 px (la règle du thème « .page-cms #content img
   {height:auto} » passait devant « .payment-logos img {height:140px} ») →
   ramené à 320 px de large (≈ 181 px de haut). Mobile inchangé. */
@media (min-width: 768px) {
    body.cms-id-5 #content.page-cms-5 .payment-logos img {
        width: 320px !important;
        height: auto !important;
    }
}

/* Page « Conditions générales de vente » (CMS id 3), mobile uniquement : même
   traitement que la politique de confidentialité — blocs avec lien / adresse
   e-mail et listes alignés à gauche (la justification créait jusqu'à 69 px
   entre deux mots), puces « dehors » avec retrait pour que les lignes
   suivantes s'alignent sur le texte. Le texte courant reste justifié. */
@media (max-width: 767px) {
    body.cms-id-3 #content.page-cms-3 p:has(a),
    body.cms-id-3 #content.page-cms-3 li,
    body.cms-id-3 #content.page-cms-3 ul {
        text-align: left !important;
    }
    body.cms-id-3 #content.page-cms-3 ul {
        list-style-position: outside !important;
        padding-left: 1.2em !important;
    }
}

/* Page « Politique de cookies » (CMS id 6), mobile : mêmes réglages que la
   politique de confidentialité — blocs avec lien et listes alignés à gauche,
   puces « dehors » avec retrait (lignes suivantes alignées sur le texte). */
@media (max-width: 767px) {
    body.cms-id-6 #content.page-cms-6 p:has(a),
    body.cms-id-6 #content.page-cms-6 li,
    body.cms-id-6 #content.page-cms-6 ul {
        text-align: left !important;
    }
    body.cms-id-6 #content.page-cms-6 ul {
        list-style-position: outside !important;
        padding-left: 1.2em !important;
    }
}

/* Page « Contactez-nous » : l'adresse postale (bloc d'infos du module
   coordonnées) n'est pas affichée, ni sur ordinateur ni sur mobile ; il ne
   reste que l'e-mail — le séparateur qui suivait l'adresse est masqué aussi. */
body.page-contact .contact-rich > .block:first-of-type,
body.page-contact .contact-rich > hr {
    display: none !important;
}

/* Page « Contactez-nous » : zone de message agrandie (78 px → 180 px sur
   ordinateur, 150 px sur mobile), redimensionnable en hauteur par le visiteur. */
body.page-contact form textarea[name="message"] {
    min-height: 180px !important;
    height: 180px !important;
    resize: vertical !important;
}
@media (max-width: 767px) {
    body.page-contact form textarea[name="message"] {
        min-height: 150px !important;
        height: 150px !important;
    }
}

/* Pages « Connexion » et « Inscription » : les liens croisés (« Pas de compte ?
   Créez-en un » / « Connectez-vous ! ») étaient en gris comme le texte
   courant, rien n'indiquait qu'on pouvait cliquer. Or rose, gras, souligné ;
   plus clair au survol. */
body#authentication .no-account a,
body#registration #content p > a[href*="controller=authentication"] {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    text-decoration-color: var(--or-base) !important;
    text-underline-offset: 3px !important;
}
body#authentication .no-account a:hover,
body#registration #content p > a[href*="controller=authentication"]:hover {
    color: var(--or-clair) !important;
    -webkit-text-fill-color: var(--or-clair) !important;
    text-decoration-color: var(--or-clair) !important;
}

/* Module « Fonction de rétractation » : lien « Se rétracter du contrat ici » dans
   la colonne « Votre compte » du pied de page (aucun style propre) ; page de
   formulaire et récapitulatif alignés sur le reste du site. */
/* La page est déjà dans un cadre (celui du thème) : messages et récapitulatif
   sans cadre ni trait : seul le texte, avec des touches de rose. */
.kb-retractation .alert {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}
.kb-retractation .alert p,
.kb-retractation .alert ul {
    margin-bottom: 6px !important;
}
.kb-retractation .kb-recap {
    list-style: none !important;
    padding: 0 !important;
    border: 0 !important;
    margin-bottom: 16px !important;
}
.kb-retractation .kb-recap li {
    text-align: left !important;
    margin-bottom: 6px;
}
/* Touches de rose : message de confirmation, étiquettes du récapitulatif,
   adresse e-mail de l'accusé de réception. */
.kb-retractation .alert strong,
.kb-retractation .kb-recap strong,
.kb-retractation > p strong {
    color: var(--or-base) !important;
    -webkit-text-fill-color: var(--or-base) !important;
}
.kb-retractation .alert strong {
    font-size: 1.15em;
}
/* Boutons « Confirmer la rétractation » / « Modifier » : côte à côte avec un
   espace sur ordinateur ; sur mobile, l'un sous l'autre, de même largeur et
   alignés, avec un espace entre eux (ils étaient collés et décalés). */
.kb-retractation .kb-retractation-form .btn + .btn {
    margin-left: 10px;
}
@media (max-width: 767px) {
    .kb-retractation .kb-retractation-form .btn {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        box-sizing: border-box !important;
    }
}

/* Page « Contactez-nous » : le message après envoi (« Votre message a bien été
   envoyé à notre équipe. ») ou d'erreur s'affichait dans un deuxième cadre à
   l'intérieur du cadre du formulaire (double cadre, décalé). Sans cadre ni
   fond propre : seul le texte reste, dans le cadre existant. */
body.page-contact .contact-form .alert {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
}
body.page-contact .contact-form .alert ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Page « Contactez-nous » : message de confirmation centré dans son cadre.
   Le bloc d'alerte (classe col-xs-12) était flottant : le cadre ne l'englobait
   pas et le texte collait le bas (23 px en haut, 3 px en bas). Remis dans le
   flux, centré, avec des marges égales. */
body.page-contact .contact-form .alert {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Messages « ps-alert » de PrestaShop 9 (réinitialisation du mot de passe,
   erreurs de formulaire de compte) : le thème les affichait sur fond BLANC
   avec le texte gris clair du site — illisible. Fond transparent, texte gris
   clair, sans cadre propre (la page a déjà le sien) ; pastille d'icône en rose or pour le succès
   (rouge atténué pour les erreurs) ; espace vide sous le message supprimé. */
.ps-alert-success .item,
.ps-alert-error .item {
    background: transparent !important;
    border: 0 !important;
}
.ps-alert-success .item i {
    border-color: var(--or-base) !important;
    background: var(--or-base) !important;
}
.ps-alert-success .item i svg {
    background-color: var(--or-base) !important;
}
.ps-alert-error .item i {
    border-color: #c0504d !important;
    background: #c0504d !important;
}
.ps-alert-error .item i svg {
    background-color: #c0504d !important;
}
.ps-alert-success .item p,
.ps-alert-error .item p {
    background: transparent !important;
    color: var(--gris-texte) !important;
    -webkit-text-fill-color: var(--gris-texte) !important;
}
.ps-alert-success {
    padding-bottom: 0.25rem !important;
}

/* Messages « ps-alert » — cadre ajusté, ordinateur ET mobile : plus d'espace
   vide sous le message (marge basse du thème 16 px + padding 44 px), pastille
   d'icône réduite (53 px → 44 px sur ordinateur, 29 px sur mobile), texte moins
   haut. La carte de la page passe de 198 à ≈ 126 px (ordinateur) et de 280 à
   ≈ 133 px (mobile). */
.ps-alert-success,
.ps-alert-error {
    padding: 0 !important;
}
.ps-alert-success .item,
.ps-alert-error .item {
    margin-bottom: 0 !important;
}
.ps-alert-success .item i,
.ps-alert-error .item i {
    border-width: 10px !important;
}
.ps-alert-success .item p,
.ps-alert-error .item p {
    padding: 14px 18px !important;
}
@media (max-width: 767px) {
    #content.page-content:has(> .ps-alert-success),
    #content.page-content:has(> .ps-alert-error) {
        padding: 12px !important;
    }
    .ps-alert-success .item i,
    .ps-alert-error .item i {
        border-width: 6px !important;
    }
    .ps-alert-success .item i svg,
    .ps-alert-error .item i svg {
        width: 18px !important;
        height: 18px !important;
    }
    .ps-alert-success .item p,
    .ps-alert-error .item p {
        padding: 8px 10px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}

/* Intro vidéo (splash) : réservée à la page d'accueil. Sur toute autre page
   (lien reçu par e-mail : réinitialisation du mot de passe, etc.), le splash
   est masqué dès le chargement, sans clignotement — custom.js fait le reste
   (classe « intro-finie »). */
body:not(#index) #splash-screen,
body:not(#index) #sound-toggle {
    display: none !important;
}