/* ==========================================================================
   My Maktaba — Charte graphique (thème enfant de Hummingbird)
   Chargé par le core après theme.css (priorité 1000).
   Librairie islamique — identité : crème & bruns sombres, or, serif Cormorant.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&family=Amiri:wght@400;700&display=swap");

:root {
  /* Palette My Maktaba */
  --mm-bg:            #f7f4ee;
  --mm-surface:       #fffdf8;
  --mm-ink:           #1a1713;
  --mm-ink-soft:      #4a4234;
  --mm-muted:         #6d6352;
  --mm-muted-2:       #8d8371;
  --mm-gold:          #b8912f;
  --mm-gold-dark:     #8c6d1f;
  --mm-gold-light:    #e6cd8a;
  --mm-dark:          #100e0b;
  --mm-dark-2:        #14110d;
  --mm-dark-3:        #191510;
  --mm-line:          #e0d8c7;
  --mm-line-2:        #e7dfce;
  --mm-on-dark:       #cfc6b4;
  --mm-on-dark-str:   #f6f0e2;
  --mm-green:         #5d7a52;

  --mm-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mm-sans:  "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mm-arab:  "Amiri", "Cormorant Garamond", serif;

  /* Remap des variables Bootstrap 5.3 utilisées par Hummingbird */
  --bs-body-bg:            var(--mm-bg);
  --bs-body-color:         var(--mm-ink);
  --bs-body-font-family:   var(--mm-sans);
  --bs-primary:            var(--mm-gold);
  --bs-primary-rgb:        184, 145, 47;
  --bs-link-color:         var(--mm-gold);
  --bs-link-color-rgb:     184, 145, 47;
  --bs-link-hover-color:   var(--mm-gold-dark);
  --bs-border-color:       var(--mm-line);
  --bs-emphasis-color:     var(--mm-ink);
  --bs-secondary-color:    var(--mm-muted);
}

/* --------------------------------------------------------- Base */
body {
  background: var(--mm-bg);
  color: var(--mm-ink);
  font-family: var(--mm-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.page-title, .product-title, .h1-title, .category-title {
  font-family: var(--mm-serif);
  font-weight: 500;
  color: var(--mm-ink);
  letter-spacing: .002em;
}
h1, .h1, .page-title { font-weight: 400; }

a { color: var(--mm-gold); text-decoration: none; }
a:hover, a:focus { color: var(--mm-gold-dark); }
::selection { background: var(--mm-gold-light); }

.text-primary { color: var(--mm-gold) !important; }
.bg-primary   { background-color: var(--mm-gold) !important; }

/* Kicker / petits libellés mono en majuscules doré (utilitaire réutilisable) */
.mm-kicker {
  font: 400 10px/1 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mm-gold);
}

/* --------------------------------------------------------- Boutons */
.btn-primary,
.btn-primary:visited {
  --bs-btn-bg: var(--mm-gold);
  --bs-btn-border-color: var(--mm-gold);
  --bs-btn-hover-bg: var(--mm-gold-dark);
  --bs-btn-hover-border-color: var(--mm-gold-dark);
  --bs-btn-active-bg: var(--mm-gold-dark);
  --bs-btn-color: #211a08;
  --bs-btn-hover-color: #211a08;
  background-image: linear-gradient(160deg, var(--mm-gold-light), var(--mm-gold));
  color: #211a08;
  border: 0;
  font-family: var(--mm-sans);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 2px;
  padding: 15px 26px;
}
.btn-primary:hover, .btn-primary:focus { background-image: none; background-color: var(--mm-gold-dark); color: #211a08; }

.btn-secondary, .btn-outline-primary {
  --bs-btn-color: var(--mm-ink-soft);
  --bs-btn-border-color: #cfc5ae;
  --bs-btn-bg: var(--mm-surface);
  --bs-btn-hover-bg: #f1ead9;
  --bs-btn-hover-border-color: var(--mm-gold);
  --bs-btn-hover-color: var(--mm-ink);
  border-radius: 2px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11.5px;
}

/* Ajout panier (bouton d'action fiche produit) */
.add-to-cart, .product-add-to-cart .btn { letter-spacing: .2em; }

/* --------------------------------------------------------- Formulaires */
.form-control, .form-select, .input-group .form-control,
input[type="text"], input[type="email"], input[type="search"], textarea, select {
  border-radius: 2px;
  border-color: #cfc5ae;
  background: var(--mm-surface);
  color: var(--mm-ink);
  font-family: var(--mm-sans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mm-gold);
  box-shadow: 0 0 0 .15rem rgba(184,145,47,.18);
}

/* --------------------------------------------------------- En-tête (header sombre) */
.header, #header, .header-top, .header-nav, .header-nav-full-width {
  background: var(--mm-dark);
  color: var(--mm-on-dark);
}
.header-top { background: var(--mm-dark-2); }
.header a, .header-nav a, .header-top a { color: var(--mm-on-dark); }
.header a:hover, .header-nav a:hover { color: var(--mm-on-dark-str); }
.header .material-icons, .header svg { color: var(--mm-on-dark); }

/* barre utilitaire éventuelle (bandeau top) */
.header-banner { background: var(--mm-dark); color: var(--mm-muted-2); font-size: 12px; letter-spacing: .06em; }

/* Recherche */
.header .ps-search input, #search_widget input, .search-widget input {
  background: var(--mm-dark-3);
  border: 1px solid #322b20;
  color: #efe7d7;
}
.header .ps-search input::placeholder, .search-widget input::placeholder { color: #8a7c5e; }

/* Sélecteurs langue / devise dans le header */
.header .language-selector, .header .currency-selector,
.header .dropdown-menu { background: var(--mm-dark-3); color: var(--mm-on-dark); border-color: #332c22; }

/* Menu principal (ps_mainmenu) — on reste sur le module par défaut, juste la charte */
.main-menu a, #_desktop_top_menu a, .menu-content a {
  color: #e6ddc9;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.main-menu a:hover, #_desktop_top_menu a:hover { color: var(--mm-gold); }
.main-menu .active > a, #_desktop_top_menu .current a { color: var(--mm-gold); }

/* --------------------------------------------------------- Pied de page (sombre) */
.footer, .footer__main, #footer {
  background: var(--mm-dark-2);
  color: var(--mm-on-dark);
}
.footer a, #footer a { color: var(--mm-on-dark); }
.footer a:hover, #footer a:hover { color: var(--mm-gold); }
.footer h3, .footer .h3, .footer__title, #footer .h3 {
  font-family: var(--mm-serif);
  color: var(--mm-on-dark-str);
  letter-spacing: .02em;
}
.footer .mm-kicker, .footer__title { color: var(--mm-gold); }

/* Pied de page maquette : marque + 3 colonnes de liens + barre basse */
.mm-footer { background: var(--mm-dark); color: var(--mm-muted-2); padding: 64px 0 0; }
.mm-footer__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 30px;
}
/* neutralise les colonnes Bootstrap ajoutées par ps_linklist */
.mm-footer__grid > * { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
.mm-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.mm-footer__brand img, .mm-footer__brand .logo { width: 190px; max-width: 100%; height: auto; display: block; }
.mm-footer__tagline { margin: 0; font-size: 13.5px; line-height: 1.8; max-width: 290px; color: var(--mm-muted-2); }

.mm-footer .footer-block__title {
  font: 400 10px/1 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mm-gold);
  margin: 0 0 14px; position: static;
}
.mm-footer .footer-block__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mm-footer .footer-block__list a { font-size: 13.5px; color: #a99f8b; }
.mm-footer .footer-block__list a:hover { color: var(--mm-gold-light); }
@media (min-width: 768px) {
  /* les blocs sont repliables en mobile (collapse Bootstrap) : toujours ouverts en desktop */
  .mm-footer .footer-block__content { display: block !important; height: auto !important; visibility: visible; }
}

.mm-footer__bottom {
  border-top: 1px solid #221d16; padding: 22px 0 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: var(--mm-muted-2);
}
@media (max-width: 991.98px) {
  .mm-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 575.98px) {
  .mm-footer__grid { grid-template-columns: 1fr; }
  /* bloc de marque et barre du bas centrés : sur une colonne, un alignement à
     gauche laisse le logo perdu dans la largeur */
  .mm-footer__brand { align-items: center; text-align: center; }
  .mm-footer__brand img, .mm-footer__brand .logo { margin-inline: auto; }
  .mm-footer__tagline { max-width: 340px; margin-inline: auto; }
  .mm-footer__bottom { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
}

/* --------------------------------------------------------- Héros accueil (ps_banner en pleine largeur) */
.mm-hero { display: block; background: var(--mm-dark-3); line-height: 0; }
.mm-hero__link { display: block; }
.mm-hero__img { width: 100%; height: auto; max-height: 560px; object-fit: cover; display: block; }
@media (max-width: 767.98px) { .mm-hero__img { max-height: 320px; } }

/* --------------------------------------------------------- En-tête de section (mm-section-head) */
.mm-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--mm-line); padding-bottom: 14px; margin: 0 0 32px;
}
.mm-section-head__text { display: flex; flex-direction: column; gap: 7px; }
.mm-section-head__title {
  font-family: var(--mm-serif); font-weight: 400; font-size: 34px; line-height: 1;
  margin: 0; color: var(--mm-ink);
}
.mm-section-head__link {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  padding-bottom: 2px;
}

/* --------------------------------------------------------- Sections produits home (mm-products) */
.mm-products { padding: 74px 0 0; }
.mm-products .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.mm-products .module-products__buttons { margin-top: 30px; }
.mm-products .mm-viewall { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 991.98px) { .mm-products .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .mm-products .products { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- Rayons (lnk_homecat) */
.mm-rayons { padding: 80px 0 0; }
.mm-rayons__title {
  font-family: var(--mm-serif); font-weight: 400; font-size: 34px; line-height: 1;
  margin: 0 0 26px; color: var(--mm-ink);
}

/* --------------------------------------------------------- Bandeau services (blockreassurance) */
.mm-services { padding: 76px 0; }
.mm-services__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--mm-line); border: 1px solid var(--mm-line);
}
.mm-services__cell {
  background: var(--mm-surface); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
}
a.mm-services__cell:hover { background: #f1ead9; }
.mm-services__text { font-size: 14px; line-height: 1.6; color: var(--mm-ink-soft); }
@media (max-width: 991.98px) { .mm-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .mm-services__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- Cartes produit (classes BEM Hummingbird) */
.product-miniature { background: var(--mm-surface); border: 1px solid var(--mm-line-2); border-radius: 2px; height: 100%; }
.product-miniature__inner { padding: 18px; display: flex; flex-direction: column; height: 100%; }
/* zone image : ratio 3/4 fixe (fini l'écrasement) + fond parchemin */
.product-miniature__top { position: relative; }
.product-miniature__image-container { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: repeating-linear-gradient(135deg, #eae2d2 0 9px, #f3ece0 9px 18px); border-radius: 1px; }
.product-miniature__image-link { display: block; width: 100%; height: 100%; }
.product-miniature__image { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-miniature__title {
  font-family: var(--mm-serif); font-weight: 500; font-size: 21px; line-height: 1.2;
  color: var(--mm-ink); text-decoration: none; display: block; margin-top: 14px;
}
.product-miniature__title:hover { color: var(--mm-gold-dark); }
.product-miniature__prices { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; }
.product-miniature__price { font-size: 16px; font-weight: 500; color: var(--mm-ink); }
.product-miniature__discount-price { display: inline-flex; }
.product-miniature__regular-price { font-size: 13px; color: var(--mm-muted-2); text-decoration: line-through; }
/* éléments ajoutés par l'override de miniature (éditeur / meta / stock) */
.product-miniature__manufacturer { font: 400 10px/1 ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #a2977f; }
.product-miniature__meta { font-size: 12.5px; color: var(--mm-muted); margin-top: 5px; }
.product-miniature__stock { font-size: 11.5px; letter-spacing: .04em; color: var(--mm-green); margin-top: 8px; }
/* listings : carte cliquable, pas de bouton d'ajout (comme la maquette —
   le choix se fait sur la fiche, où l'on compare les éditions) */
.mm-products .product-miniature__actions,
.mm-products .product-miniature__quickview-button,
.mm-products .product-miniature__quickview-touch,
#category .product-miniature__actions,
#search .product-miniature__actions,
#new-products .product-miniature__actions,
#best-sales .product-miniature__actions,
#prices-drop .product-miniature__actions { display: none; }

/* badges (promo, nouveau) */
.product-flag, .product-flags .product-flag {
  background: var(--mm-gold); color: #191510; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 1px;
}
.product-flag.discount, .product-flag.on-sale { background: var(--mm-dark); color: var(--mm-gold-light); }

/* --------------------------------------------------------- Fiche produit (page) */
.product__container { gap: 60px; }
@media (min-width: 992px) { .product__container { grid-template-columns: 1.03fr .97fr; } }

.mm-product__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.mm-product__publisher { letter-spacing: .2em; }
.product__name, .mm-product__title {
  font-family: var(--mm-serif); font-weight: 400; font-size: 44px; line-height: 1.1;
  margin: 0; color: var(--mm-ink);
}

/* prix : montant + taxe/devise sur une seule ligne, stock juste en dessous */
.mm-price { display: flex; flex-direction: column; gap: 8px; }
.mm-price__line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.product__prices .product__price, .product__price {
  font-family: var(--mm-serif); font-size: 38px; line-height: 1; color: var(--mm-ink);
}
.mm-price__meta, .product__tax-infos { font-size: 13px; color: var(--mm-muted-2); }
.mm-price__old { display: flex; align-items: baseline; gap: 10px; }
.mm-price__old .product__regular-price { font-size: 15px; color: var(--mm-muted-2); text-decoration: line-through; }
.mm-price__ecotax { font-size: 12px; color: var(--mm-muted-2); }

/* disponibilité */
.mm-price__stock { font-size: 13px; letter-spacing: .02em; color: var(--mm-green); }
.mm-price__stock--last_remaining_items { color: #a5761b; }
.mm-price__stock--out_of_stock, .mm-price__stock--unavailable { color: #9d3b2f; }
/* le même message est déjà rendu ici : on masque celui du bloc d'ajout au panier */
.product__availability-status { display: none; }

/* description de l'ouvrage, sous la galerie */
.mm-product__description {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mm-line);
  font-size: 14.5px; line-height: 1.85; color: var(--mm-muted);
}
.mm-product__description p { margin: 0 0 1em; }
.mm-product__description :last-child { margin-bottom: 0; }

/* caractéristiques de l'édition */
.mm-specs { border: 1px solid var(--mm-line); background: var(--mm-surface); margin-top: 26px; }
.mm-specs__head {
  padding: 15px 20px; border-bottom: 1px solid var(--mm-line);
  font: 400 10.5px/1 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted-2);
}
.mm-specs__row {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 13px 20px; border-bottom: 1px solid #efe9dc; font-size: 13.5px;
}
.mm-specs__row:last-child { border-bottom: 0; }
.mm-specs__k { color: var(--mm-muted-2); }
.mm-specs__v { color: #2b271f; }
@media (max-width: 575.98px) { .mm-specs__row { grid-template-columns: 1fr; gap: 4px; } }

/* galerie : cadre et zoom au survol */
.product__images, .product__no-image {
  border: 1px solid var(--mm-line); background: var(--mm-surface); overflow: hidden;
}
.product__images img { transition: transform .5s ease; }
.product__images:hover img { transform: scale(1.35); }

/* --------------------------------------------------------- Listing / catégorie */
#category .category-top, .block-category, #js-product-list-header,
.category-header, .page-header { background: transparent; }
.breadcrumb { background: transparent; font-size: 12px; letter-spacing: .06em; }
.breadcrumb a, .breadcrumb li a { color: var(--mm-muted-2); }
.breadcrumb .active, .breadcrumb li:last-child span { color: var(--mm-ink-soft); }

/* Listing catégorie : description page 1, barre tri/compteur, grille 3 colonnes */
.category__description {
  max-width: 820px; margin: 16px 0 0;
  font-size: 14.5px; line-height: 1.85; color: var(--mm-muted);
}
.products__selection {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--mm-line); padding-bottom: 14px; margin-bottom: 28px;
}
.products__count { font-size: 12.5px; color: var(--mm-muted-2); }
.products__sort-label, .products__sort { font-size: 12.5px; color: var(--mm-ink-soft); }
#category .products, #search .products, #new-products .products,
#best-sales .products, #prices-drop .products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width: 991.98px) {
  #category .products, #search .products, #new-products .products,
  #best-sales .products, #prices-drop .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  #category .products, #search .products, #new-products .products,
  #best-sales .products, #prices-drop .products { grid-template-columns: 1fr; }
}

/* Filtres facettes (ps_facetedsearch) et arbre de catégories */
.left-block__title {
  font: 400 10.5px/1 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mm-muted-2);
}
.ps-facetedsearch .accordion--small .accordion-button {
  font: 400 10.5px/1.4 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mm-gold);
  background: transparent; padding-left: 0; padding-right: 0;
}
.ps-facetedsearch .accordion--small .accordion-button:not(.collapsed) { color: var(--mm-gold-dark); box-shadow: none; }
.search-filters__item { font-size: 13.5px; color: var(--mm-ink-soft); }
.ps-categorytree .category-tree__list a { font-size: 13.5px; color: var(--mm-ink-soft); }
.ps-categorytree .category-tree__list a:hover { color: var(--mm-gold-dark); }

/* Pagination */
.pagination .page-link { color: var(--mm-ink-soft); border-radius: 2px; border-color: var(--mm-line); }
.pagination .active .page-link, .pagination .current a {
  background: var(--mm-dark); border-color: var(--mm-dark); color: var(--mm-on-dark-str);
}

/* --------------------------------------------------------- Réassurance / services */
.block-reassurance, #blockreassurance_product { background: var(--mm-surface); border: 1px solid var(--mm-line); }
.block-reassurance .mm-kicker, .block-reassurance li p { color: var(--mm-ink-soft); }

/* Accordéons (FAQ / details produit) */
details > summary { color: var(--mm-ink); cursor: pointer; }
.card-header, .accordion-button { font-family: var(--mm-serif); color: var(--mm-ink); }
.accordion-button:not(.collapsed) { color: var(--mm-gold-dark); background: #f1ead9; }

/* --------------------------------------------------------- Arabe / RTL (Amiri) */
[lang="ar"], html[lang="ar"] body, .lang-ar body,
:is([dir="rtl"], .lang-rtl) { font-family: var(--mm-arab); }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
:is([dir="rtl"], .lang-rtl) h1, :is([dir="rtl"], .lang-rtl) h2, :is([dir="rtl"], .lang-rtl) h3 { font-family: var(--mm-arab); font-weight: 700; }
/* titres arabes rencontrés dans le contenu (dir=rtl inline) */
:is([dir="rtl"], .lang-rtl) .product-detail-name, :is([dir="rtl"], .lang-rtl) .product-title a { font-family: var(--mm-arab); }

/* ==========================================================================
   Masthead (override header.tpl) — cible les VRAIES classes des modules
   ========================================================================== */

/* -------- En-tête collant, compacté au défilement (classe .is-stuck posée par custom.js) --------
   En `fixed` + réserve d'espace constante (--mm-header-h) : la hauteur de l'en-tête
   change sans jamais déplacer le contenu (en `sticky`, le retour en grand
   repoussait la page → saut au défilement). */
#header, .header.js-sticky-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;                 /* sous les offcanvas/modals Bootstrap (1045+) */
  transition: box-shadow .25s ease;
}
body { padding-top: var(--mm-header-h, 205px); }
/* mesure de la hauteur « dépliée » sans animer */
#header.mm-no-transition, #header.mm-no-transition * { transition: none !important; }
#header.is-stuck { box-shadow: 0 8px 26px rgba(16, 14, 11, .38); }

/* le bandeau langue/devise se replie.
   `overflow` reste visible en position dépliée : les menus déroulants langue et
   devise débordent volontairement du bandeau, un écrêtage les tronquerait. Il
   n'est rétabli qu'à l'état replié, où le bandeau doit disparaître entièrement. */
.mm-utility { max-height: 64px; overflow: visible; transition: max-height .25s ease, opacity .18s ease; }
#header.is-stuck .mm-utility { max-height: 0; opacity: 0; overflow: hidden; }
/* le bandeau ouvre un contexte d'empilement plus haut que le masthead, sinon le
   menu déroulant passe sous la rangée suivante */
.mm-utility, .mm-utility .dropdown, .mm-utility .js-dropdown { position: relative; z-index: 5; }
.mm-utility .dropdown-menu { z-index: 1040; }
/* Le mini-panier embarque un `header.blockcart-header` en `z-index: 1021` qui n'est
   confiné dans aucun contexte d'empilement : il passait devant les listes devise et
   langue du bandeau (z-index 5). On ne relève le bandeau que le temps qu'une liste
   soit ouverte, pour ne rien changer au comportement du panier le reste du temps. */
.mm-utility:has(.dropdown-menu.show) { z-index: 1025; }

/* masthead resserré, logo réduit, libellés d'actions masqués */
.mm-masthead__grid { transition: padding .25s ease, gap .25s ease; }
#header.is-stuck .mm-masthead__grid { padding: 8px 0; gap: 18px; }

.mm-masthead__logo img, .mm-masthead__logo .logo { transition: max-width .25s ease; }
#header.is-stuck .mm-masthead__logo img, #header.is-stuck .mm-masthead__logo .logo { max-width: 150px; }

#header.is-stuck .mm-masthead__actions { gap: 18px; }
#header.is-stuck .mm-masthead__actions .header-block__title { display: none; }
#header.is-stuck .mm-masthead__search .ps-searchbar__input { padding-top: 8px; padding-bottom: 8px; }

/* rangée menu moins haute */
.mm-nav .ps-mainmenu a { transition: padding .25s ease, font-size .25s ease; }
#header.is-stuck .mm-nav .ps-mainmenu a { padding: 9px 0; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  #header, .mm-utility, .mm-masthead__grid,
  .mm-masthead__logo img, .mm-masthead__logo .logo,
  .mm-nav .ps-mainmenu a { transition: none; }
}

/* -------- Bandeau utilitaire -------- */
.mm-utility { background: var(--mm-dark); color: var(--mm-on-dark); font-size: 12px; letter-spacing: .06em; }
.mm-utility__inner { display: flex; align-items: center; gap: 24px; padding: 9px 0; }
.mm-utility__promo { color: var(--mm-muted-2); }
.mm-utility__selectors { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
/* dropdowns stylisés langue/devise (remplacent les <select> natifs) */
.mm-utility .ps-languageselector, .mm-utility .ps-currencyselector { display: inline-flex; margin: 0; }
.mm-dropdown { position: relative; }
.mm-dropdown__toggle {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  background: var(--mm-dark-3); border: 1px solid #332c22; color: var(--mm-on-dark);
  font-family: var(--mm-sans); font-size: 12px; letter-spacing: .06em;
  padding: 6px 10px; border-radius: 2px; cursor: pointer;
}
.mm-dropdown__toggle:hover, .mm-dropdown__toggle[aria-expanded="true"] { border-color: #4a4132; color: var(--mm-on-dark-str); }
.mm-dropdown__caret { font-size: 16px; color: #8a7c5e; transition: transform .15s; }
.mm-dropdown__toggle[aria-expanded="true"] .mm-dropdown__caret { transform: rotate(180deg); }
.mm-dropdown__menu {
  background: var(--mm-dark-3); border: 1px solid #332c22; border-radius: 2px;
  padding: 4px; min-width: 168px; margin-top: 5px;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.mm-dropdown__item {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  color: var(--mm-on-dark); font-size: 12.5px; letter-spacing: .04em;
  padding: 8px 10px; border-radius: 2px;
}
.mm-dropdown__item:hover, .mm-dropdown__item:focus { background: #241f17; color: var(--mm-on-dark-str); }
.mm-dropdown__item.is-active { color: var(--mm-gold); }
.mm-flag { width: 18px; height: 12px; object-fit: cover; border-radius: 1px; flex: 0 0 auto; display: inline-block; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

/* -------- Masthead : recherche | logo | actions -------- */
.mm-masthead { background: var(--mm-dark-2); }
.mm-masthead__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 20px 0 22px; }

/* recherche (gauche) */
.mm-masthead__search { justify-self: start; width: 100%; max-width: 340px; }
/* MSB 2026-08-11 : regle limitee au desktop - sans media query elle masquait aussi l offcanvas de recherche mobile (loupe morte) */
@media (min-width: 768px) {
  .mm-masthead__search .ps-searchbar--mobile, .mm-masthead__search .offcanvas { display: none !important; }
}
.mm-masthead__search .ps-searchbar__form { position: relative; background: var(--mm-dark-3); border: 1px solid #322b20; border-radius: 2px; margin: 0; }
.mm-masthead__search .ps-searchbar__input { width: 100%; background: transparent; border: 0; box-shadow: none; color: #efe7d7; font-size: 14px; padding: 11px 40px 11px 14px; }
.mm-masthead__search .ps-searchbar__input::placeholder { color: #8a7c5e; }
.mm-masthead__search .ps-searchbar__input:focus { box-shadow: none; background: transparent; }
/* loupe = bouton submit cliquable, poussé à DROITE (Hummingbird la met en absolute left) */
.mm-masthead__search .ps-searchbar__magnifier { left: auto; right: .5rem; background: transparent; border: 0; color: #8a7c5e; cursor: pointer; padding: 0; }
.mm-masthead__search .ps-searchbar__magnifier:hover { color: var(--mm-gold-light); }
.mm-masthead__search .ps-searchbar__magnifier .material-icons { font-size: 18px; }
.mm-masthead__search .ps-searchbar__clear { left: auto; right: 2.2rem; }
.mm-masthead__search .ps-searchbar__input::placeholder { color: #8a7c5e; }
.mm-masthead__search .ps-searchbar__input:focus { box-shadow: none; background: transparent; }

/* logo (centre) */
.mm-masthead__logo { justify-self: center; text-align: center; }
.mm-masthead__logo img, .mm-masthead__logo .logo { max-width: 300px; width: 100%; height: auto; display: block; }

/* actions compte + panier (droite) — icône au-dessus, libellé petit majuscule */
.mm-masthead__actions { justify-self: end; display: flex; align-items: flex-start; gap: 24px; }
.mm-masthead__actions .ps-customersignin, .mm-masthead__actions .ps-shoppingcart { margin: 0; }
.mm-masthead__actions .header-block { position: relative; margin: 0; }
.mm-masthead__actions .header-block__action-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--mm-on-dark); text-decoration: none; padding: 0; }
.mm-masthead__actions .header-block__action-btn:hover { color: var(--mm-on-dark-str); }
.mm-masthead__actions .header-block__icon { font-size: 22px; color: inherit; }
.mm-masthead__actions .header-block__title { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.mm-masthead__actions .header-block__badge { position: absolute; top: -6px; right: -6px; background: var(--mm-gold); color: #191510; font-size: 9px; line-height: 1; padding: 3px 5px; border-radius: 9px; min-width: 16px; text-align: center; }

/* -------- Rangée menu (ps_mainmenu, centré) -------- */
.mm-nav { background: var(--mm-dark-2); border-top: 1px solid #241f17; }
.mm-nav__inner { display: flex; align-items: center; justify-content: center; }
.mm-nav .ps-mainmenu { flex: 0 1 auto; }
.mm-nav .ps-mainmenu ul, .mm-nav .ps-mainmenu__desktop ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; margin: 0; padding: 0; list-style: none; }
/* Les listes déroulantes devise/langue sont aussi des <ul> à l'intérieur d'un
   `.ps-mainmenu` (le tiroir mobile porte cette classe) : la règle ci-dessus leur
   imposait `display:flex`, ce qui annule le masquage de Bootstrap et laisse les
   panneaux affichés en permanence. On rend la main à Bootstrap. */
.mm-nav .ps-mainmenu .dropdown-menu { display: none; }
.mm-nav .ps-mainmenu .dropdown-menu.show { display: block; }
.mm-nav .ps-mainmenu a { color: #e6ddc9; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; padding: 15px 0; display: inline-block; }
.mm-nav .ps-mainmenu a:hover, .mm-nav .ps-mainmenu .current > a { color: var(--mm-gold); }

/* Hummingbird pose un anneau doré sur :focus — donc au clic souris.
   On ne le garde qu'au clavier, via :focus-visible (accessibilité préservée). */
.mm-nav .ps-mainmenu .ps-mainmenu__tree > li .ps-mainmenu__tree-link:focus {
  outline: none;
  outline-offset: 0;
  border-radius: 0;
  box-shadow: none;
}
.mm-nav .ps-mainmenu .ps-mainmenu__tree > li .ps-mainmenu__tree-link:focus-visible {
  outline: 2px solid var(--mm-gold);
  outline-offset: 3px;
}

/* Filet doré partiel sous le lien : survol, focus clavier et rubrique courante.
   Il se déploie depuis la gauche (depuis la droite en arabe / RTL). */
.mm-nav .ps-mainmenu__tree-link { position: relative; }
.mm-nav .ps-mainmenu__tree-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--mm-nav-underline, 9px);
  width: 58%;
  height: 1px;
  background: var(--mm-gold);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
:is([dir="rtl"], .lang-rtl) .mm-nav .ps-mainmenu__tree-link::after {
  left: auto;
  right: 0;
  transform-origin: right center;
}
.mm-nav .ps-mainmenu__tree-link:hover::after,
.mm-nav .ps-mainmenu__tree-link:focus-visible::after,
.mm-nav .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link::after {
  transform: scaleX(1);
  opacity: 1;
}
/* en-tête compacté : le lien est moins haut, le filet suit */
#header.is-stuck .mm-nav .ps-mainmenu__tree-link::after { --mm-nav-underline: 4px; }
@media (prefers-reduced-motion: reduce) {
  .mm-nav .ps-mainmenu__tree-link::after { transition: none; }
}

@media (max-width: 991.98px) {
  .mm-masthead__grid { grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 14px 0; }
  .mm-masthead__search { max-width: none; }
  .mm-masthead__actions { gap: 14px; }
  .mm-masthead__actions .header-block__title { display: none; }
  .mm-masthead__logo img, .mm-masthead__logo .logo { max-width: 200px; }
}

/* ==========================================================================
   Panier tiroir (lnkminicart) — habillage My Maktaba
   Le module apporte la mécanique (ouverture, ajax) ; l'apparence vient d'ici.
   ========================================================================== */
#header .cart_block.cart-side {
  width: 420px;
  background: var(--mm-bg);
  border-left: 1px solid var(--mm-line);
  box-shadow: -18px 0 46px rgba(16, 14, 11, .22);
  font-family: var(--mm-sans);
}
:is([dir="rtl"], .lang-rtl) #header .cart_block.cart-side { border-left: 0; border-right: 1px solid var(--mm-line); }

.cart-side-filter { background: rgba(16, 14, 11, .55); }

/* en-tête du tiroir */
#header .cart_block .block_header {
  background: var(--mm-dark-2);
  padding: 20px 22px;
  margin: 0;
}
#header .cart_block .block_header p {
  margin: 0;
  font-family: var(--mm-serif);
  font-size: 20px;
  color: var(--mm-on-dark-str);
}

/* lignes produit */
#header .cart_block .cart-item {
  border-bottom: 1px solid var(--mm-line);
  padding: 16px 22px;
  background: transparent;
}
#header .cart_block .cart-item .cart-image { background: repeating-linear-gradient(135deg, #eae2d2 0 9px, #f3ece0 9px 18px); }
#header .cart_block .cart-item .cart-info .product-name a {
  font-family: var(--mm-serif);
  font-size: 17px;
  color: var(--mm-ink);
}
#header .cart_block .cart-item .cart-info .product-name a:hover { color: var(--mm-gold-dark); }
#header .cart_block .cart-item .cart-info .product-price { color: var(--mm-ink); font-size: 15px; }
#header .cart_block .cart-item .cart-info .product-quantity { color: var(--mm-muted-2); font-size: 12.5px; }
#header .cart_block .cart-item .cart-info .remove-from-cart { color: var(--mm-muted-2); }
#header .cart_block .cart-item .cart-info .remove-from-cart:hover { color: #9d3b2f; }

/* totaux + boutons */
#header .cart_block .cart-summary { padding: 4px 22px; }
#header .cart_block .cart-summary-line { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--mm-muted); padding: 5px 0; }
#header .cart_block .cart-summary-line.cart-total { font-size: 16px; color: var(--mm-ink); border-top: 1px solid var(--mm-line); margin-top: 8px; padding-top: 12px; }
#header .cart_block .checkout { padding: 18px 22px 24px; background: var(--mm-surface); border-top: 1px solid var(--mm-line); display: flex; flex-direction: column; gap: 10px; }
#header .cart_block .checkout .btn { width: 100%; text-align: center; }
#header .cart_block .side_cart_bottom { background: var(--mm-surface); }

@media (max-width: 575.98px) { #header .cart_block.cart-side { width: 100%; } }

/* --- Panier tiroir : neutralise la mise en page héritée du module (float, hauteur fixe) --- */
.mm-masthead__actions #_desktop_cart,
.mm-masthead__actions .ps-shoppingcart { display: contents; }
#header .mm-masthead__actions .blockcart { float: none; padding: 0; white-space: nowrap; }
/* la pastille reste ancrée en haut à droite de l'icône */
.mm-masthead__actions .header-block__badge,
#_desktop_cart .header-block__badge {
  position: absolute; top: -6px; right: -6px;
  font-size: 9px; font-weight: 500; line-height: 1;
  margin: 0; padding: 3px 5px;
}

/* lignes produit du tiroir : rangée image + infos, alignée à gauche */
#header .cart_block .cart-item {
  display: flex; align-items: flex-start; gap: 14px;
  height: auto; overflow: visible; margin: 0; text-align: start;
}
#header .cart_block .cart-item .cart-image {
  float: none; margin: 0; flex: 0 0 62px; width: 62px; aspect-ratio: 3 / 4;
  border: 1px solid var(--mm-line); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#header .cart_block .cart-item .cart-image img { width: 100%; height: 100%; object-fit: contain; }
#header .cart_block .cart-item .cart-image__placeholder {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, #eae2d2 0 9px, #f3ece0 9px 18px);
}
#header .cart_block .cart-item .cart-info {
  flex: 1; min-width: 0; padding-inline-end: 0; overflow: visible;
  display: flex; flex-direction: column; gap: 4px;
}
#header .cart_block .cart-item .cart-info .product-name { display: block; line-height: 1.25; }
#header .cart_block .cart-item .cart-info .product-quantity { padding-inline-end: 0; }
#header .cart_block .block_header .cart-count { color: var(--mm-gold); }
#header .cart_block .checkout .lnk_cart_button { text-align: center; }

/* le contenu du tiroir se pose en haut ; totaux et boutons restent en bas */
#header .cart_block.cart-side .block_content { justify-content: flex-start; gap: 0; height: 100%; }
/* la liste occupe l'espace disponible… */
#header .cart_block.cart-side .cart_block_list { max-height: none; flex: 1 1 auto; min-height: 0; overflow: auto; }
/* …ce qui pousse résumé + boutons en bas du tiroir */
#header .cart_block.cart-side .side_cart_bottom { margin-top: auto; flex: 0 0 auto; }
#header .cart_block .block_header { margin-bottom: 0; border-bottom: 0; }
#header .cart_block .block_header p { font-size: inherit; text-align: start; margin: 0; }
/* boutons du tiroir : contraste garanti quelle que soit la couleur choisie en BO */
#header .cart_block .checkout .btn-primary { color: #211a08; }
#header .cart_block .checkout .lnk_cart_button { color: #211a08; letter-spacing: .18em; padding: 14px 20px; border-radius: 2px; }
#header .cart_block .checkout .lnk_cart_button:hover { color: var(--mm-gold-light); }

/* ==========================================================================
   Sélecteur de quantité d'une ligne de panier
   Même composant dans le tiroir et dans le récapitulatif du tunnel
   (gabarit `_partials/mm-cart-quantity.tpl`, comportement dans custom.js).
   ========================================================================== */
.mm-qty {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--mm-line); background: var(--mm-surface);
  border-radius: 2px; overflow: hidden;
}
.mm-qty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; background: transparent; color: var(--mm-muted);
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.mm-qty__btn:hover:not(:disabled) { background: #f0e9da; color: var(--mm-ink); }
.mm-qty__btn:disabled { opacity: .35; cursor: default; }
.mm-qty__btn .material-icons { font-size: 16px; line-height: 1; float: none; }
.mm-qty__input {
  width: 36px; height: 30px; padding: 0;
  border: 0; border-inline: 1px solid var(--mm-line); border-radius: 0;
  background: transparent; color: var(--mm-ink);
  font-family: var(--mm-sans); font-size: 14px; text-align: center;
}
.mm-qty__input:focus-visible { outline: 2px solid var(--mm-gold); outline-offset: -2px; }
/* mise à jour en cours : on fige la commande le temps de la réponse serveur */
.mm-qty.is-busy { opacity: .5; pointer-events: none; }

/* --- dans le tiroir : quantité puis total de la ligne --- */
#header .cart_block .cart-item__row {
  display: flex; align-items: center; gap: 12px; margin-top: 6px;
}
#header .cart_block .cart-item__total { font-size: 15px; color: var(--mm-ink); }

/* --- dans le récapitulatif du tunnel --- */
#checkout .cart-summary-product__quantity { margin-top: 6px; }
#checkout .cart-summary-product__quantity .mm-qty__input { font-size: 13.5px; }

/* ==========================================================================
   Tunnel de commande — en-tête/pied allégés + charte
   ========================================================================== */
/* l'en-tête fixe (et sa réserve d'espace) ne concerne pas le tunnel */
body#checkout { padding-top: 0; }
/* le tunnel a son propre en-tête, non collant */
body#checkout #header, body#checkout .header.js-sticky-header { position: static; box-shadow: none; }

.mm-colight { background: var(--mm-dark); border-bottom: 1px solid #241f17; }
.mm-colight__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 0; flex-wrap: wrap;
}
.mm-colight__logo img, .mm-colight__logo .logo { max-width: 190px; height: auto; display: block; }
.mm-colight__logo { color: var(--mm-on-dark-str); font-family: var(--mm-serif); font-size: 22px; text-decoration: none; }
.mm-colight__trust {
  display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted-2);
}

.footer--light { background: var(--mm-dark); color: var(--mm-muted-2); margin-top: 60px; }
.mm-colight-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 0; font-size: 12px;
}

/* grille du tunnel : récapitulatif collant */
#checkout .checkout-grid { gap: 0; }
#checkout .checkout-grid__aside-wrapper { position: sticky; top: 24px; }
#checkout .checkout__summary-accordion {
  background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 2px;
}
#checkout .checkout__summary-accordion .accordion-button {
  font-family: var(--mm-serif); font-size: 20px; color: var(--mm-ink);
  background: transparent; box-shadow: none;
}
#checkout .cart-summary { padding: 0 18px 18px; }

/* étapes */
#checkout .checkout-step {
  background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 2px;
  margin-bottom: 18px;
}
#checkout .checkout-step .step-title, #checkout .checkout-step h1, #checkout .checkout-step h2 {
  font-family: var(--mm-serif); font-weight: 400; font-size: 24px; color: var(--mm-ink);
}
#checkout .step-number, #checkout .checkout-step__number {
  background: var(--mm-dark-2); color: var(--mm-gold-light);
}
@media (max-width: 991.98px) { #checkout .checkout-grid__aside-wrapper { position: static; } }

/* fil des etapes du tunnel */
#checkout .checkout-steps { background: var(--mm-bg); border-bottom: 1px solid var(--mm-line); }
#checkout .checkout-steps__btn { color: var(--mm-muted); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
#checkout .checkout-steps__step.is-current .checkout-steps__btn,
#checkout .checkout-steps__step.step--current .checkout-steps__btn { color: var(--mm-ink); }
#checkout .checkout-steps__number { background: #e5ddcb; color: var(--mm-muted); border: 0; }
#checkout .checkout-steps__step.is-current .checkout-steps__number,
#checkout .checkout-steps__step.step--current .checkout-steps__number,
#checkout .checkout-steps__step.step--complete .checkout-steps__number { background: var(--mm-gold); color: #211a08; }

/* boutons d'etape verrouilles (tunnel une page) */
#checkout .mm-step-locked {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
  pointer-events: auto; /* on garde le survol pour afficher l'infobulle */
}
#checkout .checkout-step .step__content { padding-top: 4px; }

/* ==========================================================================
   Tunnel — options de paiement, livraison et adresses en cartes cliquables
   Le bouton radio est masque (mais reste accessible au clavier) : c'est la
   carte entiere qui porte la selection.
   ========================================================================== */
#checkout .payment-option,
#checkout .delivery-option__item,
#checkout .address-item {
  border: 1px solid var(--mm-line);
  border-radius: 2px;
  background: var(--mm-surface);
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#checkout .payment-option:hover,
#checkout .delivery-option__item:hover,
#checkout .address-item:hover { border-color: #cfc5ae; background: #fffefb; }

/* etat selectionne */
#checkout .payment-option:has(input:checked),
#checkout .delivery-option__item:has(input:checked),
#checkout .address-item:has(input:checked) {
  border-color: var(--mm-gold);
  background: #fbf7ec;
  box-shadow: inset 0 0 0 1px var(--mm-gold);
}
/* accessibilite : la carte montre le focus clavier du radio masque */
#checkout .payment-option:has(input:focus-visible),
#checkout .delivery-option__item:has(input:focus-visible),
#checkout .address-item:has(input:focus-visible) { outline: 2px solid var(--mm-gold); outline-offset: 3px; }

/* radio masque visuellement, toujours atteignable au clavier */
#checkout .payment-option input[type="radio"],
#checkout .delivery-option__item input[type="radio"],
#checkout .address-item input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
#checkout .delivery-option__check { display: none; }

/* libelles : tout sur une ligne de base commune */
#checkout .payment-option__label,
#checkout .delivery-option__label {
  /* ps_checkout impose `.ps_checkout-payment-option label { display: inline !important }`
     sur son option PayPal : sans !important ici, cette carte-la perd la mise en page. */
  display: flex !important;
  align-items: center; gap: 12px;
  margin: 0; cursor: pointer; width: 100%;
}
#checkout .payment-option__name { font-size: 14.5px; color: var(--mm-ink); }
#checkout .delivery-option__carrier { display: flex; align-items: center; gap: 10px; }
#checkout .delivery-option__carrier-name { font-size: 14.5px; color: var(--mm-ink); }
#checkout .delivery-option__content { color: var(--mm-muted); font-size: 13px; margin-inline-start: auto; }
#checkout .delivery-option__price { font-size: 14.5px; color: var(--mm-ink); margin-inline-start: 18px; }

/* Colonnes du mode de livraison.
   Hummingbird fige `.delivery-option__left` à 40 % de la carte, sans possibilité de
   grandir. Dans notre colonne de tunnel (~430 px), il reste une soixantaine de pixels
   au libellé une fois le logo de 4rem posé : « Colissimo à domicile (contre signature) »
   se casse alors mot par mot. On rend la colonne élastique et on réduit le logo.
   En prime, `boxtalconnect` cherche `.delivery-option` puis se rabat sur
   `.delivery-option__left` (Hummingbird n'a pas la première) : son encart point relais
   atterrit DANS cette colonne, à côté du nom du transporteur, d'où le chevauchement.
   On le repasse sur sa propre ligne, pleine largeur. */
#checkout .delivery-option__label { flex-wrap: wrap; row-gap: 6px; align-items: flex-start; }
/* `flex-basis: 0` et non `auto` : sinon, dès que la colonne est large (encart point
   relais), elle passe à la ligne et laisse le faux radio seul au-dessus du nom. */
#checkout .delivery-option__left { flex: 1 1 0; min-width: 0; flex-wrap: wrap; align-items: flex-start; }
/* même hauteur de première ligne avec ou sans logo : le radio se cale sur son milieu */
#checkout .delivery-option__carrier { flex: 1 1 auto; min-width: 0; align-items: center; min-height: 2.5rem; }
#checkout .delivery-option__label::before { margin-top: 11px; }
#checkout .delivery-option__content,
#checkout .delivery-option__price { align-self: center; margin-top: 11px; }
#checkout .delivery-option__carrier-name { overflow-wrap: break-word; }
#checkout .delivery-option__carrier-logo { height: 2.5rem; width: 2.5rem; flex: 0 0 auto; }
#checkout .delivery-option__content,
#checkout .delivery-option__price { flex: 0 0 auto; }
#checkout .delivery-option__left .bx-extra-content {
  flex: 1 1 100%; margin-top: 8px;
  font-size: 13px; line-height: 1.6; color: var(--mm-muted);
}
#checkout .bx-select-parcel { text-decoration: underline; cursor: pointer; }

/* Boutons de validation d'étape alignés à droite, comme la première étape.
   Hummingbird met les étapes suivantes en `buttons-wrapper--split` (retour à gauche,
   validation à droite) ; comme `custom.js` masque les liens « retour » — ils n'ont
   plus de sens sur une page unique — le bouton restait seul, collé à gauche. */
#checkout .buttons-wrapper--split { justify-content: flex-end; }

/* icones de marque, poussees a droite */
#checkout .payment-option__brands {
  display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-wrap: wrap;
}
#checkout .payment-option__brands .lnk-brand { height: 26px; width: auto; display: block; }
#checkout .lnk-carrier-icon { height: 30px; width: auto; object-fit: contain; }
/* Quand on fournit nos propres icones, on masque tout ce que le module de paiement
   ajoute dans le label — y compris les marques injectees en JS apres le rendu
   (PS Checkout insere sa pastille PayPal, qui decalait notre icone). */
#checkout .payment-option__label:has(.payment-option__brands) > *:not(.payment-option__name):not(.payment-option__brands) {
  display: none !important;
}
#checkout .payment-option__label:has(.payment-option__brands) [paypal-mark-container] { display: none !important; }
/* le libelle occupe l'espace restant : les icones restent collees a droite */
#checkout .payment-option__name { flex: 1 1 auto; min-width: 0; }
#checkout .payment-option__label img.img-fluid { max-height: 26px; width: auto; }

@media (max-width: 575.98px) {
  #checkout .payment-option__label { flex-wrap: wrap; gap: 6px 10px; }
  #checkout .payment-option__brands { margin-left: 0; width: 100%; order: 9; justify-content: flex-start; gap: 5px; }
  #checkout .payment-option__brands .lnk-brand { height: 22px; }
  #checkout .delivery-option__content, #checkout .delivery-option__price { margin-left: 0; }
}

/* --- faux bouton radio dans les cartes (le vrai est masque) --- */
#checkout .payment-option__label::before,
#checkout .delivery-option__label::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 1.5px solid #cfc5ae;
  border-radius: 50%;
  background: var(--mm-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#checkout .payment-option:has(input:checked) .payment-option__label::before,
#checkout .delivery-option__item:has(input:checked) .delivery-option__label::before {
  border-color: var(--mm-gold);
  box-shadow: inset 0 0 0 4px var(--mm-gold);
}

/* ==========================================================================
   Etape « Informations personnelles » : onglets en haut a droite + carte
   retournable connexion / mot de passe oublie
   ========================================================================== */
#checkout-personal-information-step { position: relative; }
/* on reserve la place des onglets pour que le titre ne passe pas dessous */
#checkout-personal-information-step .step__title { padding-inline-end: 260px; }
#checkout .mm-pi-tabs {
  position: absolute; top: 22px; right: 20px;
  display: inline-flex; gap: 2px; z-index: 2;
  background: #f1ead9; border: 1px solid var(--mm-line); border-radius: 2px;
  padding: 2px; margin: 0;
}
#checkout .mm-pi-tabs .nav-item { margin: 0; }
#checkout .mm-pi-tabs .nav-link {
  border: 0; background: none; border-radius: 1px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mm-muted); padding: 5px 10px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
#checkout .mm-pi-tabs .nav-link:hover:not(.active) { color: var(--mm-ink); }
#checkout .mm-pi-tabs .nav-link.active {
  background: var(--mm-surface); color: var(--mm-ink);
  box-shadow: 0 1px 3px rgba(20, 15, 5, .12);
}

/* carte retournable */
#checkout .mm-flip { perspective: 1400px; }
#checkout .mm-flip__inner {
  position: relative; min-height: 250px;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4, .2, .2, 1);
}
#checkout .mm-flip.is-flipped .mm-flip__inner { transform: rotateY(180deg); }
#checkout .mm-flip__face {
  width: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: opacity .12s linear .28s;
}
#checkout .mm-flip__back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  opacity: 0; pointer-events: none;
}
#checkout .mm-flip.is-flipped .mm-flip__front { opacity: 0; pointer-events: none; }
#checkout .mm-flip.is-flipped .mm-flip__back { opacity: 1; pointer-events: auto; }

#checkout .mm-flip__back-btn {
  border: 0; background: none; padding: 0; margin: 0 0 14px;
  color: var(--mm-gold-dark); font-size: 12.5px; letter-spacing: .06em; cursor: pointer;
}
#checkout .mm-reset__title { font-family: var(--mm-serif); font-weight: 400; font-size: 22px; margin: 0 0 6px; color: var(--mm-ink); }
#checkout .mm-reset__lead { font-size: 13.5px; line-height: 1.7; color: var(--mm-muted); margin: 0 0 14px; max-width: 460px; }
#checkout .mm-reset__form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
#checkout .mm-reset__form input[type="email"] { flex: 1 1 240px; }
#checkout .mm-reset__msg:not(:empty) { margin-top: 14px; }

/* lien « mot de passe oublie » a cote du bouton de connexion */
#checkout .mm-login-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#checkout .mm-login-actions__forgot { font-size: 12.5px; letter-spacing: .06em; color: var(--mm-gold-dark); }

@media (max-width: 767.98px) {
  #checkout .mm-pi-tabs { position: static; margin-bottom: 16px; }
  #checkout-personal-information-step .step__title { padding-right: 0; }
  #checkout .mm-flip__inner { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  #checkout .mm-flip__inner, #checkout .mm-flip__face { transition: none; }
}

/* ==========================================================================
   Pages de contenu (CMS, rétractation, contact) — colonne de lecture centrée
   Plus étroite que le container : le texte long se lit mieux en ~70 caractères.
   ========================================================================== */
#cms .page-header,
#cms .page-content,
#cms .page-footer,
#contact .page-header,
#contact .page-content,
[id^="module-lnk_retractation"] .page-header,
[id^="module-lnk_retractation"] .page-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

#cms .page-header, [id^="module-lnk_retractation"] .page-header { padding-top: 26px; }


/* corps de texte */
.page-content--cms, [id^="module-lnk_retractation"] .page-content {
  font-size: 15.5px; line-height: 1.85; color: var(--mm-muted);
  padding-bottom: 60px;
}
.page-content--cms p { margin: 0 0 1.15em; }
.page-content--cms p:empty { display: none; }

/* titres intermédiaires : filet doré court, comme les en-têtes de section */
.page-content--cms h2 {
  font-family: var(--mm-serif); font-weight: 400; font-size: 28px; color: var(--mm-ink);
  margin: 2.2em 0 .8em; padding-bottom: .45em; position: relative;
}
.page-content--cms h2::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 46px; height: 1px; background: var(--mm-gold);
}
.page-content--cms h3 {
  font-family: var(--mm-serif); font-weight: 500; font-size: 21px; color: var(--mm-ink);
  margin: 1.8em 0 .6em;
}
.page-content--cms h4 { font-size: 15px; letter-spacing: .04em; color: var(--mm-ink-soft); margin: 1.4em 0 .5em; }
.page-content--cms strong { color: var(--mm-ink-soft); }
.page-content--cms a { color: var(--mm-gold-dark); text-decoration: underline; text-underline-offset: 2px; }

/* listes : puce dorée discrète */
.page-content--cms ul { list-style: none; padding-inline-start: 0; margin: 0 0 1.2em; }
.page-content--cms ul > li { position: relative; padding-inline-start: 1.5em; margin-bottom: .5em; }
.page-content--cms ul > li::before {
  content: ""; position: absolute; left: .35em; top: .75em;
  width: 5px; height: 5px; background: var(--mm-gold); border-radius: 50%;
}
.page-content--cms ol { padding-inline-start: 1.3em; margin: 0 0 1.2em; }
.page-content--cms ol > li { margin-bottom: .5em; }

/* la colonne de lecture reste confortable en RTL */
:is([dir="rtl"], .lang-rtl) .page-content--cms ul > li { padding-left: 0; padding-right: 1.5em; }
:is([dir="rtl"], .lang-rtl) .page-content--cms ul > li::before { left: auto; right: .35em; }
:is([dir="rtl"], .lang-rtl) .page-content--cms h2::after { left: auto; right: 0; }

/* ==========================================================================
   Titres de page (h1)
   Hummingbird pose `.page-title-section` sur le h1 de TOUTES les pages
   (catégorie, CMS, compte, contact, recherche, tunnel) : une seule règle suffit,
   la taille s'adapte à la largeur au lieu de multiplier les exceptions.
   ========================================================================== */
h1.page-title-section,
.page-header h1,
#category h1.page-title-section,
[id^="module-"] h1.page-title-section {
  font-family: var(--mm-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: .004em;
  color: var(--mm-ink);
  margin: 0 0 18px;
  text-wrap: balance;          /* évite le mot orphelin sur les titres longs */
}

/* sur fond sombre (tunnel allégé, pages sans en-tête clair) */
.mm-colight h1.page-title-section { color: var(--mm-on-dark-str); }

/* --- titre de l'accueil (module lnk_hometitle) --------------------------------
   Le H1 de l'accueil est un vrai titre texte, plus le logo : un seul H1 par page. */
.lnk-hometitle {
  max-width: var(--mm-container, 1320px); margin: 34px auto 6px; padding: 0 15px;
  text-align: center;
}
.lnk-hometitle__h1 {
  font-family: var(--mm-serif); font-weight: 400; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15; margin: 0; color: var(--mm-ink);
}
.lnk-hometitle__sub {
  margin: 12px auto 0; max-width: 760px;
  font-size: 15px; line-height: 1.75; color: var(--mm-muted);
}
@media (max-width: 575.98px) { .lnk-hometitle { margin-top: 22px; } }

/* --- direction du texte en arabe --- */
/* Un titre latin dans une page arabe est réordonné par l'algorithme
   bidirectionnel : « 5 volumes · reliure cuir » devient « volumes · reliure cuir 5 ».
   `plaintext` laisse chaque texte imposer sa propre direction. */
:is([dir="rtl"], .lang-rtl) .product-miniature__title,
:is([dir="rtl"], .lang-rtl) .product-miniature__meta,
:is([dir="rtl"], .lang-rtl) .product-miniature__stock,
:is([dir="rtl"], .lang-rtl) .product-title,
:is([dir="rtl"], .lang-rtl) .mm-editions__item,
:is([dir="rtl"], .lang-rtl) .product-features li,
:is([dir="rtl"], .lang-rtl) .breadcrumb li {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ==========================================================================
   Tiroir de navigation mobile
   Le menu mobile est produit par le MÊME widget ps_mainmenu que la barre du
   bandeau : les règles horizontales de `.mm-nav` retombaient dessus et rangeaient
   les rubriques côte à côte sur trois lignes serrées, illisibles. On repasse en
   pile dans le tiroir. Et les deux sélecteurs (devise, langue), déplacés en bas du
   tiroir par le thème, ouvraient leur liste vers le bas, hors de l'écran :
   `custom.js` leur pose la classe native `.dropup` à l'ouverture du tiroir.
   ========================================================================== */
/* ⚠️ NE PAS viser `ul` : le tiroir contient aussi les <ul class="dropdown-menu">
   des sélecteurs devise/langue, à qui un `display:block` retire le masquage de
   Bootstrap — les panneaux restent alors affichés en permanence sous les boutons. */
.mm-nav .ps-mainmenu--mobile .menu__list {
  display: block; gap: 0; margin: 0; padding: 0; list-style: none; text-align: start;
}
.mm-nav .ps-mainmenu--mobile .menu__list > li { display: block; }
/* ⚠️ viser les liens DU MENU seulement : un sélecteur sur `a` attrape aussi les
   items des listes devise/langue, qui sont sur fond sombre — texte noir sur noir. */
.mm-nav .ps-mainmenu--mobile .menu__list > li > a,
.ps-mainmenu--mobile .menu__link {
  display: block; width: 100%;
  padding: 14px 20px; font-size: 14px; letter-spacing: .06em;
  color: var(--mm-ink); border-bottom: 1px solid var(--mm-line);
}
.mm-nav .ps-mainmenu--mobile .menu__list > li > a:hover,
.ps-mainmenu--mobile .menu__link:hover { color: var(--mm-gold); background: #fbf7ec; }

/* Le tiroir est une colonne : la liste défile, la barre du bas reste posée dessous
   et entièrement visible — sinon elle déborde sous le bord de l'écran. */
.ps-mainmenu--mobile { display: flex; flex-direction: column; }
.ps-mainmenu--mobile .ps-mainmenu__mobile { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ps-mainmenu--mobile .ps-mainmenu__additionnals {
  flex: 0 0 auto;
  border-top: 1px solid var(--mm-line);
  /* de l'air autour des sélecteurs, et on tient compte de la barre système iOS */
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  /* `.offcanvas-body` défile : sans ça, la liste retournée est rognée en haut */
  overflow: visible;
}
/* cibles tactiles confortables dans le tiroir, et de l'air DANS le panneau qui
   s'ouvre vers le haut : sans ça, les libellés sont collés au bord gauche. */
.ps-mainmenu--mobile .mm-dropdown__toggle { padding: 10px 14px; font-size: 13px; }
.ps-mainmenu--mobile .mm-dropdown__menu { padding: 8px; min-width: 190px; }
.ps-mainmenu--mobile .mm-dropdown__menu .mm-dropdown__item,
.ps-mainmenu--mobile .mm-dropdown__menu .dropdown-item {
  padding: 12px 16px; gap: 12px; font-size: 13.5px;
}
.ps-mainmenu--mobile .ps-mainmenu__additionnals .dropdown-menu { margin-bottom: 6px; }

/* ==========================================================================
   Sous-menus (le client a ajouté des sous-catégories)
   ========================================================================== */

/* --- Desktop : méga-menu déroulant sous la barre de navigation ------------- */
.mm-nav .ps-mainmenu__tree-item-wrapper { display: flex; align-items: center; gap: 2px; }
.mm-nav .ps-mainmenu__tree-dropdown-toggle { color: #cdc3ad; padding: 15px 2px; }
.mm-nav .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle,
.mm-nav .ps-mainmenu__tree-dropdown-toggle:hover { color: var(--mm-gold); }

/* Hummingbird le rend en clair sur clair : illisible sous notre barre sombre. */
.mm-nav .submenu {
  background: var(--mm-dark-2);
  border-top: 1px solid #241f17;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.mm-nav .submenu__left {
  border-right: 1px solid rgba(255, 255, 255, .07);
  gap: 0; padding-block: 20px;
}
.mm-nav .submenu__left-item {
  color: #cdc3ad; font-size: 13px; letter-spacing: .05em;
  padding: 11px 14px; border-radius: 2px;
}
/* ⚠️ 2026-08-14 — le `padding: 11px 14px` ci-dessus était ÉCRASÉ.
   La règle générique du 1er niveau `.mm-nav .ps-mainmenu a { padding: 15px 0 }`
   pèse (0,2,1) et s'applique à TOUS les liens du composant, y compris ceux du
   méga-menu ; `.mm-nav .submenu__left-item` ne pèse que (0,2,0) et perdait.
   Mesuré avant correctif : padding = 15px 0px 15px 0px → padding-left à 0,
   d'où le libellé collé au bord et surtout l'aplat de survol (#241f17) qui
   épousait la première lettre au lieu de remplir la ligne.
   On rétablit avec (0,3,0) plutôt que de restreindre la règle générique :
   celle-ci porte aussi la typo (uppercase, letter-spacing, couleur) dont
   dépendent les autres liens du menu, y compris le tiroir mobile. */
.mm-nav .submenu .submenu__left-item { padding: 11px 14px; }
.mm-nav .submenu__left-item:hover,
.mm-nav .submenu__left-item:focus,
.mm-nav .submenu__left-item.active { background: #241f17; color: var(--mm-gold); }
.mm-nav .submenu__right { padding-block: 20px; }
.mm-nav .submenu__right a { color: #cdc3ad; }
.mm-nav .submenu__right a:hover { color: var(--mm-gold); }

/* --- Mobile : rubrique + chevron sur la même ligne, panneau enfant lisible -- */
.mm-nav .ps-mainmenu--mobile .menu__list > li {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--mm-line);
}
.mm-nav .ps-mainmenu--mobile .menu__list > li > a { flex: 1 1 auto; border-bottom: 0; }
.ps-mainmenu--mobile .menu__toggle-child {
  flex: 0 0 auto; width: 52px; height: 52px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mm-muted-2);
}
.ps-mainmenu--mobile .menu__toggle-child:hover { color: var(--mm-gold); }
.ps-mainmenu--mobile .menu { padding: 0; }
.ps-mainmenu--mobile .menu__title {
  padding: 16px 20px 12px;
  font-family: var(--mm-serif); font-size: 20px; color: var(--mm-ink);
}
/* 2026-08-14 : le panneau enfant reprenait EXACTEMENT le retrait du 1er niveau
   (14px 20px), donc rien ne signalait visuellement qu'on est descendu d'un cran.
   On décale les items du sous-menu, et son titre avec eux pour que le panneau
   reste aligné sur lui-même.

   ⚠️ NE PAS cibler `.menu--child` : cette classe n'existe QUE dans le HTML rendu
   par le serveur. À l'ouverture, le JS Hummingbird la retire et la remplace par
   `menu--current`, en basculant le 1er niveau en `menu--parent`. Mesuré en direct :
     NAV[0] "menu menu--mobile menu--parent"                    depth=0 display:none
     NAV[1] "menu menu--mobile js-menu-current menu--fromRight menu--current" depth=2
   => une règle sur `.menu--child` ne s'applique JAMAIS quand le panneau est visible.
   On s'appuie sur `data-depth`, qui vient du serveur et que le JS ne modifie pas ;
   le `:not([data-depth="0"])` couvre aussi d'éventuels niveaux 3+.

   ⚠️ `padding-inline-start` et non `padding-left` : l'arabe est actif en RTL
   (is_rtl=1) — en physique, le retrait tomberait du mauvais côté.
   ⚠️ Spécificité : `.mm-nav .ps-mainmenu--mobile .menu__list > li > a` pèse (0,3,2)
   et le tiroir EST dans `.mm-nav` — un sélecteur plus léger serait ignoré. */
.mm-nav .ps-mainmenu--mobile .menu[data-depth]:not([data-depth="0"]) .menu__list > li > a,
.mm-nav .ps-mainmenu--mobile .menu[data-depth]:not([data-depth="0"]) .menu__link,
.mm-nav .ps-mainmenu--mobile .menu[data-depth]:not([data-depth="0"]) .menu__title {
  padding-inline-start: 36px;
}

.ps-mainmenu--mobile .js-back-button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  color: var(--mm-ink); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
}
.ps-mainmenu--mobile .js-back-button:hover { color: var(--mm-gold); }

/* MSB 2026-08-11 : iOS zoome automatiquement au focus d un champ < 16px,
   ce qui poussait le bouton Annuler du panneau de recherche hors ecran.
   16px sur mobile = plus de zoom auto (le desktop garde 14px). */
@media (max-width: 767.98px) {
  .ps-searchbar__offcanvas .ps-searchbar__input { font-size: 16px; }
}

/* MSB 2026-08-11 : empeche le defilement de la page derriere un panneau ouvert (iOS) */
.offcanvas, .offcanvas-body { overscroll-behavior: contain; }

/* MSB 2026-08-12 : sous 1200px le rang menu ne contient que le burger ;
   centre, il flottait sans repere visuel -> aligne a gauche sur le bord
   du contenu, comme la loupe du bandeau au-dessus. */
@media (max-width: 1199.98px) {
  .mm-nav__inner { justify-content: flex-start; }
  .mm-nav .menu-toggle { padding-left: 0; }
}

/* MSB 2026-08-12 : burger integre au bandeau haut sur mobile (gain d une ligne) */
@media (max-width: 767.98px) {
  /* ne PAS masquer .mm-nav en display:none : #mobileMenu (offcanvas) vit dedans.
     On ecrase visuellement la barre en la reduisant a zero. */
  .mm-nav--merged { border-top: 0; }
  .mm-nav--merged .mm-nav__inner { min-height: 0; height: 0; padding: 0; overflow: visible; }
  .mm-nav--merged .ps-mainmenu__mobile-toggle { display: none; }
  .mm-masthead__search { display: flex; align-items: center; gap: 2px; }
  .mm-masthead__search .menu-toggle { padding: 4px 6px; color: var(--mm-on-dark); }
}