/* ============================================================
   Autocollant-Tuning — Charte graphique (fondation Hummingbird)
   v1 — 2026-06-13
   Univers : fond noir, rouge #d1001c, cartes blanches, motorsport.
   Référence : docs/charte-graphique-autocollant-tuning.md
   Injecté APRÈS theme.css (head.tpl) → surcharge les composants Hummingbird.
   ⚠️ Fondation de marque. La construction visuelle fine des pages
   (header/footer/home/catégorie) reste à faire dans Creative Elements.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  --at-black:#000000;
  --at-surface:#1a1a1a;
  --at-surface-2:#2a2a2a;
  --at-red:#d1001c;
  --at-red-dark:#7a0010;
  --at-red-bright:#ff2940;
  --at-white:#ffffff;
  --at-grey-muted:#9a9a9a;
  --at-gold:#e7a637;

  /* Bootstrap 5 / Hummingbird overrides */
  --bs-primary:#d1001c;
  --bs-primary-rgb:209,0,28;
  --bs-link-color:#d1001c;
  --bs-link-hover-color:#ff2940;
  --bs-body-bg:#000000;
  --bs-body-color:#ffffff;
  --bs-dark:#000000;
  --bs-dark-rgb:0,0,0;
}

/* ---------- Base sombre ---------- */
body,
.page-wrapper,
#wrapper,
main,
#main {
  background-color: var(--at-black);
  color: var(--at-white);
}

a { color: var(--at-red-bright); }
a:hover { color: var(--at-white); }

/* Titres : Barlow Condensed uppercase, esprit motorsport */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .product-title, .h1.product-title {
  font-family:'Barlow Condensed', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  color: var(--at-white);
}

/* ---------- Header / nav ---------- */
.header-top, .header-nav, #header, .header {
  background-color: var(--at-black);
  color: var(--at-white);
}
.header a, #header a { color: var(--at-white); }
.header a:hover, #header a:hover { color: var(--at-red-bright); }

/* ---------- Boutons ---------- */
.btn-primary,
.btn-primary:focus {
  background-color: var(--at-red);
  border-color: var(--at-red);
  color: var(--at-white);
  font-family:'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing:.5px;
  font-weight:600;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--at-red-dark) !important;
  border-color: var(--at-red-dark) !important;
  color: var(--at-white);
}
.btn-outline-primary {
  color: var(--at-red-bright);
  border-color: var(--at-red);
}
.btn-outline-primary:hover {
  background-color: var(--at-red);
  color: var(--at-white);
}

/* ---------- Cartes produit : zone image blanche conservée ---------- */
.product-miniature,
.card,
.product-miniature .card {
  background-color: var(--at-surface);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  overflow: hidden;
}
.product-miniature .thumbnail-container,
.product-miniature img,
.product-thumbnail {
  background: var(--at-white);
}
.product-miniature .product-title a,
.product-miniature .product-description * { color: var(--at-white); }

/* Prix en rouge */
.product-price-and-shipping .price,
.product-miniature .price,
.current-price .price,
.product-price,
.price {
  color: var(--at-red-bright);
  font-family:'Barlow Condensed', sans-serif;
  font-weight: 700;
}
.regular-price { color: var(--at-grey-muted); text-decoration: line-through; }

/* Badges promo/discount */
.product-flag.discount,
.product-flag.on-sale,
.discount-percentage,
.discount {
  background-color: var(--at-red);
  color: var(--at-white);
  font-family:'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
.product-flag.new { background-color: var(--at-surface-2); color: var(--at-white); }

/* ---------- Étoiles avis ---------- */
.star, .grade-stars .star-on, [class*="star"] .filled,
.comments_note .star {
  color: var(--at-gold);
}

/* ---------- Bandeau titre catégorie (signature rouge) ---------- */
#js-product-list-header,
.block-category,
.category-top-menu .category-name,
.page-header h1 {
  background-color: transparent;
}
.page-header .h1,
#category #left-column ~ #content .h1,
.block-category h1 {
  background-color: var(--at-red);
  color: var(--at-white);
  padding:.6rem 1rem;
  border-radius:2px;
}

/* ---------- Formulaires / champs sur fond sombre ---------- */
.form-control, .form-select,
input.form-control, textarea.form-control, select.form-select {
  background-color: var(--at-surface-2);
  border-color: #3a3a3a;
  color: var(--at-white);
}
.form-control::placeholder { color: var(--at-grey-muted); }
.form-control:focus {
  background-color: var(--at-surface-2);
  border-color: var(--at-red);
  color: var(--at-white);
  box-shadow: 0 0 0 .2rem rgba(209,0,28,.25);
}

/* ============================================================
   PIÈGES HUMMINGBIRD (couleurs Bootstrap codées en dur)
   cf. skill prestashop-migration §4 + incident 123-stickers
   ============================================================ */

/* radios/checkboxes cochées : Hummingbird force le bleu #0b69f6 */
.form-check-input:checked {
  background-color: var(--at-red) !important;
  border-color: var(--at-red) !important;
}
.form-check-input:focus {
  border-color: var(--at-red);
  box-shadow: 0 0 0 .25rem rgba(209,0,28,.25);
}

/* étapes du tunnel de commande : Hummingbird force le vert #198754 */
.checkout-steps__number,
.checkout-step.-current .step-number,
.order-confirmation .step-number {
  background-color: var(--at-red) !important;
  border-color: var(--at-red) !important;
  color: var(--at-white) !important;
}
.checkout-step.-current .step-title,
.checkout-step.-reachable .step-title { color: var(--at-white); }

/* ---------- Footer ---------- */
.footer, #footer, .footer-container {
  background-color: var(--at-black);
  color: var(--at-grey-muted);
}
.footer a, #footer a { color: var(--at-grey-muted); }
.footer a:hover, #footer a:hover { color: var(--at-red-bright); }

/* ---------- Accessibilité : petits textes rouges → variante claire ---------- */
small.text-primary, .text-primary, .small .price {
  color: var(--at-red-bright) !important;
}

/* ============================================================
   v2 — Enrichissement charte (header sticky, footer, mobile)
   ============================================================ */

/* ---- Topbar (email / tel / compte à rebours) ---- */
.header-top__row, .header-top, #header .header-top {
  background:#0a0a0a;
  border-bottom:1px solid #1f1f1f;
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.3px;
}

/* ---- Header : PAS de sticky sur tout le header ----
   Seul le méga-menu (ets_megamenu, sticky_enabled) reste collé au scroll ;
   topbar + barre logo défilent et disparaissent (zoning 123-stickers). */
.header, #header {
  position: static;
  background:#000;
}

/* ---- Ligne 2 : logo (gauche) + recherche + compte + panier (droite) ----
   Les widgets connexion/panier (hook displayTop) sont dans des <div> sans
   classe, en block pleine largeur → on les remet en ligne, alignés à droite. */
.header-bottom__row { flex-wrap:nowrap !important; align-items:center; }
.header-bottom__row > div:not([class]) {
  flex:0 0 auto !important;
  width:auto !important;
  display:inline-flex !important;
  align-items:center;
  white-space:nowrap;
  order:5;
  margin-left:.75rem;
}
/* la recherche garde sa place (ms-auto la pousse à droite après le logo) */
.header-bottom__row .order-2 { order:4 !important; }
.header-bottom__row .ps-customersignin,
.header-bottom__row [class*=cart] { white-space:nowrap; }
.header-bottom__row a { display:inline-flex; align-items:center; gap:.3rem; }

/* ---- Méga-menu ets_megamenu : charte sombre/rouge ---- */
.ets_mm_megamenu, .ets_mm_megamenu .ets_mm_menu, #ets_mm_megamenu {
  background:#000 !important;
  border:none !important;
}
.ets_mm_megamenu .mm_menus_ul, .ets_mm_megamenu ul.mm_menus_ul {
  background:#000 !important;
}
.ets_mm_megamenu .mm_menus_li > a,
.ets_mm_megamenu a.mm_menu_content_title,
.ets_mm_megamenu .title_block {
  color:#fff !important;
  text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.3px;
}
/* style prod : texte rouge au survol/actif, SANS bloc de fond rouge */
.ets_mm_megamenu .mm_menus_li:hover > a,
.ets_mm_megamenu .mm_menus_li.active > a,
.ets_mm_megamenu .mm_menus_li.menu_hover > a {
  background:transparent !important;
  color:var(--at-red) !important;
}
/* sous-menus déroulants sombres */
.ets_mm_megamenu .mm_columns_ul, .ets_mm_megamenu .submenu, .ets_mm_megamenu .mm_block {
  background:#0f0f0f !important;
  border-top:3px solid var(--at-red) !important;
}
.ets_mm_megamenu .mm_columns_ul a, .ets_mm_megamenu .mm_block a { color:#ddd !important; }
.ets_mm_megamenu .mm_columns_ul a:hover, .ets_mm_megamenu .mm_block a:hover {
  color:var(--at-red-bright) !important;
}
/* le menu sticky (mécanisme ets) reste rouge/sombre */
.ets_mm_megamenu.ets_stick, .ets_stick .ets_mm_megamenu {
  background:#000 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.6);
}

/* Barre de recherche arrondie */
.search-widget input[type=text], .ps-search input {
  background:#1a1a1a;
  border:1px solid #333;
  border-radius:12px;
  color:#fff;
  padding-left:1rem;
}
.search-widget button, .ps-search button { color:var(--at-red-bright); }

/* Compteur panier en pastille rouge */
.cart-products-count, .blockcart .cart-products-count {
  background:var(--at-red) !important;
  color:#fff !important;
  border-radius:50%;
}

/* ---- Navigation principale / méga-menu ---- */
.main-menu a, #_desktop_top_menu a, .menu-top a {
  text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:.5px;
}
.main-menu a:hover, .menu-top a:hover, .main-menu .current a {
  color:var(--at-red-bright);
}

/* ---- Bandeau promo dégradé signature ---- */
.header-banner, .promo-banner, #header_banner {
  background:linear-gradient(90deg,#000 0%, var(--at-red) 50%, #000 100%);
  color:#fff; text-align:center; padding:.5rem;
}

/* ---- Tuiles catégorie (photo + label uppercase) ---- */
.category-miniature, .featured-category, .category-tile {
  position:relative; overflow:hidden; border-radius:4px;
}
.category-miniature img { transition:transform .3s; }
.category-miniature:hover img { transform:scale(1.05); }

/* ---- Footer 4 colonnes sombre ---- */
.footer, #footer, .footer-container, .block-contact {
  background:#000; color:var(--at-grey-muted);
  border-top:0;
}
.footer h3, .footer .h3, #footer .title, .footer-block .title {
  color:#fff; font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.5px;
}

/* ---- Réassurance (paiement / livraison) ---- */
.block-reassurance, .blockreassurance {
  background:#1a1a1a; border-radius:4px;
}
.block-reassurance svg, .blockreassurance svg { fill:var(--at-red-bright); }

/* ============================================================
   Mobile (< 992px) — barre nav unique, lisibilité
   ============================================================ */
@media (max-width: 991.98px) {
  .header, #header { position:sticky; top:0; }
  /* Barre nav mobile : logo + menu + recherche + panier alignés */
  .header__nav-mobile, .mobile-header {
    display:flex; align-items:center; justify-content:space-between;
    gap:.5rem; padding:.4rem .6rem; background:#000;
  }
  /* Recherche collapse par défaut */
  .search-widget--mobile { width:100%; }
  /* Grille produits : pleine largeur + 2 colonnes (grille native Hummingbird).
     NB : ne PAS mettre max-width:50% sur .products (ca bridait la grille a la
     moitie de la colonne). Le 2-colonnes est gere par grid-template-columns. */
  #js-product-list .products, .products {
    max-width:100% !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
  /* Titres plus compacts */
  h1, .h1, .page-title { font-size:1.4rem; }
  /* CTA pleine largeur */
  .product-actions .btn-primary, .add-to-cart { width:100%; }
}

/* ---- Lien panier : /panier?action=show (audit migration) ---- */
/* (géré côté module, rappel) */

/* ============================================================
   v5 — Méga-menu desktop : UNE seule ligne + fond noir intégral
   ============================================================ */
@media (min-width: 992px) {
  /* bandeau pleine largeur, fond noir */
  .header-nav-full-width,
  .ets_mm_megamenu,
  .ets_mm_megamenu .mm_menus_ul {
    background:#000 !important;
  }
  /* la liste des entrées sur une seule ligne, sans retour */
  .ets_mm_megamenu .mm_menus_ul {
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start;
    width:100%;
  }
  .ets_mm_megamenu .mm_menus_li {
    background:#000 !important;
    flex:0 1 auto;
    border:none !important;
  }
  /* entrées compactes pour tout faire tenir */
  .ets_mm_megamenu .mm_menus_li > a {
    background:#000 !important;
    color:#fff !important;
    padding:14px 11px !important;
    font-size:13.5px !important;
    line-height:1 !important;
    letter-spacing:.2px !important;
    white-space:nowrap !important;
    text-transform:uppercase;
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
  }
  /* style prod : texte rouge au survol/actif, SANS bloc de fond rouge */
  .ets_mm_megamenu .mm_menus_li:hover > a,
  .ets_mm_megamenu .mm_menus_li.menu_hover > a,
  .ets_mm_megamenu .mm_menus_li.active > a {
    background:transparent !important;
    color:var(--at-red) !important;
  }
  /* le chevron déroulant collé au texte */
  .ets_mm_megamenu .mm_menus_li > a .arrow,
  .ets_mm_megamenu .mm_menus_li > a i { margin-left:3px; }
}

/* v6 — tuer le dégradé clair par défaut du contenu méga-menu + anti-débordement */
.ets_mm_megamenu_content,
.ets_mm_megamenu .ets_mm_megamenu_content {
  background:#000 !important;
  background-image:none !important;
}
@media (min-width: 992px) {
  .ets_mm_megamenu .mm_menus_li > a { padding:14px 9px !important; }
  .header-nav-full-width { overflow-x:hidden; }
}

/* ============================================================
   v7 — Page d'accueil (héro promo + tuiles catégories)
   ============================================================ */
.at-home { margin: 0 0 2rem; }
.at-hero {
  position:relative; background:linear-gradient(120deg,#000 0%, #1a0306 55%, var(--at-red) 140%);
  border-radius:5px; padding:2.5rem 1.5rem; margin:1.2rem 0 2rem; overflow:hidden;
  border:1px solid #2a0a0e;
}
.at-hero__kicker { color:var(--at-red-bright); font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:2px; font-weight:600; }
.at-hero__title { font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; font-size:2.2rem; color:#fff; margin:.3rem 0; line-height:1.05; }
.at-hero__title span { color:var(--at-red-bright); }
.at-hero__sub { color:#cfcfcf; margin-bottom:1.2rem; }
.at-hero__codes { display:flex; flex-wrap:wrap; gap:.6rem; }
.at-code { background:#000; border:1px solid var(--at-red); color:#fff; border-radius:3px;
  padding:.45rem .8rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem; }
.at-code small { display:block; color:var(--at-grey-muted); font-weight:400; font-size:.6rem; letter-spacing:.5px; }

.at-section-title { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  font-weight:700; color:#fff; border-left:4px solid var(--at-red); padding-left:.6rem; margin:1.5rem 0 1rem; }

.at-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.at-tile { position:relative; display:block; border-radius:5px; overflow:hidden;
  aspect-ratio:16/9; box-shadow:0 2px 12px rgba(0,0,0,.5); }
.at-tile img { width:100%; height:100%; object-fit:cover; transition:transform .35s; filter:brightness(.7); }
.at-tile:hover img { transform:scale(1.06); filter:brightness(.85); }
.at-tile__label { position:absolute; left:0; right:0; bottom:0; padding:.7rem 1rem;
  background:linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:1.3rem; letter-spacing:.5px; }
.at-tile::after { content:''; position:absolute; inset:0; border:2px solid transparent; border-radius:5px; transition:border-color .3s; }
.at-tile:hover::after { border-color:var(--at-red); }
@media (max-width:767px){ .at-tiles{ grid-template-columns:repeat(2,1fr);} .at-hero__title{font-size:1.5rem;} }

/* ============================================================
   v8 — Accueil : vrai slider + catégories sous le slider
   ============================================================ */
.at-slider { position:relative; border-radius:5px; overflow:hidden; margin:1.2rem 0 .8rem;
  box-shadow:0 4px 18px rgba(0,0,0,.55); }
.at-slider__track { position:relative; height:507px; }
.at-slide { position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .6s ease; display:flex; align-items:center; }
.at-slide.is-active { opacity:1; }
.at-slide::before { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 100%); }
.at-slide__box { position:relative; z-index:2; max-width:560px; padding:0 2.5rem; }
.at-slide__kicker { color:var(--at-red-bright); font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:2px; font-weight:600; }
.at-slide__title { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:2.4rem; line-height:1.05; color:#fff; margin:.3rem 0; }
.at-slide__title span { color:var(--at-red-bright); }
.at-slide__sub { color:#dcdcdc; margin-bottom:1.2rem; }
.at-slide__btn { display:inline-block; background:var(--at-red); color:#fff; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  padding:.7rem 1.4rem; border-radius:3px; transition:background .25s; }
.at-slide__btn:hover { background:var(--at-red-dark); color:#fff; }
.at-slider__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(0,0,0,.45); color:#fff; border:none; width:44px; height:44px; border-radius:50%;
  cursor:pointer; font-size:1.1rem; transition:background .25s; }
.at-slider__nav:hover { background:var(--at-red); }
.at-slider__prev { left:14px; } .at-slider__next { right:14px; }
.at-slider__dots { position:absolute; bottom:14px; left:0; right:0; text-align:center; z-index:3; }
.at-dot { width:11px; height:11px; border-radius:50%; border:none; margin:0 4px; cursor:pointer;
  background:rgba(255,255,255,.45); }
.at-dot.is-active { background:var(--at-red); }

/* Catégories sous le slider (pastilles) */
.at-cats { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:0 0 1.5rem; }
.at-cat { display:inline-block; background:#1a1a1a; color:#fff; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  padding:.55rem 1.1rem; border-radius:15px; border:1px solid #2c2c2c; transition:all .2s; }
.at-cat:hover { background:var(--at-red); border-color:var(--at-red); color:#fff; }

@media (max-width:767px){
  .at-slider__track{ height:347px; }
  .at-slide__title{ font-size:1.5rem; }
  .at-slide__box{ padding:0 1.2rem; }
}

/* v9 — slider : dégager le texte des flèches de navigation */
.at-slide__box { padding-left: 4.8rem !important; padding-right: 1.5rem; }
@media (max-width:767px){ .at-slide__box { padding-left: 3.6rem !important; } }

/* ============================================================
   v10 — Conformité charte : vignettes, colonne gauche, blog
   ============================================================ */

/* --- Vignettes produit : supprimer la palette de couleurs --- */
.product-miniature__variants,
.product-miniature .variant-links,
.product-miniature .highlighted-informations { display:none !important; }

/* carte produit nette en charte (image blanche conservée pour lisibilité des stickers) */
.product-miniature, .product-miniature .card { background:var(--at-surface) !important; }
.product-miniature__informations, .product-description { background:var(--at-surface) !important; }
.product-miniature .product-title a { color:#fff !important; }

/* --- Colonne gauche : tout en charte sombre --- */
#left-column .left-block,
#left-column .ps-categorytree,
#left-column .ps-facetedsearch,
#left-column .block,
.ps-facetedsearch--mobile {
  background:#000 !important; color:#fff !important;
}
/* arbre catégories : items sombres, texte clair, actif rouge */
#left-column .category-tree a, #left-column .ps-categorytree a { color:#e6e6e6 !important; }
#left-column .category-tree a:hover, #left-column .ps-categorytree a:hover { color:var(--at-red-bright) !important; }
#left-column .category-tree li, #left-column .category-sub-menu li {
  background:transparent !important; border-color:#222 !important;
}
/* facettes : titres et blocs sombres */
.ps-facetedsearch .facet, .ps-facetedsearch .facet-title,
.search-filters__item, .facet-label, .facet-title {
  background:transparent !important; color:#fff !important; border-color:#222 !important;
}
.ps-facetedsearch .facet-label a, .facet a { color:#cfcfcf !important; }
.ps-facetedsearch .collapse, .ps-facetedsearch .accordion-item,
.ps-facetedsearch .card, .ps-facetedsearch .card-body {
  background:#0f0f0f !important; color:#fff !important; border-color:#222 !important; }

/* --- Module stickerleftcol (réassurance / bons plans) en charte --- */
.slc-card { background:#1a1a1a !important; border:1px solid #2a2a2a !important; border-radius:4px !important; }
.slc-title { color:#fff !important; font-family:'Barlow Condensed',sans-serif !important;
  text-transform:uppercase; border-bottom:2px solid var(--at-red) !important; }
.slc-card, .slc-card *, .slc-card a, .slc-card p, .slc-card span, .slc-card li { color:#cfcfcf !important; }
.slc-card a:hover { color:var(--at-red-bright) !important; }
.slc-card svg, .slc-card .icon { fill:var(--at-red-bright) !important; color:var(--at-red-bright) !important; }

/* --- Blog "Derniers articles" (home) + pages blog en charte --- */
[class*=ybc_block], [class*=ybc_blog], .ybc-blog-home, #ybc_blog_home {
  background:transparent !important; }
[class*=ybc_block] .post, [class*=ybc_blog] .post, .ybc-blog-post,
.ybc_blog_post_item, [class*=ybc] article {
  background:var(--at-surface) !important; border:1px solid #2a2a2a !important;
  border-radius:4px !important; color:#fff !important; overflow:hidden; }
[class*=ybc] .post-title, [class*=ybc] h3, [class*=ybc] h2 a, .ybc-blog-post a { color:#fff !important; }
[class*=ybc] .post-title a:hover { color:var(--at-red-bright) !important; }
/* image article par défaut si manquante */
[class*=ybc] .post-thumb, [class*=ybc] .post-image, .ybc-blog-post .thumb {
  background:#0f0f0f !important; min-height:140px; }
.block.ybc_block_latest .post-title, .ybc_blog_ltr_mode .post-title { color:#fff !important; }

/* v11 — masquer l'image de couverture catégorie (blanche/vide) */
.category__cover, .category__cover-image, .category__header .category__cover { display:none !important; }

/* v12 — logo header plus grand et visible (comme 123-stickers) */
.header-bottom__logo img, #header .logo img, .header .logo img {
  max-width: 175px !important;
  width: auto !important;
  height: auto !important;
  max-height: 70px !important;
}
.header-bottom__logo { padding: .4rem 0; }

/* ============================================================
   v13 — Vignettes produit : intégration douce dans la charte
   Carte sombre + panneau image arrondi inséré (blanc cassé, encadré)
   ============================================================ */
.product-miniature__inner {
  background: var(--at-surface) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  padding-bottom: .6rem;
}
/* panneau image : blanc cassé doux, arrondi, inséré (marge) -> moins tranchant */
.product-miniature__image-container,
.product-miniature__image-container.thumbnail-container {
  background: #f3f3f3 !important;
  border-radius: 5px !important;
  margin: 12px 12px 8px !important;
  overflow: hidden !important;
  border: 1px solid #e3e3e3 !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
.product-miniature__image { background: #f3f3f3 !important; mix-blend-mode: multiply; }
/* infos produit sur fond sombre */
.product-miniature__informations,
.product-miniature__inner .product-description,
.product-miniature__bottom { background: var(--at-surface) !important; padding-left:12px; padding-right:12px; }
.product-miniature__inner .product-title a,
.product-miniature__inner .product-title { color:#fff !important; }
.product-miniature__inner .product-title a:hover { color:var(--at-red-bright) !important; }
.product-miniature__inner .price { color:var(--at-red-bright) !important; }
.product-miniature__inner .regular-price { color:var(--at-grey-muted) !important; }
/* boutons quickview discrets */
.product-miniature__quickview-button { background:rgba(0,0,0,.6) !important; color:#fff !important; }

/* ============================================================
   v14 — Fond header (prod bg_header) + logo plus grand
   ============================================================ */
/* Fond du header repris de la prod (ligne recherche/compte/panier) */
.header-bottom, .header-bottom__container, .header-bottom__row {
  background-image: url('../img/bg_header.png');
  background-repeat: repeat-x;
  background-position: center;
}
/* logo nettement plus grand (source PNG 343x243) */
.header-bottom__logo img, #header .logo img, .header .logo img {
  max-width: 240px !important;
  max-height: 92px !important;
  width: auto !important;
  height: auto !important;
}
.header-bottom__logo { padding: .3rem 0; }

/* ============================================================
   v16 — Ligne header compacte + logo plus grand (déborde) + fond agrandi
   ============================================================ */
/* Fond header agrandi (motif plus visible, effet prod) */
.header-bottom, .header-bottom__container, .header-bottom__row {
  background-image: url('../img/bg_header.png') !important;
  background-repeat: repeat-x !important;
  background-size: auto 100% !important;
}
/* Ligne recherche/compte/panier compacte */
.header-bottom__row { min-height: 64px !important; align-items: center !important; }
.header-bottom__row > div:not([class]) { margin-top:0; margin-bottom:0; }
/* Logo plus grand qui DÉBORDE la ligne sans l'agrandir (marges négatives) */
.header-bottom__logo { overflow: visible !important; padding: 0 !important; }
.header-bottom__logo img, #header .logo img, .header .logo img {
  max-width: 300px !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  margin-top: -43px !important;
  margin-bottom: -43px !important;
  position: relative;
  z-index: 60;
}

/* ============================================================
   v17 — Topbar à droite (libère la gauche pour le logo) + fond natif
   ============================================================ */
/* fond header à l'échelle native (effet prod) */
.header-bottom, .header-bottom__container, .header-bottom__row {
  background-size: auto !important;
}
/* topbar : contenu aligné à droite -> la gauche reste libre sous le logo */
.header-top__row, .header-top .row {
  justify-content: flex-end !important;
  text-align: right;
}
.header-top__row > * { margin-left: 1.5rem; }
/* logo : grand, déborde surtout vers le haut (topbar gauche libre) */
.header-bottom__logo img, #header .logo img, .header .logo img {
  max-width: 300px !important;
  max-height: 150px !important;
  margin-top: -50px !important;
  margin-bottom: -36px !important;
}

/* v18 — pousser le contenu topbar (contact/minuteur) à droite, libérer la gauche pour le logo */
.header-top__left {
  margin-left: auto !important;
  text-align: right !important;
}
.header-top__left, .header-top__left * { text-align: right !important; }

/* v19 — topbar : colonne contact pleine largeur, texte à droite (loin du logo) */
.header-top__left {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  text-align: right !important;
}
.header-top__left > div, .header-top__left * { text-align: right !important; justify-content: flex-end !important; }
.header-top__left { padding-right: 1rem !important; }

/* v20 — réserver la zone du logo : le contenu topbar commence après le logo */
.header-top__left { padding-left: 380px !important; }
@media (max-width: 991.98px){ .header-top__left{ padding-left: 0 !important; } }

/* ============================================================
   v21 — Fond header = bande texturée prod (stries + dégradé vers noir)
          + logo agrandi mais entièrement visible
   ============================================================ */
/* La bande bg_header sur tout le header (comme body prod), dégradé complet visible */
.header, #header {
  background-image: url('../img/bg_header.png') !important;
  background-repeat: repeat-x !important;
  background-position: top center !important;
  background-size: auto 100% !important;
  background-color: #000 !important;
}
/* topbar + ligne + barre menu transparents -> la bande/dégradé traverse tout le header */
.header-top, .header-top__row,
.header-bottom, .header-bottom__container, .header-bottom__row,
.header-nav-full-width,
.ets_mm_megamenu, .ets_mm_megamenu .mm_menus_ul,
.ets_mm_megamenu_content, .ets_mm_megamenu .mm_menus_li {
  background-color: transparent !important;
  background-image: none !important;
}
.ets_mm_megamenu .mm_menus_li > a { background: transparent !important; }
.ets_mm_megamenu .mm_menus_li:hover > a,
.ets_mm_megamenu .mm_menus_li.menu_hover > a,
.ets_mm_megamenu .mm_menus_li.active > a { background: transparent !important; color: var(--at-red) !important; }
/* menu STICKY (détaché au scroll) : fond noir solide pour rester lisible */
.ets_stick .ets_mm_megamenu, .ets_mm_megamenu.ets_stick,
.ets-menu-fixed, .ets_mm_megamenu.fixed {
  background-color: #000 !important;
}

/* logo : grand mais entièrement visible (pas coupé en haut, pas sur le menu) */
.header-bottom__logo img, #header .logo img, .header .logo img {
  max-width: 280px !important;
  max-height: 124px !important;
  margin-top: -30px !important;
  margin-bottom: -30px !important;
}

/* ============================================================
   v33 — HEADER RÉPLIQUÉ À L'IDENTIQUE DE LA PROD
   Prod : body = grande image dégradé (img/cms/fond.jpg 1920x1500) fixe,
   calée en haut-droite sur fond noir ; le header est une bande CENTRÉE
   1240px (noir + maillage fondheader.jpg 1240x100 posé une fois en haut),
   le fond.jpg transparaît donc sur les côtés du header.
   ============================================================ */
/* (1) Fond global = image dégradé prod, fixe en haut-droite sur noir */
body {
  background-color: #000 !important;
  background-image: url('/img/cms/fond.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: right top !important;
  background-attachment: fixed !important;
  background-size: auto !important;
}
/* (2) Header : maillage prod sur TOUTE la largeur (plus de marges latérales),
   en background direct (pas de pseudo/z-index → le déroulant du menu reste
   en overlay). */
.header, #header {
  background-color: #000 !important;
  background-image: url('../img/fondheader.jpg') !important;
  background-repeat: repeat !important;
  background-position: top center !important;
  background-size: 50% auto !important;
}

/* (3) Voile (backdrop) du méga-menu supprimé : il assombrissait toute la page
   sous le menu et faisait "disparaître" la partie basse du logo (qui déborde
   dans cette zone via ses marges négatives). */
.ets_mm_megamenu::before,
.ets_mm_megamenu.bg_submenu::before {
  display: none !important;
  opacity: 0 !important;
}
/* Logo toujours au-dessus du menu/déroulant */
.header-bottom__logo { position: relative; z-index: 1200; }
.header-bottom__logo img, #header .logo img, .header .logo img { z-index: 1200 !important; }

/* (4) Suppression du border-bottom parasite sur la topbar */
.header-top__row, .header-top, #header .header-top { border-bottom: 0 !important; }

/* ------------------------------------------------------------
   Méga-menu : la barre clippait ses propres déroulants (overflow auto
   sur .header-nav-full-width -> scrollbar verticale, sous-menus masqués).
   On laisse les déroulants déborder en overlay (comme 123-stickers).
   ------------------------------------------------------------ */
.header-nav-full-width {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.ets_mm_megamenu, .ets_mm_megamenu_content { overflow: visible !important; }

/* ============================================================
   v36 — Bandeau promo sous le menu (repris prod) + onglets produits home
   ============================================================ */
/* Bandeau promo : dégradé noir->rouge->noir signature, bouton blanc */
.at-promo {
  background: linear-gradient(90deg, #000 0%, var(--at-red) 50%, #000 100%);
  text-align: center;
  padding: 9px 12px;
}
.at-promo__inner { display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
.at-promo__text { color:#fff; font-size:15px; }
.at-promo__text strong { color:#fff; font-weight:800; }
.at-promo__btn {
  display:inline-block; background:#fff; color:#000 !important; font-weight:700;
  text-transform:uppercase; font-size:13px; letter-spacing:.3px;
  padding:6px 18px; border-radius:1px; text-decoration:none; white-space:nowrap;
}
.at-promo__btn:hover { background:#111; color:#fff !important; }

/* Onglets produits (Notre sélection / Best-sellers / Nouveautés) */
.at-prodtabs { margin: 1.8rem 0 1rem; }
.at-tabs {
  display:flex; gap:5px; list-style:none; padding:0; margin:0;
  border-bottom:2px solid var(--at-red);
}
.at-tab {
  cursor:pointer; padding:10px 24px; color:#bcbcbc;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; font-size:18px;
  background:#1a1a1a; border-radius:4px 4px 0 0; user-select:none; transition:.15s;
}
.at-tab:hover { color:#fff; background:#262626; }
.at-tab.is-active { background:var(--at-red); color:#fff; }
.at-tabpane { display:none; padding-top:1.2rem; }
.at-tabpane.is-active { display:block; }
/* les listes produits des modules n'affichent pas leur propre titre (l'onglet le porte) */
.at-tabpane .products-section-title,
.at-tabpane h2.h2,
.at-tabpane .featured-products > .h2,
.at-tabpane section > h2:first-child { display:none !important; }
.at-tabpane .featured-products,
.at-tabpane .product-accessories { margin:0 !important; }

/* ============================================================
   v39 — Menu hover/actif = TEXTE rouge (le libellé est dans un
   span .mm_menu_content_title) — style prod. #header pour battre ets.
   ============================================================ */
#header .ets_mm_megamenu .mm_menus_li:hover > a,
#header .ets_mm_megamenu .mm_menus_li:hover .mm_menu_content_title,
#header .ets_mm_megamenu .mm_menus_li.menu_hover > a,
#header .ets_mm_megamenu .mm_menus_li.menu_hover .mm_menu_content_title,
#header .ets_mm_megamenu .mm_menus_li.active > a,
#header .ets_mm_megamenu .mm_menus_li.active .mm_menu_content_title {
  color: var(--at-red) !important;
  background: transparent !important;
}

/* ============================================================
   v40 — MENU EXACTEMENT COMME LA PROD
   Prod : barre .iqitmegamenu fond #161616, libellés Arial gras 14px
   uppercase, hauteur 50px, items centrés, blanc -> rouge actif/hover.
   Préfixe #header pour battre toutes les règles antérieures.
   ============================================================ */
@media (min-width: 992px) {
  #header .header-nav-full-width,
  #header .ets_mm_megamenu,
  #header .ets_mm_megamenu .mm_menus_ul,
  #header .ets_mm_megamenu_content {
    background:#161616 !important;
    background-image:none !important;
  }
  #header .ets_mm_megamenu .mm_menus_ul {
    display:flex !important; flex-wrap:nowrap !important;
    justify-content:center !important; width:100%;
  }
  #header .ets_mm_megamenu .mm_menus_li { background:transparent !important; flex:0 0 auto; border:none !important; }
  #header .ets_mm_megamenu .mm_menus_li > a {
    background:transparent !important;
    padding:0 13px !important; line-height:50px !important;
  }
  #header .ets_mm_megamenu .mm_menus_li > a,
  #header .ets_mm_megamenu .mm_menus_li .mm_menu_content_title {
    color:#fff !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-weight:700 !important; font-size:14px !important;
    letter-spacing:0 !important; text-transform:uppercase !important;
  }
  #header .ets_mm_megamenu .mm_menus_li:hover > a,
  #header .ets_mm_megamenu .mm_menus_li:hover .mm_menu_content_title,
  #header .ets_mm_megamenu .mm_menus_li.menu_hover > a,
  #header .ets_mm_megamenu .mm_menus_li.menu_hover .mm_menu_content_title,
  #header .ets_mm_megamenu .mm_menus_li.active > a,
  #header .ets_mm_megamenu .mm_menus_li.active .mm_menu_content_title {
    color:var(--at-red) !important; background:transparent !important;
  }
}

/* ============================================================
   v44 — Vignettes : produits à déclinaisons -> bouton Personnaliser
   (au lieu de qté+panier) ; promo = prix barré bien visible (prod).
   ============================================================ */
.product-miniature__customize {
  width:100%; display:flex; align-items:center; justify-content:center; gap:6px;
  text-transform:uppercase; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  letter-spacing:.4px;
}
.product-miniature__customize .material-icons { font-size:18px; }
/* promo : prix régulier barré gris + prix soldé rouge (comme prod) */
.product-miniature__regular-price {
  color:var(--at-grey-muted) !important; text-decoration:line-through !important;
  font-size:.9em; margin-right:.35rem;
}
.product-miniature__inner .product-miniature__price,
.product-miniature__price { color:var(--at-red-bright) !important; font-weight:700; }

/* v44b — badge "Neuf" masqué : PS_NB_DAYS_NEW_PRODUCT élevé (pour l'onglet
   Nouveautés) marquerait sinon TOUS les produits migrés comme neufs. */
.product-flags .badge.new,
.product-flag.new,
.product-flags .new { display:none !important; }

/* v44c — afficher le mot "Personnaliser" sur le bouton (Hummingbird masque
   le libellé des boutons de carte par défaut). */
.product-miniature__customize .product-miniature__add-text {
  display:inline-block !important; visibility:visible !important;
  width:auto !important; height:auto !important; clip:auto !important;
  position:static !important; overflow:visible !important;
}
.product-miniature__customize { padding-left:.6rem !important; padding-right:.6rem !important; }

/* ============================================================
   v47 — Menu : retrait des traits clairs (bordures #e7e7e7 haut/bas) ;
   Onglets : centrés + marge haute + 6 vignettes/ligne + titres internes
   des modules masqués.
   ============================================================ */
/* traits clairs haut/bas de la barre menu + bas du déroulant */
.ets_mm_megamenu_content { border-top:0 !important; border-bottom:0 !important; }
.ets_mm_megamenu .mm_columns_ul { border-bottom:0 !important; } /* on garde le liseré rouge en haut */

/* onglets produits : centrés + espace avec le contenu au-dessus */
.at-prodtabs { margin-top:2.6rem !important; }
.at-tabs { justify-content:center !important; }

/* 6 vignettes par ligne dans les onglets (desktop) */
@media (min-width:992px){
  .at-tabpane .products { grid-template-columns:repeat(6, 1fr) !important; gap:12px !important; }
}
/* masquer les titres internes des modules (Produits phares / Meilleures ventes / Nouveautés) */
.at-tabpane .section-title,
.at-tabpane h2.h2,
.at-tabpane .module-products .h2,
.at-tabpane header .h2 { display:none !important; }

/* v48 (corrigé v67) — Méga-menu limité à 2 niveaux : masquer SEULEMENT le vrai
   3e niveau = les <ul> imbriqués DANS la liste des sous-catégories
   (.ets_mm_categories), sans masquer la liste elle-même. */
.ets_mm_megamenu .ets_mm_categories ul,
.ets_mm_megamenu .ets_mm_categories li .ets_mm_categories { display:none !important; }
.ets_mm_megamenu .ets_mm_categories .mm_has_sub > a:after,
.ets_mm_megamenu .ets_mm_categories .mm_has_sub > a .arrow,
.ets_mm_megamenu .ets_mm_categories .mm_has_sub > a [class*="arrow"] { display:none !important; }

/* v48b — masquer le lien "All featured products" (en anglais) sous les onglets */
.at-tabpane .module-products__buttons { display:none !important; }

/* ============================================================
   v50 — Trait header/menu, position menu (après logo), marges bandeau,
   carousel des onglets produits.
   ============================================================ */
/* trait blanc résiduel entre logo et menu (.header-bottom border-bottom #dee2e6) */
.header-bottom { border-bottom:0 !important; }

/* menu : le texte commence APRÈS le logo (logo à gauche), pas dessous */
@media (min-width:992px){
  #header .ets_mm_megamenu .mm_menus_ul {
    justify-content:flex-start !important;
    padding-left:180px !important;
  }
}

/* bandeau promo : marge haute (équilibre avec l'espace bandeau->slider) */
.at-promo { margin-top:40px !important; }

/* ---- Carousel des onglets : 6 vignettes visibles, défilement horizontal ---- */
@media (min-width:992px){
  .at-tabpane .products {
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    
    gap:12px !important;
    scroll-behavior:smooth !important;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .at-tabpane .products::-webkit-scrollbar { display:none; }
  .at-tabpane .products > * {
    flex:0 0 calc((100% - 60px) / 6) !important;
    min-width:calc((100% - 60px) / 6) !important;
    max-width:calc((100% - 60px) / 6) !important;
    width:calc((100% - 60px) / 6) !important;
    scroll-snap-align:start;
  }
}
.at-tabpane { position:relative; }
.at-carousel-nav {
  position:absolute; top:46%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:none;
  background:var(--at-red); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.5); opacity:.92;
}
.at-carousel-nav:hover { background:var(--at-red-dark); opacity:1; }
.at-carousel-prev { left:-10px; }
.at-carousel-next { right:-10px; }

/* v50b — marges égales autour du bandeau promo (menu->promo == promo->slider) */
.at-promo { margin:40px 0 40px !important; }
.at-home { margin-top:0 !important; padding-top:0 !important; }
.at-home .at-slider { margin-top:0 !important; }

/* v51b — bandeau : marge haute 40, basse 0 (le gap bas résiduel ~40 égalise) */
.at-promo { margin:40px 0 0 0 !important; }

/* ============================================================
   v55 — Rondeurs Bootstrap /2, marge bandeau /2, trait onglets à la
   largeur des vignettes, flèches carousel rapprochées, section Nouveautés.
   ============================================================ */
/* rondeurs Bootstrap (composants natifs) divisées par 2 */
:root {
  --bs-border-radius: .1875rem;
  --bs-border-radius-sm: .125rem;
  --bs-border-radius-lg: .25rem;
  --bs-border-radius-xl: .5rem;
  --bs-border-radius-xxl: 1rem;
}

/* bandeau promo : marge /2 (20px au lieu de 40) */
.at-promo { margin:20px 0 0 0 !important; }
.at-home .at-slider { margin-top:-20px !important; }

/* trait sous les onglets = largeur des 6 vignettes (conteneur centré ~1320) */
.at-tabs {
  max-width:1296px;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:0; padding-right:0;
}

/* flèches carousel : collées au bord des vignettes (conteneur produits) */
.at-tabpane .module-products { position:relative; }
.at-carousel-prev { left:-18px !important; }
.at-carousel-next { right:-18px !important; }

/* section Nouveautés sous "Nos univers" */
.at-news { margin:2rem 0 1rem; }
@media (min-width:992px){
  .at-news .products { grid-template-columns:repeat(6,1fr) !important; gap:12px !important; }
}
.at-news .section-title, .at-news h2.h2, .at-news .module-products__buttons { display:none !important; }

/* ============================================================
   v57 — Blog "Derniers articles" : vignettes de taille uniforme + charte.
   (popular/featured/gallery désactivés côté config pour la redondance/SEO)
   ============================================================ */
.ybc_blog_content_block_item {
  background:#1a1a1a !important;
  border-radius:4px; overflow:hidden;
  margin:0 8px 8px; box-shadow:0 2px 10px rgba(0,0,0,.5);
}
/* vignette image : taille uniforme (recadrée) */
.ybc_blog_content_block_item .ybc_item_img { display:block; overflow:hidden; }
.ybc_blog_content_block_item .ybc_item_img img,
.ybc_blog_content_block_item img {
  width:100% !important; height:200px !important;
  object-fit:cover !important; display:block !important;
}
/* contenu carte */
.ybc-blog-latest-post-con, .ybc_blog_content_block_item .ybc-blog-latest-post-con { padding:14px !important; }
.ybc_blog_content_block_item .ybc_title_block,
.ybc_blog_content_block_item a.ybc_title_block {
  color:#fff !important; font-family:'Barlow Condensed',sans-serif !important; font-weight:700;
  text-transform:uppercase; font-size:1.02rem; line-height:1.2; display:block; margin-bottom:8px;
}
.ybc_blog_content_block_item .ybc_title_block:hover { color:var(--at-red-bright) !important; }
.ybc_blog_content_block_item .post-date,
.ybc_blog_content_block_item .ybc-blog-sidear-post-met,
.ybc_blog_content_block_item .ybc-blog-sidear-post-met * { color:var(--at-grey-muted) !important; font-size:.82rem; }
.ybc_blog_content_block_item .be-label,
.ybc_blog_content_block_item .ybc-blog-categories a,
.ybc_blog_content_block_item .be-categories a { color:var(--at-red-bright) !important; }
.ybc_blog_content_block_item .ybc-blog-latest-content,
.ybc_blog_content_block_item .ybc-blog-latest-content * { color:#bdbdbd !important; }

/* ============================================================
   v59 — Polices moins bold (plus proche prod Arial), titres "sexy" +
   marge gauche + format commun, espacement sections, newsletter fond.
   (le menu garde son 700 — sélecteurs #header non concernés)
   ============================================================ */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.page-title,.product-title,.h1.product-title,
.at-slide__title,.at-hero__title,
.product-miniature__title,.title_blog,.ybc_title_block {
  font-weight:500 !important; letter-spacing:.4px !important;
}
.btn,.btn-primary,.btn-outline-primary,.product-miniature__customize { font-weight:500 !important; }
.at-tab { font-weight:600 !important; }
.price,.product-miniature__price,.product-price,.current-price .price { font-weight:600 !important; }
.at-promo__text strong { font-weight:600 !important; }

/* Titres de section "sexy" : Barlow léger, uppercase, soulignement rouge court,
   marge gauche, fort espacement haut pour séparer des sections précédentes */
.at-section-title,
h4.title_blog, .title_blog.title_block, .ybc_block_latest .title_block {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:500 !important;
  font-size:1.8rem !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  color:#fff !important;
  margin:3.2rem 0 1.5rem 1.5rem !important;
  padding:0 0 .5rem 0 !important;
  border:0 !important;
  display:inline-block !important;
  position:relative !important;
}
.at-section-title::after,
h4.title_blog::after, .ybc_block_latest .title_block::after {
  content:''; position:absolute; left:0; bottom:0;
  width:56px; height:3px; background:var(--at-red);
}

/* Newsletter : fond sombre charte (au lieu du gris clair Bootstrap) */
.ps-emailsubscription,
.ps-emailsubscription.bg-body-tertiary {
  background:#111 !important;
  border-top:0;
}
.ps-emailsubscription .h3, .ps-emailsubscription h3,
.ps-emailsubscription label, .ps-emailsubscription p { color:#fff !important; }

/* v59b — newsletter fond sombre : surcharge variable Bootstrap bg-body-tertiary */
.ps-emailsubscription,
.ps-emailsubscription.bg-body-tertiary,
.footer .ps-emailsubscription, .footer__before .ps-emailsubscription {
  --bs-tertiary-bg-rgb: 17,17,17 !important;
  background-color:#111 !important; background-image:none !important;
}
/* réassurance : charte sombre, icônes/texte blancs */
.blockreassurance #block_myaccount_infos, .blockreassurance,
.block-reassurance, [class*=reassurance] {
  background:transparent !important;
}
.blockreassurance .block-title, [class*=reassurance] .block-title { color:#fff !important; font-weight:600 !important; }
.blockreassurance p, [class*=reassurance] p, [class*=reassurance] span { color:var(--at-grey-muted) !important; }
.blockreassurance svg, .blockreassurance img.svg, [class*=reassurance] svg { fill:var(--at-red) !important; }

/* ============================================================
   v62 — Réassurance horizontale + icônes blanches ; bloc Avis clients (home).
   ============================================================ */
.block-reassurance, ul.block-reassurance, [class*=reassurance] > ul {
  display:flex !important; flex-wrap:wrap; justify-content:space-around;
  gap:1rem; list-style:none; padding:1.4rem 0 !important; margin:0;
}
.block-reassurance-item {
  flex:1 1 180px; max-width:280px; text-align:center;
  display:flex !important; flex-direction:column; align-items:center; gap:.4rem; padding:.4rem;
}
.block-reassurance-item img, [class*=reassurance] img { filter:brightness(0) invert(1) !important; width:40px !important; height:40px !important; }
.block-reassurance-item .block-title, .block-reassurance-item span { color:#fff !important; }

/* Avis clients (productcomments hookDisplayHome) */
.at-reviews { margin:1rem 0 2.5rem; }
.at-reviews__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.at-review { display:block; background:#1a1a1a; border-radius:4px; padding:16px; text-decoration:none; transition:.15s; }
.at-review:hover { background:#232323; }
.at-star { color:#444; font-size:15px; letter-spacing:1px; }
.at-star.is-on { color:var(--at-gold); }
.at-review__title { color:#fff; font-weight:600; margin:.45rem 0 .3rem; font-size:.98rem; }
.at-review__content { color:#cfcfcf; font-size:.88rem; line-height:1.45; margin:0 0 .6rem; }
.at-review__meta { color:var(--at-grey-muted); font-size:.76rem; }
@media(max-width:991px){ .at-reviews__grid{ grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   v63 — Newsletter avec photo de fond (prod) + voile lisibilité ;
   blog description lisible ; titres footer (lien) uniformes blancs.
   ============================================================ */
.ps-emailsubscription,
.ps-emailsubscription.bg-body-tertiary,
.footer .ps-emailsubscription, .footer__before .ps-emailsubscription {
  --bs-tertiary-bg-rgb: 17,17,17 !important;
  background-color:#111 !important;
  background-image: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)), url('../img/newsletter-autocollant-tuning.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.ps-emailsubscription, .ps-emailsubscription * { color:#fff !important; }
.ps-emailsubscription .form-control, .ps-emailsubscription input { color:#111 !important; }

/* blog : descriptions/extraits lisibles (étaient en #2c2c2c sur fond sombre) */
.ybc_blog_content_block_item p,
.ybc_blog_content_block_item .ybc-blog-latest-content,
.ybc_blog_content_block_item .ybc-blog-latest-content *,
.ybc_blog_content_block_item .post-content,
.ybc_blog_content_block_item .desc { color:#c8c8c8 !important; }

/* titres footer : même style/couleur qu'ils aient un lien ou non (blanc) */
.footer-block__title, .footer-block__title a,
.footer-block .h3, .footer-block .h3 a,
#footer .footer-block__title, #footer .footer-block__title a { color:#fff !important; }

/* v63b — réassurance horizontale (cibler le conteneur direct des items) */
:is(div,ul,section,aside):has(> .block-reassurance-item) {
  display:flex !important; flex-wrap:wrap !important;
  justify-content:space-around !important; align-items:flex-start; gap:1rem;
  padding:1.4rem 0 !important; list-style:none;
}

/* v65 — réassurance horizontale : le UL parent des LI passe en flex */
ul:has(> li > .block-reassurance-item) {
  display:flex !important; flex-wrap:wrap !important;
  justify-content:space-around !important; align-items:flex-start; gap:1rem;
  padding:1.4rem 0 !important; margin:0; list-style:none !important;
}
ul:has(> li > .block-reassurance-item) > li {
  flex:1 1 190px !important; max-width:280px; list-style:none !important; text-align:center;
}

/* ============================================================
   v68 — PAGE CATÉGORIE : conformité charte (titres, grille 4/ligne,
   slider/badges bleus, icônes vertes stickerleftcol).
   ============================================================ */
/* Titre produit en vignette : blanc (au lieu de rouge), hover rouge */
.product-miniature__title, .product-miniature__title a,
.product-miniature__inner .product-miniature__title a { color:#fff !important; }
.product-miniature__title a:hover, .product-miniature__title:hover { color:var(--at-red-bright) !important; }

/* 4 produits par ligne en page catégorie (desktop) */
@media (min-width:992px){
  #js-product-list .products, #js-product-list .products.row { grid-template-columns:repeat(4,1fr) !important; }
}

/* slider de prix bleu (#0b69f6) → rouge charte */
.noUi-connect, .ui-slider .ui-slider-range { background:var(--at-red) !important; }
.noUi-handle { border:2px solid var(--at-red) !important; box-shadow:none !important; }

/* bordures bleues parasites sur les badges */
.badge.on-sale, .badge.discount, .badge.new,
.product-flags .badge, .product-flags li { border-color:transparent !important; }

/* "Filtrer par" + titres de facettes/colonne gauche : charte */
.ps-facetedsearch .h6, .ps-facetedsearch h4, #search_filters .h6, #search_filters h4,
.facet .h6, .facet__title, #left-column .h6, #left-column .block-title { color:#fff !important; }

/* stickerleftcol "POURQUOI" : icônes SVG vertes → rouge charte (hue-rotate) */
.slc-reassurance svg, .slc-card.slc-reassurance svg,
.slc-card svg [fill], .slc-reassurance [class*=icon] svg { filter:hue-rotate(240deg) saturate(1.5) !important; }

/* ============================================================
   v69 — Newsletter redesign, réassurance ancrée, note avis,
   badges/icônes catégorie (charte).
   ============================================================ */
/* --- Newsletter : image bien visible, pas de traits rouges, textes lisibles --- */
.ps-emailsubscription,
.ps-emailsubscription.bg-body-tertiary,
.footer .ps-emailsubscription, .footer__before .ps-emailsubscription {
  --bs-tertiary-bg-rgb: 17,17,17 !important;
  background-color:#0d0d0d !important;
  background-image: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.52)), url('../img/newsletter-autocollant-tuning.jpg') !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  border:0 !important; border-top:0 !important; border-bottom:0 !important;
  padding:3rem 1rem !important;
}
.ps-emailsubscription, .ps-emailsubscription * { color:#fff !important; }
.ps-emailsubscription .h3, .ps-emailsubscription h3 { font-size:1.6rem; }
.ps-emailsubscription .form-control, .ps-emailsubscription input[type=email],
.ps-emailsubscription input[type=text] { color:#111 !important; background:#fff !important; }
.ps-emailsubscription small, .ps-emailsubscription .form-text,
.ps-emailsubscription p, .ps-emailsubscription label,
.ps-emailsubscription .gdpr_consent * { color:#e8e8e8 !important; }

/* --- Réassurance : ancrée sur une bande (plus suspendue dans le noir) --- */
ul:has(> li > .block-reassurance-item) {
  background:#161616 !important; border-radius:4px;
  border-top:0;
  padding:1.8rem 1rem !important; margin:0 0 0 0 !important;
}

/* --- Note moyenne du site à droite du titre "Avis clients" --- */
.at-reviews__head { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.at-reviews__head .at-section-title { margin:0 0 0 1.5rem !important; }
.at-reviews__rating { display:inline-flex; align-items:center; gap:.5rem; }
.at-reviews__rating .at-star { color:#444; font-size:17px; }
.at-reviews__rating .at-star.is-on { color:var(--at-gold); }
.at-reviews__avg { color:var(--at-gold); font-size:1.15rem; font-weight:600; }
.at-reviews__count { color:var(--at-grey-muted); font-size:.85rem; }

/* --- Page catégorie : badge "Promo!" bleu → rouge ; icônes vertes → rouge --- */
.badge.on-sale, .product-flags .badge.on-sale,
.badge.bg-primary, .product-flags li.on-sale { background-color:#a3001a !important; color:#fff !important; }
.badge.new, .product-flags .badge.new { background-color:#2a2a2a !important; color:#fff !important; }
.slc-card svg, .slc-reassurance svg, [class*=slc-reassurance] svg,
[class*=slc] svg { filter:hue-rotate(250deg) saturate(2.2) !important; }

/* v69b — logo footer (gauche, façon 123-stickers) */
.footer__logo { display:flex; align-items:flex-start; }
.footer__logo-img { max-width:200px; height:auto; }
@media (max-width:767.98px){ .footer__logo { justify-content:center; margin-bottom:1.2rem; } }

/* v70 — fix badge "Promo!" bleu (#0b69f6) + icônes vertes stickerleftcol (force) */
.product-flags .on-sale, .product-flags li.on-sale,
.badge.on-sale, span.on-sale, .product-flag.on-sale,
.product-flags .badge:not(.discount):not(.new) {
  background:#a3001a !important; background-color:#a3001a !important;
  color:#fff !important; border:0 !important;
}
.product-flags .new, .badge.new { background:#2a2a2a !important; background-color:#2a2a2a !important; }
/* icônes vertes du bloc "POURQUOI" (stickerleftcol) → rouge charte */
.slc-card svg *, .slc-reassurance svg *, [class*=slc] svg path,
[class*=slc] svg circle, [class*=slc] svg rect, [class*=slc] svg polygon {
  fill:var(--at-red) !important;
}

/* v71 — badge on-sale rouge (spécificité max) + cercle d'icône réassurance gauche */
body .product-flags li.on-sale, body .product-flags .badge.on-sale,
#content .product-flags .on-sale {
  background-color:#a3001a !important; background-image:none !important; color:#fff !important;   /* ruban promo : rouge un peu plus sombre */
}
/* le CERCLE vert (parent direct du svg) → rouge, svg en blanc */
.slc-reassurance *:has(> svg), [class*=slc-reassurance] li > span:has(svg),
[class*=slc] [class*=icon]:has(> svg) { background-color:var(--at-red) !important; }
.slc-reassurance svg, [class*=slc-reassurance] svg, [class*=slc] svg { fill:#fff !important; }

/* v72 — badge "Promo!" : le thème utilise RGBA(var(--bs-primary-rgb)) qui résout
   en bleu → on surcharge le sélecteur EXACT du thème avec le rouge littéral. */
.product-flags .badge:not(.discount),
.product-flags .badge:not(.discount):not(.new) {
  background-color:#d1001c !important; color:#fff !important;
}

/* v73 — theme.css utilise @layer (les !important layered battent les non-layered).
   Le badge "Promo!" = RGBA(var(--bs-primary-rgb)) → on surcharge la VARIABLE
   au scope du badge (custom properties : non-layered gagne). */
.product-flags, .product-miniature, .product-flags .badge {
  --bs-primary-rgb: 209,0,28 !important;
}

/* ============================================================
   v75 — Page catégorie : éléments blancs (breadcrumb, accordéon facettes,
   bouton tri) → charte. Liserés rouges retirés (réassurance/newsletter).
   Newsletter plus haute (photo plus visible).
   ============================================================ */
/* breadcrumb */
.breadcrumb__wrapper, .breadcrumb { background-color:transparent !important; }
.breadcrumb a, .breadcrumb__wrapper a { color:var(--at-red-bright) !important; }
.breadcrumb li, .breadcrumb__wrapper span { color:#bbb !important; }

/* accordéon des facettes (Disponibilité, Prix, Couleur…) */
.accordion-button, .accordion-button.collapsed {
  background-color:#1a1a1a !important; color:#fff !important; box-shadow:none !important;
  --bs-accordion-btn-bg:#1a1a1a; --bs-accordion-active-bg:#222;
  --bs-accordion-btn-color:#fff; --bs-accordion-active-color:#fff;
  --bs-accordion-bg:#1a1a1a;
}
.accordion-button:not(.collapsed) { background-color:#222 !important; color:#fff !important; }
.accordion-button::after { filter:invert(1) brightness(2) !important; }
.accordion, .accordion-item, .accordion-collapse, .accordion-body {
  background-color:transparent !important; border-color:#2a2a2a !important; --bs-accordion-bg:transparent;
}

/* bouton + menu de tri "Trier par" */
.products__sort-dropdown-button, .products__sort-dropdown-button.btn,
button.products__sort-dropdown-button {
  background-color:#1a1a1a !important; color:#fff !important; border:1px solid #3a3a3a !important;
}
.products__sort-dropdown-menu, .dropdown-menu {
  background-color:#1a1a1a !important; --bs-dropdown-bg:#1a1a1a; border-color:#2a2a2a !important;
}
.dropdown-item { color:#ddd !important; }
.dropdown-item:hover, .dropdown-item.current { background-color:#2a2a2a !important; color:#fff !important; }

/* --- Liserés rouges retirés (pas beaux) — on garde juste la bande sombre --- */
ul:has(> li > .block-reassurance-item) { border-top:0 !important; }
.ps-emailsubscription, .ps-emailsubscription.bg-body-tertiary,
.footer .ps-emailsubscription, .footer__before .ps-emailsubscription { border:0 !important; }

/* --- Newsletter plus haute : la photo de fond s'affiche bien --- */
.ps-emailsubscription, .footer__before .ps-emailsubscription {
  min-height:260px !important; padding:3.4rem 1rem !important;
  display:flex !important; flex-direction:column; justify-content:center; align-items:center;
}

/* ============================================================
   v77 — Fiche produit : bleus restants → charte.
   ============================================================ */
/* "(Économisez X%)" bleu → rouge */
.product__discount-percentage, .discount-percentage, .product-discount,
.product-prices .discount, .has-discount .discount {
  --bs-primary-rgb:209,0,28 !important;
  color:var(--at-red-bright) !important; border-color:var(--at-red) !important;
  background-color:transparent !important;
}
/* icônes réassurance (toutes pages) : SVG bleu → blanc */
.block-reassurance, .blockreassurance, #blockreassurance, [class*=reassurance] {
  --bs-primary-rgb:209,0,28 !important; --bs-primary:#d1001c !important;
}
.block-reassurance svg, .block-reassurance svg *, [class*=reassurance] svg,
[class*=reassurance] svg path, [class*=reassurance] svg circle,
[class*=reassurance] svg rect, [class*=reassurance] svg polygon {
  fill:#fff !important;
}

/* ============================================================
   v78 — Forcer les variables Bootstrap "primary" en rouge (le @layer du
   thème les garde bleues). !important sur :root + variantes emphasis.
   ============================================================ */
:root, html, body, .page-wrapper {
  --bs-primary-rgb: 209,0,28 !important;
  --bs-primary: #d1001c !important;
  --bs-primary-text-emphasis: #ff2940 !important;
  --bs-primary-border-subtle: #7a0010 !important;
  --bs-primary-bg-subtle: #2a0006 !important;
  --bs-link-color-rgb: 209,0,28 !important;
}
.text-primary-emphasis, .product__discount-percentage,
.link-primary, .text-primary {
  color:#ff2940 !important; --bs-primary-text-emphasis:#ff2940 !important;
}

/* ============================================================
   v79 — Topbar : décompte rouge + espacement ; icônes connexion/panier
   seules agrandies ; pastille compteur panier lisible.
   ============================================================ */
/* décompte (nwc_timer) vert → rouge + espaces autour */
#timer_top .nwc-timer__count, .nwc-timer__count { color:var(--at-red-bright) !important; font-weight:700; }
.nwc-timer { display:inline-flex; align-items:center; gap:.4em; flex-wrap:wrap; }
.nwc-timer__label, .nwc-timer__count { margin:0 .15em; }

/* Connexion / Panier : pas de texte, icônes seules + agrandies */
.header-block__label, #_desktop_user_info .header-block__label,
.blockcart .header-block__label { display:none !important; }
.header-block__action-btn .material-icons, .header-block .material-icons,
.blockcart .material-icons, #_desktop_user_info .material-icons,
.header-block__action-btn i { font-size:30px !important; line-height:1 !important; }
.header-block { margin-left:1rem; }

/* compteur panier lisible : pastille rouge, chiffre blanc (était blanc/gris clair) */
.header-block__badge, .cart-products-count, .blockcart .header-block__badge {
  --bs-tertiary-bg-rgb:209,0,28 !important;
  background-color:var(--at-red) !important; color:#fff !important;
  font-weight:700 !important; min-width:20px; text-align:center;
}

/* v79b — masquer texte Connexion/Panier (.header-block__title) via font-size:0
   (display:none battu par .d-md-flex du @layer) + icônes agrandies. */
.header-block__title { font-size:0 !important; margin:0 !important; width:0 !important; overflow:hidden; }
#_desktop_user_info .material-icons, .blockcart .material-icons,
.header-block .material-icons, .header-block__action-btn .material-icons {
  font-size:32px !important; line-height:1 !important;
}
.header-block { margin-left:1.2rem !important; }
.header-block__badge { font-size:13px !important; padding:2px 6px !important; border-radius:50% !important; }

/* ============================================================
   v81 — Marges home (avis, slider→cats) ; page catégorie (nb produits,
   pagination, titres colonne gauche unifiés).
   ============================================================ */
/* home : marge après le titre "Avis clients" + marge slider→catégories */
.at-reviews__head { margin-bottom:1.5rem !important; }
.at-cats { margin-top:1.8rem !important; }

/* catégorie : nombre de produits lisible (était très sombre) */
.total-products, .total-products p, #js-product-list-top .total-products,
#js-product-list-top, .products-selection, .products-selection p,
.col-md-6.total-products { color:#cfcfcf !important; }

/* catégorie : pagination bleue → charte */
.pagination, .products__pagination {
  --bs-pagination-color:#fff !important; --bs-pagination-bg:#1a1a1a !important;
  --bs-pagination-border-color:#2a2a2a !important;
  --bs-pagination-hover-color:#fff !important; --bs-pagination-hover-bg:#2a2a2a !important;
  --bs-pagination-active-bg:#d1001c !important; --bs-pagination-active-border-color:#d1001c !important;
  --bs-pagination-active-color:#fff !important;
  --bs-pagination-disabled-bg:#111 !important; --bs-pagination-disabled-color:#666 !important;
}
.pagination .page-link, .products__pagination .page-link, .products__pagination a {
  background-color:#1a1a1a !important; color:#fff !important; border-color:#2a2a2a !important;
}
.page-item.active .page-link, .products__pagination .active .page-link,
.products__pagination .current { background-color:var(--at-red) !important; border-color:var(--at-red) !important; color:#fff !important; }

/* catégorie : titres colonne gauche (Accueil, Filtrer par) façon blocs "bien faits" */
#left-column .left-block__title, #left-column .slc-title,
#left-column .h5.offcanvas-title, #left-column .block-title {
  color:#fff !important; text-transform:uppercase !important; font-weight:600 !important;
  font-family:'Barlow Condensed',sans-serif !important; letter-spacing:.6px !important;
  border-bottom:2px solid var(--at-red) !important; padding-bottom:.45rem !important;
  margin-bottom:.9rem !important; font-size:1.1rem !important;
}
#left-column .left-block__title-link { color:#fff !important; }

/* v82 — nb produits lisible (.products__count) + flèches accordéon centrées */
.products__count, .products__count span { color:#cfcfcf !important; }
#left-column .accordion-button, .category-tree__item-header .accordion-button,
#left-column .accordion-button.collapsed { justify-content:center !important; padding-left:0 !important; padding-right:0 !important; }
#left-column .accordion-button::after { margin:0 auto !important; }

/* v83 — Catégorie : masquer la liste des sous-catégories (pastilles) en
   colonne centrale ; réafficher l'image de la catégorie (façon 123-stickers). */
.subcategory__list, #subcategories, .subcategories { display:none !important; }
.category__cover-image, .category-cover, .category__image {
  display:block !important; max-width:100%; height:auto; border-radius:4px; margin:0 0 1.2rem;
}

/* ============================================================
   v84 — Topbar contact (gauche, rouge, icônes, baseline alignée) +
   barre de recherche agrandie + placeholder FR.
   ============================================================ */
/* contact : icône + texte rouge, tél et email sur la même ligne (baseline) */
.ps-contactinfo { display:inline-flex !important; align-items:center; gap:1.4rem; }
.ps-contactinfo__phone, .ps-contactinfo__email {
  color:var(--at-red-bright) !important; display:inline-flex !important; align-items:center; gap:.35rem;
  font-weight:600; line-height:1; white-space:nowrap;
}
.ps-contactinfo__phone:hover, .ps-contactinfo__email:hover { color:#fff !important; }
.ps-contactinfo .material-icons { font-size:19px !important; color:var(--at-red-bright) !important; line-height:1; }
/* topbar : contact à gauche, timer à droite, sur la même hauteur */
.header-top__row, .header-top .row { display:flex !important; align-items:center !important; }
.header-top__left { text-align:left !important; flex:0 0 auto !important; width:auto !important; max-width:none !important; padding-left:200px !important; }
#timer_top, .nwc-timer { margin-left:auto; }

/* barre de recherche agrandie */
.header .search-widget, .search-widget { max-width:none !important; width:100% !important; }
.search-widget form input[type=text], .search-widget .form-control, .ui-autocomplete-input {
  height:50px !important; font-size:1.02rem !important; padding-left:1rem !important;
}

/* ============================================================
   v85 — retours Eric 15/06 : topbar (icônes rouges/texte blanc),
   recherche élargie (vrai sélecteur .ps-searchbar), icônes header
   rapprochées, compteur pagination bas lisible, vignettes
   sous-catégories (réactivées + tuiles), colonne gauche en cartes,
   bords du sous-menu plus soignés.
   ============================================================ */

/* --- 1) TOPBAR : icônes rouges, numéros/contact en blanc --- */
.ps-contactinfo__phone, .ps-contactinfo__email { color:#fff !important; font-weight:600; }
.ps-contactinfo__phone:hover, .ps-contactinfo__email:hover { color:#fff !important; opacity:.82; }
.ps-contactinfo__phone .material-icons,
.ps-contactinfo__email .material-icons { color:var(--at-red-bright) !important; }

/* --- 2) BARRE DE RECHERCHE réellement élargie (.ps-searchbar) --- */
.ps-searchbar, .ps-searchbar.js-search-widget {
  max-width:none !important; width:100% !important; flex:1 1 auto !important;
}
.ps-searchbar__form { width:100% !important; max-width:720px !important; margin:0 auto !important; }
.ps-searchbar__form input[type=text],
.ps-searchbar input.ui-autocomplete-input,
.ps-searchbar__input, .ps-searchbar__form .form-control {
  height:52px !important; width:100% !important; font-size:1.05rem !important;
  padding-left:1.1rem !important; border-radius:12px !important;
  background:#1a1a1a !important; border:1px solid #333 !important; color:#fff !important;
}

/* --- 3) ICÔNES HEADER (compte + panier) : rapprochées, blanches, à droite --- */
.header-block { margin-left:.4rem !important; }
#_desktop_user_info.header-block, .blockcart.header-block { margin-left:.25rem !important; }
.header-block__action-btn .material-icons, .header-block .material-icons { color:#fff !important; }
.header-block:hover .material-icons, .header-block__action-btn:hover .material-icons { color:var(--at-red-bright) !important; }

/* --- 4) COMPTEUR PAGINATION (bas de liste, à gauche de la pagination) --- */
.pagination__number, .pagination__container .pagination__number {
  color:#cfcfcf !important; font-weight:500 !important; opacity:1 !important;
}

/* --- 5) VIGNETTES SOUS-CATÉGORIES (annule le masquage v83 + tuiles charte) --- */
.subcategory__list, #subcategories, .subcategories { display:grid !important; }
.subcategory { margin:.4rem 0 2.2rem 0 !important; }
.subcategory__list {
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  gap:1rem !important; padding:0 !important;
}
.subcategory__link {
  display:flex !important; flex-direction:column; align-items:center; gap:.6rem;
  background:#1a1a1a !important; border:1px solid #2a2a2a !important; border-radius:6px !important;
  padding:.85rem !important; text-align:center; transition:transform .18s, border-color .18s, box-shadow .18s;
  text-decoration:none !important;
}
.subcategory__link:hover {
  border-color:var(--at-red) !important; transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.subcategory__thumbnail {
  width:100% !important; height:auto !important; aspect-ratio:1/1; object-fit:cover;
  border-radius:4px; background:#fff;
}
.subcategory__name {
  color:#e9e9e9 !important; font-family:'Barlow Condensed',sans-serif !important;
  font-weight:500 !important; text-transform:uppercase; font-size:.96rem; letter-spacing:.4px; line-height:1.15;
}
.subcategory__link:hover .subcategory__name { color:var(--at-red-bright) !important; }

/* --- 6) COLONNE GAUCHE : "Accueil" (arbre) + "Filtrer par" (facettes) en cartes slc-card --- */
#left-column .accordion-item,
#search_filters_wrapper .accordion-item,
#left-column #search_filters {
  background:#1a1a1a !important; border:1px solid #2a2a2a !important;
  border-radius:6px !important; margin-bottom:.9rem !important; overflow:hidden;
}
#left-column .accordion-button {
  background:#1a1a1a !important; color:#fff !important;
  font-family:'Barlow Condensed',sans-serif !important; text-transform:uppercase;
  letter-spacing:.4px; font-weight:600 !important; padding:.85rem 1rem !important;
  border-bottom:1px solid #242424 !important;
}
#left-column .accordion-button:not(.collapsed) { color:var(--at-red-bright) !important; }
#left-column .accordion-body, #left-column .accordion-collapse,
#left-column .facet, #left-column .ps-facetedsearch { background:#1a1a1a !important; }
#left-column .accordion-body { padding:.6rem 1rem 1rem !important; }
/* lignes de facettes / arbre catégories : aérées, hover rouge */
#left-column .facet__label, #left-column .category-sub-menu a,
#left-column .ps-categorytree a, #left-column .facet a {
  color:#d8d8d8 !important; padding:.18rem 0 !important; display:flex; align-items:center;
}
#left-column .facet__label:hover, #left-column .ps-categorytree a:hover,
#left-column .category-sub-menu a:hover { color:var(--at-red-bright) !important; }
#left-column .custom-checkbox input:checked + span,
#left-column .facet .active { color:var(--at-red-bright) !important; }

/* --- 7) BORDS DU SOUS-MENU mégamenu plus soignés --- */
.ets_mm_megamenu .mm_columns_ul {
  border-top:3px solid var(--at-red) !important;
  border-left:1px solid #242424 !important; border-right:1px solid #242424 !important;
  border-bottom:1px solid #242424 !important;
  border-radius:0 0 10px 10px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.6) !important;
  padding:1rem 1.2rem 1.2rem !important;
  overflow:hidden;
}

/* ============================================================
   v86 — élargir le CONTENEUR de la barre de recherche (.order-2 bridait
   à 304px). On le fait grandir + max-width généreux.
   ============================================================ */
.header-bottom__row > .order-2,
.header-bottom__row .order-2.ms-auto {
  flex:1 1 auto !important;
  width:auto !important;
  max-width:760px !important;
  margin-left:2.5rem !important;
  margin-right:1.5rem !important;
}
.header-bottom__row .ps-searchbar { width:100% !important; max-width:none !important; }

/* ============================================================
   v87 — colonne gauche : accordéons (arbre catégories + facettes)
   en cartes sombres comme .slc-card. Bootstrap accordion = variables
   --bs-accordion-* (piège @layer : la propriété background ne gagne pas).
   ============================================================ */
#left-column, #left-column .accordion, #search_filters_wrapper {
  --bs-accordion-bg:#1a1a1a;
  --bs-accordion-color:#d8d8d8;
  --bs-accordion-btn-bg:#1a1a1a;
  --bs-accordion-btn-color:#ffffff;
  --bs-accordion-active-bg:#1f1f1f;
  --bs-accordion-active-color:#ff2940;
  --bs-accordion-border-color:#2a2a2a;
  --bs-accordion-border-radius:6px;
  --bs-accordion-inner-border-radius:6px;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23ff2940' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
#left-column .accordion-item { margin-bottom:.7rem !important; overflow:hidden; }
#left-column .accordion-button { font-family:'Barlow Condensed',sans-serif !important; text-transform:uppercase; letter-spacing:.4px; font-weight:600 !important; }

/* ============================================================
   v88 — colonne gauche : "Accueil" (arbre catégories) + "Filtrer par"
   (facettes) présentés en cartes propres comme .slc-card.
   ============================================================ */
#left-column .ps-categorytree.left-block,
#left-column .ps-facetedsearch.left-block {
  background:#1a1a1a !important; border:1px solid #2a2a2a !important;
  border-radius:6px !important; padding:.9rem 1.05rem 1.1rem !important; margin-bottom:1.1rem !important;
}
/* titres "Accueil" / "Filtrer par" : garder le liseré rouge, bien intégré à la carte */
#left-column .ps-categorytree .left-block__title,
#left-column .ps-facetedsearch .left-block__title { margin-top:.1rem !important; }

/* arbre catégories : lignes aérées, séparateurs discrets, hover rouge (pas de gros encadrés) */
#left-column .category-tree__item { border:0 !important; }
#left-column .category-tree__item-header {
  border:0 !important; border-bottom:1px solid #242424 !important; background:transparent !important;
}
#left-column .category-tree li:last-child > .category-tree__item-header { border-bottom:0 !important; }
#left-column .category-tree__item-link { color:#dcdcdc !important; padding:.4rem 0 !important; }
#left-column .category-tree__item-link:hover { color:var(--at-red-bright) !important; }
#left-column .category-tree__item-link.current,
#left-column .category-tree__item-link[aria-current] { color:var(--at-red-bright) !important; font-weight:600 !important; }

/* facettes : items transparents dans la carte, séparateurs discrets */
#left-column .ps-facetedsearch .accordion-item {
  background:transparent !important; border:0 !important;
  border-bottom:1px solid #242424 !important; border-radius:0 !important; margin:0 !important;
}
#left-column .ps-facetedsearch .accordion-item:last-child { border-bottom:0 !important; }
#left-column .ps-facetedsearch .accordion-button {
  background:transparent !important; padding:.7rem 0 !important; color:#fff !important;
  font-family:'Barlow Condensed',sans-serif !important; text-transform:uppercase; letter-spacing:.3px;
}
#left-column .ps-facetedsearch .accordion-button:not(.collapsed) { color:var(--at-red-bright) !important; }
#left-column .ps-facetedsearch .accordion-body { background:transparent !important; padding:.1rem 0 .7rem !important; }

/* ============================================================
   v89 — icônes header compte+panier réellement rapprochées.
   ============================================================ */
.header-bottom .header-block__action-btn { padding-left:5px !important; padding-right:5px !important; }
.header-bottom .header-block { margin-left:.1rem !important; }
#_desktop_user_info.header-block, .blockcart.header-block { margin-left:0 !important; }
.header-bottom__buttons, .header-bottom .order-3 { gap:.15rem !important; }

/* ============================================================
   v90 — topbar (contact à GAUCHE / décompte à DROITE, décompte en
   Barlow comme le contact), icônes header SVG + resserrées,
   vignette de la catégorie courante affichée en entête.
   ============================================================ */

/* --- TOPBAR : contact gauche, décompte droite, sur toute la largeur --- */
.header-top .row { justify-content:space-between !important; flex-wrap:nowrap !important; }
.header-top__left {
  flex:1 1 100% !important; max-width:100% !important; width:100% !important;
  padding-left:180px !important;   /* dégage le logo (x186→361) */
  display:flex !important; justify-content:space-between !important; align-items:center !important;
}
/* décompte : même police/poids/taille que le contact (Barlow Condensed 16/600) */
.nwc-timer, .nwc-timer__label, .nwc-timer__count {
  font-family:'Barlow Condensed', Arial, sans-serif !important;
  font-size:16px !important; font-weight:600 !important; letter-spacing:.2px;
}

/* --- ICÔNES HEADER : SVG (compte = utilisateur, panier = sac), resserrées --- */
.header-bottom .header-block { margin-left:0 !important; }
.header-bottom .header-block__action-btn { padding-left:3px !important; padding-right:3px !important; }
.blockcart .header-block__action-btn .material-icons,
.header-block__action-btn[href*="mon-compte"] .material-icons,
.header-block__action-btn[href*="authentification"] .material-icons {
  font-size:0 !important; width:30px !important; height:30px !important;
  display:inline-block !important; background:center/27px no-repeat;
  vertical-align:middle;
}
.header-block__action-btn[href*="mon-compte"] .material-icons,
.header-block__action-btn[href*="authentification"] .material-icons {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 13.5c-4.7 0-8.5 2.4-8.5 5.3V21h17v-2.2c0-2.9-3.8-5.3-8.5-5.3z'/%3E%3C/svg%3E");
}
.blockcart .header-block__action-btn .material-icons {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}
.header-block__action-btn:hover .material-icons { opacity:.78; }

/* --- VIGNETTE DE LA CATÉGORIE COURANTE (entête) --- */
.category__header { display:flex !important; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.category__cover { display:block !important; flex:0 0 auto; margin:0 !important; order:-1; }
.category__cover-image {
  display:block !important; width:200px !important; height:200px !important;
  object-fit:cover !important; border-radius:8px !important;
  border:1px solid #2a2a2a; background:#fff;
}
.category__header .page-title-section { flex:1 1 300px; margin:0 !important; }
.category__header .category__description { flex:1 1 100%; }

/* ============================================================
   v91 — TOPBAR définitive (écrase v18-20 + 1527 via forte spécificité)
   + VIGNETTE catégorie carrée (template overridé, nouvelles classes).
   ============================================================ */
/* topbar : contact à GAUCHE, décompte à DROITE, une seule ligne pleine largeur */
#header .header-top .row { justify-content:flex-start !important; flex-wrap:nowrap !important; }
#header .header-top .header-top__left.col-md-4 {
  flex:1 1 100% !important; flex-basis:100% !important; width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 0 0 175px !important;
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  justify-content:space-between !important; align-items:center !important; text-align:left !important;
}
#header .header-top__left.col-md-4 > * { text-align:left !important; justify-content:flex-start !important; flex:0 0 auto !important; }
#header .header-top__left.col-md-4 .nwc-timer { margin:0 !important; }

/* vignette de la catégorie courante (carré à côté du titre) */
.category__header { display:block !important; }
.at-cat-head { display:flex !important; align-items:center; gap:1.3rem; margin-bottom:.8rem; flex-wrap:wrap; }
.at-cat-vignette-wrap { flex:0 0 auto; }
.at-cat-vignette {
  display:block; width:168px; height:168px; object-fit:cover;
  border-radius:8px; border:1px solid #2a2a2a; background:#fff;
}
.at-cat-head__title { flex:1 1 300px; }
.at-cat-head__title .page-title-section, .at-cat-head__title h1 { margin:0 !important; }

/* ============================================================
   v92 — topbar : la colonne droite .header-top__right (vide, 880px)
   coinçait le décompte → on la masque, la gauche prend toute la largeur
   (contact gauche / décompte droite via space-between). + icônes resserrées.
   ============================================================ */
#header .header-top__right.col-md-8 { display:none !important; }
/* icônes compte+panier encore plus proches */
.header-bottom .blockcart.header-block { margin-left:-10px !important; }
.header-bottom .header-block__action-btn { padding-left:2px !important; padding-right:2px !important; }

/* ============================================================
   v93 — titre catégorie = style titres section accueil (.at-section-title) ;
   panier plein + icônes +25% + alignées verticalement.
   ============================================================ */
/* titre de la page catégorie comme « Nos univers » */
.at-cat-head__title h1.page-title-section,
.at-cat-head__title .page-title-section {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:500 !important; font-size:1.8rem !important;
  text-transform:uppercase !important; letter-spacing:1.5px !important;
  color:#fff !important; margin:0 !important; padding:0 0 .5rem 0 !important;
  border:0 !important; display:inline-block !important; position:relative !important;
}
.at-cat-head__title h1.page-title-section::after,
.at-cat-head__title .page-title-section::after {
  content:''; position:absolute; left:0; bottom:0;
  width:56px; height:3px; background:var(--at-red);
}

/* icônes header : taille +25% (30→38px) + alignement vertical */
.blockcart .header-block__action-btn .material-icons,
.header-block__action-btn[href*="mon-compte"] .material-icons,
.header-block__action-btn[href*="authentification"] .material-icons {
  width:38px !important; height:38px !important;
  background-size:34px !important; background-position:center !important;
  vertical-align:middle !important;
}
.header-bottom .header-block,
.header-bottom .header-block__action-btn { display:flex !important; align-items:center !important; }
/* panier PLEIN (comme l'icône utilisateur) */
.blockcart .header-block__action-btn .material-icons {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 6h-2a4 4 0 0 0-8 0H6a2 2 0 0 0-2 1.9l-.5 11A2 2 0 0 0 5.5 21h13a2 2 0 0 0 2-2.1l-.5-11A2 2 0 0 0 18 6zm-6-2a2 2 0 0 1 2 2h-4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   v94 — arbre catégories (sous-cat de la catégorie courante) resserré,
   facettes resserrées, flèches d'ouverture/fermeture à droite + rouge vif.
   ============================================================ */
/* arbre catégories : lignes resserrées */
#left-column .category-tree__item-header {
  display:flex !important; align-items:center !important;
  padding:.1rem 0 !important; border-bottom:1px solid #242424 !important;
}
#left-column .category-tree__item-link { padding:.14rem 0 !important; flex:1 1 auto; }
#left-column .category-tree ul .category-tree__item-link { padding-left:.6rem !important; }

/* facettes : lignes resserrées */
#left-column .ps-facetedsearch .accordion-button { padding:.5rem 0 !important; }
#left-column .ps-facetedsearch .accordion-body { padding:.05rem 0 .5rem !important; }
#left-column .ps-facetedsearch .facet__label,
#left-column .ps-facetedsearch .facet a,
#left-column .ps-facetedsearch li { padding:.06rem 0 !important; margin:0 !important; }

/* FLÈCHES (arbre + facettes) : à droite, rouge vif, plus grandes */
#left-column {
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff2940' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff2940' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}
#left-column .accordion-button::after {
  width:1.35rem !important; height:1.35rem !important; background-size:1.35rem !important;
  margin-left:auto !important; opacity:1 !important;
}
/* bouton flèche de l'arbre : transparent, poussé à droite */
#left-column .category-tree__item-header .accordion-button {
  flex:0 0 auto; width:auto !important; margin-left:auto !important;
  padding:.05rem .1rem !important; background:transparent !important; box-shadow:none !important; border:0 !important;
}

/* ============================================================
   v95 — CORRECTIF flèches (var écrasée par v87 → on cible ::after en direct,
   rouge vif) + arbre/facettes : texte moins gras, lignes uniformes & resserrées.
   ============================================================ */
/* FLÈCHES rouge vif en direct (arbre + facettes), poussées à droite */
#left-column .accordion-button::after,
#left-column .accordion-button:not(.collapsed)::after,
#left-column .category-tree__item-header .accordion-button::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff2940' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important;
  width:1.3rem !important; height:1.3rem !important; background-size:1.3rem !important;
  margin-left:auto !important; flex:0 0 auto !important; opacity:1 !important;
}

/* ARBRE : texte moins gras, UNE seule ligne (hauteurs uniformes), resserré */
#left-column .category-tree__item-header {
  display:flex !important; align-items:center !important;
  padding:0 !important; min-height:0 !important; border-bottom:1px solid #242424 !important;
}
#left-column .category-tree__item-link {
  font-weight:400 !important; font-size:.92rem !important; line-height:1.25 !important;
  padding:.26rem 0 !important; white-space:nowrap !important; overflow:hidden !important;
  text-overflow:ellipsis !important; flex:1 1 auto !important; min-width:0 !important;
}
#left-column .category-tree ul .category-tree__item-link { padding-left:.7rem !important; }

/* FACETTES : titres moins gras, lignes resserrées uniformes */
#left-column .ps-facetedsearch .accordion-button {
  font-weight:500 !important; padding:.5rem 0 !important; font-size:.95rem !important;
}
#left-column .ps-facetedsearch .facet__label,
#left-column .ps-facetedsearch .facet a,
#left-column .ps-facetedsearch li {
  font-weight:400 !important; padding:.07rem 0 !important; margin:0 !important; line-height:1.3 !important;
}

/* ============================================================
   v96 — CORRECTIF couleur flèches : un filter:invert(1) brightness(2)
   (blanchiment du chevron Bootstrap) transformait mon rouge en CYAN.
   On retire le filtre → le SVG rouge #ff2940 s'affiche vraiment rouge.
   ============================================================ */
#left-column .accordion-button::after,
#left-column .accordion-button:not(.collapsed)::after,
#left-column .category-tree__item-header .accordion-button::after,
#left-column .ps-facetedsearch .accordion-button::after {
  filter:none !important;
}

/* ============================================================
   v97 — flèches plus petites ; description catégorie plus petite & légère.
   ============================================================ */
/* flèches arbre + facettes : taille réduite (20.8 -> ~14px) */
#left-column .accordion-button::after,
#left-column .accordion-button:not(.collapsed)::after,
#left-column .category-tree__item-header .accordion-button::after,
#left-column .ps-facetedsearch .accordion-button::after {
  width:.85rem !important; height:.85rem !important; background-size:.85rem !important;
}

/* description de la catégorie : police plus petite et plus légère */
.category__description, .category__description.rich-text,
.category__description p, .category__description li, .category__description span {
  font-weight:300 !important; font-size:.88rem !important; line-height:1.55 !important; color:#c9c9c9 !important;
}
.category__description h2 { font-weight:400 !important; font-size:1.05rem !important; color:#e6e6e6 !important; }

/* ============================================================
   v98 — flèche : pointe à DROITE quand replié, vers le BAS quand déplié.
   Icône de base = chevron droite ; rotation 90° à l'ouverture.
   ============================================================ */
#left-column .accordion-button::after,
#left-column .accordion-button.collapsed::after,
#left-column .category-tree__item-header .accordion-button::after,
#left-column .ps-facetedsearch .accordion-button::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff2940' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E") !important;
  transform:rotate(0deg) !important;
  transition:transform .2s ease !important;
}
/* déplié (pas .collapsed) : rotation pour pointer vers le bas */
#left-column .accordion-button:not(.collapsed)::after,
#left-column .category-tree__item-header .accordion-button:not(.collapsed)::after,
#left-column .ps-facetedsearch .accordion-button:not(.collapsed)::after {
  transform:rotate(90deg) !important;
}

/* ============================================================
   v99 — UNIFORMISATION arbre + facettes : même police, même hauteur de
   ligne, flèches en position absolue à droite (alignement parfait garanti),
   droite=replié / bas=déplié. Les 2 blocs doivent être identiques.
   ============================================================ */
/* lignes : hauteur fixe uniforme, pleine largeur, place réservée à droite pour la flèche */
#left-column .category-tree__item,
#left-column .category-tree__item-header { width:100% !important; }
#left-column .category-tree__item-header,
#left-column .ps-facetedsearch .accordion-button {
  position:relative !important; display:flex !important; align-items:center !important;
  width:100% !important; min-height:30px !important; box-sizing:border-box !important;
  padding:.18rem 1.25rem .18rem 0 !important; margin:0 !important;
  border-bottom:1px solid #242424 !important; background:transparent !important;
}
/* texte identique (arbre = facettes) : 0.92rem, 400, casse normale */
#left-column .category-tree__item-link,
#left-column .ps-facetedsearch .accordion-button {
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:.95rem !important; font-weight:400 !important; text-transform:none !important;
  letter-spacing:normal !important; line-height:1.2 !important; color:#dcdcdc !important;
}
#left-column .category-tree__item-link {
  flex:1 1 auto !important; min-width:0 !important; padding:0 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#left-column .category-tree ul .category-tree__item-link { padding-left:.7rem !important; }
#left-column .category-tree__item-link:hover,
#left-column .ps-facetedsearch .accordion-button:hover { color:var(--at-red-bright) !important; }

/* FLÈCHE : position absolue à droite, IDENTIQUE partout (alignement garanti) */
#left-column .category-tree__item-header .accordion-button {
  position:absolute !important; right:0 !important; top:0 !important; bottom:0 !important;
  width:1.2rem !important; height:auto !important; padding:0 !important; margin:0 !important;
  background:transparent !important; box-shadow:none !important; border:0 !important;
}
#left-column .category-tree__item-header .accordion-button::after,
#left-column .ps-facetedsearch .accordion-button::after {
  position:absolute !important; right:0 !important; top:50% !important; left:auto !important;
  margin:0 !important; width:.8rem !important; height:.8rem !important; background-size:.8rem !important;
  transform:translateY(-50%) rotate(0deg) !important;
}
/* déplié : flèche vers le bas */
#left-column .category-tree__item-header .accordion-button:not(.collapsed)::after,
#left-column .ps-facetedsearch .accordion-button:not(.collapsed)::after {
  transform:translateY(-50%) rotate(90deg) !important;
}

/* ============================================================
   v100 — facettes : texte aligné à GAUCHE (comme l'arbre). Une ancienne
   règle .accordion-button{justify-content:center} (v82) les centrait.
   ============================================================ */
#left-column .ps-facetedsearch .accordion-button,
#left-column .category-tree__item-header {
  justify-content:flex-start !important; text-align:left !important;
}

/* ============================================================
   v101 — retours Eric : (1) revenir à la police précédente (Inter, taille
   d'avant) dans les 2 blocs ; (2) supprimer la marge sous les items à flèche
   (hauteurs inégales) ; (3) garder l'alignement gauche identique ;
   (4) réduire la police de la dropdown de tri (colonne droite).
   ============================================================ */
/* (1) police contenu blocs gauche : Inter (défaut) + taille précédente .92rem */
#left-column .category-tree__item-link,
#left-column .ps-facetedsearch .accordion-button {
  font-family:'Inter', sans-serif !important;
  font-size:.92rem !important; font-weight:400 !important;
}
/* (2) supprimer la marge des accordion-item (arbre ET facettes) → hauteurs uniformes,
   les bordures basses servent de séparateurs */
#left-column .accordion-item,
#left-column .ps-categorytree .category-tree__item { margin-bottom:0 !important; }

/* (4) dropdown de tri (colonne droite) : police plus petite, moins large */
.products__sort-dropdown-button,
.products-sort-order .dropdown-toggle,
.products__sort .dropdown-menu .dropdown-item {
  font-size:13px !important;
}
.products__sort-dropdown-button { padding-top:.4rem !important; padding-bottom:.4rem !important; }

/* ============================================================
   v102 — dropdown de tri : largeur ajustée au contenu (était 382px, trop large).
   ============================================================ */
.products__sort-dropdown { width:auto !important; min-width:0 !important; flex:0 0 auto !important; }
.products__sort-dropdown-button {
  width:auto !important; min-width:auto !important; max-width:260px !important;
}
.products__sort .dropdown-menu { min-width:0 !important; font-size:13px !important; }

/* ============================================================
   v103 — topbar : aligner verticalement tél/email/décompte ;
   newsletter : texte bouton blanc ; footer "Boutique stickers" : titre en
   haut + adresse dessous (était flex row) ; loupe recherche : à droite,
   blanche, jamais recouverte par le texte.
   ============================================================ */
/* A. TOPBAR : 3 items alignés verticalement (centrés) */
#header .header-top__left { align-items:center !important; }
#header .header-top__left > * { align-self:center !important; }
.ps-contactinfo, .nwc-timer { display:inline-flex !important; align-items:center !important; }
.nwc-timer, .nwc-timer__label, .nwc-timer__count,
.ps-contactinfo__phone, .ps-contactinfo__email,
.ps-contactinfo__phone span, .ps-contactinfo__email span { line-height:1 !important; }

/* B. NEWSLETTER : texte du bouton "S'abonner" en blanc */
.ps-emailsubscription .btn, .ps-emailsubscription button,
.blocknewsletter .btn, .blocknewsletter button,
[class*=newsletter] button.btn { color:#fff !important; }

/* C. FOOTER "Boutique stickers" : la section reste en bloc (contre le
   display:inline-flex de la topbar qui fuit ici). En revanche le titre et le
   contenu restent NATIFS : sur mobile le bloc se replie/deplie comme
   "Informations"/"Mon compte" (titre flex + collapse), sur desktop le contenu
   est affiche empile (media query min-width:768px ci-dessous). */
.ps-contactinfo.footer-block { display:block !important; }
/* chevron du titre en blanc comme les autres blocs (les icones tel/email du
   contenu restent rouges, elles, via leurs propres regles) */
.ps-contactinfo.footer-block .footer-block__title .material-icons { color:#fff !important; }
@media (min-width: 768px) {
  .ps-contactinfo.footer-block .footer-block__title {
    display:block !important; width:100% !important; float:none !important; margin:0 0 1rem 0 !important;
  }
  .ps-contactinfo.footer-block .footer-block__content { display:block !important; }
}

/* D. LOUPE de recherche : complètement à droite, blanche, jamais recouverte */
.ps-searchbar__form { position:relative !important; }
.ps-searchbar__magnifier, .ps-searchbar .js-search-icon {
  position:absolute !important; right:16px !important; left:auto !important;
  top:50% !important; transform:translateY(-50%) !important; margin:0 !important;
  color:#fff !important; z-index:4 !important; pointer-events:none !important;
}
.ps-searchbar__input, .ps-searchbar__form input[type=text] {
  padding-right:48px !important; padding-left:1rem !important;
}

/* ============================================================
   v104 — topbar : alignement vertical PARFAIT des 3 items (même hauteur
   + centrage interne, le décompte restait 2px plus bas).
   ============================================================ */
.ps-contactinfo, .ps-contactinfo__phone, .ps-contactinfo__email, .nwc-timer {
  display:inline-flex !important; align-items:center !important; height:26px !important;
}
/* le timer contient un <script> : ne JAMAIS l'afficher (le sélecteur >* l'avait rendu visible) */
#header .header-top__left script, #header .header-top__left style,
.nwc-timer script, .nwc-timer style { display:none !important; }
.ps-contactinfo .material-icons,
.ps-contactinfo__phone span, .ps-contactinfo__email span,
.nwc-timer__label, .nwc-timer__count { vertical-align:middle !important; line-height:1 !important; }

/* ============================================================
   v106 — "Nos univers" : supprimer la bordure rouge au survol des tuiles
   + marges gauche/droite (centré sur la largeur des blocs produits 1296px).
   ============================================================ */
/* pas d'encadré rouge au survol */
.at-tile::after { display:none !important; }
.at-tile:hover::after { border-color:transparent !important; }
/* marges gauche/droite — voir v110 (alignées sur le blog "Derniers articles") */

/* ============================================================
   v110 — marges du bloc blog slider "Derniers articles"
   (.ybc_blog_content_block.blog_type_slider, quasi pleine largeur l=3/r=3/w=1686)
   appliquées à "NOS UNIVERS" (.at-tiles) ET "AVIS CLIENTS" (.at-reviews__grid).
   "Nos nouveautés" (ps_newproducts) REVIENT à ses marges précédentes (1320 auto).
   ============================================================ */
.at-tiles,
.at-reviews__grid {
  max-width:calc(100% - 46px) !important;   /* cartes à 23px = comme les cartes du blog "Derniers articles" */
  margin-left:auto !important; margin-right:auto !important;
}

/* ============================================================
   v112 — (A) nav du carrousel blog "Derniers articles" au style des
   carrousels produits (cercles rouges sur les côtés) ; (C) bande réassurance
   collée à la newsletter (suppression du gap, intégration au footer).
   ============================================================ */
/* (A) flèches slick du blog = .at-carousel-nav */
.ybc-blog .blog_type_slider, .ybc_blog_content_block.blog_type_slider { position:relative !important; }
.ybc-blog .slick-prev, .ybc-blog .slick-next,
.ybc_blog_content_block .slick-prev, .ybc_blog_content_block .slick-next {
  position:absolute !important; top:42% !important; transform:translateY(-50%) !important;
  width:42px !important; height:42px !important; border-radius:50% !important; border:none !important;
  background:var(--at-red) !important; z-index:6 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  box-shadow:0 2px 8px rgba(0,0,0,.5) !important; opacity:.92 !important; font-size:0 !important;
}
.ybc-blog .slick-prev::before, .ybc-blog .slick-next::before,
.ybc_blog_content_block .slick-prev::before, .ybc_blog_content_block .slick-next::before {
  font-family:inherit !important; font-size:26px !important; line-height:1 !important;
  color:#fff !important; opacity:1 !important;
}
.ybc-blog .slick-prev::before, .ybc_blog_content_block .slick-prev::before { content:'\2039' !important; }
.ybc-blog .slick-next::before, .ybc_blog_content_block .slick-next::before { content:'\203A' !important; }
.ybc-blog .slick-prev, .ybc_blog_content_block .slick-prev { left:-18px !important; right:auto !important; }
.ybc-blog .slick-next, .ybc_blog_content_block .slick-next { right:-18px !important; left:auto !important; }
.ybc-blog .slick-prev:hover, .ybc-blog .slick-next:hover,
.ybc_blog_content_block .slick-prev:hover, .ybc_blog_content_block .slick-next:hover { background:var(--at-red-dark) !important; opacity:1 !important; }
.ybc-blog .slick-disabled, .ybc_blog_content_block .slick-disabled { opacity:.35 !important; cursor:default !important; }

/* (C) réassurance collée à la newsletter : supprimer le gap (padding-bottom du wrapper) */
body#index .center-column.page { padding-bottom:0 !important; }
body#index .footer__before { margin-top:0 !important; }

/* ============================================================
   v113 — flèches blog : forte spécificité (le module ybc_blog impose
   un fond blanc carré plus spécifique que v112).
   ============================================================ */
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow {
  background-color:var(--at-red) !important; background-image:none !important;
  border-radius:50% !important; width:42px !important; height:42px !important;
  border:none !important; box-shadow:0 2px 8px rgba(0,0,0,.5) !important; opacity:.92 !important;
  top:42% !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow:hover,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow:hover {
  background-color:var(--at-red-dark) !important; opacity:1 !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow::before,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow::before {
  color:#fff !important; font-size:26px !important; opacity:1 !important; font-family:inherit !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow::before { content:'\2039' !important; }
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow::before { content:'\203A' !important; }

/* ============================================================
   v114 — bouton "Voir tous les avis" (sous les avis home) + page CMS avis.
   ============================================================ */
.at-reviews__more { text-align:center; margin-top:1.8rem; }
.at-reviews__more-btn {
  display:inline-block; padding:.7rem 2.2rem; background:var(--at-red); color:#fff !important;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
  font-size:1.05rem; border-radius:4px; text-decoration:none !important; transition:background .18s;
}
.at-reviews__more-btn:hover { background:var(--at-red-dark); color:#fff !important; }
/* page CMS "Avis clients" */
.at-allreviews__intro { color:#cfcfcf; margin:0 0 1.6rem; font-size:1.1rem; }
.at-allreviews .at-reviews__grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important; gap:1rem !important; }

/* ============================================================
   v116 — flèches blog "Derniers articles" : plus discrètes (sombre translucide),
   ramenées DANS la fenêtre (left/right:-18px débordaient), glyphe bien centré.
   ============================================================ */
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow {
  background-color:rgba(18,18,18,.55) !important; background-image:none !important;
  width:38px !important; height:38px !important; border-radius:50% !important; border:none !important;
  box-shadow:0 1px 6px rgba(0,0,0,.4) !important; opacity:1 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:0 !important; line-height:0 !important; top:44% !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow { left:8px !important; right:auto !important; }
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow { right:8px !important; left:auto !important; }
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow:hover,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow:hover {
  background-color:rgba(0,0,0,.82) !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-arrow::before {
  font-family:inherit !important; font-size:22px !important; line-height:1 !important;
  color:#fff !important; opacity:.95 !important; display:block !important;
  width:auto !important; height:auto !important; margin:0 !important;
}

/* ============================================================
   v117 — flèches blog : glyphe ‹ › remplacé par un chevron en bordures CSS
   (carré pivoté) qui se centre parfaitement (les guillemets étaient trop hauts).
   ============================================================ */
body#index .ybc_blog_content_block.blog_type_slider .slick-arrow::before {
  content:'' !important; display:block !important;
  width:9px !important; height:9px !important;
  border:0 !important; border-top:2.5px solid #fff !important; border-right:2.5px solid #fff !important;
  background:none !important; font-size:0 !important; opacity:.95 !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow::before {
  transform:rotate(-135deg) !important; margin-left:3px !important;   /* pointe à gauche */
}
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow::before {
  transform:rotate(45deg) !important; margin-right:3px !important;    /* pointe à droite */
}

/* ============================================================
   v118 — flèches blog : supprimer le DOUBLE (glyphe ‹› de v116 restait en plus
   du chevron-bordure), ronds plus VISIBLES ; "Lire la suite" en rouge charte.
   ============================================================ */
/* tuer le glyphe (même spécificité prev/next que v116) → seul le chevron-bordure reste */
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow::before,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow::before {
  content:'' !important;
}
/* ronds plus visibles : fond sombre + anneau blanc + chevron net */
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow {
  background-color:rgba(0,0,0,.7) !important; border:1.5px solid rgba(255,255,255,.85) !important;
  width:42px !important; height:42px !important; box-shadow:0 2px 8px rgba(0,0,0,.55) !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow:hover,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow:hover {
  background-color:var(--at-red) !important; border-color:#fff !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-arrow::before {
  width:11px !important; height:11px !important; border-top-width:3px !important; border-right-width:3px !important;
  opacity:1 !important;
}

/* "Lire la suite" (blog) : rouge charte au lieu du vert olive du module */
.ybc_blog_content_block .read_more,
.ybc-blog .read_more, .ybc_blog_content_block a.read_more {
  color:var(--at-red-bright) !important;
}
.ybc_blog_content_block .read_more:hover, .ybc-blog .read_more:hover { color:#fff !important; }

/* ============================================================
   v119 — flèches blog : chevron en SVG centré (background-position:center)
   au lieu du chevron-bordure mal centré dans le rond.
   ============================================================ */
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow::before,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow::before {
  content:'' !important; display:block !important;
  width:16px !important; height:16px !important; margin:0 !important;
  border:0 !important; transform:none !important;
  background-repeat:no-repeat !important; background-position:center center !important; background-size:16px 16px !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important;
}
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   v120 — flèches blog : le ::before est en position:absolute (slick) → le
   centrage flex ne s'appliquait pas. On le centre explicitement.
   ============================================================ */
body#index .ybc_blog_content_block.blog_type_slider .slick-prev.slick-arrow::before,
body#index .ybc_blog_content_block.blog_type_slider .slick-next.slick-arrow::before {
  position:absolute !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important; margin:0 !important;
}

/* ============================================================
   v121 — vignettes produit : retirer l'aperçu rapide + changer le fond
   de toute la vignette au survol (teinte charte).
   ============================================================ */
/* retirer l'aperçu rapide */
.product-miniature__quickview-button,
.product-miniature__quickview-touch,
.product-miniature [class*="quickview"],
.product-miniature [class*="quick-view"] { display:none !important; }

/* fond de la vignette au survol : on surcharge la variable --at-surface
   (utilisée par .product-miniature/__inner/__bottom/__informations) → tout le
   fond de la vignette change d'un coup (l'image reste sur fond clair). */
.product-miniature, .product-miniature__inner, .product-miniature__bottom,
.product-miniature__informations { transition:background-color .2s ease, box-shadow .2s ease; }
.product-miniature:hover, .product-miniature.at-hovertest,
.product-miniature:hover .product-miniature__inner, .product-miniature.at-hovertest .product-miniature__inner,
.product-miniature:hover .product-miniature__bottom, .product-miniature.at-hovertest .product-miniature__bottom,
.product-miniature:hover .product-miniature__informations, .product-miniature.at-hovertest .product-miniature__informations {
  background:#333333 !important; background-color:#333333 !important;
}
.product-miniature:hover .product-miniature__inner, .product-miniature.at-hovertest .product-miniature__inner {
  box-shadow:0 6px 18px rgba(0,0,0,.55) !important; border-color:#4a4a4a !important;
}

/* ============================================================
   v125 — vignettes promo : ruban PROMO diagonal (coin haut-gauche) comme la
   prod, -40% à côté du prix barré, prix toujours à la même hauteur.
   ============================================================ */
/* contexte de positionnement = la carte */
.product-miniature__inner { position:relative !important; }
.product-flags { position:absolute !important; top:0 !important; left:0 !important; right:auto !important; z-index:4; }
/* RUBAN diagonal "Promo !" (rotation -45° dans le coin, clippé par la carte) */
.product-flags .badge.on-sale {
  position:absolute !important; top:18px !important; left:-38px !important; right:auto !important;
  width:140px !important; text-align:center !important; transform:rotate(-45deg) !important;
  background:#a3001a !important; color:#fff !important;   /* rouge un peu plus sombre que --at-red */
  font-family:'Barlow Condensed',sans-serif !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:.8rem !important; letter-spacing:.6px !important;
  padding:3px 0 !important; margin:0 !important; border-radius:0 !important;
  box-shadow:0 1px 5px rgba(0,0,0,.45) !important;
}
/* masquer le flag -40% du haut (déplacé près du prix) */
.product-flags .badge.discount { display:none !important; }

/* -40% à côté du prix barré */
.product-miniature__discount-price { display:inline-flex !important; align-items:center; gap:6px; }
.product-miniature__discount-pct {
  display:inline-block; background:var(--at-red); color:#fff !important; font-weight:700;
  font-size:.72rem; line-height:1; padding:3px 6px; border-radius:3px; vertical-align:middle;
}

/* PRIX toujours à la même hauteur : titre fixé à 2 lignes */
.product-miniature__title {
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important; min-height:2.5em !important; line-height:1.25 !important;
}

/* ============================================================
   v127 — rapprocher la pastille "nombre d'articles" de l'icône du panier.
   ============================================================ */
.blockcart.header-block .header-block__badge,
.blockcart .header-block__badge {
  margin-left:-13px !important; position:relative !important; top:-8px !important; z-index:3 !important;
}

/* ============================================================
   v128 — ruban PROMO : afficher UNIQUEMENT s'il y a une vraie remise
   (présence du flag .badge.discount, même masqué) + rouge un peu plus sombre.
   Le flag on-sale seul (attribut "en promo" du produit) ne suffit plus.
   ============================================================ */
body .product-flags .badge.on-sale,
body .product-flags li.on-sale { display:none !important; }
body .product-flags:has(.badge.discount) .badge.on-sale,
body .product-flags:has(.badge.discount) li.on-sale {
  display:block !important;
  background:#a3001a !important; background-color:#a3001a !important;
}

/* ============================================================
   v130 — ruban PROMO : élément CUSTOM .product-miniature__promo-ribbon
   (piloté par has_discount dans le template) au lieu du flag .badge.on-sale
   (dont le fond est imposé par theme.css layered = #d1001c impossible à
   surcharger en non-layered). On masque le flag thème, on stylise le nôtre
   en rouge sombre.
   ============================================================ */
.product-flags .badge.on-sale, .product-flags li.on-sale { display:none !important; }
.product-miniature__promo-ribbon {
  position:absolute !important; top:18px; left:-38px; right:auto;
  width:140px; text-align:center; transform:rotate(-45deg);
  background:#a3001a; color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; font-size:.8rem; letter-spacing:.6px;
  padding:3px 0; box-shadow:0 1px 5px rgba(0,0,0,.45); z-index:4; pointer-events:none;
}

/* ============================================================
   v131 — (1) loader de rafraîchissement produits (tri/pagination) : fond
   sombre charte au lieu du blanc (.page-loader = rgba(--bs-body-bg-rgb=blanc)).
   (2) "Trier par" aligné à droite (bord des produits).
   ============================================================ */
.page-loader {
  background:rgba(12,12,12,.85) !important;
  color:var(--at-red-bright) !important;   /* spinner (currentColor) visible sur sombre */
}
.page-loader .spinner-border, .page-loader .spinner-grow { color:var(--at-red-bright) !important; }
/* "Trier par" collé à droite */
.products__sort { justify-content:flex-end !important; }

/* ============================================================
   v132 — loader de rafraîchissement : spinner ×3 (≈2rem → 6rem).
   ============================================================ */
.page-loader .spinner-border, .page-loader .spinner-grow {
  --bs-spinner-width:6rem !important; --bs-spinner-height:6rem !important;
  --bs-spinner-border-width:.55rem !important;
  width:6rem !important; height:6rem !important;
}

/* ============================================================
   v133 — lazy widgets accueil : réserve la hauteur pour éviter le saut de
   layout, et centre le spinner pendant le chargement AJAX des carrousels.
   ============================================================ */
.at-lazywidget { min-height:340px; }
.at-lazywidget__spinner {
  display:flex; align-items:center; justify-content:center; min-height:340px; width:100%;
}
.at-lazywidget__spinner .spinner-border {
  width:3rem; height:3rem; color:var(--at-red-bright);
}

/* ============================================================
   v134 — fiche produit : fond clair derrière les visuels. Les images stickers
   sont des PNG « silhouette noire sur fond transparent » (.jpg trompeur) :
   sans support clair elles sont noir-sur-noir = invisibles sur le thème sombre.
   On aligne sur les miniatures (#f3f3f3), comme la prod/123stickers.
   ============================================================ */
.product__images .carousel-item img,
.product__images picture img,
.product__carousel img,
.product__thumbnails img,
.product__thumbnail img {
  background:#f3f3f3 !important;
  border-radius:10px;
}

/* ============================================================
   v135 — FICHE PRODUIT : zoning façon 123stickers en charte tuning.
   Titre comme l'accueil, accordéons chartés, réassurance en bande, zoom.
   ============================================================ */

/* --- Titre fiche produit = même traitement que les titres d'accueil --- */
.product__name.h2, h1.product__name {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:500 !important;
  font-size:2rem !important;
  line-height:1.15 !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  color:#fff !important;
  display:inline-block !important;
  position:relative !important;
  padding:0 0 .55rem 0 !important;
  margin:0 0 1rem 0 !important;
  border:0 !important;
}
.product__name.h2::after, h1.product__name::after {
  content:''; position:absolute; left:0; bottom:0;
  width:56px; height:3px; background:var(--at-red);
}

/* --- Accordéons (Description / Détails / Fiche technique) en charte --- */
.product__accordion {
  --bs-accordion-bg:transparent;
  --bs-accordion-color:#cfcfcf;
  --bs-accordion-border-color:#2a2a2a;
  --bs-accordion-btn-color:#fff;
  --bs-accordion-btn-bg:transparent;
  --bs-accordion-active-bg:transparent;
  --bs-accordion-active-color:#fff;
  --bs-accordion-btn-focus-border-color:transparent;
  --bs-accordion-btn-focus-box-shadow:none;
  margin-top:.5rem;
}
.product__accordion .accordion-item {
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #2a2a2a !important;
}
.product__accordion .accordion-button {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:500 !important;
  font-size:1.4rem !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color:#fff !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:1rem 0 !important;
}
.product__accordion .accordion-button::after { filter:invert(1) brightness(1.4); }
.product__accordion .accordion-body { color:#bdbdbd; padding:.2rem 0 1.2rem; }
.product__accordion .product__description.rich-text,
.product__accordion .accordion-body * { color:#bdbdbd; }
.product__accordion .accordion-body strong { color:#e6e6e6; }
.product__accordion .data-sheet,
.product__accordion table { width:100%; }
.product__accordion .data-sheet dt, .product__accordion .data-sheet .name { color:#fff; }
.product__accordion .data-sheet dd, .product__accordion .data-sheet .value { color:#bdbdbd; }

/* --- Réassurance en bande pleine largeur --- */
.at-product-reassurance {
  margin:2.2rem 0 1rem;
  padding:1.2rem 1.4rem;
  background:var(--at-surface,#1a1a1a);
  border:1px solid #262626;
  border-radius:8px;
}
.at-product-reassurance .blockreassurance,
.at-product-reassurance .block-reassurance,
.at-product-reassurance ul {
  display:flex !important; grid-template-columns:none !important; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
  gap:1rem 1.6rem; margin:0 !important; padding:0 !important; list-style:none; background:transparent !important;
}
.at-product-reassurance .reassurance,
.at-product-reassurance .block-reassurance-item,
.at-product-reassurance li {
  flex:1 1 210px; display:flex; align-items:center; gap:.7rem; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important;
}
.at-product-reassurance .reassurance__image { flex:0 0 auto; line-height:0; }
.at-product-reassurance .reassurance__image svg,
.at-product-reassurance .reassurance__image img { width:38px !important; height:38px !important; }
.at-product-reassurance .title { color:#fff !important; font-weight:600 !important; font-size:.95rem; }
.at-product-reassurance .desc,
.at-product-reassurance span:not(.title),
.at-product-reassurance p { color:#9aa0a6 !important; font-size:.85rem; margin:0; }

/* --- Zoom (lightbox) --- */
.product__images.at-zoomable { cursor:zoom-in; }
.at-zoom-overlay {
  position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.92);
  display:none; align-items:center; justify-content:center; padding:4vh 4vw;
}
.at-zoom-overlay.is-open { display:flex; }
.at-zoom-stage {
  position:relative; width:min(82vh,82vw); height:min(82vh,82vw);
  background:#fff; border-radius:14px; background-size:cover; background-position:center;
  box-shadow:0 12px 60px rgba(0,0,0,.6);
}
.at-zoom-sticker {
  position:absolute; inset:6%;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  background-color:#000;
}
.at-zoom-img { position:absolute; inset:6%; width:88%; height:88%; object-fit:contain; }
.at-zoom-close {
  position:absolute; top:14px; right:24px; z-index:1;
  background:none; border:0; color:#fff; font-size:46px; line-height:1; cursor:pointer;
}
.at-zoom-close:hover { color:var(--at-red-bright,#ff2940); }

/* --- Footer produit lazy : réserve la hauteur --- */
.at-lazy-footer { min-height:220px; display:block; }

/* ============================================================
   v137 — fiche produit : description pleine largeur + réassurance footer global.
   ============================================================ */

/* La zone bas (onglets/description) en pleine largeur (était une grille 2 col). */
.product__bottom { display:block !important; }
.product__bottom-left { width:100% !important; max-width:100% !important; flex:0 0 100% !important; }

/* Bandeau de réassurance dans le footer (toutes pages), au-dessus du newsletter. */
.footer__reassurance { background:#111; padding:1.5rem 0; }
.footer__reassurance .blockreassurance,
.footer__reassurance .block-reassurance,
.footer__reassurance ul {
  display:flex !important; grid-template-columns:none !important; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
  gap:1rem 1.6rem; margin:0 !important; padding:0 !important; list-style:none; background:transparent !important;
}
.footer__reassurance .reassurance,
.footer__reassurance .block-reassurance-item,
.footer__reassurance li {
  flex:1 1 210px; display:flex; align-items:center; gap:.7rem; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important;
}
.footer__reassurance .reassurance__image { flex:0 0 auto; line-height:0; }
.footer__reassurance .reassurance__image svg,
.footer__reassurance .reassurance__image img { width:36px !important; height:36px !important; }
.footer__reassurance .title { color:#fff !important; font-weight:600 !important; font-size:.95rem; }
.footer__reassurance .desc,
.footer__reassurance span:not(.title),
.footer__reassurance p { color:#9aa0a6 !important; font-size:.85rem; margin:0; }

/* ============================================================
   v138 — zoom enrichi : outils "visualiser sur fond/image" dans la lightbox.
   ============================================================ */
.at-zoom-box {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  max-height:92vh;
}
/* stage réduit pour laisser la place aux outils */
.at-zoom-overlay .at-zoom-box .at-zoom-stage {
  width:min(60vh,72vw); height:min(60vh,72vw);
}
.at-zoom-tools {
  display:flex; gap:1.4rem 2.4rem; flex-wrap:wrap; justify-content:center;
  max-width:min(72vh,84vw);
}
.at-zoom-tool-label {
  display:block; color:#fff; font-family:'Barlow Condensed','Oswald',sans-serif;
  text-transform:uppercase; font-size:13px; letter-spacing:.04em; margin-bottom:7px; text-align:center;
}
.at-zoom-tools .visu-swatches { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; max-width:340px; }
.at-zoom-tools .at-visu-empty .visu-swatches::after {
  content:"Bientôt disponible"; color:#888; font-size:12px; align-self:center; margin-left:4px;
}

/* ============================================================
   v139 — fiche produit finitions 2 : zoom lightbox complet, titres charte,
   masquage fiche technique SD (comme 123stickers), options select.
   ============================================================ */

/* 123stickers n'affiche que Description + Avis : on masque "Détails du produit"
   (réf remontée en haut) et "Fiche technique" (paramètres internes StickerDesigner). */
#product_details, #product_features { display:none !important; }

/* Titres de section produit (Accessoires, Commentaires…) comme les titres d'accueil */
.section-title, h2.section-title, .products-section-title {
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:500 !important; font-size:1.8rem !important;
  text-transform:uppercase !important; letter-spacing:1.5px !important;
  color:#fff !important; display:inline-block !important; position:relative !important;
  padding:0 0 .5rem 0 !important; margin:2.4rem 0 1.4rem 0 !important; border:0 !important;
}
.section-title::after, h2.section-title::after, .products-section-title::after {
  content:''; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--at-red);
}

/* Options des <select> en charte (le menu déroulant natif était blanc) */
.product__variants select option, .product-variant select option, select option {
  background-color:#1f1f1f; color:#fff;
}

/* ---- Zoom lightbox : aperçu à gauche, panneau de configuration à droite ---- */
.at-zoom-overlay { flex-direction:row; align-items:stretch; padding:0; }
.at-zoom-overlay .at-zoom-stage {
  flex:1 1 auto; position:relative; width:auto; height:auto; margin:0; border-radius:0;
  background:#fff; background-size:cover; background-position:center;
}
.at-zoom-overlay .at-zoom-sticker { inset:8%; }
.at-zoom-overlay .at-zoom-img { position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; }
.at-zoom-panel {
  flex:0 0 360px; max-width:42vw; background:#141414; overflow-y:auto;
  padding:2rem 1.5rem 3rem; box-shadow:-4px 0 24px rgba(0,0,0,.5);
}
.at-zoom-overlay.at-zoom-nocolor .at-zoom-panel { display:none; }
.at-zoom-panel .visu-section { margin-bottom:1.4rem; }
.at-zoom-panel .visu-section-title {
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:15px;
  letter-spacing:.04em; color:#fff; border-bottom:1px solid var(--at-red,#d1001c);
  padding-bottom:5px; margin:0 0 10px;
}
.at-zoom-panel .visu-swatches { display:flex; flex-wrap:wrap; gap:7px; }
.at-lb-color {
  width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid #4a4a4a;
  box-sizing:border-box; transition:transform .12s, border-color .12s;
}
.at-lb-color:hover { transform:scale(1.12); }
.at-lb-color.active { border-color:var(--at-red-bright,#ff2940); transform:scale(1.15); box-shadow:0 0 0 2px rgba(255,41,64,.3); }
.at-lb-orient-row { display:flex; gap:.6rem; }
.at-lb-orient {
  flex:1; padding:.5rem .8rem; background:#262626; color:#fff; border:1px solid #3a3a3a;
  border-radius:5px; cursor:pointer; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.04em; font-size:14px; transition:background .12s,border-color .12s;
}
.at-lb-orient:hover { border-color:var(--at-red); }
.at-lb-orient.active { background:var(--at-red); border-color:var(--at-red); }
.at-zoom-overlay .at-zoom-close { top:14px; right:18px; z-index:3; }

@media (max-width:768px){
  .at-zoom-overlay { flex-direction:column; }
  .at-zoom-panel { flex:0 0 auto; max-width:100%; max-height:46vh; }
}

/* ============================================================
   v140 — Fiche technique pédagogique (3 composants) + réassurance footer
   pleine largeur collée au newsletter.
   ============================================================ */

/* Réassurance footer : pleine largeur (sans container) et collée au newsletter */
.footer__reassurance { background:#111; padding:1.4rem 2.5rem; margin:0 !important; }
.footer__before { margin-top:0 !important; }
.footer__before .ps-emailsubscription,
.footer__before [class*=emailsubscription] { margin-top:0 !important; }

/* Fiche technique : visuel 3 couches + texte explicatif (charte) */
.at-ft { margin:2.4rem 0; padding:1.8rem; background:var(--at-surface,#1a1a1a); border:1px solid #262626; border-radius:8px; }
.at-ft__title { margin-top:0 !important; }
.at-ft__grid { display:grid; grid-template-columns:320px 1fr; gap:2.2rem; align-items:center; }
.at-ft__visual { position:relative; height:300px; }
.at-ft__layer { position:absolute; width:190px; height:190px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.at-ft__layer--support { left:8px; top:8px; background:#ece6d7; }
.at-ft__layer--sticker { left:54px; top:54px; background:#fff; display:flex; align-items:center; justify-content:center; }
.at-ft__layer--sticker img { max-width:78%; max-height:78%; object-fit:contain; }
.at-ft__layer--transfert { left:100px; top:100px; background:repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 7px,rgba(255,255,255,.22) 7px 14px); border:1px solid rgba(255,255,255,.35); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.at-ft__num { position:absolute; width:28px; height:28px; border-radius:50%; background:var(--at-red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; z-index:6; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.at-ft__num--1 { left:-8px; top:22px; }
.at-ft__num--2 { left:38px; top:68px; }
.at-ft__num--3 { left:84px; top:250px; }
.at-ft__text { color:#bdbdbd; }
.at-ft__headline { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; color:#fff; font-size:1.2rem; letter-spacing:.04em; margin:0 0 .25rem; }
.at-ft__sub { font-weight:600; color:#e6e6e6; margin:0 0 1rem; }
.at-ft__step { margin:0 0 .7rem; line-height:1.55; }
.at-ft__step strong { color:#fff; }
.at-ft__n { color:var(--at-red-bright,#ff2940); font-weight:700; margin-right:3px; }

@media (max-width:768px){
  .at-ft__grid { grid-template-columns:1fr; }
  .at-ft__visual { margin:0 auto 1.5rem; width:300px; }
}

/* ============================================================
   v141 — réassurance footer : fond plein (battre [class*=reassurance] transparent)
   + collée au newsletter (padding réduit) + nouvelles icônes.
   ============================================================ */
.footer.footer__reassurance { background:#111 !important; padding:1rem 2.5rem !important; margin:0 !important; }
.footer.footer__reassurance .block-reassurance-item img,
.footer.footer__reassurance [class*=reassurance] img { width:40px !important; height:40px !important; }

/* ============================================================
   v142 — réassurance footer : pleine largeur, AUCUNE marge ni padding vertical
   sur .footer__reassurance (flush). Souffle minimal porté par les items.
   ============================================================ */
.footer.footer__reassurance {
  background:#111 !important;
  margin:0 !important;
  padding:0 2.5rem !important;
}
.footer.footer__reassurance .block-reassurance,
.footer.footer__reassurance .blockreassurance { margin:0 !important; padding:0 !important; }
.footer.footer__reassurance .block-reassurance-item { margin:0 !important; padding:10px 0 !important; }

/* ============================================================
   v143 — réassurance footer : padding 0 sur tous les côtés (aucune marge
   gauche/droite/haut/bas). Items en pleine largeur, léger souffle interne.
   ============================================================ */
.footer.footer__reassurance { padding:0 !important; margin:0 !important; }
.footer.footer__reassurance .block-reassurance-item { padding:12px 1.2rem !important; }

/* ============================================================
   v144 — fond des vignettes produit : effet "plaque plastique" glossy
   (mêmes tons clairs + reflet miroir diagonal + brillance/profondeur).
   ============================================================ */
.product-miniature__image {
  background-color:#eceef1 !important;
  background-image:
    linear-gradient(122deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.55) 65%, rgba(255,255,255,.12) 70%, rgba(255,255,255,0) 78%),
    radial-gradient(130% 90% at 18% 10%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(155deg, #fbfcfd 0%, #e8eaee 52%, #d6d9e0 100%) !important;
  border-radius:10px !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -3px 9px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.25) !important;
}
/* le visuel (silhouette transparente) repose sur la plaque, fond transparent */
.product-miniature__image img { background:transparent !important; }

/* ============================================================
   v145 — vignettes : effet plaque plastique GLOSSY accentué (reflet miroir
   bien visible : bande brillante + bande sombre + dégradé de profondeur).
   .product-miniature__image EST l'<img> (le dégradé est son background,
   visible derrière le PNG transparent).
   ============================================================ */
.product-miniature__image {
  background-color:#dfe3ea !important;
  background-image:
    linear-gradient(118deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,.95) 41%,
      rgba(255,255,255,.15) 48%,
      rgba(150,160,178,.45) 55%,
      rgba(255,255,255,0) 70%),
    radial-gradient(130% 110% at 22% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(158deg, #ffffff 0%, #e9edf2 38%, #cfd5df 74%, #b9c0cd 100%) !important;
  border-radius:10px !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -7px 16px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

/* ============================================================
   v146 — vignettes : (1) bloc "même catégorie" en grille à colonnes fixes
   (vignette unique = taille normale, plus pleine largeur) ; (2) image du
   produit en retrait pour que la PLAQUE GLOSSY apparaisse tout autour
   (fond de la vignette visible dans sa totalité).
   ============================================================ */
.at-catprods {
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap:1.2rem !important;
  align-items:start;
}
/* le visuel produit flotte sur la plaque (retrait → plaque visible tout autour) */
.product-miniature__image {
  box-sizing:border-box !important;
  padding:12% !important;
  object-fit:contain !important;
}

/* ============================================================
   v147 — la PLAQUE GLOSSY est appliquée au FOND de la vignette
   (.product-miniature__image-container, le carré gris) ; l'IMAGE reste
   INTACTE (annulation du retrait/effet ajoutés sur <img> en v144-146).
   ============================================================ */
.product-miniature__image {
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.product-miniature__image-container {
  background-color:#dfe3ea !important;
  background-image:
    linear-gradient(118deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,.95) 41%,
      rgba(255,255,255,.15) 48%,
      rgba(150,160,178,.45) 55%,
      rgba(255,255,255,0) 70%),
    radial-gradient(130% 110% at 22% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(158deg, #ffffff 0%, #e9edf2 38%, #cfd5df 74%, #b9c0cd 100%) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -7px 16px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

/* ============================================================
   v148 — la plaque glossy doit battre .product-miniature__image-container
   .thumbnail-container { background:#f3f3f3 !important } (l.599) → spécificité
   supérieure. Fond gris de la vignette = plaque ; image intacte.
   ============================================================ */
.product-miniature .product-miniature__image-container,
.product-miniature .product-miniature__image-container.thumbnail-container {
  background-color:#dfe3ea !important;
  background-image:
    linear-gradient(118deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,.95) 41%,
      rgba(255,255,255,.15) 48%,
      rgba(150,160,178,.45) 55%,
      rgba(255,255,255,0) 70%),
    radial-gradient(130% 110% at 22% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(158deg, #ffffff 0%, #e9edf2 38%, #cfd5df 74%, #b9c0cd 100%) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -7px 16px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.4) !important;
}

/* ============================================================
   v149 — la PLAQUE GLOSSY passe sur TOUTE la vignette (.product-miniature__inner).
   Le conteneur image devient transparent (la plaque traverse) ; texte assombri
   pour rester lisible sur la plaque claire.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-color:#dfe3ea !important;
  background-image:
    linear-gradient(118deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,.95) 41%,
      rgba(255,255,255,.15) 48%,
      rgba(150,160,178,.45) 55%,
      rgba(255,255,255,0) 70%),
    radial-gradient(130% 80% at 22% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(158deg, #ffffff 0%, #e9edf2 38%, #cfd5df 74%, #b9c0cd 100%) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.4) !important;
}
/* le conteneur image n'a plus son propre fond : la plaque de l'inner traverse */
.product-miniature .product-miniature__image-container,
.product-miniature .product-miniature__image-container.thumbnail-container {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
/* lisibilité du texte sur la plaque claire */
.product-miniature .product-miniature__title,
.product-miniature .product-miniature__title a { color:#15171c !important; }
.product-miniature .product-miniature__bottom,
.product-miniature .product-miniature__infos { color:#15171c !important; }

/* ============================================================
   v150 — la zone basse (.product-miniature__bottom) gardait un fond sombre qui
   masquait la plaque ; on la rend transparente pour que la PLAQUE glossy de
   .product-miniature__inner traverse toute la vignette. Texte lisible (sombre).
   ============================================================ */
.product-miniature .product-miniature__bottom { background:transparent !important; }
.product-miniature .product-miniature__title,
.product-miniature .product-miniature__title a,
.product-miniature .product-miniature__infos,
.product-miniature .product-miniature__bottom { color:#15171c !important; }
.product-miniature .product-miniature__regular-price { color:#6b7079 !important; }

/* ============================================================
   v151 — RESET des essais glossy v147-v150 : on revient aux couleurs d'origine
   de la carte (carte sombre, fond image gris #f3f3f3, texte clair) ; le reflet
   glossy se SUPERPOSE sur le gris SANS le transformer, et passe DERRIÈRE l'image
   (le design du produit reste propre, aucun reflet dessus).
   ============================================================ */
.product-miniature .product-miniature__inner { background:#1a1a1a !important; }
.product-miniature .product-miniature__bottom { background:#1a1a1a !important; }
.product-miniature .product-miniature__title,
.product-miniature .product-miniature__title a { color:#f1f1f1 !important; }
.product-miniature .product-miniature__infos { color:#cfcfcf !important; }
.product-miniature .product-miniature__regular-price { color:#9aa0a6 !important; }

/* fond image : couleur initiale conservée + reflet superposé, derrière l'image */
.product-miniature .product-miniature__image-container,
.product-miniature .product-miniature__image-container.thumbnail-container {
  background:#f3f3f3 !important;
  background-image:none !important;
  position:relative !important;
  box-shadow:none !important;
}
.product-miniature .product-miniature__image-container::before {
  content:'' !important;
  position:absolute !important; inset:0 !important; z-index:0 !important;
  pointer-events:none !important; border-radius:inherit;
  background:
    linear-gradient(120deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 63%),
    radial-gradient(120% 90% at 20% 6%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%) !important;
}
/* l'image (et le lien) passent AU-DESSUS du reflet → design net, sans glossy dessus */
.product-miniature .product-miniature__image-container > *,
.product-miniature .product-miniature__image { position:relative !important; z-index:1 !important; }

/* ============================================================
   v152 — le reflet était blanc sur #f3f3f3 (invisible). On garde le fond gris
   mais le reflet inclut des bandes légèrement sombres (contraste = reflet miroir
   visible) sans transformer la couleur de base. Toujours derrière l'image.
   ============================================================ */
.product-miniature .product-miniature__image-container::before {
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 26%,
      rgba(110,122,143,.20) 39%,
      rgba(255,255,255,.92) 49%,
      rgba(110,122,143,.13) 59%,
      rgba(255,255,255,0) 73%),
    radial-gradient(120% 85% at 20% 4%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 46%) !important;
}

/* ============================================================
   v153 — LA TOTALE. Le fond de la vignette = plaque sombre #1a1a1a + reflet
   miroir (reflet blanc => bien visible sur sombre). L'image (tuile grise
   #f3f3f3) reste intacte, SANS glossy. On neutralise les fonds qui écrasent.
   ============================================================ */

/* 1) image : tuile grise conservée, AUCUN reflet (reflet ::before désactivé) */
.product-miniature .product-miniature__image-container::before { display:none !important; content:none !important; }
.product-miniature .product-miniature__image-container,
.product-miniature .product-miniature__image-container.thumbnail-container {
  background:#f3f3f3 !important;
}

/* 2) fond de la vignette = plaque sombre #1a1a1a + reflet glossy bien visible */
.product-miniature .product-miniature__inner {
  background-color:#1a1a1a !important;
  background-image:
    linear-gradient(120deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.10) 45%,
      rgba(255,255,255,.38) 50%,
      rgba(255,255,255,.10) 55%,
      rgba(255,255,255,0) 70%),
    radial-gradient(130% 80% at 18% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(160deg, #262626 0%, #1a1a1a 48%, #121212 100%) !important;
}

/* 3) divs qui écrasaient le fond -> transparents pour laisser voir la plaque */
.product-miniature .product-miniature__bottom { background:transparent !important; }
.product-miniature .product-miniature__top { background:transparent !important; }

/* 4) texte lisible sur la plaque sombre */
.product-miniature .product-miniature__title,
.product-miniature .product-miniature__title a { color:#f1f1f1 !important; }
.product-miniature .product-miniature__infos { color:#cfcfcf !important; }

/* ============================================================
   v154 — reflet glossy atténué (plus discret) sur la plaque #1a1a1a.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-image:
    linear-gradient(120deg,
      rgba(255,255,255,0) 32%,
      rgba(255,255,255,.05) 46%,
      rgba(255,255,255,.18) 50%,
      rgba(255,255,255,.05) 54%,
      rgba(255,255,255,0) 68%),
    radial-gradient(130% 80% at 18% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(160deg, #232323 0%, #1a1a1a 50%, #151515 100%) !important;
}

/* ============================================================
   v155 — reflet glossy atténué de moitié (encore plus discret).
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-image:
    linear-gradient(120deg,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.025) 47%,
      rgba(255,255,255,.09) 50%,
      rgba(255,255,255,.025) 53%,
      rgba(255,255,255,0) 66%),
    radial-gradient(130% 80% at 18% 0%, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(160deg, #1e1e1e 0%, #1a1a1a 52%, #171717 100%) !important;
}

/* ============================================================
   v156 — meilleure RÉPARTITION du reflet glossy : deux raies de lumière
   parallèles (haute + basse) + voile doux en haut, sur la plaque #1a1a1a.
   Discret, façon plaque plastique avec balayage de lumière.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-image:
    linear-gradient(122deg, transparent 16%, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 29%, rgba(255,255,255,.03) 33%, transparent 41%),
    linear-gradient(122deg, transparent 50%, rgba(255,255,255,.035) 59%, rgba(255,255,255,.085) 63%, rgba(255,255,255,.02) 67%, transparent 77%),
    radial-gradient(150% 110% at 26% -12%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(160deg, #1f1f1f 0%, #1a1a1a 55%, #151515 100%) !important;
}

/* ============================================================
   v157 — aspect MÉTALLIQUE BRILLANT (au lieu du glossy) : bandes acier
   (réflexion anisotrope métal poli) + raie spéculaire brillante. Base sombre
   proche de l'existant (#1a1a1a), reflets gris acier.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-color:#1a1a1a !important;
  background-image:
    linear-gradient(122deg, transparent 33%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.08) 54%, transparent 63%),
    linear-gradient(125deg,
      #1b1b1e 0%,
      #2f3137 10%,
      #19191b 22%,
      #3b3d44 38%,
      #171719 50%,
      #303239 62%,
      #1a1a1d 74%,
      #34363d 88%,
      #1f2024 100%) !important;
}

/* ============================================================
   v158 — métallique plus DISCRET : bandes acier rapprochées de la base #1a1a1a
   (moins contrastées) + raie spéculaire plus douce.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-image:
    linear-gradient(122deg, transparent 35%, rgba(255,255,255,.05) 47%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.05) 53%, transparent 62%),
    linear-gradient(125deg,
      #1a1a1c 0%,
      #232428 10%,
      #18181a 22%,
      #282a2f 38%,
      #171719 50%,
      #242528 62%,
      #1a1a1c 74%,
      #26282c 88%,
      #1b1b1e 100%) !important;
}

/* ============================================================
   v159 — stries métalliques en TONS FONCÉS : les bandes vont plus sombres que
   la base #1a1a1a (acier sombre brossé) au lieu de gris clairs. Brillance
   réduite à un léger filet.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-image:
    linear-gradient(122deg, transparent 41%, rgba(255,255,255,.04) 49%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 51%, transparent 59%),
    linear-gradient(125deg,
      #1a1a1c 0%,
      #131315 10%,
      #1d1d1f 22%,
      #0f0f11 38%,
      #1b1b1d 50%,
      #141416 62%,
      #1d1d1f 74%,
      #101012 88%,
      #19191b 100%) !important;
}

/* ============================================================
   v160 — adoucir la strie la plus claire à gauche (bande 22% ramenée près de
   la base) + filet brillant atténué.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-image:
    linear-gradient(122deg, transparent 42%, rgba(255,255,255,.03) 49%, rgba(255,255,255,.045) 50%, rgba(255,255,255,.02) 51%, transparent 58%),
    linear-gradient(125deg,
      #1a1a1c 0%,
      #141416 10%,
      #1a1a1d 22%,
      #0f0f11 38%,
      #1b1b1d 50%,
      #141416 62%,
      #1d1d1f 74%,
      #101012 88%,
      #19191b 100%) !important;
}

/* ============================================================
   v161 — striations métalliques FINES (moins d'ampleur, plus de vagues serrées)
   au lieu de grandes vagues. Tons foncés, période courte, brossé métal subtil.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-color:#1a1a1a !important;
  background-image:
    linear-gradient(122deg, transparent 44%, rgba(255,255,255,.03) 50%, transparent 56%),
    repeating-linear-gradient(123deg,
      #1a1a1c 0px,
      #151517 7px,
      #1c1c1e 14px,
      #131315 21px,
      #1a1a1c 28px) !important;
}

/* ============================================================
   v162 — striation métallique nettement plus douce : variation de tons très
   resserrée autour de #1a1a1a (à peine perceptible) + filet brillant quasi nul.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-image:
    linear-gradient(122deg, transparent 46%, rgba(255,255,255,.018) 50%, transparent 54%),
    repeating-linear-gradient(123deg,
      #1a1a1c 0px,
      #181819 8px,
      #1c1c1d 16px,
      #171718 24px,
      #1a1a1c 32px) !important;
}

/* ============================================================
   v163 — (1) supprime le liseré rouge sous le titre Fiche technique ;
   (2) formulaire d'avis (modale) charté/lisible ; (3) textes d'avis lisibles
   (nom auteur, date, titre étaient en #212529 sombre = illisibles).
   ============================================================ */

/* 1) pas de barre rouge sous "Fiche technique" */
.at-ft__title::after { display:none !important; }

/* 2) modale formulaire d'avis -> charte sombre lisible */
.product-comment-modal .modal-content {
  background:#181818 !important; color:#dcdcdc !important; border:1px solid #2a2a2a !important;
}
.product-comment-modal .modal-header,
.product-comment-modal .modal-footer { border-color:#2a2a2a !important; }
.product-comment-modal .modal-title,
.product-comment-modal .h2,
.product-comment-modal label,
.product-comment-modal legend,
.product-comment-modal p { color:#f1f1f1 !important; }
.product-comment-modal input[type=text],
.product-comment-modal input[type=email],
.product-comment-modal textarea,
.product-comment-modal select,
.product-comment-modal .form-control {
  background:#262626 !important; color:#ffffff !important; border:1px solid #3a3a3a !important;
}
.product-comment-modal input::placeholder,
.product-comment-modal textarea::placeholder { color:#8a8a8a !important; }
.product-comment-modal .close,
.product-comment-modal .btn-close { color:#fff !important; filter:invert(1) grayscale(1); opacity:.85 !important; }
.product-comment-modal .btn-primary { background:var(--at-red) !important; border-color:var(--at-red) !important; color:#fff !important; }
.product-comment-modal .btn-secondary,
.product-comment-modal .btn-outline-secondary { color:#dcdcdc !important; border-color:#444 !important; background:transparent !important; }

/* 3) textes des avis lisibles sur fond sombre */
.comment__author { color:#ededed !important; font-weight:600 !important; }
.comment__date { color:#9aa0a6 !important; }
.comment__title { color:#ffffff !important; }

/* ============================================================
   v164 — structurer le formulaire d'avis (était déstructuré : champs inline
   minuscules, textarea 201x54). Champs en bloc pleine largeur, textarea
   correcte, libellés au-dessus, critère en ligne.
   ============================================================ */
.product-comment-modal .modal-dialog { max-width:620px !important; }
.product-comment-modal .modal-body { padding:1.2rem 1.5rem 1rem !important; }
.product-comment-modal #post-product-comment-form input[type=text],
.product-comment-modal #post-product-comment-form textarea,
.product-comment-modal #post-product-comment-form .form-control {
  display:block !important; width:100% !important; box-sizing:border-box !important;
  padding:.55rem .7rem !important; border-radius:4px !important; float:none !important;
}
.product-comment-modal #post-product-comment-form input[type=text] { height:42px !important; }
.product-comment-modal #post-product-comment-form textarea,
.product-comment-modal #comment_content { min-height:120px !important; height:120px !important; resize:vertical !important; }
.product-comment-modal .form-label { display:block !important; margin:.75rem 0 .3rem !important; font-weight:600 !important; }
.product-comment-modal #criterions_list { list-style:none !important; padding:0 !important; margin:0 !important; }
.product-comment-modal .criterion-rating { display:flex !important; align-items:center; gap:.6rem; margin-bottom:.4rem; }

/* ============================================================
   v165 — étoiles de notation du formulaire d'avis invisibles (.star en
   visibility:hidden) : on les force visibles pour pouvoir noter.
   ============================================================ */
.product-comment-modal .grade-stars,
.product-comment-modal .grade-stars .star-content,
.product-comment-modal .grade-stars .star { visibility:visible !important; }
.product-comment-modal .grade-stars .star-content { display:inline-block !important; }

/* ============================================================
   v166 — étoiles de notation (fallback at-star) du formulaire d'avis.
   ============================================================ */
.product-comment-modal .grade-stars { display:inline-flex !important; gap:3px; vertical-align:middle; }
.product-comment-modal .grade-stars .at-star {
  cursor:pointer; font-size:28px; line-height:1; color:#4a4a4a; transition:color .12s ease;
}
.product-comment-modal .grade-stars .at-star.on { color:#f5c518; }

/* ============================================================
   v167 — croix de fermeture de la modale d'avis : était noire (mon filter:invert
   l'avait inversée) et collée au titre. → blanche, en haut à droite.
   ============================================================ */
.product-comment-modal .modal-content { position:relative !important; }
.product-comment-modal .modal-header { position:static !important; }
.product-comment-modal .close,
.product-comment-modal .modal-header .close {
  position:absolute !important; top:12px !important; right:16px !important;
  margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  filter:none !important; opacity:.9 !important; z-index:10 !important;
  font-size:30px !important; line-height:1 !important; color:#ffffff !important; cursor:pointer;
}
.product-comment-modal .close span,
.product-comment-modal .close:hover { color:#ffffff !important; }
.product-comment-modal .close:hover { opacity:1 !important; }

/* ============================================================
   v168 — fond des vignettes : dégradé simple (au lieu de l'imitation métal/
   striations). Dégradé diagonal doux dans les tons sombres autour de #1a1a1a.
   ============================================================ */
.product-miniature .product-miniature__inner {
  background-color:#1a1a1a !important;
  background-image: linear-gradient(135deg, #353539 0%, #1f1f21 50%, #0e0e10 100%) !important;
}

/* ============================================================
   v170 — vignette : (1) dégradé trop discret (couleurs trop proches) → écart
   accru pour qu'il soit visible ; (2) liseré blanc inset hérité de l'effet
   plaque (v149, l.2870) trop lourd → on l'atténue fortement.
   ============================================================ */
.product-miniature .product-miniature__inner {
  border:1px solid rgba(255,255,255,.04) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ============================================================
   v169 — boutons du formulaire d'avis (.btn-comment / .btn-comment-inverse)
   invisibles (texte gris sans fond). On les style charte : Envoyer rouge plein,
   Annuler contour clair. + alignement de la barre de boutons.
   ============================================================ */
.product-comment-modal .post-comment-buttons {
  display:flex !important; justify-content:flex-end !important; gap:.6rem !important;
  align-items:center !important; float:none !important;
}
.product-comment-modal .btn-comment,
.product-comment-modal .btn-comment-inverse {
  display:inline-block !important; padding:.55rem 1.4rem !important; border-radius:4px !important;
  font-weight:600 !important; line-height:1.2 !important; cursor:pointer !important;
  text-transform:uppercase !important; letter-spacing:.02em !important;
}
.product-comment-modal .btn-comment {
  background:var(--at-red) !important; border:1px solid var(--at-red) !important; color:#fff !important;
}
.product-comment-modal .btn-comment:hover { filter:brightness(1.1) !important; }
.product-comment-modal .btn-comment-inverse {
  background:transparent !important; border:1px solid #555 !important; color:#e6e6e6 !important;
}
.product-comment-modal .btn-comment-inverse:hover { border-color:#888 !important; color:#fff !important; }

/* ============================================================
   v171 — aérer le formulaire d'avis (champs trop serrés, boutons collés au
   textarea). Plus d'espace : padding modale, rythme vertical, séparation.
   ============================================================ */
.product-comment-modal .modal-body { padding:1.6rem 2rem 1.8rem !important; }
.product-comment-modal .modal-header { padding:1.2rem 2rem !important; }
.product-comment-modal #post-product-comment-form > .row { margin-bottom:1.4rem !important; }
.product-comment-modal #post-product-comment-form .row:first-child {
  padding-bottom:1.2rem !important; margin-bottom:1.4rem !important;
  border-bottom:1px solid #2a2a2a !important;
}
.product-comment-modal .form-label { margin:1.1rem 0 .45rem !important; }
.product-comment-modal #post-product-comment-form input[type=text],
.product-comment-modal #post-product-comment-form textarea { margin-bottom:.3rem !important; }
.product-comment-modal #comment_content { min-height:140px !important; height:140px !important; }
.product-comment-modal .post-comment-buttons { margin-top:.6rem !important; padding-top:.4rem !important; }
.product-comment-modal #criterions_list .criterion-rating { margin-bottom:.6rem !important; }

/* ============================================================
   v172 — image du produit dans le formulaire d'avis sur fond blanc
   (le sticker noir transparent se fondait dans le fond sombre de la modale).
   ============================================================ */
.product-comment-modal .product-cover {
  background:#fff !important; border-radius:6px !important; padding:6px !important;
}
.product-comment-modal .product-cover img { display:block !important; width:100% !important; }

/* ============================================================
   v173 — pages de BLOG (module ybc_blog) hors charte : texte sombre (#444)
   illisible sur fond noir, accents vert citron (#a5c90a), titres gris,
   encadré sommaire crème, « TABLE OF CONTENTS » en anglais.
   → charte AT (sombre/rouge), lisibilité, mise en page plus soignée.
   ============================================================ */

/* titre de l'article — calé sur les titres de section de l'accueil */
body.ybc_blog h1.page-heading,
body.ybc_blog .ybc-blog-post-title,
body.ybc_blog .blog-post-title {
  font-family:'Barlow Condensed',sans-serif !important;
  color:#fff !important; text-transform:uppercase !important;
  letter-spacing:1px !important; font-weight:600 !important;
  position:relative !important; padding-bottom:.6rem !important; margin-bottom:1rem !important;
}
body.ybc_blog h1.page-heading::after {
  content:''; position:absolute; left:0; bottom:0; width:64px; height:3px; background:var(--at-red);
}

/* titres d'articles dans la LISTE du blog (étaient vert citron) */
body.ybc_blog a.ybc_title_block,
body.ybc_blog .ybc_title_block a,
body.ybc_blog .ybc-blog-wrapper-content-main a.ybc_title_block {
  color:#fff !important; font-family:'Barlow Condensed',sans-serif !important;
  text-transform:uppercase !important; letter-spacing:.5px !important;
}
body.ybc_blog a.ybc_title_block:hover,
body.ybc_blog .ybc-blog-wrapper-content-main a.ybc_title_block:hover { color:var(--at-red-bright) !important; }
/* liens « Lire la suite » de la liste (étaient vert citron) */
body.ybc_blog a.read_more { color:var(--at-red-bright) !important; }
body.ybc_blog a.read_more:hover { color:#fff !important; }

/* ============================================================
   v177 — page article blog : (1) élargir la colonne article en amincissant
   la sidebar (pleine largeur) ; (2) sidebar plus compacte (cartes + titres
   réduits) + flèches de navigation discrètes ; (3) formulaire de commentaire
   en charte ; (4) popup « table of contents » en charte.
   ============================================================ */

/* (1) sidebar plus étroite, article plus large */
body.ybc_blog .columns-container .col-md-3 { flex:0 0 248px !important; max-width:248px !important; }
body.ybc_blog .columns-container .col-md-9 { flex:0 0 calc(100% - 248px) !important; max-width:calc(100% - 248px) !important; }

/* (2a) titres de blocs de la sidebar plus petits (étaient 28.8px) */
body.ybc_blog #left-column .title_blog,
body.ybc_blog #left-column .title_block,
body.ybc_blog .blog_sidebar .title_blog { font-size:18px !important; letter-spacing:.5px !important; }

/* (2b) cartes d'articles de la sidebar plus compactes */
body.ybc_blog #left-column .ybc_title_block { font-size:13.5px !important; line-height:1.35 !important; }
body.ybc_blog #left-column .slick-slide img,
body.ybc_blog #left-column [class*="latest-post"] img,
body.ybc_blog #left-column [class*="popular-post"] img { max-height:120px !important; object-fit:cover !important; width:100% !important; }
body.ybc_blog #left-column .ybc-blog-latest-post-content,
body.ybc_blog #left-column .ybc-blog-popular-post-content { padding:10px !important; font-size:12.5px !important; }
body.ybc_blog #left-column .ybc-blog-latest-post-content p { font-size:12.5px !important; line-height:1.45 !important; }

/* (2c) flèches de navigation discrètes (étaient de gros cercles rouges 42px) */
body.ybc_blog #left-column .slick-prev,
body.ybc_blog #left-column .slick-next,
body.ybc_blog .blog_sidebar .slick-prev,
body.ybc_blog .blog_sidebar .slick-next {
  background:transparent !important; box-shadow:none !important; border:0 !important;
  width:24px !important; height:24px !important; border-radius:0 !important; opacity:.55 !important;
}
body.ybc_blog #left-column .slick-prev:hover,
body.ybc_blog #left-column .slick-next:hover { opacity:1 !important; background:transparent !important; }
body.ybc_blog #left-column .slick-prev::before,
body.ybc_blog #left-column .slick-next::before,
body.ybc_blog .blog_sidebar .slick-prev::before,
body.ybc_blog .blog_sidebar .slick-next::before {
  color:#cfcfcf !important; font-size:22px !important; opacity:1 !important;
}

/* (3) formulaire « Laissez un commentaire » en charte (était fond blanc) */
body.ybc_blog .ybc_comment_form_blog {
  background:#161616 !important; border:1px solid #2a2a2a !important; border-radius:8px !important;
  padding:1.4rem 1.6rem !important;
}
body.ybc_blog .ybc_comment_form_blog label { color:#cfcfcf !important; }
body.ybc_blog .ybc_comment_form_blog .form-control,
body.ybc_blog .ybc_comment_form_blog input[type=text],
body.ybc_blog .ybc_comment_form_blog input[type=email],
body.ybc_blog .ybc_comment_form_blog textarea {
  background:#262626 !important; color:#fff !important; border:1px solid #3a3a3a !important;
}
body.ybc_blog .ybc_comment_form_blog .form-control::placeholder,
body.ybc_blog .ybc_comment_form_blog textarea::placeholder { color:#8a8a8a !important; }
body.ybc_blog .ybc_comment_form_blog input.button,
body.ybc_blog .ybc_comment_form_blog button[type=submit],
body.ybc_blog .ybc_comment_form_blog .btn {
  background:var(--at-red) !important; border-color:var(--at-red) !important; color:#fff !important;
}
body.ybc_blog .ybc_comment_form_blog input.button:hover { background:var(--at-red-dark) !important; }
/* étoiles de notation de l'article */
body.ybc_blog .blog_rating_wrapper i,
body.ybc_blog .blog_rating_wrapper span,
body.ybc_blog .blog_rating_wrapper a { color:#5a5a5a !important; }
body.ybc_blog .blog_rating_wrapper .on,
body.ybc_blog .blog_rating_wrapper .hover,
body.ybc_blog .blog_rating_wrapper i:hover { color:#f5c518 !important; }

/* (4) popup flottant « table of contents » en charte (était fond blanc + titre vert) */
body.ybc_blog .table_content {
  background:#161616 !important; border:1px solid #2a2a2a !important;
  border-left:4px solid var(--at-red) !important; border-radius:8px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.6) !important;
}
body.ybc_blog .table_content .table-title { color:#fff !important; background:transparent !important; font-size:0 !important; }
body.ybc_blog .table_content .table-title::before {
  content:'Sommaire'; font-size:1.1rem; font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:1px; font-weight:600; color:#fff;
}
/* bouton de fermeture : texte « Close » masqué, remplacé par une croix blanche */
body.ybc_blog .table_content .table-title .btn_close_table_content {
  font-size:0 !important; color:transparent !important; transform:none !important;
  position:absolute !important; top:14px !important; right:16px !important; cursor:pointer;
}
body.ybc_blog .table_content .table-title .btn_close_table_content::before {
  content:'\00d7'; font-size:24px !important; line-height:1; color:#cfcfcf !important;
}
body.ybc_blog .table_content .table-title .btn_close_table_content:hover::before { color:#fff !important; }
body.ybc_blog .table_content a { color:#d6d6d6 !important; }
body.ybc_blog .table_content a:hover { color:var(--at-red-bright) !important; }

/* ============================================================
   v179 — tout le blog (articles, liste, catégories) exploite PLEINEMENT la
   largeur de l'écran ; colonne de gauche alignée/resserrée et restylée pour
   coller à la colonne de gauche de la page catégorie (titres Barlow majuscules
   soulignés rouge, séparateurs fins, plus de fonds « boîte »).
   ============================================================ */

/* (1) blog en pleine largeur écran (le reste du site reste à 1320 centré) */
body.ybc_blog .columns-container.container,
body.ybc_blog .columns-container {
  max-width:100% !important; width:100% !important;
  padding-left:40px !important; padding-right:40px !important;
}
body.ybc_blog #wrapper > .container,
body.ybc_blog .breadcrumb {
  max-width:100% !important; padding-left:40px !important; padding-right:40px !important;
}
/* sidauche un peu plus large vu l'écran complet, article prend le reste */
body.ybc_blog .columns-container .col-md-3 { flex:0 0 260px !important; max-width:260px !important; }
body.ybc_blog .columns-container .col-md-9 { flex:0 0 calc(100% - 260px) !important; max-width:calc(100% - 260px) !important; }

/* (2) titres des blocs façon page catégorie (.slc-title) */
body.ybc_blog #left-column .title_blog,
body.ybc_blog #left-column .title_block,
body.ybc_blog .blog_sidebar .title_blog {
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:17.6px !important; font-weight:600 !important; color:#fff !important;
  text-transform:uppercase !important; letter-spacing:.6px !important;
  display:block !important; width:100% !important; text-align:left !important;
  padding:0 0 7px 0 !important; margin:0 0 14px 0 !important;
  border-bottom:2px solid var(--at-red) !important;
}
body.ybc_blog #left-column .title_blog::after,
body.ybc_blog .blog_sidebar .title_blog::after { display:none !important; }

/* (3) cartes d'articles : plus de fond « boîte », aligné, resserré, séparateur fin */
body.ybc_blog #left-column .ybc-blog-latest-post-content,
body.ybc_blog #left-column .ybc-blog-popular-post-content,
body.ybc_blog #left-column .ybc_blog_content_block_item,
body.ybc_blog #left-column .blog_sidebar .post-item {
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 0 16px 0 !important; margin:0 0 16px 0 !important;
  border-bottom:1px solid #242424 !important;
}
/* fond clair du conteneur image (placeholder) neutralisé */
body.ybc_blog #left-column .ybc_item_img { background:transparent !important; }
body.ybc_blog #left-column .slick-slide img,
body.ybc_blog #left-column [class*="latest-post"] img,
body.ybc_blog #left-column [class*="popular-post"] img {
  max-height:130px !important; width:100% !important; object-fit:cover !important;
  border-radius:6px !important; margin-bottom:8px !important;
}
body.ybc_blog #left-column .ybc_title_block {
  font-size:14px !important; line-height:1.3 !important; font-weight:600 !important;
  display:block !important; margin:0 0 6px 0 !important;
}
body.ybc_blog #left-column .ybc-blog-latest-post-content p,
body.ybc_blog #left-column .ybc-blog-popular-post-content p {
  font-size:12.5px !important; line-height:1.5 !important; margin:0 0 6px 0 !important; color:#bdbdbd !important;
}

/* (4) blocs présentés en PANNEAUX comme la colonne catégorie (.left-block) :
   fond #1a1a1a, bordure #2a2a2a, coins arrondis, padding ~15px. La séparation
   des blocs se fait par ces panneaux, pas par des bandeaux nus. */
body.ybc_blog #left-column .block,
body.ybc_blog #left-column .ybc_blog_block {
  background:#1a1a1a !important; border:1px solid #2a2a2a !important; border-radius:6px !important;
  padding:14px 17px 18px !important; margin-bottom:18px !important;
}
body.ybc_blog #left-column { padding:0 20px !important; }
/* blocs retirés de la colonne de gauche du blog : galerie photos, archives, top auteurs */
body.ybc_blog #left-column .ybc_block_gallery,
body.ybc_blog #left-column .ybc_block_archive,
body.ybc_blog #left-column .ybc_block_author { display:none !important; }
/* dernier élément d'un panneau : pas de trait de séparation superflu */
body.ybc_blog #left-column .block .ybc_blog_content_block_item:last-child,
body.ybc_blog #left-column .block .ybc-blog-latest-post-content:last-child { border-bottom:0 !important; padding-bottom:0 !important; margin-bottom:0 !important; }
/* liens de l'arbre des catégories : gris clair comme la catégorie (rouge au survol seulement) */
body.ybc_blog #left-column [class*="category_"] a { color:#d8d8d8 !important; }
body.ybc_blog #left-column [class*="category_"] a:hover { color:var(--at-red) !important; }
body.ybc_blog #left-column .search_blog input,
body.ybc_blog #left-column .form-control { width:100% !important; }

/* ============================================================
   v181 — hero d'article « sexy » : photo cinématique (hauteur fixe, coins
   arrondis, ombre) + dégradé sombre en bas, titre superposé en blanc dessus.
   ============================================================ */
body.ybc_blog .ybc-blog-wrapper-detail { position:relative !important; }
body.ybc_blog .ybc-blog-wrapper-detail .ybc_blog_img_wrapper {
  position:relative !important; border-radius:14px !important; overflow:hidden !important;
  box-shadow:0 16px 44px rgba(0,0,0,.6) !important; margin-bottom:0 !important;
}
body.ybc_blog .ybc-blog-wrapper-detail .ybc_blog_img_wrapper a,
body.ybc_blog .ybc-blog-wrapper-detail .ybc_image-single { display:block !important; }
body.ybc_blog .ybc-blog-wrapper-detail .ybc_blog_img_wrapper img {
  display:block !important; width:100% !important; height:480px !important;
  object-fit:cover !important; border-radius:0 !important; box-shadow:none !important;
}
/* dégradé sombre en bas de la photo pour faire ressortir le titre */
body.ybc_blog .ybc-blog-wrapper-detail .ybc_blog_img_wrapper::after {
  content:''; position:absolute !important; left:0; right:0; bottom:0; height:65% !important;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,0) 100%) !important;
  pointer-events:none !important; z-index:1 !important;
}
/* on remonte le bloc contenu pour superposer le titre sur la photo */
body.ybc_blog .ybc-blog-wrapper-detail .ybc-blog-wrapper-content.content-right {
  margin-top:-160px !important; position:relative !important; z-index:3 !important;
  padding:0 36px !important;
}
/* titre superposé blanc */
body.ybc_blog .ybc-blog-wrapper-content.content-right h1.page-heading {
  color:#fff !important; font-size:2.3rem !important; line-height:1.15 !important;
  text-shadow:0 2px 16px rgba(0,0,0,.7) !important; margin:0 0 .6rem 0 !important;
  padding-bottom:.5rem !important; max-width:80% !important;
}
body.ybc_blog .ybc-blog-wrapper-content.content-right h1.page-heading::after {
  content:'' !important; position:absolute; left:36px; bottom:-2px; width:70px; height:4px;
  background:var(--at-red) !important;
}
/* méta (vues / date) superposées sous le titre, en clair */
body.ybc_blog .ybc-blog-wrapper-content.content-right .ybc-blog-latest-toolbar,
body.ybc_blog .ybc-blog-wrapper-content.content-right .blog-extra { position:relative !important; z-index:3 !important; }
body.ybc_blog .ybc-blog-wrapper-content.content-right .ybc-blog-latest-toolbar-views,
body.ybc_blog .ybc-blog-wrapper-content.content-right .ybc-blog-latest-toolbar-views * { color:#e8e8e8 !important; }
/* on redonne de l'air avant le partage social (qui revient sous la photo) */
body.ybc_blog .ybc-blog-wrapper-content.content-right .post-details { margin-top:24px !important; }

/* ============================================================
   v182 — blog visuellement trop chargé : (1) trop de flèches de slider dans la
   colonne de gauche (3 sliders × 2) → masquées ; (2) boutons de partage
   multicolores (bleu/noir/rouge…) qui « flashent » → monochrome sombre ;
   (3) rouge néon (#ff2940) atténué vers le rouge charte (#d1001c).
   ============================================================ */

/* (1) flèches de navigation : cercle sombre + chevron SVG centré (centrage
   parfait via background-position:center). Centrées sur la vignette, dans la colonne. */
body.ybc_blog #left-column .slick-arrow,
body.ybc_blog #left-column .slick-prev,
body.ybc_blog #left-column .slick-next {
  position:absolute !important; top:65px !important; bottom:auto !important;
  transform:translateY(-50%) !important;
  width:32px !important; height:32px !important; margin:0 !important; padding:0 !important;
  border:1px solid rgba(255,255,255,.35) !important; border-radius:50% !important;
  box-shadow:0 2px 6px rgba(0,0,0,.5) !important; opacity:.95 !important; z-index:6 !important;
  font-size:0 !important; line-height:0 !important; color:transparent !important; text-indent:-9999px !important; overflow:hidden !important;
  background-color:rgba(0,0,0,.72) !important;
  background-repeat:no-repeat !important; background-position:center center !important; background-size:13px 13px !important;
}
body.ybc_blog #left-column .slick-prev {
  left:8px !important; right:auto !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important;
}
body.ybc_blog #left-column .slick-next {
  right:8px !important; left:auto !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}
body.ybc_blog #left-column .slick-prev:hover,
body.ybc_blog #left-column .slick-next:hover { opacity:1 !important; background-color:var(--at-red) !important; border-color:var(--at-red) !important; }
body.ybc_blog #left-column .slick-prev.slick-disabled,
body.ybc_blog #left-column .slick-next.slick-disabled { opacity:.4 !important; }
body.ybc_blog #left-column .slick-prev::before,
body.ybc_blog #left-column .slick-next::before { content:none !important; display:none !important; }

/* (2) boutons de partage uniformes (sombre + icône claire, rouge au survol) */
body.ybc_blog .ybc-blog-tags-social a,
body.ybc_blog .ybc-blog-tags-social a.text-hide {
  background:#1f1f1f !important; border:1px solid #333 !important; color:#e6e6e6 !important;
}
body.ybc_blog .ybc-blog-tags-social a i,
body.ybc_blog .ybc-blog-tags-social a svg { color:#e6e6e6 !important; fill:#e6e6e6 !important; }
body.ybc_blog .ybc-blog-tags-social a:hover { background:var(--at-red) !important; border-color:var(--at-red) !important; }
body.ybc_blog .ybc-blog-tags-social a:hover i,
body.ybc_blog .ybc-blog-tags-social a:hover svg { color:#fff !important; fill:#fff !important; }

/* (3) atténuer le rouge néon dans le blog (liens, puces, losange sommaire) */
body.ybc_blog .blog_description a,
body.ybc_blog a.read_more,
body.ybc_blog a.ybc_title_block:hover,
body.ybc_blog .breadcrumb-link,
body.ybc_blog #left-column [class*="category_"] a { color:var(--at-red) !important; }
body.ybc_blog .blog_description ul li::marker { color:#9a9a9a !important; }
body.ybc_blog .ybc_indexing_box .close_open_heading,
body.ybc_blog .ybc_indexing_box .close_open_heading::before,
body.ybc_blog .ybc_indexing_box .close_open_heading::after { color:#8a8a8a !important; background:#8a8a8a !important; }

/* ============================================================
   v183 — colonne gauche : plus de slider (tout empilé et visible) ; titres
   allégés (moins de rouge) ; sommaire adouci ; meilleurs alignements et
   continuité de lecture (l'article doit sembler d'un seul tenant).
   ============================================================ */

/* (1) les widgets de la colonne de gauche redeviennent des SLIDERS (un article
   à la fois, navigation par flèches) → on laisse slick gérer track/slides. */
body.ybc_blog #left-column .slick-list { overflow:hidden !important; }
body.ybc_blog #left-column .ybc_blog_content_block.blog_type_slider { position:relative !important; }

/* (2) titres des blocs : MÊME style que la colonne catégorie (.slc-title) →
   souligné rouge 2px qui sépare clairement les blocs */
body.ybc_blog #left-column .title_blog,
body.ybc_blog #left-column .title_block,
body.ybc_blog .blog_sidebar .title_blog {
  font-family:'Barlow Condensed',sans-serif !important; font-size:17.6px !important;
  font-weight:600 !important; color:#fff !important; text-transform:uppercase !important;
  letter-spacing:.6px !important; display:block !important; width:100% !important;
  padding:0 0 7px 0 !important; margin:0 0 16px 0 !important;
  border-bottom:2px solid var(--at-red) !important;
}
/* titres de section dans l'article : trait fin au lieu de la barre rouge */
body.ybc_blog .blog_description h2,
body.ybc_blog .blog_description h3,
body.ybc_blog .ybc_heading {
  border-bottom:1px solid #2c2c2c !important; padding-bottom:.45rem !important;
}

/* (3) sommaire adouci : moins de rouge, plus intégré au fil de lecture */
body.ybc_blog .ybc_indexing_box,
body.ybc_blog .table_content {
  border:1px solid #242424 !important; border-left:1px solid #242424 !important;
  background:#121212 !important;
}

/* (4) continuité de lecture : rythme vertical homogène, tout aligné à gauche */
body.ybc_blog .blog_description { line-height:1.8 !important; }
body.ybc_blog .blog_description h2,
body.ybc_blog .blog_description h3 { margin-top:2.4rem !important; margin-bottom:1rem !important; }
body.ybc_blog .blog_description p,
body.ybc_blog .blog_description ul,
body.ybc_blog .blog_description ol { margin-bottom:1.1rem !important; }
/* tout le contenu de l'article partage la même marge gauche */
body.ybc_blog .ybc-blog-wrapper-content.content-right .post-details,
body.ybc_blog .ybc-blog-wrapper-content.content-right .blog-extra,
body.ybc_blog .ybc-blog-wrapper-content.content-right .ybc_indexing_box,
body.ybc_blog .ybc-blog-wrapper-content.content-right .ybc-blog-wrapper-comment { padding-left:0 !important; padding-right:0 !important; }

/* image héro de l'article : coins arrondis + ombre */
body.ybc_blog .ybc_image-single img,
body.ybc_blog .single-post-img img,
body.ybc_blog .blog_img_detail img { border-radius:10px !important; box-shadow:0 8px 24px rgba(0,0,0,.5) !important; }

/* corps de l'article lisible */
body.ybc_blog .blog_description,
body.ybc_blog .post-details,
body.ybc_blog .post-details p,
body.ybc_blog .blog_description p,
body.ybc_blog .blog_description li,
body.ybc_blog .post-details li,
body.ybc_blog .blog_description td,
body.ybc_blog .blog_description span { color:#cfcfcf !important; }
body.ybc_blog .blog_description { line-height:1.75 !important; font-size:1.02rem !important; }
body.ybc_blog .blog_description strong,
body.ybc_blog .blog_description b { color:#ffffff !important; }
body.ybc_blog .blog_description a { color:var(--at-red-bright) !important; }
body.ybc_blog .blog_description a:hover { color:#fff !important; }
body.ybc_blog .blog_description ul li::marker { color:#8a8a8a !important; }

/* titres de section (h2/h3) : blanc + souligné rouge (était gris + vert) */
body.ybc_blog .blog_description h2,
body.ybc_blog .blog_description h3,
body.ybc_blog .ybc_heading {
  color:#fff !important; font-family:'Barlow Condensed',sans-serif !important;
  text-transform:uppercase !important; letter-spacing:.5px !important;
  border-bottom:1px solid #2c2c2c !important; padding-bottom:.45rem !important;
  margin-top:2.4rem !important; margin-bottom:1rem !important;
}

/* Sommaire affiché comme du texte normal de l'article : pas d'encadré,
   pas de bouton développer/réduire, toujours visible en entier. */
body.ybc_blog .ybc_indexing_box {
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important; margin:1.6rem 0 2rem !important;
}
body.ybc_blog .ybc_indexing_box a,
body.ybc_blog .ybc_indexing_box li,
body.ybc_blog .ybc_indexing_box span { color:#cfcfcf !important; }
body.ybc_blog .ybc_indexing_box a:hover { color:var(--at-red) !important; }
/* on retire le bouton développer / réduire */
body.ybc_blog .ybc_indexing_box .close_open_heading,
body.ybc_blog .ybc_indexing_box_title .close_open_heading { display:none !important; }
/* le contenu du sommaire reste toujours déployé */
body.ybc_blog .ybc_indexing_content_post {
  display:block !important; height:auto !important; max-height:none !important; overflow:visible !important;
}
/* titre « Sommaire » comme un titre de section de l'article */
body.ybc_blog .ybc_indexing_box_title {
  font-size:0 !important; color:#fff !important; cursor:default !important;
  padding:0 0 .45rem 0 !important; margin:0 0 1rem 0 !important;
  border-bottom:1px solid #2c2c2c !important;
}
body.ybc_blog .ybc_indexing_box_title::before {
  content:'Sommaire'; font-size:1.4rem; font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.5px; font-weight:600; color:#fff;
}

/* boutons « VOIR TOUT » / tags / liens en rouge (étaient vert citron) */
body.ybc_blog .blog_view_all,
body.ybc_blog .view_all_link,
body.ybc_blog .ybc-blog-tag-a {
  background:var(--at-red) !important; color:#fff !important; border-color:var(--at-red) !important;
}
body.ybc_blog .blog_view_all:hover,
body.ybc_blog .view_all_link:hover,
body.ybc_blog .ybc-blog-tag-a:hover { background:var(--at-red-dark) !important; color:#fff !important; }

/* bouton flottant du sommaire (cercle vert) → rouge */
body.ybc_blog .ybc_btn_show_table_content { background:var(--at-red) !important; border-color:var(--at-red) !important; }

/* liens fil d'ariane / catégories en rouge (étaient vert) */
body.ybc_blog .breadcrumb-link { color:var(--at-red-bright) !important; }

/* cartes d'articles de la sidebar : fond sombre + texte clair */
body.ybc_blog .ybc-blog-latest-post-content,
body.ybc_blog .ybc-blog-popular-post-content,
body.ybc_blog .blog_sidebar .post-item {
  background:#161616 !important; border:1px solid #2a2a2a !important; border-radius:8px !important;
}
body.ybc_blog .blog_sidebar .post-item,
body.ybc_blog .blog_sidebar .post-item p,
body.ybc_blog .ybc-blog-latest-post-content,
body.ybc_blog .ybc-blog-latest-post-content p { color:#cfcfcf !important; }
body.ybc_blog .blog_sidebar .post-item a:hover { color:var(--at-red-bright) !important; }

/* ============================================================
   v174 — at-charte.css est chargé AVANT les CSS du module ybc_blog : à
   spécificité égale + !important, les règles du module (chargées après)
   l'emportent. On surenchérit en spécificité pour les derniers récalcitrants :
   liens du sommaire, arbre des catégories, losange/marqueurs verts.
   ============================================================ */
/* liens du sommaire (étaient gris #3a3a3a) */
body.ybc_blog .ybc_indexing_box .ybc_indexing_content_post .ybc_indexing a,
body.ybc_blog .ybc_indexing_box .ybc_indexing_content_post a { color:#d6d6d6 !important; }
body.ybc_blog .ybc_indexing_box .ybc_indexing_content_post .ybc_indexing a:hover { color:var(--at-red-bright) !important; }
/* losange / chevron d'ouverture du sommaire (vert) → rouge */
body.ybc_blog .ybc_indexing_box .ybc_indexing_box_title .close_open_heading,
body.ybc_blog .ybc_indexing_box .close_open_heading { color:#8a8a8a !important; }
body.ybc_blog .ybc_indexing_box .close_open_heading::before,
body.ybc_blog .ybc_indexing_box .close_open_heading::after { color:#8a8a8a !important; background:#8a8a8a !important; }

/* arbre des catégories de la sidebar (liens verts) → rouge */
body.ybc_blog #left-column .category_1 a,
body.ybc_blog #left-column [class*="category_"] a,
body.ybc_blog .blog_sidebar [class*="category_"] a { color:#d8d8d8 !important; }
body.ybc_blog #left-column [class*="category_"] a:hover { color:var(--at-red) !important; }

/* bloc sondage « Ce blog vous a-t-il été utile ? » : fond blanc + boutons verts */
body.ybc_blog .form-polls {
  background:#161616 !important; border:1px solid #2a2a2a !important; border-radius:8px !important;
}
body.ybc_blog .form-polls .polls-title span,
body.ybc_blog .form-polls span { color:#e6e6e6 !important; }
body.ybc_blog .form-polls label,
body.ybc_blog .form-polls button {
  background:var(--at-red) !important; border-color:var(--at-red) !important; color:#fff !important;
}
body.ybc_blog .form-polls label:hover,
body.ybc_blog .form-polls button:hover { background:var(--at-red-dark) !important; }

/* ============================================================
   v195 — fiche produit : la DESCRIPTION est toujours affichée (pas de
   repli/dépli). On supprime la flèche et on désactive le toggle.
   ============================================================ */
#product_description .accordion-button::after { display:none !important; }
#product_description .accordion-button {
  pointer-events:none !important; cursor:default !important;
}
#product_description .accordion-collapse {
  display:block !important; height:auto !important; visibility:visible !important;
}

/* ============================================================
   v195 — bloc « Avis » sous le bouton panier : titre + note moyenne + nombre.
   ============================================================ */
.product-comments-additional-info { display:block !important; text-align:left !important; }
/* « Les avis » : texte normal, pas un titre */
.product-comments-additional-info .pc-avis-title {
  display:block; margin:0 0 .4rem 0; padding:0; border:0;
  font-family:inherit; font-size:1rem; font-weight:400; text-transform:none;
  letter-spacing:normal; color:#ffffff;
}
.product-comments-additional-info .pc-avis-resume {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .6rem;
}
.product-comments-additional-info .pc-avis-note { font-size:1.1rem; font-weight:700; color:#fff; }
.product-comments-additional-info .pc-avis-count { color:#cfcfcf; font-size:.95rem; }
/* liens « Lire les avis utilisateurs » / « Donnez votre avis » : alignes a
   gauche, blancs, italiques */
.product-comments-additional-info .additional-links { text-align:left !important; }
.product-comments-additional-info .additional-links a,
.product-comments-additional-info .additional-links .link-comment {
  color:#ffffff !important; font-style:italic !important; text-align:left !important;
}
.product-comments-additional-info .additional-links a:hover {
  color:var(--at-red-bright) !important;
}

/* ============================================================
   v198 — MOBILE : le logo header revient à une taille raisonnable.
   En desktop le logo est volontairement grand (300px) avec marges
   negatives pour deborder vers le haut (effet prod). Ces regles
   n'etaient PAS gardees par un media query : en mobile le logo
   debordait tout le header. On le neutralise uniquement <= 991px.
   Le menu (hamburger) et le bouton « Filtrer » (offcanvas) restent
   le comportement natif Hummingbird, comme sur 123stickers.
   ============================================================ */
@media (max-width: 991.98px) {
  .header-bottom__logo { overflow:visible !important; padding:.3rem 0 !important; }
  .header-bottom__logo img,
  #header .logo img,
  .header .logo img {
    max-width: 150px !important;
    max-height: 46px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: static !important;
    z-index: auto !important;
  }
  /* la ligne logo/recherche/compte/panier reste compacte et centree */
  .header-bottom__row { min-height: 56px !important; align-items:center !important; }
}

/* ============================================================
   v200 — MOBILE : page categorie « comme 123stickers ».
   Hummingbird deplace deja les FILTRES dans l'offcanvas #offcanvas-faceted
   (ouvert par le bouton « Filtrer »), et masque le wrapper desktop des
   filtres via .d-none.d-md-block. Mais la colonne gauche affichait encore
   EN DUR, au-dessus des produits, l'arbre de categories (~700px) et le bloc
   reassurance #slc-blocks (~820px), repoussant les produits tres bas.
   On masque ces blocs non-filtres SOUS 768px (meme breakpoint md que les
   filtres) : la navigation categories reste accessible via le mega-menu
   « MENU », la reassurance via le footer, et les facettes via « Filtrer ».
   Tablette (>=768px) et desktop conservent la colonne gauche complete.
   ============================================================ */
@media (max-width: 767.98px) {
  #left-column .ps-categorytree,
  #left-column .category-tree,
  #left-column #slc-blocks {
    display: none !important;
  }
}

/* ============================================================
   v201 — MOBILE : barre « MENU » en charte + bouton « Filtrer » dans la
   meme barre (le bouton est clone par products-top.tpl en #at-filter-in-menu).
   ============================================================ */
@media (max-width: 767.98px) {
  /* le fond gris clair venait du .container du mega-menu : on le neutralise
     pour laisser apparaitre le fond noir de .ets_mm_megamenu_content */
  .ets_mm_megamenu_content > .container { background: transparent !important; }
  .ets_mm_megamenu_content {
    background: var(--at-surface) !important;
    border-bottom: 2px solid var(--at-red) !important;
  }
  /* contexte de positionnement pour le bouton Filtrer */
  .ets_mm_megamenu_content_content { position: relative !important; }
  /* MENU : libelle + icone hamburger en blanc */
  .ybc-menu-toggle, .ybc-menu-toggle * { color: #fff !important; }
  .ybc-menu-toggle .icon-bar { background-color: #fff !important; }

  /* bouton « Filtrer » clone, place a droite de la barre MENU,
     style noir/blanc identique au libelle MENU (pas de fond rouge) */
  #at-filter-in-menu {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    margin: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: .4rem .25rem !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    text-transform: none !important;
  }
  #at-filter-in-menu, #at-filter-in-menu:hover, #at-filter-in-menu:focus { color: #fff !important; background: transparent !important; }
  #at-filter-in-menu:hover { opacity: .85 !important; }
  #at-filter-in-menu .material-icons { font-size: 1.2rem !important; color: #fff !important; }
  /* le bouton « Filtrer » d'origine (dans products-top) est masque en mobile */
  #js-product-list-top .products__filter-button { display: none !important; }
}

/* ============================================================
   v202 — Croix de fermeture de l'offcanvas des filtres : visible (blanche)
   sur fond sombre (le .btn-close Bootstrap est une croix SVG noire a 50%
   d'opacite, invisible sur fond sombre).
   ============================================================ */
#offcanvas-faceted .btn-close,
.ps-facetedsearch--mobile .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 1 !important;
}

/* ============================================================
   v202 — FOOTER : le bloc contact « Boutique stickers » se chevauchait avec
   le copyright. Cause : la regle topbar (v104) « .ps-contactinfo {height:26px} »
   clippait aussi le bloc contact du footer, dont le contenu (adresse + tel +
   email) debordait alors sous le copyright. On rend sa hauteur naturelle.
   ============================================================ */
.ps-contactinfo.footer-block,
.ps-contactinfo.footer-block .ps-contactinfo__infos {
  height: auto !important;
}
.ps-contactinfo.footer-block .ps-contactinfo__phone,
.ps-contactinfo.footer-block .ps-contactinfo__email {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* ============================================================
   v205 — UNIFORMISATION : croix blanche de fermeture sur les panneaux
   coulissants (menu + filtres). Le filtre (#offcanvas-faceted) a deja sa
   croix blanche (v202) ; on generalise a tout offcanvas Bootstrap et on
   transforme le « Retour » du panneau MENU (mega-menu mobile) en une croix
   blanche identique, en haut a droite.
   ============================================================ */
/* tout offcanvas Bootstrap : croix de fermeture blanche */
.offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 1 !important;
}
@media (max-width: 991.98px) {
  /* panneau MENU : remplace « Retour » + fleche par une croix blanche */
  .ets_mm_megamenu .close_menu .pull-right {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  .ets_mm_megamenu .close_menu .pull-right .mm_menus_back_icon { display: none !important; }
  .ets_mm_megamenu .close_menu .pull-right::after {
    content: "\00d7";
    font-size: 30px !important;
    line-height: 1 !important;
    color: #fff !important;
    font-weight: 400 !important;
    font-family: Arial, "Helvetica Neue", sans-serif !important;
  }
}

/* ============================================================
   v206 — TUNNEL DE COMMANDE : lisibilite. Le recapitulatif (lignes
   .cart-summary__*) et les sous-titres de reassurance s'affichaient en
   #212529 (quasi noir) sur fond sombre -> illisibles. On passe en clair charte.
   ============================================================ */
#checkout .cart-summary__products,
#checkout .cart-summary__products *,
#checkout .cart-summary__line,
#checkout .cart-summary__line *,
#checkout .cart-summary-product__name,
#checkout .cart-summary-product__name *,
#checkout .cart-summary-product__quantity,
#checkout .cart-summary-product__price,
#checkout .cart-summary-product__prices,
#checkout .cart-summary-product__customizations,
#checkout .cart-summary-product__customizations * {
  color: #e6e6e6 !important;
}
/* Total TTC : blanc, mis en avant */
#checkout .cart-summary__line--bold,
#checkout .cart-summary__line--bold * {
  color: #ffffff !important;
}
/* Bloc reassurance (colonne droite) : sous-titres lisibles sur fond sombre */
.reassurance__content { color: #c2c2c2 !important; }
.reassurance__title { color: #ffffff !important; }

/* ============================================================
   v207 — TUNNEL : etape « Mode de livraison ». Les lignes transporteurs
   (.delivery-option__item) avaient un fond clair #f8f9fa (defaut Bootstrap)
   avec texte blanc -> noms/prix invisibles et hors charte. On les passe en
   fond sombre charte + texte clair, avec la ligne selectionnee accentuee rouge.
   ============================================================ */
#checkout .delivery-option__item,
#checkout .delivery-options .delivery-option {
  background: var(--at-surface) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 6px !important;
}
#checkout .delivery-option__item,
#checkout .delivery-option__item * {
  color: #e6e6e6 !important;
}
#checkout .delivery-option__item .delivery-option__carrier,
#checkout .delivery-option__item .delivery-option__price,
#checkout .delivery-option__item .carrier-price {
  color: #ffffff !important;
}
/* ligne transporteur selectionnee : accent rouge charte */
#checkout .delivery-option__item:has(input:checked),
#checkout .delivery-option--selected .delivery-option__item {
  border-color: var(--at-red) !important;
  box-shadow: inset 0 0 0 1px var(--at-red) !important;
}