/* =====================================================================
   Des étoiles dans leurs yeux — Design system « nuit étoilée »
   Thème desetoiles (enfant de Classic). Chargé en dernier (priority 1000),
   restyle l'ensemble du site. Permanent ; la surcouche saisonnière Lutins
   vient par-dessus (module destoiles_homelutins).
   ===================================================================== */
@import url("fonts.css");

:root{
  --ink:#0f0b1e; --night:#1a1130; --night2:#251846; --plum:#2f1f55;
  --gold:#e8c061; --gold-soft:#f3d98c; --aqua:#9fe4e6; --aqua-deep:#5fb8bd;
  --cream:#f7f1e6; --rouge:#cf5a52; --pine:#5a8f6e;
  --text:#ece6f5; --muted:#b6aacb; --line:rgba(232,192,97,.16);
  --serif:'Cormorant Garamond', Georgia, serif;
  --script:'Pinyon Script', cursive;
  --sans:'Mulish', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- base */
body{
  font-family:var(--sans); color:var(--text); line-height:1.6;
  background:var(--ink);
  background-image:
    radial-gradient(1200px 700px at 80% -10%, var(--plum) 0%, transparent 55%),
    radial-gradient(900px 600px at 10% 0%, rgba(95,184,189,.10) 0%, transparent 50%),
    linear-gradient(180deg, var(--night) 0%, var(--ink) 60%);
  background-attachment:fixed;
}
/* champ d'étoiles ambiant, statique et léger */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 75% 18%, var(--gold) 50%, transparent),
    radial-gradient(1px 1px at 45% 55%, var(--aqua) 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, #fff 50%, transparent),
    radial-gradient(1px 1px at 33% 80%, var(--gold-soft) 50%, transparent),
    radial-gradient(1.5px 1.5px at 62% 88%, #fff 50%, transparent),
    radial-gradient(1px 1px at 10% 68%, var(--aqua) 50%, transparent);
  background-repeat:no-repeat;
}
#wrapper, #main, .container, #content-wrapper{ position:relative; z-index:1; background:transparent !important; }
#wrapper{ box-shadow:none !important; }

a{ color:var(--gold-soft); transition:color .2s, opacity .2s; }
a:hover, a:focus{ color:var(--gold); text-decoration:none; }
h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-family:var(--serif); color:#fff; font-weight:600; letter-spacing:-.01em; }
p, li, .form-control, label, span, td, th{ color:var(--text); }
small,.text-muted,.small{ color:var(--muted) !important; }
hr{ border-color:var(--line); }

/* --------------------------------------------------------- header / nav */
#header{
  background:linear-gradient(180deg, rgba(26,17,48,.92), rgba(15,11,30,.92)) !important;
  border-bottom:1px solid var(--line); box-shadow:0 10px 40px -20px #000;
  backdrop-filter:blur(8px);
}
#header .header-nav{ background:transparent !important; border-bottom:1px solid var(--line); padding:6px 0; }
#header .header-nav a, #header .header-top a{ color:var(--text); }
#header .header-nav a:hover{ color:var(--gold-soft); }
#header .header-top{ background:transparent !important; padding:16px 0; }
#_desktop_logo img, #_mobile_logo img{ filter:drop-shadow(0 0 14px rgba(159,228,230,.35)); }

/* menu principal */
#_desktop_top_menu .top-menu a.dropdown-item,
#_desktop_top_menu .top-menu a{ color:var(--text) !important; font-weight:600; letter-spacing:.02em; }
#_desktop_top_menu .top-menu a:hover{ color:var(--gold-soft) !important; }
.menu-bottom, #top-menu{ background:transparent !important; }
.top-menu .sub-menu, #_desktop_top_menu .sub-menu{
  background:var(--night2) !important; border:1px solid var(--line) !important; border-radius:14px;
  box-shadow:0 30px 60px -28px #000;
}

/* recherche */
#search_widget form input[type=text], .ui-autocomplete-input{
  background:rgba(15,11,30,.6) !important; border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important; border-radius:999px !important; padding-left:18px !important;
}
#search_widget form input::placeholder{ color:var(--muted) !important; }
#search_widget form button, #search_widget .search{ color:var(--gold-soft) !important; }

/* icônes compte / panier */
.header-top .blockcart, #_desktop_cart, #_desktop_user_info{ color:var(--text); }
.blockcart.active{ background:transparent !important; }
.cart-products-count, .blockcart .header{ color:var(--gold-soft) !important; }

/* ------------------------------------------------------------- boutons */
.btn-primary, .btn.btn-primary{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)) !important;
  border:0 !important; color:#3a2a08 !important; font-weight:700; border-radius:999px;
  box-shadow:0 10px 30px -10px rgba(232,192,97,.55); transition:transform .18s, box-shadow .18s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(232,192,97,.7); color:#3a2a08 !important; }
.btn-secondary, .btn.btn-secondary, .btn-tertiary{
  background:transparent !important; border:1px solid rgba(159,228,230,.5) !important;
  color:var(--aqua) !important; font-weight:700; border-radius:999px;
}
.btn-secondary:hover{ background:rgba(159,228,230,.1) !important; color:var(--aqua) !important; }
.btn-unstyle{ color:inherit; }

/* ------------------------------------------------------- titres section */
.featured-products .products-section-title, .products-section-title,
h1.h1, .page-header h1, #content .h2.products-section-title{
  font-family:var(--serif) !important; color:#fff !important; font-weight:600 !important;
  text-transform:none !important; font-size:42px; text-align:center; letter-spacing:-.01em;
  position:relative; padding-bottom:14px; margin:14px 0 36px;
}
.products-section-title::after{
  content:""; display:block; width:60px; height:2px; margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* --------------------------------------------------------- cartes produit */
.product-miniature .thumbnail-container,
.product-miniature .card, .js-product-miniature .thumbnail-container{
  background:linear-gradient(180deg,rgba(47,31,85,.55),rgba(26,17,48,.55)) !important;
  border:1px solid var(--line) !important; border-radius:18px !important;
  overflow:hidden; box-shadow:none !important; transition:transform .25s, border-color .25s, box-shadow .25s;
}
.product-miniature:hover .thumbnail-container{
  transform:translateY(-8px); border-color:rgba(232,192,97,.5) !important;
  box-shadow:0 30px 60px -28px #000 !important;
}
.product-miniature .product-title a, .product-title a{ color:#fff !important; font-family:var(--serif); font-size:18px; font-weight:600; }
.product-miniature .product-title a:hover{ color:var(--gold-soft) !important; }
.product-price-and-shipping .price, .product-price, .price{
  font-family:var(--serif) !important; color:var(--gold-soft) !important; font-weight:700; font-size:22px;
}
.product-flags .product-flag, .product-flag{
  background:var(--gold) !important; color:#3a2a08 !important; border-radius:999px !important;
  font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; box-shadow:none;
}
.product-flag.new, .product-flag.online-only{ background:var(--aqua) !important; color:#0c2a2b !important; }
.product-flag.discount, .product-flag.on-sale{ background:var(--rouge) !important; color:#fff !important; }
.product-miniature .highlighted-informations, .product-miniature .variant-links{
  background:rgba(15,11,30,.7) !important; border-top:1px solid var(--line) !important;
}
.product-list-reviews .star, .star_content .star{ color:var(--gold) !important; }

/* product flags & comments stars generic */
.comments_note .star_content .star.star_on::before{ color:var(--gold); }

/* ------------------------------------------------------ blocs / cartes UI */
.card, .block, .page-content, .page-wrapper, #content.page-content,
.block-categories, .block_newsletter, .linklist, #search_filters{
  background:linear-gradient(180deg,rgba(47,31,85,.35),rgba(26,17,48,.45)) !important;
  border:1px solid var(--line) !important; border-radius:16px; color:var(--text);
}
.card-block, .card-body{ background:transparent !important; }

/* custom text block (home) */
#custom-text{
  background:linear-gradient(180deg,rgba(47,31,85,.45),rgba(26,17,48,.55)) !important;
  border:1px solid var(--line) !important; border-radius:22px; color:var(--text);
}
#custom-text h2, #custom-text h3{ color:#fff; }
#custom-text p{ color:var(--muted); }

/* --------------------------------------------------------- formulaires */
.form-control, input[type=text], input[type=email], input[type=password],
input[type=tel], textarea, select, .input-group .form-control{
  background:rgba(15,11,30,.55) !important; border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important; border-radius:12px;
}
.form-control:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(232,192,97,.15) !important; }
.form-control::placeholder{ color:var(--muted) !important; }
.custom-select, select.form-control{ color:#fff !important; }

/* breadcrumb */
.breadcrumb{ background:transparent !important; }
.breadcrumb li a{ color:var(--muted); }
.breadcrumb li.active span{ color:var(--gold-soft); }
.breadcrumb li::after{ color:var(--muted); }

/* ------------------------------------------------------------- footer */
#footer{
  background:linear-gradient(180deg, var(--ink), #0b0817) !important;
  border-top:1px solid var(--line); margin-top:40px; position:relative; z-index:1;
}
.footer-container{ background:transparent !important; box-shadow:none !important; padding-top:40px; }
#footer .h3, #footer .title, .footer-container .h3, #footer h3{
  color:var(--gold-soft) !important; text-transform:uppercase; letter-spacing:.08em; font-family:var(--sans); font-size:13px; font-weight:800;
}
#footer a, .footer-container a, #footer li a{ color:var(--muted) !important; }
#footer a:hover{ color:var(--gold-soft) !important; }
.block_newsletter, #blockEmailSubscription_displayFooterBefore{
  background:transparent !important; border:0 !important;
}
.block_newsletter p, #block-newsletter-label{ color:var(--text) !important; }
#footer .block_newsletter input[type=email]{
  background:rgba(15,11,30,.6) !important; border:1px solid rgba(255,255,255,.16) !important; color:#fff !important; border-radius:999px;
}

/* page footer copyright / bottom bar */
.footer__copyright, #footer .copyright, .js-footer-account-list{ color:var(--muted) !important; }

/* --------------------------------------------------------- divers */
.page-header, .page-title{ color:#fff; }
.modal-content{ background:var(--night2) !important; color:var(--text); border:1px solid var(--line); }
.alert-success{ background:rgba(90,143,110,.18) !important; border-color:var(--pine) !important; color:#dff3e6 !important; }
.alert-warning{ background:rgba(232,192,97,.14) !important; border-color:var(--gold) !important; color:var(--gold-soft) !important; }
.alert-danger{ background:rgba(207,90,82,.16) !important; border-color:var(--rouge) !important; color:#ffd9d6 !important; }
.dropdown-menu{ background:var(--night2) !important; border:1px solid var(--line) !important; }
.dropdown-item{ color:var(--text) !important; }
.dropdown-item:hover{ background:rgba(232,192,97,.1) !important; color:var(--gold-soft) !important; }

/* pagination */
.pagination .page-link, .pagination a, .pagination span{
  background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important; color:var(--text) !important; border-radius:999px;
}
.pagination .current .page-link, .pagination .active .page-link{ background:var(--gold) !important; color:#3a2a08 !important; border-color:transparent !important; }

/* tables */
.table, table{ color:var(--text); }
.table thead th{ border-color:var(--line); color:var(--gold-soft); }
.table td, .table th{ border-color:rgba(255,255,255,.08); }

/* ---- raffinements cartes produit (zone info était blanche) ---- */
.product-miniature .thumbnail-container .product-description,
.product-miniature .product-description{
  background:transparent !important; padding:14px 14px 16px !important; border:0 !important; box-shadow:none !important;
}
.product-miniature .thumbnail-top{ background:transparent !important; }
.product-miniature .product-thumbnail{ display:block; background:transparent !important; }
.product-miniature .product-thumbnail img{ width:100%; height:auto; display:block; border-radius:16px 16px 0 0; }
.product-miniature .highlighted-informations{
  background:rgba(15,11,30,.88) !important; border-top:1px solid var(--line) !important;
}
.product-miniature .highlighted-informations a, .quick-view{ color:var(--aqua) !important; }
.product-miniature .comments-nb, .product-miniature .grade-stars .star{ color:var(--gold) !important; }
.product-price-and-shipping{ margin-top:6px; }

/* ---- icônes Material : préserver la police icône ---- */
.material-icons{ font-family:'Material Icons' !important; }

/* ---- header lisibilité ---- */
#contact-link, #contact-link a, .user-info a, .header-nav a,
.header-top a span, .header-nav span, .blockcart a{ color:var(--text) !important; }
.user-info a:hover, #contact-link a:hover{ color:var(--gold-soft) !important; }
#_desktop_logo .logo, #_desktop_logo img{ max-height:64px; width:auto; }

/* ---- hero slider : lisibilité du texte sur image ---- */
.carousel .caption-description, .homeslider-description, #carousel .caption,
.carousel .display-1, .carousel h2{ color:#fff !important; text-shadow:0 2px 14px rgba(0,0,0,.7); }

/* =====================================================================
   FICHE PRODUIT (Phase 2)
   ===================================================================== */
#product .product-information, #product .product-actions{ color:var(--text); }
#product h1, #product .page-header h1{ font-family:var(--serif); color:#fff; }

/* Galerie */
#product .product-cover{ border-radius:18px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.03); }
#product .product-cover img{ border-radius:18px; }
#product .product-images img, #product .images-container .thumb{ border-radius:12px; border:1px solid var(--line); }
#product .product-images li.selected img, #product .product-images img.selected{ border-color:var(--gold) !important; }
#product .scroll-box-arrows i{ color:var(--gold-soft); }

/* Prix (le prix est .product-price, dans .current-price) */
#product .product-prices .current-price,
#product .current-price .product-price,
#product .product-price.current-price{ font-family:var(--serif) !important; color:var(--gold-soft) !important; font-size:34px !important; font-weight:700; }
#product .product-prices .regular-price{ color:var(--muted); text-decoration:line-through; }
#product .product-discount .discount, #product .has-discount .discount{ background:var(--rouge) !important; color:#fff !important; border-radius:999px; }
#product .tax-shipping-delivery-label, #product .product-unit-price{ color:var(--muted); }

/* Description : carte CLAIRE (préserve la mise en forme des fiches : texte noir/rouge/emojis).
   Vrai élément = .product-information .product-description (id product-description-short-XX).
   Scopé sous .product-information / onglets => ne touche PAS les cartes produit (miniatures). */
#product .product-information .product-description,
#product .tab-content .product-description,
#product .product-tabs .product-description,
#product [id^="product-description-short"]{
  background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important;
  color:var(--text) !important; line-height:1.75;
}
/* Texte codé en NOIR (#000000) -> clair ; les autres couleurs (rouge #d0121a...) sont gardées */
#product .product-description [style*="#000000"],
#product .product-description [style*="color:#000;"],
#product .product-description [style*="color: #000;"],
#product .product-description [style*="color:black"]{ color:var(--cream) !important; }
#product .product-description strong{ color:#fff; }
#product .product-description a{ color:var(--gold-soft) !important; }

/* Description déplacée en PLEINE LARGEUR sous les photos */
#product .product-fulldesc{ margin:36px 0 8px; padding-top:30px; border-top:1px solid var(--line); }
#product .product-fulldesc .product-description{ font-size:16px; color:var(--text) !important; }
#product .product-fulldesc h2, #product .product-fulldesc h3{ font-family:var(--serif); color:#fff; }

/* Onglets (Description / Détails) */
#product .tabs{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0; }
#product .tabs .nav-tabs{ border-bottom:1px solid var(--line); }
#product .tabs .nav-tabs .nav-link{ color:var(--muted) !important; border:0 !important; background:transparent !important; font-weight:700; }
#product .tabs .nav-tabs .nav-link.active{ color:#fff !important; border-bottom:2px solid var(--gold) !important; }

/* Quantité + Ajouter au panier */
#product .product-quantity .qty, #product #quantity_wanted{ }
#product .bootstrap-touchspin .btn, #product .input-group-btn-vertical .btn{ background:rgba(255,255,255,.05) !important; border:1px solid var(--line) !important; color:var(--gold-soft) !important; }
#product .product-add-to-cart .add-to-cart, #product .product-actions .add-to-cart{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)) !important; color:#3a2a08 !important; border:0 !important;
  border-radius:999px; font-weight:800; padding:15px 30px; box-shadow:0 10px 30px -10px rgba(232,192,97,.55);
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px; text-align:center;
}
#product .product-add-to-cart .add-to-cart .material-icons{ margin:0 !important; }
#product .product-add-to-cart .add-to-cart:hover{ transform:translateY(-2px); }

/* Variantes / déclinaisons */
#product .product-variants .control-label{ color:var(--cream); }
#product .product-variants .input-container, #product .product-variants select{ color:#fff; }

/* Caractéristiques (data sheet) */
#product .product-features .data-sheet{ color:var(--text); }
#product .product-features dt.name, #product .data-sheet .name{ color:var(--gold-soft); background:transparent; }
#product .product-features dd.value, #product .data-sheet .value{ color:var(--text); background:transparent; }

/* Réassurance produit */
#product .blockreassurance_product *{ color:var(--text) !important; }
#product .blockreassurance_product svg path{ fill:var(--gold-soft); }

/* Produits liés / accessoires : cartes déjà gérées (.product-miniature) */
#product .product-accessories h2, #product .featured-products h2{ color:#fff; font-family:var(--serif); }

/* =====================================================================
   EN-TÊTE (pages internes) — version féérique, plus de "Classic brut"
   ===================================================================== */
#header{ box-shadow:0 1px 0 rgba(232,192,97,.18), 0 24px 60px -45px #000; }
#header .header-nav{ padding:9px 0; border-bottom:1px solid var(--line); }
#header .header-nav, #header .header-nav .container{ min-height:0; }
#header #contact-link, #header .header-nav .contact-rich{ font-size:13px; letter-spacing:.04em; color:var(--muted); }
#header #contact-link a{ color:var(--gold-soft) !important; font-weight:700; }
#header .header-top{ padding:16px 0 20px; }

/* Logo + wordmark (comme la nav de l'accueil) */
#header #_desktop_logo img, #header .logo img{ max-height:66px; width:auto; filter:drop-shadow(0 0 16px rgba(159,228,230,.45)); }
#header .dhl-brand{ display:flex; align-items:center; gap:14px; margin:0; }
#header .dhl-brand a{ display:inline-flex; line-height:0; }
#header .dhl-wordmark{ font-family:'Pinyon Script', cursive; font-size:30px; color:var(--cream); line-height:1; white-space:nowrap; }
@media (max-width:1100px){ #header .dhl-wordmark{ font-size:22px; } }

/* Menu principal */
#header .top-menu .nav-item > a, #header #_desktop_top_menu a.dropdown-item, #header #_desktop_top_menu .top-menu a{
  color:var(--text) !important; font-weight:600; letter-spacing:.02em;
}
#header .top-menu .nav-item > a:hover, #header #_desktop_top_menu a:hover{ color:var(--gold-soft) !important; }

/* Recherche : champ arrondi, focus or */
#header #search_widget input[type=text], #header .ui-autocomplete-input{
  background:rgba(15,11,30,.6) !important; border:1px solid rgba(232,192,97,.3) !important;
  border-radius:999px !important; color:#fff !important; padding:12px 20px !important;
}
#header #search_widget input:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(232,192,97,.15) !important; }
#header #search_widget button[type=submit], #header #search_widget .search{ color:var(--gold-soft) !important; }
#header #search_widget input::placeholder{ color:var(--muted) !important; }

/* Compte + panier : pastilles dorées élégantes */
#header #_desktop_user_info .user-info a, #header #_desktop_cart .blockcart{
  display:inline-flex; align-items:center; gap:9px; color:var(--text) !important;
  border:1px solid rgba(232,192,97,.35); border-radius:999px; padding:9px 17px;
  background:rgba(232,192,97,.05); transition:border-color .2s, color .2s, background .2s;
}
#header #_desktop_user_info .user-info a:hover, #header #_desktop_cart .blockcart:hover{
  border-color:var(--gold); color:var(--gold-soft) !important; background:rgba(232,192,97,.1);
}
/* En-tête bespoke : le widget panier ne porte PAS la pastille (c'est l'icône .iconbtn dedans qui l'a). */
#header .dhl-chrome #_desktop_cart, #header .dhl-chrome #_desktop_cart .blockcart{
  display:contents !important; border:0 !important; padding:0 !important; background:transparent !important;
}
#header .blockcart .cart-products-count{ background:var(--rouge); color:#fff; border-radius:999px; min-width:20px; height:20px; display:inline-grid; place-items:center; font-size:11px; font-weight:800; }
#header .material-icons{ color:inherit; }

/* =====================================================================
   PAGES CATÉGORIE / LISTING (navigation catalogue)
   ===================================================================== */
#js-product-list-header{ background:transparent !important; }
#js-product-list-header .h1, body.category h1.h1, #left-column + #content h1.h1{
  font-family:var(--serif) !important; color:#fff !important; font-size:42px; letter-spacing:-.01em;
}
#js-product-list-header #category-description, #category-description, .category-description, .block-category .text{ color:var(--muted) !important; }
#js-product-list-header #category-description *, #category-description *{ color:inherit; }
.category-cover img, #js-product-list-header img.category-img{ border-radius:16px; border:1px solid var(--line); }

/* Sous-catégories */
.category-top-menu, .subcategories{ background:transparent !important; }
.category-top-menu .category-sub__item a, .subcategories a{ color:var(--gold-soft) !important; }

/* Barre tri + compteur */
#js-product-list-top{ border-bottom:1px solid var(--line); padding-bottom:10px; }
.total-products p, .products-count, #js-product-list-top .col-md-6{ color:var(--muted) !important; }
.products-sort-order .select-title{ background:rgba(15,11,30,.6) !important; border:1px solid rgba(232,192,97,.3) !important; color:#fff !important; border-radius:999px !important; }
.products-sort-order .dropdown-menu{ background:var(--night2) !important; border:1px solid var(--line) !important; }
.products-sort-order .dropdown-menu a{ color:var(--text) !important; }
.products-sort-order .dropdown-menu a:hover{ background:rgba(232,192,97,.1) !important; color:var(--gold-soft) !important; }

/* Colonne filtres (recherche à facettes) */
#search_filters, #search_filters_wrapper, #left-column .block, #left-column .ps-shown-by-js{
  background:linear-gradient(180deg,rgba(47,31,85,.4),rgba(26,17,48,.5)) !important;
  border:1px solid var(--line) !important; border-radius:16px;
}
#search_filters .h6, #search_filters .facet-title, #left-column .block .title h4{ color:var(--gold-soft) !important; }
#search_filters .facet, #search_filters .collapse{ border-color:var(--line) !important; }
#search_filters .facet-label a, #left-column a, #search_filters label{ color:var(--text) !important; }
#search_filters .facet-label a:hover{ color:var(--gold-soft) !important; }
#search_filters .custom-checkbox span, #search_filters .custom-radio{ border-color:rgba(232,192,97,.4) !important; }
#search_filters .magnitude{ color:var(--muted) !important; }
#search_filters .ui-slider, .ui-slider-range{ background:rgba(255,255,255,.08) !important; }
.ui-slider-range{ background:var(--gold) !important; }
.ui-slider-handle{ background:var(--gold-soft) !important; border:0 !important; }

/* Filtres actifs */
#js-active-search-filters, .active_filters{ background:rgba(232,192,97,.07) !important; border:1px solid var(--line) !important; border-radius:14px; color:var(--text); }
.active_filters .filter-block, .js-search-link{ background:var(--night2) !important; color:var(--text) !important; border:1px solid var(--line) !important; }

/* Grille produits : déjà gérée par .product-miniature (skin global) */
#js-product-list .products{ margin-top:20px; }

/* =====================================================================
   PANIER + TUNNEL DE COMMANDE + COMPTE (restyle)
   ===================================================================== */
#cart .cart-grid-body .card, #cart .cart-summary, #cart .cart-detailed-totals,
#checkout .card, #checkout .cart-summary, #order-confirmation .card,
#authentication .card, #identity .card, #my-account .card, #history .card,
#addresses .card, #address .card, #module-ps_emailsubscription-subscription .card{
  background:linear-gradient(180deg,rgba(47,31,85,.42),rgba(26,17,48,.55)) !important;
  border:1px solid var(--line) !important; border-radius:16px; color:var(--text); box-shadow:none !important;
}
.card-header, .card-block, .card-body, .card-footer{ background:transparent !important; border-color:var(--line) !important; color:var(--text); }
/* Panier : lignes produit */
#cart .cart-item{ border-bottom:1px solid var(--line) !important; }
#cart .product-line-info a, #cart .label, #cart .product-line-info .label{ color:#fff !important; }
#cart .product-price, #cart .cart-line-product-actions, #cart .value, .cart-summary-line .value,
#cart .cart-total .value, #cart .current-price{ color:var(--gold-soft) !important; }
#cart .cart-summary-line, #cart .cart-detailed-totals span, #cart .label{ color:var(--text); }
#cart .cart-summary-subtotals-container, #cart .cart-total{ border-top:1px solid var(--line); }
.block-promo .promo-code, .block-promo .promo-input{ background:rgba(15,11,30,.5) !important; border-color:var(--line) !important; color:#fff; }
.block-promo .promo-code-button, .cart-summary .collapse-button{ color:var(--gold-soft) !important; }
/* Boutons principaux panier/commande */
#cart .checkout a.btn, #cart .cart-detailed-actions .btn-primary,
#checkout .continue, #checkout button[type=submit].btn-primary, #checkout #payment-confirmation button,
.page-order .btn-primary, .order-actions .btn-primary{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)) !important; color:#3a2a08 !important;
  border:0 !important; border-radius:999px; font-weight:800;
}
/* Tunnel de commande : étapes */
#checkout .checkout-step{ background:linear-gradient(180deg,rgba(47,31,85,.35),rgba(26,17,48,.5)) !important; border:1px solid var(--line) !important; border-radius:16px; margin-bottom:14px; }
#checkout .step-title, #checkout .h3.step-title{ color:#fff !important; font-family:var(--serif); }
#checkout .checkout-step.-current{ border-color:rgba(232,192,97,.5) !important; }
#checkout .step-number{ background:var(--gold) !important; color:#3a2a08 !important; }
#checkout .step-edit, #checkout .step-title .done{ color:var(--gold-soft) !important; }
#checkout .delivery-option, #checkout .payment-option, #checkout .payment-options label{
  background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important; border-radius:12px; color:var(--text);
}
#checkout .delivery-option.selected, #checkout .payment-option.selected{ border-color:var(--gold) !important; }
#js-checkout-summary, .checkout-process .cart-summary{ position:relative; }
/* Compte client / login */
#authentication .form-control, #identity .form-control, #checkout .form-control{ color:#fff !important; }
.account-links a, #my-account .link-item{ background:linear-gradient(180deg,rgba(47,31,85,.4),rgba(26,17,48,.55)) !important; border:1px solid var(--line) !important; border-radius:16px; color:var(--text) !important; }
.account-links a:hover, #my-account .link-item:hover{ border-color:rgba(232,192,97,.5) !important; color:var(--gold-soft) !important; }
.account-links a i, #my-account .link-item i{ color:var(--gold-soft) !important; }
/* Tables (commandes, adresses) */
#history table, #order-detail table, .table-labeled{ color:var(--text); }
#history table thead th, .table-labeled thead th{ color:var(--gold-soft); border-color:var(--line); }
#history table td, .table-labeled td, .table-labeled th{ border-color:rgba(255,255,255,.08); }

/* =====================================================================
   PAGES CMS
   ===================================================================== */
#cms #content.page-content, #cms .page-content, .cms-id .page-content{
  background:linear-gradient(180deg,rgba(47,31,85,.35),rgba(26,17,48,.5)) !important;
  border:1px solid var(--line) !important; border-radius:18px; padding:30px 34px; color:var(--text);
}
#cms .page-content h1, #cms .page-content h2, #cms .page-content h3{ font-family:var(--serif); color:#fff; }
#cms .page-content [style*="#000000"], #cms .page-content [style*="color:#000;"], #cms .page-content [style*="color:black"]{ color:var(--cream) !important; }
#cms .page-content a{ color:var(--gold-soft) !important; }

/* =====================================================================
   LISIBILITÉ RENFORCÉE : pop-up panier + panier + commande + adresses
   ===================================================================== */
/* Pop-up "Produit ajouté au panier" */
#blockcart-modal .modal-content, #blockcart-modal .modal-header, #blockcart-modal .modal-body, #blockcart-modal .modal-dialog .modal-content{
  background:var(--night2) !important; border:1px solid var(--line) !important; color:var(--text) !important;
}
#blockcart-modal .modal-title, #blockcart-modal h6, #blockcart-modal .h6, #blockcart-modal .product-name,
#blockcart-modal .cart-content *, #blockcart-modal .modal-body *{ color:var(--text) !important; }
#blockcart-modal .product-name, #blockcart-modal .h6.product-name{ color:#fff !important; font-weight:700; }
#blockcart-modal .product-price, #blockcart-modal .value, #blockcart-modal .cart-products-count,
#blockcart-modal .subtotal .value, #blockcart-modal .product-total .value{ color:var(--gold-soft) !important; }
#blockcart-modal .cart-content-btn .btn-secondary{ border-color:rgba(159,228,230,.5) !important; color:var(--aqua) !important; }
#blockcart-modal .close, #blockcart-modal .material-icons{ color:var(--text) !important; opacity:.85; }
#blockcart-modal hr{ border-color:var(--line) !important; }

/* Texte courant clair partout sur ces pages (les gris foncés -> clairs) */
#cart, #checkout, #order-confirmation, #authentication, #address, #addresses, #my-account, #history, #order-detail{ color:var(--text); }
#checkout .form-control-label, #cart .form-control-label, #checkout label, #cart label,
#checkout .control-label, #checkout .custom-radio + span, #checkout .custom-checkbox + span{ color:var(--cream) !important; }
#checkout .checkout-step .content, #checkout .step-title, #checkout p, #cart p,
#order-confirmation p, #order-confirmation td, #order-confirmation th{ color:var(--text) !important; }
#checkout .nav-inline a, #checkout #login-form a, #checkout .forgot-password a, #cart a, #checkout a{ color:var(--gold-soft) !important; }
#checkout .checkout-step.-current .content{ color:var(--text) !important; }

/* Sélecteur d'adresses */
.address-selector .address, #checkout .address-item, #address .address, #addresses .address{
  background:linear-gradient(180deg,rgba(47,31,85,.4),rgba(26,17,48,.55)) !important;
  border:1px solid var(--line) !important; border-radius:14px; color:var(--text) !important;
}
.address-selector .address.selected, #checkout .address-item.selected{ border-color:var(--gold) !important; box-shadow:0 0 0 2px rgba(232,192,97,.2); }
.address-selector .address address, #checkout .address-item address, .address h4, .address-alias,
#checkout .address-item *, #address .address *{ color:var(--cream) !important; }
.address-footer a, .address-item .address-footer a, .address .address-footer a{ color:var(--gold-soft) !important; }

/* Récap commande / résumé (libellés + valeurs lisibles) */
.cart-summary-line .label, .cart-summary-line .value,
.order-confirmation-table th, .order-confirmation-table td,
#cart-summary-product-list *, .order-items th, .order-items td,
#checkout .cart-summary *, #cart .cart-summary *{ color:var(--text) !important; }
.cart-summary-line .label, .order-line .label, .summary-selected-carrier .h6{ color:var(--cream) !important; }
.cart-summary-line.cart-total .label, .cart-summary-line.cart-total .value,
.order-line.total .label, .order-line.total .value,
#cart .cart-total .value, #checkout .cart-total .value{ color:var(--gold-soft) !important; font-weight:800; }
.product-line-info .label, .product-line-info a, .order-items .product-name{ color:#fff !important; }
.product-line-info.value, .product-line-info .current-price, .order-items .price{ color:var(--gold-soft) !important; }

/* Étape paiement : récap commande (transporteur + tableau articles + totaux) — supprimer les fonds blancs */
#checkout .page-order-confirmation, #checkout .order-confirmation-table,
.order-confirmation-table, .order-confirmation-table thead th,
.order-confirmation-table tbody td, .order-confirmation-table tfoot td,
#checkout .summary-selected-carrier, #checkout .order-items,
#checkout table, #checkout .table, #order-confirmation .order-confirmation-table{
  background:transparent !important;
}
.order-confirmation-table, #checkout .summary-selected-carrier{
  background:linear-gradient(180deg,rgba(47,31,85,.30),rgba(26,17,48,.46)) !important;
  border:1px solid var(--line) !important; border-radius:14px; overflow:hidden;
}
.order-confirmation-table th, .order-confirmation-table td,
#checkout .summary-selected-carrier{ border-color:var(--line) !important; }
.order-confirmation-table thead th{ color:var(--cream) !important; }
#checkout .summary-selected-carrier *, #checkout .page-order-confirmation *,
.order-confirmation-table *{ color:var(--text) !important; }
.order-confirmation-table .product-name, #checkout .summary-selected-carrier .h6,
#checkout .summary-selected-carrier strong{ color:#fff !important; }
.order-confirmation-table .price, .order-confirmation-table .total,
.order-confirmation-table tfoot td{ color:var(--gold-soft) !important; }

/* Barre "Total TTC" du modal panier : fond doré subtil au lieu de blanc */
#blockcart-modal .product-total{
  background:rgba(232,192,97,.10) !important; border-radius:10px; padding:8px 12px; margin-top:6px;
}
#blockcart-modal .product-total .label{ color:#fff !important; }
#blockcart-modal .product-total .value{ color:var(--gold) !important; font-weight:800; }

/* Bloc réassurance (textes "edit with..." = placeholders à éditer dans le BO) */
.block-reassurance li, .block-reassurance .h6, .block-reassurance p, .blockreassurance_product *{ color:var(--muted) !important; }

/* En-tête réduit du tunnel : phone lisible */
.header-nav #contact-link, .header-nav .contact, #header .header-nav span{ color:var(--muted) !important; }

/* reduce-motion: rien d'animé d'agressif ici, mais on respecte */
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } body::before{ display:none; } }

/* =====================================================================
   Lot retours 02/06 — total récap, déclinaisons, avis, réseaux sociaux
   ===================================================================== */

/* Ligne « TOTAL TTC » du récap commande (était une barre blanche) — on cible
   aussi le <span> interne et on met un fond SOMBRE solide (le doré à 10 %
   restait pâle par-dessus le fond clair du thème → texte illisible). */
.order-confirmation-table .total-value td,
.order-confirmation-table .total-value td span,
#checkout .total-value td, #checkout .total-value td span,
#order-confirmation .total-value td, #order-confirmation .total-value td span{
  background:rgba(15,11,30,.55) !important; color:var(--gold) !important;
  font-weight:800 !important; border-color:var(--line) !important;
}

/* Page CONFIRMATION DE COMMANDE (body id = #order-confirmation) : toutes les
   tables/cellules en sombre + texte clair. Couvre notamment le récap du
   VIREMENT BANCAIRE (ps_wirepayment : Montant / à l'ordre de / IBAN / BIC…)
   qui s'affichait en blanc illisible (mes règles ne visaient que #checkout). */
#order-confirmation table, #order-confirmation .table,
#order-confirmation .table td, #order-confirmation .table th,
#order-confirmation table td, #order-confirmation table th{
  background:transparent !important; color:var(--text) !important;
  border-color:var(--line) !important;
}
#order-confirmation .table th,
#order-confirmation .table td:first-child{ color:var(--cream) !important; }
#order-confirmation .table td:last-child{ color:var(--gold-soft) !important; }

/* Déclinaisons produit (« Version : Numérique / Papier… ») en pastilles dorées */
#product .product-variants .control-label{ color:var(--cream) !important; }
#product .product-variants ul{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
#product .product-variants .input-container{ float:none !important; margin:0 !important; }
#product .product-variants input.input-radio,
#product .product-variants input.input-color{ position:absolute; opacity:0; width:0; height:0; }
#product .product-variants .radio-label{
  display:inline-block; padding:9px 18px; border:1px solid rgba(232,192,97,.35) !important;
  border-radius:999px; color:var(--text) !important; background:rgba(255,255,255,.03);
  font-family:var(--sans); transition:.2s; cursor:pointer;
}
#product .product-variants label:hover .radio-label{ border-color:var(--gold) !important; color:var(--gold) !important; }
#product .product-variants input.input-radio:checked + .radio-label{
  background:var(--gold) !important; color:#3a2a08 !important; border-color:var(--gold) !important; font-weight:700;
}
#product .product-variants .form-control-select{
  background:rgba(255,255,255,.04) !important; color:var(--text) !important;
  border:1px solid rgba(232,192,97,.35) !important; border-radius:10px;
}

/* Bloc avis / commentaires produit */
.btn-comment, .btn-comment-big, .btn-comment-huge, .post-comment-buttons .btn-comment{
  background:var(--gold) !important; color:#3a2a08 !important; border:0 !important;
  border-radius:999px !important; font-weight:700 !important; padding:11px 24px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center !important;
}
.btn-comment-inverse, .btn-comment-inverse.btn-comment-big, .btn-comment-inverse.btn-comment-huge{
  background:transparent !important; color:var(--aqua) !important;
  border:1px solid rgba(159,228,230,.5) !important; border-radius:999px !important;
}
.comments-nb, #product .comments-nb, .product-comment-list-item,
#product-comments-list-header *, .product-comments *{ color:var(--text) !important; }
.product-comment-list-item{
  background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important;
  border-radius:12px; padding:14px 16px; margin-bottom:10px;
}
.product-comment-list-item .comment-author, .product-comment-list-item .star-content{ color:#fff !important; }
.product-comment-modal .modal-content, .product-comment-modal .modal-header,
.product-comment-modal .modal-body, .product-comment-modal .modal-footer{
  background:#1a1130 !important; color:var(--text) !important; border-color:var(--line) !important;
}
.product-comment-modal .form-control{ background:rgba(255,255,255,.05) !important; color:#fff !important; border-color:var(--line) !important; }
.star-content .star, .grade-stars .star, .comments_advices .star{ color:var(--gold) !important; }

/* Réseaux sociaux (footer) : pastilles dorées au lieu de carrés blancs */
.block-social ul{ display:flex; gap:12px; padding:0; margin:0; list-style:none; }
.block-social li{ background:none !important; padding:0 !important; margin:0 !important; }
.block-social li a{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:50%; border:1px solid rgba(232,192,97,.35); color:transparent !important;
  font-size:0; background-color:rgba(255,255,255,.03); background-repeat:no-repeat;
  background-position:center; background-size:20px; transition:.2s;
}
.block-social li a:hover{ border-color:var(--gold); background-color:rgba(232,192,97,.14); }
.block-social li.facebook a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8c061'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H17V3.6c-.3 0-1.3-.1-2.45-.1-2.43 0-4.05 1.48-4.05 4.2v2.2H7.8V13h2.7v8z'/%3E%3C/svg%3E"); }
.block-social li.instagram a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c061' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1' fill='%23e8c061' stroke='none'/%3E%3C/svg%3E"); }
.block-social li.twitter a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8c061'%3E%3Cpath d='M22 5.8c-.7.3-1.5.5-2.3.6.8-.5 1.4-1.3 1.7-2.2-.8.5-1.7.8-2.6 1a4.1 4.1 0 0 0-7 3.7A11.6 11.6 0 0 1 3.4 4.6a4.1 4.1 0 0 0 1.3 5.5c-.7 0-1.3-.2-1.8-.5v.1c0 2 1.4 3.6 3.3 4-.6.2-1.3.2-1.9.1.5 1.6 2 2.8 3.8 2.8A8.3 8.3 0 0 1 2 18.1a11.7 11.7 0 0 0 6.3 1.8c7.5 0 11.7-6.3 11.7-11.7v-.5c.8-.6 1.5-1.3 2-2z'/%3E%3C/svg%3E"); }

/* Réassurance : textes lisibles (clairs, pas gris) */
.block-reassurance li .h6, .block-reassurance li span, .blockreassurance_product .h6,
.blockreassurance_product span{ color:var(--cream) !important; }
.block-reassurance li, .blockreassurance_product li{ background:transparent !important; }

/* =====================================================================
   Footer « nuit étoilée » unifié (.dhl-footer) — sur toutes les pages
   ===================================================================== */
.dhl-footer{
  background:linear-gradient(180deg, rgba(26,17,48,.0), rgba(12,8,24,.55) 40%, rgba(8,5,18,.85));
  border-top:1px solid var(--line); margin-top:64px; padding:56px 0 0;
  font-family:var(--sans); color:var(--text);
}
.dhl-footer-wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
.dhl-footer-grid{
  display:grid; grid-template-columns:1.5fr .9fr 1.1fr 1.25fr .9fr; gap:30px; align-items:start;
}
.dhl-footer-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-bottom:14px; }
.dhl-footer-logo img{ width:48px; height:48px; }
.dhl-footer-logo span{ font-family:var(--script); font-size:24px; color:var(--cream); line-height:1; }
.dhl-footer-blurb{ color:var(--muted); font-size:14px; line-height:1.6; max-width:34ch; margin:0 0 18px; }
.dhl-footer-col h5{
  color:var(--gold); font-family:var(--serif); font-size:16px; letter-spacing:.02em;
  margin:0 0 14px; font-weight:600;
}
.dhl-footer-col ul{ list-style:none; margin:0; padding:0; }
.dhl-footer-col li{ margin:0 0 9px; }
.dhl-footer-col a{ color:var(--text); opacity:.82; text-decoration:none; font-size:14px; transition:.2s; }
.dhl-footer-col a:hover{ opacity:1; color:var(--gold-soft); padding-left:3px; }
.dhl-footer-social{ display:flex; gap:12px; }
.dhl-footer-social a{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:50%; border:1px solid rgba(232,192,97,.35); color:transparent !important; font-size:0;
  background-color:rgba(255,255,255,.03); background-repeat:no-repeat; background-position:center; background-size:20px; transition:.2s;
}
.dhl-footer-social a:hover{ border-color:var(--gold); background-color:rgba(232,192,97,.14); }
.dhl-footer-social a.facebook{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8c061'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H17V3.6c-.3 0-1.3-.1-2.45-.1-2.43 0-4.05 1.48-4.05 4.2v2.2H7.8V13h2.7v8z'/%3E%3C/svg%3E"); }
.dhl-footer-social a.instagram{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c061' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1' fill='%23e8c061' stroke='none'/%3E%3C/svg%3E"); }
.dhl-footer-bar{
  margin-top:40px; padding:22px 0 26px; border-top:1px solid var(--line);
  text-align:center; color:var(--muted); font-size:13px;
}
/* Sur pages non-immersives : neutraliser le wrapper #footer du thème */
#footer .dhl-footer{ margin-top:0; }
@media (max-width:860px){
  .dhl-footer-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .dhl-footer-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .dhl-footer-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   En-tête « nuit étoilée » unifié sur toutes les pages (.dhl-chrome)
   ===================================================================== */
/* Neutraliser le wrapper #header du thème (la nav bespoke porte son propre fond). */
#header{ background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; }
.dhl-chrome{ background:transparent; }
/* Le bandeau J-XX mobile (.jbar) ne s'affiche qu'en mobile (déjà géré par homelutins.css). */

/* =====================================================================
   Pages CMS (CGV, mentions légales, RGPD…) : fond sombre, plus de boîte blanche
   ===================================================================== */
#cms .page-content, #cms .page-cms, #cms .rte-content, #cms .cms-content,
body#cms #content.page-content{
  background:transparent !important; color:var(--text) !important; box-shadow:none !important;
}
#cms .page-cms{
  background:linear-gradient(180deg, rgba(47,31,85,.30), rgba(26,17,48,.46)) !important;
  border:1px solid var(--line) !important; border-radius:16px; padding:28px 30px;
}
/* :not([style]) ajoute le 07/09/2026 : les pages CMS portent desormais leur propre
   identite en styles inline (or #d8a93f, fonds #2a1f4a). Sans cette exclusion, ces
   deux regles ecrasaient tout le design des pages 1 a 8. */
#cms .page-cms *:not([style]), #cms .rte-content *:not([style]){ color:var(--text) !important; background:transparent !important; }
#cms .page-cms h1:not([style]), #cms .page-cms h2:not([style]), #cms .page-cms h3:not([style]),
#cms .page-cms strong:not([style]), #cms .rte-content strong:not([style]){ color:#fff !important; }
#cms .page-cms a, #cms .rte-content a{ color:var(--gold-soft) !important; }

/* Autocomplétion recherche (ps_searchbar / jQuery UI) en sombre */
.ui-autocomplete.ui-menu, ul.ui-autocomplete{
  background:#1a1130 !important; border:1px solid var(--line) !important; border-radius:12px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.45) !important; padding:6px !important; z-index:99999 !important; list-style:none;
}
.ui-autocomplete .ui-menu-item a, .ui-autocomplete .ui-menu-item-wrapper{
  color:var(--text) !important; padding:8px 12px !important; border-radius:8px !important; border:0 !important;
}
.ui-autocomplete .ui-menu-item a.ui-state-focus, .ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active{
  background:rgba(232,192,97,.16) !important; color:var(--gold-soft) !important; margin:0 !important;
}

/* =====================================================================
   En-tête bespoke (.dhl-chrome) dans #header : restaurer lisibilité + recherche.
   Bat les règles #header a / #header #search_widget du thème (spécificité ID).
   ===================================================================== */
#header .dhl-chrome .navlinks a,
#header .dhl-chrome .iconbtn,
#header .dhl-chrome .mobile-menu a,
#header .dhl-chrome .dhl-account-name{ color:var(--text) !important; }
#header .dhl-chrome .navlinks a{ opacity:.9; }
#header .dhl-chrome .navlinks a:hover,
#header .dhl-chrome .iconbtn:hover,
#header .dhl-chrome .mobile-menu a:hover{ color:var(--gold-soft) !important; opacity:1; }
#header .dhl-chrome .navlinks a.active{ color:var(--gold) !important; opacity:1; }
#header .dhl-chrome .brand .wm{ color:var(--cream) !important; }
#header .dhl-chrome .jchip{ color:var(--gold) !important; }

/* Recherche : une seule pastille propre, compacte, alignée verticalement. */
#header .dhl-chrome .dhl-search,
#header .dhl-chrome .dhl-search #search_widget,
#header .dhl-chrome .dhl-search .search-widgets{ margin:0 !important; width:auto !important; position:static !important; }
#header .dhl-chrome .dhl-search form{
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(232,192,97,.28) !important;
  border-radius:999px !important; padding:7px 14px !important; display:flex !important; align-items:center !important; gap:6px;
  margin:0 !important; height:auto !important;
}
#header .dhl-chrome .dhl-search form:focus-within{ border-color:var(--gold) !important; box-shadow:none !important; background:rgba(255,255,255,.08) !important; }
#header .dhl-chrome .dhl-search #search_widget input[type=text]{
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  padding:0 !important; height:auto !important; min-height:0 !important; line-height:1.4 !important;
  color:var(--text) !important; font-size:13px !important; width:160px !important;
}
#header .dhl-chrome .dhl-search input::placeholder{ color:var(--muted) !important; }
/* Icônes du widget (loupe/croix) : flux inline aligné, PAS en position absolue. */
#header .dhl-chrome .dhl-search form .material-icons{
  position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important; margin:0 !important; color:var(--gold-soft) !important; font-size:18px !important; line-height:1 !important;
}
#header .dhl-chrome .dhl-search form .material-icons.search{ order:0; margin-right:6px !important; }
#header .dhl-chrome .dhl-search form input[type=text]{ order:1; }
#header .dhl-chrome .dhl-search form .material-icons.clear{ order:2; margin-left:4px !important; opacity:.55; }
#header .dhl-chrome .dhl-search form .material-icons{ align-self:center; display:inline-flex; align-items:center; }
/* .header-top sur la recherche = ancre de position du menu déroulant mobile :
   neutraliser les styles du thème .header-top + autoriser la pleine largeur. */
#header .dhl-chrome .dhl-search.header-top{ padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
#header .dhl-chrome .dhl-search .search-widgets, #header .dhl-chrome .dhl-search #search_widget{ max-width:none !important; }
/* Menu d'autocomplétion : largeur lisible. */
.searchbar-autocomplete.ui-autocomplete, ul.ui-autocomplete.searchbar-autocomplete{ min-width:260px !important; }
/* Mobile : la recherche occupe toute la largeur (rangée sous les icônes). */
@media (max-width:768px){
  #header .dhl-chrome .dhl-search{ width:100% !important; }
  #header .dhl-chrome .dhl-search #search_widget,
  #header .dhl-chrome .dhl-search .search-widgets,
  #header .dhl-chrome .dhl-search form{ width:100% !important; }
  #header .dhl-chrome .dhl-search #search_widget input[type=text]{ width:100% !important; flex:1 1 auto !important; }
}

/* =====================================================================
   Page « Contactez-nous » (#contact) — habillage nuit étoilée
   ===================================================================== */
#contact{ color:var(--text); }
#contact .page-header h1, #contact h1{ color:#fff !important; }
/* textes clairs partout (les gris foncés par défaut -> clairs) */
#contact h2, #contact h3, #contact h4, #contact p, #contact span, #contact label,
#contact .text-muted, #contact small, #contact li, #contact td{ color:var(--text) !important; }

/* Colonne « Informations » (gauche) lisible */
#contact .contact-rich{ background:linear-gradient(180deg,rgba(47,31,85,.28),rgba(26,17,48,.42)) !important;
  border:1px solid var(--line) !important; border-radius:18px; padding:24px; }
/* TOUT le texte de la colonne infos en clair (labels + adresse étaient invisibles) */
#contact .contact-rich, #contact .contact-rich *{ color:var(--text) !important; }
#contact .contact-rich h4, #contact .contact-rich .h4, #contact #left-column .title_block,
#contact #left-column h4{ color:var(--gold-soft) !important; }
#contact .contact-rich .icon i, #contact .contact-rich i, #contact .contact-rich .material-icons{ color:var(--gold) !important; }
#contact .contact-rich a{ color:var(--gold-soft) !important; }
/* email/lien long : couper pour ne pas déborder du cadre */
#contact .contact-rich a, #contact .contact-rich .data, #contact .contact-rich span,
#contact .contact-rich p, #contact .contact-rich li{ overflow-wrap:anywhere; word-break:break-word; }
/* alignement icône + texte de chaque bloc */
#contact .contact-rich .block, #contact .contact-rich li{ display:flex; align-items:flex-start; gap:12px; }
#contact .contact-rich .block .icon, #contact .contact-rich li .icon{ flex:0 0 auto; }

/* Carte du formulaire en sombre OPAQUE (au lieu du blanc par défaut) */
body#contact #content.card, body#contact #content.page-content,
#contact .page-content.card, #contact .contact-form .card, #contact .card,
#contact .card.card-block{ background:#1f1640 !important; background-color:#1f1640 !important;
  background-image:linear-gradient(180deg,#2a1d4a,#191030) !important;
  border:1px solid var(--line) !important; border-radius:18px; color:var(--text) !important;
  box-shadow:0 30px 70px -45px rgba(0,0,0,.8); }
#contact .card-block h3, #contact .contact-form h3{ color:#fff !important; }
/* ⚠️ le <section class="contact-form"> a un fond BLANC du thème qui recouvre la
   carte → on le rend transparent + texte clair (c'était LA cause du carré blanc). */
#contact .contact-form, #contact .form-fields, #contact .form-group{ background:transparent !important; background-color:transparent !important; }
#contact .contact-form{ color:var(--cream) !important; }

/* Libellés + champs */
#contact label, #contact .form-control-label, #contact .col-md-3.text-md-right,
#contact .form-group > .col-md-3{ color:var(--cream) !important; }
#contact .form-control, #contact input[type=text], #contact input[type=email],
#contact input[type=tel], #contact select, #contact textarea, #contact .input-group .form-control{
  background:rgba(15,11,30,.55) !important; border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important; border-radius:12px !important; }
#contact .form-control:focus, #contact textarea:focus, #contact select:focus{ border-color:var(--gold) !important; box-shadow:none !important; }
#contact .form-control::placeholder, #contact textarea::placeholder{ color:var(--muted) !important; }
#contact select option{ color:#111; }

/* Bouton « Choisir un fichier » (filestyle) -> aqua au lieu du teal par défaut */
#contact .group-span-filestyle .btn, #contact .input-group-btn .btn, #contact .filestyle + .btn,
#contact .bootstrap-filestyle .btn, #contact .btn-default{ background:rgba(159,228,230,.12) !important;
  border:1px solid rgba(159,228,230,.5) !important; color:var(--aqua) !important; box-shadow:none !important; }

/* Bouton « Envoyer » doré */
#contact .form-footer .btn-primary, #contact button[type=submit], #contact .btn-primary{
  background:linear-gradient(180deg,#f3d98c,var(--gold)) !important; border:0 !important;
  color:#3a2a08 !important; font-weight:800; border-radius:999px !important; padding:14px 30px; }

/* Messages d'alerte / confirmation lisibles */
#contact .alert{ color:var(--text) !important; }

/* =====================================================================
   Toutes les pages COMPTE / UTILITAIRES non couvertes (RGPD, avoirs,
   bons de réduction, suivi invité, mot de passe, wishlist…) — cartes
   sombres + texte clair, comme le reste du tunnel.
   ===================================================================== */
#module-psgdpr-gdpr, #order-slip, #order-detail, #order-follow, #order-return,
#discount, #guest-tracking, #password, #identity, #address, #addresses,
#my-account, #history, #authentication,
[id^="module-"][id*="wishlist"], [id^="module-"][id*="favoriteproducts"]{ color:var(--text); }

/* La carte de contenu en sombre (au lieu du blanc Bootstrap) */
#module-psgdpr-gdpr .card, #module-psgdpr-gdpr .page-content,
#order-slip .card, #order-detail .card, #order-follow .card, #order-return .card,
#discount .card, #guest-tracking .card, #password .card,
#identity .card, #address .card, #addresses .card, #my-account .card, #history .card,
[id^="module-"][id*="wishlist"] .card, [id^="module-"][id*="favoriteproducts"] .card{
  background:#1f1640 !important; background-color:#1f1640 !important;
  background-image:linear-gradient(180deg,#2a1d4a,#191030) !important;
  border:1px solid var(--line) !important; color:var(--text) !important; border-radius:18px;
  box-shadow:0 26px 60px -40px rgba(0,0,0,.7);
}

/* Texte lisible à l'intérieur de ces cartes (les gris foncés -> clairs) */
#module-psgdpr-gdpr .card *, #order-slip .card *, #order-detail .card *, #order-follow .card *,
#order-return .card *, #discount .card *, #guest-tracking .card *, #password .card *,
#identity .card *, #address .card *, #addresses .card *, #my-account .card *, #history .card *,
[id^="module-"][id*="wishlist"] .card *{ color:var(--text) !important; }
#module-psgdpr-gdpr .card h1, #module-psgdpr-gdpr .card h2, #module-psgdpr-gdpr .card h3, #module-psgdpr-gdpr .card h4,
#order-slip .card h3, #order-detail .card h3, #discount .card h3, #password .card h3, #guest-tracking .card h3{ color:#fff !important; }
#module-psgdpr-gdpr a, #order-slip a, #order-detail a, #discount a, #guest-tracking a, #password a,
#order-return a, #order-follow a{ color:var(--gold-soft) !important; }

/* Tableaux (avoirs, bons de réduction, détail commande) */
#order-slip table, #discount table, #order-detail table, #order-return table,
#order-slip th, #order-slip td, #discount th, #discount td, #order-detail th, #order-detail td{
  color:var(--text) !important; border-color:var(--line) !important; background:transparent !important; }
#order-slip th, #discount th, #order-detail th, #order-return th{ color:var(--gold-soft) !important; }

/* Champs + libellés (RGPD, mot de passe, suivi invité…) */
#module-psgdpr-gdpr label, #guest-tracking label, #password label, #order-return label{ color:var(--cream) !important; }
#module-psgdpr-gdpr .form-control, #guest-tracking .form-control, #password .form-control, #order-return .form-control,
#module-psgdpr-gdpr input, #guest-tracking input, #password input, #order-return input,
#module-psgdpr-gdpr select, #order-return select, #module-psgdpr-gdpr textarea, #order-return textarea{
  background:rgba(15,11,30,.55) !important; border:1px solid rgba(255,255,255,.16) !important; color:#fff !important; border-radius:12px !important; }
#module-psgdpr-gdpr .form-control:focus, #guest-tracking .form-control:focus, #password .form-control:focus{ border-color:var(--gold) !important; box-shadow:none !important; }
#module-psgdpr-gdpr select option{ color:#111; }

/* Boutons dorés sur ces pages */
#module-psgdpr-gdpr .btn-primary, #guest-tracking .btn-primary, #password .btn-primary,
#order-return .btn-primary, #order-slip .btn-primary, #discount .btn-primary{
  background:linear-gradient(180deg,#f3d98c,var(--gold)) !important; border:0 !important; color:#3a2a08 !important; font-weight:800; }

/* ===== Renforcement : encadrés internes RGPD + page Identité (libellés, mot de passe) ===== */
/* RGPD : les blocs internes (div/section/colonnes) restent blancs -> transparents (révèlent la carte sombre) */
#module-psgdpr-gdpr .card div, #module-psgdpr-gdpr .card section,
#module-psgdpr-gdpr .card .row, #module-psgdpr-gdpr .card [class*="col-"],
#module-psgdpr-gdpr .card .alert{ background:transparent !important; background-color:transparent !important; }
#module-psgdpr-gdpr .card, #module-psgdpr-gdpr .card *{ color:var(--cream) !important; }
#module-psgdpr-gdpr .card h1, #module-psgdpr-gdpr .card h2, #module-psgdpr-gdpr .card h3, #module-psgdpr-gdpr .card h4{ color:#fff !important; }
#module-psgdpr-gdpr .card a{ color:var(--gold-soft) !important; }

/* Identité / Adresses : LIBELLÉS clairs (étaient invisibles) */
#identity label, #identity .form-control-label, #identity .col-md-3,
#address label, #address .form-control-label, #address .col-md-3, #addresses label{ color:var(--cream) !important; }
#identity .form-control-comment, #identity small, #identity .text-muted,
#address .form-control-comment, #address small{ color:var(--muted) !important; }
#identity h1, #identity .page-header h1, #address h1{ color:#fff !important; }

/* Tous les champs des pages compte en SOMBRE solide (y compris le mot de passe en input-group) */
#identity input, #identity .form-control, #identity select, #identity textarea,
#address input, #address .form-control, #address select, #address textarea, #addresses input,
#identity .input-group .form-control, #password .input-group .form-control{
  background:#14101e !important; background-color:#14101e !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important; border-radius:12px !important; }
#identity input::placeholder, #address input::placeholder{ color:var(--muted) !important; }
#identity .input-group, #password .input-group{ background:transparent !important; }
#identity select option, #address select option{ color:#111; }

/* Bouton « Afficher » (montrer le mot de passe) en aqua au lieu du gris */
#identity .input-group-btn .btn, #identity .input-group-append .btn, #identity button[data-action="show-password"],
#password .input-group-btn .btn, #password button[data-action="show-password"]{
  background:rgba(159,228,230,.12) !important; border:1px solid rgba(159,228,230,.5) !important; color:var(--aqua) !important; box-shadow:none !important; }

/* Boutons « Enregistrer » dorés sur identité/adresse */
#identity .form-footer .btn-primary, #identity button[type=submit], #identity .btn-primary,
#address .form-footer .btn-primary, #address button[type=submit], #address .btn-primary{
  background:linear-gradient(180deg,#f3d98c,var(--gold)) !important; border:0 !important; color:#3a2a08 !important; font-weight:800; }

/* ===== Page RGPD (psgdpr) : les 2 encadrés sont des .psgdprinfo17, pas des .card ===== */
.psgdprinfo17, #module-psgdpr-gdpr .page_content{ background:transparent !important; }
.psgdprinfo17{ background:rgba(15,11,30,.4) !important; background-color:rgba(15,11,30,.4) !important;
  border:1px solid var(--line) !important; border-radius:14px !important; padding:24px !important; margin-bottom:18px; }
.psgdprinfo17, .psgdprinfo17 *{ color:var(--cream) !important; }
.psgdprinfo17 h1, .psgdprinfo17 h2, .psgdprinfo17 h3, .psgdprinfo17 h4, .psgdprinfo17 strong{ color:#fff !important; }
.psgdprinfo17 a:not(.btn){ color:var(--gold-soft) !important; }
.psgdprinfo17 .btn, .psgdprinfo17 .btn-primary, .psgdprgetdatabtn17, a.psgdprgetdatabtn17{
  background:linear-gradient(180deg,#f3d98c,var(--gold)) !important; border:0 !important; color:#3a2a08 !important; font-weight:800 !important; }

/* ===== Historique commandes : liens d'action en pastilles + état lisible ===== */
#history .order-actions{ white-space:nowrap; }
#history .order-actions a, #history .order-actions .view-order-details-link, #history .order-actions .reorder-link{
  display:inline-block; margin:3px 4px; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(232,192,97,.5) !important; background:rgba(232,192,97,.1) !important;
  color:var(--gold-soft) !important; font-weight:700; font-size:13px; text-decoration:none; }
#history .order-actions a:hover{ background:rgba(232,192,97,.22) !important; }
#history .label, #history .label-pill{ display:inline-block; padding:5px 12px !important; border-radius:999px !important; font-weight:700; }
#history th, #history td{ border-color:var(--line) !important; vertical-align:middle; }
#history .table-striped tbody tr:nth-of-type(odd) > *{ background:rgba(255,255,255,.02) !important; }

/* ============================================================
   FIX agrandissement image produit (2026-06-22)
   Bug : au clic sur l'aperçu produit, le voile sombre (.modal-backdrop)
   passait AU-DESSUS de l'image et bloquait la fermeture.
   Cause : #wrapper/#main/#content-wrapper/.container ont z-index:1
   (fond etoile), ce qui cree un contexte d'empilement qui piege
   #product-modal (z-index 1050) sous le backdrop (z-index 1040,
   attache a <body>). On neutralise ce piege quand une modal est ouverte.
   ============================================================ */
body.modal-open #wrapper,
body.modal-open #main,
body.modal-open #content-wrapper,
body.modal-open .container { z-index: auto !important; }

/* securite : ordre d'empilement standard Bootstrap */
.modal-backdrop { z-index: 1040; }
.modal { z-index: 1050; }

/* restaure la modal d'agrandissement produit : image sur fond clair,
   sans le cadre sombre force par .modal-content{background:var(--night2)} */
#product-modal .modal-content { background: transparent !important; border: 0 !important; }

/* ============================================================
   Zoom image produit (#product-modal) — affichage propre (2026-06-22)
   - retire le decalage natif margin-left:-35% (centrage)
   - image responsive
   - bouton de fermeture visible (croix)
   - voile arriere renforce (focus sur la photo, plus de contenu de page qui depasse)
   ============================================================ */
#product-modal .modal-dialog{ max-width:920px; margin:1.75rem auto; }
#product-modal .modal-content{ position:relative; }
#product-modal .modal-content .modal-body{
  margin-left:0 !important; justify-content:center; align-items:flex-start; gap:18px;
}
#product-modal .modal-content .modal-body figure{ margin:0; }
#product-modal .product-cover-modal{ max-width:100%; height:auto; border-radius:10px; }

/* croix de fermeture, lisible sur fond clair comme sombre */
#product-modal .close.js-product-modal-close{
  position:absolute; top:10px; right:14px; z-index:5;
  width:40px; height:40px; padding:0; line-height:36px; text-align:center;
  font-size:28px; color:#fff; opacity:.95; background:rgba(15,11,30,.6);
  border:1px solid rgba(255,255,255,.3); border-radius:999px; cursor:pointer;
}
#product-modal .close.js-product-modal-close:hover{ opacity:1; background:rgba(15,11,30,.85); }

/* voile arriere : nuit profonde, bien visible (vaut pour toutes les fenetres) */
.modal-backdrop{ background-color:#0f0b1e; }
.modal-backdrop.show, .modal-backdrop.in{ opacity:.82; }

/* ============================================================
   Boite "Version numerique" (alert-info) — 2026-06-22
   .alert-info n'etait pas restylee pour le theme sombre : fond bleu
   clair Bootstrap + texte force en clair (regle globale span{color:--text})
   => texte invisible. On l'aligne sur les autres alertes (success/warning).
   ============================================================ */
.alert-info{
  background:rgba(95,184,189,.15) !important;
  border-color:var(--aqua-deep) !important;
  color:#e4f7f8 !important;
}
.alert-info span, .alert-info a, .alert-info i, .alert-info p,
.dhlnum-note, .dhlnum-note span, .dhlnum-note i{ color:#e4f7f8 !important; }
.dhlnum-note .material-icons{ color:var(--aqua) !important; }

/* ============================================================
   Apercu rapide (.quickview) — declinaisons lisibles (2026-06-22)
   Le style "pastilles dorees" des declinaisons etait scope a #product
   (la fiche). Le quickview est ajoute au <body>, hors de #product
   => texte des boutons Version (Numerique/Papier...) quasi invisible.
   On replique le meme style dans le contexte .quickview.
   ============================================================ */
.quickview .product-variants .control-label{ color:var(--cream) !important; }
.quickview .product-variants ul{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.quickview .product-variants .input-container{ float:none !important; margin:0 !important; }
.quickview .product-variants input.input-radio,
.quickview .product-variants input.input-color{ position:absolute; opacity:0; width:0; height:0; }
.quickview .product-variants .radio-label{
  display:inline-block; padding:9px 18px; border:1px solid rgba(232,192,97,.35) !important;
  border-radius:999px; color:var(--text) !important; background:rgba(255,255,255,.03);
  font-family:var(--sans); transition:.2s; cursor:pointer;
}
.quickview .product-variants label:hover .radio-label{ border-color:var(--gold) !important; color:var(--gold) !important; }
.quickview .product-variants input.input-radio:checked + .radio-label{
  background:var(--gold) !important; color:#3a2a08 !important; border-color:var(--gold) !important; font-weight:700;
}
.quickview .product-variants .form-control-select{
  background:rgba(255,255,255,.04) !important; color:var(--text) !important;
  border:1px solid rgba(232,192,97,.35) !important; border-radius:10px;
}

/* ==========================================================
   LARGEUR DU CONTENU - 30/08/2026
   Trois contraintes distinctes bridaient la largeur :
   1) theme.css : .container utilise width:1140px (pas max-width),
      donc seule une surcharge de width a un effet.
   2) modules/destoiles_homelutins : .dhl .wrap, .stripIn et .cdwrap
      sont plafonnes a 1200px. C'est eux qui portent la largeur
      reelle des pages, pas .container.
   3) Les descriptions produit contiennent un style INLINE
      max-width:900px. Seul !important peut le neutraliser.
   Pour annuler : supprimer ce bloc jusqu'a la fin du fichier.
   ========================================================== */
@media (min-width: 992px) {
  .container { width: 1440px; max-width: 100%; }
  .dhl .wrap,
  .dhl .stripIn,
  .dhl .cdwrap,
  .dhl-footer-wrap { max-width: 1440px; }

  /* Neutralise le max-width inline des descriptions produit.
     Pour revenir a une largeur de lecture plus confortable,
     remplacer 'none' par une valeur, par exemple 1200px. */
  #product .product-description div[style*="max-width"] { max-width: none !important; }
}

/* ============================================================
   Zoom image produit — correction multi-images (2026-08-30)
   Bug : avec plusieurs photos, la colonne de vignettes s'elargit
   (pave 2x2) et ecrase l'image principale (385px a 4 photos,
   contre 545px a 1 photo). Avec une seule photo, invisible.
   Cause : .modal-dialog plafonne a 920px ET aside#thumbnails sans
   largeur imposee, donc il prend ce qu'il veut dans le flex.
   Fix : modal plus large + vignettes forcees en UNE colonne de
   largeur fixe qui defile + image principale qui prend le reste.
   Pour annuler : supprimer ce bloc jusqu'a la fin du fichier.
   ============================================================ */
#product-modal .modal-dialog{ max-width:1180px; }

#product-modal .modal-content .modal-body{ align-items:flex-start; gap:22px; }

/* image principale : occupe tout l'espace restant, jamais ecrasee */
#product-modal .modal-content .modal-body figure{
  flex:1 1 auto; min-width:0; display:flex; justify-content:center;
}
#product-modal .product-cover-modal{
  width:auto; max-width:100%; height:auto;
  max-height:calc(100vh - 140px); object-fit:contain;
}

/* colonne de vignettes : largeur fixe, une seule colonne, defilement */
#product-modal .modal-content .modal-body #thumbnails{
  flex:0 0 9.25rem; width:9.25rem; max-width:9.25rem;
}
#product-modal .modal-content .modal-body .mask{
  max-height:calc(100vh - 140px); overflow-y:auto; overflow-x:hidden; margin-top:0;
}
#product-modal .modal-content .modal-body .product-images{
  display:flex; flex-direction:column; flex-wrap:nowrap;
  gap:10px; margin:0; padding:0; list-style:none;
}
#product-modal .modal-content .modal-body .product-images li{ margin:0; }
#product-modal .modal-content .modal-body .product-images img{
  width:9.25rem; height:auto; display:block; border-radius:8px;
}

/* mobile : vignettes sous l'image, en ligne */
@media (max-width: 767px){
  #product-modal .modal-content .modal-body{ flex-direction:column; align-items:center; }
  #product-modal .modal-content .modal-body #thumbnails{ flex:0 0 auto; width:100%; max-width:100%; }
  #product-modal .modal-content .modal-body .mask{ max-height:none; }
  #product-modal .modal-content .modal-body .product-images{
    flex-direction:row; flex-wrap:wrap; justify-content:center;
  }
}

/* ==========================================================
   TUILES UNIVERS EN CARRE - 31/08/2026
   Les photos produit sont carrees (452x452) alors que les tuiles
   etaient en 4/3 paysage avec object-fit:cover : ~56px etaient
   rognes en haut et en bas, coupant le titre des kits.
   En passant le cadre en 1/1, la photo entre entierement : plus
   aucun hors-champ, sur les trois tuiles.

   Desktop uniquement : sous 991px, homelutins.css bascule la tuile
   en format horizontal (vignette de 118px, aspect-ratio:auto).
   Y imposer un carre casserait la mise en page mobile.
   ========================================================== */
@media (min-width: 992px) {
  .dhl .uni .uimg .shot,
  .dhl .uni .uimg .shot img { aspect-ratio: 1 / 1; }
}

/* ===== Pied de page à 5 colonnes (colonne Conseils ajoutée le 06/09/2026) =====
   Entre 861 et 1180px, la marque passe sur sa propre ligne et les 4 colonnes
   de liens s'alignent en dessous. La borne basse évite d'écraser la règle
   860px définie plus haut dans ce fichier. */
@media (min-width:861px) and (max-width:1180px){
  .dhl-footer-grid{ grid-template-columns:repeat(4,1fr); gap:26px; }
  .dhl-footer-brand{ grid-column:1 / -1; }
}

/* =====================================================================
   Texte éditorial en bas de la catégorie chapeau (07/09/2026)
   Le thème le dépose dans une carte Bootstrap : on neutralise la carte
   et on repose la mise en page dans l'identité « nuit étoilée ».
   ===================================================================== */
#js-product-list-footer > .card,
#js-product-list-footer .card-block.category-additional-description{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
}

.dhl-cattext{
  max-width:1000px; margin:0 auto; padding:64px 24px 8px;
  font-family:var(--sans); color:var(--text); text-align:center;
}
.dhl-cattext__eyebrow{
  font-family:var(--script); font-size:26px; line-height:1;
  color:var(--gold); margin:0 0 10px;
}
.dhl-cattext h2{
  font-family:var(--serif); font-weight:600; color:var(--cream);
  font-size:clamp(26px,3.4vw,40px); line-height:1.15; margin:0 0 22px;
}
.dhl-cattext__lead{
  max-width:62ch; margin:0 auto; font-size:18px; line-height:1.75; color:var(--text);
}

/* Les deux règles, côte à côte */
.dhl-cattext__rules{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  margin:46px auto 0; max-width:860px; text-align:left;
}
.dhl-cattext__rule{
  border-left:2px solid var(--gold); padding:2px 0 2px 20px;
}
.dhl-cattext__rule b{
  display:block; font-family:var(--serif); font-size:20px;
  color:var(--gold-soft); font-weight:600; margin:0 0 6px;
}
.dhl-cattext__rule span{ color:var(--muted); font-size:15px; line-height:1.7; }

/* Les cinq univers */
.dhl-cattext__sep{ margin:58px auto 0; }
.dhl-cattext__grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
  margin:30px 0 0; text-align:left;
}
.dhl-cattext__card{
  display:block; text-decoration:none; border-radius:16px; padding:20px 18px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line); transition:.22s ease;
}
.dhl-cattext__card:hover{
  border-color:rgba(232,192,97,.55); transform:translateY(-3px);
  background:linear-gradient(180deg, rgba(232,192,97,.10), rgba(255,255,255,.02));
}
.dhl-cattext__card i{
  display:block; font-family:var(--script); font-style:normal;
  font-size:24px; color:var(--gold); line-height:1; margin:0 0 10px;
}
.dhl-cattext__card b{
  display:block; font-family:var(--serif); font-size:19px; font-weight:600;
  color:var(--cream); line-height:1.2; margin:0 0 7px;
}
.dhl-cattext__card span{ display:block; color:var(--muted); font-size:13.5px; line-height:1.6; }

@media (max-width:1024px){
  .dhl-cattext__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  .dhl-cattext{ padding:44px 18px 4px; }
  .dhl-cattext__lead{ font-size:16.5px; }
  .dhl-cattext__rules{ grid-template-columns:1fr; gap:22px; margin-top:34px; }
  .dhl-cattext__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:440px){
  .dhl-cattext__grid{ grid-template-columns:1fr; }
}

/* ── Masquage du bandeau Stripe/Klarna (paiement fractionne) ──────────
   Injecte en dur par stripe_official sur les fiches produit et le panier,
   sans reglage back-office. Annonce des moyens de paiement seulement
   ELIGIBLES, pas actives sur le compte : donc trompeur pour le client.
   La div est conservee : la supprimer casse le JS du module (page panier). */
#payment-method-messaging-element{ display:none !important; }

/* =====================================================================
   PAGES CMS — contenus riches (pages conseils 7 et 8)   07/09/2026
   HTMLPurifier retire a l enregistrement : les largeurs en % sur <img>,
   display, overflow et border-radius. On les restitue ici en CSS.
   Portee : uniquement #cms #content.page-cms. Aucun effet sur les
   fiches produit, les categories ou le reste de la boutique.
   ===================================================================== */

/* --- Images : plus jamais de debordement horizontal ------------------ */
/* !important indispensable : la page 8 a conserve des width:1000px et
   width:376px en style inline (HTMLPurifier laisse passer les px). */
#cms #content.page-cms img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  border-radius:12px;
}

/* --- Coins arrondis rendus aux blocs -------------------------------- */
/* Les cartes du contenu se reperent a leur bordure inline.
   overflow:hidden fait rogner l image collee en haut du bloc, donc
   inutile d arrondir l image separement. */
#cms #content.page-cms div[style*="border"]{
  border-radius:14px;
  overflow:hidden;
}
#cms #content.page-cms div[style*="border"] > img:first-child{
  border-radius:0;
}

/* --- Sous 768 px : les colonnes flottantes s empilent ---------------- */
@media (max-width:767.98px){
  #cms #content.page-cms [style*="float:left"],
  #cms #content.page-cms [style*="float:right"]{
    float:none !important;
    width:100% !important;
    margin-bottom:14px;
  }
  /* Exception : la lettrine du premier paragraphe reste flottante. */
  #cms #content.page-cms p > span[style*="float:left"]{
    float:left !important;
    width:auto !important;
    margin-bottom:0;
  }
  /* Les hauteurs minimales n ont plus de sens en colonne unique. */
  #cms #content.page-cms [style*="min-height"]{ min-height:0 !important; }
  /* Les colonnes separatrices de 2 % deviennent des blocs vides. */
  #cms #content.page-cms [style*="width:2%"]{ display:none !important; }
  /* Un peu d air lateral : la boite CMS est a 28px 30px de padding. */
  #cms #content.page-cms{ padding:20px 16px; }
}

/* =====================================================================
   [DESTOILES 07/09/2026] Boutique physique : pied de page + page contact
   Le site n'affichait que le siège de l'EI (890 Route du Piémont), pas le
   lieu où les clients viennent. Adresse et horaires viennent désormais de
   destoiles_homelutins::buildShopData, source unique alignée sur la fiche
   Google Business.
   ===================================================================== */
.dhl-footer-shop{
  margin:18px 0 0; font-style:normal; font-size:13px; line-height:1.6;
  display:flex; flex-direction:column; gap:2px;
}
.dhl-footer-shop__label{
  color:var(--gold); font-family:var(--serif); font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
}
.dhl-footer-shop__addr,
.dhl-footer-shop__tel{
  color:var(--text); opacity:.82; text-decoration:none; transition:.2s;
}
.dhl-footer-shop__addr:hover,
.dhl-footer-shop__tel:hover{ opacity:1; color:var(--gold-soft); }

/* Page contact : horaires et lien d'itinéraire.
   La règle `#contact .contact-rich *` porte un !important, il en faut un ici. */
#contact .contact-rich .dhl-contact-hours{ line-height:1.7; }
#contact .contact-rich .dhl-contact-closed{ color:var(--muted) !important; font-size:13px; }
#contact .contact-rich .dhl-contact-map{
  display:inline-block; margin-top:6px; font-size:13px;
  border-bottom:1px solid rgba(232,192,97,.4);
}
#contact .contact-rich .dhl-contact-legal{ opacity:.62; }
#contact .contact-rich .dhl-contact-legal small{ font-size:12px; line-height:1.55; }

/* Barre de defilement horizontale (01/10/2026) : les blocs .dhl en 100vw et les .row
   depassent de la largeur de la barre verticale. On rogne au niveau de la page. */
html{ overflow-x:hidden; }

/* Accueil : bloc « Outils gratuits » (05/10/2026), deux cartes vers le passeport et la lettre. */
.dhl .outils{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:980px; margin:0 auto; }
.dhl a.outil{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0;
  padding:34px 32px; border-radius:22px; border:1px solid rgba(232,192,97,.2);
  background:linear-gradient(180deg,rgba(47,31,85,.55),rgba(26,17,48,.7));
  text-decoration:none; transition:transform .25s,border-color .25s,box-shadow .25s;
}
.dhl a.outil:hover{ transform:translateY(-6px); border-color:rgba(232,192,97,.5); box-shadow:0 34px 64px -30px rgba(0,0,0,.85); }
.dhl a.outil .outil-tag{
  padding:4px 14px; border:1px solid rgba(232,192,97,.45); border-radius:999px;
  color:var(--gold-soft); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.dhl a.outil h3{ margin:4px 0 0; color:#fff; font-size:30px; font-weight:600; line-height:1.1; }
.dhl a.outil p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.6; }
.dhl a.outil .outil-go{ margin-top:auto; padding-top:10px; color:var(--gold-soft); font-size:15px; font-weight:700; }
@media screen and (max-width:768px){
  .dhl .outils{ grid-template-columns:1fr; gap:14px; }
  .dhl a.outil{ padding:24px 20px; border-radius:16px; }
  .dhl a.outil h3{ font-size:25px; }
}

/* En-tête collant (05/10/2026) : le menu reste accessible pendant tout le défilement.
   C'est #header qui colle (son bloc conteneur est <main>, donc toute la page) et non
   .dhl .nav, dont le conteneur .dhl-chrome ne fait que la hauteur de l'en-tête.
   z-index sous le voile des fenêtres modales (1040). */
#header{ position:sticky; top:0; z-index:1030; }
#header .dhl-chrome{ background:rgba(15,11,30,.94); backdrop-filter:blur(12px); }
html{ scroll-padding-top:110px; }
@media screen and (max-width:991px){
  /* Sur mobile le bandeau J-XX passe au-dessus de la nav et sort de l'écran au défilement :
     seules les deux rangées utiles (menu, compte, panier, recherche) restent collées. */
  #header{ top:-34px; }
  #header .dhl-chrome{ display:flex; flex-direction:column; }
  #header .dhl-chrome .jbar{ order:-1; height:34px; padding:0 8px; white-space:nowrap; overflow:hidden; }
}